<GUIA>

Simbiosys Manuel Salinas González Guía practica sobre la tecnología HTML5

HTML5 es entender que hoy nos conectamos desde teléfonos móviles, 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 tecnología que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos que están reventando mercados y generando tráfico e ingresos. ―HTML5 es el presente de la web y si no están pasando ya son parte de la vieja generación de desarrolladores. Eso tendría que preocuparlos.‖

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías 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, micrófonos, 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 versión 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 código. HTML5 viene a simplificar la estructura del documento web mediante etiquetas dedicadas para cada sección.

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 más 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. Todas se comportan como un <div> o un <span> pero mejorados. . <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico. <header> Hacer cosas como <div id=”header”> es tonto cuando el 99% de los proyectos web tienen una cabecera. Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla.

como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1. En el home de un blog. el post y cada uno de sus comentarios sería un <article>. cada post sería un article. <footer> Es el pie de página y todo lo que lo compone. sólo puedes usar h1 una vez por sitio.<hgroup> Muchos headers necesitan múltiples títulos. habría un section para el video. Las nuevas etiquetas no significan que ya no se use <div>. En un post del blog. otro para la zona de comentarios. En el HTML actual. Div siempre debe usarse cuando se necesite una caja con objetivos de diseño grafico o cualquier cosa que no tenga significado semántico. <aside> Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. obviamente el aside es la barra lateral de información. <article> Define zonas únicas de contenido independiente. aunque lo recomendado es usar listas <ul> / <li>. . permitiendo usar otro h1 en el sitio. puede ser el área de indicadores económicos. En un blog. uno para los datos del video. sería la zona donde están todos los posts. En un video de youtube. Puede colocar cualquier etiqueta dentro. <nav> Igual que <header>. h2 y h3 dentro del header. <nav> está diseñado para que ahí se coloque la botonera de navegación principal. <section> Define un área de contenido única dentro del sitio. Se deben usar las etiquetas semánticas de HTML5 donde sean necesarias. En un blog. En el home de un periódico.

Para incluir un video con HTML5 usas el siguiente formato: <video src=”un-video-mlw. con su titulo en h2</article> <article>Aquí va un post. </aside> <footer> Pie de pagina. Se recomienda usar el formato OGG para audio y video por estandarización en los navegadores. etc. 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. <video src=”un-video-mlw.avi” width=”320” height=”240” preload></video> . lo que hace necesario recodificar un video en múltiples codecs. posts viejos.io</h1> <h2>Este es el blog de Mejorando la web</h2> </hgroup> </header> <nav> Aquí va la botonera de navegación </nav> <section> <article>Aquí va un post. facebook. pero cada navegador soporta codecs diferentes de video.Ejemplo de blog hecho con HTML5: <!DOCTYPE html> <header> <hgroup> <h1>El blog de mlw. </footer> LAS ETIQUETAS NUEVAS IMPORTANTES DE HTML5 <video> Inserta video sin necesidad de plugins. amenazas de copyright. etc. Es muy fácil usarla. hay atributos adicionales que puede usar:  preload = empezará a precargar el video independientemente de las acciones del usuario sobre el player.avi” width=”320” height=”240”></video> Adicionalmente al ancho y alto. como cuentas de twitter.

jpg” width=”320” height=”240” controls></video> <audio> Lo mismo que video. <video src=”un-video-mlw.avi” poster=”una-imagen.mp3"></audio> <input *> Input ya existía como la etiqueta para insertar cajas de texto y botones.) en el player del video. . volumen. entre otras. password. autoplay = dará play al video en cuanto cargue la página sin acción del usuario sobre los controles.avi” width=”320” height=”240” autoplay></video>  controls = invoca a incluirse los controles (play. speech. <audio controls preload src="música. j ― ‖ se auto validan. pero también depende del navegador. en especial MP3. Puede usar múltiples formatos. pausa. <video src=”un-video-mlw. pantalla completa. Ah . ú . search.avi” width=”320” height=”240” controls></video>  poster = imagen que se muestra cuando el video no es reproducido. links. ― ‖. pero solamente sonido. <video src=”un-video-mlw. .

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 comportándose diferente en cada navegador. . se recomienda probar con en cada uno de ellos.

Por lo cual. pero con la salvedad que servirá para indicar el color del trazado. El atributo strokeStyle funciona de la misma manera que fillStyle. Cambiar el color de trazado con strokeStyle Ahora bien. ctx. con lo que conseguiremos que la próxima vez que se rellene de color se haga con ese nuevo valor asignado. Con esa línea estamos marcando que el color de trazado sea azul oscuro. la próxima vez que se haga un trazado la línea será de ese color.strokeStyle = '#000099'. de colores en RGB. Cambiar el color de relleno es tan sencillo como asignarle valores distintos. u otro tipo de camino y para ello se utilizará otro color que podemos definir con strokeStyle. Es un API de dibujo entero para Javascript. Suponiendo que tenemos el objeto contexto de un canvas en la variable ctx.<canvas> Es un área de dibujo vectorial y de bitmaps con Javascript. con la anterior línea estamos solicitando al elemento canvas que la próxima vez que se rellene el color se haga en rojo oscuro.fillStyle = '#990000'. ctx. cuando dibujamos podemos elegir hacer sólo un trazado del rectángulo. . 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.

dibujando una línea recta. lineTo() no dibuja ninguna línea. desde la posición actual del puntero de dibujo. 206)" Color RGBA (canal alpha o transparencia. 20%. por tanto es como si posáramos el lápiz sobre el lienzo en la posición actual y arrastrásemos. La verdad es que los que conozcan CSS no tendrán problema alguno para ello.      Color con nombre: "blue" Color con RGB hexadecimal. si no se dijo dónde empezar el dibujo. 25. Una vez invocada la función podremos empezar a dibujar el camino añadiendo segmentos para completarlo con las diferentes funciones de caminos. La posición actual del camino la podemos haber indicado previamente con un moveTo(). pero nos permite definir el primer punto de un camino. hasta el punto (x. 125. Recibe como parámetro los puntos x e y donde ha de moverse el puntero para dibujo. El método lineTo(). Llamar esta función es como si levantásemos el lápiz del lienzo y lo trasladásemos. como se define en HTML: "#ff6600" Color con RGB en base decimal: "rgb(100. . ya que los formatos son exactamente los mismos.5)" Con RGB y porcentaje: "rgb(100%. 0. hasta el punto donde se definió al invocar el método. o no se ha dibujado ningún otro segmento en el camino anteriormente. Función beginPath() Esta función sirve para decirle al contexto del canvas que vamos a empezar a dibujar un camino. Por ejemplo. Dicho de otra manera. Función moveTo() Sirve para mover el puntero imaginario donde comenzaremos a hacer el camino. podremos utilizar estas notaciones. Para saber cuál es el punto donde deseamos movernos (x.y) que se indique como parámetro. sin pintar. como en CSS3): "rgba(255. a otra posición. Otras notaciones para definir colores en canvas Ahora podemos aprender cómo especificar colores en los elementos canvas.y). 0)" Nosotros podremos elegir la que más nos convenga según nuestro caso. 0. Si no se indicó antes una posición de nuestro puntero de dibujo. lineTo() será equivalente a moveTo(). Función lineTo() Esta función provoca que se dibuje una línea recta. sino que se tendrá en cuenta las coordenadas enviadas como parámetro para posicionar tan solo el puntero de dibujo allí. Recordar que el eje de coordenadas del canvas es la esquina superior izquierda. o donde hayamos terminado una línea dibujada anteriormente. No tiene ningún parámetro y por si sola no hace ninguna acción visible en el canvas. Esta función no dibuja nada en si.

Como decimos. Función stroke() Con el método stroke() podemos dibujar una línea por todo el recorrido del camino que hayamos creado por medio de sus distintos segmentos. es decir. False indica que ese camino es en dirección contraria. Por su parte angulo_inicio y angulo_final son los ángulos donde comienza y acaba el radio. si durante los distintos segmentos del camino nos dejamos algún segmento abierto. El parámetro radio es el número de píxeles que tiene el arco como radio. Función closePath() Sirve para cerrar un camino. donde true significa que el trazo va desde un ángulo de inicio al de fin en el sentido contrario de las agujas del reloj. pero podríamos utilizar explícitamente el método closePath() para hacerlo nosotros (closePath() lo explicaremos en futuros artículos). puesto que sólo es una línea lo que se dibuja y no un área. El método closePath() no recibe ningún parámetro. con moveTo(). en el caso de fill() se necesitaba tener el camino cerrado. Recordemos que el camino tiene un punto inicial en el que nos situamos para comenzar el dibujo. sentido_contrario_del_reloj)    Los parámetros x. angulo_final. Pues closePath() sería como dibujar una línea recta desde el punto donde se haya quedado el camino al punto inicial donde empezamos a construirlo. volviendo a su punto inicial de dibujo. Sin embargo. y corresponden con las coordenadas del centro del arco. Sentido_contrario_del_reloj es un parámetro boleano. el camino tendría que estar cerrado. Para rellenar de color un camino. con la diferencia que fill() rellenaba de color y stroke() tan solo dibuja la silueta. automáticamente se cerrará con una línea recta hasta el primer punto del camino. donde comenzamos a dibujar. si no lo está. Están tomados como si el eje de la horizontal tuviese el ángulo cero. Luego vamos dibujando segmentos en el camino por medio de líneas que nos llevan a otros puntos del lienzo. el método fill() lo cerrará por nosotros.Función fill() Este método del contexto del canvas sirve para rellenar de color el área circunscrita por un camino. y. Es similar al método fill(). radio. por lo que se cerraba automáticamente si no lo habíamos hecho y stroke() realmente puede estar discontinuada. Metodo ARC (curvas) Estos son los parámetros que debemos enviar al método arc(): arc(x. por lo que. no se pintará nada.  . Además. angulo_inicio. si no llegamos a cerrar el camino.

como podríamos suponer. en el eje de las X y a la derecha del centro de la circunferencia.5 PI Radianes sería el equivalente a 270 grados 2 PI Radianes son los 360 grados de la circunferencia completa y correspondería con el mismo punto que los cero grados. se puede ver la siguiente imagen: En la imagen anterior tenemos varios valores de radianes:      0 Radianes serían cero grados y es el punto marcado por 0PI. 180 grados. . Para el que no se acuerde. así como la referencia sobre el eje X. que serían los cero grados. se puede hacer un paso de grados a radianes atendiendo a la siguiente fórmula: Radianes = número_PI x (grados/180 Para convertir grados en radianes podríamos utilizar la siguiente línea de código Javascript: var radians = (Math. 1 PI Radianes es media circunferencia.PI/180)*degrees Entender los radianes Para comprender los gradianes de una manera más visual. pero el ángulo de inicio y fin no se indican en grados.5 PI Radianes serían 90 grados el punto del eje de las Y abajo del centro.La verdad es que todos los parámetros son bastante sencillos de entender. sino en radianes. 1. 0.

marcado con color morado. El segundo punto. Luego.PI*2.y) sería el final de la curva.arc(50. quadraticCurveTo(pcx. Método quadraticCurveTo() para dibujar curvas cuadráticas Las curvas cuadráticas actúan como otros métodos para dibujar caminos en el canvas. Simplemente sirve para definir cómo será la curvatura. podríamos utilizar un código como este: contextoCanvas. Como se puede ver. que es el punto donde está situado el puntero de dibujo (podríamos imaginar ese punto inicial como el lugar donde está situado el lápiz antes de empezar a dibujar la curva). tendremos que definir el punto final de la misma y el punto imaginario hacia el que se curvará la línea entre esos dos puntos. Ese punto no lo definimos al hacer la llamada al método quadraticCurveTo() porque ya está implícito en el contexto del canvas.20 . El primero. 50 . El punto (x. pcy. Math. la circunferencia empieza en 0 PI (cero) y termina en 2 PI. Insisto en que el punto inicial ya está implícito en el contexto del canvas. 2. para hacer un círculo completo con centro en (50. y Este método recibe cuatro valores. 3. . el punto (pcx. El tercer punto. Utilizaríamos la siguiente llamada a un método del contexto del canvas. 50) de 20 píxeles de radio. x. con la posición dada del puntero de dibujo antes de comenzar la curva cuadrática. dibujado en verde. para expresar una curva cuadrática. pcy) es el lugar "imaginario" al que tendrería la curvatura de la línea. y. que corresponden con dos puntos del lienzo. Recordemos que al hacer un camino en el canvas partimos de un punto inicial.Así pues. false). marcado con color rojo. Ese punto decimos que es imaginario porque no aparece en la curva. En cualquier caso se puede cambiar con una llamada a moveTo() como hemos visto en artículos anteriores. es la posición del puntero de dibujo al iniciar la curva cuadrática. Una manera sencilla de entender este método sería ver la siguiente imagen: En el anterior gráfico tenemos tres puntos: 1. pcy. Se define con los parámetros pcx. es el final de la curva. 0. es la tendencia de la curva cuadrática. Así que. definido por los parámetros x.

Método para dibujar curvas Bezier En el dibujo con el elemento Canvas se han implementado las curvas Bezier a partir del siguiente método del contexto del canvas. Nosotros podríamos cambiar ese puntero de dibujo. Este punto no se tiene que definir. tenemos el punto final de la curva. pero en la imagen se utilizan hasta 4 puntos para definir la curva Bezier. pc1y. y) En la siguiente imagen se puede ver un diagrama sobre los puntos que se utilizan para definir una curva Bezier. pc2y. con una llamada al método moveTo(). pc2y. en el lugar donde estaba el puntero de dibujo al llamar al método bezierCurveTo(). pues es el lugar donde está el puntero de dibujo. marcado de color rojo. es la tendencia de la primera parte de la curva. que se indica con los parámetros x. x. el método bezierCurveTo() tiene 6 parámetros que corresponden con las coordenadas de 3 puntos. El segundo punto. pues el punto de incicio de la curva ya estaba en el contexto del canvas. 2. pc1y. es el punto inicial de la curva. Como podemos ver. marcado con color morado. El primer punto. que se ha marcado de color verde. atendiendo a la anterior imagen. es la tendencia de la segunda parte de la curva. para cambiar el primer punto de la curva. a. 3. pues ya está implícito en el contexto del canvas. pc2x. Nota: Al dibujar cualquier segmento de un camino tenemos definido siempre de antemano el punto inicial de ese segmento del camino. El tercero. que se indica con los parámetros pc1x. 4. bezierCurveTo(pc1x. . Finalmente. estos serían los puntos necesarios para componer la curva Bezier: 1. Así que. que se indica con los parámetros pc2x.y. marcado en color gris.

jpg'. que afortunadamente funciona igual en todos los navegadores. 10). img. El navegador al especificar el archivo de la imagen. si inmediatamente a indicar el archivo. En la secuencia de instrucciones.jpg'. Para asegurarnos de este punto. siendo (x. pero de momento vamos a aprender a generarlo dinámicamente con una instrucción Javascript. Esto hace que en el objeto Image se cargue la imagen que está en el archivo 'logo-grande.src = 'logo-grande.y) el punto donde se colocará la esquina superior izquierda de la imagen. Por tanto. 10. Con esto tenemos una variable llamada "img" que tiene un objeto imagen dentro. Pero atención. actualizando el atributo src. dará un problema. Ese objeto imagen en estos momentos está sin ningún atributo. con la siguiente sintaxis: drawImage(objeto_imagen. 10). sólo podemos dibujar la imagen cuando estamos seguros que el navegador ya la ha descargado. intentamos dibujar la imagen. Podríamos decir que está sin inicializar. . tal como lo tenemos ahora: var img = new Image().src = 'logo-grande. podemos usar el evento onload de la imagen. La tarea de inicialización fundamental sería asignarle una ruta a un archivo gráfico. x. Dicho de otra manera. Objeto Javascript imagen El objeto imagen es uno de los objetos básicos de Javascript.drawImage(img. y) Enviamos tres parámetros. Los dos siguientes son las coordenadas donde situar la imagen.jpg' y como no hemos especificado ningún directorio en la ruta. Sería algo parecido a esto: ctx. para llamar a drawImage() sólo cuando la imagen ha terminado de cargarse. 10. podríamos pintarlo en un canvas por medio de la función drawImage().drawImage(img. Una vez tenemos el objeto imagen. 
img. que pertenece al objeto contexto del canvas. porque este código tiene un detalle: la imagen no se dibujará en el canvas a no ser que esté previamente cargada en el navegador.Método drawImage() para pintar una imagen en el canvas Para dibujar una imagen en el lienzo se utiliza el Método drawImage(). se supone que ese archivo está en la misma carpeta que el archivo HTML donde esté ese código Javascript. tiene que descargarlo y eso lleva un tiempo. var img = new Image().
 ctx. Este objeto de imagen lo podemos obtener de varias maneras. el primero es el objeto Javascript de la imagen que se desea incluir en el lienzo.

10.onload = function() { 
 ctx. //un objeto Image
 var imagen = new Image(). pero como si esos elementos los adquiriésemos remotamente. 300. enviando como parámetro el identificador de la etiqueta IMG de la imagen deseada.
 imagen. Y por tanto no vamos a repetir las explicaciones. 10)..drawImage(img. .getElementById("im1").src = 'canvas-html5.. 330.Traerse una imagen que hay en la página: por medio del método getElementById(). como si fuera una imagen. 3.
 //luego la dibujo en el canvas
 ctx.images[1].png".drawImage(img.
 } 4.Creando nuestro objeto Image: Que es la forma con la que trabajamos en el artículo anterior.drawImage(imagen. en una etiqueta IMG. //consigo una imagen desde el array de imágenes
 ctx.drawImage(img. 2. //a través de un "data: url"
 var img = new Image(). 
img.. 200). 
} 1. 10). 195).
 img. Al array accedemos con el índice de la imagen según orden de aparición en el código HTML.var img = new Image(). 10.R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+ hkcuO4lmNVindo7qyrIXiGBYAOw=='.A través del Array de images: También de una imagen que haya en la página.onload = function() {
 ctx. 
ctx.Especificar la imagen en formato data:url: que es una cadena de caracteres en formato Base64 que permite especificar elementos como imágenes a partir de código.src = 'data:image/gif.drawImage(document. 5.png'.Acceder a el diseño dibujado en otro canvas: para mostrar en un canvas el contenido de otro. 20).com/imagen.src = "http://www.
 imagen. 122. 
img.base64. //Creo un objeto Image con una imagen de la pagina 
 var img = document.google...

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

El grosor de la línea será el número de píxeles que se coloque en la propiedad lineWidth ctx. El primero es la imagen que deseamos utilizar como patrón y el segundo es el tipo de repetición que queremos implementar. Una vez que tenemos definido un patrón todavía tenemos la mitad de trabajo por delante para trabajar.ctx. Con esta línea rellenaríamos de color todo el área disponible en el elemento canvas.width. que se rellenará con el patrón definido anteriormente.fillRect(0. un rectángulo que va desde la coordenada (0.0) hasta toda la anchura y la altura del canvas. var miPatron = ctx. como fillRect(). Es tan sencillo como utilizar un método que nos permita aplicar color. es decir. "repeat-x" (para repeticiones en la horizontal).canvas.ctx. Con la línea anterior tendríamos creada una variable miPatron que contiene un patrón de imagen listo para ser utilizado. Esta propiedad admite un valor numérico que puede ser entero o incluso un número real. Ese patrón simplemente estará declarado como objeto en Javascript y listo para usar en un canvas. que pertenece al contexto del canvas. en vez de rellenar con un color se rellenará con un mosaico de imagen. Como previamente se aplicó el patrón a la propiedad fillStyle.0. Rellenar de color un área Ahora podemos rellenar de color cualquier área. ctx.height). Distintos grosores de línea Todo lo que vamos a aprender de nuevo en este artículo es la propiedad lineWidth. con decimales. pero para ello debemos configurar el estilo de relleno y luego rellenar de color un área. Este método recibe un par de parámetros. 'repeat').canvas. "repeat-y" (para repetir la imagen en la vertical) y "no-repeat". que no producirá ninguna repetición).Definir un patrón Para definir un patrón utilizamos el método createPattern() que pertenece al contexto del canvas.
 //Esto configura una línea con dos píxeles de anchura . La imagen que deseamos utilizar la podemos sacar de un objeto Image de Javascript y el tipo de repetición 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.createPattern(objeto_imagen.lineWidth = 2.

por lo que en realidad se verá una línea de dos píxeles de grosor. Es decir. . imaginemos un camino circular. Como se dibuja en el centro del camino. sino por el centro. En rojo hemos representado el recorrido del camino. Por ejemplo. pensemos en una línea de 1 píxel de grosor. con tres líneas en color verde que tienen configuradas cada uno de los posibles extremos que tenemos disponibles en el elemento canvas. Admite tres valores distintos:    butt round square Se explicara a continuación esos tres valores. en este caso queda medio pixel por fuera del camino y medio por dentro. pero en ambos lados está difuminada. pero difuminada por los dos lados. nos sirve para asignar los tipos de extremos que queremos en las líneas. Se puede ver ambas líneas se despliegan en medio del camino. En el caso de la línea de 1 píxel en realidad ocupa 2 píxeles.La grosura de una línea se coloca con respecto al centro del camino. La línea de 5 píxeles tiene 2 píxeles a cada lado con el color azul opaco y un píxel adicional a cada lado con el color difuminado. pero para que sea más sencillo. la línea que se colocaría no estaría ni toda por dentro ni toda por fuera del camino. por explicarlo con un ejemplo para que se pueda entender bien. veamos antes la siguiente imagen. Tipos de extremos y propiedad lineCap La propiedad lineCap. que pertenece al contexto de un canvas. Luego se puede ver una línea de 1 píxel y otra línea de 5 píxeles. En el caso que una línea no ocupe todo el espacio de un píxel completo se crea una especie de difuminado del color de la línea que estemos dibujando. Si contorneamos ese camino con una línea de 10 píxeles. En la práctica quedarían 5 píxeles (la mitad del grosor) por fuera del camino y 5 por dentro. En la próxima imagen se puede ver un esquema de dibujo de la línea del canvas.

La tercer línea verde tiene el valor de lineCap "square". En este caso la línea comienza justamente en el lugar donde comienza el camino definido antes de dibujar la línea (ver la línea roja para entender este punto). atendiendo a su grosura. empieza un poco más allá. pero sin redondear la punta de la línea. Propiedad lineJoin. cuando tenemos un camino que está formado por diferentes líneas. uniones entre líneas La propiedad lineJoin pertenece al contexto del canvas y sirve para definir la forma con la que se unirán las líneas que hacen de segmentos de un camino. el extremo traspasará el límite del camino en un 50% de esa anchura. La segunda línea horizontal tiene el valor de lineCap "round" y hace que los extremos de la línea estén redondeados. más notaremos que los extremos están redondeados.    miter round bevel En la siguiente imagen se pueden ver los distintos tipos de uniones disponibles: . Es algo parecido a lo que ocurre con el extremo redondeado. Cuanto más gruesa la línea. por eso hemos dibujado líneas con una espesura considerable (22 píxeles). Es decir. éstas se podrán unir con tres tipos de configuraciones distintas.La primer línea verde corresponde con el valor "butt". pero vemos que en este caso la línea sobrepasa un poco los extremos del camino. que es el predeterminado. Por ejemplo. Esto es porque en vez de empezar en el lugar donde comienza el camino. si la línea tenía como en este caso 22 píxeles de anchura. que es muy parecido al valor "butt".

Si viéramos este código en un navegador que no soporta el elemento canvas de HTML5.moveTo(125. 0).lineWidth = "15". pero tampoco redondeadas. en el ángulo que lleve el camino. El valor "round" hace que las uniones entre segmentos del camino se realicen con esquinas redondeadas. "myCanvas". ctx. Ejemplo para Dibujar con Canvas: <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Tu navegador canvas. ctx. es el que se da como predeterminado e indica que las uniones tienen que formar esquinas perfectas.fillRect(0.lineTo(125. ctx. 75).strokeStyle = "white".getContext('2d'). // Dibuja un rectángulo azul ctx. ctx. hace que los ángulos producidos por dos líneas segmentos de camino tengan un biselado.lineTo(0. Podemos verlo en la imagen anterior en la forma de color azul. 125.stroke(). Se puede ver en color verde en la imagen anterior.moveTo(0.</canvas> <script type="text/javascript"> no soporta la etiqueta var canvas = document. en este caso. 0. var ctx = canvas.El valor "miter" de la propiedad lineJoin. ctx.beginPath(). representado en la imagen con color rojo. </script> </body> </html> Y el resultado al ejecutarlo es : Explicación: Primero. 75). aparecería en pantalla la frase "Tu navegador no soporta la etiqueta canvas" en vez de pintar la bandera.getElementById('myCanvas'). Como se puede apreciar. creamos el canvas y lo bautizamos con un ID. ctx. ctx. 75).fillStyle = '#0065BD'. // Dibuja una X en blanco ctx. El valor de lineJoin "bevel" hace que las uniones no sean angulosas. . ctx. 0).

Por último. 125. Recuerda. para insertar dibujos y animaciones vectoriales al estilo de Flash. Y para terminar.75).0). la etiqueta canvas solamente es un contenedor de gráficos. Todo basado en el estándar abierto SVG (Scalable Vector Graphics). igual que <img>. derivado de XML. La diferencia es que moveTo mueve el puntero sin dibujar la línea. y dibujo una línea recta hasta (125. Lo primero que hago es extraer la referencia al propio canvas utilizando el ID "myCanvas" y después obtengo el contexto que me aporta los métodos y propiedades para dibujar y manipular los gráficos en el canvas. la esquina inferior izquierda del rectángulo. Tenemos que utilizar JavaScript para dibujar y crear gráficos en él. la esquina superior izquierda. Le indico una anchura de 15 pixeles con lineWidth (y para esto empleé el método de "prueba y error". y dibujo una segunda línea desde ahí hasta (0. dibujamos la X blanca sobre el recuadro. 0) — la esquina superior izquierda — y dibuja un rectángulo de 125 pixeles de ancho y 75 pixeles de alto. 75) significa: empieza en la posición (0. Después me muevo a la posición (125. Después trazo la figura utilizando los métodos moveTo y lineTo. Utilizo la función fillRect para dibujar el rectángulo indicándole el tamaño y la posición. utilizando distintos valores hasta que di con la anchura buena) y le indico el color blanco dando el valor "white" a strokeStyle. COMPARACIÓN ENTRE CANVAS Y SVG . Se utilizo fillStyle para indicar el color azul. Empiezo poniendo el cursor en la posición (0. Primero hacemos una llamada a beginPath para iniciar el proceso de dibujo de una línea poligonal (o "path"). La llamada fillRect(0. se hace una llamada al método stroke que es quien se encarga realmente de pintar en la pantalla las líneas.0) que es la esquina superior derecha. Estos métodos nos aportan un "puntero" o cursor con el que podemos dibujar. 0. añadimos un script. y lineTo dibuja la línea mientras se desplaza.75).Después. <svg> Una etiqueta. que es la esquina inferior derecha. dibujo un rectángulo azul. He especificado "2d" para utilizar un contexto de dos dimensiones para dibujar en la página A continuación.

rutas El markup SVG y el modelo de objeto soportan accesibilidad de forma nativa La representación visual se crea y modifica por programa. funciona igual que un bloque "inline" y forma parte del árbol de documento HTML. las interacciones se deben programar manualmente a partir de las coordenadas del ratón El API no soporta la accesibilidad. deben utilizarse. similar en su comportamiento a la etiqueta <img> SVG Basado en el modelo de objetos (los elementos SVG son similares a los elementos HTML) Múltiples elementos gráficos que pasan a formar parte del Modelo de Objeto de Documento (DOM) La representación visual se genera a partir del markup y se modifica mediante CSS o por programa. además del canvas. atributos y estilos. Documentos vectoriales complejos de alta fidelidad Los documentos vectoriales complejos de alta fidelidad han sido y siguen siendo el campo natural de acción para SVG. De una manera similar a HTML. Cuando el elemento <svg> aparece en un documento HTML5. El canvas sigue el modelo de "dispara y vete" que restituye los gráficos directamente dentro de su mapa de bits y que no tiene consciencia de las formas que se han dibujado en el lienzo.Canvas Orientado al pixel (el canvas es básicamente un elemento de imagen con un API de dibujo) Elemento HTML individual. Canvas es un mapa de bits con una interfaz de programación de aplicaciones (API) para gráficos en modo inmediato para poder dibujar sobre él. otras técnicas basadas en markup A SVG se le conoce como un modelo de gráficos en modo retenido que persiste dentro de un modelo en memoria. Lo único que permanece es el mapa de bits resultante. Un elevado nivel de detalle en la presentación e impresión. La naturaleza declarativa de SVG es la base para la creación de herramientas o para la generación de formas tanto en el cliente como el servidor a partir de información almacenada en bases de datos. rectángulos. mediante scripting El modelo de evento/interacción con el usuario se basa en el objeto a nivel de elementos gráficos primitivos –líneas. tanto a nivel de objeto individual como embebido en una página web. SVG genera un modelo de objeto de elementos. mediante scripting El modelo de evento/interacción con el usuario es rudimentario –exclusivamente a nivel del elemento canvas. .

para poder mantener la fidelidad a esta escala. un gráfico SVG y a la derecha. A la izquierda. Las siguientes imágenes son prácticamente iguales en tamaño y presentación.Imagen1 SVG Misma imagen1 SVG con un aumento de un 1000% Si lo que se busca es profundizar en distintos grafos de detalle. la cualidad de "escalable" de los Gráficos Vectoriales Escalables (SVG por sus siglas en inglés Scalable Vector Graphics) se hace evidente. o imprimir todo el documento en un formato de un tamaño concreto pero manteniendo las proporciones y la definición. . la imagen PNG aparece pixelada. y necesitará una versión de mayor tamaño de ese mismo archivo. una imagen en formato PNG Si el usuario final utiliza una pantalla de muy alta resolución. SVG como formato de imágenes Otro uso frecuente de SVG es el de generación de imágenes estáticas dentro de una página web.

etc. SVG nos puede servir como un sustituto aventajado de incluso las imágenes más sencillas en una página web. líneas.) En todos estos casos la tecnología más adecuada es SVG:      Estos gráficos se pueden generar fácilmente a partir de datos mediante transformaciones de XML a SVG las versiones estáticas se pueden exportar mediante herramientas (por ejemplo Inkscape. columnas. Sin embargo el Canvas no sirve como sustituto. Escenarios de uso de SVG con gráficos. donuts. Adobe Illustrator. diagramas y mapas Algunas de las familias más conocidas de gráficos y diagramas que podemos ver en la Web son:       Los diagramas de flujo y organigramas interactivos Mapas interactivos y diseño de rutas óptimas Planos de construcción y distribución en planta Esquemas de ingeniería Mapas de ubicación de asientos en líneas aéreas y organización de eventos Gráficos financieros o de cualquier otra naturaleza a partir de datos (gráficos de barras. En el otro extremo del espectro. tartas. el canvas aporta velocidad a los escenarios de uso donde no se exige retener información de los elementos dibujados en pantalla. Microsoft Visio y algunos programas de CAD) Exigen precisión en la interacción con el usuario Los creadores de las webs pueden personalizar módulos de otros fabricantes utilizando plantillas de estilos CSS Cumplen con los requisitos de accesibilidad . imagen de 4K en formato PNG aumentada a la derecha Por tanto.Gráfico SVG ampliado a la izquierda.

1943. ctx.17333.5514. Obviamente. como por ejemplo para procesar un evento de ratón: <path id="AK" fill="#cdc3cc" d="M 777.2859). ctx.1536." /> onmousedown="window. 784.moveTo(777.. 1535.1532. 1527.1543). que se puede hacer con CSS: .getElementById("myCanvas").4522 784.1543 .8848.bezierCurveTo(776.3849 .0041.closePath(). ctx. <path id="AK" fill="#cdc3cc" d="M 777. se pueden dibujar versiones de baja resolución de este mapa. Esta operaciones solo necesitan conceptos HTML de escasa complejidad cuando utilizamos SVG. 776.1536.1543 C 776.bezierCurveTo(781." /> Si empleamos el canvas.2657.0041 777.1535. 777.1527. 12. 10. lineTo y bezierCurveTo) para poder dibujar este mapa de Alaska. desplazamiento de unos elementos a otros mediante el tabulador y cambios de escala.0933 776.fillStyle = "#cdc3cc".500 elementos de datos de geometría en su atributo "d".El mapa detallado de Alaska que se muestra aqui. ctx.8261.8317. 1529.3258.4904.getContext("2d").fill(). 1689.beginPath().8317.52683).0933. esta misma forma se puede crear mediante una serie de llamadas en Javascript: function drawAlaska() { var canvas = document. ctx. Las aplicaciones de mapas basadas en SVG normalmente incluyen una experiencia de interactividad con respuesta a eventos de paso del cursor por encima.9416. 1685.7795.3849).1535.5514.2657..3258.4904.5514.1535.. ctx.9416.875 more path-drawing directives // ctx. 1530." O para crear un efecto de iluminación al pasar el cursor.1943 787.878 instrucciones de dibujo de líneas (moveTo.1395. 12. 1536. // // 2.bezierCurveTo(1689.2859 C 781. } En realidad necesitamos 2.4522. selección de áreas. ctx.1529.13753. En SVG el estado de Alaska está representado como un elemento <path> con aproximadamente 162.7795. 1532. var ctx = canvas..1530. 787.alert('Alaska').

com/ie-css3/ . las etiquetas son ignoradas en IE y es imposible agregarles diseño a ellas o cualquier elemento dentro de ellas.path#AK:hover { fill: yellow. Esto se logra mediante los siguientes scripts:  HTML5 Enabling Script: Permite usar las etiquetas semánticas dentro de IE6. hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE. } Un ejemplo de este tipo de mapas interactivos se puede ver en la demo de Testdrive llamada Atlas zur Europawahl 2004 in Deutschland.com/svn/trunk/HTML5. Sin este script. Sin embargo. 7 y 8.googlecode. 7 y 8 como si fueran divs normales.com/2009/01/07/html5-enabling-script/ Para utilizarlo se debe incluir esta línea en el HEAD del documento. este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6. http://remysharp. estilizables por CSS. 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 razón de la poca adopción de HTML5.js”> </script> <![endif]-->  IE-CSS3: Usando arcanas técnicas (DirectX y VML). <!--[if lt IE 9]> <script src=”http://HTML5shim. http://fetchak.

no pueden guardar más de 4KB por cookie. Web Storage soluciona este problema. Haciendo tareas complejas más veloces gracias al multithreading.caniuse. Recordando que con los scripts mencionados anteriormente la compatibilidad aumenta considerablemente. .js corriendo en paralelo en una misma página. NUEVAS CAPACIDADES DE JAVASCRIPT Esta es una lista de las capacidades más importantes: Web Storage Una cookie es la única forma de guardar información del lado del cliente. junto a una tabla de compatibilidad.com En CanIUSE. Al mismo tiempo. CSS3 y el nuevo JavaScript. HTML5 y CSS3. 100KB por dominio.com hay una lista de todas las capacidades de HTML5. Modernizr: Cuando todo falla. http://www. Sin embargo. todo el contenido de las cookies va pegado a cualquier petición HTTP que se haga al servidor. con soporte en todos los navegadores (incluyendo IE8).modernizr. Cualquier tipo de datos cabe en un Storage. puede guardar hasta 5MB y no sólo texto. tu mismo puedes codear la solución o alternativa. Son variables que puede ser guardado en el disco del usuario. Web Workers Web Workers permite tener múltiples .com/ Una herramienta web recomendada para ver la compatibilidad de las nuevas etiquetas y funciones de HTML5 es: http://www. con Modernizr puedes detectar si el navegador tiene soporte para multiples capacidades de Javascript. Si no.

A w =‗ v ‘. como juegos. Objeto dataTransfer Se accede   permitida. Si el navegador no tiene soporte de Web Sockets. Google Geo. Puede traer trozos de datos o archivos enteros. chats.Web Sockets Igual que XMLSockets en Actionscript. 0. ellos tienen que dar permiso. ondragend – ocurre cuando se deja de arrastrar un elemento (objeto). 2. ondragstart . Web Sockets permite hacer aplicaciones multiusuario en tiempo real.com/p/pubsubhubbub/ ). 0). no sólo en teléfonos. D (―D ‖.google. Skyhook. e.  Modo de Uso (js): 1. ondrop – ocurre cuando un elemento es soltado sobre el (contenedor). Funciona en cualquier computadora (de acuerdo al navegador).ocurre cuando se mueve el elemento arrastrable (objeto). notificaciones.dataTransfer.target. (‗ ‘)): Geolocalización El navegador hará uso de muchos métodos (GPS. Atributos (html):       draggable – el elemento puede ser arrastrado (objeto). ondragenter – ocurre cuando se arrastran a el algún objeto (contenedor). A 3. Arrastrar y soltar El gesto de arrastrar y soltar (Drag & Drop) es posible gracias a HTML5. Ejemplo para el uso de la Geolocalización: <!doctype html> <html lang="en"> <head> <h1>Geolocalización Web</h1> . Obviamente. es posible usar implementaciones multiusuario en JavaScript como PubSubHubBub (http://code. IP) para indicar la latitud y longitud del usuario. etc. ondragover – ocurre cuando se mueve el objeto sobre el (contenedor). j ― v ‖ S : effectAllowed – especifica que operación de arrastrar y soltar es setData() y getData() – especifican los datos que se desean arrastrar y soltar como elemento arrastrable.setDragImage(e. setDragImage() – especifica la imagen del ítem arrastrado para que se vea como se arrastra la imagen.

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

Animaciones de transición y Transformación Las animaciones que antes se hacían con jQuery o JavaScript ahora pueden ser logrados sólo con CSS.NUEVAS CAPACIDADES DE CSS3 @font-face Es la capacidad de usar cualquier fuente en HTML. cortar png‘s y otras técnicas antiguas. Mucho más veloces.com/webfonts/v2 Opacidad. Imágenes. bordes. saturación y brillo Vuelve lo que sea transparente u opaco con una instrucción.google. transparencia. Bordes redondeados Con una instrucción se puede hacer que cualquier caja tenga bordes redondeados. lo puedes hacer con sólo CSS. canales alpha. Reflecciones. contraste. gradientes y sombras Ya es posible crear gradientes para fondos y sombras para cajas o texto. O si quieres convertir una foto en blanco y negro o sepia. SiFR u otros. Cufon. lo que sea. Visita Google WebFonts: http://www. sombras. Sin necesidad de Flash. Esto funciona perfecto desde Internet Explorer 6 en adelante. sobre todo en dispositivos móviles. todo en una sola línea de código y con el mismo nivel logrado con una sombra en Photoshop o Fireworks. Ya no es necesario crear múltiples divs. textos. Con la ventaja de que las animaciones vendrán aceleradas por hardware. </GUIA> .

es una plataforma multimedia que se utiliza para agregar animación . de manera segura.<GLOSARIO DE TERMINOS> eBooks . Sysadmin . Frontends .es la parte que procesa la entrada desde el front-end. transmisión. XML .son las siglas de Extensible Markup Language. Netbooks . HTML .son imágenes digitales formadas por objetos geométricos independientes (segmentos. JavaScript . de color. etc. permitiendo la definición. los servidores miembro o controladores de dominio.siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»). una especificación/lenguaje de programación desarrollada por el W3C. XML es una versión de SGML. Permite que los diseñadores creen sus propias etiquetas. arcos. es el lenguaje de marcado predominante para la elaboración de páginas web. Es una "llave de acceso" a funciones que nos permiten hacer uso de un servicio web provisto por un tercero.es un lenguaje de programación que permite a los desarrolladores crear acciones en sus páginas web. validación e interpretación de datos entre aplicaciones y entre organizaciones. . Flash se utiliza con frecuencia para los anuncios.es una versión electrónica o digital de un libro. Vectoriales . vídeo y la interactividad de las páginas web. dentro de una aplicación web propia. juegos y animaciones flash para su difusión. polígonos.es una categoría de computadora portátil de bajo costo y generalmente reducidas dimensiones.es la parte del software que interactúa con el o los usuarios.es la abreviatura de Aplication Programming Interface. etc.). cada uno de ellos definido por distintos atributos matemáticos de forma.es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). los navegadores son los encargados de interpretar estos códigos.Es el conjunto de reglas que proporcionan el significado de una sentencia o instrucción de cualquier lenguaje de programación. API .persona responsable de la creación y gestión de equipos locales. No requiere de compilación ya que el lenguaje funciona del lado del cliente. de posición. CSS . servidores stand-alone. Semántica . Flash . Backends . diseñado especialmente para los documentos de la web. Es utilizado principalmente para navegar por Internet y realizar funciones básicas como procesador de texto y de hojas de cálculo. lo que aporta mayor movilidad y autonomía.

Skyhook . que corresponde al nivel de red del protocolo TCP/IP.es una tecnología de código abierto que hace uso de Javascript y Adobe Flash que permite el reemplazo de elementos de texto en páginas web HTML con sus equivalentes en Flash. de manera lógica y jerárquica. Originalmente desarrollado como una forma para que los desarrolladores programen de forma más interactiva. Google Mobile. Un valor de 0 significa que no hay información de cobertura. elemento o archivo. y las API asociadas.son pequeños archivos que algunos sitios web guardan en tu ordenador. Un valor de 1 indica que el pixel es completamente opaco.es una especificación que define una propiedad de un Objeto.son el almacenamiento de un valor entre 0 y 1 para cada pixel.abreviatura de JavaScript.Atributo . una persona o un vehículo. de manera que puedas usar cualquier tipo de fuente en tus diseños web y no solamente las fuentes estándar como Arial. Sockets . SiFR .es el término en Google de las personas que trabajan en los productos de cartografía Google Earth. KB – abreviatura de Kilobyte. etc. Google Geo . Cookie . IE – abreviatura del navegador de Microsoft Internet Explorer. en forma adicional a la información del color del pixel. Times.es un servicio para determinar la ubicación geográfica buscando la dirección MAC de algún punto de acceso inalámbrico. es una unidad de almacenamiento de información y equivale a 1024 bytes. ya que existe un elemento geométrico que lo está ocluyendo.es una etiqueta numérica que identifica. es una unidad de medida de cantidad de datos informáticos. El valor intermedio se utilizará para preparar el .designa un concepto abstracto por el cual dos programas (posiblemente situados en computadoras distintas) pueden intercambiar cualquier flujo de datos. JS . ActionScript . Las cookies almacenan información como nombre de usuario o información de registro o preferencias de usuario. generalmente de manera fiable y ordenada. Canales Alpha . a un interfaz (elemento de comunicación/conexión) de un dispositivo (habitualmente una computadora) dentro de una red que utilice el protocolo IP (Internet Protocol). Google Maps. MB – abreviatura de Megabyte. IP . Cufon .es una técnica de reemplazo de fuentes utilizando JavaScript. GPS – el sistema de posicionamiento global es un sistema global de navegación por satélite que permite determinar en todo el mundo la posición de un objeto.es el lenguaje de programación de la Plataforma Adobe Flash.

hardware o una combinación de ambos.es una aplicación que se relaciona con otra para aportarle una función nueva y generalmente muy especifica. el gradiente es la razón a la cual cambia la coordenada y con respecto a la coordenada x.Falta de transparencia para dejar pasar la luz que tiene un cuerpo. Se basa en la pureza del color. Describe una especificación desarrollada en software. capaz de transformar un archivo con un flujo de datos (stream) o una señal. un color se convierte en un tono de gris. MP3 . En coordenadas Cartesianas rectangulares.es la intensidad de un matiz específico. Sin saturación.es la parte física de un ordenador. normalmente con artefactos o módulos de software concretos. Codecs .es una biblioteca JavaScript.org y es el formato nativo para los códecs multimedia que también desarrolla Xiph.color final del pixel en el proceso de composición por transparencia de los distintos elementos que componen la imagen. desarrollado por la Fundación Xiph.es un formato de compresión de audio digital patentado que usa un algoritmo con pérdida para conseguir un menor tamaño de archivo. Saturación . Gradiente .se define como la diferencia relativa en intensidad entre un punto de una imagen y sus alrededores. OGG . con base a la cual otro proyecto de software puede ser más fácilmente organizado y desarrollado. de los dispositivos que se conectan a él y del resto de los componentes de una instalación informática.Medida de la inclinación de una curva (con frecuencia una línea recta). Contraste .org. un color muy saturado tiene un color vivo e intenso.es un formato contenedor. mientras que un color menos saturado parece más descolorido y gris. jQuery . . ― y h ‖ de Framework . Se define como la relación del cambio vertical (elevación) con respecto al cambio horizontal (recorrido) para una línea no vertical. Plugins .es la abreviatura de codificador-decodificador. Hardware .es una estructura conceptual y tecnológica de soporte definido. Opacidad .

</GLOSARIO DE TERMINOS> .

Sign up to vote on this title
UsefulNot useful