En 2006, mientras trabajaba en una agencia de diseño en Cardiff, Gales, concebí una idea para presentar en nuestro sitio web las condiciones climáticas actuales fuera de nuestra oficina. Quería hacer que nuestro sitio web fuera completamente atractivo y mostrarles a nuestros visitantes y clientes lo que estábamos experimentando en la vida real todos los días, en tiempo real.
Después de hacer una investigación exhaustiva, descubrí que el mejor punto de partida para esto es la API meteorológica de Yahoo! Porque da condiciones climáticas en un formato consistente y utilizable. En ese momento, sin embargo, la única forma de representar realmente el clima en un sitio web era mediante el uso de Flash. El tiempo de desarrollo solo fue suficiente para asustar la idea de las mentes de los directores de la compañía, y nunca pasó de la etapa de concepción.
Ahora, seis años después, y como director técnico de mi propia compañía, volví a visitar la idea. Una búsqueda en varios sitios web, blogs y foros reveló que, incluso seis años después, nadie ha hecho algo como esto, por lo que tendríamos que crear el código para hacerlo. Además, en los seis años desde que se concibió la idea, mis ambiciones han crecido. Ya no solo quiero que el sitio web muestre el clima fuera de nuestra oficina; quiero que muestre el clima fuera de la ventana de la persona que visita el sitio web.
Creé una lista de deseos de funciones que contenían actualizaciones de clima en vivo, horas de puesta y salida del sol, y día y noche, e incluso ciclos lunares, y se las di a Steven, nuestro desarrollador, para que así fuera.
Una vez más, Weather API de Yahoo demostró ser la más consistente, ofreciendo códigos muy precisos para varios tipos de clima. Con esta información, podríamos crear una matriz que podría controlar nuestra visualización del tiempo.
Sin embargo, aunque los datos de Yahoo son tan precisos como la ubicación en la que pudimos alimentarlo desde el sitio web, y debido a las fragilidades de Internet Explorer de Microsoft, no pudimos utilizar la geolocalización para recuperar una ubicación precisa. para todos los que navegan por el sitio web. Por lo tanto, tuvimos que conformarnos con la siguiente mejor opción y usar el sitio web IPInfoDB para recuperar la capital más cercana o la ciudad más cercana, según la dirección IP del usuario.
En los Estados Unidos, esto generalmente da como resultado el capital del estado en que reside la persona que mira el sitio web. Aquí, en el Reino Unido, se establece de manera predeterminada en Londres, independientemente de en qué parte del Reino Unido se encuentre la persona; con suerte, Microsoft algún día se pondrá al día con el resto del mundo de los navegadores y nos permitirá usar la geolocalización.
Al utilizar la dirección IP del usuario e ingresarla en IPInfoDB, pudimos extrapolar el país, estado o provincia, y la ciudad o pueblo de la persona que visita el sitio web. Introduciendo esto en la API de Yahoo nos dio el clima actual para esa ubicación en particular.
Los horarios de puesta y salida del sol son precisos cada día y se calculan sobre la marcha en función de la longitud y la latitud, también derivados de Weather API de Yahoo.
Finalmente, está la fase lunar, que, a pesar de que se basa únicamente en la fecha como variable, resultó ser el cálculo más complicado de todos.
Esa es la teoría. Ahora, por cómo se hizo.
El primer paso fue dividir los tipos de clima recuperados de Yahoo! en una matriz que podríamos usar para controlar los efectos en el sitio web. Cada uno de los 47 diferentes tipos de clima de Yahoo tiene su propia matriz, que dividimos en cuatro números. El primer conjunto de números dicta la cobertura de la nube, desde un día claro hasta nubes oscuras. El segundo número es para la lluvia, desde lluvia hasta lluvias intensas. El tercer número es para varios tipos de clima adicionales, como nieve y rayos. Finalmente, el cuarto número es para lo que nuestro diseñador Steven llama los "efectos de salsa", como la niebla, el polvo y la niebla.
$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);Para mantener al mínimo el código y las imágenes pesados, elegimos reciclar las mismas imágenes siempre que sea posible. Por ejemplo, solo hay un gráfico de lluvia y está controlado según la información de Yahoo !. Si se requiere que el gráfico de lluvia sea liviano, se establece con una opacidad menor para que sea más claro:
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;}Tropezamos, afortunadamente, con los cálculos del ciclo lunar en Blog de Stephen A. Zarkos . De acuerdo con nuestro deseo de mantener las imágenes al mínimo, la fase lunar se hizo con una hoja de píxeles que muestra 10 fases diferentes de la luna. Usando los cálculos de Zarkos, el siguiente código selecciona la parte correcta de la hoja de píxeles para mostrar, asegurando que siempre se muestre el ciclo lunar correcto en nuestro sitio web.
background-position: px 0;La parte final del proyecto, y la más visualmente emocionante, es el atardecer y el amanecer en tiempo real. Como se mencionó, esto usa la longitud y la latitud de la ciudad capital más cercana de la persona que visita el sitio web para extrapolar las horas de la puesta del sol y el amanecer para ellos. Esto significa que alguien que mire el sitio web en Los Ángeles verá la salida del sol y se establecerá tres horas después de que alguien busque en el mismo sitio web en Nueva York.
La puesta de sol y el amanecer consisten en tres efectos de horizonte separados que se disuelven entre sí en secuencia. Para el atardecer, la escena del día se disuelve lentamente en una escena naranja, antes de disolverse en una escena nocturna. Mientras esto sucede, un gráfico solar (que siempre está presente arriba del pliegue del navegador) comienza a descender y "establecerse". Todo este proceso lleva exactamente 300 segundos.
El tiempo de puesta del sol (derivado de la longitud y la latitud) se convierte en una marca de tiempo Unix, que luego se almacena como una variable. La hora actual también se convierte en una marca de tiempo Unix, y la diferencia entre las dos veces se usa para una función de tiempo de espera jQuery. Esto es lo que crea la transición entre los temas diurno y nocturno.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Los efectos climáticos estándar, sean los que sean, continúan mientras el sol se pone y sube. Esto puede conducir a algunas transiciones bastante bellas, especialmente cuando está lloviendo mucho.
Puedes ver el código en acción en el Participar en el sitio web .
Como este es un sistema que hemos desarrollado nosotros mismos, estamos continuamente buscando formas de mejorarlo y tenemos dos características que buscamos agregar desde que se lanzó el sistema meteorológico en agosto de este año.
El primero es algo que acabamos de agregar; una configuración de ubicación basada en cookies, mediante la cual el visitante del sitio web puede hacer que su visualización del tiempo sea más precisa ingresando su ciudad, ciudad o código postal para recuperar información meteorológica específica para su área. Esto fue en realidad muy fácil de hacer ya que la API meteorológica de Yahoo acepta códigos postales y ciudades como entradas, y guarda una llamada a iponfodb.com. Hemos probado esto con varias ciudades de todo el mundo, desde lugares tan lejanos como el norte de Canadá hasta las Antípodas frente a la costa de Nueva Zelanda, por lo que puedes ver cómo es el clima en cualquier parte del mundo.
La segunda función que presentaremos en el Año Nuevo es una caja de control para que los visitantes puedan implementar los efectos del clima como mejor les parezca, de modo que las combinaciones de diferentes tipos de clima se pueden ver independientemente del clima real. Por ejemplo, los visitantes podrán aumentar la intensidad de la lluvia de 0% a 100% en incrementos de 10%. Esto también incluirá un disparador para el atardecer y el amanecer, para que todos puedan jugar a ser Ed Harris de The Truman Show y crear un amanecer cuando lo deseen.
¿Has usado Yahoo! 'S Weather API? ¿Qué construiste con eso? Háganos saber en los comentarios a continuación.
Imagen / miniatura destacada, imagen del tiempo a través de Shutterstock.