Planeación y Desarrollo de Web Site

Bibiana Solórzano Palomares

Escuela Mexicana de Arquitectura, Diseño y Comunicación UNIVERSIDAD LA SALLE

INTRODUCCIÓN

Con el advenimiento de la red mundial de infor- mación (World Wide Web) la posibilidad de una forma de presentación, sólo electrónica, de diversos documentos ha surgido como resulta- do de la evolución de Internet. Al terminar la década de los años sesenta, el Internet se usaba sólo para la transmisión de información escrita, en reducidos círculos científicos. A prin- cipios de los años ochenta, se inicio la trans- misión de graficas e imágenes. Es demasiado pronto para saber cuál será el efecto final de la red en las publicaciones domésticas y corporati- vas; sin embargo, no hay duda de que el mate- rial que alguna vez se imprimía en forma rutina- ria para su presentación, tiende a convertirse en una forma puramente electrónica. Con el Web, ciertas potencialidades clave de la PC en red han logrado su primera síntesis real. Más que ser tan sólo el facsímil en pantalla de un mate- rial impreso, el documento Web es algo único, que no puede realizarse de ningún otro modo. El medio es una vez más el mensaje. Además, el Web es un medio de interactividad. El poten- cial del Web para reemplazar ciertos aspectos de la comunicación impresa, se basa en el he- cho de que puede ser la mejor opción para el diseño, presentación y realización de proyectos.

Un sitio Web es un sistema de publicación y distribución como ningún otro en la historia. Aunque su forma está muy lejos de ser estable- cida (nuevos navegadores y otras tecnologías parecen surgir con cada estación del año), exis- ten ya, de manera muy clara, ciertas ventajas de la publicación basada en el Web:

1. El Web permite el uso de una forma de publi- cación “en el momento preciso”. La informa- ción se distribuye sólo cuando se solicita. No hay inventarios que requieran almacenarse, y no se tienen desperdicios relacionados con la sobreproducción.

2. El Web proporciona acceso a una audiencia global. No tiene un lugar centralizado, y no

Recibido: Mayo de 2003. Aceptado: Julio de 2003.

hay fronteras. Cuando un usuario se conecta a cualquier parte del Web, se conecta esen- cialmente a la totalidad del mismo.

3. Una página Web permite a los usuarios inter- actuar con la información y con el proveedor. La información significativa fluye en ambas direcciones.

4. El Web está creando ”comunidades de inte- reses”. Una de las consecuencias más im- pactantes de la revolución de Internet ha sido crear la posibilidad de generar comuni- dades virtuales, de gente que comparte un interés o una situación en común. Estos gru- pos auto selectivos son audiencias naturales para ciertos mensajes y servicios.

5. El Web es un fenómeno de innovación en va- rios aspectos. El tamaño del público Web si- gue aumentando de modo exponencial y la base tecnológica que lo soporta está apenas llegando a su fase más dinámica de cre- cimiento. Mejoras en el ancho de banda, he- rramientas de desarrollo y software para el soporte de sitios con seguridad, harán del Web un medio masivo progresivamente más estable e integral.

Apenas en 1994, pocos diseñadores profe- sionales estaban involucrados en diseño para el Web. Ese medio no había alcanzado su actual popularidad, y las posibilidades de conseguir un nivel de complejidad gráfica en el diseño de pá- ginas eran en verdad escasas. Aunque se ha- bían tenido mejoras significativas para liberarse de las limitantes de los primeros navegadores del Web y los primeros dialectos de HTML, el Web es aún un lugar muy primitivo para la ma- yoría de los diseñadores. El éxito del Web obe- dece más a su penetración que a la calidad de su contenido o su forma.

Los controles tipográficos se limitan a esta- blecer márgenes, a teclear retornos de carro al finalizar un renglón y a elegir entre un pequeño conjunto de tamaños de tipos previamente

definidos; la especificación de fuentes particu- lares es arriesgada en el mejor de los casos; las imágenes se limitan a la resolución de la pan- talla y están muy forzadas, tanto en sus paletas de color como en el tamaño del archivo; el soporte para estructurar páginas (definición de rejillas o entramados, columnas y capas) es muy básico e involucra un montaje provisional significativo del código HTML para obtener los resultados de diseño deseados.

A medida que los diseñadores se familiaricen con lo que se puede o no se puede hacer for- malmente en HTML, también deben redefinir su proceso de diseño para adaptar nuevos ele- mentos alcanzados por el Web, tal como pro- gramación de computadoras, diseño de interac- ción y mantenimiento de software. A medida que los programas de diseño de páginas fuer- cen a los diseñadores a representar su papel con respecto a la tipografía y el proceso de pre- prensa, el diseño de páginas Web obligará a adaptarse a ciertos aspectos de la codificación en computadoras.

La presencia de ordenadores en los escrito- rios de los diseñadores, desde mediados de los años ochenta, ha revolucionado el proceso del diseño y su enseñanza en tres aspectos princi- pales:

1. Las palabras, fotografías e ilustraciones, se han liberado de su relación física con superficies como el papel y las diapositivas. Descompuestas en secuencias de unos y ceros por un programa informático, se tor- nan fáciles de manipular e independientes de la resistencia tangible de un material, además de que se consigue reducir signi- ficativamente los costos.

2. El lenguaje tradicional de la comunicación visual no incluye verbos. Productos habi- tuales como las instrucciones y los manua- les se presentan secuencialmente, con el soporte adicional de flechas y otras figuras simbólicas. El empleo de estos símbolos y otros recursos gráficos es posible gracias al acuerdo sobre su uso convencional entre el artista y el espectador. Por primera vez en la historia podemos introducir en el orde- nador programas como Hypercard, Director y Flash, que permiten diseñar una narra- ción de texto e imágenes y, lo que es más importante, vincularla a una red de conexio-

nes hipertextuales. El tiempo y la interac- tividad están de nuestra parte.

3. Al conjunto de canales tradicionales de comunicación (imprenta, radio, cine y tele- visión) se ha añadido recientemente Inter- net, con sus consecuencias para la vida cultural, educativa y social; unas conse- cuencias que resultan imposibles de prede- cir.

DISEÑO EFICIENTE EN EL WEB

El diseño de un sitio Web eficiente es una tarea compleja y requiere mucho tiempo. Sólo la construcción del primer prototipo de un sistema puede llevar meses de esfuerzo. El sitio debe ser suficiente tanto técnicamente como en su di- seño de navegación, y debe funcionar en am- plia variedad de configuraciones computacio- nales. Obtener un diseño correcto para un sitio, la primera vez, es un reto considerable. Las si- guientes guías sirven para evitar algunos de los principales errores que se producen en el dise- ño del Web.

1. Ancho de banda. No importa qué tan bien logrado esté el diseño de un sitio, o cuán útil sea la información que en él se suministre, se usará poco si no se despliega en un tiem- po razonable. Nada alejara más rápido a los visitantes que un sitio lento. Debido a que gran cantidad de usuarios de Internet se conectan con módems lentos, es importante que toda página Web tenga un tamaño míni- mo. Una regla práctica estándar para la velocidad de transmisión, pensando en los usuarios de bajo nivel, es de alrededor de 1 kilobyte de datos por segundo. Para que una página web llegue en 30 segundos (espera medianamente larga) la página completa no debe tener más de 30K.

2. Requerimientos del usuario y pruebas de los diseños. Los sitios Web deben diseñar- se para ser usados, no sólo admirados. El usuario por lo regular acude a un sitio por una razón, y con expectativas acerca de lo que podrá conseguir. Entre más pronto com- prendamos las metas de los usuarios, mejor adaptado estará el sitio a dichas metas. La única manera efectiva de ver si un diseño satisface las necesidades de los usuarios, es hacer que éstos lo sometan a prueba y lo observen con detenimiento. La frecuente retroalimentación con los usuarios durante el

ciclo de diseño es el sello del buen diseño de interacción.

3. Analizar bien las nuevas tecnologías. El Web está en constante evolución, con nue- vas tecnologías de formato y agregados que aparecen a diario. Si se diseña para el Web es casi imposible no estar al pendiente de la tecnología de vanguardia, y es natural que- rer aprovecharla. Pero, a la mayoría de los usuarios de la red no les importa la tec- nología Web. Muchos sólo actualizan su soft- ware cuando ya no pueden hacer las cosas sencillas que desean.

4. No hay que sobrepasarse. HTML, Javas- cript, Shockwave, Flash, Streaming Vídeo y otras tecnologías pueden agregar mucho atractivo a un sitio, pero también pueden tomar el lugar del propósito del sitio y robar la atención del usuario, convirtiendo los atractivos en riesgos. Se debe tener cuidado en la colocación de elementos llamativos en la página sólo porque están disponibles. Estos elementos suelen ser bastante grandes y sólo deberían utilizarse para mejo- rar el contenido del sitio, no para distraer la atención.

5. Un sitio Web nunca se termina. El medio está hecho a la medida para la evolución del contenido, y es inevitable agregar nueva información con regularidad. No se debe pensar en cada página como una nueva composición. En lugar de ello, conviene crear un formato que facilite la transforma- ción constante de todas las secciones del sitio. Con el uso de una rejilla para ayudar a definir el arreglo de las páginas, agregar una página se convierte simplemente en asunto de aplicar un diseño. También hay que tomar en cuenta que el número y los nombres de las selecciones del sitio evolucionarán. Así mismo es recomendable diseñar paneles de navegación que puedan cambiarse con facili- dad para reflejar nuevas arquitecturas del si- tio.

6. Utilizar diferentes plataformas. El error más grande que cometen los diseñadores primerizos del Web es elaborar sitios Web en una sola máquina, usando sólo un navega- dor para probarlos. Las páginas Web apa- recen de manera sorpresiva en muchas for- mas de máquina, y de navegador, así que es esencial verificar el trabajo en diversas máquinas durante el desarrollo.

7. No hacerlo todo. Al principio del Web era

imposible, con poco esfuerzo, dominar todos los aspectos de la tecnología Web. El diseño de un sitio implica habilidades significativas en diseño gráfico, aplicaciones de software, HTML, programación orientada a objetos, escritura, edición, administración y manteni- miento de sistemas. La única manera sana de trabajar en este creciente medio es hacer equipo y delegar responsabilidades. Se a- prenderá mucho más acerca del Web traba- jando con expertos en otras áreas, que si se estudiaran esos temas de manera aislada.

8. Ofrecer opciones en las páginas. Muchos usuarios visitan el Web usando, de manera deliberada o no, navegadores antiguos. O- tros más eligen visualizar las páginas Web en su mayor parte empleando el modo sólo texto. Es buena práctica construir un sitio a fin de que funcione para todos los que lle- guen a él sin los medios para verlo con todas sus características, así como proporcionar vistas alternativas del contenido cuando sea posible. Con un poco de programación es posible detectar qué navegador está usando un visitante y si se dispone de ciertos agre- gados. Muchas tareas de HTML, tales como las que crean recuadros, ofrecen una mane- ra de proporcionar dichos agregados para u- suarios sin los medios necesarios.

9. Aprovechar la memoria caché. Un sitio bien diseñado tendrá muchas páginas que compartan elementos comunes. Paneles de navegación, elementos gráficos y de texto pueden aparecer en casi cada página del sitio. Esta repetición no sólo ayuda a estruc- turar el contenido del sitio, sino que también reditúa grandes dividendos en su desem- peño. Puesto que un elemento gráfico se almacena de manera local en la caché del disco del usuario la primera vez que se des- pliega, se puede emplear una y otra vez sin perder tiempo esperando que llegue por la red. El diseño de elementos debe considerar siempre su posibilidad de reutilización, es preferible evitar cambios innecesarios. De- masiada variedad casi siempre significa pér- dida de tiempo para el usuario.

10. Entender qué se puede y qué no hacer. A pesar de todos los intentos para hacer que lo parezca, una página Web no es una página impresa. Muchos diseños de sitios fallan debido al intento de los diseñadores por simular la apariencia y el aspecto de una hoja impresa. Regularmente, los intentos por

limitar el medio a la apariencia de un impreso dan como resultado una descarga muy lenta y páginas difíciles de actualizar. El diseño del Web siempre implica un equilibrio entre de- sempeño y calidad visual.

CONCEPTOS BÁSICOS

ARQUITECTURA, UBICACIÓN Y NAVEGA- CIÓN DE SITIOS WEB.

Que la exploración de un sitio sea placentera o frustrante depende mucho de su estructura, de la claridad de sus jerarquías de información y de la relevancia y versatilidad de sus hipervín- culos. Para navegar con éxito, los usuarios deben saber dónde están, confiar en su meta y saber que pueden regresar con facilidad. Esto depende de una exitosa organización de la in- formación y de hacerla clara mediante el diseño de controles de navegación.

RED O ÁRBOL

Los sitios Web se componen de páginas conec- tadas por múltiples hipervínculos. El número, la dirección y organización de estos vínculos de- terminan la arquitectura de información de un sitio. El diseño de una arquitectura de sitio re- quiere de un cuidadoso equilibrio entre facilidad de acceso, y la necesidad de establecer catego- rías y subcategorías de información para benefi- cio del usuario.

Para la mayoría de las situaciones de diseño, la estructuración comienza con el aislamiento de las distintas categorías de información que se incluirán. Estas categorías deberían prever las clases de acceso que el público espera.

Después se dividirán repetidamente en niveles jerárquicos sucesivos hasta que se establezca una forma de árbol. Los árboles ofrecen tres beneficios principales:

El primero, poder extenderse con facilidad. Agregar una nueva área a un sitio requiere sólo de modificaciones menores de las páginas de más alto nivel (agregando un vínculo de gráfi- cos adicional).

El segundo, un árbol es un concepto familiar para la mayoría de los usuarios (más que una red estructurada libremente), así proporciona un buen modelo mental para los usuarios del esquema. Finalmente, un árbol impone orden de navegación.

Para llegar a una página en la parte baja en la jerarquía del sitio, los usuarios deben pasar por varios niveles intermedios. Estas páginas intermedias dan un contexto para quienes las siguen y llegan a ser señas familiares para el camino de regreso.

Los árboles dan un modelo ideal para la in- formación estructurada, aunque por lo regular son demasiado rígidos para ser el único soporte de la navegación. La mayoría de los sitios usa- rán una estructura que también contenga un arreglo de vínculos transversales y de regreso.

En un diseño exitoso, estos vínculos estarán limitados en número, conduciendo sólo a pági- nas clave para la navegación y evitando cuida- dosamente la confusión en la jerarquía del sitio.

MAPAS DEL SITIO

Cuando el usuario llega por primera vez a un sitio no tendrá idea de su tamaño, contenido u organización; además, necesita tener una idea del terreno que pisa, para saber qué regiones del sitio existen y cómo se interrelacionan.

Un enfoque obvio consiste en proporcionar un mapa. Los mapas son muy útiles en sitios extensos con muchos temas y subtemas. Un mapa puede trasmitir de inmediato el tamaño del sitio, mostrar las subcategorías bajo un en- cabezado de sección principal y dar un camino útil para usuarios que quieran recorrer una extensa jerarquía del sitio sin perder su ubica- ción. Un mapa de sitio puede adoptar muchas formas: una lista tipográfica, un esquema, una combinación de ambas o incluso una secuencia animada.

PÁGINA INICIAL

La página inicial o de apertura puede establecer el tono de la publicación entera e introducir a los usuarios a la estructura del sitio y sus métodos de navegación. Al igual que la portada de un libro o una revista, atrae al observador y permite vislumbrar el contenido. Algunos sitios incluyen una tabla de contenido o un limitado índice en la primera página. Otros constan de una sola ima- gen o de una breve animación de apertura.

La elección correcta para un inicio de sitio puede depender de varios factores: la naturale- za de la información del sitio; la frecuencia con la que los visitantes vuelven a él; la frecuencia con la que cambia la información del sitio. En si- tios muy conocidos y visitados con frecuencia, no hay lugar, ni necesidad, para una página de portada por separado. En lugar de ello, se reci- be a los usuarios con una página de contenido restringida y manejable que les permite comen- zar a recuperar su información de inmediato.

REFERENCIAS CRUZADAS

Hay dos aproximaciones básicas para las refe- rencias cruzadas. Una es separarlas todas, en- viándolas a otros artículos o sitios y la otra es incrustarlas en el texto.

Una encuesta interactiva interroga a los lec- tores sobre sus puntos de vista acerca de un tema de controversia expuesto en el texto prin- cipal. Se dan también lugares de conversación (chat rooms), tableros de mensajes electrónicos (bulletin boards) y vínculos externos al sitio. Al mantener vínculos al exterior del artículo se esti- mula a los lectores a continuar y a buscar infor- mación afín por separado.

VÍNCULOS CON CÓDIGO DE COLOR

El color es una de las señales más comunes y eficientes para detonar vínculos de texto donde hacer clic. En los primeros días del Web el color de los vínculos de texto estaba determinado exclusivamente por una configuración del nave- gador y se encontraba fuera del control del dise- ñador. Esta limitante se ha superado, pero la noción de que el texto en color implica un hiper- vínculo está muy arraigada en la mayoría de los usuarios. Aunque algunas personas aún abogan por un color estándar, sin cambios, para víncu- los de texto, la aplicación de color al texto es una de las pocas variables tipográficas que los diseñadores gráficos tienen para dar vida a una página. Que un vínculo esté en azul o en rojo es menos importante que asegurar que sobresalga del texto restante.

Que el Web llegaría a ser un medio de comu- nicación comercial en el ámbito mundial, in- tegrando los mundos de la edición de publica- ciones, el correo electrónico, el vídeo digital y

las tecnologías de bases de datos interactivas quizá no se previó por sus fundadores. Se concibió para que científicos e investigadores comprendieran información técnica, el Web y su lenguaje de descripción de páginas HTML; se diseñó para transportar el contenido en forma legible más que para apoyar elaborados dise- ños de página. Un buen diseño de página Web aún se presenta principalmente a pesar del me- dio y, como en sus inicios, la promesa del medio sobrepasa mucho su rendimiento real. Pero todo mejora con rapidez.

FORMATO HTML BÁSICO (LENGUAJE DE MARCADO DE HIPERTEXTO)

El punto de arranque básico de una página Web es la ventana misma del navegador. El con- tenido formateado HTML (Hyper Text Markup Language) se presenta en un flujo lineal, y cada página Web se vierte esencialmente en la ven- tana del navegador lineal y de arriba hacia abajo. Esta calidad de flujo de la transmisión de la página Web matiza mucho el diseño del lenguaje HTML que es una forma de lenguaje de marcación, un enfoque para describir el esquema de la página mediante la incrustación de un código de formato directamente en el con- tenido de la página. Cada código de formato en HTML es en esencia un modo que comienza, afecta el aspecto de cierta cantidad de con- tenido y luego termina.

A medida que la información llega al navega- dor, se coloca en secuencia a través y hacia abajo de la página, elemento por elemento, hasta que se encuentre ya sea el borde de la página o bien un fin de línea explícito. Como re- sultado, el diseño de una página Web, como se describe en HTML, debe articularse en estricta secuencia.

ESTRUCTURACIÓN CON TABLAS

Si hay un elemento que haya revolucionado el diseño de las páginas Web, éste tendría que ser la tabla.

Introducidas por primera vez en 1995, las tablas dieron una manera de dividir la ventana del navegador en varios bloques de dimen- siones fijas que permanecían sin afectarse por la forma de la ventana del navegador. Con las tablas, los diseñadores tuvieron un terreno más familiar. Finalmente podía crearse una especie de rejilla para permitir a determinados diseñado- res exhibir un grado de complejidad gráfica en el Web, impensable hasta entonces.

Las tablas HTML nunca pretendieron servir como herramientas de diseño de propósito general. Se diseñaron, de acuerdo con su nom- bre, para exhibir datos tabulares simples, tales como estadísticas, y cifras financieras. La mayoría, si no la totalidad de las propiedades de las tablas, se basan en este uso. Dos pro- piedades de las tablas condujeron a su transfor- mación en herramientas de diseño de página: primero, las celdas podían ajustarse a cualquier tamaño; por consiguiente, las tablas podían ocupar la página entera. Segundo, los bordes de una tabla podían hacerse invisibles, que se comportaran, de alguna manera, como una re- jilla de diseño tradicional.

COLOR EN EL WEB

El Web es un medio único en el que la tecno- logía usada para crear la comunicación, la PC, es la misma que se usa para que el lector la vi- sualice. Pero, con las muchas sutiles diferen-

cias entre marcas y configuraciones de com- putadoras, a los diseñadores de Web se les difi- culta prever cómo aparecerá su trabajo, en las máquinas de los distintos usuarios. Un área cla- ve es el color. Puesto que hay poca estandari- zación en las computadoras se dispone de ciertas técnicas y tecnologías que hacen del color en plataforma cruzada una posibilidad.

Los diseñadores que trabajan en el mundo de la impresión han aprendido por dolorosas experiencias que los colores que ven en pan- talla de la computadora serán muy diferentes de los que al final saldrán impresos. Para superar esto, han aprendido a prever cómo se verán ciertos colores cuando aparezcan en tinta. Tam- bién aprendieron el valor de elegir colores a partir de un sistema de color predefinido, tales como los sistemas Pantone o Trumatch, diseña- dos para aprovechar las tecnologías de la pro- ducción final.

Irónicamente, los diseñadores de Web han tenido que enfrentar problemas similares aun cuando el material básico de una página Web se hace y exhibe en lo que parece ser el mismo medio, la pantalla de la computadora. La razón es que los sistemas de computación competi- dores desarrollaron diferentes modelos de vi- sualización de color que, a su vez, reflejan cier- tas diferencias en su hardware y en su evolución en el tiempo.

El arte de diseñar una página Web es crear la experiencia de que es uniforme para todo el público. Una página debería parecer la misma si se crea en Windows, Unix o Mac, o si se visualiza en pantallas en color de 24 u 8 bits.

La comprensión del papel que desempeña el color en el diseño de una página Web es cru- cial, no sólo por su importancia para la calidad de la imagen, sino también debido a que el color es un factor clave en la determinación del

tamaño de archivo de la imagen y, por tanto, de la velocidad con la que se desplazará por la red.

La administración del color requiere de un conocimiento fundamental de cómo se repre- sentan las gráficas de mapas de bits por la com- putadora. Esto significa comprender la relación de la profundidad de color de la imagen con el número de colores disponibles para presentarla, y el papel que desempeñan esas paletas en el mapeo de color de una máquina a la siguiente.

PROFUNDIDAD DE COLOR

Las imágenes en color en una computadora vienen en dos tamaños estándar: 24 bits o ’’color verdadero’’, y 8 bits o ’’color indizado”. Las imágenes en color verdadero contienen píxeles que se describen como intensidades de los primarios aditivos: rojo, verde y azul. Estas descripciones de color son exactamente las empleadas por un monitor de computadora, de modo que una imagen de 24 bits puede repre- sentarse con completa exactitud. El resultado es un nivel de calidad casi fotográfico.

Por otro lado, las imágenes en color indizado tienen sus colores descritos en referencia a una paleta fija y con frecuencia muy limitada. El al- macenamiento de los colores de manera sepa- rada de la imagen da como resultado reduc- ciones significativas en la cantidad de memoria requerida para almacenar la imagen.

Las computadoras también vienen en varie- dades de 8 y 24 bits, pero en este caso estos términos se refieren a la capacidad de la com- putadora para exhibir el color. Una computadora con 24 bits de color será capaz de mostrar cualquier gráfica de 24 bits o menos con una completa resolución de color. Por otra parte, una máquina de 8 bits tendrá dificultades para exhibir con exactitud las imágenes con gran cantidad de información de color. Una imagen de color verdadero llevada a este ambiente, por ejemplo, tendrá que disminuir su escala de colo- res a fin de que pueda verse.

PALETAS SEGURAS DEL SISTEMA

Cuando una imagen que contiene imágenes se está descargando de la red en una máquina con solo 8 bits de color, debe exhibirse median- te el uso de la paleta del sistema de la computa- dora. Por desgracia, las paletas del sistema de los dos entornos de computación más popu- lares del mundo no son las mismas, de modo que el aspecto de un elemento gráfico visto en un entorno puede no ser el mismo cuando se observa en el otro. En respuesta a esta si- tuación, los diseñadores Web han llegado a depender de una paleta que utiliza sólo aque- llos colores comunes tanto en paletas de los sistemas Mac como Windows. Conocido como el ’’Cubo de Color Netscape’’ o la ’’paleta 6x6x6x’’, este conjunto de 216 colores ha llega- do a ser el estándar de color para Web. Las imágenes mapeadas a esta paleta (lo que se hace de modo automático por los principales navegadores Web) serán idénticas sin importar el tipo de la plataforma.

EL CUBO DE COLORES

Los 216 colores de la paleta segura del Web se representan en tres cartas de color. Cada carta es idéntica para las unidades de mezcla de color usadas para identificar los colores. Los elementos gráficos incluidos en la página Web provienen de varias fuentes diferentes, como digitalizadores (escáner), captura de video digi- tal, sistemas de dibujo y pintura, y software de procesamiento de imágenes. Estos dispositivos y paquetes de software a menudo pueden defi- nir el color en diferentes unidades, así que es

conveniente pensar en los colores Web seguros en diversos formatos.

ESCALA DE COLOR DE 8 BITS

Muchas aplicaciones gráficas definen el color como valores RGB especificados en un interva- lo de 0 a 255; el 0 representa la ausencia de color y el 255 intensidad máxima. Esta escala se basa en la manera en que las computadoras y el hardware de las mismas representan inten- sidades de color; como un byte (u 8 bits) de información. Un color RGB, o de 24 bits, tendrá 1 byte por componente de color disponible para describir su mezcla.

ESCALA HEXADECIMAL

Cuando se especifica el color en el lenguaje Web, HTML, se requiere de números aún más enfocados al lenguaje de máquina. Con base en el número 16, el sistema numérico hexadecimal también es la base para especificar el color del tipo Web, los colores de fondo y ciertas caracte- rísticas de estructuras de formato Web como tablas y recuadros.

Mientras que los sistemas de diseño interac- tivo de páginas Web pueden alejar a los usua- rios de luchar con este formato, la mayoría de los diseñadores quieren ser capaces de introdu- cirse al código básico HTML y editar el color de manera directa. Los números hexadecimales son una manera de representar números en ba- se 16, en lugar de hacerlo en nuestra familiar base 10. En lugar de los 10 símbolos usados en nuestro sistema de conteo [0,1,2,3,4,5,6,7,8,9], el hexadecimal emplea 16 símbolos [0,1,2,3,4,- 5,6,7,8,9,A,B,C,D,E,F].

FORMATOS GRÁFICOS

Al diseñar para la Web, la primera prioridad es reducir el tiempo de descarga de archivos al

mínimo. Para determinar un tamaño aceptable de una página Web, los diseñadores centran su atención en los miembros menos privilegiados de su público objetivo, usuarios con módems lentos (14.4 kbps). Ellos recibirán una página a casi 1K por segundo. Por esto, la mayoría de los diseñadores trabajan muy duro para man- tener las páginas por debajo de los 40K (40K para todo el texto, gráficos y códigos HTML de formato). Lo que hace posible superar esta aparentemente absurda limitante, es la com- presión de imágenes. La tecnología de compresión permite que las imágenes sean comprimidas de manera considerable antes de su transmisión, y que se restauren de nuevo dentro del navegador del usuario. Para diseñar una página Web, es obligatorio comprender los dos enfoques básicos de la compresión que son apoyados por el Web y los tipos de archivos que usan.

ARCHIVOS GIF (FORMATO DE INTERCAMBIO DE GRÁFICOS)

Los archivos GIF (Graphic Interchange Format) son perfectamente adecuados para gráficos que sean planos, geométricos y de color unifor- me. Se emplean sólo para áreas de fondos sóli- dos, pancartas y tipos de pantalla. Los archivos GIF están limitados a 8 bits de color y usan un proceso denominado ’’codificación por longitud de paso’’ (run-length encoding) para comprimir una imagen, convirtiéndola en una serie de seg- mentos de línea horizontal de color continuo. Al no representar cada píxel individualmente, este enfoque da ahorros de hasta 10:1.

La cantidad de ahorro de un archivo GIF está en función directa de su distribución de color.

Las formas horizontales se comprimen mejor que las que son predominantemente verticales, y las formas verticales lo hacen mejor que las dispuestas en ángulo. Las imágenes de tono continuo, como los gradientes, tienen pocas pa- sadas horizontales, se comprimen en forma de- ficiente y deben evitarse.

GIF DE PIXEL SIMPLE

El elemento indispensable que usan los diseña- dores de página para manipular el espacio es el GIF de píxel simple. Con él se aprovecha el so- porte de archivos GIF para la transparencia y la capacidad de los navegadores, para redimen- sionar imágenes después de que llegan por la red.

El GIF de píxel simple (o GIF espaciador) es un gráfico de 1 píxel por 1 píxel establecido con transparencias o del mismo color que el fondo de la página. Éste puede colocarse en cualquier lugar de la página y ajustarse para ocupar cual- quier cantidad de espacio vertical u horizontal.

ANIMACIÓN GIF

En la medida que el ancho de banda de la red aumenta, las posibilidades para la animación en tiempo real de las páginas Web mejoran. Pero para muchas aplicaciones una opción muy sen- cilla y efectiva es el archivo GIF animado.

Comenzando con Netscape 2.0, los navega- dores han empezado a tratar los archivos GIF de imágenes múltiples como secuencias ani- madas. Cuando un archivo GIF de imágenes múltiples llega al navegador del usuario se carga de inmediato su primer ’’cuadro’’, acto seguido, el segundo cuadro del archivo reem- plaza al primero.

Cada cuadro subsecuente se carga por turno hasta que el contenido del archivo se agota. Además de los recuadros de animación, el archivo puede contener información de cuántas veces debería repetirse dicha animación, si se repetirá en forma indefinida, o cuánto tiempo debería transcurrir entre cada recuadro.

Los efectos de animación GIF rara vez son refinados y su desempeño dependerá del usuario y de la conexión a la red. Pero, si se emplea con cuidado, la animación GIF puede

ser bastante efectiva con sólo un pequeño tamaño de archivo. Un beneficio adicional es que a diferencia de algunos otros formatos de animación, las animaciones GIF no requieren de agregados especiales.

GIF TRANSPARENTE GIF89A

Para muchos diseñadores de sitios, una herra- mienta principal para obtener complejidad vi- sual mientras mantienen los tamaños de archi- vos dentro de los límites, es el archivo GIF transparente. Una imagen GIF que parece flotar por encima de una página Web, sin borde ni fondo. A un número específico de la paleta de colores GIF (#89) se le asigna que sea del mis- mo color que el fondo de la página, lo que le da a la imagen un aspecto de transparencia. Las páginas Web, hasta muy recientemente, han admitido el uso de sólo dos capas de informa- ción. La capa del primer plano, que mantiene el núcleo del contenido de la página, y la capa del fondo, limitada a un solo color o a una imagen gráfica sencilla. El tipo de archivo Gif89a per- mite crear gráficas de mapas de bits que tienen un color particular configurado para ser trans- parente. Estos elementos, cuando se colocan sobre el fondo, permiten que el color o imagen subyacentes se muestren a través de ellos. Como resultado, pueden crearse relaciones complejas entre texto e imagen (o entre imagen e imagen) sin tener que tratar la página entera como una enorme gráfica. Una vez que el fondo de una página se ha descargado, pueden se- guir pequeños GIF transparentes.

ARCHIVOS JPEG (GRUPO DE EXPERTOS FOTOGRÁFICOS)

La comprensión JPEG (Joint Photographic Ex- pert Group) se destina para imágenes que con- tienen grandes áreas de color de tono continuo. Esto hace a la compresión JPEG la elección natural para imágenes fotográficas. A diferencia de los archivos GIF, los cuales trabajan sólo con

imágenes de color de 8 bits o menos, los archivos JPEG suponen que una imagen es de 24 bits o ’’millones’’ de colores”. Dependiendo de la elección de configuración de la calidad (Photoshop ofrece cuatro: baja, media, alta y máxima), el tamaño de imagen puede reducirse en alguna parte de entre 10:1 hasta 100:1. Junto con el hecho de que las imágenes en pan- talla son apenas de 72 puntos por pulgada, este grado de reducción permite que lleguen imá- genes a pantalla completa en tan solo 50 Kilo- bytes.

La compresión JPEG se basa en ciertas propiedades del ojo humano, en particular el hecho de que la visión humana es más sensible a los cambios graduales en brillo y color que a cambios bruscos a corta distancia. La compre- sión JPEG divide una imagen en ciertas zonas y descarta de manera selectiva la información de color que hay en áreas demasiado sutiles para ser percibidas por el ojo. Al hacer esto la com- presión JPEG altera permanentemente la ima- gen. Cuando la imagen se reconstruye después de ser abierta en un navegador o programa de imagen, se verá, después de una inspección, bastante diferente de su estado original. Los esquemas de compresión que tienen esta propiedad se describen como incompletos, con pérdidas (lossy). En contraste, las técnicas de compresión que restauran una imagen intacta (como la codificación por longitud de paso) son conocidas como ’’sin pérdidas’’ (loss-less). Es importante tener presente esta distinción cuan- do se use la compresión JPEG. Es esencial que sólo se aplique una vez por imagen, cuando toda la edición y modificación esté completa.

Los formatos de archivos GIF y JPEG han existido durante varios años y continúa su evolución. Los archivos GIF, por ejemplo, vienen en dos presentaciones: el obsoleto for- mato Gif87a y el más versátil formato Gif89a. Una adición bastante reciente a la familia JPEG es el archivo JPEG progresivo (P-JPEG). Este formato es básicamente un archivo JPEG con- vencional, pero ofrece compatibilidad para entrelazado adicional. El apoyo a este formato está ganando aceptación en la mayoría de los principales navegadores. También se le conoce como ProJPEG.

Una prometedora extensión al archivo GIF, aunque todavía no admitida por los navegado- res actuales, es el formato PNG (Gráficos Por-

tátiles en Red).

Es un formato de archivo de imágenes utiliza- do en la red, que facilita la compresión sin perdi- das de 10 al 30%. Además, permite trabajar con la transparencia a través de canales alfa. Tam- bién permite que el brillo de la imagen se adapte a las distintas plataformas o sistemas opera- tivos, y permite también el entrelazado.

Este formato promete una mejora significati- va sobre el archivo GIF, al ofrecer una codifi- cación de longitud de paso más eficiente, 24 bits de color en vez de 8 y corrección gamma para mejorar el color de plataforma cruzada.

EL SOFTWARE DE COMPONENTES Y WEB

La más moderna tendencia en programación, llamada programación basada en componentes, está extendiendo su alcance hacia World Wide Web. En la actualidad se libra una batalla por el derecho de ser la norma definitiva en cuanto al funcionamiento de los componentes en Web. Los componentes son pequeños programas que pueden ensamblarse para formar una aplicación modular en tiempo real (conforme a lo que se necesite). La belleza de los componentes es que pueden escribirse en lenguaje de platafor- ma cruzada y después compilarse para trabajar en plataformas específicas. Por ejemplo, si se requiere de un revisor ortográfico para una hoja de cálculo, puede usarse un componente y no tener que adquirir un programa grande, como Microsoft Excel, para tener esa función.

La programación basada en componentes llegó al Web en forma de una lucha por la aceptación de estándares entre el lenguaje de programación Java, de Sun, la tecnología O- penDoc de Apple e IBM, y la tecnología de Mi- crosoft anteriormente llamada OLE.

Básicamente, Netscape Navigator decidió utilizar los applets de Java y su propio Java- Script para darle extensiones a las funciones básicas del navegador.

La batalla es sobre dos modelos de cómo crecerán los navegadores Web y, por tanto, de cómo se usará el software de componentes para mejorar las páginas. Microsoft depende del Modelo Distribuido de Objetos Componentes (DCOM, Distributed Component Object Model),

en tanto que Netscape, Apple, IBM y Sun, se han puesto de acuerdo con la Arquitectura Común de Corredor de Solicitudes de Objetos (COBRA, Common Object Request Broker Ar- chitecture) del Grupo de Administración de Ob- jetos. Estos modelos rivales nos obligan a de- cidir qué navegador usar, pero se tiene que publicar las páginas tanto para Internet Explorer como para Netscape Navigator (así como para otros de menor capacidad, como Lynx de Unix y Mosaic de NCSA). Afortunadamente las tecno- logías hacen lo mismo, permitiéndonos ver objetos colocados en HTML, como animaciones GIF, realidad virtual y objetos de Shockwave (como ilustraciones de FreeHand y animacio- nes de Director). La diferencia está en cómo lo hacen.

PLUG-INS (SUB-PROGRAMAS)

Netscpe Navigator empezó a reforzar las capa- cidades de su navegador y de los archivos (lla- mado auxiliar), que despliegan y reproducen archivos ajenos, a los cuales se hace referencia en el HTML. Los plug-ins (o sub–programas) son específicos de cada plataforma; se tiene que saber en qué sistema operativo de com- putadora funcionará el plug-in, no todos funcio- nan en todos los sistemas. La ventaja de usar plug–ins es que los diseñadores de Web pueden controlar en qué parte de la página aparecen los datos y cómo éstos se relacionan con otros textos y gráficos HTML en la página (debido a que el objeto de archivo ajeno está incorporado en el HTML). El plug-in reconoce los datos gracias a la extensión del nombre del archivo.

El problema es que el diseñador debe tener el plug-in, o acceso a un reproductor que funcione en su computadora, para disfrutar las imágenes y el sonido mejorados producidos por el objeto incorporado. Los plug-ins tienden a desapare- cer y a ser reemplazados por los applets Java, JavaScript, OpenDoc y ActiveX. Éstas son tec- nologías de programación, no sólo aplicaciones de una sola función. Amplían la funcionalidad del servidor Web y la del navegador del cliente, debido a que están escritas en la página Web e invocan programas externos para operar con- forme se necesite. El objetivo es integrar el sis- tema operativo de la computadora con el nave- gador en forma más completa, de modo que el diseñador pueda usar datos basados en Inter-

net con aplicaciones más locales. JAVA Y JAVASCRIPT

Lo más candente que haya llegado al Web es el lenguaje de programación Java, que Sun Microsystems introdujo para hacer los progra- mas portables. Tener la capacidad de crear fun- ciones interactivas y dinámicas que se repro- duzcan en cualquier computadora, que sean relativamente fáciles de crear, que estén libres de virus y relativamente a prueba de malos manejos, es algo muy poderoso. Java se usa para escribir programas totalmente compilados, que hacen cosas que pueden agregarse a las páginas Web, como un contador de visitantes y un reloj analógico. JavaScript es útil para escri- bir pequeñas series de instrucciones en el HTML, que se usan para procesar acciones sencillas del usuario, como la forma en que se despliegan los documentos basados en HTML (barras de título desplazables, botones deste- llantes, mensajes que se desplazan, etcétera). Los applets de Java son programas que requieren navegadores que entiendan su len- guaje, ya que la virtud de este lenguaje es que se interpreta en tiempo real. Existen dos nave- gadores que entienden Java: el HotJava de Sun y el Netscape Navigator 2.0 y superior. Mi- crosoft inventó un competidor, llamado ActiveX, el cual tiene soporte en su navegador, Internet Explorer.

ACTIVEX

ActiveX es una serie de tecnologías que per- miten crear páginas Web más interactivas. ActiveX es un subconjunto para conectividad de la tecnología OLE de Microsoft, que permite abrir programas externos y crear documentos activos dentro de otro documento.

ActiveX contiene códigos que lanzan aplica- ciones identificadas como los programas origi- nales para objetos en páginas Web, como archivos de Shockwave Director y PDF de Adobe, de modo que pueden verse y manipular más tipos de archivos dentro de Internet Explo- rer.

Los documentos ActiveX, construidos dentro de las futuras versiones de Internet Explorer, permitirán a los usuarios interactuar con datos locales y de la red en forma casi transparente. Aunque los controles ActiveX son más flexibles

que los plug-ins, están limitados a los ambien- tes Windows, debido a que usan el sistema de registro Windows para identificar las exten- siones de archivo.

OPENDOC

OpenDoc es una herramienta de programación basada en componentes, semejantes a ActiveX, pero disponible para la mayoría de las platafor- mas. Apple desarrolló OpenDoc, pero actual- mente lo soporta CI Labs, asociación no lucrati- va con más de 2,000 miembros, IBM entre ellos. OpenDoc se basa en la tecnología Component- Glue, de modo que escribe directamente con las especificaciones de OLE. OpenDoc se apo- ya en COBRA, para distribuir objetos en múlti- ples plataformas y así, actualmente, es mucho más compatible con sistemas Windows, Macin- tosh, OS/2 y Unix que ActiveX.

HERRAMIENTAS DE MULTIMEDIA

Trabajar en tres dimensiones con movimiento en tiempo real (lo que se conoce como realidad virtual) abre nuevas perspectivas.

Estas nuevas perspectivas no se han desa- rrollado del todo. El problema es el ancho de banda y la compatibilidad de los navegadores. Se trata de programas enormes, de miles de kilo bites. Aun en las líneas de comunicación más veloces, estas comunicaciones se empan- tanan cuando se trasmiten por las conexiones más rápidas de hoy en día.

Las bases de datos controlan el contenido de los sitios, la información de derechos de autor, durante la producción del sitio, crean plantillas para páginas Web y manejan el tráfico de trans- misión. Las bases de datos multimedia, abren automáticamente la información enviada me- diante correo electrónico y almacenan imáge- nes, pies de fotos y texto en campos separados. Debido al creciente tamaño y cantidad de las páginas HTML, fragmentos de código Java y archivos de audio y video que conforman los si- tios Web, el diseñador necesita una base de da- tos para administrar el almacenamiento y uso de los elementos de multimedia.

Hay cuatro tipos de bases de datos disponi- bles para administrar sitios Web: Las bases de datos relacionales tradicionales, como Oracle y

FileMaker Pro; las bases de datos orientadas a objetos, como ObjectStore de ObjectDesign; las bases de datos de especialidades, Cinebase.

TRANSMISIÓN DE AUDIO

Una de las nuevas tecnologías más emocio- nantes que están saliendo de los talleres de desarrolladores de multimedia es la capacidad de los navegadores para reproducir datos de sonidos conforme los reciban. Esta tecnología se basa en un tipo de datos llamado MIME, en la que la computadora envía primero el paquete de datos para que el navegador pueda interpre- tar la información conforme ésta llegue fluida- mente a través de la línea. La ventaja de este sistema es que los usuarios no tienen que esperar a almacenar grandes cantidades de datos para disfrutar la música y que los servi- dores no tienen que utilizar grandes cantidades de espacio de almacenamiento para procesar los sonidos, lo que significa que una hora de música puede guardarse en un archivo de 3.6 Mb.

La música en vivo requiere de dos partes de software: el del servidor y el del reproductor. Por lo general, el software del servidor se tiene que comprar y el del reproductor se puede bajar de forma gratuita.

VIDEO DIGITAL

Existen dos formatos de compresión de video que luchan por el poder en Web: QuickTime y MPEG. El video digital no tiene la calidad de imagen del video convencional, ya que las com- putadoras personales (tanto Mac como Intel) no soportan el ancho de banda requerido para transmitir todos los datos involucrados. El video digital también se llama animación, pues la ima- gen se envía una por una en una sola pasada, sin entrelazar y a la mitad del número de cuadros por segundo de video convencional (por lo general, el video digital se transmite a 15 cuadros por segundo).

Para ahorrar ancho de banda, las imágenes en la pantalla son pequeñas, (regularmente de 160 por 120 píxeles). Hay tres formas de com- primir video digital para Web: Cinepak, TrueMo- tion–Se Indeo. Los archivos de video digital se guardan como .mov, .moov, .qt, .avi, .mpeg y

.mpg. QuickTime (.qt y .moov o .mov) es el for-

mato de archivo más común para archivos que combinan audio y video.

MPEG es un nuevo medio que empieza a ofrecer video y audio combinados en un solo archivo. Con el surgimiento de los módems de cable, se verán más transmisiones en vivo que usen tecnología de compresión MPEG. Nest- cape soporta los siguientes plug-ins para ver y crear animaciones de video digital: Action por Open2U, Cine Web de Digigami, CoolFusion de Iterated Data Systems, InterVU de InterVU, Inc., MovieStar de Intelligene at Large, QuickTime for Netscape de Apple Computer y ViewMovie de Ivan Cavero Belaunde.

ANIMACIÓN

Hay cuatro formas muy populares de ofrecer animación en las páginas Web: envío de servi- dor (Serve-push), GIF’s animados (Archivos GIF compuestos por multiples cuadros), un a- pplet de animación Java y Macromedia Shock- wave.

El envío del servidor utiliza comandos incor- porados en el HTML que crean una conexión abierta entre el servidor y el navegador. Macro- media, Inc., ha abierto el camino a la produc- ción de presentaciones animadas. El programa Director es único por la forma en que almacena las secuencias animadas, ya que controla las rutas que siguen los objetos junto con la trans- formación de su apariencia, en vez de simple- mente grabar transmisiones de cuadros por segundo. Esto hace que Director sea más pe- queño y más comprimido que las películas ani- madas comunes.

IMÁGENES TRIDIMENSIONALES Y REALI- DAD VIRTUAL

Actualmente hay gran competencia para ver cuál estándar de animación tridimensional se convertirá en el Lenguaje de Marcado de Reali- dad Virtual (VRML, Virtual Reality Markup Lan- guage). El Grupo de Arquitectura de VRML ha recibido dos propuestas: Moving Worlds, de Sili- con Graphics, Sony, WorldMaker y Apple, entre otras, y Active VRML de Microsoft. Las dos propuestas se basan en los actuales formatos de archivos .WRL (Word) y agregan innova- ciones como eventos cronometrados, anima- ción en dos y tres dimensiones, interacción del