Vocabularios XML y Transformaci

1
Vocabularios XML y Transformación de
documentosXHTML, MathML, SVG, SMIL, X3D, WML,
VoiceXMLXSL, XSLT, XPath, XSL-FO
2
HTML
3
World Wide WebSGML, HTML, XML

• (70- ) GML Desarrollado en IBM por C. Goldfarb,
  E. J. Mosher, R. Lorie
• Proyecto para representar documentos legales
• (78) SGML Estándar ANSI
• Aplicaciones en sistemas de documentación
• (90) HTML (Tim Berners-Lee, 1990)
• Desarrollado en el CERN.
• Intercambio de información científica sobre
  Internet
• (94) HTML 2.0 (IETF, Internet Engineering Task
  Force)
• (94) Consorcio Web (W3C)
• Formado por compañías y universidades
  internacionales
• Desarrolla recomendaciones (? estándares de
  facto)
• (96-) XML 1.0 versión simplificada de SGML
• (98) HTML 4.01 última versión basada en SGML
• (99) XHTML 1.0 Adaptación de HTML a XML
• (02) XHTML 2.0 Borrador
• (03) XML 1.1 Mejorar el Soporte de Unicode

4
World Wide WebHTML, SGML, XML
1990
5
Proceso de EstandarizaciónDónde está tu
tecnología favorita?
Idea brillante
6
Porqué tenemos que obligar al usuario a usar un
determinado Software?
7
Accesibilidad
8
Editores WYSIWYG
Ejemplo Utilizar Word para generar HTML
9
Editores WYSIWYG
Código generado por el WORD
10
Editores WYSIWYG

• Ventajas
• Facilidad de uso (discutible)
• Independencia de la evolución de los estándares
• Desventajas
• Problemas de accesibilidad
• No todo el mundo puede/quiere ver lo mismo que
  nosotros
• Incompatibilidad de código generado
• Incorporación de extensiones
• Generación de código no-válido
• Engañosa facilidad de desarrollo
• Limitación del aprendizaje
• Menor control de lo que se está realizando

11
Nosotros codificaremos a pelo!!
12
Ejemplo de HTML
AlCapone.html
Página visualizada
lthtmlgt ltheadgt lttitlegtPizzeria Al
Caponelt/titlegt lt/headgt ltbody bgcolor"blue"
text"yellow" link"red"
vlink"white"gt lth1gtPizzería Al
Caponelt/h1gt ltpgtLista de enlaceslt/pgt ltulgt ltligtlta
href"Pizzas.html"gt Tipos de
Pizzaslt/agtlt/ligt ltligtlta href"http//www.mafia.it"gt
Patrocinadoreslt/agtlt/ligt ltligtlta
href"Contacto"gtContactolt/agtlt/ligt ltulgt lth2gtlta
name"Contacto"gtContactolt/agtlt/h2gt ltpgtltfont
color"red"gtDirecciónlt/fontgt C/
Génova Nº 3, Oviedo, Españalt/pgt ltpgtltfont
color"red"gtTeléfonolt/fontgt
985203040lt/pgt lt/bodygt lt/htmlgt
Cabecera
Cuerpo
Lista
Enlaces
Detalles de presentación
13
Estructura de documentos HTML
Un documento HTML tiene el formato
lt!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0//EN
http//www.w3.org/TR/REC-html40/strinc
t.dtd lthtmlgt ltheadgt . . . lt/headgt ltbodygt . .
. lt/bodygt lt/htmlgt
DTD
Cabecera
Cuerpo
DTD Declaración de tipo de documento Muchos
visualizadores asumen tipo HTML por defecto Su
inclusión garantiza mayor compatibilidad y
validación La cabecera incluye información sobre
el documento actual (meta-información) Título,
autor, palabras clave para robots de búsqueda,
etc. El cuerpo incluye el contenido del
documento El formato HTML se basa en la
utilización de elementos
14
Formato de documentos HTML
Un elemento está formado por Una etiqueta
inicial (nombre entre signos lt y gt )
ltetiquetagt La etiqueta inicial puede contener
atributos ltetiqueta atributovalorgt El
elemento debe acabar con una etiqueta final con
el mismo nombre El contenido del elemento es todo
lo que hay entre la etiqueta inicial y la
final El contenido pueden ser otros elementos
Elemento
Etiqueta de inicio
Contenido
Etiqueta final
ltbody bgcolorblue textwhitegt lth1gtHolalt/h1gt
. . . lt/bodygt
Aunque en HTML pueden no incluirse las etiquetas
finales de algunos elementos En XHTML son
obligatorias!
15
Cabecera HTML

• En la cabecera se pueden incluir los elementos
• lttitlegt especifica el título del documento
• ltmetagt especifica meta-información. Dos modos

• Atributo name
• ltmeta nameAuthor contentJose Grandagt
• Podemos usar nuestros valores
• ltmeta nameColorFavorito contentRojogt
• Pueden incluirse palabras clave que ayudan a
  los buscadores
• ltmeta nameKeywords contentPizzas,
  Restaurantegt
• y descripciones
• ltmeta nameDescription contentPáginas
  de una pizzería...gt

• Atributo http-equiv Solicita al servidor que
  incluya información en la cabecera de envío
• ltmeta http-equivContent-language
  Contentengt
• ltmeta http-equivRefresh
  Content2,http//www.mafia.itgt
• ltmeta http-equiv"Content-type"
  content"text/html charset"iso-8859-1"gt

16
Cabecera HTML

• Otros elementos de la cabecera
• ltlinkgt especifica relaciones entre documentos
• Muchas opciones dependen del soporte ofrecido
  por el visualizador
• ltlink relINDEX hrefindice.htmlgt
• ltlink relALTERNATE mediaPRINT
  hrefversionImpresa.psgt
• Pueden especificarse hojas de estilo (se verán
  más adelante)
• ltlink relstylesheet hrefestilo.cssgt

ltstylegt especifica estilo del documento (se verá
más adelante) ltstyle typetext/cssgt body
background blue color yellow lt/stylegt
17
HTML Texto

• Niveles de encabezado (headings)
• h1, h2, h3, h4, h5, h6
• Párrafo p
• Los saltos de línea son gestionados por el
  visualizador
• br inserta un salto de línea
• nbsp inserta un espacio pero impide un salto de
  línea
• Elementos de frases
• em, strong, cite, dfn, code, samp, kbd, var,
  abbr, acronym, blockquote, q
• Texto preformateado pre
• ltpregt
• void main()
• return (Hola)
• lt/pregt
• Control de versiones
• ltpgtEl plan de estudios es del año
  ltdelgt1992lt/delgtltinsgt2002lt/insgtlt/pgt

18
HTML Listas

• Listas no ordenadas ltulgt (unordered-lists)
• Listas ordenadas ltolgt (ordered-lists)
• Items de listas ltligt (list-item)

Listas de definiciones ltdlgt (definition-list) Térm
ino de definición ltdtgt (definition-term) Descripci
ón de definición ltddgt (definition-description)
19
HTML Enlaces
ltpgtLista de enlaceslt/pgt ltulgt ltligtlta
href"Pizzas.html"gtTipos de Pizzaslt/agtlt/ligt ltligtlt
a href"http//www.mafia.it"gtPatrocinadoreslt/agtlt/l
igt ltligtlta href"Contacto"gtContactolt/agtlt/ligt ltulgt

• Lista de enlaces
• Tipos de pizzas
• Patrocinadores
• Contacto

20
HTML Imágenes
ltimg srcimages/fotoPizza.gif
width500 height500 altFoto de una pizzagt
21
HTML Formateo de texto

• HTML 4.01 incluye características de formateo de
  texto
• b (bold, negrita) i (itálica) big (más grande)
  small (más pequeño) tt (teletipo)
• Control de fuentes
• ltfont size2 color redgt Texto rojo
  grandelt/fontgt
• Líneas horizontales lthrgt

Es posible agrupar contenidos mediante span y
div span se utiliza dentro de líneas de texto div
se utiliza para bloques de contenido (divide
unidades) Con los atributos id o class se
asigna un nombre lógico Son útiles para trabajar
con hojas de estilos
ltdiv classDatosgt ltpgtltspan class"item"gtDirecció
nlt/spangt C/ Génova Nº 3, Oviedo,
Españalt/pgt ltpgtltspan class"item"gtTeléfonolt/spangt
985203040lt/pgt lt/divgt
22
HTML Tablas
lttablegt ltcaptiongtPizzas disponibleslt/captiongt
lttrgtltthgtNombrelt/thgtltthgtIngredienteslt/thgtltthgtPreci
olt/thgtlt/trgt lttrgtlttdgtBarbacoalt/tdgtlttdgtMozzarella,
Baconlt/tdgtlttdgt8 eurolt/tdgtlt/trgt lttrgtlttdgtHawaianalt
/tdgtlttdgtTomate, Piña, Quesolt/tdgtlttdgt7eurolt/tdgtlt/
trgt lttrgtlttdgt4 quesoslt/tdgtlttdgtTomate, Mezcla 4
quesoslt/tdgtlttdgt7 eurolt/tdgtlt/trgt lt/tablegt
Pizzas Disponibles
Nombre
Ingredientes
Precio
Barbacoa
Mozzarella, Bacon
8
Hawaiana
Tomate, Piña, Queso
7
4 Quesos
Tomate, Mezcla 4 quesos
7
23
Otras Características de HTML
24
HTML Objetos externos
MiApplet.java
import java.lang. import java.applet. import
java.awt. public class MiApplet extends Applet
public void paint(Graphics g)
g.drawString("Hola desde Java",10,10)
Compilador de java
MiApplet.class
... ltapplet codemiApplet.class width500
height500 gt Aquí venía un applet que
saludaba lt/appletgt ...
25
HTML Mapas de imágenes
ltobject data"dibujo.gif"
width"250" height"250"
type"image/gif" usemap"mapa1"gt ltmap
name"mapa1"gt Barra de navegación ltarea
href"WWW.html" shape"rect" coords"0,0,250,125"
alt"WWW"gt ltarea href"XML.html" shape"rect"
coords"0,125,250,250" alt"XML"gt lt/mapgt lt/objectgt

26
HTML Marcos
lthtmlgt ltheadgt lttitlegtEjemplo con
marcoslt/titlegt lt/headgt ltframeset rows"10,"gt
ltframe src"superior.html"gt ltframeset
cols"40,60"gt ltframe srcIndice.html"gt
ltframe namePrincipal src"Pizzas.html"gt
lt/framesetgt ltnoframesgt información sin
marcos lt/noframesgt lt/framesetgt lt/htmlgt
27
HTML Formularios
ltform action"http//www.mafia.it/cgi-bin/nuevoSoc
io" method"get"gt Nombre ltinput
type"text" id"nombre"gtltbr/gt Apellido ltinput
type"text" id"apell"gtltbr/gt email ltinput
type"text" id"email"gtltbr/gt ltselect
name"sexo"gt ltoption selected
value"H"gtHombrelt/optiongt ltoption
value"M"gtMujerlt/optiongt lt/selectgt lttextarea
name"Comentarios" rows"5"
cols"50"gt ltltInserta aquí tus comentariosgtgt
lt/textareagt ltinput type"submit"
value"Envía"gt ltinput type"reset
value"Borra" gt lt/formgt
28
HTML Guiones
La etiqueta ltscriptgt permite incluir guiones
(scripts) Son programas interpretados por el
visualizador (Lenguajes JavaScript, VBScript,
etc.)
ltheadgt ltscript type"text/javascript"gt lt!--
if (document.images) coche1
new Image(128,128) coche2
new Image(128,128) coche1.src
"coche1.gif" coche2.src "coche2.gif"
function cambia(name, image) if
(document.images) documentname.src
eval(image".src") //
--gt lt/scriptgt lt/headgt ltbodygt ltimg name"coche1
width"128" height"128 onMouseOver'
cambia("coche1", "coche2")' onMouseOut
cambia("coche1", "coche1")'gt
src"coche1.gif /gt lt/bodygt

• Computación en cliente
• Depende de las posibilidades del visualizador

29
HTML Dinámico
DHTML (Dynamic HTML) los programas pueden tener
acceso a características del visualizador
lthtmlgt ltheadgt lttitlegtEjemplo de
DHTMLlt/titlegt ltscript language"JavaScript"gt lt!--
function ver(id) document.getElementById(id).s
tyle.visibility "visible" function
ocultar(id) document.getElementById(id).style.vi
sibility "hidden" //--gt lt/SCRIPTgt lt/HEADgt ltBO
DYgt ltinput type"button" value"Ver Coche"
onClick"ver('bloque')"gt ltinput type"button"
value"Ocultar Coche" onClick"ocultar('bloque')"gt
ltdiv id"bloque" style"visibilityvisible"
gtltimg src"coche1.gif"/gtlt/divgt lt/bodygt lt/htmlgt
Accede a la propiedad de visibilidad
30
DHTML
DHTML (Dynamic HTML) los programas pueden tener
acceso a características del visualizador
(Exposición mediante objetos DOM)
lthtmlgt ltheadgt lttitlegtEjemplo de
DHTMLlt/titlegt ltscript language"JavaScript"gt lt!--
function ver(id) document.getElementById(id).s
tyle.visibility "visible" function
ocultar(id) document.getElementById(id).style.vi
sibility "hidden" //--gt lt/SCRIPTgt lt/HEADgt ltBO
DYgt ltinput type"button" value"Ver Coche"
onClick"ver('bloque')"gt ltinput type"button"
value"Ocultar Coche" onClick"ocultar('bloque')"gt
ltdiv id"bloque" style"visibilityvisible"
gtltimg src"coche1.gif"/gtlt/divgt lt/bodygt lt/htmlgt
Accede a la propiedad de visibilidad
31
El futuro de HTML

• HTML quedó estancado en HTML 4.01 (1997)
• HTML era un vocabulario SGML (no XML)
• XHTML 1.0 (2000)
• Apenas modifica los elementos de HTML
• Es un vocabulario XML
• XHTML 1.1 (2001)
• Creación de módulos
• XHTML 2.0 (2005)
• Borrador
• Revisión más completa de los elementos
• Se pierde compatibilidad hacia atrás

32
HOJAS DE ESTILOS
33
Recordando el ejemplo de HTML
AlCapone.html
Página visualizada
lthtmlgt ltheadgt lttitlegtPizzeria Al
Caponelt/titlegt lt/headgt ltbody bgcolor"blue"
text"yellow" link"red"
vlink"white"gt lth1gtPizzería Al
Caponelt/h1gt ltpgtLista de enlaceslt/pgt ltulgt ltligtlta
href"Pizzas.html"gt Tipos de
Pizzaslt/agtlt/ligt ltligtlta href"http//www.mafia.it"gt
Patrocinadoreslt/agtlt/ligt ltligtlta
href"Contacto"gtContactolt/agtlt/ligt ltulgt lth2gtlta
name"Contacto"gtContactolt/agtlt/h2gt ltpgtltfont
color"red"gtDirecciónlt/fontgt C/
Génova Nº 3, Oviedo, Españalt/pgt ltpgtltfont
color"red"gtTeléfonolt/fontgt
985203040lt/pgt lt/bodygt lt/htmlgt
Problema Presentación y contenido mezclados
Detalles de presentación
34
Hojas de Estilos
AlCapone.html
lthtmlgt ltheadgt lttitlegtPizzeria Al
Caponelt/titlegt ltlink rel"stylesheet"
href"pizzeria.css"gt lt/headgt ltbodygt lth1gtPizzería
Al Caponelt/h1gt ltpgtLista de enlaceslt/pgt ltulgt
ltligtlta href"Pizzas.html"gt Tipos de
Pizzaslt/agtlt/ligt ltligtlta href"http//www.mafia.it"gt
Patrocinadoreslt/agtlt/ligt ltligtlta
href"Contacto"gt Contactolt/agtlt/ligt ltu
lgt lth2 gtlta name"Contacto"gtContactolt/agtlt/h2gt ltpgt
ltspan class"item"gtDirecciónlt/spangt
C/ Génova Nº 3, Oviedo, Españalt/pgt ltpgtltspan
class"item"gtTeléfonolt/spangt
985203040lt/pgt lt/bodygt lt/htmlgt
Enlace a hoja de estilo
Sin aspectos visuales
Identificación elementos
35
Hojas de Estilos Reutilización
pizzas.html
lthtmlgt ltheadgt lttitlegtTipos Pizzaslt/titlegt ltlink
rel"stylesheet" href"pizzeria.css"gt lt/headgt ltbod
ygt lth1gtPizzas del Restaurante Al
Caponelt/h1gt lttablegtltcaptiongtTipos de
Pizzaslt/captiongt ltthgt lttdgtPizzalt/tdgtlttdgtIngredient
eslt/tdgtlttdgtPreciolt/tdgtlt/thgt lttrgtlttdgtBarbacoalt/tdgt
lttdgtSalsa barbacoa, Mozzarella, Pollo,
Bacon, Terneralt/tdgt lttdgt8
eurolt/tdgtlt/trgt . . . lttrgtlttdgtMargaritalt/tdgt
lttdgtTomate, Jamón, Quesolt/tdgt lttdgt6
eurolt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
Referencia a la misma hoja de estilos
36
Hojas de estilos Formato
Un documento de estilo está formado por una lista
de declaraciones Cada declaración consta de un
selector y una lista de propiedades
37
Hojas de Estilo Selectores
Cualquier elemento color red A Elemento
de tipo ltAgt H1 color red A, B Elementos
de tipo ltAgt y ltBgt H1, H2 color red
An Elemento A con el atributo n Ahref
color blue Anval Elemento A con el
atributo n val AhrefEnlace color
red A.n Elemento A de la clase n DIV.aviso
color red An Elemento A con el identificador
n H1n12 color red A B Elemento B
descendiente de A H1 EM color blue A gt
B Elemento B hijo de A H1 gt P color blue A
B Elemento B que sigue a A H1 P color
blue
Pseudoclases first-child Primer hijo
first-line Primer línea first-letter Primera
letra link Enlace no visitado visited Enlace
visitado hover Al pasar el ratón por
encima focus Al recibir enfoque active Al
estar activo (ej. botón pulsado)
38
Hojas de estilos Propiedades

• Fuentes
• font-family lista de nombres de familias
• sans-serif, serif, cursive, fantasy, monospace,
  Times New Roman, ...
• font-size small, larger, ... nº absoluto (10pt),
  relativo 150,
• font-stretch wider, narrower, expanded,...
• font-style oblique, italic
• font-weight bold, light, nº
• font-variant small-caps
• Se pueden simplificar las declaraciones con la
  propiedad única font

39
Hojas de estilos Propiedades

• Texto
• letter-spacing número (2px, 1mm,...), auto
• line-height número (2px, 1mm,...), porcentaje
• text-align left, right, center, justify,...
• word-spacing número
• Alineación (valign, halign) top, middle, bottom,
  baseline
• Sangrado text-indent (número, porcentaje)
• text-decoration none, underline, blink,
  overline, line-through
• text-shadow none, color, longitudes

40
Hojas de estilos Propiedades

• Bordes
• border-width thin, thick, medium, número
• border-style none, groove, inset, outset, ridge,
  dotted, dashed, double, hidden
• border-color identificador de color, color RGB,
  transparent
• border-collapse separate, collapse
• Se pueden simplificar en una sola propiedad del
  tipo
• border anchura estilo color
• Márgenes (margin)
• Relleno (padding)

41
Hojas de estilos Propiedades

• Fondo (background)
• background-attachment scroll, fixed
• background-color nombre de color, valor rgb
• background-image url(valor de url)
• background-position porcentaje, top, right,
  left, center, ...
• background-repeat repeat, repeat-x, repeat-y,
  no-repeat
• Se pueden combinar en una propiedad única
• background attachment color image position
  repeat

42
Hojas de estilos Otras posibilidades

• Agregar contenido (contadores)
• Utilizar pseudoclases (ejemplo, primera letra de
  un texto)
• Controlar formato visual
• Forma de representación
• display block, inline, run-in,
• position absolute, fixed
• Distancias top, left, right, bottom
• visibility hidden, visible
• Control de solapamientos
• overflow (auto, hidden, scroll, visible), clip
• Control de cursores
• cursor crosshair, hand, e-resize, move, help, ...

43
Hojas de estilos Otras posibilidades

• Especificación de tipos de medios
• Tipos de medios screen, print, braille,
  handheld, projection, tty, tv,...

44
Evolución de CSS

• (1994) Primer borrador de CSS
• Objetivo Permitir combinar preferencias visuales
  del autor y del usuario (en cascada)
• (1996) CSS nivel 1 Propiedades de fuentes,
  márgenes, colores, etc.
• (1998) CSS nivel 2 Añade posiciones absolutas,
  páginas, numeración automática, etc.
• En desarrollo CSS 3, añadirá selectores, texto
  vertical, interacción, etc.
• Otros perfiles de CSS para móviles, TV e
  impresión
• NOTA CSS no tiene sintaxis XML

45
MathML
46
MathMLEvolución

• HTML carece de facilidades para incorporar
  fórmulas matemáticas
• Se recurría a incluirlas como imágenes
• Múltiples problemas
• Fórmula como algo indivisible
• No es posible adaptar a diferentes formatos
  visuales
• Procesamiento de fórmulas buscadores, índices,
  reutilización, etc
• (1999) MathML 1.0
• (2001) MathML 2.0 nuevos elementos y DOM

47
MathMLObjetivos de Diseño

• Material matemático a todos los niveles
• Codificar tanto notaciones como significados
• Facilitar conversión con otros formatos
• Facilitar la visualización de expresiones
  complejas
• Permitir la extensibilidad
• Legible por personas...por ser XML pero...
• NO está pensado para edición manual de fórmulas

48
MathMLEstilos

• 2 estilos
• Presentación Estructura visual en 2 dimensiones
• Contenido Significado de las fórmulas

Presentación
Contenido
ltmathgt ltapplygt ltpower/gt ltapplygt
ltplus/gt ltcigtalt/cigt ltcigtblt/cigt
lt/applygt ltcngt2lt/cngt lt/applygt lt/mathgt
ltmathgt ltmrowgt ltmsupgt ltmfencedgt
ltmrowgt ltmigtalt/migt ltmogtlt/mogt
ltmigtblt/migt lt/mrowgt lt/mfencedgt
ltmngt2lt/mngt lt/msupgt lt/mrowgt lt/mathgt
(ab)2
49
MathMLEjemplo
ltmath xmlns"http//www.w3.org/1998/Math/MathML"gt
ltmrowgt ltmigtxlt/migtltmogtlt/mogt
ltmfracgt ltmrowgtltmrowgtltmogt-lt/mogtltmigtblt/migt
lt/mrowgt ltmogtlt/mogt
ltmsqrtgtltmrowgtltmsupgtltmigtblt/migtltmngt2lt/mngtlt/msupgt
ltmogt-lt/mogt
ltmrowgtltmngt4lt/mngtltmogtInvisibleTim
eslt/mogt
ltmigtalt/migtltmogtInvisibleTimeslt/mogtltmigtclt/migtlt/mro
wgt lt/mrowgt
lt/msqrtgtlt/mrowgt ltmrowgtltmngt2lt/mngtltmogtInv
isibleTimeslt/mogtltmigtalt/migtlt/mrowgt
lt/mfracgt lt/mrowgt lt/mathgt
50
MathMLElementos de Presentación

• mi Identificador
• mn Número
• mo Operador
• mtext Texto
• mspace Espacio
• ms String literal
• mglyph Carácter no estándar

msub Subíndice msup Superíndice msubsup
Subíndice y superíndice munder Escribir bajo un
elemento mover Escribir sobre un
elemento munderover Escribir bajo y sobre un
elemento mmultiscripts Múltiples índices
mrow Grupo horizontal mfracFracción msqrtRaíz
cuadrada mrootRaíz n-ésima mstyleCambiar
estilo merrorIntroducir un error mpadded
Ajustar espacio mphantom Contenido
invisible mfenced Rodear contenido de
parántesis menclose Símbolo de división
mtable Tabla o array mtr Fila de
tabla mtdDatos de tabla maligngroupGrupo de
alineación Escribir sobre un elemento malignmark
Marca un punto de alineación mlabeledtrFila en
tabla con etiqueta maction Enlaza una acción
51
MathMLElementos de Contenido

• ci Identificador de contenido
• cn Número de contenido
• csymbolSímbolo
• apply Aplicación de función a argumento
• reln Relación
• fn Función
• interval Intervalo
• inverse Inverso
• sep Separador
• condition Condición
• declare Declaración
• lambda Definición de función
• compose Componer funciones
• . . .

quotient exp factorial divide max min minus plus
power rem times root implies forall exists . . .
int Integral diff Derivada partialDiff Der.
parcial sum sumatorio product exp ln log logbase
sin cos tan sinh cosh arcsin . . .
52
MathMLSoftware Existente

• Visualizadores
• Internet Explorer MathPlayer (soporte mediante
  objeto externo)
• Amaya Visualizador estándar del W3C
• Mozilla/Netscape 7 Soporte nativo
• Editores
• Amaya
• OpenOffice
• MathType
• ...otros...
• Conversores LaTeX - MathML

53
SVG
54
SVGEvolución

• (2001) SVG 1.0 - Scalable Vector Graphics
• (2003) SVG 1.1 Modularización
• ...actualmente SVG 1.2 en desarrollo
• Objetivos
• Gráficos vectoriales Precisión, escalabilidad,
  etc.
• Compatibilidad con XML y vocabularios de la Web
  CSS, Espacios de nombres, XLink, SMIL,
  ECMAScript, etc.
• También permite incluir texto, imágenes raster e
  hiper-enlaces
• Formato de texto (no binario) Facilita
  indexación, búsquedas, etc.
• Buena acogida
• Soportado en principales navegadores IE,
  Mozilla, Amaya, etc.
• Planes para incorporación en pequeños dispositivos

55
SVGFormato Vectorial
Formato raster Arrays de pixels. Al hacer zoom se
pierde calidad
SVG Formato vectorial Al hacer zoom no se
pierde calidad
56
SVGEjemplo
lt?xml version"1.0" standalone"no"?gt lt!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http//www.w3.org/TR/2001/REC-SVG-20010904/DTD/sv
g10.dtd"gt ltsvg width"300" height"200"
xmlns"http//www.w3.org/2000/svg"gt ltrect x"25"
y"10" width"200" height"100" fill"red"
stroke"blue" stroke-width"3" /gt ltcircle
cx"100" cy"100" r"50" fill"green"
stroke"yellow"/gt lt/svggt
57
SVGInclusión en HTML
lt?xml version"1.0" encoding"iso-8859-1"?gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttitl
egtEjemplo de Página con HTMLlt/titlegtlt/headgt ltbodygt
ltpgtEsto es un párrafo con una imagen...lt/pgt ltobj
ect width"300" height"200"
data"simple.svg" type"image/svgxml"gt ltimg
width"300" height"200" src"simple.png"
alt"Imagen"/gt lt/objectgt lt/bodygt lt/htmlgt
Para los visualizadores que no admiten SVG
58
SVGEspacio de trabajo y coordenadas

• width, height Especifican el ancho y alto de la
  imagen
• viewBox "x y alto ancho" Indica rectángulo de
  imagen que va a verse

x
(0,0)
(300,0)
y
(300,200)
(0,200)
59
SVGFormas básicas
ltcircle cx"70" cy"100" r"50" /gt ltrect
x"150" y"50" rx"20" ry"20" width"135"
height"100" /gt ltline x1"325" y1"150" x2"375"
y2"50" /gt ltpolyline points"50, 250 75, 350
100, 250 125, 350 150, 250 175, 350"
/gt ltpolygon points"250,250 297, 284 279,
340 220, 340 202, 284" /gt ltellipse
cx"400" cy"300" rx"72" ry"50"/gt
60
SVGPath

• path permite definir formas gráficas abiertas y
  cerradas a partir de líneas y curvas
• Las formas básicas son casos particulares de path

ltpath d"M 16 9 L 96 9 L 59 46 L 59 94
C 59 94 57 100 84 102 L 84 103 L 31 103
L 31 102 C 56 100 54 94 54 94 L 54 46 L
16 9 z " /gt
M x y Mover al punto (x,y) L x y Pintar una
línea hasta el punto (x,y) C x1 y1 x2 y2 x3 y3
Pintar una curva bezier cúbica con los puntos de
control (x1,y1) (x2,y2) hasta (x3,y3) H n
Pintar horizontalmente hasta n V n Pintar
verticalmente hasta n Z Cerrar la
forma Otros...Q,S, T, A
61
SVGTexto

• text define un elemento de texto
• tspan permite asignar propiedades a porciones de
  texto
• Muchas propiedades compartidas con CSS

lttext x"220" y"20"gt lttspan x"220" dy"30"gt
Texto en varias líneaslt/tspangt lttspan x"220"
dy"30"gt Siguiente línealt/tspangt lttspan
x"220" dy"30" style"font-weightbold
fillgreenstrokeblue"gt Con diferentes
propiedadeslt/tspangt lttspan x"220" dy"30"
rotate"10 -10 10 -10 10
-10 10"gt incluso rotacioneslt/tspangt lt/textgt
62
SVGTexto siguiendo un camino

• Es posible indicar que el texto se escriba sobre
  un camino

ltpath id"copa" d"M 16 9 . . . L 16 9 z "
/gt lttext font-size"10" fill"blue"gt lttextPath
xlinkhref"copa"gt Bar e-baristo, el mejor bar
de copas del lugar. Visítalo y volverás
lt/textPathgt lt/textgt
63
SVGAgrupaciones

• g define un grupo
• Los elementos dentro de la agrupación pueden
  compartir propiedades

ltg fill"red" stroke"blue" stroke-width"5"gt
ltcircle cx"40" cy"30" r"20" /gt ltrect x"80"
y"10" height"40" width"40" /gt lt/ggt
64
SVGHiper-enlaces

• a define un hiper-enlace (similar a HTML)
• El atributo es xlinkhref
• Está previsto usar el vocabulario XLink que
  amplía las posibilidades de enlace entre
  documentos XML

lta xlinkhref"pagina.html"gt ltrect x"25"
y"10" width"200" height"100" fill"yellow"
stroke"blue" /gt lttext x"30" y"50"
text-anchor"start"gt Pulsa para ir a una
páginalt/textgt lt/agt ltcircle cx"100" cy"100"
r"50" fill"green" stroke"yellow" /gt
65
SVGDefiniciones y Referencias
defs define una serie de definiciones comunes que
pueden utilizarse varias veces. use incluye un
elemento definido en la sección defs
ltdefsgt ltpath id"copa" d"M 16 9 ... L 16
9 z " /gt lt/defsgt ltuse x"10" y"10"
xlinkhref"copa" fill"none" stroke"red"
/gt ltuse x"20" y"10" xlinkhref"copa"
fill"none" stroke"red" /gt ltuse x"30" y"10"
xlinkhref"copa" fill"none" stroke"red"
/gt
66
SVGInclusión de imágenes

• img permite incluir una imagen
• Formatos jpg, gif, png y ... svg!

ltimage x"20" y"20" height"360" width"232"
xlinkhref"catedralOviedo.jpg" /gt ltrect
x"10" y"10" height"380" width"252"
fill"none" stroke"blue" /gt
67
SVGTransformaciones
translate(x,y) traslada el origen al punto
(x,y) scale(sx,sy) escala sobre sx y sy rotate(a)
rota un ángulo a matrix(a,b,c,d,e,f) matriz de
transformación skewX(n) inclinación de n grados
horizontal skewY(n) inclinación de n grados
vertical
ltuse transform"translate(10,10)"
xlinkhref"copa" /gt ltuse x"300" y"50"
transform"scale(0.5,0.5)"
xlinkhref"copa" /gt ltuse x"100" y"100"
transform"rotate(20)" xlinkhref"copa"
/gt ltuse x"200" y"100" transform"skewX(-20
)" xlinkhref"copa" /gt
68
SVGCortes (clipping)
clipPath(x,y) define un camino de corte
ltclipPath id"corte"gt ltpath d"M 16 9 ...
16 9 z " /gt lt/clipPathgt ltg style"strokenone
clip-pathurl(corte)"gt ltrect
style"fillred" x"0" y"0" width"500"
height"20"/gt ltrect style"fillgreen"
x"0" y"20" width"500" height"20"/gt . . .
ltrect style"fillblue" x"0" y"240"
width"500" height"20"/gt lt/ggt
69
SVGRelleno y gradientes
El atributo fill indica cómo rellenar una forma
cerrada Se puede especificar un color mediante
rgb Se pueden definir gradientes mediante
linearGradient y radialGradient
ltdefsgt ltlinearGradient id"grad1"
gradientUnits"userSpaceOnUse" x1"30"
y1"20" x2"200" y2"150"gt ltstop offset"0"
style"stop-colorblue" /gt ltstop offset"0.5"
style"stop-colorwhite" /gt ltstop offset"1"
style"stop-colorgreen" /gt lt/linearGradientgt ltra
dialGradient id"grad2" gradientUnits"userSpac
eOnUse" cx"130" cy"270" r"100" fx"70"
fy"270"gt ltstop offset"0" style"stop-colorblue
" /gt ltstop offset"0.5" style"stop-colorwhite"
/gt ltstop offset"1" style"stop-colorgreen"
/gt lt/radialGradientgt lt/defsgt ltrect ...
style"fillurl(grad1)"/gt ltrect ...
style"fillurl(grad2)"/gt
70
SVGTrasparencia y Opacidad
El atributo opacity indica nivel de trasparencia
(1no trasparente, 0trasparente)
ltpath id"mesa" fill"green" d"M 20 70 L 95
70 L 115 130 L 0 130 L 20 70 z" /gt
ltpath id"copa" fill"url(grad1)"
opacity"0.4" stroke"black" d"M 16 9 . . .
L 16 9 z " /gt
71
SVGEfectos de Filtros
ltfilter id"filtro" filterUnits"userSpaceOn
Use" x"0" y"0" width"500" height"500"gt
ltfeGaussianBlur in"SourceAlpha"
stdDeviation"10" result"sombra"/gt ltfeOffset
in"sombra" dx"10" dy"10"
result"sombraDesp"/gt ltfeSpecularLighting
in"sombra" surfaceScale"5"
specularConstant".75" specularExponent"40"
lighting-color"gray" result"brillo"gt
ltfePointLight x"-5000" y"-10000" z"20000"/gt
lt/feSpecularLightinggt ltfeComposite in"brillo"
in2"SourceAlpha" operator"in"
result"brillo"/gt ltfeComposite
in"SourceGraphic" in2"brillo"
operator"arithmetic" k1"0" k2"1" k3"1"
k4"0" result"objeto"/gt ltfeMergegt
ltfeMergeNode in"sombraDesp"/gtltfeMergeNode
in"objeto"/gt lt/feMergegt lt/filtergt ltuse
xlinkhref"copa" filter"url(filtro)"/gt
72
SVGAnimaciones
Es posible modificar los valores de los atributos
de forma dinámica
ltrect x"20" y"10" width"120" height"40"
fill"blue"gt ltanimate attributeName"width"
from"120" to"20" begin"0s" dur"4s"
fill"freeze"/gt ltanimate attributeName"height"
from"40" to"100" begin"2s"
dur"6s" fill"freeze"/gt lt/rectgt
animate anima atributos generales set modifica
valor de atributos discretos (ejemplo,
visibility) animateMotion movimiento de un objeto
a lo largo de un camino animateColor cambia los
colores animateTransform anima una transformación
73
SVGAnimaciones

• Atributos de animación
• begin Comienzo de la animación
• Puede ser un tiempo (2s) o valor relativo a otra
  animación
• end Fin de la animación
• dur Duración de la animación
• repeatCount Nº de repeticiones (indefinite
  infinitas)
• repeatDur Duración de la repetición
• min/max Duración mínima/máxima
• restart Indica si es posible volver a activar
  la animación
• fill Indica estado al finalizar la animación
  (freezeremove)

74
SVGConversiones de formas
ltpath fill"red"gt ltanimate attributeName"d"
from"M 16 9 . . . L 16 9 z " to"M 45 9
. . . L 45 9 z" fill"freeze" dur"5s" id"a1"
begin"a2.end" /gt ltanimate attributeName"fill"
from"red" to"blue" dur"5s"
fill"freeze" repeatCount"indefinite"/gt lt/pathgt
75
SVGDOM
ltscript type"text/ecmascript"gtlt!CDATA
function addrect(evt) var svgobj
evt.target var svgdoc svgobj.getOwnerDocumen
t() var newnode svgobj.cloneNode(false)
svgstyle newnode.getStyle() var x 10
480 Math.random() var y 10 330
Math.random() var width10100Math.random()
var height1050Math.random()
newnode.setAttribute('x',x) newnode.setAttribut
e('y',y) newnode.setAttribute('width',width)
newnode.setAttribute('height',height)
svgstyle.setProperty('opacity',0.30.7Math.random
()) var contents svgdoc.getElementById('conte
nts') newnode contents.appendChild(newnode)
gtlt/scriptgt ltg id"contents"gt ltrect
onclick"addrect(evt)" style"fillredopacity1"
x"150" y"100" width"20"
height"20"/gt ltrect onclick"addrect(evt)"
style"fillgreenopacity1" x"250"
y"100" width"20" height"20"/gt ltrect
onclick"addrect(evt)" style"fillblueopacity1"
x"350" y"100" width"20"
height"20"/gt lt/ggt
76
SVGReferencias

• W3C
• Especificacioneshttp//www.w3.org/Graphics/SVG/
• Visualizadores
• Adobe SVG Viewer, Mozilla
• Editores
• Amaya, Adobe Illustrator, Sodipodi, ...
• http//www.w3.org/Graphics/SVG/SVG-Implementations
  .htm8
• Algunas aplicaciones
• Finales de ajedrez http//people.w3.org/maxf/Ches
  sGML/
• Mapa del Tiempo on-line http//www.carto.net/pape
  rs/svg/us_weather/

77
SMILEvolución

• SMIL Synchronized Multimedia Integration
  Language
• SMIL es a multimedia lo que HTML es a hipertexto
• Objetivo Integrar/sincronizar elementos de
  diferentes medios vídeos, imágenes, sonidos,
  etc.
• (1998) SMIL 1.0
• (2001) SMIL 2.0 Creación de diferentes módulos
• Combinación en otras aplicaciones
• XHTMLSMIL
• SVGSMIL Las animaciones de SVG forman parte de
  SMIL
• etc...

78
SMILEjemplo
ltsmilgt ltheadgt ltroot-layout id"imagenes"
width"200" height"200" /gt lt/headgt ltbodygt
ltseq repeatCount"indefinite"gt ltimg
src"dibu1.jpg" region"imagenes" dur"1s" /gt
ltimg src"dibu2.jpg" region"imagenes" dur"1s"
/gt lt/seqgt lt/bodygt lt/smilgt
79
SMILElementos

• Elementos
• seq Cada hijo comienza cuando acaba el anterior
• par Los hijos comienzan en paralelo
• switch Selecciona dependiendo de ciertas
  características
• excl Un único hijo puede estar activo a la vez
• Atributos
• begin
• end
• dur
• ...

80
SMILXHTMLSMIL

• HTML TIME Soportado en IE 5.5

lthtml xmlnst "urnschemas-microsoft-comtime"gt lt
headgt ltstylegt t\, span behaviorurl(defau
lttime2) lt/stylegt lt?IMPORT namespace"t"
implementation"defaulttime2"gt lt/stylegt ltxmlnam
espace prefix"t"/gt lt/headgt ltbodygt lttaudio
begin"1s" src"talk.mp3" syncBehavior"locked"
/gt ltpgt ltspan begin"1s"gtSMIL Timing syntax
consists of a set of lt/spangtltbr/gt ltspan
begin"4s"gtltemgtattributeslt/emgt for
controlling the behavior of media,lt/spangtltbr/gt
ltspan begin"7s"gtand several types of ltemgttime
containerslt/emgtlt/spangtltbr/gt ltspan
begin"9s"gtthat group media together for
coordinated presentation.lt/spangt lt/pgt lt/bodygtlt/htm
lgt
81
SMILXHTMLSMIL
ltHTML xmlnst "urnschemas-microsoft-comtime"
gt ltHEADgt ltSTYLEgt .time behavior
url(defaulttime2) lt/STYLEgt lt?IMPORT
namespace"t" implementation"defaulttime2"gt lt/H
EADgt ltBODYgt ltpgtTiempo ltSPAN id"Timer"
class"time" dur"1" repeatCount"indefinite"
onrepeat"innerTextparseInt(document.body.cur
rTimeState.activeTime)"gt 0lt/SPANgtlt/pgt ltDIVgtlttvid
eo src"coffee.mpeg" clipEnd"5s"
repeatDur"5s" begin"2" /gt lt/DIVgt lt/BODYgt lt/HTMLgt
82
SMILReferencias

• Especificación
• http//www.w3.org/TR/smil20
• http//www.w3.org/AudioVideo/
• Implementaciones
• RealNetworks RealPlayer
• Microsoft IE 5.5
• http//msdn.microsoft.com/workshop/author/be
  haviors/time.asp
• Adobe SVG Viewer

83
X3DEvolución

• Definir escenas de realidad virtual en Internet
• Adaptación de VRML (Virtual Reality Modeling
  Language) a XML
• Evolución
• (1994) Posibilidad de desarrollar un estándar
  para realidad virtual en Internet
• Aparecen VRML 1.0 y VRML 2.0
• (1997) VRML 97 Estándar ISO Internacional
• Objetivos Independencia de plataforma,
  extensibilidad, bajo ancho de banda
• (1999) Se cambia el nombre de Consorcio VRML a
  consorcio Web3D
• (2003) Desarrollo de X3D
• Conversión a sintaxis XML
• Modularización
• Características Gráficos en 2D y 3D, Animación,
  Audio/Vídeo, Interacción con el usuario,
  scripting, simulaciones físicas comportamientos
  humanos, espacios geográficos, etc.

84
X3DEjemplo
lt?xml version"1.0" encoding"UTF-8"?gt ltX3D
profile"Immersive"gt ltScenegtltGroupgt ltViewpoint
description"Hola" orientation"0 1 0 1.57"
position"6 -1 0"/gt ltNavigationInfo
type"quotEXAMINEquot quotANYquot"/gt ltShap
egt ltSphere/gt ltAppearancegtltImageTexture
url"quottierra.pngquot"/gt
lt/Appearancegt lt/Shapegt ltTransform rotation"0
1 0 1.57" translation"0 -2 1.25"gt
ltShapegt ltText string"quotHolaqu
ot quoten X3D!quot"/gt
ltAppearancegt ltMaterial diffuseColor"0.1
0.5 1"/gt lt/Appearancegt lt/Shapegt
lt/Transformgt lt/Groupgt lt/Scenegtlt/X3Dgt
85
X3DReferencias

• Especificación http//www.web3d.org
• Implementaciones
• X3D nativo Flux
• VRML
• Cortona
• Blaxxun
• Cosmo Player
• OpenVRML
• FreeWRL

86
WMLEvolución

• Lenguaje de marcas para representar información
  en dispositivos con pocos recursos (teléfonos
  móviles)
• WML forma parte de WAP
• (1995) Ericsson inicia ITTP (Intelligent Terminal
  Transfer Protocol)
• (1996) Openwave desarrolla HDML (Handhelp Device
  Markup Language) subconjunto de HTML
• (1997) Ericsson, Motorola, Nokia y Openwave
  fundan WapForum
• (1998) WAP 1.0. Es un protocolo que permite
  acceso a Internet desde dispositivos móviles
• (2002) Se crea Open Mobile Alliance

87
WMLEjemplo
lt?xml version"1.0" encoding"iso-8859-1"?gt
lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
1.1//EN" "http//www.wapforum.org/DTD/wml_1.1.xml
"gt ltwmlgt ltcard id"Tarjeta1"
title"Ejemplo "gt ltpgt Holalt/pgt
ltpgtQué tal?lt/pgt ltanchorgtSiguiente
ltgo href"siguiente"gt lt/anchorgt
lt/cardgt ltcard id"siguiente"
title"siguiente"gt ltpgtFinallt/pgt
lt/cardgt lt/wmlgt
88
WMLReferencias

• Especificación
• http//www.wapforum.org/
• Tutoriales
• http//www.w3schools.com/wap/
• http//www.devguru.com/Technologies/wml/qui
  ckref/wml_intro.html
• Visualizadores
• OpenWave
• Nokia Toolkit
• Mobile Explorer

89
VoiceXMLEvolución

• Portales basados en voz
• Ejemplos Contestadores automáticos de empresas
• Artefactos empotrados (coches)
• Objetivos
• Fácil creación de contenido hablado
• Reconocimiento/generación de voz
• Interacción con el usuario
• (1995) Phone Markup Language de ATT
• (1998) Se crea el VoiceXML Forum
• (2000) VoiceXML 1.0
• (2004) VoiceXML 2.0

90
VoiceXMLEjemplo
lt?xml version"1.0"?gt ltvxml version"2.0"gt ltmenugt
ltpromptgt Say one of ltenumerate/gt
lt/promptgt ltchoice next"http//www.sports.exampl
e/start.vxml"gt Sports lt/choicegt ltchoice
next"http//www.weather.example/intro.vxml"gt
Weather lt/choicegt ltchoice next"http//www.ne
ws.example/news.vxml"gt News lt/choicegt
ltnoinputgtPlease say one of ltenumerate/gtlt/noinputgt
lt/menugt lt/vxmlgt
91
VoiceXMLReferencias

• Especificación http//www.w3.org/Voice/
• Tutoriales
• Guía a VoiceXML http//www.w3.org/Voice/Guide/
• VoiceXMLReview http//www.voicexmlreview.org
• Portal sobre VoiceXML
• http//www.kenrehor.com/voicexml/
• Implementaciones
• http//studio.tellme.com/

92
Transformación XMLIntroducción
93
Hojas de estilos para XMLAntecedentes

• SGML tenía DSSSL (Document Style Semantics and
  Specification Language)
• Para XML se optó por crear XSL (XML Stylesheet
  Language)
• Posteriormente se dividió en 3 partes
• XSLT Transformación de documentos XML
• XPath Especificar caminos y expresiones XML
• XSL-FO Objetos de formateo
• Además, CSS también puede usarse con XML

94
Hojas de estilos para XMLPosibilidades
Documento XML
Presentación
95
Hojas de estilo para XMLCSS con XML
Documento XML
Presentación
CSS
96
Hojas de estilo para XMLConvirtiendo a HTML
Documento XML
XHTML
Presentación
XSLT
CSS

• Es la técnica más popular
• Permite añadir características de hipertexto e
  interactivas
• Menor calidad para medios impresos

97
XSLT

• El documento XML se puede asociar a una
  transformación XSLT
• Algunos visualizadores, al recibir un documento
  XML, transforman el documento y visualizan el
  resultado

lt?xml version1.0?gt lt!DOCTYPE pizzas SYSTEM
"pizzas.dtd"gt lt?xml-stylesheet typetext/xsl
hrefpizzas.xsl ?gt ltpizzasgt . . . lt/pizzasgt
XSLT es un lenguaje declarativo (transforma un
árbol en otro árbol) El programador incluye una
serie de reglas de transformación El procesador
es el que se encarga de obtener el árbol y de
escribir el resultado Las reglas se basan en la
definición de plantillas (templates) Las
plantillas utilizan sintaxis de XPath
ltxsltemplate matchvalor a encajargt código
de salida lt/xsltemplategt
98
XSLT
ltxslstylesheet version"1.0"
xmlnsxsl"http//www.w3.org/1999/XSL/Transform"gt
ltxsloutput method"html" /gt ltxsltemplate
match"/"gt lthtmlgtltbodygtlth1gtPizzas del
Restaurante Al Caponelt/h1gt ltxslapply-templates
/gt lt/bodygtlt/htmlgt lt/xsltemplategt
ltxsltemplate match"pizzas"gt lttablegtltcaptiongtTi
pos de Pizzaslt/captiongtlttrgt ltxslapply-templates
/gt lt/tablegt lt/xsltemplategt ltxsltemplate
match"pizza"gt lttrgtlttdgtltxslvalue-of
select"_at_nombre"/gtlt/tdgt lttdgtltxslapply-templates
/gtlt/tdgt lttdgtltxslvalue-of select"_at_precio"
/gtlt/tdgtlt/trgt lt/xsltemplategt ltxsltemplate
match"ingrediente"gtltxslvalue-of
select"_at_nombre" /gt lt/xsltemplategt lt/xslstyleshe
etgt
Valores que se incluyen en resultado
Patrón de encaje
Referencia a valor de atributo
99
XSLT

• El procesador XSLT recorre el árbol desde la raíz
• Recorre los elementos padre antes que los hijos
• Para cada elemento, si existe una plantilla
  aplicable, se aplica y ya no se examinan más
  elementos descendientes (salvo que se solicite)
• Principales Instrucciones
• ltxslapply-templates select"Patrón de XPathgt
• Solicita que continúe aplicando
  plantillas
• ltxslvalue-of selectExpresión de XPath /gt
• Generar un valor a partir de la expresión
• ltxslfor-each selectExpresión de XPath /gt
• Para iterar sobre la serie de valores de la
  expresión
• ltxslcopy-of selectExpresión de XPath /gt
• Copiar nodos del árbol

100
XSLT
Instrucciones condicionales

• ltxslifgt Condicional simple
• ltxslchoosegt Condicional múltiple (case)
• ltxslwhengt Elementos del condicional múltiple
• ltxslotherwisegt Valor por defecto

ltxslchoosegt ltxslwhen testcontador 2gt...
ltxslwhen testcontador 2gt...
ltxslotherwisegt... lt/xslchoosegt
Generación de nodos XML
ltxslnumbergt Añade un número ltxslattributegt
Añade un atributo ltxslelementgt Añade un
elemento ltxslcommentgt Añade un comentario
ltxslprocessing-instructiongt Genera una
instrucción de procesamiento ltxsltextgt
Genera un nodo de texto
ltxslelement nameagt ltxslattribute
namehrefgt ltxslvalue-of select_at_idgt
ltxslvalue-of select_at_nombregt
lt/xslattributegt lt/xslelementgt
lta hrefid1gtpepelt/agt
ltpersona idid1 nombrepepe /gt
101
XSLT
Otras instrucciones

• ltxslvariablegt Declara una variable
• XSLT es un lenguaje declarativo
• No hay asignación destructiva! ?

ltxslvariable nametamañogt5 lt/xslvariablegt ltxs
lif test tamaño 5 gt. . . lt/xslifgt
ltxslsortgt Clasificar nodos ltxslincludegt
Incluir otra hoja de estilos ltxslimportgt
Importar otra hoja ltxslcall-templategt
Llamar a otra plantilla ltxslparamgt Declara
el valor por defecto de un parámetro ltxslwith-par
amgt Asignar un valor a un parámetro
102
XSLT Ejemplo
Enumerar las pizzas con un índice hipertextual,
ordenarlas por precio y mostrar la media de los
precios,
Enumerar las pizzas
Incluir un índice al principio
Ordenar por precio
Calcular la media de los precios
103
XSLT Ejemplo
ltxsltemplate match"/"gt . . . ltbodygtlth1gtPizzas
del Restaurante Al Caponelt/h1gt
ltxslapply-templates mode"cabecera" /gt
ltxslapply-templates /gt lt/bodygtlt/htmlgt lt/xsltemp
lategt ltxsltemplate match"pizzas"
mode"cabecera"gt ltdiv class"header"gtTipos de
pizza ltxslfor-each select"pizza"gt
ltxslnumber value"position()" format"1. "/gt
ltxslelement name"a"gt ltxslattribute
name"href"gtPltxslnumber level"single"/gtlt/xslat
tributegt ltxslvalue-of select"_at_nombre"/gtlt/xsl
elementgt lt/xslfor-eachgt lt/divgtlthr/gt lt/xslte
mplategt . . .
Dos modos de recorrido
Numera las pizzas
Genera una lista de enlaces de la forma lta
hrefP3gtMargaritalt/agt
104
XSLT Ejemplo
ltxsltemplate match"pizzas"gt lttable
border"1"gtltcaptiongtTipos de Pizzaslt/captiongt lttrgt
ltthgtPizzalt/thgtltthgtIngredienteslt/thgtltthgtPreciolt/thgt
lt/trgt ltxslfor-each select"//pizza"gt ltxslsort
data-type"number" select"_at_precio" /gt
ltxslapply-templates select"."/gt lt/xslfor-eachgt
lt/tablegt ltpgtMedia de precios ltxslvalue-of
select"sum(//_at_precio) div count(//_at_precio)"
/gtlt/pgt lt/xsltemplategt ltxsltemplate
match"pizza"gt lttrgtlttdgtltxslelement
name"a"gt ltxslattribute name"name"gtPltxslnumber
level"single"/gtlt/xslattributegt lt/xslelementgt ltx
slvalue-of select"_at_nombre"/gt lt/xsltemplategt
Ordena las pizzas por precio
Calcula la media de los precios
Genera referencias de la forma lta nameP3gt. . .
105
XSLT Otro ejemplo
ltnsgt ltnumgt5lt/numgt ltnumgt6lt/numgt ltnumgt7lt/numgt ltnumgt8
lt/numgt ltnumgt9lt/numgt ltnumgt10lt/numgt ltnumgt11lt/numgt ltn
umgt12lt/numgt ltnumgt100lt/numgt lt/nsgt
ltxsltemplate match"num"gt ltligt ltxslvalue-of
select"."/gt! ltxslcall-template
name"fact"gt ltxslwith-param
name"x"gtltxslvalue-of select"." /gt
lt/xslwith-paramgt lt/xslcall-templategt
lt/ligt lt/xsltemplategt ltxsltemplate
name"fact"gt ltxslparam name"x" /gt
ltxslchoosegt ltxslwhen test"x
0"gt1lt/xslwhengt ltxslotherwisegt
ltxslvariable name"llamada"gt
ltxslcall-template name"fact"gt
ltxslwith-param name"x"gtltxslvalue-of select"x
- 1" /gt lt/xslwith-paramgt
lt/xslcall-templategt lt/xslvariablegt
ltxslvalue-of select"llamada x"/gt
lt/xslotherwisegt lt/xslchoosegt lt/xsltemplategt
fact x if x 0 then 1 else x
fact (x 1)
106
Valoración de XSLT

• Es un lenguaje de programación Turing-completo
• Lenguaje declarativo (sin asignación destructiva)
• 4 tipos de datos (enteros, booleanos, strings y
  conjuntos de nodos
• Sin chequeo estático de tipos
• Seguridad? Eficiencia? (no son objetivos de
  diseño)
• XSLT 2.0 pretende incluir tipos de datos de XML
  Schema
• Flexible La sintaxis de XPath se adapta a
  posibles cambios en la estructura. No se valida
  el documento
• Bueno para hacer tareas sencillas rápidamente
• Empotrado en navegadores
• Los programas XSLT son documentos XML
• La sintaxis es poco amigable para el programador
• Necesidad de buenas herramientas de autor

107
Hojas de estilos para XMLPosibilidades
Documento XML
Presentación
108
XSL

• Originalmente, XSL XSLT XPath XSL-FO
• Posteriormente, XPath y XSLT toman identidad
  propia
• XSL-FO Objetos de formateo con propiedades
• Muchas propiedades, son comunes con CSS
• (2001) XSL-1.0 (Incluía XPath y XSLT)
• Incluye modelos de páginas, soporte para
  internacionalización e hiper-enlaces.
• (2003) XSL-1.1
• Mayor soporte para marcadores, índices y
  múltiples flujos
• En desarrollo
• XPath 2.0 Añade soporte para tipos de datos y
  Schemas
• XSLT 2.0 Tipos de datos de XPath 2.0 y gestión
  de errores

109
XSLXSL-FO

• XSL-Formatting Objects
• Describe documento en un formato "imprimible"
  (presentación)

Fichero XML
110
XSL-FOCaracterísticas

• Sintaxis XML
• Muchas propiedades compatibles con CSS
• Otras posibilidades no contempladas en CSS
• Texto de derecha a izquierda o de arriba a abajo
• Notas al pie
• Notas al margen
• Números de página y referencias cruzadas
• ...

111
XSL-FOEjemplo
lt?xml version"1.0" encoding"iso-8859-1"?gt ltforo
ot xmlnsfo"http//www.w3.org/1999/XSL/Format"gt
ltfolayout-master-setgt ltfosimple-page-master
master-name"PáginaEjemplo"gt
ltforegion-body margin"2cm"/gt
lt/fosimple-page-mastergt lt/folayout-master-setgt
ltfopage-sequence
master-reference"PáginaEjemplo"gt ltfoflow
flow-name"xsl-region-body"gt ltfoblockgtHola
en FOlt/foblockgt lt/foflowgt
lt/fopage-sequencegt lt/forootgt
112
XSL-FOEstructura de un documento

• Espacio de nombres http//www.w3.org/1999/XSL/For
  mat
• Elemento raíz foroot
• Organización visual del documento
• Uso de modelos de página "páginas maestras"
• Los modelos se definen dentro de
  folayout-master-set