PROMPT PROFESIONAL: GENERADOR DE PWA GAMIFICADAS EDUCATIVAS

# PROMPT PROFESIONAL: GENERADOR DE PWA GAMIFICADAS EDUCATIVAS

## INSTRUCCIÓN PRINCIPAL

Actúa como un arquitecto de experiencias de aprendizaje interactivo y desarrollador frontend senior. Genera una **Progressive Web App (PWA) autocontenida en un único archivo HTML** para cualquier **actividad pedagógica universitaria**. La aplicación debe ser completamente funcional, visualmente impactante, responsive, y lista para ejecutarse sin dependencias externas críticas (excepto CDN de Bootstrap e íconos).

La PWA debe adaptarse a **CUALQUIER contexto temático** (no solo semiótica): historia del arte, teoría del color, tipografía, diseño editorial, fotografía, branding, comunicación visual, sociología de la imagen, psicología de la percepción, narrativa visual, o cualquier otra unidad de aprendizaje del curso.

---

## CONTEXTO ACADÉMICO CONFIGURABLE

El usuario proporcionará los siguientes datos al inicio de cada solicitud:

| Parámetro | Descripción | Ejemplo |

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

| **INSTITUCIÓN** | Universidad o instituto | Universidad Tecnológica del Perú (UTP) |

| **DOCENTE** | Nombre del docente | Mg. Mario Quiroz Martinez |

| **CURSO** | Nombre del curso | Semiótica de la Imagen |

| **UNIDAD DE APRENDIZAJE** | Tema específico a gamificar | Teoría del Color / Tipografía / Historia del Diseño |

| **AÑO** | Año académico | 2026 |

| **DURACIÓN** | Tiempo de actividad | 90 minutos |

| **MODALIDAD** | Individual o grupal | Trabajo en equipo (2-6 integrantes) |

| **NIVEL** | Carreras objetivo | Diseño Gráfico, Comunicación Audiovisual, Diseño de Interiores |

| **MARCA/MARCO** | Caso de estudio central | Inca Kola / una obra de arte / un movimiento histórico |

| **AUTORES TEÓRICOS** | Referentes académicos | Peirce, Eco, Villafañe / Itten, Albers, Goethe / Müller-Brockmann, Baseline |

| **ESTÉTICA VISUAL** | Estilo de diseño | Art Déco / Bauhaus / Swiss Style / Brutalismo / Minimalismo |

| **PALETA DE COLORES** | Colores corporativos | Dorado-negro / Primarios / Monocromático / Neón |

| **TIPOGRAFÍAS** | Fuentes preferidas | Cinzel+Playfair / Helvetica+Univers / Futura+Akzidenz |

---

## ARQUITECTURA MODULAR DE ESCENAS

La app debe contener **ESCENAS (pantallas) secuenciales** que el usuario navega progresivamente. CADA escena es un módulo independiente que se adapta al tema:

### ESCENA 0: REGISTRO DE EQUIPO (Obligatoria siempre)

- Formulario para 1-6 integrantes: nombre completo, correo institucional, usuario/gamertag, carrera (select), grupo/sección, rol en equipo (select: Líder, Frontend, PWA, UX/UI, Documentación, Tester).

- Validación de campos obligatorios con mensajes en español.

- Tabla dinámica de integrantes con opción de eliminar.

- Botón "Agregar al Equipo" con `addEventListener` en `DOMContentLoaded` (NUNCA usar `onsubmit` inline).

- Botones: "Revisar Equipo" y "Limpiar Todo".

- **Adaptable**: Si la actividad es individual, reducir a 1 integrante y ocultar campo "rol".

### ESCENA 0b: REVISIÓN DEL EQUIPO (Obligatoria siempre)

- Vista de confirmación con tabla resumen.

- Alerta: "Una vez confirmado, el equipo no podrá modificarse".

- Botones: "Retroceder / Editar" y "Confirmar y Comenzar".

### ESCENA 1: ONBOARDING / BRIEFING (Obligatoria siempre)

- Explicación de la misión adaptada al tema.

- Audio explicativo opcional (botones play/pausa con referencia a archivos de audio).

- Anillo de progreso visual (SVG circular) que se completa al avanzar.

- Botones: "Iniciar Operación [Tema]" y "Instalar App" (PWA).

### ESCENA 2: RETO I — CRONOLOGÍA / TIMELINE INTERACTIVO

- **Variante A (Historia/Teoría)**: Timeline con 5-7 imágenes históricas con lupa ampliada y modales contextuales.

- **Variante B (Color/Tipografía)**: Evolución de paletas o estilos tipográficos a través de décadas.

- **Variante C (Análisis)**: Galería de obras/obra con hotspots de información.

- Pregunta cerrada (radio) con retroalimentación inmediata.

- Pregunta abierta (textarea) con guardado automático.

- Timer regresivo configurable (ej: 4 minutos).

### ESCENA 3: RETO II — LABORATORIO / CLASIFICACIÓN INTERACTIVA

- **Variante A (Semiótica)**: Drag & Drop de signos según Peirce (Ícono, Índice, Símbolo).

- **Variante B (Color)**: Clasificación de armonías cromáticas (complementarios, análogos, triádicos).

- **Variante C (Tipografía)**: Clasificación de familias tipográficas (serif, sans, display, monospaced).

- **Variante D (Composición)**: Clasificación de sistemas de retícula (modular, columnar, basada en proporción áurea).

- Mínimo 6 tarjetas arrastrables con soporte táctil y mouse.

- Retroalimentación por acierto/error con animaciones.

- Pregunta abierta con guardado automático.

- Instrucciones detalladas para dispositivo móvil.

### ESCENA 4: RETO III — CALIBRADOR / ESCALADOR INTERACTIVO

- **Variante A (Semiótica)**: Slider de 11 niveles de iconicidad (Villafañe) con imágenes mutantes.

- **Variante B (Color)**: Slider de saturación/temperatura con imágenes que cambian de matiz.

- **Variante C (Tipografía)**: Slider de peso/contraste mostrando la misma frase en diferentes gradaciones.

- **Variante D (Composición)**: Slider de densidad visual / jerarquía tipográfica.

- Briefing del cliente con contexto real del tema.

- Pregunta cerrada sobre concepto teórico.

- Pregunta abierta de defensa proyectual.

- Simulación de modo offline con Service Worker.

### ESCENA 5: RETO IV — GALERÍA DE ANÁLISIS EXTERNO

- 2 zonas de upload de imágenes con compresión automática (máx. 1MB, JPEG calidad 0.2).

- Prompts predefinidos para generación con IA (Midjourney/DALL-E/Leonardo) con botón de copiar al portapapeles.

- 2 preguntas cerradas aplicando teoría del tema.

- Modal de confirmación si se responde sin adjuntar imagen.

### ESCENA 6: RETO V — SÍNTESIS INTEGRADORA

- 2 zonas de upload adicionales.

- 2 preguntas cerradas integradoras.

- 2 reflexiones abiertas de síntesis teórica aplicando los autores del tema.

- Contexto teórico: integración de los autores estudiados en la unidad.

### ESCENA 7: MISIONES — AGENCIA / ESTUDIO / CONSULTORÍA

- 4 misiones gamificadas de auditoría/análisis de un caso real:

- **M1**: Análisis técnico-teórico del caso (100 XP/elemento)

- **M2**: Análisis de forma/estructura/visual (150 XP)

- **M3**: Medición/calibración con herramienta teórica (150 XP)

- **M4**: Veredicto proyectual / propuesta de mejora (200 XP — Boss Battle)

- Sistema XP por misión con insignias desbloqueables.

- Panel de estado de misiones navegable como botones.

### ESCENA 8: CIERRE / ASCENSO

- Pantalla de celebración con confeti, globos y estrellas animadas.

- Resumen de XP total, insignias desbloqueadas (máx. 4) y rango alcanzado.

- Rangos: Junior → Analista → Analista Senior → Consultor Estratégico / Experto / Maestro.

- Botones: "Descargar CSV", "Imprimir/PDF", "Reiniciar".

---

## SISTEMA DE ESTADO Y PERSISTENCIA (Obligatorio siempre)

```javascript

const state = {

currentScene: 'scene-registro',

progress: 0, // 0-100%

team: [], // Array de objetos {nombre, correo, usuario, carrera, grupo, rol}

teamConfirmed: false,

answers: {}, // Respuestas cerradas: {q1: 'correct'/'wrong', q2: ...}

uploads: {}, // Imágenes en base64: {upload1: 'data:image/jpeg;base64,...', ...}

dragCompleted: 0, // Contador de aciertos drag & drop

xp: 0, // Puntos acumulados

badges: [], // Array de strings: ['badge1', 'badge2', ...]

m1Completed: 0, m2Completed: 0, // Scores de misiones

m3Level: undefined, // Valor del slider misión 3

m4Completed: false, // Estado misión 4

offlineMode: false,

timer1: 240, // Segundos del timer (configurable)

// ... otras variables según el tema

};

```

- Persistir automáticamente en `localStorage` bajo clave versionada: `[nombre_proyecto]_v[N]_state`.

- Restaurar estado al recargar: textareas, respuestas seleccionadas, imágenes base64, equipo, progreso del anillo SVG.

- Funciones obligatorias: `saveState()`, `loadState()`, `saveOpenAnswer(key, value)`.

---

## SISTEMA XP E INSIGNIAS (Adaptable)

```

M1 (Análisis Técnico): 100 XP por elemento acertado → Insignia: "[Tema] Maestro"

M2 (Análisis de Forma): 150 XP por score ≥2/3 → Insignia: "Ojo de [Tema]"

M3 (Medición/Calibración): 150 XP por resultado óptimo → Insignia: "[Herramienta] Experto"

M4 (Veredicto/Propuesta): 200 XP por Boss Battle → Insignia: "[Tema] Estratégico"

Rangos (adaptables según tema):

0-199 XP → Aprendiz / Novato / Junior

200-399 XP → Practicante / Analista

400-599 XP → Especialista / Analista Senior

600+ XP → Experto / Consultor Estratégico / Maestro

```

---

## DISEÑO VISUAL — ESTÉTICA CONFIGURABLE

El usuario define la estética al inicio. Opciones predefinidas:

### Opción A: ART DÉCO (dorado-negro)

```css

:root {

--primary: #d4af37; --primary-light: #f0d878; --primary-dark: #aa8c2c;

--bg: #0a0a0a; --card: #141414; --text: #f5f5dc;

--error: #800020; --success: #046307; --warning: #cd7f32;

}

/* Fuentes: Poiret One, Playfair Display, Cinzel */

/* Elementos: sunburst, esquinas ornamentadas, botones rectos con shine */

```

### Opción B: BAUHAUS (primarios)

```css

:root {

--primary: #e74c3c; --secondary: #3498db; --tertiary: #f1c40f;

--bg: #f4f4f4; --card: #ffffff; --text: #2c3e50;

--error: #c0392b; --success: #27ae60; --warning: #e67e22;

}

/* Fuentes: Futura, Bauhaus, Helvetica */

/* Elementos: formas geométricas puras, retículas, asimetría deliberada */

```

### Opción C: SWISS STYLE / INTERNATIONAL

```css

:root {

--primary: #000000; --accent: #ff0000; --bg: #ffffff;

--card: #fafafa; --text: #111111;

--error: #d32f2f; --success: #388e3c; --warning: #f57c00;

}

/* Fuentes: Helvetica Neue, Univers, Akzidenz-Grotesk */

/* Elementos: retícula de 8 columnas, fotografía objetiva, sans-serif universal */

```

### Opción D: BRUTALISMO DIGITAL

```css

:root {

--primary: #00ff00; --bg: #000000; --card: #111111;

--text: #ffffff; --border: #00ff00;

--error: #ff0000; --success: #00ff00; --warning: #ffff00;

}

/* Fuentes: Courier New, VT323, Space Mono */

/* Elementos: bordes gruesos, sombras duras, animaciones glitch, cursor personalizado */

```

### Elementos decorativos obligatorios (adaptar al estilo):

- Patrón de fondo coherente con la estética

- Elemento decorativo superior (sunburst, retícula, forma geométrica)

- Tarjetas `.deco-card` con ornamentación característica del estilo

- Botones con efecto hover distintivo (shine, desplazamiento, inversión de color)

- Separadores decorativos con iconos o símbolos del tema

- Anillo de progreso SVG animado

- Scrollbar personalizada coherente

- Footer institucional fijo con logo SVG inline

---

## FUNCIONALIDADES TÉCNICAS ESPECÍFICAS (Obligatorias siempre)

### A. Service Worker (PWA Offline)

```javascript

// Generar dinámicamente con Blob para evitar archivos externos

const swCode = `

self.addEventListener('install', e => { self.skipWaiting(); });

self.addEventListener('activate', e => self.clients.claim());

self.addEventListener('fetch', e => {

e.respondWith(caches.match(e.request).then(r => r || fetch(e.request).catch(() => new Response('Offline', {status: 503}))));

});

if ('serviceWorker' in navigator) {

const blob = new Blob([swCode], {type: 'application/javascript'});

navigator.serviceWorker.register(URL.createObjectURL(blob));

}

```

- Manifiesto PWA inline como data URI base64.

- Botón de simulación offline con toggle visual.

### B. Compresión de Imágenes Upload

```javascript

// Al subir imagen:

// 1. Leer con FileReader

// 2. Crear Image, cargar en canvas

// 3. Redimensionar a máx 1200px de ancho (mantener aspect ratio)

// 4. Exportar como JPEG calidad 0.2

// 5. Guardar data URL en state.uploads para localStorage

// 6. Mostrar preview en zona de upload

```

### C. Impresión/PDF con Estilo Coherente

```css

@media print {

body { background: var(--bg) !important; color: var(--text) !important; }

/* Forzar colores exactos con -webkit-print-color-adjust: exact */

/* Ocultar: .scene, header, botones, footer, overlays */

/* Mostrar: #printReport con todo el contenido formateado */

}

```

- Sección oculta `#printReport` con: datos del equipo, tabla de puntajes, respuestas cerradas/abiertas, miniaturas de imágenes adjuntas, imágenes de referencia del sistema.

### D. Exportación CSV

- Separador: punto y coma (`;`)

- Codificación: UTF-8 con BOM (``)

- Nombre: `[NombreProyecto]_[UsuarioLider]_[Fecha].csv`

- Incluir: equipo, respuestas, métricas, imágenes, referencias.

### E. Drag & Drop Táctil

- `touchstart`: capturar elemento, calcular offset, fijar `position: fixed`

- `touchmove`: actualizar posición con `moveAt(x, y)`

- `touchend`: usar `document.elementFromPoint()` para detectar zona, validar acierto/error

### F. Retroalimentación Inmediata

- Preguntas cerradas: alerta decorativa (success/danger) con icono y explicación teórica.

- Aciertos: sonido de éxito + celebración visual (confeti + globos + estrellas).

- Errores: animación shake + explicación con referencia al autor teórico del tema.

---

## CONTENIDO TEÓRICO INTEGRADO (Adaptable por tema)

Cada reto DEBE incluir **"Marco Teórico"** en recuadros decorativos con:

### Estructura del Marco Teórico:

```

┌─────────────────────────────────────────┐

│ 📚 MARCO TEÓRICO — [Autor] ([Año]): │

│ │

│ [Explicación del concepto aplicado al │

│ reto actual, con citas textuales │

│ entrecomilladas y referencias │

│ específicas del autor] │

│ │

│ Aplicación al reto: [Cómo este │

│ concepto se manifiesta en el caso │

│ de estudio o ejercicio actual] │

└─────────────────────────────────────────┘

```

### Ejemplos por tema:

**TEMA: Teoría del Color**

- Reto I: Goethe (1810) — carácter simbólico del color

- Reto II: Itten (1961) — contraste simultáneo y armonías de 7 tipos

- Reto III: Albers (1963) — interacción del color, "el color nunca se ve solo"

- Reto IV: Chevreul (1839) — ley del contraste simultáneo en publicidad

- Reto V: Eco (1985) — el color como código cultural

**TEMA: Tipografía**

- Reto I: Gutenberg (1450) — evolución de la letra móvil

- Reto II: Tschichold (1928) — Nueva Tipografía, asimetría y retícula

- Reto III: Müller-Brockmann (1981) — sistema de retículas y jerarquía

- Reto IV: Frutiger (1991) — tipografía como sistema de signos

- Reto V: Bringhurst (1992) — elementos del estilo tipográfico

**TEMA: Historia del Diseño**

- Reto I: Pevsner (1936) — pioneros del diseño moderno

- Reto II: Meggs (1983) — historia del diseño gráfico

- Reto III: Hollis (1994) — diseño gráfico del siglo XX

- Reto IV: Eskilson (2012) — diseño gráfico: una nueva historia

- Reto V: Fiell (2003) — diseño del siglo XX

---

## REGLAS DE IMPLEMENTACIÓN (Inmutables)

1. **UN SOLO ARCHIVO HTML**: Todo CSS en `<style>`, todo JS en `<script>`. Solo CDN externos permitidos: Bootstrap CSS/JS, Bootstrap Icons, Google Fonts.

2. **NO `onsubmit` inline**: Todos los formularios usan `addEventListener('submit', ...)` dentro de `DOMContentLoaded`.

3. **NO `onclick` inline en elementos dinámicos**: Funciones en atributos `onclick` solo en HTML estático inicial.

4. **Validación de campos**: Todos los inputs obligatorios con `required` y mensaje de error personalizado en español.

5. **Imágenes de fallback**: Atributo `data-fallback` con ruta alternativa y manejador `onerror`.

6. **Base target="_blank"**: Enlaces externos en nueva pestaña.

7. **Meta viewport**: `width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no`.

8. **Theme color**: Coherente con la paleta principal del estilo elegido.

9. **Sin frameworks JS**: JavaScript vanilla únicamente. No React, Vue, Angular, jQuery.

10. **Sin servidor backend**: Toda lógica cliente-side. Exportación vía CSV o impresión.

11. **Responsive**: Breakpoint principal 576px. Optimización específica para 569px de ancho.

12. **Accesibilidad**: Labels asociados, roles ARIA implícitos, contraste WCAG AA.

---

## EJEMPLO DE ESTRUCTURA HTML MÍNIMA

```html

<!DOCTYPE html>

<head>

<title>[NOMBRE_PROYECTO] · [SUBTITULO]</title>

<style>

:root { /* variables del estilo seleccionado */ }

/* ... todo el CSS inline coherente con la estética ... */

</style>

</head>

<body>

// Estado global configurable

// Funciones de navegación, validación, persistencia

// Adaptar según el tema y caso de estudio

</script>

</body>

</html>

```

---

## CRITERIOS DE ÉXITO (Checklist verificable)

- [ ] Botón "Agregar al Equipo" funciona con `addEventListener` en `DOMContentLoaded`

- [ ] Registro de 1-6 integrantes y confirmación del equipo

- [ ] Anillo de progreso SVG se actualiza al completar cada reto/misión

- [ ] Preguntas cerradas muestran retroalimentación inmediata con referencia teórica

- [ ] Preguntas abiertas se guardan automáticamente en `localStorage`

- [ ] Drag & Drop funciona en dispositivos táctiles (móvil/tablet)

- [ ] Slider interactivo muestra imágenes/efectos que mutan en tiempo real

- [ ] Imágenes upload se comprimen y persisten (máx. ~1MB cada una)

- [ ] Service Worker permite funcionamiento offline

- [ ] Simulación offline se activa correctamente

- [ ] Sistema XP acumula puntos y desbloquea insignias

- [ ] Misiones tienen retroalimentación detallada por elemento

- [ ] Botón "Imprimir/PDF" genera reporte con estilo coherente y todos los datos

- [ ] Botón "Descargar CSV" exporta archivo separado por punto y coma

- [ ] App es responsive en 320px a 1920px

- [ ] Celebración visual se activa al completar retos

- [ ] Prompts para IA se pueden copiar al portapapeles

- [ ] Footer institucional presente en todas las pantallas

- [ ] Marco teórico presente en cada reto con citas de autores

- [ ] Estética visual coherente en TODOS los elementos (colores, tipografías, decoración)

---

## INSTRUCCIONES DE USO DE ESTE PROMPT

### Para el docente/diseñador pedagógico:

1. **Copiar este prompt completo** y enviarlo al agente de IA.

2. **Proporcionar los parámetros configurables** al inicio de la conversación:

```

INSTITUCION: Universidad Tecnológica del Perú

DOCENTE: Mg. Mario Quiroz Martinez

CURSO: Teoría del Color

UNIDAD: Armonías Cromáticas y Contraste Simultáneo

AÑO: 2026

DURACION: 90 minutos

MODALIDAD: Equipos de 3-4 integrantes

CARRERAS: Diseño Gráfico, Diseño de Interiores

MARCA_CASO: [una paleta cromática famosa o marca peruana con identidad cromática distintiva]

AUTORES: Goethe, Itten, Albers, Chevreul

ESTETICA: Bauhaus

PALETA: Primarios (rojo, azul, amarillo, blanco, negro)

TIPOGRAFIAS: Futura, Helvetica Neue

```

3. **Especificar las variantes** de cada reto según el tema (ver sección "Variantes" en cada escena).

4. **Revisar y ajustar** las retroalimentaciones teóricas para que citen exactamente los autores de la unidad.

5. **Probar la app** en móvil y desktop antes de entregar a estudiantes.

### Para el agente de IA generador:

1. **Leer completamente** todos los parámetros proporcionados por el usuario.

2. **Seleccionar la variante** de cada escena según el tema indicado.

3. **Adaptar la paleta, tipografías y decoración** al estilo visual elegido.

4. **Incluir marco teórico** en CADA reto con citas de los autores especificados.

5. **Generar TODO en un solo archivo HTML** autocontenido.

6. **Verificar** que cumpla todos los criterios de éxito antes de entregar.

---

## EJEMPLOS DE ADAPTACIÓN RÁPIDA

| Tema Original | Nuevo Tema | Cambios necesarios |

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

| Semiótica Visual | Teoría del Color | Reto II: clasificar armonías cromáticas. Reto III: slider de saturación. Autores: Goethe→Itten→Albers. Estética: Art Déco→Bauhaus. |

| Semiótica Visual | Tipografía | Reto II: clasificar familias tipográficas. Reto III: slider de peso tipográfico. Autores: Tschichold→Müller-Brockmann→Frutiger. Estética: Swiss Style. |

| Semiótica Visual | Diseño Editorial | Reto II: clasificar sistemas de retícula. Reto III: slider de densidad tipográfica. Autores: Bringhurst→Hochuli→Tondreau. Estética: Minimalismo. |

| Semiótica Visual | Fotografía | Reto II: clasificar planos fotográficos. Reto III: slider de apertura diafragma. Autores: Berger→Sontag→Barthes. Estética: Brutalismo. |

| Semiótica Visual | Branding | Reto II: clasificar arquetipos de marca. Reto III: slider de consistencia visual. Autores: Kapferer→Aaker→Neumeier. Estética: Art Déco (mantener). |

Buscar este blog

Diseño Gráfico

PROMPT PROFESIONAL: GENERADOR DE PWA GAMIFICADAS EDUCATIVAS

Comentarios

Publicar un comentario

Entradas populares de este blog

Diseños Institucionales con Adobe Illustrator: Uso de Data Merge y Scripts

Gestión Avanzada de Colores en Adobe Illustrator para Impresión de Diseño de Empaques

Creación y Configuración de Áreas de Sangrado en Adobe Illustrator para Diseño de Etiquetas y Packaging