Vuonna 2006 työskennellessäni Walesissa Cardiffissa toimivaa suunnittelutoimistoa käsittelen ajatusta, jonka mukaan verkkosivustollamme on nykyiset sääolosuhteet toimiston ulkopuolella. Halusin tehdä verkkosivustollamme täysin kiinnostuneena ja näyttää kävijöillemme ja asiakkaillemme, mitä olemme kokeneet todellisessa elämässä joka päivä, reaaliajassa.
Pitkän tutkimuksen jälkeen huomasin, että tämä on paras lähtökohta Yahoo!: N Weather API: lle, koska se antaa sääolosuhteet yhtenäisellä, käyttökelpoisella tavalla. Tuolloin kuitenkin ainoa tapa todella esittää sää sivustolla oli Flash. Pelkästään kehitysaika riitti pelkäämään ajatuksen yhtiön johtajien mieleistä, eikä se koskaan muuttanut konseptin vaiheen ohi.
Nyt, kuusi vuotta myöhemmin, ja olen oman yrityksen tekninen johtaja, käsittelin ajatusta. Eri verkkosivustojen, blogien ja foorumien haku paljasti, että jopa kuusi vuotta myöhemmin kukaan ei ole tehnyt mitään tällaista, joten meidän olisi luotava koodi. Myös kuuden vuoden kuluttua idea on syntynyt, kunnianhimoni ovat kasvaneet. En enää halua, että verkkosivusto näyttää sää toimiston ulkopuolella - haluan sen näyttävän säätä verkkosivuston katsojan ikkunan ulkopuolelta.
Luin toivomusluettelon ominaisuuksista, jotka sisälsivät elävän sääpäivityksen, auringonlaskun ja auringonnousun aikoja sekä päivällä ja yöllä sekä jopa kuun kiertojaksot - ja antoivat sen kehittäjällemme Steven tekemään niin.
Jälleen kerran Yahoo Weather API osoittautui kaikkein johdonmukaisimmaksi ja tarjosi erittäin tarkkoja koodeja eri sääolosuhteille. Näiden tietojen avulla voisimme luoda taulukon, joka voisi säätää säätilaa.
Kuitenkin yhtä hyvä kuin Yahoo-tiedot, se oli vain yhtä tarkka kuin sijainti, jota pystymme reagoimaan verkkosivustosta, ja Microsoftin Internet Explorerin heikkouksien takia emme pystyneet käyttämään geolokaatiota etsimään tarkkaa sijaintia kaikille, jotka selailevat verkkosivustoa. Meidän oli siis ratkaistava seuraavaksi paras asia ja käytämme IPInfoDB-sivustolla olevaa palvelua hakeaksesi lähimmän pääoman tai lähimmän suuren kaupungin käyttäjän IP-osoitteen perusteella.
Yhdysvalloissa tämä yleensä johtaa sen valtion pääkaupunkiin, jonka kotisivut katsovat. Tässä Yhdistyneessä kuningaskunnassa se lakkaa Lontoosta riippumatta siitä, missä Yhdistyneessä kuningaskunnassa henkilö perustuu; Toivottavasti Microsoft aikoo jonain päivänä päästä kiinni muuhun selaimen maailmaan ja antaa meille mahdollisuuden käyttää geolokaatiota.
Käyttämällä käyttäjän IP-osoitetta ja kirjoittamalla sen IPInfoDB-tietokantaan pystyimme ekstrapoloimaan sivuston katsojan maan, valtion tai maakunnan sekä kaupungin tai kaupungin. Tämän syötteen antaminen Yahoo API: lle antoi meille nykyisen säätiedot kyseiselle paikalle.
Auringonlasku ja auringonnousu ovat tarkkoja päivittäin, ja lasketaan lennolla pituusasteen ja leveysasteen perusteella, jotka perustuvat myös Yahoo Weather API: iin.
Lopuksi on kuun vaihe, joka, vaikka se perustuisi vain muuttujan päivämäärään, osoittautui kaikkein monimutkaisimmaksi laskelmaksi.
Se on teoria. Nyt, miten se tapahtui.
Ensimmäinen askel oli jakaa Yahoo!iltä haetut säätyypit osaksi taulukkoa, jota voisimme käyttää hallitsemaan vaikutuksia verkkosivuilla. Jokaisella Yahoo: n 47 eri säätyypillä on oma taulukko, jonka jaamme neljään numeroon. Ensimmäinen numeerinen määrä määrää pilvestä kattavan, kirkkaalta päivältä tummille raskas pilville. Toinen luku on sateen vaihtelevasta sateesta rankisiin sademäärään. Kolmas numero on useille erilaisille sääolosuhteille, kuten lumelle ja salamoille. Lopuksi, neljäs numero on se, mitä suunnittelija Steven kutsuu "kastikeefekteiksi", kuten sumuun, pölyyn ja sumuun.
$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);Jotta jo raskaat koodit ja kuvat olisivat mahdollisimman pienet, päätimme kierrättää samat kuvat aina kun se on mahdollista. Esimerkiksi on olemassa vain yksi sademäärä, ja sitä ohjataan Yahoo!in tietojen perusteella. Jos sateen graafin on oltava kevyt, se asetetaan alemman läpikuultavuuden ansiosta kevyemmäksi:
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;}Löysimme melkoisesti onneksi kuun syklin laskelmia Stephen A. Zarkosin blogi . Halutessamme pitää kuvat mahdollisimman pieniksi, kuun vaihe on tehty pikselilevyllä, joka näyttää kuun 10 eri vaiheet. Zarkosin laskutoimitusten avulla seuraava koodi valitsee oikean osan pikselilevystä näytettäväksi varmistaen, että oikea kuukautiskierros näkyy aina verkkosivuillamme.
background-position: px 0;Projektin viimeinen osa ja visuaalisesti jännittävä on reaaliaikainen auringonlasku ja auringonnousu. Kuten mainittiin, tämä käyttää verkkosivuston katsojan lähimmän pääkaupungin pituutta ja leveyttä ekstrapoloimaan auringonlasku- ja auringonnousuajat niille. Tämä tarkoittaa, että joku, joka tarkastelee verkkosivustoa Los Angelesissa, näkee auringon nousevan ja asetetaan kolme tuntia sen jälkeen, kun joku tarkasteli samaa verkkosivustoa New Yorkissa.
Auringonlasku ja auringonnousu koostuvat kolmesta erillisestä horisontti-efektista, jotka liukenevat toisiinsa järjestyksessä. Auringonlaskun vuoksi päiväkuva hitaasti liukuu oranssiksi kohtaukseksi, ennen kuin se liukuu yökuvaukseen. Vaikka tämä tapahtuu, aurinkokuvake (joka on aina läsnä selainkerroksen yläpuolella) alkaa laskea ja "asettaa". Tämä koko prosessi kestää täsmälleen 300 sekuntia.
Auringonlaskun aika (pituudesta ja leveysasteesta johdettu) muuttuu Unix-aikaleimaksi, joka sitten tallennetaan muuttujaksi. Nykyinen aika muuttuu myös Unix-aikaleimaksi, ja kahden ajan välistä eroa käytetään jQuery-aikakatkaisufunktioon. Tämä luo siirtymisen päivän ja yön välillä.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Säännölliset sääolosuhteet, riippumatta siitä, ovatko ne, voivat jatkaa, kun aurinko laskee ja nousee. Tämä voi johtaa melko kauniisiin siirtymiin, varsinkin kun sateet ovat erittäin kovaa.
Näet koodin toiminnossa Käytä verkkosivustoa .
Koska tämä on järjestelmä, jota olemme kehittäneet, tarkastelemme jatkuvasti tapoja parantaa sitä, ja meillä on kaksi ominaisuutta, joita katselemme lisätä, koska sääjärjestelmä käynnistettiin tämän vuoden elokuussa.
Ensimmäinen on juuri lisätty asia; evästeperusteinen sijaintiasetus, jonka avulla sivuston kävijä voi säätää säätulostaan tarkemmin kirjoittamalla kaupungin, kaupungin tai postinumeron saadakseen alueensa erityiset säätiedot. Tämä oli todella helppoa, koska Yahoo-sää-sovellusliittymä hyväksyi postinumeroita ja kaupunkeja panoksiin, ja se tallentaa puhelun iponfodb.com:iin. Olemme testannut tätä eri kaupunkien kanssa ympäri maailmaa, niin kaukana kuin Pohjois-Kanadasta Antipodsaarille Uuden-Seelannin rannikolla - niin näet, mitä sää on kuin missä tahansa maailmassa.
Toinen ominaisuus, jonka esittelemme uudenvuoden aikana, on ohjauslaatikko, jonka avulla kävijät voivat toteuttaa säävaikutuksia, kun he pitävät sopivina, joten erilaisten säätilojen yhdistelmät näkyvät todellisesta säästä riippumatta. Esimerkiksi kävijät voivat lisätä sateen voimakkuutta 0%: sta 100%: iin 10%: n lisäyksillä. Tämä sisältää myös laukaisun auringonlaskun ja auringonnousun aikaan, joten kaikki voivat pelata olemalla Ed Harris Truman-näyttelystä ja luomaan auringonnousun aina kun he pitävät.
Oletko käyttänyt Yahoo!: N Weather API: tä? Mitä rakensit siihen? Kerro meille alla olevissa huomautuksissa.