# PROMPT MAESTRO — "Los Codigos Integrados: The Code Hunters" (ARCADE EDITION)
# PROMPT MAESTRO — "Los Codigos Integrados: The Code Hunters" (ARCADE EDITION)
### Tema: LA HIPERCODIFICACION VISUAL — Semiotica de la Imagen, Semana 11 (UTP)
## Rol y objetivo
Eres un desarrollador frontend experto en aplicaciones web educativas con estetica
**videojuego arcade de los 90** (pixel art + low-poly temprano). Debes crear una **PWA
completa en UN SOLO archivo `.html` monolitico**, sin dependencias externas (salvo
imagenes locales), para la sesion de **Semiotica de la Imagen, Semana 11 (UTP)**.
- Docente: **Mg Mario Quiroz**
- Curso: **Semiotica de la Imagen** · Ano 2026 · Semana 11 · UTP
- Footer fijo: `DOCENTE: MG MARIO QUIROZ · SEMIOTICA DE LA IMAGEN · 2026 · SEMANA 11`
- **Tema: La hipercodificacion visual.**
- **Logro de la sesion:** Al finalizar, el estudiante **identifica y explica el fenomeno
de hipercodificacion visual en imagenes publicitarias**, reconociendo los **estratos de
codigos** (culturales, retoricos e ideologicos) superpuestos en la construccion del
mensaje visual, y los aplica reflexivamente en el **proyecto de comunicacion de marca**.
- Estructura pedagogica: **modelo didactico UTP I-U-T-P-C** (Inicio, Utilidad,
Transformacion, Practica, Cierre).
- Marco teorico: **Roland Barthes** (Retorica de la imagen; El mensaje fotografico; los
seis procedimientos de connotacion; mito; connotadores; retorica) y **Umberto Eco**
(codigo iconico; La estructura ausente). Tambien Villafane y Wiener Fresco.
---
## 1. Stack tecnico (obligatorio)
- HTML5 semantico, CSS3 vanilla inline en `<style>`, JavaScript ES6 vanilla inline en
`<script>`. Sin frameworks, sin librerias, sin CDN.
- Todo (CSS, JS, datos) en **un unico archivo `.html`** que abra directo en Chrome/Firefox
sin servidor.
- `localStorage` para persistencia (`s11_arcade`).
- **Web Audio API** para musica chiptune y efectos.
- **Canvas 2D** para el shooter y para el laberinto de la portada.
- **Service Worker inline** (Blob + `URL.createObjectURL`) para PWA/offline.
- Responsive **mobile-first**, `max-width:1000px`.
- Evitar template literals anidados; usar concatenacion de strings.
- Texto visible en espanol neutro con entidades HTML (`á`, `¿`, etc.) o sin
tildes; nombres de variables/funciones en ingles permitido.
---
## 2. Estetica: VIDEOJUEGO ARCADE 90s
Recrea dos eras visuales:
**A. 2D de los 90 (pixel art de alta densidad):**
- Paleta indexada brillante sobre negro (variables CSS):
```
--p-black:#000; --p-cyan:#00ffff; --p-magenta:#ff00ff; --p-yellow:#ffff00;
--p-green:#00ff00; --p-red:#ff2050; --p-blue:#3858ff; --p-orange:#ff8000;
--p-purple:#9028e0; --p-white:#fff; --p-gray:#808088; --p-dark:#181828; --p-mid:#404060;
```
- `image-rendering:pixelated` global.
- **Scrolling parallax**: 3 capas de estrellas (`radial-gradient` repetidos) animadas a
distinta velocidad (far 80s, mid 55s, near 35s) para ilusion de profundidad.
- **CRT**: scanlines (`repeating-linear-gradient` horizontal) + vinheta radial via
`body::before` y `body::after`.
- **Bordes chunky 8-bit**: clase `.pf` con `box-shadow` apilados (anillo negro + borde de
color), variantes `.pf-magenta/-yellow/-green/-red`.
- Tipografia monoespaciada (`'Courier New'`), `text-transform:uppercase`, `letter-spacing`.
- Titulos `.arcade` con `text-shadow` multi-capa (contorno rojo/negro tipo arcade) +
animacion `hue-rotate`.
- **PRESS START** parpadeante, **SCORE** con ceros a la izquierda (`000000`),
**barra de HP segmentada** (10 bloques verde/amarillo/rojo), banners **STAGE CLEAR**.
- Botones pixel con sombra dura desplazada y efecto "press" (translate al :active).
**B. 3D temprano (low-poly):**
- En el shooter, dibuja nave y enemigos como **sprites de bloques** (rectangulos), con
**sombreado lateral** (caras oscuras) y bordes dentados ("jaggies"), NO formas suaves.
- Explosiones pixeladas, texturas evidentes, sin anti-aliasing.
---
## 3. HUD y layout global
- **HUD superior** (3 columnas): `P1 · EQUIPO`, titulo central, `SCORE 000000`.
- **Pills de fase** (1 INICIO … 5 CIERRE) con estados active/done.
- **Ticker** `SISTEMA: ...` en cada pantalla: retroalimentacion constante en vivo
(acierto/error/HP/score), con clases `.ticker.ok/.bad/.info`.
- Boton flotante **musica** 🔊/🔇 (bottom-right). Footer fijo.
---
## 4. Flujo de pantallas (clase `.screen`, una activa)
```
PORTADA + REGISTER → 1 INICIO → 2 UTILIDAD → 3 TRANSFORMACION
→ 4 PRACTICA → 5 CIERRE → SCOREBOARD
Intercaladas si HP llega a 0: CHALLENGE MENU → {MAZE | DEFENDER | TEAM MAZE}
```
### 4.0 Portada "THE CODE HUNTERS / El Laberinto de Aprendizaje" (en register)
- **La portada es AUTOCONTENIDA: se dibuja en un `<canvas>` (680x360, hero a ancho
completo) dentro del propio HTML, sin depender de archivos externos.** La escena recrea
el poster: laberinto neon (muros con borde cian/magenta y glow), un **claro central** con
piso de rejilla cian, un **monolito holografico** al fondo, **cuatro estudiantes pixel-art
en fila** cada uno con una **tablet brillante** de color (cian, magenta, verde, amarillo)
y el titulo neon **THE CODE HUNTERS** (con `shadowBlur`). Funcion `drawCoverMaze()`.
- **Override opcional con imagen real**: un `<img id="coverImg" src="the_code_hunters.png">`
oculto por defecto; `onload` → se muestra y oculta el canvas; `onerror` → se oculta y
queda el dibujo del canvas. Asi, si el docente coloca el PNG al lado, reemplaza al dibujo;
si no, la portada igual se ve. (Tambien admite incrustar el PNG como data URI base64 para
un archivo 100% portatil.)
- Leyenda de los 4 colores (EST 1-4) + META, y texto que plantea la metafora: cada
estudiante entra al laberinto con su propio "decodificador"; juntos descifran las capas
de codigo de una imagen publicitaria (hipercodificacion).
- **4 preguntas detonantes** en tarjetas:
1. **Interpretacion del simbolo:** desde la semiotica, ¿que representa el laberinto
frente a los retos del proceso de diseno y aprendizaje?
2. **Analisis visual:** ¿por que los personajes y las interfaces se muestran
"pixeladas/holograficas" y que comunica esa decision estetica sobre la identidad
digital?
3. **Resolucion de problemas:** hay cuatro estudiantes explorando caminos distintos;
¿como ayuda el trabajo colaborativo a "salir del laberinto" de forma mas
eficiente?
4. **Experiencia y navegacion:** si el laberinto fuera un sistema o interfaz,
¿cuales serian las barreras o "puntos de friccion" para llegar al objetivo?
### 4.1 Register
- Inputs: Grupo, Seccion, Nombre, Email institucional. **Equipos de 3** (admite 2 a 4),
con avatar pixel generado por estudiante y chips eliminables. Boton **PRESS START**
aparece con 2+. Persistencia en localStorage.
### Fase 1 — INICIO: "LECTURA ACELERADA" (sorpresa epistemica)
Inspirada en la Actividad 1 del guion (en 3 s ya "lees" decenas de codigos). Tap-race de
60 s: por cada frase sobre una pieza publicitaria, el alumno decide rapido si es lo que la
imagen **MUESTRA** (denotado/literal, boton cian) o lo que le hace **LEER** culturalmente
(codificado/connotado, boton magenta).
- 8 frases sobre las imagenes publicitarias (God of War, Crossout, Sea of Thieves, Portal
Knights). +6 pts acierto, -3 HP fallo. Timer pixel, contador `01/08`, ticker en vivo.
- **Trampa pedagogica**: lo que parece "natural" suele estar CODIFICADO; eso evidencia la
hipercodificacion ("la connotacion se disfraza de denotacion").
- Pantalla de resultado con la reflexion: "¿por que en 3 s ya supiste tanto de esa
marca?" y STAGE CLEAR.
### Fase 2 — UTILIDAD: "DEL CODIGO DE CONNOTACION AL HIPERCODIGO"
Recupera saberes previos (Semana 10) y contextualiza la utilidad profesional.
- **Mapeador de codigos**: emparejar elementos visuales con su significado cultural
(rojo=peligro/pasion, dorados=lujo, simetria fria=tecnologia/distopia, pose erguida=
aspiracionalidad, etc.) para evidenciar que el **codigo de connotacion** "no es ni
artificial ni natural: es historico" (Barthes). +4 pts match, -2 HP error.
- **Caso de utilidad profesional**: comparar dos afiches (uno de **baja carga connotativa**
minimalista vs uno **hipercodificado**); el alumno responde en que situacion de marca
usaria cada uno y que riesgos tiene acumular codigos sin controlarlos.
### Fase 3 — TRANSFORMACION: teoria interactiva (3 modulos = 3 momentos del guion)
- **M1 · Del codigo al hipercodigo (Eco):** codigo iconico = sistema que hace corresponder
vehiculos graficos con unidades perceptivas y culturales codificadas; **hipercodificacion
= superposicion simultanea de varios codigos** sobre un mismo mensaje (cromatico, gestual,
estetico/fotogenia/esteticismo, posicion, objeto-simbolo, ideologico). Pregunta:
¿cuantos codigos identificaste en el experimento inicial?
- **M2 · Los SEIS procedimientos de connotacion (Barthes) como operadores de
hipercodificacion:** **trucaje, pose, objetos, fotogenia, esteticismo, sintaxis.** Cada
uno agrega una capa de codigo al mensaje denotado. Pregunta clave: ¿que
procedimiento produce la connotacion mas "invisible", la que mas se disfraza de
denotacion?
- **M3 · Hipercodificacion como naturalizacion de la ideologia:** cuando los codigos se
acumulan tanto que el mensaje connotado parece "natural" → "la connotacion ya no se vive
mas que como la resonancia natural de la denotacion"; **mito** (mensaje de segundo orden),
**connotadores** y **retorica** ("la parte significante de la ideologia"). Pregunta de
reto: ¿puede una marca peruana usar la hipercodificacion sin reproducir
estereotipos daninos? ¿como?
- Cada pregunta: 3-4 opciones A/B/C/D, **feedback inmediato detallado** (correcto +10 pts,
incorrecto -25 HP con explicacion), opciones deshabilitadas, boton Continuar; si HP<=25
el boton cambia a "HP CRITICO — BONUS STAGE". Badges de modulo, dots de progreso,
imagenes del modulo clickeables (lightbox).
- Incluir tambien la **pregunta de reto metacognitivo** (3 lineas): ¿como puede un
disenador etico ser consciente de los codigos que pone en circulacion y de los
estereotipos que perpetua?
### Fase 4 — PRACTICA: "MAPA DE HIPERCODIFICACION VISUAL" (en equipos de 3)
Operacionaliza el concepto en la matriz exacta del guion. Por cada **estrato de codigo**,
el equipo completa 4 columnas:
| Estrato de codigo | Elementos identificados | Significado connotado | ¿Universal o culturalmente especifico? | ¿Reproduce estereotipo? |
|---|---|---|---|---|
| Codigo cromatico | | | | |
| Codigo gestual / pose | | | | |
| Codigo de objetos-simbolo | | | | |
| Codigo fotogenico (iluminacion, encuadre) | | | | |
| Codigo retorico (figura utilizada) | | | | |
| Codigo ideologico / mitologico | | | | |
- El equipo elige una **pieza publicitaria** (God of War, Sea of Thieves, Crossout, Portal
Knights u otra de marca peruana/latinoamericana) y la analiza.
- Al final identifica: **(a)** el codigo mas "invisible" (mas naturalizado), **(b)** el
codigo mas dependiente del contexto sociocultural peruano, **(c)** una **recomendacion de
rediseno** que mantenga la eficacia comunicativa sin perpetuar un estereotipo negativo.
- +5 pts por estrato completado (10+ caracteres); minimo 4 estratos. Inputs de puntaje
docente y textareas; persistencia.
- Criterios de calificacion mostrados: identificacion de >=4 estratos; distincion
universal vs culturalmente especifico; uso de terminologia barthesiana; reflexion critica
sobre el estereotipo; coherencia entre analisis y rediseno.
### Fase 5 — CIERRE: sintesis metacognitiva
- **Sintesis colaborativa**: completar la frase
*"La hipercodificacion visual es ____ porque ____, y como disenadores debemos ____."*
El sistema sintetiza con la idea central: los codigos de connotacion se acumulan formando
una **retorica de la imagen** ("la retorica aparece asi como la parte significante de la
ideologia"); quien no los hace conscientes los reproduce sin controlarlos.
- **3 preguntas metacognitivas** (del guion):
1. ¿Que diferencia hay entre un **codigo de connotacion** y la
**hipercodificacion**? Explicalo con tus palabras.
2. ¿Que **estrato de codigo** te resulta mas dificil de identificar y por que?
3. ¿Como usaras el **mapa de hipercodificacion** en tu **proyecto de comunicacion
de marca**?
+4 pts por respuesta no vacia (15+ chars). Se indica que forman parte del **portafolio**.
---
## 5. Sistema de HP y desafios (BONUS STAGES)
- HP inicial 100; -25 por respuesta cerrada incorrecta; penalizaciones menores en juegos.
Si HP llega a 0 → **CHALLENGE MENU**. Barra HP segmentada (OK / CUIDADO / !! CRITICO !!).
**A. Laberinto de Codigos (individual, 11x11):** jugador cian, meta trofeo; 25% de
"puerta de estrato" al moverse (pregunta sobre uno de los 6 codigos/procedimientos de
Barthes): correcto +15 HP, incorrecto -10 HP; meta → +30 HP y +20 pts; rendirse +20 HP.
**Sonidos**: pasos por movimiento, golpe contra pared, arpegio al abrir puerta, pickup,
moneda al ganar. **Distractor BUG**: cada 12-20 s una pared parpadea con aberracion
cromatica.
**B. Cazador de Estereotipos (canvas 600x500, shooter pixel):** nave cian (sprite de
bloques) con ← →, dispara con ESPACIO, P pausa. Caen frases:
- **Rojas = lecturas naturalizadas / estereotipos no examinados** → DISPARAR (+4 pts)
(ej.: "esta imagen es natural, no tiene codigos", "siempre se ha visto asi").
- **Verdes = analisis semioticos validos** → NO disparar (-10 HP si lo haces).
- **Amarillas = DECOY** que distraen → -5 HP si disparas.
Meta 12 → +50 HP, +30 pts. **Distractor**: interferencia "SIGNAL LOST" periodica que
distorsiona el canvas. **Sonidos**: laser, explosion, alerta, power-up, buzz de error.
Parallax de estrellas de fondo.
**C. Los Codigos Integrados (cooperativo, 13x13, por turnos):** cada estudiante con color e
icono propio; solo el del turno se mueve; todos deben llegar a la meta; puertas cooperativas
(5 preguntas integradoras sobre estratos, naturalizacion, mito y retorica) +10/-5 HP; skip y
rendirse disponibles; completar +50 HP y +30 pts. Mismos sonidos de pasos/puerta.
---
## 6. Eventos distractores GLITCH (clave pedagogica: DESNATURALIZAR)
Sistema de **falsas alertas del sistema** que aparece cada 18-50 s en INICIO y
TRANSFORMACION:
- Un popup glitcheado (aberracion cromatica + overlay) **ORDENA aceptar que la imagen es
"natural / real / sin codigos"** ("esta marca simplemente ES asi", "no hay ideologia,
es solo una foto", "ERROR: CODIGOS_NO_ENCONTRADOS = IMAGEN_NEUTRA").
- Botones **DESCARTAR (ESTA HIPERCODIFICADA)** y **ACEPTAR (ERROR)** + cuenta regresiva 5 s.
- **Reconocer y DESCARTAR** la trampa → +5 pts y suma **"Desnaturalizador"**. **Aceptar** →
-8 HP. **Timeout** → -5 HP.
- Asi el distractor entrena la competencia real: **detectar la naturalizacion ideologica**,
recordando que ninguna imagen publicitaria es "neutra".
---
## 7. Audio (Web Audio API, chiptune)
- Osciladores `square/sawtooth/triangle` + ruido (buffer) para explosiones.
- Efectos: `sndCorrect, sndWrong, sndWin, sndClick, sndFootstep, sndBump, sndDoor,
sndPickup, sndLaser, sndExplode, sndAlert, sndPowerup, sndCoin`.
- Musica de fondo: arpegio square en loop (`[262,330,392,523,392,330,262,196]`, ~220ms),
toggle flotante.
---
## 8. Scoreboard final
- **Ranking**: S (120+), A (90+), B (60+), C (40+), D (<40). Ring SVG con `SCORE 000000`.
- **Insignias**: Maestro de la Hipercodificacion (80%+), Analista Visual (60%+),
Sobreviviente (HP>0), Explorador (laberinto), Cazador de Estereotipos (shooter),
Codigo Integrado (co-op), Pensador Critico (2+ reflexiones), Velocista (<60 min),
Estratificador (matriz de 6 estratos completa), Desnaturalizador (3+ glitch descartados).
- Estadisticas (precision teorica, lectura acelerada, mapeador, desnaturalizacion, HP,
duracion, caidas) y lista del equipo. **Confetti** pixel.
- **Exportacion**:
- **TXT** (reporte formateado).
- **JSON** (estado crudo).
- **CSV** UTF-8 con BOM, comillas/escapado correctos (resumen, modulos, equipo, mapa de
hipercodificacion, recomendacion de rediseno, metacognitivas).
- **IMPRIMIR / PDF**: arma un `#printArea` y llama `window.print()`. La hoja `@media print`
usa **fondo negro arcade** (texto claro, titulos amarillos, encabezados cian, bordes
magenta) con `print-color-adjust:exact`; oculta UI/parallax/scanlines. Tablas legibles
de equipo, stats, modulos, insignias, mapa de hipercodificacion, rediseno y reflexiones.
---
## 9. Estado global `S`
```js
S = { sc, st:[{name,email}], gr, se, hp:100, scor:0, mO,
tap:{idx,hits,fails,done}, // FASE 1 lectura acelerada (LO MUESTRA / LO CODIFICA)
map:{matched,total,selA,selB,...}, // FASE 2 mapeador de codigos
mod, mq, ans:[], modScores:[0,0,0], // FASE 3 transformacion (3 modulos)
pr:{ // FASE 4 mapa de hipercodificacion
hc:{ "cromatico_el","cromatico_sig","cromatico_uni","cromatico_est",
"gestual_el", ... , "ideologico_est" }, // claves planas estratoId_campo
invisible, contextual, rediseno, // conclusiones (A/B/C)
pvpA, pvpB, pvpScoreA, pvpScoreB, pvpAF, lastEval }, // PvP naturaliza vs desnaturaliza
meta:['','',''], // FASE 5 metacognitivas
badges:{maze,def,team,defeated,antiGlitch}, sT } // antiGlitch = contador "desnaturalizar"
```
- Constantes clave: `ESTRATOS` (6 objetos `{id,lbl,hint,col}`), `MODULES` (3),
`TAP_PHRASES`, `MAP_PAIRS`, `MAZE_Q`, `TEAM_Q`, `DEF_PHRASES{fal,ok,decoy}`,
`GLITCH_ALERTS`, `METAQS`, `PRACT_IMG`, `IMGS`.
- Helpers: `hcCount()` (estratos validos: `*_el` y `*_sig` con 8+ chars), `estratoCard()`,
`evalHC()`.
- Guardar/cargar con `localStorage` (`s11_arcade`); al cargar, resetear audio/musica.
---
## 10. Responsive / accesibilidad
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
- Fuente base **16px (1rem)**; parrafos, feedback, opciones, hints y listas a **>=1rem**
con `line-height` comodo. Sin `pt` ni px fijos en textos largos.
- **Media query `<=768px`**: todos los layouts de 2 columnas (filas del form, comparativa
de afiches, mapeador, preguntas de portada, HUD, hero de portada, matriz de
hipercodificacion) colapsan a **1 columna**; titulos mas chicos; imagenes a ancho
completo; canvas fluido (`width:100%;height:auto`); botones y controles del laberinto con
areas tactiles mayores. Ajuste extra `<=430px`.
---
## 11. Imagenes (locales, mismo directorio)
**Portada / hero:**
- **No requiere archivo**: la portada se dibuja en canvas (`drawCoverMaze`). Opcionalmente,
`the_code_hunters.png` (arte neon "THE CODE HUNTERS": laberinto cian/magenta + 4
estudiantes con tablets + monolito) la reemplaza si esta presente, o se incrusta como
data URI base64 para portabilidad total.
**Piezas publicitarias para analisis (cargadas de signos / hipercodificadas):**
- `Portada_God_of_War.jpg` — Kratos (rostro, barba, trazo rojo): codigo cromatico rojo,
pose, fotogenia, objeto-simbolo (hacha), connotacion de masculinidad epica.
- `Portada_Knights.png` — Portal Knights: estetica voxel infantil, color vibrante,
connotacion de aventura ludica y accesible.
- `Portada_Sea_of_Thieves.jpg` — Sea of Thieves: pirateria caricaturesca, humor visual,
codigo gestual y de objetos.
- `Publicidad_Crossout.png` — Crossout ("Firestarters are coming"): paleta caliente,
destruccion como tropo, esteticismo apocaliptico, codigo ideologico.
La app debe funcionar aunque falten (los `<img>` quedan vacios; la portada usa el canvas de
respaldo). Lightbox: click en imagen → overlay con imagen ampliada + caption.
---
## 12. Contenido semiotico de referencia
- **Concepto central:** la **hipercodificacion visual** = superposicion simultanea de
multiples codigos sobre un mismo mensaje, hasta que la connotacion se vive como
"resonancia natural de la denotacion" (naturalizacion ideologica).
- **Eco:** codigo iconico; la estructura ausente; el sistema que hace corresponder
vehiculos graficos con unidades perceptivas y culturales codificadas.
- **Barthes:** los **seis procedimientos de connotacion** (trucaje, pose, objetos,
fotogenia, esteticismo, sintaxis); el **codigo de connotacion historico** ("no es ni
artificial ni natural, es historico"); **mito** (mensaje de segundo orden);
**connotadores** y **retorica** ("la parte significante de la ideologia").
- **Estratos de codigo (matriz):** cromatico, gestual/pose, objeto-simbolo, fotogenico,
retorico, ideologico/mitologico.
- **Dimension etica/profesional:** codificacion universal vs culturalmente especifica
(contexto peruano/latinoamericano), reproduccion de estereotipos y responsabilidad del
disenador en proyectos de comunicacion de marca.
- Bibliografia: Barthes (Retorica de la imagen; El mensaje fotografico; Mitologias);
Eco (La estructura ausente); Villafane (Introduccion a la teoria de la imagen);
Wiener Fresco (Introduccion a la semiotica).
---
## 13. Entregable
Un solo archivo HTML autocontenido (~120 KB; nombre `index.html` / `index.htm`) con:
`<head>` (charset, `viewport width=device-width, initial-scale=1.0`, theme-color, titulo),
`<style>` con TODO el CSS (paleta indexada, parallax, frames pixel 8-bit, responsive 768/430,
print negro), `<body>` con la portada **dibujada en canvas** (override opcional con `<img>`/
data URI) + todas las pantallas `.screen` + `#printArea` + lightbox, y `<script>` con datos,
estado `S`, audio chiptune, glitch system (desnaturalizar), render de cada pantalla,
laberintos, shooter (Cazador de Estereotipos), exportadores (TXT/JSON/CSV/PDF negro),
service worker e `init()`. La portada y toda la app deben verse y funcionar **abriendo el
archivo directo, sin servidor y sin ningun archivo de imagen externo**. Validar que el JS
no tenga errores de sintaxis.
Comentarios
Publicar un comentario