Em 2006, enquanto trabalhava em uma agência de design em Cardiff, no País de Gales, concebi uma ideia para apresentar em nosso site as condições climáticas atuais fora de nosso escritório. Eu queria tornar nosso site totalmente envolvente e mostrar aos nossos visitantes e clientes o que estávamos vivenciando na vida real a cada dia, em tempo real.
Depois de fazer uma extensa pesquisa, descobri que o melhor ponto de partida para isso é a API de Meteorologia do Yahoo !, porque oferece condições climáticas em um formato consistente e utilizável. Na época, no entanto, a única maneira de realmente representar o clima em um site era usando o Flash. O tempo de desenvolvimento, por si só, foi suficiente para afugentar a idéia das mentes dos diretores da empresa, e nunca passou da fase de concepção.
Agora, seis anos depois, e sendo o diretor técnico da minha própria empresa, eu revisitei a ideia. Uma pesquisa em vários sites, blogs e fóruns revelou que, mesmo seis anos depois, ninguém fez nada assim, então teríamos que criar o código para fazer isso. Além disso, nos seis anos desde que a ideia foi concebida, minhas ambições cresceram. Não quero mais que o site exiba o tempo fora de nosso escritório. Quero que ele exiba o tempo fora da janela da pessoa que está visualizando o site.
Eu criei uma lista de desejos de recursos - contendo atualizações de tempo ao vivo, pôr do sol e nascer do sol, dia e noite e até ciclos de lua - e dei ao nosso desenvolvedor Steven para fazê-lo.
Mais uma vez, a Weather API do Yahoo provou ser a mais consistente, oferecendo códigos muito precisos para vários tipos de clima. Com essas informações, poderíamos criar uma matriz que controlasse nossa exibição de clima.
No entanto, por melhores que sejam os dados do Yahoo, eles eram tão precisos quanto o local onde pudemos alimentá-los no site, e devido às fragilidades do Internet Explorer da Microsoft, não pudemos usar a geolocalização para recuperar um local preciso. para todos que navegam no site. Portanto, tivemos que nos contentar com a próxima melhor coisa e usar o IPInfoDB do site para recuperar a capital mais próxima, ou a cidade grande mais próxima, com base no endereço IP do usuário.
Em todos os Estados Unidos, isso geralmente resulta no capital de qualquer estado em que a pessoa que olha para o site reside. Aqui no Reino Unido, o padrão é Londres, independentemente de onde no Reino Unido a pessoa esteja baseada; Felizmente, a Microsoft um dia alcançará o resto do mundo dos navegadores e nos permitirá usar a geolocalização.
Ao usar o endereço IP do usuário e inseri-lo no IPInfoDB, pudemos extrapolar o país, o estado ou a província e a cidade ou a cidade da pessoa que visualiza o site. Alimentar isso na API do Yahoo nos deu o clima atual para esse local em particular.
Os horários de pôr-do-sol e nascer do sol são precisos a cada dia e são calculados dinamicamente com base na longitude e na latitude, também derivados da API do Google Weather do Yahoo.
Finalmente, há a fase da lua, que, embora seja baseada apenas na data como variável, provou ser o cálculo mais complicado de todos.
Essa é a teoria. Agora, como foi feito.
O primeiro passo foi dividir os tipos de clima recuperados do Yahoo! em uma matriz que poderíamos usar para controlar os efeitos no site. Cada um dos 47 diferentes tipos de clima do Yahoo tem seu próprio array, que dividimos em quatro números. O primeiro conjunto de números determina a cobertura da nuvem, variando de um dia claro a nuvens escuras e pesadas. O segundo número é para a chuva, desde chuva sem chuvas até chuvas fortes. O terceiro número é para vários tipos de clima adicionais, como neve e relâmpagos. Finalmente, o quarto número é para o que o nosso designer Steven chama de “efeitos do molho”, como neblina, poeira e névoa.
$weatherarray[0]=array('tornado',3,3,5,3);$weatherarray[1]=array('tropical storm',3,3,5,3);$weatherarray[2]=array('hurricane',3,2,4,3);$weatherarray[3]=array('severe thunderstorms',3,3,5,3);$weatherarray[4]=array('thunderstorms',3,2,5,2);$weatherarray[5]=array('mixed rain and snow',2,1,1,0);$weatherarray[6]=array('mixed rain and sleet',2,1,1,0);$weatherarray[7]=array('mixed snow and sleet',2,1,2,0);$weatherarray[8]=array('freezing drizzle',1,1,1,0);$weatherarray[9]=array('drizzle',1,1,0,0);$weatherarray[10]=array('freezing rain',1,2,1,0);$weatherarray[11]=array('showers',2,2,0,0);$weatherarray[12]=array('showers',2,2,0,0);$weatherarray[13]=array('snow flurries',1,0,2,1);$weatherarray[14]=array('light snow showers',1,0,2,1);$weatherarray[15]=array('blowing snow',1,0,2,2);$weatherarray[16]=array('snow',1,0,2,0);$weatherarray[17]=array('hail',1,0,4,0);$weatherarray[18]=array('sleet',1,1,4,0);$weatherarray[19]=array('dust',0,0,0,5);$weatherarray[20]=array('foggy',0,0,0,4);$weatherarray[21]=array('haze',0,0,0,5);$weatherarray[22]=array('smoky',0,0,0,5);$weatherarray[23]=array('blustery',1,0,0,2);$weatherarray[24]=array('windy',1,0,0,2);$weatherarray[25]=array('cold',1,0,0,0);$weatherarray[26]=array('cloudy',2,0,0,0);$weatherarray[27]=array('mostly cloudy (night)',1,0,0,0);$weatherarray[28]=array('mostly cloudy (day)',1,0,0,0);$weatherarray[29]=array('partly cloudy (night)',1,0,0,0);$weatherarray[30]=array('partly cloudy (day)',1,0,0,0);$weatherarray[31]=array('clear (night)',0,0,0,0);$weatherarray[32]=array('sunny',0,0,0,0);$weatherarray[33]=array('fair (night)',0,0,0,0);$weatherarray[34]=array('fair (day)',0,0,0,0);$weatherarray[35]=array('mixed rain and hail',1,1,4,1);$weatherarray[36]=array('hot',0,0,0,0);$weatherarray[37]=array('isolated thunderstorms',3,2,5,2);$weatherarray[38]=array('scattered thunderstorms',3,2,5,2);$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);$weatherarray[40]=array('scattered showers',3,2,0,2);$weatherarray[41]=array('heavy snow',1,0,3,0);$weatherarray[42]=array('scattered snow showers',1,0,2,0);$weatherarray[43]=array('heavy snow',1,0,3,0);$weatherarray[44]=array('partly cloudy',1,0,0,0);$weatherarray[45]=array('thundershowers',3,2,5,2);$weatherarray[46]=array('snow showers',1,0,2,0);$weatherarray[47]=array('isolated thundershowers',3,2,5,2);$weatherarray[3200]=array('not available',0,0,0,0);Para manter o código e as imagens já pesados no mínimo, optamos por reciclar as mesmas imagens sempre que possível. Por exemplo, há apenas um gráfico de chuva e é controlado com base nas informações do Yahoo !. Se o gráfico de chuva tiver que ser leve, ele será definido com uma opacidade menor para torná-lo mais claro:
switch ( $effect1) {case 0:$weathercode.= 'jQuery('#rain').css("opacity", "0.0");';break;case 1:$weathercode.= 'jQuery('#rain').css("opacity", "0.10");';break;case 2:$weathercode.= 'jQuery('#rain').css("opacity", "0.30");';break;case 3:$weathercode.= 'jQuery('#rain').css("opacity", "0.50");';break;}Nós tropeçamos, felizmente, nos cálculos para o ciclo da lua em Blog de Stephen A. Zarkos . De acordo com o nosso desejo de manter as imagens no mínimo, a fase da lua foi feita com uma folha de pixels mostrando 10 fases diferentes da lua. Usando os cálculos do Zarkos, o código a seguir seleciona a parte correta da folha de pixels a ser exibida, garantindo que o ciclo correto da lua seja sempre mostrado em nosso site.
background-position: px 0;A parte final do projeto, e a mais visualmente excitante, é o pôr do sol e o nascer do sol em tempo real. Como mencionado, isso usa a longitude e a latitude da capital mais próxima da pessoa que está visualizando o site para extrapolar os horários de pôr-do-sol e nascer do sol para eles. Isso significa que alguém que estiver olhando para o site em Los Angeles verá o sol nascer e ficará três horas depois de alguém ver o mesmo site em Nova York.
O pôr-do-sol e o nascer do sol consistem em três efeitos de horizonte separados que se dissolvem em seqüência. Para o pôr do sol, a cena do dia se dissolve lentamente em uma cena laranja, antes de se dissolver em uma cena noturna. Enquanto isso está acontecendo, um gráfico solar (que está sempre presente acima da dobra do navegador) começa a descer e "definir". Todo esse processo leva exatamente 300 segundos.
O horário do pôr-do-sol (derivado da longitude e latitude) é convertido em um timestamp Unix, que é então armazenado como uma variável. A hora atual também é transformada em um registro de data e hora do Unix, e a diferença entre os dois tempos é usada para uma função de tempo limite do jQuery. É isso que cria a transição entre os temas dia e noite.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Os efeitos climáticos padrão, sejam eles quais forem, continuam a acontecer enquanto o sol está se pondo e subindo. Isso pode levar a algumas transições bastante bonitas, especialmente quando está chovendo muito.
Você pode ver o código em ação no Engajar o site .
Como este é um sistema em que nos desenvolvemos, estamos continuamente procurando maneiras de melhorá-lo e temos duas características que buscamos acrescentar, desde que o sistema climático foi lançado em agosto deste ano.
O primeiro é algo que acabamos de adicionar; uma configuração de localização baseada em cookie, em que o visitante do site pode tornar a exibição do clima mais precisa, inserindo sua cidade, cidade ou código postal para recuperar informações meteorológicas específicas de sua área. Isso foi realmente muito fácil de fazer, já que a API de clima do Yahoo aceita códigos postais e cidades como entradas, e salva uma chamada para iponfodb.com. Nós testamos isso com várias cidades de todo o mundo, de lugares tão distantes quanto o norte do Canadá até as ilhas Antipodes, na costa da Nova Zelândia - assim você pode ver como está o tempo em qualquer lugar do mundo.
O segundo recurso que apresentaremos no Ano Novo é uma caixa de controle para que os visitantes possam implementar os efeitos climáticos da maneira que julgar mais adequada, para que as combinações de diferentes tipos de clima possam ser vistas independentemente do tempo real. Por exemplo, os visitantes poderão aumentar a intensidade da chuva de 0% a 100% em incrementos de 10%. Isso também incluirá um gatilho para o pôr do sol e o nascer do sol, para que todos possam brincar de ser Ed Harris do The Truman Show e criar um nascer do sol sempre que quiserem.
Você já usou a API do Yahoo! O que você construiu com isso? Deixe-nos saber nos comentários abaixo.
Imagem em destaque / miniatura, imagem do tempo via Shutterstock.