html5

Lección

1Introducción a HTML 5

curso de actualización a html 5

3

Introducción a HTML5

Bienvenido al curso de html5 de Conceptivia. A lo largo del mismo vamos a intentar explicarte las ca-racterísticas fundamentales de este lenguaje, que ha surgido con la intención de cambiar la Web, así en mayúsculas.

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 próximas pá-ginas web. Esperamos ponértelo más sencillo con los ejemplos que te aportaremos aquí.

A la hora de explicar los cambios más importantes que ha traído este lenguaje repasaremos algunos conceptos básicos de programación en html, para que puedas seguir el ritmo aunque no seas un pro-gramador experto.

Estas son las ventajas que hacen que html5 haya ge-nerado tanto revuelo:

• Es un lenguaje Multiplataforma. Ha sido conce-bido para que pueda ser interpretado por el ma-yor número posible de “lectores”.

• Etiquetas más claras. Han surgido nuevas eti-

4


quetas para hacer el código más semántico.

• Html4 y html5 son 100% compatibles entre sí. Todo el código en html4 seguirá funcionando en html5.

• Video y audio nativos. Adiós a los plugins.

• Webs más 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 utilización de SVG.

No obstante, no todo es maravilloso en el mundo del html5. Este lenguaje está en pleno proceso de construcción y su compatibilidad con los distintos navegadores no es ideal. Lo reconfortante es saber que estos navegadores están todos mirando en esta única dirección y más pronto que tarde vas a poder llevar a cabo todo de lo que te vamos a hablar aquí.


5

Etiquetas estructurales

A continuación vamos a explicaros cuáles son las prin-cipales etiquetas que compone el lenguaje html5. Veremos cuáles han sido los cambios fundamentales que se han dado respecto a la versión anterior y mos-traremos ejemplos de código para que puedas seguir el ritmo aunque tus conocimientos de programación no sean muy amplios....

Empecemos por la declaración de documento.

Escribe la siguiente línea de código en tu editor de texto favorito y ya estarás programando en html5.

<! DOCTYPE html>

Es un DOCTYPE mucho más simple que en versiones anteriores y te permite usar todas las habilidades de html5 sin que nada de lo que ya esté en la página se “rompa”.

A continuación os presentaremos las principales etiquetas html5 de nueva creación. A pesar de que no se comporten de una manera especial, lo hacen como un <div> o un <span>, tienen un significado su-perior a estos elementos.

6


<header>Esta etiqueta la debes utilizar como contenedor de la cabecera de la página o de una sección. Puedes in-cluir aquí información adicional como logos o ayudas de navegación.

<nav>Dentro de esta etiqueta debes insertar los links de navegación principal de la página. Sólo puedes tener un <nav> por página. Puedes colocar cualquier eti-queta dentro, aunque lo recomendado es usar listas <ul> y aunque no sea un requerimiento, habitual-mente se sitúa dentro de la etiqueta <header>.

<footer>Aquí se suele especificar información acerca de la pá-gina o sección. Quién es el autor, temas de copyright y links hacia fuentes de información adicional.

Con estas tres etiquetas se ha tratado de reflejar, algo que ya estaba siendo utilizado por los desarro-lladores web. Existía una convención del lenguaje en el que se tendía 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 continuación ayudará a definir


7

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 información que está relacionada con todo lo que la rodea pero que también puede funcionar de manera independiente. Aquí podemos incluir lo que conocíamos como sidebar, una estruc-tura que está presente en muchos diseños.

<section>Esta etiqueta se ha generado para incluir en ella toda la información que puede ser agrupada temática-mente o está relacionada. A continuación trataremos de clarificar más esta definición comparando esta eti-queta con <article>.

<article>Entre <article> y </article> irá encerrado aquel con-tenido que puede ser entendido como un ente indi-vidual. Usando un ejemplo, una entrada de un blog es perfecta para ir dentro de la etiqueta <article>. Po-demos considerar <article> como un <section> más especializado.

Un matiz de la etiqueta <section> y que la diferen-cia de <article> es que deberá incluir al menos una “head tag” (h1, h2, etc.). Es decir, una “sección” de-

8


berá estar dentro del esquema jerárquico de la pá-gina. <section> es el más genérico 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 con-tenido que puede ser considerado un “todo”, puede tener sendas etiquetas <header> y <footer>.

A menudo la cabecera de un artículo da el título a toda la página. En ese caso, ese contenido es perfec-to para ir dentro de la etiqueta <article>.

Caso práctico

Vamos a ilustrar lo visto hasta ahora con un ejemplo. Este es un ejemplo de cómo quedaría la entrada de un blog, utilizando todas las etiquetas que hemos vis-to hasta el momento.

<!DOCTYPE html ><html><head><meta charset=”UTF-8” />

9



<title>Título de la página</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>Artículos de esta sección</h1>

<article>

10


<h2>Artículo 1</h2> <p>Texto del artículo 1</p></article>

<article> <h2>Artículo 2</h2> <p>Texto del artículo 2</p></article>

</section>

<aside>  <h2>Side Bar de la Página</h2> <p>Texto del Side Bar</p></aside>

<footer>  <p>COPYRIGHT &COPY; 2011 <a href=”http://paginadelcreador.com”>Link apun-tando a la página del autor</a>.</footer>

</body></html>

Fíjate en qué todas las etiquetas se han cerrado correctamente con su cierre equivalente </etique-ta_de_cierre> y observa los comentarios de código

11

que siguen este esquema , porque utilizados convenientemente te ayudarán a recordar la estructura y funcionamiento de tus futuras crea-ciones.

Con el CSS justo, este código sería interpretado por los navegadores como puede verse en la siguiente imagen.

Observamos cómo las nuevas etiquetas estructura-les pueden reemplazar casi completamente todos los <div> que han sido utilizados hasta la aparición de html5. Esto no supone que haya que dejar de em-plear la etiqueta <div>. Para aquellos casos en los que necesites usar un contenedor con fines estilís-ticos 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 múltiples títulos en el mismo <header>. <hgroup> permite co-locar un h1, h2 y h3 dentro del header sin afectar al posicionamiento en buscadores, permitiendo usar otro h1 en el sitio.

12


En el Xhtml actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO (Search Engine Optimization), por lo que tu página perdería puestos en el ranking, por decirlo de manera coloquial. Gra-cias al html5 puedes estructurar tus “head tags” de una manera más completa.

Las etiquetas semánticas, a pesar de todo lo que he-mos explicado no son las causantes de la expectación que ha generado html5.

Video, audio y animación 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 páginas web más habituales.

<video> y <audio>Estas etiquetas se utilizan para insertar video y audio respectivamente, sin la necesidad de utilizar plugins.

Son muy fáciles de utilizar pero cada navegador so-porta codecs diferentes tanto de video como de au-dio, lo que hace necesario recodificar los materiales en múltiples formatos.

<canvas>Un área de dibujo y animación vectorial y de bitmaps controlado mediante un API Javascript.


13

<svg>Esta etiqueta se utiliza para insertar dibujos y ani-maciones. Estos dibujos y animaciones deberán co-rresponder al estándar abierto SVG (Scalable Vector Graphics).

Etiquetas eliminadas

Además de los elementos y atributos nuevos que he-mos comentado, html5 ha eliminado algunos.

Los atributos que desaparecen son los siguientes:

alignlink, vlink, alinkbgcolorheight and widthscrolling (dentro de los iframes)valignhspace, vspacecellpadding, cellspacing y border de las tablastargetfontmarquee

14


Etiquetas de formularios

A continuación vamos a detallar los cambios que ha sufrido la programación de formularios. Los cambios más importantes se presentan en la etiqueta <input *> que con la llegada de html5 ha ganado capacidad, con lo que el soporte para la creación de formula-rios puramente con html se ha visto aumentado. Han surgido atributos nuevos que permiten cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, rangos, números etc.

A continuación te presentamos cuál sería el esquele-to de un formulario muy estándar. Fíjate en el atribu-to type, ya que allí definiremos de qué tipo es la caja <input>. Este atributo también define qué validación 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 teléfono con el formato correcto (que deberemos especificar con un atributo pattern), respectivamente. Si el usuario introduce valores no válidos, el formulario no será enviado y el navegador desplegará una alerta.

<form>  <fieldset>


15

<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>Teléfono<input type=”tel”name=”telefono” placeholder=”123-123-123” required></label></p>

</fieldset> <p><button type=”submit”>Enviar</button></p></form>

Los navegadores que soportan estos nuevos atribu-tos 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 característi-

16


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 enviarían los datos del for-mulario y se desplegaría un mensaje de alerta. Esta alerta es visualmente distinta entre navegador y na-vegador. Si utilizamos un navegador que no soporta el atributo required, simplemente lo obviará.

En el caso del <input> de tipo “email” de este ejem-plo, hemos incluido el atributo autofocus, que como podrás intuir, hace que el cursor se sitúe en ese cam-po en el momento en el que se carga la página. Este atributo solo puedes utilizarlo una vez por página.

En cuanto al <input> de tipo “tel”, hemos usado el atributo placeholder que permite definir un texto que servirá como instrucción para la introducción de datos en ese campo en particular. En este ejemplo, estamos pidiéndole al usuario que escriba su número de teléfono con el siguiente formato: 123-123-123.

Este texto de ayuda, desaparecerá en cuanto el usua-


17

rio haga clic en el campo teléfono y si abandona di-cho campo sin haberlo modificado, este texto reapa-recerá. Este comportamiento es habitual en multitud de formularios que encontramos en la Web, porque hasta la aparición de html5 se utilizaba javascript para conseguir este efecto.

Al igual que los dos atributos comentados anterior-mente, 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 venían desarrollando con ja-vascript, así que no es dificultoso encontrar librerías de javascript que simulen estos comportamientos en aquellos navegadores que no soporten algunos de los atributos aquí expuestos. Dos librerías con las que se pueden desarrollar funcionalidades como las que introduce html5 son Modernizr, jQuery - jQuery UI.

Lección

2Boilerplate, Modernizr, Inizializr


21

A continuación vamos a presentarte tres proyectos que pueden hacer tu vida como diseñador o progra-mador web mucho más fácil. Se trata de Boilerplate, Modernizr e Initializr. Estos proyectos te aportarán un punto de partida muy robusto para tus próximos proyectos en html5.

Initializr

Empezaremos por el más sencillo. Initializr, es un ge-nerador de plantillas html5 que, al igual que Boiler-plate, te permite generar un punto de partida sólido desde el que empezar a desarrollar tu proyecto. Inia-tializr te permite determinar aquellas propiedades que más te interesan, ya que es posible que muchas de las características que prevé Boilerplate superen las necesidades de tu web.

Visita su sitio y verás cómo te dan tres opciones para generar una plantilla de inicio en html5. La más sen-cilla de las opciones, y una buena manera de apren-der a programar, es la descarga de una plantilla muy básica. A medida que vayas entendiendo lo que pasa en el código, podrás ir configurando tu plantilla utili-zando los otros dos configuradores.

http://initializr.com

22


Boilerplate

A continuación te presentamos Boilerplate.

Al igual que Initializr, Boilerplate es un punto de par-tida muy potente ya que está basado en un código que contempla un montón de posibilidades y trucos de gente muy experimentada en la programación web. Este proyecto se ocupará de que tu página sea compatible con todos los navegadores, mediante el uso correcto de los nuevos tags html5 y hacks css. Gracias a esta plantilla tu página se verá bien en dis-positivos móviles y estará optimizada para motores de búsqueda.

Este proyecto se basa en varios años de investigar las técnicas más actuales y correctas de programa-ción 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 prin-cipal de tu web) programado con código valido en html5, y que incluye dos librerías de javas-cript bastante recurrentes como Modernizr (de la que hablaremos más adelante) y jQuery. Ade-más, este archivo contempla que pueda ser visto mediante Internet Explorer y utiliza comentarios condicionales que asignarán clases css a los dis-


23

tintos tags, dependiendo de las versiones de este navegador, haciendo más fácil la generación de estilos propios para cada una de ellas. Dentro de este documento encontrarás además un script que se ocupa de que tu página 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 “lim-pieza”, permite ir añadiendo los estilos de cero sin que interfieran particularidades css predefi-nidas en cada navegador. Puedes encontrar tam-bién una batería de clases que aportan una serie de estilos básicos para la página. Algunas de ellas se ocuparán de normalizar las fuentes que utili-ces en la página, para que se vean igual en los dis-tintos navegadores. Hay incluidas también, varias clases que aportarán los estilos si se accede a la página desde un dispositivo móvil.

• Iconos para móviles, favicon…

• Un archivo de configuración para el servidor en el que va a ir alojada la página (.htaccess).

24


Uso de Boilerplate

Te preguntarás, ¿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 planti-lla para profundizar en ella y darle estilos a la página y en la medida en que te vayas sintiendo más cómo-do, modifícala a tu gusto.

Dentro del html deberás personalizar las etiquetas <meta>, el código que será utilizado por google ana-litycs etc. Acuérdate también de ajustar los iconos favicon y para dispositivos móviles, según las necesi-dades de tu proyecto.

Al igual que hemos comentado cuando hablábamos de Initializr, lo primero que necesitas, es entender qué función tiene el código que estás utilizando. Para ello Boilerplate dispone de una amplia documenta-ción en su sitio web, en la que te detallan los porme-nores de cada parte del código. Junto con ello, estate atento a los comentarios que vienen “in situ” en el propio código.

Una vez que entiendas lo que hace cada párrafo del código (no hace falta que entiendas cada línea, por lo menos al principio), podrás eliminar todo aquello que tu página no necesite. De esta manera llegarás


25

a personalizar esta plantilla, adaptarla a tus necesi-dades y volverla a utilizar como punto de partida de futuros proyectos.

Te invitamos a visitar la guía oficial de html5 Boiler-plate (http://net.tutsplus.com/tutorials/html-css-te-chniques/the-official-guide-to-html5-boilerplate/) y el sitio oficial del proyecto (http://html5boilerplate.com/).

Modernizr.

Html5 es una tecnología aún en desarrollo que pue-de generar problemas ya que cada navegador tiene un soporte “especial” de la misma. Es decir, cada navegador lee unas características de html5 y otras no, de forma individual. Modernizr es una librería de javascript con la que puedes detectar si el navegador tiene soporte para múltiples capacidades de html5 y css3 y en el caso de que no soporte una que nece-sites, programar una alternativa para ese navegador en concreto.

Cuando tu navegador “lee” una página web constru-ye lo que conocemos como DOM (Document Object Model), una colección de objetos que representan a los elementos html que componen la página. Cada uno de los elementos tiene otro objeto que lo re-

26


presenta en el DOM. Existen objetos globales como window y document que no son específicos de una página concreta.

Todos los objetos del DOM comparten un conjunto de propiedades comunes pero hay algunos que tie-ne más que otras. De hecho html5 añade propieda-des a algunos de estos objetos y ahí es dónde entra Modernizr, ya que recorrerá el DOM buscando estas nuevas características para comprobar si el navega-dor las admite o no.

Modernizr hace estas comprobaciones nada más cargar la página. Esta librería genera un objeto global llamado Modernizr que contiene una propiedad boo-leana (true o false), para cada una de las propiedades que es capaz de detectar. Si el navegador puede uti-lizar la API del elemento canvas, Modernizr.canvas será igual a true. Actualmente Modernizr registra si existe soporte para más de veinte propiedades html5 y css3 y asigna a cada una de ellas clases y una pro-piedad 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, desplega-remos un <div> indicando esta circunstancia.


27

En primer lugar debes descargarte esta librería desde su sitio http://modernizr.comhttp://modernizr.com . Dentro del <head> de tu documento debes hacer una referencia a la ubicación de esta librería en la es-tructura de carpetas de tu proyecto. En el caso de que sitúes este archivo dentro de una carpeta que se llame js (recomendado) situada en el mismo nivel que tu archivo index.html, esta referencia tendría 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 básico de la utilización de la etiqueta <audio>, que veremos posteriormente con mayor detalle.

Una vez que se carga la página, Modernizr detecta si el navegador puede incluir <audio> y posterior-mente, le asigna un valor (true o false) a la propiedad Modernizr.audio y define una clase css “audio” en la

28


etiqueta <html> si el navegador permite utilizar <au-dio>, 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 página se adecue tanto a la posibilidad de que se pueda usar el elemento <audio> como si no.

El css tendría este aspecto. En él se contempla que no se despliegue el <div> con un id “controles”, en el que, por ejemplo irían enmarcados los botones del reproductor de audio, si el navegador no “puede con la etiqueta <audio>”. El div con el mensaje de error que comentábamos solo se desplegará si no pode-mos contar con el elemento <audio>.

.audio #error { /*Aquí puedes especificar los estilos correspondien-tes a cuando se pueda incluir <audio> */ display:none;}

.no-audio #error { display:auto;}

.no-audio #controles { display:none;}


29

El script de Javascript tendrá este aspecto. Sitúalo antes de la etiqueta </body> para tener garantiza-do que tanto la librería como la página está cargada, cuando este script entré en funcionamiento:

<script>

if (Modernizr.audio) {//Aquí incluirías funciones para el caso de que el na-vegador soporte <audio>} else{

//Aquí incluirías funciones para el caso de que el na-vegador no soporte <audio>

}</script>

Si no estás familiarizado con este lenguaje, plantéate adquirir conocimientos en este sentido ya que ac-tualmente se está convirtiendo en el lenguaje predo-minante para “enriquecer” las webs.

Si quieres saber más sobre Modernizr no dudes en consultar su documentación en la siguiente direc-ción. Allí encontrarás ejemplos prácticos para la co-rrecta utilización de esta librería:

http://modernizr.com/docs

LecciónVídeo

3


33

Etiqueta <video>

El elemento <video> ha sido diseñado para que se utilice sin necesidad de un script que detecte los for-matos del archivo. Puedes especificar múltiples ar-chivos de vídeo y cada navegador que soporte esta etiqueta reproducirá aquel archivo que tenga el for-mato concreto que necesite.

Los navegadores que no “puedan” con esta etiqueta la ignorarán, por lo que es fácil programar un “fall-back” y determinar un plugin para reproducir los vi-deos en estos navegadores antiguos. Los navegado-res 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 reproduc-ción del vídeo vas a necesitar javascript. Este ele-mento tiene una API con una serie de propiedades y métodos para controlar la reproducción del vídeo.

Si el navegador puede leer html5 existirá el objeto DOM que se genera para representar a <video> . Ahora puedes usar Modernizr para detectarlo, usan-do Modernizr.video o buscando en concreto los for-matos que necesita el navegador del que se trate (Modernizr.video.webm, Modernizr.video.ogg, Mo-dernizr.video.h264):

34


if (Modernizr.video) { //Tenemos video nativo} else { //Necesitaremos un plugin para reproducir el video}

Para incluir un vídeo con html5 solo necesitas la si-guiente línea:

<video src=”ejemplo.mp4”></video>

Atributos de la etiqueta Vídeo

En el atributo src definirás la ubicación del archivo. Si existe más de un archivo debes usar el elemento <source>, como podrás ver en un ejemplo posterior. Además de src, puedes utilizar otros atributos:

• preload indica que el video comenzará a des-cargarse nada más cargar la página (pero no a reproducirse). Este atributo tiene sentido si la página ha sido diseñada para mostrar un vi-deo. Si el video es solo un complemento en una de las secciones de la página es preferible usar preload=”none” o preload=”metadata”.

• autoplay determina que el video se reproduzca en el momento en que se cargue la página.


35

• controls indica que el reproductor llevará bo-tones para controlar la reproducción. Estos bo-tones 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 métodos y propiedades de la API como play(), pause(), cu-rrentTime, volume y muted.

• type, este atributo ayuda al navegador a iden-tificar el tipo MIME del video. De esta manera no tendrá que comenzar a descargarlo para de-terminar si puede reproducirlo o no. Así, el aho-rro de ancho de banda es evidente y el usuario verá el video antes. Incluirlo es considerado como buena práctica. 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 nave-gador información de tres tipos: el formato del contenedor de video, el codec de video y el codec de audio( respectivamente). Fíjate también en la manera en que se ponen las comillas, porque di-fiere de lo que hemos visto hasta ahora.

• width y height. El navegador definirá las medi-das del video dependiendo de estos dos atribu-tos, sin tener en cuenta su tamaño original. Si no los defines, se respetarán las medidas originales.

36


En la medida de lo posible, para que no se den perdidas de calidad, respeta las medidas origina-les del video. Estos atributos ayudan al navega-dor a reservar el espacio necesario sin tener que esperar a descargar estos datos del propio video haciendo el render más rápido. Estos atributos tienen que definirse con un número entero en píxeles.

• poster. Con este atributo consigues que se des-pliegue 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 podrás imaginar, este atributo em-puja a que el video se reproduzca una y otra vez.

Codificar vídeos

Existe un problema a la hora de incluir el tag <video> en tu página web. Cada navegador utiliza un codec distinto para leer estos archivos por lo que el video deberá estar codificado en un formato que ese na-vegador pueda leer o, si no, dará igual que acepte el elemento <video> porque no se reproducirá nada.


37

Lamentablemente no existe una alternativa definiti-va y universal. Por lo tanto, tendrás que codificar tus videos al menos en dos formatos para asegurarte de que funcione en todos los navegadores. Hay tres co-decs principales h.264, VP8 y Theora. Para evitar pro-blemas debes usar al menos h.264 y Theora o VP8. Para curarnos en salud, en el ejemplo que veremos a continuación utilizaremos los tres. Tendremos un problema similar con el elemento <audio>.

La etiqueta <video> te permite ir definiendo forma-tos en el orden en que quieras que sean considera-dos, 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”>

38


<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 código, primero tratará de reproducir el video mp4, si no es capaz lo intenta-rá con el ogv, después con el webm y si aún 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 repro-ductor flash), el usuario pueda descargarse el video. Los navegadores que soporten html5 ignorarán tanto el <object> , como cualquier “hijo” del elemento <vi-deo> 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.

LecciónAudio

4

40


Etiqueta <audio>

A continuación hablaremos de la nueva etiqueta <au-dio>. Al igual que ocurría 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 navega-dor, manipularlo con Javascript y darle estilos con CSS.

La manera más sencilla para incluir sonido es añadir a la etiqueta <audio>el atributo src con la ubicación del archivo. Para hacerlo un poco más real y usable, hemos incluido el atributo controls al siguiente ejem-plo, 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 problemática similar a la que encontramos anteriormente con la etiqueta <video>, ya que exis-ten otros formatos y hay que decantarse por aque-llos que más aceptación tienen entre los distintos navegadores. La especificación del lenguaje html5 no marca cuál es el formato a utilizar, por lo que cada navegador ha elegido aquel que mejor se adapta a sus características técnicas.


41

En la siguiente tabla vemos cuál es el códec utilizado por cada navegador para procesar el sonido inserta-do con la etiqueta <audio>:

Como seguramente ya te temías, para llegar al máxi-mo de audiencia posible deberás utilizar diferentes codificaciones para tus archivos sonoros dentro de <audio>. Una vez realizadas las distintas codificacio-nes, html5 nos lo pone fácil para definir más de un archivo de sonido. Hemos visto una solución muy si-milar cuando hablábamos de videos.

La etiqueta <audio> permite utilizar otra etiqueta lla-mada <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 utilización de distintas etiquetas <source>, el atributo src pierde sentido, ya que éste sólo es útil si vamos a utilizar un único formato de archivo.

42


A continuación verás un ejemplo en el que ponemos en práctica lo dicho hasta ahora y en el que vamos a definir dos tipos de codificación, que es el mínimo 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 ca-racterísticas, además de src, source y controls, por lo que haremos un breve repaso de lo que explicamos cuando hablábamos de <video>.

• preload “sugiere” al navegador que empiece a descargar el sonido. La última opción la tiene el propio navegador que puede no comenzar la precarga del audio si el ancho de banda no es su-ficiente. Si el audio es solo un complemento en una de las secciones de la página es preferible usar preload=”none” o preload=”metadata” que precargará información como el número de pistas y su duración.

• autoplay determina que el sonido se reproduz-


43

ca en el momento en que se cargue la página.

• 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 = “au-dio/wav”, type = “audio/mpeg” y type = “audio/ogg” para los archivos wav, mp3 y ogg respecti-vamente.

• 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 es-cucharlo tendrá que activar el volumen.

• mediagroup permite reproducir distintas pistas de un mismo recurso de sonido en distintas par-tes de una página. Para hacer efectivo este atri-buto es necesario utilizar la API de Javascript.

Contenido alernativo

Es conveniente que definas un contenido alterna-tivo para aquellos usuarios que utilicen un navega-

44


dor que no tolere la etiqueta <audio>. La manera de incluir este contenido es idéntica a la que vimos al hablar de <video>. En el ejemplo que te ofrecemos a continuación, el contenido alternativo es un repro-ductor 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 nues-tro sonido de ejemplo. Puedes descargarlo <a href=”ejemplo.ogg”>aquí</a></audio>

Recuerda que, a excepción de <source> los elemen-tos secundarios de la etiqueta <audio>serán ignora-dos. Por lo tanto, todos los navegadores que sean capaces de leer html5 ignorarán el reproductor flash que hemos situado como contenido alternativo.

Observa cómo además hemos previsto que el nave-gador pueda no ser capaz de reproducir contenidos en flash, incluyendo un link para la descarga del ar-chivo de sonido.


45

Otra estrategia, como ya sabes, sería utilizar Moder-nizr para conocer las capacidades del navegador en este sentido. Si existe el objeto DOM que representa a <audio> podrás detectarlo usando Modernizr.au-dio, de la siguiente manera:

if (Modernizr.audio) { //Tenemos audio nativo} else { //Necesitaremos un plugin para reproducir el so-nido}

Seguridad del audio y del vídeo

Queremos señalar que html5 no ofrece seguridad anti copia. Un archivo insertado mediante las etique-tas <audio> o <video> es tan fácil para el usuario de guardar en el disco duro como las imágenes <img>.

Para los casos en los que sea necesario un nivel ma-yor de seguridad es conveniente la utilización de un plugin.

Si además de las funcionalidades que ofrecen los atributos que hemos descrito antes, quieres tener mayor control sobre la reproducción de los elemen-tos “media” (<audio> y <video>) existe una API de

46


Javascript que te proveerá de distintos eventos y mé-todos.

Métodos de reproducción

canplaytype(type);Este método detecta si el navegador puede reprodu-cir el tipo de archivo media que le pasas como argu-mento (type)

currentTimePropiedad que devuelve la posición actual de la re-producción, en segundos.

durationDuración del archivo en segundos.

play(); y pause(); hacen exactamente lo que te ima-ginas.

Vamos a ilustrar estos métodos con un par de ejem-plos prácticos. Con el siguiente código el usuario po-drá saltar a un punto concreto de la reproducción del sonido utilizando el método play(); combinado con la propiedad currentTime. Observa como prescindi-mos del atributo controls para utilizar una botonera propia.


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 nues-tro 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 = document.getElementsByTagName(“audio”)[0];audio.currentTime = segundos;audio.play(); }</script>

Quizá hayas echado de menos un método que sirva para detener la reproducción. Para conseguir esta funcionalidad hay que utilizar el método pause (); combinado con la propiedad currentTime, como ve-remos a continuación:

48


<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 nues-tro 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 reproducción” onclick=”stopAudio();”>Stop</button>

<script> function playAt(segundos){ var audio = document.getElementsByTagName(“audio”)[0]; audio.currentTime = segundos; audio.play(); } function stopAudio(){ var audio = document.getElementsByTagName(“audio”)[0]; audio.currentTime = 0;


49

audio.pause(); }</script>

LecciónCanvas

5

52


Etiqueta <canvas>

Sin duda, la etiqueta <canvas> es una de las que más revuelo ha generado con la incursión de html5. Como verás más adelante, este elemen-to combinado con Javascript puede alcanzar co-tas imposibles para versiones anteriores de html.

Este elemento te permite dibujar formas con líneas, arcos y rellenos directamente en un bloque rectangu-lar de tu página. Además de dibujar formas manual-mente, este elemento te permite tomar la informa-ción o los “datos en bruto” de un archivo de imagen externo y redibujarlo allí mismo. De la misma mane-ra que puedes dibujar, podrás borrar parcial o total-mente lo que ya esté dibujado en el canvas, lo que nos lleva a ser capaces de generar animaciones sim-plemente dibujando un objeto, limpiando el canvas y redibujando dicho elemento en una posición distinta.

Podrás definir igualmente transformaciones y efec-tos a aplicar en el canvas. Además este elemento es trasparente por defecto, por lo que se pueden apilar varios, para generar efectos más complejos. Esto con-vierte el canvas en una imagen “dinámica” ya que te-nemos acceso a toda la información que compone esa imagen y podemos manipularla en el momento. No es simplemente un archivo externo, cerrado, con un for-mato png o jpg insertado mediante la etiqueta <img>.


53

La manera más simple de declarar un <canvas> es la siguiente:

<canvas id="mi_canvas"></canvas>

También puedes generarlo con javascript de la si-guiente manera:

var mi_canvas = document.createElement("canvas");mi_canvas.id = "mi_canvas";document.body.appendChild(mi_canvas);

De la misma manera que definíamos contenido alter-nativo para otras etiquetas propias de html5, el ele-mento <canvas> también permite hacerlo para todos aquellos navegadores que no sepan interpretarlo.

Definir dimensiones

Puedes definir el ancho y alto de canvas que más te convenga para tu proyecto, pero ten en cuenta que este ancho y alto son atributos del DOM y no atribu-tos CSS.

Por tanto, deberás definir estas dimensiones en el propio archivo html o mediante javascript, para que el navegador sepa cuál es el espacio sobre el que puede dibujar.

54


En cambio, si tratas de cambiar las dimensiones con CSS lo único que lograrás, será deformar el canvas y lo que ya esté allí dibujado. Si no defines dichas di-mensiones, el navegador le aplicará al canvas unas por defecto (300 x 150 píxeles).

Puedes definir el tamaño 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 comentábamos anteriormente, si tratas de ha-cer 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 conseguirás cambiar la dimensión de la zona di-


55

bujable sino que estirarás o comprimirás 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 edición de imágenes.

Si quieres, por ejemplo, que las dimensiones en píxe-les (dibujables) del canvas se ajusten a las dimensio-nes de la ventana del navegador del usuario, necesi-tas hacer algo así:

window.onresize = function() {mi_canvas.width = document.documentElement.clientWidth;mi_canvas.height = document.documentElement.clientHeight;};

Con este código el canvas responderá a cada even-to de “redimensión” de la ventana del navegador. El elemento canvas puede redimensionarse las veces que haga falta y éste, además de adaptarse al nuevo tamaño, se limpiará y volverá a dibujarse o renderi-zarse con el nuevo tamaño. Sabiendo esto, podemos utilizar un truco para limpiar el canvas, que es asig-narle nuevamente su propio tamaño:

56


function limpiar(mi_canvas) {mi_canvas.width = mi_canvas.width;}

Para evitar desproporciones es conveniente que ha-gas el canvas de un tamaño físico idéntico al bitmap que quieras dibujar en él.

Dibujar con el elemento Canvas

Vayamos al grano. ¿Cómo dibujamos en el elemento <canvas>? En primer lugar, debes obtener una refe-rencia a su “contexto” (puede ser 2D o 3D), y apli-carle métodos de la API de dibujo a esa referencia. Podríamos definir ese contexto como un sistema de coordenadas.

El contexto 2D define un sistema de coordenadas plano bi-dimensional cartesiano con un punto de ori-gen (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 (líneas rectas, curvas, rectángulos), y luego decides cuándo y cómo se hace visible.


57

Normalmente dibujarás, o bien un contorno o bien un relleno. Veamos un ejemplo:

var mi_canvas = document.getElementById(“mi_can-vas”);var contexto = document.getElementById(“mi_can-vas “).getContext(“2d”);contexto.beginPath();contexto.moveTo(20,20);contexto.lineTo(40,40); contexto.strokeStyle = “#000”;contexto.stroke();

Con este código dibujamos una línea negra del punto (20,20) al (40,40) del canvas.

El punto (0,0) se encuentra en el vértice superior iz-quierdo. Para dibujar un círculo haríamos lo siguien-te:

contexto.beginPath();contexto.arc(40, 40, 10, 0, Math.PI * 2, true); contexto.fillStyle = “#000”;contexto.fill();

Gracias a este código dibujamos un círculo desde el punto central (40,40), con un radio de 10 píxeles, partiendo del ángulo 0 (en radianes) hasta el ángulo Math.PI * 2 (número pi por 2) y en el sentido contra-

58


rio de las agujas del reloj. Además, lo hemos rellena-do del color negro.

API de dibujo del elemento <canvas>

A continuación vamos a explicarte algunos métodos de la API del <canvas> que te ayudarán 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 pequeñas va-riaciones que pueden aparecer.

beginPath()Esta función sirve para empezar a dibujar un camino en el contexto. No tiene ningún parámetro y por sí sola no hace ninguna acción visible en el canvas.

Una vez invocada la función podremos empezar a di-bujar el camino añadiendo segmentos para comple-tarlo con las diferentes funciones de dibujo.

Para que este camino sea visible, deberás utilizar una función que fuerce su renderización, como stroke() o fill().


59

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 utilizan-do moveTo().

Luego vamos dibujando segmentos en el camino por medio de lineTo() o arc() que nos llevan a otros pun-tos del lienzo.

La función closePath() dibuja una línea recta desde el punto donde se haya quedado el camino al punto inicial donde empezamos a construirlo, en otras pa-labras, “cierra” el dibujo.

moveTo(x, y)Sirve para mover el puntero a la coordenada (x,y) donde comenzaremos a definir el camino. Esta fun-ción no dibuja nada en sí, pero nos permite definir el primer punto de un camino.

lineTo(x, y)Esta función crea una línea recta, desde la posición actual del puntero de dibujo, hasta el punto (x,y). La posición actual del camino la podemos haber indica-do previamente con un moveTo(), o con otro lineTo().

60


Si no se indicó antes una posición 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 método genera un arco (como cabría esperar). Este arco puede definirse de tal manera que comple-te un circulo completo como ya vimos en un ejemplo anterior.

Repasemos los parámetros que debemos enviar al método arc():

• Coordenadas del centro del arco (x,y).

• Radio (en píxeles).

• 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 fórmula:

Radianes = número PI x (grados/180)


61

• Por último tenemos un parámetro booleano, donde true significa que el trazo va desde el án-gulo de inicio al ángulo final en el sentido contra-rio de las agujas del reloj.

fill()Este método sirve para rellenar de color el último ca-mino que haya sido cerrado. Si no has definido cómo cerrar el camino, bien con el método closePath () o de otra manera “manual”, se cerrará automática-mente con una línea recta hasta el punto de inicio. Este método hace que se renderice el canvas.

stroke()Con el método stroke() dibujamos una línea 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 método hace visible el <canvas>.

strokeText(texto, x, y, [opcional: anchuraMáxima])fillText(texto, x, y, [opcional: anchuraMáxima])Estos métodos añaden texto al canvas en la posición (x,y). strokeText() pintará la silueta del texto y fill-Text() pintará un texto con relleno.

Para determinar el estilo de la fuente (tamaño, tipo de letra etc.) a utilizar en el contexto usarás el méto-

62


do font(). Por ejemplo:

contexto.font = “15pt Arial”;

Este método lo debes usar siguiendo las mismas re-glas que utilizarías definiendo la fuente con CSS.

Otro método interesante de la API del canvas es clip(). Este comando utilizará el camino recién defi-nido como máscara de los siguientes comandos de dibujo.

Dicho de otra manera, solo se dibujará en el canvas aquello que quede dentro de los límites definidos con el método clip().

En el siguiente ejemplo definimos una máscara cir-cular. Este círculo 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 máscara igual a sus propias dimensiones. Si defines una más-cara con el método clip (), esa mascara será utilizada


63

a partir de ese momento para todos los comandos de dibujo subsecuentes, hasta que la cambies o restau-res el canvas, por ejemplo con el método restore ().

clearRect(x, y, ancho, alto)Esta función nos sirve para borrar áreas rectangu-lares de un canvas. Funciona de manera similar a la función 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 ma-nera similar con la única diferencia que uno define el color del trazado y el otro define el color de relle-no. 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 líneas en tus caminos puedes usar también estas propiedades: lineWidth, lineCap, y lineJoin. Con el siguiente código defines que el grosor de la línea sea de 12 píxeles y que la unión entre las líneas se realice mediante uniones redondas:

contexto.lineWidth = “12”;contexto.lineJoin = “round”;

64


lineCap tienen los mismos posibles valores que line-Join pero define la forma del final de cada línea, no solo la unión entre ellas.

API de dibujo del elemento <canvas>Tratamiento de imágenes

Una de las funcionalidades más interesantes que ofrece el elemento canvas es la posibilidad de “pin-tar” en él una imagen. El método que debes utilizar para ello es el mostrado en el código.

drawImage(objeto_imagen, x, y).

Este método precisa tres parámetros, 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 básicos de Ja-vascript, 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 dinámicamente un objeto imagen, como verás en el siguiente ejemplo:


65

var img = new Image(); img.src = ‘imagen_para_el_canvas.jpg’;

Con el atributo src, asignamos al objeto una ruta a un archivo gráfico. Una vez que obtenemos el objeto de la imagen y ésta se ha cargado en el navegador completamente, ya podemos hacer uso de la función drawImage(). Así:

contexto.drawImage(img, 0, 0);

Como decíamos, debes asegurarte de que la imagen se haya cargado por completo, para lo que te reco-mendamos usar el evento onload del objeto - ima-gen. El código 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 esta-mos dibujando en el lienzo es del mismo tamaño que el propio elemento <canvas>.

De no ser así, el canvas actuaría como una máscara y solo mostraría lo que quepa de la imagen dentro de sus límites.

66


No obstante, podemos escalar la imagen que que-remos dibujar, añadiendo un par de parámetros a la función 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 proporcio-nales a las dimensiones originales de la imagen.

La tercera y más compleja manera de usar la función drawImage() es la que podemos observar en el có-digo.:

contexto.drawImage(img, x, y, anchura, altura, dx,dy,dw,dh)

Obviando el primer parámetro, que seguirá siendo nuestro objeto imagen, los primeros cuatros argu-mentos son numéricos (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 numéricos represen-tan el punto de inserción (dx,dy) y el ancho y el alto (dw,dh) que tendrá la copia de la captura que hemos


67

realizado, dentro del elemento canvas. De una mane-ra gráfica, sería algo así:

Una vez que hayas dibujado la imagen en el canvas, podrás modificarla y meterle efectos a tu gusto, ya que lo que has dibujado no es una imagen cerrada sino un montón de datos brutos de la misma.

De hecho, la API del canvas contiene el método ge-tImageData()que es capaz de recoger la información de color de cada pixel dentro de la región de la ima-gen, que especifiquemos.

var datos_raw = contexto.getImageData(0, 0, 200, 200);

68


Este método abre la puerta a todo tipo de transfor-maciones de color sobre el canvas.

Para facilitar el control sobre las transformaciones realizadas, la API ofrece dos métodos: save () y res-tore().

save () guarda el estado actual del canvas y restore() eliminará la última transformación que se haya rea-lizado.

Otros efectos: Gradientes

La API del canvas también permite generar gradien-tes. Un gradiente es una progresión gradual de un color a otro u otros.

Para dibujar un gradiente en el lienzo existen estos tres métodos: createLinearGradient(), createRadial-Gradient() y addColorStop().

createLinearGradient(x0, y0, x1, y1)

Este método devuelve un objeto que representa un gradiente lineal a lo largo de la línea definida en los argumentos. Los argumentos indican un punto inicial (x0,y0) y un punto final (x1,y1) del gradiente.


69

createRadialGradient(x0, y0, r0, x1, y1, r1)

Este método devuelve un objeto que representa un gradiente radial que se extiende a través del cono de-finido por los dos círculos 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 método indica un punto (offset) y un color den-tro del “recorrido” del gradiente. El valor para el pun-to puede ir desde el 0.0 de un extremo hasta el 1.0 del otro extremo.

A continuación verás un código 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_can-vas”);var contexto = mi_canvas.getContext(“2d”);

var lingrad = contexto.createLinearGra-dient(20,20,50,70);lingrad.addColorStop(0, “#000”);lingrad.addColorStop(0.6, “#ccc”);

70


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 característica del canvas: la trans-parencia. 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é píxeles son transparentes y cuáles no, simplemente con lo que dibujas en el lienzo. Los píxeles no dibujados mostrarán lo que hay debajo.

Además puedes definir la transparencia parcial de


71

cada píxel que dibujes modificando el canal alfa deI color de relleno.

La transparencia parcial en un píxel, consigue que el usuario vea una mezcla de color entre ese píxel y el píxel que este situado, fuera del canvas, inmediata-mente por debajo, o una mezcla de los colores defi-nidos para ese píxel dentro del propio canvas, como veremos a continuación mediante un ejemplo.

contexto.beginPath();contexto.arc(40, 40, 25, 0, Math.PI * 2, true); contexto.closePath();contexto.fillStyle = “#f00”;contexto.fill(); //círculo 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 azulcontexto.fill(); //círculo de color azul

72


Con este código dibujamos un circulo azul que se superporne parcialmente sobre un círculo rojo. Los píxeles “compartidos” son de color morado porque mezclan los datos de color de ambos círculos y se genera este nuevo color, gracias a que definimos una transparencia del 75% en el círculo azul.

De no haber definido esta transparencia parcial, el círculo azul se mostraría por “encima” del círculo rojo, ya que si no se define ninguna transparencia el color siempre se dibuja opaco.

A pesar de los efectos que seamos capaces de lo-grar, 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 cual-quier programa de edición de imágenes, debemos definir varios canvas y situarlos apilados unos encima de otros, cada uno con el dibujo que deseemos.

De esta manera podemos hacer la composición que queramos valiéndonos del valor transparente por de-fecto de los píxeles no dibujados y, además, dar un tratamiento individual a cada canvas.

Para definir la transparencia de un color puedes utili-


73

zar el método 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 línea hemos definido un 50% de transparen-cia para el color rojo (255,0,0).

Otra forma de definir la transparencia es utilizar el método 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 opción que te permite el elemento canvas es la utilización de patrones. Un patrón es una imagen, normalmente pequeña, usada para rellenar regio-nes, situando copias del patrón 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 patrón.

La manera de hacerlo es crear un objeto patrón en el que ya habrás elegido la imagen a utilizar y cómo

74


quieres que se repita a lo largo de la región de dibujo, para posteriormente, mediante los métodos strokeS-tyle o fillStyle, señalar este objeto como estilo de re-lleno.

El comando que te permite crear el objeto que utili-zarás como patrón es createPattern(). Este método precisa de dos argumentos: el objeto de imagen ele-gido para ser nuestro patrón y una cadena de texto que indica la manera en la que se a llevar a cabo la repetición de esa imagen.

Es preferible que uses “repeat” como valor de repe-tición, 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 defi-nición y uso de un patrón:

var contexto = document.getElementById(‘mi_can-vas’).getContext(‘2d’);

var img = new Image(); img.src = ‘pattern.png’;


75

//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: Animación

Por último hablaremos de efectos de animación en el <canvas>. Hemos visto anteriormente algunas mane-ras de limpiar lo que hayamos dibujado en el lienzo.

Si inmediatamente después de esta limpieza volve-mos a dibujar en el canvas lo que hubiera dibujado antes, con alguna pequeña modificación, y además repetimos este ciclo, obtendremos una ilusión de animación ya que estaríamos emulando la técnica 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 lim-piar – dibujar es elevado (20 o 30 veces por segundo),

76


puedes obtener animaciones muy elegantes. Vea-mos un ejemplo en el que hemos juntado muchas de las cosas que hemos explicado anteriormente.

Fíjate en los comentarios para averiguar lo que ocu-rre en cada paso. Al final obtendremos medios – cír-culos 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 función devuelve un valor entre 0 y 255}

function circulos(){ for(i=0; i<300; i+=5){ //Recorremos la anchura del canvas.

for(j=0; j<300; j+=5){ //Recorremos la altura del canvas.

contexto.beginPath();


77

contexto.arc(i+5, j+5, 5, 0, Math.PI, true); //Definimos medio círculo

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 repetición de medio segundo. Cada medio segundo se llama a las funciones render () y circulos().*/

setInterval(function(){ render(); circulos();}, 500);

78


Si juegas con el número que hemos indicado en el método setInterval, verás como si lo bajas mucho el navegador sufre porque tiene que realizar el aclara-do demasiado a menudo.

La primera manera de optimizar el rendimiento del navegador es encontrar un intervalo en el que la ani-mación ya se vea suficientemente bien.

Por otra parte, habrá animaciones que no requeri-rán más 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 también más de un canvas, usando uno de ellos como fondo y animando sobre él otros elementos que podremos ir limpiando


79

y redibujando sin tener que redibujar todo el fondo

La manera de limpiar parcialmente el canvas es me-diante el método clearRect() que vimos anteriormen-te.

LecciónOtros

6

82


Data

En este último capítulo abordaremos de una manera más breve, otras aportaciones que ha hecho la espe-cificación de html5.

Empezaremos con el apartado data en el que verás cómo añadir información suplementaria a tu código.

Posteriormente te hablaremos de las capacidades de almacenaje que se han definido con la llegada de este lenguaje y finalmente, nos despediremos, apor-tándote sugerencias y fuentes de información.

Html5 ha incluido la posibilidad de añadir datos adi-cionales a las diferentes etiquetas respondiendo a la necesidad de tener información semántica que com-plete 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 más segura de manejar esta información es mediante Javascript como verás en el siguiente ejemplo:


83

<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 añadido información útil para nosotros como es el número de modelo corres-pondiente a cada color y además hemos ocultado esta información al usuario ya que para él no es re-levante.

Como has podido ver, la manera de incluir estos da-tos es generar una categoría que vaya precedida por el prefijo data-. Puedes añadir varias categorías si así lo necesitas.

El nombre de esa categoría puede ser el que más te convenga siempre que evites mayúsculas y caracte-res “extraños”.

Si quieres nombrar la categoría con más de una pala-bra, sepáralas mediante guiones (-).

Para acceder a esta información extra usando javas-crit, debes hacer algo así:

84


<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 añada una coma final si es la última palabraif (i != (modelos.length-1)) {output += “, “}

}//Aquí insertamos el resultado obtenidodocument.getElementsByTagName(“p”)[0].innerHT-ML = output;</script>

En este ejemplo creamos un array “modelos” que contiene todos los elementos de lista y creamos una cadena de texto (output) que más adelante inserta-remos dentro de una etiqueta <p>.


85

Recorremos el array modelos en busca de dataset-modelo, o buscando ese atributo mediante getAttri-bute (en el caso de que el navegador no reconozca el dataset de html5), y lo vamos añadiendo a la cadena output.

Finalmente insertamos esta cadena en el primer pá-rrafo 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 ocasión, eliminar los datos que hayas insertado previamente, puedes hacerlo dán-doles un valor null.

86


Web Storage

Html5 define LocalStorage y SessionStorage para acumular datos de sesión y datos locales en el equi-po del usuario, para hacer la navegación más perso-nalizada. 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 duración) de cada petición al servidor, ya que toda la infor-mación guardada en ellas debe viajar al servidor y volver.

• Tienen una limitación de 4kb.

• El usuario debe tener las cookies habilitadas, lo que no siempre ocurre.

LocalStorage y SessionStorage están diseñadas para almacenar mayor información (unos 5 megabytes), a la que podrás acceder con javascript después de que la página se haya cargado.

Además, al almacenarse la información en el equipo del usuario no tiene que enviarse ni recibirse desde el servidor en cada petición.

Veamos algunos ejemplos. Como verás la informa-


87

ción se almacena utilizando un nombre y asignando un valor a ese nombre.

Para guardar y recuperar información utilizamos setItem(‘nombre’, ‘valor’) y getItem(‘nombre’). Para eliminar información almacenada disponemos del método removeItem(‘nombre’).

Si lo que necesitas es limpiar todos los datos que es-tén almacenados existe el método clear ().

Disponemos también de una forma para saber cuán-ta información existe en el equipo, iterando a través de la propiedad length y usando el método key como veremos a continuación.

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 métodos y propiedades sirven también para sessionStorage. La diferencia entre ambas es que sessionStorage guardará los valores durante el tiempo de sesión del navegador y se borrarán cuan-do el navegador se reinicie.

88


Con localStorage, los valores se conservan aunque el usuario cierre el navegador y podrán 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 características de almacenaje.

Si el navegador puede utilizar esta API existirá una propiedad localStorage en el objeto global window de javascript. Podemos detectar esta propiedad uti-lizando Modernizr:

if (Modernizr.localstorage) { // podemos utilizar localStorage y seesionStorage } else { // El resultado de la comprobación anterior es “un-defined”. // Por lo tanto no tenemos acceso a esta API. }

Tanto localStorage y sessionStorage, al igual que ocu-rría con las cookies, solo pueden almacenar cadenas de texto. Para poder guardar objetos más complejos debemos utilizar el objeto JSON, más concrétamente sus métodos stringify y parse .


89

Veámoslo con un ejemplo:

var usuario = {nombre: ‘Peter’, apellido: ‘Collins’, id:’001’};var preferencias = {ocio: ‘deporte’, negocio: ‘actor’}; Una vez definidos los objetos usuario y preferen-cias, podemos almacenarlos tanto en sessionStorage como en localStorage en función 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 información haríamos 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));}

LecciónApéndices

7

92


Epílogo 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 especificación.

Ten en cuenta que hemos dejado una serie de temas sin desarrollar porque consideramos que requieren un nivel de programación más elevado y su uso es menos general.

Te presentamos a continuación 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.

• Geolocalización. Con esta API puedes detectar cuál es la longitud y latitud desde la que se conec-tan tus usuarios. • Web workers. Esta funcionalidad permite que la aplicación tenga más de un flujo de código, para que los códigos más intensivos puedan se-


93

pararse del flujo principal de la página y no relan-tezca su marcha.

• Aplicaciones Offline. Html5 permite preparar tu página para que pueda verse offline. • Accesibilidad para usuarios con algún tipo de discapacidad.

Fuentes de información

Por último, para no dejarte tirado en tu proceso de investigación, queremos aportarte una serie de fuen-tes en las que hemos basado este curso, que debes contemplar junto con aquellas librerías 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

94


http://html5gallery.com

http://code.google.com/p/html5shiv/

http://caniuse.com

http://www.cristalab.com

http://www.maestrosdelweb.com/

HTML5 Cookbook, O’Reilly 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-locals-torage-part-one/


95

http://www.graphicmania.net/how-to-create-ht-ml5-video-for-your-website/

http://www.w3schools.com/html5/

http://www.desarrolloweb.com/

http://html5please.us/

html5

Documents

Transcript of html5