Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de XML

XML es un lenguaje para esructurar datos que puede emplearse en la web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net

Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 62

Visitas el mes pasado: 186

WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:

Introducción a XML: Desarrollo Web
Manual de XML: Desarrollo Web
Extensible Markup Language (XML) 1.0: W3C Recommendation 10-February-1998
Extensible Markup Language (XML) 1.0: Recomendación de la W3C - Febrero 1998; traducido por sidar.org
Manual Imprescindible XML: enreas.wikia.com
Entendiendo el XML: Maestros del web
Generación de páginas Web usando XSLT y XML: J. J. Merelo
Primeros pasos con XML y XSL: Ricardo Borillo Domenech
Primeros pasos con XML y XSL: Ricardo Borillo Domenech. Versión en PDF
Tutorial: El lenguaje XSD: www.tic2.org/WebTecnica
Validador de W3C: Markup Validation Service
XML Tutorial: w3schools.com
XSLT Tutorial: w3schools.com
DTD Tutorial: w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

XML (IV)

Estilo con XSL

Qué es XSL

El lenguaje XSL se encarga de dar estilo a los documentos XML. Este lenguaje transforma el documento de entrada o XML en otro documento de salida con otro formato. Aquí veremos concretamente como transformar un documento XML en otro HTML con el mismo contenido, mediante XSL.

Aunque XSL es otro tipo de lenguaje, aquí veremos sólamente lo imprescindible para transformar un documento XML en otro HTML, dejando para otro manual las posibilidades de XSL.

Cabecera del documento

En el documento XML, después de la primera declaración, crearemos un link al archivo XSL, de la siguiente manera:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="nombre_archivo.xsl"?>

Hemos añadido una línea que enlaza el archivo con el archivo XSL. El valor del atributo href lo cambiaremos por la ruta hacia el archivo XSL. El archivo XSL, lo guardaremos con la extensión ".xsl", aquí le llamaremos ejemplo.xsl y las primeras líneas serán siempre las mismas:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">


<!--  contenido del documento  -->


</xsl:template>
</xsl:stylesheet>

Las tres primeras líneas son el principio del documento. El único cambio que tenemos que hacer aquí es cambiar el valor del atributo match (en la tercera línea) por el nombre que le demos a la etiqueta principal en XML (la etiqueta que engloba a todas las demás).

Por otra parte el documento XSL terminará siempre con las dos lineas finales que hemos puesto, las cuales cierran las etiquetas de inicio. Entre medio pondremos el contenido del documento XSL.

Página simple con XSL

Una vez que ya sabemos cómo hacer la cabecera y el final del documento, vamos a seguir la explicación mediante un ejemplo.

Empezamos por construir un archivo XML. Nuestro archivo consistirá en una agenda de personajes ficticios de tebeo. Empezamos por poner el primer personaje:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?>
<agenda_tebeo>

<personaje numero="1">
  <nombre>Mortadelo</nombre>
	<telefono>666555444</telefono>
	<email>mortadelo@tia.com</email>
</personaje>

</agenda_tebeo>

Este es el archivo XML que iremos ampliandolo más adelante. Ahora veamos cómo ver este archivo en el navegador.

La hoja de estilos XSL consistirá en una especie de plantilla del documento HTML que queremos ver en el navegador, a la que le iremos diciendo en cada momento dónde poner los elementos del documento XML. Veamos el archivo XSL y luego lo comentamos:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
  <title>Agenda Tebeo</title>
</head>
<body>
<h1>Agenda de tebeo</h1>

<div class="personaje">
  <h3>contacto número: <xsl:value-of select="personaje/@numero"/></h3>
  <ul>
    <li><xsl:value-of select="personaje/nombre"/></li>
    <li><xsl:value-of select="personaje/telefono"/></li>
    <li><xsl:value-of select="personaje/email"/></li>
  </ul>
</div>

</body>
</html>

</xsl:template>
</xsl:stylesheet>

Antes de seguir con la explicación veamos como queda la página XML. Lo vemos en el siguiente enlace:

personajes_1

El contenido de la página XSL consiste en una página web en HTML (o mejor dicho en XHTML) en la que los valores que queremos tomar del documento XML los insertamos mediante la etiqueta:

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

Los valores del atributo select indican el texto que debe insertarse en esa etiqueta, y se corresponden con las etiquetas y atributos del archivo XML. Se toma como origen el elemento raiz (aquí la etiqueta agenda_tebeo) y a partir de ahí se sigue la ruta para llegar al elemento que quiere mostrarse (poniendo el nombre de las etiquetas separadas por el signo / ). Para mostrar el valor de un atributo se pone el signo arroba @ delante del nombre del atributo.

Añadir más personajes a la agenda

Sin embargo una agenda no consta de un sólo personaje, por lo que añadiremos más personajes a la agenda. para empezar modificamos el documento XML y lo dejamos así:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?>

<agenda_tebeo>
<personaje numero="1">
  <nombre>Mortadelo</nombre>
  <telefono>666555444</telefono>
  <email>mortadelo@tia.com</email>
</personaje>

<personaje numero="2">
  <nombre>Filemon Pi</nombre>
  <telefono>665544332</telefono>
  <email>filemon@tia.com</email>
</personaje>

<personaje numero="3">
  <nombre>Superintendente Vicente</nombre>
  <telefono>678901234</telefono>
  <email>supervicen@tia.com</email>
</personaje>

</agenda_tebeo>

Ahora debemos modificar el archivo XSL para que en la página web se incluyan los otros personajes incorporados.

Podríamos incorporar más código al archivo XSL de forma que incorpore uno a uno todos los personajes. Eso supondría que cada vez que incorporamos un nuevo personaje tenemos que modificar el código del XSL.

Sin embargo el XSL dispone de un mecanismo tipo bucle que hace que una serie de etiquetas iguales se puedan ver con poner sólo una vez el código. Esta es la etiqueta:

<xsl:for-each select="etiqueta_XML"> ... </xsl:for-each>

El código comprendido entre las etiquetas de apertura y cierre se repetirá tantas veces como se repita la etiqueta indicada en select.

Dentro del bucle la etiqueta indicada en select se convierte en etiqueta raíz por lo que sólo podremos hacer referencia a etiquetas que sean hijas de ésta.

Veamos cómo usarlo en el ejemplo anterior, modificando el documento XSL:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
<title>Agenda tebeo</title>
</head>
<body>
<h1>Agenda de tebeo</h1>

<xsl:for-each select="personaje">
<div class="personaje">
  <h3>Personaje número: <xsl:value-of select="@numero"/></h3>
  <ul>
    <li><xsl:value-of select="nombre"/></li>
    <li><xsl:value-of select="telefono"/></li>
    <li><xsl:value-of select="email"/></li>
  </ul>
</div>
</xsl:for-each>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

La página obtenida con los archivos anteriores quedará como la del siguiente enlace.

personajes_2

El código nuevo o modificado lo hemos puesto resaltado en negrita.

Observa como dentro del bucle xsl:for-each los xsl:value-of se refieren a las etiquetas incluidas dentro de la etiqueta personaje, que es la que indicamos en el atributo select.

Otra ventaja de utilizar el bucle xsl:for-each es que podemos seguir añadiendo personajes en el documento XML sin tener que modificar el archivo SXL. Estos se añadirán a la página siempre que la etiqueta personaje tenga la misma estructura que las anteriores.

Sin embargo una página web puede tener algo más que texto, también contiene enlaces, imágenes y otros tipos de contenidos, En la pr�xima página veremos cómo insertar enlaces e imágenes a la página XML.

En la próxima página veremos cómo insertar enlaces e imágenes en una página XML utilizando XSL.

Imagen y enlaces

Manual de XML

Anterior siguiente ... Siguiente