domingo, 15 de agosto de 2010
viernes, 13 de agosto de 2010
web 2.0 video youtube
Web 1.0
Tipo de Web: estática.
Período: 1994-1997
Tecnología asociada: HTML, GIF.
Características: las páginas web son documentos estáticos que jamas se actualizaban
Web 2.0
Tipo de Web: colaborativa
Período: 2003 – hoy
Tecnología asociada: Ajax, DHTML, XML, Soap
Características: los usuarios se convierten en contribuidores. Publican las informaciones y realizan cambios en los datos.
Formatos de Imágenes para la web (JPG, PNG, GIF, JP2).
El formato JPEG
Uno de los formatos más populares para guardar nuestras imágenes digitales, conozcamos un poco más acerca de su origen.
Iniciemos por comprender de dónde deriva el nombre JPEG, este formato fue creado por Joint Phorographic Experts Group, las siglas de este grupo son las que dan el nombre del formato JPEG o también denominado JPG.
Características del formato
Este formato se caracteriza principalmente por ser abierto, los derechos de autor son libres y puede ser usado o implementado en un programa, sin necesidad de pagar por derechos de autor.
El formato JPEG o JPG nace como una respuesta a las limitaciones de otros formatos, es utilizado como extensión predeterminada por las cámaras digitales debido a que permite comprimirlas sin necesidad de bajar su calidad en la resolución y nos libera el espacio.
Cabe mencionar, que el formato JPEG es un formato de compresión de perdida, es decir que cuando guardamos una fotografía con esta extensión, la información que contiene la imagen reduce, pero este detalle no es susceptible al ojo humano, porque la calidad de las imágenes sigue siendo de alta calidad.
Niveles de compresión
Antes de que surgiera la necesidad del diseño, desarrollo, programación, usabilidadweb, los diseñadores gráficos se empeñaban en que mientras más grande fuera el peso de la imagen por ejemplo 300 KB mejor sería la resolución e impresión de la imagen.
Luego, surge la necesidad de realizar una transición del diseño impreso al diseño en la web, y una de las sorpresas es que esas imágenes gigantescas que se imprimían a todo color, en la web necesitaban ser comprimidas y reducidas de peso, para que las mismas cargaran fácilmente.
Es en esta acción de compresión, donde el formato JPEG juega un papel importante, porque permite graduar el nivel de compresión de cada una de las imágenes de este modo podemos decidir entre una imagen de baja calidad, que implica un menor tamaño en el archivo o una imagen con alta calidad, que representa un mayor peso.
El sistema de compresión que usa JPEG se basa en reducir información promediándola en las zonas de degradado.
Es decir que se calcula el valor de color de algunos píxeles en función del color de los píxeles que les rodean. Por esas características este formato es muy eficiente a la hora de almacenar imágenes que posean muchos degradados y matices de color.
Aunque también es preciso tener en cuenta que es casi inútil cuando queremos guardar con este formato dibujos con grandes extensiones de colores planos y uniformes o con bordes muy definidos, definitivamente no se recomienda.
Guardar en modo progresivo
En algún momento hemos entrado a páginas web que nos muestran las imágenes de la página con una mala calidad y luego se mejora. JPEG permite guardar los archivos en modo progresivo, es decir que a la hora de cargar la página web las imágenes se muestran aunque no haya cargado totalmente.
La calidad de la imagen ira mejorando a medida que se cargue la imagen hasta obtenerla completamente. Esto permite mantener entretenido al usuario y de esta forma no se salga de nuestro sitio web.
Formato PNG
PNG debe sus siglas a los vocablos ingleses Portable Network Graphics, cuya traducción directa al castellano es gráficos de red portátiles.
Este formato gráfico surgió a partir de la controversia que se suscito cuando Compuserve, propietaria del formato, y Unisys, propietaria del algoritmo de compresión LZW usado por los ficheros GIF, decidieron que los programas que usaran este formato deberían de pagar.
Esto generó el desarrollo de un nuevo formato gráfico, PNG, que fue adoptado por el W3C en 1996.
El uso del formato PNG es gratuito, y su código completo está disponible para cualquier usuario.
Las características principales del formato PNG son:
- Formato de mapa de bits.
- Alta tasa de compresión sin pérdidas.
- Soporte de colores: color indexado, color verdadero de 48 bits, escala de grises de 16 bits.
- Sistema de entrelazado Adam7.
- Transparencia en color indexado.
- Transparencia de canal alfa en imágenes en color verdadero y escala de grises.
- Corrección gamma.
- Cromaticidad.
- Alta tasa de compresión sin pérdidas.
- Soporte de colores: color indexado, color verdadero de 48 bits, escala de grises de 16 bits.
- Sistema de entrelazado Adam7.
- Transparencia en color indexado.
- Transparencia de canal alfa en imágenes en color verdadero y escala de grises.
- Corrección gamma.
- Cromaticidad.
El formato PNG dispone de un potente algoritmo de compresión, sin pérdidas (la información no se altera), y con una tasa my alta de compresión.
El mecanismo de la compresión, básicamente, se basa en optimizar la imagen línea a línea y aplicar después un algoritmo de compresión derivado del método LZ77, utilizado en programas de compresión general tan famosos como ZIP.
La gama de soporte de colores puede alcanzar hasta color verdadero de 48 bits, lo cual supone disponer de una paleta de más de 281.474.976.000.000 colores diferentes.
El sistema de entrelazado Adam7, utilizado por PNG, es más potente que el utilizado por GIF, ya que el sistema Adam7 muestra la imagen en 7 etapas y el resultado final es una imagen que es vislumbrada mucho antes que con el sistema en 4 etapas de GIF.
En cuanto a la transparencia, PNG utiliza 2 métodos: la transparencia para las imágenes de color indexado y la transparencia de canal alfa en las imágenes en color verdadero y escala de grises.
En la transparencia en las imágenes de color indexado, PNG funciona igual que GIF, asignando el valor de transparencia a uno de los valores de la paleta del gráfico.
La transparencia PNG de canal alfa en las imágenes a color de 48 bits o en escala de grises se basa en poder establecer el grado de transparencia que se desee a todos los pixeles del canal alfa de esa imagen, con lo que se pueden obtener imágenes dotadas de cierta transparencia, no en un único color (como en el caso de la transparencia en imágenes de color indexado), sino en todos los pixeles de la paleta.
La corrección gamma y la cromaticidad permite mostrar los colores de la imagen de una forma más precisa.
Aún teniendo todas estas ventajas, el formato PNG no es práctico (aún) para el uso en páginas web debido a que no es adoptado por todos los navegadores, y aún menos por las versiones antiguas de los mismos.
EL FORMATO GIF
El formato gráfico GIF debe sus siglas a los vocablos ingleses Graphics Interchange Format, lo que traducido al español es Formato de Intercambio de Gráficos.
Las principales características de este formato gráfico son:
- Formato de mapa de bits.
- Color indexado en una paleta máxima de 256 colores.
- Compresión LZW, sin pérdida, que alcanza tasas 1:4 (hasta un 25% del tamaño original)
- Color indexado en una paleta máxima de 256 colores.
- Compresión LZW, sin pérdida, que alcanza tasas 1:4 (hasta un 25% del tamaño original)
Vamos a ver con mayor detenimiento estas características.
Un mapa de bits está formado por los valores de color de los bits que forman la imagen. En realidad se trata de una matriz bidimensional donde cada elemento se representa por su valor de color. Estos valores de color tienen su traducción en la paleta de colores que acompaña a ese gráfico, lo cual enlaza directamente con el siguiente concepto: ¿qué es la paleta de colores?
Como ya hemos explicado, el formato GIF utiliza un sistema de color indexado en una paleta que puede soportar un máximo de 256 colores. Estos colores se representan en el sistema RBG (Red, Green, Blue = Rojo, Verde, Azul). Gráficamente, una paleta GIF podría representarse de la siguiente manera:
Indice de color | Valor rojo | Valor verde | Valor azul |
1 | 56 | 76 | 0 |
2 | 87 | 89 | 190 |
… | … | … | … |
Y tal y como hemos explicado anteriormente, cada bit del gráfico tiene como valor un índice de color, el cual se traduce en la paleta de colores de ese gráfico por su correspondiente valor RGB.
Versiones GIF
Existen 2 versiones del formato GIF: GIF87a y GIF89a.
GIF87a
GIF87a es la especificación original, y está disponible desde 1987.
Sus principales características son:
- Compresión LZW, sin pérdidas.
- Soporte de entrelazado.
- Soporte de entrelazado.
La compresión sin pérdidas equivale a decir que el fichero comprimido tiene exactamente la misma información que el fichero sin comprimir. Evidentemente, esta característica nos asegura que la calidad del gráfico GIF (y su información) va a ser la misma por muy comprimido que esté el fichero. Normalmente, como ya indicábamos antes, las tasas de compresión pueden llegar a 1:4, aunque, como veremos más adelante, esto depende directamente de la información contenida en el gráfico.
Otra de las características del formato GIF87a es el sistema de entrelazado, el cual se basa en presentar la carga de la imagen en varias etapas, de manera que podemos vislumbrar el gráfico final antes de que este se halla cargado del todo. Esta característica se activa (si se quiere) en el procesador de imágenes a la hora de guardar la imagen.
Concretamente, las imágenes GIF tienen un soporte de entrelazado en 4 etapas, lo que quiere decir que la imagen se mostrará en 4 fases, de la siguiente manera: primero mostrará las líneas del mapa de bits números 1, 5, 9,…; en la segunda fase de la carga, las líneas 2, 6, 8,…; y así consecutivamente, completando sus 4 fases de carga. De esta forma conseguimos, cuando cargamos esta imagen, empezar vislumbrando una imagen borrosa que poco a poco se va haciendo más clara hasta completar la carga.
GIF89a
La versión GIF89a incorpora, a las de su predecesor (GIF87a), 2 nuevas características: transparencia y animación.
La posibilidad de transparencia hace que podamos convertir un valor de color de la paleta de colores de ese GIF en transparente, al igual que un cristal.
A la hora de diseñar una página web, esta característica nos ofrece mucho juego, ya que podemos hacer que parte de una gráfico se muestre transparente, mostrando lo que está directamente por debajo del mismo.
Todo esto se traduce en diseños web mejorados, mejor fundido con el resto de gráficos de la web, etc.
Gracias a la posibilidad de animación que se incorporó en la versión GIF89a, hoy día disfrutamos de los archiconocidos “gif animados”, ya que es esta característica es la que permite la creación de dichos gráficos animados.
Básicamente, un GIF animado es un fichero GIF que contiene en si mismo varios “frames” (o imágenes) GIF e información para llevar a cabo la secuencia de la animación con estos gráficos.
En un GIF animado podemos definir parámetros como el retardo entre imagen e imagen GIF, autorepetición de la secuencia de imágenes, etc.
Formato JP2
JPEG 2000 es una norma de compresión de imágenes basada en transformación de ondas. Fue creada por el comité Joint Photographic Experts Group que anteriormente había creado el algoritmo JPEG. Su objetivo fue el de mejorar el algoritmo JPEG, basándose en una transformación discreta del coseno. Usualmente los archivos con este formato utilizan la extensión .jp2.
JPEG 2000 puede trabajar con niveles de compresión mayores a los de JPEG sin incurrir en los principales defectos del formato anterior con altas tasas de compresión: Generación de bloques uniformes y aspecto borroso. También se adapta mejor a la carga progresiva de las imágenes. Sus principales desventajas están en que tiende a emborronar más la imagen que JPEG incluso para un mismo tamaño de archivo (pero sin formar bloques), y que elimina algunos detalles pequeños y texturas, que el formato JPEG normal sí llega a representar.
Parte de JPEG 2000 ha sido publicada como una norma ISO, ISO/IEC 15444-1:2000. Actualmente JPEG 2000 no está ampliamente admitido por los programas de visualización de páginas web. En algunos navegadores, los diseñadores no tienen intención de incluirlo debido a su escaso uso y gran número de patentes que tiene. De todas formas, existen muchas extensiones que dan soporte, que opcionalmente pueden ser instaladas por el usuario. Un navegador con soporte para este formato es Konqueror.
Las líneas geométricas que delimitan los enlaces, es decir, las áreas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posición 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qué coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro.
Existen tres tipos de áreas distintas, suficientes para hacer casi cualquier tipo de figura. En el dibujo que acompaña estas líneas se puede ver una representación de las áreas, que detallamos a continuación.
Suscribirse a:
Entradas (Atom)