Itinerario Virtual CUC

Contexto

Recurso educativo virtual sobre el patrimonio escultórico de la Ciudad Universitaria de Caracas —obra de Carlos Raúl Villanueva, declarada Patrimonio de la Humanidad por la UNESCO en 2000—. Es un proyecto académico desarrollado con la Universidad de La Laguna, pensado para alumnado de 2º de Bachillerato y para docentes de Historia del Arte.

El reto pedagógico: convertir ocho esculturas de maestros como Arp, Calder, Vasarely o Soto, y la idea de la “Síntesis de las Artes”, en una experiencia que un estudiante de 16-17 años recorra solo, en clase o proyectada en el aula.

Decisiones de arquitectura

• Astro estático, cero framework en el bundle principal. El contenido manda: 27 páginas prerenderizadas, con Preact solo en las islas que de verdad necesitan interactividad. El JavaScript de las animaciones y los juegos va en vanilla inline.
• Content Collections + Zod como fuente de verdad tipada: 8 paradas, 8 artistas y 8 corrientes artísticas como markdown validado, no como HTML disperso.
• 3D bajo demanda: los modelos (vía Sketchfab y model-viewer) se cargan solo cuando hay modelo real, sin penalizar el peso de las páginas que no lo usan.
• Imágenes OG dinámicas generadas en build con Satori (14+ tarjetas 1200×630) para que cada parada se comparta con su propia portada.
• SEO estructurado con JSON-LD (VisualArtwork, LearningResource, BreadcrumbList, 3DModel), sitemap y robots.

Trabajo realizado

• Sistema de diseño propio (tokens CSS, tipografía variable self-hosted, modo presentación para aula).
• 8 fichas de parada con obra, artista, modelo 3D y preguntas de observación con guardado de respuestas.
• 10 minijuegos educativos en SVG/canvas (ritmo visual de Vasarely, tricromía de Calder, interferencia de Soto…) con recompensas y progreso.
• Mapa del campus interactivo, timeline de Villanueva con scroll-snap, pasaporte del visitante en PDF y cuaderno de hallazgos sincronizado entre pestañas.
• Persistencia en localStorage de respuestas, paradas visitadas y progreso, con restauración automática.

Retos técnicos

El equilibrio entre riqueza interactiva y rendimiento fue el eje. Mantener diez minijuegos, modelos 3D y persistencia sin meter un framework pesado en el bundle obligó a separar con cuidado lo que es contenido (estático) de lo que es interacción (islas mínimas y vanilla bajo demanda).

La accesibilidad se trató como requisito, no como añadido: navegación por teclado, inert nativo para modales, objetivos táctiles de 44×44 px y contraste ≥ 4.5:1, auditado con axe-core hasta cero violaciones.

Resultado

LCP de 192 ms en home y ~100 ms en las paradas —doce veces por debajo del umbral de Google—, CLS prácticamente nulo y cero violaciones WCAG 2.2 AA en las páginas auditadas. Un recurso que un docente puede proyectar y un estudiante puede recorrer solo, accesible desde cualquier dispositivo.