Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

 Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

Tutorial de Adobe Indesign

### Propósito / Función Principal

Guiar al estudiante en el desarrollo de proyectos y ejercicio de clase usando un tutorial del paso a paso para el desarrollo de proyecto en usando el programa adobe indesign con el apoyo de un archivo word con los procedimientos y las capturas de pantalla, por lo cual se solicita generar imágenes de la pantalla del adobe InDesign indicando los comandos aplicados en el tutorial como al visualización en el tutorial, ademas genera preguntas intermedias en el tutorial para afianzar conocimientos  y procedimientos tanto en el ejercicio de programa como teoria de organizacion visual y uso de la reticula y la teria de gestald

### Público Objetivo

estudiantes de educacion secundaria

### Funcionalidades Deseadas

1. Registro y Persistencia de Datos

Para que el tutorial "sepa" quién lo está usando sin necesidad de una base de datos compleja (servidor), puedes usar el LocalStorage del navegador.

Función Sugerida: Crear un objeto Estudiante que capture el nombre y correo al inicio.

Lógica: Al cargar la página, una función verifica si ya existe un registro; si no, muestra un "Modal" de bienvenida con el formulario.

2. Sistema de Puntaje (Scoring Engine)

Para las preguntas intermedias, necesitas una función que compare la respuesta del usuario con una "llave" de respuestas correctas.

Función Sugerida: Un "Array de Objetos" donde cada objeto represente una pregunta, su respuesta correcta y el puntaje asignado.

Interactividad: Cada vez que el estudiante responda, el sistema actualiza una variable global de puntajeTotal.

3. Envío de Resultados por Correo

Dado que un archivo HTML por sí solo no puede enviar correos (por seguridad), necesitas un "puente".

Herramienta: EmailJS o Formspree. Estas librerías te permiten enviar los datos del cuestionario directamente desde el HTML a tu correo (o al del estudiante) sin necesidad de programar un servidor (Backend).

Función: Una función enviarReporte() que empaquete el nombre, el correo y el puntaje en un JSON y lo mande vía API.

4. Generación e Impresión de PDF

Esta es la función más valorada para que el estudiante tenga una "evidencia" física o digital de su avance.

Librería Sugerida: html2pdf.js o jsPDF.

Lógica: Esta función toma una sección específica de tu HTML (por ejemplo, un "Diploma de paso a paso" o un "Resumen de respuestas"), la renderiza internamente y activa la descarga de un archivo .pdf con un diseño profesional.

Para que visualices cómo interactúan estos componentes, he preparado un Simulador de Flujo de Datos. Este componente te permitirá probar cómo se vería la lógica de registro, evaluación y generación de resultados antes de que escribas el código final en tu proyecto de InDesign.

Muéstrame la visualización

Implementación Técnica Sugerida:

Para el PDF: Utiliza un contenedor oculto en el HTML que tenga el diseño del reporte. Cuando la función de impresión se activa, la librería captura solo ese contenedor, asegurando que el PDF se vea como un documento oficial y no como una simple captura de pantalla.

Para el Tutorial de InDesign: Puedes insertar pequeños "checkpoints" de código JS después de cada video o paso importante para asegurar que el estudiante no avance sin haber comprendido la teoría de la retícula o la Gestalt aplicada en ese paso específico.

### Diseño y Estilo Visual

Es una excelente temática para tu tutorial. Recrear el estilo visual del diseño editorial histórico utilizando herramientas modernas como InDesign te permite enseñar tanto la técnica de software como los fundamentos de la historia del arte y del diseño. Este estilo evoca la época de los incunables (siglo XV), el Renacimiento y la era industrial de las grandes imprentas (siglo XIX).

Si usas este enfoque, los elementos clave que debes definir y enseñar en tu tutorial para lograr esa estética son:

1. La Página y la Retícula Áurea

En el diseño histórico, la retícula no era una cuadrícula modular moderna. Se basaba en proporciones matemáticas y armónicas para ubicar la "caja tipográfica" (el área de texto).

Proporción Áurea y Canon de Van de Graaf: Enseña a establecer márgenes donde el margen inferior y el exterior son significativamente más anchos que el superior y el interior (medianil). Esto daba aire a la página y espacio para anotaciones manuscritas, una práctica común.

Retícula de Columnas: Dependiendo de la época, usarás una sola columna ancha (manuscritos medievales) o dos columnas estrechas con un medianil pronunciado (Gutenberg y las primeras biblias).

Cuadrícula base: Imprescindible en InDesign para asegurar que las líneas de texto de diferentes columnas se alineen perfectamente, imitando la presión uniforme de la imprenta de tipos móviles.

2. Tipografía con Sabor Antiguo

La elección de la fuente es el 50% del éxito. No uses fuentes modernas o de palo seco (sans-serif).

Fuentes con Serif (Remates): Enseña a distinguir y usar:

Humanistas/Venecianas (s. XV): Como Adobe Jenson o Centaur. Tienen poco contraste y un trazo orgánico.

Garaldas (s. XVI-XVII): Como Garamond o Caslon. Más refinadas y legibles.

Didonas (s. XVIII-XIX): Como Bodoni o Didot. Alto contraste, ideales para títulos victorianos.

Letras Góticas (Blackletter): Como Fraktur o Rotunda. Úsalas con moderación para títulos o capitulares, recreando el estilo de los primeros impresores alemanes.

Capitulares (Drop Caps): En InDesign, la función de "Capitulares y estilos anidados" es vital para crear esas letras iniciales gigantes que ocupan varias líneas de texto, una herencia de los manuscritos iluminados.

3. Decoración y Ornamentación

Las imprentas antiguas tenían catálogos llenos de grabados de metal y madera para decorar.

Florones y Viñetas (Dingbats): Enseña a usar glifos decorativos para separar párrafos o finalizar secciones, como los Hedgehog de Caslon.

Bordes y Marcos: Usa marcos tipográficos complejos alrededor de la página o de títulos importantes. InDesign permite aplicar trazos y formas complejas a los marcos de texto.

Filetes Tipográficos: Líneas decorativas (finas-gruesas-finas) para separar el título del cuerpo de texto.

4. La Ilustración y el Efecto de Imprenta

La imagen debe parecer fruto de una prensa, no de una cámara digital.

Xilografía y Grabado: Enseña a procesar imágenes para que parezcan grabados en madera o aguafuertes de metal, usando solo líneas y puntos para crear sombras, sin degradados suaves.

Efecto "Letterpress": Usando sutilmente los Efectos de InDesign (como Sombra interior o Bisel y relieve), puedes simular que el tipo de metal ha "mordido" el papel, creando un ligero bajorrelieve.

Textura de Papel: Aunque InDesign es para maquetar, enseña a colocar una imagen de fondo de papel pergamino, papel hecho a mano o con textura de lino para completar la ilusión. colores #b50d30,%000000

### Interacción y Comportamiento

¡Me parece una idea fantástica! Combinar las animaciones CSS (como el efecto de pulso o el morfo líquido que mencionas) con hotspots (puntos interactivos) sobre las capturas de InDesign es exactamente lo que transformará tu tutorial de un simple documento a una experiencia de aprendizaje inmersiva.

Para lograr esto, usaremos la interactividad visual (CSS) para captar la atención, pero implementaremos la lógica de evaluación (JavaScript) por detrás para gestionar el puntaje de 0 a 20 y aplicar la penalización exacta de -0.5 por cada error.

¿Cómo estructurar esta dinámica de "Hotspots" y Cuestionario?

El Escenario Visual (La Captura de InDesign):

Colocarás la imagen de la interfaz de InDesign (por ejemplo, configurando una página con estilo histórico o un documento en orientación apaisada) como fondo de un contenedor.

Los Hotspots Animados (CSS):

Utilizando el ejemplo #8 (Animaciones del cursor / @keyframes pulse) de tu lista, crearemos puntos brillantes sobre la imagen. Cuando el estudiante pase el ratón, el punto palpita, indicando que hay una interacción disponible.

La Pregunta y Retroalimentación (El Cuestionario):

Al hacer clic en el hotspot, se despliega la pregunta con 4 opciones. Aquí podemos usar el efecto #6 (Tarjeta de doble cara) o el #2 (Morfo líquido) para los botones de respuesta. Si el estudiante elige la opción incorrecta, el botón tiembla (animación shake), se le descuenta 0.5 puntos, y se le permite volver a intentar para fomentar el aprendizaje.

A continuación, he diseñado un simulador interactivo que recrea exactamente esta lógica matemática y visual. Pruébalo para que experimentes cómo interactúan los hotspots con el sistema de puntaje antes de que programes el código final:

Muéstrame la visualización

El motor detrás de la experiencia (Concepto JS)

Para que cuando construyas tu HTML esto funcione a la perfección, la lógica JavaScript debe verse más o menos así:

Variables de Estado: Necesitas un let puntaje = 0;

Evento de Clic: Cada uno de tus 4 botones de opción múltiple debe tener un valor asignado (ej. true o false).

La Condición: * Si la respuesta es true: Se muestra un mensaje de éxito, se suma el puntaje correspondiente a la pregunta, y el hotspot cambia de estado (se marca como "completado").

Si la respuesta es false: Se ejecuta puntaje = puntaje - 0.5;, se actualiza el número en pantalla, y se da retroalimentación formativa (ej. "Recuerda que las Capitulares se configuran en las propiedades del párrafo, intenta de nuevo").

Esta combinación asegura que el sitio no sea estático, cumpliendo con la expectativa moderna de microinteracciones, mientras evalúas de manera rigurosa los conceptos de diagramación y retícula.

### Tecnologías y Estructura

Para construir este tutorial interactivo con calidad profesional, que no dependa de servidores complejos (sin *Backend* pesado) y que puedas distribuir fácilmente a tus estudiantes o alojar de forma gratuita, la mejor ruta es una arquitectura **Frontend moderna y modular (HTML/CSS/JS puro) apoyada en librerías específicas**.

Aquí tienes el detalle exacto de las tecnologías que debes usar y cómo estructurar los archivos de tu proyecto, pensando como si estuvieras organizando las páginas maestras y estilos de párrafo en InDesign:

### 1. El "Stack" Tecnológico (Las Herramientas)

* **Estructura y Contenido (HTML5):**

    * Uso de etiquetas semánticas (`<article>`, `<section>`, `<dialog>` para el modal de registro). Esto es crucial para aplicar los principios del DUA (Diseño Universal para el Aprendizaje) y garantizar que el código sea accesible y ordenado.

* **Estética y Animación (CSS3):**

    * **CSS Grid & Flexbox:** Indispensables para maquetar la **retícula áurea** o el Canon de Van de Graaf en la web.

    * **CSS Custom Properties (Variables):** Para definir la paleta de colores históricos (tonos sepia, tinta oxidada, pergamino) y cambiarla fácilmente.

    * **Keyframes & Transiciones:** Para los *hotspots* palpitantes (`@keyframes pulse`) y las tarjetas giratorias (`transform: rotateY`).

* **Lógica de Evaluación (JavaScript - ES6):**

    * **Vanilla JS:** No necesitas React o Angular. JavaScript puro es perfecto para manejar el "Estado" (el puntaje actual), registrar los clics en los *hotspots* y aplicar la matemática de penalización (-0.5) y aciertos (+10).

    * **LocalStorage:** La API del navegador para guardar el nombre y correo del estudiante temporalmente mientras realiza el tutorial, para que no se pierdan si recarga la página.

* **Librerías Externas (Las "Armas Secretas"):**

    * **`html2pdf.js`:** Es la librería más estable para tomar un contenedor HTML específico (por ejemplo, el diseño del diploma final con su nota) y convertirlo en un PDF con formato perfecto, respetando tus tipografías y márgenes.

    * **`EmailJS`:** Te permite enviar el correo con los resultados directamente desde el navegador (Frontend) conectándolo a tu cuenta de Gmail, sin necesidad de programar un servidor en PHP o Node.js.

---

### 2. La Estructura de Archivos (Arquitectura del Proyecto)

Para que el proyecto sea escalable y fácil de mantener (especialmente si luego quieres agregar más módulos o tutoriales), te sugiero dividirlo de esta manera:

```text

/tutorial-indesign-historico

│

├── index.html              # El esqueleto principal. Contiene el registro, el visualizador y los modales.

│

├── /css                    # La "Hoja de Estilos"

│   ├── main.css            # Retícula general, márgenes y estructura.

│   ├── typography.css      # Importación de fuentes (Garaldas, Góticas) y ajustes de lectura.

│   └── animations.css      # Todos los efectos (Hotspots, tarjetas 3D, botones líquidos).

│

├── /js                     # El "Cerebro" del tutorial

│   ├── app.js              # Inicializa la app, captura el nombre/correo y maneja el LocalStorage.

│   ├── quiz-engine.js      # La lógica matemática (puntaje, aciertos, penalizaciones).

│   └── export.js           # La conexión con html2pdf.js y EmailJS.

│

├── /assets                 # Los "Vínculos" (como en el panel de enlaces)

│   ├── /img                # Capturas de pantalla de InDesign, texturas de papel pergamino.

│   └── /fonts              # Archivos de fuentes antiguas en formato web (.woff2).

│

└── /data

    └── questions.json      # (Opcional) Un archivo para separar el texto de las preguntas del código.

```

### 3. El Flujo de la Interfaz (Paso a Paso)

1.  **Carga (Onboarding):** Se abre la página. Una ventana modal flotante (diseñada como una etiqueta antigua de imprenta) pide al estudiante: *Nombre Completo* y *Correo*. El botón de "Comenzar" desactiva el modal y guarda los datos en JS.

2.  **Exploración:** Se revela la interfaz principal. La captura de InDesign ocupa el centro, decorada con un fondo texturizado. Los *hotspots* CSS están latiendo.

3.  **Interacción (Quiz Engine):** El estudiante hace clic en un *hotspot*. JavaScript intercepta el clic y muestra la pregunta abajo.

    * *Acierta:* Suma puntos, muestra *feedback* positivo (en verde oscuro/tinta), y oculta o cambia el color del *hotspot*.

    * *Falla:* El JS resta 0.5 puntos, hace temblar el botón erróneo (CSS Shake) y le pide que intente de nuevo.

4.  **Conclusión (Exportación):** Al agotar los *hotspots*, el JS calcula el final (ej. 18.5/20) y revela una sección oculta: "Tu Certificado". Aquí hay dos botones:

    * *Descargar PDF:* Ejecuta `html2pdf()`.

    * *Enviar Reporte:* Ejecuta `emailjs.send()`.

Con esta estructura, tienes un producto educativo sólido, que puedes subir gratis a plataformas como GitHub Pages o Vercel y funcionará sin problemas en cualquier navegador moderno. 

¿Te gustaría que redactemos el código base inicial del `index.html` integrando las librerías CDN de EmailJS y html2pdf para que tengas el cascarón listo para empezar a maquetar?

### Requisitos Adicionales

El envio del cuestionario debe ser pára el correo c12139@utp.edu.pe, indicar que el pdf con solo las respuestas de cuestionario  con el nombre y apellido de estudiante y el correo electronico

### Instrucciones Finales

Entrega toda la aplicación en un único archivo HTML listo para ejecutarse.

Usa Bootstrap 5 para lograr un diseño moderno y responsivo.

Incluye service worker y manifest.json para funcionamiento offline e instalación como PWA.

Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles.- Incluye un Footer al final del documento con exactamente este texto: 

  "Docente: Mg Mario Quiroz | Curso: Diseño de la información · 2026 · Semana 4"