Você está na página 1de 20

No hay duda: HTML5 es un tema candente para los desarrolladores.

Si necesitas un cursillo rpido para conocer los aspectos ms importantes de la funcionalidad de HTML5, has entrado en el sitio correcto. Por Jennifer Marsman
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Hablar aqu del nuevo markup de semntica, el canvas para el dibujo y las animaciones, el soporte para audio y vdeo y cmo utilizar HTML5 con navegadores antiguos. Puede que nos lleve algo ms de cinco minutos, pero prometo que iremos rpido. Sigue aqu conmigo merece la pena!

Markup de semntica y presentacin de pgina


Conozco una buena ancdota acerca de una Universidad que, cuando estaban construyendo el campus, no hicieron ningn tipo de acera ni camino. Simplemente plantaron csped y esperaron. Al cabo de un ao, el csped estaba completamente pelado all por donde la gente pasaba con ms frecuencia. Lo que hicieron los responsables del proyecto fue colocar el cemento por encima, y esas son las aceras que tienen ahora. Parece que es totalmente de sentido comn. Las aceras estn exactamente donde la gente las necesita para caminar. Los nuevos elementos de semntica de HTML5 se han basado en exactamente esta misma lgica (puedes ver el documento Gua de diseo del W3C para "pavimentar las veredas"). Los elementos de semntica describen su significado o finalidad claramente al navegador y al desarrollador. Compralo con, por ejemplo, la etiqueta <div>. El <div> define una divisin o una seccin en un documento HTML, pero no nos dice nada sobre su contenido ni aporta ningn significado especial ni dato clarificador al respecto. <div> Los desarrolladores suelen utilizar IDs y/o nombres de clase con estas etiquetas <div>. Esta prctica aade ms significado a los desarrolladores, pero lamentablemente no ayuda a los navegadores a deducir la finalidad de esas etiquetas dentro de la pgina. <div id="header"> En HTML5 tenemos una serie de nuevos elementos con una semntica rica que pueden informar acerca de la finalidad para la cual se crean, tanto a los desarrolladores como a los propios navegadores. <header>

El W3C ha buceado entre millones de pginas web para descubrir los IDs y los nombres de clase que vienen utilizando los desarrolladores desde hace aos. Una vez han desestimado los "div1", "div2" y dems, se quedaron con una lista de elementos descriptivos ms ricos que ya se estaban utilizando y los convirtieron en estndares. Estos son algunos de los nuevos elementos de semntica de HTML5: article aside figcaption figure footer header hgroup mark nav section time Debido a la riqueza semntica, probablemente ya adivinas para qu es cada uno de ellos. Pero por si acaso, lo resumo en este cuadro de forma grfica:

Los Headers (cabeceras) y footers (pies) se explican por s mismos, y nav es para crear una barra de navegacin o men. Podemos utilizar sections y articles para agrupar el contenido. Finalmente, el elemento aside ("aparte") nos puede valer para contenidos secundarios, por ejemplo una barra lateral de enlaces recomendados. Este es un ejemplo sencillo de cdigo que utiliza estos elementos.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ttulo</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header> <hgroup> <h1>Cabecera en h1</h1> <h2>Subttulo in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Opcin de men 1</a></li> <li><a href="#">Opcin de men 2</a></li> <li><a href="#">Opcin de men 3</a></li> </ul> </nav> <section> <article> <header> <h1>Artculo #1</h1> </header> <section> Este es el primer artculo. Est <mark>destacado</mark>. </section> </article> <article> <header> <h1>Artculo #2</h1> </header> <section> Este es el segundo artculo. Pueden ser posts de un blog, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li>

</ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Pie de pgina - Copyright 2011</footer> </body> </html> Tambin podra haber metido algunos otros elementos en el mismo cdigo Has visto el elemento hgroup, que agrupa las cabeceras h1 y h2? El elemento mark me permite resaltar o marcar en pantalla algn texto importante. Finalmente, los elementos figure y figcaption indican una figura en mi contenido (por ejemplo una imagen, un diagrama, foto, bloque de cdigo, etc.), y asociar un texto de cabecera (caption) con esa figura respectivamente. Una vez combinada esta pgina con algo de CSS, se podra ver as (nota: he pedido prestado el CSS a mi querido compaero y amigo Brandon Satrom, de su presentacin en el TechEd, pero lo que aparece como ms cutre es cosa ma.)

Ahora imagnate todo esto en manos de alguien que realmente controle CSS (que no es mi caso). El resultado ser espectacular. La capacidad descriptiva del HTML hace que sea sper sencillo trabajar con l.

Finalmente, si tienes intencin de seguir haciendo ms cosas con Visual Studio pero sigues viendo lneas marcadas por todas partes porque VS no entiende los elementos de HTML5, comprueba que has instalado el Visual Studio 2010 SP1. Despus, ya en el men de Visual Studio, ve a Herramientas Opciones. En el panel de navegacin de la izquierda, expande Editor de Texto HTML y despus pulsa en Validacin. Desde el men desplegable de Destino, elige HTML5. Con esto empieza a funcionar IntelliSense para HTML5. Qu maravilla!

Si quieres entrar en detalles con los elementos de semntica, te recomiendo: Cmo utilizar el Soporte para Estndares de HTML5 Seccin de Semntica de la especificacin HTML5 del W3C El captulo de "Dive into HTML5" sobre semntica, titulado "Qu significa todo esto?"

Dibujar en HTML5 con el elemento Canvas


Otro elemento nuevo de HTMl5 es la etiqueta <canvas>. Es lo que dice ser: un lienzo o superficie en blanco para dibujar. Necesitamos Javascript para manipular el canvas y dibujar sobre l. Probablemente te interese aadirle un atributo id al canvas para poder acceder por programa desde el cdigo Javascript (o, si utiliza jQuery y solo tienes un canvas en la

pgina, puedes acceder directamente utilizando la directiva $('canvas') sin tener que ponerle nombre). Opcionalmente puedes tambin especificar unas dimensiones con height y width. Entre la etiqueta de apertura <canvas> y el cierre </canvas>, puedes poner algo de texto que se podr leer en los navegadores que no soporten el elemento canvas. Este es un ejemplo sencillo de uso del canvas para dibujar (He intentado dibujar la bandera de Escocia. Perdn por las imprecisiones.) <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Tu navegador no soporta la etiqueta canvas.</canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Dibuja un rectngulo azul ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Dibuja una X en blanco ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke(); </script> </body> </html> Esto es lo que sale al ejecutarlo:

Ahora vamos a explicar un poco el cdigo.

Primero, creamos el canvas y lo bautizamos con un ID, en este caso, "myCanvas". Si viramos este cdigo en un navegador que no soporta el elemento canvas de HTML5, aparecera en pantalla la frase "Tu navegador no soporta la etiqueta canvas" en vez de pintar la bandera. Despus, aadimos un script. Recuerda, la etiqueta canvas solamente es un contenedor de grficos. Tenemos que utilizar Javascript para dibujar y crear grficos en l. Lo primero que hago es extraer la referencia al propio canvas utilizando el ID "myCanvas" y despus obtengo el contexto que me aporta los mtodos y propiedades para dibujar y manipular los grficos en el canvas. He especificado "2d" para utilizar un contexto de dos dimensiones para dibujar en la pgina A continuacin, dibujo un rectngulo azul. He utilizado fillStyle para indicar el color azul. Utilizo la funcin fillRect para dibujar el rectngulo indicndole el tamao y la posicin. La llamada fillRect(0, 0, 125, 75) significa: empieza en la posicin (0, 0) la esquina superior izquierda y dibuja un rectngulo de 125 pixels de ancho y 75 pixels de alto. Por ltimo, dibujamos la X blanca sobre el recuadro. Primero hago una llamada a beginPath para iniciar el proceso de dibujo de una lnea poligonal (o "path"). Le indico una anchura de 15 pixels con lineWidth (y para esto emple el mtodo de "prueba y error", utilizando distintos valores hasta que di con la anchura buena) y le indico el color blanco dando el valor "white" a strokeStyle. Despus trazo la figura utilizando los mtodos moveTo y lineTo. Estos mtodos nos aportan un "puntero" o cursor con el que podemos dibujar. La diferencia es que moveTo mueve el puntero sin dibujar la lnea, y lineTo dibuja la lnea mientras se desplaza. Empiezo poniendo el cursor en la posicin (0,0), la esquina superior izquierda, y dibujo una lnea recta hasta (125,75), que es la esquina inferior derecha. Despus me muevo a la posicin (125,0) que es la esquina superior derecha, y dibujo una segunda lnea desde ah hasta (0,75), la esquina inferior izquierda del rectngulo. Y para terminar, hago una llamada al mtodo stroke que es quien se encarga realmente de pintar en la pantalla las lneas.

Comparacin rpida entre Canvas y SVG


SVG (Scalable Vector Graphics) es un estndar anterior para dibujar en la ventana de un navegador. Con la aparicin del canvas en HTML5 muchos se preguntan cul es la diferencia. Tal y como yo lo veo, la mayor diferencia es que el canvas utiliza la presentacin en modo "inmediato" mientras que SVG utiliza el modo "retenido". En otras palabras: el canvas hace que se presenten los grficos en pantalla directamente. En el cdigo anterior, una vez que se ha dibujado la bandera, el sistema se olvida de ella y no retiene ningn estado. Si queremos hacer algn cambio tendremos que volver a dibujar todo. Por el contrario, SVG retiene todo el modelo completo de los objetos que se dibujan. Si queremos cambiar algo, por ejemplo la posicin del rectngulo, basta con cambiar este valor de coordenadas y el navegador calcula cmo tiene que dibujarlo. Es mucho menos trabajo para

el programador, pero al navegador le cuesta mucho ms mantener toda la estructura del modelo de objetos. La capacidad para aplicar estilos a objetos SVG mediante CSS adems de con Javascript es algo que merece la pena tener en consideracin. El canvas solo se puede manipular mediante programacin con Javascript. En esta tabla se resumen stas y otras diferencias:

Si quieres leer una comparacin ms detallada, puedo sugerirte algunas sesiones (de las cuales he sacado esta excelente tabla de resumen, con permiso): Patrick Dengler: "Ideas sobre cundo utilizar SVG y Canvas" Jatinder Mann: "Buceando en el Canvas de HTML5" John Bristowe: "Introduccin al Canvas de HTML5"

Soporte para Audio y Video


Una de las novedades ms interesantes de HTML5 es su capacidad nativa para reproducir contenidos de audio y vdeo. Antes de HTML5 necesitbamos un plug-in como Silverlight o Flash para esto. En HTML5 ahora podemos integrar el audio y el vdeo utilizando las etiquetas <audio> y <video> respectivamente. Desde el punto de vista del programador, los elementos audio y vdeo son de uso extremadamente simple (Ahora vamos a ver con mucho ms detalle sus atributos). Ambos elementos, adems, estn soportados en los principales navegadores (las ltimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). La contrapartida, sin embargo, es que necesitamos cdecs para reproducir audio y vdeo, y cada navegador soporta diferentes cdecs (tienes una excelente explicacin en detalle sobre los contenedores y cdecs de vdeo en http://diveintohtml5.org/video.html.) Pero por suerte esto no es un problema grave. El soporte para audio y video se ha implementado de una manera realmente inteligente, donde tenemos la posibilidad de trabajar con distintos formatos de archivo (el navegador intentar utilizarlos de forma secuencial, si no puede reproducir el archivo con uno, pasa al siguiente hasta que lo consiga).

Una buena prctica recomendada es disponer diferentes orgenes de audio y vdeo para acomodarse a distintos navegadores. Tambin puedes preparar un fallback a Silverlight o Flash. Por ltimo, cualquier texto que aparezca entre las etiquetas de apertura y cierre (o sea, <audio> y </audio>) se mostrar en aquellos navegadores que no soporten el elemento audio o video). por ejemplo: <audio controls="controls"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Tu navegador no soporta el elemento audio. </audio> Con este cdigo el navegador primero intentar reproducir el archivo laughter.mp3. Si no tiene los cdecs adecuados para ello, intentar reproducir el siguiente archivo, laughter.ogg. Si el navegador desconoce por complete el elemento audio, mostrar en pantalla el mensaje "Tu navegador no soporta el elemento audio" en el sitio donde debera verse el control de audio. Un inconveniente que afecta al audio y vdeo de HTML5 es que no integra soporte para la gestin de derechos digitales (DRM). Esto lo tiene que hacer el desarrollador por su cuenta. Puedes leer lo que el W3C expone aqu como justificacin para ello. (Si tienes que utilizar contenidos protegidos mediante DRM, tambin te interesa la Documentacin de DRM de Silverlight que puede ser una solucin ms fcil para este problema). Ahora vamos a ver con ms detenimiento estos nuevos elementos.

Audio
Volvamos sobre el ejemplo de cdigo anterior con el elemento <audio>: <audio controls="controls"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> Ya he explicado el efecto de fallback para cada origen de audio, que como deca, ir probando con cada uno hasta que pueda reproducir un archivo (con suerte). Como puedes ver, aparece un atributo que se llama controls. Con l se muestra en pantalla un bloque de controles de audio que incluye un botn de reproducir/pausa, el tiempo de reproduccin, un botn de silencio (mute) y los controles de volumen. En la mayora de ocasiones es conveniente ofrecer al usuario los controles de audio en pantalla. A m

personalmente me molesta mucho un sitio web con sonido que no pueda parar, silenciar o volver a reproducir. No te pasa esto a ti tambin? Los controles de audio tienen este aspecto en Internet Explorer:

En cada navegador estos controles tienen un aspecto diferente. Aqu abajo puedes ver cmo salen en Chrome (cuando se reproduce una cancin). El control deslizante de volumen se abre hacia abajo cuando pasamos el ratn por encima del icono de sonido, a la derecha.

Y as se ve en Firefox (dndole a la pausa en una cancin). Igual que el de Chrome, tiene un control de volumen emergente (que no se ve aqu), cuando pasamos el ratn por encima del icono del altavoz de la derecha.

Otros atributos muy chulos del elemento de audio son estos:

As, este cdigo de ejemplo no solo muestra los controles de audio en pantalla, sino que empieza a reproducir el sonido de forma inmediata y lo sigue haciendo indefinidamente en un bucle.

<audio controls="controls" autoplay="autoplay" loop="loop"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Tu navegador no soporta el elemento audio. </audio> Si quieres jugar un poco con el elemento <audio> en tu navegador, puedes utilizar un excelente "Editor de Prueba" en http://w3schools.com que te permite editar un ejemplo de cdigo y ver lo que ocurre. Tambin te recomiendo que leas el artculo "Cmo aadir un reproductor de audio HTML5 a tu sitio Web".

Video
Veamos ahora el elemento <video>. <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Tu navegador no soporta el elemento video. </video> Como ya he explicado antes, el elemento vdeo soporta mltiples orgenes que se irn probando hasta dar con uno que se pueda reproducir. Igual que sucede con el audio, el elemento vdeo tiene un atributo controls. En esta captura de pantalla puedes ver el aspecto que tiene en Internet Explorer:

Otros atributos interesantes del elemento video son los siguientes:

De nuevo, si quieres jugar un poco con el elemento <video>, puedes utilizar el editor de pruebas de http://w3schools.com que te deja modificar un ejemplo de cdigo para ver el resultado. Puedes leer ms sobre el vdeo y audio en HTML5 en estos artculos y recursos: 5 Cosas que debes saber para empezar a utilizar <audio> y <video> hoy mismo Cmo aadir un reproductor de audio HTML5 a tu sitio Web W3C Schools: vdeo en HTML5

Desarrollo con HTML5 manteniendo la compatibilidad con navegadores antiguos


Ya hemos visto unas cuantas novedades realmente interesantes de HTMl5, como son los elementos de semntica, la etiqueta canvas para dibujar y el soporte para audio y vdeo. Puedes pensar que todo esto est muy bien, pero que probablemente no podrs utilizar HTML5 puesto que muchos usuarios an no tienen navegadores compatibles con HTML5. Por no hablar de los navegadores que SI soportan HTML5, pero no del todo (solo algunas partes de la especificacin). No todas las nuevas funcionalidades de HTML5 estn soportadas en todos los navegadores, y algunas de ellas aparecen implementadas de forma distinta en cada caso. Pero existe una manera de utilizar estas nuevas funcionalidades sin tener que armar versiones diferentes de tu sitio web para los navegadores antiguos. Podemos utilizar los polyfills. Segn lo define Paul Irish, un polyfill es "un bloque de cdigo que imita una API futura, aportando funcionalidad de fallback a navegadores antiguos." El polyfill cubre las carencias de los navegadores antiguos que no soportan la funcionalidad HTML5 que utilizas en tu sitio web. Es muy recomendable que aprendas a utilizar polyfills, porque te permiten

utilizar HTML5 hoy mismo sin defraudar a los usuarios que acceden a tus pginas con navegadores antiguos. Una forma de disponer de polyfills es incorporar la librera de Javascript Modernizr (aunque existen muchos otros polyfills a tu disposicin). Modernizr incluye capacidad de deteccin de funcionalidad, de forma que puedes comprobar explcitamente si un navegador soporta o no (por ejemplo) el elemento canvas y ofrecer una opcin alternativa si no es el caso. Veamos el ejemplo siguiente. Recuerdas el ejemplo de cdigo que te propona al hablar de los elementos de semntica y la presentacin de la pantalla? Aqu lo tenemos otra vez: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ttulo</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header> <hgroup> <h1>Cabecera en h1</h1> <h2>Subttulo in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Opcin de men 1</a></li> <li><a href="#">Opcin de men 2</a></li> <li><a href="#">Opcin de men 3</a></li> </ul> </nav> <section> <article> <header> <h1>Artculo #1</h1> </header> <section> Este es el primer artculo. Est <mark>destacado</mark>. </section> </article> <article> <header> <h1>Artculo #2</h1> </header>

<section> Este es el segundo artculo. Pueden ser posts de un blog, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Pie de pgina - Copyright 2011</footer> </body> </html> En este cdigo aparecen una serie de elementos HTML5 novedosos no soportados en navegadores antiguos. Recuerda, en Internet Explorer se vea algo as:

Podemos utilizar las herramientas de desarrollo de Internet Explorer para ver qu aspecto tendra en versiones anteriores de IE. En este caso, pulsa F12 para entrar en las herramientas de desarrollo.

Como puedes ver, el Browser Mode (en la barra de men gris de la parte superior) indica que est en IE9. Pulsa sobre el enlace Browser Mode y en el men desplegable, selecciona "Internet Explorer 8" (que no es compatible con HTML5).

Despus de cambiar a un modo de navegador no compatible con HTML5, la pgina se ve as:

Aunque parece un problema gravsimo, realmente tampoco es para tanto. El motivo por el que no funciona es que IE8 no reconoce los elementos HTML5 nuevos que estoy utilizando, y por eso no los aade al DOM, de manera que no podemos aplicarles estilos CSS. Sin embargo, si aadimos una referencia a Modernizr (sin hacer ms cambios en el cdigo!) estos elementos se incrustan por la fuerza dentro del DOM. Descrgate la librera desde http://www.modernizr.com/download/ y aade una referencia en la seccin <head> de esta forma: <head> <meta charset="utf-8" /> <title>Ttulo</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="script/modernizr-2.0.6.js" type="text/javascript"></script> </head> He puesto dos referencias de scripting, una a jQuery y otra a Modernizr. Realmente, en este caso no es necesario jQuery, pero lo vamos a necesitar para el siguiente script, as que lo pongo ya. Con este sencillo cambio ahora consigo que con Internet Explorer 8 la pgina se vea as:

Bueno, no es perfecto pero se parece muchsimo a la versin original que tenemos en Internet Explorer 9. Modernizr ha aadido estos nuevos elementos de HTML5 desconocidos para IE8 en el DOM, y desde el momento en que estn en el DOM, podemos aplicarles estilos CSS. Pero Modernizr hace muchas ms cosas! Date cuenta de que una de las diferencias entre nuestras versiones de IE8 e IE) en esta pgina de ejemplo es que la versin en IE9 muestra unas preciosas esquinas redondeadas en los dos artculos y en la figura, mientras que en IE8. Podemos utilizar Modernizr para arreglarlo. <script type="text/javascript"> if (!Modernizr.borderradius) { $.getScript("script/jquery.corner.js", function() { $("article").corner(); $("figure").corner(); }); } </script> En este script estamos comprobando el objeto Modernizr para ver si dispone de soporte para "borderradius" (una funcionalidad de CSS3). Si no es as, utilizamos un script de jQuery llamado jquery.corner.js (que puedes descargarte desde http://jquery.malsup.com/corner/ y que necesita la referencia extra a jQuery que puse antes). Despus, simplemente llamo al mtodo corner de ese script en mis artculos y figuras para redondearles las esquinas. O BIEN, puedes hacerlo de una manera ligeramente diferente. Modernizr tiene un cargador condicional de recursos (no incluido) que se llama Modernizr.load()y que se basa en Yepnope.js. Con l puedes cargar solo los scripts de relleno (polyfills) que necesites y l se encarga de cargar asncronamente los scripts, en paralelo, lo que algunas veces supone una

mejora notable de rendimiento. Si quieres utilizar Modernizr.load, tienes que incluirlo en una compilacin de Modernizr que tendrs que crearte t mismo en http://www.modernizr.com/download/; no viene incluido en la versin Development. Con Modernizr.load, podemos escribir un script as: <script type="text/javascript"> Modernizr.load({ test: Modernizr.borderradius, nope: 'script/jquery.corner.js', callback: function () { $('article').corner(); $('figure').corner(); } }); </script> En pocas palabras, con esto implementamos la misma funcionalidad que con el script anterior. Modernizr.load primero comprueba la propiedad booleana "Modernizr.borderradius" para ver si est soportada. A continuacin, nope define los recursos que hay que cargar si el resultado de test es false. Dado que IE8 no soporta la propiedad CSS3 llamada "borderradius", cargar el script jquery.corner.js. Por ltimo, en callback indicamos una funcin que debe ejecutarse cuando el script se termine de cargar, pudiendo llamar al mtodo "corner" en mis artculos e imgenes como haca antes. Si quieres avanzar algo ms, puedes ver un tutorial breve de Modernizr.load en la web http://www.modernizr.com/docs/#load Ahora, utilizando cualquiera de ambos scripts, nuestra versin para Internet Explorer 8 (que no es compatible con HTML5), se ve as:

As que, con el empleo de polyfills y herramientas como Modernizr, puedes ya utilizar las nuevas funcionalidades de HTML5 y seguir ofreciendo una experiencia adecuada en navegadores antiguos tambin. Si quieres ms informacin, puedes visitar http://www.diveintohtml5.org/detect.html en donde se describe de forma detallada cmo hace Modernizr para detectar la compatibilidad con las funcionalidades de HTML5.

Resumen
En esta introduccin a HTML5 hemos visto el markup de semntica, el canvas, audio y vdeo y hemos utilizado HTML5 manteniendo la compatibilidad con navegadores antiguos. Pero de todas formas, an hay muchas cosas que no hemos visto: microdatos, almacenamiento, CSS3, etc. Aqu te indico algunos sitios donde puedes seguir aprendiendo HTML5: IE Test Drive aunque no utilices Internet Explorer, es un sitio extraordinario. Tiene montones de demos: demos de velocidad, de HTML5, de grficos y de navegador. Te recomiendo que los pruebes en tu navegador preferido. El sitio tiene tambin muchos enlaces a otros recursos de gran inters. Beauty of the Web presenta los mejores ejemplos de webs que aprovechan las ventajas de la aceleracin por hardware con HTML5 y las capacidades de anclado en la barra de tareas con Internet Explorer 9 en Windows 7 BuildMyPinnedSite todo el cdigo, ideas y ejemplos necesarios para utilizar el anclado y la integracin con Windows HTML5 Labs Este es el sitio donde Microsoft ofrece prototipos de las especificaciones ms recientes e inestables de los organismos de estandarizacin, como el W3C. Puedes jugar con estos prototipos como IndexedDB, WebSockets, FileAPI y el API de Captura de Medios.

Vdeos
Charla de Brandon Satrom: "Application Development with HTML5" en el TechEd 2011 Una exposicin fantstica, de una hora de duracin que aborda todo cuando necesitas saber para desarrollar con HTML5 Presentaciones de HTML5 en el MIX 2011 montones de sesiones sobre HTML5

Herramientas
Muchas herramientas de desarrollo ya soportan HTML5. Puedes probar con estas: Visual Studio 2010 SP1 SP1 aade IntelliSense bsico y validacin para HTML5 y CSS3. Ms informacin en http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-invisual-studio-2010-sp1.aspx.

Actualizacin de Web Standards para Microsoft Visual Studio 2010 SP1 es una extensin de Visual Studio que aade IntelliSense y Validacin actualizadas para HTML5 y CSS3 a Visual Studio 2010 SP1, basado en la actual especificacin del W3C. WebMatrix HTML5 est soportado por defecto de manera nativa (al crear una pgina HTML nueva aade el cdigo doctype y plantilla por defecto de HTML5) Actualizacin de herramientas ASP.NET MVC 3 o El dilogo Nuevo Proyecto incluye una versin para HTML5 de plantillas de proyecto que se pueden activar marcando una casilla o Estas plantillas utilizan Modernizr 1.7 para aadir compatibilidad con HTML5 y CSS3 a los navegadores antiguos. Expression Web 4 SP1 o IntelliSense y soporte para HTML5 en el Editor de Cdigo y la vista de Diseo o Edicin de estilos CSS3 avanzada e IntelliSense o SuperPreview Modo de Interaccin de Pgina y Servicio Online (entre los navegadores remotos se incluyen Chrome, IE8, IE9 y Safari V4 y 5 sobre Windows y Mac) Y aparte de las herramientas de desarrollo, no te olvides de esto: Windows Phone "Mango" contiene Internet Explorer 9 compatible con los sitios web HTML5. Internet Explorer 10 Platform Previews tiene soporte para muchas funcionalidades nuevas de CSS3 y HTML5. La lista complete se puede consultar en http://msdn.microsoft.com/en-us/ie/gg192966.aspx. HTML5 ya est aqu. Atrvete con l y desarrolla sitios web impresionantes!

Você também pode gostar