Convertir XML en HTML utilizando XSLT

!!!Artículo adaptado a la recomendación XSLT del 16 Noviembre de 1999!!!

Este es el primer capítulo de una serie de artículos en los que iremos estudiando qué posibilidades y herramientas existen hoy en día para convertir un documento XML en HTML y cómo visualizarlo en un navegador.

¿Qué es XSLT?

Uno de los problemas del HTML es que no identifica lo que está representando, se preocupa principalmente de que eso tiene que ir en un color o con un tipo de letra determinada, pero no dice que lo que está mostrando es el título de un libro o el precio de un artículo. El XML hace precisamente esto: describe el contenido de lo que etiqueta, sin tener en cuenta en un principio la forma de presentarlo.

El W3C está trabajando actualmente en el desarrollo de un lenguaje de hojas de estilo denominado XSL (Extensible Style Language) que nos permita dar al XML un formato de salida comprensible para los humanos.

Mediante el XSL podremos:

  • Transformar un documento XML en otro XML.
  • O convertirlo en otro formato de salida como puede ser RTF, PDF

El W3C ha divido recientemente esta especificación en dos partes: XSL y XSLT, siendo la XSLT la parte de la especificación que describe el lenguaje que nos permite convertir un documento XML en otro XML.

Motores XSLT

Hay que tener en cuenta que la especificación XSLT sigue siendo todavía un borrador (se espera que sea una propuesta definitiva para el verano del 99) y que, por lo tanto:

  • Al no ser definitiva puede todavía sufrir algunos cambios.
  • Y que los motores que existen, no la implementen en su totalidad o proporcionen algunos añadidos que la especificación no contemple.

Existen muchos motores e incluso, como veremos en otros artículos, el propio Explorer 5 implementa un motor XSL que nos permite visualizar directamente XML.

En este artículo vamos a manejar el procesador XSLT denominado XT, esencialmente por dos razones:

  • Ha sido desarrollado por James Clark, que es el artífice de la parte de la especificación que trata el tema de las transformaciones.
  • Y porque su utilización resulta muy sencilla. Existe una versión ejecutable para Windows, aunque para poderla utilizar necesitamos la Maquina Virtual Java que viene con el Explorer 5.

En el caso de que estemos en condiciones de trabajar con la versión ejecutable, para utilizarla no tenemos más que escribir desde la línea de comandos:

xt fichero_xml fichero_xsl fichero_htm

Si no no es posible, al tratarse de una aplicación en Java no tenemos más que tener instalado el JDK (actualmente trabajo con la versión 1.1.5 y funciona correctamente) y seguir los siguientes pasos:

  • Bajarnos la distribución del XT. Donde, entre otros, se encuentran los ficheros xt.jar y sax.jar.
  • Bajarnos el XP, parser de XML en Java, desarrollado por James Clark. Donde, entre otros, se encuentra el fichero xp.jar.
  • Crearnos un fichero xslt.bat, que debe tener el siguiente aspecto:

    set oldClassPath=%CLASSPATH%
    set CLASSPATH=%CLASSPATH%d:xtxt.jar;d:xtsax.jar;d:xtxp.jar;
    java com.jclark.xsl.sax.Driver %1 %2 %3
    set CLASSPATH=%oldClassPath%

    Indicándole en la definición del set CLASSPATH donde se encuentran en nuestra máquina los tres ficheros .jar antes mencionados.

  • Y, finalmente, para ejecutarlo no tendremos más que escribir:

    xslt fichero_xml fichero_xsl fichero_htm
    

Para cualquier duda sobre la instalación y utilización os recomiendo que visitéis la sección sobre XT de la Web de James Clark.

El ejemplo

En nuestro ejemplo tendremos un único fichero XML en el que he reunido mis direcciones de gastronomía preferidas y del que obtendremos dos páginas HTML diferentes con dos XSLT distintas.

Este fichero, gastrono.xml tiene la siguiente estructura:

Código XML de gastrono.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<direcciones>
  <tema>Mis direcciones de gastronomía</tema>
  <intro>Recopìlación de mis direcciones de gastronomía favoritas.</intro>

  <direccion>
    <titulo>El Universal</titulo>
    <url>http://www.el-universal.com/scannone/</url>
    <descripcion>La cocina y la mesa de Armando Scannone con 
      una amplia y buena selección de artículos recetas 
      y consejos</descripcion>
  </direccion>

  ........
  ........

</direcciones>

Y dos XSLT:

Y la forma de generar el HTML es escribiendo desde la línea de comandos las siguientes líneas:

       xt gastrono.xml gastrono1.xsl gastrono1.htm
       xt gastrono.xml gastrono2.xsl gastrono2.htm

o

       xslt gastrono.xml gastrono1.xsl gastrono1.htm
       xslt gastrono.xml gastrono2.xsl gastrono2.htm

una para cada XSLT.

Aunque el objetivo de este artículo no es profundizar en la sintaxis de las XSLT, veamos el código de gastrono1.xsl para destacar algunos conceptos:

gastrono1.xsl

<?xml version="1.0"?>
<xsl:stylesheet 
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="direcciones">  
   <html>
   <head>
      <title><xsl:value-of select="tema"/></title>
      <link rel="stylesheet" type="text/css" href="gastrono.css"/>
   </head>
   <body>
      <center>
      <img src="gastronomia.gif"/>
      </center>
      <xsl:apply-templates/>
   </body>
   </html>

</xsl:template>

<xsl:template match="tema">
   <p class="titulo">
      <xsl:apply-templates/>
   </p>
</xsl:template>

<xsl:template match="direccion">
   <div class="direccion">
      <p>
      <xsl:apply-templates select="titulo"/><br/>
      <xsl:apply-templates select="url"/><br/>
      </p>
      <xsl:apply-templates select="descripcion"/>
   </div>
</xsl:template>


<xsl:template match="titulo">
   <span class="dirtitulo">
      <xsl:apply-templates/>
   </span>
</xsl:template>

<xsl:template match="url">
   <xsl:element name="A">
      <xsl:attribute name="HREF"><xsl:value-of select="."/></xsl:attribute>
      <xsl:apply-templates/>
   </xsl:element>
</xsl:template>

<xsl:template match="descripcion">
   <p class="descripcion">
      <xsl:apply-templates/>  
   </p>
</xsl:template>

</xsl:stylesheet>
 

Como podemos observar:

  • La sintaxis es XML. Por tanto, una vez que aprendamos cómo funciona el XML, no debe resultar muy complicado realizar nuestras primeras XSLT.
  • Como ya hemos dicho, mediante una XSLT convertimos XML en XML; en nuestro ejemplo esto no es del todo cierto, ya que estamos convirtiendo XML en HTML que es una aplicación SGML pero no XML. En definitiva, hemos tenido que indicar al procesador que la salida va a ser HTML 4.0. Esto se realiza mediante la sentencia:

    <xsl:output method="html"/>

    Aunque como podeis observar no la hemos utilizado, ya que el procesador XT genera de forma automatica HTML al ver que la raiz de la salida es el elemento html.

    <xsl:template match="direcciones">  
    <html>
       ....
    </html>

    Actualmente el W3C está trabajando en una reformulación del HTML como una aplicación XML. Esta nueva versión del HTML se llama XHTML.

Para más información sobre XML y XSL os recomiendo que visitéis el tutorial sobre XML, que estoy escribiendo en este mismo web.

Y si os animais a escribir diferentes XSLT para representar gastrono.xml estaría encantado de recibirlas y publicarlas.

Direcciones de interés

Y a continuación una serie de direcciones que os pueden resultar útiles para complementar el artículo: El XT de James Clark.
http://www.jclark.com/xml/xt.html

El procesador de XSLT desarrollado por James Clark, la misma persona que desarrolla la especificación

Espeficicación XSLT
http://www.w3.org/TR/WD-xslt

La especificación de XSLT, en la cual se describe el lenguaje que nos permite transformar un documento XML en otro XML. Todavia es un borrador de trabajo.

XSL en Robin Cover
http://www.oasis-open.org/cover/xsl.html

La sección dedicada al XSL en la Web sobre XML y SGML de Robin Cover.

Tutorial sobre XSLT de Miloslav Nic.
http://zvon.vscht.cz/HTMLonly/XSLTutorial/Books/Book1/index.html

Estupendo tutorial de Miloslav Nic con multiples ejemplos a lo largo de los cuales se estudian diferentes aspectos sobre la utilización de una XSLT.

Lista de correo sobre XSL en Mulberry Technologies
http://www.mulberrytech.com/xsl/xsl-list/

Lista de correo sobre XSL que podemos encontrar en las páginas de Mulberry Tecnologies. Indispensable para estar al día.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

HAY 44 COMENTARIOS
  • Nina dijo:

    He leído vuestra web y me parece que está muy bien, y como veo que eres experto, quisera preguntarte que instricción debo colocar para que el código fuente que se genere en HTML quede organizado y escrito como yo deseo. Por ejemplo, actualmente me pasa que tengo en una pantilla lo siguiente: Y quisiera que todo el incluyendo la imagen esté en una misma línea pero cuando veo el código furete en Internet Explorer veo que está línea la divide. Mucho agradecería vuestra ayuda. Hasta Pronto.

  • mariela bahena dijo:

    hola, muy buen articulo, lo necesitaba gracias.... y oye necesito saber el codigo para reconocer que version de browsers accesan a mi pagina y la velocidad de su pc.. me ayudas??

  • Fran dijo:

    Pues eso que renovemos un poco la información, que los años no pasan en valde

  • javier dijo:

    Me Gustaria saber como pasar unas hojas de html con javascripts y con applets de java a xml o si eso no es posible. Soy un nuevo usuario de xml pero ando todavia bastante perdido en esto de xml, ya q acabo de descubrirlo hace poco. Me gustaria q me pudieras decir si realmente merece la pena ya q aqui en españa existen navegadores anteriores al 3 o 4 pasar las hojas xml, y si merece la pena.

  • Jorge Davila dijo:

    hola primero que nada te felicito esta muy buena la informacion publicada en el tutorial me ayudo mucho cuando empece a manejar xsl ahora tengo una duda sobre si es posible insertar javascript o algun tipo de validacion en las hojas XSL pues si lo inserto directamente los tags script me devuelve un error podrias ayudarme tu o cualquiera de los visitantes? de antemano gracias!! hasta luego

  • María dijo:

    Estoy intentando aprender algo de esta nueva tecnología. Para aprender tenía la intención de hacer una nueva página para lo de gastronomía y ya me he encontrado con la primera dificultad, es la sgte: Quiero que el título sea un enlace a la dirección URL y yo he puesto: Evidentemente no me funciona. Si alguien puede echarme una manita. Muchas gracias

  • María dijo:

    Me parece una web muy interesante, te felicite por ello pero ahora que acabo de dejar una duda y leyendo los comentarios de otras personas se me ha ocurrido que estaría genial que se pudiera consultar las respuestas que se le dan a otras personas, porque muchas cosillas de las que he leido también me interesan a mí. Gracias y felicidades. MARIA

  • Monica Arce dijo:

    Me gustaria saber como pasar unas hojas de html con javascripts y con applets de java a xml, siendo necesario para esto, tengo entendido usar xsl. Recien estoy en un proyecto de pagina web que he desarrollado en html, pero que necesito dejarlo correctamenbte para que luego se desarrolle en xml. Quisiera que me pudieras ayudar con algunos enlaces de paginas que te especifiquen la sintaxis, que cambia al ser xml, sobretodo para ser formularios. Gracias

  • Nuria dijo:

    Excelente artículo. Conciso y claro, con ejemplos y direcciones muy interesantes. Una gran ayuda.

  • Verónica dijo:

    Quisiera saber que herramientas existen para convertir un documento que puede estar por ejemplo en formato .doc o .pdf a XML. Me pareció muy buena la página, me aclaró muchas dudas acerca del XML. Muchas gracias

  • Fritz Villajuan Guzman dijo:

    Por favor pueden dejar esos archivos en descarga de http y no de ftp, ya que desde mi trabajo no lo puedo descargar. Gracias.

  • GLORIA dijo:

    Muy buena la pagina, pero quisiera que me orientaran donde conseguir info acerca de como convertir de xml a xslt y tambien manjenado bases de datos. MUCHAS GRACIAS

  • juanmy dijo:

    Hola: Me gustaria saver porque al escribir al hacer un motor de busqueda segun el dia, y de ahi mandar escribir con javascript en resultado de la cadena, esta no me reconoce el salto de linea. Osea: if (valor == '1/1') document.write ("" 1 linea" "segunda linea" "); else if (valor == '2/1') document.write (" " 1 linea2 " "segunda linea2 " "); En el documento html se escribe solo en una linea. Gracias. :-)

  • Andoni dijo:

    Es posible dar un formato determinado a un campo fecha a través del fichero xsl? Gracias de antemano.

  • Diego Llorca dijo:

    Hola, He generado desde la aplicación de reports de oracle, unos ficheros XML y me gustaría aplicarles XSL para visualizarlo en HTML, el problema es ue no encuentro información de cómo hacerlo con la herramienta del propio Oracle. Alguien tiene alguna idea? Gracias.

  • WILLIAM VITALIANO RODRIGUEZ dijo:

    LE AGREDECERIA SI PUBLIXCA O ME ENVIA UN ARCHIVO DE XML AVANZADO

  • bangkok` dijo:

    hay programas .. que estan hechos con *.xml .. como puedo programas en *.xml .. que se ejecuten como exe .. o como puedo editar el *.xml :)

  • Ricardo dijo:

    ¿Puedo insertar codigo php dentro de una hoja xslt? necesito que ese codigo php luego sea interpretado. Gracias.

  • Ricardo dijo:

    ¿Puedo insertar codigo php dentro de una hoja xslt? necesito que ese codigo php luego sea interpretado. Gracias.

  • Pablo Corredor dijo:

    Como puedo hacer para leer un archivo XML y Insertar su contenido en una base de datos ? muchos de los ejemplos de XML son archivos que muestran una jerarquia Maestro Detalle (Facturas items por ejemplo) como puedo grabar estos datos en una tabla de mi base de datos (Encabezado_factura, Items_Factura) Gracias

  • Rosario Vázquez dijo:

    Hola!! Me gustaría que me enviará un ejemplo de como convertir un archivo xsl a jsp

  • Carlos Mera dijo:

    Les agradeceria que me indicaran que debo incluir en el encabazado de un XML para poder generar codigo XHTML!!! De antemano Gracias.

  • Grimor dijo:

    Hola, estoy intentando incluir un doc XML con todos sus tags tal y como me llega en una pagina HTML, pero esta ignora los tags XML y solo me pone lo que hay dentro de los nodos ,¿hay algun tag en html como el CDATA de xml?o algo para escribir esos tags en la pagina sin q los ignore?. gracias.

  • yo dijo:

    DreamWeaver está para hacer de forma visual un estilo CSS para HTML, existe alguna aplicación para crear el XSLT de un XML de forma sencilla y visual sin picar código fuente?? gracias [email protected]

  • leandro dijo:

    la pregunta es ¿cómo hago para insertar un dato o registro nuevo en una base de datos ".xml" mediante una "asp" ............. muchas gracias..........

  • Esteban Guerrero dijo:

    estoy haciendo un bean que me entrega resultados de una base de datos y quiero desplegarlo en diferentes formatos, pero no se si con XSL puedo tambien generar archivos .doc o .xls. Alguien me puede ayudar?

  • Cristian dijo:

    Hola Tengo un problema al cargar el XSLT.A parecer el header del XSLT no se interpreta correctamente y me muestra el fuente de este en el browser , este error me aparece usando algunas versiones del explorer 6.2X.XX. agradecia alguna orientacion al respecto. gracias

  • marc dijo:

    Me he bajado el xt como dices en el tutorial, y soy incapaz de crear el .bat , ya que en la version que me he bajado (la actual creo), no esta el sax.jar . Tampoco entiendo mucho lo del CLASSPATH, si me lo pudieras aclarar te estaria muy agredecido

  • GoZaMaN dijo:

    ¿Este artículo se mantiene aún vigente a MARZO del 2003?

  • Carlos R. dijo:

    Hola, un favor, donde puedo conseguir un manual que me indique como insertar los datos de un XML y mostrarlos en HTML. Gracias de antemano por su ayuda.

  • Gabriel dijo:

    Muy buen articulo

  • Daniel Moya dijo:

    Acabo de terminar el fantástico curso sobre xml y quería ampliar mis conocimientos porque no comenta mucho sobre el xsl y al ver este pense que tendría la misma calidad.No es asi ya que desde 1999 a dia de hoy esta tecnologia a avanzado bastante. Es una pena que este curso no este actualizado

  • Sabazius dijo:

    Porfa, alguien me puede explicar mejor como trabajar con XSLT, se dice que es un cuasi lenguaje de programación y este artículo (que está muy bueno, no dejo de reconocerlo) no explica esa parte, solo como coger el xml aplicarle el xslt y quedarnos con un html con una herramienta, mas nada Si alguien desea ayudarme, que me escriba a mi dirección. Salu2 y esperando ayuda

  • cristina dijo:

    El articulo es muy interesante, pero tengo un problema... Necesito crear una aplicacion a la que se pueda acceder desde terminales de texto y terminales graficas utilizando java, pero que el usuario lo vea como una pagina web. Auxilio. Gracias

  • jesusoguard dijo:

    hola!! he seguido los pasos del ejemplo de como convertir un archivo xml a html, ya consegui hacer que el programita haga la conversion pero solo me convierte un grafico en gastono.htm y no como el ejemplo me gustaria que especificaran mas lo de los path

  • Carlos Alberto dijo:

    Necesito saber como transformar un documento PDF a XML en forma dinamica en una aplicación, en cualquier lengueje de programación.

  • x dijo:

    ccc

  • Sara dijo:

    Hola, necesito saber como pasar los datos obtenidos en una consulta de una página web a una hoja Excel. Gracias!

  • Sara dijo:

    Hola, necesito saber como pasar los datos obtenidos en una consulta de una página web a una hoja Excel. Gracias!

  • Elisban dijo:

    HOLA, SI ALGUIEN SABE LA MANERA DE HACER CONSULTAS DINAMICAS CON XSL, POR FAVOR HAGANMELO SABER, ...

  • r dijo:

    r

  • ana dijo:

    Hola, estoy insertando una tabla con regiones repetidas para etiquetas XML con datos de texto e imagen. Las etiquetas de texto se me repiten bien, pero no me aparecen las imágenes. No sé poner la ruta a las imágenes. Cuando hago una web con html uso vínculos relativos, pero aquí no me funcionan. Agradecería cualquier ayuda!!!

  • ana dijo:

    Hola, estoy insertando una tabla con regiones repetidas para etiquetas XML con datos de texto e imagen. Las etiquetas de texto se me repiten bien, pero no me aparecen las imágenes. No sé poner la ruta a las imágenes. Cuando hago una web con html uso vínculos relativos, pero aquí no me funcionan. Agradecería cualquier ayuda!!!

  • weqwe dijo:

    ewqqwe

Conéctate o Regístrate para dejar tu comentario.