En la fase anterior creaste un sitio web con información sobre las principales instalaciones de una vivienda: electricidad, fontanería, climatización, gas, domótica y otras. Ahora toca darle valor real a esa web añadiendo una calculadora de presupuestos para que los clientes puedan estimar el coste de los trabajos de instalación o reforma.
La clave de esta actividad es que vas a utilizar una herramienta de IA generativa (ChatGPT, Claude, Copilot…) para que te ayude a programar la calculadora. Para ello, deberás aprender a construir un prompt eficaz: un texto de instrucciones claro y detallado que le indique a la IA exactamente qué necesitas.
💡 Recuerda: la IA es una herramienta de apoyo, no hace el trabajo por ti. Deberás entender el código que te genere, probarlo, corregir errores y adaptarlo a tu web.
La calculadora se integrará en tu web como una nueva sección o página. El usuario podrá:
Electricidad, fontanería, climatización, gas, domótica, etc. (al menos 4 tipos de tu web).
Horas de mano de obra, materiales principales con precio unitario y cantidad, desplazamiento, porcentaje de beneficio industrial y cualquier otro componente relevante para ese tipo de instalación.
La calculadora mostrará el coste de mano de obra, el coste de materiales, subtotal, IVA (21 %) y total final, con un diseño limpio que el cliente pueda entender fácilmente.
Botón para imprimir la página o generar un documento con los datos del presupuesto.
Antes de copiar y pegar cualquier código, debes construir un prompt de calidad. Un buen prompt describe el contexto, define qué quieres, especifica cómo debe ser el resultado y da ejemplos si es necesario.
A continuación tienes una estructura guía. Completa las partes en cursiva con la información de tu propio proyecto:
## ROL Y CONTEXTO
Eres un programador web experto en HTML, CSS y JavaScript vanilla (sin frameworks).
Estoy creando una web sobre instalaciones en viviendas para la asignatura de Tecnología de 4.º ESO.
Mi web tiene secciones sobre: [lista tus secciones: electricidad, domótica, climatización, gas...].
El diseño visual de mi web usa: [describe brevemente tus colores, fuentes, estilo general].
## TAREA
Crea un archivo HTML autocontenido (todo en un solo fichero: HTML + CSS + JS) con una calculadora de presupuestos de instalaciones para el cliente. Debe integrarse visualmente con el estilo de mi web.
## FUNCIONALIDADES REQUERIDAS
1. Un selector desplegable para elegir el tipo de instalación:
— [Tipo 1]: campos → horas técnico (€/h), horas oficial (€/h), materiales principales con nombre/cantidad/precio unitario (mínimo 3 filas dinámicas), desplazamiento (€), margen de beneficio (%).
— [Tipo 2]: [describe sus campos específicos].
— [repite para cada tipo de instalación].
2. Al pulsar "Calcular presupuesto" debe mostrar un desglose con: coste mano de obra, coste materiales, subtotal, IVA (21 %) y total.
3. Botón para limpiar el formulario y empezar de nuevo.
4. El presupuesto generado debe tener un aspecto profesional, con los datos de la empresa (nombre y teléfono que el usuario introduce al inicio).
## REQUISITOS TÉCNICOS
— Solo HTML, CSS y JavaScript. Sin librerías externas.
— El código debe estar comentado en español para que yo pueda entenderlo.
— Diseño responsive (funciona en móvil y escritorio).
— Colores principales: [tus colores]. Fuente: [tu fuente].
— Las filas de materiales deben ser dinámicas: el usuario puede añadir y eliminar filas.
## FORMATO DE RESPUESTA
Dame el código completo listo para guardar como presupuesto.html y abrir en el navegador. No expliques el código, solo entrégalo.
⚠️ Importante: Este prompt es un punto de partida. Probablemente necesites hacer varias rondas de ajustes. Si algo no funciona o no tiene el aspecto que quieres, vuelve a la IA describiendo exactamente el problema. Eso también forma parte de la actividad.
Antes de ir a la IA, anota en papel qué instalaciones vas a incluir y qué campos concretos necesita cada una. Esto te ayudará a escribir un prompt más preciso.
Usa la estructura guía de la sección anterior. Personalízalo con los datos de tu web. Guarda el prompt en un documento de texto.
Envía el prompt a la herramienta de IA. Lee el código resultante, pruébalo en el navegador y detecta errores o mejoras necesarias.
Pide a la IA que corrija los problemas que hayas encontrado. Documenta al menos 2 iteraciones de mejora en tu reflexión final.
Añade un enlace desde tu web principal a la nueva página de presupuestos. Asegúrate de que el diseño sea coherente con el resto.
Entrega junto al código un breve documento (máx. 1 página) explicando qué prompt usaste, qué funcionó, qué tuviste que corregir y qué aprendiste del proceso.
| Criterio | Descripción | Puntos |
|---|---|---|
| Funcionalidad de la calculadora | Calcula correctamente todos los campos (mano de obra, materiales, IVA, total). Sin errores en la lógica matemática. | 30 pts |
| Cobertura de instalaciones | Incluye al menos 4 tipos de instalación con campos específicos y adecuados para cada una. | 20 pts |
| Calidad del prompt | El prompt entregado es claro, detallado y estructurado. Incluye contexto, requisitos técnicos y de diseño. | 20 pts |
| Integración visual | La calculadora encaja estéticamente con el resto de la web. Diseño coherente y profesional. | 15 pts |
| Reflexión y proceso | El documento de reflexión muestra comprensión del código, documenta iteraciones y expresa aprendizajes concretos. | 15 pts |
🎯 Ampliación (+1 punto en la nota final): Implementa un botón que permita imprimir el presupuesto con un diseño limpio y profesional (print stylesheet), o permite exportarlo con los datos del cliente rellenados.