XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf ·...

57
XML: HTML y XHTML Sergio Luján Mora [email protected] XML-03

Transcript of XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf ·...

Page 1: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

XML: HTML y XHTML

Sergio Luján Mora

[email protected]

XML-03

Page 2: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Vídeo de esta presentación

Puedes ver esta presentación en vídeo:

http://www.youtube.com/watch?v=EDTgmwVNGjs

Page 3: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 4: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 5: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 6: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

XHTML es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web.

Page 7: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 8: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 9: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

XHTML 1.0

XML

Page 10: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 11: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 12: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 13: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 14: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 15: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 16: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 17: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

XHTML es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. En su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML.

Page 18: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

XHTML incorpora a las páginas web el rigor de XML, lo cual se traduce en un mejor procesamiento, un mantenimiento más sencillo y es el primer paso hacia la llamada web semántica.

Page 19: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 20: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 21: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 22: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 23: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

XHTML Modular

XHTML Basic XHTML 1.1

XHTML Abstract Modules

XHTML Print

XHTML 2.0

XHTML 1.0

Page 24: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

2004 Apple

Mozilla Foundation Opera Software

Page 25: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Web Hypertext Application Technology Working Group

Page 26: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

WHATWG

Page 27: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

2006

Page 28: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

2007

Page 29: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 30: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 31: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 32: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 33: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 34: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Diferencias con XHTML

• Versiones de HTML 4.01:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Page 35: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Diferencias con XHTML

• Versiones de XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Page 36: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 37: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml”>

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv="content-type"

content="text/html;charset=utf-8" />

</head>

<body>

<p>… Your HTML content here …</p>

</body>

</html>

Page 38: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml”>

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv="content-type"

content="text/html;charset=ISO-8859-1" />

</head>

<body>

<p>… Your HTML content here …</p>

</body>

</html>

Page 39: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 40: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Diferencias HTML - XHTML

Page 41: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 42: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

1. Los documentos tienen que estar bien formados

– Incorrecto: elementos superpuestos.

<p>aquí hay un <b>texto en

negrita</p></b>

– Correcto: elementos anidados.

<p>aquí hay un <b>texto en

negrita</b></p>

Page 43: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

2. Los elementos y atributos tienen que estar en minúsculas

– Incorrecto: mezcla de mayúsculas y minúsculas.

<table BORDER="0"><TR ALIGN="LEFT">

– Correcto: todo en minúsculas.

<table border="0"><tr align="left">

Page 44: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

3. Los elementos vacíos llevan etiqueta de cierre

– Incorrecto: elementos vacíos sin etiqueta de cierre.

<br><hr>

– Correcto: elementos vacíos con etiqueta de cierre.

<br></br><hr></hr>

o

<br/><hr/>

Page 45: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

4. Los elementos no vacíos necesitan la etiqueta de cierre

– Incorrecto: elementos sin etiqueta de cierre.

<p>Esto es un párrafo.<p>Esto es

otro párrafo.

– Correcto: elementos con etiqueta de cierre.

<p>Esto es un párrafo.</p><p>Esto es

otro párrafo.</p>

Page 46: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

5. Los valores de los atributos tienen que llevar siempre comillas

– Incorrecto: valores de atributos sin comillas.

<table rows=3>

– Correcto: valores de atributos entre comillas.

<table rows="3">

<table rows='3'>

Page 47: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

6. La minimización de atributos no es posible

– Incorrecto: atributo minimizado. <dl compact>

<option value="1" selected>

<input type="radio" checked>

– Correcto: atributo no minimizado. <dl compact="compact">

<option value="1" selected="selected">

<input type="radio" checked="checked">

Page 48: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

7. Manejo de espacios en blanco en los atributos

– Espacios en blanco al principio y al final: se eliminan

– Uno o más espacios en blanco (incluyendo saltos de línea) se traducen en un único espacio en blanco entre palabras

Page 49: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

8. Empleo de scripts (<script>) y estilos (<style>)

- Interpretación de < y & - <![CDATA[

... contenido de script ...

]]>

- Usar ficheros separados

Page 50: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

9. Exclusiones de SGML

- Elementos que no pueden ser contenidos en otros elementos

a: a

pre: img, object, big, small, sub, sup

button: input, select, textarea, label,

button, form, fieldset, iframe isindex

label: label

form: form

Page 51: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

10. Solo el atributo id actúa como identificador

– Incorrecto: no es un atributo identificador.

<a name="algo">

– Correcto: id es un atributo ID.

<a id="algo">

Page 52: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

11. Atributos con conjunto de valores predefinidos

– Incorrecto: mezcla de mayúsculas y minúsculas.

<tr align="LEFT">

<input type="TEXT" name="algo">

– Correcto: todo en minúsculas.

<tr align="left">

<input type="text" name="algo">

Page 53: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

12. Referencias de entidad como valores hexadecimales

– Incorrecto: valores de atributos sin comillas.

&#Xnn;

&#xnn;

– Correcto: sólo en minúsculas.

&#xnn;

Page 54: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Diferencias HTML - XHTML

Page 55: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Más información:

http://accesibilidadweb.dlsi.ua.es/

http://desarrolloweb.dlsi.ua.es/

[email protected]

Page 56: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como
Page 57: XML: XML y XHTML - RUA: Principalrua.ua.es/dspace/bitstream/10045/19505/1/XML-3-XML-XHTML.pdf · 2016-04-25 · XHTML es el lenguaje de marcado pensado para sustituir a HTML como

Créditos de fotografías e imágenes: http://www.sxc.hu/photo/1238327 http://www.w3.org/Consortium/Legal/logo-usage-20000308 http://dev.xguru.net/html5/src/html5timeline.png http://www.sxc.hu/photo/1337950 http://www.w3.org/html/logo/ http://www.sxc.hu/photo/1008265 http://www.sxc.hu/photo/614056 http://www.sxc.hu/photo/1287371 http://es.wikipedia.org/wiki/Archivo:Etiquetas_en_HTML.png