HTML
Anuncio
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors
Representación
de
Datos
HTML
El lenguaje para codificar documentos de WWW
o Sintaxis y semántica definida por especificación
o
– Consorcio World Wide Web
o
(W3C) http://www.w3.org
HTML 3.2 (1996), HTML4.0 (1998), 4.01…
– Lo implementan versiones ≥ 4.0 de IE o NS
o
Características:
XHTML1.0
XHTML1.1
XHTML2.0
– Basado en etiquetas: <html > … </html>
– Codificación de estructura del documento (no presentación J)
– Enlaces a otros objetos (por valor o “inline”/por ref a URL)
o
Cada vez más complejo,…
– menor codificación manual → más estricto:
– formato interno de editores (de html o genéricos)
• Netscape, Macromedia Dreamweaver, MS Office, MS FrontPage…
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
2
2.1
HTML
o
Codificación estructura del documento
<html>
<head><title>Documento básico</title></head>
<body>
<p>Un documento <i>muy sencillo</i>, pero completo.</p>
</body>
</html>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
3
Ejemplos HTML
o
Frames: (documentos "inline")
<HTML>
<HEAD>
<TITLE>
Página con frames
</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="izquierd.htm">
<FRAME SRC="derecha.htm">
</FRAMESET>
</HTML>
o
La etiqueta FRAMESET sustituye a
BODY (mutuamente excluyentes)
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
4
2.2
Ejemplos HTML
o
Tablas:
<HTML>
…
<BODY>
<TABLE BORDER="5">
<TR>
<TH>Encabezado1</TH>
<TH>Encabezado2</TH>
<TH> Encabezado3</TH>
</TR>
<TR>
<TD>Fila1,Columna1</TD>
<TD>Fila1,Columna2</TD>
</TR>
<TR>
<TD>Fila2,Columna1</TD>
<TD>Fila2,Columna2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
5
Ejemplos HTML
o
Formularios<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
<P>Introduzca su nombre:
<INPUT TYPE="Text">
<P><INPUT TYPE="Submit" >
</FORM>
</BODY>
</HTML>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
6
2.3
DOM
o DOM:
modelo de documento/página como árbol de
objetos, para el acceso y actualización dinámica del
contenido, estructura y estilo de los documentos.
El documento puede ser procesado y el resultado puede
incorporarse en la página actual.
http://www.w3.org/DOM/
– Es como si la ventana fuera un árbol: document.status
(window.status en IE) se refiere a un componente de
la ventana: la barra de estado.
<a href=x onMouseOut="window.status =' '; return true";
onMouseOver="window.status='¡Pulsa!';return true"> Pasa el mouse
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
7
JavaScript
o
JavaScript, inventado por Netscape,
http://www.mozilla.org/js/js15.html
JavaScript 1, 1.1, 1.2, 1.3, 1.4, 1.5,….
o
Microsoft tiene su dialecto propio (JScript)
http://msdn.microsoft.com/scripting/default.htm
Jscript 1.0, 3.0, 5,0,…..
o
Estandarizado como EcmaScript
http://www.ecma-international.org/publications/standards/ECMA-262.htm
http://www.mozilla.org/js/language/
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
8
2.4
JavaScript (EcmaScript) + DOM
o Gestores de eventos: Javascript (EcmaScript)
Detecta+reacciona eventos al cargar, presentar y usar docs
Similar a lenguaje C, interpretado, con dialectos según cliente
<script>
<a href=x onMouseOver="document.status='¡Pulsa!';return true">
</script>
o
o
Ejemplos de JavaScript
http://www.mundojavascript.com/
Usando el depurador de JavaScript Venkman (Netscape / Mozilla)
http://www.svendtofte.com/code/learning_venkman.es/index.php
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
9
Hojas de estilo de presentación
o
Controlan la “apariencia” de un documento
– En procesadores de texto, etc …
– Complementan a info estructural de HTML, excepto <font>, wcolor, <b>, …
– Importante la separación estructura y estilo
o
Regla para mostar una etiqueta html
"Cascading Style Sheet" (CSS)
o
Formas de asociar estilo
o
H1 { color : green }
http://www.w3.org/Style/CSS/
– Entremezclado con html (inline), atributo style
• <h1 style="color: blue; font-style: italic">Es azul</h1>
– Para todo el documento (document level), elemento style
• <head> … <style type="text/css"><!—
H1 {color: blue; font-style: italic}
@importurl(http://x.org/estilo);
--> </style> …
<!--…--> Para clientes web que no
entienden CSS (sintaxis ≠ html)
– Externo, hoja de estilo externo
• estilo_gral.css: H1 {color: blue; font-style: italic}
Doc html: <head>…<link rel=stylesheet type="text/css" href="http:://x.org/estilo_gral.css">
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
10
2.5
CSS: Cascading
o
Info de estilo que se va superponiendo
– Van "cayendo" (aplicando) sobre el documento …
– Puede quedar una mezcla "curiosa"…
o
Orden de aplicación:
• 1.declaraciones !important del autor
2.declaraciones !important del lector
3.declaraciones normal del autor
4.declaraciones implícitas (atributos HTML) del autor
5.declaraciones normal del lector
6.valores por defecto del agente de usuario
o
Especificaciones: http://www.w3.org/Style/CSS/
– CSS1 (Nivel 1), 12/96 Formato sencillo, presentación pantalla, ~50 propiedades: color, font-size,
…
– CSS2, 5/98 añade más de 70 propiedades: varias presentaciones ej. impresa, auditiva "aural",
saltos de página, …
– CSS3 (en definición)
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
11
CSS: Ejemplo
<STYLE type="text/css"><!-BODY { font-family: sans-serif; color: black; background: white; }
UL, P, TD, TH, LI {font-family: sans-serif; }
H1, H2, H3 { font-weight: bold; color: black }
SPAN.activity { font-family: sans-serif; font-size: .75em }
P.copyright { font-size: smaller }
P.large { font-size: 1.1em; }
.teaser { color: #c80028 }
.shortquote { font-style: italic }
A:link { color: #004f9c } /* enlaces no visitados */
:visited { color: rgb(153, 0, 153) } /* enlaces ya visitados */
:active { color: rgb(255, 0, 102) } /* cuando se pulsa sobre el enlace */
A:hover { background: cyan } /* cuando ratón pasa sobre enlace: CSS2, difícil de hacer con JavaScript*/
div.box { border: solid; border-width: thin; width: 100% }
.hide { display : none; }
H1 EM { color: red; }
--></STYLE>
<H3>Documents</H3>
<A href="TR/">Technical Reports</A>
<SPAN class="activity "><A href="MarkUp/">HTML</A></SPAN>
<div class="box"> Un marco fino rodeará este elemento DIV. </div>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
12
2.6
CSS2: Otras presentaciones
/* ****************** Style for printing ************** */
@media print {
H1, H2, H3, H4, H5, H6 { page-break-after: avoid; page-break -inside: avoid }
BLOCKQUOTE, PRE
{ page-break -inside: avoid }
UL, OL, DL { page-break -before: avoid }
.navbar
{ background-color: #fff ; border-color: #000; border-width: 1px }
A.navlink, A.bannerLink { font-weight: normal }
}
/* ****************** Style for speech ************** */
@media aural {
H1, H2, H3, H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 }
H1
{ pitch: x-low ; pitch-range: 90 }
H2
{ pitch: x-low ; pitch-range: 80 }
H3
{ pitch: low ; pitch-range: 70 }
LI, DT, DD { pitch: medium; richness: 60 }
PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
EM
{ pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
STRONG
{ pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
DFN
{ pitch: high; pitch-range: 60; stress: 60 }
I
{ pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
B
{ pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
U
{ richness: 0 }
A:link
{ voice-family: harry, male }
A:visited { voice-family: betty, female }
A:active { voice-family: betty , female; pitch-range: 80; pitch: x-high }
}
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
13
Datos estructurados en texto: XML
o
o
o
o
eXtensible Markup Language
A partir de elementos <x> … </x>
– Propuesto por el W3C ("SGML Ligero")
• Textual (Unicode UTF-8)
Ejemplo presentación HTML:
<h2> Hamlet, Príncipe de Dinamarca</h2>
<p>
<b> Autor: </b> William Shakespeare <br>
<b> ISBN: </b> 84-239-0027-4 <br>
<b> Año: </b> 1938 </p>
Ejemplo estructuración con XML, para ser procesado:
<libro>
<autor> <apellido> Shakespeare </apellido><nombre> William </nombre></autor>
<titulo> Hamlet, Príncipe de Dinamarca </titulo>
<isbn> 84-239-0027-4 </isbn>
<fecha> 1938 </fecha>
</libro>
– XML (etiquetas libres) + hoja de estilo (≈ HTML ver/imprimir)
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
14
2.7
XML en 7 puntos… (según w3c)
o
o
o
o
o
o
o
1. XML es un método para poner datos estructurados en texto
2. XML parece HTML pero no es HTML
3. XML es texto, pero no está hecho para ser leído
4. XML es una familia de tecnologías
5. XML es muy prolijo, pero eso no es problema …
6. XML es nuevo, pero no tan nuevo
7. XML no precisa licencia, independiente de plataforma y bien
soportado por muchas herramientas: XML no es siempre la solución,
pero vale la pena considerarlo
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
15
Usos de XML
Para transporte de información entre bases de datos
o Para enviar información que se muestra a usuarios (como HTML,
+estilo de presentación)
o Como formato legible para expresar datos estructurados
o Para codificar datos en la red (wire-format)
o
– Como alternativa a formatos de datos binarios en RPC
o
Restricciones:
– Datos binarios deben enviarse como Base64 o enviar aparte del
documento XML (un enlace, como hace HTML)
– Bastante texto (puede comprimirse: compresor general gzip , compress;
compresor específico: bXML)
– Formas: well-formed (autocontenido) / valid (+DTD)
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
16
2.8
Acrónimos
o
Standard Generalized Markup Languaje (SGML)
– HTML y XML son subconjuntos de SGML
o
Document Object Model (DOM)
http://www.w3.org/TR/NOTE-sgml-xml-971215
– Un API también para XML. Lo soportan las v5 de navegadores
o
Lenguajes de transformación y estilo
– Transformación: eXtensible Style Sheet Language (XSL)
– Presentación: Cascading Style Sheet, nivel 2 (CSS2)
– El mismo documento XML puede mostrarse de varias formas, utilizando distintas hojas de estilo
que transforman un documento XML en otro "presentable"
o
DTD: Document Type Definition (sintaxis válida de doc) = Vocabulario
– Channel Def. Format (CDF), Open Software Desc (OSF), Resource Desc Fw (RDF),
Open Financial eXchg Fmt (OFX), Document Object Model (DOM) , Mathematical
Markup Lang (MATHML), Synchronized Multimedia Integration Lang (SMIL), Scalable
Vector Graphics (SVG)
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
17
Conceptos básicos
o
Característica
Marcas elegidas por usuario
Marcas pueden tener atributos
Marcas sin datos pueden
encerrarse al final de la etiqueta
Marcas anidadas
Marcas deben cerrarse
Codificar algunos caracteres
Ejemplo
<libro>, <canción> …
<libro autor=“William S” titulo=“Hamlet”>
<libro autor=“William S” titulo=“Hamlet”/>en lugar
de <libro autor=“William S” titulo=“Hamlet”></libro>
<libro><autor>William S.</autor>…</libro>
Incorrecto: <libro><autor>William S.</libro>
<libro titulo=“El &quot;Aleph&quot;”/>
Entidades:
o
XML más restrictivo que los usos de HTML
Legal: <p> Parrafo 1.</p><p> Parrafo 2.</p>
Aceptado en html: <p> Parrafo 1.<p> Parrafo 2.</p>
Por eso />
Legal: <b><i> Negrita e Itálica </i></b>
no es ambiguo
Aceptado en html: <b><i> Negrita e Itálica</b></i>
Legal: <FONT COLOR=“#FFFF66”> Aceptado en html: <FONT COLOR=#FFFF66>
Tags distinguen caso: Incorrecto: <H1> Título 1</h1>
Blancos relevantes en contenido elementos, normalizados en atributos:
<libro autor=“William S”>1 2 3 4 </libro> equivale a
<libro autor=“William S”>1 2 3 4 </libro>
v.2005.02
<
&
>
‘
“
&lt;
&amp;
&gt;
&apos;
&quot;
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
18
2.9
Restricción de documentos XML
DTD: Definición Tipo Documento;
1)
1ª generación: heredado de SGML, sintaxis no XML, sin tipos de datos, …
XML Schema: formato XML, tipos de datos, más restricciones
2)
Un doc. XML puede estar conectado con una DTD
o
–
–
No: bien formado: si cumple con la sintaxis de XML 1.0
Sí: válido: si además cumple con la sintaxis del DTD
<?xml version=“1.0” encoding="UTF -8" standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/libro.dtd”>
<saludo>¡Bienvenidos a XML!</saludo>
La DTD describe la sintaxis
o
–
–
–
Estructura, elementos, atributos, valores permitidos
Heredado de SGML, formato no XML
Situado al comienzo, contenido o referenciado
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE saludos[
<!ELEMENT saludo (#PCDATA)>
]>
<saludo>¡Bienvenidos a XML!</saludo>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
19
Ejemplo XML de uso del DTD
o
Tipos de texto:
<!ELEMENT libro (autor+) >
<!ATTLIST libro
titulo CDATA #REQUIRED
fecha CDATA #IMPLIED >
<!ELEMENT autor (#PCDATA) >
– PCDATA: texto y posibles marcas, secuencia de caracteres procesados
CDATA: texto, secuencia de caracteres excepto marca de final ]]>
– #REQUIRED: atributo debe proveerse
– #IMPLIED: no tiene valor por defecto
– #FIXED: siempre ha de tener el valor por defecto
– Al omitir un atributo con valor por defecto, equivale a que tenga ese valor
Autocontenido: refs
a entidades externas
<?xml version=“1.0” encoding="UTF-8" standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/libro.dtd”>
<!--Aquí vienen los datos xml-->
<libro titulo="El Aleph" fecha="1968" >
Comentario
<autor>Jorge Luis Borges</autor>
</libro>
Caracteres Dato: no se analizan
Instrucción de procesado
Juego caracteres
<autor><![CDATA[Texto <especial> con "&']]>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
20
2.10
DTD ELEMENT con subelems (a,b)
o (a,b)
significa el elemento a seguido de b
o Ejemplo de DTD
<!ELEMENT autor (nombre, apellido)>
<!ELEMENT nombre (#PCDATA)>
<!ELEMENT apellido (#PCDATA)>
o Ejemplo XML de uso del DTD
<?xml version=“1.0” standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/autor.dtd”>
<autor>
<nombre>Jorge Luis</nombre><apellido>Borges</apellido>
</autor>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
21
DTD ELEMENT con subelems (a*)
(a*) significa que a está repetido 0, 1 o más veces
o Ejemplo de DTD
o
<!ELEMENT familia (padre,madre,hijo*)>
<!ELEMENT padre (#PCDATA)>
<!ELEMENT madre (#PCDATA)>
<!ELEMENT hijo (#PCDATA)>
o
Ejemplo XML de uso del DTD
<?xml version=“1.0” standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/familia.dtd”>
<familia>
<padre>Luis</padre>
<madre>Luisa</madre>
<hijo>Luisito</hijo>
<hijo>Luisita</hijo>
</familia>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
22
2.11
DTD ELEMENT con subelems (a+)
(a+) significa que a está repetido 1 o más veces
o Ejemplo de DTD
o
<!ELEMENT familia-con-hijos (padre,madre,hijo+)>
<!ELEMENT padre (#PCDATA)>
<!ELEMENT madre (#PCDATA)>
<!ELEMENT hijo (#PCDATA)>
o
Ejemplo XML de uso del DTD
<?xml version=“1.0” standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/familia.dtd”>
<familia-con-hijos>
<padre>Luis</padre>
<madre>Luisa</madre>
<hijo>Luisito</hijo>
<hijo>Luisita</hijo>
</familia-con-hijos>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
23
DTD ELEMENT con subelems (a?)
(a?) significa que a está repetido 0 o 1 veces
o Ejemplo de DTD
o
<!ELEMENT familia-minima (padre?,madre?,hijo*)>
<!ELEMENT padre (#PCDATA)>
<!ELEMENT madre (#PCDATA)>
<!ELEMENT hijo (#PCDATA)>
o
Ejemplo XML de uso del DTD
<?xml version=“1.0” standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/familia.dtd”>
<familia-minima>
<madre>Luisa</madre>
<hijo>Luisito</hijo>
<hijo>Luisita</hijo>
</familia-minima>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
24
2.12
DTD ELEMENT con subelems
“|” significa o “,” significa sucesión
o EMPTY (sin paréntesis) significa que no contiene datos
o Ejemplo de DTD
o
<!ELEMENT operaciones (((get | put),uri)*)>
<!ELEMENT get EMPTY>
<!ELEMENT put EMPTY>
<!ELEMENT uri (#PCDATA)>
o
Ejemplo XML de uso del DTD
<?xml version=“1.0” standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/ops.dtd”>
<operaciones>
<get/><uri>http://www.upc.es/doc1</uri>
<get/><uri>http://www.upc.es/doc2</uri>
<put/><uri>http://www.upc.es/doc3</uri>
</operaciones>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
25
Elementos o atributos
o
Un documento XML puede imaginarse como un árbol
<libro>
<autor>
<nombre>Jorge Luis</nombre>
<apellido>Borges</apellido>
</autor>
</libro>
frente a
<libro autor=“Jorge Luis Borges”>
o
Elementos:
– ramas que pueden subdividirse
– (y extenderse)
o
Atributos:
Contenido de una
marca (datos)
Valor de atributo
(la metainfo)
<libro>
<libro>
\
\
<autor>
=autor
\
\
Jorge Luis Jorge Luis
Borges
Borges
<libro>
\
<autor>
\
<nombre>
|\
| Jorge Luis
|
<apellido>
\
Borges
– hojas (terminales) que no pueden dividirse más (no estructurados) sin modificar el
documento anterior.
– Adecuados para identificadores, URLs, refs o info simple no principal.
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
26
2.13
DTD ELEMENT con atributos XML
o
Ejemplo de DTD
Sin contenido
<!ELEMENT libro EMPTY>
<!ATTLIST libro
Lista de atributos
titulo CDATA #REQUIRED
autor CDATA 'anonimo'
Valores permitidos
peso CDATA #IMPLIED
Valor por defecto
formato (tapa-dura | tapa-blanda) 'tapa-blanda'
>
o
Ejemplo XML de uso del DTD
<?xml version=“1.0” standalone=“no”?>
<!DOCTYPE libro SYSTEM “http://www.x.org/xml/libro.dtd”>
<libro
titulo="El Aleph"
autor="Jorge Luis Borges"
formato="tapa-dura"
/>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
27
Zona de DTD
Zona de contenido
Entidades
– Entidades carácter predefinidas
• Ejemplo: &quot; &amp;
– Entidades internas
• Se pueden añadir nuevas declaraciones para representar carácteres o secuencias de
carácteres. Por ejemplo:
<!ENTITY UPC "Universitat Politècnica de Catalunya">
<desc> La &UPC; es una universidad técnica.</desc>
es idéntico a:
<desc> La Universitat Politècnica de Catalunya es una universidad técnica.</desc>
<!ENTITY % PD"(#PCDATA)">
<!ELEMENT marca %PD;>
<!ELEMENT marca (#PCDATA)>
<!NOTATION GIF SYSTEM "image/gif">
– Entidades externas
<!ENTITY infogeneral SYSTEM "http://www.upc.es/info.html">
<!ENTITY campus SYSTEM "http://www.upc.es/campusn.gif" NDATA GIF>
o PUBLIC (externa)
v.2005.02
No contiene datos XML
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
28
2.14
Identificadores ID
o
o
Nombres únicos para referencias entre varios lugares de un documento
Ejemplo XML:
<autor ref="borges">Jorge Luis Borges</autor>
...
<libro autor="borges">El reloj de arena</libro>
o
Basado en el DTD:
<!ELEMENT autor (#PCDATA)>
<!ATTLIST autor
ref ID #REQUIRED>
<!ELEMENT libro (#PCDATA)>
<!ATTLIST libro
autor IDREF #IMPLIED>
o
Tipos de atributos:
–
–
–
–
ID = Nombre asociado a un elemento
IDREF = Una sola referencia a atributo ID
IDREFS = Lista de nombres (referencias a ID) separada por blancos
NMTOKEN, NMTOKENS = Palabra o lista de palabras separadas por blancos
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
29
Espacios de nombres (namespaces)
o
Para construir documentos xml que combinan entidades de varias comunidades (espacios
de nombres):
<?xml version="1.0" encoding="ISO-8859-1" ?>
<colección xmlns:a="http://www.alianza.es">
<a:libro título="El aleph" />
</colección>
o
Ejemplo WebDAV:
PROPPATCH /WebDavDocs/webdav-xml.htm HTTP/1.1
Host: miservidor.com
Content-Type: text/xml
Content-Length: 138
<?xml version="1.0" ?>
<d:propertyupdate xmlns:d="DAV:"
xmlns:o="urn:schemas-microsoft-com:office:office">
<d:set>
<d:prop>
<o:Author>Sean Purcell</o:Author>
</d:prop>
</d:set>
</d:propertyupdate>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
30
2.15
XML Schema (DTD-Nueva Gen)
o
Definir/restringir el contenido y estructura de documentos XML
en XML: DTD → XML Schema
– Facilita mapeos automáticos con estructuras de datos programa
– PCDATA → varios tipos de datos (sql, java)
– Escrito tambié n en xml (parsers xml pueden tratar)
o
Y más:
–
–
–
–
–
Tipos de datos definidos por el usuario
Indicadores de ocurrencia (minOccurs, maxOccurs)
Importación/Exportación de elementos
Refinamiento (herencia esquema) Persona → Empleado
Control de extensiones: open, refinable, closed
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
31
Nuevo en XML Schema
o
Tipos:
– String (secuencia de carácter, iso10646,
unicode),
– boolean, real, decimal (real, no Exp),
– integer [-T,0, T] , positive integer [1,T] ,
non-negative integer[0,T] ,non-positive
integer [-T,0] , negative integer [-T,-1] ,
– dateTime (iso8601), date (dateTime),
time (dateTime), timePeriod (dateTime),
– binary (datos+codif hex /base64),
– uri (rfc2396),
– language (ca, en, rfc1766),
– definidos
o
o
o
o
Restricciones:
– length (núm caracteres string, binario) ,
– maxlenght (máx longitud string, binario),
– lexical representation (repr posibles ej.
DD-MM-AAAA),
– enumeration,
– maxInclusive (máx posible),
– maxExclusive (máx excl)
– minInclusive (mín posible),
– minExclusive (mín excl),
– precision (núm dígitos),
– scale (dígitos parte decimal),
– encoding (binario)
Refinamiento (herencia, extensión)
Ocurrencia: 0-1 ?; 0,… *; 1,… +; (nada) Uno y sólo uno
Extensibilidad: abierta, refinable, cerrada (≡dtd)
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
32
2.16
Nuevo en XML Schema
o
<?XML version="1.0">
<libro isbn="123456">
<título>El Aleph</título>
<autor>J. L. Borges</autor>
<año>1946</año>
<precio>1560</precio>
</libro>
El DTD correspondiente es:
<!ELEMENT libro (título, autor+, año?, precio)>
<!ELEMENT título (#PCDATA)>
<!ELEMENT autor (#PCDATA)>
<!ELEMENT año (#PCDATA)> (entero positivo, mayor de 1900)
<!ELEMENT precio (#PCDATA)> (non-negative integer)
<!ATTLIST libro
isbn ID #REQUIRED>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
33
Esquema de libro.xsd (1/2)
o
El esquema correspondiente al documento xml es:
<schema targetNamespace='http://www.ac.upc.es/aad/libro' version="Id: libro.xsd,v 1.1
2001/04/10 17:37:02"
xmlns='http://www.w3.org/2001/XMLSchema'>
<simpleType name='linea'>
<restriction base='string'> <maxLength value='50'/> </restriction>
</simpleType>
<simpleType name='sigloXX'>
<restriction base='integer'> <minInclusive value='1900'/> <maxInclusivevalue='1999'/>
</restriction>
</simpleType>
<elementname='libro' type='TipoLibro'/>
Detalle código siguiente página
<complexType name='TipoLibro'>
…
</complexType>
Versión XML Schema 20010330
Validado por http://www.w3.org/2001/03/webdata/xsv
</schema>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
34
2.17
Esquema de libro.xsd (2/2)
<complexType name='TipoLibro'>
<sequence>
<element name='titulo' type='linea'/>
<element name='autor' type='linea'/>
<element name='anyo' type='sigloXX'/>
<element name='precio' type='decimal'>
<complexType> <attribute name='divisa' type='string'/> </complexType>
</element>
</sequence>
<attribute name='isbn' type='ID'/>
</complexType>
Versión XML Schema 20010330
Validado por http://www.w3.org/2001/03/webdata/xsv
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
35
XHTML 1.0
o
Formulación de HTML 4.01 (24/12/1999) en XML
o
Diferencias respecto HTML
("limpiar" HTML, DTD, extensible, más simple para nuevas plataformas)
-
o
-
elementos y atributos en minúsculas <body bgcolor="#ffffff">
valores de atributos entre comillas <table border="0">
elementos no vacíos terminados <p>Párrafo 1</p>
elementos anidados, no solapados <p>here is a bolded<b>word.</b></p>
elementos necesarios: <head>, <body>; <title> (1er elemento tras <head>)
DOCTYPE: Conformidad con DTD
En HTML4.0: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
En XHTML1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
v.2005.02
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
Strict.dtd: limpio, formateo sólo con CSS (no <font> o <table>)
Transitional.dtd: control de presentación p.ej. clientes antiguos
Frameset.dtd: usando frames
Validación con enlace: http://validator.w3.org/
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
36
2.18
XHTML 1.0
-
Al comienzo, referenciar el espacio de nombres:
-
<html xmlns="http://www/w3/org/TR/xhtml1">
-
Cambian algunas entidades:
-
<br/>, <hr/>, <img src="image.gif" />
-
Valores de atributos no "minimizados":
<option value="somevalue" selected>
<option value="somevalue" selected="selected">
-
Tidy: http://www.w3.org/People/Raggett/tidy/
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
37
XHTML Ejemplo
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/ xhtml" xml:lang="en"
lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p> Moved to
<a href="http://vlib.org/">vlib.org</a>
</p>
</body>
</html>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
38
2.19
XML / XHTML Ejemplo
<?xml version="1.0" encoding="UTF-8" ?>
<!– inicialmente, "books" es el espacio de nombres por defecto -->
<book xmlns="urn:loc.gov:books" xmlns:isbn="urn:ISBN:0-395-36341-6"
xml:lang="en" lang="en">
<title>Cheaper by the Dozen</title>
<isbn:number>1568491379</isbn:number>
<notes> <!-- Ahora HTML será el espacio de nombres por defecto -->
<p xmlns="http://www.w3.org/1999/ xhtml">
This is also available <a href="http://www.w3.org/">online</a>
</p>
</notes>
</book>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
39
XHTML 1.1
XHTML 1.0: limpia, fija y da esplendor a HTML 4.01
o XHTML 1.1: XHTML Modular (10/4/2001)
o
o
o
Se descompone la especificación en varios módulos
XHTML Basic reúne un conjunto mínimo de módulos
– Incluye images, forms, basic tables, y object support
o
o
o
Un dispositivo puede soportar ciertos módulos: ej. un PDA, telé fono móvil,
un set-top-box, dispositivo braille, sintentizador de voz, impresor, proyector,
… pueden soportar XHTML 1.1
Cada módulo puede extenderse y añadir nuevos
Incorporación de: gráficos vectoriales (SVG), multimedia, MathML, comercio
electrónico, …
– Por ejemplo la funcionalidad de WML podría añadirse como módulo a XHTML 1.1
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
40
2.20
XHTML 1.1
o
XHTML AbstractModules
– 1. Attribute Collections
– 2. Core Modules
– 2.1. Structure Module
– 2.2. Text Module
– 2.3. HypertextModule
– 2.4. List Module
– 3. Applet Module
– 4. Text Extension Modules
– 4.1. Presentation Module
– 4.2. Edit Module
– 4.3. Bi-directional Text Module
– 5. Forms Modules
– 5.1. Basic Forms Module
– 5.2. Forms Module
– 6. Table Modules
– 6.1. Basic Tables Module
v.2005.02
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
6.2. Tables Module
7. Image Module
8. Client-side Image Map Module
9. Server-side Image Map Module
10. Object Module
11. Frames Module
12. Target Module
13. Iframe Module
14. Intrinsic Events Module
15. Metainformation Module
16. Scripting Module
17. Style Sheet Module
18. Style Attribute Module
19. Link Module
20. Base Module
21. Name Identification Module
22. Legacy Module
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
41
XSL
XSL (eXtensible Stylesheet Language)
o Definido por el Consorcio Web.
o Lenguaje que define una transformación entre un documento
XML de entrada y otro documento de salida (HTML, PDF, RTF,
PostScript).
o Una hoja de estilo XSL es una serie de reglas que determina
cómo va a ocurrir la transformación. Cada regla se compone de
un patrón y una acción o plantilla.
o La aplicación de una hoja de estilos puede ocurrir tanto en el
origen (ej: servlet) como en el mismo navegador(a partir de IE5)
o
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
42
2.21
XSL
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
43
XSL
XSL es una especificación que se compone de partes o
recomendaciones:
o XSLT (transformaciones XSL) : lenguaje para transformar
documentos XML
o XPath (lenguaje de caminos “XML Path”): lenguaje de
expresiones que usa XSLT para acceder o referenciar partes de
un documento XML.
o XSLFO (objetos de formato XSL): vocabulario XML para
expresar el formato de presentación de un documento, que
define objetos y propiedades del formato de un documento y sus
componentes.
o
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
44
2.22
XSL
XML source
<source>
<title>XSL</title>
<author>John
Smith</author>
</source>
XSLT stylesheet
<xsl:stylesheet version = '1.0'
xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
Output
<h1>XSL</h1>
<h2>John Smith</h2>
HTML view
XSL
John Smith
<xsl:template match="/">
<h1>
<xsl:value-of select="//title"/>
</h1>
<h2>
<xsl:value-of select="//author"/>
</h2>
</xsl:template>
</xsl:stylesheet>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
45
XSLT: Patrones de transformación
o
Definición de las cabeceras de la página XSL.
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/ Transform"
version="1.0">
...
</xsl:stylesheet>
o
El patrón o template: Elemento básico de la páginas de estilo.
– Para cada nodo del árbol XML podemos definir un patrón de estilos que
marcará como se va a presentar este nodo en el documento final.
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
46
2.23
XSLT: Patrones de transformación (1/4)
o
Ejemplo: documento XML antes de aplicar el XSLT
<?xml version="1.0" encoding="ISO-8859-1"?>
<test1>
<titulo>Prueba de patrones XSL</titulo>
<descripcion>Cuerpo del documento</descripcion>
</test1>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
47
XSLT: Patrones de transformación (2/4)
o
Ejemplo: documento XML después de aplicar el XSLT
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Prueba de patrones XSL</title>
</head>
<body>
<h1>Prueba de patrones XSL</h1>
<h3>Cuerpo del documento</h3>
</body>
</html>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
48
2.24
XSLT: Patrones de transformación (3/4)
o Ejemplo:
inicial
documento XSLT aplicado al documento XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="test1">
<html>
<head>
<title><xsl:apply-templates select="titulo" mode="head"/></title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
……
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
49
XSLT: Patrones de transformación (4/4)
o Ejemplo:
documento XSLT aplicado al documento XML
inicial (continuación)
…..
<xsl:template match="titulo" mode="head">
<xsl:value-of select="text()"/>
</xsl:template>
<xsl:template match="titulo">
<h1><xsl:value-of select="text()"/></h1>
</xsl:template>
<xsl:template match="descripcion">
<h3><xsl:value-of select="text()"/></h3>
</xsl:template>
</xsl:stylesheet>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
50
2.25
XPath: Acceso a nodos XML
o
o
Se aplican dentro del modificador “select” de una
instrucción xsl:apply-templates”
Acceso a todos los nodos "titulo":
–
<xsl:apply-templates select ="titulo"/>
o
• Acceso a todos los nodos "titulo" que tengan como
padre a "test1":
o
• Acceso al nodo raiz del documento XML:
–
–
<xsl:apply-templates select ="test1/titulo"/>
<xsl:apply-templates select ="/"/>
o
• Acceso a todos los nodos "titulo" que tengan como
antecesor a "test1":
o
• Acceso al primero de los nodos "titulo" que tengan
como padre a "test1":
o
• Acceso al último de los nodos "titulo" que tengan
como padre a "test1":
–
–
–
o
<xsl:apply-templates select ="test1//titulo"/>
<xsl:apply-templates select ="test1/titulo[1]"/>
<xsl:apply-templates
select="test1/titulo[position()=last ()]"/>
<?xml version="1.0" encoding="ISO8859-1"?>
<test1>
<titulo>
Prueba de patrones XSL
</titulo>
<descripcion>
Cuerpo del documento
</descripcion>
</test1>
• Acceso a los nodos "titulo" que sean pares y que
tengan como padre a "test1":
–
<xsl:apply-templates select ="test1/ titulo[position ()
mod 2 = 0]"/>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
51
XPath: Acceso a nodos XML
o
o
o
o
o
o
o
• Acceso a todos los nodos "titulo" en cualquier parte del
documento:
– <xsl:apply-templates select ="//titulo"/>
• Acceso a todos los nodos "titulo" en cualquier parte del
documento, a partir del contexto actual:
– <xsl:apply-templates select =".//titulo"/>
• Acceso a todos los nodos "titulo" que tengan un atributo
"id":
– <xsl:apply-templates select ="titulo[ @id]"/>
• Acceso a todos los nodos "titulo" que NO tengan un
atributo "id":
– <xsl:apply-templates select ="titulo[not(@id)]"/>
– <xsl:apply-templates select ="titulo[ @id='XXX']"/>
• Acceso a todos los nodos "test1" que tengan un hijo
"titulo" con valor "XXX":
– <xsl:apply-templates select ="test1[titulo='XXX']"/>
• Acceso a todos los nodos "test1" que tengan un hijo
"titulo" con valor "XXX", normalizando la búsqueda, es
decir, eliminado espacios en blanco al inicio y final del
nodo:
– <xsl:apply-templates select ="test1[ normalizespace(titulo )='XXX']"/>
• Acceso a todos los nodos "titulo" o "descripcion":
– <xsl:apply-templates select ="titulo|descripcion"/>
v.2005.02
<?xml version="1.0" encoding="ISO8859-1"?>
<test1>
<titulo>
Prueba de patrones XSL
</titulo>
<descripcion>
Cuerpo del documento
</descripcion>
</test1>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
52
2.26
XSLT: Patrones de transformación
o
Procesamiento procedural.
<xsl:for-each select="row ">
<xsl:for-each select="col">
<xsl:apply-templates select="cell"/>
</xsl:for-each>
</xsl:for-each>
o
Procesamiento condicional.
o
Procesamiento condicional con comprobaciones.
<xsl:if test="@atributo='x'">
<h1>Este tipo de condicional no tiene ELSE</h1>
</xsl:if>
<xsl:choose>
<xsl:when test="$variable=1"><h3>Valor uno</h3></xsl:when>
<xsl:when test="$variable=2"><h3>Valor dos</h3></xsl:when>
<xsl:otherwise>
<h1>Variable con valor erroneo</h1>
</xsl:otherwise>
</xsl:choose>
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
53
XSLT: Patrones de transformación
o
Ordenación de elementos.
<xsl:template match="personal">
<xsl:apply-templates>
<xsl:sort select="dni" data-type="string" order="descending"/>
<xsl:sort select="curso_academico" data- type="number"
order="ascending"/>
</xsl:apply-templates>
</xsl:template>
o
Reportar errores desde la hoja de estilos
<xsl:message>
<xsl:text>Este es el mensaje de error !!</xsl:text>
<xsl:value-of select="@atributo"/>
</xsl:message>
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
54
2.27
Diseño de hojas de estilos XSL
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
55
Diseño de hojas de estilos XSL
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
56
2.28
Herramientas
o
XML
– Apache Xerces (Java) http://xml.apache.org/
– 4Suite (Python) http://4Suite.org/
– Sablotron (C y PHP)
o
XSL
– xlstproc (linea de comandos)
– Apache Xalan (Java) http://xml.apache.org/
– Jame's Clark XT (C y Java) http://www.jclark.com/
– 4Suite (Python) http://4Suite.org/
– Sablotron (C y PHP)
o
XSLFO
– Apache FOP (Java) http://xml.apache.org/fop
– Passive TeX (LaTeX - linea de comandos y conocido como PDF LaTeX)
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
v.2005.02
57
Entornos de trabajo con XML
o
Publicación de documentos XML aplicando plantillas XSL
– Apache Cocoon (Java)
– AxKit (Perl)
o
Edición de documentos XML/XSL/Schemas/FO
– XML Spy 4.4 (windows)
– eXcelon Stylus (windows)
– Emacs (modo PSGML/XSL)
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
58
2.29
Referencias
Empezando con HTML
http://www.w3.org/MarkUp/Guide/
o Especificación, HTML 4.01
http://www.sidar.org/traduc/html401-es/cover.html
o Especificación, Hojas de Estilo, CSS1
http://html.conclase.net/w3c/css1-es.html
o Especificación, Hojas de Estilo, CSS2
http://www.sidar.org/traduc/css/cover.html
o Estado CSS3 / Propuestas CSS3
http://www.w3.org/Style/CSS/current-work
o
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
59
Referencias
o
o
o
o
o
Añadiendo estilo http://www.w3.org/MarkUp/Guide/Style.html
Web XML de W3C
http://www.w3.org/XML/
Web XSL de W3C
http://www.w3.org/Style/XSL/
HTML, CSS, XML, XSLT en Castellano
http://html.programacion.com/
Curso completo HTML
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
v.2005.02
FUNDAMENTOS DE SISTEMAS DISTRIBUIDOS
Departament d’Arquitectura de Computadors - UPC
60
2.30
