infografía-explicativa

Infografía Explicativa

Construyes una página HTML de un solo archivo que explica un concepto como lo haría un gran explicador visual (Bartosz Ciechanowski, The Pudding, distill.pub): mediante desplazamiento, diagramas interactivos, analogías del mundo real y profundidad progresiva. El resultado debe hacer que un tema complejo sea comprensible para un no experto inteligente en menos de 5 minutos.

Antes de empezar

Obtén lo esencial:

1. El concepto — ¿qué estás explicando?
2. La audiencia — ¿quién lee? (Por defecto, un no experto inteligente)
3. El "por qué ahora" — ¿es para una reunión, una clase, un video, una publicación de blog, aprendizaje personal?
4. Profundidad — ¿intuición rápida (una pantalla) o exploración más profunda (desplazamiento largo)?

Si no se especifica, por defecto: no experto inteligente, lo suficientemente profundo para desplazarse durante 3-5 minutos, sin caso de uso específico.

Estructura

La mayoría de los conceptos se pueden explicar en 5 bloques. Construye la página en este orden:

1. El gancho (una pantalla)

Comienza con la pregunta o el dato sorprendente que hace que el concepto merezca la pena entenderlo. No "¿Qué es X" — algo como "¿Por qué los puentes construidos sobre el agua comienzan con cajas vacías?" o "¿Por qué una hipoteca a 30 años cuesta más del doble del precio de la casa?"

2. La analogía

Vincula el concepto desconocido con algo que el lector ya conoce. La analogía debe mantenerse a lo largo del resto de la página, no abandonarse después de la introducción. Ejemplos:

• Los LLM como "texto predictivo con esteroides"
• El flujo de efectivo como "agua a través de tuberías"
• DNS como "la guía telefónica de internet"

Elige una analogía sólida y comprométete con ella. Mezclar analogías confunde al lector.

3. El mecanismo (3-7 secciones)

Explica cómo funciona realmente la cosa, en orden. Para cada sección:

• Un encabezado claro
• Un párrafo corto
• Un visual — diagrama, animación o elemento interactivo
• (Opcional) una revelación "haz clic para profundizar" para los curiosos

Esta es la parte principal de la página. Los elementos visuales son lo que la diferencian de una publicación de blog.

4. Conceptos erróneos comunes

Una sección breve que aborda las cosas que la gente entiende mal sobre este tema. Formato como pares "Mito: X / Realidad: Y".

5. La conclusión

Un párrafo que lo vincula todo de nuevo con el gancho de la sección 1. Deja al lector con una frase que podría repetir en una cena.

Estilo visual

• Fondo blanco roto o blanco cálido — más suave para los ojos que el blanco puro para lectura larga
• Tipografía generosa — texto del cuerpo 18-20px, interlineado 1.6+, ancho máximo 65 caracteres
• Un color de acento — usado para resaltados, enlaces y el elemento clave en cada diagrama
• Diagramas en SVG — nítidos a cualquier nivel de zoom, personalizables mediante CSS
• Animación con propósito, no decorativa — anima cosas para mostrar cambio a lo largo del tiempo (un proceso que se desarrolla, un valor que crece, un sistema que reacciona). No animes solo porque puedas.
• Animación guiada por desplazamiento donde sea útil — para secuencias y procesos, usa animaciones activadas por desplazamiento para que el lector controle el ritmo. Para diagramas estáticos, omite el activador de desplazamiento.

Elementos interactivos (usa 2-3 por página como máximo)

• Control deslizante/entrada de rango — ajusta un parámetro y ve el efecto
• Conmutador — cambia entre dos estados (con/sin, antes/después)
• Revelar al hacer clic — detalle adicional para lectores curiosos
• Animación paso a paso — botón "Siguiente" para recorrer un proceso al ritmo del lector

No te excedas. Tres momentos interactivos bien diseñados superan a diez trucos.

Implementación técnica

Archivo único .html autónomo guardado como expliquer-[slug-del-tema].html. Sin dependencias externas — incrusta cualquier fuente, escribe SVG en línea, solo JavaScript vainilla.

Requerido:

• Adaptable a móviles — la mayoría de los lectores se desplazarán en un teléfono
• Accesible — HTML semántico, texto alternativo en diagramas, interactivos navegables por teclado
• Rápido — debe abrirse al instante, sin rueda de carga, sin retraso en la carga de activos

Reglas de contenido

1. Empieza con la analogía, no con la definición. "Una red neuronal es un aproximador de funciones" es correcto e inútil. "Una red neuronal es como una pila de reguladores de intensidad que aprenden a subirse o bajarse" es útil.
2. Usa números reales. "La mayoría de las hipotecas duran 30 años" es genérico. "Una hipoteca de $500K al 7% cuesta $1.2M en 30 años — $700K de eso son intereses" es memorable.
3. Muestra, no cuentes. Si te encuentras escribiendo "imagina si..." considera si puedes mostrarlo con un diagrama en su lugar.
4. No seas cursi. El ingenio está bien; el humor forzado distrae de la explicación. El objetivo es claridad, no entretenimiento.
5. Termina con una pregunta o implicación. Un buen explicador deja al lector pensando, no solo informado.

Por qué está construido así

Los explicadores de texto largo son fáciles de hojear y olvidar. Las diapositivas son demasiado comprimidas para los matices. Una página visual con desplazamiento se sitúa en el punto medio correcto: lo suficientemente larga para ser sustancial, lo suficientemente visual para ser memorable, lo suficientemente interactiva para invitar a la participación. Bien hecho, este es el formato que hace que los lectores tomen capturas de pantalla y compartan.

Después de generar

Dile al usuario:

1. La ruta del archivo
2. Cómo abrirlo
3. Una cosa específica que podría pedir para mejorarlo (no has terminado — los primeros borradores de los explicadores generalmente necesitan una ronda de "la sección X se siente débil")
4. Cómo compartir — el archivo es autónomo, por lo que pueden enviarlo por correo electrónico, dejarlo en Slack, alojarlo en cualquier lugar