HTML5

1. HTML5
Lluís Codina
UPF. Seminario DigiDoc
Nov. 2010

2. HTML v XHTML
• HTML5: futuro estándar que unifica HTML y XHTML, pero…
• Aún en desarrollo
• Dos versiones: W3C y WHATWG
• XHTML 1: estándar actual, pero sin continuidad
• Dos formas de codificar HTML5:
• html
• xml
2

3. Objetivos
• Evitar código innecesariamente complicado
• Frenar la versión 2 de xhtml que rompía con la compatibilidad
descendente
• Proporcionar flexibilidad a la codificación
• Poner las cosas más fáciles a:
• Los fabricantes de navegadores
• Los fabricantes de editores de páginas
• Los autores de páginas
3

4. Filosofía
• Racionalizar y flexibilizar
• Aportar una nueva estructura de página con mayor valor
semántico
• Evitar la dependencia de aplicaciones y plug-ins externos
(video, sonido)
• Facilitar el desarrollo de la Web 2.0 y la Web 3.0 (cloud
computing)
• En resumen: frenar un poco el amor del W3C por
complicarnos la vida
4

5. Ejemplos 1
• Actual declaración DOCTYPE, con metadatos de codificación
de caracteres:
5

6. Ejemplos 2
• Nueva declaración DOCTYPE, con metadatos de codificación
de caracteres:
6

7. Cambios
Cambios en:
1. Estructura de página
2. Atributos universales
3. Multimedialidad
Balance. Elementos y atributos:
1. Añadidos
2. Eliminados
3. Reinterpretados
7

8. Elementos de estructura
<header>
• Puede contener otros elementos y, en especial:
• Elemento <hgroup>
• Elemento <nav>
• Elementos <hn>
<nav>
• Navegación del sitio
<article>
• Componentes independientes de la página
<section>
• Organización de contenidos
<aside>
• Componentes complementarios
<footer>
• Pie de página 8

9. Ejemplo de estructura de página
(X)HTML
9

10. Ejemplo de estructura de página
HTML5
10

11. Elementos eliminados
• Todos los elementos y atributos de presentación > Alternativas
en CSS
• Elementos o atributos que nunca tuvieron mucho éxito:
• <frameset>
• <acronym>
• <applet>
• <dir>
• longdesc
• scheme
• rev
11

12. Elementos y atributos añadidos
• Elementos. En especial para:
• Estructuración de la página
• Multimedia
• Atributos. En especial para:
• Enlaces
• Listas
• En general: atributos universales
12

13. Elementos reinterpretados
• <dl>
• <cite>
• <address>
• <em>
• <strong>
• <small>
• <i>
• <b>
• <br>
• <hr>
13

14. Atributos universales
• class
• dir
• id
• lang
• style
• tabindex
• title
14

15. Enlaces
• media
• hreflang
• rel
15

16. Elementos para estructurar la página
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <hgroup>
• <dialog>
• <time>
• <figure>
• <figcaption>
• <details>
• <meter>
16

17. Estructura de índices
• HTML5 outlines
• Una base para crear índices de forma automática
• La base: sectioning content
17

18. Multimedia
• <embed>
• <svg>
• <canvas>
• <audio>
• <video>
18

19. Formularios
• search
• tel
• url
• email
• ...
19

20. Soporte
• Navegadores
• Incompleto, pero avanza muy rápido
• La razón: es la apuesta de los fabricantes de navegadores
• Editores
• Dreamweaver
• Extensión para CS3 i CS4
• Soporte específico para CS5
• Código fuente
• TopStyle
• CoffeeCup
• Editores online
• Rendera
20

21. Conclusiones
• Una nueva gramática más lógica y consistente para el código
fuente
• Mayores opciones para la estructuración inteligente de
páginas
• Un nuevo concepto de calidad en código fuente
• Una nueva oportunidad para la Web Semántica
21

22. Fuentes
• HTML5 Doctor
html5doctor.com
• W3C HTML
w3.org/TR/html-markup
• W3C HTML5
dev.w3.org/html5/spec/Overview.html
• W3C differences from HTML4
w3.org/TR/html5-diff
• WHATWG
www.whatwg.org/html5
• Wikipedia
es.wikipedia.org/wiki/HTML_5
• W3 Schools
www.w3schools.com/html5/html5_reference.asp
• ThinkEPI > J. Franganillo
http://www.thinkepi.net/html5-nuevo-estandar-basico-del-web
Sitio del autor:
www.lluiscodina.com
22