1 / 22

HTML5

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 XHTML 1: estándar actual, pero sin continuidad Dos formas de codificar HTML5: h tml xml. Objetivos.

seth
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Lluís CodinaUPF. Seminario DigiDocNov. 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

  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

  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 (cloudcomputing) • En resumen: frenar un poco el amor del W3C por complicarnos la vida

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

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

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

  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

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

  10. Ejemplo de estructura de página HTML5

  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

  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

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

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

  15. Enlaces • media • hreflang • rel

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

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

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

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

  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

  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

  22. Fuentes • HTML5 Doctorhtml5doctor.com • W3C HTMLw3.org/TR/html-markup • W3C HTML5dev.w3.org/html5/spec/Overview.html • W3C differencesfrom HTML4w3.org/TR/html5-diff • WHATWGwww.whatwg.org/html5 • Wikipediaes.wikipedia.org/wiki/HTML_5 • W3 Schoolswww.w3schools.com/html5/html5_reference.asp • ThinkEPI > J. Franganillohttp://www.thinkepi.net/html5-nuevo-estandar-basico-del-web Sitio del autor:www.lluiscodina.com

More Related