Sunteți pe pagina 1din 83

Presentación de la información

XSLT, HTML, CSS


HTML
"Hyper Text
Markup Language"

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
HTML

 Deriva del estándar SGML ”Standard Generalized


Markup Language”
 Es un lenguaje de marcas o etiquetas y es el formato de
los documentos de la www (World Wide Web).
 Describe la estructura y el contenido del documento.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Características Principales

 Es un lenguaje independiente de la plataforma que se utilice,


siempre va a describir la estructura y el contenido de un
documento.
 Se leen en los navegadores Web

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Características Principales
 HTML no es propiamente un lenguaje de
programación como C++, Visual Basic, etc., sino un
sistema de etiquetas.
 HTML no presenta ningún compilador, por lo tanto
algún error de sintaxis que se presente éste no lo
detectará y se visualizara en la forma como éste lo
entienda.
 El entorno para trabajar HTML es simplemente un
procesador de texto, como el que ofrecen los
sistemas operativos Windows (Bloc de notas), UNIX
(el editor vi) o el que ofrece MS Office (Word).

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Características Principales
 El conjunto de etiquetas que se creen, se guardan con
la extensión .htm o .html.
 Existe el HTML Dinámico (DHTML), que permite crear
efectos especiales como, por ejemplo:
 texto que vuela desde la página palabra por

palabra,
 efectos de transición al estilo de anuncio

publicitario giratorio entre página y página.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Editores
– Editores de texto( Word, Wordpac, notepad..)

– Editores de HTML (Microsoft FrontPage, Netscape


Composer, Macromedia Dreamweaver y Adobe
PageMill).

7
Grupo de Investigación Mercator. Laboratorio de Tecnologías de la Información Geográfica (IGN + UPM). España

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
GEOSERVICIOS
Conversores: Herramientas que permiten transformar un
documento escrito a HTML.
Validadores: herramientas que sirven para ver si el código HTML
es correcto.
Ejemplos:
• Servicio de verificación de marcas o etiquetas del W3C
(http://validator.w3.org/)
• Servicio de verificación de hojas de estilo (CSS) en
documentos HTML del W3C (http://jigsaw.w3.org/css-
validator/ )

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Características Principales

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Estructura

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Las etiquetas del lenguaje HTML
 Modifican el comportamiento de los elementos que
contienen
 <h2>, <h3>,<h5>,...
 Se pueden anidar unas dentro de las otras:
 <table>
<td>Nombre</td>
<td>Apellido</td>
</table>
 Pueden tener atributos
 <img “src=ign.gif”/>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Las etiquetas del lenguaje HTML
• Estructura de un documento HTML:
Se definen elementos que
<html> caracterizan el documento
<head>
<!-- cabecera de la página --!>
</head>
<body>
<!-- cuerpo de la página --!>
</body>
</html> Se definen los contenidos y su
visualización

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
<head> Cabecera
• <title> incluye el nombre que utilizará el
navegador para presentar la página

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
<head> Cabecera

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
<head> Cabecera

• <base>indica el directorio base que tendrán las


referencias URL relativas al documento
– <base href=“http://servidor de pruebas/>
• <link>indica relaciones que el documento HTML
tiene con otras páginas
– El argumento ”rel” indica la relación que se tiene con
el enlace
• <link rel=“Next” href=http://www.boe.es/>
• <link rel=“Previous” href=http://www.boe.es/>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
<head> Cabecera
• <meta>: contiene metainformación o contiene información
adicional
– Define un metadato y su valor (para ser interpretado por
navegadores, servidores, buscadores, etc)
• <meta name=“keywords” content=“ tomate lechuga,
fruta huerta />
– Definir un comando interpretado por el navegador:
• <meta http-equiv=“refresh” content=“10;
url=“http://www.ign.es/” />

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
<head> Cabecera
 Indicar al dispositivo cuando una página deja de tener
interés
• <meta http-equiv=“Expires” content=“Monday, 01-Jan-2000 00:00:00
GMT” />

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
<body> Cuerpo
• Define todos los elementos que debe contener la
página y cómo se van a visualizar
• Parámetros a incluir:
– bgcolor: color de fondo de la página (#RRGGBB)

– background: imagen de fondo de la página.

– topmargin: margen entre la parte superior de la


página y los elementos.

– Leftmargin: margen entre la parte izquierda y los


elementos.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Cuerpo - TEXTO

• <p></p>: define un párrafo


• Align: indica la dirección de alineación (left, right,
center, justify)
• <br/>. Indica un salto de línea en el texto.
• <b>: texto en negrita
• <i>: texto en cursiva
• <u>: texto subrayado

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Cuerpo - Cabeceras

• Se pueden crear cabeceras con diferente tamaño de


texto, en función de la importancia:
– <h1>,<h2>,….,<h6>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Listas

• Listas no numeradas o marcadas:


– <ul></ul>: marca el principio y el fin de la lista.
– <li></li>: define cada una de los elementos de la lista.
• Listas numeradas:
– <ol></ol>: marca el principio y el fin de la lista.
– <li></li>: define cada una de los elementos de la lista.
• Listas de definiciones:
– <dl></dl>: marca el principio y el fin de la lista.
– <dt></dt>: elemento a definir
– <dd></dd>: definición

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Tablas

• <table></table>: delimite al comienzo y el


fin de la tabla
– width: indica el ancho de la tabla
– height: indica la altura de la tabla
– border: indica el número de pixels de grosor que
tendrá el borde de la tabla.
– cellpadding: indica el número de pixels entre el
borde de las celdas y su contenido
– cellspacing: indica el número de pixels que
separarán dos celdas limítrofes
• <tr></tr>: delimita una fila de celdas

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Tablas

• <th></th>: delimita el título de la tabla


• <td></td>: delimita el contenido de una celda
– colspan: indica el número de celdas de ancho que va a ocupar
la celda a la que modifica
– rowspan: indica el número de celdas de alto que va a ocupar
la celda a la que modifica

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Enlaces
• <a></a>: indica un enlace con un documento
– href: dirección de destino. Puede ser:
• una dirección local
– <a href=“./curso.html”> clase </a>
– <a href=“.curso.html”> clase </a>
• en el propio documento:
– Atributo name: permite identificar los elementos del
documento
– <a href=“#curso”> clase </a>
– <h1 name=“curso”>clase </h1>
• Referencias remotas (cualquier servidor externo):
– http:// <direcciónServidor>[:<puerto>]/<directorio>/
[<pagina[#<marca>]]

• mailto: seguido de una dirección de correo


(electrónico es la forma de enviar e-mail)
_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Gráficos o imágenes

• <img>: define una imagen dentro del documento


– src: indica la dirección del fichero donde se encuentra
almacenada la imagen
• Puede ser local o remota
• Formatos: gif, jpg, ...
– border: indica el número de pixels del borde de la
imagen
• border=0 indica que la imagen no tiene borde
– align: indica la alineación
• Center (a los lados no habrá otros elementos), left,right

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios
• Se utilizan para que el usuario envíe información
al servidor
• En el servidor existirá un programa que procesará
los datos enviados (CGIs)
– <form></form>: agrupa los elementos donde
se recogerán los datos
– action: indica el programa que procesará los
datos transmitidos al servidor
– method: método para transmitir la
información al servidor GET, POST

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios

• Tipo de elementos para introducir información:


– Directiva input:
• Permite introducir la información a través de diferentes
formatos:
• text: introducción de texto
• Ejemplo:
Nombre<br/>
<input type="text" size="35" name="nombre“ /><br/>
Nombre

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios

• password: para introducir texto que se enmascara


mediante “*” al introducirlo.
– Ejemplo:
Clave<br/>
<input type="password" size="35" name="clave“
/><br/>

Clave
*******

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios

• Select: lista de elementos para elegir


– Selección única
Provincias</br>
<select name=“provincias">
<option value=“albacete">Albacete</option>
<option value=“alicante">Alicante</option>
<option value=“almeria">Almeria</option>
</select>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios

– Selección múltiple:
Provincias</br>
<select name=“provincias“ multiple=“1”>
<option value=“albacete">Albacete</option>
<option value=“alicante">Alicante</option>
<option value=“almeria">Almeria</option>
</select>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios

• Radio Button: elementos de selección excluyente


Sexo <br />
<input type="radio" name="sexo" value="H" checked=“1” />
Hombre<br/>
<input type="radio" name="sexo" value="M“ /> Mujer<br/>
• Check Button: elementos de edición no excluyente
Dispone de vehículo propio <br />
<input type="checkbox" value="1" checked=“1” /> Sí <br/>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Formularios

• Botones:
– Botón para enviar los datos al servidor
– Botón para borrar los campos del formulario
<input type="submit" value="Enviar“ />
<input type="reset" value="Borrar“ /><br/>
• Textos: campos de edición multilínea
Comentarios<br/>
<textarea cols="30" rows="10“
name="comentarios">
</textarea>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Frames (Marcos)

• Es una forma de dividir la pantalla del navegador en varias


páginas
• <frameset></frameset>: agrupa los marcos para determinar
su organización en la pantalla del navegador
– rows: especifica el número de filas
– cols: especifica el número de columnas
• <frame></frame>: define el marco
– src: página que se cargará en el marco inicialmente
– scrolling: permite especificar si el documento tendrá o no barra
de scroll. Valores: yes/no/auto

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Frames (Marcos)
• Ejemplo:
<frameset rows="60,296,85" border=0 frameborder="no"
cellspacing=0>
<frame name="cabecera"src="cabecera.html"noresize
scrolling="no">
<frameset cols="328,304“ border=0 frameborder="no"
cellspacing=0>
<frame name=“Visualizador"src="pres.html" noresize
scrolling="no">
<frame name=“Leyenda" src="<?
$pagina="./contenidos/“
.$nombre.".html"; echo"$pagina"; ?>" noresize
scrolling="auto">
</frameset>
<frame name=“Pie" src="pub.html" noresize
scrolling="no">
</frameset>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Frames (Marcos)

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introduccion

• El lenguaje HTML define la estructura y semántica


de un documento.
• El lenguaje CSS define mediante una colección de
reglas “la apariencia” de un documento.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introducción

Esto es un título 1

CSS

HTML

HTML

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introduccion

• Ventajas de las Hojas de Estilo:


– Se crean de forma independiente al documento
HTML (no tocamos este código).
– El lenguaje CSS es muy potente, sencillo y fácil de
aprender.
– Se puede usar con otros lenguajes de
programación (JavaScript).
– Se puede adecuar a los distintos medios de
presentación (navegadores, pantallas, etc)

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introducción

• Desventajas de las Hojas de Estilo:


– Soporte irregular que tienen las CSS por parte de los
navegadores:
• Ciertas propiedades funcionan con un navegador y con
otros no.
• Diferencias para un mismo navegador según sea para
Windows o para Mac.
• Diferencias entre distintas versiones de un mismo
navegador.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introducción

• Ejemplo de hoja de estilo dentro de HTML :


<html xmls= "http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Asociación Juvenil La Kaseta</title>
<meta name="author" content="Xabiel García
Pañeda"/>
<link rel="STYLESHEET" href="../estilu/estilu.css"/>
</head>

Referencia a una hoja de estilo

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introducción
• Ejemplo de hoja de estilo:

<STYLE> Etiqueta Html

H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
text-align: center;
color: #48a787;
}
Estilo de visualización
.......
</STYLE>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Recomendaciones de las CSS

• Iniciativa de Microsoft
• Standard del W3C que ha desarrollado recomendaciones
de distintos niveles:
– CSS1 oficial desde 1996
– CSS2 oficial desde 1998
– CSS3 en proceso de standarización
• Puede caracterizar:
– Tipos de etiquetas
– Conjuntos de elementos dentro de un tipo de
etiquetas
– Elementos en particular
– Elementos genéricos con una característica común

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
DEFINICIONES de ESTILO en HTML

Dentro de tags particulares, mediante el atributo STYLE:


– <p style="color:blue;font-weight:bold"> El párrafo saldrá
con color azul y en negrita </p>
– <a href=“ www.google.es” style=“color:red”>

Como hoja externa, relacionada a través del


elemento LINK dentro de HEAD:
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
Nota: hemos tenido que crear el archivo estilo.css con los estilos que
queramos

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
DEFINICIONES de ESTILO en HTML

3. Como un bloque dentro del documento HTML:


– Se coloca el elemento “style” dentro de HEAD:
– Ejemplo:
<style type=”text/css”>
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
</style>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo: Especificaciones de estilo en HTML
HTML

<html>
<head>
<title>Página que lee
estilos</title>
</head>
<body>
<h1>Página que lee
estilos</h1>
<p>
Esta página tiene en la
cabecera la etiqueta necesaria para
enlazar con la hoja de estilos.
</p>
</body>
</html>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo: Especificaciones de estilo en HTML
ESTILO.css HTML + CSS

<html>
P{ <head>
font-size : 12pt; <link rel="STYLESHEET"
font-family : arial,helvetica; type="text/css" href="estilos.css">
font-weight : normal;
color : red; <title>Página que lee
estilos</title>
}
</head>
H1 {
font-size : 36pt; <body>
font-family : verdana,arial; <h1>Página que lee estilos</h1>
text-decoration : underline; <p>
text-align : center; Esta página tiene en la
background-color : Teal; cabecera la etiqueta necesaria para
} enlazar con la hoja de estilos.
</p>
</body>
</html>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo: Especificaciones de estilo en HTML

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Sintaxis de las Hojas de estilo

 Es una sintaxis muy sencilla


 No hay que crear ninguna etiqueta especial al principio
del archivo CSS que creemos.
 Una hoja de estilo son un conjunto de reglas
 Cada regla está formada:
 Parte selector
 Conjunto de propiedades (propiedad: valor)

Selector
H1 {
color: red; Propiedades
font-weight:bold;
}

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Parte Selector
 De tipo : directamente una etiqueta:
B
 Descendientes: seleccionar elementos ubicados
dentro de otros.
 Grupos: separar múltiples selectores con comas:
B, I
 Clases: según el atributo CLASS en tags HTML. El
selector es la clase precedida por un punto
 Identificador: según el atributo ID en tags HTML. El
selector es la clase precedida por #

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Parte Propiedades
 Fuente: font-size, font-weight, font-family...
 Color: color
 Texto: text-align, ...
 Fondo (background): background-color,
background-repeat, ...
 Márgenes, espaciado y bordes: margin,
padding, border, ...
 Posición: position, float, ...

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Reglas Sintácticas para crear CSS
1. Cada regla debe empezar con el nombre del selector.
2. El selector va seguido de un corchete de apertura “{“.
3. Las reglas y sintaxis de los estilos son predeterminadas no pueden
“inventarse”.
4. Las reglas van seguidas de dos puntos”:”
5. Las propiedades se separan con”;” y precedidos de un espacio en
blanco.
6. El valor que toma cada propiedad depende de la regla y existen
valores para poner.
7. No hay límite ni orden de precedencia para el número y tipo de
reglas.
8. Las reglas deben terminar con “}”
9. Salto de línea obligatorio después de corchete de cierre.
10. Se recomienda utilizar minúsculas para todo el texto.
11. Se recomienda utilización de espacios en blanco entre el selector,
corchete de apertura, nombre de la regla, valor de la regla y
corchete de cierre.
_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo de hojas de estilos

Fragmento Hoja HTML

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Ejemplo

http://www.csszengarden.com/

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT
"eXtensible Stylesheet language
Transformation"

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Introducción

 El lenguaje XSL o Extensible Stylesheet Language


consta de tres partes:
 XSL Transformations (XSLT): un lenguaje para
transformar documentos XML
 http://www.w3.org/TR/xslt
 XML Path Language (XPath), un lenguaje de expresión
usado por XSLT para acceder o referirse a partes de un
documento XML.
 http://www.w3.org/TR/xpath
 XSL Formatting Objects (XSL-FO): un formatedor que se
usa para generar documentos. Ejemplo: crear PDF.
 http://www.w3.org/TR/XSL/XSL-FO

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT

 Recogido en la Recomendación del W3C:


 XSLT 1.0 (Noviembre 1999)
 XSLT 2.0 (Noviembre 2002)
 Se expresa como “HOJAS DE ESTILO” ,pero más
complejo que CSS.
 Es similar a un lenguaje de programación.
Permite:
 Ejecución de bucles y sentencias,
 Operaciones lógicas,
 Ordenación de datos,
 Utilización de plantillas, etc.
_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT

 Implementa el lenguaje de estilo a los


documentos escritos para XML:
 Aplicaciones de formato de presentaciones
(seleccionar datos para mostrar).
 Convertir documentos XML en otros
(HTML,SVG,..
 Existen herramientas para editar XML y hojas de
estilo XSLT:
 Windows: XMLSpy, eXcelon Styles.
 Linux: Xemocs.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Aplicaciones de XSLT
1. Convertir un archivo XML con contenido en otro que se
destina a la presentación
 De cara a la Web, XML se transforma en XHTML.

2. Convertir un archivo XML con contenido en otro archivo


XML con contenido
 Como soporte de datos, XML se transforma en otro XML.

3. Convertir un documento XML en un documento no XML:


 Imágenes 2D y 3D
 Documentos PDF
 HTML
 Formato distinto XML, XML se transforma en otro formato

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
tabla.xsl

barra.xsl

arte.xsl

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT-CSS

Tabla comparativa CSS- XSLT

CSS XSL

¿Puede usarse con HTML? Sí No

¿Puede usarse con XML? Sí Sí

¿Tiene lenguaje de transformación? No Sí (XSLT)

Sintaxis CSS XML

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Vinculación a Documento XML

 Para vincular una hoja de transformación


a un documento XML tenemos que añadir
la siguiente instrucción de procesamiento
en el documento XML:

<?xml version="1.0" encoding="iso-8859-1"?>


<?xml-stylesheet type="text/xsl" href="hola.xsl"?>
<saludo>Hola, mundo!</saludo>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT- Transformaciones
 Utiliza:
 Xpath: para identificar partes del documento XML a las
que aplicar una transformación.
 XSLT plantillas: para aplicar transformaciones
 Requiere:
 Documentos XML bien-formados.
 Documento XSL (Hoja de estilo) que contiene las
plantillas de formatos y transformación.
 XSLT parser para efectuar la transformación

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT- Transformaciones

 Utiliza:
 Xpath: para identificar partes del documento XML a las
que aplicar una transformación.
 XSLT plantillas: para aplicar transformaciones
 Requiere:
 Documentos XML bien-formados.
 Documento XSL (Hoja de estilo) que contiene las
plantillas de formatos y transformación.
 XSLT parser para efectuar la transformación

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Documento XSL

 Un documento XML que cumple las normas del dialecto


XSLT.
 El elemento raíz de este documento XML es:
<xsl:stylesheet>
</xsl:stylesheet>
 El elemento raíz tiene dos atributos obligatorios:
 version=“numero_version”
 Actualmente sólo hay tres posibles número de versión: 1.0, 1.1
y 2.0
 xmlns:xsl=“http://www.w3.org/1999/XSL/Transform”
 El valor de este atributo debe escribirse exactamente así. De lo
contrario, la hoja de transformación no funcionará.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Documento XSL
 El elemento raíz puede contener varios ‘elementos de primer nivel’.
 El más importante es
<xsl:template>
...
</xsl:template>
 Cada elemento xsl:template es una regla de transformación.
 El elemento xsl:template tiene un atributo match con el que
especificamos lo que debe transformar la regla.
 Por ejemplo:
<xsl:template match=“tabla”>
...
</xsl:template>
 Es una regla de transformación para el elemento Tabla

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Documento XSL
 Cuando el procesador XSLT se encuentra en el documento XML
un elemento que cumpla la condición especificada en el match, lo
sustituye por lo que tengamos escrito dentro del <xsl:template>.
Ejemplo de Regla de Transformación:
<mapa>
<elemento color=“rojo”>Carretera</elemento>
<elemento color=“azul”>Hidrografía</elemento>
<elemento color=“negro”>Toponimia</articulo>
</mapa>

<xsl:stylesheet..> Todos los


<xsl:template match=“elemento”> elementos
Capa de Información <elemento> son
</xsl:template>
</xsl:stylesheet>
substituidos por el
texto “Capa de
Capa de Información Información”
Capa de Información
Capa de Información

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Documento XSL

 Si queremos:
 Acceder al contenido del elemento.
 Acceder a los atributos del elemento.
 Decidir si queremos transformar también los hijos que
están anidados.

 Esto se consigue con las instrucciones XSLT, que


están contenidas dentro de las reglas de
transformación (<xsl:template>)

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Instrucciones XSLT
 Para mostrar el texto de un elemento, el valor de un atributo,
etc., utilizamos
<xsl:value-of select=“exp_XPath”/>
 Valores que puede tomar “exp_Xpath”
 Elemento: Concatenación del valor de sus nodos texto y de

los nodos texto de sus descendientes. La concatenación se


realiza tal cual aparece en el documento XML original.
 Nodo Raíz: Valor del elemento raíz.

 Atributo: El propio valor del atributo.

 Comentarios: El texto contenido entre <!– y -->

 Instrucciones de proceso: El texto contenido entre <? Y

?> pero sin el nombre de la instrucción de proceso.

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Instrucciones XSLT

Ejemplo de Regla de Transformación:

<mapa>
<elemento color=“rojo”>Carretera</elemento>
<elemento color=“azul”>Hidrografía</elemento>
<elemento color=“negro”>Toponimia</articulo>
</mapa>

<xsl:stylesheet..> <xsl:stylesheet..>
<xsl:template match=“elemento”> <xsl:template match=“elemento”>
<xsl:value-of select=“.”/> <xsl:value-of select=“@color”/>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

Carretera rojo
Hidrografía azul
Toponimia negro

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Instrucciones XSLT

 Para alterar el flujo de la transformación, en una regla


podemos ‘pausar’ la transformación actual y aplicar reglas a
otro/s nodo/s.
 Especificamos esos otros nodos con una dirección XPath.
 Si nos fijamos en el algoritmo, es como si pudiésemos invocar
nosotros mismos a la función Transformar(nodo)
 Utilizamos:

<xsl:apply-templates select=“dir_XPath”/>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Instrucciones XSLT
Ejemplo de Regla de Transformación:
<mapa>
<elemento color=“rojo”>Carretera</elemento>
<elemento color=“azul”>Hidrografía</elemento>
<elemento color=“negro”>Toponimia</articulo>
</mapa>
Capa de información:
<ol>
<ii>Carretera</ii>
<xsl:stylesheet..> <ii>Hidrografía</ii>
<xsl:template match=“mapa”> <ii>Toponimia</ii>
Capa de información:
</ol>
<ol>
<xsl-apply-templates select=“elemento”/>
</ol>
<xsl:template/>

<xsl:template match=“elemento”>
<ii><xsl:value-of select=“.”/></ii>
</xsl:template>
</xsl:stylesheet>

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
XSLT-Practico

• Transformar un XML a un documento HTML:

Documento Hoja de
Estilo
XML
XSL

Documento
HTML

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Documento XML

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Hoja de estilo (*.xsl)

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Resultado de la Transformación

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
Resultado de la Transformación

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares
GRACIAS …

_____________________________________________________________________________
MODULO MAPEO WEB MSc. Juan Luis Calle Pomares