martes, 16 de enero de 2007

Crear un servidor de noticias RSS utilizando RSS Builder y Dreamweaver 8

Internet, la red de redes, avanza a pasos agigantados. Una web estática no es llamativa para el usuario; se ve arcaica, retro, antigua, desactualizada…simplemente parece ser una información que alguien colgó algún día y que reside allí esperando a que el autor algún día se digne a modificar. Y es que el tópico de renovarse o morir es totalmente aplicable a la web 2.0.

Últimamente vemos más a menudo como las páginas web se actualizan de una forma sencilla y dinámica. Cualquier usuario sin conocimientos avanzados puede tener su propio blog e ir actualizándolo de una forma rápida y cómoda.

El siguiente artículo va dirigido a aquellos webmasters que deseen incluir una sección de noticias en su web. Los usos de los conocimientos adoptados después de leer el artículo pueden adaptarse en función de la imaginación y la usabilidad que le de el programador: lista de novedades, de artículos recientes… incluso podría llegar a programarse su propio blog desde 0.

Os pondré un ejemplo para que lo entendáis de una forma más clara: en http://www.provicsa.com/ hay una sección de actualidad inmobiliaria que se actualiza a diario para nuestros clientes. La implementación podría haberse realizado de dos maneras: la primera sería haciendo una suscripción a un servidor de noticias RSS, el cuál nos “bombardearía” de noticias que quizás no nos interesarían y que, por lo consiguiente, no podríamos controlar. La segunda opción sería crear nosotros nuestro propio servidor de noticias. Esta opción quizás no sea tan cómoda como la primera y requiera de unos conocimientos más avanzados en cuanto a programación hago referencia, pero la personalización del canal dará un valor añadido a nuestro feed (o servidor de noticias).

Este artículo va orientado a desarrolladores web que tengan unos conocimientos básicos sobre XML y sus posibles usos. Si no conoces nada sobre este lenguaje te recomendamos que eches un vistazo en los buscadores.

¿Pero, qué es RSS?
Se trata de una especificación del estándar XML para utilizar en sitios que se actualizan frecuentemente facilitando la agregación de información de medios a partir de procedimientos automáticos. No es más que un documento XML que incluye información orientada a listas.

A continuación se detalla el patrón XML que sigue el estándar RSS:

INFORMACIÓN GENERAL DEL CANAL
- Título del canal RSS
- Vínculo
- Descripción (¿qué función tiene el canal, a quién va dirigido?)
ELEMENTOS (serán cada una de nuestras noticias):
- Título (título de cada una de las noticia, por ejemplo)
- Vínculo de la noticia
- Descripción (pequeña introducción sobre qué tratará la noticia)
- Fecha de publicación
- Fuente de la noticia o autor

PASO 1: CREAR ARCHIVO RSS
Una forma de crear el archivo RSS sería hacerlo de forma manual, utilizando cualquier editor de texto ya que, como se ha comentado anteriormente, el resultado será un archivo que seguirá el patrón XML. Sin embargo, el objetivo es que se pueda modificar el contenido web de una forma ágil y eficaz, y esto sería realmente una manera tediosa.

Otra forma más cómoda y rápida de crear este canal de noticias sería haciendo uso de alguna aplicación que utilice una interfaz gráfica amigable y de uso sencillo que nos genere por si misma el fichero RSS.

En nuestro caso crearemos el canal RSS (o también feed o canal de noticias) mediante RSS BUILDER, que podemos descargar desde www.snapfiles.com/get/rssbuilder.html

El proceso de instalación es rápido y el asistente no planteará ningún tipo de complicación al usuario.

La aplicación funciona de forma similar a un FTP. Nuestro feed deberá estar alojado en algún sitio en la red (deberemos tener un espacio donde alojarlo), con lo que será necesario configurar el acceso para subir el fichero que generemos. Dicha configuración la haremos accediendo a Settings >> FTP Site Manager o con el método abreviado de teclado CTRL+F.

Deberemos definir un nuevo sitio (New Site) y asignarle un nombre (en este caso, PROVICSA). Posteriormente deberemos rellenar los campos que aparecen en la parte derecha del cuadro de diálogo con los datos del servidor. Los campos user y password hacen referencia a los mismos datos que utilizas para conectarte a tu servidor FTP. En el campo Remote Path incluiremos la ruta en la que ubicaremos el feed. Si se mantiene el valor por defecto, el programa entenderá que se copia en la raíz del server. Un ejemplo de este campo podría ser /httpdocs/noticias/. En este caso el fichero lo encontraremos dentro de la carpeta "noticias", y esta carpeta "noticias" estará dentro de la carpeta "httpdocs".

Remote File hará referencia al nombre del archivo que creemos (con extensión XML). Por ejemplo, podríamos llamarlo noticias.xml. Por lo tanto, nuestro fichero RSS lo encontraremos en nuestro server en la ruta /httpdocs/noticas/noticias.xml.

Una vez completados todos los datos del servidor ya podremos empezar a trabajar con nuestro feed. En la parte izquierda de la pantalla principal encontramos las propiedades del canal, como puede ser el título (en el caso de Provicsa le hemos asignado “Últimas noticias del sector inmobiliario”). Iremos rellenando los campos que creamos oportunos con los valores que queramos asignar. No es obligatorio rellenar todos los campos.

Ahora únicamente nos quedará ir añadiendo cada una de las noticias o items. El programa nos muestra 4 botones (añadir item, eliminarlo, desplazar hacia arriba y desplazar hacia abajo).
Haciendo clic sobre el primer icono (añadir item) crearemos el primer item o noticia. Los campos principales serán el título, el enlace (que será el de la página correspondiente que contendrá la noticia completa) y la descripción, donde como norma general se incluirá una breve descripción, introducción o resumen de lo que será la noticia en cuestión. Con dicho campo podrás incluir enlaces, textos en negrita… para ello utiliza el icono HTML Editor y verás todas las posibilidades que el programa ofrece.

Iremos añadiendo tantas noticias como sea necesario y, una vez finalizado el proceso de inserción de datos, será necesario subir el fichero al servidor. Esto lo haremos mediante el icono Publish Feed. Aparecerá un cuadro de diálogo en el que deberemos seleccionar el servidor (que será el que hayamos configurado previamente, en nuestro caso PROVICSA). Además, podremos indicar cuantos ítems queremos subir al server. La misma aplicación se encargará de subir el fichero al servidor.

Una vez cierres el programa, éste te preguntará si deseas almacenar el fichero. Esta copia se refiere a nivel local, ya que en el servidor ya la tendremos almacenado.

De esta forma ya tendremos creado nuestro canal de noticias. Siempre que queramos modificar el fichero únicamente será necesario iniciar la aplicación, hacer clic sobre el icono Download Feed, actualizar los datos que sean necesarios y volver a subir el canal al servidor. Así de simple.

PASO 2: PROCESAR EL FICHERO RSS
El objetivo siguiente es el de procesar nuestro fichero RSS para mostrar las noticias en nuestro sitio web. Para ello utilizaremos Dreamweaver 8. Lo primero que tendremos que hacer será crear un fragmento de XSLT. Esto lo hacemos de la siguiente manera: Archivo >> Nuevo >> Categoría Básica >> XSLT (fragmento). Al aceptar, Dreamweaver nos pedirá que asociemos una fuente de datos (archivo XML) para asociar el nuevo fragmento de XSLT. En nuestro caso pondremos la ruta del feed que hemos creado anteriormente con RSS Builder. Una vez asociado el fichero, Dreamweaver nos mostrará el panel de vinculaciones. Si la aplicación no te muestra el panel de vinculaciones, haz clic sobre Ventana >> Vinculaciones o utiliza el método de teclado abreviado CTRL+F10 para mostrarlo.

En el panel de vinculaciones lo que se nos mostrará es el aspecto del fichero XML que hemos asociado. Deberemos arrastrar y soltar los nodos que nos interesen al panel de diseño. Por ejemplo, si queremos insertar el título del canal, bastará con arrastrar el nodo title (cuyo padre es channel) a dicho panel.

Para insertar el título de las noticias arrastraremos el nodo title cuyo padre es item. Al arrastrar dicho nodo a la pantalla de diseño, lo que se mostrará será el siguiente texto:
{rss/channel/item/title.

Ahora introduciremos el autor de la noticia. Para ello situaremos el cursor al final del marcador XML y presionamos Mayús+Enter para introducir una nueva línea. Ahora introduciremos, por ejemplo: “Escrito por:” o, en el caso de Provicsa, “Fuente: ”. Se trata del texto que se mostrará, para cada noticia, de quién ha escrito o de dónde proviene la noticia. Ahora únicamente consiste en arrastrar el nodo autor (cuyo padre es item). Iremos añadiendo los ítems y los textos que queramos de la misma manera (“Resumen: ” acompañado del nodo “description”, por ejemplo). Puedes realizar una vista previa en el navegador mediante F12. Se mostrará el título y el autor de la última entrada añadida en el canal de noticias.

Eso está muy bien, pero lo que queremos es que se nos muestren todas las entradas, no únicamente la última que hemos añadido al fichero RSS. Para ello deberemos crear una región repetida que se encargue de recorrer todos los elementos del feed, como si de un bucle se tratara. Para ello, en la pantalla de diseño, seleccionaremos todo aquello que queramos que se repita para cada una de las noticias y, en la ventana de propiedades (si no se muestra utiliza Ventana >> Propiedades o utiliza el método abreviado CTRL+F3) , seleccionaremos como formato Párrafo. De esta forma conseguiremos que cada noticia se muestre como un párrafo diferente. Una vez hecho esto, y con el texto aún seleccionado, haremos clic sobre Insertar >> Objetos XSLT >> Repetir región. Un cuadro de diálogo nos pedirá el nodo a repetir. Deberemos seleccionar el nodo item. Una vez realizado el paso guardaremos los datos y crearemos una vista previa para ver que se ha creado correctamente la región repetida. Aplicaremos los estilos CSS que creamos necesarios, aunque no se mostrarán al realizar la vista previa.

El siguiente paso consistirá en crear los vínculos correspondientes para cada una de las noticias. Cada artículo deberá apuntar a su link. Para acceder a este link lo podemos crear de la manera que más nos guste. Podríamos hacerlo al hacer clic sobre el título, o sobre la descripción, o con el clásico “leer” o “Acceder a la noticia”. En este caso lo haremos mediante el citado “Acceder a la noticia”. Para ello deberemos introducir este texto en la región repetida que hemos creado. Una vez introducido el texto dentro de la región, lo seleccionaremos y haremos clic sobre la carpeta que se encuentra adjunta a la etiqueta de vínculo. Aparecerá una pantalla para seleccionar el archivo; no nos interesará que el vínculo sea un fichero, sino que sea una fuente de datos. Para ello, selecciona la opción Fuente de datos y selecciona el nodo link cuyo padre es item. Una vez realizada la operación, salvaremos los datos y generaremos una vista previa para verificar que el paso se ha realizado correctamente y los enlaces funcionan a la perfección.

La primera parte ya estará finalizada. Ahora faltará integrar este fragmento XSLT a una página dinámica. En este caso crearemos un nuevo documento llamado actualidad-inmobiliaria.php, por ejemplo. Aconsejamos que almacenes el fichero en la misma ruta que el fragmento XSL. Realizaremos el diseño para la página que creamos oportuno, eso ya va "a gusto del consumidor". Recuerda que deberás reservar un área para introducir la sección de noticias.

Una vez sepamos donde ubicar la sección de noticias, situaremos allí el cursor y ya sólo faltará incluir el fragmento en nuestra página dinámico. Esto lo haremos de la siguiente manera: Insertar >> Objetos de aplicación >> Transformación XSL. Seleccionaremos el fragmento que hemos creado anteriormente (el fichero XSL) y Dreamweaver detectará la fuente de datos de forma automática. Una vez pulsemos Aceptar se generará una carpeta llamada includes en la raíz del sitio. Dicha carpeta contendrá la biblioteca que realiza la transformación en el lado del servidor y debe cargarse en el servidor de prueba. Es importante recalcar que esta carpeta, el fragmento XSLT y la página dinámica deberán subirse al servidor para que el feed funcione correctamente. Ahora sí se mostrarán los estilos aplicados al documento XSLT.

De esta forma ya podremos visualizar nuestro feed en nuestro sitio web.

Esperamos que este documento haya sido de utilidad. Un saludo desde TecnoTutoriales.

No hay comentarios: