Aprenda HTML5 en 5 Minutos

¡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 un poco 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áginaHay 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 (por ejemplo) la etiqueta <div>. La etiqueta <div> 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>. Esto da más significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propó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 una lista 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 una visualizació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. <!DOCTYPE html>

3. <html>

5. <head>

7. <meta charset="utf-8" />

9. <title>Title</title>

11. <link href="css/html5reset.css" rel="stylesheet" />

13. <link href="css/style.css" rel="stylesheet" />

15. </head>

17. <body>

19. <header>

21. <hgroup>

23. <h1>Header in h1</h1>

25. <h2>Subheader in h2</h2>

27. </hgroup>

29. </header>

31. <nav>

33. <ul>

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



41. </ul>

43. </nav>

45. <section>

47. <article>

49. <header>

51. <h1>Article #1</h1>

53. </header>

55. <section>

57. Este es el primer artículo. This is <mark>highlighted</mark>.

59. </section>

61. </article>

63. <article>

65. <header>

67. <h1>Article #2</h1>

69. </header>

71. <section>

73. Este es el segundo artículo. Estos artículos pueden ser secciones del blog, etc.

75. </section>

77. </article>

79. </section>

81. <aside>

83. <section>

85. <h1>Links</h1>

87. <ul>

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



95. </ul>

97. </section>

99. <figure>

101. <img width="85" height="85"

103. src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"

105. alt="Jennifer Marsman" />

107. <figcaption>Jennifer Marsman</figcaption>

109. </figure>

111. </aside>

113. <footer>Footer - Copyright 2011</footer>

115. </body>

117. </html>

Quiero llamar a unos cuantos elementos nuevos más en este código…

¿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, gráfico, foto, un fragmento de código, etc.) y me dejan asociar un pie con la firugra.

Así es como la página web se vería combinada con algo de CSS. (NOTA: Pedí prestado el CSS de mi talentoso compañero Brandon Satrom y su TechEd talk, pero el efecto final menos que bello fes culpa mía).

Ahora, imagine esto en manos de alguien que sea realmente bueno en CSS (que no lo soy). El resultado es muy potente. El carácter descriptivo del HTML los hace súper fácil de manejar.

Por último, si usted está tratando de seguirlo en Visual Studio, pero se encuentra con líneas serpenteantes en todas partes que indican que VS no entiende los elementos HTML5, asegúrese de que tiene Visual Studio 2010 SP1instalado.

Luego, en el menú de Visual Studio, vaya a Herramientas, Opciones. En la parte izquierda panel de navegación, expanda el Editor de texto, HTML y, a continuación, haga clic en Validación. Desde el menú desplegable seleccione HTML5. Esto le dará compatibilidad HTML5 IntelliSense. ¡Fiu!

Para ir más a profundidad en elementos semánticos, revise:

Cómo habilitar el soporte de estándar HTML5

La sección de semántica de la especificación W3C de HTML5

Adéntrese en el capítulo de semántica de HTML5 titulado " ¿Qué significa todo esto? ".

Dibujo en HTML5 usando el elemento CanvasOtro 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 programación desde su código JavaScript (o si está usando jQuery y es el único lienzo en la página, usted puede tener acceso a el utilizando $('canvas') sin necesidad de ponerle nombre).

También 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 cómo utilizar canvas para dibujar. (Estoy intentando dibujar la bandera de Escocia. Por favor perdone las inexactitudes.)

1. <!DOCTYPE HTML>

3. <html>

5. <body>

7. <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>

9. <script type="text/javascript">

13. var canvas = document.getElementById('myCanvas');

15. var ctx = canvas.getContext('2d');

19. // Draw blue rectangle

21. ctx.fillStyle = '#0065BD';

23. ctx.fillRect(0, 0, 125, 75);

27. // Draw white X

29. ctx.beginPath();

31. ctx.lineWidth = "15";

33. ctx.strokeStyle = "white";

35. ctx.moveTo(0, 0);

37. ctx.lineTo(125, 75);

39. ctx.moveTo(125, 0);

41. ctx.lineTo(0, 75);

43. ctx.stroke();

47. </script>

49. </body>

51. </html>

Esto es lo que el código genera:

Veamos ahora el código.

En primer lugar, voy a crear el lienzo y a darle una ID de "myCanvas". Si este código fuera vistoo en un navegador que no soporta el elemento canvas HTML5, mostraría "Su navegador no soporta la etiqueta canvas" en lugar de dibujar la bandera. .

Después, tengo una secuencia de comandos. Recuerde, que la etiqueta canvas es sólo un contenedor para gráficos; debe usar JavaScript para dibujar y representar gráficos sobre ella. En primer lugar, tomo una referencia al lienzo utilizando la ID "myCanvas" y, a continuación, obtengo el contexto del lienzo que proporciona propiedades y métodos para la elaboración y manipulación de la gráfica sobre el lienzo. He especificado " 2d" para usar un contexto en dos dimensiones para dibujar en la página.

A continuación, dibujo el rectángulo azul. Uso fillStyle para especificar el color azul. Uso fillRect para dibujar el rectángulo, especificando el tamaño y la posición. Al llamar fillRect(0, 0, 125, 75) significa: comenzando en la posición (0, 0), la esquina superior izquierda, dibujar un rectángulo con ancho=125 alto=75 píxeles.

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 línea) de 15 píxeles (utilizando el método 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 continuación, trazo la ruta utilizando

moveTo y lineTo . Estos métodos posicionan el "cursor" para dibujar; la diferencia es que moveTo mueve el cursor sin trazar una línea y lineTo dibuja una línea mientras se desplaza. Empezaré moviéndome a la posición (0, 0), la esquina superior izquierda y, a continuación, trazaré una línea a (125, 75), la esquina inferior derecha. Después me muevo a la posición (125, 0), la esquina superior derecha y, a continuación, trazaré una línea a (0, 75), la esquina inferior derecha. Por último, el método stroke hace que estos trazos se vean.

Comparación rápida de Canvas vs SVGGráficos vectoriales escalables (SVG) es un estándar para dibujar en la ventana del navegador. Con la liberación de Canvas de HTML5, muchas personas se preguntan en qué difieren.

En mi opinión, la mayor diferencia es que canvas utiliza el modo inmediato de representación y SVG utiliza modo retenido de representación. Esto significa que canvas hace directamente la representación de los gráficos en la pantalla. En mi código 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 comparación, SVG conserva un modelo completo de los objetos que se han representado. Para efectuar un cambio, simplemente tiene que cambiar, por ejemplo, la posición del rectángulo y el explorador determinaría cómo volver a hacerla. Esto es menos trabajo para los desarrolladores, pero también resulta más pesado para mantener un modelo.

Vale la pena considerar la capacidad de formatear SVG mediante CSS además de JavaScript. Un lienzo se puede manipular solamente a través de Javascript.

He aquí una reseña de alto nivel de otras diferencias:

Canvas SVGAbstracción Basado en pixeles (bitmap

dinámico)Basado en formas

Elementos Único elemento HTML Varios elementos gráficos que pasarán a formar parte del Modelo de objetos de Documento (DOM)

Controlador Modificados solamente mediante script

Modificados a través de scripts y CSS

>Modelo de Evento

La Interacción del Usuario es granular (x,y)

Interacción con el Usuario es abstraída (rect, ruta)

Rendimiento

El rendimiento es mejor con menor superficie y/o mayor número de objetos

El rendimiento es mejor con menor número de objetos y/o una superficie más amplia

Para una comparación más detallada, quiero dirigirlos hacia algunas de las sesiones (de donde extraje este fabuloso cuadro, con permiso):

Patrick Dengler's "Ideas sobre cuándo usar SVG y cuándo Canvas"

Jatinder Mann's "Canvas HTML5 a profundidad"

John Bristowe's "Una introducción a Canvas HTML5"

Soporte de Audio y VideoUna de las grandes características que es nueva en HTML5 es la capacidad de reproducción 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 programación, los elementos de audio y vídeo son muy sencillos de utilizar. (Les daré una explicación más a fondo de sus atributos más abajo.) Los elementos de audio y vídeo también son soportados por todos los navegadores principales (las últimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difícil es que se necesita codecs para reproducir audio y vídeo, y diferentes navegadores soportan diferentes codecs. (Para una magnífica explicación sobre contenedores de video y codecs lea http://diveintohtml5.net/video.html.)

Afortunadamente, esto no es un obstáculo. 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 continuación, pasará al siguiente si no puede reproducirlo).

Como práctica recomendada, debe proporcionar múltiples fuentes de audio y video para contemplar diferentes navegadores. También 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">

3. <source src="laughter.mp3" type="audio/mp3" />

5. <source src="laughter.ogg" type="audio/ogg" />

7. Su navegador no soporta el elemento de audio.

9. </audio>

Con este código, el navegador intentará primero reproducir el archivo laughter.mp3. Si no tiene los códecs 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 gestión de derechos digitales (DRM); tiene que implementar esto por sí mismo como desarrollador. Vea este enlace del W3C que explica su opinión. (Si necesita usar contenido con DRM, también revise la documentación Silverlight DRM, que podría resultar una solución más fácil.)

Ahora, ahondemos en cada uno de estos nuevos elementos.

AudioEn primer lugar, echemos un vistazo a <audio> con más detalle.





9. </audio>

Ya tuvimos ocasión 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 reproducción de audio incluyendo un botón de reproducción/pausa, el tiempo, un botón de silencio y los controles de volumen. En la mayoría 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:

Los controles se ven diferente en distintos navegadores. Así se ven en Chrome (con una canción sonando). El control volumen aparece cuando pasa el puntero por el ícono de sonido en el extremo derecho.

http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-03-metablogapi/1106.image_5F00_2.png

Aquí están los controles de Firefox (con una canción en pausa). Al igual que Chrome, también 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:

Attribute

Possible Values

Description

autoplay

autoplay Se inicia la reproducción de audio tan pronto como esté listo

controls controls Muestra los controles de reproducción de audio en la página

loop loop Hace que el audio se repita cada vez que termina

preload auto, metadata, none

Determina si se debe cargar el audio cuando se carga la página. El valor auto cargará el audio, metadata cargará sólo metadatos asociados con el archivo de audio, y none evitará la precarga. (Este atributo será ignorado si la reproducción automática está especificada)

src (algún URL)

Especifica la dirección URL del archivo de audio a reproducir

Por lo que este código muestra no sólo mostrará controles de reproducción de audio, sino que también iniciará la reproducción de audio inmediatamente y lo repetirá una y otra vez en un bucle.







9. </audio>

Si le gustaría jugar con el elemento <audio> > en su navegador hay un increíble editor en http://w3schools.com que le permite editar algo de código para ver que pasa. También puede echar un vistazo al artículo cómo agregar un reproductor de audio HTML5 en su sitio.

VideoVeamos ahora el elemento <video> element.

1. <video width="320" height="240" controls="controls">

3. <source src="movie.ogg" type="video/ogg" />

5. <source src="movie.mp4" type="video/mp4" />

7. <source src="movie.webm" type="video/webm" />

9. Your browser does not support the video tag.

11. </video>

Como hemos dicho anteriormente, el elemento de vídeo cuenta con el apoyo de múltiples fuentes, que intentará en orden y luego seguirá con la siguiente opción.

Al igual que el audio, el video tiene un atributo controls. Aquí está una captura de pantalla de los controles de vídeo en Internet Explorer:

Otros atributos divertidos en el elemento de video incluyen:

Atributo Valores Posibles

Descripción

audio muted Establece el estado predeterminado del audio (actualmente, "silenciado" es la única opción)


autoplay

autoplay Se inicia la reproducción de video tan pronto como esté listo

controls controls Muestra los controles de reproducción de video en la página

height (valor en píxeles)

Establece la altura del reproductor de vídeo

loop loop Hace que el audio se repita cada vez que termina

poster (algún URL)

Especifica la dirección URL de una imagen para representar el vídeo cuando no se dispone de datos de vídeo

preload auto, metadata, none

Determina si se debe cargar el video cuando se carga la página. El valor auto cargará el video, metadata cargará sólo metadatos asociados con el archivo de video, y none evitará la precarga del video. (Este atributo será ignorado si la reproducción automática está especificada)

src (algún URL)

Especifica la dirección URL del archivo de video a reproducir

width (valor en píxeles)

Establece el ancho del reproductor de vídeo

Una vez más, para jugar con el elemento <video>, utilice el editor en http://w3schools.com que le permite editar algo de código de ejemplo y ver qué sucede.

Para obtener más información acerca de video y audio revise:

5 Cosas que usted necesita saber para empezar a usar <audio> y <video> hoy

Cómo agregar un reproductor de audio HTML5 en su sitio

W3C Schools HTML5 video

Desarrolle con HTML5 manteniendo a la vez soporte para los navegadores más antiguosHemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos elementos semánticos, 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 todavía. 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 características sin que su sitio ya no sea accesible para los usuarios con navegadores antiguos. Puede utilizar polyfills .

Según Paul Irish, un polyfill es "una corrección que imita una futura API, proporcionando funcionalidad para navegadores antiguos." Un polyfill llena los vacíos 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 hay muchos polyfills disponibles). Modernizr agrega capacidad de detección para que usted pueda comprobar concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas y ofrecer una opción de copia de seguridad si no lo tiene.

Veamos un ejemplo. ¿Recuerda el ejemplo de código que he utilizado cuando se introducen elementos semánticos y diseño de página ? Aquí está de nuevo:

1. <!DOCTYPE html>

3. <html>

5. <head>





15. </head>

17. <body>

19. <header>

21. <hgroup>

23. <h1>Header in h1</h1>

25. <h2>Subheader in h2</h2>

27. </hgroup>

29. </header>

31. <nav>

33. <ul>




41. </ul>

43. </nav>

45. <section>

47. <article>

49. <header>

51. <h1>Article #1</h1>

53. </header>

55. <section>

57. Este es el primer artículo. This is <mark>highlighted</mark>.

59. </section>

61. </article>

63. <article>

65. <header>

67. <h1>Article #2</h1>

69. </header>

71. <section>

73. Este es el segundo artículo. Estos artículos pueden ser secciones del blog, etc.

75. </section>

77. </article>

79. </section>

81. <aside>

83. <section>

85. <h1>Links</h1>

87. <ul>




95. </ul>

97. </section>

99. <figure>

101. <img width="85" height="85"

103. src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"

105. alt="Jennifer Marsman" />

107. <figcaption>Jennifer Marsman</figcaption>

109. </figure>

111. </aside>

113. <footer>Footer - Copyright 2011</footer>

115. </body>

117. </html>

Este código contiene una serie de nuevos elementos HTML5 que no son soportadas en navegadores antiguos. Recuerde que en Internet Explorer 9 se veía así:

Podemos usar Internet Explorer developer tools para ver cómo se vería 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 navegación (en la barra de menú gris en la parte superior) está configurada ahora para IE9. Haga clic en el Modo Navegación, y en el menú desplegable que aparece, seleccione "Internet Explorer 8" (que no tiene soporte HTML5).

Después de hacer este cambio y cambiar a un navegador no compatible con HTML5, esto es lo que aparece en mi página web:

http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-03-metablogapi/1803.PageLayout_5F00_2.jpg



Aunque parece que es un problema enorme, no es realmente tan malo. La razón 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 ningún otro cambio en el código!) entonces obligará a meter estos elementos en el DOM. Descárguelo de http://www.modernizr.com/download/ y agregue una referencia en la sección <head> de este modo:

1. <head>





11. <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>

13. <script src="script/modernizr-2.0.6.js" type="text/javascript"></script>

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:

No es perfecto, pero está muy cerca de la versión original que vemos en Internet Explorer 9. Modernizr agregó estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya que están en el DOM podríamos formatearlos mediante CSS.

¡Pero Modernizr hace mucho más que eso! Tenga en cuenta que una de las diferencias entre nuestras versiones IE8 e IE9 de la página web es que la versión IE9 tiene una bonita esquina redondeada en los dos artículos y la figura, y la versión IE8 no. También podemos utilizar Modernizr para corregir esto.


3. if (!Modernizr.borderradius) {

5. $.getScript("script/jquery.corner.js", function() {

7. $("article").corner();

9. $("figure").corner();

11. });

13. }

15. </script>

En este script, estamos comprobando el objeto Modernizr para ver si hay soporte para "borderradius" (una característica 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 continuación, simplemente llamo el método esquina del script de mis artículos 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 sólo los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma asíncrona y en paralelo que a veces puede ofrecer una mejora de rendimiento. Para obtener Modernizr.load, tiene que incluirlo en una versión personalizada de Modernizr que usted tiene que crear en http://www.modernizr.com/download/; no está incluido en la versión de desarrollo. Con Modernizr.load, podemos escribir un script similar a este:


3. Modernizr.load({

5. test: Modernizr.borderradius,

7. nope: 'script/jquery.corner.js',

9. callback: function () {

11. $('article').corner();

13. $('figure').corner();

15. }

17. });

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 función para que se ejecute cada vez que la secuencia de comandos haya terminado de cargar, por lo que invocamos el método "corner" en mis artículos y figuras como hicimos antes. Hay un breve tutorial sobre Modernizr.load en http://www.modernizr.com/docs/#load si quiere ir más a fondo.

Ahora, utilizando cualquiera de estos scripts, nuestro Internet Explorer versión 8 (que no soporta HTML5) se ve así:

Por lo tanto, usando polyfills y herramientas como Modernizr podrá utilizar la nueva funcionalidad HTML5 y aún así dar una buena experiencia para navegadores antiguos. Para obtener más información, consulte la sección http://www.diveintohtml5.net/detect.html que describe en detalle cómo detecta Modernizr características HTML5.

ResumenEn esta introducción a HTML5, cubrimos el marcado semántico, lienzo, audio y video, y utilizar HTML5 manteniendo el soporte a los navegadores más antiguos. Pero también 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 increíble. Contiene muchas demostraciones: Demostraciones rápidas, Demostraciones HTML5, Demostraciones gráficas y Demostraciones de Navegador . ¡Pruébelas en su navegador favorito! Este sitio también tiene enlaces a otros recursos.

Beauty of the Web – muestralos mejores sitios en la web que sacan provecho de la aceleración de hardware de HTML5 y las características de anclado de Internet Explorer 9

BuildMyPinnedSite – todo el código, ideas, y las muestras que usted necesita para usar anclado e integración con Windows

HTML5 Labs – es un sitio donde Microsoft prueba especificaciones anticipadas e inestables de los cuerpos de normalización web tales como W3C. Puede jugar con prototipos como IndexedDB, WebSockets, FileAPI y Media Capture API.

VideosBrandon 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 plétora de sesiones HTML5

HerramientasMuchas herramientas de desarrollo ya son compatibles con HTML5. Pruebe estas:

Visual Studio 2010 SP1 – el SP1 añade HTML5 básico, CSS3 IntelliSense y validación. Para mayor información consulte http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx.

Actualización de estándares web para Microsoft Visual Studio 2010 SP1 – esta es una extensión que Visual Studio agrega actualizando HTML5, IntelliSense y validación CSS3 en Visual Studio 2010 SP1, sobre la base de la actual especificación W3C.

WebMatrix – HTML5 es soportado por defecto (añadiendo una nueva página HTML utiliza el doctype HTML5 por defecto y código de plantilla)

Actualización de herramientas ASP.NET MVC 3

El diálogo Nuevo Proyecto incluye una casilla de verificación 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 código y la Vista de diseño

Edición de CSS3 e IntelliSense enriquecida

Modo SuperPreview Page y servicio en línea (los navegadores remotos incluyen Chrome, IE8, IE9, y Safari 4 y 5 en Windows y Mac)

Además de herramientas de desarrollo, no olvide:

Windows teléfono "Mango" contiene Internet Explorer 9, que soporta sitios HTML5.

• Internet Explorer 10 Plataforma Preview s hcuenta con soporte para muchas de las nuevas características CSS3 y HTML5; la lista completa se encuentra en http://msdn.microsoft.com/en-us/ie/gg192966.aspx.

HTML5 está aquí. ¡ De un paso adelante y desarrolle sitios

Aprenda HTML5 en 5 Minutos

Documents

Transcript of Aprenda HTML5 en 5 Minutos