Cómo crear una hoja de cálculo avanzada de ingresos y gastos en Excel con ayuda de ChatGPT y mostrarla en un dashboard HTML con Bootstrap
La inteligencia artificial no sustituye el aprendizaje de Excel: lo acelera. Para alumnos de más de 45 años, esta combinación es especialmente útil porque permite construir herramientas prácticas sin empezar desde cero y, al mismo tiempo, entender mejor la lógica de una hoja de cálculo bien diseñada.
En este proyecto vamos a crear un libro de Excel avanzado para controlar ingresos y gastos del hogar, usar ChatGPT para generar la estructura, las fórmulas y el código, y terminar mostrando los resultados en un dashboard HTML con Bootstrap. Además, ese mismo panel tendrá un botón para descargar el archivo Excel.
Qué se va a aprender
Al terminar este ejercicio, el alumnado sabrá:
- Diseñar una hoja de control financiero doméstico en Excel.
- Pedir a ChatGPT instrucciones útiles y precisas.
- Crear listas desplegables y validaciones de datos.
- Usar fórmulas de resumen para ingresos, gastos y ahorro.
- Exportar resultados a un panel visual en HTML.
- Añadir un botón de descarga del archivo Excel desde la web.
Material necesario
- Excel 365, Excel 2021 o una versión equivalente.
- ChatGPT para pedir estructura, fórmulas y código.
- Un editor de texto sencillo como Bloc de notas o Visual Studio Code.
- Un navegador web.
Objetivo del proyecto
Crear una carpeta con estos tres archivos:
proyecto-finanzas/
├── ingresos_gastos_avanzado.xlsx
├── resumen_mensual.csv
└── dashboard.html
El archivo Excel servirá para introducir y organizar la información. El archivo CSV contendrá un resumen mensual exportado desde Excel. El archivo HTML mostrará un panel visual con Bootstrap y permitirá descargar el Excel original.
Paso 1. Pedir a ChatGPT la estructura del libro de Excel
Antes de abrir Excel, conviene pedir a ChatGPT que proponga una estructura clara. Un buen prompt sería este:
Actúa como experto en Excel y finanzas domésticas. Diseña un libro avanzado de ingresos y gastos del hogar con 4 hojas: Movimientos, Categorías, Presupuesto y Resumen. Indica qué columnas debe tener cada hoja, qué listas desplegables debo usar y qué fórmulas necesito para calcular ingresos, gastos, ahorro y desviación frente al presupuesto.
Con una petición como esta, ChatGPT puede devolver una propuesta muy útil. La estructura recomendada para este ejercicio es la siguiente.
Hoja 1: Movimientos
Aquí se introduce cada operación del hogar.
Columnas recomendadas:
- Fecha
- Tipo
- Categoría
- Subcategoría
- Descripción
- Importe
- Medio de pago
- Fijo o variable
- Mes
- Año
- Observaciones
Hoja 2: Categorías
Aquí estarán las listas que alimentarán los desplegables.
Ejemplos:
- Tipos: Ingreso, Gasto
- Categorías: Vivienda, Alimentación, Transporte, Salud, Ocio, Suministros, Seguros, Nómina, Pensiones, Otros
- Medios de pago: Efectivo, Tarjeta, Transferencia, Bizum, Domiciliación
- Naturaleza: Fijo, Variable
Hoja 3: Presupuesto
Esta hoja sirve para marcar cuánto se espera gastar o ingresar por categoría.
Columnas:
- Mes
- Categoría
- Presupuesto
- Gasto real
- Diferencia
Hoja 4: Resumen
Será la hoja de análisis.
Campos sugeridos:
- Total ingresos
- Total gastos
- Ahorro neto
- Porcentaje de ahorro
- Gasto por categoría
- Comparativa presupuesto vs gasto real
Paso 2. Crear el libro en Excel
Ahora toca montar el archivo manualmente.
- Crear un nuevo libro en Excel.
- Renombrar las hojas como Movimientos, Categorías, Presupuesto y Resumen.
- Copiar en cada hoja la estructura definida.
- Guardar el archivo con el nombre ingresos_gastos_avanzado.xlsx.
Paso 3. Convertir los rangos en tablas
Uno de los mejores hábitos en Excel es convertir los datos en tablas. Así las fórmulas son más limpias y las ampliaciones futuras son mucho más cómodas.
En la hoja Movimientos:
- Seleccionar todas las columnas con encabezados.
- Ir a Insertar > Tabla.
- Marcar la opción La tabla tiene encabezados.
- Asignar un nombre a la tabla, por ejemplo:
tblMovimientos.
En la hoja Presupuesto:
- Repetir el mismo proceso y nombrarla como
tblPresupuesto.
Paso 4. Crear listas desplegables
Para que el alumnado no escriba categorías distintas para lo mismo, conviene usar validación de datos.
En la hoja Categorías
Crear varias listas verticales, por ejemplo:
A1: Tipo
A2: Ingreso
A3: Gasto
C1: Categoría
C2: Vivienda
C3: Alimentación
C4: Transporte
C5: Salud
C6: Ocio
C7: Suministros
C8: Seguros
C9: Nómina
C10: Pensiones
C11: Otros
E1: MedioPago
E2: Efectivo
E3: Tarjeta
E4: Transferencia
E5: Bizum
E6: Domiciliación
G1: Naturaleza
G2: Fijo
G3: Variable
En la hoja Movimientos
Aplicar validación de datos en las columnas:
- Tipo → lista de tipos.
- Categoría → lista de categorías.
- Medio de pago → lista correspondiente.
- Fijo o variable → lista correspondiente.
Un prompt útil para ChatGPT sería:
Explícame paso a paso cómo crear listas desplegables en Excel para las columnas Tipo, Categoría, Medio de pago y Fijo o variable usando una hoja auxiliar llamada Categorías.
Paso 5. Añadir columnas calculadas
Para facilitar los resúmenes, conviene que Excel calcule automáticamente el mes y el año a partir de la fecha.
Fórmula para Mes
Si la columna Fecha está en A2, una fórmula sencilla sería:
=TEXTO([@Fecha];"mmmm")
Fórmula para Año
=AÑO([@Fecha])
Con esto, cada nuevo registro tendrá ya identificado el mes y el año sin escribirlos a mano.
Paso 6. Crear los cálculos principales en la hoja Resumen
Aquí es donde el archivo pasa de ser una simple tabla a convertirse en una herramienta útil.
Total de ingresos
=SUMAR.SI.CONJUNTO(tblMovimientos[Importe];tblMovimientos[Tipo];"Ingreso")
Total de gastos
=SUMAR.SI.CONJUNTO(tblMovimientos[Importe];tblMovimientos[Tipo];"Gasto")
Ahorro neto
=B2-B3
Suponiendo que B2 contiene ingresos y B3 gastos.
Porcentaje de ahorro
=SI.ERROR(B4/B2;0)
Gasto por categoría
Si en la celda A10 está escrita una categoría, por ejemplo Vivienda:
=SUMAR.SI.CONJUNTO(tblMovimientos[Importe];tblMovimientos[Tipo];"Gasto";tblMovimientos[Categoría];A10)
Gasto de un mes concreto
Si en F1 está el mes a analizar:
=SUMAR.SI.CONJUNTO(tblMovimientos[Importe];tblMovimientos[Tipo];"Gasto";tblMovimientos[Mes];F1)
Un prompt muy práctico sería este:
Genera las fórmulas de Excel en español para calcular total de ingresos, total de gastos, ahorro neto, porcentaje de ahorro y gasto por categoría usando una tabla llamada tblMovimientos.
Paso 7. Comparar presupuesto contra gasto real
En la hoja Presupuesto, añadir estas fórmulas.
Gasto real
=SUMAR.SI.CONJUNTO(tblMovimientos[Importe];tblMovimientos[Tipo];"Gasto";tblMovimientos[Categoría];[@Categoría];tblMovimientos[Mes];[@Mes])
Diferencia
=[@Presupuesto]-[@[Gasto real]]
Interpretación:
- Si la diferencia es positiva, se ha gastado menos de lo previsto.
- Si la diferencia es negativa, se ha superado el presupuesto.
Aquí ya conviene aplicar formato condicional:
- Verde para resultados positivos.
- Rojo para negativos.
Prompt recomendado:
Explícame cómo aplicar formato condicional en Excel para que la columna Diferencia se vea en verde si el resultado es mayor o igual que cero y en rojo si es negativo.
Paso 8. Preparar una tabla de resumen mensual para el dashboard
El panel HTML necesita una tabla simple y limpia. Lo más cómodo es crear una pequeña tabla auxiliar en la hoja Resumen con este formato:
La fórmula de ahorro será simplemente:
=[@Ingresos]-[@Gastos]
Una vez completada esta tabla:
- Seleccionarla.
- Copiarla.
- Pegarla en una hoja nueva o guardarla como CSV.
- Guardar el archivo con el nombre resumen_mensual.csv.
Este CSV será el puente entre Excel y el dashboard web.
Paso 9. Pedir a ChatGPT el código del dashboard
Aquí entra la parte más atractiva para el alumnado: convertir números en una visualización moderna.
Prompt sugerido:
Genera un archivo dashboard.html con Bootstrap 5 que permita cargar un archivo CSV llamado resumen_mensual.csv desde el ordenador del usuario, muestre tarjetas con total ingresos, total gastos, ahorro neto y porcentaje de ahorro, dibuje un gráfico con Chart.js y añada un botón para descargar un archivo Excel llamado ingresos_gastos_avanzado.xlsx.
Paso 10. Crear el archivo dashboard.html
Copiar este código en un archivo llamado dashboard.html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard financiero del hogar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background: #f4f7fb;
}
.card-kpi {
border: none;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.hero {
border-radius: 24px;
background: linear-gradient(135deg, #0d6efd, #6610f2);
color: white;
padding: 2rem;
margin-bottom: 2rem;
}
.table-wrap {
background: white;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
padding: 1.25rem;
}
.chart-wrap {
background: white;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
padding: 1.25rem;
}
</style>
</head>
<body>
<div class="container py-4">
<div class="hero">
<div class="row align-items-center g-3">
<div class="col-lg-8">
<h1 class="display-6 fw-bold">Dashboard financiero del hogar</h1>
<p class="mb-0">Carga tu resumen mensual exportado desde Excel, analiza tus resultados y descarga el archivo original.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="ingresos_gastos_avanzado.xlsx" download class="btn btn-light btn-lg">Descargar Excel</a>
</div>
</div>
</div>
<div class="row g-3 mb-4">
<div class="col-md-6 col-lg-3">
<div class="card card-kpi p-3">
<small class="text-muted">Total ingresos</small>
<h3 id="kpiIngresos" class="mt-2">0 €</h3>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-kpi p-3">
<small class="text-muted">Total gastos</small>
<h3 id="kpiGastos" class="mt-2">0 €</h3>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-kpi p-3">
<small class="text-muted">Ahorro neto</small>
<h3 id="kpiAhorro" class="mt-2">0 €</h3>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-kpi p-3">
<small class="text-muted">% de ahorro</small>
<h3 id="kpiPorcentaje" class="mt-2">0 %</h3>
</div>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-lg-6">
<div class="chart-wrap h-100">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Cargar resumen mensual</h4>
</div>
<input type="file" id="csvFile" class="form-control" accept=".csv">
<p class="text-muted mt-3 mb-0">Selecciona el archivo <strong>resumen_mensual.csv</strong> exportado desde Excel.</p>
</div>
</div>
<div class="col-lg-6">
<div class="chart-wrap h-100">
<h4 class="mb-3">Evolución mensual</h4>
<canvas id="graficoFinanzas"></canvas>
</div>
</div>
</div>
<div class="table-wrap">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Detalle mensual</h4>
</div>
<div class="table-responsive">
<table class="table table-striped align-middle mb-0">
<thead>
<tr>
<th>Mes</th>
<th>Ingresos</th>
<th>Gastos</th>
<th>Ahorro</th>
</tr>
</thead>
<tbody id="tablaResumen"></tbody>
</table>
</div>
</div>
</div>
<script>
const formatoMoneda = (valor) => {
return new Intl.NumberFormat('es-ES', {
style: 'currency',
currency: 'EUR'
}).format(valor);
};
let grafico;
document.getElementById('csvFile').addEventListener('change', function(event) {
const archivo = event.target.files[0];
if (!archivo) return;
Papa.parse(archivo, {
header: true,
skipEmptyLines: true,
complete: function(resultado) {
const datos = resultado.data.map(fila => ({
mes: fila.Mes,
ingresos: Number(String(fila.Ingresos).replace(',', '.')) || 0,
gastos: Number(String(fila.Gastos).replace(',', '.')) || 0,
ahorro: Number(String(fila.Ahorro).replace(',', '.')) || 0
}));
actualizarDashboard(datos);
}
});
});
function actualizarDashboard(datos) {
const totalIngresos = datos.reduce((acc, item) => acc + item.ingresos, 0);
const totalGastos = datos.reduce((acc, item) => acc + item.gastos, 0);
const totalAhorro = datos.reduce((acc, item) => acc + item.ahorro, 0);
const porcentaje = totalIngresos > 0 ? (totalAhorro / totalIngresos) * 100 : 0;
document.getElementById('kpiIngresos').textContent = formatoMoneda(totalIngresos);
document.getElementById('kpiGastos').textContent = formatoMoneda(totalGastos);
document.getElementById('kpiAhorro').textContent = formatoMoneda(totalAhorro);
document.getElementById('kpiPorcentaje').textContent = porcentaje.toFixed(2) + ' %';
const cuerpoTabla = document.getElementById('tablaResumen');
cuerpoTabla.innerHTML = '';
datos.forEach(item => {
const fila = `
<tr>
<td>${item.mes}</td>
<td>${formatoMoneda(item.ingresos)}</td>
<td>${formatoMoneda(item.gastos)}</td>
<td>${formatoMoneda(item.ahorro)}</td>
</tr>
`;
cuerpoTabla.innerHTML += fila;
});
const meses = datos.map(item => item.mes);
const ingresos = datos.map(item => item.ingresos);
const gastos = datos.map(item => item.gastos);
const ahorro = datos.map(item => item.ahorro);
const ctx = document.getElementById('graficoFinanzas').getContext('2d');
if (grafico) {
grafico.destroy();
}
grafico = new Chart(ctx, {
type: 'bar',
data: {
labels: meses,
datasets: [
{
label: 'Ingresos',
data: ingresos
},
{
label: 'Gastos',
data: gastos
},
{
label: 'Ahorro',
data: ahorro,
type: 'line'
}
]
},
options: {
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</body>
</html>
Paso 11. Preparar la carpeta del proyecto
Guardar juntos estos archivos:
ingresos_gastos_avanzado.xlsxresumen_mensual.csvdashboard.html
Cuando se abra el archivo HTML en el navegador:
- Se pulsa en Seleccionar archivo.
- Se carga
resumen_mensual.csv. - Aparecen los indicadores y el gráfico.
- El botón Descargar Excel permite acceder al libro original.
Paso 12. Mejoras que se pueden pedir a ChatGPT
Una vez terminado el ejercicio base, el alumnado puede seguir creciendo con nuevas peticiones. Por ejemplo:
Añade al dashboard un filtro por mes.
Genera una segunda gráfica para comparar presupuesto y gasto real.
Convierte el diseño del dashboard en un estilo más moderno con Bootstrap.
Haz que el archivo muestre en rojo los meses con ahorro negativo.
Propón una macro o una automatización para exportar la tabla Resumen a CSV más rápidamente.
Consejos didácticos para alumnos de más de 45 años
- Empezar por una versión sencilla antes de complicar el modelo.
- Guardar siempre una copia del archivo antes de aplicar cambios.
- Probar una sola mejora cada vez.
- Pedir a ChatGPT instrucciones concretas, no preguntas demasiado amplias.
- Revisar las fórmulas generadas por la IA antes de darlas por definitivas.
Errores comunes
1. Las fórmulas no funcionan
Suele ocurrir porque el separador de argumentos cambia según la configuración regional. En muchas versiones en español se usa punto y coma ;.
2. El desplegable no aparece
Normalmente se debe a que la validación de datos apunta a un rango incorrecto.
3. El dashboard no muestra datos
Casi siempre ocurre porque el CSV no tiene exactamente estos encabezados:
- Mes
- Ingresos
- Gastos
- Ahorro
4. El botón de descarga no encuentra el Excel
Eso significa que el archivo ingresos_gastos_avanzado.xlsx no está en la misma carpeta que dashboard.html.
Conclusión
Este ejercicio permite enseñar algo mucho más valioso que una simple tabla de gastos. Enseña a pensar un flujo completo de automatización: diseñar datos, estructurarlos bien, analizarlos con fórmulas y convertirlos en una presentación visual clara. Y, además, muestra al alumnado que la inteligencia artificial puede ser una gran aliada cuando se usa con criterio.
Excel aporta el orden, ChatGPT acelera el trabajo y Bootstrap da una capa visual moderna y fácil de compartir. Esa combinación es ideal para aprender a automatizar tareas reales con herramientas que ya forman parte del entorno profesional y educativo actual.
Toni Domenech