I 2006, mens jeg jobbet på et designbyrå i Cardiff, Wales, fant jeg meg en ide om å få på våre nettsider de nåværende værforholdene utenfor vårt kontor. Jeg ønsket å gjøre nettstedet vårt fullt engasjerende og vise våre besøkende og klienter hva vi opplevde i virkeligheten hver dag, i sanntid.
Etter å ha gjort omfattende forskning, oppdaget jeg at det beste utgangspunktet for dette er Yahoo! S Weather API, fordi det gir værforhold i et konsistent, brukbart format. På den tiden var imidlertid den eneste måten å virkelig representere været på et nettsted ved å bruke Flash. Utviklingstiden alene var nok til å skremme ideen fra sjefene til selskapets styremedlemmer, og det beveget seg aldri forbi konseptfasen.
Nå, seks år senere, og å være teknisk direktør i mitt eget selskap, revidert jeg ideen. Et søk rundt ulike nettsteder, blogger og fora avslører at selv seks år på, ingen har faktisk gjort noe slikt, så vi må lage koden for å gjøre det. Også i de seks årene siden ideen ble oppfattet, har mine ambisjoner vokst. Jeg vil ikke lenger at nettstedet skal vise været utenfor vårt kontor - jeg vil at det skal vise været utenfor vinduet til personen som ser på nettstedet.
Jeg opprettet en ønskeliste med funksjoner for oppdatering av værmeldinger, solnedgang og soloppgangstider, dag og natt og til og med månesykluser, og ga det til utvikleren Steven for å gjøre det slik.
Igjen viste Yahoo's Weather API seg for å være den mest konsistente, og tilbyr svært nøyaktige koder for ulike værtyper. Med denne informasjonen kunne vi lage en matrise som kunne kontrollere vår værvarsel.
Men så godt som Yahoos data er, var det bare like nøyaktig som stedet vi kunne matte det fra nettstedet, og på grunn av frailtiene til Microsofts Internet Explorer, kunne vi ikke bruke geolocation for å hente en nøyaktig plassering for alle som surfer på nettstedet. Vi måtte derfor avgjøre det neste beste og bruke nettstedet IPInfoDB til å hente nærmeste hovedstad, eller nærmeste store by, basert på brukerens IP-adresse.
Over USA resulterer dette vanligvis i hovedstaden i hvilken stat personen som ser på nettstedet, bor i. Her i Storbritannia er det som standard i London, uavhengig av hvor i Storbritannia personen er basert; Forhåpentligvis kommer Microsoft en dag til å hente resten av nettleserverdenen og tillate oss å bruke geolocation.
Ved å bruke brukerens IP-adresse og legge inn det i IPInfoDB, kunne vi ekstrapolere landet, staten eller provinsen, og byen eller byen til personen som ser på nettstedet. Feeding dette inn i Yahoo API ga oss gjeldende vær for den aktuelle plasseringen.
Solnedgang og soloppgangstider er nøyaktige hver dag og beregnes i fly basert på lengdegrad og breddegrad, også avledet fra Yahoos Weather API.
Til slutt er det måneskiftet, som, selv om det er basert på bare datoen som en variabel, viste seg å være den mest kompliserte beregningen av alle.
Det er teorien. Nå, for hvordan det ble gjort.
Det første trinnet var å dele værtyper hentet fra Yahoo! inn i en matrise som vi kunne bruke til å kontrollere effektene på nettstedet. Hver av Yahoos 47 forskjellige værtyper har sitt eget utvalg, som vi delt inn i fire tall. Det første settet av tall dikterer skydekkingen, alt fra en klar dag til mørke tunge skyer. Det andre tallet er for regnet, alt fra regn til alvorlig nedbør. Det tredje nummeret gjelder for flere typer værtyper, for eksempel snø og lyn. Til slutt er det fjerde nummeret for hva vår designer Steven kaller "sausseffekter," som tåke, støv og tåke.
$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);For å beholde den allerede tunge koden og bildene til et minimum, valgte vi å resirkulere de samme bildene hvor det er mulig. For eksempel er det bare en regn grafikk, og den er kontrollert basert på informasjon fra Yahoo !. Hvis regnskilden er nødvendig for å være lys, er den satt med en lavere opasitet for å gjøre den lettere:
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;}Vi snublet, heldigvis, på beregningene for månesyklusen på Stephen A. Zarkos 'blogg . I tråd med vårt ønske om å holde bilder til et minimum, ble månenfasen gjort med et pikselark som viser 10 forskjellige faser av månen. Ved hjelp av Zarkos beregninger velger følgende kode den riktige delen av pikselarket som skal vises, slik at den korrekte månesyklusen alltid vises på vår nettside.
background-position: px 0;Den siste delen av prosjektet, og den mest visuelt spennende, er sanntids solnedgang og soloppgang. Som nevnt, bruker dette lengden og bredden av nærmeste hovedstad til personen som ser på nettstedet for å ekstrapolere solnedgangen og soloppgangstider for dem. Dette betyr at noen som ser på nettstedet i Los Angeles, vil se solen stige og sette tre timer etter at noen ser på samme nettside i New York.
Solnedgangen og soloppgangen består av tre separate skylineeffekter som løser seg i hverandre i rekkefølge. For solnedgangen løsner dagen scenen langsomt inn i en oransje scene, før den løses inn i en nattscene. Mens dette skjer, begynner en solgrafikk (som alltid er tilstede over nettleseren) å synke og "sette". Denne hele prosessen tar nøyaktig 300 sekunder.
Solnedgangstiden (avledet fra lengdegrad og breddegrad) blir omgjort til en Unix tidsstempel, som deretter lagres som en variabel. Nåværende tid er også omgjort til en Unix tidsstempel, og forskjellen mellom de to ganger brukes til en jQuery timeout-funksjon. Dette er hva som skaper overgangen mellom dag og natt temaer.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); De vanlige vær-effektene, uansett hva de kan være, fortsetter å leke ut mens solen går og stiger. Dette kan føre til noen ganske flotte overganger, spesielt når det regner veldig hardt.
Du kan se koden i aksjon på Engasjere nettstedet .
Siden dette er et system vi har utviklet oss, ser vi kontinuerlig på måter å forbedre det på, og vi har to funksjoner vi så på å legge til siden værsystemet ble lansert i august i år.
Den første er noe vi nettopp har lagt til; en informasjonskapsel basert stedinnstilling, slik at den besøkende på nettstedet kan gjøre deres værmelding mer nøyaktig ved å skrive inn sin by, by eller postnummer for å hente spesifikk værinformasjon for området. Dette var faktisk veldig enkelt å gjøre som Yahoos vær-API aksepterer postnummer og byer som innganger, og det lagrer et anrop til iponfodb.com. Vi har testet dette med forskjellige byer fra hele verden, fra så langt som Nord-Canada til Antipodes-øyene utenfor kysten av New Zealand - slik at du kan se hvordan været er som hvor som helst i verden.
Den andre funksjonen som vi skal introdusere i nyttår er en kontrollboks, slik at besøkende kan implementere vær-effektene slik de passer, slik at kombinasjonene av forskjellige værtyper kan ses uavhengig av det virkelige været. For eksempel vil besøkende kunne øke intensiteten av regnet fra 0% til 100% i trinn på 10%. Dette vil også inkludere en utløser for solnedgangen og soloppgangen, slik at alle kan spille på å være Ed Harris fra The Truman Show og opprette en soloppgang når de vil.
Har du brukt Yahoo! S Weather API? Hva har du bygget med det? Gi oss beskjed i kommentarene nedenfor.