Un cliente de noticias en HTML5

Un cliente de agregación RSS en HTML5 con YQL

HTML5 y JavaScript son una potente combinación para hacer ricas aplicaciones móviles o simplemente para colgar en nuestro hosting.

Además, combinadas con los recursos de la red, ofrecen gran flexibilidad y facilidad de uso.

Hoy vamos a ver un ejemplo usando un gran regalo que Yahoo! nos ha hecho a los programadores de aplicaciones móviles y la Web, YQL.

Introducción

Cuando hablamos de hacer un cliente de noticias, que están en XML, y como nuestro cliente va a ser una página Web HTML5, lo primero en lo que pensamos es AJAX.

AJAX es el arte de intercambiar información con un servidor, actualizando partes de una página Web sin recargargar la página entera.

Pero AJAX tiene una gran limitación, y es que, por razones de seguridad, no se pueden intercambiar información con sitios Web diferentes al original donde está alojada la página.

Para solventar este problema, vamos a usar YQL.

¿Qué es YQL?

El Yahoo Query Language, o lenguaje de consulta de Yahoo! es una herramienta para consultar recursos (en nuestro caso documentos XML) como si de base de datos se tratase.

Para nuestro lector RSS, esto no es más que un proxy (un intermediario) con un doble beneficio: 

• Evitar la limitación de consulta cross-domain de AJAX (no podemos usar una XMLHttpRequest a un sitio Web que no sea donde residen las páginas HTML que lo contienen).
• Podemos consultar un RSS como si de una base de datos se tratase (ej. "SELECT * FROM ... ").

Fuente: http://developer.yahoo.com/yql/guide/yql-tutorials.html

La consola YQL

En http://developer.yahoo.com/yql/console/ tenemos la consola YQL para probar nuestras consultas.

En nuestro caso vamos a probar cómo generar una cadena JSON a partir del XML generado por el canal RSS de noticias que estemos trabajando.
En nuestro caso vamos a usar el canal de últimas noticias del Diario Ideal de Jaén.
Si abrimos la consola y escribimos el siguiente código:

select * from rss where url="http://www.ideal.es/jaen/rss/feeds/ultima.xml"

Veremos cómo el servicio de Yahoo! nos devuelve la consulta debidamente formateada en JSON (también podríamos pedirle que lo haga en XML).

Preparando el enlace para hacer la consulta

Vamos a hacer un proxy con JSONP.
Preparamos la consulta REST que nos devolverá una cadena JSON:

<script src='http://query.yahooapis.com/v1/public/yql?q=select * from rss where url="http://www.ideal.es/jaen/rss/feeds/ultima.xml"&format=json&callback=mi_funcion'>

</script>

Ahora preparo en mi página un DIV donde aparecerán los resultados y que será el que se reescriba:

<div id='resultados'>
Esto será eliminado por los titulares de las noticias.
</div>

Preparando la función "callback" 

En nuestra cabecera o bien en un fichero "js" aparte, escribimos nuestra función "callback", que es la función que pasamos como interfaz en la consulta anterior.

function mi_funcion(o){  
      var items = o.query.results.item;  
      var output = 'prueba';  
      var no_items=items.length;  
      for(var i=0;i<no_items;i++){  
        var title = items[i].title;  
        var link = items[i].link;  
        var desc = items[i].description;  
        output += "<h4><a href='" + link + "'>"+title+"</a></h4>" + desc + "<hr/>";  
      }  
      // Place news stories in div tag  
      document.getElementById('resultados').innerHTML = output;    
    }  

Si todo ha ido bien, tendremos los titulares y las descripciones de las noticias en nuestra página Web del canal RSS que hemos comentado.