CSS y XLS: aplicación

Introducción

Los ejemplos de este capítulo le ayudarán a poner en práctica lo que hemos estudiado en esta parte.

Se trata de mostrar los diferentes métodos de formateo de documentos XML con la ayuda de cuatro ejemplos. Se propondrá un último truco para presentar el contenido XML en una página HTML sin utilizar CSS ni XSL.

El primer ejemplo muestra la vinculación de una hoja de estilo CSS a un documento XML.
Los ejemplos segundo y tercero son relativos a las hojas de estilo XSL.
El cuarto ejemplo trata de la conversión de un archivo de transformación XSL-FO en un documento PDF utilizando la herramienta FOP y, evidentemente, el lenguaje de transformación XSL-FO.
El truco que le ofrecemos al final del capítulo le permitirá inyectar datos XML en un elemento HTML: las data islands.

Aplicar una hoja de estilo CSS a un documento XML

1. El documento XML

El objetivo de este ejemplo es ilustrar el uso de estilos CSS para definir la presentación de un documento XML.

El ejemplo representa un conjunto de vuelos de una compañía aérera.

Describimos el comportamiento de cada elemento de este documento, dentro de una hoja CSS, en el momento que se muestra en el navegador.

Este es el documento XML para el cual hemos escrito una hoja de estilo CSS:


<?xml version="1.0" encoding="ISO-8859-1"?>   
<?xml-stylesheet type="text/css" href="tarjetadevuelo.css" ?> 
   
<tarjetadevuelo>   
   
<vuelo>   
  <número>PIA394</número>   
  <avión>Airbus A380</avión>   
   
  <ruta>   
  <aeropuerto_partida>CDG</aeropuerto_partida>   
  <aeropuerto_destino>CUN</aeropuerto_destino>   
  <fecha_salida>18/06/2006</fecha_salida>   
  </ruta>   
   
  <pilotos>   
    <CDB>S. Thevenin</CDB>   
    <COPI>Y. Samj </COPI>   
  </pilotos>   
  <PNC>   
    <JEFEDECABINA>M. Hein</JEFEDECABINA>   
    <AUXILIAR>P. Torni</AUXILIAR>   
    <AUXILIAR>O. Voux</AUXILIAR>   
    <AZAFATA>R. ELAmar</AZAFATA>   
    <AZAFATA>S. Lokih</AZAFATA>   
    <AZAFATA>S....

Aplicación de una hoja de estilo XSL

Dado que XSLT es un lenguaje muy completo, vamos a empezar con un ejemplo muy sencillo que consiste en transformar un documento XML que contiene dos elementos en un documento HTML simple.

1. El documento XML de base

Este es el documento XML que se va a transformar, podemos guardarlo, por ejemplo, con el nombre articulo.xml:


<?xml version="1.0" encoding="ISO-8859-1" ?>   
   
<?xml-stylesheet  type="text/xsl" href="xmltohtmlsimple.xsl" ?>  
   
<artículo>   
   
<Título> Air Picardie adquirida por Frech Airways</Título>   
<Contenido> El director general de Air Picardie firma un acuerdo de venta  
de su empresa.</Contenido>   
   
</artículo>

Este documento XML tiene una particularidad ya que está vinculado a una hoja de estilo XSL por la siguiente línea:


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

Esta instrucción obliga al intérprete a realizar la transformación descrita en la hoja XSL de transformación. A continuación descubriremos la transformación XSL asociada.

2. La transformación XSL

Esta hoja de estilo debe permitir recuperar los elementos que componen el elemento "artículo" e insertarlos dentro de una tabla HTML.

Recordemos que en HTML para definir una tabla utilizamos las etiquetas <TABLE>...

Transformación XSL de un documento XML

1. El documento XML de base

Este es el documento XML de base:


<?xml version="1.0" encoding="ISO-8859-1"?>   
   
<?xml-stylesheet type="text/xsl" href="CD.xsl"?>   
<listaCD>   
  <cd>   
    <títuloÁlbum>Lorca</títuloÁlbum>   
    <nombreIntérprete>Tim Buckley</nombreIntérprete>   
    <pista>   
      <núm>1</núm>   
      <título>Lorca</título>   
      <duración>9:53</duración>   
    </pista>   
    <pista>   
      <núm>2</núm>   
      <título>Anonymous Proposition</título>   
      <duración>7:43</duración>   
    </pista>   
     <pista>   
      <núm>3</núm>   
      <título>I had a talk with my Woman</título>   
      <duración>5:55</duración>   
    </pista>   
    <pista>   
      <núm>4</núm>   
      <título>Driftin'</título>   
      <duración>8:10</duración>   
    </pista>   
    <pista>   
      <núm>5</núm>   
      <título>Nobody Walkin'</título>   
      <duración>7:30</duración>   
    </pista>   
  </cd>   
  <cd>   
    <títuloÁlbum>The Queen...

Creación de un documento PDF con XSL-FO

XSL Formatting Objects es un lenguaje escrito en XML. En este ejemplo verá cómo sacar provecho de XSL-FO para especificar con total precisión la paginación, la organización y la información de estilo aplicada al contenido. El ejemplo de esta sección retoma el tutorial del capítulo XSL: las hojas de estilos XML en XSL-FO. Una vez se obtiene la fuente XSL-FO, hay que encontrar un medio de generar una salida. En el caso de este ejemplo, se generará un documento PDF utilizando la herramienta FOP de Apache.

Recordemos que el documento descrito está compuesto de tres tipos de página:

portada;
página izquierda;
página derecha.

La portada es una página simple que contiene un título y una imagen. Se posiciona como una página derecha. Después, el documento estará compuesto de la secuencia de una página izquierda y de una página derecha que ofrecen el contenido. Una página izquierda tiene un espacio a la derecha mayor para dejar sitio a una posible encuadernación. Del mismo modo, la página derecha tiene un espacio a la izquierda mayor. Tanto las páginas izquierdas como derechas tienen un encabezado y un pie de página. El encabezado permite repetir el título del informe técnico y el pie de página muestra el número de la página del documento.

1. El ejemplo completo

Este es el código FOP completo que permitirá generar el documento PDF final (puede guardar este archivo con el nombre doc.fo):


<?xml version="1.0" encoding="ISO-8859-1"?>   
<fo:root font-family="Times Roman" font-size="12pt" text-align= 
"center"xmlns:fo="http://www.w3.org/1999/XSL/Format"> 
   
<fo:layout-master-set>   
   
  <fo:simple-page-master master-name="portada"   
      page-height="21cm"   
      page-width="29.7cm"   
      margin-top="1cm"   
      margin-bottom="1cm"   
      margin-left="2cm"   
      margin-right="1cm">   ...

Un último truco para integrar XML en HTML

Para concluir esta parte acerca de la presentación de documentos XML, le informamos de que existen todavía dos trucos prácticos para incluir contenido XML dentro de sus páginas HTML:

La inclusión simple mediante la etiqueta <xml>;
la inclusión mediante "data island".

1. Inclusión simple de contenido XML en HTML

Es posible integrar contenido XML en HTML introduciendo código XML entre las etiquetas <xml> y </xml>, como se muestra en el siguiente ejemplo:


<html>   
   
<head>   
   
<title>HTML y XML</title>   
   
</head>   
   
<body>   
   
<p>Contenido XML</p>   
   
<xml id="artículo">   
<artículo>   
  <título>Insertar contenido XML en una página HTML</título>   
  <texto>Es posible insertar contenido XML en una página HTML  
con la etiqueta XML</texto>   
</artículo>   
</xml>   
   
   
</body>   
   
   
</html>

Sin embargo...

Conclusión

Después de haber aprendido a diseñar sus propios documentos XML, podrá sacar el máximo provecho a las técnicas de presentación de documentos XML. XSL, el lenguaje recomendado por el W3C para la representación de datos de documentos XML, ya no tiene secretos para usted. En la siguiente sección abordaremos la aplicación de XML en el mundo de la Web y de Internet. Es ahí donde reside el interés principal de este lenguaje ya que podría convertirse en el lenguaje de la Web.