presentacion html5 adwa
DESCRIPTION
Introducción a HTML5 y la web semántica por Andrés KarpTRANSCRIPT
![Page 1: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/1.jpg)
Andrés KarpIntroducción a HTML5 y la Web Semán:ca
![Page 2: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/2.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Indice
‐ Lenguaje‐ Historia‐ HTML5‐ Semán:ca‐ Novedades‐ Ejemplos‐ Enlaces
![Page 3: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/3.jpg)
Andrés Karp
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.
![Page 4: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/4.jpg)
Andrés Karp
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.
![Page 5: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/5.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Historia de HTML
0
1
1991 1995 1997 1998 1999 2000 2001 2008
Nace HTML
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.1
XHTML 1
XHTML 1.1
HTML5
![Page 6: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/6.jpg)
Andrés Karp
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.
![Page 7: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/7.jpg)
Andrés Karp
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.
![Page 8: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/8.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ Web 2.0 y la “divitis”
![Page 9: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/9.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ Web 3.0 dotar de sentido el contenido
![Page 10: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/10.jpg)
Andrés Karp
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.
![Page 11: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/11.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Eliminados
- acronym- applet- basefont- big- center- dir- font- frame
- frameset- isindex- noframes- noscript (soportada x XHTML)
- s- strike- tt- u
![Page 12: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/12.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Atributos Eliminados
- rev- charset- target- nohref- profile- version- name- scheme- archive- classid
- codetype- declare- standby- valuetype- summary- header- axis- abbr
![Page 13: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/13.jpg)
Andrés Karp
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.
![Page 14: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/14.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DIALOG
![Page 15: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/15.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DIALOG
![Page 16: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/16.jpg)
Andrés Karp
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...
![Page 17: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/17.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > FIGURE
![Page 18: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/18.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > FIGURE
![Page 19: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/19.jpg)
Andrés Karp
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 y Video
Sirven para colocar contenido multimedia en nuestras páginas
![Page 20: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/20.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > VIDEO y AUDIO
![Page 21: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/21.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > VIDEO y AUDIO
![Page 22: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/22.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos
- Details Permite marcar un bloque de texto como “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.
![Page 23: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/23.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DATALIST
![Page 24: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/24.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DATALIST
![Page 25: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/25.jpg)
Andrés Karp
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.
![Page 26: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/26.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
![Page 27: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/27.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
![Page 28: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/28.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Ese cuadradito solo????
![Page 29: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/29.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
![Page 30: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/30.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
![Page 31: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/31.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Enlaces
HTML5 > Enlaces
http://www.w3schools.com/tags/html5.aspToda 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#contentsEspecificaciones de HTML5
![Page 32: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/32.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Enlaces
HTML5 > Enlaces
http://www.youtube.com/html5La página de Youtube en HTML5
http://ernestdelgado.com/public-tests/gifoncanvas/Animación mediante CANVAS
http://dev.w3.org/html5/markup/spec.htmlDarft 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
![Page 33: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/33.jpg)
Andrés Karp
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
![Page 34: Presentacion Html5 Adwa](https://reader033.vdocuments.pub/reader033/viewer/2022051514/5495020cac7959182e8b4cf1/html5/thumbnails/34.jpg)
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
MUCHAS GRACIAS!!!!
Andrés Karptwitter.com/andreskarp
www.andreskarp.es