¿Se puede construir una aplicación web de verdad en una tarde, sin saber programar? En el Sustainability Lab de Agüita House lo comprobamos: montamos Agüita Surf Track, un panel en vivo del estado del océano en La Cícer —la playa de Las Palmas— con sus mareas, su viento y sus olas. La herramienta secreta no fue años de estudio, sino leer, copiar unos pocos prompts en Claude Code y ver la app cobrar vida en el navegador.

Qué construimos

Un dashboard de condiciones oceánicas con tres piezas que se actualizan solas:

Condiciones actuales en tres tarjetas: la marea en metros, el viento con una flecha que rota según su dirección, y las olas descritas en palabras (no solo números).
Un selector de días —Hoy, Vie, Sáb, Dom— que cambia todo el panel de golpe.
Una gráfica de mareas dibujada a mano sobre un <canvas>, sin librerías, y una tabla por horas con 24 filas en las que la hora actual brilla.

Todo a partir de datos reales y gratuitos de Open-Meteo, sin frameworks, sin paso de compilación y sin dependencias: tres simples archivos.

El kit de herramientas (todo gratis)

Antes de tocar nada, montamos un entorno de trabajo con tres herramientas libres y entendimos qué es cada una:

VS Code — el editor donde viven los archivos.
El terminal — esa consola de texto que asusta al principio y que, con seis comandos, acaba siendo tu mejor amiga.
Python 3 — que aquí usamos solo para levantar un servidor web local.
Claude Code — un programador experto sentado a tu lado: tú hablas en lenguaje claro, él escribe el código.

La regla de oro que repetimos toda la tarde: sé específico al pedir las cosas. Un buen prompt es media app.

Anatomía de una web app

Antes de construir, entendimos las tres piezas de cualquier página:

index.html — la estructura (el esqueleto y el contenido).
styles.css — el aspecto (colores, tipografías, disposición).
app.js — el comportamiento (pide los datos y los muestra).

Y un concepto nuevo para casi todos: una API es una forma de pedirle datos a otro servicio. La nuestra, Open-Meteo, nos devuelve el estado del mar y del tiempo a cambio de una simple petición.

Construirla, paso a paso

La parte central del taller fueron diez pasos, cada uno con su prompt:

Crear el proyecto — una carpeta, tres archivos vacíos y un servidor local de Python en localhost:8000. La app ya existe; está en blanco.
Abrir el proyecto con Claude Code — dejar que lea el proyecto desde dentro y escriba el primer "¡Hola, océano!".
La estructura HTML — un prompt grande genera el esqueleto completo: cabecera, barra de estado, tres tarjetas, botones de día, el lienzo de la gráfica, la tabla y el pie. De paso, descubrimos qué es el DOM y por qué importan los id.
El estilo: tema oscuro océano — variables CSS, degradados y una rejilla responsive convierten el esqueleto en un panel oscuro que brilla. Cambiar el color de acento es… un solo prompt.
Las fuentes de datos — definimos de dónde vienen los datos (Open-Meteo) y los pedimos en cuanto carga la página. Aquí entran fetch, JSON y async/await, y cargamos los dos feeds en paralelo con Promise.all.
Unir los dos feeds — los datos marinos y los meteorológicos llegan por separado; mergeData() los combina en una única lista hora a hora, con la ayuda de un Map.
Las tarjetas de condiciones actuales — renderCurrent() busca la hora más cercana a "ahora" y escribe los valores reales en la página: nuestra primera manipulación del DOM de verdad.
El selector de día — renderDayNav() y renderDay() nos enseñaron qué son los eventos, el estado (activeDay) y cómo un clic vuelve a dibujar la página.
La gráfica de mareas en un canvas — drawTideChart() dibuja la curva píxel a píxel: líneas de rejilla, ejes, un relleno con degradado y un punto para el "ahora". Aparecieron el canvas, su contexto 2D y el devicePixelRatio.
La tabla por horas — renderTable() con template strings, 24 filas por día y la hora actual resaltada. ¡App terminada! 🎉

Hazla tuya

El taller no acaba con la app funcionando, sino con la idea de que es tuya y puedes estirarla:

Tu playa, tus colores, nuevos datos: apunta la app a cualquier playa del mundo cambiando la constante LOCATION, repíntala con las variables CSS y añade, por ejemplo, una tarjeta de índice UV con un nuevo campo de Open-Meteo. Tres prompts, tres superpoderes.
Cuando algo se rompe: ¿pantalla en blanco? ¿Failed to fetch? ¿el punto gris no se va nunca? Cada fallo tiene su prompt que lo arregla. La regla de oro para depurar: pega el mensaje de error completo a Claude.
Publícala en internet: como son tres archivos estáticos, se sube gratis en un minuto con Netlify Drop, GitHub Pages o Vercel.

Lo que nos llevamos

La gran lección de Agüita Surf Track no es técnica: es que la barrera de entrada para crear software se ha desplomado. Con un asistente como Claude Code, personas sin experiencia previa pasan de una carpeta vacía a una aplicación real y publicada en un par de horas —entendiendo, además, qué hace cada pieza—. Y lo hacen construyendo algo útil y propio del territorio: el estado del mar en la playa de casa.

Agüita Surf Track nació en el Sustainability Lab de Agüita House, en Las Palmas de Gran Canaria. ¿Te apetece construir la tuya? Hablemos.