DISEÑO WEB Y MULTIMEDIA - BLOG 3

Transferencia de conceptos técnicos desde el diseño tradicional

Legibilidad y lecturabilidad en la pantalla
Legibilidad: Implica la capacidad del receptor de reconocer con facilidad y seguridad los caracteres que se exhiben en pantalla.
Comprensión: Se relaciona directamente con la capacidad de interpretación conceptual de lo escrito.
Lecturabilidad: Un buen balance entre los dos conceptos anteriores implica una lecturabilidad exitosa del escrito. Para lograr este objetivo se requiere un equilibrio medido entre las variables tipográficas (familia, inclinación, cuerpo, etc.)

La lectura vs. El escaneo
Los usuarios en la Web leen el contenido realizando un escaneo sobre puntos concretos (palabras o frases individuales), lo cual implica un proceso de lectura 25% más lento que el tradicional (Tomas García Ferrari). Por otro lado, el dinamismo propio del medio (navegación constante, interrupciones, etc.) dificulta aún mas el proceso.
Una forma de optimizar la organización de los contenidos en la Web implica los siguientes criterios:
• Palabras clave destacadas (en forma de vínculos, o utilizando variables tipográficas, o cambios de color).
• Subtítulos significativos; útiles.
• Listas de ítems.
• Una idea por párrafo (los lectores generalmente saltean cualquier idea adicional si no son ‘capturados’ por las primeras palabras del párrafo);
• El estilo de ‘pirámide invertida’, empezando por la conclusión.
• La mitad o menos de palabras que las que normalmente se utilizan en textos impresos;
(Extraído del trabajo "Legibilidad y comprensión en la World Wide Web"de Tomas García Ferrari).

Las limitantes tipográficas
El diseño Web de tipo HTML limita sus familias tipográficas a aquellas denominadas "de sistema", ya que son l as que se encuentran presentes en la mayoría de los sistemas operativos y plataformas.
Dichas fuentes se listan a continuación.

Fuentes de sistema
Tipografías incluidas en el sistema operativo Windows 98 (y posteriores)
Abadi MT Condensed Light
Arial
Arial Black
Book Antiqua
Calisto MT
Century Gothic
Comic Sans MS
Copperplate Gothic Bold
Courier New
Impact
Lucida Console
Lucida Handwriting Italic
Lucida Sans
Marlett
News Gothic MT
OCR A Extended
Symbol
Tahoma
Times New Roman
Verdana
Webdings
Westminster
Wingdings

Tipografías incluidas en el sistema operativo de Macintosh MacOS 8 (y posteriores)
Charcoal
Chicago
Courier
Geneva
Helvetica
Monaco
New York
Palatino
Symbol
Times

Instaladas por los extras de Microsoft se suman:
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Webdings

Tipografías incluidas en el browser Microsoft Internet Explorer, versión 5, Macintosh y Windows
Andale Mono
Arial
Comic Sans MS
Georgia
Impact
Trebuchet MS
Verdana
Webdings
(Extraído del trabajo "Legibilidad y comprensión en la World Wide Web"de Tomas García Ferrari)

Escalabilidad del texto en pantalla
El concepto tradicional de cuerpo Tipográfico desaparece para dar paso a tamaño escalable de fuente. En los browsers de Internet es posible aumentar o disminuir el tamaño de las fuentes en que se muestra el documento, lo cual es factible de alterar el diseño. Esto se puede solucionar utilizando hojas de estilo css para determinar un tamaño de cuerpo fijo, no alterable por el browser.

La compresión de los contenidos Multimedia
La capacidad de almacenamiento de las aplicaciones multimedia suele ser limitada. Esto se evidencia tanto en medios abiertos como en medios cerrados: los CD-Roms standard tienen capacidad limitada (700 Mb), que no puede superarse. Por otro lado, los servidores de Internet asignan espacio de hosting limitado para el almacenamiento de sitios Web.

Por estas razones es necesario aplicar técnicas de compresión para reducir el tamaño de archivo de los contenidos multimedia. El video, el audio, la imagen, suelen generar archivos de gran peso en megabytes, por lo cual es indispensable su compresión.

Este procedimiento se realiza mediante la aplicación de algoritmos de compresión a los archivos, los cuales básicamente eliminan información redundante de los mismos, dejando sólo lo que es información indispensable. Esto produce reducciones notables en los tamaños de archivo, llegando a veces al 10% del tamaño original.

Todo este beneficio de la compresión refleja su costo en otra variable del archivo: su calidad. Este término no puede definirse de manera absoluta, no existe un valor numérico para definir la calidad, sino que la definición del nivel de calidad de una imagen, por ejemplo, es una apreciación subjetiva de cómo se ve en la pantalla. No sucede como en el caso de la imagen impresa, donde los valores de escaneo, rangos tonales, resolución, etc. deben ajustarse numéricamente y con precisión para obtener resultados óptimos.

En definitiva, la relación que existe entre niveles de compresión y calidad del material es inversamente proporcional: al aumentar la compresión (disminución del tamaño de archivo), la calidad disminuye de manera proporcional. Encontrar el equilibrio entre estos dos factores es un hecho que depende de cada caso en particular, y sobre todo del formato de archivo que estemos tratando.

A continuación se analizan las características particulares de cada componente multimedia, sus niveles de compresión adecuados y sus prestaciones y usos más aconsejados.

Formatos de Imagen
El formato de archivo que se elige para una imagen optimizada esta determinado por el color y las características gráficas y tonales de la imagen original. En general, las imágenes de tono continuo como las fotografías deben ser comprimidas como archivos JPEG. Las ilustraciones de color plano o de bordes netos y detalles mínimos, como la tipografía o los logotipos e isologotipos deben comprimirse como GIF o PNG-8
Este es, entonces, un primer criterio de selección de formato de compresión de imagen: el tipo de imagen original.

El formato PNG-24 es adecuado para imágenes de tono continuo. De todos modos, este formato de archivo es mucho más pesado que el JPEG para una misma imagen. El PNG-24 solo se recomienda cuando se trabaja con imágenes de tono continuo que incluyan transparencia de multinivel, lo cual no es soportado por JPEG.

Otro criterio importante es elegir un formato que acepte la suficiente profundidad de color (bit depth) que permita mostrar la cantidad e colores necesitados. Tanto PNG-8 como GIF soportan color de 8 bits por pixel. JPEG y PNG-24 soportan color de 24 bits.

La apariencia de una imagen en la Web también depende de la plataforma (mac o PC), display de color, sistema operativo y el navegador usado para mostrar la imagen. Debido a esto se aconseja previsualizar el proyecto en diferentes plataformas y monitores para poder predecir cómo funcionará en la Web.

El formato JPEG
El formato JPEG soporta color de 24 bits y preserva todo el rango de color y las variaciones sutiles en brillo y matiz que se encuentran en las fotografías y otras imágenes de tono continuo. El JPEG es soportado por la mayoría de los browsers.

El JPEG comprime el tamaño de archivo de archivo descartando información selectivamente.
Como hay una pérdida de información, a la compresión JPEG se la designa como "pérdida". Una mayor calidad resulta en menos información descartada, pero la compresión JPEG puede degradar la imagen en sus detalles finos, particularmente en imágenes que contienen tipografía o arte vectorial.

Se puede crear un archivo JPEG progresivo en el cual, una versión en baja resolución de la imagen aparece en el browser mientras la imagen completa se termina de bajar.
El formato JPEG no soporta transparencia.

El formato GIF
El formato GIF usa color de 8 bits y comprime eficientemente áreas de color sólido mientras que preserva los detalles finos tales como dibujo de líneas, lagos o ilustraciones con tipografía. También se usa el GIF para crear animaciones cuadro por cuadro y es un formato muy popular dado que es soportado por la mayoría de los browsers. El formato GIF usa el algoritmo de compresión LZW, que es un método de compresión con menor pérdida de información que el JPEG. De todas maneras como la profundidad de color es de 8 bits, la cantidad de colores está limitada a 256, lo cual implica pérdida de colores en la imagen.

Se puede reducir el número de colores en una imagen GIF y elegir las opciones para controlar la forma en que los colores se traman en una aplicación en un browser.
El GIF soporta transparencia de fondo, lo cual permite ver el color de fondo de la aplicación sobre la cual va colocada la imagen.

La compatibilidad colorimétrica y la paleta websafe
Colores seguros para la Web:
En HTML, los colores se expresan en forma de valores hexadecimales (por ejemplo, #FF0000) o con nombres (red). Los colores comunes a Netscape Navigator y Microsoft Internet Explorer en los sistemas Windows y Macintosh en el modo de 256 colores se denominan seguros para la Web. Suele decirse que existen 216 colores comunes y que cualquier valor hexadecimal que combine los pares 00, 33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204 y 255, respectivamente) representa un color seguro para la Web.

Al realizar pruebas, sin embargo, se descubre que hay sólo 212 colores seguros para la Web. Internet Explorer en Windows no muestra correctamente los colores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) y #33FF00 (51,255,0). Todos los selectores de colores de DreamWeaver utilizan la paleta de 212 colores seguros para la Web; al seleccionar un color de la paleta, se muestra el valor hexadecimal correspondiente al color. Si bien los cuatro colores mencionados anteriormente no están incluidos en la paleta de colores seguros para la Web de DreamWeaver, puede editar manualmente los valores hexadecimales de cualquier campo de color si desea utilizarlos.

El selector de colores del sistema no se limita a los colores seguros para la Web.
Estas consideraciones son también válidas para las presentaciones elaboradas con Macromedia Flash, dado que por ser parte del paquete de software de DreamWeaver y FireWorks usa el mismo criterio para la administración de paletas de color.

La calibración de los dispositivos que manejan color es otro dato importante a tener en cuenta para una reproducción precisa de éste componente de la comunicación. Es necesario que se tenga en cuenta el perfil de color en el que residen dispositivos tales como el monitor y el escáner, y que se encuentre calibrada toda la línea de trabajo entre dichos dispositivos. Esto se logra a través de algún software de gestión de color con el cual se determinan los perfiles de los espacios RGB de estos periféricos. Esto asegura la reproducibilidad de los colores de la manera correcta.

Consideraciones generales sobre la imagen
Si tenemos que enumerar las consideraciones generales para la imagen, hay dos parámetros que son los más importantes a tener en cuenta: su resolución, y que el modelo de color en el que debe residir la imagen al tratarse.

En cuanto a la resolución, la imagen en pantalla debe presentarse con un grado, de resolución que sea el óptimo para su visualización en alta calidad pero con un valor de resolución que no eleve demasiado el tamaño de archivo cuando ésta sea salvada.

En el caso de la resolución, este valor fijo para cualquier representación en monitor: un valor de 72 dpi es el indicado para una imagen que solamente se representará en pantalla. Este valor de resolución asegura una buena representación y un tamaño de archivo controlable dentro de los límites que no exceden las limitaciones de almacenamiento.

Los monitores tanto de las plataformas PC como Mac, tienen la capacidad de representará imágenes en esta resolución.

En algunos monitores mac se pueden alcanzar valores de 96 puntos por pulgada, aunque esto no se toma, estándar para el tratamiento de la imagen. En definitiva el valor de 72 el que asegura óptima calidad de representación con un peso de archivo dentro de los límites manejables.

En cuanto al espacio de color en el que debe residir la imagen, lo primero que debemos tener en cuenta es que estamos hablando de imágenes pixelares que solamente van a hacer visualizadas en la pantalla. Recordemos que el espacio de color en el que reside la gama de colores del monitor es el modelo RGB, ya que estamos hablando de colores luz. Por este motivo al realizar la conversión de la imagen al espacio de color indicado, es este el modelo de final al que debemos a arribar. Tanto en el proceso de digitalizar la imagen, como así también en todos los retoques y guardado final este modelo de color es el único en el que se debe trabajar.

Evidentemente, este tipo de imágenes solamente son aptas para su visualización en monitor. Los requerimientos de una imagen impresa abarcan otro modelo de color y resoluciones muchos mayores que la que se trabaja en multimedia.

Estos valores de resolución y modelo de color son abarcativos para todos los formatos de imagen y todos los niveles de calidad y compresión.
Consideraciones acerca de la compresión de sonidos

Dentro de todos los componentes de la multimedia, el sonido es el que ocupa la mayor cantidad de espacio en disco después de la imagen. El sonido digital tienen como standard de calidad las características del disco compacto: es el disco compacto con su calidad digital el que ha establecido los parámetros de sonidos para todas las aplicaciones multimedia.

Los primeros algoritmos de compresión de sonido arrojaban tamaños de archivo demasiado elevados para poder ser colocados en aplicaciones multimedia, y que a su vez éstas pudieran leer en la información contenida en el archivo con la fluidez necesaria para que la aplicación tuviera el suficiente atractivo.

Por esto los algoritmos de compresión tuvieron que ser mejorados forzosamente para poder hacer un uso masivo de las aplicaciones de sonido en esta actividad: la generación de nuevos métodos como la compresión MP3 es lo que finalmente ha permitido la popularización de los archivos de sonido.

El formato MP3 optimiza la información digital contenida en una muestra de sonido eliminando por un lado la información redundante y por otro las secciones del sonido que contienen frecuencias inaudibles por parte de una percepción humana normal. Con la aplicación reiterativa del algoritmo que contiene estos parámetros, se consiguen tamaños de archivo del 10% con relación al muestreo original. El standard actual ha conseguido una relación de tamaños-tiempo de reproducción equivalentes a 1 megabyte de espacio en disco por minuto de reproducción de sonido.

Al proceso de convertir información digital de compresión 1 a 1 en información contenida en MP3 se le denomina "codificación". Los estándares de tratamiento de sonido con calidad digital para aplicaciones multimedia incluyen las siguientes características técnicas:
Frecuencia de muestreo: 44 Khz
Bits de muestreo: 128 kbits
Canales: Stereo
Con la aplicación de estos parámetros de decodificación, el archivo MP3 obtenido presenta la calidad de audición que ofrece el disco compacto: para esta frecuencia de muestreo, cantidad de bits de muestreo y canales estéreo, se obtiene la calidad digital del CD, pero a un décimo del tamaño esperado sin compresión lo cual se traduce en un beneficio respecto de espacio de almacenamiento.

Las nuevas versiones de los programas maquetadores de Macromedia, que son el standard utilizado en el mercado para la producción de este tipo de realizaciones, contemplan soporte para incluir archivo en el formato MP3 directamente al proyecto. Macromedia Flash permite importar archivos MP3 directamente a la librería de recursos en la que se está trabajando. El programa cuenta además con opciones para exportar el MP3 a la presentación o proyector final con las especificaciones que se quieran.

Por ejemplo: si la cantidad de canales se establece en mono, en lugar de estéreo, el tamaño de archivo se reduce prácticamente a la mitad. Esto se debe a que se elimina la información completa de uno de los canales.

Estos tres parámetros pueden ser combinados entre sí en sus distintos valores posibles, para poder obtener menores tamaños de archivo (mayor compresión), o bien para subir la calidad en la que se ha muestreado el segmento de sonido. Evidentemente, esto último produce un aumento en el tamaño de almacenamiento de sonido, poniéndose también aquí de manifiesto la relación entre calidad-tamaño de archivo.

Finalmente se puede concluir en que el seteado de calidad está supeditado a los requerimientos del proyecto multimedia en particular, o de la preponderancia o protagonismo que el sonido tenga dentro del contexto del producto final.

Por lo general el formato WAV es el primero en el que se graba el sonido, pero su razón de compresión es pobre respecto a la calidad (que es alta) por lo cual de esta primera captura se pasa al formato MP3, que es el que será finalmente utilizado.

Es importante considerar que el sonido se incluye en como un elemento funcional y comunicacional. No se debe incluir sonido por una mera ornamentación ya que el tiempo de procesamiento y el espacio en disco del proyecto final pueden aumentar considerablemente la complejidad del mismo.

Consideraciones acerca del componente de vídeo
Dentro de los elementos constituyentes de la multimedia, el video suele ser el de más difícil tratamiento, y el que debe ser ajustado en su relación calidad - tamaño de archivo con mayor precisión dado que el empobrecimiento de la calidad suele ser elevado en éste componente.

El video puede tener dos funciones dentro de un proyecto multimedia: por un lado provee animación y sonido de manera dinámica con fines recreativos, y por otro cumplir con su misión de servir como documental. Evidentemente esta última es la principal función del video dentro de la multimedia: la función de proveer un componente recreativo en movimiento lo cumple la animación directamente generada en el ordenador (por ejemplo los aportes hechos color flash).

El video digital presenta la engorrosa particularidad de arrojar tamaños de archivo excesivamente grandes: debemos recordar que un archivo de video entrelaza cuadros de imagen con pistas de audio, lo cual hace que la cantidad de información por unidad de tiempo sea mucho mayor que en los casos anteriores.

Lógicamente, el desarrollo de algoritmos de compresión para video fue uno de los desafíos más grande que se enfrentó en la multimedia para poder incluir éste componente en los espacios de disco limitado de los que se dispone. A esto se le suma un segundo problema: la necesidad de contar con el hardware apropiado y con la suficiente velocidad de procesamiento para poder interpretar y ejecutar las órdenes provistas por el algoritmo de decodificación en tiempo real para no perder la sincronización entre el audio y la imagen.

Esto es para poder conservar la cantidad de y cuadros por segundo mínima para seguir suministrando al ojo la ilusión de movimiento.

Originariamente la descompresión de un segmento de video se realizaba mediante software: un programa residente en la memoria del ordenador producía la descompresión en tiempo real de la información suministrada por el que clip de video, lo que estaba siempre sujeto a la velocidad de procesamiento total de la máquina. Con la popularización y el abaratamiento de que las tarjetas aceleradoras de video, fue posible tratar el video digital con mayor fluidez, en tiempo real, y sin pérdida de cuadros.

En este caso la descompresión se hace tanto mediante software como mediante hardware lo cual es un beneficio en la calidad final de la visualización.

Al algoritmo encargado de comprimir y descomprimir un segmento de video se le denomina, códec, de los cuales existe una gran variedad en el mercado

El proceso de comprimir video suele ser relativamente sencillo comparado con el paso previo que se debe hacer, que es la digitalización. El proceso de apertura de video suele ser la etapa más complicadas dado que éste, salvo excepciones, suele residir en formato analógico como por ejemplo el VH. Para poder llevar a cabo este proceso se debe contar con un ordenador que se encuentren debidamente configurada para poder capturar y procesar los segmentos de video que se encuentra en el formato analógico: con esto se está indicando que por un lado el ordenador debe contar con una tarjeta de captura de video, y por otro debe poseer la suficiente velocidad de procesamiento para poder manejar la gran cantidad de información procesada por unidad de tiempo. Otro requerimiento adicional es una gran cantidad de espacio en disco disponible a almacenar los segmentos de video que, en el proceso de captura, se encuentran en un estado descomprimido.

Consideraciones acerca de la animación
El componente animación por lo general se incluye dentro del proyecto en un formato y un tamaño de archivo que no comprometen ni la calidad ni el peso total de la producción multimedia. La generación de animación se realiza en programas que trabajan los elementos visuales de la animación en formato vectorial, lo cual conlleva a todas las ventajas de trabajar con vectores: gran precisión en el dibujo, fácil y trazado de contornos, independencia de la calidad respecto del tamaño del elemento, bajo tamaño de archivo final.

Los estándares de animación utilizados hoy en día, aseguran una máxima calidad y una gran variedad de efectos especiales con los que se puede enriquecer cualquier animación para ser insertada en multimedia. El programa de maquetación Macromedia Flash provee todas las herramientas necesarias para crear animación de máxima calidad y con una compatibilidad que asegura la correcta visualización en distintas plataformas y sistemas operativos, siempre que se provea las extensiones adecuadas para su funcionamiento. La capacidad de este programa para insertar además opciones de interactividad, hacen que la animación se enriquezca con la participación activa del usuario como operador de lo que está presenciando. Cabe destacar que la animación producida en este tipo de software no necesita proceso de captura, y solamente nos limitamos a la edición y producción de los archivos finales de animación.

Esto quiere decir que solamente se producirá proceso de captura para los componentes que así lo requiera, como por ejemplo la digitalización de una imagen que deba ser introducida dentro de una animación gestionada en el programa.

Existe otro tipo de animación que es la provista por los programas que realizan rendering, como es el caso de cualquiera de los programas 3 D existentes en el mercado. En este caso la animación obtenida con este tipo de software, se graba en formatos de video tal y como en el caso del que se captura digitalmente. Esto hace presuponer en que el tamaño de archivo tenido para este tipo de animación tiene las mismas limitaciones en cuanto al espacio de almacenamiento que el video digital. La inclusión de animación puede contemplar efectos de la tipografía, tratamiento fotográfico, fusión entre formas, desplazamiento de objetos simples y complejos, etc.

Como en el caso de sonido y el video la animación también puede tener una misión ornamental o recreativa y otra de tipo documentalista o informativa, lo cual la hace muy apropiada para la demostración de principios de funcionamiento, títulos animados, publicidades, instrucciones para el operador o usuario y cualquier otro tipo de aplicación que el diseñador decida dar.

Autor: Ariel Amadio. Mendoza. Argentina. Conferencia Dictada en la Ciudad de Cordoba.
Diseñador Industrial y Docente de Diseño Gráfico y Diseño Multimedial de la Fundación Gutenberg Mendoza.