Cómo transformar los feeds en formatos legibles para el usuario

Este es uno de los puntos menos amigables para el usuario que se pueden encontrar en una web. Cuando un usuario no sabe qué es un feed, ver código XML al abrir un archivo puede resultar muy desconcertante.

Por eso es obligatorio transformar el feed en una salida que muestre información sobre qué es ese archivo y cómo utilizarlo. Feedburner ofrece este servicio, pero estamos limitados a las salidas que ellos nos proponen. Nosotros vamos a ver cómo utilizar XSLT y CSS para crear el documento que queramos. Podéis ver un ejemplo en el feed RSS2 de Mundo geek.

XSLT (eXtensible Stylesheet Language Transformations) es un lenguaje de la W3C que permite transformar documentos XML en otros formatos, por ejemplo HTML. XSLT funciona a base de plantillas, de la forma:

<xsl:template match="foo">
R1
R2
R3...
</xsl:template>

Las reglas R1-R3 se aplican cuando en el documento XML original se encuentre una etiqueta foo. Estas reglas podrían ser, por ejemplo, mostrar un cierto texto, el contenido de la etiqueta, uno de sus atributos, aplicar otra plantilla, etc. Podéis ver un ejemplo en el documento XSLT que he utilizado para transformar el feed RSS2.

Para asociar un documento XML a un documento XSL, y que por lo tanto se muestre la salida especificada con XSLT al abrir el XML, tenemos que añadir una línea indicando dónde encontrar el XSL asociado:

<?xml-stylesheet href="xslt-rss2.xsl" type="text/xsl"?>

En el caso de WordPress abrimos el archivo wp-rss2.php y añadimos la línea:

<?php echo '<?xml-stylesheet href="xslt-rss2.xsl" type="text/xsl"?>'; ?>

después de

<?php echo '<?xml version="1.0" encoding="'.get_settings('blog_charset').'"?'.'>'; ?>

De esta forma hemos indicado que cuando se abra el feed RSS2 de la web se apliquen las transformaciones de xslt-rss2.xsl que se encuentra en el mismo directorio que wp-rss2.php. No tiene ningún misterio.

Podeis utilizar mi archivo XSL o bien modificarlo para que se ajuste a vuestras necesidades, la mayor parte de él es simple código HTML. Simplemente descargarlo y subirlo al directorio en el que se encuentre el feed (el directorio raíz en WordPress). Lo que si deberíais tener en cuenta es que en el XSL, al crear el documento HTML, se incluye una hoja de estilo CSS en la línea 13:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/fscreenmg/style.css" />

Modificadlo para que apunte a la hoja de estilo que queráis utilizar y voilà!.

Comentarios
  1. Cómo transformar los feeds en formatos legibles para el usuario…

    Este es uno de los puntos menos amigables para el usuario que se pueden encontrar en una web. Cuando un usuario no sabe qué es un feed, ver código XML al abrir un archivo puede resultar muy desconcertante.

    Por eso es obligatorio transformar el fee…

    Responder

  2. Genial artículo. Estoy de acuerdo casi al 100% con meneame. Simplemente no creo que sea “obligatorio” transformar los feeds, pero si está muy bien, el poner y explicar lo que es es un feed, para aquellos usuarios que no lo sepan, pornerlos sobre aviso, y así puedan actuar en consecuencia.

    Salu2.

    Responder

  3. Gracias, muy buen articulo.

    Aqui en Feedburner estamos de acuerdo que tenemos que hacer todo mas facil para los usuarios, incluso la vista del feed.

    Sobre las limitaciones de nuestro servicio de Browser Friendly, es cierto que la lista de servicios se enfocan en los agregadores mas populares. Esto es segun el tipo de feed o podcast. Esto se hizo por cuestion de espacio e uso pero sabemos que no es completo para muchos.

    Tambien se ofrece el formato universal feed:// para todo los lectores de RSS que lo utilizan.

    Si tenemos planes en el futuro de ofrecer estilos de BrowserFriendly que se pueden configurar por los autores o quizas usar un version propia del autor. Para la segunda opcion, este articulo es bastante util.

    Si desea, no dude en dejarnos sugerencias a traves de nuestro foro, http://forums.feedburner.com

    Estamos dispuestos escuchar cualquier idea y gracias por su articulo.

    Responder

  4. […] Por un lado, Mundo Geek explica cómo usar XSLT para hacer legibles los archivos XML de los feeds. Por el otro, publi.sh (buenísimo, el nombre de dominio) es un servicio, que puede resultar muy útil, para generar feeds sin necesidad de una página web (sin conocimienos de programación y con facilidad). […]

    Responder

  5. […] Zootropo de MundoGeek hace días que publicó un gran articulo para lograr ofrecer nuestro Feed RSS totalmente legible y obviamente amigable para el usuario que si a penas conoce lo que es un lector de Feeds. Algo similar a lo que nos ofrece Feedburner. Feedburner ofrece este servicio, pero estamos limitados a las salidas que ellos nos proponen. Nosotros vamos a ver cómo utilizar XSLT y CSS para crear el documento que queramos. Podeis ver un ejemplo en el feed RSS2 de Mundo geek. […]

    Responder

  6. […] Llevo 8 meses trabajando con esta tecnología en el trabajo y hacía ya tiempo que quería hacer un plugin para mostrar esto, pero WordPress no trae por defecto la posibilidad de cambiar las cabeceras tus feeds, pero los chicos de MundoGeek han hecho una adaptación modificando unicamente el fichero wp-rss2.php. […]

    Responder

  7. Tengo un problema con esto. Lo he hecho y funcionó, pero sin haber cambiado nada ya no va.

    Mi RSS está aquí: http://prophetman.elite-tek.com/feed/

    No sé si os irá a vosotros o qué cpor que no sé que problema hay 🙁
    El mensaje de error es:
    Error al cargar la hoja de estilo: Una hoja de estilo XSLT no tiene tipo MIME XML.http://prophetman.elite-tek.com/feed/xslt-rss2.xsl

    Alguna idea?

    Responder

  8. No existe el archivo http://prophetman.elite-tek.com/feed/xslt-rss2.xsl
    ¿Seguro que lo has subido a ese directorio?

    Responder

  9. hmm esque lo del /feed/ es un alias de esos del WordPress, voy acrear el directorio y probar a ver, pero parece que tienes razon, precisamente acabo de probar el link real y ese si que va:
    http://prophetman.elite-tek.com/wp-rss2.php

    Responder

  10. […] Tambien podemos usar el sistema que usaron los chicos de Mundo Geek […]

    Responder

  11. K3NNY

    Una pregunta. En el feed que estan usando actualmente…

    http://feeds.feedburner.com/mundogeekfeed

    …los botones de “subscribirse ahora” los agregaron ustedes (mundogeek) o feedburner?

    Responder

  12. […] Mundo Geek – Cómo transformar los feeds en formatos legibles para el usuario Carlos Leopoldo — Dale formato a tus RSS Feed con CSS « Anterior: Editores online de imágenes […]

    Responder

  13. Moya

    Hola a todos tengo un problema a la hora de crear xml, me despliega todo el codigo pero me dice que no estoy empezando con caracters no validos, pero ya intente subiendo todo a mi sitio y aun asi me da un error de hoja de estilo, quisiera saber como puedo hacer para evitar este error y poder publicar mi propio feed. Gracias y saludos a todos!!!

    Responder

  14. some genuinely interesting info , well written and loosely user friendly .

    Responder

  15. Great post, you have pointed out some superb points , I likewise believe this s a very excellent website.

    Responder

  16. Monica

    Este blog es increíble. ¿Cómo puedo hacer que se vea así de bien?

    Responder

Deja un comentario