Está en la página 1de 36

<GUIA>

Simbiosys Manuel Salinas Gonzlez Gua practica sobre la tecnologa HTML5

HTML5 es entender que hoy nos conectamos desde telfonos mviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los web masters y hoy hablamos de equipos

multidisciplinarios de empresas de tecnologa que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de informacin en los proyectos que estn reventando mercados y generando trfico e ingresos. HTML5 es el presente de la web y si no estn pasando ya son parte de la vieja generacin de desarrolladores. Eso tendra que preocuparlos.

HTML5 es la actualizacin de HTML, el lenguaje en el que es creada la web. HTML5 tambin es un termino de marketing para agrupar las nuevas tecnologas de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de JavaScript. Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrfonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre las ultimas versiones de navegadores (Internet Explorer como nico opositor).

NUEVAS ETIQUETAS DE HTML5

HTML4 y HTML5 tiene

se

En la versin HTML4 se tenia que poner mediante un identificador (id) a cada uno de los div para poder clasificar cada parte de la estructura del documento web, lo cual representaba un modo mas tedioso al momento de identificar las divisiones dentro del cdigo. HTML5 viene a simplificar la estructura del documento web mediante etiquetas dedicadas para cada seccin.

Para empezar a usar HTML5 lo nico que hay que hacer es colocar este DOCTYPE antes de la etiqueta <html>:

<!DOCTYPE html>
Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y permite usar todas las habilidades de HTML5 sin que nada de lo que ya se tiene programado deje de funcionar. Las principales etiquetas HTML5 nuevas no tienen una representacin especial en pantalla. Todas se comportan como un <div> o un <span> pero mejorados.

<header>
Hacer cosas como <div id=header> es tonto cuando el 99% de los proyectos web tienen una cabecera. <header> est diseada para reemplazar la necesidad de crear divs sin significado semntico.

<hgroup>
Muchos headers necesitan mltiples ttulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header, permitiendo usar otro h1 en el sitio. En el HTML actual, slo puedes usar h1 una vez por sitio.

<nav>
Igual que <header>, <nav> est diseado para que ah se coloque la botonera de navegacin principal. Puede colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul> / <li>.

<section>
Define un rea de contenido nica dentro del sitio. En un blog, sera la zona donde estn todos los posts. En un video de youtube, habra un section para el video, uno para los datos del video, otro para la zona de comentarios.

<article>
Define zonas nicas de contenido independiente. En el home de un blog, cada post sera un article. En un post del blog, el post y cada uno de sus comentarios sera un <article>.

<aside>
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va en un aside. En un blog, obviamente el aside es la barra lateral de informacin. En el home de un peridico, puede ser el rea de indicadores econmicos.

<footer>
Es el pie de pgina y todo lo que lo compone. Las nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando se necesite una caja con objetivos de diseo grafico o cualquier cosa que no tenga significado semntico. Se deben usar las etiquetas semnticas de HTML5 donde sean necesarias.

Ejemplo de blog hecho con HTML5:


<!DOCTYPE html> <header> <hgroup> <h1>El blog de mlw.io</h1> <h2>Este es el blog de Mejorando la web</h2> </hgroup> </header> <nav> Aqu va la botonera de navegacin </nav> <section> <article>Aqu va un post, con su titulo en h2</article> <article>Aqu va un post, con su titulo en h2</article> <article>Aqu va un post, con su titulo en h2</article> </section> <aside> Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc. </aside> <footer> Pie de pagina, amenazas de copyright, etc. </footer>

LAS ETIQUETAS NUEVAS IMPORTANTES DE HTML5

<video>
Inserta video sin necesidad de plugins. Es muy fcil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en mltiples codecs. Se recomienda usar el formato OGG para audio y video por estandarizacin en los navegadores. Para incluir un video con HTML5 usas el siguiente formato: <video src=un-video-mlw.avi width=320 height=240></video> Adicionalmente al ancho y alto, hay atributos adicionales que puede usar:

preload = empezar a precargar el video independientemente de las


acciones del usuario sobre el player.
<video src=un-video-mlw.avi width=320 height=240 preload></video>

autoplay = dar play al video en cuanto cargue la pgina sin accin del usuario sobre los controles.
<video src=un-video-mlw.avi width=320 height=240 autoplay></video>

controls = invoca a incluirse los controles (play, pausa, volumen, pantalla completa.) en el player del video.

<video src=un-video-mlw.avi width=320 height=240 controls></video>

poster = imagen que se muestra cuando el video no es reproducido.

<video src=un-video-mlw.avi poster=una-imagen.jpg width=320 height=240 controls></video>

<audio>
Lo mismo que video, pero solamente sonido. Puede usar mltiples formatos, en especial MP3, pero tambin depende del navegador. <audio controls preload src="msica.mp3"></audio>

<input *>
Input ya exista como la etiqueta para insertar cajas de texto y botones. Ah , j se auto validan, , , , links, password, search, speech, entre otras.

Tipos de INPUT mas comunes: Entrada de Texto:


<input name="Nombre" type=text placeholder="Escribe tu nombre" autofocus>

Entrada Password:
<input name="password" type="password" placeholder="Escribe tu clave">

Entrada URL: <input name="url" type="url">

Entrada Mail: <input name="email" type="email">

Entrada de Rango:
<input name="rango" type="range" min="0" max="100" step="1" value="40">

Entrada de Numero:
<input name="numero" type="number" min="0" max="100" step="5" value="40">

Entrada de Fecha: <input name="fecha" type="date">

Entrada de Fecha y Hora: <input name="datetime" type="datetime">

Entrada de Color: <input name="color" type="color">

Entrada de Busqueda: <input name="consulta" type="search">

Entrada de Texto con Voz: <input type="text" x-webkit-speech>

Cabe mencionar que cada input puede llegar a comportndose diferente en cada navegador, se recomienda probar con en cada uno de ellos.

<canvas>
Es un rea de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

Funciones Canvas en JavaScript: Cambiar el color de relleno con fillStyle Existe un atributo del contexto del canvas que almacena el color que se utilizar al rellenar elementos. Cambiar el color de relleno es tan sencillo como asignarle valores distintos, de colores en RGB, con lo que conseguiremos que la prxima vez que se rellene de color se haga con ese nuevo valor asignado. ctx.fillStyle = '#990000'; Suponiendo que tenemos el objeto contexto de un canvas en la variable ctx, con la anterior lnea estamos solicitando al elemento canvas que la prxima vez que se rellene el color se haga en rojo oscuro. Cambiar el color de trazado con strokeStyle Ahora bien, cuando dibujamos podemos elegir hacer slo un trazado del rectngulo, u otro tipo de camino y para ello se utilizar otro color que podemos definir con strokeStyle. El atributo strokeStyle funciona de la misma manera que fillStyle, pero con la salvedad que servir para indicar el color del trazado. ctx.strokeStyle = '#000099'; Con esa lnea estamos marcando que el color de trazado sea azul oscuro. Por lo cual, la prxima vez que se haga un trazado la lnea ser de ese color.

Otras notaciones para definir colores en canvas Ahora podemos aprender cmo especificar colores en los elementos canvas. La verdad es que los que conozcan CSS no tendrn problema alguno para ello, ya que los formatos son exactamente los mismos. Por ejemplo, podremos utilizar estas notaciones. Color con nombre: "blue" Color con RGB hexadecimal, como se define en HTML: "#ff6600" Color con RGB en base decimal: "rgb(100, 25, 206)" Color RGBA (canal alpha o transparencia, como en CSS3): "rgba(255, 125, 0, 0.5)" Con RGB y porcentaje: "rgb(100%, 20%, 0)"

Nosotros podremos elegir la que ms nos convenga segn nuestro caso. Funcin beginPath() Esta funcin sirve para decirle al contexto del canvas que vamos a empezar a dibujar un camino. No tiene ningn parmetro y por si sola no hace ninguna accin visible en el canvas. Una vez invocada la funcin podremos empezar a dibujar el camino aadiendo segmentos para completarlo con las diferentes funciones de caminos. Funcin moveTo() Sirve para mover el puntero imaginario donde comenzaremos a hacer el camino. Esta funcin no dibuja nada en si, pero nos permite definir el primer punto de un camino. Llamar esta funcin es como si levantsemos el lpiz del lienzo y lo trasladsemos, sin pintar, a otra posicin. Recibe como parmetro los puntos x e y donde ha de moverse el puntero para dibujo. Para saber cul es el punto donde deseamos movernos (x,y), Recordar que el eje de coordenadas del canvas es la esquina superior izquierda. Funcin lineTo() Esta funcin provoca que se dibuje una lnea recta, desde la posicin actual del puntero de dibujo, hasta el punto (x,y) que se indique como parmetro. El mtodo lineTo(), por tanto es como si posramos el lpiz sobre el lienzo en la posicin actual y arrastrsemos, dibujando una lnea recta, hasta el punto donde se defini al invocar el mtodo. La posicin actual del camino la podemos haber indicado previamente con un moveTo(), o donde hayamos terminado una lnea dibujada anteriormente. Si no se indic antes una posicin de nuestro puntero de dibujo, lineTo() no dibuja ninguna lnea, sino que se tendr en cuenta las coordenadas enviadas como parmetro para posicionar tan solo el puntero de dibujo all. Dicho de otra manera, si no se dijo dnde empezar el dibujo, o no se ha dibujado ningn otro segmento en el camino anteriormente, lineTo() ser equivalente a moveTo().

Funcin fill() Este mtodo del contexto del canvas sirve para rellenar de color el rea circunscrita por un camino. Para rellenar de color un camino, el camino tendra que estar cerrado, por lo que, si no lo est, automticamente se cerrar con una lnea recta hasta el primer punto del camino, es decir, donde comenzamos a dibujar. Sin embargo, si durante los distintos segmentos del camino nos dejamos algn segmento abierto, no se pintar nada. Como decimos, si no llegamos a cerrar el camino, el mtodo fill() lo cerrar por nosotros, pero podramos utilizar explcitamente el mtodo closePath() para hacerlo nosotros (closePath() lo explicaremos en futuros artculos). Funcin closePath() Sirve para cerrar un camino, volviendo a su punto inicial de dibujo. Recordemos que el camino tiene un punto inicial en el que nos situamos para comenzar el dibujo, con moveTo(). Luego vamos dibujando segmentos en el camino por medio de lneas que nos llevan a otros puntos del lienzo. Pues closePath() sera como dibujar una lnea recta desde el punto donde se haya quedado el camino al punto inicial donde empezamos a construirlo. El mtodo closePath() no recibe ningn parmetro. Funcin stroke() Con el mtodo stroke() podemos dibujar una lnea por todo el recorrido del camino que hayamos creado por medio de sus distintos segmentos. Es similar al mtodo fill(), con la diferencia que fill() rellenaba de color y stroke() tan solo dibuja la silueta. Adems, en el caso de fill() se necesitaba tener el camino cerrado, por lo que se cerraba automticamente si no lo habamos hecho y stroke() realmente puede estar discontinuada, puesto que slo es una lnea lo que se dibuja y no un rea. Metodo ARC (curvas) Estos son los parmetros que debemos enviar al mtodo arc(): arc(x, y, radio, angulo_inicio, angulo_final, sentido_contrario_del_reloj) Los parmetros x, y corresponden con las coordenadas del centro del arco. El parmetro radio es el nmero de pxeles que tiene el arco como radio. Por su parte angulo_inicio y angulo_final son los ngulos donde comienza y acaba el radio. Estn tomados como si el eje de la horizontal tuviese el ngulo cero. Sentido_contrario_del_reloj es un parmetro boleano, donde true significa que el trazo va desde un ngulo de inicio al de fin en el sentido contrario de las agujas del reloj. False indica que ese camino es en direccin contraria.

La verdad es que todos los parmetros son bastante sencillos de entender, pero el ngulo de inicio y fin no se indican en grados, como podramos suponer, sino en radianes. Para el que no se acuerde, se puede hacer un paso de grados a radianes atendiendo a la siguiente frmula: Radianes = nmero_PI x (grados/180 Para convertir grados en radianes podramos utilizar la siguiente lnea de cdigo Javascript: var radians = (Math.PI/180)*degrees Entender los radianes Para comprender los gradianes de una manera ms visual, as como la referencia sobre el eje X, que seran los cero grados, se puede ver la siguiente imagen:

En la imagen anterior tenemos varios valores de radianes: 0 Radianes seran cero grados y es el punto marcado por 0PI, en el eje de las X y a la derecha del centro de la circunferencia. 0.5 PI Radianes seran 90 grados el punto del eje de las Y abajo del centro. 1 PI Radianes es media circunferencia, 180 grados. 1.5 PI Radianes sera el equivalente a 270 grados 2 PI Radianes son los 360 grados de la circunferencia completa y correspondera con el mismo punto que los cero grados.

As pues, para hacer un crculo completo con centro en (50, 50) de 20 pxeles de radio, podramos utilizar un cdigo como este: contextoCanvas.arc(50, 50 ,20 , 0, Math.PI*2, false); Como se puede ver, la circunferencia empieza en 0 PI (cero) y termina en 2 PI. Mtodo quadraticCurveTo() para dibujar curvas cuadrticas Las curvas cuadrticas actan como otros mtodos para dibujar caminos en el canvas. Recordemos que al hacer un camino en el canvas partimos de un punto inicial, que es el punto donde est situado el puntero de dibujo (podramos imaginar ese punto inicial como el lugar donde est situado el lpiz antes de empezar a dibujar la curva). As que, para expresar una curva cuadrtica, tendremos que definir el punto final de la misma y el punto imaginario hacia el que se curvar la lnea entre esos dos puntos. Utilizaramos la siguiente llamada a un mtodo del contexto del canvas. quadraticCurveTo(pcx, pcy, x, y Este mtodo recibe cuatro valores, que corresponden con dos puntos del lienzo. Insisto en que el punto inicial ya est implcito en el contexto del canvas, con la posicin dada del puntero de dibujo antes de comenzar la curva cuadrtica. Luego, el punto (pcx, pcy) es el lugar "imaginario" al que tendrera la curvatura de la lnea. El punto (x,y) sera el final de la curva. Una manera sencilla de entender este mtodo sera ver la siguiente imagen:

En el anterior grfico tenemos tres puntos: 1. El primero, marcado con color morado, es la posicin del puntero de dibujo al iniciar la curva cuadrtica. Ese punto no lo definimos al hacer la llamada al mtodo quadraticCurveTo() porque ya est implcito en el contexto del canvas. En cualquier caso se puede cambiar con una llamada a moveTo() como hemos visto en artculos anteriores. 2. El segundo punto, marcado con color rojo, es la tendencia de la curva cuadrtica. Ese punto decimos que es imaginario porque no aparece en la curva. Simplemente sirve para definir cmo ser la curvatura. Se define con los parmetros pcx, pcy. 3. El tercer punto, dibujado en verde, es el final de la curva, definido por los parmetros x, y.

Mtodo para dibujar curvas Bezier En el dibujo con el elemento Canvas se han implementado las curvas Bezier a partir del siguiente mtodo del contexto del canvas. bezierCurveTo(pc1x, pc1y, pc2x, pc2y, x, y) En la siguiente imagen se puede ver un diagrama sobre los puntos que se utilizan para definir una curva Bezier.

Como podemos ver, el mtodo bezierCurveTo() tiene 6 parmetros que corresponden con las coordenadas de 3 puntos, pero en la imagen se utilizan hasta 4 puntos para definir la curva Bezier, pues el punto de incicio de la curva ya estaba en el contexto del canvas. As que, atendiendo a la anterior imagen, estos seran los puntos necesarios para componer la curva Bezier: 1. El primer punto, marcado con color morado, es el punto inicial de la curva. Este punto no se tiene que definir, pues ya est implcito en el contexto del canvas, en el lugar donde estaba el puntero de dibujo al llamar al mtodo bezierCurveTo().
a. Nota: Al dibujar cualquier segmento de un camino tenemos definido siempre de antemano el punto inicial de ese segmento del camino, pues es el lugar donde est el puntero de dibujo. Nosotros podramos cambiar ese puntero de dibujo, para cambiar el primer punto de la curva, con una llamada al mtodo moveTo().

2. El segundo punto, que se ha marcado de color verde, es la tendencia de la primera parte de la curva, que se indica con los parmetros pc1x, pc1y. 3. El tercero, marcado de color rojo, es la tendencia de la segunda parte de la curva, que se indica con los parmetros pc2x, pc2y. 4. Finalmente, tenemos el punto final de la curva, marcado en color gris, que se indica con los parmetros x,y.

Mtodo drawImage() para pintar una imagen en el canvas Para dibujar una imagen en el lienzo se utiliza el Mtodo drawImage(), que pertenece al objeto contexto del canvas, con la siguiente sintaxis: drawImage(objeto_imagen, x, y) Enviamos tres parmetros, el primero es el objeto Javascript de la imagen que se desea incluir en el lienzo. Los dos siguientes son las coordenadas donde situar la imagen, siendo (x,y) el punto donde se colocar la esquina superior izquierda de la imagen. Objeto Javascript imagen El objeto imagen es uno de los objetos bsicos de Javascript, que afortunadamente funciona igual en todos los navegadores. Este objeto de imagen lo podemos obtener de varias maneras, pero de momento vamos a aprender a generarlo dinmicamente con una instruccin Javascript. var img = new Image(); Con esto tenemos una variable llamada "img" que tiene un objeto imagen dentro. Ese objeto imagen en estos momentos est sin ningn atributo. Podramos decir que est sin inicializar. La tarea de inicializacin fundamental sera asignarle una ruta a un archivo grfico. img.src = 'logo-grande.jpg'; Esto hace que en el objeto Image se cargue la imagen que est en el archivo 'logo-grande.jpg' y como no hemos especificado ningn directorio en la ruta, se supone que ese archivo est en la misma carpeta que el archivo HTML donde est ese cdigo Javascript. Una vez tenemos el objeto imagen, podramos pintarlo en un canvas por medio de la funcin drawImage(). Sera algo parecido a esto: ctx.drawImage(img, 10, 10); Pero atencin, porque este cdigo tiene un detalle: la imagen no se dibujar en el canvas a no ser que est previamente cargada en el navegador. En la secuencia de instrucciones, tal como lo tenemos ahora: var img = new Image(); img.src = 'logo-grande.jpg'; ctx.drawImage(img, 10, 10); El navegador al especificar el archivo de la imagen, actualizando el atributo src, tiene que descargarlo y eso lleva un tiempo. Por tanto, si inmediatamente a indicar el archivo, intentamos dibujar la imagen, dar un problema. Dicho de otra manera, slo podemos dibujar la imagen cuando estamos seguros que el navegador ya la ha descargado. Para asegurarnos de este punto, podemos usar el evento onload de la imagen, para llamar a drawImage() slo cuando la imagen ha terminado de cargarse.

var img = new Image(); img.src = 'canvas-html5.png'; img.onload = function() { ctx.drawImage(img, 10, 10); } 1.- Traerse una imagen que hay en la pgina: por medio del mtodo getElementById(), enviando como parmetro el identificador de la etiqueta IMG de la imagen deseada. //Creo un objeto Image con una imagen de la pagina var img = document.getElementById("im1"); //luego la dibujo en el canvas ctx.drawImage(img, 10, 10); 2.- A travs del Array de images: Tambin de una imagen que haya en la pgina, en una etiqueta IMG. Al array accedemos con el ndice de la imagen segn orden de aparicin en el cdigo HTML. //consigo una imagen desde el array de imgenes ctx.drawImage(document.images[1], 122, 20); 3.- Creando nuestro objeto Image: Que es la forma con la que trabajamos en el artculo anterior. Y por tanto no vamos a repetir las explicaciones. //un objeto Image var imagen = new Image(); imagen.src = "http://www.google.com/imagen.png"; imagen.onload = function() { ctx.drawImage(imagen, 330, 195); } 4.- Especificar la imagen en formato data:url: que es una cadena de caracteres en formato Base64 que permite especificar elementos como imgenes a partir de cdigo, pero como si esos elementos los adquirisemos remotamente. //a travs de un "data: url" var img = new Image(); img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+ hkcuO4lmNVindo7qyrIXiGBYAOw=='; ctx.drawImage(img, 300, 200); 5.- Acceder a el diseo dibujado en otro canvas: para mostrar en un canvas el contenido de otro, como si fuera una imagen.

//consigo una imagen desde un canvas var imgCanvas = document.getElementById("canvas2"); ctx.drawImage(imgCanvas, 100, 120); Este quinto y ltimo mtodo permite algunas aplicaciones interesantes, como mostrar un un canvas una miniatura de lo que hay en otro canvas. Escalar una imagen Redimensionar una imagen es sencillo. Simplemente tenemos que invocar al mtodo drawImage() enviando adems las dimensiones de la imagen que queremos que se dibuje. El navegador escalar la imagen para que tenga las dimensiones que indiquemos y luego la pintar en el canvas. Las nuevas dimensiones de la imagen a dibujar pueden ser las que deseemos. Pueden incluso no ser proporcionales a las dimesiones actuales, en ese caso el navegador estirar la imagen o la achatar para adaptarla a la anchura y altura que hayamos indicado. La manera de llamar a este mtodo del contexto del canvas es la siguiente: drawImage(imagen, posX, posY, anchura, altura); Este mtodo dibujar la imagen en la posicin definida por las coordenadas (posX, posY) y con la anchura y altura dadas en los ltimos dos parmetros. Recortar y escalar una imagen El ltimo modo de invocar al mtodo drawImage() es un poco ms complejo, ya que le tenemos que indicar todos los datos para poder recortar y escalar la imagen antes de dibujarla en el canvas. La llamada tendr estos parmetros: drawImage(imagen, imgX, imgY, imgAncho, imgAlto, lienzoX, lienzoY, LienzoAncho, LienzoAlto) Entre los parmetros, "imagen" sigue siendo el objeto imagen Javascript que queremos pintar. Todos los parmetros siguientes los podemos entender a la vista de la siguiente imagen:

Definir un patrn Para definir un patrn utilizamos el mtodo createPattern() que pertenece al contexto del canvas. Este mtodo recibe un par de parmetros. El primero es la imagen que deseamos utilizar como patrn y el segundo es el tipo de repeticin que queremos implementar. La imagen que deseamos utilizar la podemos sacar de un objeto Image de Javascript y el tipo de repeticin es similar al que se utiliza cuando se define un fondo de imagen en CSS: "repeat" (para un mosaico que se repite tanto en la horizontal como en la vertical, "repeat-x" (para repeticiones en la horizontal), "repeat-y" (para repetir la imagen en la vertical) y "no-repeat", que no producir ninguna repeticin). Una vez que tenemos definido un patrn todava tenemos la mitad de trabajo por delante para trabajar. Ese patrn simplemente estar declarado como objeto en Javascript y listo para usar en un canvas, pero para ello debemos configurar el estilo de relleno y luego rellenar de color un rea. var miPatron = ctx.createPattern(objeto_imagen, 'repeat'); Con la lnea anterior tendramos creada una variable miPatron que contiene un patrn de imagen listo para ser utilizado.

Rellenar de color un rea Ahora podemos rellenar de color cualquier rea, que se rellenar con el patrn definido anteriormente. Es tan sencillo como utilizar un mtodo que nos permita aplicar color, como fillRect(). ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); Con esta lnea rellenaramos de color todo el rea disponible en el elemento canvas, es decir, un rectngulo que va desde la coordenada (0,0) hasta toda la anchura y la altura del canvas. Como previamente se aplic el patrn a la propiedad fillStyle, en vez de rellenar con un color se rellenar con un mosaico de imagen. Distintos grosores de lnea Todo lo que vamos a aprender de nuevo en este artculo es la propiedad lineWidth, que pertenece al contexto del canvas. Esta propiedad admite un valor numrico que puede ser entero o incluso un nmero real, con decimales. El grosor de la lnea ser el nmero de pxeles que se coloque en la propiedad lineWidth ctx.lineWidth = 2; //Esto configura una lnea con dos pxeles de anchura

La grosura de una lnea se coloca con respecto al centro del camino. Es decir, por explicarlo con un ejemplo para que se pueda entender bien, imaginemos un camino circular. Si contorneamos ese camino con una lnea de 10 pxeles, la lnea que se colocara no estara ni toda por dentro ni toda por fuera del camino, sino por el centro. En la prctica quedaran 5 pxeles (la mitad del grosor) por fuera del camino y 5 por dentro. En el caso que una lnea no ocupe todo el espacio de un pxel completo se crea una especie de difuminado del color de la lnea que estemos dibujando. Por ejemplo, pensemos en una lnea de 1 pxel de grosor. Como se dibuja en el centro del camino, en este caso queda medio pixel por fuera del camino y medio por dentro, por lo que en realidad se ver una lnea de dos pxeles de grosor, pero difuminada por los dos lados. En la prxima imagen se puede ver un esquema de dibujo de la lnea del canvas.

En rojo hemos representado el recorrido del camino. Luego se puede ver una lnea de 1 pxel y otra lnea de 5 pxeles. Se puede ver ambas lneas se despliegan en medio del camino. En el caso de la lnea de 1 pxel en realidad ocupa 2 pxeles, pero en ambos lados est difuminada. La lnea de 5 pxeles tiene 2 pxeles a cada lado con el color azul opaco y un pxel adicional a cada lado con el color difuminado. Tipos de extremos y propiedad lineCap La propiedad lineCap, que pertenece al contexto de un canvas, nos sirve para asignar los tipos de extremos que queremos en las lneas. Admite tres valores distintos: butt round square

Se explicara a continuacin esos tres valores, pero para que sea ms sencillo, veamos antes la siguiente imagen, con tres lneas en color verde que tienen configuradas cada uno de los posibles extremos que tenemos disponibles en el elemento canvas.

La primer lnea verde corresponde con el valor "butt", que es el predeterminado. En este caso la lnea comienza justamente en el lugar donde comienza el camino definido antes de dibujar la lnea (ver la lnea roja para entender este punto). La segunda lnea horizontal tiene el valor de lineCap "round" y hace que los extremos de la lnea estn redondeados. Cuanto ms gruesa la lnea, ms notaremos que los extremos estn redondeados, por eso hemos dibujado lneas con una espesura considerable (22 pxeles). La tercer lnea verde tiene el valor de lineCap "square", que es muy parecido al valor "butt", pero vemos que en este caso la lnea sobrepasa un poco los extremos del camino. Esto es porque en vez de empezar en el lugar donde comienza el camino, empieza un poco ms all, atendiendo a su grosura. Por ejemplo, si la lnea tena como en este caso 22 pxeles de anchura, el extremo traspasar el lmite del camino en un 50% de esa anchura. Es algo parecido a lo que ocurre con el extremo redondeado, pero sin redondear la punta de la lnea. Propiedad lineJoin, uniones entre lneas La propiedad lineJoin pertenece al contexto del canvas y sirve para definir la forma con la que se unirn las lneas que hacen de segmentos de un camino. Es decir, cuando tenemos un camino que est formado por diferentes lneas, stas se podrn unir con tres tipos de configuraciones distintas. miter round bevel

En la siguiente imagen se pueden ver los distintos tipos de uniones disponibles:

El valor "miter" de la propiedad lineJoin, representado en la imagen con color rojo, es el que se da como predeterminado e indica que las uniones tienen que formar esquinas perfectas, en el ngulo que lleve el camino. El valor "round" hace que las uniones entre segmentos del camino se realicen con esquinas redondeadas. Se puede ver en color verde en la imagen anterior. El valor de lineJoin "bevel" hace que las uniones no sean angulosas, pero tampoco redondeadas. Podemos verlo en la imagen anterior en la forma de color azul. Como se puede apreciar, hace que los ngulos producidos por dos lneas segmentos de camino tengan un biselado. Ejemplo para Dibujar con Canvas: <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Tu navegador canvas.</canvas> <script type="text/javascript">

no

soporta

la

etiqueta

var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Dibuja un rectngulo azul ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Dibuja una X en blanco ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke(); </script> </body> </html> Y el resultado al ejecutarlo es :

Explicacin: Primero, creamos el canvas y lo bautizamos con un ID, en este caso, "myCanvas". Si viramos este cdigo en un navegador que no soporta el elemento canvas de HTML5, aparecera en pantalla la frase "Tu navegador no soporta la etiqueta canvas" en vez de pintar la bandera.

Despus, aadimos un script. Recuerda, la etiqueta canvas solamente es un contenedor de grficos. Tenemos que utilizar JavaScript para dibujar y crear grficos en l. Lo primero que hago es extraer la referencia al propio canvas utilizando el ID "myCanvas" y despus obtengo el contexto que me aporta los mtodos y propiedades para dibujar y manipular los grficos en el canvas. He especificado "2d" para utilizar un contexto de dos dimensiones para dibujar en la pgina A continuacin, dibujo un rectngulo azul. Se utilizo fillStyle para indicar el color azul. Utilizo la funcin fillRect para dibujar el rectngulo indicndole el tamao y la posicin. La llamada fillRect(0, 0, 125, 75) significa: empieza en la posicin (0, 0) la esquina superior izquierda y dibuja un rectngulo de 125 pixeles de ancho y 75 pixeles de alto. Por ltimo, dibujamos la X blanca sobre el recuadro. Primero hacemos una llamada a beginPath para iniciar el proceso de dibujo de una lnea poligonal (o "path"). Le indico una anchura de 15 pixeles con lineWidth (y para esto emple el mtodo de "prueba y error", utilizando distintos valores hasta que di con la anchura buena) y le indico el color blanco dando el valor "white" a strokeStyle. Despus trazo la figura utilizando los mtodos moveTo y lineTo. Estos mtodos nos aportan un "puntero" o cursor con el que podemos dibujar. La diferencia es que moveTo mueve el puntero sin dibujar la lnea, y lineTo dibuja la lnea mientras se desplaza. Empiezo poniendo el cursor en la posicin (0,0), la esquina superior izquierda, y dibujo una lnea recta hasta (125,75), que es la esquina inferior derecha. Despus me muevo a la posicin (125,0) que es la esquina superior derecha, y dibujo una segunda lnea desde ah hasta (0,75), la esquina inferior izquierda del rectngulo. Y para terminar, se hace una llamada al mtodo stroke que es quien se encarga realmente de pintar en la pantalla las lneas.

<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estndar abierto SVG (Scalable Vector Graphics), derivado de XML.

COMPARACIN ENTRE CANVAS Y SVG

Canvas Orientado al pixel (el canvas es bsicamente un elemento de imagen con un API de dibujo) Elemento HTML individual, similar en su comportamiento a la etiqueta <img>

SVG Basado en el modelo de objetos (los elementos SVG son similares a los elementos HTML) Mltiples elementos grficos que pasan a formar parte del Modelo de Objeto de Documento (DOM) La representacin visual se genera a partir del markup y se modifica mediante CSS o por programa, mediante scripting El modelo de evento/interaccin con el usuario se basa en el objeto a nivel de elementos grficos primitivos lneas, rectngulos, rutas El markup SVG y el modelo de objeto soportan accesibilidad de forma nativa

La representacin visual se crea y modifica por programa, mediante scripting El modelo de evento/interaccin con el usuario es rudimentario exclusivamente a nivel del elemento canvas; las interacciones se deben programar manualmente a partir de las coordenadas del ratn El API no soporta la accesibilidad; deben utilizarse, adems del canvas, otras tcnicas basadas en markup

A SVG se le conoce como un modelo de grficos en modo retenido que persiste dentro de un modelo en memoria. De una manera similar a HTML, SVG genera un modelo de objeto de elementos, atributos y estilos. Cuando el elemento <svg> aparece en un documento HTML5, funciona igual que un bloque "inline" y forma parte del rbol de documento HTML. Canvas es un mapa de bits con una interfaz de programacin de aplicaciones (API) para grficos en modo inmediato para poder dibujar sobre l. El canvas sigue el modelo de "dispara y vete" que restituye los grficos directamente dentro de su mapa de bits y que no tiene consciencia de las formas que se han dibujado en el lienzo. Lo nico que permanece es el mapa de bits resultante.

Documentos vectoriales complejos de alta fidelidad


Los documentos vectoriales complejos de alta fidelidad han sido y siguen siendo el campo natural de accin para SVG. Un elevado nivel de detalle en la presentacin e impresin, tanto a nivel de objeto individual como embebido en una pgina web. La naturaleza declarativa de SVG es la base para la creacin de herramientas o para la generacin de formas tanto en el cliente como el servidor a partir de informacin almacenada en bases de datos.

Imagen1 SVG

Misma imagen1 SVG con un aumento de un 1000% Si lo que se busca es profundizar en distintos grafos de detalle, o imprimir todo el documento en un formato de un tamao concreto pero manteniendo las proporciones y la definicin, la cualidad de "escalable" de los Grficos Vectoriales Escalables (SVG por sus siglas en ingls Scalable Vector Graphics) se hace evidente.

SVG como formato de imgenes


Otro uso frecuente de SVG es el de generacin de imgenes estticas dentro de una pgina web. Las siguientes imgenes son prcticamente iguales en tamao y presentacin.

A la izquierda, un grfico SVG y a la derecha, una imagen en formato PNG Si el usuario final utiliza una pantalla de muy alta resolucin, la imagen PNG aparece pixelada, y necesitar una versin de mayor tamao de ese mismo archivo, para poder mantener la fidelidad a esta escala.

Grfico SVG ampliado a la izquierda, imagen de 4K en formato PNG aumentada a la derecha Por tanto, SVG nos puede servir como un sustituto aventajado de incluso las imgenes ms sencillas en una pgina web. Sin embargo el Canvas no sirve como sustituto. En el otro extremo del espectro, el canvas aporta velocidad a los escenarios de uso donde no se exige retener informacin de los elementos dibujados en pantalla.

Escenarios de uso de SVG con grficos, diagramas y mapas


Algunas de las familias ms conocidas de grficos y diagramas que podemos ver en la Web son: Los diagramas de flujo y organigramas interactivos Mapas interactivos y diseo de rutas ptimas Planos de construccin y distribucin en planta Esquemas de ingeniera Mapas de ubicacin de asientos en lneas areas y organizacin de eventos Grficos financieros o de cualquier otra naturaleza a partir de datos (grficos de barras, columnas, lneas, tartas, donuts, etc.)

En todos estos casos la tecnologa ms adecuada es SVG: Estos grficos se pueden generar fcilmente a partir de datos mediante transformaciones de XML a SVG las versiones estticas se pueden exportar mediante herramientas (por ejemplo Inkscape, Adobe Illustrator, Microsoft Visio y algunos programas de CAD) Exigen precisin en la interaccin con el usuario Los creadores de las webs pueden personalizar mdulos de otros fabricantes utilizando plantillas de estilos CSS Cumplen con los requisitos de accesibilidad

El mapa detallado de Alaska que se muestra aqui.

En SVG el estado de Alaska est representado como un elemento <path> con aproximadamente 162.500 elementos de datos de geometra en su atributo "d". <path id="AK" fill="#cdc3cc" d="M 777.5514,1536.1543 C 776.4904,1535.0933 776.7795,1530.0041 777.9416,1529.2859 C 781.3258,1527.1943 787.2657,1532.4522 784.8317,1535.3849 ..." /> Si empleamos el canvas, esta misma forma se puede crear mediante una serie de llamadas en Javascript: function drawAlaska() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(777.5514, 1536.1543); ctx.bezierCurveTo(776.4904, 1535.0933, 776.7795, 1530.0041, 777.9416, 1529.2859); ctx.bezierCurveTo(781.3258, 1527.1943, 787.2657, 1532.4522, 784.8317,1535.3849); // // 2,875 more path-drawing directives // ctx.bezierCurveTo(1689.8261, 12.13753, 1689.1395, 12.17333, 1685.8848, 10.52683); ctx.closePath(); ctx.fillStyle = "#cdc3cc"; ctx.fill(); } En realidad necesitamos 2.878 instrucciones de dibujo de lneas (moveTo, lineTo y bezierCurveTo) para poder dibujar este mapa de Alaska. Obviamente, se pueden dibujar versiones de baja resolucin de este mapa. Las aplicaciones de mapas basadas en SVG normalmente incluyen una experiencia de interactividad con respuesta a eventos de paso del cursor por encima, seleccin de reas, desplazamiento de unos elementos a otros mediante el tabulador y cambios de escala. Esta operaciones solo necesitan conceptos HTML de escasa complejidad cuando utilizamos SVG, como por ejemplo para procesar un evento de ratn:
<path id="AK" fill="#cdc3cc" d="M 777.5514,1536.1543 ..." /> onmousedown="window.alert('Alaska');"

O para crear un efecto de iluminacin al pasar el cursor, que se puede hacer con CSS:

path#AK:hover { fill: yellow; } Un ejemplo de este tipo de mapas interactivos se puede ver en la demo de Testdrive llamada Atlas zur Europawahl 2004 in Deutschland. Los casos de uso mas comunes en estos 2 formatos se presentan en la siguiente tabla:

Diagrama de usabilidad

SOPORTE HTML5 EN NAVEGADORES VIEJOS


Internet Explorer es la razn de la poca adopcin de HTML5. Sin embargo, hay formas de que las etiquetas semnticas de HTML5 y atributos de CSS3 funcionen en IE. Esto se logra mediante los siguientes scripts: HTML5 Enabling Script: Permite usar las etiquetas semnticas dentro de IE6, 7 y 8 como si fueran divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible agregarles diseo a ellas o cualquier elemento dentro de ellas. http://remysharp.com/2009/01/07/html5-enabling-script/ Para utilizarlo se debe incluir esta lnea en el HEAD del documento. <!--[if lt IE 9]> <script src=http://HTML5shim.googlecode.com/svn/trunk/HTML5.js> </script> <![endif]--> IE-CSS3: Usando arcanas tcnicas (DirectX y VML), este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. http://fetchak.com/ie-css3/

Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solucin o alternativa.

http://www.modernizr.com/
Una herramienta web recomendada para ver la compatibilidad de las nuevas etiquetas y funciones de HTML5 es: http://www.caniuse.com En CanIUSE.com hay una lista de todas las capacidades de HTML5, CSS3 y el nuevo JavaScript, junto a una tabla de compatibilidad. Recordando que con los scripts mencionados anteriormente la compatibilidad aumenta considerablemente.

NUEVAS CAPACIDADES DE JAVASCRIPT


Esta es una lista de las capacidades ms importantes:

Web Storage

Una cookie es la nica forma de guardar informacin del lado del cliente. Sin embargo, no pueden guardar ms de 4KB por cookie, 100KB por dominio. Al mismo tiempo, todo el contenido de las cookies va pegado a cualquier peticin HTTP que se haga al servidor. Web Storage soluciona este problema. Son variables que puede ser guardado en el disco del usuario, con soporte en todos los navegadores (incluyendo IE8), puede guardar hasta 5MB y no slo texto. Cualquier tipo de datos cabe en un Storage.

Web Workers
Web Workers permite tener mltiples .js corriendo en paralelo en una misma pgina. Haciendo tareas complejas ms veloces gracias al multithreading.

Web Sockets
Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiusuario en JavaScript como PubSubHubBub (http://code.google.com/p/pubsubhubbub/ ).

Arrastrar y soltar
El gesto de arrastrar y soltar (Drag & Drop) es posible gracias a HTML5. Puede traer trozos de datos o archivos enteros. Atributos (html):

draggable el elemento puede ser arrastrado (objeto). ondragenter ocurre cuando se arrastran a el algn objeto (contenedor). ondragover ocurre cuando se mueve el objeto sobre el (contenedor). ondragstart - ocurre cuando se mueve el elemento arrastrable (objeto). ondragend ocurre cuando se deja de arrastrar un elemento (objeto). ondrop ocurre cuando un elemento es soltado sobre el (contenedor).

Objeto dataTransfer Se accede


permitida.

effectAllowed especifica que operacin de arrastrar y soltar es setData() y getData() especifican los datos que se desean arrastrar y
soltar como elemento arrastrable. setDragImage() especifica la imagen del tem arrastrado para que se vea como se arrastra la imagen.

Modo de Uso (js): 1. A w = v ; 2. D (D , A 3. e.dataTransfer.setDragImage(e.target, 0, 0); ( )):

Geolocalizacin
El navegador har uso de muchos mtodos (GPS, Skyhook, Google Geo, IP) para indicar la latitud y longitud del usuario. Obviamente, ellos tienen que dar permiso. Funciona en cualquier computadora (de acuerdo al navegador), no slo en telfonos.

Ejemplo para el uso de la Geolocalizacin:


<!doctype html> <html lang="en"> <head> <h1>Geolocalizacin Web</h1>

</head> <body> <script type="text/javascript"> //Geolocalizcion function obtener_localizacion() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores); }else{ alert('Tu navegador no soporta la API de geolocalizacion'); } } function coordenadas(position) { var latitud = position.coords.latitude; var longitud = position.coords.longitude; alert('Tus coordenadas son: ('+latitud+','+longitud+')'); } function gestiona_errores(err) { if (err.code == 0) { alert("error desconocido"); } if (err.code == 1) { alert("El usuario no ha compartido su posicion"); } if (err.code == 2) { alert("no se puede obtener la posicion actual"); } if (err.code == 3) { alert("timeout recibiendo la posicion"); } } </script> <input type="button" value="Localizame" onclick="obtener_localizacion()"> </body> </html>

Resultado al presionar el Botn:

NUEVAS CAPACIDADES DE CSS3

@font-face
Es la capacidad de usar cualquier fuente en HTML. Sin necesidad de Flash, Cufon, SiFR u otros. Esto funciona perfecto desde Internet Explorer 6 en adelante. Visita Google WebFonts: http://www.google.com/webfonts/v2

Opacidad, transparencia, canales alpha, contraste, saturacin y brillo


Vuelve lo que sea transparente u opaco con una instruccin. Imgenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con slo CSS.

Animaciones de transicin y Transformacin


Las animaciones que antes se hacan con jQuery o JavaScript ahora pueden ser logrados slo con CSS. Con la ventaja de que las animaciones vendrn aceleradas por hardware. Mucho ms veloces, sobre todo en dispositivos mviles.

Bordes redondeados
Con una instruccin se puede hacer que cualquier caja tenga bordes redondeados. Ya no es necesario crear mltiples divs, cortar pngs y otras tcnicas antiguas.

Reflecciones, gradientes y sombras


Ya es posible crear gradientes para fondos y sombras para cajas o texto, todo en una sola lnea de cdigo y con el mismo nivel logrado con una sombra en Photoshop o Fireworks.

</GUIA>

<GLOSARIO DE TERMINOS>
eBooks - es una versin electrnica o digital de un libro. Netbooks - es una categora de computadora porttil de bajo costo y generalmente reducidas dimensiones, lo que aporta mayor movilidad y autonoma. Es utilizado principalmente para navegar por Internet y realizar funciones bsicas como procesador de texto y de hojas de clculo. Frontends - es la parte del software que interacta con el o los usuarios. Backends - es la parte que procesa la entrada desde el front-end. Sysadmin - persona responsable de la creacin y gestin de equipos locales, servidores stand-alone, los servidores miembro o controladores de dominio. Vectoriales - son imgenes digitales formadas por objetos geomtricos independientes (segmentos, polgonos, arcos, etc.), cada uno de ellos definido por distintos atributos matemticos de forma, de posicin, de color, etc. HTML - siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. CSS - es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). JavaScript - es un lenguaje de programacin que permite a los desarrolladores crear acciones en sus pginas web. No requiere de compilacin ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados de interpretar estos cdigos. Semntica - Es el conjunto de reglas que proporcionan el significado de una sentencia o instruccin de cualquier lenguaje de programacin. API - es la abreviatura de Aplication Programming Interface. Es una "llave de acceso" a funciones que nos permiten hacer uso de un servicio web provisto por un tercero, dentro de una aplicacin web propia, de manera segura. Flash - es una plataforma multimedia que se utiliza para agregar animacin , vdeo y la interactividad de las pginas web. Flash se utiliza con frecuencia para los anuncios, juegos y animaciones flash para su difusin. XML - son las siglas de Extensible Markup Language, una especificacin/lenguaje de programacin desarrollada por el W3C. XML es una versin de SGML, diseado especialmente para los documentos de la web. Permite que los diseadores creen sus propias etiquetas, permitiendo la definicin, transmisin, validacin e interpretacin de datos entre aplicaciones y entre organizaciones.

Atributo - es una especificacin que define una propiedad de un Objeto, elemento o archivo. Cookie - son pequeos archivos que algunos sitios web guardan en tu ordenador. Las cookies almacenan informacin como nombre de usuario o informacin de registro o preferencias de usuario. IE abreviatura del navegador de Microsoft Internet Explorer. ActionScript - es el lenguaje de programacin de la Plataforma Adobe Flash. Originalmente desarrollado como una forma para que los desarrolladores programen de forma ms interactiva. JS - abreviatura de JavaScript. KB abreviatura de Kilobyte, es una unidad de almacenamiento de informacin y equivale a 1024 bytes. MB abreviatura de Megabyte, es una unidad de medida de cantidad de datos informticos. Sockets - designa un concepto abstracto por el cual dos programas (posiblemente situados en computadoras distintas) pueden intercambiar cualquier flujo de datos, generalmente de manera fiable y ordenada. GPS el sistema de posicionamiento global es un sistema global de navegacin por satlite que permite determinar en todo el mundo la posicin de un objeto, una persona o un vehculo. Skyhook - es un servicio para determinar la ubicacin geogrfica buscando la direccin MAC de algn punto de acceso inalmbrico. IP - es una etiqueta numrica que identifica, de manera lgica y jerrquica, a un interfaz (elemento de comunicacin/conexin) de un dispositivo (habitualmente una computadora) dentro de una red que utilice el protocolo IP (Internet Protocol), que corresponde al nivel de red del protocolo TCP/IP. Google Geo - es el trmino en Google de las personas que trabajan en los productos de cartografa Google Earth, Google Maps, Google Mobile, y las API asociadas. Cufon - es una tcnica de reemplazo de fuentes utilizando JavaScript, de manera que puedas usar cualquier tipo de fuente en tus diseos web y no solamente las fuentes estndar como Arial, Times, etc. SiFR - es una tecnologa de cdigo abierto que hace uso de Javascript y Adobe Flash que permite el reemplazo de elementos de texto en pginas web HTML con sus equivalentes en Flash. Canales Alpha - son el almacenamiento de un valor entre 0 y 1 para cada pixel, en forma adicional a la informacin del color del pixel. Un valor de 1 indica que el pixel es completamente opaco, ya que existe un elemento geomtrico que lo est ocluyendo. Un valor de 0 significa que no hay informacin de cobertura. El valor intermedio se utilizar para preparar el

color final del pixel en el proceso de composicin por transparencia de los distintos elementos que componen la imagen. Hardware - es la parte fsica de un ordenador, de los dispositivos que se conectan a l y del resto de los componentes de una instalacin informtica. jQuery - es una biblioteca JavaScript. y h de

Framework - es una estructura conceptual y tecnolgica de soporte definido, normalmente con artefactos o mdulos de software concretos, con base a la cual otro proyecto de software puede ser ms fcilmente organizado y desarrollado. Gradiente - Medida de la inclinacin de una curva (con frecuencia una lnea recta). Se define como la relacin del cambio vertical (elevacin) con respecto al cambio horizontal (recorrido) para una lnea no vertical. En coordenadas Cartesianas rectangulares, el gradiente es la razn a la cual cambia la coordenada y con respecto a la coordenada x. Opacidad - Falta de transparencia para dejar pasar la luz que tiene un cuerpo. Saturacin - es la intensidad de un matiz especfico. Se basa en la pureza del color; un color muy saturado tiene un color vivo e intenso, mientras que un color menos saturado parece ms descolorido y gris. Sin saturacin, un color se convierte en un tono de gris. Contraste - se define como la diferencia relativa en intensidad entre un punto de una imagen y sus alrededores. MP3 - es un formato de compresin de audio digital patentado que usa un algoritmo con prdida para conseguir un menor tamao de archivo. OGG - es un formato contenedor, desarrollado por la Fundacin Xiph.org y es el formato nativo para los cdecs multimedia que tambin desarrolla Xiph.org. Codecs - es la abreviatura de codificador-decodificador. Describe una especificacin desarrollada en software, hardware o una combinacin de ambos, capaz de transformar un archivo con un flujo de datos (stream) o una seal. Plugins - es una aplicacin que se relaciona con otra para aportarle una funcin nueva y generalmente muy especifica.

</GLOSARIO DE TERMINOS>