Prompt para Grados de Iconicidad

 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

Grados de Iconicidad

### Propósito / Función Principal

### 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:

### Público Objetivo

estudiantes de educacion superior

### Funcionalidades Deseadas

### 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

### Diseño y Estilo Visual

Dado que el artefacto es un dispositivo digital y el tema es la brecha digital, el estilo visual más coherente para toda la actividad es:

Paleta cromática: Tonos fríos (azul, gris, blanco) para los niveles realistas → monócromo o colores planos primarios para los niveles abstractos

Trazo: Preciso y técnico en niveles altos; expresivo y gestual en niveles medios; mínimo y geométrico en niveles bajos

​

Fondo: Siempre neutro (blanco o gris claro) para que el nivel de iconicidad sea el protagonista, sin distracción contextual

Referente artístico de apoyo: Los estudios del toro de Picasso como modelo de progresión; los pictogramas de sistemas ISO como modelo de síntesis; el estilo de ilustración editorial de The New York Times para los niveles medios

### Interacción y Comportamiento

La gamificación como herramienta innovadora permite promover el aprendizaje autorregulado y pretende valorizar el progreso de la enseñanza-aprendizaje de los alumnos de forma personalizada y en tiempo real. Además, se alega que el término gamificación o también conocido como estrategias de ludificación, proviene del inglés game, que significa juego, es decir, es el uso de mecánicas de juegos con el único fin de fomentar la motivación. El aprendizaje autorregulado es un proceso auto-directivo que genera en el estudiante autonomía, proactividad y responsabilidad, con el único propósito de que se convierta en el protagonista de su propio aprendizaje, implica la interrelación de procesos motivacionales y metacognitivos, transformando de esta forma las competencias que sirve para generar el aprendizaje significativo. El objetivo planteado es proponer aplicaciones de gamificación para propiciar el aprendizaje autorregulado, en base a la investigación exploratoria y descriptiva, haciendo uso de los métodos: inductivo, deductivo y correlacional, siguiendo un enfoque cuantitativo y cualitativo, para ello se empleó encuestas virtuales en Microsoft Forms dirigidas a docentes, las mismas que permitieron determinar la factibilidad en la implementación de dos recursos de gamificación en la práctica pedagógica, tales como: Edmodo y Quizizz proporcionando a través de ellas un aprendizaje autorregulado a los estudiantes, brindándoles un ambiente virtual ameno, activo y capaz de lograr significancia en lo aprendido. Palabras claves: Herramientas innovadoras; aprendizaje autorregulado; gamificación; tecnologías de la información y comunicación; estrategias de ludificación.

### Tecnologías y Estructura

Efectos personalizados de desplazamiento del ratón con CSS

1. Tarjeta holográfica

Tarjeta holográfica

Cargando CodePen interactivo...

Abrir en CodePen

Como dicen, nunca pasa nada como lo clásico. Así que comenzamos con un sencillo efecto de tarjeta que se amplía, adquiere una sombra de borde colorida y brilla con un degradado holográfico al pasar el cursor por encima. Esta animación funciona con:

::beforepseudo-elemento: Crea el efecto holográfico colocando un fondo degradado con opacidad y rotación variables. Inicialmente tiene 0opacidad y, al pasar el cursor sobre él, se vuelve visible mientras se mueve hacia abajo.

.holographic-card:hover: Aplica un efecto de escala ( transform: scale(1.05)) y una sombra de caja brillante ( box-shadow: 0 0 20px rgba(0, 255, 255, 0.5))

2. Morfo líquido

Morfo líquido

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación crea un efecto de transformación similar al de un líquido en un botón al pasar el cursor sobre él. Inicialmente, el botón tiene una forma rectangular redondeada con un fondo azul oscuro y una etiqueta de texto centrada. Al pasar el cursor sobre él, el botón gira ligeramente, su radio de borde disminuye y aparece un degradado cónico de colores. Las características CSS que impulsan esta animación incluyen:

::beforepseudo-elemento: Crea un fondo con degradado cónico, que pasa de cian a azul oscuro, dando la apariencia de un líquido que llena el botón.

.liquid-morph-element:hover: Reduce el radio del borde 10pxy aplica una rotación de 15deg, lo que le da al botón una forma más angular.

3. Efecto de texto explosivo

Descomposición de partículas

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación crea un efecto "explosivo" cuando se pasa el cursor sobre el elemento. Funciona con los pseudoelementos ::beforey , lo que produce el efecto de degradado radial y aumenta la escala y rota al pasar el cursor.::after

4. Subrayado de texto

Subrayado del texto al pasar el ratón

La versión interactiva de CodePen se carga cuando se acerca al área visible de la pantalla.

Abrir en CodePen

Esta animación crea un efecto de desplazamiento único donde aparecen subrayados encima y debajo del texto cuando el usuario pasa el cursor sobre él. Funciona gracias a los ::beforepseudoelementos ::aftery , que crean el efecto de subrayado. Los pseudoelementos crecen de 0a 100%al pasar el cursor mientras se les aplica un degradado.

5. Menú desplegable

Menú desplegable

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación crea un menú desplegable que aparece al pasar el cursor sobre un botón. Inicialmente, el menú desplegable está oculto, con su opacidad establecida en 0, pero se vuelve completamente visible al pasar el cursor. La clave de esta animación es opacity, que se establece en 1al pasar el cursor y transform: translateY(0), que mueve el menú a su posición normal.

6. Tarjeta de doble cara

Tarjeta de doble cara

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación crea un efecto de carta 3D que se voltea. Cuando el usuario pasa el cursor sobre la carta, esta gira 180 grados sobre el eje Y, revelando el reverso. El anverso y el reverso de la carta tienen el mismo tamaño, pero fondos diferentes, y la perspectivepropiedad del contenedor de la carta realza el efecto 3D.

Esta animación funciona con:

transform-style: preserve-3dPermite que las tarjetas mantengan su posición 3D durante la rotación.

transform: rotateY(180deg): Gira las cartas a lo largo del eje Y

7. Imagen de 4 esquinas

Imagen de 4 esquinas

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación crea un efecto de imagen interactivo donde la imagen se divide en cuatro cuadrantes al pasar el cursor sobre ella. Los cuadrantes representan diferentes secciones de la imagen y están posicionados para formar una imagen completa al unirse. Al pasar el cursor sobre el contenedor, los cuadrantes se desplazan hacia afuera, creando el efecto de división.

Funciona con:

background-image: url()aplica la imagen a cada cuadrante

background-positionrecorta cuadrantes específicos de la imagen

transform: translate()Mueve los cuadrantes hacia afuera al pasar el cursor.

8. Animaciones del cursor

Animaciones del cursor 1

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación tiene dos efectos. Primero, muestra varios estilos de cursor CSS al pasar el ratón por encima, y ​​cada cuadro experimenta diferentes efectos visuales, como escalado, rotación, recorte y pulsación. A continuación, se explica qué impulsa estos efectos:

cursor: Define tipos de cursor únicos para los diferentes cuadros

::before: Crea un efecto de degradado lineal que se mueve diagonalmente desde la esquina superior izquierda hasta la inferior derecha al pasar el cursor por encima.

@keyframes pulseCrea un efecto pulsante donde la caja aumenta y disminuye de tamaño repetidamente.

@keyframes shake: Simula un movimiento tembloroso o espasmódico, como el que se usa para indicar "error" o "no permitido".

@keyframes moveAround: Provoca que las cajas se desplacen ligeramente en varias direcciones.

Transformaciones CSS: transform: scale(), rotate(), translateY(), translateX(), y se aplican a varias cajasskew()

9. Cubo giratorio

Cubo giratorio

Cargando CodePen interactivo...

Abrir en CodePen

Esta animación 3D crea un cubo interactivo con seis caras (frontal, posterior, derecha, izquierda, superior e inferior), cada una con colores distintos y un degradado sutil. El cubo gira suavemente en el espacio 3D al pasar el cursor sobre él, y aparece un degradado similar al cristal en las caras. Funciona con:

translateZ, rotateX, y rotateY: Coloca las caras para formar un cubo

perspectivey transform-style: preserve-3d: Asegurar una correcta representación 3D

@keyframes rotate3dCrea la rotación continua del cubo.

::beforey ::after: Crea los reflejos similares al vidrio que ocurren al pasar el cursor sobre ellos.

10. Camaleón SVG

Camaleón SVG

La versión interactiva de CodePen se carga cuando se acerca al área visible de la pantalla.

Abrir en CodePen

Al pasar el cursor sobre la tarjeta, esta alterna entre diferentes patrones de fondo basados ​​en SVG y desplaza suavemente la posición del patrón sobre la superficie. Funciona con:

background-image: Utiliza datos SVG en línea para mostrar patrones personalizados.

@keyframes move-and-color: Define las etapas de la animación, especificando los cambios en background-imageybackground-position

Eso es todo en cuanto a los efectos personalizados de desplazamiento con CSS. Ahora, veamos ejemplos de otros desarrolladores. Empezaremos con las animaciones de desplazamiento de tarjetas; consulta esta colección de Codepen para ver otras animaciones de texto que he creado.

¡Crea un sitio web con efectos interactivos 3D al pasar el cursor!

Lleva los efectos de desplazamiento al siguiente nivel con interacciones 3D. En este curso creativo, crearemos una aplicación de personalización y una página de destino con animaciones en tiempo real utilizando Next.js 15, GSAP, Prismic, Three.js, Tailwind y TypeScript.

Un GIF del sitio web Suburbia

Ver curso

Animaciones CSS al pasar el cursor sobre las tarjetas

Estas animaciones al pasar el cursor sobre las tarjetas añaden un efecto único que captará la atención de sus visitantes.

11. Visualización al pasar el cursor sobre la tarjeta de perfil

Tarjeta de perfil (Hover)

Cargando CodePen interactivo...

Abrir en CodePen

La animación de desplazamiento de la tarjeta de perfil de Codev Land crea un efecto de deslizamiento de dos capas en un componente de tarjeta. Al pasar el cursor sobre ella, la diapositiva superior (con un icono) se mueve hacia arriba para revelar la diapositiva inferior que contiene texto. Esta animación se basa en:

transform: translateY()( documentación ): Mueve cada diapositiva a lo largo del eje vertical durante el desplazamiento del cursor.

transition( documentación ): Crea un efecto de animación suave cuando las posiciones de ambas diapositivas cambian al pasar el cursor sobre ellas.

12. Efectos de desplazamiento del ratón en CSS

Efectos de desplazamiento del ratón en tarjetas CSS

Cargando CodePen interactivo...

Abrir en CodePen

Los efectos CSS hard hover de Bruno Rocha crean un efecto dinámico al pasar el cursor sobre las tarjetas, donde la capa superior se reduce para revelar la capa interior con texto. El creador utiliza la propiedad transition para animar los cambios en la altura, el radio del borde y el tamaño de la fuente de las tarjetas al pasar el cursor.

13. Tarjeta de vidriomorfosis con gradiente brillante

Tarjeta de vidriomorfosis con degradado brillante

Cargando CodePen interactivo...

Abrir en CodePen

La tarjeta Glowing Gradient Glassmorphism de Kodplay crea un diseño visualmente atractivo con un efecto de animación al pasar el cursor. Cada tarjeta tiene un estilo distintivo, con fondos degradados únicos, efectos de desenfoque e interacciones al pasar el cursor. Aquí te mostramos cómo funciona el código:

::beforey ::afterpseudoelementos: Crea fondos con degradado sesgado. Al pasar el cursor sobre ellos, se elimina el efecto de sesgo y se ajustan las dimensiones.

transition: Anima los efectos de desplazamiento

span::beforey span::after: Agrega efectos de desenfoque y brillo al pasar el cursor.

backdrop-filter( documentación ): Agrega un efecto de cristalización al contenido de la carta.

@keyframes animateCrea un ligero movimiento vertical para dar un efecto flotante dinámico.

14. Tarjetas turísticas

tarjetas flotantes

Cargando CodePen interactivo...

Abrir en CodePen

El efecto de desplazamiento de las tarjetas turísticas de Karim Jawhar presenta tres tarjetas interactivas, cada una con la imagen de un monumento. Al pasar el cursor sobre ellas, las tarjetas se transforman girando sobre los ejes X e Z, creando un efecto 3D. Esta animación funciona con:

transform: rotateX, rotateZ, translateY, y translateZlas propiedades crean el efecto de rotación y posicionamiento 3D que ocurre al pasar el cursor sobre

transition: Suaviza el cambio entre estados, especialmente en transformy box-shadow, haciendo que el efecto de desplazamiento sea más fluido.

### Requisitos Adicionales

La animación de tarjetas de la misma altura creada por Veronica es otro gran ejemplo. Al pasar el cursor sobre las tarjetas, estas se agrandan ligeramente y muestran más información sobre los elementos, como un icono de "Me gusta" y la hora. Al mismo tiempo, la imagen se vuelve parcialmente opaca a medida que disminuye su opacidad.

Esta animación se basa en:

transform: scaleAmplía la tarjeta al pasar el cursor sobre ella, haciendo que parezca "saltar"

card__img--hoverclase: Gestiona los cambios que se producen en la imagen de fondo al pasar el ratón por encima. Las propiedades de la imagen que cambian incluyen opacity( docs ), background-size( docs ) y background-position( docs ).

Efectos de desplazamiento del cursor de los iconos CSS

Veamos algunos efectos al pasar el cursor sobre los iconos que sin duda harán que tu sitio web destaque.

16. Efecto de desplazamiento de los iconos de redes sociales

Efecto al pasar el cursor sobre los iconos de redes sociales

Cargando CodePen interactivo...

Abrir en CodePen

El efecto de desplazamiento de iconos de redes sociales creado por Ephraim Sangma genera un conjunto de iconos de redes sociales de Font Awesome que se animan al pasar el cursor por encima. A continuación, se explica cómo funciona y los elementos clave que lo componen:

a:beforeSe utiliza para crear un efecto de color de fondo al pasar el cursor sobre los iconos de redes sociales. Inicialmente se sitúa debajo del botón. Al pasar el cursor, se desliza hacia arriba y rellena el círculo del icono.

transform: rotateY: Gira el icono 360 grados sobre el eje Y, creando un efecto de volteo.

17. Botón de cierre interactivo

Un botón de cierre sencillo pero interactivo.

Cargando CodePen interactivo...

Abrir en CodePen

La animación interactiva del botón de cierre de Marius Nicula crea un botón interactivo con elementos circulares en su interior que se mueven y cambian de color al pasar el cursor por encima. Funciona con lo siguiente:

transition Mixin SCSS : Crea un efecto de transición consistente que se aplica a todas las propiedades.

transform: rotate: Gira las barras diagonalmente (+45° y -45°) para darles la forma de “X”.

&:hover: El color de fondo de las barras y la posición de los círculos en las barras cambian al pasar el cursor sobre ellas.

18. Efecto de desplazamiento del icono

Efecto de desplazamiento del icono CSS

La versión interactiva de CodePen se carga cuando se acerca al área visible de la pantalla.

Abrir en CodePen

El efecto de desplazamiento del icono de ingeniero completa el fondo circular de los iconos al pasar el cursor. Funciona con:

border-radius: 50%( documentación ): Da a los elementos de la lista su forma circular

transform: rotate: Gira cada elemento de la lista 45° para inclinar los semicírculos.

::before: La mitad del semicírculo que permanece estática y visible

::after: La otra mitad del semicírculo que se desliza al pasar el cursor por encima.

19. Mosaicos sociales CSS

3D - Mosaicos sociales CSS

Cargando CodePen interactivo...

Abrir en CodePen

La animación CSS social tiles de Stockin utiliza CSS para crear botones 3D con título que “levitan” en el aire al pasar el cursor sobre ellos. Para su funcionamiento, se basa en lo siguiente:

Transformaciones CSS ( skew(25deg)y rotate(-30deg)): Crea el efecto de tarjeta inclinada

box-shadow: Le da profundidad y un efecto 3D a cada elemento.

::beforey ::after: Completa el efecto 3D actuando como las “paredes” de cada elemento.

Efecto de desplazamiento: El elemento se mueve ligeramente hacia la derecha y hacia arriba, y la sombra de la caja se vuelve más grande y pronunciada, lo que realza el efecto 3D.

20. Efecto de desplazamiento del icono de texto y degradado

Efectos de desplazamiento de iconos CSS con texto y sombra paralela degradada

Cargando CodePen interactivo...

Abrir en CodePen

El efecto de desplazamiento del icono con texto y degradado de Yixuan crea una barra de navegación animada con elementos de menú expandibles y coloridos efectos al pasar el cursor. Aquí te explicamos cómo funciona:

::before: Crea una superposición de degradado que aparece gradualmente al pasar el cursor sobre ella.

::afterGenera un brillo borroso alrededor del botón.

scale(0): Reduce el tamaño de los iconos al pasar el cursor sobre ellos.

scale(1): Amplía el título al pasar el cursor por encima para que sea visible.

li: Aumenta de ancho a medida que aparece el título

### 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.