Introducción a HTML5 y la web semántica por Andrés Karp

1. Introducción a HTML5 y la Web Semán:ca
Andrés Karp

2. Introducción a HTML5 y la Web Semán:ca
Indice
‐ Lenguaje
‐ Historia
‐ HTML5
‐ Semán:ca
‐ Novedades
‐ Ejemplos
‐ Enlaces
Andrés Karp

3. Introducción a HTML5 y la Web Semán:ca
Lenguaje de Markup
‐ Nos permite dotar de estructura a los documentos de
texto.
‐SGML(Standard Generalized Markup Language) es el
padre del Markup.
‐ HTML se pensó como un lenguaje sencillo.
Andrés Karp

4. Introducción a HTML5 y la Web Semán:ca
Historia de HTML
‐ A medida que la web avanza el HTML se va quedando
corto.
‐ Las diferentes versiones de HTML van agregando
elementos para dar formato al contenido ej: FONT :P
‐ Guerra Nestcape Vs Internet Explorer 4. Como solución
nace XHTML y se de:ene así el desarrollo de HTML.
Andrés Karp

5. Introducción a HTML5 y la Web Semán:ca
Historia de HTML
1
HTML 2.0 HTML 4.0 XHTML 1 HTML5
Nace HTML 3.2 HTML 4.1 XHTML 1.1
HTML
0
1991 1995 1997 1998 1999 2000 2001 2008
Andrés Karp

6. Introducción a HTML5 y la Web Semán:ca
HTML5
‐ Punto de inflexión en el desarrollo de nuestro lenguaje.
‐ El HTML pasa a ser un par de SGML.
‐ A par:r de ahora HTML define su propia serialización.
‐ XHTML y HTML se desarrollan en paralelo.
Andrés Karp

7. Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ La Web 1.0 se basó en el formato de sus contenidos.
‐ La Web 2.0 se basa en la experiencia del usuario.
Separa presentación de contenidos.
‐ La Web 3.0 buscar dotar de sen:do y significado a los
contenidos.
Andrés Karp

8. Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ Web 2.0 y la “divitis”
Andrés Karp

9. Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ Web 3.0 dotar de sentido el contenido
Andrés Karp

10. Introducción a HTML5 y la Web Semán:ca
Novedades
‐ HTML5 es mucho más estricto.
‐ Cambios en el DOM.
‐ Incluye una gran lista de cambios.
‐ Un gran cambio es que dentro de un tag “DIV” no se
pueden mezclar elementos inline y block.
Andrés Karp

11. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Eliminados
- acronym - frameset
- applet - isindex
- basefont - noframes
- big - noscript (soportada x XHTML)
- center -s
- dir - strike
- font - tt
- frame -u
Andrés Karp

12. Introducción a HTML5 y la Web Semán:ca
Novedades
Atributos Eliminados
- rev - codetype
- charset - declare
- target - standby
- nohref - valuetype
- profile - summary
- version - header
- name - axis
- scheme - abbr
- archive
- classid
Andrés Karp

13. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos
- Article Esta pensado para marcar un bloque como un
artículo.
- Aside Es un contenido que no tiene que ver directamente
con el contenido del sitio. ej: banners de publicidad
- Dialog Marca un contenido como una conversación.
Andrés Karp

14. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DIALOG
Andrés Karp

15. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DIALOG
Andrés Karp

16. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos
- Figure Define un contenido como una “figura” de esa forma
podemos tener contenido embebido.
- Footer Para contenidos que suelen ir en el pie de página tales
como el copyright, información de contacto, etc...
- Header Para contenidos que suelen ir en la cabecera, tales
como logotipo de la empresa, etc...
Andrés Karp

17. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > FIGURE
Andrés Karp

18. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > FIGURE
Andrés Karp

19. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos
- Nav Define la sección de la página que contiene el menú
o links de navegación.
- Section Es para marcar un bloque de texto como una
“sección”, es un elemento genérico.
- Audio Sirven para colocar contenido multimedia en
y Video nuestras páginas
Andrés Karp

20. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > VIDEO y AUDIO
Andrés Karp

21. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > VIDEO y AUDIO
Andrés Karp

22. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos
Permite marcar un bloque de texto como
- Details “información adicional”, sería el sustituto del alt o el
title, una especie de tooltip.
- Datagrid Muy útil para mostrar información tabulada, es una
especie de tabla, muy común en la programación de
Actionscript.
- Datalist Se utiliza conjuntamente con el atributo de los inputs
para crear combos.
Andrés Karp

23. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DATALIST
Andrés Karp

24. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DATALIST
Andrés Karp

25. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos
- Canvas Se usa para mostrar gráficos en tiempo real, por
ejemplo un gráfico de EXCEL o un dibujo.
Andrés Karp

26. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp

27. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp

28. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Ese cuadradito solo????
Andrés Karp

29. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp

30. Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp

31. Introducción a HTML5 y la Web Semán:ca
Enlaces
HTML5 > Enlaces
http://www.w3schools.com/tags/html5.asp
Toda la lista de TAGS
http://christopherj.us/test/
Validar formularios en el navegador
http://html5gallery.com/
Galería de Webs hechas en HTML5
http://www.w3.org/TR/html5/spec.html#contents
Especificaciones de HTML5
Andrés Karp

32. Introducción a HTML5 y la Web Semán:ca
Enlaces
HTML5 > Enlaces
http://www.youtube.com/html5
La página de Youtube en HTML5
http://ernestdelgado.com/public-tests/gifoncanvas/
Animación mediante CANVAS
http://dev.w3.org/html5/markup/spec.html
Darft más actual
http://a.deveria.com/caniuse/
Por está web podemos saber con que versiones de los navegadores se pueden usar propiedades de
CSS3, HTML5, SVG
Andrés Karp

33. Introducción a HTML5 y la Web Semán:ca
Enlaces
HTML5 > Enlaces
http://html5tutorial.net/
Tutorial del uso de Canvas
http://www.mikechambers.com/blog/2008/05/27/poc-
implementing-html-5-video-element-using-javascript-and-flash/
Video en HTML5 usando Javascript y Flash
http://www.anieto2k.com/2007/06/16/las-principales-diferencias-
entre-html5-y-html4/
Muy Buen artículo de Andrés Nieto sobre las diferencias de HTML4 y el HTML5
Andrés Karp

34. Introducción a HTML5 y la Web Semán:ca
MUCHAS GRACIAS!!!!
Andrés Karp
twitter.com/andreskarp
www.andreskarp.es
Andrés Karp