Als ich 2006 in einer Designagentur in Cardiff, Wales arbeitete, hatte ich die Idee, auf unserer Website die aktuellen Wetterbedingungen außerhalb unseres Büros zu präsentieren. Ich wollte unsere Website voll und ganz in Szene setzen und unseren Besuchern und Kunden jeden Tag in Echtzeit zeigen, was wir im wirklichen Leben erlebt haben.
Nach eingehender Recherche entdeckte ich, dass der beste Ausgangspunkt dafür die Wetter-API von Yahoo! ist, da sie Wetterbedingungen in einem konsistenten, brauchbaren Format bietet. Zu dieser Zeit war die einzige Möglichkeit, das Wetter auf einer Website darzustellen, Flash. Die Entwicklungszeit allein reichte aus, um die Idee aus den Köpfen der Geschäftsführer des Unternehmens zu erschrecken, und sie ging nie über die Konzeptionsphase hinaus.
Jetzt, sechs Jahre später, und als Technischer Direktor meiner eigenen Firma, habe ich die Idee noch einmal überarbeitet. Eine Suche auf verschiedenen Websites, Blogs und Foren hat gezeigt, dass selbst sechs Jahre zuvor niemand etwas in der Art gemacht hat, also müssten wir den Code dafür erstellen. In den sechs Jahren seit der Idee sind meine Ambitionen gewachsen. Ich möchte nicht nur, dass die Website das Wetter außerhalb unseres Büros anzeigt - ich möchte, dass das Wetter außerhalb des Fensters der Person angezeigt wird, die die Website anzeigt.
Ich erstellte eine Wunschliste mit Funktionen, die Live-Wetter-Updates, Sonnenauf- und -untergangszeiten sowie Tag- und Nacht- und sogar Mondzyklen beinhalteten, und gab sie unserem Entwickler Steven, um es so zu machen.
Wieder einmal erwies sich Yahoo Weather API als die konsistenteste und bietet sehr genaue Codes für verschiedene Wettertypen. Mit diesen Informationen könnten wir ein Array erstellen, das unsere Wetteranzeige steuern könnte.
So gut wie die Daten von Yahoo sind, waren sie nur so genau wie der Standort, den wir von der Website aus füttern konnten, und aufgrund der Schwächen von Microsofts Internet Explorer konnten wir keine Geolokation verwenden, um einen genauen Standort abzurufen für jeden, der die Website durchstöbert. Wir mussten uns also mit der nächstbesten Lösung zufrieden geben und die Website IPInfoDB verwenden, um anhand der IP-Adresse des Benutzers das nächstgelegene Kapital oder die nächstgelegene Großstadt abzurufen.
Überall in den USA ergibt sich daraus normalerweise das Kapital des Landes, in dem sich die Person auf der Website befindet. Hier im Vereinigten Königreich wird standardmäßig in London angegeben, unabhängig davon, wo in Großbritannien die Person ansässig ist. hoffentlich wird Microsoft eines Tages den Rest der Browserwelt einholen und uns erlauben, Geolocation zu verwenden.
Mithilfe der IP-Adresse des Benutzers und der Eingabe in IPInfoDB konnten wir das Land, den Bundesstaat oder die Provinz und die Stadt der Person, die die Website anzeigt, extrapolieren. Wenn wir dies in die Yahoo API eingaben, erhielten wir das aktuelle Wetter für diesen bestimmten Ort.
Die Sonnenauf- und -untergangszeiten sind jeden Tag genau und werden auf der Grundlage von Längen- und Breitengrad berechnet, die ebenfalls von Yahoo Weather API abgeleitet werden.
Schließlich gibt es die Mondphase, die, obwohl sie nur auf dem Datum als Variable basiert, sich als die komplizierteste Berechnung aller erwies.
Das ist die Theorie. Nun, wie es gemacht wurde.
Der erste Schritt bestand darin, die von Yahoo! in ein Array, mit dem wir die Effekte auf der Website steuern könnten. Jeder der 47 verschiedenen Wettertypen von Yahoo hat sein eigenes Array, das wir in vier Zahlen unterteilt haben. Die erste Reihe von Zahlen diktiert die Wolkendecke, von einem klaren Tag bis zu dunklen schweren Wolken. Die zweite Zahl ist für den Regen bestimmt, von keinem Regen bis zu starkem Regen. Die dritte Nummer ist für verschiedene zusätzliche Wettertypen, wie Schnee und Blitz. Schließlich ist die vierte Zahl für das, was unser Designer Steven die "Soßeffekte" nennt, wie Nebel, Staub und Nebel.
$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);Um den ohnehin schon schweren Code und die Bilder auf ein Minimum zu reduzieren, haben wir uns entschlossen, dieselben Bilder nach Möglichkeit zu recyceln. Zum Beispiel gibt es nur eine Regengrafik, die anhand der Informationen von Yahoo! gesteuert wird. Wenn die Regengrafik hell sein soll, wird sie mit einer niedrigeren Deckkraft eingestellt, um sie heller zu machen:
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;}Wir sind eher glücklicherweise über die Berechnungen für den Mondzyklus gestolpert Stephen A. Zarkos Blog . Im Einklang mit unserem Wunsch, Bilder auf ein Minimum zu beschränken, wurde die Mondphase mit einem Pixel-Blatt durchgeführt, das 10 verschiedene Mondphasen zeigt. Mit den Berechnungen von Zarkos wählt der folgende Code den richtigen Teil des anzuzeigenden Pixelblatts aus, um sicherzustellen, dass der korrekte Mondzyklus immer auf unserer Website angezeigt wird.
background-position: px 0;Der letzte Teil des Projekts und der visuell aufregendste ist der Sonnenuntergang und der Sonnenaufgang in Echtzeit. Wie erwähnt, verwendet dies den Längen- und Breitengrad der nächsten Hauptstadt der Person, die die Website betrachtet, um die Sonnenauf- und -untergangszeiten für sie zu extrapolieren. Das bedeutet, dass jemand, der die Website in Los Angeles betrachtet, die Sonne aufgehen sieht und drei Stunden nach dem Besuch derselben Website in New York untergeht.
Der Sonnenuntergang und der Sonnenaufgang bestehen aus drei verschiedenen Skyline-Effekten, die sich nacheinander auflösen. Für den Sonnenuntergang löst sich die Tagesszene langsam in eine orange Szene auf, bevor sie sich in eine Nachtszene auflöst. Während dies geschieht, beginnt eine Sonnengrafik (die immer über der Browserfalte vorhanden ist) abzusteigen und zu "setzen". Dieser ganze Vorgang dauert genau 300 Sekunden.
Die Sonnenuntergangszeit (abgeleitet von der Längen- und Breitengrad) wird in einen Unix-Zeitstempel umgewandelt, der dann als Variable gespeichert wird. Die aktuelle Zeit wird ebenfalls in einen Unix-Zeitstempel umgewandelt, und der Unterschied zwischen den beiden Zeiten wird für eine jQuery-Zeitüberschreitungsfunktion verwendet. Dies schafft den Übergang zwischen den Themen Tag und Nacht.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Die Standard-Wettereffekte, was auch immer sie sein mögen, spielen weiter, während die Sonne untergeht und aufgeht. Dies kann zu einigen schönen Übergängen führen, besonders wenn es sehr stark regnet.
Sie können den Code in Aktion auf der Engage Website .
Da es sich um ein System handelt, das wir selbst entwickelt haben, suchen wir ständig nach Wegen, es zu verbessern, und wir haben zwei Funktionen, die wir hinzufügen wollten, seit das Wettersystem im August dieses Jahres eingeführt wurde.
Das erste ist etwas, das wir gerade hinzugefügt haben; eine Cookie-basierte Standorteinstellung, wobei der Besucher der Website durch die Eingabe seiner Stadt, seiner Stadt oder Postleitzahl die Wetteranzeige genauer anzeigen kann, um spezifische Wetterinformationen für seine Region abzurufen. Dies war eigentlich sehr einfach zu tun, da die Wetter-API von Yahoo Postleitzahlen und Städte als Eingaben akzeptiert und einen Anruf bei iponfodb.com speichert. Wir haben das mit verschiedenen Städten aus der ganzen Welt getestet, von so weit weg wie Nordkanada bis zu den Antipodes-Inseln vor der Küste von Neuseeland - so sehen Sie, wie das Wetter überall auf der Welt ist.
Das zweite Feature, das wir im neuen Jahr einführen werden, ist eine Steuerbox, damit die Besucher die Wettereffekte nach eigenem Ermessen umsetzen können, so dass die Kombinationen der verschiedenen Wettertypen unabhängig vom Wetter angezeigt werden können. Zum Beispiel können Besucher die Intensität des Regens in 10% -Schritten von 0% auf 100% erhöhen. Dies beinhaltet auch einen Trigger für den Sonnenuntergang und Sonnenaufgang, so dass jeder Ed Harris von The Truman Show spielen und einen Sonnenaufgang erstellen kann, wann immer er möchte.
Haben Sie Yahoo! 'S Wetter-API verwendet? Was hast du damit gebaut? Lassen Sie es uns in den Kommentaren unten wissen.
Ausgewähltes Bild / Vorschaubild, Wetterbild über Shutterstock.