Sesin 2

Etiquetas HTML5

Fundamentos de desarrollo web

ndice
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Introduccin HTML5 Estructura HTML5 Etiqueta HEADER Etiqueta NAV Etiqueta ARTICLE Etiqueta SECTION Etiqueta ASIDE Etiqueta HGGROUP Etiqueta FOOTER Compatibilidad con varios navegadores HTML5 Shiv Conclusin Link de referencia

 Introduccin:
En esta sesin veremos el uso de las nuevas etiquetas HTML5 (Header, Footer, Section, Article, Nav, Hggroup); asi mismo veremos la compatibilidad entre varios navegadores haciendo uso de la instruccin html5 shiv. Usaremos la Propiedad Display: Block para mostrar en bloque los datos y emplearemos reglas de clases en CSS para darle formato a las pginas web.

HTML5
El HTML5 (HyperText Markup Language, versin 5) es la quinta revisin del lenguaje de programacin bsico de la World Wide Web, el HTML. Esta nueva versin pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, as como redisear el cdigo actualizndolo a nuevas necesidades que demanda la web de hoy en da.

Comparacin de estructuras:

HTML4

HTML5

Estructura HTML5
Observe cmo sera la estructura HTML 5 de un sitio web, en este ejemplo de una pgina de 2 columnas.

Etiqueta HEADER
Se encarga de indicar a los navegadores que lo que contienen es la cabecera de la pgina y que dentro llevarn algn logotipo, el ttulo de la pgina o una descripcin de la misma.

http://www.littlecoogie.com/

continuacin.

http://www.littlecoogie.com/

Etiqueta NAV
La etiqueta <nav></nav> es donde las personas navegan a travs de las paginas, formada por enlaces a las zonas principales de la web, o por un men de navegacin.

http://www.littlecoogie.com/

continuacin.

http://www.littlecoogie.com/

10

Etiqueta ARTICLE
La etiqueta <article></article> especifica una distribucin de forma independiente del resto del sitio; con un auto-contenido incluido, que debe tener sentido por s mismo. Puede representar un artculo, ya sea un artculo de opinin, un entrada en un blog, un comentario en un foro, etc.

http://www.elladesign.com/

11

continuacin.

http://www.elladesign.com/

12

Etiqueta SECTION
La etiqueta <section></section> representa un agrupamiento de contenido con la misma temtica dentro de un documento o aplicacin

http://ousmane-ndiaye.com/

13

continuacin.

http://ousmane-ndiaye.com/ 14

Etiqueta ASIDE
La etiqueta aside indica que el contenido dentro de ella est relacionado el contenido principal de la pgina pero que no es parte de ella.

http://ousmane-ndiaye.com/

15

continuacin.
Son representadas mayormente como barras laterales o como inserciones, como publicidad, la biografa del autor, o en aplicaciones web, la informacin de perfil, etc.

16

Etiqueta Hggroup
La etiqueta <hgroup></hgroup> se ha creado para agrupar titulares(h1h6). En muchas ocasiones es habitual encontrarnos con el ttulo de la pgina web con una breve descripcin o definicin o lema de la pgina bajo l.

17

continuacin.
antes

despus

18

Etiqueta FOOTER
La etiqueta <footer></footer> representa el pie de un documento o seccin.

http://ousmane-ndiaye.com/

19

continuacin.
La informacin que se suele aadir en este bloque es el autor del documento, enlaces a contenido relacionado, informacin de copyright, avisos legales, etc.

http://ousmane-ndiaye.com/ 20

Compatibilidad con varios Navegadores

Ningn navegador es 100% compatible con todas las caractersticas de HTML5 y CSS3. Esta regla se mantiene an hoy y seguir por un tiempo, hasta que se estandaricen todas sus caractersticas. Claro que en este sentido encontraremos navegadores que presentan mayor compatibilidad que otro. Las versiones ms recientes de los navegadores ms populares del mercado soportan HTML5. Entre ellos: Internet Explorer 9 (muy mejorada en IE10), Firefox 9, Chrome 16, Safari 5.1 y Opera 11.60. Varios de estos navegadores cuentan con soporte para HTML5 en versiones anteriores, especialmente las surgidas entre 2010 y 2011. En el caso de IE, las versiones 6, 7 y 8 no tienen soporte para HTML5. El primero en dar compatibilidad en esta familia ha sido Internet Explorer 9, lanzado oficialmente en el ao 2011.

21

continuacin.

22

continuacin.
HTML5 Shiv:
IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es por esto que para que se visualicen correctamente estilizados en el mencionado navegador, es necesario crearlos mediante javascript agregando el siguiente cdigo en el head de tu sitio.

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

23

continuacin.

Internet Explorer

Mozilla Firefox

Google Chrome

Safari

Opera
24

Conclusin
El objetivo de esta sesin fue identificar y aplicar las nuevas etiquetas HTM5 usando las reglas de Clase, formato de texto, manejo de colores y realizando la verificacin de navegadores, al correcto maquetado de una pgina web. Al finalizar esta sesin podrs hacer uso de las nuevas etiquetas HTML5 y veras su aplicacin en los casos de estudio que desarrollaremos.

25

Las nuevas etiquetas HTML5 traen consigo nuevas novedades para mejorar y enriquecer el diseo de una pgina web

26

Links de referencia
http://www.w3schools.com/html/html5_intro.asp http://html5demos.com/ http://www.html5rocks.com/es/ http://html5test.com/ http://html5.org/

27