Post on 18-Dec-2014
description
Andrés KarpIntroducción a HTML5 y la Web Semán:ca
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Indice
‐ Lenguaje‐ Historia‐ HTML5‐ Semán:ca‐ Novedades‐ Ejemplos‐ Enlaces
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.
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.
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
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.
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.
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ Web 2.0 y la “divitis”
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Semán:ca
‐ Web 3.0 dotar de sentido el contenido
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.
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
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
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.
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DIALOG
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DIALOG
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...
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > FIGURE
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > FIGURE
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
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > VIDEO y AUDIO
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > VIDEO y AUDIO
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.
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DATALIST
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > DATALIST
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.
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Ese cuadradito solo????
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
Novedades
Elementos Nuevos > CANVAS
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
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
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
Andrés Karp
Introducción a HTML5 y la Web Semán:ca
MUCHAS GRACIAS!!!!
Andrés Karptwitter.com/andreskarp
www.andreskarp.es