herramienta educativa web para el curso de Tipografía que articule la “Constelación de atributos de Moles”
Situation
Debes crear una herramienta educativa web para el curso de Tipografía que articule la “Constelación de atributos de Moles” en dos niveles:
Nivel micro: atributos tipográficos (peso, contraste, serif/sans, proporciones, etc.) y sus valores psicológicos (pesadez, dinamismo, simpleza, elegancia, fragilidad, etc.).
Nivel macro: retícula de moles en página (disposición de bloques y nodos de composición).
La interfaz usará imágenes por capas y hotspots (.hs) para que el estudiante identifique:
partes de la letra y atributos formales,
su interpretación connotativa (constelación de atributos de Moles),
su rol dentro de la retícula/constelación de moles en la página.
Además, necesitas un tooltip global reutilizable y un formulario que envíe resultados al estudiante y al docente.
Task
Desarrollar un formulario HTML interactivo y responsive que:
Capas visuales + hotspots (Capas 1 y 2 siempre activas, capa 3 solo con hotspots)
Capa 1: Imagen base (foto o captura de composición tipográfica).
Capa 2: Overlay gráfico (signo, figura o pictograma, enlaces a video) para reforzar partes de la letra y atributos formales (light, regular, bold, black, condensada, extendida, serif/sans, altura de x, contraste, modulación, etc.), en el sentido de “Atributos de Moles”.
Capa 3: “Constelación de atributos de Moles” + “constelación de moles en página”, activada únicamente al interactuar con los hotspots (.hs): cada hotspot debe permitir identificar simultáneamente:
qué parte de la letra es,
qué atributo formal tipográfico se activa,
qué valor psicológico o connotativo sugiere,
y, cuando corresponda, qué rol juega ese punto dentro de la retícula (nodo/mól de composición).
Separar claramente las capas en la interfaz con botones o tabs (“Partes de la letra”, “Atributos de Moles”, “Constelación en la página”), donde las dos primeras capas sean visibles por defecto y la tercera se revele al pasar o hacer clic en los hotspots.
Hotspots y tooltip global
Los hotspots (.hs) deben ser elementos posicionados absolutamente fuera del contenedor .stage-img-wrap (que tiene overflow:hidden), con z-index:100, para que siempre queden visibles sobre la imagen.
Cada hotspot solo tendrá atributos de datos: data-tag, data-title, data-desc, data-color.
data-title: nombre de la parte de la letra o del atributo (p.ej. “peso bold”, “altura de x alta”, “sans humanista”).
data-desc: descripción corta del valor connotativo dentro de la constelación de atributos de Moles (p.ej. “contundencia/industrial”, “delicadeza/tecnología”).
data-tag: puede usarse para distinguir capa micro (forma del tipo) vs capa macro (estructura de página).
Crear una sola vez, vía JavaScript, un tooltip global #g-tip en <body> con position:fixed.
Al hacer hover (o tap en móvil) sobre un hotspot:
Obtener su posición con getBoundingClientRect().
Calcular posición del tooltip relativa al viewport.
Intentar mostrarlo preferentemente sobre el punto; si no hay espacio, mostrarlo debajo.
Clampear siempre la posición a los bordes del viewport (sin salir de pantalla).
Usar el data-color para estilizar el tooltip (p.ej. borde o fondo) según el tipo de atributo (peso, contraste, etc.).
Cuestionario educativo (micro + macro + connotación)
Incluir un cuestionario que integre las tres capas conceptuales:
Preguntas cerradas (radios/checkbox):
Identificación correcta de partes de la letra y atributos formales (peso, serif/sans, altura de x, contraste, proporciones).
Asociación de combinaciones de atributos (“extra‑light + alta x + sans humanista”, “black + condensada + serif mecana”, etc.) con significados connotativos (delicadeza/tecnología, contundencia/industrial, elegancia/clásica, etc.).
Reconocimiento de cómo un mól/combinación de moles en la retícula altera jerarquía, ritmo y tono de voz tipográfica.
Preguntas abiertas (textarea):
“Explica una decisión tipográfica de la imagen en términos de la constelación de atributos de Moles (atributo formal + valor psicológico)”.
“Describe cómo la constelación de moles en la página (retícula) refuerza o contradice el tono de voz tipográfico”.
“Propón una modificación de atributo (p.ej. cambiar de regular a bold) y justifica su impacto semántico”.
Datos del estudiante y validación
Campos obligatorios: nombre completo, correo electrónico del estudiante.
Marcar también como obligatorias todas las preguntas del cuestionario (cerradas y abiertas).
Implementar validación en el front-end (HTML5 + JS) para impedir envío si falta algún campo obligatorio o si el correo no es válido.
Envío del formulario
El envío debe realizarse hacia un backend (puede ser endpoint REST o script servidor) que:
Reciba todos los campos (datos del estudiante, respuestas del cuestionario, metadata de hotspots activados si se desea).
Envíe un correo con las respuestas a:
el correo del estudiante (como copia de su actividad),
c12139@utp.edu.pe (docente).
El backend debe manejar el envío simultáneo (o duplicado) a ambas direcciones, y devolver un estado de éxito/error para mostrar un mensaje adecuado en la interfaz.
Interfaz y comportamiento
La interfaz debe ser responsive y funcionar correctamente en desktop y dispositivos móviles.
En móvil, los hotspots pueden responder a tap (mostrar/ocultar tooltip) además de hover en desktop.
Garantizar que el tooltip global nunca sea recortado por contenedores con overflow:hidden gracias a position:fixed y su creación directa en <body>.
Ubicar los elementos interactivos (botones de capas, hotspots, formulario) de forma clara para guiar el flujo:
Explorar imagen + hotspots (capas 1 y 2 activas).
Activar/descubrir capa 3 (constelación) mediante hotspots.
Responder cuestionario.
Enviar formulario.
Footer
Incluir un footer fijo al final de la página con el siguiente texto:
Docente: Mg Mario Quiroz · Curso: Tipografia · 2026 · Semana 3
Comentarios
Publicar un comentario