DATA+IA sesión 1

 Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

Transformación Data-Driven

### Propósito / Función Principal

Contexto: RetailMax es una cadena de retail con 150 tiendas físicas y operación e-commerce, con ingresos anuales de $180M. La empresa ha crecido orgánicamente durante 15 años, pero enfrenta una crisis de rentabilidad: los márgenes han caído del 22% al 12% en 3 años.  Problemas Identificados

❌ Sin segmentación

Tratan a todos los clientes igual. No saben quiénes son sus clientes más valiosos.

❌ Sin métricas

No miden churn, CLTV, ni ROMI de campañas. Solo ven ingresos totales.

❌ Datos en silos

POS, e-commerce, CRM y call center usan bases de datos separadas sin integrar.

❌ Marketing masivo

Envían el mismo catálogo a 500,000 clientes. Costo: $2.5M/año. Take rate: 1.2%.

### Público Objetivo

Empresa RetailMax es una cadena de retail

### Funcionalidades Deseadas

Diagnosticar la situación actual usando las 15 métricas de Jeffery

Diseñar la arquitectura de datos (EDW, ETL, Data Marts)

Segmentar clientes por valor (CLTV) y definir estrategias

Construir el business case financiero (NPV, IRR, Payback)

Presentar un plan de implementación de 12 meses, 🛠️ Herramientas: Excel (obligatorio), Power BI/Tableau, Python/R, draw.io/Lucidchart, y simuladores Monte Carlo

📋 Instrumentos: Scorecard de 15 métricas, calculadora CLTV, matriz de segmentación, y árbol de decisión

📦 Entregables: Plan de 4 semanas con hitos específicos

📈 Rúbrica: Evaluación por 5 dimensiones con criterios de excelencia

### Diseño y Estilo Visual

Composiciones caóticas que rompen la retícula a propósito: elementos solapados, bordes duros de 4px, colores de sistema a plena saturación, subrayados por defecto y cero sombras suaves. Busca provocar, no agradar — pero el contraste AAA se mantiene: provocación no es ilegibilidad.

ARCHIVO BLACK

Enorme, desproporcionada y utilitaria: titulares que no caben en pantalla, monoespaciada de sistema (Space Mono) para todo lo demás, como si el CSS nunca hubiera cargado.

### Interacción y Comportamiento

📥 Archivos Descargables Generados

He preparado los siguientes recursos para tus estudiantes:

Dashboard de BI - RetailMax

6 visualizaciones: Espectro CLTV, Matriz Estratégica, Pirámide de Valor, Churn vs CSAT, Canales, y Proyección ROMI

Arquitectura de Datos

Diagrama completo: Fuentes → ETL → EDW → BI → Usuarios

Herramientas Excel - RetailMax

Dataset de 500 clientes (19 variables)

Plantilla CLTV con fórmulas

Plantilla ROMI (NPV/IRR/Payback)

Scorecard de Madurez BI

Matriz de Segmentación

🔑 Elementos Clave Basados en el Libro de Jeffery

Table

Concepto del Libro Aplicación en RetailMax

Marketing Divide (Cap. 1) RetailMax es una empresa "rezagada" (<20% métricas implementadas)

15 Métricas Esenciales (Caps. 3-7) Scorecard de evaluación obligatorio

CLTV (Cap. 6, Fig. 6.1) Calculadora Excel con fórmula completa

Matriz Actual vs. Futuro (Fig. 6.6) Dashboard de segmentación estratégica

Árbol de Decisión (Cap. 9, Fig. 9.3) Event-driven marketing por interacción

ROMI (Cap. 5, Fig. 5.4) Business case con NPV/IRR/Payback

Análisis de Sensibilidad (Fig. 5.11) Tabla de datos para escenarios

Agile Marketing (Cap. 8) Quick win de 30 días como entregable

### Tecnologías y Estructura

Aquí tienes una propuesta de **prompt maestro** detallado y estructurado. Puedes copiar y pegar este texto en cualquier modelo de lenguaje (IA) o entregárselo a un equipo de desarrollo web para que te generen el código funcional completo (HTML, CSS y la lógica matemática en JavaScript) basándose en las mejores prácticas de desarrollo web.

***

### 📋 COPIAR EL SIGUIENTE PROMPT:

**Rol y Contexto:**

Actúa como un Desarrollador Web Full Stack experto en Inteligencia de Negocios (BI) y Data-Driven Marketing. Tu tarea es desarrollar una aplicación web interactiva (Single Page Application) para la empresa "RetailMax", basada en la metodología del libro de Mark Jeffery.

**Objetivo Principal:**

Crear una interfaz web responsiva que contenga un formulario interactivo para la captura de datos de clientes/campañas y que, al procesarse, genere un Dashboard dinámico con visualizaciones y tablas informativas.

**Requerimientos Técnicos:**

1. **HTML Semántico:** Utiliza etiquetas semánticas (`<header>`, `<main>`, `<section>`, `<form>`, `<fieldset>`, `<article>`) para estructurar correctamente el documento y favorecer la accesibilidad.

2. **CSS Moderno:** Emplea **CSS Grid** para estructurar el panel de las 6 visualizaciones y **Flexbox** para la alineación del formulario y las barras de navegación. El diseño debe ser responsivo (Mobile First).

3. **JavaScript:** Escribe el script necesario para capturar los datos del formulario mediante el DOM y simular la renderización de los gráficos (puedes sugerir la integración con librerías como Chart.js).

**Estructura del Contenido a Generar:**

**FASE 1: Formulario de Ingreso de Datos**

Crea un formulario interactivo para ingresar las variables necesarias que alimentarán los modelos de CLTV, Churn, CSAT y ROMI. Aplica validaciones visuales usando CSS (`:valid`, `:invalid`).

**FASE 2: Dashboard de Visualizaciones (Resultados)**

Al enviar el formulario, el sistema debe "entregar" la información estructurada en las siguientes 6 visualizaciones (crea los contenedores o *canvas* para ellas):

1. Espectro CLTV

2. Matriz Estratégica

3. Pirámide de Valor

4. Churn vs CSAT

5. Canales de Adquisición/Interacción

6. Proyección ROMI

**FASE 3: Paneles Informativos de Arquitectura y Herramientas**

Añade dos secciones informativas con diseño de tarjetas (*cards*):

*   **Arquitectura de Datos:** Muestra el diagrama de flujo: `Fuentes → ETL → EDW → BI → Usuarios`.

*   **Herramientas Excel - RetailMax:** Crea una lista estilizada que contenga:

    * Dataset de 500 clientes (19 variables)

    * Plantilla CLTV con fórmulas

    * Plantilla ROMI (NPV/IRR/Payback)

    * Scorecard de Madurez BI

    * Matriz de Segmentación

**FASE 4: Tabla de Elementos Clave**

Diseña una tabla HTML atractiva (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`) que muestre la siguiente información basada en el libro de Jeffery:

| Concepto del Libro | Aplicación en RetailMax |

| :--- | :--- |

| Marketing Divide (Cap. 1) | RetailMax es una empresa "rezagada" (<20% métricas implementadas) |

| 15 Métricas Esenciales (Caps. 3-7) | Scorecard de evaluación obligatorio |

| CLTV (Cap. 6, Fig. 6.1) | Calculadora Excel con fórmula completa |

| Matriz Actual vs. Futuro (Fig. 6.6) | Dashboard de segmentación estratégica |

| Árbol de Decisión (Cap. 9, Fig. 9.3) | Event-driven marketing por interacción |

| ROMI (Cap. 5, Fig. 5.4) | Business case con NPV/IRR/Payback |

| Análisis de Sensibilidad (Fig. 5.11)| Tabla de datos para escenarios |

| Agile Marketing (Cap. 8) | Quick win de 30 días como entregable |

**Entregable esperado:**

Proporciona el código en tres bloques separados: HTML (estructura), CSS (estilos y layout con Grid/Flexbox) y JavaScript (lógica de captura de datos y renderizado de la tabla/dashboard). Asegúrate de incluir comentarios explicativos en el código.

***

*(Nota: Como la información específica sobre RetailMax y las métricas de Mark Jeffery proviene de nuestra conversación anterior y no de mis fuentes técnicas de desarrollo web, el prompt instruye al modelo a aplicar el marco teórico del código web estándar a tu contexto de negocio particular).*

### Requisitos Adicionales

Requiero que en la pantalla principal poner el titulo del reto, el registro de los miembros de equipo o trabajo indiviudal el objetivo de la tarea o logro alcanzar, la entrega de reportes en excel en pdf y en csv

### Instrucciones Finales

Entrega toda la aplicación en un único archivo HTML listo para ejecutarse.

Usa Bootstrap 5 para lograr un diseño moderno y responsivo.

Incluye service worker y manifest.json para funcionamiento offline e instalación como PWA.

Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles.