Entendido.

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

Logo

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++

logo rss 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: 29-01-2016.

Visitas este mes: 112

Visitas el mes pasado: 101

logo
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.




XML (IV)

Estilo con XSL

imagen canvas

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 siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com