html5 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5 PowerPoint Presentation
Download Presentation
HTML5

Loading in 2 Seconds...

play fullscreen
1 / 22
holt

HTML5 - PowerPoint PPT Presentation

253 Views
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. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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