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 el Trabajo Fin de Máster del Máster en Formación del Profesorado (Universidad de La Laguna), pensado para alumnado de Bachillerato y para docentes de Historia del Arte, con material didáctico alineado a la LOMLOE.

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 primero. El contenido manda: 38 páginas prerenderizadas y Preact reservado para las islas que de verdad necesitan interactividad —los minijuegos—, no para el resto del sitio.
• Content Collections + Zod como fuente de verdad tipada: 8 paradas, 8 artistas y 6 corrientes artísticas como markdown validado, más colecciones de datos para fuentes bibliográficas (29 referencias) y efemérides (24) que alimentan la línea de tiempo.
• 3D bajo demanda: los modelos (vía Sketchfab y model-viewer desde CDN) se cargan solo en las paradas que tienen modelo real, sin penalizar el peso de las demás.
• 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 siete tipos de JSON-LD (LearningResource, VisualArtwork, TouristAttraction, ItemList, BreadcrumbList, 3DModel, WebSite), sitemap y robots.

Trabajo realizado

• Sistema de diseño propio (tokens CSS, tipografía variable self-hosted) con dos modos conmutables por teclado: Explorador para estudio individual y Presentación para proyección en el aula.
• 8 fichas de parada con obra, artista, modelo 3D y preguntas de observación con guardado de respuestas.
• 9 minijuegos como islas Preact: ocho “gestos de autor” —uno por parada, que se desbloquean al sellarla— que reconstruyen el lenguaje plástico de cada maestro (el equilibrio del móvil de Calder, la interferencia cinética de Soto, el alfabeto de Vasarely…), más una “Constelación Creciente” que evoluciona a lo largo del recorrido. Comparten infraestructura: PRNG determinista, sistema de pistas, háptica, exportación a SVG y respeto a prefers-reduced-motion.
• Reportaje fotográfico propio de 28 obras entre esculturas y murales, con investigación de campo y ~60 fotos servidas firmadas y con marca de agua vía ImageKit.
• Material para el aula: página para docentes con secuencia LOMLOE de siete sesiones, rúbricas, ficha DUA y descarga del TFM; una sesión corta de 4 paradas para 50 minutos de clase; y el “Reto del Comisario”.
• Mapa del campus interactivo con pan, zoom y barra de escala que se recalcula, línea de tiempo de Villanueva con scroll-snap, cuaderno de hallazgos y un “Perfil de Mirada” exportable a PDF (jsPDF) como evidencia evaluable.
• Sistema de progreso y recompensa: catálogo de 16 credenciales, sellos de oro y registro de pistas y tiempo, todo persistido en localStorage mediante un envoltorio tipado y validado con Zod.
• Glosario con definiciones al pasar el cursor, inyectadas en el markdown por un plugin de remark sobre 54 términos.

Retos técnicos

El equilibrio entre riqueza interactiva y rendimiento fue el eje. Llevar los minijuegos de vanilla a islas Preact permitió compartir una base común (aleatoriedad reproducible, accesibilidad, exportación) sin renunciar a un sitio que sigue siendo estático en todo lo que no es juego, cargando la interactividad solo cuando entra en pantalla.

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 en las páginas clave.

Resultado

En la home auditada, LCP de 192 ms —muy por debajo del umbral de Google— con CLS prácticamente nulo y cero violaciones WCAG 2.2 AA. Un recurso que un docente puede proyectar y un estudiante puede recorrer solo, accesible desde cualquier dispositivo.