V roce 2006, když jsem pracoval v designové agentuře v Cardiffu ve Walesu, jsem vytvořil myšlenku, že na našich webových stránkách představí aktuální počasí mimo naši kancelář. Chtěla jsem, aby se naše webové stránky plně angažovaly a ukázaly našim návštěvníkům a klientům to, co jsme v reálném životě zažili každý den v reálném čase.
Poté, co jsem provedl nějaký rozsáhlý výzkum, zjistil jsem, že nejlepším výchozím bodem je Yahoo!'s Weather API, protože dává klimatické podmínky v konzistentním a použitelném formátu. V té době však jediný způsob, jak skutečně reprezentovat počasí na webových stránkách, byl použití Flash. Doba vývoje sama o sobě stačila k tomu, aby se tato myšlenka vyděsila z myslí ředitelů společnosti a nikdy se nepohnula kolem fáze koncepce.
Nyní, o šest let později a jako technický ředitel mé vlastní společnosti, jsem tuto myšlenku znovu prohlédl. Hledání v různých webech, blogy a fóra ukázalo, že ani šest let poté nikdo vlastně nic takového neudělal, a tak bychom museli vytvořit kód, který by to udělal. Také v šesti letech, od doby, kdy byla myšlenka vytvořena, rostly mé ambice. Už nechci, aby webová stránka zobrazovala počasí mimo naši kancelář - chci, aby zobrazovala počasí mimo okno osoby, která si prohlíží webové stránky.
Vytvořil jsem seznam přání, který obsahuje aktuální informace o počasí, západ slunce a východ slunce, denní a noční a dokonce i měsíční cykly - a dal to našemu vývojáři Stevenovi, aby to udělal.
Aplikace Yahoo Weather API se opět ukázala jako nejdůslednější a nabízí velmi přesné kódy pro různé typy počasí. Pomocí těchto informací bychom mohli vytvořit pole, které by mohlo řídit zobrazení počasí.
Nicméně, stejně jako údaje Yahoo, bylo to jen tak přesné, jako místo, které jsme jej mohli nakoupit z webových stránek, a kvůli slabosti programu Microsoft Internet Explorer jsme nemohli využít geolokaci k získání přesné polohy pro každého, kdo prohlíží webové stránky. Proto jsme se museli vypořádat s tím nejlepším příkladem a pomocí webové stránky IPInfoDB načíst nejbližší kapitál nebo nejbližší velké město na základě IP adresy uživatele.
V USA to obvykle vede k hlavnímu městu, v němž žije osoba, která se dívá na webovou stránku. Zde ve Velké Británii se to stává v Londýně, a to bez ohledu na to, kde sídlí ve Spojeném království; doufejme, že Microsoft jednoho dne dohoní zbytek světa prohlížečů a umožní nám využít geolokaci.
Použitím IP adresy uživatele a jeho zadáním do IPInfoDB jsme byli schopni extrapolovat zemi, stát či provincii a město nebo město osoby, která si prohlíží webové stránky. Krmení tohoto do API Yahoo nám dalo aktuální počasí pro toto konkrétní místo.
Čas západu slunce a východu slunce jsou přesné každý den a jsou počítány za letu na základě zeměpisné délky a zeměpisné šířky, odvozené také z meteorologického rozhraní API společnosti Yahoo.
Konečně je fáze měsíce, která, i když je založena pouze na datu jako proměnné, se ukázala jako nejkomplikovanější výpočet všech.
To je teorie. Teď, jak se to stalo.
Prvním krokem bylo rozdělení typů počasí načtených z Yahoo! do pole, které bychom mohli použít k ovládání efektů na webových stránkách. Každý ze 47 různých typů počasí má své vlastní pole, které jsme rozdělili na čtyři čísla. První skupina čísel určuje pokrytí oblačností, od jasného dne až po tmavé těžké mraky. Druhé číslo je pro dešť, od deště až po silné deště. Třetí číslo je pro různé druhy počasí, jako je sníh a blesk. Nakonec je čtvrtým číslem to, co náš návrhář Steven nazývá "omáčkou", jako je mlha, prach a mlha.
$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);Abychom udrželi co nejmenší kód a obraz na minimu, rozhodli jsme se, že kdykoli je to možné, recyklujeme stejné obrázky. Například je zde jen jedna dešťová grafika a je řízena na základě informací od Yahoo !. Pokud má být dešťová grafika světlá, je nastavena nižší krytí, aby byla lehčí:
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;}Spočítali jsme spíš naštěstí výpočty měsíčního cyklu Blog Stephena A. Zarkose . V souladu s naším přáním udržet obrazy na minimu byla fáze měsíce provedena pixelovou deskou zobrazující 10 různých fází měsíce. Pomocí výpočtů společnosti Zarkos vybírá následující kód správnou část listu obrazových bodů, který se zobrazuje a zajistí, aby byl správně zobrazen správný měsíční cyklus na našich webových stránkách.
background-position: px 0;Poslední částí projektu a nejvíce vizuálně vzrušující je západ slunce a východ slunce v reálném čase. Jak bylo zmíněno, používá se zeměpisná délka a zeměpisná šířka nejbližšího hlavního města osoby, která si prohlíží webové stránky, aby pro ně extrapolovala čas západu slunce a východ slunce. To znamená, že někdo, kdo se dívá na webovou stránku v Los Angeles, uvidí, jak se slunce zvedne a nastaví tři hodiny poté, co se někdo dívá na stejnou webovou stránku v New Yorku.
Západ slunce a východ slunce se skládají ze tří samostatných efektů panoramatu, které se postupně rozpouštějí. Pro západ slunce se denní scéna pomalu rozpouští na oranžovou scénu, než se rozpustí na noční scénu. Zatímco se to děje, sluneční grafika (která je vždy přítomna nad záhybem prohlížeče) začíná klesat a "nastavovat". Celý tento proces trvá přesně 300 sekund.
Čas západu slunce (odvozený od zeměpisné délky a šířky) je převeden na časovou značku Unix, která je pak uložena jako proměnná. Aktuální čas je také změněn na časovou značku Unix a rozdíl mezi dvěma časy se používá pro funkci časového limitu jQuery. To je to, co vytváří přechod mezi denním a nočním tématem.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Standardní povětrnostní vlivy, ať už se jedná o jakoukoli věc, se hrají, zatímco slunce svítí a stoupá. To může vést k nejrůznějším přechodům, zvláště když velmi silně prší.
Kód vidíte v akci na stránce Zapojte webové stránky .
Jelikož se jedná o systém, který jsme vyvinuli sami, neustále se díváme na způsoby, jak to zlepšit, a máme dvě funkce, které jsme se snažili přidat, protože systém počasí byl uveden na trh v srpnu letošního roku.
První je něco, co jsme právě přidali; nastavení polohy založené na souboru cookie, díky němuž může návštěvník na webových stránkách provést přesnější zobrazení počasí tím, že zadá své město, město nebo poštovní směrovací číslo, aby získal konkrétní informace o počasí pro svou oblast. Toto bylo skutečně velmi snadné, protože rozhraní API pro počasí v Yahoo akceptuje jako vstupy PSČ a města a ušetří volání na iponfodb.com. Zkoušeli jsme to s různými městy z celého světa, od dalekého východu jako Severní Kanada až po ostrovy Antipodes poblíž pobřeží Nového Zélandu - takže vidíte, co je počasí jako kdekoli na světě.
Druhá vlastnost, kterou představíme v novém roce, je kontrolní schránka, takže návštěvníci mohou provádět efekty počasí, které považují za vhodné, takže lze vidět kombinace různých typů počasí bez ohledu na aktuální počasí. Například návštěvníci budou moci zvyšovat intenzitu deště od 0% do 100% v přírůstcích o 10%. To bude také zahrnovat spoušť pro západ slunce a východ slunce, takže každý může hrát na Ed Harris z Truman Show a vytvořit východ slunce, kdykoli se jim líbí.
Používali jste rozhraní Yahoo! API pro počasí? Co jste s tím postavili? Dejte nám vědět v níže uvedených komentářích.