PDF de programación - Vocabularios XML y Transformación de documentos

Imágen de pdf Vocabularios XML y Transformación de documentos

Vocabularios XML y Transformación de documentosgráfica de visualizaciones

Publicado el 29 de Mayo del 2018
146 visualizaciones desde el 29 de Mayo del 2018
1,0 MB
68 paginas
Creado hace 13a (23/07/2006)
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

HTML

1

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

World Wide Web
HTML, SGML, XML
Vocabulario
Meta-vocabulario

SGML

XML

Años
70

1990

1996

1999

HTML

XHTML

2

Proceso de Estandarización
¿Dónde está tu tecnología
favorita?

Éxito

(Diversificación)

Idea brillante

Adopción
del estándar
(limitaciones)

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.

Primeros
prototipos

Necesidad
de estándar

Especificación

(comité)

Internacionales

ISO, W3C, IETF, ECMA, etc.

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

3

Accesibilidad

Editores WYSIWYG

Ejemplo: Utilizar Word para generar HTML

4

Editores WYSIWYG

Código generado por el WORD

Código escrito directamente
Código escrito directamente

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

5

Nosotros codificaremos a
pelo!!

Cabecera

Cuerpo

Lista

Enlaces

Detalles de
presentación

Ejemplo de HTML

Página visualizada

AlCapone.html

<html>
<head>
<title>Pizzeria Al Capone</title>
</head>
<body bgcolor="blue" text="yellow"

link="red" vlink="white">

<h1>Pizzería Al Capone</h1>
<p>Lista de enlaces</p>
<ul>
<li><a href="Pizzas.html">

Tipos de Pizzas</a></li>

<li><a href="http://www.mafia.it">

Patrocinadores</a></li>

<li><a href="#Contacto">Contacto</a></li>
<ul>

<h2><a name="Contacto">Contacto</a></h2>
<p><font color="red">Dirección:</font>

C/ Génova Nº 3, Oviedo, España</p>

<p><font color="red">Teléfono:</font>

985203040</p>

</body>
</html>

6

Estructura de documentos
HTML

Un documento HTML tiene el formato

DTD

Cabecera

Cuerpo

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

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

<html>
<head>
. . .
</head>
<body>
. . .
</body>
</html>

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

Formato de documentos
HTML

Un elemento está formado por:

Una etiqueta inicial (nombre entre signos < y > ): <etiqueta>
La etiqueta inicial puede contener atributos: <etiqueta atributo=“valor”>
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

<body bgcolor=“blue” text=“white”> <h1>Hola</h1> . . . </body>

En caso de un elemento vacío puede usarse la sintaxis:<etiqueta/>

Elemento vacío

<img src=“cara.gif” width=“100” height=“80” />

Aunque en HTML pueden no incluirse las etiquetas finales de algunos

elementos

¡En XHTML son obligatorias!

7

Cabecera HTML

En la cabecera se pueden incluir los elementos
<title> especifica el título del documento
<meta> especifica meta-información. Dos modos:
– Atributo name

<meta name=“Author” content=“Jose Granda”>

Podemos usar nuestros valores

<meta name=“ColorFavorito” content=“Rojo”>

Pueden incluirse palabras clave que ayudan a los buscadores

<meta name=“Keywords” content=“Pizzas, Restaurante”>

y descripciones

<meta name=“Description” content=“Páginas de una pizzería...”>

– Atributo http-equiv: Solicita al servidor que incluya información en la

cabecera de envío

<meta http-equiv=“Content-language” Content=“en”>
<meta http-equiv=“Refresh” Content=“2,http://www.mafia.it”>
<meta http-equiv="Content-type" content="text/html; charset="iso-8859-1">

Cabecera HTML
Otros elementos de la cabecera
<link> especifica relaciones entre documentos

Muchas opciones dependen del soporte ofrecido por
el visualizador

<link rel=“INDEX” href=“indice.html”>
<link rel=“ALTERNATE” media=“PRINT”

href=“versionImpresa.ps”>

Pueden especificarse hojas de estilo (se verán más adelante)

<link rel=“stylesheet” href=“estilo.css”>

<style> especifica estilo del documento (se verá más adelante)

<style type=“text/css”>
body { background: blue; color: yellow }
</style>

8

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

<pre>

void main() {

return (“Hola”);

}

</pre>

Control de versiones

<p>El plan de estudios es del año <del>1992</del><ins>2002</ins></p>

HTML: Listas

Listas no ordenadas <ul> (unordered-lists)
Listas ordenadas <ol> (ordered-lists)
Items de listas <li> (list-item)

• Primer valor
• Segundo valor

<ul>
<li>Primer valor</li>
<li>Segundo
valor</li>
Listas de definiciones <dl> (definition-list)
</ul>
Término de definición <dt> (definition-term)
Descripción de definición <dd> (definition-description)

<ol>
<li>Primer valor</li>
<li>Segundo
valor</li>
</ol>

1. Primer valor
2. Segundo valor

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>

HTML

Hypertext markup
Language

XML

eXtensible Markup
Language

9

HTML: Enlaces

<p>Lista de enlaces</p>
<ul>
<li><a href="Pizzas.html">Tipos de Pizzas</a></li>

<li><a href="http://www.mafia.it">Patrocinadores</a></li>

<li><a href="#Contacto">Contacto</a></li>
<ul>

Lista de enlaces
• Tipos de pizzas
• Patrocinadores
• Contacto

Dirección relativa

Dirección absoluta

Dirección interna

pizzas.html

http://www.mafia.it

#contacto

<a name=“contacto>Información de contacto</a>

. . .

HTML: Imágenes

<img src=“images/fotoPizza.gif”

width=“500” height=“500” alt=“Foto de una pizza”>

Incluir dimensiones permite

al visualizador reservar espacio

El texto alternativo es conveniente incluirlo

para visualizadores que no puedan mostrar imágenes

También puede usarse

<object data=“images/fotoPizza.gif”

width=“500” height=“500” type=“image/gif”>

Foto de una pizza
</object>

10

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

<font size=2 color = “red”> Texto rojo grande</font>

Líneas horizontales <hr>

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

C/ Génova Nº 3, Oviedo, España</p>

<p><span class="item">Teléfono:</span>

985203040</p>

</div>

lógico

Son útiles para trabajar con hojas de estilos

<div class=“Datos”>
<p><span class="item">Dirección:</span>

HTML: Tablas

<table>
<caption>Pizzas disponibles</caption>
<tr><th>Nombre</th><th>Ingredientes</th><th>Precio</th></tr>
<tr><td>Barbacoa</td><td>Mozzarella, Bacon</td><td>8 &euro;</td></tr>
<tr><td>Hawaiana</td><td>Tomate, Piña, Queso</td><td>7&euro;</td></tr>
<tr><td>4 quesos</td><td>Tomate, Mezcla 4 quesos</td><td>7 &euro;</td></tr>
</table>

Nombre

Barbacoa

Hawaiana

4 Quesos

Pizzas Disponibles

Ingredientes

Mozzarella, Bacon

Tomate, Piña, Queso

Tomate, Mezcla 4 quesos

Precio

8€

7€

7€

11

Otras Características
de HTML

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

El código se
ejecuta en la
máquina cliente
(visualizador)

...
<applet code=“miApplet.class” width=“500” height=“500” >
Aquí venía un applet que saludaba
</applet>
...

Ventaja: Liberar al servidor de ejecutar tareas
Desventaja: Seguridad?

También puede usarse

<object codetype=“application/java”

classid=“MiApplet.class” width=“500” height=“500”>

Aquí venía un applet que saludaba

</object>

NOTA: Object es más general y se adaptará a otros usos en el futuro

12

HTML: Mapas de imágenes

<object data="dibujo.gif"

width="250" height="250"
type="image/gif" usemap="#mapa1">

<map name="mapa1">
Barra de navegación
<area href="WWW.html" shape="rect" coords="0,0,250,125" alt="WWW">
<area href="XML.html" shape="rect" coords="0,125,250,250" alt="XML">
</map>
</object>

HTML: Marcos

<html>
<head>
<title>Ejemplo con marcos</title>
</head>
<frameset rows="10%,*">
<frame src="superior.html">
<frameset cols="40%,60%">
<frame src=”Indice.html">
<frame name=“Principal” src="Pizzas.html">

Se puede asignar un nombre
  • Links de descarga
http://lwp-l.com/pdf11399

Comentarios de: Vocabularios XML y Transformación de documentos (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad