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