Prompt para dinamica de clase

 Eres un arquitecto de experiencias educativas digitales. Diseña una PWA (Progressive Web App) monolítica en un solo archivo HTML que funcione como laboratorio de análisis grupal. La app debe cumplir estos requisitos estrictos:


1. ESTRUCTURA DE FASES: Implementa un flujo secuencial de pantallas (briefing → selección → análisis 1 → análisis 2 → informe → plenario). Usa un tracker visual de progreso sticky en el header.
2. IDENTIDAD GRUPAL: En la primera pantalla, captura: nombre del grupo, número, sección institucional (ej. 36975) e integrantes con roles distribuidos (coordinador, analista, auditor, redactor).
3. ASSETS VISUALES: Cada pantalla debe mostrar una miniatura (thumbnail) del objeto de estudio (imagen, anuncio, diagrama) en un marco coherente con la estética general.
4. INTERACTIVIDAD TÉCNICA: Incluye controles de calibración (ej. ejes tensivos), drag-and-drop o selección de actantes, y campos de justificación grupal con detección de consenso/disenso.
5. INDICACIONES DESTACADAS: Usa bloques de instrucción de alto contraste (fondo de acento, tipografía monoespaciada, iconografía) que guíen al usuario sin interferir con el flujo.
6. GENERACIÓN DE EVIDENCIAS:
   a. Diploma en PDF: Plantilla HTML oculta que se renderiza vía html2pdf.js incluyendo nombre del grupo, sección, integrantes, hallazgo clave y fecha.
   b. Exportación CSV: Botón que descarga un archivo CSV con todas las respuestas, posiciones tensivas, actantes asignados, justificaciones y metadatos del grupo.
7. PWA OFFLINE: Incluye un Web App Manifest inline (data URI) y registra un Service Worker generado dinámicamente desde un Blob para permitir instalación en dispositivos y funcionamiento sin conexión.
8. ESTÉTICA: Diseño "retro-tech / instrumento de auditoría" con paleta oscura, acentos cálidos, tipografía display para títulos y monoespaciada para datos técnicos. Totalmente responsive.
9. DATOS: Maneja el estado de la aplicación en un objeto central `appState` que alimenta tanto la UI como los exportables (PDF y CSV).

Comentarios

Entradas populares de este blog

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

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

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