1 - Introduccin.

HTML 5 es la quinta revisin ms importante que se hace al lenguaje HTML. En esta versin, se introducen nuevas caractersticas para ayudar a los autores de aplicaciones Web, y se ha prestado especial atencin a la definicin de claros criterios de conformidad para los agentes de usuario (navegadores) en un esfuerzo por mejorar la interoperabilidad.La especificacin actual de HTML 5 la podemos consultaraqu. Podemos seguir los cambios que se hacen a la especificacin del HTML 5 enTwitter. Los integrantes del grupo de trabajo para definir las especificaciones del HTML 5 pertenecen a muchas empresas y los podemos veraqu.Este tutorial presenta los elementos de HTML 5 que estn actualmente siendo implementados por los navegadores: FireFox, Chrome, Safari, Opera e Internet Explorer.

2 - DOCTYPE

La declaracin del tipo de documento (DTD Document Type Declaration), esta seccin se ubica en la primera lnea del archivo HTML, es decir antes de la marca html.Segn el rigor de HTML 4.01 utilizado podemos declararla como:Declaracin transitoria: Declaracin estrcta:

Ahora con el HTML 5 se simplifica esta seccin con la siguiente sintaxis:

Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la especificacin del HTML 5.

Si vemos el cdigo fuente de esta pgina veremos la forma de declarar el DOCTYPE en HTML5.

CANVAS es una nueva marca del HTML 5, permite dibujar en dicha rea mediante JavaScript. El objetivo de este elemento es hacer grficos en el cliente (navegador), juegos etc. Para hacer un uso efectivo de este nuevo elemento de HTML tenemos que manejar el JavaScript.La estructura de un programa que accede al canvas es:

function retornarLienzo(x){ var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false;}

function dibujar(){ var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100); }}

Su navegador no permite utilizar canvas.

La primer funcin que implementaremos y ser de uso comn en todos los problemas es la que retorna la referencia al objeto que nos permite dibujar en el canvas:function retornarLienzo(x){ var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false;}La funcin recibe el "id" que hemos especificado en el elemento canvas dispuesto en la pgina (en este ejemplo le llamamos lienzo1):

Su navegador no permite utilizar canvas.

En caso que el navegador no implemente la especificacin del elemento canvas produce un falso el if (lo que estamos haciendo en este if es comprobar si existe la funcin getContext, en caso afirmativo el navegador soporta canvas): if (canvas.getContext) En caso de implementar el canvas obtenemos una referencia del mismo llamando a la funcin getContext y pasando como parmetro un string con el valor "2d" (a futuro es probable la implementacin de un canvas que permita "3d"): var lienzo = canvas.getContext("2d"); La funcin dibujar es la que se ejecuta luego que se carga la pgina en el navegador:function dibujar(){ var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100); }}En esta funcin llamamos a la anterior "retornarLienzo("lienzo1") pasando como parmetro el id del canvas respectivo. En caso que la funcin retorne la referencia al lienzo el if se verificar como verdadero y estaremos en condiciones de comenzar a dibujar en el mismo: var lienzo=retornarLienzo("lienzo1"); if (lienzo)Mediante la variable lienzo podemos acceder a un conjunto de funciones y propiedades disponibles para dibujar. En nuestro ejemplo: lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100);Activamos como color de relleno de figura el rojo (200,0,0) y seguidamente llamamos a la funcin fillRect que dibuja un rectngulo desde la posicin (10,10) con ancho de 100 pxeles y un alto de 100 pxeles. La coordenada (0,0) se encuentra en la parte superior izquierda.

function retornarLienzo(x){ var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false;}

function dibujar(){ var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100); }}

Su navegador no permite utilizar canvas.

4 - CANVAS (dibujar lneas)

Para dibujar lneas disponemos de una serie de mtodos que debemos llamar en un orden predeterminado.El algoritmo para dibujar dos lneas que formen una letra "V" es:

function retornarLienzo(x){ var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false;}

function dibujar(){ var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle = "rgb(200,0,0)"; //Inicio de camino lienzo.beginPath(); lienzo.moveTo(0,0); lienzo.lineTo(150,300); lienzo.lineTo(300,0); //Trazar linea lienzo.stroke(); }}

Su navegador no permite utilizar canvas.

Inicializamos la propiedad que fija el color de la lnea: lienzo.strokeStyle = "rgb(200,0,0)";Llamamos al mtodo beginPath para indicar que comenzamos a dibujar la/s lnea/s: lienzo.beginPath();Movemos el puntero grfico a la coordenada donde comenzar a dibujarse llamando al mtodo moveTo: lienzo.moveTo(0,0);A travs del mtodo lineTo trazamos una lnea desde donde se encuentra el puntero grfico hasta la coordenada indicada mediante parmetros: lienzo.lineTo(150,300);Trazamos una segunda lnea desde donde finaliz la anterior hasta la nueva coordenada: lienzo.lineTo(300,0);Para que se hagan efectivas todas la lneas trazadas hasta el momento debemos llamar al mtodo stroke: lienzo.stroke();El puntero grfico se desplaza cada vez que llamamos al mtodo lineTo.

function retornarLienzo(x){ var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false;}

function dibujar(){ var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle = "rgb(200,0,0)"; //Inicio de camino lienzo.beginPath(); lienzo.moveTo(0,0); lienzo.lineTo(150,300); lienzo.lineTo(300,0); //Trazar linea lienzo.stroke(); }}

Su navegador no permite utilizar canvas.

5 - CANVAS (dibujar lneas)

Problema:Dibujar una cuadrcula formada por 10 lneas horizontales y 10 lneas verticales.

function retornarLienzo(x){ var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false;}

function dibujar(){ var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle = "rgb(0,0,255)"; lienzo.beginPath(); for(var col=0;col