PROMPT MAESTRO — Los Codigos Integrados: Los Cazadores De Códigos
Contexto
Eres un frontend experto en aplicaciones especializadas educativas con estetica gaming/cyberpunk. Debes crea una PWA (Progressive Web App) completa en un solo archivo HTML (monolítico, sin dependencias externas) para un curso universitario de Semiotica de la Imagen.
Metadatos del curso:
- Docente: Mg Mario Quiroz
- Curso: Semiótica de la Imagen
- Ano: 2026, Semana 11
- Institución: UTP (Universidad Tecnológica del Perú)
- Footer fijo: "Docente: Mg Mario Quiroz | Semiotica de la Imagen - 2026 - Semana 11"
1. STACK TECNOLOGICO
- HTML5 semantico en línea
- CSS3 vainilla en línea
<style>(sin marcos) - JavaScript ES6+ vainilla en línea
<script>(sin marcos, sin jQuery, sin React) - Todo el codigo (CSS, JS, datos) de endin de UN SOLO archivo
.html - Sins dependencias de dependencias externas (salvo las imágenes locales listadas abajo)
- localStorage para persistencia de seses entre estado
- Web Audio API para música y efectos de sonido
- Service Worker inline (Blob + URL.createObjectURL) para funcionamiento offline/PWA
- Canvas 2D API para el minijuego Defensor Galáctico
- Diseño responsive (móvil-primero, ancho máximo: 1000px)
2. MARCO DE NARRATIVA: "LOS CAZADORES DE CÓDIGO"
La app se enmarca como una misión narrativa de 90 minutos donde un equipo de "cazadores de codigos" (estudiantes debe) desbloquear "El Codigo de la Hipercodificación Visual" atravesando niveles 4/capitulos.
Cada pantalla es una "pantalla/misión" con su identidad propia visual.
3. FLUJO COMPLETO DE LA APLICACION (12s)
Llamable
1. REGISTER (registro de equipo)
v (minimo 2 estudiantes)
2. SPEED READING CHALLENGE (4 fases de 3 segundos)
v
3. QUIZ — 4 Capitulos x 3-4 preguntas cerradas cada uno
v (por cada capitulo)
4. OPEN QUESTIONS (reflexion por capitulo)
v (repite 3-4 hasta completar 4 capitulos)
5. PvP SEMIOTICO (duelo de equipos)
v
6. HYPERCODIFICATION MATRIX (6 estratos)
v
7. METACOGNITIVE PORTFOLIO (5 preguntas)
v
8. SCOREBOARD (resultados finales)Pantallas de desafio intercaladas (comiÚ HP baja):
Llamable
9. CHALLENGE MENU (3 opciones)
|-- 10. MAZE (laberinto individual 11x11)
|-- 11. GALACTIC DEFENDER (canvas space shooter)
'-- 12. TEAM MAZE "Los Codigos Integrados" (laberinto cooperativo 13x13)4. ESTETICA VISUAL: NEON CYBERPUNK JUEGOS
Paleta de colores CSS (variables):
Css
:root {
--neon-cyan: #00f0ff;
--neon-pink: #ff00a0;
--neon-green: #00ff88;
--neon-yellow: #ffe600;
--neon-red: #ff3333;
--neon-purple: #b829dd;
--dark: #0a0a0a;
--darker: #050505;
--card-bg: #111;
--card-border: #222;
--text: #e0e0e0;
--text-dim: #888;
}Efectos visuales-griba:
- Escanelas superpuestas : gradiente horizontal horizontal semi-transparente sobre toda la pantalla (punto-eventos: ninguno, índice z: 9999)
- Texto brillante : text-shadow multi-capa en titulos (ej: 0 0 10px, 0 0 20px, 0 0 40px cian)
- Tarjetas de neón : bordes con colores neón, caja-sopa difuso, efectos de flotador
- Gradiente animado en barra de progreso: cian → rosa → púrpura
- Animaciones : fadeIn, pulse, shake (al errar), slideDown (feedback), confeti (victoria)
- Maze glow: borde cyan con box-shadow pulsante
- Tipografia: 'Segoe UI', system-ui
Clases CSS clave a implement:
.screen { display: none; animation: fadeIn .5s }/.screen.active { display: block }.card,.card-neon(borde cian + brillo pulsante),.card-pink,.card-green,.card-red,.card-yellow.btnCon hover que invierte colores y agrega glow.btn-green,.btn-pink,.btn-red,.btn-yellow(variantes).option-cardpara opciones de respuesta (hover translateX, estados correctos/incorrectos).hp-barcon fill dinamico (verde >60%, amarillo >30%, rojo <30%).score-ringcircular para puntuacion final.maze-grid,.maze-cell,.maze-wall,.maze-path.lightboxpara ampliacion de imagenes con caption.badgeLas variantes y por color.hint-boxMiralo para pistas.confettiY.confetti-piecePara celebraciones.music-toggleBoton flotante circular
5. ESTRUCTURA DE DATOS
5.1 Capitulos y Preguntas
Crear un array
CHAPTERS con 4 objetos capitulo. Cada capitulo tiene:id(1-4),title,subtitle,descimgs: array de imagenes locales{l: label, f: filename, d: descripcion detallada}closed: array de preguntas cerradas{q, opts: [A, B, C, D], ok: indice_correcto, fb: retroalimentacion_detallada}open: array de preguntas abiertas{q, h: hint/pista}
Asignación de imágenes por capitulo:
Mesa
| Categoría: Capitulo | Imagen | Descripción visual |
|---|---|---|
| Cap 1: El Encuentro | Portada_God_of War.jpg | Primer plano rostros Kratos, barba, trazo rojo |
| Cap 1 | Pantalla God.jpg | Kratos con Atreus en el bote |
| Cap 1 | Publicidad_Crossut.png | Comparativo cromatico rojo destruction |
| Cap 2: La Senda | Portada_Sea_of_Thieves.jpg | Comparativa estilistica caricatura vs seriedad |
| Cap 2 | Portada_Knights.png | Signos visuales fantasticos, colores vibrantes |
| Cap 3: El Laberinto | Publicidad_ Symmtry.png | Paleta fria, simetria, division com sci-fi |
| Cap 3 | Publicidad OUT_NOW.png | Destruccion como tropo visual vehicular |
| Cap 4: El Codigo Final | Portada_God_of War.jpg | Sintesis comparativa seriedad epica Kratos |
| Cap 4 | Portada_Sea_of_Thieves.jpg | Cierre: humor pirata vs epica sangrienta |
Contenido semiotico de las preguntas (todo referido al rostro de Kratos con trazo rojo, NO al hacha):
- Preguntas sobre: rostro de Kratos, barba, trazo rojo, mirada confrontativa, encuadre cerrado, 6 estratos
- Autores referenciados: Barthes, Greimas, Peirce, Saussure, Groupe μ
- Conceptos: hipercodificacion, 6 estratos, icono/indice/simbolo, metonimia, actancia, Gestalt
5.2 Estratos de Hipercodificacion
Array
STRATA con 6 objetos:- Cromático — colores como generadores de sentido
- Gestual — cuerpos, poses, expresiones
- Objeto-Simbolico — con con significado cultural
- Fotogenico — encuadre, angulo, iluminación
- Retorico — tropos: metaforas, metonimias
- Ideológico — creencias, valores,, modelo de mundo
6. REQUISITOS FUNCIONALES DETALLADOS
6.1 Registros (registro de pantalla)
- Formulario: Nombre completo, Email institucional, Grupo, Sección
- Minimo 2 estudiantes, máximo 4
- Lista de diseños con opcion de eliminación de diseños
- Boton "INICIAR MISION" aparece solo con 2+ estudiantes
- Imagen motivo generada mostrada arriba del formulario:
motivo_laberinto.png(equipo de 4 estudiantes en laberinto neon, vista cenital) - Persistencia en localStorage
6.2 Speed Reading Challenge (speedReadingScreen)
- 4 fases consecutivas de 3 segundos cada una
- Cada fase muestra una imagen diferente con timer animado
- Imágenes: God of War PORTURA → Pantalla God → Crossout → Sea of Thieves
- Al, 4 preguntas de memoria visual (4 opciones cada una)
- Cada respuesta correcta: +5 puntos
- Imágenes clickeables para lightbox
6.3 Quiz / Preguntas Cerradas (quizScreen)
- 4 capitulos, 3-4 preguntas cerradas por capitulo (total 14 preguntas)
- 4 opciones tipo A/B/C/D por
- Indicadores de progresos variables:
- Barra global arriba (gradiente animado)
- Insignias de capitulos (completado ✅ verde / activo 🔵 cian / pendente ⚪ gris)
- Dots de endaguera del capitulo (verde = respondedia, amarillo = real, gris = pendiente)
- Imágenes del capitulos les-semana de las opciones (receptiva a la cuadrícula, clickeables para lightbox)
- Retroalimentación inmediata y todas las particularidades:
- Correcto: borde verde, sonido acierto, pop-up "+10", explicación semiótica extensa
- Incorrecto: borde rojo, animación shake, sonido error, pop-up "-25 HP", explicación correcta
- Opciones deshabilitadas selectaduras tras
- Boton "Continuar" SOLO despues de ver el feedback
- Si HP <= 25%: cambio de "⚠ HP Critico — Aceptar Desafio"
6.4 Sistema de HP
- HP inicial: 100%
- Por cada respuesta incorrecta: -25 HP
- Si llegados a 0 o menos: se fuerza la pantalla de CHALLENGE
- Recuperación vía minijuegos: +20 a +50 CV
- Barra de HP visual con colores dinamicos (verde/amarillo/rojo)
- Texto sobre la barra: "HP OK" / "CUIDADO" / "CRITICO"
6.5 Preguntas Abiertas (openQuestionsScreen)
- 1-2 preguntas abiertas de reflexion por capitulo
- Textarea con hint/pista semiotica
- Se guardan en estado para la exportación final
- Boton "Siguiente Capitulo" o "Ir a PvP"
6.6 Pantalla de Desafio (challengeScreen)
- Alerta roja pulsante con HP actual
- TRES opciones visuales:
Opcion A: Laberinto de Signos (Individual)
- Laberinto 11x11 generado proceduralmente (recursive backtracker)
- Jugador como 🧙 (mago cyan), meta como 🏆 (trofeo verde)
- 25% de probabilidad de "puerta semiotica" al moverse
- Puertas: 8 preguntas semioticas aleatorias (4 opciones)
- Correcto en puerta: +15 HP de recuperación
- Incorrecto: -10 HP
- Controles: flechas del teclado + en pantalla
- Meta-relanda a (9,9) → recuperar el HP acumulados
- Opcion "Rendirse" → +20 HP minimo
Opción B: Defensor Galáctico (Lienzo)
- Canvas 600x500 con fondo de estrellas
- Nave del jugador (triangulo cian) con control ← →
- Espacio para disporlar amarillos)
- 3 tipos de enemigos: Rojo (2 golpes), Rosa (3), Purpura (rapido)
- Enemigos desmontado cada 1.2 segundos, max 8 simultaneos
- Meta: destruir 15 naves → +50 HP
- P para pausar
- Panel de instrucciones visuales con teclas <kbd>
- Game over y victory screens con animaciones
Opcion C: Los Codigos Integrados (Cooperativo) — EL DIFERENCIAL
- Laberinto 13x13 cooperativo para TODO el equipo
- Cada estudiante tiene: color unico, icono unico (🧙⚔️🔮🛡️), posicion propia
- Turn-based: solo el jugador del turno actual puede moverse
- Indicador de turno con nombre y color del jugador actual
- Todos los jugadores deben llegar a la meta 🏆 individualmente
- Puertas semióticas con 5 ventajas cooperativas
- Correcto: +10 HP extra, Incorrecto: -5 HP
- Preguntas referen a: Groupe μ (6os), tratzo rojo (cromatico), encuadre (fotogénico), metonimia (retorico), Barthes
- Skip turno disponible
- Rendirse: +20 HP
- Completar: +HP recuperado + 30 puntos extras
6.7 PvP Semiotico (pvpScreen)
- Equipo dividido en dos bandos automáticamente:
- Equipo A (Decodificadores): Anenan QUE significa → denotación, connotación, mitos
- Equipo B (Sintetizadores): Anienal COMO produce significado → sit 6os
- Tarjetas laterales (cian vs rosa)
- Textareas para argumentos de cada equipo
- Inputs numericos para evaluacion del docente (0-20 pts por equipo)
- Puntuacion sumada al score global
6.8 Matriz de Hipercodificacion (matrixScreen)
- Grid de 6 celdas (2 columnas en desktop, 1 en mobile)
- Cada estrato con: nombre, descripcion, input "Elemento visual", textarea "Significado"
- Validacion: minimo 3 estratos completos
- Puntuacion: +5 pts por estrato completado
6.9 Portafolio Metacognitivo (metacognitiveScreen)
- 5 preguntas de reflexion sobre el proceso de aprendizaje
- Textareas para respuestas libres
- +2 pts por cada respuesta no vacia
6.10 Marcador Final (scoreboardScreen)
- Clasificación : S (120+), A (90+), B (60+), C (40+), D (<40)
- Anillo de puntuación con color dinamico
- 6 insignias posibles:
- 🎓 Maestro Semiótico (80%+ precisión)
- 🔍 Analista Visual (60%+ precisión)
- ❤️ Sobreviviente (HP > 0)
- 🌀 Explorador (completo laberinto individual)
- 🚀 Piloto Estelar (juego Galactic Defender)
- 🧠 Pensador Critico (4+ reflexiones escritas)
- ⚡ Velocista (<60 minutos)
- 🧬 Estratificador (matriz completa)
- Estadisticas por capitulo
- Lista del equipo
- Exportacion a TXT (reporte completo formateado)
- Exportacion a JSON (datos crudos)
- Confetti
7. REQUISITOS TECNICOS ESPECIFICOS
7.1 Estado Global
Variable
SCon propiedades:JavaScript
S = {
sc: "register", // screen actual
st: [], // students [{name, email}]
gr: "", se: "", // grupo, seccion
cc: 0, cq: 0, // current chapter, current question
scor: 0, // score total
tq: 0, // total questions (calculado)
cs: [0,0,0,0], // chapter scores
ans: [], // historial de respuestas
hp: 100, // HP del equipo
mO: false, // music on
oA: [], // open answers
mD: {}, // matrix data
mc: [], // metacognitive answers
pv: {tA:0,tB:0,tAT:"",tBT:""}, // pvp scores
srD: false, // speed reading done
sT: null, // start time
mr: 0, dr: 0 // maze/defender retries
}7.2 Audio (API de audio web)
- Música de fondo: arpegio con oscilador square notas, [220,261.63,329.63,392,523,25,392,329.63,261,63], loop cadams, ganancia 0.04
- Efectos: correcto (dos tonos sine 523→659), erróneo (sawtooth descendente 150→80), ganar (melodia ascendente), hacer clic (triángulo 800)
- Alternar la 🔊/🔇 flotante en la parte inferior derecha
7.3 Persistencia
- Guardar:
localStorage.setItem("ch_state", JSON.stringify(S)) - Cargar: parsear, resetear audioCtx y músicaEn
7.4 Trabajador de servicio (PWA)
JavaScript
if("serviceWorker" in navigator){
var swCode = "self.addEventListener('install',function(e){...});self.addEventListener('fetch',function(e){...});";
var swBlob = new Blob([swCode], {type:"application/javascript"});
navigator.serviceWorker.register(URL.createObjectURL(swBlob));
}7.5 Imágenes
Todas las imágenes se referencian por nombre de archivo local (mismo directorio que el HTML):
motivo_laberinto.png— imagen motivo genera (equipo en laberinto neon cenital)Portada_God_of War.jpg— el principal Dios de la GuerraPantalla God.jpg— Kratos y Atreus en botePublicidad_Crossut.png— publicidad CrossoutPortada_Sea_of_Thieves.jpg— El Mar de los LadronesPortada_Knights.png— portada Portal KnightsPublicidad_ Symmtry.png— publicidad SymmetryPublicidad OUT_NOW.png— publicidad FlatOut 4
Lightbox: click en imagen → overlay oscuro con imagen ampliada + caption descriptivo
8. CONTENIDO SEMIOTICO DE REFERENCIA
Preguntas cerradas (ejemplos por capitulo):
Cap 1 — El Encuentro con el Guerrero:
- ¿Que elemento cromatico DOMINA la portada? → ROJO intenso (Barthes, Greimas)
- Que representar el TRAZO ROJO? → Rastro de sangre del violento pasado (índice)
- La mirada de Kratos esta esta... → Al, frente frente directo (Gestalt)
- Que estrato NO esta presente? → Estrato publicitario
Cap 2 — La Senda del Guerrero:
- El rostro de Kratos funciona como... → Icono por semejanza e indice (Peirce)
- La barba más mala vida significa... → Evolución a padre/maduro
- En Greimas, Kratos es... → Sujeto del deseo
Cap 3 — El Laberinto de los Estratos:
- Estrato FOTOGENICO se en... → Encuadre cerrado
- Ejemplo de estrato RETORICO → Metonimia sangre por culpa
- Estrato IDEOLOGICO propone... → Masculinidad regenerativa
Cap 4 — Final de El Codigo:
- Barthes: La imagen es mensaje sin... → CODIGO
- Relacion trazo rojo → culpa es... → Metonimia (contigüidad)
- Por que es hipercodificacion? → Superposicion de multiples estratos
Preguntas abiertas (ejemplos):
- ¿Que estrato fue el PRIMERO en tu atención?
- ¿Que modelo de masculinidad propone Kratos?
- ¿Crees que REFUERZA o SUBVIERTE de otherstersources?
- ¿Cómo cambiar tu percepcion de imágenes de videojuegos?
9. RESPUESTA ESPERADA
Entregar un solo archivo
index.html que incluya:<!DOCTYPE html>Con<html lang="es"><head>conchaset UTF-8, viewport, tema-color, título<style>Con TODAS las clases descretas CSS<body>Con estructura de 12+ pantalla de divs<script>Con:- Datos CAPÍTULOS Y ESTRATAS
- Estado global S
- Funciones de audio (initAudio, playMúsica, stopMúsica, toggleMusic, playSound)
- Funciones utilitarias (showScreen, openLightbox, closeLightbox, showScorePopup, launchConfetti, updateProgress, save/load, chapterIndicator, stepIndicator, renderImages)
- Funciones render de cada pantalla (renderRegister, renderSpeedReading, renderQuiz, renderOpenQuestions, renderChallenge, renderMaze, renderGalacticDefender, renderTeamMaze, renderPvP, renderMatrix, renderMetacognitive, renderScoreboard)
- Handlers de evento (seleccionaRespuesta, continueQuiz, addStudent, startMission, etc.)
- Trabajo de servicio en línea
- Inicializacion (función init)
10. NOTAS FINALES
- Todo el el visible texto al user ser en espanol neutro (sin tildes en la la lo lo posible para, o con entidades HTML:
á,é,í,ó,ú,ñ,¿,¡) - El codigo JavaScript interno (nombres de variables, funciones) puede ser en inglés
- Usar comillas simples para strings HTML internos y dobles para atributos HTML
- Evitar templates literals (backticks) anidados; usar concatenacion de strings o internHTML con HTML directo
- El archivo final debe poderse directamente en Chrome/Firefox sin servidor
- Total: 80-100KB de estimación de HTML completo
Comentarios
Publicar un comentario