Acerca de XML y XSLT

Uso de XML y XSL con páginas web

Extensible Markup Language (XML) es un lenguaje que te permite estructurar información. Como HTML, XML te permite estructurar tu información usando etiquetas, pero las etiquetas XML no están predefinidas como las etiquetas HTML. En su lugar, XML te permite crear etiquetas que mejor definan tu estructura de datos (esquema). Las etiquetas están anidadas dentro de otras para crear un esquema de etiquetas principales y secundarias.Como la mayoría de las etiquetas HTML, todas las etiquetas de un esquema XML tienen una etiqueta de apertura y otra de cierre.

El siguiente ejemplo muestra la estructura básica de un archivo XML:

<?xml version="1.0">

<mybooks>

<book bookid="1">

<pubdate>03/01/2004</pubdate>

<title>Displaying XML Data with Adobe Dreamweaver</title>

<author>Charles Brown</author>

</book>

<book bookid="2">

<pubdate>04/08/2004</pubdate>

<title>Understanding XML</title>

<author>John Thompson</author>

</book>

</mybooks>

En este ejemplo, cada etiqueta principal <book> contiene tres etiquetas hijas: <pubdate>, <title>, y <author>. Pero cada etiqueta <book> también es una etiqueta hija de la etiqueta <mybooks>, que está un nivel más arriba en el esquema. Puedes nombrar y estructurar las etiquetas XML de cualquier manera, siempre que anides las etiquetas correspondientes dentro de otras, y asignes a cada etiqueta de apertura una etiqueta de cierre correspondiente.

Los documentos XML no contienen ningún formato: son simplemente contenedores de información estructurada. Una vez que tienes un esquema XML, puedes usar Extensible Stylesheet Language (XSL) para mostrar la información. De la misma manera que las hojas de estilo en cascada (CSS) te permiten dar formato a HTML, XSL te permite dar formato a los datos XML. Puedes definir estilos, elementos de página, diseño, etc. en un archivo XSL y adjuntarlo a un archivo XML para que cuando un usuario vea los datos XML en un explorador, los datos se formateen según lo que hayas definido en el archivo XSL. El contenido (los datos XML) y la presentación (definida por el archivo XSL) están completamente separados, lo que proporciona un mayor control sobre cómo aparece la información en una página web. En esencia, XSL es una tecnología de presentación para XML, donde el resultado principal es una página HTML.

Extensible Stylesheet Language Transformations (XSLT) es un subconjunto del lenguaje XSL que permite mostrar datos XML en una página web y "transformarlos", junto con los estilos XSL, en información legible y con formato en forma de HTML. Puede usar Dreamweaver para crear páginas XSLT que permitan realizar transformaciones XSL usando un servidor de aplicaciones o un explorador. En una transformación XSL del lado del servidor, el servidor se encarga de transformar el XML y XSL, y mostrarlo en la página. En una transformación del lado del cliente, un explorador (como Internet Explorer) realiza el trabajo.

El enfoque que finalmente adoptes (transformaciones del lado del servidor frente a transformaciones del lado del cliente) depende de lo que trates de lograr como resultado final, las tecnologías disponibles, el nivel de acceso que tengas a los archivos fuente XML y otros factores.Los dos métodos presentan sus propias ventajas y limitaciones. Por ejemplo, las transformaciones del lado del servidor funcionan en todos los exploradores, mientras que las transformaciones lado del cliente están restringidas solo a exploradores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 y Firefox 1.0.2). Las transformaciones del lado del servidor permiten mostrar datos XML dinámicamente desde su propio servidor o desde cualquier otro lugar en la web, mientras que las transformaciones lado del cliente deben usar datos XML alojados localmente en su propio servidor web. Finalmente, las transformaciones del lado del servidor requieren que implementes tus páginas en un servidor de aplicaciones configurado, mientras que las transformaciones del lado del cliente solo requieren acceso a un servidor web.

Para ver un tutorial sobre el lenguaje XML, consulte www.adobe.com/go/vid0165_es.

Transformaciones XSL en el lado del servidor

Dreamweaver proporciona métodos para crear páginas XSLT que permiten realizar transformaciones XSL del lado del servidor. Cuando un servidor de aplicaciones realiza la transformación XSL, el archivo que contiene los datos XML puede residir en tu propio servidor, o en cualquier otro lugar de la web.Además, cualquier explorador puede mostrar los datos transformados. Sin embargo, implementar páginas para transformaciones del lado del servidor es algo complejo y requiere tener acceso a un servidor de aplicaciones.

Al trabajar con transformaciones XSL del lado del servidor, puedes usar Dreamweaver para crear páginas XSLT que generen documentos HTML completos (páginas XSLT completas), o fragmentos XSLT que generen una parte de un documento HTML.Una página XSLT completa es similar a una página HTML normal. Contiene una etiqueta <body> y una etiqueta <head>, y permite mostrar una combinación de datos HTML y XML en la página. Un fragmento XSLT es una porción de código, usado por un documento separado, que muestra datos XML con formato. A diferencia de una página XSLT completa, es un archivo independiente que no contiene etiquetas <body> o <head>. Si quieres mostrar datos XML en una página propia, debes crear una página XSLT completa y vincular tus datos XML a ella.Si, por el contrario, quisieras mostrar datos XML en una sección particular de una página dinámica existente (por ejemplo, una página principal dinámica para una tienda de artículos deportivos, con puntuaciones deportivas de un feed RSS mostradas en un lado de la página), crearías un fragmento XSLT e insertarías una referencia a él en la página dinámica.Crear fragmentos XSLT y usarlos en conjunto con otras páginas dinámicas para mostrar datos XML es el escenario más común.

El primer paso para crear estos tipos de páginas es crear el fragmento XSLT. Es un archivo separado que contiene el diseño, el formato y demás elementos de los datos XML que finalmente quieres mostrar en la página dinámica.Una vez que crees el fragmento XSLT, insertas una referencia a él en tu página dinámica (por ejemplo, una página PHP o ColdFusion).La referencia insertada al fragmento funciona de manera muy similar a una inclusión del lado del servidor (SSI): los datos XML formateados (el fragmento) residen en un archivo independiente, mientras que en la vista de diseño, aparece un marcador de posición para el fragmento en la propia página dinámica.Cuando un explorador solicita la página dinámica que contiene la referencia al fragmento, el servidor procesa la instrucción incluida y crea un nuevo documento en el que aparece el contenido formateado del fragmento en lugar del marcador de posición.

Use el comportamiento del servidor Transformación XSL para insertar la referencia a un fragmento XSLT en una página dinámica.Al insertar la referencia, Dreamweaver genera una carpeta includes/MM_XSLTransform/ en la carpeta raíz del sitio que contiene un archivo de biblioteca de tiempo de ejecución.El servidor de aplicación usa las funciones definidas en este archivo al transformar los datos XML especificados.El archivo es responsable de obtener los datos XML y los fragmentos XSLT, realizar la transformación XSL y mostrar los resultados en la página web.

El archivo que contiene el fragmento XSLT, el archivo XML que contiene los datos y el archivo de biblioteca de tiempo de ejecución generado deben estar todos en el servidor para que la página se muestre correctamente.(Si selecciona un archivo XML remoto como fuente de datos, uno de un feed RSS, por ejemplo, ese archivo debe, por supuesto, residir en algún otro lugar de Internet.)

También puedes usar Dreamweaver para crear páginas XSLT completas para usar con transformaciones del lado del servidor.Una página XSLT completa funciona exactamente de la misma manera que un fragmento XSLT, solo que cuando inserta la referencia a la página XSLT completa usando el comportamiento del servidor Transformación XSL, está insertando el contenido completo de una página HTML.Por tanto, la página dinámica (la página .cfm, .php o .asp que actúa como página contenedora) debe limpiarse de todo HTML antes de insertar la referencia.

Dreamweaver admite transformaciones XSL para páginas ColdFusion, ASP y PHP.

Transformaciones XSL en el lado del cliente

Es posible llevar a cabo transformaciones XSL en el cliente sin necesidad de utilizar un servidor de aplicaciones. Se puede usar Dreamweaver para crear una página XSLT que realice el proceso, pero es necesario manipular el archivo XML que contiene los datos que desea mostrar para las transformaciones en el lado del cliente. Además, las transformaciones en el lado del cliente solo funcionan en navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8, y Firefox 1.0.2). 

En primer lugar, cree una página completa XSLT y adjunte una fuente de datos XML. (Dreamweaver le pedirá que adjunte la fuente de datos al crear la página nueva). Puede crear una página XSLT desde cero, o bien convertir una página HTML existente en una página XSLT. Al convertir una página HTML existente en una página XSLT, debe adjuntar una fuente de datos XML a través del panel Vinculaciones (Ventana > Vinculaciones).

Una vez creada la página XSLT, debe vincularla al archivo .xml que contiene los datos XML insertando una referencia a la página XSLT en el propio archivo XML (al igual que se inserta una referencia en una hoja de estilos CSS externa en la sección <head> de una página HTML). Los visitantes del sitio deben ver el archivo .xml (y no la página XSLT) en un navegador. Cuando los visitantes del sitio visualizan la página, el navegador lleva a cabo la transformación XSL y muestra los datos XML formateados por la página XSLT vinculada.

Conceptualmente, la relación existente entre las página XSLT vinculada y la página XML es similar, aunque no coincide con el modelo de la página CSS/HTML externa. Si se dispone de una página HTML con contenido (por ejemplo, texto), puede utilizar una hoja de estilos externa para dar formato al contenido. La página HTML determina el contenido y el código CSS externo (invisible para el usuario) determina la presentación. Con XSLT y XML, la situación cambia. El archivo XML (que el usuario nunca ve en un forma original) determina el contenido, mientras que la página XSLT determina la presentación. La página XSLT contiene las tablas, formato, gráficos, etc., que suele contener el HTML estándar. Cuando un usuario visualiza el archivo XML en un navegador, la página XSLT da formato al contenido.

Cuando utiliza Dreamweaver para vincular una página XSLT a una página XML, Dreamweaver inserta automáticamente el código apropiado en la parte superior de la página XML.Si posees la página XML a la que te estás vinculando (es decir, si el archivo XML reside exclusivamente en tu servidor web), todo lo que necesitas hacer es usar Dreamweaver para insertar el código apropiado que vincule las dos páginas.Cuando tienes el archivo XML, las transformaciones XSL realizadas por el cliente son completamente dinámicas.Es decir, cada vez que actualice los datos en el archivo XML, cualquier salida HTML que use la página XSLT vinculada se actualizará automáticamente con la nueva información.

Si no posees la página XML a la que te estás vinculando (por ejemplo, si quieres usar datos XML de una fuente RSS en algún lugar de la web), el flujo de trabajo es un poco más complicado.Para realizar transformaciones del lado del cliente usando datos XML de una fuente externa, primero debe descargar el archivo fuente XML al mismo directorio donde reside su página XSLT.Cuando la página XML está en su sitio local, puede usar Dreamweaver para agregar el código apropiado que la vincule a la página XSLT, y publicar ambas páginas (el archivo XML descargado y la página XSLT vinculada) en su servidor web.Cuando el usuario ve la página XML en un explorador, la página XSLT formatea el contenido, igual que en el ejemplo anterior.

La desventaja de realizar transformaciones XSL del lado del cliente en datos XML que provienen de una fuente externa es que los datos XML son solo parcialmente "dinámicos". El archivo XML que descargas y modificas es simplemente una "instantánea" del archivo que se encuentra en otro lugar de la web. Si el archivo XML original de la web cambia, debes descargar el archivo nuevamente, vincularlo a la página XSLT y volver a publicar el archivo XML en tu servidor web.El explorador solo procesa los datos que recibe del archivo XML en tu servidor web, no los datos contenidos en el archivo fuente XML original.

Datos XML y elementos repetidos

El objeto XSLT Región repetida te permite mostrar elementos repetidos de un archivo XML dentro de una página.Cualquier área que contenga un marcador de posición de datos XML puede convertirse en una zona repetida. Sin embargo, las áreas más comunes son una tabla, una fila de tabla o una serie de filas de tabla.

El siguiente ejemplo muestra cómo se aplica el objeto XSLT Área repetida a una fila de tabla que muestra información del menú de un restaurante. La fila inicial muestra tres elementos diferentes del esquema XML: artículo, descripción y precio. Cuando se aplica el objeto XSLT Área repetida a la fila de tabla, y la página es procesada por un servidor de aplicaciones o un explorador, la tabla se repite con datos únicos insertados en cada nueva fila de tabla.

Cuando aplicas un objeto XSLT Área repetida a un elemento en la ventana Documento, aparece un contorno gris delgado con pestañas alrededor de la región repetida.Cuando previsualizas tu trabajo en un explorador (Archivo > Vista previa en explorador), el contorno gris desaparece y la selección se expande para mostrar los elementos repetidos especificados en el archivo XML, como en la ilustración anterior.

Cuando agregas el objeto XSLT Área repetida a la página, la longitud del marcador de posición de datos XML en la ventana Documento se trunca. Esto se debe a que Dreamweaver actualiza la expresión XPath (lenguaje de rutas XML) para el marcador de posición de datos XML para que sea relativa a la ruta del elemento repetido.

Por ejemplo, el siguiente código es para una tabla que contiene dos marcadores de posición dinámicos, sin un objeto XSLT Área repetida aplicado a la tabla:

<table width="500" border="1">

    <tr> 

<td><xsl:value-of select="rss/channel/item/title"/></td>

</tr>

    <tr> 

<td><xsl:value-of select="rss/channel/item/description"/></td>

</tr>

</table>

El siguiente código es para la misma tabla con el objeto XSLT Región repetida aplicado a ella:

<xsl:for-each select="rss/channel/item">

<table width="500" border="1">

        <tr> 

<td><xsl:value-of select="title"/></td>

</tr>

        <tr> 

<td><xsl:value-of select="description"/></td>

</tr>

    </table> 

</xsl:for-each>

En el ejemplo anterior, Dreamweaver ha actualizado el XPath para los elementos que se encuentran dentro de la Región de repetición (título y descripción) para que sea relativo al XPath en las etiquetas <xsl:for-each> que lo contienen, en lugar del documento completo.

Dreamweaver genera expresiones XPath relativas al contexto en otros casos también. Por ejemplo, si arrastras un marcador de posición de datos XML a una tabla que ya tiene un objeto XSLT de Región de repetición aplicado, Dreamweaver muestra automáticamente el XPath relativo al XPath existente en las etiquetas <xsl:for-each> que lo contienen.

Vista previa de datos XML

Cuando usas Vista previa en explorador (Archivo > Vista previa en explorador) para previsualizar datos XML que has insertado en un fragmento XSLT o una página XSLT completa, el motor que realiza la transformación XSL difiere según la situación. Para páginas dinámicas que contienen fragmentos XSLT, el servidor de aplicación siempre realiza la transformación. En otras ocasiones, puede que sea Dreamweaver o el explorador el que esté realizando la transformación.

La siguiente tabla resume las situaciones al usar Vista previa en explorador y los motores que realizan las respectivas transformaciones:

Los siguientes temas proporcionan directrices para ayudarte a determinar los métodos de vista previa apropiados, según tus necesidades.

Obtención de vista previa de páginas para transformaciones en el lado del servidor

En el caso de transformaciones del lado del servidor, el contenido que el visitante del sitio ve finalmente es transformado por tu servidor de aplicación. Cuando creas páginas XSLT y dinámicas para usar con transformaciones del lado del servidor, siempre es preferible previsualizar la página dinámica que contiene el fragmento XSLT en lugar del fragmento XSLT en sí mismo. En el primer escenario, haces uso del servidor de aplicación, lo que asegura que tu vista previa sea coherente con lo que verán los visitantes del sitio cuando visiten tu página. En el último escenario, Dreamweaver realiza la transformación y podría proporcionar resultados ligeramente inconsistentes. Puedes usar Dreamweaver para previsualizar tu fragmento XSLT mientras lo construyes, pero podrás ver los resultados más precisos del renderizado de datos si usas el servidor de aplicación para previsualizar tu página dinámica después de haber insertado el fragmento XSLT.

Obtención de vista previa de páginas para transformaciones en el lado del cliente

En el caso de transformaciones del lado del cliente, el contenido que el visitante del sitio ve finalmente es transformado por un explorador.Logras esto agregando un enlace del archivo XML a la página XSLT. Si abres el archivo XML en Dreamweaver y lo previsualizas en un explorador, fuerzas al explorador a cargar el archivo XML y realizar la transformación. Esto te proporciona la misma experiencia que la de tu visitante del sitio.

Sin embargo, usar este enfoque hace más difícil depurar tu página porque el explorador transforma el XML y genera el HTML internamente. Si seleccionas la opción Ver fuente del explorador para depurar el HTML generado, solo verás el XML original que recibió el explorador, no el HTML completo (etiquetas, estilos y demás) responsable del renderizado de la página. Para ver el HTML completo al visualizar el código fuente, debes obtener una vista previa de la página XSLT en un explorador.

Obtención de vista previa de páginas XSLT y fragmentos de XSLT

Cuando creas páginas XSLT completas y fragmentos XSLT, querrás previsualizar tu trabajo para asegurarte de que tus datos se muestren correctamente. Si usas Vista previa en explorador para mostrar una página XSLT completa o un fragmento XSLT, Dreamweaver realiza la transformación usando un motor de transformación integrado. Este método te da resultados rápidos y te facilita construir y depurar tu página de manera incremental. También proporciona una forma de visualizar el HTML completo (etiquetas, estilos, etc.) seleccionando la opción Ver fuente en el explorador.

Temas similares

• Tutorial de XML
• Realización de la transformación XSL en el servidor
• Realización de la transformación XSL en el cliente
• Visualización de elementos XML repetidos