Vocabularios XML y
Transformación de documentos
XHTML, MathML, SVG, SMIL, X3D, WML,
VoiceXML
XSL, XSLT, XPath, XSL-FO
Jose Emilio Labra Gayo
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
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 €</td></tr>
<tr><td>Hawaiana</td><td>Tomate, Piña, Queso</td><td>7€</td></tr>
<tr><td>4 quesos</td><td>Tomate, Mezcla 4 quesos</td><td>7 €</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 p
Crear cuenta
Comentarios de: Vocabularios XML y Transformación de documentos (0)
No hay comentarios