Intro Ducci On

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.
_____________________________________________________________________________
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
_____________________________________________________________________________
 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).
_____________________________________________________________________________
 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.
_____________________________________________________________________________
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
_____________________________________________________________________________
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/ )
_____________________________________________________________________________
_____________________________________________________________________________
Estructura
_____________________________________________________________________________
_____________________________________________________________________________
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”/>
_____________________________________________________________________________
Las etiquetas del lenguaje HTML
• Estructura de un documento HTML:
Se definen elementos que
<html> caracterizan el documento
<head>

 Instrucciones de proceso: El texto contenido entre <? Y
?> pero sin el nombre de la instrucción de proceso.
_____________________________________________________________________________
Instrucciones XSLT
<mapa>
</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
_____________________________________________________________________________
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”/>
_____________________________________________________________________________
Instrucciones XSLT
<mapa>
</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>
_____________________________________________________________________________
XSLT-Practico
• Transformar un XML a un documento HTML:
Documento Hoja de
Estilo
XML
XSL
Documento
HTML
_____________________________________________________________________________
Documento XML
_____________________________________________________________________________
Hoja de estilo (*.xsl)
_____________________________________________________________________________
Resultado de la Transformación
_____________________________________________________________________________
Resultado de la Transformación
_____________________________________________________________________________
GRACIAS …
_____________________________________________________________________________

Intro Ducci On

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Intro Ducci On

Încărcat de

Drepturi de autor:

Formate disponibile

Presentación de la información

XSLT, HTML, CSS

 Deriva del estándar SGML ”Standard Generalized

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

publicitario giratorio entre página y página.

– Editores de HTML (Microsoft FrontPage, Netscape

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

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

– topmargin: margen entre la parte superior de la

– Leftmargin: margen entre la parte izquierda y los

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

• Se pueden crear cabeceras con diferente tamaño de

• Listas no numeradas o marcadas:

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

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

• mailto: seguido de una dirección de correo

• <img>: define una imagen dentro del documento

• Tipo de elementos para introducir información:

• password: para introducir texto que se enmascara

• Select: lista de elementos para elegir

• Radio Button: elementos de selección excluyente

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

• El lenguaje HTML define la estructura y semántica

• Ventajas de las Hojas de Estilo:

• Desventajas de las Hojas de Estilo:

• Ejemplo de hoja de estilo dentro de HTML :

Referencia a una hoja de estilo

<STYLE> Etiqueta Html

Dentro de tags particulares, mediante el atributo STYLE:

Como hoja externa, relacionada a través del

3. Como un bloque dentro del documento HTML:

 Es una sintaxis muy sencilla

Fragmento Hoja HTML

 El lenguaje XSL o Extensible Stylesheet Language

 Recogido en la Recomendación del W3C:

 Implementa el lenguaje de estilo a los

2. Convertir un archivo XML con contenido en otro archivo

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

Tabla comparativa CSS- XSLT

¿Puede usarse con HTML? Sí No

¿Puede usarse con XML? Sí Sí

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

Sintaxis CSS XML

 Para vincular una hoja de transformación

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

 Un documento XML que cumple las normas del dialecto

<xsl:stylesheet..> Todos los

 Esto se consigue con las instrucciones XSLT, que

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

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

Ejemplo de Regla de Transformación:

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

• Transformar un XML a un documento HTML:

S-ar putea să vă placă și