Utilización de un agregador RSS 1.0 remoto con Dreamweaver 8

dreamweaver
Informe de Errores en DreamWeaver
25 diciembre, 2014
dreamweaver
Doble vista de código en DreamWeaver
25 diciembre, 2014

Utilización de un agregador RSS 1.0 remoto con Dreamweaver 8

dreamweaver

Macromedia Dreamweaver 8 supone un importante avance en el desarrollo XML, al igual que Dreamweaver MX 2004 en el caso de CSS. El equipo de desarrollo que elaboró esta versión decidió ofrecer a los usuarios la asistencia de punto de entrada necesaria para hacer frente a los proyectos Web basados en XML y XSL. La forma en que Dreamweaver 8 trata los lenguajes XML y XSL es un claro ejemplo:

  • Las transformaciones visuales de XSL usan el método de arrastrar y soltar desde el panel Vinculaciones.
  • Se puede tener acceso a objetos fáciles de usar desde la barra Insertar.
  • Existen funciones de resaltado y terminación de código para los desarrolladores más experimentados.

En el presente artículo, utilizo nuevas funciones XML de Dreamweaver 8 en un contexto real: utilizar un agregador RSS remoto mediante transformaciones XSL en el lado del servidor. Se trata de un ejercicio práctico si tiene pensado incluir titulares de noticias, listas de artículos, publicaciones en blogs o cualquier otro tipo de contenido distribuido en su sitio Web personal, en un portal o en un sitio corporativo.

En primer lugar, realizaremos una rápida visita guiada por las nuevas funciones de creación XML de Dreamweaver 8 para ayudarle a familiarizarse con el espacio de trabajo.

Creación de documentos XML y XSL

Con Dreamweaver 8, puede crear documentos XML y XSL desde cero, al igual que con cualquier otro tipo de página. Abra Dreamweaver 8 y seleccione Archivo > Nuevo. Aparecerá el cuadro de diálogo Nuevo documento.

Figura 1. Selección de XSLT (página completa) en el cuadro de diálogo Nuevo documento

Figura 1. Selección de XSLT (página completa) en el cuadro de diálogo Nuevo documento

Tenga en cuenta que también puede crear fragmentos de XSLT para usarlos posteriormente en el procesamiento de datos XML en sus páginas dinámicas. Un fragmento de XSLT es un archivo que no contiene las etiquetas <head> y <body> como una página XSLT completa. Es una parte de código simple que se inserta posteriormente en una página dinámica.

Si ya dispone de un sitio estático configurado y desea que sea dinámico, puede convertir fácilmente páginas HTML en plantillas XSL desde el menú Archivo, seleccionando Archivo > Convertir > XSLT 1.0 (tal como se muestra en la figura 2).

Figura 2. Conversión de una página HTML a un documento XSLT

Figura 2. Conversión de una página HTML a un documento XSLT

Creación visual

Lo mejor de Dreamweaver 8 es que simplifica el desarrollo en lenguaje XML. En el panel Vinculaciones puede ver una representación en forma de árbol de la fuente de datos XML que utiliza:

Figura 3. Árbol XML en el panel Vinculaciones

Figura 3. Árbol XML en el panel Vinculaciones

Puede arrastrar nodos desde el árbol y soltarlos en su hoja de estilos XSL, como verá más tarde en este artículo.

Asimismo, puede usar cualquier objeto de la ficha XSLT de la barra Insertar para ver los nodos que se repiten, definir condiciones simples o múltiples y añadir comentarios al código.

Figura 4. Ficha XSLT de la barra Insertar

Figura 4. Ficha XSLT de la barra Insertar

Hacia el final de este tutorial, también aprenderá a usar el comportamiento del servidor XSL Transformation (desde el panel Aplicación) en sus páginas dinámicas para procesar y mostrar datos XML:

Figura 5. Comportamiento del servidor XSL Transformation

Figura 5. Comportamiento del servidor XSL Transformation

Codificación sin dificultades

Si desea retocar el código o probar sus propios trucos de XSL, puede hacerlo mediante las funciones de sugerencias y terminación automática de código de Dreamweaver 8.

Figure 6. Sugerencias de código

Figura 6. Sugerencias de código

A medida que siga este tutorial, descubrirá y dominará todas estas funciones rápidamente.

Escenario de aplicación

En este artículo, utilizará el agregador RSS de Macromedia (disponible en weblogs.macromedia.com/dev_center/index.rdf*) en un sitio de ejemplo, que puede ser tanto un blog como un sitio de empresa o un sitio personal. Macromedia pone sus recursos del Centro de desarrolladores a disposición del público en forma de agregador RSS. Resulta una forma idónea de mostrar los artículos más recientes de Macromedia en su sitio y permitir que otros desarrolladores puedan familiarizarse con ellos. Empezaremos desde esta página genérica:

Figura 7. Inicio con la página genérica

Figura 7. Inicio con la página genérica

En este tutorial:

  • Aprenderá el funcionamiento de la distribución y los agregadores RSS
  • Se conectará al agregador RSS remoto del Centro de desarrolladores de Macromedia
  • Procesará el agregador RSS con XSLT mediante las nuevas funciones de Dreamweaver 8
  • Aplicará una transformación XSL en el lado del servidor que incluya el agregador en el sitio de ejemplo, en la sección “Related Articles” de la página genérica (vea la figura 7). Dreamweaver 8 admite transformaciones XSL en el lado del servidor para páginas creadas con ColdFusion, ASP, ASP.NET y PHP.

¿Qué es la distribución?

La distribución Web es un método popular que permite que el contenido esté disponible de forma simultánea para otros sitios Web. La distribución se consigue utilizando canales o agregadores Web, que se redactan en varios estándares: RSS 0.9, 1.0, 2.0 o Atom. A pesar de las diferencias entre los distintos estándares y especificaciones, resulta importante tener presente que todos los agregadores son en realidad documentos XML que incluyen información orientada a listas. Se dice que el sitio cuyo contenido se pone a disposición como origen de la información “publica un agregador”, mientras que los sitios que vuelven a publicar dicho contenido “utilizan el agregador”.

Toda información del sitio que los visitantes puedan estar interesados en reutilizar constituye una buena candidata para un agregador RSS. Esto incluye titulares de noticias, listas de artículos, comunicados de prensa, ofertas laborales, marcadores, conferencias, listas de reproducción o novedades informáticas.

Las ventajas de la distribución son obvias:

  • El contenido importado se actualiza automáticamente cuando cambia el agregador remoto.
  • El contenido se hace extensible a más usuarios, puesto que los sitios vuelven a publicar el mismo agregador una y otra vez. Por ejemplo, los recursos del Centro de desarrolladores de Macromedia están disponibles en DreamweaverFAQ.com*, dopostback.com*, actionscript.it* y edcox.net.webwatch*.
  • El contenido se facilita en un formato que se ajusta al aspecto del sitio en cuestión. Observe las diferencias con que se presenta la información en los sitios Web mencionados anteriormente.

¿Qué es un agregador RSS?

RSS es simplemente otra variedad de XML. Con el término “RSS” realmente se hace referencia a diversos formatos utilizados paralelamente y, por tanto, puede tener distintos significados:

  • RSS 0.9x: en estas versiones, significa Really Simple Syndication (Distribución realmente sencilla).
  • RSS 1.0: incluye RDF, un estándar W3C para metadatos. En esta versión, RSS significa RDF Site Summary (Resumen de sitios RDF). Asimismo, RSS 1.0 incorpora el módulo Dublin Core, un conjunto de metadatos estándar que se usa para describir el agregador y los elementos individuales.
  • RSS 2.0: es la versión más reciente, la cual no incluye RDF.

Si se siente desconcertado por los distintos estándares y versiones disponibles para RSS, no se preocupe; son lo suficientemente similares como para considerarlos igual que un documento XML.

Nota: si desea obtener más información sobre las diferencias existentes entre los diversos dialectos RSS, vea este artículo* del sitio O’Reilly XML.com.

Un agregador RSS consta de un canal, que tiene un título, un vínculo y una descripción seguidos de una serie de elementos, que a su vez contienen un título, un vínculo, una descripción y, opcionalmente, una fecha de publicación y un autor. Para verlo en contexto, puede descargar una copia del agregador RSS del Centro de desarrolladores de Macromedia* y abrirlo en Dreamweaver 8.

Observe cómo Dreamweaver 8 aplica colores al código para facilitar la lectura del documento:

  • Las etiquetas y los atributos son azules
  • Los valores de atributos son verdes
  • El contenido se muestra en negro

Figura 8. Aplicación de color a código XML en Dreamweaver 8

Figura 8. Aplicación de color a código XML en Dreamweaver 8

El documento empieza con una declaración XML seguida de la declaración RSS, que incluye referencias al espacio de nombres RDF, al espacio de nombres del módulo Dublin Core y al espacio de nombres RSS.

El nodo del canal contiene información genérica acerca del agregador RSS: título, vínculo y descripción breve.

<channel rdf_about="http://www.macromedia.com/devnet/">     <title>Macromedia Developer Center RSS Feed</title>     <link>http://www.macromedia.com/devnet/</link>     <description>Macromedia Developer Center is your center for the tutorials, 
articles, and sample applications you need to master Macromedia products. </description>

En el nodo del canal también se incluye una tabla de contenido del agregador actual, especificada por los elementos. En realidad, se trata de una lista ordenada de vínculos a los artículos del Centro de desarrolladores. Para indicar la importancia del orden, se usa un contenedor de secuencias: rdf:Seq. Los elementos de la secuencia se especifican con los elementos rdf:li.

<items>     <rdf:Seq>       <rdf:li 
rdf:resource="http://www.macromedia.com/devnet/mx/flashcom/articles/comm_components.html"
/> <rdf:li rdf_resource="http://www.macromedia.com/devnet/mx/flashcom/articles/flv_bestpractices.html"
/> <rdf:li rdf_resource="http://www.macromedia.com/devnet/mx/flashcom/articles/dyn_buffering.html"
/> <rdf:li rdf_resource="http://www.macromedia.com/devnet/mx/coldfusion/articles/adv_flashforms.html"
/> </rdf:Seq> </items>

Tenga en cuenta que la URL rdf:resource de cada elemento debe ser la misma que la URL rdf:about del elemento asociado; es más o menos lo que sucede en una tabla de contenido, en la que cada capítulo se encuentra en un número de página especificado.

Nota: es probable que los analizadores RDF descarten los elementos que aparecen en el agregador y no sean miembros de la tabla de contenido.

Por último, los artículos del Centro de desarrolladores se incluyen en el agregador, en forma de elementos. Un elemento se compone de un título, un vínculo, una descripción, un asunto (que indica el tema del artículo), un autor y una fecha de publicación:

<item  rdf_about="http://www.macromedia.com/devnet/mx/flashcom/articles/comm_components.html"> <title>Building Communication Components</title> <link>http://www.macromedia.com/devnet/mx/flashcom/articles/comm_components.html </link> <description>This book excerpt from O&apos;Reilly describes the 
first major step in building a full-fledgedapplication.</description> <dc:subject>Flash Communication Server</dc:subject> <dc:creator>Brian Lesser</dc:creator> <dc:date>2005-07-25T17:31:46-08:00</dc:date> </item>

Puesto que ya está familiarizado con la lectura del código que forma un agregador RSS, puede empezar a procesarlo para mostrar los artículos en su sitio.

Creación de un fragmento de XSLT

Empezaremos con la creación de un fragmento de XSLT que muestre los encabezados del artículo en el área Related Articles del sitio de ejemplo:

  1. Descargue y descomprima los archivos de ejemplo del tutorial en la raíz del sitio (éste debe ejecutar un servidor de prueba ColdFusion, PHP, ASP o ASP.NET). Los archivos de ejemplo están vinculados al principio de este artículo.
  2. Abra la página homepage.html en Dreamweaver 8.
  3. Seleccione la lista situada debajo del encabezado Related Articles, colocando el cursor en esa área de la página y haciendo clic en la etiqueta <ul> correspondiente en el selector de etiquetas.

    Figura 9. Selección de la lista haciendo clic en la etiqueta 

<ul> en el selector de etiquetas”  src=”/images/tutoriales/otros/xslrss9.gif” width=”274″ />                 </p>
<p><strong>Figura 9.</strong> Selección de la lista haciendo clic en la etiqueta <code><ul></code> en el selector de etiquetas</p>
</li>
<li>Presione Supr para quitar esta sección. Posteriormente, la sustituirá por los titulares del Centro de desarrolladores. </li>
<li>Seleccione Archivo > Guardar como y guarde la página actual como homepage.cfm, homepage.php, homepage.asp o homepage.aspx, según el modelo de servidor. </li>
<li>Seleccione Archivo > Nuevo en el cuadro de diálogo que se muestra, seleccione Página básica > XSLT (fragmento) y haga clic en Crear. Dreamweaver le solicita que asocie un archivo XML como la fuente de datos del nuevo fragmento de XSLT. </li>
<li>
<p><a id=Seleccione “Adjuntar un archivo remoto en Internet” y pegue la siguiente URL en el cuadro de texto:

    http://weblogs.macromedia.com/dev_center/index.rdf

    Nota: asegúrese de que quita el texto http:// antes de pegar la URL; de este modo, esos caracteres no se duplican en dicha URL.

    Figura 10. Adjuntar una fuente de datos XML remota

    Figura 10. Adjuntar una fuente de datos XML remota

  4. Haga clic en Aceptar para adjuntar el origen XML. Tenga en cuenta que una representación en forma de árbol del agregador RSS se muestra en la ficha Vinculaciones del panel Aplicación. Si no puede ver la ficha Vinculaciones, seleccione Ventana > Vinculaciones.

    Figura 11. Árbol XML en el panel Vinculaciones

    Figura 11. Árbol XML en el panel Vinculaciones

    Nota: deberá conectarse a Internet para que un agregador RSS remoto llene el panel Vinculaciones.

    Dreamweaver usa los siguientes símbolos para mostrar árboles XML:

    • <> para un elemento que aparece exactamente una vez dentro de su nodo padre
    • <>+ para un elemento que aparece una o más veces dentro de su nodo padre
    • <>? para un elemento XML opcional
    • @ para un atributo XML
  5. Guarde el archivo como headlines.xsl.

El fragmento de XSLT que creará a continuación mostrará los títulos de los artículos y sus autores. Los títulos se vincularán a los artículos correspondientes del Centro de desarrolladores, como puede ver aquí:

Figura 12. Vista previa de la página de resultados

Figura 12. Vista previa de la página de resultados

Puede conseguir esto mediante la operación de arrastrar y soltar en el panel Vinculaciones:

  1. Arrastre el nodo rss:title (el padre es rss:item) desde el árbol XML y suéltelo en la página. Dreamweaver inserta un marcador de posición de datos XML en la página, que es, de hecho, la expresión XPath que corresponde al nodo.

    Nota: debe usar el nodo rss:item desde el nodo padre rss:item y no desde el nodo padre rss:channel.

  2. Coloque el cursor después del marcador de posición XML y presione Mayús-Intro (Windows) o Mayús-Retorno (Macintosh) para empezar una nueva línea inmediatamente debajo de él.
  3. Escriba by en la nueva línea y presione la barra espaciadora.

    Figura 13. Inserción de "by" después del título

    Figura 13. Inserción de “by” después del título

  4. Arrastre el nodo dc:creator desde el panel Vinculaciones y suéltelo después de “by”.
  5. Obtenga una vista previa de la página en su navegador con F12 (Windows) u Opción + F12 (Macintosh). Su página deberá tener un aspecto similar a la figura 14. Se extrae el artículo más reciente añadido al agregador RSS del Centro de desarrolladores; el agregador se actualiza de forma regular, por lo que el navegador mostrará un artículo distinto al que se muestra aquí.

    Figura 14. Vista previa de la página

    Figura 14. Vista previa de la página

Tenga en cuenta que Dreamweaver genera automáticamente un archivo temporal para obtener una vista previa de los resultados de la transformación. No obstante, no se trata de una transformación en el lado del servidor ni en el lado del cliente. Dreamweaver efectúa la transformación internamente mediante su procesador XSLT incorporado y genera un archivo temporal para la vista previa; la aplicación se encarga también de la conversión. Posteriormente en este tutorial podrá aplicar la transformación en el lado del servidor. Asimismo, observe que los estilos CSS que se aplican a la página principal no están disponibles en la transformación. Lo estarán una vez que incluya el fragmento de XSLT en la página principal. Por último, tenga en cuenta que sólo se muestra un artículo en la página de resultados de la transformación. Para mostrar todos los artículos del agregador, debe crear una región repetida que recorra todos los elementos del agregador y los muestre.

Creación de la región repetida

Para mostrar todos los artículos del agregador RSS, siga los pasos siguientes:

  1. En la vista Diseño de Dreamweaver, seleccione el título y el creador de los elementos, así como el texto “by” del documento headlines.xsl y haga clic en ellos con el botón derecho (en el caso de Macintosh, haga clic con la tecla Control presionada).
  2. En el menú que se muestra, seleccione Formato de párrafo > Párrafo. Esto mostrará cada artículo como un nuevo párrafo. Posiblemente ya se pueda seleccionar el párrafo en el menú contextual.
  3. Vaya a la ficha XSLT de la barra Insertar y haga clic en el botón Repetir región.

    Nota: la vista predeterminada de la barra Insertar es la vista de menú. Si se encuentra en la vista de menú, seleccione Mostrar como fichas en la lista de opciones de la barra Insertar. Si se encuentra en la vista de fichas, haga clic con el botón derecho (en el caso de Macintosh, haga clic con la tecla Control presionada) en cualquiera de las fichas y seleccione Mostrar como menús.

    Figura 15. Acceso al comando Repetir región

    Figura 15. Acceso al comando Repetir región

  4. En el cuadro de diálogo Creador de expresiones XPath, seleccione el nodo repetido que desea recorrer; éste es rss:item. Procure no confundirlo con el nodo rss:items.

    Figura 17. Definición de la región repetida

    Figura 16. Definición de la región repetida

  5. Haga clic en Aceptar. Tenga en cuenta que Dreamweaver muestra un borde gris con la etiqueta xsl:for-each alrededor del texto seleccionado, para indicar una región repetida.

    Figura 17. Vista Diseño de la región repetida

    Figura 17. Vista Diseño de la región repetida

  6. Guarde la página y obtenga una vista previa de ella en un navegador. Deberá asemejarse a la figura 18. Nuevamente, cabe destacar que, puesto que el agregador de recursos del Centro de desarrolladores se actualiza de forma regular, la lista de artículos será diferente.

    Figura 18. Vista previa de la región repetida en el navegador

    Figura 18. Vista previa de la región repetida en el navegador

Dreamweaver realiza, una vez más, la transformación XSL y muestra el resultado en un archivo HTML temporal. En la próxima sección, aprenderá a vincular los artículos a sus URL correspondientes mediante el archivo RSS.

Creación de vínculos con XSL

Para vincular el título de cada artículo al recurso correspondiente en el Centro de desarrolladores de Macromedia, siga los pasos siguientes:

  1. En la página headlines.xsl, seleccione el marcador de posición de datos XML para el título del artículo.
  2. En el inspector de propiedades, haga clic en el icono situado junto al cuadro de texto Vínculo, para definir un vínculo en el texto seleccionado.
  3. Seleccione la opción Fuentes de datos en la sección Seleccionar nombre de archivo de del cuadro de diálogo Seleccionar archivo. Vea la figura 19.

    Figura 19. Creación de vínculos dinámicos con XSL

    Figura 19. Creación de vínculos dinámicos con XSL

    Cada título de artículo debe apuntar a la URL que contiene su nodo rss:link.

  4. Seleccione el nodo rss:link en el árbol XML. Asegúrese de seleccionar el nodo rss:link situado bajo el nodo padre rss:item y no el nodo rss:link bajo el nodo padre rss:channel. Vea la figura 19.
  5. Haga clic en Aceptar. Dreamweaver genera el vínculo.
  6. Guarde la página y obtenga una vista previa de ella en el navegador. El archivo temporal que crea Dreamweaver debe asemejarse a la figura 20.

    Figura 20. Vista previa de los artículos vinculados en el navegador

    Figura 20. Vista previa de los artículos vinculados en el navegador

Haga clic en los vínculos para probarlos. En la próxima sección, podrá aplicar el comportamiento del servidor XSL Transformation para mostrar los artículos en la página principal.

Aplicación de una transformación XSL en el lado del servidor al agregador RSS

Para generar una lista de los artículos del Centro de desarrolladores en la sección Related Articles de la página principal, siga los pasos siguientes:

  1. Abra el archivo dinámico de la página principal (PHP, ASP o ColdFusion) creada anteriormente en el tutorial.
  2. Coloque el cursor bajo el encabezado “Related Articles”.
  3. Vaya a la ficha/menú Aplicación en la barra Insertar y haga clic en el botón XSL Transformation, tal como se muestra en la figura 21.

    Figura 21. Acceso al comportamiento XSLT

    Figura 21. Acceso al comportamiento XSLT

    Nota: también puede obtener acceso al mismo comando desde la ficha Comportamientos del servidor.

    Nota: si trabaja con un servidor ColdFusion, es posible que Dreamweaver le solicite una contraseña de inicio de sesión RDS. Escriba la contraseña o, si no la sabe, póngase en contacto con el administrador de la red.

  4. En el cuadro de diálogo XSL Transformation, haga clic en el botón Examinar situado junto al cuadro de texto Archivo XSLT. A continuación, vaya al archivo headlines.xsl y selecciónelo. Tenga en cuenta que Dreamweaver detecta automáticamente la fuente de datos XML asociada y llena el cuadro de texto URI de XML.

    Figura 22. Configuración del comportamiento del servidor XSL Transformation

    Figura 22. Configuración del comportamiento del servidor XSL Transformation

  5. Haga clic en Aceptar para aplicar la transformación. Dreamweaver muestra el fragmento de XSL directamente en la página dinámica. Además, genera una carpeta llamada “includes” en la raíz del sitio. Esta carpeta contiene la biblioteca que realiza la transformación en el lado del servidor y debe cargarse en el servidor de prueba. Observe que los estilos CSS de la hoja de estilos adjunta a la página principal se aplican automáticamente al fragmento de XSL importado.
  6. En el panel Archivos, busque la carpeta “includes” que Dreamweaver ha creado y cargado en el servidor.
  7. Guarde la página y muéstrela en el navegador; asegúrese de que ha cargado la carpeta “includes” en el servidor de prueba.

    Figura 23. Vista previa en el navegador de la página dinámica tras la transformación

    Figura 23. Vista previa en el navegador de la página dinámica tras la transformación

¿Qué sucede en realidad?

Dreamweaver genera un archivo de biblioteca en tiempo de ejecución que utiliza el servidor de aplicaciones para procesar los datos XML y enviar contenido HTML al navegador del cliente. La biblioteca en tiempo de ejecución es el archivo de la carpeta “includes”. El fragmento de XSLT, la página dinámica que lo contiene y la biblioteca en tiempo de ejecución de la carpeta “includes” deben estar en el servidor para que la página se muestre correctamente.

Tenga en cuenta que se muestran todos los elementos del agregador RSS. Si el agregador tiene 10 o 20 artículos, esto puede llevar a una página principal muy larga, que posiblemente interfiera con sus requisitos de diseño. En las próximas secciones, aprenderá a limitar el número de elementos que se muestran en un agregador RSS mediante determinados parámetros. Asimismo, descubrirá cómo se ordenan los elementos.

Utilización de parámetros en una transformación XSL

El agregador RSS procesado muestra en estos momentos varios artículos en la página principal. Suponga que sólo desea mostrar los cuatro últimos artículos del Centro de desarrolladores. A tal efecto, necesita un parámetro que indique a la transformación XSL que muestre únicamente los primeros cuatros elementos. A continuación se detallan los pasos necesarios.

  1. Abra la página headlines.xsl y haga clic dentro de la región repetida XSL.
  2. Seleccione la etiqueta <xsl:for-each> en el selector de etiquetas.
  3. En el inspector de propiedades, haga clic en el icono de rayo para definir la condición que muestra sólo los cuatro primeros elementos:

    Figura 24. Definición de condiciones en el inspector de propiedades

    Figura 24. Definición de condiciones en el inspector de propiedades

  4. En el cuadro de diálogo Creador de expresiones XPath, haga clic en Construir filtro y, a continuación, haga clic en el botón más (+) para definir una nueva condición XPath.

    Figura 25. Creación de la condición XPath

    Figura 25. Creación de la condición XPath

  5. Modifique la condición predeterminada en el campo WHERE. Seleccione ese campo y escriba position(). En el menú Operador, seleccione <= (menor o igual). Por último, en el campo Valor, escriba $ItemsPerPage. La condición del filtro se asemeja a la figura 26.

    Figura 26. Condición del filtro

    Figura 26. Condición del filtro

    La función position() devuelve un número igual a la posición del nodo actual. Este valor debe ser menor o igual al valor que especifica el parámetro ItemsPerPage. Más adelante podrá definir este parámetro, en el archivo dinámico de la página principal.

  6. Haga clic en Aceptar para aplicar la condición.
  7. Guarde el documento XSL y obtenga una vista previa en el navegador mediante las teclas F12 (Windows) u Opción + F12 (Macintosh). El navegador devolverá un error parecido a este:

    XSLT Error: The variable 'ItemsPerPage' is not defined.Source tree node: #document.

    Esto se debe a que Dreamweaver realiza la transformación XSL internamente, usando sólo el fragmento de XSLT que ha creado y el archivo de origen XML. El parámetro ItemsPerPage que ha usado para limitar el número de elementos mostrados se define en la página xslt, pero su valor se pasa a la página XSLT a través de una página dinámica (homepage.php, homepage.asp, homepage.aspx o homepage.cfm). Para que el navegador pueda generar una vista previa y familiarizarse con las sugerencias para código de Dreamweaver 8, escriba la siguiente línea de código en el archivo headlines.xsl antes de la etiqueta xsl:template:

    <xsl:param name="ItemsPerPage" select="4" />

    Este código define el valor del parámetro ItemsPerPage y le da un valor predeterminado de 4.

    Nota: el valor predeterminado del parámetro ItemsPerPage especificado en el fragmento de XSLT se omitirá en tiempo de ejecución, cuando se efectúe la transformación en el lado del servidor. En su lugar, se usará el valor especificado en el comportamiento del servidor XSL Transformation.

Ya puede obtener una vista previa del fragmento de XSLT en el navegador sin errores.

  1. Cambie a la página principal dinámica.
  2. En la ficha Comportamientos del servidor en el panel Aplicación, haga doble clic en el comportamiento del servidor XSL Transformation para modificarlo.

    Figura 27. Edición del comportamiento del servidor XSL Transformation

    Figura 27. Edición del comportamiento del servidor XSL Transformation

  3. Dreamweaver abre el cuadro de diálogo XSL Transformation. En el área Parámetros XSLT, haga clic en el signo más (+) de los parámetros XSLT para definir un nuevo parámetro.
  4. Seleccione ItemsPerPage en el menú emergente Nombre y escriba 4 en su campo de valor, tal y como se muestra en la figura 28.

    Figura 28. Adición de parámetros XSL

    Figura 28. Adición de parámetros XSL

  5. Haga clic en Aceptar. Si el valor 4 aparece entre comillas dobles en el cuadro de diálogo XSL Transformation, haga clic en el botón Editar, quite las comillas y haga clic en Aceptar.
  6. Haga clic en Aceptar de nuevo para cerrar el cuadro de diálogo XSL Transformation. Guarde la página y obtenga una vista previa de ella en el navegador. Asegúrese de que ha cargado headlines.xsl, el archivo de página principal y la carpeta “includes” en el servidor de prueba.

Sólo se muestran los primeros cuatro artículos en el navegador. Es posible que deba actualizar el navegador si aún se muestran todos los artículos.

Figura 29. Vista previa de los cuatro vínculos de artículo en el navegador

Figura 29. Vista previa de los cuatro vínculos de artículo en el navegador

¿Pero cómo sabrá si son los artículos más recientes del Centro de desarrolladores? Puesto que no siempre resulta seguro presuponer que los agregadores RSS muestran los elementos en orden cronológico, aprenderá a ordenarlos por fecha.

Ordenación de los elementos

En mi artículo anterior, Introducción a XSL, expliqué la sintaxis para ordenar los nodos XML. Ahora deberá aplicar esos conocimientos para ordenar los artículos por fecha.

  1. Con la página headlines.xsl abierta, cambie a la vista Código.
  2. Busque la siguiente línea de código:

    <xsl:for-each select="rdf:RDF/rss:item[position() <= $ItemsPerPage]"> 

    Puede usar Editar > Buscar y reemplazar para buscarla.

  3. Presione Intro (Windows) o Retorno (Macintosh) después de esta línea y empiece a escribir <xsl:s. Dreamweaver indica sugerencias para llenar el código, tal y como se muestra en la figura 30.

    Figura 30. Utilización de las sugerencias de código para seleccionar la etiqueta xsl:sort

    Figura 30. Utilización de las sugerencias de código para seleccionar la etiqueta xsl:sort

  4. Seleccione xsl:sort y presione Intro (Windows) o Retorno (Macintosh). Si no puede ver el menú de sugerencias de código, puede presionar Control y la barra espaciadora para mostrarlo.
  5. A medida que inserta un espacio, Dreamweaver indica los atributos de la etiqueta <xsl:sort />. Elija select y escriba dc:date como su valor.
  6. Inserte otro espacio y seleccione el orden de la lista de atributos sugeridos. Elija el orden descendente para su valor volviendo a usar las sugerencias de código de Dreamweaver.
  7. Cierre la etiqueta xsl:sort escribiendo />. La línea debe tener un aspecto parecido al siguiente:

    <xsl:sort select="dc:date" order="descending" />

Dreamweaver es capaz de convertir la codificación de los documentos XSL en un juego de niños. Si no está seguro de la función o la construcción XSL que necesita, puede consultar la referencia de XSLT de O’Reilly en el panel Referencia, seleccionando Ventana > Referencia y O’REILLY XSLT Reference en el menú emergente Libro.

Figura 31. Referencia de XSLT de O’Reilly en el panel Referencia

Figura 31. Referencia de XSLT de O’Reilly en el panel Referencia

Incluso puede copiar y pegar ejemplos de código del panel Referencia directamente en el código.

Guarde el archivo, coloque los archivos en el servidor y obtenga una vista previa en el navegador. Verá que la lista de artículos se ordena en orden descendente.

Creación de una visualización detallada del agregador RSS

Los vínculos a los artículos del Centro de desarrolladores son útiles, pero ¿qué sucede si necesita una página detallada que muestre todos los artículos, agrupados por asunto con sus respectivos autores y descripciones? En esta sección pondrá en práctica los conocimientos sobre XSLT recién adquiridos a fin de crear una vista detallada del agregador RSS. Asimismo, aprenderá a usar regiones condicionales para mostrar contenido específico.

Siga estos pasos para crear el fragmento de XSLT que muestra la vista detallada de los artículos:

  1. Seleccione Archivo > Nuevo para crear un nuevo fragmento de XSLT.
  2. Cuando aparezca el mensaje de Dreamweaver, adjunte el agregador RSS remoto, tal y como se ha descrito anteriormente.
  3. Guarde la página como all_articles.xsl.
  4. Arrastre los siguientes nodos desde el árbol XML en el panel Vinculaciones y suéltelos en la página, cada uno en una nueva línea:

    • rss:title (desde el nodo padre rss:channel).
    • rss:description (desde el nodo padre rss:channel).
  5. Aplique formato al título del canal como Heading 2.
  6. Imagínese que su sitio trata de la tecnología Flash. Por tanto, desea mostrar artículos relacionados con Flash en primer lugar y el resto de artículos después, en un encabezado aparte. Escriba el siguiente texto debajo de la descripción del canal, en dos líneas individuales:

    Flash Other Technologies

  7. Aplique formato a las dos líneas como Heading 3. La página debe asemejarse a la figura 32 en la vista Diseño:

    Figura 32. Vista Diseño del fragmento de XSLT

    Figura 32. Vista Diseño del fragmento de XSLT

  8. En una nueva línea debajo del encabezado de Flash, arrastre y suelte el nodo del título del artículo (rss:title) desde el nodo padre rss:item.
  9. Vincule el título del artículo al recurso correspondiente, tal y como se ha descrito anteriormente.
  10. En la misma línea, inserte un guión largo después del título del artículo en la ficha Texto de la barra Insertar.

    Figura 33. Inserción de un guión largo

    Figura 33. Inserción de un guión largo

    Nota: si el botón del guión largo no aparece en la barra Insertar, posiblemente deba seleccionarlo en el menú que incluye más caracteres en el extremo derecho de los caracteres que se muestran.

  11. Escriba by después del guión largo. A continuación, arrastre y suelte el nodo dc:creator después del guión.
  12. Coloque el cursor al final de la línea y presione Mayús + Intro (Windows) o Mayús + Retorno (Macintosh) para empezar una nueva línea inmediatamente debajo de ella.
  13. En la nueva línea, arrastre y suelte el nodo de la descripción del artículo (rss:description) desde el nodo padre rss:item. En la vista Diseño, la página deberá asemejarse a la figura 34.

    Figura 34. Vista Diseño del fragmento de XSLT

    Figura 34. Vista Diseño del fragmento de XSLT

En la próxima sección, aprenderá a usar las regiones condicionales para agrupar artículos por tema.

Utilización de regiones condicionales

Para mostrar sólo los artículos relacionados con Flash en el encabezado de Flash, debe definir una región condicional.

Ahora, aprenderá a hacer esto visualmente, mediante las funciones de creación XML de Dreamweaver 8:

  1. Seleccione el párrafo que contiene los detalles del artículo haciendo clic en la etiqueta <p> correspondiente en el selector de etiquetas.
  2. Vaya a la ficha XSLT de la barra Insertar y haga clic en el botón Región condicional:

    Figura 35. Acceso al comando Región condicional

    Figura 35. Acceso al comando Región condicional

  3. En el cuadro de diálogo Región condicional, escriba la línea siguiente:

    contains(dc:subject,'Flash') 

    Se trata de una expresión XPath que devuelve el valor true cuando el nodo del asunto contiene la palabra “Flash”. Cuando se cumple esta condición, se muestra el artículo.

  4. Haga clic en Aceptar para cerrar el cuadro de diálogo Región condicional. Dreamweaver muestra un borde gris con la etiqueta xsl:if alrededor del texto seleccionado.

Para mostrar todos los artículos sobre Flash, debe recorrer todos los elementos del agregador RSS y evaluar la condición de prueba cada vez mediante la región repetida. A tal efecto, siga estos pasos:

  1. Seleccione la etiqueta <xsl:if> en el selector de etiquetas.
  2. Aplique una región repetida, como ya he explicado en una sección anterior de este artículo.
  3. Guarde la página y obtenga una vista previa de ella en el navegador. Debe asemejarse a la figura 36. Su página posiblemente tendrá más artículos, ya que se han incorporado nuevos artículos de Flash desde que se elaboró el artículo.

    Figura 36. Vista previa del fragmento de XSLT en el navegador

    Figura 36. Vista previa del fragmento de XSLT en el navegador

Antes de completar este fragmento de XSLT, debe mostrar los artículos restantes bajo el encabezado “Other Technologies”:

  1. Seleccione la etiqueta <xsl:for-each> en el selector de etiquetas.
  2. Copie el contenido seleccionado y péguelo en una nueva línea debajo del encabezado “Other Technologies” mediante los comandos Copiar y Pegar del menú Edición.
  3. La región condicional debe mostrar únicamente los artículos que no contienen la palabra “Flash” en su nodo de asunto. Para ello, debe cambiar la condición de prueba. Seleccione la etiqueta <xsl:if> correspondiente a la segunda región condicional en el selector de etiquetas.
  4. Dreamweaver muestra la condición de prueba para la región seleccionada en el inspector de propiedades, tal y como se muestra en la figura 37.

    Figura 37. Selección de regiones condicionales en el selector de etiquetas

    Figura 37. Selección de regiones condicionales en el selector de etiquetas

  5. Cambie la condición por ésta:

    not(contains(dc:subject,'Flash')) 

    Se trata, simplemente, de la negación de la expresión XPath inicial. Significa que si el asunto del artículo no contiene la palabra Flash, se mostrará el artículo.

  6. Guarde el fragmento de XSLT y cárguelo en el servidor de prueba.

Para mostrar el agregador detallado en una página dinámica, deberá volver a usar el comportamiento del servidor XSL Transformation.

  1. Abra la página homepage.html y guárdela como un página dinámica, correspondiente a su modelo de servidor (ColdFusion, PHP, ASP o ASP.NET).
  2. Cambie a la vista Código, seleccione las líneas de código comprendidas entre 19 y 28, y elimínelas, a fin de quitar el contenido del área principal de la página.
  3. Vuelva a la vista Diseño y coloque el cursor dentro de la etiqueta <div> vacía que debe mostrar el contenido:

    Figura 38. Edición de la página dinámica

    Figura 38. Edición de la página dinámica

  4. Aplique el comportamiento del servidor XSL Transformation y configúrelo como se muestra en la figura 39.

    . Figura 39. Aplicación del comportamiento del servidor XSL Transformation

    Figura 39. Aplicación del comportamiento del servidor XSL Transformation

  5. Guarde la página y cargue todos los archivos en el servidor de prueba. Obtenga una vista previa de la página en el navegador y vea los resultados:

    Figura 40. Vista previa de la página final en el navegador

    Figura 40. Vista previa de la página final en el navegador

Más información

En este artículo, ha aprendido cómo Dreamweaver 8 utiliza un agregador RSS remoto en las páginas dinámicas y procesa dicho agregador de varias formas. Con las funciones visuales de creación XML, puede mostrar datos XML fácilmente, definir regiones repetidas y condicionales, así como crear expresiones XPath complejas. Sólo su imaginación pone límites a las formas en que puede usar XML y XSL en las aplicaciones Web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *