Html5

Embed Size (px)

Citation preview

Html5No 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 animacin semntico de marcado, el soporte de audio y video, y como usar HTML5 con navegadores anteriores. Podra tomar un poco ms de cinco minutos, pero les prometo que tratar de hacerlo rpido. No se vaya, vale la pena!Marcado semntico y diseo de pginaHay una gran historia acerca de una universidad que, cuando construy sus campus, no creo un solo sendero para caminar. Simplemente sembraron reas de csped y esperaron.Un ao ms tarde, el pasto se desgast en donde la gente caminaba ms 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 semnticos del HTML5 se basaron en exactamente esa misma lgica.Los elementos semnticos describen su significado o propsito claramente al navegador y al desarrollador. Comprese con (por ejemplo) la etiqueta . La etiqueta define una divisin o una seccin de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno.

Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas . Esto da ms significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propsito de ese marcado.

En HTML5 hay nuevos elementos semnticos enriquecidos que transmiten el propsito del elemento a ambos desarrolladores y navegadores.

El W3C obtuvo datos de miles de millones de pginas 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 una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas.Aqu estn algunos de los nuevos elementos semnticos en HTML5: article aside figcaption figure footer header hgroup mark nav section timeDebido a la riqueza semntica, probablemente pueda adivinar lo que la mayora de estos elementos hacen.Pero por si acaso, aqu va una visualizacin:

LosHeadersyfootersresultan claros, mientras quenavcrea una barra de men o navegacin. Puede utilizar sections y articles para agrupar su contenido. Por ltimo, el elementoasidepuede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.Este es un ejemplo sencillo de cdigo que utiliza estos elementos.1. 2. 3. 4. 5. Title6. 7. 8. 9. 10. 11. 12. Header in h113. Subheader in h214. 15. 16. 17.

  • 18.
  • Menu Option 119.
  • Menu Option 220.
  • Menu Option 321.

22. 23. 24. 25. 26. Article #127. 28. 29. Este es el primer artculo. This is highlighted.30. 31. 32. 33. 34. Article #235. 36. 37. Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc. 38. 39. 40. 41. 42. 43. Links44.

  • 45.
  • Link 146.
  • Link 247.
  • Link 348.

49. 50. 51. 54. Jennifer Marsman55. 56. 57. Footer - Copyright 201558. 59.