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