Insertar noticias RSS con Dreamweaver

En este artículo haremos una rápida revisión a la tecnología RSS y a cómo dotar a nuestra página web de contenido actualizado gracias a estas distribuciones.

Empezaremos explicando, brevemente, en qué consiste XML. XML es un lenguaje de marcas muy parecido a HTML, pero con la diferencia de que en HTML existen etiquetas preestablecidas (como TABLE, P, IMG, etc...), mientras que XML es capaz de soportar cualquier tipo de etiquetas que tú nombres.

Este sistema tiene un objetivo muy sencillo, el de organizar información para su almacenamiento y distribución. Como puedes ver esta es la mayor diferencia entre ambos lenguajes, pues HTML está orientado a cómo se debe mostrar la información y XML a organizarla. Un ejemplo muy claro de lo que sería un archivo XML es el siguiente:

En este ejemplo creamos una base de datos en la que está almacenada la información de nuestra biblioteca. Observa cómo las etiquetas que conforman el archivo no son más que 'identificadores que hemos creado para este fin.

Así que podemos llegar a la conclusión de que XML es un lenguaje de tratamiento de información y HTML de formateo.

Pero, ¿qué es RSS? La respuesta viene rápidamente: RSS es un tipo específico de XML orientado a sitios de noticias y weblogs. Su finalidad consiste en poder compartir información con el resto del mundo de una forma rápida, sencilla y adaptable.

La organización de este tipo de información suele ser muy parecida de un sitio a otro. Aquí mostraremos un fragmento que corresponde al RSS de elpais.es:

Como puedes ver este fragmento recoge una entrada individual (que en este caso se corresponde con una noticia al tratarse de un periódico), y nos muestra la información sintetizada de ésta.

Prácticamente todos los RSS constarán de un título, descripción y enlace a la entrada en detalle. Muchos sitios enriquecerán esta información mostrando también el autor, su fecha de publicación o incluso su categoría dentro del sitio.

Desde este artículo veremos cómo podemos incluir esta información en nuestra web mediante Macromedia Dreamweaver y a formatearla para que se ajuste a la apariencia de nuestro sitio.

Como viene siendo habitual en este programa, podremos incluir noticias y entradas de weblogs en nuestra página de forma que el único conocimiento que se nos exigirá sobre las distribuciones RSS son de nivel muy básico, así que no te preocupes y sigue las siguientes instrucciones.

Terminarás con algo parecido a los enlaces que puedes ver a tu derecha.

• El único requisito que necesitarás es que el sitio donde alojes tu página web soporte alguna de las tecnologías de servidor como PHP, ASP, JSP o ColdFusion con funciones de procesamiento de XML y XSL. Consulta con tu proveedor si no lo tienes muy claro.

Incluir una Distribución

Ahora pasaremos a explicar cómo incluir una distribución RSS. El primer paso que deberás seguir será crear un sitio con acceso remoto a tu servidor. Para ello haz clic en Sitio → Nuevo Sitio.

Rellena los datos de la primera ventana y pulsa Siguiente. Ahora deberás seleccionar el tipo de tecnología de servidor que deseas utilizar:

Simplemente elige una que soporte tu servidor. Dreamweaver se ocupará del resto, tú no verás nada de código.

Rellena el resto de campos en las siguientes ventanas para que se ajusten a la configuración de tu servidor. Una vez hayas terminado la comunicación entre el programa y el servidor se realizará automáticamente. Dreamweaver subirá los archivos que necesite para el funcionamiento de la página.

Ahora crearemos un nuevo documento a donde exportaremos el contenido del archivo RSS. Haz clic en Archivo → Nuevo, selecciona la opción XSLT (fragmento) y pulsa Crear.

Saltará un cuadro de diálogo donde deberás introducir la dirección del archivo RSS que quieres tomar como fuente. Para nuestro ejemplo tomaremos el RSS del sitio de noticias BBCMundo.com:

Selecciona la opción Adjuntar un archivo remoto en Internet y pega esta dirección en el campo de texto:

El siguiente paso será abrir el panel de Vinculaciones, haz clic en Ventana → Vinculaciones y se abrirá un panel que tendrá este aspecto:

Desde aquí podrás ver la estructura detallada del archivo RSS que estamos importando, como podrás ver toda la información del los elementos del principios son relativos al canal de noticias que está enviando la información (en este caso BBCMundo.com). Nosotros nos centraremos en la etiqueta item, que es la que almacena las noticias.

En el archivo RSS habrá tantos elementos item como noticias almacenadas. Igual que pasaba con el ejemplo de biblioteca anterior que teníamos tantos elementos libro como libros en nuestra biblioteca.

Por tanto, lo que deberemos hacer aquí es bastante sencillo. Sólo deberás arrastrar los elementos que quieras utilizar del Panel Vinculaciones a la página.

Haz clic sobre el elemento title y arrástralo hasta el principio de la página que hemos creado.

Como ves, se mostrará la ruta del elemento arrastrado en la página. Inserta un salto (SHIFT + ENTER) y arrastra el elemento description:

En principio, ya tenemos lo principal, guarda el archivo como noticias.xlst y pulsa la tecla F12 para visualizarlo en el navegador:

Podemos tratar a los elementos dándoles los estilos que queramos, e incluso vincularlos a otros archivos.

Selecciona el título de la noticia en la página y haz clic en el icono de carpeta a la derecha del cuadro Vínculo para crear un link a la página donde se encuentra la noticia detallada.

En el cuadro de diálogo que se abrirá selecciona Fuentes de datos y automáticamente podrás seleccionar el campo que deseas vincular con el título.

Seleccionaremos el elemento link (que es hijo del elemento item) y haremos clic en Aceptar. Pulsa la tecla F12 y verás como puedes acceder a la noticia detallada haciendo clic sobre el título.

Bueno, llegados a este punto, hemos conseguido extraer una noticia y mostrarla en el navegador. Pero lo que queremos lograr es un listado de todas las noticias existentes en la distribución RSS, ¿cómo lo hacemos?

Fácil, lo que queremos conseguir es que para cada uno de los item' almacenados en el archivo RSS se muestre el título y la descripción de la noticia. Nada tan sencillo como seleccionar ambos en la página y pulsar el botón Repetir región en el Panel Insertar (pestaña XSLT) para que se cree el bucle:

Se abrirá el siguiente cuadro de diálogo:

Aquí deberemos indicarle al programa sobre que elemento deberá realizar el bucle. Selecciona item, pues como hemos dicho antes queremos que se repita para cada una de las noticias.

Pulsa Aceptar y verás como la página ha cambiado su aspecto:

Llegados a este punto podemos echarle un vistazo a la parte de código, si cambias de vista podrás encontrar un fragmento que se parezca a lo siguiente:

Como puedes ver la sintaxis es sencilla. Para cada item en rss/channel se mostrará el título (vinculado al elemento link correspondiente) y luego se podrá leer la descripción.

Pulsa la tecla F12 y verás el resultado que hemos obtenido hasta ahora.

Si seguiste bien los pasos tendrás una página con un número bastante largo de titulares y sus respectivas descripciones.

Utilizar Modificadores

Veamos que más podemos hacer con ellos. En la ventana de código selecciona lo que está entre las etiquetas xsl:for-each y pulsa el botón Región condicional en el Panel Insertar (pestaña XSLT).

Se abrirá un cuadro de diálogo, aquí deberás escribir el filtro que deseas utilizar para descartar noticias.

Escribe lo siguiente:

contains(category,'Internacional')

Con esta línea le estaremos diciendo que sólo queremos que se muestren las noticias cuyo elemento category es Internacional. Sencillo, ¿verdad? Podríamos hacer lo mismo con Economía, Cultura, Deportes, etc...

Antes de crear este tipo de filtros deberás averiguar que tipo de valores puede tomar el campo al que estas aplicando el filtro. En caso contrario es posible que no se cumpla la condición y el resultado sea que no se muestre ningún elemento.

Nuestro resultado a estas alturas es:

Ahora aprenderemos a ordenar los elementos resultantes por alguno de los campos.

Coloca el cursor bajo la línea xsl:for-each y añade la siguiente línea:

<xsl:sort select="pubDate" order="ascending" />

Esta etiqueta nos servirá para ordenar los elementos antes de mostrarlos. En el atributo select deberemos indicar el nombre del elemento sobre el cual queremos ordenar los resultados. En este caso hemos elegido la fecha de publicación. Pero podrías haberlo hecho por orden alfabético de la noticia (aunque esto ya no tiene tanto sentido).

El atributo order almacenará el sentido de la ordenación. Puede tomar los valores ascending o descending. El significado es claro: ordena los elementos ascendentemente o en orden descendente.

Ya habremos terminado la primera parte (pulsa la tecla F12 para visualizar los cambios). Ahora veremos cómo añadir estos resultados a nuestra página web.

Añadir el XSLT a la Web

Abre la página donde quieras añadir la distribución RSS, deberás guardarla con la extensión .cfm, .php, .asp o .aspx según el modelo de servidor que utilices. Haz clic en Archivo → Guardar como... y dale su nombre con la extensión.

Ahora posiciónate en el lugar donde quieres que se añadan la entradas del archivo RSS y pulsa el botón Transformación XSL en el Panel Insertar (pestaña Aplicación).

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás introducir el nombre del archivo XSLT que deseas vincular, le diremos que queremos que se tome el archivo creado anteriormente: noticias.xslt.

Observa que nada más asociar el documento se mostrará en el segundo campo de texto la dirección del archivo RSS al cual esta vinculada la página. Pulsa Aceptar y el archivo estará listo para utilizar.

Ten en cuenta que deberás renombrar todos los enlaces al archivo si lo has cambiado de extensión.

Pulsa la tecla F12 y verás el resultado.

Comunicación: Los Parámetros

Por último, veremos cómo utilizar parámetros en la lectura y tratamiento de distribuciones RSS.

Abre el archivo noticias.xslt y haz clic sobre la etiqueta xsl:for-each. Vamos a modificarla para que en vez de devolver todos los elementos de la distribución nos devuelva un número limitado de elementos.

En el Panel Propiedades haz clic sobre el icono de configuración de la etiqueta:

Se volverá a abrir el cuadro de diálogo desde donde anteriormente habíamos elegido el elemento a partir del cual se realizaría la repetición.

Despliega la sección Construir Filtro:

Pulsa el botón Más para añadir un filtro a la repetición. Rellena los campos del siguiente modo:

Lo que hemos hecho es limitar el comando de repetición para que sólo lo realice $numeroNoticias veces. Bien podríamos haber indicado un número constante en su lugar, pero le hemos pasado una variable para ver cómo se realizará la comunicación entre los dos archivos.

Acepta el cuadro de diálogo y vuelve a la página donde habías incluido el archivo noticias.xslt.

Una vez allí abre el Panel Comportamientos del Servidor (Ventana → Comportamientos del Servidor) y haz doble clic sobre el único elemento que aparecerá (estará mostrando la dirección de la distribución RSS):

Se abrirá de nuevo el cuadro de diálogo con el que, anteriormente, habíamos asociado la página al archivo noticias.xslt.

Haz clic sobre el icono para añadir un parámetro XSLT. E introduce el nombre de la variable y su valor en el siguiente cuadro de diálogo (omite el símbolo de dólar $ esta vez):

Acepta, guarda los cambios y pulsa F12. Verás los cambios realizados y estarás listo.