SUPERPROMPT: Arsenal BI — Sesión 2 · HTML5 Gamificado IUTPC
https://mario55666.github.io/S02_IA_DATA_2006/
# SUPERPROMPT: Arsenal BI — Sesión 2 · HTML5 Gamificado IUTPC
## 1. IDENTIDAD DEL PROYECTO
**Nombre:** Arsenal BI: elige con criterio
**Formato:** Archivo HTML5 autocontenido (único archivo `.html`, sin dependencias externas).
**Público:** Estudiantes universitarios de IA + DATA (UTP).
**Modelo pedagógico:** IUTPC gamificado (Inicio → Utilidad → Transformación → Práctica → Cierre).
**Duración:** 90 minutos.
**Logro:** Identificar y seleccionar herramientas de BI según aplicabilidad a necesidades organizacionales.
---
## 2. ARQUITECTURA GENERAL
El archivo es un documento HTML5 monolítico que contiene:
- `<style>`: Todo el CSS en `:root` con variables de diseño (paleta oscura cyberpunk).
- `<body>`: HUD sticky, hero, 5 niveles IUTPC, 5 pestañas de navegación, reporte imprimible.
- `<script>`: JavaScript vanilla con estado persistente en `localStorage`.
**Pestañas de navegación:**
1. 🎮 Niveles IUTPC (contenido principal)
2. 🏅 Insignias (progreso visual)
3. 📊 Evaluación (rúbrica + autoevaluación)
4. 🤖 Uso de IA (declaración ética + prompts)
5. 📄 Reporte (generación PDF vía `window.print()` + export Markdown)
**Sistema de desbloqueo:** Cada nivel N se desbloquea solo al completar el nivel N-1. Los niveles 2–5 tienen un overlay `.locked` con mensaje que indica qué nivel completar primero.
---
## 3. PALETA DE DISEÑO (ESTRICTA)
Usa estas variables CSS en `:root`:
```css
--bg:#0a0b10; --bg2:#0f111a; --panel:#12131a; --panel2:#0d0e14; --line:#1f2230;
--text:#e6e8f2; --muted:#8b8fa3; --steel:#8b8fa3;
--cyan:#00e5ff; --cyan-dim:#00e5ff14;
--alert:#ff2038; --alert-dim:#ff203818;
--amber:#ffd600; --amber-dim:#ffd60016; --gold:#ffd64a;
--green:#00ff9d; --green-dim:#00ff9d14;
--violet:#b829dd; --violet-dim:#b829dd18;
--radius:14px; --shadow:0 10px 34px rgba(0,0,0,.4);
```
**Tipografía:** `'Oswald', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif`.
**Reglas visuales:**
- Fondo con gradientes radiales sutiles (rojo en esquina superior izquierda, cyan en inferior derecha).
- Paneles con `border-left` de color según tipo: `alert` (rojo) para Inicio, `amber` para Utilidad, `cyan` para Transformación, `green` para Práctica, `violet` para Cierre.
- Foco visible con `outline:3px solid var(--amber)` para accesibilidad.
- `@media print` oculta HUD, pestañas, botones y muestra solo `#printReport` con estilos limpios.
---
## 4. SISTEMA DE ESTADO Y PERSISTENCIA
**Clave de almacenamiento:** `iadata_arsenal_s2_v1`.
**Objeto `state` (estructura obligatoria):**
```javascript
state = {
reg: { mode: 'individual'|'grupal', teamName: '', participants: [{name, email, role}] },
xp: 0,
levels: {1:false, 2:false, 3:false, 4:false, 5:false},
badges: {detector:false, traductor:false, analista:false, selector:false, estratega:false, guardian:false},
evidence: {e1:false, e2:false, e3:false, e4:false},
answers: {}, // qid → {label, chosen, ok, fund}
assoc: {}, // groupKey → {label, ok, score}
dndDone: false,
fields: {}, // id de input/textarea → valor
likert: {}, // grupo → valor 1-5
self: {} // autoevaluación por índice
};
```
**Funciones de persistencia:**
- `store.get()` / `store.set(o)`: Lee/escribe en `localStorage` con fallback a memoria si `localStorage` falla.
- `saveProgress(notify)`: Guarda automáticamente al cambiar cualquier campo.
- `loadProgress()`: Recupera al cargar la página.
- `resetProgress()`: Limpia todo y recarga.
**HUD:** Muestra XP total, niveles completados (X/5), insignias (X/6) y barra de progreso porcentual.
---
## 5. FLUJO PEDAGÓGICO POR NIVEL
### NIVEL 1 · INICIO (10 min) — Fase I
**Objetivo:** Activar saberes previos y generar expectativas.
**Contenido:**
- Dinámica de apertura con 3 dashboards (Retail, Financiero, Logístico).
- **JUEGO: Orbita de Decisiones BI.** Canvas con física propia:
- 3 planetas en posición triangular (Retail arriba, Financiero abajo-izq, Logístico abajo-der).
- 8 asteroides arrastrables (Rapidez, Gráficos, Conexión, Facilidad, Costo, Actualización, Seguridad, Colaboración).
- Cada asteroide, al soltarse dentro del círculo punteado de un planeta, se posiciona estáticamente con halo verde y muestra un tooltip explicando POR QUÉ esa característica es clave para ese sector.
- Panel de observaciones debajo del canvas que se revela al hacer clic en nodos.
- Leyenda honesta: NO promete rechazos rojos por "no prioridad"; indica que cualquier asteroide puede encajar en cualquier planeta con razones distintas.
- Textarea guiado: "¿Qué características esperarías tú?" con placeholder que referencia las observaciones del radar.
- 6 preguntas cerradas (n1q1–n1q6) con retroalimentación inmediata:
- n1q1–n1q2: Repaso sesión anterior.
- n1q3–n1q6: Metáfora del juego (gravedad = necesidad contextual, rebote = imposición sin contexto, órbita = ajuste problema-solución).
- Likert de confianza inicial (1–5).
- **Checklist visual de progreso** antes del botón "Completar Nivel 1": 8 ítems que se iluminan en verde a medida que se completan.
**Condición de completitud:**
- Textarea n1open con contenido.
- n1q1–n1q6 respondidas correctamente.
- Likert n1conf marcado.
**Insignia:** Detector de tableros.
---
### NIVEL 2 · UTILIDAD (15 min) — Fase U
**Objetivo:** Contextualizar la selección en un caso real (ModaAndina).
**Contenido:**
- Caso textual: MYPE peruana de ropa, 3 tiendas + 1 virtual, datos en Excel, presupuesto limitado, equipo sin programadores.
- **3 MAPAS MENTALES INTERACTIVOS** (uno antes de cada pregunta):
1. **Mapa tipo red** (Pregunta 1): Nodo central "Gerencia ModaAndina" conectado a 4 ramas (Ventas, Clientes, Inventario, Promociones). Al hacer clic en cada nodo, un panel fijo debajo del canvas muestra la lista de datos específicos que necesita la gerencia. Nunca usa tooltips flotantes que se corten.
2. **Mapa tipo tarjetas grid** (Pregunta 2): 6 tarjetas (Facilidad, Conexión, Visualización, Costo, Actualización, Seguridad). Hover expande el cuerpo de la tarjeta mostrando tags concretos.
3. **Mapa tipo balanza** (Pregunta 3): Dos columnas comparativas. Lado verde = factores que empujan a "sencilla". Lado rojo = factores que empujan a "robusta" (pero con contra-argumentos que los desactivan para ModaAndina). Hover en cada factor revela la justificación.
- 3 textareas (moda1, moda2, moda3) con placeholders que canalizan la respuesta hacia lo observado en los mapas.
- Rutina "Antes pensaba / Ahora pienso" (se cierra en Nivel 5).
- Sondeo diagnóstico de herramientas previas (tabla: Excel, Power BI, Tableau, Looker, Otra).
- Pregunta cerrada n2q1: "¿De qué depende la selección?"
- Asociación interactiva: condiciones de ModaAndina ↔ características de herramienta.
**Condición de completitud:**
- Los 3 textareas con contenido.
- n2q1 correcta.
- Asociación n2 correcta.
**Insignia:** Explorador de terreno.
---
### NIVEL 3 · TRANSFORMACIÓN (30 min) — Fase T
**Objetivo:** Comparar herramientas y construir criterios de selección.
**Contenido:**
- 6 componentes funcionales de BI (Conexión, Preparación, Modelado, Reportes, Actualización, Seguridad) en tarjetas estáticas.
- **Matriz comparativa** de 5 herramientas: Power BI, Tableau, Looker Studio, Qlik Sense, Excel/Power Query. Columnas: Uso predominante, Ventaja inicial, Condición o límite.
- **JUEGO: Campo de Fuerzas BI.** Canvas con física propia:
- **Arriba:** 6 bolas = componentes funcionales (colores distintivos).
- **Abajo:** 5 bandejas = herramientas (colores distintivos: amarillo Power BI, naranja Tableau, azul Google, verde Qlik, verde-oscuro Excel).
- El usuario arrastra una bola y la lanza hacia una bandeja.
- **Física:** Gravedad hacia abajo, rebote en paredes, fricción.
- **Resultado según matriz de fuerza interna (no aleatoria):**
- ≥ 75%: Se absorbe suavemente, posición fija, halo verde, tooltip OK.
- 50–74%: Rebote leve (velocidad hacia arriba), flash ámbar, tooltip WARN.
- < 50%: Rechazo fuerte (vector de escape), flash rojo, tooltip NO.
- Panel de descubrimientos acumulativos debajo que revela el patrón: "ninguna herramienta domina todos los componentes".
- Leyenda visual de colores explicando qué significa cada resultado.
- Asociación herramienta ↔ uso predominante.
- Clasificación drag-and-drop: criterios válidos vs. superficiales (con touch fallback).
- 2 preguntas cerradas (n3q1: V/F "más cara = mejor"; n3q2: rol de Excel).
- 3 preguntas de cierre (conceptual, aplicada, metacognitiva).
**Condición de completitud:**
- Asociación n3 correcta.
- Clasificación DND correcta.
- n3q1 y n3q2 correctas.
- 3 textareas de cierre con contenido.
**Insignia:** Analista comparativo.
---
### NIVEL 4 · PRÁCTICA (25 min) — Fase P
**Objetivo:** Aplicar criterios para resolver un caso concreto.
**Contenido:**
- 5 escenarios a elegir: Minimarkets, Universidad, Delivery, Clínica, Municipalidad.
- Asociación escenario ↔ prioridad de selección.
- Pregunta cerrada n4q1: "¿Cuál es el criterio MÁS adecuado?"
- **Ficha de Recomendación BI** (formulario extenso):
- Organización y sector
- Problema o necesidad
- Indicadores (mínimo 3)
- Fuentes de datos
- Herramienta recomendada (select: Power BI, Tableau, Looker, Qlik, Excel)
- Justificación (mínimo 3 criterios)
- Riesgo o límite
- Boceto de dashboard
- Instrumento de evaluación formativa (Logrado / En proceso).
- Política de IA intermedia y transparente.
- Botones: Completar nivel, Copiar ficha en Markdown, Descargar ficha.
**Condición de completitud:**
- Asociación n4 correcta.
- n4q1 correcta.
- Ficha completa: organización, necesidad, indicadores, herramienta, justificación, riesgo.
**Insignia:** Consultor/a BI.
---
### NIVEL 5 · CIERRE (10 min) — Fase C
**Objetivo:** Integrar, reflexionar y transferir.
**Contenido:**
- Fórmula de selección sintetizada: necesidad + usuarios + datos + costo + integración + visualización + escalabilidad + seguridad + capacidades.
- Se desbloquea textarea "Ahora pienso…" (rutina del Nivel 2).
- Ticket de salida: 3 preguntas (criterio más importante, recomendación para MYPE con Excel, aspecto por profundizar).
- Autoevaluación Likert final (1–5).
- Síntesis: 3 criterios clave que se lleva.
- Panel de misión completada con XP final, insignias y progreso.
- Próxima misión: gestión, almacenamiento y calidad de datos.
**Condición de completitud:**
- "Ahora pienso…" completado.
- 3 tickets de salida con contenido.
- Likert n5conf marcado.
**Insignia:** Estratega de datos.
---
## 6. SISTEMA DE PREGUNTAS CERRADAS (CQ)
**Estructura HTML obligatoria por pregunta:**
```html
<div class="cq" data-qid="UNIQUE_ID" data-label="Descripción para el reporte">
<p class="q"><b>N.</b> Texto de la pregunta</p>
<div class="opts">
<button class="opt" data-correct="1" onclick="answerCQ(this)">Opción correcta</button>
<button class="opt" onclick="answerCQ(this)">Distractor 1</button>
<button class="opt" onclick="answerCQ(this)">Distractor 2</button>
</div>
<div class="cq-fb" data-fund="Explicación pedagógica del fundamento."></div>
</div>
```
**Comportamiento:**
- Al hacer clic, `answerCQ(btn)` marca visualmente la opción (verde/rojo), muestra el fundamento en `.cq-fb`, guarda en `state.answers[qid]` y otorga XP si es la primera vez correcta.
- Reintentable sin penalización.
---
## 7. SISTEMA DE REPORTE Y ENTREGA
**Pestaña "📄 Reporte":**
- **Callout de instrucciones de entrega UTP+Class** con borde izquierdo rojo (`--alert`).
- **Opción A (PDF):** Botón grande "🖨️ Imprimir en PDF". Al hacer clic, ejecuta `generatePDF()` que:
1. Llama a `renderPrintReport()` para poblar `#printReport` con HTML limpio.
2. Llama `window.print()` después de 350ms.
3. El usuario selecciona "Guardar como PDF" en el diálogo del navegador.
- **Opción B (Markdown):** Botón grande "⬇️ Descargar en Markdown (.md)". Genera blob con `buildReportMd()` y dispara descarga.
- Vista previa del Markdown en textarea readonly.
- Botones secundarios: Actualizar vista previa, Copiar contenido.
- Callout explicando qué incluye el reporte.
**`#printReport`:** Div oculto en pantalla (`display:none`), visible solo en `@media print`. Contiene versión limpia del reporte con tablas, participantes, respuestas, ficha y declaración de IA.
---
## 8. REGLAS DE IMPLEMENTACIÓN (PARA IA DESARROLLADORA)
1. **NUNCA uses librerías externas.** Todo el CSS y JS debe estar inline en el HTML.
2. **NUNCA generes falsos positivos visuales.** Si un elemento del juego no evalúa algo, no lo pintes como si lo hiciera. La leyenda debe decir exactamente lo que el código hace.
3. **El estado debe ser serializable.** Todo lo que importa para el reporte debe estar en `state`.
4. **Las funciones de física deben ser deterministas.** La gravedad, fricción y rebotes deben comportarse igual en cada ejecución. No uses `Math.random()` para resultados pedagógicos (sí para posiciones iniciales de asteroides).
5. **Todas las interacciones táctiles deben tener fallback.** `touchstart`/`touchend` para móviles, `mousedown`/`mouseup` para desktop.
6. **El checklist de progreso debe actualizarse en tiempo real.** Cada `answerCQ`, `setLikert` y `collectFields` debe llamar a `updateN1Checklist()`.
7. **Los mensajes de error de `completeLevel` deben listar TODOS los pendientes**, no solo el primero, y hacer `scrollIntoView` al mensaje.
8. **La impresión debe ocultar TODO excepto `#printReport`.** Usar `!important` en `@media print` si es necesario.
9. **La paleta de colores es INMUTABLE.** No inventes nuevos colores; usa las variables CSS definidas.
10. **Cada nivel debe tener `.interp` (interpretación docente)** y `.evi` (evidencia sugerida) al final.
---
## 9. MENSAJE CLAVE DEL RECURSO
> "No existe una única herramienta ideal para todas las organizaciones. La elección de una herramienta de BI es una decisión estratégica que depende de la necesidad de negocio, los usuarios, los datos disponibles, el presupuesto y la capacidad técnica del equipo."
Cada actividad interactiva debe reforzar este mensaje, no contradecirlo.
Comentarios
Publicar un comentario