XML y XSL en Cliente

En este tutorial os enseñamos como formaterar documentos XML directamente en vuestro navegador a través de Plantillas XSL. En cursos sucesivos veremos como hacerlo en el servidor, para no crear dependencias con el navegador del cliente.

Crear páginas con XML y XSL en el cliente

Los navegadores cada vez están más avanzados. Una característica que ya
tienen desde hace años es la posibilidad de mostrarte gráficamente un fichero
XML.

Vemos un fichero XML

Si queremos convertir es documento a HTML, podemos, sin necesidad de crear
ninguna rutina en el servidor, hacerlo.

Para ello podemos usar XSL (XML STyleSheet Language)

XSL es un tipo de documento XML (aplicación XML) que tiene un conjunto fijo
de etiquetas usado para definir plantillas para maniñupar documentos XML y
decidir como se desean mostrar.

Un documento XSL es un XML por lo que tendrá la etiqueta:

<?xml version=»1.0″ encoding=»ISO-8859-1″?>

Para indicar que es una hoja XSL

<xsl:stylesheet xmlns:xsl=»http://www.w3.org/TR/WD-xsl»>

Ahora intercalamos dentro de código HTML las etiquetas especiales para
iterar

<?xml version=»1.0″ encoding=»ISO-8859-1″?>
<xsl:stylesheet xmlns:xsl=»http://www.w3.org/TR/WD-xsl»>

<xsl:template match=»/»>
<html>
<body>
<table border=»1″>
<tr>
<td><b>Nombre</b></td>
<td><b>Mercado</b></td>
<td><b>Precio</b></td>
<td><b>Fecha</b></td>
</tr>

<xsl:for-each select=»/cotizacion»>
<tr>
<td><xsl:value-of select=»nombre»/></td>
<td><xsl:value-of select=»mercado»/></td>
<td><xsl:value-of select=»precio»/></td>
<td><xsl:value-of select=»fecha/dia»/>-
<xsl:value-of select=»fecha/mes»/>-
<xsl:value-of select=»fecha/anio»/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Para decirle a un documento XML que XSL queremos utilizar solo tenemos que
usar

<?xml-stylesheet type=»text/xsl» href=»oferta.xsl»?>

El resultado será:

Impresionante verdad

Bueno este es un ejercicio simple, vamos a complicarlo, introduciendo más
cotizaciones y pidiendo que nos ordene la salida.

<?xml version=»1.0″ encoding=»ISO-8859-1″?>
<?xml-stylesheet type=»text/xsl» href=»oferta.xsl»?>
<fichero>
<cotizacion>
<nombre>Autentia</nombre>
<mercado>Madrid</mercado>
<precio>12</precio>
<fecha>
<dia>24</dia>
<mes>04</mes>
<anio>2003</anio>
</fecha>
</cotizacion>
<cotizacion>
<nombre>Acertia</nombre>
<mercado>Madrid</mercado>
<precio>21</precio>
<fecha>
<dia>23</dia>
<mes>04</mes>
<anio>2003</anio>
</fecha>
</cotizacion>
</fichero>

Cambiamos el XSL

<?xml version=»1.0″ encoding=»ISO-8859-1″?>
<xsl:stylesheet xmlns:xsl=»http://www.w3.org/TR/WD-xsl»>

<xsl:template match=»/»>
<html>
<body>
<table border=»1″>
<tr>
<td><b>Nombre</b></td>
<td><b>Mercado</b></td>
<td><b>Precio</b></td>
<td><b>Fecha</b></td>
</tr>

<xsl:for-each select=»*/cotizacion» order-by=»nombre»>
<tr>
<td><xsl:value-of select=»nombre»/></td>
<td><xsl:value-of select=»mercado»/></td>
<td><xsl:value-of select=»precio»/></td>
<td><xsl:value-of select=»fecha/dia»/>-
<xsl:value-of select=»fecha/mes»/>-
<xsl:value-of select=»fecha/anio»/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Y el resultado Seria

Nombre	Mercado	Precio	Fecha
Acertia	Madrid	21	23- 04- 2003
Autentia	Madrid	12	24- 04- 2003

Si queremos que sea ascendente o descendente

<xsl:for-each select=»*/cotizacion»
order-by=»-nombre»>

Ahora vamos a introducir condicionales

<?xml version=»1.0″ encoding=»ISO-8859-1″?>
<?xml-stylesheet type=»text/xsl» href=»oferta.xsl»?>
<fichero>
<cotizacion>
<nombre>Autentia</nombre>
<mercado>Madrid</mercado>
<precio>12</precio>
<fecha>
<dia>24</dia>
<mes>04</mes>
<anio>2003</anio>
</fecha>
</cotizacion>
<cotizacion>
<nombre>Acertia</nombre>
<mercado>Madrid</mercado>
<precio>21</precio>
<fecha>
<dia>23</dia>
<mes>04</mes>
<anio>2003</anio>
</fecha>
</cotizacion>
<cotizacion>
<nombre>AdictosAlTrabajo</nombre>
<mercado>Barcelona</mercado>
<precio>2</precio>
<fecha>
<dia>25</dia>
<mes>04</mes>
<anio>2003</anio>
</fecha>
</cotizacion>
</fichero>

Modificamos en XSL

<?xml version=»1.0″ encoding=»ISO-8859-1″?>
<xsl:stylesheet xmlns:xsl=»http://www.w3.org/TR/WD-xsl»>

<xsl:template match=»/»>
<html>
<body>
<table border=»1″>
<tr>
<td><b>Nombre</b></td>
<td><b>Mercado</b></td>
<td><b>Precio</b></td>
<td><b>Fecha</b></td>
</tr>

<xsl:for-each select=»*/cotizacion» order-by=»-nombre»>
<tr>
<td><xsl:value-of select=»nombre»/></td>

<xsl:if test=»mercado[.=’Madrid’]»>
<i><xsl:value-of select=»mercado»/></i>
</xsl:if>

</td>
<td>
<xsl:value-of select=»precio»/>
</td>
<td><xsl:value-of select=»fecha/dia»/>-
<xsl:value-of select=»fecha/mes»/>-
<xsl:value-of select=»fecha/anio»/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Así vemos el resultado

Nombre	Mercado	Precio	Fecha
Autentia	Madrid	12	24- 04- 2003
AdictosAlTrabajo	Barcelona	2	25- 04- 2003
Acertia	Madrid	21	23- 04- 2003

Hay veces que el código se complica por lo que hay que dividir una plantilla
en varias secciones. Es algo parecido a las funciones dentro de plantillas XSL.

<?xml version=»1.0″ encoding=»ISO-8859-1″?>
<xsl:stylesheet xmlns:xsl=»http://www.w3.org/TR/WD-xsl»>

<xsl:template match=»/»>
<html>
<body>
<table border=»1″>
<tr>
<td><b>Nombre</b></td>
<td><b>Mercado</b></td>
<td><b>Precio</b></td>
<td><b>Fecha</b></td>
</tr>

<xsl:for-each select=»*/cotizacion» order-by=»-nombre»>
<tr>
<td><xsl:apply-templates select=»nombre»/></td>

<xsl:template match=»nombre»>
<b><xsl:value-of select=».»/></b>
</xsl:template>

</xsl:stylesheet>

Tened en cuenta que hemos generado un documento HTML a partir de un XML, pero
poriamos haber generador cualquier otra salida: csv, rtf, wml, etc.

XSL da mucho más de si ….. ya lo veremos más adelante …. y uno de los
aspectos más importantes, como encontrar los errores y depurar las
transformaciones …..

Sobre el Autor ..

Comentarios

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentario *

He leído y acepto la política de privacidad

Nombre *

Correo electrónico *

Web

He leído la política de privacidad y acepto recibir la newsletter con las últimas novedades vía email.

Información básica acerca de la protección de datos

Responsable: IZERTIS S.A.
Finalidad: Envío información de carácter administrativa, técnica, organizativa y/o comercial sobre los productos y servicios sobre los que se nos consulta.
Legitimación: Consentimiento del interesado
Destinatarios: Otras empresas del Grupo IZERTIS. Encargados del tratamiento.
Derechos: Acceso, rectificación, supresión, cancelación, limitación y portabilidad de los datos.
Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad

Roberto Canales Mora

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Profesor asociado en IE Business School, inversor en StartUps y mentor de emprendedores. Ingeniero Técnico de Telecomunicaciones y Executive MBA por IE Business School 2007. Twitter: Follow @rcanalesmora Autor de los Libros: Planifica tu éxito: de aprendiz a empresario, Informática profesional, las reglas no escritas para triunfar en la empresa, Conceptos ágiles aplicados a distintas áreas de una empresa y Conversaciones con CEOs y CIOs sobre Transformación Digital y Metodologías Ágiles. ¡Descárgalos gratis aquí! Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí.

¿Quieres publicar en Adictos al trabajo?

Te puede interesar

Tutoriales

02/03/2026

José Antonio Sánchez Segovia

Zephyr: El equilibrio perfecto para el desarrollo de productos inteligentes

Zephyr es un RTOS open source respaldado por la Linux Foundation que permite desarrollar dispositivos embebidos conectados, eficientes y escalables, facilitando el paso de prototipo a producto final con una arquitectura mantenible.

Tutoriales

23/02/2026

Enrique Casado Díez

LoRa y LoRaWAN: conectividad IoT de largo alcance y bajo consumo

LoRa y LoRaWAN son tecnologías clave en el ecosistema IoT cuando se requiere largo alcance y bajo consumo energético. En este artículo analizamos su funcionamiento, Spreading Factor, link budget, arquitectura de red, frecuencias y clases de dispositivos, con un caso práctico real.

Tutoriales

19/02/2026

Juan José Díaz Antuña

Copilot Chat y el ecosistema de IA de Microsoft: guía práctica para entenderlo, activarlo y sacarle partido

Copilot Chat es la forma más sencilla y segura de empezar a usar IA en Microsoft 365. En este artículo vemos cómo funciona, cómo activarlo y en qué se diferencia de Microsoft 365 Copilot, Copilot Studio y los Agentes Inteligentes, con ejemplos prácticos y una comparativa clara.