PROMPT MAESTRO Actividades gamificadas de análisis semiótico
# PROMPT MAESTRO
## Actividades gamificadas de análisis semiótico
### Plataforma single-file HTML · Trabajo grupal en aula · v1.0
---
## CÓMO USAR ESTE PROMPT
Este documento es un **prompt maestro reutilizable** para generar actividades gamificadas de análisis semiótico aplicado, entregables como un único archivo HTML autocontenido.
**Tres audiencias lo usan en paralelo:**
| Audiencia | Qué hace con el prompt |
|---|---|
| **Docente que diseña la actividad** | Edita los bloques marcados con `{{...}}` para definir el marco teórico, los casos a analizar y las consignas. No toca las secciones técnicas. |
| **IA generadora (Claude / GPT / etc.)** | Recibe el prompt completo + los inputs del docente. Produce un archivo `.html` siguiendo todas las restricciones técnicas y pedagógicas. |
| **Revisor/a técnico/a** | Usa el checklist final como criterio de aceptación. Si algún ítem falla, devuelve a la IA con la observación específica. |
**Flujo recomendado:** docente completa los placeholders → entrega el documento a la IA → IA produce el HTML → revisor valida con el checklist → iteración hasta que todos los ítems estén ✓.
---
## SECCIÓN 1 · CONTEXTO Y ROL DE LA IA
Vas a actuar como un **diseñador instruccional senior con dominio en semiótica visual y desarrollo frontend**. Tu tarea es producir una actividad gamificada en formato single-file HTML para un curso universitario de diseño/comunicación. La actividad será usada por **grupos de 3 a 5 estudiantes** en una sesión presencial de 90 minutos.
No eres un programador genérico ni un copywriter. Eres alguien que entiende:
- Que el aprendizaje significativo requiere **estructura pedagógica explícita**, no solo contenido bonito.
- Que los estudiantes universitarios usan mayoritariamente el **celular** durante la clase, por lo tanto el diseño es mobile-first sin excepciones.
- Que un solo archivo HTML que funciona offline supera siempre a una plataforma compleja que requiere instalación, login o conexión.
- Que **cada decisión técnica corresponde a una decisión pedagógica**: la persistencia en `localStorage` evita perder trabajo entre fases, el embebido base64 evita errores de carga, el mailto evita configurar un backend.
**Salida esperada:** un único archivo `.html` listo para abrir desde cualquier navegador moderno, sin dependencias locales, con todo el contenido educativo, los casos de estudio, las imágenes y la lógica embebidos.
---
## SECCIÓN 2 · DEFINICIÓN DEL EJERCICIO (variables del docente)
> El docente edita estos bloques. La IA los lee y los respeta literalmente.
### 2.1 · Identidad de la actividad
```
Nombre de la actividad: {{NOMBRE_ACTIVIDAD}}
Curso: {{NOMBRE_CURSO}}
Sesión / Bloque: {{NUMERO_SESION_O_BLOQUE}}
Duración total: {{DURACION_MINUTOS}} minutos
Modalidad: Grupal · 3 a 5 integrantes
Competencia objetivo: {{COMPETENCIA_DUA_ESPECIFICA}}
```
### 2.2 · Marco teórico aplicable
Selecciona **uno o dos frameworks** que estructuran el análisis. La actividad debe operacionalizarlos en interacciones, no solo describirlos:
```
Framework principal: {{FRAMEWORK_PRINCIPAL}}
Ej: Esquema Tensivo de Zilberberg
Modelo Actancial de Greimas
Cuadrado Semiótico
Funciones de Jakobson
Connotación / Denotación de Barthes
Iconicidad de Peirce
Diferencial Semántico de Osgood
Constelación de Atributos de Moles
Framework secundario: {{FRAMEWORK_SECUNDARIO}} (opcional)
Variables operativas: {{LISTA_DE_EJES_O_DIMENSIONES}}
Para Zilberberg: Intensidad ↑↓ · Extensión ←→
Para Greimas: 6 actantes en 3 ejes
Para Peirce: ícono / índice / símbolo
Para Jakobson: 6 funciones del mensaje
```
### 2.3 · Casos de análisis
Cuatro casos reales — **NO genéricos**, **NO stock photography**. Anuncios, packagings o piezas comunicacionales auténticas que el estudiante reconozca en su entorno cultural inmediato:
```
Caso 1: {{NOMBRE_MARCA_1}} · {{SECTOR_1}}
Imagen: {{ARCHIVO_O_DESCRIPCION_IMAGEN_1}}
Cuadrante / categorización esperada: {{POSICION_CORRECTA_1}}
Por qué este caso: {{JUSTIFICACION_PEDAGOGICA_1}}
Caso 2: {{NOMBRE_MARCA_2}} · {{SECTOR_2}}
...
Caso 3: {{NOMBRE_MARCA_3}} · {{SECTOR_3}}
...
Caso 4: {{NOMBRE_MARCA_4}} · {{SECTOR_4}}
...
```
Los cuatro casos deben **cubrir las cuatro categorías** del framework principal (si tiene cuadrantes) o cuatro variantes contrastantes. Esto permite que cada grupo audite uno y luego se comparen en plenario.
### 2.4 · Caso modelo
Uno de los cuatro se designa como **caso ejemplo** — el primero que el grupo audita. La actividad explica las mecánicas con este caso, y los otros tres se resuelven aplicando lo aprendido:
```
Caso modelo (actividad guiada): {{CASO_MODELO_ID}}
```
### 2.5 · Roles del grupo
El docente puede ajustar los nombres de roles según su tradición pedagógica, pero la lógica de **un líder rotativo por fase** es obligatoria:
```
Rol 1 · Coordinador/a: modera tiempo y participación · lidera Fase 0
Rol 2 · {{ROL_FASE_2}}: lidera Fase 2 (categorización)
Rol 3 · {{ROL_FASE_3}}: lidera Fase 3 (relaciones / actantes)
Rol 4 · Auditor/a: desafía decisiones · registra disensos
Rol 5 · Redactor/a: lidera informe y plenario (opcional, solo grupos de 5)
```
---
## SECCIÓN 3 · ARQUITECTURA PEDAGÓGICA OBLIGATORIA
Esta arquitectura es **fija**. La IA no puede simplificarla ni saltarse fases — son las que hacen que la actividad funcione como aprendizaje grupal y no como ejercicio individual disfrazado.
### 3.1 · Fundamento marco DUA
La actividad debe ofrecer **múltiples medios de representación, expresión y compromiso** (DUA, principios 1-2-3). Esto se traduce operativamente en:
- **Representación múltiple:** texto + imagen + diagrama interactivo + audio (mailto/tts opcional). Nunca solo texto.
- **Expresión múltiple:** drag & drop (motor) + escritura (deliberación) + voz (presentación en plenario).
- **Compromiso múltiple:** caso modelo guiado para baja autoeficacia + casos abiertos para alta autoeficacia + cierre comparativo en plenario.
### 3.2 · Ciclo Kolb (4 momentos)
Cada caso analizado debe pasar por los cuatro momentos del ciclo experiencial:
| Momento Kolb | En la actividad |
|---|---|
| Experiencia concreta | Ver el anuncio "descalibrado" / con estado alterado |
| Observación reflexiva | Discutir en grupo qué elementos visuales sostienen una hipótesis |
| Conceptualización abstracta | Aplicar el framework teórico (Zilberberg / Greimas / etc.) |
| Experimentación activa | Calibrar / clasificar / ubicar en el sistema y ver el feedback |
### 3.3 · Las 6 fases obligatorias
```
FASE 0 · BRIEFING (10 min)
- Identificación del grupo (nombre, número, integrantes con roles)
- Marco teórico explicado en bloque "Cómo opera el sistema"
- Resumen de roles
- Botón "Iniciar auditoría" (validación: mínimo 3 integrantes con nombre)
FASE 1 · SELECCIÓN DE CASO (5 min)
- 4 tarjetas con QR decorativo (visual, no escaneable)
- Cada tarjeta: número, nombre, marca, banda cromática
- Marca visual de "completado" para los que ya analizó el grupo
- Indicador X/4 sectores completados
FASE 2 · CATEGORIZACIÓN PRIMARIA ({{T2}} min)
- Pantalla con caso visual a la izquierda, panel de control a la derecha
- Imagen ampliable (lightbox a pantalla completa)
- Diagrama interactivo del framework con punto/posición ajustable
- Botón de ayuda "?" que abre modal explicativo del framework
- Coachmark dismissible: "Esta es la actividad modelo"
- Helper visual con pistas concretas para identificar la categoría
- Caja de DELIBERACIÓN GRUPAL obligatoria:
· Justificación textual (mínimo 10 caracteres)
· Pills de consenso: Unánime / Mayoría / Dividido
· Campo de disenso (visible solo si no hay unanimidad)
- Botón "Continuar" deshabilitado hasta validar todos los campos
FASE 3 · RELACIONES / SISTEMA ({{T3}} min)
- Diagrama del segundo framework (si aplica)
- Pool de fichas con TRAMPAS (incluye fichas de otros casos)
- Drag & drop (desktop) + tap-to-place (mobile)
- Feedback inmediato por ficha: ✓ correcta · ✗ rol equivocado · ⚠ otro caso
- Coachmark de instrucciones de uso
- Modal explicativo "?" con definición de cada categoría + demo visual animada
- Pausa de meta-cognición: al 50% de progreso, modal con pregunta-hipótesis
- Caja de DELIBERACIÓN GRUPAL: voz mayoritaria + disensos
- Botón "Generar informe" deshabilitado hasta completar todo
FASE 4 · INFORME DE AUDITORÍA (10 min)
- Generación automática a partir de los datos capturados
- Secciones obligatorias:
1. Datos del grupo (nombre, número, sección)
2. Integrantes con roles
3. Datos del análisis (caso, marca, posición, categoría)
4. Modelo / clasificación registrada (6 cells)
5. DELIBERACIÓN DEL GRUPO (justificación + consenso + disenso visible)
6. Diagnóstico estratégico (texto generado según combinación)
7. Recomendación de mejora
8. Meta-cognición (hipótesis previa + reflexión final editable)
- BANNER DESTACADO "Siguiente paso · auditar otro sector":
· Cambia de naranja → verde cuando completan los 4
· Click abre diálogo con grilla visual de progreso (4 cuadros)
· Recomienda cuál sector seguir
- Acciones primarias (botones grandes):
· Descargar diploma · PDF
· Descargar CSV completo
- Acciones secundarias (botones ghost):
· Tarjeta de plenario (con botón "?" que abre explicación)
· Imprimir informe
· Enviar por correo
· Auditar otro sector
· Reiniciar todo
FASE 5 · PLENARIO COMPARATIVO (10 min)
- Bloque "plenary-purpose" explicando POR QUÉ existe esta tarjeta
- Formulario con 4 campos (todos con contadores de caracteres):
1. Hallazgo clave (máx 120) — frase potente
2. Contraste con otro sector (máx 180)
3. Propuesta de mejora destacada (máx 180)
4. Pregunta para el aula (máx 140)
- Tarjeta visual sticky a la derecha que se actualiza en tiempo real
- Botón "Imprimir tarjeta" en formato póster (oculta el resto vía @media print)
- Botón "Volver al informe"
- Botón "Enviar tarjeta por correo"
```
### 3.4 · Tres mecánicas pedagógicas innegociables
**a) Productive failure (Kapur, 2016).** El sistema **nunca da la respuesta**. Solo valida o rechaza. Si el grupo se equivoca, recibe una pista contextual ("Han ubicado el caso en X cuadrante, revisen si el anuncio prioriza Y o Z"). La respuesta correcta solo aparece cuando ellos la encuentran.
**b) Deliberación visible.** Cada decisión grupal queda registrada por escrito con su nivel de consenso. El informe muestra los disensos como contenido de primera clase, no como nota al pie. Esto entrena pensamiento crítico colectivo, no solo respuesta correcta.
**c) Caso modelo + transferencia.** El primer caso es guiado con coachmarks, helpers y modales explicativos visibles. Los siguientes tres usan la misma interfaz pero los coachmarks pueden estar dismissed en localStorage. La transferencia se evalúa en plenario, donde se contrastan los cuatro hallazgos.
---
## SECCIÓN 4 · STACK TÉCNICO NO-NEGOCIABLE
Cada decisión aquí corresponde a un **error real** en versiones previas. La IA no debe "mejorar" estas reglas — están así porque la alternativa rompió en producción.
### 4.1 · Restricciones de arquitectura
| Decisión | Razón |
|---|---|
| **Single-file HTML** | El docente lo distribuye por WhatsApp, drive, USB, mail. Cualquier dependencia externa rompe esto. |
| **Imágenes en base64** | URLs externas fallan offline o cuando Cloudflare/CDN está caído. |
| **CSS inline en `<style>`** | Sin archivos auxiliares. Sin build step. |
| **JS inline en `<script>`** | Sin módulos. Sin imports. Todo el código en un solo bloque. |
| **localStorage versionado** | Clave con sufijo `_v1`, `_v2`. Permite migración sin romper sesiones previas. |
| **Sin librerías externas (default)** | Si se necesita PDF: cargar `html2pdf.js` desde CDN como única excepción. |
| **Mailto con backticks** | `\`mailto:?body=${encodeURIComponent(...)}\`` — los strings con `\n` rompen como comillas simples. |
### 4.2 · Mobile-first obligatorio
```css
@media (max-width: 768px) {
/* Toda interfaz debe colapsar a una columna */
/* Botones full-width con min-height de 44px (touch target Apple) */
/* Tipografía base 14px, nunca menor a 11px en metadatos */
/* Header con phase-tracker en scroll horizontal */
/* Diagramas complejos (Greimas) en columna única apilada */
}
```
Meta tags obligatorios en `<head>`:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
<meta name="theme-color" content="{{COLOR_PRIMARIO}}" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
```
`maximum-scale=5.0` y `user-scalable=yes` son obligatorios — bloquear el zoom es **violación de accesibilidad** (DUA principio 1).
### 4.3 · Sistema de diseño base
```css
:root {
/* Paleta sugerida — el docente puede ajustar */
--navy: #1B2A4A; /* primario · UI estructural */
--orange: #E8621A; /* acento · CTAs y feedback */
--cream: #F5F0E8; /* fondo principal · papel */
--paper: #FAF6EE; /* fondo cards · papel claro */
--green-ok: #2D9A57; /* éxito · validación correcta */
--red-bad: #C73E1D; /* error · validación incorrecta */
--amber: #E8A21A; /* advertencia · disensos */
/* Tipografía recomendada (Google Fonts CDN) */
--f-display: 'Syne', sans-serif; /* títulos */
--f-body: 'DM Sans', sans-serif; /* cuerpo */
--f-mono: 'DM Mono', monospace; /* metadatos, datos técnicos */
}
```
**Tipografía mínima:** 13px para cuerpo legible. Nunca usar fuentes cursivas/decorativas en texto instructivo. Nunca distorsionar el ancho de fuente (`font-stretch` u oblique simulado).
### 4.4 · Errores conocidos a evitar (lecciones aprendidas)
```javascript
// ❌ Service Worker se registra en cualquier protocolo → falla en blob:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(...) // CRASH en sandboxes
}
// ✅ Solo http/https
if ('serviceWorker' in navigator
&& (location.protocol === 'https:' || location.protocol === 'http:')) {
navigator.serviceWorker.register(...).catch(()=>{ /* silent skip */ });
}
```
```javascript
// ❌ Acceso a propiedad sin guard → crash al cargar la app sin sector activo
function initPlenary() {
const sec = SECTORES.find(s => s.id === appState.sector);
$('#pcSector').textContent = sec.name; // TypeError si sec=undefined
}
// ✅ Guard al inicio + separación de lógica
function initPlenary() {
// Listeners siempre se registran (no dependen del sector)
$('#btnPrint').addEventListener('click', ...);
// Render del sector solo si existe — y se vuelve a llamar al entrar a la fase
renderPlenaryHeader();
}
function renderPlenaryHeader() {
const sec = SECTORES.find(s => s.id === appState.sector);
$('#pcSector').textContent = sec ? sec.name : '—';
}
```
```javascript
// ❌ Hotspots dentro de overflow:hidden → tooltips clipados
<div class="container" style="overflow:hidden">
<div class="hotspot" data-tip="...">·</div>
<div class="tooltip">...</div> <!-- desaparece al posicionar fuera -->
</div>
// ✅ Hotspots como SIBLINGS, tooltip global con position:fixed
<div class="container" style="overflow:hidden">
<img src="...">
</div>
<div class="hotspots-layer">
<button class="hotspot" data-x="30%" data-y="40%">·</button>
</div>
<div id="g-tip" style="position:fixed">...</div>
// Posicionar con getBoundingClientRect() + viewport clamping
```
```javascript
// ❌ Asteriscos markdown en strings JS → no se renderizan
const msg = "El **eje del poder** se manifiesta..."; // BAD
// ✅ Comillas tipográficas o etiquetas reales
const msg = 'El "eje del poder" se manifiesta...'; // OK
// o usar template literal con HTML si se inyecta como innerHTML
```
```javascript
// ❌ Mailto con comillas simples y \n
const url = 'mailto:?body=Hola\nLínea 2'; // \n se rompe en algunas apps
// ✅ Backticks + encodeURIComponent + %0D%0A
const url = `mailto:?body=${encodeURIComponent('Hola\r\nLínea 2')}`;
```
### 4.5 · Persistencia y estado
```javascript
const STORAGE_KEY = '{{NOMBRE_ACTIVIDAD_SLUG}}_v1';
// Estado mínimo persistido
const initialState = () => ({
fase: 0,
caso: null,
grupo: { nombre:'', numero:'', integrantes:[/*3-5*/] },
hipotesis: '',
metaFinal: '',
casos: {
/* por cada id de caso */
{{caso_id}}: {
categorizacion: { /* dimensiones del framework */ },
relaciones: { /* roles del segundo framework */ },
deliberacion: {
justificacion1:'', consenso1:'', disenso1:'',
justificacion2:'', disenso2:''
},
plenario: { claim:'', contrast:'', proposal:'', question:'' },
completado: false,
folio: null
}
}
});
// Guardar en CADA mutación (no esperar a "siguiente paso")
function saveState() { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch(_){} }
// Cargar con merge defensivo (compatibilidad con sesiones previas)
function loadState() {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return initialState();
return Object.assign(initialState(), JSON.parse(raw));
} catch(_) { return initialState(); }
}
```
---
## SECCIÓN 5 · ENTREGABLES OBLIGATORIOS
### 5.1 · Diploma / Constancia PDF
Generado vía `html2pdf.js` (única dependencia externa permitida). Plantilla oculta en el HTML que se hace visible solo durante la generación.
**Campos obligatorios** (todos los datos del estudiante deben aparecer):
```
1. Nombre del grupo
2. Número de grupo + sección
3. Caso analizado (sector + marca)
4. Categoría / cuadrante asignado
5. Posición exacta en el framework (ejes con valores)
6. Casos auditados (X de 4)
7. Modelo completo del framework secundario (todas las celdas concatenadas)
8. Hallazgo clave del grupo
9. Lista de integrantes con sus roles
10. Fecha en formato largo
11. Folio único: {{PREFIJO}}-{{NumGrupo}}-{{ID_CASO}}-{{AÑO}}
```
Nombre de archivo descargable: `Constancia_{{ACTIVIDAD}}_{{NOMBRE_GRUPO}}_G{{N}}_{{SECCION}}.pdf`
Formato A4 horizontal. Background del PDF forzado a `--cream` para que no salga blanco si html2canvas falla.
Manejo de errores: si la generación falla, mostrar toast `Error al generar el PDF · intenta de nuevo` y restaurar el DOM (no dejar el diploma visible).
### 5.2 · CSV completo
Descarga directa con BOM UTF-8 (para que Excel respete tildes y ñ):
```javascript
let csv = '\uFEFF' + rows.map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n');
```
**Mínimo 25 columnas** que cubran absolutamente todo el estado del análisis:
- Identificación grupal (nombre, número, sección, integrantes)
- Datos del caso (sector, marca, intensidad, extensión, cuadrante)
- Justificaciones (calibración + actantes)
- Consensos y disensos
- Modelo completo (los 6 actantes o equivalente)
- Hipótesis grupal
- Tarjeta de plenario (los 4 campos)
- Meta-cognición final
- Timestamp ISO
Nombre: `Auditoria_{{ACTIVIDAD}}_{{NOMBRE_GRUPO}}_{{SECCION}}.csv`
### 5.3 · Tarjeta de plenario imprimible
`@media print` con clase body `print-mode-card` que oculta todo excepto la tarjeta. Al activarse: header, footer, formulario y navegación se ocultan; solo queda el póster A4 con borde y sombra impresa.
Formato landscape, navy `#1B2A4A` con sombra `box-shadow: 8px 8px 0 var(--orange)` que se imprime con `print-color-adjust: exact`.
### 5.4 · Mailto al docente
Botón "Enviar por correo" que abre el cliente del estudiante con:
- `to:` correo del docente (placeholder configurable)
- `cc:` emails de los integrantes del grupo (extraídos del estado)
- `subject:` `[{{ACTIVIDAD}}] {{Sector}} · Grupo N°{{N}}`
- `body:` resumen completo del análisis (~1500 caracteres)
---
## SECCIÓN 6 · COMPONENTES DE UX OBLIGATORIOS
### 6.1 · Lightbox para imágenes
Cualquier imagen de caso debe ser ampliable a pantalla completa:
```html
<div class="ad-frame__viewport" id="viewport">
<img id="caseImage" src="...">
<div class="ad-frame__expand-hint">Toca para ampliar</div>
</div>
```
Al click → modal full-screen con backdrop oscuro, botón × en esquina, cierre con Esc, cierre con click fuera.
### 6.2 · Modales explicativos
Cada framework tiene un botón `?` (clase `help-trigger`) junto al título del diagrama interactivo. Al click abre un modal que contiene:
1. Definición del framework en una frase
2. Grilla con cada categoría / cuadrante / rol explicado individualmente
3. Bloque "Cómo manipular el gráfico" con instrucciones paso a paso
4. Bloque "Para la deliberación grupal" con preguntas guía
5. Demo visual animada (cuando aplica) — ej. ficha moviéndose hacia un slot
### 6.3 · Coachmarks dismissibles
Banner con icono `!` en la primera fase de cada nuevo concepto. Persistencia en `localStorage` clave `{{ACTIVIDAD}}_coachmarks_dismissed_v1`. No vuelven a aparecer una vez cerrados.
### 6.4 · Banner "siguiente paso"
Al final del informe, banner naranja con icono `→`, título contextual y CTA grande. Al completar los 4 casos: cambia a verde y CTA cambia a "Tarjeta de plenario".
### 6.5 · Diálogos de confirmación
Modales con header naranja, grilla de progreso visual (4 cuadros con estado: pending / current / done), recomendación específica del siguiente caso a analizar.
### 6.6 · Validación visual de campos requeridos
```css
.is-required-empty {
border-color: var(--red-bad) !important;
background: rgba(199,62,29,0.05) !important;
animation: pulseRequired 1.4s ease-in-out 2;
}
```
Marcar con `*` rojo en label. Banner `required-warning` con icono `!` aparece dinámicamente cuando el botón "Continuar" está deshabilitado y faltan campos.
### 6.7 · Toast de feedback
Notificación temporal (3-4 segundos) en bottom-center para: éxito de calibración, error de actante, descarga lista, etc. Tres variantes: neutral, ok (verde), error (rojo).
### 6.8 · Thumbnail flotante ampliable
Mini-preview del caso analizado siempre visible en posición fija. Cliqueable → abre el lightbox. En mobile se reposiciona al bottom-right más pequeño (no desaparece — sigue siendo útil).
### 6.9 · Tracker de fases
Header sticky con 6 chips numerados (0-5). En desktop: distribuidos horizontalmente. En mobile: scroll horizontal con `-webkit-overflow-scrolling: touch`. Estados: `is-active` (naranja) · `is-done` (verde) · neutro.
---
## SECCIÓN 7 · CHECKLIST DE VALIDACIÓN
> El revisor/a técnico/a usa esta lista. Cada item debe ser ✓ antes de aceptar el archivo.
### 7.1 · Validez técnica
- [ ] El archivo abre en navegador moderno sin errores de consola
- [ ] `node --check` sobre el script extraído pasa sin errores
- [ ] No hay accesos a `.name`, `.brand`, `.id` etc. sin guard previo (`if (!sec) return;`)
- [ ] Service Worker registra solo en `http:` o `https:` (silent skip en otros)
- [ ] Todos los IDs referenciados en JS (`$('#xxx')`) existen en el HTML
- [ ] HTML balanceado: misma cantidad de `<section>` y `</section>`, etc.
- [ ] No quedan `console.log` de debugging
- [ ] No quedan placeholders `{{...}}` sin reemplazar
### 7.2 · Validez pedagógica
- [ ] Las 6 fases existen y están secuenciadas correctamente
- [ ] Cada fase tiene rol líder visible
- [ ] Las dos fases de análisis tienen caja de deliberación con consenso/disenso
- [ ] Caja de deliberación tiene validación: mínimo 10 caracteres + consenso seleccionado
- [ ] Botón "Continuar" deshabilitado hasta validar
- [ ] Modal de meta-cognición aparece al 50% de la Fase 3
- [ ] Banner "siguiente paso" aparece al final del informe
- [ ] Banner cambia a verde cuando se completan los 4 casos
- [ ] Plenario tiene bloque que explica POR QUÉ se hace la tarjeta
- [ ] Diploma tiene los 11 campos obligatorios
- [ ] CSV tiene mínimo 25 columnas con todo el estado
### 7.3 · Mobile-first
- [ ] `viewport` permite zoom (`maximum-scale=5.0` y `user-scalable=yes`)
- [ ] En 375px de ancho: header no se rompe, tracker scrollea horizontal
- [ ] Diagrama de relaciones (Greimas o equivalente) colapsa a una columna en mobile
- [ ] Botones tienen min-height de 44px (touch target)
- [ ] Tipografía base ≥ 13px en cuerpo
- [ ] Pool de fichas funciona con tap (no solo drag)
- [ ] Lightbox ocupa pantalla completa en mobile
- [ ] Thumbnail flotante visible en mobile (más pequeño, esquina inferior)
### 7.4 · Identidad y limpieza
- [ ] Sin atribuciones personales en el footer ("construido por X para Y")
- [ ] Sin emails personales del docente embebidos
- [ ] Sin referencias hardcoded a sección/curso específico (todo configurable)
- [ ] Footer minimalista: nombre del curso + framework usado
- [ ] Sin emojis en interfaz (solo si la actividad lo justifica narrativamente)
- [ ] Sin cursing ni jerga informal
- [ ] Tono: trato de "ustedes" (plural grupal), no "tú" (singular)
### 7.5 · Resiliencia
- [ ] Recargar la página a mitad de la actividad → restaura el estado completo
- [ ] Cerrar sin terminar y volver al día siguiente → trabajo intacto
- [ ] Botón "Reiniciar todo" pide confirmación antes de borrar
- [ ] Sin caso seleccionado: navegar a Fase 4 directamente NO crashea (redirige a Fase 1)
- [ ] Errores de PDF se muestran como toast, no como crash
---
## SECCIÓN 8 · INSTRUCCIONES DE EJECUCIÓN PARA LA IA
Cuando recibas este prompt completo + los inputs del docente (Sección 2 con todos los placeholders rellenos):
1. **Lee la Sección 2 completa primero.** Identifica framework, casos, roles, duración. No empieces a generar HTML hasta tener claridad.
2. **Si falta información crítica** (ej. el docente no especificó las imágenes de los casos), **pregunta antes de generar**. No inventes casos genéricos.
3. **Si las imágenes vienen como archivos**, conviértelas a base64 antes de embeberlas. Tamaño máximo recomendado: 900px de ancho, JPEG calidad 82.
4. **Genera el archivo en este orden**:
a. Estructura HTML completa (las 6 fases con placeholders de contenido)
b. CSS completo (mobile-first → desktop)
c. JavaScript: estado + persistencia + lógica de cada fase + enhancements (lightbox, modales, dialogs)
d. Plantilla del diploma (oculta hasta generación)
e. Inicialización con guards defensivos
5. **Ejecuta el checklist de la Sección 7 antes de entregar.** Si algún item falla, corrige antes de mostrar el resultado.
6. **Entrega el archivo HTML** con un resumen breve de:
- Decisiones de adaptación que tomaste
- Cualquier supuesto que hiciste donde el input era ambiguo
- Limitaciones conocidas del resultado
7. **No incluyas en la respuesta**: capturas de pantalla simuladas, instrucciones genéricas de instalación, recordatorios de que eres una IA, advertencias innecesarias sobre copyright cuando los casos son piezas comunicacionales reales analizadas con fines pedagógicos.
---
## ANEXO A · TEMPLATE DE INPUT MÍNIMO PARA EL DOCENTE
Para que el docente no tenga que leer todo el documento, este es el bloque mínimo que debe completar y pasar a la IA junto con el prompt maestro:
```
═══════════════════════════════════════════════
INPUT DOCENTE · Calibrador Semiótico
═══════════════════════════════════════════════
NOMBRE_ACTIVIDAD: [...]
NOMBRE_CURSO: [...]
DURACION_MINUTOS: [...]
COMPETENCIA: [...]
FRAMEWORK_PRINCIPAL: [...]
EJES: [...]
FRAMEWORK_2 (opc): [...]
CASO_1:
Marca: [...]
Sector: [...]
Imagen: [adjunto / URL / descripción]
Categoría correcta:[...]
CASO_2: ...
CASO_3: ...
CASO_4: ...
CASO_MODELO: [id del caso 1, 2, 3 o 4]
ROLES_GRUPO:
- Coordinador/a
- Analista [F2]
- Analista [F3]
- Auditor/a
- Redactor/a (opc.)
EMAIL_DOCENTE: [para mailto]
PALETA (opc): [navy/orange por defecto]
═══════════════════════════════════════════════
```
---
## ANEXO B · EJEMPLO RESUELTO
Para referencia: el "Calibrador Semiótico" v3.1 implementa este prompt con:
- Framework principal: Esquema Tensivo de Zilberberg
- Framework secundario: Modelo Actancial de Greimas
- 4 casos: Inkafarma · Confianza (banco) · 1xBET · Mesajil
- Caso modelo: Casino & Betting
Validado contra el checklist completo de la Sección 7.
---
*Prompt maestro v1.0 · Patrón "Calibrador Semiótico" · Reutilizable para cualquier framework de análisis visual aplicado en contexto pedagógico universitario.*
Comentarios
Publicar un comentario