generador-prompt-mecanicas-cuento-infantil-v2.html

Crea o modifica un archivo HTML de un solo archivo (`single-file`, sin dependencias externas críticas, todo embebido en CSS/JS) llamado `generador-prompt-mecanicas-cuento-infantil-v2.html`. Es una herramienta web para estudiantes de diseño e ilustración del **Instituto de Diseño y Comunicación (IDC)** que transforma un **cuento infantil** en una **propuesta completa de juego de mesa educativo** mediante un prompt generado para IA.

https://mario55666.github.io/S11_Proyec_GameTable/

## 1. IDENTIDAD Y BRANDING (no negociables)

- **Institución:** Instituto de Diseño y Comunicación (IDC) — Instituto de Educación Superior Público.

- **Docente:** Mg. Mario Quiroz Martínez (con tilde en **Már**tinez en todo el footer y créditos).

- **Unidad didáctica:** Proyecto Ilustrador · Año 2026.

- **Paleta institucional:** `#f3a100` (oro/naranja IDC), `#0072b9` (azul IDC), `#555553` (gris IDC), `#1b9dd9` (azul claro logo), `#f5a623` (punto del logo).

- **Logo IDC:** Usa el logo tipográfico CSS personalizado (no imágenes externas). Consiste en:

- Texto `"ıdc"` en bold, color `#1b9dd9`, tamaño grande, con un punto decorativo circular `#f5a623` arriba de la "i".

- Texto `"diseño &<br>comunicación"` en color `#555553` (o `#e8e1d8` en dark mode).

- Subtítulo: `"Instituto de Educación Superior Público"`.

- **Footer:** Debe aparecer en header y footer con exactamente: `Mg. Mario Quiroz Martínez`, `Unidad didáctica: Proyecto Ilustrador`, `Año 2026`.

- **Tipografías:** `Fraunces` (display), `Inter` (body), `Quicksand` (logo IDC). Cargadas desde Google Fonts.

## 2. BASES TEÓRICAS A INTEGRAR EN LA HERRAMIENTA

La herramienta debe integrar dos marcos teóricos que se traducen en campos del formulario, tooltips pedagógicos y directrices dentro del prompt generado para IA:

### A. Neuroeducación (Francisco Mora, 2018)

- *"Sólo se puede aprender aquello que se ama."*

- **Emoción como vehículo del aprendizaje:** El campo *"Emoción central del cuento"* guía la mecánica. El prompt generado instruye que la emoción sea el eje conductor de cada turno, regla y componente.

- **Curiosidad y atención:** El prompt generado instruye que el setup genere asombro en 60 segundos y que el ritmo respete tiempos de atención infantil (~3-5 min por fase).

- **Adaptación por desarrollo cerebral:** El prompt generado diferencia por edad: sensorialidad/motoridad (3-5 años), cooperación/reglas simples (6-8 años), autonomía estratégica (9-12 años).

- **Repetición y equivocación:** El prompt instruye que los errores sean oportunidad de ajuste (refuerzo positivo), no penalización brusca.

- **Neuroética / Educación en valores:** El campo *"Valor socioemocional"* debe traducirse en reglas, premios y dinámica de turno.

### B. DUA-Experiencial (MPI-DUAE)

- Diseño Universal para el Aprendizaje 3.0 + Ciclo de Kolb (CE→OR→CA→EA).

- **Reglas no negociables del skill:**

- Validación en tiempo real (`oninput`).

- Color de error suave: `#fff3e0` (nunca rojo intenso `#c0392b`).

- Sin `localStorage`; usar estado en memoria (`let lastReport = null` y variables globales).

- Single-file HTML (todo embebido).

- Footer correcto IDC.

- Justificación pedagógica visible en tooltips.

## 3. ESTRUCTURA DEL HTML

```html

<!DOCTYPE html>

<head>

<title>generador-prompt-mecanicas-cuento-infantil</title>

<style>

/* Toda la CSS aquí */

</style>

</head>

<body>

/* Todo el JS aquí */

</script>

</body>

</html>

```

### CSS obligatoria (variables y componentes)

Variables `:root` y `[data-theme="dark"]` con:

- `--text-xs` a `--text-2xl` usando `clamp()`.

- `--space-1` a `--space-16`.

- `--color-bg`, `--color-surface`, `--color-surface-2`, `--color-surface-offset`, `--color-border`.

- `--color-text`, `--color-text-muted`, `--color-text-faint`, `--color-text-inverse`.

- `--color-primary: #01696f`, `--color-primary-hover: #0c4e54`, `--color-blue: #006494`, `--color-gold: #d19900`, `--color-success: #437a22`, `--color-error: #a12c7b`.

- `--radius-sm` a `--radius-full`, `--shadow-sm` a `--shadow-lg`.

- `--font-display: 'Fraunces', Georgia, serif`, `--font-body: 'Inter', Arial, sans-serif`.

- `--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1)`.

- `--content-wide: 1240px`.

Dark mode invierte los colores de fondo a tonos oscuros `#171614`, `#1d1b19`, etc., y los textos a `#e8e1d8`.

Componentes clave de CSS a incluir:

- `.shell`, `.topbar`, `.brand`, `.hero` (grid 1.15fr / 0.85fr), `.main-grid` (grid 1.1fr / 0.9fr), `.panel`, `.hero-card`, `.hero-side`, `.mini-map` (4 nodos), `.fieldset`, `.grid-2`, `.grid-3`, `.check-grid`, `.field`, `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.sticky`, `.result-box`, `.meta-card`, `.mechanic-card`, `.prompt` (fondo `#111`, color `#f7f7f7`, `pre-wrap`, `max-height:560px`, `overflow:auto`), `.chips`, `.chip`, `.project-strip`, `.ps-item`, `.preview-card`, `.preview-links`, `.foot`, `.foot-grid`, `.idc-brand`, `.idc-logo`, `.idc-mark`, `.idc-dot`, `.idc-words`, `.idc-sub`.

**CSS nueva obligatoria (v2.0):**

```css

.progress-bar { margin-bottom: var(--space-6); }

.progress-track { height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; }

.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-blue)); width: 0%; transition: width .4s var(--transition-interactive); border-radius: var(--radius-full); }

.progress-steps { display: flex; justify-content: space-between; margin-top: var(--space-3); flex-wrap: wrap; gap: var(--space-2); }

.progress-steps .step { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); transition: all .3s; }

.progress-steps .step.active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

.progress-steps .step.completed { background: var(--color-success); color: #fff; border-color: var(--color-success); }

.pedagogy-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); padding: var(--space-3); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.5; }

.validation-hint { font-size: var(--text-xs); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); line-height: 1.5; transition: all .3s; }

.validation-hint.soft-warn { background: #fff3e0; color: #5d4037; border-left: 3px solid #e4a010; }

.validation-hint.ok { background: #e8f5e9; color: #2e7d32; border-left: 3px solid var(--color-success); }

.word-counter { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); text-align: right; }

.emotion-field select, .value-field select { background: color-mix(in srgb, var(--color-gold) 6%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-gold) 30%, var(--color-border)); }

.emotion-field label, .value-field label { color: var(--color-primary); }

```

### Layout HTML semántico

```html

<a class="skip-link" href="#contenido">Saltar al contenido</a>

</header>

<span class="eyebrow">Diseño de juegos + narrativa infantil</span>

<h1>Identifica la mecánica ideal a partir de un cuento infantil.</h1>

<p>Descripción de la herramienta...</p>

</div>

<h2>Mapa rápido</h2>

<div class="node"><strong>Cuento</strong><span>personajes, conflicto, objetivo</span></div>

<div class="node"><strong>Tensión</strong><span>riesgo, cooperación, deducción, carrera</span></div>

<div class="node"><strong>Mecánica</strong><span>selección principal + secundarias</span></div>

<div class="node"><strong>Implementación</strong><span>componentes y experiencia visual</span></div>

</div>

</aside>

</section>

<h2 class="section-title">Formulario</h2>

<span class="step active" data-step="1">1. Identificación</span>

<span class="step" data-step="2">2. Historia</span>

<span class="step" data-step="3">3. Experiencia</span>

<span class="step" data-step="4">4. Materiales</span>

<span class="step" data-step="5">5. Pedagogía</span>

</div>

</form>

</div>

</aside>

</section>

</main>

</div>

```

## 4. FORMULARIO (5 secciones + campos nuevos v2.0)

### Sección 1 — Identificación del proyecto

- `equipo` (texto), `titulo` (texto, required), `nombre` (texto), `apellido` (texto).

- Hint: "Estudiante individual responsable de la adaptación..."

- **Tooltip pedagógico:** `"🧠 Neuroeducación: El registro de identidad activa la red de reconocimiento y responsabilidad. Según Mora (2018), la individualidad y la pertenencia son clave para la motivación cerebral."`

### Sección 2 — Historia base

- **NUEVO v2.0:** `emocion` (select): Alegría/Celebración, Ternura/Calidez, Miedo/Suspenso, **Asombro/Maravilla** (default), Coraje/Valentía, Tristeza/Melancolía, Humor/Diversión.

- **Tooltip:** `"💡 Neuroeducación (Mora): La emoción es el vehículo del aprendizaje. Identificar la emoción central permite que la mecánica del juego resuene con la experiencia afectiva del niño."`

- `edad` (select): 3–5, 6–8 (default), 9–12, Familiar multiedad.

- `duracion` (select): 10–15, 15–25 (default), 25–40, 40–60 min.

- `resumen` (textarea, placeholder "Describe personajes, objetivo, conflicto, escenarios y desenlace deseado.")

- **NUEVO v2.0:** Debajo del textarea, incluir `<div id="resumenHint" class="validation-hint" style="display:none"></div>` y `<div class="word-counter" id="wordCounter">0 palabras</div>`.

- `protagonista` (texto), `antagonista` (texto).

### Sección 3 — Tipo de experiencia

- `objetivoJuego` (select): Superar una misión, Acumular puntos o tesoros, Resolver un misterio, Llegar primero a una meta, Construir algo colectivamente.

- `interaccion` (select): Cooperativa, Competitiva suave, Competitiva directa, Semicooperativa, Social/deducción.

- `azar` (select): Baja, Media (default), Alta.

- Tensión narrativa (radio group): Escasez y bloqueo (default), Crecimiento progresivo, Riesgo y recompensa, Misterio y deducción, Optimización por turnos, Construcción espacial.

### Sección 4 — Estilo visual y materiales

- `estiloVisual` (select): Acuarela suave y poética, Ilustración editorial contemporánea, Collage artesanal, Cartoon expresivo, Geométrico y minimalista, Fantasía luminosa.

- `paleta` (texto).

- `recursos` (textarea).

- `componentes` (checkboxes): meeples, cartas, dados, losetas, tablero, hojas.

- **Tooltip:** `"🎨 Diseño inclusivo: Los materiales táctiles y visuales activan redes sensoriales diferentes. Para público infantil, prioriza texturas, contrastes y piezas manipulables que no requieran lectura."`

### Sección 5 — Intención pedagógica y funcional

- **NUEVO v2.0:** `valorSocioemocional` (select): Empatía/Ayuda mutua (default), Paciencia/Turnos, Coraje/Perseverancia, Cooperación/Trabajo en equipo, Respeto/Inclusión, Honestidad/Confianza, Creatividad/Imaginación.

- **Tooltip:** `"❤️ Neuroética: Mora (2018) subraya que la neuroeducación debe incluir la educación en valores. Conectar el juego con un valor socioemocional potencia la red afectiva y da sentido profundo a la experiencia lúdica."`

- `competencias` (texto).

- `modoUso` (select): Aula, Hogar, Biblioteca/mediación lectora, Taller de diseño, Museo/activación cultural.

- `funcionalidad` (textarea).

- **Tooltip:** `"🎯 DUA + Kolb: La funcionalidad pedagógica debe cubrir el ciclo completo CE→OR→CA→EA. Piensa: ¿Qué experiencia concreta genera el juego? ¿Qué reflexión provoca? ¿Qué concepto abstrae? ¿Qué acción nueva experimenta el niño?"`

- `mecanicasSugeridas` (texto, opcional).

Toolbar de botones: `Generar prompt`, `Cargar ejemplo`, `Limpiar`.

## 5. MOTOR DE INFERENCIA DE MECÁNICAS (JavaScript)

### Base de datos `mechanics`

Objeto JavaScript con ~30 mecánicas. Cada entrada tiene: `key` (slug BGG), `desc` (descripción breve), `url` (ficha BGG), `visual` (pista visual para ilustrador), `materials` (materiales afines), `when` (array de condiciones que activan la mecánica: strings de tensión, interacción, objetivo, azar o componentes).

Mecánicas obligatorias en la base:

1. Colocación de trabajadores (worker placement) — when: escasez y bloqueo, competitiva suave/directa

2. Construcción de mazos (deck building) — when: crecimiento progresivo

3. Exprime tu suerte (push your luck) — when: riesgo y recompensa, Alta

4. Roles / Traidor oculto (hidden roles) — when: misterio y deducción, Social/deducción

5. Puntos de acción (action points) — when: optimización por turnos

6. Colocación de losetas (tile placement) — when: construcción espacial, Construir algo colectivamente

7. Juego cooperativo (cooperative game) — when: Cooperativa, Superar una misión

8. Roll and write — when: Alta, hojas

9. Toma eso (take that) — when: Competitiva directa

10. Mayorías / Influencia (area majority) — when: construcción espacial

11. Drafting (card drafting) — when: crecimiento progresivo

12. Bazas (trick taking) — when: competitiva suave

13. Creación de rutas / redes (route building) — when: construcción espacial, Llegar primero a una meta

14. Poderes variables (variable player powers) — when: Semicooperativa

15. Subastas / Apuestas (auction bidding) — when: Competitiva directa

16. Gestión de mano (hand management) — when: optimización por turnos

17. Colección de conjuntos (set collection) — when: crecimiento progresivo

18. Programación de acciones (programmed movement) — when: optimización por turnos

19. Movimiento por áreas / grid (grid movement) — when: Llegar primero a una meta

20. Memorización (memory) — when: Resolver un misterio

21. Actuar / Cantar / Contar historias — when: Social/deducción

22. Compra-venta / Especulación — when: Competitiva suave

23. Coger y llevar (pick-up and deliver) — when: Llegar primero a una meta, Construir algo colectivamente

24. Legacy — when: Superar una misión

25. Tiempo real (real-time) — when: Alta

26. Deducción — when: misterio y deducción, Resolver un misterio

27. Gestión de recursos — when: crecimiento progresivo

28. Negociación — when: Social/deducción

29. I cut, you choose — when: Competitiva suave

### Función `inferMechanic(data)`

Lógica de prioridad (exacta):

1. `pick = 'Juego cooperativo'` por defecto.

2. Si `data.interaccion === 'Cooperativa'` → `pick = 'Juego cooperativo'`, señal sobre meta compartida.

3. Si `data.tension === 'misterio y deducción' || data.objetivoJuego === 'Resolver un misterio'` → `pick = data.interaccion === 'Social / deducción' ? 'Roles / Traidor oculto' : 'Deducción'`, señal sobre secretos.

4. Else si `data.tension === 'escasez y bloqueo'` → `pick = 'Colocación de trabajadores'`, señal sobre acceso limitado.

5. Else si `data.tension === 'crecimiento progresivo'` → `pick = data.componentes.includes('cartas') ? 'Construcción de mazos' : 'Gestión de recursos'`, señal sobre progresión acumulativa.

6. Else si `data.tension === 'riesgo y recompensa'` → `pick = 'Exprime tu suerte'`, señal sobre "seguir o parar".

7. Else si `data.tension === 'optimización por turnos'` → `pick = 'Puntos de acción'`, señal sobre secuencias medibles.

8. Else si `data.tension === 'construcción espacial'` → `pick = data.componentes.includes('losetas') ? 'Colocación de losetas' : 'Creación de rutas / redes'`, señal sobre construcción espacial.

9. Reglas de patrón de texto (regex sobre `data.resumen` y `data.antagonista`):

- `data.componentes.includes('hojas') && data.azar === 'Alta'` → `pick = 'Roll and write'`.

- `/secreto|disfraz|traidor|lobo|impostor/i.test(data.resumen)` → `pick = 'Roles / Traidor oculto'`.

10. Devolver `{ pick, signals }`.

### Función `suggestSecondary(primary, data)`

Lógica exacta:

- Si `primary !== 'Juego cooperativo' && data.interaccion === 'Cooperativa'` → push 'Juego cooperativo'.

- Si `/personaje|animal|equipo|hermano|hada/i.test(data.protagonista)` y no está ya → push 'Poderes variables'.

- Si `data.componentes.includes('cartas') && primary !== 'Gestión de mano'` → push 'Gestión de mano'.

- Si `data.componentes.includes('losetas') && primary !== 'Colocación de losetas'` → push 'Colocación de losetas'.

- Si `data.componentes.includes('dados') && primary !== 'Exprime tu suerte' && data.azar !== 'Baja'` → push 'Exprime tu suerte'.

- Si `/memoria|recordar|olvido|pista/i.test(data.resumen + ' ' + data.funcionalidad)` → push 'Memorización'.

- Si `/coleccionar|reunir|familia|grupo|pareja/i.test(data.resumen)` → push 'Colección de conjuntos'.

- Si `/narrar|actuar|cantar|cuento/i.test(data.funcionalidad)` → push 'Actuar / Cantar / Contar historias'.

- Devolver `Array.from(new Set(secondaries)).filter(item => item !== primary).slice(0, 4)`.

### Función `buildPreviewLinks(data, primaryData)`

Generar 4 enlaces:

1. `Mecánica "${key}" en BoardGameGeek` → URL de la ficha mecánica.

2. `Juegos que usan esta mecánica` → `https://boardgamegeek.com/geeksearch.php?action=search&objecttype=boardgame&q=${encodeURIComponent(key)}`.

3. `Previsualización visual del tablero` → búsqueda de imágenes de Google: `${key} board game`.

4. `Referencias del cuento "${titulo}"` → búsqueda de Google: `${titulo} cuento infantil ilustración`.

## 6. PROMPT INTERNO GENERADO (buildPrompt)

El `buildPrompt` debe construir una plantilla de string literal (backticks) con interpolación `${}` que genere el siguiente texto para el usuario (copiable para pegar en ChatGPT, Claude, etc.).

**Directrices clave del contenido del prompt generado:**

- Encabezado: `"Actúa como diseñador experto de juegos de mesa infantiles, mediación lectora y diseño editorial lúdico..."`.

- **NUEVO v2.0:** Sección `DATOS DEL PROYECTO` debe incluir `Emoción central del cuento` y `Valor o habilidad socioemocional`.

- **NUEVO v2.0:** Sección `PRINCIPIOS DE NEUROEDUCACIÓN A CONSIDERAR (Mora, 2018)` con 5 puntos exactos:

1. Emoción central = eje conductor de la mecánica.

2. Adaptación por desarrollo cerebral según `data.edad` (sensorialidad/motoridad 3-5; cooperación 6-8; autonomía 9-12).

3. Valor socioemocional traducido en reglas, premios y dinámica de turno (neuroética lúdica).

4. Curiosidad y atención: setup genera asombro en 60 segundos; ritmo 3-5 min por fase.

5. Repetición y equivocación: errores como oportunidad de ajuste, no penalización brusca.

- TAREAS A, B, C, D, E (títulos, previsualización, reglas, castigos/premios narrativos, despiece de piezas exactas).

- Complementos 1-10 (justificación, narrativa, estilo visual, recursos, funcionalidad pedagógica, flujo básico, seguridad, variantes, mecánicas secundarias, concepto de prototipo).

- FORMATO DE RESPUESTA: subtítulos claros, español, evitar estadísticas, priorizar descripción cualitativa/visual/funcional.

## 7. VALIDACIÓN EN TIEMPO REAL Y PROGRESO (JavaScript v2.0)

Implementar estas funciones exactas en el bloque `<script>`:

```javascript

// === Validación suave en tiempo real (Neuroeducación + DUA) ===

function showSoftHint(elId, html, type='warn'){

const el = document.getElementById(elId);

if(!el) return;

el.style.display = 'block';

el.className = 'validation-hint ' + (type==='ok' ? 'ok' : 'soft-warn');

el.innerHTML = html;

}

function hideSoftHint(elId){ const el=document.getElementById(elId); if(el) el.style.display='none'; }

const resumenEl = document.getElementById('resumen');

if(resumenEl){

resumenEl.addEventListener('input', () => {

const words = resumenEl.value.trim().split(/\s+/).filter(w => w.length>0);

const count = words.length;

document.getElementById('wordCounter').textContent = count + ' palabra' + (count!==1?'s':'');

if(count < 15){

showSoftHint('resumenHint', '📖 <strong>Llevas ' + count + ' palabras.</strong> Un buen resumen narrativo necesita al menos 15 palabras para que la IA capture personajes, conflicto y escenario. <em>Tip: describe el inicio, el problema y el desenlace.</em>', 'warn');

} else if (count < 30){

showSoftHint('resumenHint', '⏳ <strong>Llevas ' + count + ' palabras.</strong> Ya tienes una base narrativa. Amplía con escenarios, aliados y giros para enriquecer la propuesta de mecánica.', 'warn');

} else {

showSoftHint('resumenHint', '✅ <strong>' + count + ' palabras.</strong> ¡Buena base narrativa! La mecánica inferida será más precisa.', 'ok');

}

updateProgress();

});

}

function updateProgress(){

const fields = ['equipo','titulo','nombre','apellido','edad','duracion','resumen','protagonista','antagonista','objetivoJuego','interaccion','azar','emocion','estiloVisual','competencias','modoUso','funcionalidad','valorSocioemocional'];

let filled=0, total=fields.length;

fields.forEach(id=>{ const el=document.getElementById(id); if(el && el.value.trim()) filled++; });

const pct = Math.round((filled/total)*100);

document.getElementById('progressFill').style.width = pct+'%';

const steps = document.getElementById('progressSteps').querySelectorAll('.step');

const stepThresholds = [4, 8, 12, 15, 18];

steps.forEach((step, i)=>{

step.classList.remove('active','completed');

if(pct >= (stepThresholds[i]/total*100)) step.classList.add('completed');

});

let activeIdx = 0;

for(let i=0;i<stepThresholds.length;i++){ if(filled < stepThresholds[i]){ activeIdx=i; break; } else if(i===stepThresholds.length-1) activeIdx=i; }

steps[activeIdx].classList.add('active');

}

['titulo','edad','resumen','objetivoJuego'].forEach(id=>{

const el=document.getElementById(id);

if(el){ el.addEventListener('input', updateProgress); el.addEventListener('change', updateProgress); }

});

// Refuerzo por error de 5 pasos (DUA) cuando se intenta generar con datos insuficientes

form.addEventListener('submit', (e) => {

const fd = new FormData(form);

const data = Object.fromEntries(fd.entries());

data.componentes = getChecked('componentes');

data.tension = getChecked('tension')[0] || 'escasez y bloqueo';

const resumenWords = (data.resumen || '').trim().split(/\s+/).filter(w=>w.length>0).length;

if(resumenWords < 15){

e.preventDefault();

const hint = document.getElementById('resumenHint');

if(hint){

hint.style.display='block';

hint.className='validation-hint soft-warn';

hint.innerHTML = '🧠 <strong>Refuerzo pedagógico:</strong> El resumen narrativo es muy breve. La neuroeducación nos enseña que sin una historia emocionalmente rica, la mecánica del juego carecerá de sentido. <br><em>Paso 1 de 5:</em> Describe el personaje principal. <br><em>Paso 2:</em> ¿Qué quiere lograr? <br><em>Paso 3:</em> ¿Qué o quién se lo impide? <br><em>Paso 4:</em> ¿Quién le ayuda? <br><em>Paso 5:</em> ¿Cómo termina la historia? <br><strong>Añade al menos 15 palabras para continuar.</strong>';

}

resumenEl && resumenEl.focus();

return;

}

render(data);

});

```

**Nota:** El botón `Cargar ejemplo` debe prellenar todos los campos (incluyendo `emocion` y `valorSocioemocional`) y luego llamar `form.requestSubmit(); updateProgress();`.

El botón `Limpiar` (reset) debe restablecer todos los elementos de resultado a su estado inicial y llamar `updateProgress()`.

## 8. EXPORTACIÓN

### Exportación CSV

Generar filas con campos: Institución, Unidad didáctica, Docente, Año, Equipo, Proyecto, Responsable, Público, Duración, Resumen, Emoción, Protagonista, Antagonista, Objetivo, Interacción, Azar, Tensión, Estilo visual, Paleta, Recursos, Componentes, Piezas estimadas, Competencias, Valor socioemocional, Modo, Funcionalidad, Mecánica principal, Descripción, Referencia BGG, Complementarias, Enlaces. Codificar en UTF-8 BOM para Excel.

### Exportación PDF

Abrir ventana nueva (`window.open('', '_blank')`) con HTML de impresión que incluya:

- Logo IDC tipográfico en header.

- Tablas con datos del formulario.

- Chips de mecánicas complementarias.

- Prompt generado en bloque `<pre>`.

- Footer con Mg. Mario Quiroz Martínez, unidad y año.

- Script `window.onload` que llame `window.print()` tras 400ms.

## 9. TEMA CLARO/OSCURO

Implementar toggle de tema que alterne `data-theme="light"` / `data-theme="dark"` en `<html>` usando `matchMedia('(prefers-color-scheme:dark)')` como default. Usar SVG inline para iconos sol/luna.

## 10. REGLAS DE ORTOGRAFÍA Y ACCESIBILIDAD

- Tildes correctas en español: **interés, acción, solución, diálogo, conversión, grabación, información, educación, aplicación, función, conexión, versión, sesión, módulo, título, análisis, diseño, párrafo, categoría, potenciación, periódico, emoción, mecánica**.

- `lang="es"` en `<html>`.

- `aria-label` en header, hero-side, progreso.

- `for` en labels enlazados a inputs.

- Skip link para saltar al contenido.

- `focus-visible` con outline verde (`var(--color-primary)`).

## 11. CHECKLIST DE CALIDAD FINAL

Antes de entregar el archivo HTML, verificar:

- [ ] Single-file: todo CSS y JS embebido, sin `src` externos salvo Google Fonts.

- [ ] Sin `localStorage`.

- [ ] Campos `emocion` y `valorSocioemocional` presentes y funcionales.

- [ ] Barra de progreso actualiza al escribir.

- [ ] Validación suave del resumen con contador de palabras.

- [ ] Refuerzo de 5 pasos aparece si resumen < 15 palabras al generar.

- [ ] Color de error suave (`#fff3e0`) usado, nunca rojo intenso.

- [ ] Tooltips pedagógicos presentes en secciones 1, 2, 4, 5.

- [ ] Prompt generado incluye sección "PRINCIPIOS DE NEUROEDUCACIÓN".

- [ ] Footer IDC correcto con tilde en Martínez.

- [ ] Exportación CSV y PDF funcionan y incluyen los nuevos campos.

- [ ] Tema claro/oscuro funciona.

- [ ] Responsive hasta 720px y 1024px.

- [ ] Todas las tildes del español revisadas.

Buscar este blog

Diseño Gráfico

generador-prompt-mecanicas-cuento-infantil-v2.html

Comentarios

Publicar un comentario

Entradas populares de este blog

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

Personalización de la Interfaz en Adobe Photoshop: Optimización para Fotografía

Explorando la Herramienta de Cotas en Adobe Illustrator: