Nel 2006, mentre lavoravo in un'agenzia di design a Cardiff, nel Galles, ho ideato di ideare sul nostro sito web le condizioni meteorologiche attuali al di fuori del nostro ufficio. Volevo rendere il nostro sito completamente coinvolgente e mostrare ai nostri visitatori e clienti ciò che stavamo vivendo nella vita reale ogni giorno, in tempo reale.
Dopo aver fatto alcune ricerche approfondite, ho scoperto che il miglior punto di partenza per questo è l'API meteo di Yahoo !, poiché fornisce le condizioni meteorologiche in un formato coerente e utilizzabile. Al momento, tuttavia, l'unico modo per rappresentare realmente il tempo su un sito Web era utilizzare Flash. Il tempo di sviluppo da solo è stato sufficiente a spaventare l'idea dalle menti dei direttori della compagnia, e non è mai passata oltre la fase di ideazione.
Ora, sei anni dopo, essendo il direttore tecnico della mia azienda, ho rivisitato l'idea. Una ricerca su vari siti Web, blog e forum ha rivelato che, anche dopo sei anni, nessuno ha mai fatto nulla di simile, quindi dovremmo creare il codice per farlo. Inoltre, nei sei anni successivi all'ideazione, le mie ambizioni sono cresciute. Non voglio più solo che il sito web mostri il tempo al di fuori del nostro ufficio, voglio che mostri il tempo fuori dalla finestra della persona che visualizza il sito.
Ho creato un elenco di elementi desiderati contenente gli aggiornamenti meteo in tempo reale, i tempi del tramonto e dell'alba e il giorno e la notte e persino i cicli lunari, e l'ho dato al nostro sviluppatore Steven per renderlo tale.
Ancora una volta, l'API meteo di Yahoo si è rivelata la più coerente, offrendo codici molto accurati per vari tipi di condizioni meteorologiche. Con queste informazioni, saremmo in grado di creare un array in grado di controllare la nostra visualizzazione del tempo.
Tuttavia, buono quanto i dati di Yahoo, è stato preciso solo come la posizione in cui siamo stati in grado di fornirli dal sito Web e, a causa delle fragilità di Microsoft Internet Explorer, non siamo stati in grado di utilizzare la geolocalizzazione per recuperare una posizione precisa per tutti coloro che navigano nel sito. Pertanto, ci siamo dovuti accontentare della prossima cosa migliore e utilizzare il sito Web IPInfoDB per recuperare il capitale più vicino o la più vicina grande città, in base all'indirizzo IP dell'utente.
Negli Stati Uniti, questo di solito si traduce nel capitale di qualsiasi stato risieda nella persona che guarda il sito. Qui nel Regno Unito, il valore predefinito è Londra, indipendentemente da dove si trova la persona nel Regno Unito; si spera che Microsoft un giorno raggiungerà il resto del mondo dei browser e ci consentirà di utilizzare la geolocalizzazione.
Utilizzando l'indirizzo IP dell'utente e inserendolo in IPInfoDB, siamo stati in grado di estrapolare il paese, lo stato o la provincia e la città o la città della persona che visualizza il sito web. Inserendo questo nel API di Yahoo ci ha dato il tempo corrente per quella particolare posizione.
I tempi di tramonto e alba sono accurati ogni giorno e sono calcolati al volo in base alla longitudine e alla latitudine, anch'esse derivate dall'API Meteo di Yahoo.
Infine, c'è la fase lunare, che, anche se si basa solo sulla data come variabile, si è dimostrata il calcolo più complicato di tutti.
Questa è la teoria. Ora, per come è stato fatto.
Il primo passo è stato quello di suddividere i tipi di tempo recuperati da Yahoo! in un array che potremmo usare per controllare gli effetti sul sito web. Ognuno dei 47 diversi tipi di tempo di Yahoo ha il proprio array, che abbiamo diviso in quattro numeri. La prima serie di numeri determina la copertura del cloud, che va da una giornata limpida a nuvole scure e pesanti. Il secondo numero è per la pioggia, che va da nessuna pioggia a forti piogge. Il terzo numero è per vari tipi di tempo aggiuntivi, come neve e fulmini. Infine, il quarto numero è per quello che il nostro stilista Steven chiama "effetto sugo", come nebbia, polvere e nebbia.
$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);Per mantenere il codice e le immagini già pesanti al minimo, abbiamo scelto di riciclare le stesse immagini ovunque possibile. Ad esempio, c'è solo un grafico di pioggia, ed è controllato in base alle informazioni di Yahoo !. Se è necessario che la grafica della pioggia sia leggera, è impostata con un'opacità inferiore per renderla più chiara:
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;}Abbiamo inciampato, piuttosto fortunatamente, sui calcoli per il ciclo lunare Il blog di Stephen A. Zarkos . In linea con il nostro desiderio di mantenere le immagini al minimo, la fase lunare è stata eseguita con un foglio di pixel che mostra 10 diverse fasi lunari. Usando i calcoli di Zarkos, il seguente codice seleziona la parte corretta del foglio di pixel da visualizzare, assicurando che il ciclo lunare corretto sia sempre mostrato sul nostro sito web.
background-position: px 0;La parte finale del progetto, e la più visivamente eccitante, è il tramonto e l'alba in tempo reale. Come accennato, utilizza la longitudine e la latitudine della capitale più vicina della persona che visualizza il sito per estrapolare i tempi del tramonto e dell'alba per loro. Ciò significa che qualcuno che guarda il sito di Los Angeles vedrà il sole sorgere e tramontare tre ore dopo che qualcuno ha guardato lo stesso sito web a New York.
Il tramonto e l'alba consistono in tre effetti di skyline separati che si dissolvono l'uno nell'altro in sequenza. Per il tramonto, la scena del giorno si dissolve lentamente in una scena arancione, prima di dissolversi in una scena notturna. Mentre questo sta accadendo, un sun graphic (che è sempre presente sopra il fold del browser) inizia a scendere e "set". L'intero processo richiede esattamente 300 secondi.
L'ora del tramonto (derivata dalla longitudine e dalla latitudine) viene convertita in un timestamp Unix, che viene quindi memorizzato come variabile. L'ora corrente viene anche trasformata in un timestamp Unix e la differenza tra le due volte viene utilizzata per una funzione di timeout jQuery. Questo è ciò che crea la transizione tra i temi del giorno e della notte.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Gli effetti atmosferici standard, qualunque essi siano, continuano a suonare mentre il sole sta tramontando e alzandosi. Questo può portare a transizioni molto belle, specialmente quando piove molto forte.
Puoi vedere il codice in azione sul Coinvolgi sito Web .
Dato che questo è un sistema che abbiamo sviluppato noi stessi, stiamo continuamente cercando modi per migliorarlo e abbiamo due caratteristiche che abbiamo cercato di aggiungere da quando il sistema meteo è stato lanciato ad agosto di quest'anno.
Il primo è qualcosa che abbiamo appena aggiunto; un'impostazione di posizione basata sui cookie, in base alla quale il visitatore del sito Web può rendere più preciso il proprio meteo inserendo la propria città, città o codice di avviamento postale per recuperare informazioni meteorologiche specifiche per la propria area. Questo è stato in realtà molto facile da fare in quanto l'API meteo di Yahoo accetta codici postali e città come input e salva una chiamata a iponfodb.com. Lo abbiamo testato con varie città di tutto il mondo, da nord lontano fino alle isole Antipodes al largo della costa della Nuova Zelanda, quindi puoi vedere come è il tempo in qualsiasi parte del mondo.
La seconda funzione che introdurremo nell'Anno Nuovo è una casella di controllo in modo che i visitatori possano implementare gli effetti meteo come meglio credono, in modo che le combinazioni di diversi tipi di tempo possano essere viste indipendentemente dal tempo reale. Ad esempio, i visitatori saranno in grado di aumentare l'intensità della pioggia da 0% a 100% con incrementi del 10%. Questo includerà anche un innesco per il tramonto e l'alba, in modo che tutti possano giocare ad essere Ed Harris del Truman Show e creare un'alba quando vogliono.
Hai usato l'API di Yahoo! Cosa hai costruito con esso? Fateci sapere nei commenti qui sotto.
Immagine in primo piano / miniatura, immagine del tempo via Shutterstock.