Météo Climat France
358 pagine indicizzabili, una mappa animata su 72 scadenze e nemmeno una riga di framework.
- Anno
- 2026
- Progettazione
- 6 settimane
- Stack
- JavaScript · MapLibre · HTML/CSS · Vercel
- Architettura dell'informazione
- Design dell'interfaccia
- Sviluppo
- Cartografia
- SEO programmatica
- Redazione scientifica
Prodotto sviluppato da KAYZEN, servito su un indirizzo di anteprima Vercel in attesa del dominio definitivo.
- pagine indicizzabili180 comuni · 141 schede clima · 16 spiegazioni · 12 mappe
- 358
- punti di griglia interpolati
- 247
- scadenze orarie animate
- 72
- chiavi API cartograficheMapLibre e base IGN in self-hosting
- 0
Cosa c'era da risolvere.
Il contesto
Météo Climat France è un servizio meteo nazionale gratuito sviluppato da KAYZEN. Copre tre usi distinti con la stessa base di dati: il meteo di tutti i giorni (ora per ora su 48 ore, tendenza a 10 giorni), la climatologia (valori normali e record per stazione) e il meteo agricolo (temperatura e umidità del suolo, ET0, bilancio idrico, gradi-giorno, condizioni per i trattamenti).
Il vincolo
Tre vincoli erano in contrasto. Il servizio doveva mostrare una mappa animata della Francia su 72 scadenze orarie, quindi calcoli pesanti nel browser. Doveva restare consultabile su uno smartphone a bordo campo, spesso in 3G. E doveva esistere su Google per ricerche iperlocali del tipo «météo Vénissieux 69200», terreno occupato da operatori presenti da vent'anni.
La risposta
Abbiamo rifiutato il riflesso del framework. Il sito è scritto in JavaScript nativo, suddiviso in undici moduli caricati su richiesta, con MapLibre in self-hosting per la cartografia. Il budget risparmiato sul runtime è stato reinvestito dove conta: l'interpolazione dei 247 punti di griglia, il pre-rendering delle 358 pagine e la cura del vocabolario agronomico.
Ogni scelta di design, e il suo perché.
La mappa come home
La prima schermata non è un modulo di ricerca ma la mappa della Francia già disegnata, all'ora corrente. Il visitatore vede la risposta prima di aver fatto qualcosa. La ricerca per comune o codice postale resta disponibile subito sotto, e il tasto «/» vi riporta il focus da qualunque punto.
Una scala di colori per grandezza
Temperatura, precipitazioni, vento, nuvolosità, pressione, umidità, temporali e UV hanno ciascuno la sua rampa, con limiti e legenda. Nessuna usa da sola la sfumatura rosso-verde: la deuteranopia riguarda il 6% degli uomini, e per loro una mappa meteo con colori scelti male diventa illeggibile.
Un cursore temporale utilizzabile da tastiera
Frecce sinistra/destra per cambiare ora, Maiusc + frecce per cambiare giorno, Spazio per avviare l'animazione, Home per tornare all'ora attuale. Le scorciatoie sono scritte sotto il cursore, non nascoste in una guida.
Una descrizione a parole
Sotto la mappa, un link «Descrizione della mappa a parole» restituisce in testo ciò che la mappa mostra. È indispensabile per uno screen reader e, di riflesso, leggibile dai motori di ricerca: per loro una mappa canvas è un'immagine vuota.
Tipografia unica, in self-hosting
Nunito in variable font servito dal dominio del sito. Nessuna richiesta a Google Fonts: un font di terze parti su un servizio consultato ogni giorno è una dipendenza di rete e un trasferimento di dati all'estero senza base giuridica.
Palette del progetto
Azzurro cielo
#2E7BB6
Struttura, link, intestazioni
Ardesia
#1F2933
Testo principale
Grano
#C9A227
Sezione agricola
Allerta
#C6413B
Soglie superate, allerta
Sistema tipografico
Titoli
Nunito 700
Testo corrente
Nunito 400
Una sola famiglia variabile, in self-hosting. Le cifre sono a spaziatura tabulare: altrimenti una temperatura che cambia fa saltare l'intera colonna di una tabella oraria.
Cosa c'è sotto il cofano.
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
JavaScript nativo, undici moduli
menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau e il vendor MapLibre. Ogni pagina carica solo ciò di cui ha bisogno: la scheda climatologica di una stazione non si porta dietro né il motore agronomico né il lettore radar.
MapLibre in self-hosting invece di Mapbox
Nessuna chiave API, nessuna fatturazione a visualizzazione, nessuna chiamata a terzi a ogni caricamento. La base cartografica viene dall'IGN, l'istituto geografico nazionale francese: un dato pubblico, coerente con un servizio che parla di comuni.
Interpolazione su una griglia di 247 punti
I modelli pubblici forniscono una griglia; l'interfaccia ha bisogno di un campo continuo. Interpolazione e rendering avvengono nel browser, in un solo passaggio per scadenza, con cache delle 72 scadenze: l'animazione resta fluida senza richiamare l'API.
Le route /api/ vietate ai robot
Il robots.txt esclude /api/. Senza questa regola, ogni scansione di un crawler consumerebbe la quota Open-Meteo per niente, e una quota esaurita significa un servizio non disponibile per i visitatori reali.
Funzioni dati lato server
Le chiamate ai modelli passano per funzioni server che normalizzano, mettono in cache e delimitano le risposte. Il browser non parla mai direttamente con il fornitore: il giorno in cui si cambia fonte, l'interfaccia non si muove.
Come il sito si fa trovare.
358 URL, quattro template
180 schede comunali (/meteo/lyon-69001), 141 schede climatologiche (/climat/…), 16 pagine esplicative (/comprendre/…) e 12 pagine di mappe tematiche (/cartes/radar…). Ogni template risponde a un'intenzione diversa; nessuna pagina è una variante cosmetica di un'altra.
Contenuti propri di ogni comune
La SEO programmatica fallisce quando duplica. Ogni scheda comunale riporta coordinate, altitudine, valori normali della stazione di riferimento e record: valori che cambiano davvero da una città all'altra.
Tre blocchi di dati strutturati
WebApplication (categoria meteo, gratuità dichiarata), WebSite con SearchAction che punta alla vera ricerca interna, e FAQPage alimentata dalle domande effettivamente trattate nella pagina.
Collegamenti interni che hanno senso
Il footer collega le sedici città più grandi; ogni scheda rimanda alla sua pagina climatologica, alle sue mappe e al glossario. I collegamenti seguono il percorso di lettura, non sono un tappeto di link.
Sitemap e canonical coerenti
Un solo canonical per pagina, una sitemap che elenca esattamente i 358 URL serviti. Un URL assente dalla sitemap non viene esplorato; un URL della sitemap senza pagina è un soft 404 che degrada tutto il dominio.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
Una mappa che esiste anche senza la vista
La descrizione testuale della mappa non è un attributo alt: è un contenuto generato, aggiornato alla scadenza mostrata, raggiungibile da tastiera e leggibile da una sintesi vocale.
Tutto da tastiera
Cambio di livello, di comune, di scadenza, avvio dell'animazione: nessuna interazione richiede il mouse. Le scorciatoie sono documentate sullo schermo.
Rampe di colore testate con visione alterata
Ogni rampa è stata simulata in protanopia, deuteranopia e tritanopia. I valori restano distinguibili, e la legenda riporta sempre i limiti numerici.
Cosa è stato consegnato.
- Home — mappa animata e ricerca
- /meteo/<comune>-<codice postale> — 180 schede comunali
- /climat/<stazione> — 141 schede di valori normali e record
- /cartes/<livello> — radar, satellite IR e visibile, fulmini, UV…
- /meteo-agricole — suoli, ET0, bilancio idrico, trattamenti
- /comprendre — 16 schede didattiche e glossario
- /lune, /contact, note legali, privacy, condizioni d'uso e di vendita, accessibilità
Lo svolgimento del progetto.
Modello di dati
Scelta delle fonti pubbliche (Open-Meteo, IGN), normalizzazione delle grandezze, quote.
Cartografia
Griglia, interpolazione, rampe di colore, cursore temporale.
Sezione agricola
ET0 FAO-56, bilancio P − ET0, gradi-giorno, Delta T, soglia Beaufort 3.
SEO programmatica
Quattro template, generazione delle 358 pagine, sitemap, collegamenti interni.
Conformità
Note legali, avvertenza normativa sui fitosanitari, accessibilità, GDPR.
Cosa ci chiedono spesso.
Altri lavori
Cybersicurezza e app multipiattaformaSésame
Un password manager che non può leggere le tue password: la prova era l'architettura.
Cybersicurezza e app webSésame Éclair
Un segreto, una lettura, zero tracce: la chiave non lascia mai il link, il server conserva solo un blocco illeggibile.
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.