Slide 1

Vocabularios XML y
Transformación de documentos
XHTML, MathML, SVG, SMIL, X3D, WML, VoiceXML
XSL, XSLT, XPath, XSL-FO

Departamento de Informática
Universidad de Oviedo


Slide 2

HTML


Slide 3

World Wide Web
SGML, 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


Slide 4

World Wide Web
HTML, SGML, XML
Meta-vocabulario
Años
70

SGML

HTML

1990

1996

1999

Vocabulario

XML
XHTML


Slide 5

Proceso de Estandarización
¿Dónde está tu tecnología favorita?
Éxito
(Diversificación)
Idea brillante

Posibles perversiones...
No estandarización
Estandarizar algo que no tiene éxito
Estándar demasiado pronto
Estándar demasiado tarde
Comités poco representativos
Estándar sin prototipos
No adoptar el estándar
etc., etc.

Adopción
del estándar
(limitaciones)

Necesidad
de estándar

Primeros
prototipos

Especificación
(comité)

Internacionales
ISO, W3C, IETF, ECMA, etc.


Slide 6

Porqué tenemos que obligar al usuario a usar
un determinado Software?


Slide 7

Accesibilidad


Slide 8

Editores WYSIWYG
Ejemplo: Utilizar Word para generar HTML


Slide 9

Editores WYSIWYG
Código generado por el WORD

Código escrito directamente


Slide 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


Slide 11

Nosotros codificaremos a pelo!!


Slide 12

Ejemplo de HTML
Cabecera
Cuerpo

Lista
Enlaces

AlCapone.html




link="red" vlink="white">

Pizzería Al Capone

Lista de enlaces

• 
  Tipos de Pizzas


• 
  Patrocinadores


• Contacto






Contacto




Dirección:
Detalles de
C/ Génova Nº 3, Oviedo, España


presentación

Teléfono:
985203040





Página visualizada


Slide 13

Estructura de documentos HTML
Un documento HTML tiene el formato
DTD

Cabecera
Cuerpo

“http://www.w3.org/TR/REC-html40/strinct.dtd”


...


...



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 (metainformació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


Slide 14

Formato de documentos HTML
Un elemento está formado por:
Una etiqueta inicial (nombre entre signos < y > ):
La etiqueta inicial puede contener atributos:

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



Hola

. . .

En caso de un elemento vacío puede usarse la sintaxis:
Elemento vacío


Aunque en HTML pueden no incluirse las etiquetas finales de algunos
elementos
¡En XHTML son obligatorias!


Slide 15

Cabecera HTML
En la cabecera se pueden incluir los elementos




Se puede asignar un nombre

para hacer referencias


Enlace

<br />información sin marcos<br />




Slide 27

HTML: Formularios

method="get">
Nombre:

Apellido

email:


Hombre
Mujer

rows="5" cols="50"><br /><<Inserta aquí tus comentarios>><br />
value="Envía">




Al pulsar “Envía” se le pasan
los valores a esa url
Se realiza una computación
en el servidor
Posibilidades:
CGI, Servlets, PHP, ASP, etc


Slide 28

HTML: Guiones
La etiqueta <script> permite incluir guiones (scripts)
Son programas interpretados por el visualizador (Lenguajes JavaScript,
VBScript, etc.)
<script type="text/javascript">
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) {document[name].src = eval(image+".src");
}}
// -->



Al avanzar el ratón
onMouseOut = ‘cambia("coche1", "coche1")'>
• Computación en cliente
src="coche1.gif“ />

• Depende de las posibilidades del visualizador


Slide 29

HTML Dinámico
DHTML (Dynamic HTML): los programas pueden tener acceso a
características del visualizador

Accede a la

propiedad de

visibilidad
<script language="JavaScript">
document.getElementById(id).style.visibility = "visible"
}
function ocultar(id) {
document.getElementById(id).style.visibility = "hidden"
}
//-->












Slide 30

DHTML
DHTML (Dynamic HTML): los programas pueden tener acceso a
características del visualizador (Exposición mediante objetos DOM)

Accede a la

propiedad de

visibilidad
<script language="JavaScript">
document.getElementById(id).style.visibility = "visible"
}
function ocultar(id) {
document.getElementById(id).style.visibility = "hidden"
}
//-->












Slide 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


Slide 32

HOJAS DE ESTILOS


Slide 33

Recordando el ejemplo de HTML
AlCapone.html




link="red" vlink="white">

Página visualizada



Pizzería Al Capone




Lista de enlaces





• 
  Tipos de Pizzas


• 
  Patrocinadores


• Contacto





Contacto




Dirección:
Detalles de
C/ Génova Nº 3, Oviedo, España


presentación

Teléfono:
985203040





Problema:
Presentación y contenido
mezclados


Slide 34

Hojas de Estilos
AlCapone.html


Enlace a

hoja

de estilo


Sin aspectos

Pizzería Al Capone


visuales

Lista de enlaces





• 
  Tipos de Pizzas


• 
  Patrocinadores


• 
  Contacto






Contacto


Identificación

Dirección:
elementos
C/ Génova Nº 3, Oviedo, España




Teléfono:
985203040





pizzeria.css
body { color : yellow;
background: blue
}
a:link { color: red }
a:visited { color: white }
span.item { color : red }
Página visualizada


Slide 35

Hojas de Estilos: Reutilización
pizzas.html




Referencia a la misma

hoja de estilos



Pizzas del Restaurante Al Capone







...






Tipos de Pizzas

	Pizza	Ingredientes	Precio
Barbacoa	Salsa barbacoa, Mozzarella, Pollo, Bacon, Ternera	8 €
Margarita	Tomate, Jamón, Queso	6 €





Misma
apariencia


Slide 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

Declaración
Selector

Lista de propiedades

body { color: yellow; background: blue }


Slide 37

Hojas de Estilo: Selectores
*
Cualquier elemento
A
Elemento de tipo
A, B
Elementos de tipo
y
A[n]
Elemento A con el atributo n
A[n=“val”] Elemento A con el atributo n = “val”
A.n
Elemento A de la clase “n”
A#n
Elemento A con el identificador “n”
AB
Elemento B descendiente de A
A>B
Elemento B hijo de A
A+B
Elemento B que sigue a A
Pseudoclases
:first-child
Primer hijo
:first-line Primer línea
:first-letterPrimera 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)

* {color: red }
H1 { color: red }
H1, H2 { color: red }
A[href] { color: blue }
A[href=“#Enlace”] { color: red}
DIV.aviso { color: red }
H1#n12 { color: red }
H1 EM { color: blue }
H1 > P { color: blue }
H1 + P { color: blue }


Slide 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”


Slide 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


Slide 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)
margin
border
padding
Contenido


Slide 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, norepeat
Se pueden combinar en una propiedad única
background: attachment color image position repeat


Slide 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, ...


Slide 43

Hojas de estilos: Otras posibilidades
Especificación de tipos de medios
Tipos de medios: screen, print, braille, handheld, projection, tty,
tv,... print {
@media
BODY { font-size: 10pt
}

@media screen {
BODY { font-size: 12pt }
}

TYPE="text/css" MEDIA=screen>
TYPE="text/css" MEDIA=aural>

@import “hoja1.css”
Importación de
hojas
Hojas de estilo sonoras (aural)

Propiedades: voice-family, stress,
richness, pitch, cue, pause, speak,
volume, azimuth...

H1 { voice-family:male;
stress: 20;
richness: 90;
}
P { pause: 20ms; }
A { cue-before: url(“bell.aiff”);
cue-after: url(“dong.wav”)
}


Slide 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


Slide 45

MathML


Slide 46

MathML
Evolució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


Slide 47

MathML
Objetivos 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


Slide 48

MathML
Estilos
2 estilos
Presentación: Estructura visual en 2 dimensiones
Contenido: Significado de las fórmulas
Presentación
$$




a
+
b


2




(a+b)2

Contenido
$$




a
b

2




Slide 49

MathML
Ejemplo
$$

x=

-b
±
b2
-
4⁢
a⁢c


2⁢a



2

x

b

b  4 ac

2a


Slide 50

mi: Identificador

MathML
Elementos de Presentación

mn: Número

msub: Subíndice

mo: Operador

msup: Superíndice

mtext: Texto

msubsup: Subíndice y superíndice

mspace: Espacio

munder: Escribir bajo un elemento

ms: String literal

mover: Escribir sobre un elemento

mglyph: Carácter no estándar

munderover: Escribir bajo y sobre un
elemento

mrow: Grupo horizontal
mfrac:Fracción

mmultiscripts: Múltiples índices

msqrt:Raíz cuadrada

mtable: Tabla o array

mroot:Raíz n-ésima

mtr: Fila de tabla

mstyle:Cambiar estilo

mtd:Datos de tabla

merror:Introducir un error

maligngroup:Grupo de alineación

mpadded: Ajustar espacio

: Escribir sobre un elemento

mphantom: Contenido invisible

malignmark: Marca un punto de alineación

mfenced: Rodear contenido de parántesis

mlabeledtr:Fila en tabla con etiqueta

menclose: Símbolo de división

maction: Enlaza una acción


Slide 51

MathML
Elementos de Contenido
ci: Identificador de contenido

quotient

int: Integral

cn: Número de contenido

exp:

diff: Derivada

csymbol:Símbolo

factorial

partialDiff: Der. parcial

apply: Aplicación de función a argumento

divide

sum: sumatorio

reln: Relación

max

product:

fn: Función

min

exp

interval: Intervalo

minus

ln

inverse: Inverso

plus

log

sep: Separador

power

logbase

condition: Condición

rem

sin

declare: Declaración

times

cos

lambda: Definición de función

root

tan

compose: Componer funciones

implies

sinh

...

forall

cosh

exists

arcsin

...

...


Slide 52

MathML
Software 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


Slide 53

SVG


Slide 54

SVG
Evolució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


Slide 55

SVG
Formato Vectorial
Formato raster
Arrays de pixels. Al hacer zoom se pierde calidad

SVG = Formato vectorial
Al hacer zoom no se pierde calidad


Slide 56

SVG
Ejemplo

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
xmlns="http://www.w3.org/2000/svg">
fill="red" stroke="blue" stroke-width="3" />
fill="green" stroke="yellow"/>



Slide 57

SVG
Inclusión en HTML







Esto es un párrafo con una imagen...







Para los visualizadores
que no admiten SVG


Slide 58

SVG
Espacio 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
(0,0)

x
(300,0)

y

(0,200)

(300,200)


Slide 59

cx="70" cy="100" r="50" />
x="150" y="50" rx="20" ry="20"
width="135" height="100" />

points="50, 250 75, 350 100, 250
125, 350 150, 250 175, 350" />

points="250,250 297, 284 279,
340 220, 340 202, 284" />
cx="400" cy="300" rx="72" ry="50"/>

SVG
Formas básicas


Slide 60

SVG
Path
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

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


Slide 61

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


Texto en varias líneas

Siguiente línea
style="font-weight:bold;
fill:green;stroke:blue">
Con diferentes propiedades
rotate="10 -10
10 -10
10 -10 10">
incluso rotaciones



Slide 62

SVG
Texto siguiendo un camino
Es posible indicar que el texto se escriba sobre un camino
d="M 16 9 . . . L 16 9 z "
/>


Bar e-baristo, el mejor bar de
copas del lugar.
Visítalo y volverás




Slide 63

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






Slide 64

SVG
Hiper-enlaces
a define un hiper-enlace (similar a HTML)
El atributo es: xlink:href
Está previsto usar el vocabulario XLink que amplía las posibilidades de
enlace entre documentos XML

fill="yellow" stroke="blue" />

Pulsa para ir a una página

fill="green" stroke="yellow" />


Slide 65

SVG
Definiciones y Referencias
defs define una serie de definiciones comunes que pueden utilizarse
varias veces.
use incluye un elemento definido en la sección defs


d="M 16 9 ... L 16 9 z "
/>

xlink:href="#copa" fill="none" stroke="red"
xlink:href="#copa" fill="none" stroke="red"
xlink:href="#copa" fill="none" stroke="red"

/>
/>
/>


Slide 66

SVG
Inclusión de imágenes
img permite incluir una imagen
Formatos: jpg, gif, png y ... svg!
height="360" width="232"
xlink:href="catedralOviedo.jpg" />

height="380" width="252"
fill="none" stroke="blue" />


Slide 67

SVG
Transformaciones
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
xlink:href="#copa" />
transform="scale(0.5,0.5)"
xlink:href="#copa" />
transform="rotate(20)"
xlink:href="#copa" />
transform="skewX(-20)"
xlink:href="#copa" />


Slide 68

SVG
Cortes (clipping)
clipPath(x,y) define un camino de corte

d="M 16 9 ... 16 9 z "
/>


x="0" y="0" width="500" height="20"/>
x="0" y="20" width="500" height="20"/>
. . .
x="0" y="240" width="500" height="20"/>



Slide 69

SVG
Relleno 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

gradientUnits="userSpaceOnUse"
x1="30" y1="20" x2="200" y2="150">




gradientUnits="userSpaceOnUse"
cx="130" cy="270" r="100" fx="70" fy="270">









Slide 70

SVG
Trasparencia y Opacidad
El atributo opacity indica nivel de trasparencia
(1=no trasparente, 0=trasparente)

d="M 20 70 L 95 70 L 115 130
L 0 130 L 20 70 z" />

opacity="0.4" stroke="black"
d="M 16 9 . . . L 16 9 z " />


Slide 71

SVG
Efectos de Filtros
filterUnits="userSpaceOnUse"
x="0" y="0" width="500" height="500">
stdDeviation="10" result="sombra"/>
result="sombraDesp"/>
surfaceScale="5" specularConstant=".75"
specularExponent="40" lighting-color="gray"
result="brillo">


in2="SourceAlpha" operator="in"
result="brillo"/>
in2="brillo" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="objeto"/>







Slide 72

SVG
Animaciones
Es posible modificar los valores de los atributos de forma
dinámica

from="120" to="20" begin="0s" dur="4s" fill="freeze"/>
from="40" to="100" begin="2s" dur="6s" fill="freeze"/>


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


Slide 73

SVG
Animaciones
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 (freeze|remove)


Slide 74

SVG
Conversiones de formas

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" />
fill="freeze" repeatCount="indefinite"/>



Slide 75

<script type="text/ecmascript">function addrect(evt) {
var svgobj = evt.target;
var svgdoc = svgobj.getOwnerDocument();
var newnode = svgobj.cloneNode(false);
svgstyle
= newnode.getStyle();
var x = 10 + 480 * Math.random();
var y = 10 + 330 * Math.random();
var width=10+100*Math.random();
var height=10+50*Math.random();
newnode.setAttribute('x',x);
newnode.setAttribute('y',y);
newnode.setAttribute('width',width);
newnode.setAttribute('height',height);
svgstyle.setProperty('opacity',0.3+0.7*Math.random());
var contents = svgdoc.getElementById('contents');
newnode = contents.appendChild(newnode);
}]]>

x="150" y="100" width="20" height="20"/>
x="250" y="100" width="20" height="20"/>
x="350" y="100" width="20" height="20"/>


SVG
DOM


Slide 76

SVG
Referencias
W3C
Especificaciones:http://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/ChessGML/
Mapa del Tiempo on-line:
http://www.carto.net/papers/svg/us_weather/


Slide 77

SMIL
Evolució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:
XHTML+SMIL
SVG+SMIL: Las animaciones de SVG forman parte de SMIL
etc...


Slide 78

SMIL
Ejemplo













Slide 79

SMIL
Elementos
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
...


Slide 80

SMIL
XHTML+SMIL
HTML + TIME = Soportado en IE 5.5 +












SMIL Timing syntax
consists of a set of

attributes for
controlling the behavior of media,

and several types of time
containers

that group media together
for coordinated presentation.






Slide 81

SMIL
XHTML+SMIL








Tiempo: repeatCount="indefinite"
onrepeat="innerText=parseInt(document.body.currTimeState.activeTime)">
0



clipEnd="5s" repeatDur="5s" begin="2" />






Slide 82

SMIL
Referencias
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/behaviors/time.asp

Adobe SVG Viewer


Slide 83

X3D
Evolució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.


Slide 84

X3D
Ejemplo



position="6 -1 0"/>






translation="0 -2 1.25">

string=""Hola"
"en X3D!""/>









Slide 85

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


Slide 86

WML
Evolució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


Slide 87

WML
Ejemplo

"http://www.wapforum.org/DTD/wml_1.1.xml">




Hola




Qué tal?


Siguiente






Final






Slide 88

WML
Referencias
Especificación:
http://www.wapforum.org/

Tutoriales
http://www.w3schools.com/wap/
http://www.devguru.com/Technologies/wml/quickref/wml_intro.html

Visualizadores:
OpenWave
Nokia Toolkit
Mobile Explorer


Slide 89

VoiceXML
Evolució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 AT&T
(1998) Se crea el VoiceXML Forum
(2000) VoiceXML 1.0
(2004) VoiceXML 2.0


Slide 90

VoiceXML
Ejemplo




Say one of:


Sports


Weather


News

Please say one of




Slide 91

VoiceXML
Referencias
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/


Slide 92

Transformación XML
Introducción


Slide 93

Hojas de estilos para XML
Antecedentes
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


Slide 94

Hojas de estilos para XML
Posibilidades
XHTML
XSLT

Documento
XML

XSLT

CSS

XSL-FO

CSS

Presentación


Slide 95

Hojas de estilo para XML
CSS con XML
Documento
XML

CSS

Presentación

mensaje.xml

href="mensaje.css" ?>

Juanito el Loco
María la Impaciente

Recuerda que nos tenemos que ver en la alacena...





Facilidad
de uso

mensaje.css
mensaje { border: 5px solid; ...}
destino { color: blue; ... }
remitente { color: red; ... }
texto { margin: 5em; ... }



Posibilidades
limitadas


Slide 96

Hojas de estilo para XML
Convirtiendo a HTML
Documento
XML

XSLT

XHTML

CSS

Presentación

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


Slide 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




...


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

código de salida



Slide 98

XSLT
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">




Pizzas del Restaurante Al Capone





Patrón de encaje

Valores que se
incluyen en resultado






Tipos de Pizzas












Referencia a valor
de atributo


Slide 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

...


Pizzas del Restaurante Al Capone



Dos modos

de recorrido


Numera las pizzas


Tipos de pizza:
Genera una lista de

enlaces de la forma

Margarita

#P
|



---



...


Slide 104

XSLT: Ejemplo


Ordena las pizzas por precio



Calcula la media de los precios



Tipos de Pizzas

Pizza	Ingredientes	Precio




Media de precios =



Genera referencias de la forma

. . .

P





Slide 105


5
6
7
8
9
10
11
12
100


XSLT: Otro ejemplo


• 
  ! =
  
  
  
  
  


fact x = if x = 0 then 1
else x * fact (x – 1)


1













Slide 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


Slide 107

Hojas de estilos para XML
Posibilidades
XHTML
XSLT

Documento
XML

XSLT

CSS

XSL-FO

CSS

Presentación


Slide 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


Slide 109

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

Fichero
XSL-FO

Fichero XML

Procesador
XSLT

Procesador
XSL-FO

Hoja XSLT
...o un visualizador...


Slide 110

XSL-FO
Caracterí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
...


Slide 111

XSL-FO
Ejemplo







master-reference="PáginaEjemplo">

Hola en FO





Slide 112

XSL-FO
Estructura de un documento
Espacio de nombres: http://www.w3.org/1999/XSL/Format
Elemento raíz: fo:root
Organización visual del documento:
Uso de modelos de página: "páginas maestras"
Los modelos se definen dentro de fo:layout-master-set

Sólo un tipo de página maestra, fo:simple-page-master, que
es una página rectangular
Las páginas del documento harán referencia a las páginas
maestras que se hayan definido, y heredarán sus propiedades


Slide 113

XSL-FO
fo:simple-page-master
Atributos:

margin-top

before

margin-right

body

margin-left

start

after
margin-bottom

end

master-name
page-height
page-width
margin-left, margin-top, marginright, margin-bottom

Ejemplo:

master-name="pagina-normal"
page-height="29.7cm"
page-width="21cm"
margin-left="3cm"
margin-right="3cm"
margin-top="2cm"
margin-bottom="2cm">




Slide 114

XSL-FO
fo:page-sequence (I)
Crear una secuencia de páginas
Referencia a la página modelo
Atributo master-reference
Debe haberse definido en fo:layout-master-set

Elementos que incluye como hijos:
fo:title (opcional): Contiene el texto del "título" de la página
(puede ser usado por navegadores de Internet como