Météo Climat France
358 páginas indexáveis, um mapa animado em 72 horizontes — e nem uma linha de framework.
- Ano
- 2026
- Conceção
- 6 semanas
- Stack
- JavaScript · MapLibre · HTML/CSS · Vercel
- Arquitetura de informação
- Design de interface
- Desenvolvimento
- Cartografia
- SEO programático
- Redação científica
Produto editado pela KAYZEN, disponível num endereço de pré-visualização Vercel enquanto aguarda o seu domínio definitivo.
- páginas indexáveis180 localidades · 141 fichas de clima · 16 explicações · 12 mapas
- 358
- pontos de malha interpolados
- 247
- horizontes horários animados
- 72
- chaves de API cartográficaMapLibre e fundo IGN alojados localmente
- 0
O que era preciso resolver.
O contexto
O Météo Climat France é um serviço meteorológico nacional gratuito editado pela KAYZEN. Cobre três utilizações distintas com a mesma base de dados: a meteorologia do dia a dia (hora a hora durante 48 horas, tendência a 10 dias), a climatologia (normais e recordes por estação) e a meteorologia agrícola (temperatura e humidade do solo, ET0, balanço hídrico, graus-dia, condições de pulverização).
A restrição
Três restrições opunham-se. O serviço tinha de apresentar um mapa animado de França em 72 horizontes horários — logo, cálculo pesado no navegador. Tinha de continuar consultável num telemóvel à beira de um campo, muitas vezes em 3G. E tinha de existir no Google em pesquisas ultralocais do tipo «météo Vénissieux 69200», um terreno ocupado por intervenientes instalados há vinte anos.
A resposta
Recusámos o reflexo do framework. O site está escrito em JavaScript nativo, dividido em onze módulos carregados a pedido, com MapLibre alojado localmente para a cartografia. O orçamento poupado no runtime foi reinvestido onde conta: a interpolação dos 247 pontos da malha, a pré-renderização das 358 páginas e o cuidado com o vocabulário agronómico.
Cada opção, e a sua razão.
O mapa como página inicial
O primeiro ecrã não é um formulário de pesquisa, mas o mapa de França já renderizado, à hora atual. O visitante vê a resposta antes de agir. A pesquisa por localidade ou código postal continua disponível logo abaixo, e a tecla «/» devolve-lhe o foco a partir de qualquer ponto.
Uma escala de cores por grandeza
Temperatura, precipitação, vento, nebulosidade, pressão, humidade, trovoadas e UV têm cada um a sua rampa, limitada e legendada. Nenhuma usa apenas o degradé vermelho-verde: o daltonismo deuteranópico afeta 6 % dos homens, e um mapa meteorológico mal escolhido torna-se ilegível para eles.
Um cursor temporal manipulável por teclado
Setas esquerda/direita para mudar de hora, Shift + setas para mudar de dia, Espaço para iniciar a animação, Home para voltar ao momento atual. Os atalhos estão escritos por baixo do cursor, não escondidos numa ajuda.
Uma descrição por extenso
Por baixo do mapa, um link «Descrição do mapa por extenso» restitui em texto o que o mapa mostra. É indispensável para um leitor de ecrã e, de caminho, legível pelos motores de busca — para eles, um mapa em canvas é uma imagem vazia.
Tipografia única, alojada localmente
Nunito em variable font, servida a partir do domínio do site. Nenhum pedido ao Google Fonts: uma fonte de terceiros num serviço consultado diariamente é uma dependência de rede e uma transferência de dados para o estrangeiro sem base legal.
Paleta do projeto
Azul-céu
#2E7BB6
Estrutura, links, cabeçalhos
Ardósia
#1F2933
Texto principal
Trigo
#C9A227
Secção agrícola
Alerta
#C6413B
Limiares ultrapassados, vigilância
Sistema tipográfico
Títulos
Nunito 700
Texto corrido
Nunito 400
Uma única família variável, alojada localmente. Os números usam algarismos tabulares: sem isso, uma temperatura que varia faz saltar toda a coluna de uma tabela horária.
O que está por baixo do capô.
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
JavaScript nativo, onze módulos
menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau e o vendor MapLibre. Cada página só carrega aquilo de que precisa: a ficha climatológica de uma estação não inclui nem o motor agronómico nem o leitor de radar.
MapLibre alojado localmente em vez de Mapbox
Sem chave de API, sem faturação por visualização, sem chamada a um terceiro em cada carregamento. O fundo cartográfico vem do IGN (o instituto geográfico nacional francês) — dados públicos franceses, coerentes com um serviço que fala de localidades francesas.
Interpolação numa malha de 247 pontos
Os modelos públicos fornecem uma grelha; a interface precisa de um campo contínuo. A interpolação e a renderização fazem-se no navegador, numa passagem por horizonte, com cache dos 72 horizontes: a animação mantém-se fluida sem voltar a chamar a API.
Rotas /api/ vedadas aos robôs
O robots.txt exclui /api/. Sem isso, cada exploração de um crawler consumiria a quota do Open-Meteo para nada — e uma quota esgotada é um serviço indisponível para os visitantes reais.
Funções de dados do lado do servidor
As chamadas aos modelos passam por funções de servidor que normalizam, guardam em cache e limitam as respostas. O navegador nunca fala diretamente com o fornecedor: no dia em que se mudar de fonte, a interface não mexe.
Como o site se torna encontrável.
358 URL, quatro modelos de página
180 fichas de localidades (/meteo/lyon-69001), 141 fichas climatológicas (/climat/…), 16 páginas explicativas (/comprendre/…) e 12 páginas de mapas temáticos (/cartes/radar…). Cada modelo responde a uma intenção diferente; nenhuma página é uma variante cosmética de outra.
Conteúdo próprio de cada localidade
O SEO programático falha quando duplica. Cada ficha de localidade tem as suas coordenadas, a sua altitude, as normais da estação de referência e os seus recordes — valores que diferem realmente de uma cidade para outra.
Três blocos de dados estruturados
WebApplication (categoria meteorologia, gratuitidade declarada), WebSite com SearchAction apontada para a verdadeira pesquisa interna, e FAQPage alimentada pelas perguntas efetivamente tratadas na página.
Ligações internas com sentido
O rodapé liga as dezasseis maiores cidades; cada ficha remete para a sua página climatológica, os seus mapas e o seu glossário. As ligações internas seguem o percurso de leitura; não são um tapete de links.
Sitemap e canónicos coerentes
Um único canónico por página, um sitemap que lista exatamente os 358 URL servidos. Um URL ausente do sitemap não é explorado; um URL do sitemap sem página é um soft-404 que degrada todo o domínio.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
Um mapa que existe sem a visão
A descrição textual do mapa não é um atributo alt: é um conteúdo gerado, atualizado para o horizonte apresentado, alcançável por teclado e legível por síntese de voz.
Tudo por teclado
Mudança de camada, de localidade, de horizonte, reprodução da animação: nenhuma interação exige o rato. Os atalhos estão documentados no ecrã.
Rampas de cor testadas com visão anómala
Cada rampa foi simulada em protanopia, deuteranopia e tritanopia. Os valores continuam distinguíveis, e a legenda indica sempre os limites numéricos.
O que foi entregue.
- Início — mapa animado e pesquisa
- /meteo/<localidade>-<código postal> — 180 fichas de localidades
- /climat/<estação> — 141 fichas de normais e recordes
- /cartes/<camada> — radar, satélite IV e visível, raios, UV…
- /meteo-agricole — solos, ET0, balanço hídrico, pulverização
- /comprendre — 16 fichas pedagógicas e glossário
- /lune, /contact, aviso legal, privacidade, termos de utilização e condições de venda, acessibilidade
As etapas do projeto.
Modelo de dados
Escolha das fontes públicas (Open-Meteo, IGN), normalização das grandezas, quotas.
Cartografia
Malha, interpolação, rampas de cor, cursor temporal.
Secção agrícola
ET0 FAO-56, balanço P − ET0, graus-dia, Delta T, limiar Beaufort 3.
SEO programático
Quatro modelos, geração das 358 páginas, sitemap, ligações internas.
Conformidade
Aviso legal, ressalva regulamentar fitossanitária, acessibilidade, RGPD.
O que nos perguntam com frequência.
Outros projetos
Cibersegurança & Aplicação multiplataformaSésame
Um gestor de palavras-passe que não consegue ler as suas palavras-passe: a prova era a arquitetura.
Cibersegurança & Aplicação webSésame Éclair
Um segredo, uma leitura, nenhum rasto: a chave nunca sai da ligação, o servidor só guarda um bloco ilegível.
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.