Aprenda HTML5 en 5 minutos
Páginas: 20 (4857 palabras)
Publicado: 25 de junio de 2015
¡Aprenda HTML5 en 5 minutos!
No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso acelerado para comprender con rapidez los fundamentos de la funcionalidad de HTML5, está en el lugar correcto.
Hablaremos del nuevo lienzo para dibujo y animación semántico de marcado, el soporte de audio y video, y como usar HTML5 con navegadores anteriores. Podría tomar unpoco más de cinco minutos, pero les prometo que trataré de hacerlo rápido. ¡No se vaya, vale la pena!
Marcado semántico y diseño de página
Hay una gran historia acerca de una universidad que, cuando construyó sus campus, no creo un solo sendero para caminar. Simplemente sembraron áreas de césped y esperaron.
Un año más tarde, el pasto se desgastó en donde la gente caminaba más frecuentemente. Asíque es en donde la universidad construyó las aceras.
¡Tiene todo el sentido! Las aceras estaban exactamente donde la gente andaba.
Los nuevos elementos semánticos del HTML5 se basaron en exactamente esa misma lógica (véase el W3C guía de diseño para "Pave the Cowpaths").
Los elementos semánticos describen su significado o propósito claramente al navegador y al desarrollador. Compárese con (porejemplo) la etiqueta
No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso acelerado para comprender con rapidez los fundamentos de la funcionalidad de HTML5, está en el lugar correcto.
Hablaremos del nuevo lienzo para dibujo y animación semántico de marcado, el soporte de audio y video, y como usar HTML5 con navegadores anteriores. Podría tomar unpoco más de cinco minutos, pero les prometo que trataré de hacerlo rápido. ¡No se vaya, vale la pena!
Marcado semántico y diseño de página
Hay una gran historia acerca de una universidad que, cuando construyó sus campus, no creo un solo sendero para caminar. Simplemente sembraron áreas de césped y esperaron.
Un año más tarde, el pasto se desgastó en donde la gente caminaba más frecuentemente. Asíque es en donde la universidad construyó las aceras.
¡Tiene todo el sentido! Las aceras estaban exactamente donde la gente andaba.
Los nuevos elementos semánticos del HTML5 se basaron en exactamente esa misma lógica (véase el W3C guía de diseño para "Pave the Cowpaths").
Los elementos semánticos describen su significado o propósito claramente al navegador y al desarrollador. Compárese con (porejemplo) la etiqueta
. La etiqueta
define una división o una sección de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno.
< div >
Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas
< div >
Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas
. Esto da más significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar elpropósito de ese marcado.
< div id ="header">
En HTML5 hay nuevos elementos semánticos enriquecidos que transmiten el propósito del elemento a ambos desarrolladores y navegadores.
< header >
El W3C obtuvo datos de miles de millones de páginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descartó div1, div2, etc. , tuvieron con unalista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas.
Aquí están algunos de los nuevos elementos semánticos en HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time
Debido a la riqueza semántica, probablemente pueda adivinar lo que la mayoría de estos elementos hacen.
Pero por si acaso, aquí va unavisualización:
Los Headers y footers resultan claros, mientras que nav crea una barra de menú o navegación. Puede utilizar sections y articles para agrupar su contenido. Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.
Este es un ejemplo sencillo de código que utiliza estos elementos.
1.
2.
3.
4.
5.
6.
7.
8.
9.Title
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27. 28.
29.
30.
31.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57. Este es el primer artículo. This is highlighted.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73....
< div id ="header">
En HTML5 hay nuevos elementos semánticos enriquecidos que transmiten el propósito del elemento a ambos desarrolladores y navegadores.
< header >
El W3C obtuvo datos de miles de millones de páginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descartó div1, div2, etc. , tuvieron con unalista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas.
Aquí están algunos de los nuevos elementos semánticos en HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time
Debido a la riqueza semántica, probablemente pueda adivinar lo que la mayoría de estos elementos hacen.
Pero por si acaso, aquí va unavisualización:
Los Headers y footers resultan claros, mientras que nav crea una barra de menú o navegación. Puede utilizar sections y articles para agrupar su contenido. Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.
Este es un ejemplo sencillo de código que utiliza estos elementos.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
Header in h1
24.
25.
Subheader in h2
26.
27. 28.
29.
30.
31.
44.
45.
46.
47.
48.
49.
50.
51.
Article #1
52.
53.
54.
55.
56.
57. Este es el primer artículo. This is highlighted.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
Article #2
68.
69.
70.
71.
72.
73....
Leer documento completo
Regístrate para leer el documento completo.