Para curiosos técnicos

Sobre este sitio

Esta guía es una sola página HTML, sin frameworks ni base de datos. Todo el contenido vive dentro del archivo como datos de JavaScript y se dibuja en el navegador. Pesa unos 262 KB, más diez ilustraciones.

Con qué está hecho

HTML, CSS y JavaScriptSin librerías ni pasos de compilación. Plantillas con template literals.

Claude CodeEl agente de Anthropic escribió el código y los resúmenes, en conversación con Evelio Ramirez, que editó la guía.

Popplerpdftotext y pdftoppm para sacar el texto página por página y muestrear colores del PDF.

Google FontsBricolage Grotesque (títulos), IBM Plex Sans (texto) e IBM Plex Mono (datos y páginas).

GitHub PagesHospeda la versión pública, generada con un script de Python que crea una página estática por sección.

Claude ArtifactsLa misma página publicada también como artifact de Claude, donde se fue revisando.

Cómo se construyó

Extracción. Se sacó el texto de cada página del PDF y se relacionó la página del archivo con la página impresa, que es la que se cita en todo el sitio.
Fichas. Cada texto del libro se convirtió en una ficha: página, fase, tipo de texto (autores, colaborador o cita), título, autoría, resumen y fuentes. Los resúmenes son paráfrasis en español escritas leyendo cada página; las citas se parafrasean y se marcan así.
Fuentes. Se inventariaron las referencias que el libro imprime. Para cada una se distingue el enlace impreso en el libro del enlace encontrado después, que se marca aparte.
Capas de lectura. Sobre las fichas se armaron el recorrido por fases, los conceptos, las infografías, la lista de práctica y la página «Empezar aquí».
Diseño. Los colores salen de la portada: rojo #F72411 y morado #602866. Las cinco fases van del morado al rojo; las formas escalonadas imitan las de la portada.
Revisión. Se revisó en un navegador a 375 px de ancho, sección por sección, midiendo que nada se saliera de la pantalla.

Cómo está organizado el código

Todo el contenido está en constantes al comienzo del script:

PH        fases del recorrido y sus colores
FI        175 fichas: [página, fase, tipo, título, autoría, texto, fuentes]
SRC       171 fuentes citadas, con el enlace impreso y el encontrado
CONCEPTS  52 conceptos con sus páginas
PRAC      la lista de práctica por fase
IG        18 infografías, dibujadas con HTML, CSS y SVG

Rutas. La navegación usa el # de la dirección (#inicio, #framing, #sobre…). Una función render() elige la vista y reescribe el contenido principal; no se recarga la página.
Búsqueda. Compara el texto sin tildes ni mayúsculas en fichas, conceptos y fuentes, así que «senal» encuentra «señal».
Tu avance. Las casillas de la práctica se guardan solo en tu navegador (localStorage). No hay cuentas, servidor ni analítica.
Temas. Los colores son variables CSS con una versión clara y otra oscura, que sigue la preferencia del sistema.
Responsive. Las infografías usan container queries: se reacomodan según el ancho de su caja, no el de la pantalla.
Buscadores y modelos de lenguaje. En la versión pública, cada sección tiene su propia dirección (/conceptos/, /framing/…) con el contenido ya escrito en el HTML, título, descripción y datos estructurados de schema.org. Hay sitemap.xml, llms.txt y llms-full.txt, un texto en Markdown con todas las fichas, conceptos y fuentes para que un modelo de lenguaje pueda leer la guía completa.
Ilustraciones. Diez dibujos de Stefano Cardini recortados del PDF y nombrados por su página impresa (img/p41.png).

Código y licencia

El código y el contenido están en github.com/donpe/guia-design-futures. El archivo fuente es index.html; el script build.py genera la carpeta docs/ que publica GitHub Pages; para dibujar cada sección sin navegador usa prerender.js, que ejecuta el mismo código de la página en Node.

El libro se publica bajo CC BY-NC-SA 4.0 y esta guía se comparte bajo la misma licencia, sin uso comercial. Es una adaptación no oficial: para citar, usa el libro original.

Quién está detrás

Evelio Ramirez ideó, curó y editó esta guía. Vive en Colombia. Máster en Innovation Management de la Universidad EAFIT. LinkedIn ↗