Aprenda HTML5 en 5 Minutos

Aprenda HTML5 en 5 minutos! Por Jennifer Marsman 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 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 pgina Hay 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 (vase el W3C gua de diseo para "Pave the Cowpaths"). Los elementos semnticos describen su significado o propsito claramente al navegador y al desarrollador. Comprese con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una divisin o una seccin 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>. Esto da ms significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propsito de ese marcado. < div id ="header"> En HTML5 hay nuevos elementos semnticos enriquecidos que transmiten el propsito del elemento a ambos desarrolladores y navegadores. < header > 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 time Debido a la riqueza semntica, probablemente pueda adivinar lo que la mayora de estos elementos hacen. Pero por si acaso, aqu va una visualizacin:
Los Headers y footers resultan claros, mientras que nav crea una barra de men o navegacin. 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 cdigo que utiliza estos elementos. 1. <!DOCTYPE html> 2. 3. <html> 4. 5. <head> 6. 7. 8. 9. 10. 11. <link href="css/html5reset.css" rel="stylesheet" /> <title>Title</title> <meta charset="utf-8" />
12. 13. 14. 15. </head> 16. 17. <body> 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. </nav> </ul> <li><a href="#">Menu Option 3</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 1</a></li> <ul> <nav> </header> </hgroup> <h2>Subheader in h2</h2> <h1>Header in h1</h1> <hgroup> <header> <link href="css/style.css" rel="stylesheet" />
44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. etc. 74. Este es el segundo artculo. Estos artculos pueden ser secciones del blog, <section> </header> <h1>Article #2</h1> <header> <article> </article> </section> Este es el primer artculo. This is <mark>highlighted</mark>. <section> </header> <h1>Article #1</h1> <header> <article> <section>
75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
107. 108. 109. 110. 111. 112. 113. 114. 115. 116.
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
117. </html> Quiero llamar a unos cuantos elementos nuevos ms en este cdigo Ha notado que el elemento hgroup que agrupo a mis encabezados h1 y h2? El elemento mark me permiti resaltar o marcar el texto importante. Finalmente, los elementos figure y figcaption especifican una figura en mi contenido (como una imagen, grfico, foto, un fragmento de cdigo, etc.) y me dejan asociar un pie con la firugra. As es como la pgina web se vera combinada con algo de CSS. (NOTA: Ped prestado el CSS de mi talentoso compaero Brandon Satrom y su TechEd talk, pero el efecto final menos que bello fes culpa ma).
Ahora, imagine esto en manos de alguien que sea realmente bueno en CSS (que no lo soy). El resultado es muy potente. El carcter descriptivo del HTML los hace sper fcil de manejar. Por ltimo, si usted est tratando de seguirlo en Visual Studio, pero se encuentra con lneas serpenteantes en todas partes que indican que VS no entiende los elementos HTML5,asegrese de que tiene Visual Studio 2010 SP1instalado. Luego, en el men de Visual Studio, vaya a Herramientas, Opciones. En la parte izquierda panel de navegacin, expanda el Editor de texto, HTML y, a continuacin, haga clic en Validacin. Desde el men desplegable seleccione HTML5. Esto le dar compatibilidad HTML5 IntelliSense. Fiu!
Para ir ms a profundidad en elementos semnticos, revise:

Cmo habilitar el soporte de estndar HTML5 La seccin de semntica de la especificacin W3C de HTML5 Adntrese en el captulo de semntica de HTML5 titulado " Qu significa todo esto? ". Dibujo en HTML5 usando el elemento Canvas Otro elemento novedoso en HTML5 es la etiqueta <canvas> Es exactamente a lo que suena, una superficie de dibujo en blanco. Necesita usar JavaScript para manipular y dibujar sobre el lienzo. Es posible que desee dar a su elemento canvas una id de atributo para que pueda tener acceso mediante programacin desde su cdigo JavaScript (o si est usando jQuery y es el nico lienzo en la pgina, usted puede tener acceso a el utilizando $('canvas') sin necesidad de ponerle nombre). Tambin puede (opcionalmente) especificar una altura y una anchura para el lienzo. Entre <canvas> y </canvas>, se puede especificar un texto para mostrar en los navegadores que no soportan el elemento canvas. Este es un ejemplo sencillo de cmo utilizar canvas para dibujar. (Estoy intentando dibujar labandera de Escocia. Por favor perdone las inexactitudes.)
1. <!DOCTYPE HTML> 2. 3. <html> 4. 5. <body> 6. 7. 8. 9. <script type="text/javascript"> <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. ctx.lineTo(0, 75); ctx.moveTo(125, 0); ctx.lineTo(125, 75); ctx.moveTo(0, 0); ctx.strokeStyle = "white"; ctx.lineWidth = "15"; ctx.beginPath(); // Draw white X ctx.fillRect(0, 0, 125, 75); ctx.fillStyle = '#0065BD'; // Draw blue rectangle var ctx = canvas.getContext('2d'); var canvas = document.getElementById('myCanvas');
42. 43. 44. 45. 46. 47. 48. 49. </body> 50. 51. </html> Esto es lo que el cdigo genera: </script> ctx.stroke();
Veamos ahora el cdigo. En primer lugar, voy a crear el lienzo y a darle una ID de "myCanvas". Si este cdigo fuera vistoo en un navegador que no soporta el elemento canvas HTML5, mostrara "Su navegador no soporta la etiqueta canvas" en lugar de dibujar la bandera. . Despus, tengo una secuencia de comandos. Recuerde, que la etiqueta canvas es slo un contenedor para grficos; debe usar JavaScript para dibujar y representar grficos sobre ella. En primer lugar, tomo una referencia al lienzo utilizando la ID "myCanvas" y, a continuacin, obtengo el contexto del lienzo que proporciona propiedades y mtodos para la elaboracin y manipulacin de la grfica sobre el lienzo. He especificado " 2d" para usar un contexto en dos dimensiones para dibujar en la pgina. A continuacin, dibujo el rectngulo azul. Uso fillStyle para especificar el color azul. UsofillRect para dibujar el rectngulo, especificando el tamao y la posicin. Al llamar fillRect(0, 0, 125, 75) significa: comenzando en la posicin (0, 0), la esquina superior izquierda, dibujar un rectngulo con ancho=125 alto=75 pxeles. Por ltimo, dibujo la X blanca sobre la bandera. En primer lugar solicito beginPath para iniciar el proceso pintar en una ruta. Especifico lineWidth (ancho de lnea) de 15 pxeles (utilizando el mtodo de adivinar y revisar para intentar diferentes valores hasta que se vea bien) y un strokeStyle de "blanco" para trazar la ruta del color blanco. A continuacin, trazo la ruta utilizando moveTo y lineTo . Estos mtodos posicionan el "cursor" para dibujar; la diferencia es que moveTo mueve el cursor sin trazar una lnea y lineTo dibuja una lnea mientras se desplaza. Empezar movindome a la posicin (0, 0), la esquina superior izquierda y, a continuacin, trazar una lnea a (125, 75), la esquina inferior derecha. Despus me muevo a la posicin (125, 0), la esquina superior derecha y, a continuacin, trazar una lnea a (0, 75), la esquina inferior derecha. Por ltimo, el mtodo stroke hace que estos trazos se vean. Comparacin rpida de Canvas vs SVG
Grficos vectoriales escalables (SVG) es un estndar para dibujar en la ventana del navegador. Con la liberacin de Canvas de HTML5, muchas personas se preguntan en qu difieren. En mi opinin, la mayor diferencia es que canvas utiliza el modo inmediato de representacin y SVG utiliza modo retenido de representacin. Esto significa que canvas hace directamente la representacin de los grficos en la pantalla. En mi cdigo anterior, una vez que la bandera se dibuja, el sistema lo olvida y no se conserva nada. Hacer un cambio requerir un redibujado completo. En comparacin, SVG conserva un modelo completo de los objetos que se han representado. Para efectuar un cambio, simplemente tiene que cambiar, por ejemplo, la posicin del rectngulo y el explorador determinara cmo volver a hacerla. Esto es menos trabajo para los desarrolladores, pero tambin resulta ms pesado para mantener un modelo. Vale la pena considerar la capacidad de formatear SVG mediante CSS adems de JavaScript. Un lienzo se puede manipular solamente a travs de Javascript. He aqu una resea de alto nivel de otras diferencias: CANVAS AB S T RACCI N Basado en pixeles (bitmap dinmico) S VG Basado en formas Varios elementos grficos que pasarn a formar parte del Modelo de objetos de Documento (DOM) Modificados a travs de scripts y CSS Interaccin con el Usuario es abstrada (rect, ruta) El rendimiento es mejor con menor nmero de objetos y/o una superficie ms amplia
E L E ME NT O S
nico elemento HTML Modificados solamente mediante script La Interaccin del Usuario es granular (x,y) El rendimiento es mejor con menor superficie y/o mayor nmero de objetos
CO NT RO L ADO R
>MO DE L O DE E VE NT O
RE NDIMIE NT O
Para una comparacin ms detallada, quiero dirigirlos hacia algunas de las sesiones (de donde extraje este fabuloso cuadro, con permiso):

Patrick Dengler's "Ideas sobre cundo usar SVG y cundo Canvas" Jatinder Mann's "Canvas HTML5 a profundidad" John Bristowe's "Una introduccin a Canvas HTML5"
Soporte de Audio y Video Una de las grandes caractersticas que es nueva en HTML5 es la capacidad de reproduccin de audio y videos. Antes de HTML5, necesitaba un plug-in como Silverlight o Flash para esta funcionalidad. En HTML5, puede incrustar audio y video utilizando las nuevas etiquetas <audio> and <video>. Desde una perspectiva de programacin, los elementos de audio y vdeo son muy sencillos de utilizar. (Les dar una explicacin ms a fondo de sus atributos ms abajo.) Los elementos de audio y vdeo tambin son soportados por todos los navegadores principales (las ltimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difcil es que se necesita codecs para reproducir audio y vdeo, y diferentes navegadores soportan diferentes codecs. (Para una magnfica explicacin sobre contenedores de video y codecs leahttp://diveintohtml5.net/video.html.) Afortunadamente, esto no es un obstculo. El soporte para audio y video se implement de manera brillante, donde no existe la posibilidad de tratar diferentes formatos de archivo (el navegador intentar cada uno y, a continuacin, pasar al siguiente si no puede reproducirlo). Como prctica recomendada, debe proporcionar mltiples fuentes de audio y video para contemplar diferentes navegadores. Tambin puede retroceder a Silverlight o Flash. Por ltimo, cualquier texto entre las etiquetas de apertura y cierre (como <audio> and </audio>) aparecer en los navegadores que no soporten el elemento de audio o video. Por ejemplo: 1. <audio controls="controls"> 2. 3. 4. 5. 6. 7. 8. 9. </audio> Con este cdigo, el navegador intentar primero reproducir el archivo laughter.mp3. Si no tiene los cdecs adecuados para reproducirlo, intentar a continuaci reproducir el archivo laughter.ogg. Si el elemento de audio no es reconocido por el navegador en absoluto, mostrar el texto "Su navegador no soporta el elemento audio" en donde debi estar el control audio. Una salvedad para audio y video: no incluye gestin de derechos digitales (DRM); tiene que implementar esto por s mismo como desarrollador. Vea este enlace del W3C que explica su opinin. (Si necesita usar contenido con DRM, tambin revise la documentacin Silverlight DRM, que podra resultar una solucin ms fcil.) Ahora, ahondemos en cada uno de estos nuevos elementos. Su navegador no soporta el elemento de audio. <source src="laughter.ogg" type="audio/ogg" /> <source src="laughter.mp3" type="audio/mp3" />
Audio En primer lugar, echemos un vistazo a <audio> con ms detalle. 1. <audio controls="controls"> 2. 3. 4. 5. 6. 7. 8. 9. </audio> Ya tuvimos ocasin de discutir el problema de de tratar cada una de las fuentes hasta que que encuentre una que se puede reproducir. Tenga en cuenta que existe un atributo controls. Esto le mostrar los controles de reproduccin de audio incluyendo un botn de reproduccin/pausa, el tiempo, un botn de silencio y los controles de volumen. En la mayora de las situaciones, es bueno mostrar controles de audio al usuario; no me gusta visitar un sitio web con sonido y a la imposibilidad de detenerlo, silenciarlo o bajar el volumen. No? As se ven los controles de audio en Internet Explorer: Su navegador no soporta el elemento de audio. <source src="laughter.ogg" type="audio/ogg" /> <source src="laughter.mp3" type="audio/mp3" />
Los controles se ven diferente en distintos navegadores. As se ven en Chrome (con una cancin sonando). El control volumen aparece cuando pasa el puntero por el cono de sonido en el extremo derecho.
Aqu estn los controles de Firefox (con una cancin en pausa). Al igual que Chrome, tambin tiene un control de volumen que aparece (no se muestra) al desplazar el puntero sobre el icono de sonido en el extremo derecho.
Otros atributos divertidos en el elemento de audio incluyen: PO S S IB L E VAL UE S autoplay
AT T RI B UT E AUT O PL AY
DE S CRIPT IO N Se inicia la reproduccin de
audio tan pronto como est listo Muestra los controles de reproduccin de audio en la pgina Hace que el audio se repita cada vez que termina Determina si se debe cargar el audio cuando se carga la pgina. El valor auto cargar el audio, metadata cargar slo metadatos asociados con el archivo de audio, y none evitar la precarga. (Este atributo ser ignorado si la reproduccin automtica est especificada)
CO NT RO L S LOOP
controls loop
PRE L O AD
auto, metadata, none
Especifica la direccin URL del archivo de audio a (algn URL) reproducir S RC Por lo que este cdigo muestra no slo mostrar controles de reproduccin de audio, sino que tambin iniciar la reproduccin de audio inmediatamente y lo repetir una y otra vez en un bucle. 1. <audio controls="controls"> 2. 3. 4. 5. 6. 7. 8. 9. </audio> Si le gustara jugar con el elemento <audio> > en su navegador hay un increble editor enhttp://w3schools.com que le permite editar algo de cdigo para ver que pasa. Tambin puede echar un vistazo al artculo cmo agregar un reproductor de audio HTML5 en su sitio. Video Veamos ahora el elemento <video> element. 1. <video width="320" height="240" controls="controls"> Su navegador no soporta el elemento de audio. <source src="laughter.ogg" type="audio/ogg" /> <source src="laughter.mp3" type="audio/mp3" />
2. 3. 4. 5. 6. 7. 8. 9. 10. 11. </video> Como hemos dicho anteriormente, el elemento de vdeo cuenta con el apoyo de mltiples fuentes, que intentar en orden y luego seguir con la siguiente opcin. Al igual que el audio, el video tiene un atributo controls. Aqu est una captura de pantalla de los controles de vdeo en Internet Explorer: Your browser does not support the video tag. <source src="movie.webm" type="video/webm" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" />
Otros atributos divertidos en el elemento de video incluyen: VAL O RE S PO S IB L E S
AT RI B UT O
DE S CRIPCI N Establece el estado predeterminado del audio (actualmente, "silenciado" es la nica opcin) Se inicia la reproduccin de video tan pronto como est listo Muestra los controles de reproduccin de video en la pgina Establece la altura del reproductor de vdeo
AUDI O
muted
AUT O PL AY
autoplay
CO NT RO L S H E I GH T
controls (valor en pxeles)
LOOP
loop
Hace que el audio se repita cada vez que termina Especifica la direccin URL de una imagen para representar el vdeo cuando no se dispone de datos de vdeo
PO S T E R
(algn URL)
PRE L O AD
Determina si se debe cargar el video cuando se carga la pgina. El valor auto cargar el video, metadata cargar slo metadatos asociados con el archivo de video, y none evitar la precarga del video. (Este atributo ser ignorado auto, si la reproduccin automtica metadata, none est especificada) Especifica la direccin URL del archivo de video a reproducir
S RC
(algn URL)
(valor en Establece el ancho del pxeles) reproductor de vdeo WI DT H Una vez ms, para jugar con el elemento <video>, utilice el editor en http://w3schools.com que le permite editar algo de cdigo de ejemplo y ver qu sucede. Para obtener ms informacin acerca de video y audio revise:

5 Cosas que usted necesita saber para empezar a usar <audio> y <video> hoy Cmo agregar un reproductor de audio HTML5 en su sitio W3C Schools HTML5 video Desarrolle con HTML5 manteniendo a la vez soporte para los navegadores ms antiguos Hemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos elementos semnticos, la etiqueta canvas para dibujar, y el soporte de audio y video. Tal vez crea que esto es realmente genial, pero no puede adoptar HTML5 cuando muchos de los usuarios no tienen navegadores compatibles con HTML5 todava. Sin mencionar que los navegadores que S soportan HTML5 admiten diferentes piezas del mismo; no todas las nuevas funcionalidades de HTML5 son compatibles con todos los navegadores y las diferentes funcionalidades pueden ser aplicadas de manera diferente. Pero hay una manera de utilizar las nuevas caractersticas sin que su sitio ya no sea accesible para los usuarios con navegadores antiguos. Puede utilizar polyfills . Segn Paul Irish, un polyfill es "una correccin que imita una futura API, proporcionando funcionalidad para navegadores antiguos." Un polyfill llena los vacos en navegadores antiguos que no soportan las funciones de HTML5 en su sitio. Aprender
a utilizar polyfills le permitir utilizar HTML5 hoy sin olvidarse de los usuarios con navegadores antiguos. Una manera de conseguir soporte polyfill es la biblioteca JavaScript Modernizr (pero haymuchos polyfills disponibles). Modernizr agrega capacidad de deteccin para que usted pueda comprobar concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas y ofrecer una opcin de copia de seguridad si no lo tiene. Veamos un ejemplo. Recuerda el ejemplo de cdigo que he utilizado cuando se introducen elementos semnticos y diseo de pgina ? Aqu est de nuevo: 1. <!DOCTYPE html> 2. 3. <html> 4. 5. <head> 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. </head> 16. 17. <body> 18. 19. 20. 21. 22. 23. 24. 25. 26. <h2>Subheader in h2</h2> <h1>Header in h1</h1> <hgroup> <header> <link href="css/style.css" rel="stylesheet" /> <link href="css/html5reset.css" rel="stylesheet" /> <title>Title</title> <meta charset="utf-8" />
27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58.
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
Este es el primer artculo. This is <mark>highlighted</mark>.
59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. etc. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
Este es el segundo artculo. Estos artculos pueden ser secciones del blog,
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. </html> Este cdigo contiene una serie de nuevos elementos HTML5 que no son soportadas en navegadores antiguos. Recuerde que en Internet Explorer 9 se vea as: </body> <footer>Footer - Copyright 2011</footer> </aside> </figure> <figcaption>Jennifer Marsman</figcaption> alt="Jennifer Marsman" /> src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" <img width="85" height="85" <figure> </section> </ul> <li><a href="#">Link 3</a></li> <li><a href="#">Link 2</a></li>
Podemos usar Internet Explorer developer tools para ver cmo se vera en versiones anteriores de IE. En Internet Explorer, presione la tecla F12 para acceder a las herramientas de programador.
Tenga en cuenta que el modo de navegacin (en la barra de men gris en la parte superior) est configurada ahora para IE9. Haga clic en el Modo Navegacin, y en el men desplegable que aparece, seleccione "Internet Explorer 8" (que no tiene soporte HTML5).
Despus de hacer este cambio y cambiar a un navegador no compatible con HTML5, esto es lo que aparece en mi pgina web:
Aunque parece que es un problema enorme, no es realmente tan malo. La razn por la que esto no funciona es que IE8 no reconoce los nuevos elementos HTML5 que estoy usando, as que no los agrega al DOM, por lo que no se pueden aplicar estilos mediante CSS. Sin embargo, con solo agregar una referencia a Modernizr (sin hacer ningn otro cambio en el cdigo!) entonces obligar a meter estos elementos en el DOM. Descrguelo dehttp://www.modernizr.com/download/ y agregue una referencia en la seccin <head> de este modo: 1. <head> 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. </head> Agregu dos referencias de script, uno para jQuery y uno Modernizr. No necesito realmente la referencia jQuery en este punto, pero sin duda las necesitaremos para el siguiente script, as que por eso la agrego ahora. Con este simple cambio ahora mi sitio se ve en Internet Explorer 8: <script src="script/modernizr-2.0.6.js" type="text/javascript"></script> <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script> <link href="css/style.css" rel="stylesheet" /> <link href="css/html5reset.css" rel="stylesheet" /> <title>Title</title> <meta charset="utf-8" />
No es perfecto, pero est muy cerca de la versin original que vemos en Internet Explorer 9. Modernizr agreg estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya que estn en el DOM podramos formatearlos mediante CSS. Pero Modernizr hace mucho ms que eso! Tenga en cuenta que una de las diferencias entre nuestras versiones IE8 e IE9 de la pgina web es que la versin IE9 tiene una bonita esquina redondeada en los dos artculos y la figura, y la versin IE8 no. Tambin podemos utilizar Modernizr para corregir esto. 1. <script type="text/javascript"> 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. </script> En este script, estamos comprobando el objeto Modernizr para ver si hay soporte para "borderradius" (una caracterstica CSS3). Si no, yo uso un script jQuery llamado jquery.corner.js (que est disponible para su descarga en http://jquery.malsup.com/corner/ y requiere esa referencia adicional a jQuery que hice antes). A continuacin, simplemente llamo el mtodo esquina del script de mis artculos y cifras para darles esquinas redondeadas. O bien, puede hacer esto una forma ligeramente diferente. Modernizr tiene un cargador de recursos condicional (no incluido) llamado Modernizr.load(), basado en Yepnope.js. Esto le permite cargar slo los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma asncrona y en paralelo que a veces puede ofrecer una mejora de rendimiento. Para obtener Modernizr.load, tiene que incluirlo en una versin personalizada de Modernizr que usted tiene que crear en http://www.modernizr.com/download/; no est incluido en la versin de desarrollo. Con Modernizr.load, podemos escribir un script similar a este: 1. <script type="text/javascript"> 2. 3. Modernizr.load({ } }); $("figure").corner(); $("article").corner(); $.getScript("script/jquery.corner.js", function() { if (!Modernizr.borderradius) {
4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. </script> En resumen, este implementa la misma funcionalidad que la secuencia anterior. Modernizr.load primero prueba la propiedad booleana "Modernizr.borderradius" para ver si es compatible. Luego, nope define los recursos para cargar si test es falso. Dado que IE8 no soporta la propiedad CSS3 "borderradius", cargar jquery.esquina.js script. Por ltimo,callback especifica una funcin para que se ejecute cada vez que la secuencia de comandos haya terminado de cargar, por lo que invocamos el mtodo "corner" en mis artculos y figuras como hicimos antes. Hay un breve tutorial sobre Modernizr.load enhttp://www.modernizr.com/docs/#load si quiere ir ms a fondo. Ahora, utilizando cualquiera de estos scripts, nuestro Internet Explorer versin 8 (que no soporta HTML5) se ve as: }); } $('figure').corner(); $('article').corner(); callback: function () { nope: 'script/jquery.corner.js', test: Modernizr.borderradius,
Por lo tanto, usando polyfills y herramientas como Modernizr podr utilizar la nueva funcionalidad HTML5 y an as dar una buena experiencia para navegadores antiguos. Para obtener ms informacin, consulte la
seccin http://www.diveintohtml5.net/detect.html que describe en detalle cmo detecta Modernizr caractersticas HTML5. Resumen En esta introduccin a HTML5, cubrimos el marcado semntico, lienzo, audio y video, y utilizar HTML5 manteniendo el soporte a los navegadores ms antiguos. Pero tambin observamos que hay muchas cosas que no cubrimos: microdatos, almacenamiento, CSS3, etc. Aqu hay algunos recursos para continuar aprendiendo sobre HTML5: IE Test Drive incluso si usted no usa Internet Explorer, este es un sitio increble. Contiene muchas demostraciones: Demostraciones rpidas, Demostraciones HTML5, Demostraciones grficas y Demostraciones de Navegador . Prubelas en su navegador favorito! Este sitio tambin tiene enlaces a otros recursos. Beauty of the Web muestralos mejores sitios en la web que sacan provecho de la aceleracin de hardware de HTML5 y las caractersticas de anclado de Internet Explorer 9 BuildMyPinnedSite todo el cdigo, ideas, y las muestras que usted necesita para usar anclado e integracin con Windows HTML5 Labs es un sitio donde Microsoft prueba especificaciones anticipadas e inestables de los cuerpos de normalizacin web tales como W3C. Puede jugar con prototipos como IndexedDB, WebSockets, FileAPI y Media Capture API. Videos Brandon Satrom's "Application Development with HTML5" talk at TechEd 2011 de Brandon Satrom es una fabulosa charla de una hora que le muestra lo que tiene que saber para desarrollar con HTML5 Charlas sobre HTML5 en MIX 2011 una pltora de sesiones HTML5 Herramientas Muchas herramientas de desarrollo ya son compatibles con HTML5. Pruebe estas: Visual Studio 2010 SP1 el SP1 aade HTML5 bsico, CSS3 IntelliSense y validacin. Para mayor informacin consultehttp://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3in-visual-studio-2010-sp1.aspx. Actualizacin de estndares web para Microsoft Visual Studio 2010 SP1 esta es una extensin que Visual Studio agrega actualizando HTML5, IntelliSense y validacin CSS3 en Visual Studio 2010 SP1, sobre la base de la actual especificacin W3C. WebMatrix HTML5 es soportado por defecto (aadiendo una nueva pgina HTML utiliza el doctype HTML5 por defecto y cdigo de plantilla) Actualizacin de herramientas ASP.NET MVC 3 El dilogo Nuevo Proyecto incluye una casilla de verificacin para activar las plantilla de de proyecto de HTML5. Estas plantillas aprovechan Modernizr 1.7 para proporcionar soporte de compatibilidad para HTML5 y CSS3 en exploradores de nivel inferior. Expression Web 4 SP1 HTML5 IntelliSense y sopor en el Editor de cdigo y la Vista de diseo Edicin de CSS3 e IntelliSense enriquecida Modo SuperPreview Page y servicio en lnea (los navegadores remotos incluyen Chrome, IE8, IE9, y Safari 4 y 5 en Windows y Mac) Adems de herramientas de desarrollo, no olvide:
Windows telfono "Mango" contiene Internet Explorer 9, que soporta sitios HTML5. Internet Explorer 10 Plataforma Preview s hcuenta con soporte para muchas de las nuevas caractersticas CSS3 y HTML5; la lista completa se encuentra enhttp://msdn.microsoft.com/en-us/ie/gg192966.aspx. HTML5 est aqu. De un paso adelante y desarrolle sitios web increbles!
http://elcentrohtml5.sourceforge.net/Aprenda-HTML5-en-5-minutos

Aprenda HTML5 en 5 Minutos

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aprenda HTML5 en 5 Minutos

Diunggah oleh

Hak Cipta:

Format Tersedia

Aprenda HTML5 en 5 minutos! Por Jennifer Marsman Aprenda HTML5 en 5 minutos!

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

<li><a href="#">Link 3</a></li>

<img width="85" height="85"

alt="Jennifer Marsman" />

<footer>Footer - Copyright 2011</footer>

Para ir ms a profundidad en elementos semnticos, revise:

Otros atributos divertidos en el elemento de audio incluyen: PO S S IB L E VAL UE S autoplay

DE S CRIPT IO N Se inicia la reproduccin de

auto, metadata, none

Otros atributos divertidos en el elemento de video incluyen: VAL O RE S PO S IB L E S

controls (valor en pxeles)

<li><a href="#">Menu Option 1</a></li>

<li><a href="#">Menu Option 2</a></li>

<li><a href="#">Menu Option 3</a></li>

Este es el primer artculo. This is <mark>highlighted</mark>.

<li><a href="#">Link 1</a></li>

Anda mungkin juga menyukai