PDF de programación - XML, Servicios Web y Web Semántica

XML, Servicios Web y

Web Semántica

Departamento de Informática

Universidad de Oviedo

Sesión 4

Vocabularios XML y

Transformación de documentos
MathML, SVG, SMIL, X3D, WML, VoiceXML

XSL, XSLT, XPath, XSL-FO

Departamento de Informática

Universidad de Oviedo

1

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

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

2

MathML
Estilos

2 estilos

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

Presentación

<math>
<mrow>

<msup>
<mfenced>
<mrow>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
</mrow>
</math>

(a+b)2

Contenido

<math>
<apply>
<power/>
<apply>
<plus/>
<ci>a</ci>
<ci>b</ci>
</apply>
<cn>2</cn>
</apply>
</math>

MathML
Ejemplo

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>

<mi>x</mi><mo>=</mo>
<mfrac>

<mrow><mrow><mo>-</mo><mi>b</mi></mrow>

<msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup>

<mo>±</mo>

<mo>-</mo>

<mrow><mn>4</mn><mo>&InvisibleTimes;</mo>

<mi>a</mi><mo>&InvisibleTimes;</mo><mi>c</mi></mrow>

</mrow>

</msqrt></mrow>

<mrow><mn>2</mn><mo>&InvisibleTimes;</mo><mi>a</mi></mrow>
</mfrac>
</mrow>
</math>

-=

x

b

4

ac

2 -
b
a
2

3

–
MathML
Elementos 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

mrow: Grupo horizontal
mfrac:Fracción
msqrt:Raíz cuadrada
mroot:Raíz n-ésima
mstyle:Cambiar estilo
merror:Introducir un error
mpadded: Ajustar espacio
mphantom: Contenido invisible
mfenced: Rodear contenido de parántesis
menclose: Símbolo de división

elemento

mmultiscripts: Múltiples índices

mtable: Tabla o array
mtr: Fila de tabla
mtd:Datos de tabla
maligngroup:Grupo de alineación
: Escribir sobre un elemento
malignmark: Marca un punto de alineación
mlabeledtr:Fila en tabla con etiqueta
maction: Enlaza una acción

MathML
Elementos de Contenido

ci: Identificador de contenido
cn: Número de contenido
csymbol:Sí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
. . .

4

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

SVG

5

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

SVG
Formato Vectorial

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

SVG = Formato vectorial
Al hacer zoom no se pierde calidad

6

SVG
Ejemplo

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="200"

xmlns="http://www.w3.org/2000/svg">

<rect x="25" y="10" width="200" height="100"

fill="red" stroke="blue" stroke-width="3" />

<circle cx="100" cy="100" r="50"
fill="green" stroke="yellow"/>

</svg>

SVG
Inclusión en HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de Página con HTML</title></head>
<body>
<p>Esto es un párrafo con una imagen...</p>

<object width="300" height="200"

data="simple.svg" type="image/svg+xml">

<img width="300" height="200"

src="simple.png" alt="Imagen"/>

Para los visualizadores

que no admiten SVG

</object>

</body>
</html>

7

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

x

(0,0)

y

(300,0)

(0,200)

(300,200)

SVG
Formas básicas

<circle

cx="70" cy="100" r="50" />

<rect

x="150" y="50" rx="20" ry="20"
width="135" height="100" />

<line x1="325" y1="150" x2="375" y2="50" />

<polyline

points="50, 250 75, 350 100, 250

125, 350 150, 250 175, 350" />

<polygon

points="250,250 297, 284 279,

340 220, 340 202, 284" />

<ellipse

cx="400" cy="300" rx="72" ry="50"/>

8

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

<path 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 " />

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

SVG
Texto

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

<text x="220" y="20">
<tspan x="220" dy="30">

Texto en varias líneas</tspan>

<tspan x="220" dy="30">

Siguiente línea</tspan>

<tspan x="220" dy="30"
style="font-weight:bold;

fill:green;stroke:blue">

Con diferentes propiedades</tspan>

<tspan x="220" dy="30"

rotate="10 -10
10 -10
10 -10 10">

incluso rotaciones</tspan>

</text>

9

SVG
Texto siguiendo un camino

Es posible indicar que el texto se escriba sobre un camino

<path id="copa"

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

<text font-size="10" fill="blue">
<textPath xlink:href="#copa">
Bar e-baristo, el mejor bar de
copas del lugar.
Visítalo y volverás
</textPath>
</text>

SVG
Agrupaciones

g define un grupo

Los elementos dentro de la agrupación pueden compartir propiedades

<g fill="red" stroke="blue" stroke-width="5">
<circle cx="40" cy="30" r="20" />
<rect x="80" y="10" height="40" width="40" />
</g>

10

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

<a xlink:href="pagina.html">

<rect x="25" y="10" width="200" height="100"

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

<text x="30" y="50" text-anchor="start">

Pulsa para ir a una página</text>

</a>
<circle cx="100" cy="100" r="50"
fill="green" stroke="yellow" />

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

<path id="copa"

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

<defs>

/>

</defs>

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

<use x="10" y="10"

<use x="20" y="10"

<use x="30" y="10"

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

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

11

SVG
Inclusión de imágenes

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

<image x="20" y="20"

height="360" width="232"
xlink:href="catedralOviedo.jpg" />

<rect x="10" y="10"

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

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

<use transform="translate(10,10)"

xlink:href="#copa" />

<use x="300" y="50"

transform="scale(0.5,0.5)"
xlink:href="#copa" />

<use x="100" y="100"

transform="rotate(20)"
xlink:href="#copa" />

<use x="200" y="100"

transform="skewX(-20)"
xlink:href="#copa" />

12

SVG
Cortes (clipping)

clipPath(x,y) define un camino de corte

<clipPath id="corte">
<path

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

/>
</clipPath>

<g style="stroke:none;

clip-path:url(#corte)">

<rect style="fill:red"

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

<rect style="fill:green"

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

. . .
<rect style="fill:blue"

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

</g>

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

<defs>
<linearGradient id="grad1"

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

<stop offset="0" style="stop-color:blue" />
<stop offset="0.5" style="stop-color:white" />
<stop offset="1" style="stop-color:green" />
</linearGradient>

<radialGradient id="grad2"

gradientUnits="userSpaceOnUse"
cx="130" cy="270" r="100" fx="70" fy="270">
<stop offset="0" style="stop-color:blue" />
<stop offset="0.5" style="stop-color:white" />
<stop offset="1" style="stop-color:green" />
</r