Actividad 4 – Mini-Proyecto Integrador con IA

Mini-Proyecto Integrador con IA (Tarea en Casa)

Objetivo del ejercicio:
Aplicar de manera sencilla lo aprendido en la creación de aplicaciones con IA, generando tres productos básicos: una mini-calculadora, una landing con un KPI y un gráfico, y un pequeño
dashboard con datos de ejemplo.

📝 Instrucciones:
1. Abre ChatGPT o Gemini y prepara tres prompts (uno por cada producto).
2. Copia cada uno en el asistente y guarda los resultados como tres archivos:
mini_calculadora.html, mini_landing.html y mini_dashboard.html.
🔑 Prompt 1 — Mini Calculadora
Genera un archivo mini_calculadora.html con HTML, CSS y JS embebido que:
- Tenga dos inputs: monto y tasa %.
- Al hacer clic en “Calcular”, muestre el interés anual (monto * tasa/100).
- Incluya botón “Limpiar”.
- Diseño simple, responsive y con comentarios en el código.
🔑 Prompt 2 — Mini Landing Page
Genera un archivo mini_landing.html con HTML, CSS y JS embebido que:
- Muestre un título: “Ventas 2025”.
- Incluya un KPI destacado (ej: Ventas: $12,500).
- Cree un gráfico de barras con Chart.js mostrando 6 meses de ventas
ficticias.
- Diseño simple y responsive.
🔑 Prompt 3 — Mini Dashboard
Genera un archivo mini_dashboard.html con HTML, CSS y JS embebido que:
- Use un dataset embebido en JSON con al menos 10 registros (fecha,
producto, importe).
- Calcule y muestre: total vendido y número de registros.
- Grafique con Plotly:
- Serie temporal de importe por fecha.
- Diseño básico y responsive.
3. Abre los tres archivos en tu navegador y verifica que funcionen.
4. Realiza una breve nota (media página) donde expliques:
○ Qué tan fácil fue generar y adaptar los tres archivos.
○ Qué utilidad tendría este mini-proyecto en un contexto académico o laboral.
🤔 Reflexiona:
● ¿Cuál de los tres productos fue más sencillo de generar?
● ¿Qué diferencias notaste entre usar IA y programar manualmente?
● ¿Cómo podrías mejorar cada archivo si tuvieras más tiempo?
📌 Resultado esperado:
● Tres archivos HTML (mini_calculadora.html, mini_landing.html,
mini_dashboard.html) con funcionalidades básicas.
● Una breve reflexión escrita (máximo una página) sobre la experiencia de integración.