En este segundo módulo del curso vamos a desarrollar dos habilidades fundamentales:
- Reconocer y usar el ecosistema de publicación abierto y gratuito. Con esto, quiero dejarles unos insumos para que puedan desarrollar y publicar proyectos de visualización de datos, u otros proyectos similares de publicación digital, de forma profesional, sostenible y accesible.
- Desarrollar una publicación para internet que narre los datos. En el primer módulo desarrollaron habilidades de visualización; ahora vamos a pensar en las formas como esas visualizaciones se articulan en narrativas persuasivas, elocuentes y útiles para que sus públicos objetivo puedan sacarle el mayor provecho al trabajo.
Antes de empezar, cada estudiante debe preparar estas herramientas:
- Instalar Visual Studio Code. Este será el editor principal para abrir, modificar y revisar los archivos HTML, CSS y JavaScript del curso.
- Instalar la extensión Live Server en Visual Studio Code. Live Server no viene instalado por defecto; es una extensión que permite abrir una página local en el navegador y ver los cambios al guardar.
- Crear una cuenta gratuita en GitHub. La usaremos para guardar los proyectos y publicarlos como sitios web gratuitos con GitHub Pages.
- Instalar GitHub Desktop. Esta aplicación facilita descargar repositorios, guardar cambios y subirlos a GitHub sin usar la terminal.
Este repositorio funciona como una biblioteca de plantillas del curso. Para evitar confusiones con GitHub Pages, lo recomendado es crear un repositorio nuevo por cada proyecto y copiar allí el contenido de la plantilla elegida.
La guía completa está en flujo-de-trabajo.md.
Las plantillas están en la carpeta plantillas. Están pensadas como puntos de partida para pasar de una visualización aislada a una publicación web con estructura narrativa.
- 01 - Sitio estático con iframe: estructura mínima para publicar una visualización de Observable dentro de una página HTML.
- 02 - Artículo narrativo: página larga para combinar contexto, visualizaciones, hallazgos y cierre argumental.
- 03 - Datos locales: ejemplo para cargar datos desde CSV/JSON y convertirlos en componentes de una página.
- 04 - Componentes dinámicos: interfaz con filtros y estados para proyectos que necesitan exploración.
- 05 - Paralaje narrativo: relato tipo scrollytelling donde el desplazamiento activa escenas, capas visuales y comparaciones.
- 06 - Desplazamiento horizontal: relato en paneles laterales donde el scroll vertical mueve una secuencia horizontal.
Introducción: mostrar, visualizar, narrar. Del efecto al afecto.
Taller de publicación: el sitio estático más allá de lo básico. Estructura de HTML e inserción de visualizaciones usando iframe.
Componentes: narrativa y flujo de elementos en la pantalla. Estructura de HTML y diseño básico en CSS.
Simulacro de estudio de diseño y desarrollo de proyecto. Entre todos trabajamos en uno de los proyectos del curso. Nos dividimos en equipos para cada una de las etapas del proceso:
Fase 1:
- Definir el proyecto.
- Revisar el estado del proyecto actualmente.
- Definir el público objetivo.
Fase 2:
- Curaduría: Pule los textos para que no sean "académicos ladrilludos", sino narrativos.
- Diseño: Usa herramientas como Adobe Color o Pinterest para definir la estética.
- Desarrollo: Crea la estructura HTML, el diseño CSS y la lógica JavaScript para que el proyecto funcione. Teniendo en cuenta las secciones que componen la narrativa del proyecto.
- Visualización: Define qué visualizaciones se necesitan para contar la historia, y hazlas en Observable o D3.js. Luego las insertas en el sitio usando iframe o componentes personalizados.
Fase 3:
- Revisión cruzada entre equipos.
- El Protocolo de Implementación: Los equipos presentan su trabajo. Los otros equipos "auditan": ¿El proyecto es claro? ¿Funciona? ¿Es atractivo? ¿Cumple con su objetivo de comunicación? ¿Qué se puede mejorar?
- Compartir con los dueños del proyecto el material que cada grupo haya desarrollado.
Componentes dinámicos: JavaScript.
Narrativas en pantalla: pasar de la presentación bonita al argumento persuasivo.
Trabajo en clase sobre los proyectos, oportunidad para resolver dudas y ver adelantos.
Presentaciones finales.
Estos referentes muestran distintas formas de narrar, explorar y publicar información en internet.
 Hearts and Minds Narrativa visual interactiva |
 Why Expensive? Explicación interactiva |
 The Deep Sea Scroll vertical exploratorio |
 Histography Línea de tiempo interactiva |
 Siete horas Especial narrativo |
Veinticuatro siete Narrativa horizontal |
 Songwriters Análisis cultural con datos |
 Greatest Music Visualización editorial |
 Teenagers Historia guiada por scroll |
 Upward Mobility Exploración social con datos |
 Hamilton Análisis visual de texto |
 Stories Behind a Line Dibujo, memoria y recorrido |
 Rayuela Exploración literaria |
 Iliad Visualización textual |
 Selfiexploratory Interfaz de exploración |
 Carbon History Ensayo interactivo |
 The Refugee Project Mapa y datos históricos |
 Blue Heart Especial ambiental |
La ciudad como texto Archivo urbano interactivo |
 The Boat Relato inmersivo |
 Crianças Periodismo de datos |
 Mujeres de prensa Archivo y narrativa histórica |
 Historias de internet Narrativa web |
 Haciendo caminos Proyecto interactivo |
 Knowledge Database Mapa de conocimiento |
 Proyectos de EnFlujo Portafolio de proyectos digitales |
 dddrawings lab Experimentos de visualización de datos y animación |