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

 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

La imagen como signo. El signo visual. La figuratividad. La iconicidad.

### Propósito / Función Principal

Este es un guion instruccional y de experiencia de usuario para la **PWA gamificada**, diseñada específicamente para ser desarrollada por tu equipo de 4 integrantes. El concepto une las bases del desarrollo de la PWA (Fases 1-4) con los contenidos teóricos de semiótica e iconicidad de la imagen (Villafañe, Peirce, Eco).

---

# GUION DE LA APP: "IconiShift: El Reto de la Marca"

## 📱 Visión General de la PWA

* **Narrativa/Concepto:** El usuario es un "Consultor de Identidad Visual" contratado para salvar marcas peruanas atrapadas en anacronismos temporales. Para avanzar, debe descodificar el signo visual, modificar sus niveles de iconicidad y adaptarlos al contexto sociocultural actual.

* **Mecánica de Retorno (Completitud):** El usuario visualiza un **"Anillo de Consistencia de Marca"**. Cada módulo completado cierra un fragmento del anillo.

---

## 🎭 Escena 1: El Onboarding e Instalación (Fase 1 y 3)

**Pantalla:** Interfaz limpia con tipografía sans-serif uniforme (Manual de Estilo). Un pop-up sutil invita a instalar la app.

* **Sistema (PWA Manifest):** Si el usuario acepta, la barra de navegación desaparece entrando en modo `standalone`.

* **Narrador en Pantalla (Texto):** > *"Diseñador, el mercado sociocultural está cambiando rápidamente. Las marcas que no adaptan su nivel de iconicidad quedan en el olvido. Instala esta herramienta en tu escritorio para operar incluso en situaciones de desconexión (Offline) y restaura el orden semiótico."*

---

## ⏳ Escena 2: Nivel 1 — "El mismo mensaje, ¿la misma eficacia?" (Fase 2 - Inicio)

**Objetivo Pedagógico:** Activar saberes previos y notar la evolución de la marca país/local (Inca Kola / Cusqueña).

```

+-------------------------------------------------------+

| [O] Anillo de Consistencia: 0%      [⚡] Modo: Online |

+-------------------------------------------------------+

| RETO 1: LA CÁPSULA DEL TIEMPO                         |

|                                                       |

| Observa la evolución de esta famosa marca peruana:    |

|                                                       |

|  [ Versión 1: 1980 ] -> [ Versión 2: 2000 ] -> [ Actual ]  |

|  (Ilustración       (Símbolo          (Icono          |

|   Detallada)         Simplificado)     Minimalista)   |

|                                                       |

| 🕒 Tiempo restante: 04:00 minutos                      |

+-------------------------------------------------------+

```

* **Mecánica Cooperativa (Tríos):** Un integrante del grupo sostiene la PWA en modo "Host". Los tres debaten las preguntas en pantalla.

* **Preguntas Interactivas (Input de Texto Local):**

1. *¿Qué cambió drásticamente a nivel visual?*

2. *¿Por qué el signo se movió hacia la síntesis?*

* **Friction Guard (PWA LocalStorage):** Si el estudiante tarda en escribir o se distrae, la PWA guarda el progreso en `localStorage` automáticamente para evitar frustraciones.

* **Feedback del Sistema al responder:** > *"¡Excelente diagnóstico! Lo que has visto es el viaje del signo a través de la **Escala de Iconicidad de Justo Villafañe**. Has desbloqueado el núcleo teórico."* *(El Anillo de progreso se llena un 25%).*

---

## 📚 Escena 3: Nivel 2 — "El Triángulo Semiótico" (Fase 2 y 3 - Transformación)

**Objetivo Pedagógico:** Comprender las posturas de Barthes, Peirce y Eco sobre el signo visual.

* **Dinámica de Juego:** Tipo *Card Sorting* / Emparejamiento por arrastre (Drag & Drop) optimizado para pantallas táctiles (Zonas de interacción > 48px).

### El Desafío de los Teóricos

El usuario debe arrastrar la declaración del autor al contenedor correcto para "estabilizar el servidor":

* **Carta "Mensaje sin código / Foto"** ➔ Va al contenedor de **Barthes**.

* **Carta "Relación por semejanza / Motivada"** ➔ Va al contenedor de **Peirce**.

* **Carta "Códigos perceptivos culturalmente adquiridos"** ➔ Va al contenedor de **Umberto Eco**.

* **Efecto de Feedback Inmediato:**

* Si falla: La carta rebota. Un micro-aprendizaje aparece: *"Eco recuerda: La semejanza se produce y debe aprenderse. No es automática."*

* Si acierta: El contenedor brilla en verde accesible (contraste mínimo 4.5:1 WCAG).

---

## 📊 Escena 4: Nivel 3 — "La Escala de Villafañe" (Desafío Offline de Estrés)

**Objetivo Pedagógico:** Dominar los conceptos de Figuratividad frente a Iconicidad y la tricotomía de Peirce.

* **Giro de la Trama (Simulación Offline de la Fase 4):** De forma controlada mediante código, la PWA simula una "caída de red" (Activa el Service Worker en modo caché estricto). La interfaz cambia de color indicando **[⚡] Modo: Offline activo**.

* **Mensaje del Sistema:** > *"¡Alerta! Se ha perdido la conexión con el servidor central. El Service Worker ha entrado en acción. Demuestra que puedes calibrar la identidad de marca usando únicamente la base de datos local (IndexedDB)."*

* **Mecánica - El Deslizador de Iconicidad (Slider):**

Se le presenta al usuario un logotipo (Ej: Una marca emergente de café peruano). El usuario debe mover un control deslizante interactivo para ajustar el nivel de iconicidad correcto según el público objetivo presentado en el briefing del juego:

```

PÚBLICO: Adultos mayores (Requieren alta familiaridad).

[================⚙️----------------]

Nivel 11 (Imagen Real)              Nivel 1 (No figurativo)

```

* **Pregunta de Combate Semiótico (Reto Cognitivo de Cierre):**

Una ventana emergente muestra el pictograma de una "Salida de Emergencia".

*Pregunta de opción múltiple con trampa:* "¿Qué tipo de signo es según Peirce?"

* A) Es un Ícono (porque se parece a un hombre corriendo).

* B) Es un Índice (porque indica la dirección física de la salida).

* C) Es un Símbolo (porque el color verde y la forma están estandarizados por la norma ISO).

* **D) Es las tres cosas simultáneamente dependiendo del nivel de lectura.** *(Respuesta Correcta).*

---

## 🏁 Escena 5: Despliegue, Cierre y Evaluación Estructurada (Fase 4)

Al completar el reto del pictograma, el dispositivo vuelve a sincronizarse automáticamente en segundo plano (`Background Sync` del Service Worker). El Anillo de Consistencia se cierra al 100%.

```

+-------------------------------------------------------+

| 🎉 ¡ANILLO DE CONSISTENCIA COMPLETADO!               |

|                                                       |

| Resumen del Consultor:                                |

| ✔️ Comprensión del Signo de Eco                      |

| ✔️ Dominio de la Escala de Villafañe                 |

| ✔️ Sincronización Exitosa Sin Conexión                |

+-------------------------------------------------------+

```

### Protocolo de Evaluación del Docente (Aplicando la Fase 4):

Para cerrar la actividad, el docente evalúa la experiencia de los tríos utilizando la técnica estructurada de la guía:

1. **Acierto Técnico/Diseño:** *"Felicito al equipo; la transición gráfica entre los niveles de iconicidad en la pantalla es impecable y la app responde de forma inmediata gracias al almacenamiento local."*

2. **Corrección Necesaria:** *"Sin embargo, revisen el contraste del texto descriptivo de Umberto Eco en las pantallas pequeñas, ya que viola la norma WCAG de accesibilidad planteada en su manual de estilo."*

3. **Refuerzo Motivacional:** *"Han logrado crear un motor offline sólido y conectar la teoría semiótica compleja con una experiencia interactiva real. Mantengan ese ritmo para la entrega final del proyecto de marca."*

### Público Objetivo

Estudiantes del curso de semiótica

### Funcionalidades Deseadas

Reto 1: La Cápsula del Tiempo (Evolución de Marca)

Propósito: Activar saberes previos e identificar intuitivamente los cambios en el nivel de iconicidad a través de la historia de una marca peruana (ej. Inca Kola).

    Funcionalidad Interactiva (Visualización): "Línea de Tiempo Deslizante con Lupa"

        Interacción: Los estudiantes ven un carrusel o línea de tiempo interactiva. Al tocar cada versión del logotipo (1980, 2000, Actual), la imagen se expande. Se activa una herramienta de "Lupa" (Zoom) interactiva al arrastrar el dedo, permitiendo explorar los detalles de la ilustración antigua versus los trazos limpios de la versión moderna.

    Pregunta Cerrada (Gamificada - 1 punto):

        Formato: Selección múltiple con temporizador.

        Pregunta: "Observa la versión de los años 80 con la lupa. ¿Qué característica principal define su representación visual?"

        Opciones: A) Es un pictograma geométrico. B) Posee alta figuratividad e ilustración detallada (Correcta). C) Es un esquema arbitrario.

    Pregunta Abierta (Debate en Equipo - Cierre de fase):

        Formato: Campo de texto expandible (Input) con guardado automático.

        Pregunta: "¿Por qué creen que la marca eliminó los detalles figurativos con el paso de los años? ¿Qué relación tiene esta síntesis visual con los formatos digitales actuales y el público?"

        Dinámica: El equipo debate y el "Desarrollador PWA" (o quien tenga el dispositivo) redacta la conclusión consensuada.

Reto 2: El Laboratorio Semiótico (Tipos de Signo)

Propósito: Aplicar la teoría de Peirce y Eco para clasificar signos visuales (Ícono, Índice, Símbolo) y comprender que la semejanza es cultural.

    Funcionalidad Interactiva (Visualización): "Tarjetas Reactivas (Swipe & Drop)"

        Interacción: Aparecen imágenes de marcas y señales en el centro de la pantalla (ej. El logo de Apple, una nube gris oscura, la Cruz Roja). El usuario debe arrastrar la imagen hacia una de las tres "Cajas de Clasificación" (Ícono, Índice, Símbolo). Si se equivocan, la tarjeta vibra (feedback háptico) y regresa al centro.

    Pregunta Cerrada (Gamificada - Arrastre):

        Formato: Drag & Drop.

        Acción: Clasifica el logo abstracto de Nike (el Swoosh).

        Respuesta esperada: El usuario debe soltarlo en la caja "Símbolo".

    Pregunta Abierta (Justificación Teórica):

        Formato: Pop-up de reflexión tras un acierto.

        Pregunta: "Has clasificado correctamente el logo de Nike como un 'Símbolo'. Utilizando la teoría de Umberto Eco y Peirce, explica brevemente: ¿Por qué reconocemos este logo si no se parece físicamente a una zapatilla ni a la velocidad?"

        Dinámica: Refuerza el concepto de convención cultural frente a la semejanza directa.

Reto 3: El Calibrador de Villafañe (Grados de Iconicidad)

Propósito: Tomar decisiones de diseño proyectual utilizando la escala de iconicidad de Justo Villafañe, adaptando el signo a un contexto específico.

    Funcionalidad Interactiva (Visualización): "El Slider de Mutación Visual"

        Interacción: Se presenta un concepto (Ej. "Café peruano"). En pantalla hay un logotipo y debajo un control deslizante (Slider) interactivo que va del Nivel 11 (Máxima iconicidad) al Nivel 1 (Mínima). Al arrastrar el slider, la imagen cambia dinámicamente:

            Nivel 11: Fotografía de una taza real de café.

            Nivel 8: Fotografía en blanco y negro.

            Nivel 6: Pintura o ilustración detallada de la taza.

            Nivel 4: Pictograma (silueta simple de una taza humeante).

            Nivel 1: Representación abstracta (círculos y líneas).

    Pregunta Cerrada (Gamificada - Toma de decisión):

        Formato: Ajuste de Slider y botón "Confirmar Calibración".

        Escenario: "Tu cliente es una nueva App de delivery rápido (público joven, visualización en pantallas móviles). Ajusta el slider al nivel de iconicidad más pertinente."

        Respuesta esperada: El usuario debe dejar el slider en el Nivel 4 (Pictograma) y presionar confirmar.

    Pregunta Abierta (Defensa del Proyecto):

        Formato: Grabación de voz corta (uso de la API de micrófono de la PWA) o texto libre.

        Pregunta: "Argumenta tu decisión. ¿Por qué una fotografía realista (Nivel 11) o un esquema arbitrario (Nivel 1) habrían fracasado en este contexto digital específico?"

        Dinámica: Permite evaluar la competencia argumentativa del estudiante (Logro de la Unidad 3) más allá de la simple memorización de conceptos.

💡 Nota Técnica para la PWA (Sinergia de Datos)

Dado el enfoque de desarrollo técnico de la PWA, es vital que las respuestas a estas preguntas abiertas se guarden en tiempo real.

Utilizando tecnologías de peticiones asíncronas (como el Fetch API moderno, evolución natural de las técnicas documentadas en recursos clásicos como Ajax on Java), la PWA puede guardar cada pulsación de tecla o cambio de slider en el IndexedDB local. Esto garantiza que si un grupo está debatiendo una pregunta abierta y pierde la conexión a internet, no perderán su análisis y la fluidez de la gamificación se mantendrá intacta.

### Diseño y Estilo Visual

Esta fase se estructura sobre los siguientes pilares rectores presentados en tu proyecto:

1. Consolidación del Manual de Estilo Gráfico

Es el documento innegociable que rige toda la composición gráfica de la app. En esta fase, el equipo concreta:

    Uniformidad tipográfica: Mantener un control estricto en la forma de la letra para evitar que la aplicación se perciba como inicial o desordenada.

    Cohesión de UI: Estandarizar paletas de color, márgenes y formas geométricas para que las pantallas de los retos y del onboarding mantengan consistencia visual, reforzando la inmersión en la narrativa del juego.

2. Aplicación de la Escala de Iconicidad y Semiótica Visual

El estilo visual de la PWA no es arbitrario, sino que está fundamentado en la teoría de la imagen:

    Calibración de la Iconicidad (Villafañe): Los diseñadores deben decidir el nivel exacto de figuratividad o abstracción de los activos del juego (como el diseño del "Anillo de Consistencia", las tarjetas de personajes o los avatares). Se debe decidir cuándo utilizar pictogramas minimalistas (baja iconicidad, alta síntesis) y cuándo usar ilustraciones detalladas, basándose en la familiaridad del público objetivo.

    Convención Cultural (Eco y Peirce): El diseño de los iconos de la interfaz (botones de inicio, flechas de progreso, medidores de puntos) debe entenderse como la creación de signos visuales (íconos, índices o símbolos) que dependen de los códigos perceptivos y culturales del usuario móvil para ser reconocidos instantáneamente.

3. Accesibilidad y Jerarquía Visual (Estándares WCAG)

El diseño visual debe estar al servicio de la inclusividad y la claridad en dispositivos móviles:

    Legibilidad en pantallas pequeñas: Aplicar contrastes de color óptimos (según las normas WCAG) entre los textos, los botones de acción y los fondos de la PWA.

    Ruta visual guiada: El tamaño, el color y el peso visual de los elementos deben establecer una jerarquía clara. La vista del usuario debe ser atraída naturalmente hacia las mecánicas del juego (como las zonas de Drag & Drop o los sliders) sin sufrir fatiga visual o sobrecarga cognitiva.

4. Retroalimentación Visual (Feedback del Juego)

El estilo visual también debe integrar el diseño de micro-interacciones. Esto implica animaciones sutiles, cambios de color o estados de alerta visual que le indiquen al usuario cuándo ha logrado un objetivo (ej. completar el reto de la evolución de marca) o cuándo la app pasa al "Modo Offline" bajo el control del Service Worker.

### Interacción y Comportamiento

1. Lógica de Eventos en el Frontend (JavaScript y Asincronía)

El comportamiento de la aplicación depende de cómo el sistema "escucha" y reacciona a las acciones del usuario sin necesidad de recargar la página.

    Manejadores de eventos (Event Listeners): Código necesario para detectar interacciones táctiles en dispositivos móviles, como toques (taps), deslizamientos (swipes para el control deslizante de iconicidad) y arrastre (drag & drop para clasificar los signos de Peirce).

    Asincronía (Fetch API / Ajax): Tal como se documenta en recursos de desarrollo dinámico web (como la tecnología Ajax), se requiere la capacidad de enviar y recibir datos en segundo plano. Esto permite que el sistema valide respuestas, actualice el progreso o guarde información en el servidor de forma silenciosa mientras el usuario sigue interactuando.

2. Micro-interacciones y Retroalimentación Inmediata

Para que la gamificación no se perciba vacía, el comportamiento del sistema debe guiar al usuario constantemente:

    Feedback Visual y Háptico: Cuando el usuario clasifica un signo visual correctamente, el sistema debe responder de inmediato (ej. la tarjeta brilla en verde accesible o el dispositivo emite una ligera vibración). Si hay un error, debe haber un rebote visual.

    Transiciones y Animaciones: Se requieren animaciones CSS/JS fluidas (ej. la barra o el "Anillo de Consistencia" llenándose progresivamente). Esto recompensa visualmente al cerebro y fomenta la "completitud" que mencionaste en tus instrucciones.

3. Motor de Reglas (Mecánicas de Gamificación)

El comportamiento de la app está dictado por las reglas del juego codificadas por el Desarrollador Frontend y el Diseñador de Gamificación:

    Lógica de validación: Algoritmos simples que comparen la respuesta del usuario (ej. elegir "Símbolo" para el logo de Nike) con la respuesta correcta en la base de datos.

    Progresión y Recompensas: Un sistema de estados (State Management) que determine qué nivel está desbloqueado y calcule el porcentaje de progreso del usuario en tiempo real.

4. Gestión del Comportamiento Offline (Service Workers)

La interacción no puede romperse si falla el internet. Esto es vital para la PWA:

    Intercepción de peticiones: Se requiere que el Service Worker esté programado para detectar si no hay red.

    Cambio de Estado de la Interfaz: El comportamiento de la UI debe adaptarse, mostrando alertas sutiles (como el mensaje "Modo Offline activo") y cambiando la lógica de guardado temporalmente hacia el almacenamiento local (LocalStorage o IndexedDB) en lugar del servidor remoto.

    Sincronización en Segundo Plano (Background Sync): El comportamiento post-desconexión donde la app, al recuperar el internet, envía silenciosamente todos los puntos y avances guardados localmente a la base de datos principal.

En resumen: Para generar la "Interacción y Comportamiento", tu equipo necesita traducir el flujo de usuario en lógica de estado (JS), respuestas asíncronas fluidas y un diseño de retroalimentación constante que mantenga al estudiante inmerso en el reto de la semiótica visual, sin importar si está online u offline.

### Tecnologías y Estructura

Para materializar el proyecto de la PWA gamificada "IconiShift" y garantizar que cumpla con los objetivos pedagógicos y los requisitos de funcionamiento sin conexión (offline), la dimensión de Tecnologías y Estructura debe definirse con precisión. Esta fase detalla el Stack tecnológico (las herramientas) y la arquitectura del sistema (cómo se organizan).

Basándonos en las instrucciones iniciales y los roles de tu equipo de 4 estudiantes, aquí tienes la definición de esta dimensión:

1. Tecnologías (El Stack Frontend y PWA)

Dado que el mayor riesgo es la fragmentación del trabajo, el equipo debe estandarizar las tecnologías que usarán los desarrolladores (Frontend y PWA) bajo la supervisión del líder de UX/UI.

    Estructura y Semántica:

        HTML5: Uso estricto de etiquetas semánticas (<header>, <main>, <article>, <section>) para estructurar los retos de iconicidad. Esto es vital para cumplir con los estándares de accesibilidad (WCAG) exigidos al rol de UX/UI.

    Estilos y Diseño Visual:

        CSS3 (o preprocesadores como SASS): Para implementar el "Manual de Estilo Gráfico". Se utilizarán variables CSS para colores y tipografías, Flexbox/Grid para la adaptabilidad móvil (Responsive Design), y Keyframes para las animaciones de las micro-interacciones (ej. el rebote de la tarjeta al fallar la clasificación de Peirce).

    Lógica de Interacción y Asincronía:

        JavaScript (ES6+): El motor del juego. Controlará el temporizador, el slider de Villafañe, y la lógica del "Anillo de Consistencia".

        Fetch API / AJAX: Para cargar recursos dinámicamente o enviar el progreso del usuario al servidor en segundo plano sin recargar la página, manteniendo la fluidez de la app nativa.

    El Motor PWA (Capacidades Offline):

        Web App Manifest (manifest.json): Archivo de configuración que permite que la app sea instalable, definiendo íconos, colores del tema y el modo de visualización (standalone).

        Service Workers (JS): Scripts que se ejecutan en segundo plano, separados de la página web. Son fundamentales para interceptar las peticiones de red y permitir el juego sin internet.

        Almacenamiento Local (IndexedDB / LocalStorage): Para guardar el progreso del jugador, sus respuestas abiertas y sus puntajes cuando no hay conexión, sincronizándolos posteriormente (Background Sync).

2. Estructura (Arquitectura del Sistema)

La estructura del proyecto debe separar responsabilidades para que el Desarrollador Frontend y el Desarrollador PWA puedan trabajar en paralelo sin pisarse el código. Se recomienda una arquitectura basada en capas (MVC o similar):

A. Capa de Presentación (Interfaz de Usuario / UI)

    Archivos: index.html, styles.css.

    Función: Es lo que el usuario ve y toca. Contiene las pantallas del Onboarding, el contenedor del Slider de iconicidad, las zonas de Drag & Drop y la representación visual del Anillo de Consistencia. Escucha los eventos táctiles del usuario.

B. Capa de Lógica de Negocio (Motor de Gamificación)

    Archivos: app.js, gameLogic.js, uiController.js.

    Función: Procesa la información. Aquí reside el código que evalúa si el usuario arrastró correctamente el logo de Apple a la caja de "Ícono" o "Símbolo". Gestiona el estado de la partida, suma los puntos y activa las animaciones de victoria o error.

C. Capa de Datos y Red (El Núcleo PWA)

    Archivos: sw.js (Service Worker), manifest.json, db.js (gestión de IndexedDB).

    Función:

        App Shell: La estructura básica de la UI (HTML/CSS) se guarda en la Cache API la primera vez que se abre la app. Así, en las futuras visitas, la interfaz carga instantáneamente.

        Gestión Offline: El Service Worker actúa como un "policía de tráfico". Si el usuario presiona "Confirmar respuesta" y hay internet, la envía al servidor. Si se detecta la simulación offline (la "caída de red" del Nivel 3), el Service Worker desvía esos datos para que se guarden temporalmente en el dispositivo (IndexedDB) y muestra la alerta de Modo Offline activo.

Mantener esta estructura modular asegurará que, al llegar a la Fase 4 (Evaluación y Pruebas), el equipo pueda auditar el comportamiento del Service Worker y la interfaz gráfica de forma independiente, solucionando errores sin desestabilizar todo el proyecto.

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