Árið 2006, þegar ég var að vinna hjá hönnunarmiðstöð í Cardiff, Wales, hugsaði ég hugmynd að lögun á heimasíðu okkar núverandi veðurskilyrði utan skrifstofu okkar. Mig langaði til að gera vefsíðu okkar fullkomlega þátttakandi og sýna gestum okkar og viðskiptavinum hvað við vorum að upplifa í raunveruleikanum á hverjum degi, í rauntíma.
Eftir að hafa gert umfangsmiklar rannsóknir komst ég að því að besti upphafspunkturinn fyrir þetta er Yahoo! veðurforritið, því það veitir veðurskilyrði í samræmi, nothæfi sniði. Á þeim tíma var hins vegar eina leiðin til að raunverulega tákna veðrið á vefsíðu með því að nota Flash. Þróunartíminn einn var nóg til að hræða hugmyndina frá hugum stjórnenda fyrirtækisins og það flutti aldrei framhjá hugmyndafræðinni.
Nú, sex árum seinna, og að vera tæknilegur forstöðumaður eigin fyrirtækis, endurskoðaði ég hugmyndina. Leit í kringum ýmsar vefsíður, blogg og ráðstefnur leiddi í ljós að jafnvel sex árum síðan hefur enginn gert eitthvað svoleiðis, þannig að við verðum að búa til kóðann til að gera það. Einnig, á sex árum síðan hugmyndin var hugsuð, hafa metnaðarmenn mínir vaxið. Ég vil ekki lengur vefsíðuna til að birta veðrið utan skrifstofu okkar - ég vil að hún birti veðrið utan glugga viðkomandi sem skoðar vefsíðuna.
Ég skapaði óskalistann yfir eiginleika sem innihalda lifandi veðuruppfærslur, sólarupprás og sólarupprásartíma og dag og nótt og jafnvel tunglshringur og gaf verktaki okkar Steven það til að gera það.
Enn og aftur sýndu Yahoo Weather Weather API að vera best í samræmi við það að bjóða upp á mjög nákvæmar kóðar fyrir ýmsar veðurgerðir. Með þessum upplýsingum gætum við búið til fylki sem gæti stjórnað veðaskjánum okkar.
Hins vegar, eins og gagnsemi Yahoo er, var það aðeins eins nákvæm og staðsetningin sem við gátum borið það frá vefsíðunni og vegna sviksemi Internet Explorer í Microsoft, vorum við ekki fær um að nota geolocation til að sækja nákvæma staðsetningu fyrir alla að skoða vefsíðuna. Við þurftum því að sætta sig við næsta besta og nota vefsíðu IPInfoDB til að sækja næsta höfuðborg eða næsta stóra borg, byggt á IP tölu notandans.
Yfir Bandaríkin, þetta leiðir yfirleitt til höfuðborgarinnar hvort sem sá sem leitar á vefsíðunni er búsettur. Hér í Bretlandi er það vanalega að London, óháð því hvar í Bretlandi viðkomandi er byggður; Vonandi mun Microsoft einum degi ná í restina af vafraheiminum og leyfa okkur að nota geolocation.
Með því að nota IP tölu notandans og slá það inn í IPInfoDB, gátum við aukið landið, ríkið eða héraðið og borgin eða borgin sem sá sem heimsækir vefsíðuna. Feeding þetta inn í Yahoo API gaf okkur núverandi veður fyrir viðkomandi stað.
Sólarupprásin og sólarupprásartímarnir eru nákvæmar á hverjum degi og eru reiknaðar út á flugu miðað við lengdargráðu og breiddargráðu, einnig afleiðing frá Veðurstofu Yahoo.
Að lokum er tunglfasinn, sem, jafnvel þó að hún byggist á bara dagsetningu sem breytu, reynst vera flóknasta útreikning allra.
Það er kenningin. Nú, fyrir hvernig það var gert.
Fyrsta skrefið var að skipta veðategundunum frá Yahoo! inn í fylki sem við gætum notað til að stjórna áhrifunum á vefsíðunni. Hver af 47 mismunandi veðategundum Yahoo hefur sitt eigið fylki, sem við skiptum í fjóra númer. Fyrsta tölublaðið ræður um skýjaklæðið, allt frá skýrum degi til dökkra þunga skýja. Annað númerið er fyrir rigninguna, allt frá engu rigningu til alvarlegs úrkomu. Þriðja númerið er fyrir ýmsar viðbótar veðurgerðir, svo sem snjó og eldingar. Að lokum er fjórða númerið fyrir það sem hönnuður okkar Steven kallar "gravy áhrif," eins og þoku, ryk og mist.
$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);Til þess að viðhalda nú þegar þungum kóða og myndmálum í lágmarki valið við að endurvinna sömu myndirnar þar sem það er mögulegt. Til dæmis, það er aðeins einn regn grafík, og það er stjórnað byggt á upplýsingum frá Yahoo !. Ef rigningarmyndin þarf að vera ljós, er hún stillt með lægri ógagnsæi til að gera það léttari:
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ð hrasaði, frekar sem betur fer, við útreikninga fyrir tunglklukkuna Blogg Stephen A. Zarkos . Í samræmi við löngun okkar til að halda myndum í lágmarki var tunglfasinn gert með pixla lak sem sýnir 10 mismunandi stig tunglsins. Með því að nota útreikninga Zarkos, velur eftirfarandi kóði réttan hluta pixla lagsins til að sýna, og tryggir að réttan tunglhring sé alltaf sýnd á heimasíðu okkar.
background-position: px 0;Endanleg hluti verkefnisins, og sjónrænt spennandi, er rauntíma sólarlag og sólarupprás. Eins og áður segir, notar þetta lengdargráðu og breiddargráðu næstu höfuðborgar þess sem skoðar vefsíðuna til að framlengja sólarlagið og sólarupprásartímann fyrir þá. Þetta þýðir að einhver sem horfir á vefinn í Los Angeles mun sjá sólin rísa upp og setja þrjár klukkustundir eftir að einhver hafi skoðað sömu vefsíðu í New York.
Sólarupprásin og sólarupprásin samanstendur af þremur aðskildum sjónræn áhrifum sem leysa upp í hvert annað í röð. Fyrir sólsetrið leysist dagsins vettvangur hægt í appelsínuskil, áður en hún leysist upp í næturvettvang. Þó að þetta sé að gerast, byrjar sól grafík (sem er alltaf til staðar fyrir ofan vafrann) að lækka og "setja." Allt þetta ferli tekur nákvæmlega 300 sekúndur.
Sólartíminn (frá lengdargráðu og breiddargráðu) er breytt í Unix tímastimpill, sem síðan er geymdur sem breytur. Núverandi tími er einnig breytt í Unix tímastimpil, og munurinn á tvisvar sinnum er notaður fyrir jQuery timeout virka. Þetta er það sem skapar umskipti milli dag og nótt þemu.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Stöðluð veðuráhrif, hvað sem þau kunna að vera, halda áfram að leika út meðan sólin er að setja og rísa upp. Þetta getur leitt til nokkurra fallegra umbreytinga, sérstaklega þegar það er að rigna mjög erfitt.
Þú getur séð kóðann í aðgerð á Engage Web Site .
Þar sem þetta er kerfi sem við höfum þróað okkur, erum við stöðugt að skoða leiðir til að bæta það og við höfum tvær aðgerðir sem við leitumst til að bæta við frá því að veðakerfið var hleypt af stokkunum í ágúst á þessu ári.
Fyrsta er eitthvað sem við höfum bara bætt við; keðju sem byggir á staðsetningu, þar sem gesturinn á vefsíðuna getur gert veðurstöðina nákvæmara með því að slá inn borgina, borgina eða póstnúmerið til þess að sækja tilteknar veðurupplýsingar fyrir svæðið. Þetta var í raun mjög auðvelt að gera eins og Yahoo veður API samþykkir póstnúmer og borgir sem inntak, og það sparar símtal til iponfodb.com. Við höfum prófað þetta með ýmsum borgum frá öllum heimshornum, allt frá Norður Kanada til Antipodes Islands við strönd Nýja Sjálands - svo þú sérð hvernig veðrið er eins og hvar sem er í heiminum.
Seinni hlutinn sem við munum kynna í nýju ári er stjórnborð svo gestir geti beitt veðuráhrifum eins og þeir sjá hæfileika, þannig að hægt er að sjá samsetningar mismunandi veðategunda óháð raunverulegu veðri. Til dæmis, gestir geta aukið styrkleiki rigninganna frá 0% til 100% í 10% stigum. Þetta mun einnig innihalda kveikja fyrir sólsetur og sólarupprás, svo allir geta spilað á því að vera Ed Harris frá The Truman Show og búa til sólarupprás þegar þeir vilja.
Hefur þú notað Yahoo! S Veður API? Hvað gerðirðu með því? Láttu okkur vita í athugasemdum hér fyrir neðan.