En 2006, alors que je travaillais dans une agence de design à Cardiff, au Pays de Galles, j'ai eu l'idée de présenter sur notre site Web les conditions météorologiques actuelles à l'extérieur de notre bureau. Je souhaitais que notre site Web soit pleinement interactif et que nous montrions à nos visiteurs et clients ce que nous vivions dans la vie de tous les jours, en temps réel.
Après avoir effectué des recherches approfondies, j'ai découvert que le meilleur point de départ pour cela était l'API météo de Yahoo !, car elle fournit des conditions météorologiques dans un format cohérent et utilisable. À l’époque, cependant, le seul moyen de représenter réellement la météo sur un site Web était d’utiliser Flash. Le temps de développement seul a suffi à effrayer l'idée des dirigeants de l'entreprise et n'a jamais dépassé l'étape de la conception.
Six ans plus tard, en tant que directeur technique de ma propre entreprise, j'ai revisité cette idée. Une recherche dans divers sites Web, blogs et forums a révélé que, même six ans plus tard, personne n’avait fait quelque chose comme ça, il fallait donc créer le code pour le faire. De plus, au cours des six années écoulées depuis la conception de l’idée, mes ambitions ont augmenté. Je ne veux plus simplement que le site Web affiche la météo en dehors de notre bureau - je veux qu'il affiche la météo en dehors de la fenêtre de la personne qui regarde le site Web.
J'ai créé une liste de souhaits contenant des mises à jour météo en temps réel, des heures de coucher et de lever du soleil, ainsi que des cycles jour et nuit et même des cycles lunaires.
Une fois encore, l’API météo de Yahoo s’est révélée être la plus cohérente, offrant des codes très précis pour différents types de conditions météorologiques. Avec cette information, nous pourrions créer un tableau capable de contrôler notre affichage météo.
Cependant, aussi bonnes que soient les données de Yahoo, elles étaient aussi précises que l’emplacement que nous avons pu obtenir du site Web, et en raison des faiblesses de Microsoft Internet Explorer, nous n’avons pas pu utiliser la géolocalisation pour récupérer un emplacement précis. pour tous ceux qui naviguent sur le site. Nous avons donc dû nous contenter de la meilleure solution et utiliser le site Web IPInfoDB pour récupérer la capitale la plus proche ou la grande ville la plus proche, en fonction de l'adresse IP de l'utilisateur.
Aux États-Unis, cela se traduit généralement par le capital de l'État dans lequel réside la personne visitant le site. Ici, au Royaume-Uni, Londres utilise par défaut, peu importe où se trouve la personne au Royaume-Uni; Espérons que Microsoft rattrapera un jour le reste du monde des navigateurs et nous permettra d’utiliser la géolocalisation.
En utilisant l'adresse IP de l'utilisateur et en la saisissant dans IPInfoDB, nous avons pu extrapoler le pays, l'état ou la province, ainsi que la ville ou la ville de la personne visitant le site Web. En introduisant ceci dans l’API de Yahoo, nous avons obtenu la météo actuelle pour cet emplacement.
Les heures du coucher et du lever du soleil sont précises chaque jour et sont calculées à la volée en fonction de la longitude et de la latitude, également dérivées de l’API météo de Yahoo.
Enfin, il y a la phase de la lune, qui, même si elle est basée uniquement sur la date en tant que variable, s'est révélée être le calcul le plus compliqué de tous.
C'est la théorie. Maintenant, pour la façon dont cela a été fait.
La première étape consistait à diviser les types de temps récupérés de Yahoo! dans un tableau que nous pourrions utiliser pour contrôler les effets sur le site. Chacun des 47 types de temps différents de Yahoo a son propre tableau, que nous avons divisé en quatre nombres. Le premier ensemble de chiffres indique la couverture nuageuse, allant d’un jour clair à un nuage lourd sombre. Le deuxième chiffre concerne les pluies, allant de l’absence de pluie à la forte pluie. Le troisième chiffre concerne différents types de temps, tels que la neige et la foudre. Enfin, le quatrième chiffre correspond à ce que notre designer Steven appelle les «effets de sauce», tels que le brouillard, la poussière et la brume.
$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);Afin de limiter au maximum le code et les images déjà lourds, nous avons choisi de recycler les mêmes images dans la mesure du possible. Par exemple, il n'y a qu'un seul graphique de pluie, et il est contrôlé en fonction des informations de Yahoo !. Si le graphique de pluie doit être léger, il est réglé avec une opacité plus faible pour le rendre plus clair:
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;}Heureusement, nous avons trébuché sur les calculs du cycle de la lune sur Le blog de Stephen A. Zarkos . En accord avec notre désir de garder les images au minimum, la phase de lune a été réalisée avec une feuille de pixels montrant 10 phases différentes de la lune. En utilisant les calculs de Zarkos, le code suivant sélectionne la partie correcte de la feuille de pixels à afficher, garantissant que le cycle de lune correct est toujours affiché sur notre site Web.
background-position: px 0;La dernière partie du projet, et le plus visuellement excitant, est le coucher du soleil et le lever du soleil en temps réel. Comme mentionné, cette option utilise la longitude et la latitude de la capitale la plus proche de la personne qui consulte le site Web pour extrapoler les heures du coucher et du lever du soleil. Cela signifie que quelqu'un qui regarde le site Web de Los Angeles verra le soleil se lever et se coucher trois heures après avoir consulté le même site Web à New York.
Le coucher et le lever du soleil consistent en trois effets d'horizon distincts qui se dissolvent l'un dans l'autre en séquence. Pour le coucher du soleil, la scène du jour se dissout lentement dans une scène orange avant de se dissoudre dans une scène de nuit. Pendant que cela se produit, un graphique solaire (qui est toujours présent au-dessus du pli du navigateur) commence à descendre et à se "définir". Tout ce processus prend exactement 300 secondes.
L'heure du coucher du soleil (dérivée de la longitude et de la latitude) est convertie en un horodatage Unix, qui est ensuite stocké en tant que variable. L'heure actuelle est également transformée en horodatage Unix et la différence entre les deux temps est utilisée pour une fonction de délai d'attente jQuery. C'est ce qui crée la transition entre les thèmes de jour et de nuit.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Les effets météorologiques standard, quels qu'ils soient, continuent de se produire pendant que le soleil se couche et se lève. Cela peut conduire à de très belles transitions, surtout quand il pleut très fort.
Vous pouvez voir le code en action sur le Engager le site Web .
Comme il s'agit d'un système que nous avons développé nous-mêmes, nous cherchons continuellement des moyens de l'améliorer et nous avons deux caractéristiques que nous cherchions à ajouter depuis le lancement du système météorologique en août de cette année.
Le premier est quelque chose que nous venons d'ajouter; un paramètre d'emplacement basé sur les cookies, dans lequel le visiteur du site Web peut rendre son affichage météorologique plus précis en entrant sa ville, sa ville ou son code postal afin de récupérer des informations météorologiques spécifiques pour sa région. C'était en fait très facile à faire car l'API météo de Yahoo accepte les codes postaux et les villes comme entrées, et enregistre un appel sur iponfodb.com. Nous avons testé cela avec diverses villes du monde entier, depuis le nord du Canada jusqu'aux îles des antipodes au large des côtes de la Nouvelle-Zélande. Vous voyez donc quel temps il fait partout dans le monde.
La deuxième caractéristique que nous introduirons dans la nouvelle année est une boîte de contrôle pour que les visiteurs puissent mettre en œuvre les effets météorologiques comme ils l'entendent, de sorte que les combinaisons de différents types de temps peuvent être vues indépendamment du temps qu'il fait. Par exemple, les visiteurs pourront augmenter l'intensité de la pluie de 0% à 100% par incréments de 10%. Cela comprendra également un déclencheur pour le coucher du soleil et le lever du soleil, afin que tout le monde puisse jouer à Ed Harris du Truman Show et créer un lever de soleil quand bon leur semble.
Avez-vous utilisé l'API météo de Yahoo! Qu'est-ce que vous avez construit avec ça? Faites-nous savoir dans les commentaires ci-dessous.