JMiur [E]

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>

8 comentarios:

Martin Rocha  

Que buen resultado da y no hay necesidad de ningun widget.
Ah Jmiur con la nuevo y lamentable diseño la opcion de redireccionar al no usar "www" por mas que le des en la casilla no te la deja activa a pesar de que ya agregue el cname que dice en las instrucciones en ingles.
Sabes como hay que hacer jmiur? saludos

Lautarorx  

Eso también me pasa a mi, maldito Blogger...desde que liberaron la nueva versión anda cada vez peor...

JMiur  

No conozco el sistema de dominios propios en Blogger. No los usé jamás pero, si sé que han hecho cambios en esa parte.

Francisco  

Disculpa pero que formato de localidad pones en location se te agradece de antemano muchas gracias

JMiur  

Puedes usar esta herramienta u otra similar para determinar ese dato.

Responder
Sergio de León López  

QUE TAL AMIGOS EL EJEMPLO ESTA GENIAL PERO QUISIERA SABER COMO PONGO LOS RESULTADOS EN ESPAÑOL.
GRACIAS, SALUDOS.

JMiur  

Eso depende de los desarrolladores; si la opción no existe, no es posible hacerlo.

Ivan  

a mi tambien me gustaria saber si esta la opción para verlo en español, o que alternativas hay a esta.. creo que esta la de weather channel.. incluso en la pagina de yahoo usan la de weather.. alguna sugerencia.

gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR