Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 2010

1,672 views

Published on

HTML5

  • Be the first to comment

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

×