HTML 5

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 consultar aqu. Podemos seguir los
cambios que se hacen a la especificacin del HTML 5 en Twitter. Los integrantes del grupo
de trabajo para definir las especificaciones del HTML 5 pertenecen a muchas empresas y
los podemos ver aqu.
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Declaracin estrcta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ahora con el HTML 5 se simplifica esta seccin con la siguiente sintaxis:
<!DOCTYPE HTML>
Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos
utilizando la especificacin del HTML 5.
2 DOCTYPE
Problema:Confeccionar una pgina que muestre el DOCTYPE propuesto para el
HTML5.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Si vemos el cdigo fuente de esta pgina veremos la forma de declarar el
DOCTYPE en HTML5.</p>
</body>
</html>
3 - CANVAS
ANVAS 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:
<html>
<!DOCTYPE HTML>
<head>
<script type="text/javascript">

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);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="200">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
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:
{
{
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):
</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):
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"):
La funcin dibujar es la que se ejecuta luego que se carga la pgina en el navegador:
function dibujar()
{
if (lienzo)
{
}
}
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:
if (lienzo)
Mediante la variable lienzo podemos acceder a un conjunto de funciones y propiedades
disponibles para dibujar. En nuestro ejemplo:
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.
4 - CANVAS
<!DOCTYPE HTML>
<html>
<head>

{
{
return lienzo;
}
else
return false;
}

function dibujar()
{
if (lienzo)
{
}
}
</script>
</head>
</canvas>
</body>
</html>
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:
<!DOCTYPE HTML>
<head>

{
{
return lienzo;
}
else
return false;
}

function dibujar()
{
if (lienzo)
{
lienzo.strokeStyle = "rgb(200,0,0)";
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0,0);
lienzo.lineTo(150,300);
//Trazar linea
lienzo.stroke();
}
}
</script>
</head>
</canvas>
</body>
</html>
Inicializamos la propiedad que fija el color de la lnea:
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:
Trazamos una segunda lnea desde donde finaliz la anterior hasta la nueva coordenada:
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.
Problema:Dibujar dos lneas que formen la letra "V".
<!DOCTYPE HTML>
<head>

{
{
return lienzo;
}
else
return false;
}

function dibujar()
{
if (lienzo)
{
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0,0);
//Trazar linea
lienzo.stroke();
}
}
</script>
</head>
</canvas>
</body>
</html>
Problema:Dibujar una cuadrcula formada por 10 lneas horizontales y 10 lneas verticales.
<head>

{
{
return lienzo;
}
else
return false;
}

function dibujar()
{
if (lienzo)
{
lienzo.beginPath();
for(var col=0;col<=300;col+=30)
{
lienzo.moveTo(col,0);
lienzo.lineTo(col,300);
}
for(var fil=0;fil<=300;fil+=30)
{
lienzo.moveTo(0,fil);
lienzo.lineTo(300,fil);
}
lienzo.stroke();
}
}
</script>
</head>
</canvas>
</body>
</html>

5 -
CANVAS (dibujar lneas)
<!DOCTYPE HTML>
<head>

{
{
return lienzo;
}
else
return false;
}

function dibujar()
{
if (lienzo)
{
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0,0);
//Trazar linea
lienzo.stroke();
}
}
</script>
</head>
</canvas>
</body>
</html>

Problema:Dibujar una cuadrcula formada por 10 lneas horizontales
y 10 lneas verticales.
5 - CANVAS (dibujar rectngulo -
permetro)
Para dibujar rectngulos disponemos del mtodo strokeRect. Dispone de cuatro parmetros,
los dos primeros indican la columna y fila inicial del rectngulo y los otros dos representan
el ancho y alto en pxeles.
El mtodo strokeRect es afectado por la propiedad strokeStyle. Solo se pinta el permetro
del rectngulo indicado.
Dibujaremos un rectngulo ubicado en la columna 50 y fila 10 con un ancho de 200 pxeles
y 100 pxeles de altura:
<!DOCTYPE HTML>
<html>
<head>

function retornarLienzo(x) {
if (canvas.getContext) {
return lienzo;
} else
return false;
}

function dibujar() {
if (lienzo) {
lienzo.strokeRect(50,10,200,100);
}
}
</script>

</head>
</canvas>
</body>
</html>
Activamos el color azul y dibujamos inmediatamente el rectngulo:

permetro)
Problema:Dibujar un rectngulo ubicado en la columna 50 y fila 10 con un ancho de 200 pxeles y
100 pxeles de altura
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
}
</script>

</head>
</canvas>
</body>
</html>
permetro)
Problema:Dibujar tres cuadrados de color rojo, verde y azul.

<!DOCTYPE HTML>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.strokeStyle="rgb(255,0,0)";
}
}
</script>

</head>
</canvas>
</body>
</html>
6 - CANVAS (estilos de lnea)
Disponemos de varias propiedades para configurar el etilo de la lnea. Mediante un ejemplo
veremos como fijar valores a las propiedades: lineWidth, lineCap y lineJoin.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.lineWidth=7;
lienzo.moveTo(10,5);
lienzo.stroke();

lienzo.beginPath();
lienzo.lineCap="butt";
lienzo.stroke();
lienzo.lineCap="round";
lienzo.beginPath();
lienzo.stroke();
lienzo.lineCap="square";
lienzo.beginPath();
lienzo.stroke();

lienzo.beginPath();
lienzo.lineJoin="bevel";
lienzo.stroke();

lienzo.beginPath();
lienzo.lineJoin="round";
lienzo.stroke();

lienzo.beginPath();
lienzo.lineJoin="miter";
lienzo.stroke();

}
}
</script>

</head>
</canvas>
</body>
</html>
Para definir el ancho de la lnea disponemos de la propiedad lineWidth:
lienzo.lineWidth=7;
La propiedad lineCap indica como se grafican los puntos extremos de la lnea:
Los valores permitidos son: "butt", "round" y "square".Si disponemos "butt" lo finaliza
inmediatamento, si indicamos "round" genera un semicrculo y con "square" dibuja un
cuadrado.
La tercer propiedad es lineJoin. Con esta indicamos como debe procederse a graficar en los
vrtices de uniones de segmentos. Los valores permitidos son: "bevel", "round" y "miter".

Problema:Confeccionar una serie de lneas que muestren como afectan las propiedades
lineWidth, lineCap y lineJoin.

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.lineWidth=7;
lienzo.stroke();

lienzo.beginPath();
lienzo.stroke();
lienzo.beginPath();
lienzo.stroke();
lienzo.lineCap="square";
lienzo.beginPath();
lienzo.stroke();
lienzo.beginPath();
lienzo.lineJoin="bevel";
lienzo.stroke();
lienzo.beginPath();
lienzo.stroke();
lienzo.beginPath();
lienzo.lineJoin="miter";
lienzo.stroke();

}
}
</script>

</head>
</canvas>
</body>
</html>

Problema:Dibujar un tringulo con lneas de 20 pxeles de ancho y los vrtices redondeados.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.lineWidth=20;
lienzo.stroke();

}
}
</script>

</head>
</canvas>
</body>
</html>
7 - CANVAS (rectngulo relleno)
Para dibujar un rectngulo relleno debemos utilizar el mtodo fillRect y previamente
fijamos el color interior inicializando la propiedad fillStyle.
Creamos un programa que muestra un rectngulo rojo:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(10,10,200,100);
}
}
</script>

</head>
</canvas>
</body>
</html>
Los parmetros de fillRect son x,y,ancho,alto:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
}
</script>

</head>
</canvas>
</body>
</html>
Problema:Dibujar 250 cuadraditos (50 por lnea) Los colores de los cuadrados deben empezar en
negro y avanzar hasta el rojo.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
var rojo=0;
for(var fil=1;fil<=5;fil++) {
for(var col=1;col<=50;col++) {
lienzo.fillStyle="rgb("+rojo+",0,0)";
lienzo.fillRect(col*15,fil*15,14,14);
rojo++;
}
}
}
}
</script>

</head>
</canvas>
</body>
</html>
8 - CANVAS (borrar una regin)
Para borrar un rectngulo del lienzo debemos utilizar el mtodo clearRect. Los parmetros
son similares al mtodo fillRect, es decir x,y,ancho y largo.
Confeccionaremos un programa que dibuje un cuadrado rojo de 300 pxeles de lado y luego
borraremos tres cuadraditos en la diagonal principal del cuadrado rojo:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.clearRect(10,10,20,20);
}
}
</script>

</head>
</canvas>
</body>
</html>
Como podemos ver primero dibujamos el cuadrado rojo y seguidamente llamamos tres
veces a clearRect con las coordenadas respectivas:

Problema:Confeccionar un programa que dibuje un cuadrado rojo de 300 pxeles de lado y luego
borrar tres cuadraditos en la diagonal principal del cuadrado rojo
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
}
</script>

</head>
</canvas>
</body>
</html>
Problema:Dibujar un cuadrado. Luego de 3 segundos hacer que se borre.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
setTimeout(borrar,3000);
}

function borrar() {
if (lienzo) {
}
}
</script>

</head>
</canvas>
</body>
</html>
9 - CANVAS (dibujar varias lneas y
rellenar la figura creada)
Cuando creamos una serie de segmentos podemos como hemos visto pintar su permetro.
Pero adems podemos llenar su interior con un color.
Confeccionaremos un programa que muestre un tringulo con su interior coloreado:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.lineWidth=5;
lienzo.beginPath();
lienzo.fill();
lienzo.stroke();
}
}

</script>

</head>
</canvas>
</body>
</html>
Inicializamos el color de relleno de la figura:
Inicializamos el color del borde de la figura:
Fijamos el ancho de la lnea:
lienzo.lineWidth=5;
Indicamos que comenzamos la figura:
lienzo.beginPath();
Movemos el puntero grfico al primer vrtice de nuestro tringulo:
Trazamos el primer segmento:
Trazamos el segundo segmento:
Trazamos el ltimo segmento (que coincide con el punto inicial):
Confirmamos que finalizamos la figura y se proceda a rellenar la figura:
lienzo.fill();
Confirmamos que dibuje el permetro de la figura:
lienzo.stroke();
Tengamos en cuenta que si el punto final no coincide con el punto de origen el mtodo fill
traza este ltimo segmento.
Problema:Dibujar un tringulo con el color de permetro azul y su interior de color rojo. El borde
del permetro debe ser de 5 pxeles.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.lineWidth=5;
lienzo.beginPath();
lienzo.fill();
lienzo.stroke();
}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Dibujar un paralelogramo de color verde.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.fill();
}
}

</script>

</head>
</canvas>
</body>
</html>
10 - CANVAS (arcos rellenos y lineal)
Para dibujar arcos disponemos del mtodo arc, que tiene los siguientes parmetros:
arc(x,y,radio,angulo de comienzo, angulo final,sentido antihorario)
Los dos parmetros iniciales indican el punto central del arco, el tercero es el radio.
Seguidamente indicamos el angulo de comienzo y el angulo final en radianes. Por ltimo
debemos pasar un "true" en caso que el arco se dibuje en sentido antihorario y "false" en
caso contrario.
Con un ejemplo veremos como hacer para dibujar distintos tipos de arcos lineales y
rellenos:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.arc(100,100,50,0,Math.PI,true);
lienzo.stroke();

lienzo.beginPath();
lienzo.arc(100,200,50,0,Math.PI,false);
lienzo.stroke();

lienzo.beginPath();
lienzo.fill();

lienzo.beginPath();
lienzo.arc(200,200,50,0,Math.PI*2,true);
lienzo.fill();

}
}

</script>

</head>
</canvas>
</body>
</html>
El primer arco se pinta solo el permetro de color rojo y comienza en el ngulo cero y
finaliza en los 180 grados (en radianes es PI), indicamos que avance en sentido antihorario:
lienzo.beginPath();
lienzo.stroke();
Similar al arco anterior pero ahora indicamos que lo dibuje en sentido horario:

lienzo.beginPath();
lienzo.stroke();
Dibujamos el arco pero luego indicamos que se rellene llamando al mtodo fill en lugar de
stroke:

lienzo.beginPath();
lienzo.fill();
Dibujamos un crculo relleno de color amarillo:

lienzo.beginPath();
lienzo.fill();
Problema:Mostrar una serie de arcos lineales y cerrados.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.stroke();

lienzo.beginPath();
lienzo.stroke();

lienzo.beginPath();
lienzo.fill();

lienzo.beginPath();
lienzo.fill();

}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Mostrar un crculo que se desplace de izquierda a derecha. Cada vez que llega a la
columna 300 hacer que comience nuevamente en la columna 0.
<html>
<head>

return lienzo;
} else
return false;
}

setInterval(graficarCirculo,20);
}

var col=0;

function graficarCirculo() {
if (lienzo) {
lienzo.beginPath();
lienzo.arc(col,150,30,0,Math.PI*2,true);
lienzo.fill();
col+=10;
if (col>300)
col=0;

}
}

</script>

</head>
</canvas>
</body>
</html>
11 - CANVAS (curva de bezier)
El concepto de curva de Bezier lo podemos leer en la Wikipedia.
Bsicamente debemos indicar dos coordenadas fijar y luego se traza una lnea que une esos
dos puntos. Esta lnea se ve modificada por la atraccin de otros dos puntos invisibles que
ubicamos a discrecin. Segn la ubicacin de estos dos puntos podemos ver como vara la
curva.
Crearemos un ejemplo donde disponemos dos puntos que se encuentran en la misma fila y
luego otros dos puntos uno por encima y otro por debajo de la recta que formaran los dos
puntos iniciales:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.bezierCurveTo(100,50,200,250,290,150);
lienzo.stroke();

}
}

</script>

</head>
</canvas>
</body>
</html>
El primer punto fijo lo inicializamos llamando al mtodo moveTo:
El segundo punto fijo est indicado en los dos ltimos parmetros del mtodo
bezierCurveTo (es decir 290,150), en tanto que los dos puntos invisibles son los valores
(100,50) y (200,250):

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.stroke();

}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Crear una curva de bzier y hacer que los puntos de atraccin cambien de valor.
Redibujar la curva cada vez que modificamos dichos valores.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

function inicio() {
setInterval(dibujar,10);
}
var fila1=50;
var fila2=250;
var direccion=true;
if (lienzo) {
lienzo.lineWidth=10;
lienzo.beginPath();
lienzo.bezierCurveTo(100,fila1,200,fila2,290,150);
lienzo.stroke();
if (direccion) {
fila1++;
fila2--;
if (fila1==250)
direccion=false;
} else {
fila1--;
fila2++;
if(fila1==50)
direccion=true;
}
}
}
</script>

</head>
<body onLoad="inicio()">
</canvas>
</body>
</html>

12 - CANVAS (mtodo quadraticCurveTo)
El concepto de este tipo de curva es similar a la de Bezier. La diferencia es que solo hay un
punto de atraccin.
Confeccionaremos un ejemplo que muestre una curva de este tipo y desplazaremos el punto
de atraccin en forma vertical (cada vez que lo desplacemos borraremos el canvas y
volveremos a graficar):
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

var fila=0;
if (lienzo) {
lienzo.beginPath();
lienzo.quadraticCurveTo(150,fila,300,150);
lienzo.stroke();
fila++;
if (fila>300)
fila=0;
}
}

function iniciar() {
}

</script>

</head>
<body onLoad="iniciar()">
</canvas>
</body>
</html>
La funcin inicar se ejecuta una vez que la pgina se encuentra cargada, en esta funcin
llamamos a setInterval y le pasamos como parmetro la funcin que debe ejecutarse cada
10 milisegundos:
}
En la funcin dibujar lo primero que hacemos el borrar el contenido del canvas:
Definimos el color de la lnea, inicializamos el camino, mediante el mtodo moveTo
definimos el primer punto fijo de la curva y seguidamente llamamos la mtodo
quadraticCurveTo pasando como parmetro el punto movil y los dos ltimos parmetros
indican el segundo punto fijo de la curva:
lienzo.beginPath();
lienzo.stroke();
Incrementamos la variable global que permite modificar en cada paso la ubicacin del
punto de atraccin:
fila++;
Si la variable supera el valor 300 volvemos a asignarle el valor 0:
if (fila>300)
fila=0;
13 - CANVAS (mtodo quadraticCurveTo)
Problema:Confeccionar un programa que muestre el tipo de curva que genera el mtodo
quadraticCurveTo.

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

var fila=0;
if (lienzo) {
lienzo.beginPath();
lienzo.stroke();
fila++;
if (fila>300)
fila=0;
}
}

}

</script>

</head>
<body onLoad="iniciar()">
</canvas>
</body>
</html>
13 - CANVAS (graficar texto)
Tenemos varias propiedades y mtodos relacionados al texto.
Para imprimir texto disponemos de:
fillText(texto,x,y)
Con fillText imprimimos un string en la coordenada x e y indicada. Esta coordenada
corresponde con la parte inferior del texto (es decir no se muestra si indicamos el valor cero
en y)
Si queremos que solo se pinte el contorno de cada letra podemos llamar al mtodo:
strokeText(texto,x,y)
La fuente a utilizar la inicializamos dando un valor a la propiedad font ej:
lienzo.font="bold 25px Arial";
Podemos hacer que comience la impresin a partir de la coordenada indicada o que este sea
el punto central, o final etc. Esto lo hacemos inicializando la propiedad textAlign. Los
valores posibles que podemos asignarle a esta propiedad son "start", "end", "left", "right",
"center". Por defecto se inicializa con "start".
Si necesitamos conocer el ancho en pxeles de un string segn la fuente actual podemos
emplear el mtodo:
measureText(string)
Confeccionaremos un ejemplo para probar todo lo relacionado al manejo del texto dentro
del canvas:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.fillText("Hola Mundo",150,50);
lienzo.textAlign="center";
lienzo.textAlign="right";
var anchopx=lienzo.measureText("Hola Mundo");
lienzo.textAlign="start";
lienzo.fillText(anchopx.width,150,200);
lienzo.strokeText("Fin",150,250);
}
}

</script>

</head>
</canvas>
</body>
</html>
Definimos el color rojo para el texto:
Definimos el tipo de fuente Arial de 25 pxeles y estilo bold:
Graficamos el texto "Hola Mundo":
Cambiamos el tipo de alineacin del texto:
Imprimimos el texto (ahora el texto "Hola Mundo" aparece centrado con respecto a la
columna 150):
Cambiamos la alineacin nuevamente:
Imprimimos el texto y como tenemos alineacin a derecha el texto finaliza en la columna
150:
Llamamos al mtodo measureText y pasamos como parmetro el texto que imprimimos.
Luego este mtodo nos retorna un objeto de la clase TextMetrics (la propiedad width
almacena el ancho en pixeles del texto que pasamos anteriormente):
Cambiamos el tipo de alineacin:
Imprimimos la propiedad width:
Inicializamos el color de lnea:
Dibujamos una lnea con el mtodo strokeText:

Problema:Confeccionar un programa que emplee los mtodos fillText y strokeText.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Mostrar la fecha actual en la parte superior del canvas centrado.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
var fecha=new Date();
var
cad=fecha.getDay()+"/"+fecha.getMonth()+"/"+fecha.getFullYear();
var anchoTexto=lienzo.measureText(cad).width;
lienzo.fillText(cad,150,50);
}
}

</script>

</head>
</canvas>
</body>
</html>
14 - CANVAS (graficar imagenes)
Para graficar imgenes disponemos del mtodo drawImage, el cual se comporta distinto
segn la cantidad de parmetros que le pasamos.
La primera forma es llamarlo con los siguientes parmetros:
drawImage(objeto Image, x, y)
De esta forma dibuja la imagen con el tamao real de la imagen, en la coordenada x e y
indicada.
La segunda forma es:
drawImage(objeto Image, x, y, ancho, alto)
La imagen se redimensiona con los valores indicados en ancho y alto.
La tercer y ltima forma es:
drawImage(objeto Image, x1, y1, ancho1, alto1,x2, y2, ancho2, alto2)
Los primeros cuatro parmetros indican un trozo del la imagen y los cuatro restantes es el
lugar donde se debe graficar ese trozo de imagen.
Veamos un ejemplo que utiliza este mtodo:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
img1 = new Image();
img1.src = 'http://www.htmlya.com.ar/simulador/foto1.jpg';
img1.onload = function(){
lienzo.drawImage(img1,0,0);
lienzo.drawImage(img1,300,0,50,50);
lienzo.drawImage(img1,0,0,125,125,0,300,72,72);
}
}
}

</script>

</head>
</canvas>
</body>
</html>
Creamos un objeto de la clase Image:
img1 = new Image();
Inicializamos la propiedad src con la fuente de la imagen a recuperar:
Inicializamos la propiedad onload del objeto de la clase Image con una funcin annima:
}
Esta funcin annima se ejecuta cuando se finaliza la carga de la imagen en el navegador.
Primero dibujamos la imagen con el tamao original:
Luego la dibujamos con un ancho de 50 pxeles y 50 del alto.
Por ltimo dibujamos extrayendo de la imagen original 125 pxeles de ancho y 125 de alto
y dibujamos este trozo de imagen en la coordenada (0,300) con un ancho y alto de 72
pxeles.

Problema:Utilizar las distintas variantes como se puede llamar al mtodo drawImage.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
img1 = new Image();
}
}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Mostrar la foto almacenada en:
http://www.htmlya.com.ar/simulador/foto1.jpg
de tal forma que aparezca la primer columna de pxeles, luego la segunda columna y as
sucesivamente (la foto tiene un tamao de 249 pxeles de ancho y 251 de alto)
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

function graficarLinea() {

lienzo.drawImage(img1,columna,0,columna+1,251,columna,0,colum
na+1,251);
columna++;
if (columna==249)
clearInterval(ini);
}

var ini=0;
var columna=0;
if (lienzo) {
img1 = new Image();
ini=setInterval(graficarLinea,10);
}
}
}

</script>

</head>
</canvas>
</body>
</html>

15 - CANVAS (transparencias)
Para activar transparencias cuando inicializamos la propiedad fillStyle debemos pasar a la
funcin rgba los valores para el rojo,verde,azul y el grado de transparencia (este valore es
un nmero que puede variar entre 0 y 1)
Si pasamos el valor 1 no la figura es totalmente opaca, es decir no se ve absolutamente nada
de lo que se encuentra detrs de la misma. A medida que disminuimos dicho valor 0.7, 0.5,
0.3 etc. la figura se torna ms transparente.
Con un ejemplo veremos como activar la transparencia:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.fillStyle="rgba(0,255,0,0.3)";
}
}

</script>

</head>
</canvas>
</body>
</html>
Activamos el color rojo:
Dibujamos un cuadrado.
Activamos el color verde y definimos un nivel de transparencia de 0.3:
Dibujamos el cuadrado superpuesto al primero:

Problema:Graficar dos cuadrados. El segundo graficarlo sobre el primero activando
transparencias.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Dibujar 250 cuadrados del rojo al negro. Dibujar un rectngulo negro grande que tape
todos los cuadrados. Redibujar y hacer que el rectngulo se vuelva cada vez ms transparente.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
var rojo=0;
for(var fil=1;fil<=5;fil++) {
for(var col=1;col<=50;col++) {
lienzo.fillStyle="rgb("+rojo+",0,0)";
lienzo.fillRect(col*15,fil*15,14,14);
rojo++;
}
}
lienzo.fillStyle="rgba(0,0,0,"+(transp/10)+")";
transp=transp-1;
if (transp<0)
clearInterval(ini);
}
}

var ini;
var transp=10;
function inicio() {
ini=setInterval(dibujar,1000);
}
</script>

</head>
</canvas>
</body>
</html>
16 - CANVAS (sombras)
Para administrar las sombras de una figura disponemos una serie de propiedades que
debemos inicializar previo a graficar.
Para indicar con respecto a x como se desplaza la sombra debemos inicializar la propiedad
shadowOffsetX (un valor positivo indica que la sombra se ver del lado derecho de la
figura, un valor negativo hace que aparezca a la izquierda la sombra):
shadowOffsetX
Para indicar con respecto a y como se desplaza la sombra debemos inicializar la propiedad
shadowOffsetY (un valor positivo indica que la sombra se ver en la parte inferior de la
figura, un valor negativo hace que aparezca a en la parte superior la sombra):
shadowOffsetY
El color de la sombra la fijamos inicializando la propiedad:
shadowColor
Por ltimo el difuminado de la sombra la fijamos mediante la propiedad:
shadowBlur
Un valor nulo en shadowBlur hace que no haya difuminado, luego valores positivos
mayores aumentan el difuminado de la sombra.
El siguiente ejemplo muestra dos rectngulos con sombra:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.shadowOffsetX=-10;
lienzo.shadowOffsetY=5;
lienzo.shadowBlur=10;
lienzo.shadowColor="rgba(0, 0, 255, 0.5)";
lienzo.shadowOffsetX=5;
}
}

</script>

</head>
</canvas>
</body>
</html>
Indicamos que la sombra aparezca del lado izquierdo:
lienzo.shadowOffsetX=-10;
Indicamos que la sombra aparezca en la parte inferior:
Definimos el difuminado de la sombra:
Definimos el color de la sombra y su transparencia:
Inicializamos el color de la figura:
Dibujamos el primer rectngulo:
Cambiamos la orientacin en x de la sombra:
Dibujamos un cuadrado:
Problema:Confeccionar un programa que utilice las propiedades relacionadas a las sombras.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Mostrar un cuadrado y definir una sombra que aumente su difuminado lentamente
hasta el valor 100.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

function inicio() {
ini=setInterval(dibujar,20);
}

var contador=0;
var ini;
if (lienzo) {
lienzo.shadowBlur=contador;
lienzo.shadowColor="rgba(255,0,0,0.5)";
contador++;
if (contador==100)
clearInterval(ini);
}
}
</script>

</head>
</canvas>
</body>
</html>
17 - CANVAS (gradiente lineal)
Hasta ahora hemos visto que una figura la podemos llenar con un color liso. Las gradientes
nos permite llenar una figura con dos o ms colores.
Nosotros indicamos por ejemplo dos colores y luego las libreras disponibles nos generan
todos los colores intermedios entre los colores indicados.
Veremos primero la gradiente lineal. Los mtodos necesarios para implementar una
gradiente lineal son:
[objeto de tipo CanvasGradient]=lienzo.createLinearGradient(x1,y1,x2,y2);
Los cuatro parmetros indican dos puntos del canvas, luego en dichas coordenadas
graficaremos la figura.
Seguidamente debemos llamar al mtodo:
[objeto de tipo Gradient].addColorStop([valor entre 0 y 1],color);
Con un ejemplo quedar claro:
var gradiente1=lienzo.createLinearGradient(0,0,200,0);
gradiente1.addColorStop(0,"rgb(255,0,0)");
lienzo.fillStyle=gradiente1;
Creamos un objeto de la clase CanvasGradient pasando dos puntos del Canvas:
Definimos color inicial(como el primer parmetro es cero luego es el punto inicial):
Definimos el color del punto final:
Inicializamos la propiedad fillStyle del lienzo con el objeto de tipo CanvasGradient (ac es
donde antes asignamos un color):
Por ltimo dibujamos el cuadrado:
Luego al verlo en ejecucin veremos que el cuadrado comienza con color rojo en el lado de
la izquierda y luego va variando al negro.
El siguiente ejemplo dibuja cuatro cuadrados con distintas variantes de gradientes lineales:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {


gradiente3.addColorStop(1,"rgb(0,0,0");

gradiente4.addColorStop(0.5,"rgb(0,0,0)");
}
}

</script>

</head>
</canvas>
</body>
</html>
Para pintar un cuadrado y que el gradiente se desplace en forma diagonal debemos pasar
como parmetros al mtodo createLinearGradient las coordenadas de dos vrtices opuestos
del cuadrado:
Y si adems queremos que comience en rojo, luego avance hasta el negro y finalmente
regrese al rojo debemos llamar al mtodo addColorStop con los siguientes parmetros:
Finalmente solo nos falta inicializar la propiedad fillStyle y llamar al mtodo fillRect:

Problema:Dibujar cuatro cuadrados. El primero debe tener una gradiente del color rojo al negro.
El segundo del negro al rojo. El tercero el gradiente debe ser diagonal y por ltimo el cuarto debe
ser diagonal y tener tres colores (del rojo al negro y luego del negro al rojo).
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {


gradiente3.addColorStop(1,"rgb(0,0,0");

}
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Dibujar un crculo y definir una gradiente lineal.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.beginPath();
lienzo.fill();
}
}

</script>

</head>
</canvas>
</body>
</html>
18 - CANVAS (gradiente radial)
El mtodo createRadialGradient crea una gradiente radial. La gradiente radial se crea con
dos pares de coordenadas (x1,y1) a (x2,y2). Luego se especifica el radio de inicio y el radio
final.
lienzo.createRadialGradient(comienzo x,comienzo y, radio de comienzo,x
final, y final radio final)
Graficaremos un crculo con gradiente radial:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
var gradiente1=lienzo.createRadialGradient(200,200,0,200,200,200);
lienzo.fill();

}
}

</script>

</head>
</canvas>
</body>
</html>
19 - CANVAS (gradiente radial)
Problema:Dibujar un crculo utilizando gradiente radial.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
var
gradiente1=lienzo.createRadialGradient(200,200,0,200,200,200);
lienzo.fill();

}
}

</script>

</head>
</canvas>
</body>
</html>
20 - CANVAS (patrones de imagenes)
Problema:Dibujar un cuadrado y definir un patrn con una imagen para rellenar el mismo.

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
img1 = new Image();
var patron = lienzo.createPattern(img1,'repeat');
lienzo.fillStyle = patron;
}
}
}

</script>

</head>
</canvas>
</body>
</html>
20 - CANVAS (patrones de imagenes)
Problema:Dibujar un tringulo y utilizar un patrn de tipo imagen para pintar su interior.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
img1 = new Image();
var patron = lienzo.createPattern(img1,'repeat');
lienzo.fillStyle = patron;
lienzo.beginPath();
lienzo.fill();
}
}
}

</script>

</head>
</canvas>
</body>
</html>
20 - CANVAS (otro canvas como patrn)
Cuando se pinta el interior de una figura hemos visto que podemos utilizar como relleno un
color fijo, un gradiente, una imagen, ahora veremos que podemos tambin utilizar como
patrn el contenido de otro Canvas.
Para utilizar como relleno otro canvas debemos crear un objeto de tipo CanvasPattern
empleando el mtodo createPattern:
CanvasPattern createPattern(HTMLCanvasElement imagen, string repeticin)
El parmetro repeticin puede tomar los valores:
"repeat" Se repite la imagen en x y en y completando toda la figura.
"no-repeat" Si la figura es mayor a la imagen luego queda vaco parte de
la imagen.
"repeat-x" Se repite en x
"repeat-y" Se repite en y
Confeccionaremos una pgina que tenga dos CANVAS, en el primero graficaremos una
cruz y en el segundo graficaremos un cuadrado que cubra todo el canvas utilizando como
patrn el primer canvas:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

var lienzo1=retornarLienzo("lienzo1");
if (lienzo1) {
lienzo1.strokeStyle="rgb(0,0,255)";
lienzo1.beginPath();
lienzo1.moveTo(25,0);
lienzo1.lineTo(25,50);
lienzo1.stroke();
lienzo1.stroke();
if (lienzo2) {
var patron = lienzo2.createPattern(lienzo1.canvas,'repeat');
lienzo2.fillStyle = patron;
lienzo2.fillRect(0,0,300,300);
}
}
}

</script>

</head>
<canvas id="lienzo1" width="50" height="50"><br>
</canvas>
<br>
</canvas>

</body>
</html>
Obtenemos la referencia del primer canvas y graficamos una cruz:
if (lienzo1) {
lienzo1.stroke();
lienzo1.stroke();
Obtenemos la referencia del segundo canvas y graficamos un cuadrado creando
previamente un patrn utilizando el primer canvas:
if (lienzo2) {
}
Tengamos en cuenta que en el body de la pgina tenemos que definir los dos elementos de
tipo canvas:
</canvas>
<br>
</canvas>

Problema:Confeccionar una pgina que tenga dos CANVAS, en el primero graficar una cruz y en el
segundo graficar un cuadrado que cubra todo el canvas utilizando como patrn el primer canvas.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo1) {
lienzo1.stroke();
lienzo1.stroke();
if (lienzo2) {
}
}
}

</script>

</head>
</canvas>
<br>
</canvas>

</body>
</html>
Problema:Crear dos canvas, en el primero dibujar un tringulo y en el segundo canvas dibujar un
cuadrado utilizando como patrn el contenido del primer canvas.

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo1) {
lienzo1.stroke();
if (lienzo2) {
}
}
}

</script>

</head>
</canvas>
<br>
</canvas>

</body>
</html>

21 - CANVAS (grabar y recuper el estado -
save(), restore())
Cuando tenemos que hacer dibujos complejos es muy comn que necesitemos almacenar el
estado de algunas propiedades del canvas para luego recuperarlas. Estas dos actividades se
logran mediante los mtodos:
save()
restore()
Los valores que se almacenan son strokeStyle, FillStyle, globalAlpha, LineCap, LineJoin,
miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor entre otras
propiedades.
Tengamos en cuenta que si se llama dos veces en forma sucesiva al mtodo save() para
retornar al estado inicial debemos llamar dos veces al mtodo restore().
Para ver su funcionamiento desarrollaremos un programa que muestre un cuadrado en color
rojo, otro con un gradiente del rojo al azul y finalmente otro cuadrado rojo:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
lienzo.save();
var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
lienzo.fillRect(x,y,ancho,alto);
lienzo.restore();
}

if (lienzo) {
dibujarCuadradoGradiente(lienzo,70,30,30,30);
}
}

</script>

</head>
</canvas>
</body>
</html>
Dibujamos un cuadrado de color rojo:
Llamamos a la funcin dibujarCuadradoGradiente:
La funcin dibujarCuadradoGradiente lo primero que hace es grabar el estado actual
(save()) y luego configura nuevamente la propiedad fillStyle con un objeto de tipo
LinearGradient. Finalmente luego de graficar el cuadrado restaura el estado actual
(restore()):
lienzo.save();
lienzo.restore();
}

22 - CANVAS (grabar y recuper el estado -
save(), restore())

Problema:Confeccionar una funcin que grafique un rectngulo con gradiente. Previo a graficar
grabar el estado actual, luego de graficar restaurar el estado original.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

lienzo.save();
lienzo.restore();
}

if (lienzo) {
}
}

</script>

</head>
</canvas>
</body>
</html>
22 - CANVAS (translate)

Para mover el sistema de coordenadas disponemos del mtodo:
translate(x,y)
Luego de llamar a este mtodo la coordenada (0,0) corresponder al par de valores
indicados en los parmetros.
El uso de esta transformacin nos facilita la creacin de figuras.
Confeccionaremos un programa que implemente una funcin que dibuje un tringulo, la
funcin recibe la coordenada donde debe dibujarla y la base y altura del tringulo:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

function dibujarTriangulo(lienzo,x,y,base,altura) {
lienzo.save();
lienzo.translate(x,y);
lienzo.beginPath();
lienzo.moveTo(base/2,0);
lienzo.lineTo(0,altura);
lienzo.lineTo(base,altura);
lienzo.lineTo(base/2,0);
lienzo.fill();
lienzo.restore();
}

if (lienzo) {
for(var col=0;col<550;col+=30)
dibujarTriangulo(lienzo,col,10,30,130);
}
}

</script>

</head>
</canvas>
</body>
</html>
Lo ms importante que debemos entender est en la funcin dibujarTriangulo. Lo primero
que hacemos es grabar el estado (save()) esto hace que quede almacenado los valores
actuales del punto de origen. Movemos el punto de origen llamando a translate. Ahora
podemos dibujar el tringulo considerando que la coordenada (0,0) coincide con los
parmetros (x,y). Luego de dibujar recuperamos el estado actual llamando a restore():
lienzo.save();
lienzo.beginPath();
lienzo.fill();
lienzo.restore();
}


Para mover el sistema de coordenadas disponemos del mtodo:
translate(x,y)
Luego de llamar a este mtodo la coordenada (0,0) corresponder al par de valores
indicados en los parmetros.
El uso de esta transformacin nos facilita la creacin de figuras.
Confeccionaremos un programa que implemente una funcin que dibuje un tringulo, la
funcin recibe la coordenada donde debe dibujarla y la base y altura del tringulo:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

lienzo.save();
lienzo.beginPath();
lienzo.fill();
lienzo.restore();
}

if (lienzo) {
}
}

</script>

</head>
</canvas>
</body>
</html>
Lo ms importante que debemos entender est en la funcin dibujarTriangulo. Lo primero
que hacemos es grabar el estado (save()) esto hace que quede almacenado los valores
actuales del punto de origen. Movemos el punto de origen llamando a translate. Ahora
podemos dibujar el tringulo considerando que la coordenada (0,0) coincide con los
parmetros (x,y). Luego de dibujar recuperamos el estado actual llamando a restore():
lienzo.save();
lienzo.beginPath();
lienzo.fill();
lienzo.restore();
}

Problema:Confeccionar un programa que implemente una funcin que dibuje un tringulo, la
funcin recibe la coordenada donde debe dibujarla y la base y altura del tringulo. Trasladar el
punto de origen a travs del mtodo translate.

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

lienzo.save();
lienzo.beginPath();
lienzo.fill();
lienzo.restore();
}

if (lienzo) {
}
}

</script>

</head>
</canvas>
</body>
</html>

23 - CANVAS (rotate)
La segunda transformacin posible utilizando el canvas es la rotacin:
rotate(grados)
Los grados de rotacin se indican en radianes y la rotacin es en sentido horario y con
respecto al punto de origen (0,0), por ello es muy comn que primero utilicemos el mtodo
translate y luego rotemos.
Confeccionaremos un programa que rote un cuadrado en forma indefinida:
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.save();
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.fillRect(-100,-100,200,200);
lienzo.restore();
avance+=0.05;
if (avance>Math.PI*2)
avance=0;
}
}

var avance=0;
function inicio() {
}

</script>

</head>
</canvas>
</body>
</html>
Definimos una variable global que indica el grado de rotacin actual:
var avance=0;
function inicio() {
}
La funcin dibujar se ejecuta cada 50 milisegundos. Lo primero que hacemos el borrar el
lienzo, trasladar el punto de origen a la coordenada (300,300) que es el centro del canvas.
Definimos los grados de rotacin. Dibujamos un cuadrado teniendo en cuenta la ubicacin
actual del punto de origen (por eso los parmetros negativos en x1 e y1):
if (lienzo) {
lienzo.save();
lienzo.restore();
avance+=0.05;
avance=0;
}
}

Problema:Graficar un cuadrado y rotarlo en forma indefinida.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.save();
lienzo.restore();
avance+=0.05;
avance=0;
}
}

var avance=0;
function inicio() {
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Graficar un cuadrado y rotarlo en forma indefinida.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.save();
lienzo.restore();
avance+=0.05;
avance=0;
}
}

var avance=0;
function inicio() {
}

</script>

</head>
</canvas>
</body>
</html>
Problema:Mostrar una imagen y efectuar su rotacin en forma indefinida.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.save();
lienzo.drawImage(img1,-125,-125);
avance+=0.05;
avance=0;
lienzo.restore();
}
}

var avance=0;
var img1;
function inicio() {
img1 = new Image();
}
}

</script>

</head>
</canvas>
</body>
</html>
24 - CANVAS (scale)
tra transformacin que nos permite la librera provista por el canvas es la redimensin.
Disponemos de un mtodo llamado: scale(x,y)
Si pasamos 1 y 1 el grfico toma el mismo tamao que el original. Si es menor a uno
estamos reduciendo y en caso de ser mayor a 1 estamos generando una figura mayor a la
original.
Confeccionaremos un programa que muestre una imagen girando y en cada giro iremos
escalando (aumentando su tamao):

<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.save();
lienzo.scale(tamx,tamy);
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}

var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
img1 = new Image();
}
}

</script>

</head>
</canvas>
</body>
</html>
Cada vez que se ejecuta la funcin dibujar:
if (lienzo) {
lienzo.save();
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}
Dentro de esta funcin rotamos segn el contador avance y escalamos segn otros dos
contadores:


25 - CANVAS (scale)
Problema:Mostrar una imagen que gire en el lienzo y casa avance muestre la imagen con tamao
mayor.
<!DOCTYPE HTML>
<html>
<head>

return lienzo;
} else
return false;
}

if (lienzo) {
lienzo.save();
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}

var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
img1 = new Image();
}
}

</script>

</head>
</canvas>
</body>
</html>
25 - AUDIO
Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es
permitir la carga y ejecucin de archivos de audio sin requerir un plug-in de Flash,
Silverlignt o Java.
El comit de estandarizacin W3C deja abierto a cada empresa que desarrolla navegadores
los formatos que quieran soportar (as tenemos que algunos soportan mp3, wav, ogg, au)
Un ejemplo de disponer el elemento audio dentro de una pgina sera:
<audio src="sonido.ogg" autoplay controls loop></audio>
Las propiedades que podemos utilizar con la marca audio son:
src: La URL donde se almacena el archivo de audio. Si no definimos la URL la
busca en el mismo directorio donde se almacena la pgina.
autoplay: En caso de estar presente el archivo se ejecuta automticamente luego de
cargarse la pgina sin requerir la intervencin del visitante.
loop: El archivo de audio se ejecuta una y otra vez.
controls: Indica que se deben mostrar la interface visual del control en la pgina
(este control permite al visitante arrancar el audio, detenerlo, desplazarse etc.)
autobuffer: En caso de estar presente indica que primero debe descargarse el
archivo en el cliente antes de comenzar a ejecutarse.
Como no hay un formato de audio universalmente adoptado por todos los navegadores el
elemento audio nos permite agregarle distintas fuentes:
<audio controls autoplay loop>
<source src="sonido.ogg">
<source src="sonido.mp3">
<source src="sonido.wav">
<source src="sonido.au">

</audio>
El elemento source indica a travs de la propiedad src la ubicacin del archivo de audio
respectivo. El orden que disponemos estas fuentes es importante. Primero el navegador
busca la primera fuente y verifica que puede reproducir dicho archivo, en caso negativo
pasa a la siguiente fuente. Como vemos si queremos que cualquier navegador reciba un
audio podemos inclusive hacer el aplique de Flash respectivo por si el navegador no
implementa el elemento AUDIO o no soporta el formato de archivo.
Por el momento no hay un formato con soporte para todos los navegadores, depender del
sitio que implementemos para ver si tiene sentido duplicar nuestros archivos con distintos
formatos de audio.

27 - AUDIO
Problema:Utilizar el elemento AUDIO para reproducir sonidos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<audio controls>
<source
src="http://www.htmlya.com.ar/html5/simulador/gallo.ogg">
<source
src="http://www.htmlya.com.ar/html5/simulador/gallo.mp3">
<source
src="http://www.htmlya.com.ar/html5/simulador/gallo.wav">
</audio>
</body>
</html>
26 - VIDEO
El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este
momento los navegadores permiten mostrar una cantidad limitada de formatos de video.
Pasar un tiempo hasta que todos los navegadores comiencen a soportar distintos formatos.
FireFox permite mostrar videos en formato ogv (formato de vdeo de cdigo abierto
Ogg/Theora). Luego para visualizar un video con este formato en FireFox tenemos:
<video width="640" height="360"
src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"
controls>
Este navegador no permite tag video
</video>
Las propiedades ms importantes de la marca video son:
src: Direccin donde se almacena el video.
controls: Se visualiza el panel de control del video: botn de inicio, barra de avance
del video etc.
autoplay: El video se inicia inmediatamente luego que la pgina se carga en el
navegador.
width: Ancho en pxeles del video.
height: Alto en pxeles del video.
Como no hay un formato de video universalmente adoptado por todos los navegadores el
elemento video nos permite agregarle distintas fuentes:
<video width="640" height="360" controls>
<source
src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv">
<source
src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4">
</video>
Esto es similar al elemento AUDIO visto anteriormente.

28 - VIDEO
Problema:Probar el elemento HTML video.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<video width="640" height="360" controls>
<source
src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv">
</video>
</body>
</html>
27 - Elementos HTML semnticos.
El HTML 5 introduce una serie de elementos estructurales que facilitarn tanto el
desarrollo de las pginas como tambin el anlisis de las mismas por buscadores.
Los elementos de HTML 5 que ayudan a estructurar la parte semntica de la pgina son:
header:El elemento header debe utilizarse para marcar la cabecera de una pgina
(contiene el logotipo del sitio, una imagen, un cuadro de bsqueda etc)
El elemento header puede estar anidado en otras secciones de la pgina (es decir que
no solo se utiliza para la cabecera de la pgina)
nav:El elemento nav representa una parte de una pgina que enlaza a otras pginas
o partes dentro de la pgina. Es una seccin con enlaces de navegacin.
No todos los grupos de enlaces en una pgina deben ser agrupados en un elemento
nav. nicamente las secciones que consisten en bloques de navegacin ms
importantes son adecuados para el elemento de navegacin.
section:El elemento section representa un documento genrico o de la seccin de
aplicacin. Una seccin, en este contexto, es una agrupacin temtica de los
contenidos. Puede ser un captulo, una seccin de un captulo o bsicamente
cualquier cosa que incluya su propio encabezado.
Una pgina de inicio de un sitio Web puede ser dividida en secciones para una
introduccin, noticias, informacin de contacto etc.
footer:El elemento footer se utiliza para indicar el pi de la pgina o de una seccin.
Un pie de pgina contiene informacin general acerca de su seccin el autor,
enlaces a documentos relacionados, datos de derechos de autor etc.
aside:
: El elemento aside representa una nota, un consejo, una explicacin. Esta rea son
representados a menudo como barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atraccin, como las comillas
tipogrficas o barras laterales, para la publicidad, por grupos de elementos de
navegacin, y por otro contenido que se considera por separado del contenido
principal de la pgina.
article: El elemento article representa una entrada independiente en un blog,
revista, peridico etc.
Cuando se anidan los elementos article, los artculos internos estn relacionados con
el contenido del artculo exterior. Por ejemplo, una entrada de blog en un sitio que
acepta comentarios, el elemento article principal agrupa el artculo propiamente
dicho y otro bloque article anidado con los comentarios de los usuario.
Un ejemplo de pgina aadiendo estos elementos semnticos sera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Elementos semnticos del HTML5</title>
</head>
<body>
<header>
<h1>Encabezado de la pgina</h1>
</header>
<nav>
<p>enlaces de navegacin</p>
</nav>
<section>
<p>Seccin 1</p>
</section>
<section>
<p>Seccin 2</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>Pi de pgina</p>
</footer>
</body>
</html>

29 - Elementos HTML semnticos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-
8859-1">
<title>Elementos semnticos del HTML5</title>
</head>
<body>
<header>
<h1>Encabezado de la pgina</h1>
</header>
<nav>
<p>enlaces de navegacin</p>
</nav>
<section>
<p>Seccin 1</p>
</section>
<section>
<p>Seccin 2</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>Pi de pgina</p>
</footer>
</body>
</html>
28 - FORM (autofocus)
En HTML5 disponemos una propiedad en los controles de los formularios que nos
permiten indicar cual control tendr foco (es decir que aparecer el cursor en su interior)
Anteriormente esta actividad se la realizaba mediante Javascript, pero como vemos varios
tipos de problemas ahora se los puede resolver directamente con HTML.
Para que aparezca un control con foco lo nico que tenemos que hacer es disponer la
propiedad autofocus sin asignarle valor.
Problema
Confeccionar un problema que solicite la carga del nombre de usuario, una clave y la edad.
Hacer que cuando aparezca el formulario en pantalla automticamente tome foco el control
donde se debe ingresar la edad.
Solucin
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario">
<br>
Clave:
<input type="password" id="clave">
<br>
Edad:
<input type="text" id="edad" autofocus>
<br>
<input type="submit" value="Confirmar">
</form>
</body>
</html>
Podemos observar que lo nico que hemos agregado al control donde se ingresa la edad es
la propiedad autofocus:
Si a ningn control se agrega la propiedad autofocus por defecto no aparece ningn control
con foco y ser el usuario que tendr que seleccionar uno.
Solo tiene sentido incluir la propiedad autofocus a un nico control de una pgina web, sino
el resultado es impredecible.
30 - FORM (autofocus)
Problema:Solicitar la carga del nombre de usuario, una clave y la edad. Hacer que cuando
aparezca el formulario en pantalla automticamente tome foco el control donde se debe ingresar
la edad.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario">
<br>
Clave:
<input type="password" id="clave">
<br>
Edad:
<br>
</form>
</body>
</html>
29 - FORM (placeholder)
Normalmente cuando creamos un formulario previo a cada control disponemos un mensaje
indicando que dato debe cargar el usuario en el mismo, en algunas circunstancias dicha
informacin puede quedar no lo suficientemente clara. Mediante la propiedad placeholder
podemos disponer ms informacin directamente dentro del control generalmente con un
ejemplo de dato a ingresar. El contenido del control HTML inicial se borra inmediatamente
luego que el operador ingresa un caracter.
Es importante tener en cuenta que debemos utilizar la propiedad placeholder si la
informacin que disponemos en ella despeja de dudas al operador.
Problema
Confeccionar un formulario que solicite la carga de la patente de un automvil, tener en
cuenta que toda patente esta formada por seis caracteres: los tres primeras son alfabticos y
los tres segundos numricos.
Solucin
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Patente:
<input type="text" id="patente" placeholder="ABC123">
<br>
</form>
</body>
</html>
Como vemos al control que deseamos agregar esta marca de agua (o mensaje inicial)
inicializamos la propiedad placeholder:
Luego en el navegador podemos observar la marca de agua:

31 - FORM (placeholder)
Problema:Confeccionar un formulario que solicite la carga de la patente de un automvil, tener en
cuenta que toda patente esta formada por seis caracteres: los tres primeras son alfabticos y los
tres segundos numricos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Patente:
<br>
</form>
</body>
</html>
30 - FORM (required)
Otra facilidad que nos proporciona el HTML5 es la validacin de contenido obligatorio de
un control. Mediante la propiedad required obligamos e informamos al operador que el
control se debe cargar obligatoriamente (por ejemplo el nombre de usuario, clave, estudios
etc.)
Esto se haca nicamente con Javascript pero ahora agregando la propiedad required al
control la validacin de contenido se hace automticamente.
Nuevamente estamos en presencia de una propiedad que no requiere que le asignemos un
valor, con solo hacer referencia a la misma dentro del control el navegador verificar que su
contenido est cargado previo a enviarlo al servidor.
Problema
Confeccionar una pgina que solicite la carga del nombre de usuario y una clave. No
permitir enviar los datos al servidor si alguno de los controles est vaco, emplear para esto
la propiedad required.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario" required>
<br>
Clave:
<input type="password" id="clave" required>
<br>
<br>
<input type="submit">
</form>
</body>
</html>
Podemos observar que solo hemos agregado la propiedad required a cada control HTML
que necesitamos que el operador no deje vaco:
Usuario:
<br>
Clave:
Luego si el operador carga el nombre e intenta dejar la clave vaca al presionar el botn
para enviar los datos al servidor (submit) el navegador se encargar de mostrar un mensaje
indicando que no debe dejar el campo de la clave vaca:

El mensaje que aparece e informa al operador es propio de cada navegador, pero no deja
ninguna duda de la accin que debe tomar el operador.
En el Chrome:

En el Firefox:

En el Internet Explorer:

32 - FORM (required)
Problema:Confeccionar una pgina que solicite la carga del nombre de usuario y una clave. No
permitir enviar los datos al servidor si alguno de los controles est vaco, emplear para esto la
propiedad required.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Usuario:
<br>
Clave:
<br>
<br>
</form>
</body>
</html>
31 - FORM (pattern)
Una expresin regular es una tcnica que nos permite identificar si un string coincide con
un patrn determinado. Un ejemplo clsico es determinar si un email est correctamente
estructurado (sabemos que comienza con uno o ms caracteres alfanumricos, luego el
carcter @ seguido de uno o ms caracteres alfanumricos, luego el carcter "." y
finalmente otros caracteres alfabticos)
Hay muchas situaciones donde el operador debe cargar datos que tienen que tener una
determinada estructura.
Hasta hace poco solo esto poda resolverse empleando Javascript, pero ahora el HTML5
aade a los controles de formulario la propiedad pattern donde definimos el patrn que
debe seguir la cadena que cargue el operador y en caso que no cumpla dicho patrn
informar un mensaje de error.
Veremos que para definir expresiones regulares intervienen una serie de caracteres . * +? =!
: | \ / () [] {} que tienen un significado especial en la definicin del lenguaje de expresiones
regulares, estos tipos de caracteres suelen llamarse metacaracteres.
El tema de expresin regular es bastante amplio y complejo en un principio. Lo ms
adecuado es iniciar con pequeos ejemplos que nos muestren el funcionamiento y la
sintaxis.
Problema
Confeccionar un formulario que nos solicite la carga obligatoria de un nmero binario de
ocho dgitos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese un nmero binario de ocho dgitos:
<input type="text" id="numero" required pattern="[01]{8}">
<br>
</form>
</body>
</html>
Entre corchetes encerramos los caracteres permitidos, en este caso [01] indicamos que los
dos nicos caracteres posibles de ingresar dentro del control son el cero y el uno.
Seguidamente indicamos entre llaves la cantidad de caracteres que se deben ingresar, en
nuestro ejemplo indicamos {8}
Otra cosa que hay que tener muy en cuenta es que debemos agregar la propiedad required.
Si no agregamos esta propiedad y el operador dejar vaco el control no valida la expresin
regular que hemos dispuesto. Es decir si dejamos vaco el control no se analiza si se ingres
un nmero binario de ocho dgitos.
Problema
Confeccionar un formulario que nos solicite la carga de un nmero entero decimal que
contenga 5 dgitos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese un nmero entero que contenga 5 dgitos:
<input type="text" id="numero" required pattern="[0-9]{5}">
<br>
</form>
</body>
</html>
Si bien podamos enumerar del cero al nueve los caracteres posibles, es mas cmodo
indicar un rango de caracteres [0-9] utilizando el guin.
Como vemos la expresin regular queda:
<input type="text" id="numero" required pattern="[0-9]{5}">
Problema
Confeccionar un formulario que nos solicite la carga de un nmero entero decimal que
contenga entre 1 y 5 dgitos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese un nmero entero decimal que contenga entre 1 y 5 dgitos:
<input type="text" id="numero" required pattern="[0-9]{1,5}">
<br>
</form>
</body>
</html>

En este problema vemos que cuando queremos cargar una cantidad no exacta de valores
indicamos entre llaves primero el valor mnimo y luego de una coma el valor mximo:
<input type="text" id="numero" required pattern="[0-9]{1,5}">
Problema
Confeccionar un formulario que nos solicite la carga de una patente de un auto. Toda
patente cuenta con tres caracteres seguido de tres nmeros
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese su patente:
<input type="text" id="patente" required pattern="[A-Za-z]{3}[0-
9]{3}">
<br>
<input type="submit" value="confirmar">
</form>
</body>
</html>
Como vemos primero indicamos entre corchetes que podemos ingresar cualquier caracter
alfabtico en maysculas o minsculas, luego entre llaves indicamos que solo se pueden
cargar 3 de dichos caracteres. Seguimos nuevamente entre corchetes indicando que se
puede cargar nmeros entre 0 y 9, indicando entre llaves que deben ser exactamente 3.

33 - FORM (pattern)
Problema:Confeccionar un formulario que nos solicite la carga de tres nmeros:
Un nmero binario de ocho dgitos.
Un nmero entero decimal que contenga 5 dgitos.
Un nmero entero decimal que contenga entre 1 y 5 dgitos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese un nmero binario de ocho dgitos:
<input type="text" id="numero1" required pattern="[01]{8}">
<br>
Ingrese un nmero decimal que contenga 5 dgitos:
<input type="text" id="numero2" required pattern="[0-9]{5}">
<br>
Ingrese un nmero entero decimal que contenga entre 1 y 5
dgitos:
<input type="text" id="numero3" required pattern="[0-
9]{1,5}">
<br>
<input type="submit" value="confirmar">
</form>
</body>
</html>
32 - FORM (input type="email")
El HTML5 trae una nueva serie de controles de formulario que complementan los
existentes en HTML.
Para utilizar estos nuevos controles hay que definir el tipo en la propiedad type del control
input.
Normalmente cuando queremos ingresar un email utilizamos el control:
<input type="text" id="mailusuario">
Luego para validarlo en el navegador implementamos una funcin en Javascript.
En HTML5 tenemos un control especializado para el ingreso de un email por teclado que
tiene asociado toda la lgica para validar el ingreso correcto del dato.
Problema
Ingresar por teclado un email verificando su correcta sintaxis.
Solucin
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Mail:
<input type="email" id="emailusuario" required>
<br>
</form>
</body>
</html>
Como vemos la sintaxis para el ingreso de un email es utilizar un elemento input y asignar
a la propiedad type el valor "email". Tambin tenemos que agregar la propiedad required si
queremos que no deje pasar un dato vaco dentro del control.
Si ingresamos un mail con una estructura incorrecta (por ejemplo nos olvidamos el @, el
navegador se encargar de informar al usuario que ha cargado un mail mal formado:

El mensaje que muestra puede variar entre uno y otro navegador, pero solo se mostrar si
hemos ingresado un email incorrecto. En FireFox tenemos el siguiente mensaje:

34 - FORM (input type="email")
Problema:Ingresar por teclado un email verificando su correcta sintaxis.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Mail:
<input type="email" id="emailusuario" required>
<br>
</form>
</body>
</html>

33 - FORM (input type="range")
Otra control que agrega el HTML5 es una barra de seleccin de un valor.
En lugar de utilizar un control input de tipo text para cargar un nmero podemos
seleccionar el valor con el mouse o con el dedo segn el dispositivo que estamos utilizando.
Para definir una barra de seleccin inicializamos la propiedad type con el valor range.
Luego podemos inicializar las propiedades min y max para fijar el valor mnimo y el
mximo.
Problema
Solicitar la carga de una temperatura entre 0 y 100, utilizar una barra de seleccin.
Solucin
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Seleccione una temperatura:
<input type="range" id="temperatura" min="0" max="100">
<br>
</form>
</body>
</html>
Como podemos ver definimos el elemento input inicializando la propiedad type con el
valor range, algo similar hacemos con las propiedades min y max:
Si bien todos los navegadores modernos implementan este control la forma de mostrarlos es
bastante diferente:
Firefox:

Chrome:

Internet Explorer

Y adems no nos muestran en pantalla el nmero seleccionado (salvo el Internet Explorer)
por lo que debemos implementar una funcin en Javascript si queremos que quede a la vista
el valor seleccionado.
Problema
Solicitar la carga de una temperatura entre 0 y 100, utilizar una barra de seleccin. Mostrar
en un elemento span el valor seleccionado en el range.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<script>
addEventListener('load',inicio,false);

function inicio()
{

document.getElementById('temperatura').addEventListener('change',cambioTe
mperatura,false);
}

function cambioTemperatura()
{

document.getElementById('temp').innerHTML=document.getElementById('temper
atura').value;
}
</script>

</head>
<body>
<form action="#">
<span id="temp">0</span>
<br>
</form>
</body>
</html>
Como vemos disponemos un bloque de Javascript para capturar el evento change de la
barra de seleccin. Cuando se dispara este evento se ejecuta la funcin cambioTemperatura
donde modificamos el contenido el elemento span con el valor actual de la barra de
seleccin:
<script>

function inicio()
{

document.getElementById('temperatura').addEventListener('change',cambioTe
mperatura,false);
}

{

document.getElementById('temp').innerHTML=document.getElementById('temper
atura').value;
}
</script>

35 - FORM (input type="range")
Problema:Solicitar la carga de una temperatura entre 0 y 100, utilizar una barra de seleccin.
Mostrar en un elemento span el valor seleccionado en el range.
<!DOCTYPE HTML>
<html>
<head>

<script>

function inicio()
{

document.getElementById('temperatura').addEventListener('change',
cambioTemperatura,false);
}

{

document.getElementById('temp').innerHTML=document.getElement
ById('temperatura').value;
}
</script>

</head>
<body>
<form action="#">
<span id="temp">0</span>
<br>
</form>
</body>
</html>

34 - FORM (input - datalist)
Cuando utilizamos un editor de lnea:
<input type="text">
Podemos ingresar cualquier cadena en su interior. Con html5 podemos mostrarle una lista
de sugerencias (no obligatorias como un select) para que el operador pueda seleccionarla
sin tener que tipear todos los caracteres.
Esta funcionalidad se logra creando un elemento nuevo llamado datalist con todas sus
opciones y luego asocindolo a un control input de tipo text.
Una cosa importante es notar que cuando disponemos un datalist no es obligatorio que el
usuario seleccione uno de esos elementos, el usuario tiene la libertad de ingresar otra
cadena de caracteres distinta a la propuesta por el datalist.
Para ver la sintaxis y funcionamiento lo haremos confeccionando un problema.
Problema
Desarrollar un formulario que solicite la carga del nombre de navegador que utiliza el
visitante. Disponer un control de tipo text para el ingreso de dicho dato y mostrar mediante
un datalist los navegadores ms comunes.
Solucin
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese el nombre de navegador que utiliza:
<input type="text" id="navegador" list="listanavegadores">
<datalist id="listanavegadores">
<option label="Chrome" value="Chrome">
<option label="Firefox" value="Firefox">
<option label="Internet Explorer" value="Internet Explorer">
<option label="Safari" value="Safari">
</datalist>
<br>
</form>
</body>
</html>
Por un lado definimos el datalist con todas sus opciones:
</datalist>
Dentro del elemento datalist definimos los elementos option inicializando la propiedad
label con el texto que se mostrar y la propiedad value con el valor que retornar si se lo
selecciona.
Para asociar el datalist con un control input debemos inicializar la propiedad list del control
input con el id del datalist:
Luego cuando comenzamos a escribir el contenido aparece una lista desplegando las
sugerencias:

36 - FORM (input - datalist)
Problema:>Desarrollar un formulario que solicite la carga del nombre de navegador que utiliza el
visitante. Disponer un control de tipo text para el ingreso de dicho dato y mostrar mediante un
datalist los navegadores ms comunes.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese el nombre de navegador que utiliza:
</datalist>
<br>
</form>
</body>
</html>
35 - FORM (novalidate)
Hemos visto hasta ahora que html5 facilita la validacin de datos sin tener en muchos casos
la necesidad de utilizar Javascript mediante controles especficos o propiedades especiales
como validate, pattern etc.
Lo que hay que tener en cuenta tambin que normalmente implementamos formularios para
que el usuario realice la carga de datos y sean recibidos posteriormente por un servidor
web. Es sabido que el programa en el servidor (PHP, ASPNet etc.) debe validar
nuevamente los datos enviados desde el navegador. En esta circunstancia es muy til
desactivar todas las validaciones que hemos implementado en el cliente y para no tener que
modificar cada uno de los controles contenidos en un formulario existe una propiedad que
desactiva todos los controles al mismo tiempo.
Para desactivar las validaciones en el cliente solo tenemos que agregar la propiedad
novalidate a la marca form.
Seguramente no encontraremos ningn sitio que tenga esta propiedad activa en un sitio en
produccin ya que solo tiene como objetivo permitir la depuracin de datos en el servidor
cuando recibe datos no validados.
Problema
Confeccionar una pgina que solicite la carga del nombre de usuario y una clave. No
permitir enviar los datos al servidor si alguno de los controles est vaco, emplear para esto
la propiedad required. Agregar la propiedad novalidate y comprobar que la informacin se
enva al servidor independientemente que carguemos o no datos en los controles input.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#" novalidate>
Usuario:
<br>
Clave:
<br>
<br>
</form>
</body>
</html>
Lo nico que hacemos es agregar la propiedad novalidate a la marca form:
Con esto todas las validaciones que hemos especificado dentro del formulario el navegador
las saltea. Recordemos borrar la propiedad novalidate luego. Esto nos es til para ver que
hace nuestro programa en el servidor cuando por ejemplo dejamos vaca la clave.

37 - FORM (novalidate)
Problema:Confeccionar una pgina que solicite la carga del nombre de usuario y una
clave. No permitir enviar los datos al servidor si alguno de los controles est vaco, emplear
para esto la propiedad required. Agregar la propiedad novalidate y comprobar que la
informacin se enva al servidor independientemente que carguemos o no datos en los
controles input.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Usuario:
<br>
Clave:
<br>
<br>
</form>
</body>
</html>
36 - WEB STORAGE (localStorage y
sessionStorage)
Con el HTML clsico si necesitamos almacenar datos en el cliente (navegador) se utilizan
las cookies. Con HTML5 se han agregado otras tecnologas para almacenar datos en el
cliente.
La primer tecnologa que vamos a ver para almacenar datos en el navegador empleando
HTML5 es la funcionalidad que provee el objeto localStorage.
El objeto localStorage nos permite almacenar datos que sern recordados por el navegador
para siempre, es decir no tienen una fecha de caducidad.
La cantidad de informacin que podemos almacenar es muy superior a la permitida con las
cookies, el localStorage permite almacenar por lo menos 5 Mb.
La informacin que se almacena en el localStorage a diferencia de las cookies no se enva
al servidor cada vez que se solicita una pgina. Necesariamente debemos utilizar Javascript
para almacenar y recuperar datos.
El objeto localStorage cuenta con dos mtodos fundamentales para grabar y recuperar
datos:
localStorage.setItem ( [clave] , [valor])

localStorage.getItem ( [clave] )
El mtodo setItem permite almacenar los datos que le enviamos en el segundo parmetro y
los guarda con la clave indicada en el primer parmetro.
Para recuperar datos del localStorage debemos llamar al mtodo getItem pasando como
parmetro la clave de referencia. La clave sera como el primary key en el modelo de base
de datos relacionales.
Desarrollaremos una aplicacin que nos muestre la potencia que disponemos ahora en todo
navegador moderno.
Problema
Confeccionar una aplicacin que permita administrar un diccionario ingles/castellano,
almacenar en forma local dichos datos.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<script>

window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('guardar').addEventListener('click',
guardar, false);
document.getElementById('traducir').addEventListener('click',
recuperar, false);
}

function guardar(evt) {
localStorage.setItem(document.getElementById('ingles').value,
document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}

function recuperar(evt) {
if (localStorage.getItem(document.getElementById('ingles').value)
== null)
alert('No est almacenala la palabra
'+document.getElementById('ingles').value);
else

document.getElementById('castellano').value=localStorage.getItem(document
.getElementById('ingles').value);
}

</script>

</head>
<body>
Palabra en ingles:
<input type="text" id="ingles">
<input type="button" id="traducir" value="Traducir">
<br>
Palabra en castellano:
<input type="text" id="castellano">
<br>
<input type="button" id="guardar" value="Guardar">
</body>
</html>
Hemos implementado dos controles input para la carga de datos por parte del operador y
dos botones para procesar la grabacin de datos en el localStorage y la bsqueda.
Los primero que hacemos en Javascript es indicar que el mtodo inicio se ejecute una vez
que la pgina este cargada:
En la funcin inicio asociamos la funcin que se ejecutar al presionarse cada botn:
function inicio() {
document.getElementById('guardar').addEventListener('click',
guardar, false);
document.getElementById('traducir').addEventListener('click',
recuperar, false);
}
El mtodo guardar se ejecuta cuando presionamos el botn "Guardar", en este llamamos al
mtodo setItem del objeto localStorage pasando como clave la palabra en ingles y como
dato a grabar la palabra en castellano ( por ejemplo si guardamos la traduccin de casa
luego como clave se almacena 'house' y como dato 'casa'):
function guardar(evt) { localStorage.setItem(document.getElementById('ingles').value,
document.getElementById('castellano').value); document.getElementById('ingles').value='';
document.getElementById('castellano').value=''; }
El proceso inverso, es decir la recuperacin de datos del localStorage la realizamos en el la
funcin 'recuperar', llamamos al mtodo getItem pasando como parmetro la palabra en
ingles que buscamos para que nos retorne su traduccin. Agregamos un if para los casos
que no exista la palabra dentro del diccionario:
if (localStorage.getItem(document.getElementById('ingles').value)
== null)
alert('No est almacenala la palabra
'+document.getElementById('ingles').value);
else

document.getElementById('castellano').value=localStorage.getItem(document
.getElementById('ingles').value);
}
Como podemos analizar con un programa de 15 lneas podemos automatizar el
almacenamiento y recuperacin de datos del diccionario.
Hemos visto como funciona el objeto localStorage para el almacenamiento permanente de
datos. El otro objeto llamado sessionStorage cuenta con los mismos mtodos pero la
diferencia fundamental es que los datos almacenados solo permanecen mientras no
cerremos la sesin del navegador, una vez que cerramos el navegador se pierden todos los
datos almacenados utilizando el objeto sessionStorage.
Dependiendo de la necesidad utilizamos el localStorage o el sessionStorage.

38 - WEB STORAGE (localStorage y
sessionStorage)
Problema:Confeccionar una aplicacin que permita administrar un diccionario ingles/castellano,
almacenar en forma local dichos datos.
<!DOCTYPE HTML>
<html>
<head>

<script>


function inicio() {
document.getElementById('guardar').addEventListener('click', guardar, false);
document.getElementById('traducir').addEventListener('click', recuperar, false);
}

function guardar(evt) {
localStorage.setItem(document.getElementById('ingles').value,
document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}

if (localStorage.getItem(document.getElementById('ingles').value) == null)
alert('No est almacenala la palabra '+document.getElementById('ingles').value);
else

document.getElementById('castellano').value=localStorage.getItem(document.getElementB
yId('ingles').value);
}

</script>

</head>
<body>
Palabra en ingles:
<input type="text" id="ingles">
<input type="button" id="traducir" value="Traducir">
<br>
Palabra en castellano:
<input type="text" id="castellano">
<br>
<input type="button" id="guardar" value="Guardar">
</body>
</html>
37 - GEOLOCATION
(getCurrentPosition)
La geolocalizacin es una caracterstica de HTML5 que nos permite acceder a ubicacin
geogrfica del usuario del sitio web con una precisin absoluta en el caso que el dispositivo
que utilice tenga GPS.
La precisin va a disminuir si no tiene GPS y debe utilizarse la IP del proveedor de
servicios de Internet. De todos modos veremos que podemos detectar dicha precisin.
El navegador administra la geolocalizacin mediante un objeto llamado geolocation que es
un atributo del objeto navigator.
El objeto geolocation cuenta con un mtodo llamado getCurrentPosition que le enviamos el
nombre de la funcin que se llamar cuando se obtenga la posicin.
Como la geolocalizacin es una caracterstica que puede invadir nuestra privacidad
(tengamos en cuenta que estamos informando al sitio web el lugar exacto donde estamos
parados en ese momento) el navegador nos muestra un dilogo para que aceptemos o no
informar nuestra posicin.
Los mensajes dependiendo del navegador son similares.
En el Chrome:

En el Firefox:

En el Internet Explorer:

Problema
Confeccionar una aplicacin que permita obtener la latitud, longitud de nuestra posicin y
adems con que precisin se obtuvo en metros.
Solucin
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
document.getElementById('obtener').addEventListener('click',
recuperarLocalizacion, false);
}

function recuperarLocalizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarCoordenada);
} else {
alert('El navegador no dispone la capacidad de
geolocalizacin');
}
}

function mostrarCoordenada(posicion) {
document.getElementById('dato').innerHTML='Latitud:'+
posicion.coords.latitude+
'<br> Longitud:'+posicion.coords.longitude+
'<br>Exactitud:'+posicion.coords.accuracy;
}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localizacin
actual">
<br>
<span id="dato"></span>
</body>
</html>
Analicemos el cdigo. Disponemos un botn y un elemento HTML span para informar en
tiempo de ejecucin las coordenadas:
<input type="button" id="obtener" value="Obtener la localizacin
actual">
<br>
En el evento load ejecutamos la funcin inicio asociando la funcin que se debe ejecutar al
presionar el botn:

function inicio() {
}
Ahora si analicemos lo nuevo que sucede cuando se presiona el botn:
} else {
geolocalizacin');
}
}
Disponemos un if para verificar si nuestro navegador es moderno y dispone de la capacidad
de geolocalizacin mediante el objeto geolocation. Si el if se verifica verdadero llamamos
al mtodo getCurrentPosition y le pasamos como dato el nombre de la funcin que se
ejecutar cuando el navegador obtenga el dato de la posicin.
La funcin mostrarCoordenada se ejecuta cuando el navegador obtuvo la posicion actual y
la recibe como parmetro esta funcin. El objeto que llega como parmetro dispone de una
propiedad llamada coords que contiene entre otros datos la latitud, longitud, precisin en
metros etc.:
}
Cuando ejecutamos la aplicacin luego de aceptar informar de nuestra posicin veremos los
valores de la latitud, longitud y presicin:

39 - GEOLOCATION
(getCurrentPosition)
Problema:Confeccionar una aplicacin que permita obtener la latitud, longitud de nuestra
posicin y adems con que precisin se obtuvo.
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
document.getElementById('obtener').addEventListener('click', recuperarLocalizacion,
false);
}

} else {
alert('El navegador no dispone la capacidad de geolocalizacin');
}
}

}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localizacin actual">
<br>
</body>
</html>
38 - GEOLOCATION (mostrar en un
mapa)
Hemos visto que es muy sencillo obtener la latitud y la longitud empleando HTML5, pero
estos dos nmeros brindan poca informacin si no los posicionamos en un mapa.
El mejor software actualmente sobre mapas es el Google Maps. Veremos ahora como el
servicio de Google nos puede generar un mapa en forma dinmica a partir de la latitud y
longitud que obtenemos en nuestro sitio web con el consentimiento del visitante.
Problema
Confeccionar una aplicacin que al presionar un botn obtenga la latitud y longitud de
nuestra posicin actual y luego solicitar a los servicios de Google Maps un mapa de dicha
coordenada.
Solucin
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
}

} else {
geolocalizacin');
}
}

var direccion = posicion.coords.latitude + "," +
posicion.coords.longitude;
var mapa =
"http://maps.googleapis.com/maps/api/staticmap?center="
+direccion+"&zoom=14&size=500x500&sensor=false";
document.getElementById("dato").innerHTML = "<img
src='"+mapa+"'>";
}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localizacin actual
en Google Maps">
<br>
<div id="dato"></div>
</body>
</html>
Cuando ejecutamos el programa, presionamos el botn y luego de dar el consentimiento de
obtener nuestra ubicacin se muestra una imagen del mapa:

Ahora si los resultados en pantalla son muy claros.
Igual que el problema del concepto anterior primero registramos el evento click para
nuestro botn y cuando se presiona procedemos a verificar que se trate de un navegador
moderno que acepte el HTML5, con lo que procedemos a llamar al mtodo
getCurrentPosition indicando el nombre de la funcin que recibir la coordenada:

function inicio() {
}

} else {
geolocalizacin');
}
}
En la funcin mostrarCoordenada procedemos a llamar la pgina staticmap de los
servidores de Google pasando como parmetro fundamental la coordenada actual (latitud y
longitud), esta pgina genera una imagen que la mostramos en el div dato:
var mapa =
src='"+mapa+"'>";
}

40 - GEOLOCATION (mostrar en un
mapa)
Problema:Confeccionar una aplicacin que al presionar un botn obtenga la latitud y longitud de
coordenada.
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
false);
}

} else {
}
}

var direccion = posicion.coords.latitude + "," + posicion.coords.longitude;
var mapa = "http://maps.googleapis.com/maps/api/staticmap?center="
document.getElementById("dato").innerHTML = "<img src='"+mapa+"'>";
}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localizacin actual en Google
Maps">
<br>
</body>
</html>
39 - GEOLOCATION (tiempo de espera y
captura de errores)
El mtodo getCurrentPosition tiene otros dos parmetros opcionales:
getCurrentPosition([funcion que recibe la coordenada],
[funcin que captura el error],
[objeto que configura parmetros iniciales]);
Por ejemplo una llamada vlida a getCurrentPosition:

navigator.geolocation.getCurrentPosition(mostrarCoordenada,errores,{timeo
ut:50});
El segundo parmetro es el nombre de la funcin que eventualmente captura un error:
function errores(err) {
if (err.code == err.TIMEOUT)
alert("Se ha superado el tiempo de espera");
if (err.code == err.PERMISSION_DENIED)
alert("El usuario no permiti informar su posicin");
if (err.code == err.POSITION_UNAVAILABLE)
alert("El dispositivo no pudo recuperar la posicin actual");
}
El objeto err que llega como parmetro a la funcin nos informa el tipo de error generado
por el intento de obtener la geolocalizacin. Como vemos hay tres posibilidades de errores
que se pueden generar:
(TIMEOUT) : El primer error posible es que el tiempo de espera para obtener la posicin
haya expirado. Veremos que podemos especificar al mtodo getCurrentPosition el tiempo
mximo que tiene para obtener la posicin.
(PERMISSION_DENIED) : Se genera si el usuario no aprueba la obtencin de la
geolocalizacin.
(POSITION_UNAVAILABLE) : Cuando el dispositivo (por ejemplo un GPS) genera error
interno.
Otro concepto importante es que al llamar al mtodo getCurrentPosition en el tercer
parmetro podemos enviarle un objeto donde configuramos todos o alguno de sus atributos:
timeout //Especificamos el tiempo mximo de espera (si no se
especifica el tiempo es infinito)
maximumAge //El atributo maximumAge indica que la aplicacin est
dispuesto a aceptar una posicin almacenada en el cach
cuya edad no supere la cantidad de milisegundos
indicado en esta propiedad.
Por defecto est configurada en cero.
enableHighAccuracy //Con el valor true activa la alta presicin (por
defecto est configurado en cero)
La sintaxis para configurar algunos de dichos atributos:

ut:50,maximumAge:60000});
Problema
Confeccionar una aplicacin que al presionar un botn obtenga la latitud y longitud de
coordenada. Esperar solo 10 milisegundos y ver si se genera un error por el tiempo de
espera. Disponer luego en el atributo timeout un valor mayor hasta que no se dispare el
error de tiempo de espera.
Solucin
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
}


ut:50});
} else {
geolocalizacin');
}
}

var mapa =
src='"+mapa+"'>";
}

}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localizacin actual
en Google Maps">
<br>
</body>
</html>
Como podemos ver hemos fijado el tiempo de espera en 50 milisegundos, con lo que es
muy probable que no demos tiempo al dispositivo a generar la posicin:

ut:50});
La funcin errores la hemos pasado como parmetro cuando llamamos a getCurrentPosition
y es en donde analizamos el tipo de error disparado:
}

41 - GEOLOCATION (tiempo de espera y
captura de errores)
Problema:
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
false);
}


navigator.geolocation.getCurrentPosition(mostrarCoordenada,errores,{timeout:50});
} else {
}
}

var direccion = posicion.coords.latitude + "," + posicion.coords.longitude;
var mapa = "http://maps.googleapis.com/maps/api/staticmap?center="
document.getElementById("dato").innerHTML = "<img src='"+mapa+"'>";
}

}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localizacin actual en Google
Maps">
<br>
</body>
</html>
40 - GEOLOCATION (watchPosition)
Hasta ahora hemos empleado el mtodo getCurrentPosition para obtener la posicin, existe
otro mtodo llamado watchPosition que tiene los mismos parmetros que
getCurrentPosition con la diferencia que la funcin que recibe la posicin se llama cada vez
que se detecta que nos hemos desplazado.
Problema
Confeccionar una aplicacin que inmediatamente arranque muestra la longitud, latitud y
precisin. Actualizar dicha posicin cada vez que cambie empleando para ello la llamada al
mtodo watchPosition.
Para probar este algoritmo es mejor hacerlo en un celular y desplazarnos para que se
obtengan distintas posiciones.
Solucin
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
navigator.geolocation.watchPosition(mostrarCoordenada);
} else {
geolocalizacin');
}
}

}

</script>

</head>
<body>
</body>
</html>
En la funcin inicio que se dispara una vez que la pgina se ha cargado completamente es
que llamamos a watchPosition indicando la funcin que se ejecutar cada vez que
cambiemos de posicin:
function inicio() {
} else {
geolocalizacin');
}
}
El algoritmo que veamos para mostrar la coordenada actual no cambia:
}

42 - GEOLOCATION (watchPosition)
Problema:Confeccionar una aplicacin que inmediatamente arranque muestra la longitud, latitud
y precisin. Actualizar dicha posicin cada vez que cambie empleando para ello la llamada al
mtodo watchPosition.
<!DOCTYPE HTML>
<html>
<head>



function inicio() {
} else {
}
}

}

</script>

</head>
<body>
</body>
</html>

41 - DRAG AND DROP (dragstart,
dragover, drop)
El HTML5 nos permite fcilmente implementar el concepto de drag and drop (arrastrar y
soltar).
Debemos seguir una serie especfica de pasos para indicar que un elemento HTML se le
permite que sea arrastrado y depositado en otra parte de la pgina.
Parte se resuelve con HTML y otra mediante Javascript.
Debemos indicar primero que elementos HTML se les permitir ser arrastrados asignndole
a la propiedad draggable el valor true:
<span id="palabra1" draggable="true">the </span>
Los eventos fundamentales que tenemos que capturar para procesar el arrastrar y soltar son:
dragstart: Se dispara cuando el usuario selecciona el elemento que quiere arrastrar. La
funcin recibe como parmetro la referencia al elemento HTML que est siendo
arrastrado.
dragover: Se dispara cuando el elemento se ha dispuesto dentro del contenedor. El
parmetro de la funcin hace referencia al elemento contenedor. Como el
comportamiento por defecto es denegar el drop, la funcin debe llamar al mtodo
preventDefault para indicar que se active el soltar elemento.
drop: El elemento arrastrado se ha soltado en el elemento contenedor. El parmetro de la
funcin hace referencia al elemento contenedor.
Problema
Confeccionar un programa que muestre una oracin en Ingles con las palabras
desacomodadas. Permitir mediante drag and drop disponer las palabras dentro de un div.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<style>
#recuadro {
width:300px;
height:50px;
background-color:yellow;
border-style:solid;
border-color:red;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
</style>

<script>

function inicio() {
document.getElementById('palabra1').addEventListener('dragstart',
drag, false);
drag, false);
drag, false);
drag, false);
document.getElementById('recuadro').addEventListener('dragover',
permitirDrop, false);
document.getElementById('recuadro').addEventListener('drop',
drop, false);
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var dato=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(dato));
}

function permitirDrop(ev)
{
}
</script>

</head>
<body>
<p>Arrastre en orden las palabras para formar la oracin correcta.</p>
<div id="recuadro"></div>
<div id="palabras">
<span id="palabra2" draggable="true">is </span>
<span id="palabra3" draggable="true">What </span>
<span id="palabra4" draggable="true">time </span>
</div>
</body>
</html>
Veamos las partes fundamentales de este programa:
En el cuerpo de la pgina definimos un div llamado recuadro donde dispondremos las
palabras que se arrastrarn a su interior:
Hemos definido en la hoja de estilo del div el color amarillo de fondo con rojo como borde:
#recuadro {
width:300px;
height:50px;
border-style:solid;
border-color:red;
font-size:1.5em;
}
Por otro lado definimos cuatro elementos span que contienen las palabras que pueden ser
arrastradas, recordemos que para permitir el arrastre debemos inicializar la propiedad
draggable con el valor true:
Cuando se termina de cargar la pgina se ejecuta el mtodo inicio donde asociamos para
cada elemento span el evento dragstart indicando que se ejecute la funcin drag.
Por otro lado debemos indicar los nombres de las funciones que se ejecutarn para los
eventos dragover y drop del elemento contenedor (es decir el elemento HTML que recibir
en su interior los elementos arrastrados):

function inicio() {
drag, false);
drag, false);
drag, false);
drag, false);
drop, false);
}
La funcin drag se ejecuta cuando el operador selecciona el objeto a arrastrar y tiene como
objetivo mediante el atributo dataTransfer indicar en este caso el id del objeto que acaba de
seleccionarse, para luego poder recuperarlo en el evento drop:

function drag(ev)
{
}
Por otro lado debemos indicar al objeto que recibe el elemento permitir recibir objetos:
{
}
Finalmente la funcin drop se ejecuta cuando soltamos el elemento dentro del contenedor.
En esta llamamos a preventDefault del contenedor y seguidamente recuperamos la
referencia del objeto que estabamos arrastrando mediante el mtodo getData del atributo
dataTransfer. Creamos un elemento dentro del div:
function drop(ev)
{
}

43 - DRAG AND DROP (dragstart,
dragover, drop)
Problema:
<!DOCTYPE HTML>
<html>
<head>

<style>
#recuadro {
width:300px;
height:50px;
border-style:solid;
border-color:red;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
</style>

<script>

function inicio() {
document.getElementById('palabra1').addEventListener('dragstart', drag, false);
document.getElementById('recuadro').addEventListener('dragover', permitirDrop,
false);
document.getElementById('recuadro').addEventListener('drop', drop, false);
}

function drag(ev)
{
}

function drop(ev)
{
}

{
}
</script>

</head>
<body>
<div id="palabras">
</div>
</body>
</html>

42 - DRAG AND DROP (drag, dragend)
Hemos visto que como mnimo cuando implementamos el drag and drop capturamos los
eventos de:
dragstart: Se dispara cuando el usuario selecciona el elemento que se quiere arrastrar. La
funcin recibe como parmetro la referencia al elemento HTML que est siendo
arrastrado.
dragover: Se dispara cuando el elemento se ha dispuesto dentro del contenedor. El
parmetro de la funcin hace referencia al elemento contenedor. Como el
comportamiento por defecto es denegar el drop, la funcin debe llamar al mtodo
preventDefault para indicar que se active el soltar elemento.
drop: El elemento arrastrado se ha soltado en el elemento contenedor. El parmetro de la
funcin hace referencia al elemento contenedor.
Otros dos eventos factibles de capturar son:
drag : Se dispara cada vez que el elemento se mueve. El parmetro de la funcin hace
referencia al elemento HTML que se est arrastrando. Debemos configurar este evento
para cada elemento factible de mover.
dragend: Se dispara cuando el elemento se suelta, indistintamente que se suelte dentro o
fuera del contenedor.
Problema
Inmediatamente luego que el usuario selecciona una palabra cambiar el fondo del div que
recibir la palabra con colores aleatorios. Cuando se suelte la palabra volver el fondo del
div al color amarillo.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<style>
#recuadro {
width:300px;
height:50px;
border:2px solid #ff0000;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
#palabras {
padding-top:50px;
}
</style>

<script>

function inicio() {
dragInicio, false);
dragInicio, false);
dragInicio, false);
dragInicio, false);
document.getElementById('palabra1').addEventListener('drag',
dragMueve, false);
dragMueve, false);
dragMueve, false);
dragMueve, false);
document.getElementById('palabra1').addEventListener('dragend',
dragSolto, false);
dragSolto, false);
dragSolto, false);
dragSolto, false);
drop, false);
}

function dragInicio(ev)
{
}

function dragMueve(ev)
{
var ale=200+parseInt(Math.random()*55);
var rojo=ale;
var verde=ale;
var azul=ale;
document.getElementById('recuadro').style.background =
"rgb("+rojo+","+verde+","+azul+")";
}

function dragSolto(ev)
{
"rgb(255,255,0)";
}

function drop(ev)
{
document.getElementById(dato).removeEventListener('dragstart',
dragInicio, false);
}

{
}

</script>

</head>
<body>
<div id="palabras">
</div>
</body>
</html>

En la funcin inicio registramos los eventos dragstart, drag y dragend para todos los
elementos HTML capacitados para ser arrastrados:
dragInicio, false);
dragInicio, false);
dragInicio, false);
dragInicio, false);
dragMueve, false);
dragMueve, false);
dragMueve, false);
dragMueve, false);
dragSolto, false);
dragSolto, false);
dragSolto, false);
dragSolto, false);
Tambin registramos los eventos a capturar del div receptor de objetos:
drop, false);
En la funcin dragInicio almacenamos el id del objeto que comienza a arrastrarse:
{
}
La funcin dragMueve se ejecuta cada vez que desplazamos el objeto por la pantalla y
como actividad cambiamos el color de fondo del div contenedor con un valor aleatorio
(tener en cuenta que esta funcin se comenzar a ejecutar mientras tengamos agarrado el
objeto y no lo hallamos soltado):
function dragMueve(ev)
{
var ale=200+parseInt(Math.random()*55);
var rojo=ale;
var verde=ale;
var azul=ale;
"rgb("+rojo+","+verde+","+azul+")";
}
La funcin dragSolto se ejecuta cuando se suelta el objeto indistintamente estemos o no
dentro del contenedor, en nuestro problema fijamos nuevamente el color de fondo del div a
color amarillo:
function dragSolto(ev)
{
"rgb(255,255,0)";
}
En la funcin drop agregamos la palabra dentro del div y suprimimos el evento que pueda
moverse nuevamente dicha palabra llamando a removeEventListener:

function drop(ev)
{
dragInicio, false);
}
La ltima funcin es permitir disponer objetos dentro del div contenedor:
{
}

43 - DRAG AND DROP (dragenter,
dragleave)
An nos faltan analizar dos eventos ms que podemos capturar cuando implementamos
algoritmos de drag and drop.
dragenter: se ejecuta este evento cuando un objeto que es arrastrado entra en el objeto
contenedor. El parmetro de esta funcin hace referencia al objeto contenedor.
dragleave: se ejecuta este evento cuando un objeto que es arrastrado sale del objeto
contenedor. El parmetro de esta funcin hace referencia al objeto contenedor.
Problema
Cambiar el color de fondo del recuadro donde se disponen las palabras una vez que el
usuario entra a dicho recuadro y volverlo al color original si sale del recuadro sin soltar el
objeto.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<style>
#recuadro {
width:300px;
height:50px;
background-color:rgb(255,255,0);
border-style:solid;
border-color:red;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
</style>

<script>

function inicio() {
dragInicio, false);
dragInicio, false);
dragInicio, false);
dragInicio, false);
drop, false);
document.getElementById('recuadro').addEventListener('dragenter',
entra, false);
document.getElementById('recuadro').addEventListener('dragleave',
sale, false);
}

{
}

function drop(ev)
{
dragInicio, false);
"rgb(255,255,0)";
}

{
}

function entra(ev)
{
"rgb(255,0,0)";
}

function sale(ev)
{
"rgb(255,255,0)";
}
</script>

</head>
<body>
<div id="palabras">
</div>
</body>
</html>
Como podemos ver lo nuevo que presenta este problema es que registramos los eventos
dragenter y dragleave para el objeto contenedor (es decir el div donde el usuario arrastrar
las palabras):
document.getElementById('recuadro').addEventListener('dragenter',
entra, false);
document.getElementById('recuadro').addEventListener('dragleave',
sale, false);
Cuando el usuario arrastra una palabra y entra al div contenedor se dispara la funcin 'entra'
donde cambiamos el color de fondo del div:
function entra(ev)
{
"rgb(255,0,0)";
}
Y cuando el usuario arrastrando el objeto sale del div se dispara la funcin 'sale' donde
regresamos al color amarillo el fondo del div:
function sale(ev)
{
"rgb(255,255,0)";
}
Lo nico nuevo que agregamos a la funcin 'drop' es volver al color amarillo de fondo del
div:
function drop(ev)
{
dragInicio, false);
"rgb(255,255,0)";
}
45 - DRAG AND DROP (dragenter,
dragleave)
Problema:Confeccionar un programa que
muestre una oracin en Ingles con las
palabras desacomodadas. Permitir
mediante drag and drop disponer las
palabras dentro de un div. Cambiar el
color de fondo del recuadro donde se
disponen las palabras una vez que el
usuario entra a dicho recuadro y volverlo
al color original si sale del recuadro sin
soltar el objeto.
<!DOCTYPE HTML>
<html>
<head>

<style>
#recuadro {
width:300px;
height:50px;
background-color:rgb(255,255,0);
border-style:solid;
border-color:red;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
</style>

<script>

function inicio() {
document.getElementById('palabra1').addEventListener('dragstart', dragInicio,
false);
false);
false);
false);
document.getElementById('recuadro').addEventListener('drop', drop, false);
document.getElementById('recuadro').addEventListener('dragenter', entra,
false);
document.getElementById('recuadro').addEventListener('dragleave', sale, false);
}

{
}

function drop(ev)
{
document.getElementById(dato).removeEventListener('dragstart', dragInicio,
false);
document.getElementById('recuadro').style.background = "rgb(255,255,0)";
}

{
}

function entra(ev)
{
}

function sale(ev)
{
}
</script>

</head>
<body>
<div id="palabras">
</div>
</body>
</html>
44 - API FILE (lectura de archivo de texto
local)
Otra funcionalidad que tenemos con el HTML5 es el acceso solo de lectura de los archivos
que hay en nuestro equipo.
Veremos cual es la estructura de Javascript que debemos implementar para poder
seleccionar un archivo de texto e inmediatamente poder acceder a su contenido en el
navegador.
Para trabajar con archivos que se encuentran en el disco duro del equipo el usuario es el
responsable de seleccionar uno. Hay varias formas para la seleccin del archivo, veremos
primero la ms comn que es disponer un control HTML:
<input type="file" name="archivo">
Como sabemos este control dispone en la pgina web un botn que al ser presionado por el
usuario aparece un dilogo para seleccionar un archivo de nuestro disco duro.
Para poder identificar cuando el usuario seleccion un archivo debemos implementar el
evento change de dicho control.
Problema
Confeccionar un programa que nos permita seleccionar de nuestro disco duro un archivo de
texto y posteriormente leer su contenido y mostrarlo en un control textarea. Mostrar adems
su nombre, tamao y tipo.
Solucin
<!DOCTYPE HTML>
<html>
<head>
<script>

function inicio() {
document.getElementById('archivo').addEventListener('change',
cargar, false);
}

function cargar(ev) {
document.getElementById('datos').innerHTML='Nombre del
archivo:'+ev.target.files[0].name+'<br>'+
'Tamao del
archivo:'+ev.target.files[0].size+'<br>'+
'Tipo
MIME:'+ev.target.files[0].type;
var arch=new FileReader();
arch.addEventListener('load',leer,false);
arch.readAsText(ev.target.files[0]);
}

function leer(ev) {
document.getElementById('editor').value=ev.target.result;
}
</script>
</head>

<body>
<input type="file" id="archivo"><br>
<textarea rows="10" cols="80" id="editor"></textarea>
<br>
<p id="datos"></p>
</body>
</html>
Veamos detenidamente cual debe ser la estructura de nuestro algoritmo para poder leer el
contenido de un archivo de texto que se encuentra en el disco duro del equipo.
Lo primero definimos un control de tipo file que es el encargado de permitirnos seleccionar
un archivo:
Disponemos un control de tipo textarea donde mostraremos el contenido del archivo que
seleccione el operador:
Finalmente disponemos un prrafo donde mostraremos el nombre de archivo que se leer,
su tamao y tipo:
<p id="datos"></p>
Ahora veamos donde se encuentra el programa en Javascript que nos permite acceder al
archivo, en la funcin inicio registramos el evento change del control de tipo file que se
disparar cuando el usuario seleccione un archivo del disco duro:

function inicio() {
cargar, false);
}
Cuando el usuario selecciona un archivo se ejecuta la funcin cargar (que registramos en la
funcin inicio), la funcin recibe un objeto de la clase File que lo accedemos:
ev.target.files[0], este objeto tiene tres atributos name (nombre del archivo que acabamos
de seleccionar), size (tamao en bytes del archivo) y type (tipo de archivo).
Luego de mostrar las tres propiedades fundamentales del archivo procedemos a crear un
objeto de la clase FileReader para poder acceder al contenido del archivo. Mediante la
llamada al mtodo readAsText procedemos a leer el contenido del archivo y registramos el
evento load para indicar la funcin que se disparar cuando tengamos todo el archivo en
memoria:
'Tamao del
archivo:'+ev.target.files[0].size+'<br>'+
'Tipo
MIME:'+ev.target.files[0].type;
}
Por ltimo la funcin leer recibe un objeto que almacena todos los datos contenidos en del
archivo:
function leer(ev) {
}
Inicialmente se muestra el botn para la seleccin del archivo y el textarea vaco:

Luego de seleccionar un archivo de texto del disco duro podemos ver el contenido del
archivo y sus propiedades (nombre, tamao y tipo):

46 - API FILE (lectura de archivo de texto
local)
nos permita seleccionar de nuestro disco
duro un archivo de texto y posteriormente
leer su contenido y mostrarlo en un control
textarea. Mostrar adems su nombre,
tamao y tipo.

<!DOCTYPE HTML>
<html>
<head>
<script>

function inicio() {
document.getElementById('archivo').addEventListener('change', cargar, false);
}

'Tamao del archivo:'+ev.target.files[0].size+'<br>'+
'Tipo MIME:'+ev.target.files[0].type;
}

function leer(ev) {
}
</script>
</head>

<body>
<br>
<p id="datos"></p>
</body>
</html>
45 - API FILE (lectura de mltiples
archivos de texto locales)
Hemos visto en el concepto anterior que HTML5 nos permite seleccionar un archivo de
texto del disco duro local y seguidamente acceder a sus propiedades como el nombre,
tamao, tipo as como a su contenido.
Otra variante de este algoritmo es acceder a un conjunto de archivos en forma simultanea.
Esto lo logramos cuando definimos un control file e indicamos la propiedad multiple:
<input type="file" id="archivo" multiple>
Esta propiedad no es necesario asignarle valor. Con esto cuando el operador presione el
botn le permitir seleccionar mltiples archivos.
Problema
Confeccionar un programa que nos permita seleccionar un conjunto de archivos de texto de
una sola vez y muestre sus contenidos en un control textarea (separando el contenido de
cada archivo por varios guiones). Mostrar adems todos los nombres de archivos leidos.
Solucin
<!DOCTYPE HTML>
<html>
<head>
<script>

function inicio() {
cargar, false);
}

document.getElementById('datos').innerHTML='';
document.getElementById('editor').value='';
for(var f=0;f<ev.target.files.length;f++) {

document.getElementById('datos').innerHTML=document.getElementById('datos
').innerHTML+
'Nombre del
archivo:'+ev.target.files[f].name+'<br>';
arch.readAsText(ev.target.files[f]);
}
}

function leer(ev) {

document.getElementById('editor').value=document.getElementById('editor')
.value+ev.target.result+
'\n----------------------
---------------------------------\n';
}
</script>
</head>

<body>
<p>Selecciona un conjunto de archivos de texto del disco duro.</p>
<input type="file" id="archivo" multiple><br>
<br>
<p id="datos"></p>
</body>
</html>
En el bloque de HTML solo hemos dispuesto la propiedad multiple al control de tipo file
(esto informa al navegador que est permitido la seleccin de ms de un archivo):
<body>
<br>
<p id="datos"></p>
</body>
</html>
La funcin cargar se ejecuta una vez que el usuario seleccion los archivos del disco duro,
lo primero que hacemos es borrar el contenido del prrafo y el textarea por si hay datos de
selecciones anteriores:
Ahora viene lo distinto, como se pueden haber seleccionado ms de un archivo debemos
disponer una estructura repetitiva for. Para saber la cantidad de archivos seleccionados la
propiedad files es un vector por lo que podemos acceder a length que almacena la cantidad
de elementos del mismo:
Dentro del for vamos concatenando en el prrafo el nombre de archivo que accedemos del
vector segn su subndice ev.target.files[f].name:

document.getElementById('datos').innerHTML=document.getElementById('datos
').innerHTML+
'Nombre del
archivo:'+ev.target.files[f].name+'<br>';
Por otro lado creamos por cada archivo un objeto de la clase FileReader y le asociamos la
funcin que se ejecutar cuando se termine de cargar el contenido del archivo en memoria:
}
}
La funcin leer se ejecuta por cada uno de los archivos que se lee, aqu procedemos a
acumular el contenido de cada archivo en el textarea y agregarles una serie de guiones de
separacin:
function leer(ev) {

document.getElementById('editor').value=document.getElementById('editor')
.value+ev.target.result+
'\n----------------------
---------------------------------\n';
}
Inicialmente se muestra el botn para la seleccin de archivos y el textarea vaco:

Luego de seleccionar archivos de texto del disco duro podemos ver el contenido de los
archivos y sus nombres:

47 - API FILE (lectura de mltiples
archivos de texto locales)
nos permita seleccionar un conjunto de
archivos de texto de una sola vez y muestre
sus contenidos en un control textarea
(separando el contenido de cada archivo
por varios guiones). Mostrar adems todos
los nombres de archivos leidos.
<!DOCTYPE HTML>
<html>
<head>
<script>

function inicio() {
}


document.getElementById('datos').innerHTML=document.getElementById('datos').i
nnerHTML+
'Nombre del archivo:'+ev.target.files[f].name+'<br>';
}
}

function leer(ev) {

document.getElementById('editor').value=document.getElementById('editor').value+
ev.target.result+
'\n-------------------------------------------------------\n';
}
</script>
</head>

<body>
<br>
<p id="datos"></p>
</body>
</html>
46 - API FILE (lectura de una imagen)

Las API para manejo de archivos no se limitan solo al formato de texto, sino que podemos
leer cualquier tipo de archivo y luego mediante Javascipt procesarlo en forma local. Un
formato muy fcil de leerlo y mostrarlo son las imgenes.
Para la lectura de un archivo con formato de imagen la clase FileReader dispone de un
mtodo llamado readAsDataURL que transforma los datos de la imagen en una URL de
datos.
Problema
Permitir seleccionar una imagen del disco duro y posteriormente mostrarla en el fondo de
un div.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<style>
#caja {
margin: 10px;
width: 350px;
height: 350px;
border: 5px dashed gray;
border-radius: 8px;
background: rgb(230,230,230);
background-repeat: no-repeat;
background-size: 100%;
}
</style>

<script>

function inicio() {
cargar, false);
}

arch.readAsDataURL(ev.target.files[0]);
}

function leer(ev) {
document.getElementById('caja').style.backgroundImage="url('" +
ev.target.result + "')";
}
</script>
</head>

<body>
<p>Lectura de una imagen almacenada en el disco duro.</p>
<div id="caja">
</div>
</body>
</html>
Para resolver este problema hemos dispuesto un div llamado caja que configuraremos la
propiedad backgroundImage cuando el usuario seleccione una imagen del disco duro:
<body>
<div id="caja">
</div>
</body>
En la funcin inicio registramos el evento change para el control HTML de tipo file:
function inicio() {
cargar, false);
}
Cuando el usuario termin de seleccionar la foto se ejecuta la funcin cargar donde
creamos un objeto de la clase FileReader, registramos el evento load para indicar que se
ejecute la funcin leer una vez que el archivo est en memoria, y finalmente llamamos al
mtodo readAsDataURL que procede a cargar la imagen:
}
En la funcin leer inicializamos la propiedad backgroundImage con la imagen que
acabamos de leer (como est con formato de URL de datos debemos llamar a la funcin url
previo a la asignacin):
function leer(ev) {
alert(ev.target.result);
}

48 - API FILE (lectura de una imagen)
Problema:Permitir seleccionar una imagen
del disco duro y posteriormente mostrarla
en el fondo de un div.
<!DOCTYPE HTML>
<html>
<head>

<style>
#caja {
margin: 10px;
width: 350px;
height: 350px;
border-radius: 8px;
}
</style>

<script>

function inicio() {
}

}

function leer(ev) {
}
</script>
</head>

<body>
<div id="caja">
</div>
</body>
</html>
47 - API FILE (drag and drop de una
imagen del escritorio)
Hemos visto que con la API FILE podemos leer archivos que se encuentran en forma local
solo disponiendo un control de tipo file y mediante el botn que muestra el navegador
seleccionar el archivo que queremos leer.
Pero veremos ahora que las API de DRAG AND DROP que provee HTML5 nos permiten
arrastrar archivos que se encuentran en el escritorio de la computadora (es decir fuera del
navegador) y proceder a su lectura como hemos visto.
Problema
Permitir arrastrar una imagen que se encuentre en el escritorio de la computadora y
posteriormente mostrarla en el fondo de un div.
Solucin
<!DOCTYPE HTML>
<html>
<head>

<style>
#caja {
margin: 10px;
width: 350px;
height: 350px;
border-radius: 8px;
}
</style>

<script>

function inicio() {
document.getElementById('caja').addEventListener('dragover',
document.getElementById('caja').addEventListener('drop', drop,
false);
}

function drop(ev)
{
arch.readAsDataURL(ev.dataTransfer.files[0]);
}

{
}

function leer(ev) {
}
</script>
</head>

<body>
<p>Arrastrar una imagen desde el escritorio.</p>
<div id="caja">
</div>
</body>
</html>
Hemos dispuesto que el archivo solo se pueda arrastrar desde el escritorio (podemos hacer
que se pueda arrastrar o seleccionar de un control file como hemos visto hasta ahora)
Nuestro bloque HTML ahora queda muy cortito:
<body>
<div id="caja">
</div>
</body>
Registramos los eventos dragover y drop de nuestro div:
function inicio() {
document.getElementById('caja').addEventListener('dragover',
document.getElementById('caja').addEventListener('drop', drop,
false);
}
Cuando el usuario suelta la imagen dentro del div procedemos a leer el archivo y registrar
el evento load para que se muestre posteriormente:
function drop(ev)
{
}
Mostramos la imagen en la funcin leer:

function leer(ev) {
}
Desactivamos en la funcin permitirDrop la actividad por defecto que hace un navegador
cuando se arrastra una imagen (que por defecto muestra la imagen ocupando toda la
ventana del navegador):
{
}
49 - API FILE (drag and drop de una
imagen del escritorio)

Problema:Permitir arrastrar una imagen
que se encuentre en el escritorio de la
computadora y posteriormente mostrarla
en el fondo de un div.

<!DOCTYPE HTML>
<html>
<head>

<style>
#caja {
margin: 10px;
width: 350px;
height: 350px;
border-radius: 8px;
}
</style>

<script>

function inicio() {
document.getElementById('caja').addEventListener('dragover', permitirDrop,
false);
document.getElementById('caja').addEventListener('drop', drop, false);
}

function drop(ev)
{
}

{
}

function leer(ev) {
}
</script>
</head>

<body>
<div id="caja">
</div>
</body>
</html>

HTML 5

Uploaded by

Document Information

Original Description:

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

1 - Introduccin.

HTML 5 es la quinta revisin ms importante que se hace al lenguaje HTML. En esta

You might also like