Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Elementos de diseño. Contenido Estático

Transcripción

1 Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Elementos de diseño. Contenido Estático Diseño Centrado en el Usuario. Dra. Sandra Baldassarri Objetivos Desarrollo de proyectos multimedia y sistemas web utilizando técnicas de diseño centrado en el usuario. Características de las aplicaciones multimedia y web Definición de elementos multimedia: Texto Imagen / Gráficos Audio Video / Animaciones Algunas consideraciones prácticas: Diseño para web. Guías de estilo.

2 Desarrollo de proyectos multimedia y web La consecución de los objetivos perseguidos con cualquier aplicación multimedia o web está condicionada por la satisfacción del usuario final. Hay que diseñar aplicaciones usables y accesibles, por lo tanto en el proceso se utilizarán los principios de diseño centrado en el usuario. Sin embargo, este tipo de aplicaciones tienen ciertas características particulares, que hay que tener en cuenta a la hora de llevar a cabo del diseño y la implementación. Desarrollo de proyectos multimedia y web Para diseñar una aplicación multimedia o web hay que: Conocer las distintas formas de presentar la información y las formas de interactuar con ella Estudiar cómo se puede ayudar a los usuarios en la exploración, seguimiento e integración de la información Proveer distintos tipos de actividades interactivas y simulaciones que permitan al usuario resolver determinadas tareas Utilizar enlaces dinámicos en los cuales la información cambie dependiendo de qué haya pasado en otra parte de la aplicación Estudiar las características principales de los diferentes medios a integrar para saber cuándo y cómo aplicarlos

3 Aplicaciones Multimedia Multimedia es un proceso de comunicación interactivo basado en ordenador que incorpora varios medios: texto, gráficos, sonido, animación, video, etc. Interactividad Es la clave de las aplicaciones multimedia (web) Los usuarios determinan qué contenido quieren ver, cuándo y cómo. Suele ser no-lineal (hipertexto) Interactividad La interactividad permite al usuario controlar la presentación de la información. 1º Nivel: La interactividad proporciona varios grados de personalización a la presentación de la información 2º Nivel: Permitir que el usuario realice anotaciones o modificaciones. Esto exige la creación de un contexto independiente para cada usuario. 3º Nivel: La entrada del usuario no sólo es grabada, sino que se procesa para generar una respuesta personalizada, como en el caso de la corrección de ejercicios en sistemas de entrenamiento.

4 Interactividad El objetivo básico es ofrecer al usuario los datos que requiere de forma específica. Hay que determinar el modo de interacción: Dispositivos de entrada y selección: ratón, botonera, membrana táctil, test manager, joysticks, guantes, seguidores de ojo/pupila, voz Dispositivos de salida: síntesis de voz, pantallas, hápticos, Lo más importante en la interactividad es que el interfaz sea intuitivo y fácil de entender por el usuario: usabilidad Texto El texto impone una progresión lineal al lector page 1 page 2 page 3 page 4 this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell Se sigue la idea que el autor considera mejor Normalmente es buena pero no siempre!

5 Estructura no lineal Hipertexto Bloques de texto (páginas) Enlaces entre páginas para crear una malla o red Los usuarios siguen su propio camino a través de la información bookmark home this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell back link external link this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell Aplicaciones Multimedia Multimedia o hipermedia (no sólo texto): Sistemas hipertexto + medios adicionales Ilustraciones, fotografías, videos, sonidos, etc Enlaces y hotspots pueden formar parte de los medios Áreas de imágenes Tiempos y ubicaciones en los videos El contenido puede ser: Estático Dinámico (basado en tiempo)

6 Estilo del texto Contenido estático: Texto Estilos universales y genéricos: serif, sans, bold, italic Fuentes específicas: varían según la plataforma Color: sin abusar Posicionamiento Fácil: justificado a izquierda, derecha o centrado Posicionamiento preciso con DHTML pero hay que tener cuidado con las plataformas Tamaño de pantalla Matemáticas: necesitan fuentes especiales, Tipos de texto Contenido estático: Texto Texto tradicional: se introduce mediante teclado y se muestra por pantalla: Texto sin formato: código ASCII Texto con formato: Fuente, anchura, kerning, tamaño, estilo, disposición,... Texto tratado: Texto sometido a tratamiento digital para modificar su aspecto o apariencia Paso a bitmap (retoque, modificación de color, texturas) Cada tipo de texto tiene ventajas y desventajas

7 Contenido estático: Texto en la web Tipos de Navegación: Menús de navegación Botones de interacción Campos de lectura: Orientación vertical contra horizontal Campos desplazables Campo único con ventana Separar el texto y moverse con botones Símbolos e iconos Texto animado Contenido estático: Texto Herramientas de autor dependientes del objetivo: OCRs: OmniPage, DeskScan Resedit FONTastic Plus Fontographer Metamorphosis Professional FontStudio Adobe Type Manager Deluxe Photoshop Typestry TypeAlign AddDepth

8 Contenido estático: Texto Algunas consideraciones de diseño: Para tipos de letra pequeños utilizar la fuente disponible más legible Utilizar el menor número posible de tipos de letra en el mismo trabajo Ajustar el interlineado para obtener un efecto más agradable Variar el tamaño de letra en función de la importancia del mensaje En los encabezados de tamaño grande ajustar el espacio entre las letras (kerning) de forma que se vea bien Rodear los encabezados de mucho espacio en blanco Para hacer un texto más legible, probar con distintos colores Utilizar antialiasing donde se requiera una suave mezcla de títulos y encabezados Si se utiliza un tipo de letra centrado en un bloque de texto, utilizar el menor número de líneas posible Para obtener resultados que llamen la atención tratar de alterar gráficamente y distorsionar el texto o experimentar con sombras Contenido estático: Imágenes Las imágenes digitales se pueden representar mediante: gráfico rasterizado o bitmaps descripción vectorial

9 Contenido estático: Imágenes Breve resumen: Las imágenes bitmap están compuestas por pixels Resolución : número de pixels que componen una imagen Cada pixel tiene componentes R, G, & B (o escala de grises, o + canal alpha) La profundidad de color es el número de bits utilizados para representar cada componente R, G, & B El espacio de color depende del medio Imágenes: digitalización Las imágenes reales son continuas y se representan mediante funciones de la intensidad de luz o de la luminancia L(x, y, ) El proceso de digitalización implica una triple discretización: - Discretización en el dominio de longitudes de onda: sólo se toma la respuesta para un número reducido de longitudes de onda (3 en RGB, 7 a 12 en el visible + infrarrojos,...) - Discretización espacial (muestreo o mapeado): subdivisión de la imagen en pixels - Discretización en el dominio de niveles de grises (cuantización): toma valores entre un determinado rango.

10 Compresión Ejemplo: Una imagen RGB de 800x600 a 24 bits/px sin comprimir ocupa 800*600*24= bits=1.4MB (sin contar con el resto de la información: cabeceras, etc) Surge la necesidad de comprimir! El objetivo de la compresión consiste en reducir el tamaño físico que ocupan (almacenamiento y transmisión) Compresión Qué datos se pueden comprimir y/o quitar de una imagen? La compresión se basa en diversos conceptos: -Eliminación de redundancias en los datos: -Redundancia en la codificación -Redundancia interpixeles -Redundancia psicovisual -Utilización de modelos estadísticos de predictibilidad

11 Compresión Redundancia en la codificación: Compresión Histogramas de brillo (redundancia interpixeles):

12 Compresión Histogramas de brillo (redundancia interpixeles): Redundancia psicovisual Compresión

13 Algoritmos de Compresión Existen dos métodos de compresión: -En la compresión sin pérdida (lossless compression) la información resultante de la descompresión debe ser idéntica a la original. -En la compresión con pérdida (lossy compression) la información descomprimida no es idéntica a la original. Algoritmos de Compresión Las técnicas de compresión sin pérdida se usan principalmente cuando se desea comprimir información como texto, datos o programas, o en imágenes médicas donde no se puede perder información. La compresión de imágenes y vídeo generalmente se realiza utilizando los métodos de compresión con pérdidas ya que en la mayoría de los casos sólo es necesario que el resultado descomprimido sea suficientemente similar al original.

14 Compresión sin pérdidas Entre los algoritmos de compresión sin pérdidas o exactos (codificación) encontramos: - Run Length Encoding - Huffman - LZW (Lemple-Zip Welch) - Aritmética - ZIP, ARJ,... Run Length Encoding Compresión sin pérdidas Este método se basa en la eliminación de redundancia, reemplazando las ocurrencias de valores que se repiten por un único valor precedido por el número de veces que se repite, seguido de un carácter especial. Por ejemplo la secuencia: aaaabbbccccccd por 4a/3b/6c/1d/ Este algoritmo es eficiente para imágenes pintadas, con grandes zonas de color uniforme y se utiliza en numerosos formatos: MacPaint, TIFF, PCX, FLI, GEM,

15 Compresión sin pérdidas Ejemplo de Codificación RLE en el formato BMP Compressed data Expanded data Move 5 right and 1 down End of line 09 1E 1E 1E 1E 1E 1E 1E 1E 1E 1E End of RLE bitmap Compresión sin pérdidas Huffman Realiza una pasada por el fichero a codificar determinando qué patrones se repiten más y permite optimizar la longitud de los códigos asociados a cada nivel, asignando códigos más cortos a los patrones más frecuentes. abcdeabcdeab por 112, donde abcde se reemplaza por 1 y ab por 2 Este método es útil en imágenes con valores que se repiten frecuentemente y se utiliza como complemento de otro tipo de compresiones. Por ejemplo JPEG.

16 Compresión sin pérdidas Huffman Compresión sin pérdidas

17 LZW (Lempel-Zip Welch) Compresión sin pérdidas Explota la reducción de la redundancia de manera similar a Huffman, pero no hace estadística previa, sino que efectúa la codificación y la compresión a medida que va analizando los puntos. La primera vez que aparece una cadena, ésta es almacenada de manera completa junto con el código que se le asigna. Cuando la cadena aparece otra vez, sólo se almacena su código. La tabla se construye de manera dinámica, de acuerdo al contenido de la imagen. LZW (Lempel-Zip Welch) Compresión sin pérdidas El método logra una reducción de 3:1 (típica) llegando a comprimir 10:1 en imágenes con patrones. La primera versión de este algoritmo (LZ77) ha sido la base de muchos compresores de texto y de propósito general como: compress, zoo, pkzip o arj. LZW se utiliza en los formatos GIF y TIFF. La versión deflate se usa en los formatos PNG y es la base de la librería zlib.

18 Compresión sin pérdidas Codificación LZW en GIF* Emplea tamaños variables de compresión (longitud de código) Cuando se identifica un número de cadenas mayor al número de cadenas posibles con la longitud de código actual, este se incrementa en 1. El valor máximo de bits de código es 12. La información codificada se estructura en bloques de palabras de 8 bits. * Formato de archivo Graphics Interchange Format Aritmética Compresión sin pérdidas Tiene el mismo fundamento que el de Huffman, asociando un código en función de la probabilidad de cada valor, y calculando las probabilidades de los patrones a partir de las probabilidades de cada uno de los valores que forman la secuencia. El algoritmos es más complejo que de implementar que el de Huffman pero produce entre un 5 y un 10% más de compresión.

19 Compresión con pérdidas Los métodos de compresión con pérdidas o algoritmos aproximados son aquellos no permiten la reconstrucción exacta de los datos. Se basan en modelos estadísticos de predicción o quitan la información que el ser humano no puede detectar. Entre estos algoritmos encontramos: - Basados en transformadas Fourier Discreta del Coseno Hadamard-Haar Karhunen-Loeve,. - Compresión predictiva Compresión con pérdidas Basados en transformadas Todos ellos se basan en el truncamiento de los coeficientes que quedan por debajo de un umbral (normalmente parametrizable). Los pasos a seguir en estos métodos son: Se divide la imagen en sub-imágenes, generalmente bloques de 8 x 8 pixels. Se aplica la transformada correspondiente a cada sub-imagen Se efectúa la umbralización más adecuada Se codifican los datos El proceso de reconstrucción consiste en la decodificación y aplicación de la transformada inversa. En ocasiones se efectúa alguna operación adicional para evitar los efectos de discontinuidad sobre los bordes de las sub-imágenes.

20 Compresión con pérdidas Basados en transformadas De todos estos métodos, sin lugar a dudas, el más conocido es el JPEG, basado en la transformada Discreta del Coseno, cuyo funcionamiento se describe en la siguiente figura: Compresión con pérdidas JPEG La imagen de entrada se divide en bloques de NxN píxeles. El tamaño del bloque se escoge considerando los requisitos de compresión y la calidad de la imagen. En general, a medida que el tamaño del bloque es mayor, la relación de compresión también resulta mayor. Esto se debe a que se utilizan más píxeles para eliminar las redundancias. Pero al aumentar demasiado el tamaño del bloque la suposición de que las características de la imagen se conservan constantes no se cumple, y ocurren algunas degradaciones de la imagen, como bordes sin definir. Los resultados en la experimentación han demostrado que el tamaño del bloque más conveniente es de 8x8 píxeles.

21 JPEG (DCT) Compresión con pérdidas DCT transforma los datos de la matriz 8x8 del espacio (x, y) al espacio de frecuencias. En vez de una matriz de 64 valores, DCT los ve como una señal que puede ser aproximada mediante la suma de 64 señales cosenoidales de distintas amplitudes y frecuencias. La mayoría de la información visual se encuentra en las funciones de frecuencias menores, con lo que se pueden desechar las de altas frecuencias. El algoritmo JPEG (DCT) es simétrico: cuesta lo mismo comprimir que descomprimir JPEG (DCT) Compresión con pérdidas

22 Compresión con pérdidas JPEG Compresión con pérdidas JPEG Existen diversos tipos de JPEG: Baseline Extendido: más bits de precisión en las muestras, permite más tablas de cuantización y Huffman Progresivo: despliega una imagen de baja calidad y la mejora sucesivamente Jerárquico: muestreo descendente por factor de 2 en cada dirección JPEG sin pérdidas

23 Compresión con pérdidas Ejemplos de imágenes comprimidas con jpeg Compresión 9.8 a 1 Compresión 28 a 1 Compresión 98 a 1 Compresión con pérdidas Ejemplos de imágenes comprimidas con jpeg Compresión 98 a 1

24 JPEG 2000 Compresión con o sin pérdidas JPEG 2000 es un estándar para compresión de imágenes producido por la ISO, que define un conjunto de métodos de compresión sin y con pérdida para codificar imágenes digitales de dos niveles (blanco/negro), en escala de grises o en color. JPEG 2000 Compresión con o sin pérdidas Permite compresión con y sin pérdidas (DWT=transformada por wavelets discreta) Calidad progresiva (por calidad, resolución, localización espacial) Acceso aleatorio a la cadena de bits (bitstream) Permite extracción para edición y procesado Acceso a regiones de interés

25 JPEG 2000 Compresión con o sin pérdidas Al aplicar la DWT se obtienen cuatro tipos de coeficientes: aproximaciones, detalles horizontales, detalles verticales y detalles diagonales. La aproximación contiene la mayor parte de la energía de la imagen, es decir, la información más importante, mientras que los detalles tienen valores próximos a cero. Generalmente, la energía de las imágenes se concentra en las frecuencias bajas. Una imagen tiene un espectro que se reduce con el incremento de las frecuencias. Estas propiedades de las imágenes quedan reflejadas en la transformada wavelet discreta de la imagen. JPEG 2000 Compresión con o sin pérdidas

26 JPEG 2000 Compresión con o sin pérdidas JPEG 2000 Compresión con o sin pérdidas

27 JPEG 2000 Compresión con o sin pérdidas Compresión con o sin pérdidas JPEG XR Algoritmo de compresión HD Photo para imágenes fotográficas desarrollado por Microsoft como parte de la familia de Windows Media. Es un método desarrollado para dispositivos portátiles. Permite comprimir con o sin pérdidas y se basa en otro tipo de transformada lapped biorthogonal El funcionamiento es similar a JPEG, pero la tasa de compresión es mucho más alta.

28 Compresión con pérdidas Predictiva Se basa en el hecho de que las variaciones entre los pixels vecinos son pequeñas, por lo tanto, si manejamos diferencia entre los niveles de gris de los vecinos, se obtienen resultados más comprimibles. Variando la cantidad de bits asignados a cada pixel permite mayor o menor compresión. Esta codificación es adecuada para señales en las que los valores difieren poco unos de otros. Por ejemplo, las señales de vídeo o de audio. Predictiva Compresión con pérdidas La estructura fundamental es la modulación de pulsos codificados diferenciales (DPCM). La cantidad que se codifica es la diferencia de brillo entre píxeles. El esquema de compresión DPCM opera en la imagen completa, pixel por pixel. El primer pixel, en la esquina superior izquierda de la imagen, permanece inalterado; este es exactamente codificado con su brillo original. Cada pixel siguiente es codificado con el valor de la diferencia con el pixel anterior. Este proceso se repite por toda la línea. Al inicio de la próxima línea, el proceso comienza de nuevo, y este continúa hasta que la imagen entera es codificada.

29 Compresión con pérdidas El esquema de compresión DPCM trabaja con la suposición de que los pixeles vecinos serán similares. Como resultado, sus diferencias normalmente serán valores muy pequeños. Estas diferencias de valor se pueden codificar usando, por ejemplo, números de 6 bits en lugar de números de 8 bits, permitiendo un factor de compresión de 8/6=1.333:1. Predictiva Compresión con pérdidas La compresión DPCM tiene mejores resultados en imágenes con colores contiguos similares.

30 Compresión fractal Compresión con pérdidas La compresión fractal consiste en buscar un conjunto de transformadas afines que describan aproximadamente la imagen. Las imágenes son almacenadas como una colección de transformadas, cuyo número determina la tasa de compresión. número determina la tasa de compresión El problema esta técnica es que se tarda tiempo en encontrar las transformaciones que definen la imagen. No obstante, una vez encontradas, la decodificación es muy rápida. Compresión fractal Compresión con pérdidas

31 Formatos No hay que confundir los formatos con las técnicas de compresión de imágenes, aunque hay algunos formatos que llevan el nombre de la técnica que utilizan. Un formato es, simplemente, una especificación de la organización de los datos dentro del fichero. La cantidad de formatos en el mundo de la imagen es abrumadora. Entre los formatos más conocidos hoy en día encontramos: PCX, TIFF, BMP, GIF, JPEG, PICT,DXF, PIC, EPS, PNG, SGI, FLI, GEM, MacPaint, Targa, PostScript, SVG, CDR, PNS, JPS, RIB,... Formatos Cada formato presenta ventajas y desventajas. La elección de un determinado formato no es simple. Hay ciertas características que se deben a analizar: - Calidad: alta resolución, corrección del color, bitmap vs. vector - Flexibilidad: capacidad de adaptarse a los cambios de plataforma - Eficiencia: cálculos que demanda, almacenamiento - Soporte: programas sobre los que corre - Aplicaciones: artes gráficas, hojas de cálculo, estadísticas, CAD, procesamiento de texto, publicidad.

32 Formatos BMP (MicroSoft Windows Device Independient Bitmap) Tipo de Imagen: Bitmap Plataformas: PC con Windows (originalmente) Ventajas: Es de MicroSoft Desventajas: No se soporta por programas no compatibles Suele ocupar bastante espacio ya que utiliza técnicas de compresión sin pérdidas (RLE) Formatos GIF Tipo de Imagen: Bitmap Plataformas PC, Unix Ventajas: 8 bits para codificación del color. Tablas de 256 colores. Compresión LZW, secuenciación (gif animado), gif transparente. Desventajas: No prevé guardar en escala de grises ni tabla de corrección del color. No soporta CMYK ni HSI.

33 Formatos JPEG (Join Photografic Experts Group) Tipo de Imagen: Bitmap comprimido Plataformas: todas Ventajas: La mejor compresión para imágenes fotográficas. Desventajas: Sólo trabaja compresión con pérdidas (aunque existe sin pérdidas) JFIF (JPEG File Interchange Format) Imagen JPEG (también en escala de grises o representación YCrCb) Formatos PNG (Portable Network Graphics) Tipo de Imagen: Bitmap Plataformas: Mac, PC y workstations Características: Mejoras en sus algoritmos de compresión (20-30% más eficiente que el LZW del GIF) Soporte para imágenes True Color de hasta 48 bits Soporte para escalas de grises de 1, 2, 4, 8 y 16 bits por pixel. Canal Alpha y transparencia en modos de 8 y 16 bits Imágenes de paletas mapeadas de hasta 256 colores (1, 2, 4 y 8 bits) Independencia multiplataforma y muestra progresiva Archivo basado en múltiples CRCs intermedios Cabecera diseñada para comprobar corrupción

34 Contenido estático: Gráficos vectoriales En los gráficos vectoriales las imágenes se construyen utilizando formas que se pueden describir matemáticamente mediante ecuaciones (líneas y curvas en función de coordenadas (x, y)) Coord pixels Coord reales Aprox línea Anti-aliasing Gráficos vectoriales Los gráficos vectoriales suelen definirse por medio de: Curvas (interpolación o aproximación): Bezier, B-Spline

35 Gráficos vectoriales Los gráficos vectoriales suelen definirse por medio de: Curvas (interpolación o aproximación): Bezier, B-Spline Trayectorias Gráficos vectoriales Los gráficos vectoriales suelen definirse por medio de: Curvas (interpolación o aproximación): Bezier, B-Spline Trayectorias Aplicación de características: Grosor, llenado, patrones

36 Gráficos vectoriales Los gráficos vectoriales suelen definirse por medio de: Curvas (interpolación o aproximación): Bezier, B-Spline Trayectorias Aplicación de características: Grosor, llenado, patrones Transformaciones: Transformaciones afines Distorsión Contenido estático: Gráficos en 3D Los gráficos en 3D son una extensión de los gráficos vectoriales en 2D, sin embargo en la práctica son más complejos de gestionar ya que requieren manipulación y visualización en 3D. Los gráficos en 3D suelen incluir objetos, texturas, iluminación, y el modo de proyección.

37 Gráficos en 3D Los objetos en 3D se definen mediante la representación matemática de las superficies o de los sólidos que los componen. Formatos DXF (Drawing Interchange Format) Tipo de Imagen: Vector binario y ASCII Plataformas PC, Mac, Unix Ventajas: Soportado por la mayoría de los programas de CAD. Tiene formato de vectorización 3D. Desventajas: No se corresponde con ningún modelo de color. La forma ASCII es muy lenta para lectura. Difícil de usar en aplicaciones que no sean de CAD.

38 Formatos SVG (Scalable Vector Graphics) Tipo de Imagen: gráficos vectoriales 2D (estático y animado) Ventajas: Estándar abierto desarrollado por W3C -World Wide Web Consortium Permite escalabilidad de las imágenes, manejo de texto, efectos visuales, de sonido, respuestas a eventos Integración con otras tecnologías XML Alta compresión (SVGZ) Desventajas: Muchos navegadores no lo admiten La compresión de un SVG arroja siempre el mismo tamaño independientemente de la dimensión en el que se vaya a mostrar Formatos RIB (Renderman Interface Bytestream) Tipo de Imagen: Descripción de escena Plataformas: Unix, Mac y PC Ventajas: Es uno de los sistemas más completos para aplicaciones de visualización Desventajas: No está diseñado para usos limitados. No contiene bitmaps 2D o imágenes vectorizadas

39 Formatos PNS (PNG Stereo) / JPS (JPEG Stereo) Tipo de Imagen: Formato 3D: imágenes derecha izquierda codificadas Ventajas: Permite visualización estereoscópica Desventajas: Es necesario tener un driver compatible para poder combinar ambas imágenes y producir la imagen 3D Contenido estático: Imágenes en la web Color en la web Los navegadores muestran 216 colores (paleta Web-safe o Color Look-Up Table-CLUT): sólo las imágenes creadas con los colores de esta paleta se verán igual en distintas plataformas Crear la imagen o textura utilizando los colores de la paleta Web Convertir y guardar la imagen en formato GIF o PNG8 Efecto Gamma: Diferencias entre plataformas Macintosh: 1,8 Windows: 2,2 Las imágenes en Mac suelen ser más claras que en Windows Diferencias entre navegadores: sólo Safari y Firefox tienen en cuenta los perfiles de color incrustados en una imagen.

40 Formatos en la web GIF (colores 8 bits) Imágenes en la web Adecuado para dibujos, gráficos, logos, imágenes con áreas de color plano, animaciones gráficas, transparencias No adecuado para imágenes fotográficas, imágenes con muchos colores 10 Kb 57 Kb 56 Kb Formatos en la web JPEG (colores 24 bits) Imágenes en la web Adecuado para imágenes fotográficas, compresión de archivos a tamaños reducidos No adecuado para textos de tamaño pequeño, transparencias

41 Formatos en la web PNG8 (colores 8 bits) Imágenes en la web Adecuado para dibujos, gráficos y logos con gran cantidad de detalles, áreas de color plano, dithering, imágenes fotográficas de tamaño pequeño, transparencia PNG24 (colores 24 bits) Adecuado para dibujos, gráficos y logos con gran cantidad de detalles, imágenes fotográficas, transparencia en capas No todos los navegadores permiten el formato PNG OJO! Las imágenes jpeg y png24 pueden no visualizarse igual Imágenes en la web WebP El algoritmo de compresión de WebP está basado en la codificación intra-frame del formato VP8 y usa el formato contenedor RIFF. Este formato está basado en la predicción de bloques. Cada bloque se predice a través de los tres bloques superiores y un bloque de la izquierda. Hay cuatro modos básicos de predicción de bloques: horizontal, vertical, DC (para un sólo color) y True Motion. Los bloques impredecibles se comprimen en subpíxeles de 4x4 usando DCT o la transformación de Hadamard. La salida de la imagen es comprimida con codificación entrópica.

42 Imágenes en la web Comparación entre formatos: webp y jpeg Imágenes en la web Comparación entre formatos: webp y jpeg En imágenes visualmente similares webp comprime más que jpeg. Cuando se aplica una compresión alta webp tiene el defecto de eliminar detalles, a cambio no tiene artefactos. Los artefactos jpeg normalmente no son visibles, pero cuando se hace zoom son muy evidentes.

43 Programas para tratamiento de imágenes Tanto para la generación de imágenes, como para el tratamiento de las mismas, existen diferentes aplicaciones de software gráfico dependiendo del tipo de imagen que se desee o del tipo de efecto que se quiera aplicar sobre esa imagen. En general, las aplicaciones de imagen estática las podemos clasificar en programas de: pintura dibujo estructurado ilustración procesado de imágenes Programas para tratamiento de imágenes Permiten diseñar, crear y editar gráficos e imágenes. Pueden modificar imágenes existentes añadiéndoles diversos efectos más o menos complejos. Ejemplos: Adobe Freehand, Photoshop, Corel Draw, PhotoPaint, GIMP, Macromedia Fireworks, Ilustrator, Freehand, Microsoft Visio, Paint Shop Pro, PhotoEditor, 3D Studio,

44 Programas para tratamiento de imágenes Permiten convertir bitmaps a imágenes vectoriales. Ejemplos: Vector Magic, TraceIT Bitmap Tracer, RasterVect, VectorEye, Freehand Autotrace, Silhoutte, Vextractor, TraceLine, AutoTrace, EasyTrace, AcmTraceART, Protrace, Referencias - Multimedia Lecturas recomendadas sobre imagen y formatos Más información sobre formatos Comparación entre formatos Digital Multimedia, N. Chapman & J. Chapman, Wiley Capítulos 1 y 2 (Introducción y fundamentos) Capítulos 3 y 4 (Imagen)