HTML5
Lluís Codina
UPF. Seminario DigiDoc
Nov. 2010
HTML v XHTML
• HTML5: futuro estándar que unifica HTML y XHTML, pero…
• Aún en desarrollo
• Dos versiones: W3C y WHATWG
• ...
Objetivos
• Evitar código innecesariamente complicado
• Frenar la versión 2 de xhtml que rompía con la compatibilidad
desc...
Filosofía
• Racionalizar y flexibilizar
• Aportar una nueva estructura de página con mayor valor
semántico
• Evitar la dep...
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
Cambios
Cambios en:
1. Estructura de página
2. Atributos universales
3. Multimedialidad
Balance. Elementos y atributos:
1....
Elementos de estructura
<header>
• Puede contener otros elementos y, en especial:
• Elemento <hgroup>
• Elemento <nav>
• E...
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 n...
Elementos y atributos añadidos
• Elementos. En especial para:
• Estructuración de la página
• Multimedia
• Atributos. En e...
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>...
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
• E...
Conclusiones
• Una nueva gramática más lógica y consistente para el código
fuente
• Mayores opciones para la estructuració...
Fuentes
• HTML5 Doctor
html5doctor.com
• W3C HTML
w3.org/TR/html-markup
• W3C HTML5
dev.w3.org/html5/spec/Overview.html
• ...
Upcoming SlideShare
Loading in …5
×

Html5 2010

1,596 views
1,530 views

Published on

HTML5

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,596
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
51
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html5 2010

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

×