IconiShift · El Reto de la Marca

 # IconiShift · El Reto de la Marca

> **PWA Gamificada de Semiótica Visual e Iconicidad**  

> Estilo Art Déco · Curso: Semiótica de la Imagen · UTP 2026  

> Docente: Mg. Mario Quiroz Martinez

---

## Descripción

**IconiShift** es una Progressive Web App (PWA) autocontenida diseñada para la enseñanza gamificada de semiótica visual aplicada al diseño y la comunicación. La aplicación guía a los estudiantes a través de 5 retos progresivos y 4 misiones de auditoría semiótica, donde deben aplicar las teorías de **Peirce**, **Eco** y **Villafañe** para analizar, clasificar y proyectar signos visuales en contextos reales de diseño peruano e internacional.

La interfaz adopta una estética **Art Déco** con paleta dorado-negro, tipografías Cinzel y Poiret One, y elementos decorativos geométricos que evocan la década de 1920.

---

## Características Principales

| Característica | Descripción |

|---------------|-------------|

| **PWA Offline** | Service Worker integrado para funcionamiento sin conexión. Simulación de modo offline en el Reto III. |

| **Registro de Equipos** | Formulario de hasta 6 integrantes con campos: nombre, correo institucional, usuario, carrera, grupo y rol. |

| **5 Retos Progresivos** | Cápsula del Tiempo, Laboratorio Semiótico, Calibrador de Villafañe, Galería de Análisis Externo, Síntesis Semiótica. |

| **4 Misiones — Agencia de Inteligencia Visual** | Auditoría semiótica de la marca **Inca Kola** aplicando tricotomía de Peirce, figuratividad, escala de Villafañe y veredicto proyectual. |

| **Drag & Drop** | Clasificación interactiva de signos (Peirce) con soporte táctil para dispositivos móviles. |

| **Calibrador de Villafañe** | Slider interactivo con 11 niveles de iconicidad visual (postales de Bratislava). |

| **Subida de Imágenes** | 4 zonas de upload para análisis externo con compresión automática (JPEG, calidad 0.2, máx. 1200px). |

| **Lupa Interactiva** | Ampliación de imágenes del timeline histórico con overlay a pantalla completa. |

| **Modales Artísticos** | Contexto teórico detallado para cada época del timeline (1936-1970). |

| **Sistema XP e Insignias** | Acumulación de puntos por misión, 4 insignias desbloqueables y 3 rangos: Junior → Analista → Consultor Estratégico. |

| **Generación con IA** | Prompts predefinidos para Midjourney/DALL-E en los retos de análisis externo y branding. |

| **Guardado Automático** | Persistencia de respuestas, imágenes y progreso en `localStorage`. |

| **Exportación de Datos** | Botones para descarga en **CSV** e **impresión/PDF** con fondo negro y estilo Art Déco. |

| **Reporte de Impresión** | Sección oculta `#printReport` optimizada para impresión con fondo oscuro, tablas doradas y miniaturas. |

| **Celebración Visual** | Efectos de confeti, globos y estrellas doradas al completar retos. |

| **Responsive** | Diseño adaptado para pantallas desde 320px hasta 1920px, con optimización específica para 569px de ancho. |

| **Audio** | Botones de briefing de audio (placeholder para archivos de sonido). |

---

## Estructura de Retos y Misiones

### Retos Principales

1. **Reto I — La Cápsula del Tiempo**  

   Timeline interactivo (1936-1970) con lupa y modales artísticos. Pregunta cerrada sobre figuratividad. Debate en equipo abierto.

2. **Reto II — El Laboratorio Semiótico**  

   Drag & Drop de signos visuales en contenedores Ícono, Índice y Símbolo (Peirce/Eco). Justificación teórica abierta.

3. **Reto III — El Calibrador de Villafañe**  

   Slider de 11 niveles de iconicidad (postales de Bratislava). Pregunta cerrada sobre pictogramas. Defensa del proyecto abierta.

4. **Reto IV — Galería de Análisis Externo**  

   Upload de imágenes generadas con IA (cartel publicitario + señalética urbana). Dos preguntas cerradas (Villafañe + Eco).

5. **Reto V — Síntesis Semiótica**  

   Upload de branding peruano y emojis digitales. Dos preguntas cerradas (Peirce + Eco). Dos reflexiones integradoras abiertas.

### Misiones — Agencia de Inteligencia Visual (Inca Kola)

| Misión | XP | Enfoque |

|--------|-----|---------|

| M1: El Escáner de Peirce | 100 XP/elemento | Clasificación de 4 elementos (isotipo, logotipo, cromático, composición) |

| M2: El Misterio de la Forma | 150 XP | Figuratividad y elipsis visual |

| M3: El Termómetro de Villafañe | 150 XP | Escala de 9 niveles de iconicidad |

| M4: El Veredicto Proyectual | 200 XP | Diagnóstico crítico + propuesta de ajuste |

---

## Tecnologías Utilizadas

- **HTML5** semántico con atributos de accesibilidad

- **CSS3** con variables CSS personalizadas (paleta Art Déco)

- **Bootstrap 5.3.2** (CDN) — grid system y componentes base

- **Bootstrap Icons 1.11.1** (CDN)

- **Google Fonts**: Poiret One, Playfair Display, Cinzel

- **JavaScript vanilla** — sin frameworks adicionales

- **Service Worker** inline (Blob + URL.createObjectURL)

- **localStorage API** — persistencia de estado

- **Canvas API** — compresión de imágenes upload

- **FileReader API** — lectura de archivos locales

- **Clipboard API** — copia de prompts para IA

---

## Instalación y Uso

### Requisitos

- Navegador moderno con soporte para Service Workers (Chrome, Firefox, Edge, Safari)

- Conexión a Internet para carga inicial de recursos CDN

### Instalación PWA

1. Abrir el archivo `index.html` en un servidor web local o hosting

2. El navegador detectará automáticamente el manifiesto PWA

3. Usar "Agregar a pantalla de inicio" o "Instalar aplicación" desde el menú del navegador

4. La app funcionará en modo standalone con fondo negro `#0a0a0a`

### Flujo de Uso

1. **Registro de equipo** (1-6 integrantes)

2. **Revisión y confirmación** de datos

3. **Onboarding** con briefing de misión

4. **Completar los 5 retos** en orden progresivo

5. **Acceder a las 4 misiones** de la Agencia de Inteligencia Visual

6. **Ascender a Consultor Estratégico** al completar ≥3 misiones

7. **Exportar CSV** o **imprimir PDF** del reporte completo

---

## Archivos del Sistema

```

index.html          # Aplicación completa (HTML + CSS + JS inline)

├── Imágenes referencia (esperadas en ruta relativa):

│   ├── 2.png, 3.jpg, 6.png, 7.jpg, 9.jpg    # Timeline histórico

│   ├── a_1.png ... a_11.png                   # Escala Villafañe (11 niveles)

│   ├── Swoosh_Nike.jpg                        # Logo Nike

│   ├── Salida_emergencia.jpg                  # Pictograma ISO 7010

│   ├── Incacola.png                           # Logo Inca Kola

│   ├── bigBrenetAviator.jpg                   # Fallback 1936

│   ├── becomeanurse.jpg                     # Fallback 1943

│   ├── bigBoccasileVigorelli.jpg             # Fallback 1950

│   ├── bigLucCarnival.jpg                     # Fallback 1960

│   └── bigRingo.jpg                           # Fallback 1970

└── Sonidos (opcionales):

    ├── click.mp3

    ├── success.mp3

    └── celebration.mp3

```

---

## Estado Global (`localStorage`)

La aplicación persiste automáticamente en `localStorage` bajo la clave `iconishift_deco_v3_state`:

```json

{

  "currentScene": "scene-registro",

  "progress": 0,

  "team": [...],

  "answers": { "q1": null, "q3": null, ... },

  "uploads": { "upload1": "data:image/jpeg;base64,...", ... },

  "xp": 0,

  "badges": [],

  "m1Completed": 0,

  "m2Completed": 0,

  "m3Level": null,

  "m4Completed": false

}

```

---

## API de Funciones Principales

### Navegación

- `goToScene(sceneId)` — Transición entre escenas con animación fade-in

- `startGame()` — Inicia operación semiótica desde onboarding

### Registro de Equipo

- `addTeamMember()` — Valida y agrega integrante

- `removeMember(index)` — Elimina integrante

- `showTeamReview()` / `confirmTeam()` — Flujo de revisión

### Validación de Retos

- `validateQ1()` a `validateQ7()` — Preguntas cerradas con retroalimentación

- `validateVillafane()` — Calibración del slider

- `checkReto2Completion()` — Drag & Drop (mínimo 3 aciertos)

- `checkReto4()` / `checkReto5()` — Verificación de pares de respuestas

### Misiones — Inca Kola

- `selectM1Incacola(element, value, btn)` — Selección en Escáner de Peirce

- `validateM1()` a `validateM4()` — Validación de misiones con sistema XP

- `updateVillafaneM3(val)` — Slider de 9 niveles para Termómetro

### Utilidades

- `saveState()` / `loadState()` — Persistencia localStorage

- `saveOpenAnswer(key, value)` — Guardado automático de textareas

- `handleImageUpload(event, previewId, areaId, uploadKey)` — Compresión y preview

- `copyPrompt(elementId, btn)` — Copia prompts para IA generativa

- `printFullReport()` — Generación de reporte impreso con estilo Art Déco

- `exportCSV()` — Descarga de datos en formato CSV separado por punto y coma

- `triggerCelebration()` — Efectos visuales de celebración

---

## Paleta de Colores (Art Déco)

| Variable | Valor | Uso |

|----------|-------|-----|

| `--deco-gold` | `#d4af37` | Elementos principales, acentos |

| `--deco-gold-light` | `#f0d878` | Hover, brillos |

| `--deco-gold-dark` | `#aa8c2c` | Bordes, sombras |

| `--deco-black` | `#0a0a0a` | Fondo principal |

| `--deco-charcoal` | `#141414` | Tarjetas, contenedores |

| `--deco-cream` | `#f5f5dc` | Texto principal |

| `--deco-burgundy` | `#800020` | Errores, alertas |

| `--deco-emerald` | `#046307` | Éxito, aciertos |

| `--deco-bronze` | `#cd7f32` | Advertencias, información secundaria |

| `--deco-silver` | `#c0c0c0` | Texto terciario, metadatos |

---

## Licencia y Atribución

- **Desarrollo académico**: Instituto de Diseño y Comunicación (IDC) / Universidad Tecnológica del Perú (UTP)

- **Docente**: Mg. Mario Quiroz Martinez

- **Curso**: Semiótica de la Imagen

- **Año**: 2026

- **Framework CSS**: Bootstrap 5.3.2 (MIT License)

- **Iconos**: Bootstrap Icons 1.11.1 (MIT License)

- **Tipografías**: Google Fonts (Open Font License)

---

## Notas Técnicas

- **Compresión de imágenes**: Las imágenes upload se redimensionan a máximo 1200px de ancho y se comprimen a JPEG calidad 0.2 para optimizar `localStorage` (límite ~5-10 MB).

- **Service Worker**: Generado dinámicamente mediante Blob para evitar dependencias de archivos externos. Cachea únicamente la ruta raíz (`./`).

- **Impresión**: La media query `@media print` fuerza fondo negro `#0a0a0a` y colores dorados mediante `-webkit-print-color-adjust: exact`.

- **Responsive**: Breakpoint principal en `576px`. El calibrador Villafañe usa `aspect-ratio: 813/617` en móviles.

- **Accesibilidad**: Todos los inputs tienen labels asociados, roles ARIA implícitos en elementos semánticos, y contraste dorado-sobre-negro WCAG AA.

---

*IconiShift · El Reto de la Marca — Restaurando el orden semiótico, un signo a la vez.*