HTML5Lluís CodinaUPF. Seminario DigiDocNov. 2010
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
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
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
Ejemplos 1• Actual declaración DOCTYPE, con metadatos de codificación
de caracteres:
5
Ejemplos 2• Nueva declaración DOCTYPE, con metadatos de codificación
de caracteres:
6
CambiosCambios en:1. Estructura de página2. Atributos universales3. Multimedialidad
Balance. Elementos y atributos:4. Añadidos5. Eliminados6. Reinterpretados
7
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
Ejemplo de estructura de página (X)HTML
9
Ejemplo de estructura de página HTML5
10
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
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
Elementos reinterpretados• <dl>• <cite>• <address>• <em>• <strong>• <small>• <i>• <b>• <br>• <hr>
13
Atributos universales• class• dir• id• lang• style• tabindex• title
14
Enlaces• media• hreflang• rel
15
Elementos para estructurar la página
• <header>• <nav>• <section>• <article>• <aside>• <footer>• <hgroup>• <dialog>• <time>• <figure>• <figcaption>• <details>• <meter>
16
Estructura de índices• HTML5 outlines• Una base para crear índices de forma automática• La base: sectioning content
17
Multimedia• <embed>• <svg>• <canvas>• <audio>• <video>
18
Formularios• search• tel• url• email• ...
19
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
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
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