Presentacion Html5 Adwa

2,223 views
2,169 views

Published on

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

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,223
On SlideShare
0
From Embeds
0
Number of Embeds
288
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Presentacion Html5 Adwa

  1. 1. Introducción a HTML5 y la Web Semán:ca Andrés Karp
  2. 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. 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. 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. 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. 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. 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. 8. Introducción a HTML5 y la Web Semán:ca Semán:ca ‐ Web 2.0 y la “divitis” Andrés Karp
  9. 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. 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. 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. 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. 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. 14. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > DIALOG Andrés Karp
  15. 15. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > DIALOG Andrés Karp
  16. 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. 17. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > FIGURE Andrés Karp
  18. 18. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > FIGURE Andrés Karp
  19. 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. 20. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > VIDEO y AUDIO Andrés Karp
  21. 21. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > VIDEO y AUDIO Andrés Karp
  22. 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. 23. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > DATALIST Andrés Karp
  24. 24. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > DATALIST Andrés Karp
  25. 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. 26. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > CANVAS Andrés Karp
  27. 27. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > CANVAS Andrés Karp
  28. 28. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > CANVAS Ese cuadradito solo???? Andrés Karp
  29. 29. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > CANVAS Andrés Karp
  30. 30. Introducción a HTML5 y la Web Semán:ca Novedades Elementos Nuevos > CANVAS Andrés Karp
  31. 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. 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. 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. 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

×