HTML5 ADAPTADO POR: YIM ISAIAS APESTEGUI FLORENTINO

Transcripción

1 HTML5

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 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 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 Ejemplos 1 Actual declaración DOCTYPE, con metadatos de codificación de caracteres: 5

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

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 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 Ejemplo de estructura de página (X)HTML 9

10 Ejemplo de estructura de página HTML5 10

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 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 Elementos reinterpretados <dl> <cite> <address> <em> <strong> <small> <i> <b> <br> <hr> 13

14 Atributos universales class dir id lang style tabindex title 14

15 Enlaces media hreflang rel 15

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

17 Multimedia <embed> <svg> <canvas> <audio> <video> 17

18 Formularios search tel url

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 19

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 Hay una proceso de transición de html4 a html5, pero la tendencia actual es html5. La mayoría de los desarrolladores ya están implementando en html5. La mayoría de los navegadores ya interpretan html5. 20

21 Podemos usar el Block de Notas Guardamos el archivo con el nombre "index.html" y lo visualizamos en el navegador, (doble click en el archivo html que acabamos de crear), si todo es correcto el navegador muestra una pagina en blanco con una sola diferencia. El titulo de la pagina "Mi primera pagina web" que lo hemos colocado entre las directivas <title> aparece en barra de titulo del navegador 21

22 22

23 Antes en html4 23

24 Ahora en html5 24

25 Párrafos 25

26 Podemos seguir con Notepad. 26

27 Pero tenemos a Dreamweaver CC 27

28 28

29 29

30 30

31 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 Wikipedia es.wikipedia.org/wiki/html_5 W3 Schools ThinkEPI > J. Franganillo Sitio del autor: 31