Professional Documents
Culture Documents
Portada
Monotemticos
Secciones
Blogging
Comunidad
Wiki
RSS
Manuales relacionados
Taller de HTML5 (29 artculos)
Ver el ndice del manual
HTML5
Audio Codec
Enviar un comentario
Internet Browser
Categorias relacionadas
HTML
El autor
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 Marsm an 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!
Jennifer Marsman Desarrolladora Evangelista de Microsoft
ltimas noticias
Sale al mercado un PC bajo Android 4.0 por 75 $ Se llama Rikomagic MK 802+, es un mini PC Android que adems tambin puede funcionar con...
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo econmico...
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"
converted by Web2PDFConvert.com
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 W 3C El captulo de "Dive into HTML5" sobre semntica, titulado "Qu significa todo esto?"
converted by Web2PDFConvert.com
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 "w hite" 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.
converted by Web2PDFConvert.com
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 Bristow e: "Introduccin al Canvas de HTML5"
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
converted by Web2PDFConvert.com
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.
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://w 3schools.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:
converted by Web2PDFConvert.com
De nuevo, si quieres jugar un poco con el elemento <video>, puedes utilizar el editor de pruebas de http://w 3schools.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 W 3C Schools: vdeo en HTML5
converted by Web2PDFConvert.com
<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.
converted by Web2PDFConvert.com
Como puedes ver, el Brow ser Mode (en la barra de men gris de la parte superior) indica que est en IE9. Pulsa sobre el enlace Brow ser Mode y en el men desplegable, selecciona "Internet Explorer 8" (que no es compatible con HTML5).
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://w w w .modernizr.com/dow nload/ 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:
converted by Web2PDFConvert.com
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://w w w .modernizr.com/dow nload/; 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 w eb http://w w w .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:
converted by Web2PDFConvert.com
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://w w w .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 w ebs que aprovechan las ventajas de la aceleracin por hardw are con HTML5 y las capacidades de anclado en la barra de tareas con Internet Explorer 9 en W indow s 7 BuildMyPinnedSite todo el cdigo, ideas y ejemplos necesarios para utilizar el anclado y la integracin con W indow s HTML5 Labs Este es el sitio donde Microsoft ofrece prototipos de las especificaciones ms recientes e inestables de los organismos de estandarizacin, como el W 3C. Puedes jugar con estos prototipos como IndexedDB, WebSockets, FileAPI y el API de Captura de Medios.
Vdeos
Charla de Brandon Satrom: "Application Development w ith 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/w ebdevtools/archive/2011/01/27/html5-amp-css3-in-visual-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 W 3C. 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 El dilogo Nuevo Proyecto incluye una versin para HTML5 de plantillas de proyecto que se pueden activar marcando una casilla Estas plantillas utilizan Modernizr 1.7 para aadir compatibilidad con HTML5 y CSS3 a los navegadores antiguos. Expression Web 4 SP1 IntelliSense y soporte para HTML5 en el Editor de Cdigo y la vista de Diseo Edicin de estilos CSS3 avanzada e IntelliSense SuperPreview Modo de Interaccin de Pgina y Servicio Online (entre los navegadores remotos se incluyen Chrome, IE8, IE9 y Safari V4 y 5 sobre W indow s y Mac) Y aparte de las herramientas de desarrollo, no te olvides de esto: W indow s Phone "Mango" contiene Internet Explorer 9 compatible con los sitios w eb HTML5. Internet Explorer 10 Platform Preview s 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 w eb impresionantes!
www.CampusExplorer.com/WebDesign
Compartir en redes sociales
42
Tweet
71
Recommend
Comentarios
Fueron enviados 6 comentarios al artculo 2 comentarios no revisados 4 comentarios revisados: Enviar un comentario al artculo
0 votos
02/2/2012
Es un tutorial muy rpido, por supuesto se puede profundizar mucho mas, pero da una idea muy completa en poco tiempo. Muchas gracias por esta informacin. Pincha si este comentario es spam
Excelente Articulo.
Por: Nick Muy buen articulo que expone a grandes rasgos lo que se puede hacer con HTML5. Gracias a Desarrollo Web por estos articulos que nos son de gran ayuda. Pincha si este comentario es spam
0 votos
03/2/2012
Muy interesante...
0 votos Ollie
11/2/2012
Una informacin muy valiosa, rpida y ligera para un principiante de HTML5, Felicidades a Desarrollo Web por este tipo de articulos. Pincha si este comentario es spam
Excelente artculo
Por: Serch esta buensimo el artculo, sper bien escrito y concreto, gracias!!! Pincha si este comentario es spam Ver otros 2 comentarios pendientes de revisar Enviar un comentario al artculo
0 votos
21/6/2012
Monotemticos Desde cero HTML, C SS, Diseo Javascript, Ajax ASP, PHP Promocion, Ganar dinero Windows 8
converted by Web2PDFConvert.com