Météo Climat France
358 páginas indexables, un mapa animado sobre 72 horizontes de previsión y ni una sola línea de framework.
- Año
- 2026
- Diseño
- 6 semanas
- Stack
- JavaScript · MapLibre · HTML/CSS · Vercel
- Arquitectura de la información
- Diseño de interfaz
- Desarrollo
- Cartografía
- SEO programático
- Redacción científica
Producto editado por KAYZEN, servido en una dirección de previsualización de Vercel a la espera de su dominio definitivo.
- páginas indexables180 municipios · 141 fichas climáticas · 16 explicaciones · 12 mapas
- 358
- puntos de malla interpolados
- 247
- horizontes horarios animados
- 72
- claves de API cartográficaMapLibre y mapa base del IGN autoalojados
- 0
Lo que había que resolver.
El contexto
Météo Climat France es un servicio meteorológico nacional gratuito editado por KAYZEN. Cubre tres usos distintos con la misma base de datos: el tiempo del día a día (hora a hora durante 48 h, tendencia a 10 días), la climatología (normales y récords por estación) y la meteorología agrícola (temperatura y humedad del suelo, ET0, balance hídrico, grados-día, condiciones de pulverización).
La limitación
Tres restricciones chocaban entre sí. El servicio debía mostrar un mapa animado de Francia con 72 horizontes horarios, es decir, cálculo pesado en el navegador. Tenía que poder consultarse en un teléfono a pie de campo, a menudo con 3G. Y debía existir en Google para búsquedas ultralocales del tipo «météo Vénissieux 69200», un terreno ocupado por actores instalados desde hace veinte años.
La respuesta
Rechazamos el reflejo del framework. El sitio está escrito en JavaScript nativo, dividido en once módulos cargados bajo demanda, con MapLibre autoalojado para la cartografía. El presupuesto ahorrado en el runtime se reinvirtió donde importa: la interpolación de los 247 puntos de malla, el prerrenderizado de las 358 páginas y el cuidado del vocabulario agronómico.
Cada decisión de diseño, y su porqué.
El mapa como página de inicio
La primera pantalla no es un formulario de búsqueda, sino el mapa de Francia ya renderizado, a la hora actual. El visitante ve su respuesta antes de hacer nada. La búsqueda por municipio o código postal sigue disponible justo debajo, y la tecla «/» devuelve el foco a ella desde cualquier punto.
Una escala de colores por magnitud
Temperatura, precipitación, viento, nubes, presión, humedad, tormentas y UV tienen cada uno su rampa, acotada y con leyenda. Ninguna usa solo el degradado rojo-verde: la deuteranopía afecta al 6 % de los hombres, y un mapa meteorológico mal elegido se vuelve ilegible para ellos.
Un control temporal manejable con teclado
Flechas izquierda/derecha para cambiar de hora, Mayús + flechas para cambiar de día, Espacio para iniciar la animación, Inicio para volver al momento actual. Los atajos están escritos bajo el control, no escondidos en una ayuda.
Una descripción en palabras
Bajo el mapa, un enlace «Descripción del mapa en texto» restituye en palabras lo que muestra el mapa. Es imprescindible para un lector de pantalla y, de paso, legible para los buscadores: para ellos, un mapa en canvas es una imagen vacía.
Tipografía única y autoalojada
Nunito como variable font servida desde el dominio del sitio. Ninguna petición a Google Fonts: una tipografía de terceros en un servicio consultado a diario es una dependencia de red y una transferencia de datos al extranjero sin base jurídica.
Paleta del proyecto
Azul cielo
#2E7BB6
Estructura, enlaces, cabeceras
Pizarra
#1F2933
Texto principal
Trigo
#C9A227
Sección agrícola
Alerta
#C6413B
Umbrales superados, avisos
Sistema tipográfico
Titulares
Nunito 700
Texto de lectura
Nunito 400
Una sola familia variable, autoalojada. Las cifras usan anchura tabular: sin ello, una temperatura que cambia hace saltar toda la columna de una tabla horaria.
Lo que hay bajo el capó.
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
JavaScript nativo, once módulos
menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau y el vendor de MapLibre. Cada página solo carga lo que necesita: la ficha climatológica de una estación no incluye ni el motor agronómico ni el lector de radar.
MapLibre autoalojado en lugar de Mapbox
Sin clave de API, sin facturación por visualización, sin llamadas a un tercero en cada carga. El mapa base procede del IGN (el instituto geográfico nacional francés): dato público francés, coherente con un servicio que habla de municipios.
Interpolación sobre una malla de 247 puntos
Los modelos públicos proporcionan una rejilla; la interfaz necesita un campo continuo. La interpolación y el renderizado se hacen en el navegador, en una pasada por horizonte, con caché de los 72 horizontes: la animación sigue siendo fluida sin volver a llamar a la API.
Las rutas /api/, vetadas a los robots
El robots.txt excluye /api/. Sin ello, cada exploración de un rastreador consumiría la cuota de Open-Meteo para nada, y una cuota agotada significa un servicio no disponible para los visitantes reales.
Funciones de datos en el servidor
Las llamadas a los modelos pasan por funciones de servidor que normalizan, almacenan en caché y acotan las respuestas. El navegador nunca habla directamente con el proveedor: el día que se cambie de fuente, la interfaz no se moverá.
Cómo se hace encontrar la web.
358 URL, cuatro plantillas
180 fichas municipales (/meteo/lyon-69001), 141 fichas climatológicas (/climat/…), 16 páginas explicativas (/comprendre/…) y 12 páginas de mapas temáticos (/cartes/radar…). Cada plantilla responde a una intención distinta; ninguna página es una variante cosmética de otra.
Contenido propio de cada municipio
El SEO programático fracasa cuando duplica. Cada ficha municipal lleva sus coordenadas, su altitud, las normales de su estación de referencia y sus récords: valores que realmente difieren de una ciudad a otra.
Tres bloques de datos estructurados
WebApplication (categoría meteorología, gratuidad declarada), WebSite con SearchAction que apunta al buscador interno real, y FAQPage alimentada con las preguntas realmente tratadas en la página.
Un enlazado interno con sentido
El pie de página enlaza las dieciséis ciudades más grandes; cada ficha remite a su página climatológica, sus mapas y su glosario. El enlazado sigue el recorrido de lectura; no es una alfombra de enlaces.
Sitemap y canónicas coherentes
Una sola canónica por página, un sitemap que enumera exactamente las 358 URL servidas. Una URL ausente del sitemap no se explora; una URL del sitemap sin página es un soft 404 que degrada todo el dominio.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
Un mapa que existe sin la vista
La descripción textual del mapa no es un atributo alt: es un contenido generado, actualizado al horizonte mostrado, accesible con teclado y legible por una síntesis de voz.
Todo con teclado
Cambio de capa, de municipio, de horizonte, reproducción de la animación: ninguna interacción exige el ratón. Los atajos están documentados en pantalla.
Rampas de color probadas con visión alterada
Cada rampa se simuló con protanopía, deuteranopía y tritanopía. Los valores siguen siendo distinguibles, y la leyenda siempre muestra los límites con cifras.
Lo que se entregó.
- Inicio — mapa animado y búsqueda
- /meteo/<municipio>-<código postal> — 180 fichas municipales
- /climat/<estación> — 141 fichas de normales y récords
- /cartes/<capa> — radar, satélite IR y visible, rayos, UV…
- /meteo-agricole — suelos, ET0, balance hídrico, pulverización
- /comprendre — 16 fichas didácticas y glosario
- /lune, /contact, aviso legal, privacidad, condiciones de uso y de venta, accesibilidad
El desarrollo del proyecto.
Modelo de datos
Elección de fuentes públicas (Open-Meteo, IGN), normalización de magnitudes, cuotas.
Cartografía
Malla, interpolación, rampas de color, control temporal.
Sección agrícola
ET0 FAO-56, balance P − ET0, grados-día, Delta T, umbral Beaufort 3.
SEO programático
Cuatro plantillas, generación de las 358 páginas, sitemap, enlazado.
Cumplimiento
Aviso legal, reserva reglamentaria fitosanitaria, accesibilidad, RGPD.
Lo que nos preguntan a menudo.
Otros proyectos
Ciberseguridad y aplicación multiplataformaSésame
Un gestor de contraseñas que no puede leer sus contraseñas: la prueba era la arquitectura.
Ciberseguridad y aplicación webSésame Éclair
Un secreto, una lectura, cero rastro: la clave nunca sale del enlace y el servidor solo guarda un bloque ilegible.
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.