simpleWeather: El tiempo en el blog con jQuery

simpleWeather es un plugin de jQuery que sirve para mostrar informacion sobre el estado del tiempo del tiempo en un lugar definido y que para eso, utiliza el API Weather feed de Yahoo.

El script es muy simple porque, en realidad, no genera la salida sino que simplemente obtiene los datos así que la parte complicada del asunto es que nosotros debemos armar el HTML correspondiente.

Una vez que agregamos el script a la plantilla, deberíamos crear la función que es lo que mostrará el resultado; básicamente es algo así:

$.simpleWeather({
  location: 'xxxxxxxxxxx',
  unit: 'c',
  success: function(weather) { ... },
  error: function(error) { ... }
});

donde location es la ciudad y unit indica la unidad de la temperatura.

Este es un ejemplo simple:

<script type="text/javascript">
//<![CDATA[
$(function() {
  $.simpleWeather({
    location: 'xxxxxxxxxxx',
    unit: 'c',
    success: function(weather) {
       html = '<h2>'+weather.city+'</h2>';
       html += '<img src="'+weather.image+'"/>';
       html += '<p>'+weather.temp+'° '+weather.units.temp+'<span>'+weather.currently+'</span></p>';
       $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});
//]]>
</script>

Así que ahora, bastaría colocar el DIV de salida allí donde quisiéramos mostrarlo:

<div id="weather"></div>

Y un poco de CSS:

<style>
#weather {
  background-color: #456;
  border: 4px solid #ABC;
  overflow: hidden;
  padding: 10px 20px 0;
  position: relative;
  text-align: center;
  width: 185px;
}
#weather h2 {
  color: #DEF;
  font-family: Century Gothic;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: -3px;
  margin: 0;
  text-align: center;
}
#weather img {
  margin-top: 10px;
}
#weather p {
  color: #DEF;
  font-family: Times New Roman;
  font-size: 48px;
  left: 80px;
  letter-spacing: -6px;
  margin: 0;
  position: absolute;
  top: 140px;
}
#weather p span {
  color: #ABC;
  display: block;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: lowercase;
}
</style>