Contraste: asegura que el texto sea legible sobre el fondo (prueba con herramientas de accesibilidad).

Tipografía: respeta la legibilidad. La «regla 10/20/30» de Guy Kawasaki para presentaciones no aplica directamente a web, pero sí el sentido común: fuentes claras y tamaños adecuados. 🔗

Responsividad: prueba el proyecto en distintos formatos (ordenador, tablet, teléfono) . 🔗

Contexto de uso: recuerda que se visualizará en una sala de grados con proyector (contrastes, tamaños, iluminación).

El storyboard es para presentaciones. En una web hablamos de arquitectura de la información: un mapa de cómo el usuario navegará entre secciones.

Diseña una navegación intuitiva que permita encontrar la información de forma rápida y sin complicaciones .

Las secciones deben estar bien delimitadas y los puntos principales destacados.

Aprovecha las ventajas del medio digital: mapas interactivos, gráficos dinámicos, botones que guíen al usuario .

Ejemplos de uso:

Mapa interactivo si los datos son geolocalizables.

Gráficos que se actualizan al pasar el ratón.

Líneas de tiempo interactivas para mostrar evolución.

La interactividad debe invitar al visitante a quedarse y explorar, no a sentirse abrumado.

Incluye elementos como vídeos, infografías animadas o presentaciones incrustadas.

Importante: cada elemento multimedia debe complementar el contenido, no ser un adorno.

Los vídeos cortos (máximo 2-3 minutos) funcionan mejor que los largos. En el caso que nos ocupa, incluso más breves.

Al tratarse de un proyecto académico con tecnologías profesionales, es importante que se conozcan no solo las herramientas, sino el proceso para construir la web de forma eficiente y visualmente impactante.

A. Planificación visual (antes de tocar el código)

• Diseña la estructura con un mapa mental: utiliza Xmind (gratuito) para planificar las secciones de la web y las conexiones entre páginas.

• Boceto rápido con Miro o pizarra: dibuja un wireframe sencillo de cómo se distribuirán los elementos en cada página (texto, gráficos, vídeos, botones).

• Storyboard opcional: si la web tiene una narrativa secuencial (ej: línea del tiempo interactiva), un storyboard ayuda a visualizar el flujo del usuario.

B. Construcción en WordPress + Divi

• WordPress será el gestor de contenidos (CMS). Existe diferencia entre entradas (posts, para contenido dinámico) y páginas (estáticas, para secciones fijas).

• Divi es el constructor visual (page builder) que permitirá:

  • Diseñar arrastrando y soltando elementos, sin tocar código.

  • Controlar la tipografía, colores, espaciados y responsive desde una interfaz visual.

  • Crear diseños complejos con columnas, superposiciones y efectos de scroll.

C. Elementos visuales e interactivos con Divi

• Módulos clave de Divi para proyectos:

  • Módulo de texto: para integrar las conclusiones del informe.

  • Módulo de imagen y galería: para mostrar fotos del proceso, maquetas o capturas.

  • Módulo de vídeo: para incrustar presentaciones o vídeos explicativos (YouTube, Vimeo o vídeo subido). No obstante es mejor utilizar módulo de código, porque no se pueden subir vídeos al servidor, dado que saturaríamos el alojamiento del mismo.

  • Módulo de mapa: si los datos tienen componente geográfico (usando Google Maps).

  • Módulo de llamada a la acción (CTA): para invitar a descargar el informe completo o a ver la presentación.

  • Módulo de acordeón o pestañas: ideal para mostrar preguntas frecuentes o agrupar información densa.

  • Módulo de contador / testimonios: para destacar datos clave con efecto visual.

  • Módulo de código: sirve para incrustar scripts o iframes y otro código HTML.

D. Integración de gráficos y datos

• Gráficos estáticos: los creados en Canva, Excel o Datawrapper se suben como imagen.

• Gráficos interactivos: puedes incrustar gráficos dinámicos desde Flourish o Datawrapper usando el módulo de código HTML de Divi (permite pegar el iframe o el script embebido).

• Infografías interactivas: las creadas en Genially también pueden incrustarse con el mismo método.

• Documentos: si quieres que el usuario pueda hojear el informe sin descargarlo, usa el módulo de PDF de Divi o incrusta el PDF con Google Drive Viewer.

E. Estrategia para la sala de grados (visualización en directo)

• Prueba de estrés: visualiza la web en un ordenador conectado al proyector de la sala. Ajusta tamaños de fuente y contraste si es necesario.

• Navegación fluida: asegúrate de que los botones y enlaces sean fáciles de clicar con el puntero del ratón durante la presentación.

• Plan B: ten preparadas capturas de pantalla de las secciones clave por si falla la conexión a internet o el navegador.

F. Recursos oficiales y tutoriales

• Divi en español – Documentación oficial: guías paso a paso sobre cada módulo y funcionalidad.

• Curso de Divi en español:

• Foro de ayuda de Divi (inglés): para resolver dudas técnicas.

• Flourish – Creación de gráficos interactivos: herramienta gratuita para visualizaciones dinámicas.

• Datawrapper – Gráficos simples y claros: ideal para mapas y gráficos rápidos.

• Genially – Infografías y presentaciones interactivas: para contenido visual incrustable.