HTML 5

Introduccin a HTML 5 Leccin
curso de actualizacin a html 5
Introduccin a HTML5
Bienvenido al curso de html5 de Conceptivia. A lo largo del mismo vamos a intentar explicarte las caractersticas fundamentales de este lenguaje, que ha surgido con la intencin de cambiar la Web, as en maysculas. Este lenguaje ha conseguido poner de acuerdo a los principales proveedores y soportes de Internet, por lo que puede ser un buen momento para ponerte a estudiar y comenzar a utilizarlo en tus prximas pginas web. Esperamos ponrtelo ms sencillo con los ejemplos que te aportaremos aqu. A la hora de explicar los cambios ms importantes que ha trado este lenguaje repasaremos algunos conceptos bsicos de programacin en html, para que puedas seguir el ritmo aunque no seas un programador experto. Estas son las ventajas que hacen que html5 haya generado tanto revuelo: Es un lenguaje Multiplataforma. Ha sido concebido para que pueda ser interpretado por el mayor nmero posible de lectores. Etiquetas ms claras. Han surgido nuevas eti3
quetas para hacer el cdigo ms semntico. Html4 y html5 son 100% compatibles entre s. Todo el cdigo en html4 seguir funcionando en html5. Video y audio nativos. Adis a los plugins. Webs ms interactivas solo con Html. No hay que apoyarse tanto en CSS y Javascript. Mejora para trabajar offline. Mayores efectos visuales gracias a elementos como Canvas y la utilizacin de SVG. No obstante, no todo es maravilloso en el mundo del html5. Este lenguaje est en pleno proceso de construccin y su compatibilidad con los distintos navegadores no es ideal. Lo reconfortante es saber que estos navegadores estn todos mirando en esta nica direccin y ms pronto que tarde vas a poder llevar a cabo todo de lo que te vamos a hablar aqu.
Etiquetas estructurales
A continuacin vamos a explicaros cules son las principales etiquetas que compone el lenguaje html5. Veremos cules han sido los cambios fundamentales que se han dado respecto a la versin anterior y mostraremos ejemplos de cdigo para que puedas seguir el ritmo aunque tus conocimientos de programacin no sean muy amplios.... Empecemos por la declaracin de documento. Escribe la siguiente lnea de cdigo en tu editor de texto favorito y ya estars programando en html5. <! DOCTYPE html> Es un DOCTYPE mucho ms simple que en versiones anteriores y te permite usar todas las habilidades de html5 sin que nada de lo que ya est en la pgina se rompa. A continuacin os presentaremos las principales etiquetas html5 de nueva creacin. A pesar de que no se comporten de una manera especial, lo hacen como un <div> o un <span>, tienen un significado superior a estos elementos.
<header> Esta etiqueta la debes utilizar como contenedor de la cabecera de la pgina o de una seccin. Puedes incluir aqu informacin adicional como logos o ayudas de navegacin. <nav> Dentro de esta etiqueta debes insertar los links de navegacin principal de la pgina. Slo puedes tener un <nav> por pgina. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul> y aunque no sea un requerimiento, habitualmente se sita dentro de la etiqueta <header>. <footer> Aqu se suele especificar informacin acerca de la pgina o seccin. Quin es el autor, temas de copyright y links hacia fuentes de informacin adicional. Con estas tres etiquetas se ha tratado de reflejar, algo que ya estaba siendo utilizado por los desarrolladores web. Exista una convencin del lenguaje en el que se tenda a describir el contenido y uso de los divs utilizando los nombres de las clases y el atributo id. El uso de etiquetas como <div id=header> ya no ser necesario. El uso de estas etiquetas y de otras que detallaremos a continuacin ayudar a definir
6
mejor los distintos espacios de tu documento. <aside> El nombre de esta etiqueta es igual de descriptivo que cualquiera de las que hemos visto hasta aqu. En ella incluiremos informacin que est relacionada con todo lo que la rodea pero que tambin puede funcionar de manera independiente. Aqu podemos incluir lo que conocamos como sidebar, una estructura que est presente en muchos diseos. <section> Esta etiqueta se ha generado para incluir en ella toda la informacin que puede ser agrupada temticamente o est relacionada. A continuacin trataremos de clarificar ms esta definicin comparando esta etiqueta con <article>. <article> Entre <article> y </article> ir encerrado aquel contenido que puede ser entendido como un ente individual. Usando un ejemplo, una entrada de un blog es perfecta para ir dentro de la etiqueta <article>. Podemos considerar <article> como un <section> ms especializado. Un matiz de la etiqueta <section> y que la diferencia de <article> es que deber incluir al menos una head tag (h1, h2, etc.). Es decir, una seccin de7
ber estar dentro del esquema jerrquico de la pgina. <section> es el ms genrico entre todos los elementos estructurales nuevos, ya que solo trata de agrupar contenido relacionado entre s. Este ltimo detalle es el que lo diferencia de un <div> corriente. Una particularidad de <article> es que al ser un contenido que puede ser considerado un todo, puede tener sendas etiquetas <header> y <footer>. A menudo la cabecera de un artculo da el ttulo a toda la pgina. En ese caso, ese contenido es perfecto para ir dentro de la etiqueta <article>.
Caso prctico
Vamos a ilustrar lo visto hasta ahora con un ejemplo. Este es un ejemplo de cmo quedara la entrada de un blog, utilizando todas las etiquetas que hemos visto hasta el momento. <!DOCTYPE html > <html> <head> <meta charset=UTF-8 />
 <title>Ttulo de la pgina</title> </head> <body> <header>  <h1>Blog</h1> <nav>  <ul> <li><a href=/Archivos/>Archivos</a></li> <li><a href=/Nosotros/>Nosotros</a></li> </ul> </nav> </header> <section> <h1>Artculos de esta seccin</h1> <article>
9
<h2>Artculo 1</h2> <p>Texto del artculo 1</p> </article> <article> <h2>Artculo 2</h2> <p>Texto del artculo 2</p> </article> </section> <aside>  <h2>Side Bar de la Pgina</h2> <p>Texto del Side Bar</p> </aside> <footer>  <p>COPYRIGHT &COPY; 2011 <a href=http://paginadelcreador.com>Link apuntando a la pgina del autor</a>. </footer> </body> </html> Fjate en qu todas las etiquetas se han cerrado correctamente con su cierre equivalente </etiqueta_de_cierre> y observa los comentarios de cdigo
10
que siguen este esquema , porque utilizados convenientemente te ayudarn a recordar la estructura y funcionamiento de tus futuras creaciones. Con el CSS justo, este cdigo sera interpretado por los navegadores como puede verse en la siguiente imagen. Observamos cmo las nuevas etiquetas estructurales pueden reemplazar casi completamente todos los <div> que han sido utilizados hasta la aparicin de html5. Esto no supone que haya que dejar de emplear la etiqueta <div>. Para aquellos casos en los que necesites usar un contenedor con fines estilsticos el <div> seguir siendo el elemento adecuado.
Otras etiquetas
Vamos a continuar explicando otras etiquetas que han aparecido gracias a html5. <hgroup> Habr casos en los que necesites incluir mltiples ttulos en el mismo <header>. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar al posicionamiento en buscadores, permitiendo usar otro h1 en el sitio.
11
En el Xhtml actual, slo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO (Search Engine Optimization), por lo que tu pgina perdera puestos en el ranking, por decirlo de manera coloquial. Gracias al html5 puedes estructurar tus head tags de una manera ms completa. Las etiquetas semnticas, a pesar de todo lo que hemos explicado no son las causantes de la expectacin que ha generado html5. Video, audio y animacin vectorial son las etiquetas que mayores cambios van a traer a la Web. Ellas van a ser las causantes de que los plugins vayan cayendo en desuso dentro de las pginas web ms habituales. <video> y <audio> Estas etiquetas se utilizan para insertar video y audio respectivamente, sin la necesidad de utilizar plugins. Son muy fciles de utilizar pero cada navegador soporta codecs diferentes tanto de video como de audio, lo que hace necesario recodificar los materiales en mltiples formatos. <canvas> Un rea de dibujo y animacin vectorial y de bitmaps controlado mediante un API Javascript.
12
<svg> Esta etiqueta se utiliza para insertar dibujos y animaciones. Estos dibujos y animaciones debern corresponder al estndar abierto SVG (Scalable Vector Graphics).
Etiquetas eliminadas
Adems de los elementos y atributos nuevos que hemos comentado, html5 ha eliminado algunos. Los atributos que desaparecen son los siguientes: align link, vlink, alink bgcolor height and width scrolling (dentro de los iframes) valign hspace, vspace cellpadding, cellspacing y border de las tablas target font marquee
13
Etiquetas de formularios
A continuacin vamos a detallar los cambios que ha sufrido la programacin de formularios. Los cambios ms importantes se presentan en la etiqueta <input *> que con la llegada de html5 ha ganado capacidad, con lo que el soporte para la creacin de formularios puramente con html se ha visto aumentado. Han surgido atributos nuevos que permiten cajas tipo email que se autovalidan, calendarios tipo date, sliders, rangos, nmeros etc. A continuacin te presentamos cul sera el esqueleto de un formulario muy estndar. Fjate en el atributo type, ya que all definiremos de qu tipo es la caja <input>. Este atributo tambin define qu validacin se aplicar a ese campo de texto. Estos atributos restringen el valor del campo a un email valido, a una URL absoluta y a un telfono con el formato correcto (que deberemos especificar con un atributo pattern), respectivamente. Si el usuario introduce valores no vlidos, el formulario no ser enviado y el navegador desplegar una alerta. <form>  <fieldset> 
14
<legend>Contacto</legend> <p><label>E-mail<input type=email name=email required autofocus ></label></p> <p><label>Web site <input type=url name=website required ></label></p> <p><label>Telfono<input type=telname=telefono placeholder=123-123-123 required> </label></p> </fieldset> <p><button type=submit>Enviar</button></p> </form> Los navegadores que soportan estos nuevos atributos de <input> son los siguientes: Internet Explorer 10 Firefox 4.0+ Chrome 10+ Safari 10+ Opera 11.0+ iOS Android Los navegadores que no soporten estas caractersti15
cas (type) despliegan un campo de texto corriente. Observa que hemos incluido el atributo required en cada uno de los <input>, porque queremos hacer que estos campos sean obligatorios. Este atributo puede especificarse tantas veces como sea necesario dentro del formulario. Si el usuario dejase en blanco cualquiera de estos campos requeridos, no se enviaran los datos del formulario y se desplegara un mensaje de alerta. Esta alerta es visualmente distinta entre navegador y navegador. Si utilizamos un navegador que no soporta el atributo required, simplemente lo obviar. En el caso del <input> de tipo email de este ejemplo, hemos incluido el atributo autofocus, que como podrs intuir, hace que el cursor se site en ese campo en el momento en el que se carga la pgina. Este atributo solo puedes utilizarlo una vez por pgina. En cuanto al <input> de tipo tel, hemos usado el atributo placeholder que permite definir un texto que servir como instruccin para la introduccin de datos en ese campo en particular. En este ejemplo, estamos pidindole al usuario que escriba su nmero de telfono con el siguiente formato: 123-123-123. Este texto de ayuda, desaparecer en cuanto el usua16
rio haga clic en el campo telfono y si abandona dicho campo sin haberlo modificado, este texto reaparecer. Este comportamiento es habitual en multitud de formularios que encontramos en la Web, porque hasta la aparicin de html5 se utilizaba javascript para conseguir este efecto. Al igual que los dos atributos comentados anteriormente, si el navegador que utilizamos no da soporte a este atributo, simplemente se obviar. Los nuevos tipos de <input> han tratado de aplicar funcionalidades que se venan desarrollando con javascript, as que no es dificultoso encontrar libreras de javascript que simulen estos comportamientos en aquellos navegadores que no soporten algunos de los atributos aqu expuestos. Dos libreras con las que se pueden desarrollar funcionalidades como las que introduce html5 son Modernizr, jQuery - jQuery UI.
17
Boilerplate, Modernizr, Inizializr
2
Leccin
A continuacin vamos a presentarte tres proyectos que pueden hacer tu vida como diseador o programador web mucho ms fcil. Se trata de Boilerplate, Modernizr e Initializr. Estos proyectos te aportarn un punto de partida muy robusto para tus prximos proyectos en html5.
Initializr
Empezaremos por el ms sencillo. Initializr, es un generador de plantillas html5 que, al igual que Boilerplate, te permite generar un punto de partida slido desde el que empezar a desarrollar tu proyecto. Iniatializr te permite determinar aquellas propiedades que ms te interesan, ya que es posible que muchas de las caractersticas que prev Boilerplate superen las necesidades de tu web. Visita su sitio y vers cmo te dan tres opciones para generar una plantilla de inicio en html5. La ms sencilla de las opciones, y una buena manera de aprender a programar, es la descarga de una plantilla muy bsica. A medida que vayas entendiendo lo que pasa en el cdigo, podrs ir configurando tu plantilla utilizando los otros dos configuradores. http://initializr.com
21
Boilerplate
A continuacin te presentamos Boilerplate. Al igual que Initializr, Boilerplate es un punto de partida muy potente ya que est basado en un cdigo que contempla un montn de posibilidades y trucos de gente muy experimentada en la programacin web. Este proyecto se ocupar de que tu pgina sea compatible con todos los navegadores, mediante el uso correcto de los nuevos tags html5 y hacks css. Gracias a esta plantilla tu pgina se ver bien en dispositivos mviles y estar optimizada para motores de bsqueda. Este proyecto se basa en varios aos de investigar las tcnicas ms actuales y correctas de programacin y si puede pecar de algo, es precisamente de ser demasiado extenso. De hecho, Boilerplate contiene entre otras cosas: Un archivo index.html (que ser el archivo principal de tu web) programado con cdigo valido en html5, y que incluye dos libreras de javascript bastante recurrentes como Modernizr (de la que hablaremos ms adelante) y jQuery. Adems, este archivo contempla que pueda ser visto mediante Internet Explorer y utiliza comentarios condicionales que asignarn clases css a los dis22
tintos tags, dependiendo de las versiones de este navegador, haciendo ms fcil la generacin de estilos propios para cada una de ellas. Dentro de este documento encontrars adems un script que se ocupa de que tu pgina sea rastreada por Google analitycs. El archivo css (style.css) incluye un reseteo de las propiedades que suelen ser consideradas de manera distinta por los navegadores. Esta limpieza, permite ir aadiendo los estilos de cero sin que interfieran particularidades css predefinidas en cada navegador. Puedes encontrar tambin una batera de clases que aportan una serie de estilos bsicos para la pgina. Algunas de ellas se ocuparn de normalizar las fuentes que utilices en la pgina, para que se vean igual en los distintos navegadores. Hay incluidas tambin, varias clases que aportarn los estilos si se accede a la pgina desde un dispositivo mvil. Iconos para mviles, favicon Un archivo de configuracin para el servidor en el que va a ir alojada la pgina (.htaccess).
23
Uso de Boilerplate
Te preguntars, y ahora qu hago con todo esto? En primer lugar debes usar el archivo index.html como base de todos los documentos html que compongan tu web. Utiliza la estructura que te ofrece esta plantilla para profundizar en ella y darle estilos a la pgina y en la medida en que te vayas sintiendo ms cmodo, modifcala a tu gusto. Dentro del html debers personalizar las etiquetas <meta>, el cdigo que ser utilizado por google analitycs etc. Acurdate tambin de ajustar los iconos favicon y para dispositivos mviles, segn las necesidades de tu proyecto. Al igual que hemos comentado cuando hablbamos de Initializr, lo primero que necesitas, es entender qu funcin tiene el cdigo que ests utilizando. Para ello Boilerplate dispone de una amplia documentacin en su sitio web, en la que te detallan los pormenores de cada parte del cdigo. Junto con ello, estate atento a los comentarios que vienen in situ en el propio cdigo. Una vez que entiendas lo que hace cada prrafo del cdigo (no hace falta que entiendas cada lnea, por lo menos al principio), podrs eliminar todo aquello que tu pgina no necesite. De esta manera llegars
24
a personalizar esta plantilla, adaptarla a tus necesidades y volverla a utilizar como punto de partida de futuros proyectos. Te invitamos a visitar la gua oficial de html5 Boilerplate (http://net.tutsplus.com/tutorials/html-css-techniques/the-official-guide-to-html5-boilerplate/) y el sitio oficial del proyecto (http://html5boilerplate. com/).
Modernizr.
Html5 es una tecnologa an en desarrollo que puede generar problemas ya que cada navegador tiene un soporte especial de la misma. Es decir, cada navegador lee unas caractersticas de html5 y otras no, de forma individual. Modernizr es una librera de javascript con la que puedes detectar si el navegador tiene soporte para mltiples capacidades de html5 y css3 y en el caso de que no soporte una que necesites, programar una alternativa para ese navegador en concreto. Cuando tu navegador lee una pgina web construye lo que conocemos como DOM (Document Object Model), una coleccin de objetos que representan a los elementos html que componen la pgina. Cada uno de los elementos tiene otro objeto que lo re25
presenta en el DOM. Existen objetos globales como window y document que no son especficos de una pgina concreta. Todos los objetos del DOM comparten un conjunto de propiedades comunes pero hay algunos que tiene ms que otras. De hecho html5 aade propiedades a algunos de estos objetos y ah es dnde entra Modernizr, ya que recorrer el DOM buscando estas nuevas caractersticas para comprobar si el navegador las admite o no. Modernizr hace estas comprobaciones nada ms cargar la pgina. Esta librera genera un objeto global llamado Modernizr que contiene una propiedad booleana (true o false), para cada una de las propiedades que es capaz de detectar. Si el navegador puede utilizar la API del elemento canvas, Modernizr.canvas ser igual a true. Actualmente Modernizr registra si existe soporte para ms de veinte propiedades html5 y css3 y asigna a cada una de ellas clases y una propiedad javaScript respectivamente. Vamos a ver un ejemplo de uso, poniendo como ejemplo la etiqueta <audio>. Utilizaremos Modernizr para saber si el navegador del usuario soporta esta etiqueta y en el caso de que no la soporte, desplegaremos un <div> indicando esta circunstancia.
26
En primer lugar debes descargarte esta librera desde su sitio http://modernizr.comhttp://modernizr.com . Dentro del <head> de tu documento debes hacer una referencia a la ubicacin de esta librera en la estructura de carpetas de tu proyecto. En el caso de que sites este archivo dentro de una carpeta que se llame js (recomendado) situada en el mismo nivel que tu archivo index.html, esta referencia tendra el siguiente aspecto: <script src=js/modernizr-1.6.min.js></script> El html tiene este aspecto: <audio> <source src=ejemplo.ogg> <source src= ejemplo.mp3 /> </audio> <div id=error><p>Tu navegador no tiene soporte nativo de audio</p></div> Se trata de un ejemplo muy bsico de la utilizacin de la etiqueta <audio>, que veremos posteriormente con mayor detalle. Una vez que se carga la pgina, Modernizr detecta si el navegador puede incluir <audio> y posteriormente, le asigna un valor (true o false) a la propiedad Modernizr.audio y define una clase css audio en la
27
etiqueta <html> si el navegador permite utilizar <audio>, o una clase no-audio, en el caso contrario. Partiendo de aqu puedes utilizar Modernizr.audio y dar estilos a las clases css mencionadas para hacer que tu pgina se adecue tanto a la posibilidad de que se pueda usar el elemento <audio> como si no. El css tendra este aspecto. En l se contempla que no se despliegue el <div> con un id controles, en el que, por ejemplo iran enmarcados los botones del reproductor de audio, si el navegador no puede con la etiqueta <audio>. El div con el mensaje de error que comentbamos solo se desplegar si no podemos contar con el elemento <audio>. .audio #error { /*Aqu puedes especificar los estilos correspondientes a cuando se pueda incluir <audio> */ display:none; } .no-audio #error { display:auto; } .no-audio #controles { display:none; }
28
El script de Javascript tendr este aspecto. Sitalo antes de la etiqueta </body> para tener garantizado que tanto la librera como la pgina est cargada, cuando este script entr en funcionamiento: <script> if (Modernizr.audio) { //Aqu incluiras funciones para el caso de que el navegador soporte <audio> } else{ //Aqu incluiras funciones para el caso de que el navegador no soporte <audio> } </script> Si no ests familiarizado con este lenguaje, plantate adquirir conocimientos en este sentido ya que actualmente se est convirtiendo en el lenguaje predominante para enriquecer las webs. Si quieres saber ms sobre Modernizr no dudes en consultar su documentacin en la siguiente direccin. All encontrars ejemplos prcticos para la correcta utilizacin de esta librera: http://modernizr.com/docs
29
Vdeo
3
Leccin
Etiqueta <video>
El elemento <video> ha sido diseado para que se utilice sin necesidad de un script que detecte los formatos del archivo. Puedes especificar mltiples archivos de vdeo y cada navegador que soporte esta etiqueta reproducir aquel archivo que tenga el formato concreto que necesite. Los navegadores que no puedan con esta etiqueta la ignorarn, por lo que es fcil programar un fallback y determinar un plugin para reproducir los videos en estos navegadores antiguos. Los navegadores que leen video son los siguientes: IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+ y Safari Mobile 1.0+. Si quieres tener un control total sobre la reproduccin del vdeo vas a necesitar javascript. Este elemento tiene una API con una serie de propiedades y mtodos para controlar la reproduccin del vdeo. Si el navegador puede leer html5 existir el objeto DOM que se genera para representar a <video> . Ahora puedes usar Modernizr para detectarlo, usando Modernizr.video o buscando en concreto los formatos que necesita el navegador del que se trate (Modernizr.video.webm, Modernizr.video.ogg, Modernizr.video.h264):
33
if (Modernizr.video) { //Tenemos video nativo } else { //Necesitaremos un plugin para reproducir el video } Para incluir un vdeo con html5 solo necesitas la siguiente lnea: <video src=ejemplo.mp4></video>
Atributos de la etiqueta Vdeo

En el atributo src definirs la ubicacin del archivo. Si existe ms de un archivo debes usar el elemento <source>, como podrs ver en un ejemplo posterior. Adems de src, puedes utilizar otros atributos: preload indica que el video comenzar a descargarse nada ms cargar la pgina (pero no a reproducirse). Este atributo tiene sentido si la pgina ha sido diseada para mostrar un video. Si el video es solo un complemento en una de las secciones de la pgina es preferible usar preload=none o preload=metadata. autoplay determina que el video se reproduzca en el momento en que se cargue la pgina.
34
controls indica que el reproductor llevar botones para controlar la reproduccin. Estos botones vienen predefinidos en cada navegador, aunque pueden ser modificados con javascript y css3. <video> por defecto, no mostrar ninguna botonera. Puedes generar una y utilizar mtodos y propiedades de la API como play(), pause(), currentTime, volume y muted. type, este atributo ayuda al navegador a identificar el tipo MIME del video. De esta manera no tendr que comenzar a descargarlo para determinar si puede reproducirlo o no. As, el ahorro de ancho de banda es evidente y el usuario ver el video antes. Incluirlo es considerado como buena prctica. El formato de este atributo es el siguiente type = video/formato_del_video; codecs=codec_de_video, codec_de_audio. Con el atributo type le estamos dando al navegador informacin de tres tipos: el formato del contenedor de video, el codec de video y el codec de audio( respectivamente). Fjate tambin en la manera en que se ponen las comillas, porque difiere de lo que hemos visto hasta ahora. width y height. El navegador definir las medidas del video dependiendo de estos dos atributos, sin tener en cuenta su tamao original. Si no los defines, se respetarn las medidas originales.
35
En la medida de lo posible, para que no se den perdidas de calidad, respeta las medidas originales del video. Estos atributos ayudan al navegador a reservar el espacio necesario sin tener que esperar a descargar estos datos del propio video haciendo el render ms rpido. Estos atributos tienen que definirse con un nmero entero en pxeles. poster. Con este atributo consigues que se despliegue una imagen para el video hasta que el usuario trate de reproducirlo. Esta imagen es til cuando el video tarda en cargarse. Debes saber, no obstante, que cada navegador despliega esta imagen a su manera. Su formato es el siguiente: poster=poster_para_el_video.png. loop. Como podrs imaginar, este atributo empuja a que el video se reproduzca una y otra vez.
Codificar vdeos
Existe un problema a la hora de incluir el tag <video> en tu pgina web. Cada navegador utiliza un codec distinto para leer estos archivos por lo que el video deber estar codificado en un formato que ese navegador pueda leer o, si no, dar igual que acepte el elemento <video> porque no se reproducir nada.
36
Lamentablemente no existe una alternativa definitiva y universal. Por lo tanto, tendrs que codificar tus videos al menos en dos formatos para asegurarte de que funcione en todos los navegadores. Hay tres codecs principales h.264, VP8 y Theora. Para evitar problemas debes usar al menos h.264 y Theora o VP8. Para curarnos en salud, en el ejemplo que veremos a continuacin utilizaremos los tres. Tendremos un problema similar con el elemento <audio>. La etiqueta <video> te permite ir definiendo formatos en el orden en que quieras que sean considerados, y de esta manera el navegador reproducir el video en el primer formato en el que sea capaz de hacerlo. Vamos a aplicar todo lo que hemos visto hasta ahora en el siguiente ejemplo: <video width=640 height=360 controls> <source src= video.mp4 type=video/mp4; codecs=avc1.42E01E, mp4a.40.2/> <source src= video.ogv type=video/ogg; codecs=theora, vorbis /> <source src=video .webm type=video/webm; codecs=vp8, vorbis> <object type =application/x-shockwave-flash data=player.swf?file=video.flv> <param name=movie value=player. swf?file=video.flv>
37
<a href=video.mp4>Este enlace es contenido fallback y te puedes descargar el video gracias a l</ a> </object> </video> Cuando el navegador lea este cdigo, primero tratar de reproducir el video mp4, si no es capaz lo intentar con el ogv, despus con el webm y si an no puede reproducirlo sabremos que no soporta la etiqueta video. Aqu es donde le ofrecemos una alternativa o fallback, insertando un reproductor flash y un enlace para que si nada de esto funciona (incluido el reproductor flash), el usuario pueda descargarse el video. Los navegadores que soporten html5 ignorarn tanto el <object> , como cualquier hijo del elemento <video> que no sea <source>. Para codificar tu video con los distintos formatos y codecs que hemos mencionado aqu, puedes usar los siguientes convertidores: Firefogg y ffmpeg para los archivos .ogv. HandBrake para los archivos .mp4. Ffmpeg para los archivos .webm.
38
Audio
4
Leccin
Etiqueta <audio>
A continuacin hablaremos de la nueva etiqueta <audio>. Al igual que ocurra con la etiqueta <video>, gracias a html5 no necesitaremos plugins externos y nos libraremos de los objects y de los embeds. Podremos incluir audio directamente en el navegador, manipularlo con Javascript y darle estilos con CSS. La manera ms sencilla para incluir sonido es aadir a la etiqueta <audio>el atributo src con la ubicacin del archivo. Para hacerlo un poco ms real y usable, hemos incluido el atributo controls al siguiente ejemplo, para que el navegador emplee los controladores o botones de sonido que incluye por defecto: <audio src=ejemplo.ogg controls> </audio> En este ejemplo hemos utilizado un archivo .ogg. Existe una problemtica similar a la que encontramos anteriormente con la etiqueta <video>, ya que existen otros formatos y hay que decantarse por aquellos que ms aceptacin tienen entre los distintos navegadores. La especificacin del lenguaje html5 no marca cul es el formato a utilizar, por lo que cada navegador ha elegido aquel que mejor se adapta a sus caractersticas tcnicas.
40
En la siguiente tabla vemos cul es el cdec utilizado por cada navegador para procesar el sonido insertado con la etiqueta <audio>:
Como seguramente ya te temas, para llegar al mximo de audiencia posible debers utilizar diferentes codificaciones para tus archivos sonoros dentro de <audio>. Una vez realizadas las distintas codificaciones, html5 nos lo pone fcil para definir ms de un archivo de sonido. Hemos visto una solucin muy similar cuando hablbamos de videos. La etiqueta <audio> permite utilizar otra etiqueta llamada <source> que nos facilita declarar las rutas en las que el navegador deber buscar los archivos de sonido que han sido codificados de manera distinta. Con la utilizacin de distintas etiquetas <source>, el atributo src pierde sentido, ya que ste slo es til si vamos a utilizar un nico formato de archivo.
41
A continuacin vers un ejemplo en el que ponemos en prctica lo dicho hasta ahora y en el que vamos a definir dos tipos de codificacin, que es el mnimo aconsejado (ogg y mp3 o wav): <audio controls> <source src=ejemplo.ogg> <source src= ejemplo.mp3> </audio>
Atributos de la etiqueta Audio

Las etiquetas <audio> y <video> comparten otras caractersticas, adems de src, source y controls, por lo que haremos un breve repaso de lo que explicamos cuando hablbamos de <video>. preload sugiere al navegador que empiece a descargar el sonido. La ltima opcin la tiene el propio navegador que puede no comenzar la precarga del audio si el ancho de banda no es suficiente. Si el audio es solo un complemento en una de las secciones de la pgina es preferible usar preload=none o preload=metadata que precargar informacin como el nmero de pistas y su duracin. autoplay determina que el sonido se reproduz42
ca en el momento en que se cargue la pgina. type ayuda al navegador a identificar el tipo MIME del audio. De esta manera no tendr que comenzar a descargarlo para determinar si puede reproducirlo o no. El formato de este atributo es el siguiente type = audio/formato_del_audio. Las tres opciones que barajamos son type = audio/wav, type = audio/mpeg y type = audio/ ogg para los archivos wav, mp3 y ogg respectivamente. loop determina que el audio se reproduzca una y otra vez. Desaconsejado. muted. Este atributo hace que el volumen por defecto del sonido sea 0. Si el usuario quiere escucharlo tendr que activar el volumen. mediagroup permite reproducir distintas pistas de un mismo recurso de sonido en distintas partes de una pgina. Para hacer efectivo este atributo es necesario utilizar la API de Javascript.
Contenido alernativo
Es conveniente que definas un contenido alternativo para aquellos usuarios que utilicen un navega43
dor que no tolere la etiqueta <audio>. La manera de incluir este contenido es idntica a la que vimos al hablar de <video>. En el ejemplo que te ofrecemos a continuacin, el contenido alternativo es un reproductor flash: <audio controls> <source src=ejemplo.ogg type=audio/ogg> <source src= ejemplo.mp3 type=audio/mpeg> <object data=player.swf?audio= ejemplo.mp3> <param name=movie value=player.swf?audio= ejemplo.mp3> </object> Tu navegador no es capaz de reproducir nuestro sonido de ejemplo. Puedes descargarlo <a href=ejemplo.ogg>aqu</a> </audio> Recuerda que, a excepcin de <source> los elementos secundarios de la etiqueta <audio>sern ignorados. Por lo tanto, todos los navegadores que sean capaces de leer html5 ignorarn el reproductor flash que hemos situado como contenido alternativo. Observa cmo adems hemos previsto que el navegador pueda no ser capaz de reproducir contenidos en flash, incluyendo un link para la descarga del archivo de sonido.
44
Otra estrategia, como ya sabes, sera utilizar Modernizr para conocer las capacidades del navegador en este sentido. Si existe el objeto DOM que representa a <audio> podrs detectarlo usando Modernizr.audio, de la siguiente manera: if (Modernizr.audio) { //Tenemos audio nativo } else { //Necesitaremos un plugin para reproducir el sonido }
Seguridad del audio y del vdeo

Queremos sealar que html5 no ofrece seguridad anti copia. Un archivo insertado mediante las etiquetas <audio> o <video> es tan fcil para el usuario de guardar en el disco duro como las imgenes <img>. Para los casos en los que sea necesario un nivel mayor de seguridad es conveniente la utilizacin de un plugin. Si adems de las funcionalidades que ofrecen los atributos que hemos descrito antes, quieres tener mayor control sobre la reproduccin de los elementos media (<audio> y <video>) existe una API de
45
Javascript que te proveer de distintos eventos y mtodos.
Mtodos de reproduccin
canplaytype(type); Este mtodo detecta si el navegador puede reproducir el tipo de archivo media que le pasas como argumento (type) currentTime Propiedad que devuelve la posicin actual de la reproduccin, en segundos. duration Duracin del archivo en segundos. play(); y pause(); hacen exactamente lo que te imaginas. Vamos a ilustrar estos mtodos con un par de ejemplos prcticos. Con el siguiente cdigo el usuario podr saltar a un punto concreto de la reproduccin del sonido utilizando el mtodo play(); combinado con la propiedad currentTime. Observa como prescindimos del atributo controls para utilizar una botonera propia.
46
<audio> <source src=ejemplo.ogg type=audio/ogg> <source src= ejemplo.mp3 type=audio/mpeg> <object data=player.swf?audio= ejemplo.mp3> <param name=movie value=player.swf?audio= ejemplo.mp3> </object> Tu navegador no es capaz de reproducir nuestro sonido de ejemplo. Puedes descargarlo <a href=ejemplo.ogg>aqu</a> </audio> <button title=Saltar 30 segundos onclick=playAt(30);>30 segundos</button> <script> function playAt(segundos){ var audio = getElementsByTagName(audio)[0]; audio.currentTime = segundos; audio.play(); } </script>
document.
Quiz hayas echado de menos un mtodo que sirva para detener la reproduccin. Para conseguir esta funcionalidad hay que utilizar el mtodo pause (); combinado con la propiedad currentTime, como veremos a continuacin:
47
<audio> <source src=ejemplo.ogg type=audio/ogg> <source src= ejemplo.mp3 type=audio/ mpeg> <object data=player.swf?audio= ejemplo.mp3> <param name=movie value=player.swf?audio= ejemplo.mp3> </object> Tu navegador no es capaz de reproducir nuestro sonido de ejemplo. Puedes descargarlo <a href=ejemplo.ogg>aqu</a> </audio> <button title=Saltar 30 segundos onclick=playAt(30);>30 segundos</button> <button title=Detener la reproduccin onclick=stopAudio();>Stop</button> <script> function playAt(segundos){ var audio = getElementsByTagName(audio)[0]; audio.currentTime = segundos; audio.play(); } function stopAudio(){ var audio = getElementsByTagName(audio)[0]; audio.currentTime = 0;
48
document.
document.
audio.pause(); } </script>
49
Canvas
5
Leccin
Etiqueta <canvas>
Sin duda, la etiqueta <canvas> es una de las que ms revuelo ha generado con la incursin de html5. Como vers ms adelante, este elemento combinado con Javascript puede alcanzar cotas imposibles para versiones anteriores de html. Este elemento te permite dibujar formas con lneas, arcos y rellenos directamente en un bloque rectangular de tu pgina. Adems de dibujar formas manualmente, este elemento te permite tomar la informacin o los datos en bruto de un archivo de imagen externo y redibujarlo all mismo. De la misma manera que puedes dibujar, podrs borrar parcial o totalmente lo que ya est dibujado en el canvas, lo que nos lleva a ser capaces de generar animaciones simplemente dibujando un objeto, limpiando el canvas y redibujando dicho elemento en una posicin distinta. Podrs definir igualmente transformaciones y efectos a aplicar en el canvas. Adems este elemento es trasparente por defecto, por lo que se pueden apilar varios, para generar efectos ms complejos. Esto convierte el canvas en una imagen dinmica ya que tenemos acceso a toda la informacin que compone esa imagen y podemos manipularla en el momento. No es simplemente un archivo externo, cerrado, con un formato png o jpg insertado mediante la etiqueta <img>.
52
La manera ms simple de declarar un <canvas> es la siguiente: <canvas id="mi_canvas"></canvas> Tambin puedes generarlo con javascript de la siguiente manera: var mi_canvas = document.createElement("canvas"); mi_canvas.id = "mi_canvas"; document.body.appendChild(mi_canvas); De la misma manera que definamos contenido alternativo para otras etiquetas propias de html5, el elemento <canvas> tambin permite hacerlo para todos aquellos navegadores que no sepan interpretarlo.
Definir dimensiones
Puedes definir el ancho y alto de canvas que ms te convenga para tu proyecto, pero ten en cuenta que este ancho y alto son atributos del DOM y no atributos CSS. Por tanto, debers definir estas dimensiones en el propio archivo html o mediante javascript, para que el navegador sepa cul es el espacio sobre el que puede dibujar.
53
En cambio, si tratas de cambiar las dimensiones con CSS lo nico que logrars, ser deformar el canvas y lo que ya est all dibujado. Si no defines dichas dimensiones, el navegador le aplicar al canvas unas por defecto (300 x 150 pxeles). Puedes definir el tamao del canvas con javascript de la siguiente manera: mi_canvas.setAttribute(width, 200); mi_canvas.setAttribute(height, 200); O bien: mi_canvas.width = 200; mi_canvas.height = 200; Como comentbamos anteriormente, si tratas de hacer algo as: mi_canvas.style.width = 200px; mi_canvas.style.height = 200px; O bien: mi_canvas.style.width = 200px; mi_canvas.style.height = 200px; No conseguirs cambiar la dimensin de la zona di54
bujable sino que estirars o comprimirs el propio elemento canvas, deformando as el bitmap (mapa de bits) que pueda estar ya dibujado. Lo que estamos explicando aqu es similar a la diferencia que existe entre modificar las dimensiones del lienzo y cambiar las de la propia imagen en un programa de edicin de imgenes. Si quieres, por ejemplo, que las dimensiones en pxeles (dibujables) del canvas se ajusten a las dimensiones de la ventana del navegador del usuario, necesitas hacer algo as: window.onresize = function() { mi_canvas.width = document.documentElement. clientWidth; mi_canvas.height = document.documentElement. clientHeight; }; Con este cdigo el canvas responder a cada evento de redimensin de la ventana del navegador. El elemento canvas puede redimensionarse las veces que haga falta y ste, adems de adaptarse al nuevo tamao, se limpiar y volver a dibujarse o renderizarse con el nuevo tamao. Sabiendo esto, podemos utilizar un truco para limpiar el canvas, que es asignarle nuevamente su propio tamao:
55
function limpiar(mi_canvas) { mi_canvas.width = mi_canvas.width; } Para evitar desproporciones es conveniente que hagas el canvas de un tamao fsico idntico al bitmap que quieras dibujar en l.
Dibujar con el elemento Canvas

Vayamos al grano. Cmo dibujamos en el elemento <canvas>? En primer lugar, debes obtener una referencia a su contexto (puede ser 2D o 3D), y aplicarle mtodos de la API de dibujo a esa referencia. Podramos definir ese contexto como un sistema de coordenadas. El contexto 2D define un sistema de coordenadas plano bi-dimensional cartesiano con un punto de origen (0,0) en el vertice superior izquierdo. Los comandos para dibujar formas en el canvas se basan en caminos. Primero debes definir un camino (no visible) que puede estar compuesto por uno o varios segmentos (lneas rectas, curvas, rectngulos), y luego decides cundo y cmo se hace visible.
56
Normalmente dibujars, o bien un contorno o bien un relleno. Veamos un ejemplo: var mi_canvas = document.getElementById(mi_canvas); var contexto = document.getElementById(mi_canvas ).getContext(2d); contexto.beginPath(); contexto.moveTo(20,20); contexto.lineTo(40,40); contexto.strokeStyle = #000; contexto.stroke(); Con este cdigo dibujamos una lnea negra del punto (20,20) al (40,40) del canvas. El punto (0,0) se encuentra en el vrtice superior izquierdo. Para dibujar un crculo haramos lo siguiente: contexto.beginPath(); contexto.arc(40, 40, 10, 0, Math.PI * 2, true); contexto.fillStyle = #000; contexto.fill(); Gracias a este cdigo dibujamos un crculo desde el punto central (40,40), con un radio de 10 pxeles, partiendo del ngulo 0 (en radianes) hasta el ngulo Math.PI * 2 (nmero pi por 2) y en el sentido contra57
rio de las agujas del reloj. Adems, lo hemos rellenado del color negro.
API de dibujo del elemento <canvas>

A continuacin vamos a explicarte algunos mtodos de la API del <canvas> que te ayudarn a comprender mejor los ejemplos que acabamos de ver. Esta API est estandarizada en html5 y funciona de manera similar en todos los navegadores, aunque conviene mantenerse atento ante las pequeas variaciones que pueden aparecer. beginPath() Esta funcin sirve para empezar a dibujar un camino en el contexto. No tiene ningn parmetro y por s sola no hace ninguna accin visible en el canvas. Una vez invocada la funcin podremos empezar a dibujar el camino aadiendo segmentos para completarlo con las diferentes funciones de dibujo. Para que este camino sea visible, debers utilizar una funcin que fuerce su renderizacin, como stroke() o fill().
58
closePath() Sirve para cerrar un camino, completando el camino desde el punto donde se encuentre el puntero hasta el punto inicial. Recordemos que el camino tiene un punto inicial en el que nos situamos para comenzar el dibujo utilizando moveTo(). Luego vamos dibujando segmentos en el camino por medio de lineTo() o arc() que nos llevan a otros puntos del lienzo. La funcin closePath() dibuja una lnea recta desde el punto donde se haya quedado el camino al punto inicial donde empezamos a construirlo, en otras palabras, cierra el dibujo. moveTo(x, y) Sirve para mover el puntero a la coordenada (x,y) donde comenzaremos a definir el camino. Esta funcin no dibuja nada en s, pero nos permite definir el primer punto de un camino. lineTo(x, y) Esta funcin crea una lnea recta, desde la posicin actual del puntero de dibujo, hasta el punto (x,y). La posicin actual del camino la podemos haber indicado previamente con un moveTo(), o con otro lineTo().
59
Si no se indic antes una posicin de nuestro puntero de dibujo, lineTo() no crea nada, y ser equivalente a moveTo(). rect(x, y, ancho, alto) rect () crea un camino rectangular desde (x,y) hasta el extremo diagonal opuesto (x + ancho, y + alto). arc(x, y, radio, angulo_inicio, angulo_final, sentido_ contrario_del_reloj) Este mtodo genera un arco (como cabra esperar). Este arco puede definirse de tal manera que complete un circulo completo como ya vimos en un ejemplo anterior. Repasemos los parmetros que debemos enviar al mtodo arc(): Coordenadas del centro del arco (x,y). Radio (en pxeles). Angulo de inicio y Angulo final son los ngulos donde comienza y acaba el radio (en radianes). El eje de la horizontal se considera ngulo cero. Para conocer los radianes que equivalen a un ngulo de x grados podemos usar la siguiente frmula: Radianes = nmero PI x (grados/180)
60
Por ltimo tenemos un parmetro booleano, donde true significa que el trazo va desde el ngulo de inicio al ngulo final en el sentido contrario de las agujas del reloj. fill() Este mtodo sirve para rellenar de color el ltimo camino que haya sido cerrado. Si no has definido cmo cerrar el camino, bien con el mtodo closePath () o de otra manera manual, se cerrar automticamente con una lnea recta hasta el punto de inicio. Este mtodo hace que se renderice el canvas. stroke() Con el mtodo stroke() dibujamos una lnea por todo el recorrido del camino que hayamos creado segmento a segmento. Solo se dibuja la silueta, sin relleno, por lo que el camino no tiene por qu estar cerrado. Al igual que fill(), este mtodo hace visible el <canvas>. strokeText(texto, x, y, [opcional: anchuraMxima]) fillText(texto, x, y, [opcional: anchuraMxima]) Estos mtodos aaden texto al canvas en la posicin (x,y). strokeText() pintar la silueta del texto y fillText() pintar un texto con relleno. Para determinar el estilo de la fuente (tamao, tipo de letra etc.) a utilizar en el contexto usars el mto61
do font(). Por ejemplo: contexto.font = 15pt Arial; Este mtodo lo debes usar siguiendo las mismas reglas que utilizaras definiendo la fuente con CSS. Otro mtodo interesante de la API del canvas es clip(). Este comando utilizar el camino recin definido como mscara de los siguientes comandos de dibujo. Dicho de otra manera, solo se dibujar en el canvas aquello que quede dentro de los lmites definidos con el mtodo clip(). En el siguiente ejemplo definimos una mscara circular. Este crculo no ser visible en el canvas, pero redondear los bordes de todo aquello que se dibuje posteriormente, si excede las dimensiones de dicho circulo. contexto.beginPath(); contexto.arc(50, 50, 25, 0, Math.PI * 2, true); contexto.clip(); El elemento canvas usa por defecto una mscara igual a sus propias dimensiones. Si defines una mscara con el mtodo clip (), esa mascara ser utilizada
62
a partir de ese momento para todos los comandos de dibujo subsecuentes, hasta que la cambies o restaures el canvas, por ejemplo con el mtodo restore (). clearRect(x, y, ancho, alto) Esta funcin nos sirve para borrar reas rectangulares de un canvas. Funciona de manera similar a la funcin rect(). La zona que se borrar parte del punto (x,y) y llega hasta el punto (x+ancho,y+alto). contexto.strokeStyle = #000000; contexto.fillStyle = #000000; Los atributos strokeStyle y fillStyle, funcionan de manera similar con la nica diferencia que uno define el color del trazado y el otro define el color de relleno. En este caso estamos definiendo tanto el trazado como el relleno con un color negro. Para modificar la manera en la que se dibujan las lneas en tus caminos puedes usar tambin estas propiedades: lineWidth, lineCap, y lineJoin. Con el siguiente cdigo defines que el grosor de la lnea sea de 12 pxeles y que la unin entre las lneas se realice mediante uniones redondas: contexto.lineWidth = 12; contexto.lineJoin = round;
63
lineCap tienen los mismos posibles valores que lineJoin pero define la forma del final de cada lnea, no solo la unin entre ellas.
API de dibujo del elemento <canvas> Tratamiento de imgenes

Una de las funcionalidades ms interesantes que ofrece el elemento canvas es la posibilidad de pintar en l una imagen. El mtodo que debes utilizar para ello es el mostrado en el cdigo. drawImage(objeto_imagen, x, y). Este mtodo precisa tres parmetros, el primero es el objeto javascript de la imagen que se desea dibujar en el lienzo. Los dos siguientes son las coordenadas (x,y) donde se va a fijar la esquina superior izquierda de la imagen. El objeto imagen es uno de los objetos bsicos de Javascript, y funciona igual en todos los navegadores. En primer lugar, carga la imagen usando un tag <img> en tu html y haz una referencia a la misma, o genera dinmicamente un objeto imagen, como vers en el siguiente ejemplo:
64
var img = new Image(); img.src = imagen_para_el_canvas.jpg; Con el atributo src, asignamos al objeto una ruta a un archivo grfico. Una vez que obtenemos el objeto de la imagen y sta se ha cargado en el navegador completamente, ya podemos hacer uso de la funcin drawImage(). As: contexto.drawImage(img, 0, 0); Como decamos, debes asegurarte de que la imagen se haya cargado por completo, para lo que te recomendamos usar el evento onload del objeto - imagen. El cdigo queda de la siguiente manera: var img = new Image(); img.src = imagen_para_el_canvas.jpg; img.onload = function(){ contexto.drawImage(img, 0, 0); } Estamos dando por hecho que la imagen que estamos dibujando en el lienzo es del mismo tamao que el propio elemento <canvas>. De no ser as, el canvas actuara como una mscara y solo mostrara lo que quepa de la imagen dentro de sus lmites.
65
No obstante, podemos escalar la imagen que queremos dibujar, aadiendo un par de parmetros a la funcin drawImage(). contexto.drawImage(img, x, y, anchura, altura); El navegador escalar la imagen para que tenga las dimensiones que indiquemos y luego la pintar en el canvas. La anchura y altura de la imagen a dibujar pueden ser las que queramos, sean o no proporcionales a las dimensiones originales de la imagen. La tercera y ms compleja manera de usar la funcin drawImage() es la que podemos observar en el cdigo.: contexto.drawImage(img, x, y, anchura, altura, dx,dy,dw,dh) Obviando el primer parmetro, que seguir siendo nuestro objeto imagen, los primeros cuatros argumentos son numricos (x, y, anchura, altura) y se corresponden con el punto de origen (x,y) y con el ancho y alto de la captura que vamos a hacer sobre la imagen original. Los otros cuatro argumentos numricos representan el punto de insercin (dx,dy) y el ancho y el alto (dw,dh) que tendr la copia de la captura que hemos
66
realizado, dentro del elemento canvas. De una manera grfica, sera algo as:
Una vez que hayas dibujado la imagen en el canvas, podrs modificarla y meterle efectos a tu gusto, ya que lo que has dibujado no es una imagen cerrada sino un montn de datos brutos de la misma. De hecho, la API del canvas contiene el mtodo getImageData()que es capaz de recoger la informacin de color de cada pixel dentro de la regin de la imagen, que especifiquemos. var datos_raw = contexto.getImageData(0, 0, 200, 200);
67
Este mtodo abre la puerta a todo tipo de transformaciones de color sobre el canvas. Para facilitar el control sobre las transformaciones realizadas, la API ofrece dos mtodos: save () y restore(). save () guarda el estado actual del canvas y restore() eliminar la ltima transformacin que se haya realizado.
Otros efectos: Gradientes

La API del canvas tambin permite generar gradientes. Un gradiente es una progresin gradual de un color a otro u otros. Para dibujar un gradiente en el lienzo existen estos tres mtodos: createLinearGradient(), createRadialGradient() y addColorStop(). createLinearGradient(x0, y0, x1, y1) Este mtodo devuelve un objeto que representa un gradiente lineal a lo largo de la lnea definida en los argumentos. Los argumentos indican un punto inicial (x0,y0) y un punto final (x1,y1) del gradiente.
68
createRadialGradient(x0, y0, r0, x1, y1, r1) Este mtodo devuelve un objeto que representa un gradiente radial que se extiende a travs del cono definido por los dos crculos pasados como argumento. Los primeros tres argumentos representan un circulo con coordinadas (x0,y0) y un radio r0 y los siguientes tres un segundo circulo con coordenadas (x1,y1) y un radio r1. addColorStop(offset, color) Este mtodo indica un punto (offset) y un color dentro del recorrido del gradiente. El valor para el punto puede ir desde el 0.0 de un extremo hasta el 1.0 del otro extremo. A continuacin vers un cdigo de ejemplo que crea un gradiente lineal con un punto inicial negro, otro punto 0.6 de color gris claro y un punto final blanco. var mi_canvas = document.getElementById(mi_canvas); var contexto = mi_canvas.getContext(2d); var lingrad = contexto.createLinearGradient(20,20,50,70); lingrad.addColorStop(0, #000); lingrad.addColorStop(0.6, #ccc);
69
lingrad.addColorStop(1, #fff); contexto.beginPath(); contexto.fillStyle = lingrad; contexto.moveTo(20, 20); contexto.lineTo(50, 50); contexto.lineTo(20, 70); contexto.closePath(); contexto.fill();
Otros efectos: Transparencia

Vamos con otra caracterstica del canvas: la transparencia. El elemento canvas es transparente por defecto, por lo que se mostrar todo el contenido que se haya apilado por debajo. Esto quiere decir, que puedes controlar qu pxeles son transparentes y cules no, simplemente con lo que dibujas en el lienzo. Los pxeles no dibujados mostrarn lo que hay debajo. Adems puedes definir la transparencia parcial de
70
cada pxel que dibujes modificando el canal alfa deI color de relleno. La transparencia parcial en un pxel, consigue que el usuario vea una mezcla de color entre ese pxel y el pxel que este situado, fuera del canvas, inmediatamente por debajo, o una mezcla de los colores definidos para ese pxel dentro del propio canvas, como veremos a continuacin mediante un ejemplo. contexto.beginPath(); contexto.arc(40, 40, 25, 0, Math.PI * 2, true); contexto.closePath(); contexto.fillStyle = #f00; contexto.fill(); //crculo de color rojo contexto.beginPath(); contexto.arc(70, 40, 25, 0, Math.PI * 2, true); contexto.closePath(); contexto.fillStyle = rgba(0,0,255,0.75);//Aqu es donde se define un 75% de alfa para el circulo azul contexto.fill(); //crculo de color azul
71
Con este cdigo dibujamos un circulo azul que se superporne parcialmente sobre un crculo rojo. Los pxeles compartidos son de color morado porque mezclan los datos de color de ambos crculos y se genera este nuevo color, gracias a que definimos una transparencia del 75% en el crculo azul. De no haber definido esta transparencia parcial, el crculo azul se mostrara por encima del crculo rojo, ya que si no se define ninguna transparencia el color siempre se dibuja opaco. A pesar de los efectos que seamos capaces de lograr, no hay que olvidar que cada canvas representa un mapa de bits conjunto por lo que las formas que dibujemos no se pueden tratar individualmente, ya que no son un conjunto de capas. Para emular el sistema de capas que vemos en cualquier programa de edicin de imgenes, debemos definir varios canvas y situarlos apilados unos encima de otros, cada uno con el dibujo que deseemos. De esta manera podemos hacer la composicin que queramos valindonos del valor transparente por defecto de los pxeles no dibujados y, adems, dar un tratamiento individual a cada canvas. Para definir la transparencia de un color puedes utili72
zar el mtodo CSS rgba() que acepta tres valores para cada uno de los canales rgb respectivamente, y un cuarto para el canal alfa en el que puedes definir el nivel de transparencia deseado. contexto.fillStyle = rgba(255,0,0,0.5); En esta lnea hemos definido un 50% de transparencia para el color rojo (255,0,0). Otra forma de definir la transparencia es utilizar el mtodo globalAlpha () que afectar a todo lo que se dibuje en el canvas. Sus valores oscilan desde 0.0 a 1.0.
Otros efectos: Patrones

Otra opcin que te permite el elemento canvas es la utilizacin de patrones. Un patrn es una imagen, normalmente pequea, usada para rellenar regiones, situando copias del patrn unas al lado de las otras, como un mosaico. La API del <canvas> te permite escoger una imagen como color de relleno y utilizarla como patrn. La manera de hacerlo es crear un objeto patrn en el que ya habrs elegido la imagen a utilizar y cmo
73
quieres que se repita a lo largo de la regin de dibujo, para posteriormente, mediante los mtodos strokeStyle o fillStyle, sealar este objeto como estilo de relleno. El comando que te permite crear el objeto que utilizars como patrn es createPattern(). Este mtodo precisa de dos argumentos: el objeto de imagen elegido para ser nuestro patrn y una cadena de texto que indica la manera en la que se a llevar a cabo la repeticin de esa imagen. Es preferible que uses repeat como valor de repeticin, ya que por ahora es el nico consistente. Con este valor la imagen se repite tanto horizontal como verticalmente hasta cubrir todo el rea a dibujar. Si no queremos que la imagen se repita usaremos no-repeat. El siguiente ejemplo te muestra como realizar la definicin y uso de un patrn: var contexto = document.getElementById(mi_canvas).getContext(2d); var img = new Image(); img.src = pattern.png;
74
//debemos asegurarnos de que la imagen se haya cargado completamente img.onload = function(){ var ptrn = contexto.createPattern(img,repeat); contexto.fillStyle = ptrn; contexto.fillRect(0,0,150,150); }
Otros efectos: Animacin

Por ltimo hablaremos de efectos de animacin en el <canvas>. Hemos visto anteriormente algunas maneras de limpiar lo que hayamos dibujado en el lienzo. Si inmediatamente despus de esta limpieza volvemos a dibujar en el canvas lo que hubiera dibujado antes, con alguna pequea modificacin, y adems repetimos este ciclo, obtendremos una ilusin de animacin ya que estaramos emulando la tcnica de movimiento fotograma a fotograma. Podemos pensar en que cada vez que llenamos un canvas damos paso a un nuevo fotograma. Si el intervalo con el que repites este proceso de limpiar dibujar es elevado (20 o 30 veces por segundo),
75
puedes obtener animaciones muy elegantes. Veamos un ejemplo en el que hemos juntado muchas de las cosas que hemos explicado anteriormente. Fjate en los comentarios para averiguar lo que ocurre en cada paso. Al final obtendremos medios crculos que se solapan y que van cambiando de color cada medio segundo: var mi_canvas = document.getElementById(mi_ canvas); var contexto = mi_canvas.getContext(2d); mi_canvas.width = 300; mi_canvas.height = 300; function numero(){ return Math.round( Math.random()*255); //Esta funcin devuelve un valor entre 0 y 255 } function circulos(){ for(i=0; i<300; i+=5){ //Recorremos la anchura del canvas.
76
for(j=0; j<300; j+=5){ //Recorremos la altura del canvas. contexto.beginPath();
contexto.arc(i+5, j+5, 5, 0, Math.PI, true); //Definimos medio crculo
contexto.closePath(); //La cadena que se formar aqu ser similar a: grgb(125,200,30)h contexto.fillStyle = rgb( +numero()+ , + numero() + , + numero() + ); contexto.fill(); } } } function render() { mi_canvas.width = 300; //Obliga a limpiar todo el canvas } /*Aqu definimos un intervalo de repeticin de medio segundo. Cada medio segundo se llama a las funciones render () y circulos().*/ setInterval(function(){ render(); circulos(); }, 500);
77
Si juegas con el nmero que hemos indicado en el mtodo setInterval, vers como si lo bajas mucho el navegador sufre porque tiene que realizar el aclarado demasiado a menudo. La primera manera de optimizar el rendimiento del navegador es encontrar un intervalo en el que la animacin ya se vea suficientemente bien. Por otra parte, habr animaciones que no requerirn ms que limpiar la zona del canvas que se vaya modificando de fotograma a fotograma, por lo que el rendimiento ser mejor. Por otra parte, podemos definir tambin ms de un canvas, usando uno de ellos como fondo y animando sobre l otros elementos que podremos ir limpiando
78
y redibujando sin tener que redibujar todo el fondo La manera de limpiar parcialmente el canvas es mediante el mtodo clearRect() que vimos anteriormente.
79
Otros
6
Leccin
Data
En este ltimo captulo abordaremos de una manera ms breve, otras aportaciones que ha hecho la especificacin de html5. Empezaremos con el apartado data en el que vers cmo aadir informacin suplementaria a tu cdigo. Posteriormente te hablaremos de las capacidades de almacenaje que se han definido con la llegada de este lenguaje y finalmente, nos despediremos, aportndote sugerencias y fuentes de informacin. Html5 ha incluido la posibilidad de aadir datos adicionales a las diferentes etiquetas respondiendo a la necesidad de tener informacin semntica que complete el significado de cada elemento. Anteriormente se utilizaban los atributos class y rel con este objeto, aunque en su momento no fueran pensados para este uso. La manera ms segura de manejar esta informacin es mediante Javascript como vers en el siguiente ejemplo:
82
<h1>Opciones de color</h1> <ul> <li data-modelo=001 >Azul</li> <li data- modelo =002 > Verde</li> <li data- modelo =003 > Rojo</li> <li data- modelo =004 > Negro</li> </ul> En este esquema hemos aadido informacin til para nosotros como es el nmero de modelo correspondiente a cada color y adems hemos ocultado esta informacin al usuario ya que para l no es relevante. Como has podido ver, la manera de incluir estos datos es generar una categora que vaya precedida por el prefijo data-. Puedes aadir varias categoras si as lo necesitas. El nombre de esa categora puede ser el que ms te convenga siempre que evites maysculas y caracteres extraos. Si quieres nombrar la categora con ms de una palabra, sepralas mediante guiones (-). Para acceder a esta informacin extra usando javascrit, debes hacer algo as:
83
<script> var modelos = document. getElementsByTagName(li); var output = Los modelos disponibles son: ; for (var i=0; i < modelos.length; i++) { if (modelos [i].dataset) { output += modelos [i].dataset.modelo; } else { output += modelos [i].getAttribute(data- modelo); } //Esta parte es para que no se aada una coma final si es la ltima palabra if (i != (modelos.length-1)) { output += , } } //Aqu insertamos el resultado obtenido document.getElementsByTagName(p)[0].innerHTML = output; </script> En este ejemplo creamos un array modelos que contiene todos los elementos de lista y creamos una cadena de texto (output) que ms adelante insertaremos dentro de una etiqueta <p>.
84
Recorremos el array modelos en busca de datasetmodelo, o buscando ese atributo mediante getAttribute (en el caso de que el navegador no reconozca el dataset de html5), y lo vamos aadiendo a la cadena output. Finalmente insertamos esta cadena en el primer prrafo mediante innerHTML. Puedes modificar o crear esos datos mediante la API de dataset o utilizando set Attibute. La manera de hacerlo es muy similar a la que vimos en el ejemplo anterior. <script> var modelos = document. getElementsByTagName(li); if (modelos [0].dataset) { modelos[0].dataset.modelo = 005; } else { modelos[0].setAttribute(data-modelo, 005); } </script> Si necesitas en alguna ocasin, eliminar los datos que hayas insertado previamente, puedes hacerlo dndoles un valor null.
85
Web Storage
Html5 define LocalStorage y SessionStorage para acumular datos de sesin y datos locales en el equipo del usuario, para hacer la navegacin ms personalizada. Hasta la fecha, para guardar este tipo de datos se utilizaban las famosas cookies. Las cookies tienen las siguientes limitaciones: Aumentan el peso (y por lo tanto, la duracin) de cada peticin al servidor, ya que toda la informacin guardada en ellas debe viajar al servidor y volver. Tienen una limitacin de 4kb. El usuario debe tener las cookies habilitadas, lo que no siempre ocurre. LocalStorage y SessionStorage estn diseadas para almacenar mayor informacin (unos 5 megabytes), a la que podrs acceder con javascript despus de que la pgina se haya cargado. Adems, al almacenarse la informacin en el equipo del usuario no tiene que enviarse ni recibirse desde el servidor en cada peticin. Veamos algunos ejemplos. Como vers la informa86
cin se almacena utilizando un nombre y asignando un valor a ese nombre. Para guardar y recuperar informacin utilizamos setItem(nombre, valor) y getItem(nombre). Para eliminar informacin almacenada disponemos del mtodo removeItem(nombre). Si lo que necesitas es limpiar todos los datos que estn almacenados existe el mtodo clear (). Disponemos tambin de una forma para saber cunta informacin existe en el equipo, iterando a travs de la propiedad length y usando el mtodo key como veremos a continuacin. for(var i=0; i <localStorage.length; i++) { nombre = localStorage.key(i); valor = localStorage.getItem(nombre) alert(El valor asignado a la clave + nombre + es: + valor); } Todos estos mtodos y propiedades sirven tambin para sessionStorage. La diferencia entre ambas es que sessionStorage guardar los valores durante el tiempo de sesin del navegador y se borrarn cuando el navegador se reinicie.
87
Con localStorage, los valores se conservan aunque el usuario cierre el navegador y podrn reutilizarse cuando lo vuelva a abrir. Como hemos visto anteriormente para el resto de aportes que trae html5, es conveniente detectar si el navegador del usuario puede beneficiarse de estas caractersticas de almacenaje. Si el navegador puede utilizar esta API existir una propiedad localStorage en el objeto global window de javascript. Podemos detectar esta propiedad utilizando Modernizr: if (Modernizr.localstorage) { // podemos utilizar localStorage y seesionStorage } else { // El resultado de la comprobacin anterior es undefined. // Por lo tanto no tenemos acceso a esta API. } Tanto localStorage y sessionStorage, al igual que ocurra con las cookies, solo pueden almacenar cadenas de texto. Para poder guardar objetos ms complejos debemos utilizar el objeto JSON, ms concrtamente sus mtodos stringify y parse .
88
Vemoslo con un ejemplo: var usuario = {nombre: Peter, apellido: Collins, id:001}; var preferencias = {ocio: deporte, negocio: actor}; Una vez definidos los objetos usuario y preferencias, podemos almacenarlos tanto en sessionStorage como en localStorage en funcin de lo perdurable que queramos que sean estos datos. Algo as: sessionStorage.setItem(quien, JSON. stringify(usuario)); localStorage.setItem(usuario.id, JSON. stringify(preferencias)); Para recuperar toda esta informacin haramos algo parecido a esto: if (sessionStorage.getItem(quien)) { user_data = JSON.parse(sessionStorage. getItem(quien)); } if (localStorage.getItem(usuario.id)) { user_prefs = JSON.parse(localStorage. getItem(usuario.id)); }
89
Apndices
7
Leccin
Eplogo y Referencias.
Con este apartado damos por concluido el curso de html5. No obstante queda mucho por investigar (y te invitamos a hacerlo) si quieres dominar esta nueva especificacin. Ten en cuenta que hemos dejado una serie de temas sin desarrollar porque consideramos que requieren un nivel de programacin ms elevado y su uso es menos general. Te presentamos a continuacin estos conceptos por si quieres sumergirte en ellos: Web Sockets, con los que puedes programar aplicaciones tipo chat. Funcionalidad Drag and Drop. Html5 permitir de manera nativa, arrastrar y soltar elementos y los datos asociados a los mismos. Geolocalizacin. Con esta API puedes detectar cul es la longitud y latitud desde la que se conectan tus usuarios. Web workers. Esta funcionalidad permite que la aplicacin tenga ms de un flujo de cdigo, para que los cdigos ms intensivos puedan se92
pararse del flujo principal de la pgina y no relantezca su marcha. Aplicaciones Offline. Html5 permite preparar tu pgina para que pueda verse offline. Accesibilidad para usuarios con algn tipo de discapacidad.
Fuentes de informacin
Por ltimo, para no dejarte tirado en tu proceso de investigacin, queremos aportarte una serie de fuentes en las que hemos basado este curso, que debes contemplar junto con aquellas libreras y links que te hemos ido dando en las secciones previas. http://dev.w3.org/html5/markup/ http://dev.w3.org/html5/spec-author-view/ http://dev.w3.org/html5/html4-differences/ http://dev.w3.org/html5/spec/Overview.html http://diveintohtml5.org http://html5doctor.com
93
http://html5gallery.com http://code.google.com/p/html5shiv/ http://caniuse.com http://www.cristalab.com http://www.maestrosdelweb.com/ HTML5 Cookbook, OReilly Media http://www.tutorialspoint.com/html5/ http://theproc.es/files/5321 http://www.htmlcinco.com/ http://www.moio.org/blog/?p=125 http://www.html5.showbizreal.com/ http://es.wikipedia.org/wiki/HTML5 http://html5demos.com/ http://paperkilledrock.com/2010/05/html5-localstorage-part-one/
94
http://www.graphicmania.net/how-to-create-html5-video-for-your-website/ http://www.w3schools.com/html5/ http://www.desarrolloweb.com/ http://html5please.us/
95

HTML 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 5

Uploaded by

Copyright:

Available Formats

Introduccin a HTML 5 Leccin

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

Boilerplate, Modernizr, Inizializr

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

Atributos de la etiqueta Vdeo

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

Atributos de la etiqueta Audio

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

Seguridad del audio y del vdeo

curso de actualizacin a html 5

Javascript que te proveer de distintos eventos y mtodos.

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

Dibujar con el elemento Canvas

curso de actualizacin a html 5

curso de actualizacin a html 5

API de dibujo del elemento <canvas>

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

curso de actualizacin a html 5

API de dibujo del elemento <canvas> Tratamiento de imgenes

curso de actualizacin a html 5