Universidad Nacional Experimental del Tchira

Centro de Estudios en Teleinformtica (CETI)

Laboratorio de Comunicacin Multimedia (L@bcomm)

Manual de Diseo y Estilo Web

V.1.0

Revisin y Adaptacin: Emir Medina

Traduccin: Carlos Maldonado
Revisin Final: Ing. Jos Lopez
Fuente: Center for Advanced Instructional Media
Yale University.
 2

Filosofa
Introduccin
Lo que ste manual no es
Una nota acerca de los navegadores

Propsito de su sitio
Cules son sus objetivos fundamentales?
Conozca a su audiencia
Cibernautas
Usuarios ocasionales y novatos
Usuarios frecuentes y expertos
Usuarios internacionales

Estrategias de diseo
Cibernautas
Entrenamiento
Enseando
Educacin
Referencia
 3

Diseo de interfaz

Introduccin
Paginas web vs. Diseo de documentos convencionales
Antecedentes del diseo impreso
Hacer sus pginas independientes
Quien
Que
Cuando
Donde

Diseo bsico de la interfaz

Diseo centrado en el usuario
Incluir ayudas para una navegacin clara
Pginas ciegas

Acceso a la informacin
Brindarle acceso directo a los usuarios
Ancho de banda e interaccin
Simplicidad y consistencia
Estabilidad de diseo
Retroalimentacin y dilogo
Diseo para los incapacitados

Navegacin
Provea contexto o pierda al lector

Enlaces y navegacin
Regresar e ir a la pgina previa
Su primer sitio web
 4

Porque las barras de botones son tiles

Enlaces relativos vs. Enlaces arreglados

Grficos para paginas web

Introduccin
Grficos y mdems
Grficos e intranets

Modos de color
Pixeles y color
Profundidad de bits y archivos grficos de color

Formatos de los archivos de grficos

Compresin de los archivos GIF

Archivos GIF entrelazados

Archivos GIF transparentes

Grficos JPEG
Guarde sus imgenes no comprimidas!
Artificios de las imgenes JPEG

Resumen, Formatos de archivo

Usos para los archivos GIF y JPEG
Ventajas de los archivos GIF
Ventajas de los JPEG
 5

Ilustraciones
Procesando ilustraciones complejas o fotografas
Diagramas para la pantalla

Optimizando los grficos, I

Color y los grficos GIF
Paletas personalizadas y paletas de color del sistema

Optimizando los grficos, II

Otra opcin y una mejor
Alto y ancho a travs de etiquetas

Colores de fondo
Cambiando los colores de los elementos de la pgina
Colores de fondo y legibilidad
Patrones de fondo Netscape

Imgenes "mapa"
Imgenes mapa servidor vs. Imgenes mapa cliente
Eficiencia del espacio e impacto grfico
Flexibilidad grfica
 6

Filosofa

Introduccin

Este manual de estilo se ha creado como resultado de nuestro desarrollo

de proyectos World Wide Web (Web). El mismo, refleja nuestros intentos de
aplicar algunas de las lecciones que hemos aprendido a lo largo de mas de 4
aos, en el diseo de software multimedia, interfaces grficas. Hay muy buenos
sitios web y libros que enfatizan el HTML (Lenguaje de Marcado Hipertexto), y
otros que enfatizan el diseo grfico Web orientado artstica o comercialmente. De
cualquier manera, pocas son las fuentes de documentacin existentes que han
intentado alcanzar un diseo de sitios y pginas web, como un reto que combine la
edicin tradicional, con el diseo grfico, el diseo de interfaz, diseo de
informacin y las habilidades tcnicas requeridas para optimizar el cdigo HTML,
grficos y texto en las pginas web.

Lo que ste manual no es

Nuestro acercamiento al lenguaje HTML y el generalizado problema del

diseo de informacin para el sistema World Wide Web, no esta basado en la
filosofa que maneja el desarrollo de informacin estructurada a travs de
herramientas de publicacin, tal como el lenguaje pariente del HTML, SGML
(Standard Generalized Markup Language). Las recomendaciones proporcionadas
aqu estn dirigidas a los intereses prcticos de inclinar y adaptar una herramienta
de edicin y publicacin relativamente primitiva (HTML) a propsitos para los
cuales nunca se pens que se utilizara (diseo de pginas grficas). Si est
interesado en preguntas ms amplias sobre publicacin en sistemas altamente
estructurados independientes del software navegador (browser), sistema operativo
o restricciones tipogrficas, usted debera empezar por consultar en el sitio del
Consorcio del World Wide Web (W3C), el cual tiene una gran cantidad de
 7

referencias tcnicas e histricas relacionadas, con el desarrollo de texto

estructurado y material histrico sobre el WWW.

Una nota acerca de los navegadores

La mayora de los consejos de diseo y la informacin tcnica contenida

aqu, plantean el cmo optimizar los grficos en las paginas web y est adaptado a
las versiones recientes (3.0 o superior) de los navegadores Netscape Navigator y
Microsoft Internet Explorer. Existe poca informacin aqu que beneficie a los
usuarios de navegadores modo texto, ya que el enfoque principal de este manual
est en el diseo de pginas web grficas.
 8

Propsito de su sitio

El primer paso para disear un sitio web es asegurarse de que tiene un

conjunto de metas definidas, sabiendo lo que quiere lograr con su sitio web. Sin
tener un claro establecimiento de los propsitos y objetivos, el proyecto comenzar
a vagar fuera del camino y hundirse, o puede llegar al punto de reflejar escasos
resultados.
La planificacin cuidadosa y un claro sentido de los objetivos, son las
claves para el xito al crear un sitio web, particularmente si usted trabajar como
parte de un equipo para construir el sitio. Antes de comenzar a disear su propio
sitio usted debera:

Identificar el pblico al que desea dirigirse

Manifestar sus propsitos de manera explcita
Saber sus principales objetivos
Tener un conciso perfil de la informacin que su sitio va a tener

Cules son sus objetivos fundamentales?

Una concreta y corta manifestacin de sus objetivos deberan conformar

las bases del diseo de su sitio. De all se debe partir para expandir las metas
impuestas en los objetivos, lo cual tambin le servir como herramienta para
analizar el xito de su sitio web. Por ejemplo:

Esperamos que el sitio web de la asociacin cumpla estas metas en el

trmino de los prximos 12 meses:
El sitio web reducir la demanda de informacin de rutina en la oficina
principal, tal como; actividades de la asociacin, fechas tope, cuotas o
deudas pendientes e informacin sobre reuniones de la asociacin.
Esperamos que el sitio web tambin traiga consigo el ahorro de una suma
significativa en envo y procesamiento de correspondencia de rutina entre
los miembros de la asociacin. El sitio web tambin albergar todo el
 9

contenido que actualmente se publica en la revista trimestral de la

asociacin, pero tambin contendr informacin ms actualizada mientras se
van organizando eventos. Despus de un ao se encuestar a los miembros
de la asociacin en temas como el xito de la revista en el sitio web, y
explorar las posibilidades de cerrar la publicacin de la revista en papel.

La descripcin de los objetivos debera continuar planteando un poco ms

las metas financieras especficas y otras metas organizacionales que el sitio web
debe cumplir.
Construir un sitio web es generalmente un proceso dinmico, y no un
proyecto limitado con informacin esttica. El manejo editorial a largo plazo y el
mantenimiento tcnico debe ser considerado en sus planes para el sitio. Sin esta
gran perspectiva, su publicacin electrnica sufrir el mismo destino que muchas
otras, un comienzo entusiasta, pero sin logros duraderos.

Conozca a su audiencia

El prximo paso en el proceso de diseo es identificar los usuarios

potenciales que utilizarn su sitio web, de modo que pueda estructurarlo en
funcin de sus expectativas y necesidades. El conocimiento, antecedente, intereses
y las necesidades de los usuarios que varan desde principiantes que requieren una
presentacin estructurada cuidadosamente, hasta los usuarios avanzados que
pueden irritarse ante cualquier cosa que parezca manipularlos o atrasarlos en su
bsqueda de informacin, son elementos a considerar. Un sistema bien diseado
debe ser capaz de adaptarse a un rango de habilidades de usuario e intereses. Por
ejemplo, si la meta de su pgina web es manejar informacin interna de la
empresa, documentos de recursos humanos u otra informacin que suele
publicarse en manuales en papel, su sitio ser utilizado por mucha gente que lo
visitar varias veces al da, y tambin por gente que lo consulte slo de manera
ocasional.
 10

Cibernautas

Las paginas web dirigidas a los navegantes deben ser anlogas con las
portadas de las revistas. El objetivo es incitar al navegante casual con fortaleza de
grficos y audaces planteamientos de contenido. Todos los enlaces en su pgina
web deben apuntar hacia las pginas internas del sitio. Proveer una clara y concisa
presentacin de lo que hay en el sitio puede ser de inters para el lector.

Usuarios ocasionales y novatos

Estos usuarios dependen de una clara estructura, fcil acceso y los

comentarios que ilustran cmo est organizada la informacin en su sitio web. Los
novatos tienden a intimidarse por los complejos mens de texto y pueden sentirse
inseguros a navegar en un sitio que no es atractivo grficamente ni est
estructurado claramente. De acuerdo Jakob Nielsen de Sun Microsystems, menos
del 10% de los lectores web alguna vez miran la parte inferior de una pgina web.
Usuarios poco frecuentes de un sitio generalmente aprovechan las pginas de
resumen, mapas jerrquicos y diseos grficos o iconos que sirvan para recordar
donde se encuentra ubicada la informacin en el sitio. Un glosario de trminos
tcnicos, acrnimos, abreviaturas y una lista de las Preguntas ms frecuentes
puede ser til para los nuevos o no muy frecuentes visitantes de la pgina.

Usuarios frecuentes y expertos

Estos usuarios utilizan su sitio para obtener informacin de manera rpida

y precisa. Usuarios expertos son muy impacientes con los mens que poseen
mltiples imgenes y solo ofrecen entre dos y seis opciones. Los usuarios expertos
piden rpidos y desplegados mens de texto. Las delicadezas grficas los vuelven
locos. Usuarios frecuentes y expertos generalmente tienen metas especficas en
mente, y le son bastante tiles los mens de texto detallados, un perfil de la
estructura del sitio, o ndices amplios que permitan una rpida bsqueda y
 11

obtencin de la informacin, aunque es necesario recalcar que con la incorporacin

de una maquina de bsqueda en el site esto ultimo se hace poco necesario ya que
el usuario experto y el novato ya se ha acostumbrado al uso de estos motores de
bsquedas para encontrar su informacin.

Usuarios internacionales

Recuerde que usted est diseando para el WWW. Sus lectores podran
ser personas de su misma calle, o gente en Australia o Polonia. Para alcanzar el
mximo nmero de usuarios en otros pases usted podra proveer versiones
traducidas, al menos de las pginas principales. Evite el uso de jerga propia de su
localidad o acrnimos tcnicos complicados en las pginas explicativas. No asuma
que todo los lectores poseen su mismo formato de hora y fecha. Por ejemplo, no
abrevie fechas en las paginas web, para un norteamericano 3/4/97 es el 4 de
marzo de 1997, por el contrario para los usuarios en la mayora de los pases
restantes sta fecha abreviada se lee como 3 de abril de 1997.
 12

Estrategias de diseo

Todas las maneras de representar informacin estn regidas por ciertos

parmetros determinados por sus objetivos, las caractersticas prcticas del medio
seleccionado y la naturaleza de sus usuarios. El grfico debajo muestra los cuatro
principales tipos de informacin que se deben ofrecer en una intranet contra dos
variables fundamentales: la estructura lineal de su presentacin, y qu cantidad de
tiempo de consulta tiene el usuario promedio:

Cibernautas

En el amplio rango de personas que navegan en la red se encuentran

aquellos lectores ocasionales que pueden toparse con su sitio sin un objetivo o
propsito especfico en mente. Las tcnicas para llevar estos clientes potenciales a
un sitio de ventas o entretenimiento estn ms all del alcance de este manual,
pero podr conseguir algunas recomendaciones pertinentes. Las siguientes
categoras de usos web son ms adecuadas para los sitios corporativos y
educativos donde los usuarios llegan con un propsito definido.
 13

Entrenamiento

Aplicaciones para la educacin basadas en el web tienden a poseer un

diseo bastante lineal, y presentan pocas oportunidades de desviarse del flujo
central de la presentacin. No confunda a los usuarios o confunda sus propias
expectativas ofreciendo muchos enlaces fuera del mensaje principal. Restringir los
enlaces slo a funciones de paginado como Prximo y Anterior garantiza que
todos los lectores vean la misma presentacin, y le permite hacer una prediccin
ms precisa sobre el tiempo de contacto del usuario con el documento.

Enseando

Las buenas aplicaciones educativas son construidas en base a una

narracin central concreta, pero generalmente se debe ofrecer ciertas
oportunidades a los estudiantes para desviarse hacia otros temas de importancia.
La informacin presentada en las fuentes investigativas alternas es usualmente
ms sofisticada y profunda que la conseguida en las aplicaciones educativas. Los
enlaces (links) son el aspecto ms poderoso del web, pero tambin puede
convertirse en una distraccin que puede interferir en el proceso bsico de
aprendizaje. Si usted desea proveerle enlaces a otros sitios en lnea relacionados
con lo que est enseando, debera considerar la idea de agrupar todas estas
referencias en una pgina aparte separada del flujo principal de informacin.
Usualmente los usuarios desearan imprimir material del web y leerlo despus en
papel. Facilteles sta opcin y brinda una versin para imprimir que acumule
muchas pginas web separadas en un solo documento largo, esto lo puede lograr
mediante documentos hechos en Word, o mejor aun en formato PDF, el cual a lo
largo de estos ltimos aos ha logrado tener una gran aceptacin entre los
usuarios de la internet.
 14

Educacin

En este mbito debe destacarse que los documentos dirigidos a una

comunidad heurstica y auto-didctica pueden interferir en la estrategia de diseo,
convirtiendo a estos en una presentacin de carcter restringido y lineal. En
ocasiones los usuarios comunes ya estn altamente adiestrados como para
someterse a este tipo de publicaciones. Las estructuras flexibles, interactivas de
diseo no-lineal son ideales para este tipo de usuarios, ya que es bastante difcil
predecir que tpicos, son de mayor inters para un profesional con experiencia o
un estudiante. El diseo debe permitir el acceso rpido a una amplia gama de
tpicos generalmente denso en cuanto a enlaces relacionados con material dentro
del mismo sitio web o en otro lugar del World Wide Web. Las listas de enlaces
basadas en texto son convenientes para tablas de contenido e ndices porque
cargan rpido y brindan informacin, pero este tipo de audiencia se aburre
fcilmente y necesita la presencia de contenido grfico e ilustraciones bien
diseadas que se relacionen con el material. El tiempo de contacto entre el usuario
y el documento es impredecible, pero por lo general ser ms corto que los sitios
de educacin o entrenamiento porque los usuarios frecuentemente estn bajo
presin de tiempo. Opciones de fcil impresin del documento son tambin
indispensables para este tipo de audiencia. Se ha demostrado con la experiencia
que los usuarios por lo general no se detienen a leer largos contenidos del material
que se este buscando, si no que, tratan de guardar o imprimir esta informacin
para despus estudiarla con mas detenimiento.

Referencia

Los sitios web de referencia bien diseados, le permiten al usuario entrar

rpidamente dentro del sitio, conseguir lo que quieren e imprimir o descargar
(download) fcilmente lo que necesite. Tpicamente no hay una historia que
contar, de modo que los patrones de uso son totalmente no lineales. La estructura
del men y el contenido debe estar organizado cuidadosamente para soportar una
 15

bsqueda y obtencin rpida, fcil descarga de los archivos y opciones de

impresin convenientes. Mantener los grficos al mnimo para el beneficio de la
velocidad de descarga, y tal vez puede interesarse en investigar sobre software de
bsqueda en vez de confiar exclusivamente en listas enormes de enlaces estilo
ndice. El tiempo de contacto ente el usuario y el documento usualmente es breve,
mientras ms corto mejor.

Diseo de interfaz

Introduccin

Los usuarios de documentos web no solo se fijan en la informacin, estos

interactan con la publicacin en gran variedad de maneras sin precedentes en el
diseo de documentos en papel. La interfaz grfica de usuario (GUI) de un sistema
computarizado incluye la interaccin entre imgenes y conceptos, las
caractersticas visuales detalladas de cada componente de la interfaz grfica y la
secuencia funcional de relaciones a lo largo del documento, que producen la
caracterstica de look and feel (observar y persibir) de las pginas web.

El diseo grfico y las caractersticas visuales no se emplean solo para

avivar el aspecto de una pgina web, los grficos son parte integral de la
experiencia del usuario con su sitio y estilo. En los documentos interactivos es
imposible separar el diseo de imgenes con el diseo de interfaz de la pgina.

Paginas web vs. Diseo de documentos convencionales

La mayora de nuestros conceptos actuales con respecto a la estructura de

informacin, derivan de la organizacin de libros impresos y peridicos, y toda la
serie de indexado de libros y sistemas de catlogo que se desarrollan en base a la
informacin impresa. Las interfaces estndard de los libros del mundo de habla
 16

inglesa se encuentran bien establecidas y ampliamente aceptadas con

instrucciones detalladas que pueden ser conseguidas en El Manual de Estilo de
Chicago ("The Chicago Manual of Style). Cada caracterstica de un libro, desde la
tabla de contenidos hasta el ndice y pies de pgina, han evolucionado a travs de
los siglos. Los lectores de los primeros libros enfrentaron los mismos problemas
organizacionales, que enfrentan los usuarios de los actuales documentos de
hipermedios. La Biblia de 1.456 generalmente es citada como el primer libro
moderno; sin embargo despus del crecimiento explosivo de la publicacin, que
sucedi despus de Gutenberg, tom ms de 100 aos desarrollar el numerado de
pginas, los ndices, tablas de contenido e incluso las pginas de ttulo, de modo
que se convirtieran en caractersticas rutinarias de los libros. Los documentos web
sufrirn una evolucin similar y una estandarizacin de la manera en que la
informacin se organiza y se hace disponible electrnicamente.

Antecedentes del diseo impreso

A pesar de que los documentos interactivos enlazados a travs de los

hipermedios, proponen retos de innovacin a los diseadores de sistemas de
informacin, la mayora de la asesora necesaria para disear, crear, ensamblar,
editar y organizar distintos medios, no est radicalmente alejado de las prcticas
actuales en los medios impresos. La mayora de los documentos web pueden ser
creados de acuerdo a las recomendaciones de estilo editorial y organizacin de
The Chicago Manual of Style. La mayora de lo que una organizacin necesita
saber con respecto a la creacin clara, amplia y consistente en cuanto a
estndares de publicaciones internas, est disponible en guas como Xerox
Publishing Standards: Un manual de estilo y diseo. No se confunda con la
novedad de las pginas web porque corre con el riesgo de dejar a un lado las
reglas bsicas editoriales y de diseo grfico.
 17

Hacer sus pginas independientes

Las pginas en el WWW son distintas de los libros y otros documentos en

un aspecto crucial: los enlaces de hipertexto le permiten a los usuarios accesar a
otra pgina web que no tiene nada que ver con la actual. Por ello las pginas web
necesitan ser ms independientes que las pginas de un libro convencional. Esto
usualmente significa que los encabezados y pies de pgina de las pginas web son
ms informativas y elaboradas que las pginas impresas. Sera absurdo repetir los
derechos de copia (Copyright), autor y fecha de un libro al final de cada pgina,
pero las pginas web necesitan en ocasiones ese tipo de informacin porque una
sola pgina puede ser la nica parte que visite un usuario de su sitio web. Este
problema de hacer los documentos independientes no es exclusivo de las pginas
web. Publicaciones profesionales, revistas, y la mayora de los peridicos repiten la
fecha, volumen y nmero de ejemplar en la parte superior o inferior de cada
pgina impresa, porque saben que los lectores suelen extraer artculos del
peridico o copias fotoestticas de publicaciones y posteriormente necesitan citar
la informacin con los datos de la fuente original del artculo.
Dadas estas dificultades potenciales al momento de crear sitios web, los
cuales estn llenos de complejos contenidos y adems son fciles de usar; la mejor
estrategia es aplicar consistentemente algunos de los principios bsicos de diseo
en cada pgina que usted elabore. Los elementos bsicos de un documento no son
complicados y no tienen prcticamente nada que ver con la tecnologa de Internet.
Es tal como el tipo de ensayos de secundaria: quin, qu, cundo y dnde.

Quin

Quin est hablando? La pregunta es tan bsica, y dicha informacin es

tan frecuentemente obviada por los autores web, quienes en ocasiones pasan por
alto la pieza fundamental de informacin que el lector necesita para fundamentar
el origen del documento: quin me est diciendo esto? Bien sea que la pgina
pertenezca a un autor individual o una institucin, siempre debe decrsele al lector
 18

quien cre la pgina web. La avalancha de sitios web propagando informacin

incorrecta o mal interpretando material sobre el choque del vuelo 800 de la TWA
nos ofrece un vvido ejemplo de cmo informacin de origen o autenticidad
desconocida, puede rpidamente dominar la legtima discusin e investigacin.

Qu

Todos los documentos necesitan de ttulos claros para capturar la atencin

de los lectores, pero por varias razones particulares de las pginas web este
elemento de edicin bsico es crucial. El ttulo del documento es en ocasiones lo
primero que muestran los visores de documentos WWW mientras descargan la
pgina (download). En las pginas con exceso de grficos, el ttulo puede ser lo
nico que los usuarios vean por unos cuantos segundos mientras las imgenes
terminan de cargarse en la pgina. Adicionalmente, el ttulo de la pgina se
convertir en el texto marcador de pgina (bookmark o favorito), generado por el
visor si el usuario elige aadir la direccin actual a su directorio de pginas de
acceso directo. Un ttulo ambiguo o extrao, o un ttulo que contenga ms
trminos tcnicos que lenguaje natural, no ayudar al usuario a recordar porque
incluy la pgina dentro de sus marcadores de pgina.

Cundo

La puntualidad es uno de los elementos ms importantes al determinar el

valor de un documento. Tomamos informacin sobre la edad de la mayora de los
documentos, por ejemplo: peridicos, revistas y virtualmente cualquier
correspondencia de oficina, todas tienen fecha. Por lo tanto, se debe fechar cada
pgina web, y cambiar este dato cada vez que el documento sea actualizado. Esto
es importante especialmente en el caso de los largos o complejos documentos en
lnea que son actualizados regularmente, pues tal vez no se vea una seal
significativa de cambio de contenido para los lectores ocasionales. La informacin
corporativa, manuales personales, informacin sobre productos, y otros
 19

documentos tcnicos que son distribuidos como pginas web, deben tener siempre
las fechas de edicin.

Dnde

El web es un lugar extrao que tiene inmensas dimensiones de

informacin, pero pocas seales explcitas en cuanto a la situacin fsica donde el
documento se origina. Se hace clic en un enlace y podra estar conectado a un
servidor en Sidney, Australia; Chicago, EEUU o prcticamente cualquier otro lugar
con acceso a Internet. A menos que usted est bien documentado en cuanto a la
estructura y gramtica de las direcciones (URL), puede ser algo difcil decir el
origen de una pgina. Despus de todo as es el WWW, y la pregunta de la
procedencia de un documento es algunas veces inseparable de quien escribi el
documento. Siempre debe decirle al lector de dnde es usted, con (si es relevante)
sus afiliaciones corporativas o institucionales.
Incorporar la direccin principal (home URL) al menos en las pginas
principales de su sitio, es una fcil manera de mantener la conexin con el lugar al
que pertenece. Una vez que el lector ha guardado la pgina como un archivo de
texto o impreso la pgina en papel, esta conexin puede considerarse perdida. A
pesar de que las versiones recientes de navegadores le permiten incluir la URL en
cualquier documento que se imprima, mucha gente no toma ventaja de estas
caractersticas opcionales. Muchos de nosotros actualmente tenemos montaas de
pginas web impresas que estn por ah, sin ninguna forma sencilla de re-
encontrar sus direcciones en el web para saber cul es su origen.
Usted debe especificar slidamente el ttulo, autor, afiliaciones
institucionales del autor, fecha de revisin, y proveer al menos un enlace a una
pgina local en cada pgina de su sistema; adems de colocar la URL de la pgina
principal (home page), en algunas de las pginas principales de su sitio.
 20

Incluya estos elementos bsicos y usted ya tendr alrededor de un 90%

del recorrido para proveer de informacin a sus lectores con una comprensible
interfaz de usuario.
 21

Diseo bsico de la interfaz

Diseo centrado en el usuario

Las interfaces grficas de usuario fueron diseadas para darle a las

personas control directo sobre sus computadoras personales. Los usuarios actuales
esperan un nivel avanzado de diseo de cualquier interfaz grfica, incluyendo las
pginas web. La meta es satisfacer las necesiadades de sus usuarios potenciales,
adaptando la tecnologa del web a sus expectativas, nunca exigiendo que el lector
se conforme con una interfaz que interponga obstculos innecesarios en su
camino.
Es en este momento donde su investigacin sobre las necesidades y
caractersticas de su audiencia es muy importante. Es imposible disear para una
persona desconocida cuyas necesidades usted no entiende. Para mejorar esta
situacin debe crear situaciones ejemplo con distintos tipos de usuarios buscando
una parte especfica de la informacin en su sitio. Qu ayuda le puede brindar a
un usuario avanzado el diseo de su pgina, s l busca una fraccin especfica de
informacin? Podra un novato intimidarse ante un men de texto complicado?
Probar sus diseos y obtener opiniones de los usuarios es la mejor forma de
determinar si sus ideas de diseo estn dndole a los usuarios lo que ellos esperan
del sitio.

Incluir ayudas para una navegacin clara

En el estado actual de la tecnologa en el web la mayora de las pginas

web incluyen navegar a travs de enlaces de hipertexto entre documentos. El
principal problema de interfaz en los sitios web es la falta de sentido de ubicacin
con respecto a la organizacin interna de informacin. Iconos explcitos, esquemas
grficos, una visin global basada en texto o grficos (site map) y una seccin de
 22

sumario pueden, darle al usuario la seguridad de que puede encontrar lo que est
buscando sin perder tiempo.
Los usuarios deben siempre poder retornar fcilmente a su pgina
principal, y a otros puntos de navegacin principales de su sitio. Estos enlaces
bsicos, deben estar presentes en cada pgina de su sitio, ya que son en
ocasiones botones grficos que proporcionan navegacin bsica y ayudan a crear
una identidad grfica, que le seala al usuario que an est en su sitio web. Por
ejemplo en el sitio de Netscape Corp. esta barra de botones aparece en la parte
inferior de cada pgina.
La barra de botones es til (muchas opciones en un lugar reducido),
predecibles, (siempre esta all, al final de todas las pginas) y le brinda un una
identidad grfica consistente a cada pgina en el sitio de Netscape.

Pginas ciegas

Cada pgina debe contener al menos un enlace. Las pginas estilo calle
ciega sin enlaces a ningn otro pgina local en el sitio no slo son una frustracin
para el usuario, sino que generalmente es la prdida de una oportunidad de llevar
el navegador a otra pgina en su sitio.
Las pginas web a veces aparecen sin ningn prembulo: los lectores a
veces crean o siguen enlaces a subsecciones especficas. De tal manera, tal vez
nunca vean su pgina principal o cualquier informacin introductoria en su sitio
web. Si las pginas de dicha subseccin no poseen enlaces de retorno ms arriba
en la jerarqua, a la pgina principal a pginas de men local, el lector esta
prcticamente bloqueado para accesar al resto de su sitio web.
 23

Acceso a la informacin

Brindarle acceso directo a los usuarios

La meta aqu es proveer al usuario con la informacin que quiere en la

menor cantidad de pasos posibles, y en el menor tiempo. Esto significa que usted
debe disear una sistema jerrquico de informacin eficiente, para minimizar el
nmero de pasos en las pginas de men. Estudios sobre las interfaces han
mostrado que los usuarios prefieren mens que presenten un mnimo de cinco a 7
enlaces (no mas); estos mismos usuarios prefieren varias pantallas con baja
densidad de opciones, en vez de muchos niveles de mens simplificados.
En la tabla debajo note que usted no necesita muchos niveles de men
para mostrar un gran nmero de opciones:

Ancho de banda e interaccin

Los usuarios no toleran largas demoras. Investigaciones de factores

humanos han demostrado que para la mayora de las actividades de computacin,
el espectro de frustracin es de alrededor de 10 segundos. Los diseos de pginas
web que no estn acorde con la velocidad de acceso a la red de sus usuarios
comunes solo logran frustrarlos. Si sus usuarios son principalmente un publico
navegador comn surfeando en el web a 28.8 kbps a travs de una lnea
telefnica, es absurdo poner imgenes muy grandes en sus pginas, ya que el
usuario promedio no tendr la paciencia suficiente, para esperar indefinidamente
mientras los grficos descargan a travs de la lnea telefnica. De cualquier forma,
 24

si usted est construyendo el sitio Intranet de una universidad o una compaa,

donde la mayora de los usuarios estarn accesando a su servidor web a
velocidades Ethernet (10 Mbps) o mejor, usted puede ser algo ms ambicioso en el
uso de grficos y multimedia.

Simplicidad y consistencia

Los usuarios no se impresionan con la complejidad innecesaria,

especialmente los usuarios que dependen de su sitio para obtener informacin
puntual y precisa, relacionada con su trabajo. La interaccin de la interfaz debe ser
simple, lgica y familiar para la audiencia, si el tema a tratar es el diseo de
informacin, escoja elementos como un libro o una biblioteca, no una nave
espacial o un televisor. Los mejores diseos de informacin son aquellos que la
mayora de los usuarios no perciben.
El trabajo de Studio Archetype para el sitio web de Adobe Corp, es un
excelente modelo de diseo web. Las pginas utilizan ampliamente los grficos
como ayudas de navegacin , consistentemente aplicados a lo largo de todas la
pginas del sitio. Una vez que usted sabe dnde se encuentran los enlaces
estndar en el encabezado grfico de la pgina, la interfaz se vuelve casi invisible
y la navegacin es fcil.
 25

Para la mxima funcionalidad y legibilidad de su pgina, el diseo debe ser

construido sobre un consistente patrn de unidades modulares, todas
compartiendo el mismo formato bsico de mayas, temas grficos, convenciones
editoriales y jerarquas de la organizacin. La meta es ser consistente y predecible,
de modo que sus usuarios se sientan cmodos navegando en su sitio, y seguros de
que ellos saben como conseguir lo que buscan. La identidad grfica de una serie
de pginas en su sitio web provee guas visuales para la continuidad de la
informacin. Los encabezados de men grfico presentes en cada pgina del sitio
de Adobe crean una interfaz de usuario consistente y una identidad corporativa
firme:

Incluso si su pgina no utiliza grficos alineados, una firme adhesin al

formato de ttulos, subttulos, pies de pgina y enlaces a su pgina principal o
pgina relacionadas tambin reforzar el sentido de identificacin con el sitio web
de su organizacin.
Para preservar el efecto de un sistema uniforme de pginas usted podra
considerar la idea de traer informacin importante a su sitio y adaptarlas a su
esquema de presentacin en ves de utilizar enlaces que enven al lector lejos de su
pgina (si no existen restricciones de copia por poner la informacin en su sitio,
claro est).

Estabilidad de diseo

Si desea convencer a sus usuarios de que lo ofrecido por usted es preciso

y confiable usted tendr que disear su sitio web tan cuidadosamente como
cualquier otro tipo de comunicacin corporativa, con los mismos exigentes
 26

estndares de diseo y edicin. Un sitio que parece desordenado con un diseo

grfico pobre y bajos estndares de edicin no inspiraran seguridad en el usuario.
La estabilidad funcional de su diseo web significa mantener los elementos
interactivos de su sitio trabajando de manera confiable. La estabilidad funcional
tiene dos componentes: hacer las cosas de manera correcta la primera vez que
disee su sitio y luego mantenerlo funcionando todo el tiempo sin fallas. Los
buenos sitios web propiamente interactivos, contienen muchos enlaces a paginas
locales dentro del sitio, y a otros lugares en el web. Por lo tanto, usted tendr que
revisar constantemente que todos los enlaces funcionen de manera adecuada. Las
cosas cambian constantemente en el web, tanto en su sitio como en el resto.
Usted necesitar chequear las pginas peridicamente para asegurarse que sus
enlaces an trabajen adecuadamente, y el contenido que se encuentre en ellas
an sea relevante para sus necesidades.

Retroalimentacin y dilogo

Su diseo web debe ofrecer una constante confirmacin visual y funcional

de las opciones y alternativas, a travs del diseo grfico, con botones de
navegacin o enlaces de texto ubicados de manera uniforme.
La retroalimentacin tambin significa estar bien preparado para responder
a las necesidades y comentarios de los usuarios. Los sitios web bien diseados
deben siempre proveer enlaces directos al sitio del editor o webmaster responsable
de la administracin del sitio. La planificacin de este tipo de relacin sobre la
marcha con los usuarios de su sitio es vital para el xito a largo plazo de la
organizacin.

Diseo para los incapacitados

No todos los usuarios de su sitio tendrn la capacidad de aprovechar los

grficos que usted ofrece en sus pginas, ya que una porcin de sus usuarios
 27

puede tener dificultades visuales. Una de las bellezas del Web y HTML es la
habilidad de construir mensajes alternativos (con la etiqueta ALT en HTML) de
modo que los usuarios sin capacidades grficas puedan an entender las funciones
grficas de sus pginas. Utilizando software especialmente diseado, usuarios
ciegos pueden escuchar (a travs de voz sintetizada) los mensajes alternativos que
usted provea con sus grficos; por lo tanto, no se perdern completamente el
contenido de sus fotos y botones de navegacin grfica. Si usted tiene en mente
un sistema de mens grfico para la navegacin, ser muy importante la inclusin
de mens alternos basados solo en texto como ayuda para este tipo de usuarios,
quienes no pueden ver ni utilizar sus mens grficos.

Navegacin

Proveer un nutrido y consistente conjunto de navegacin grfica y enlaces

interactivos entre las pginas web de su sitio, llamar la atencin de sus usuarios
hacia su pgina, apartndolos de los enlaces de propsito general y llevndolos
directa y profundamente hacia el contenido que necesitan. De esta manera,
tambin se colabora en brindarle al usuario una idea de cmo se organiza el site
de su organizacin y hace grficamente explcito el orden y lgica de su sitio.

Provea contexto o pierda al lector

Los lectores necesitan un sentido del contexto y de su localizacin dentro

de una organizacin de informacin. En los documentos tradicionales en papel este
sentido de dnde est usted es una mezcla del diseo grfico del libro, la
organizacin del texto y la sensacin fsica del libro como un objeto. Cuando
vemos un enlace de hipertexto en una pgina web tenemos algunas seales de
hacia dnde nos dirige, cunta informacin est all y exactamente cmo se
relaciona la informacin enlazada con la pgina actual. Incluso la apariencia de
cada una de las pginas individuales est limitada para la mayora de los usuarios.
 28

La mayora de las pginas web no se ajustan totalmente al monitor estndar de

oficina (14 o 15), de forma que siempre hay una parte de la pgina que el usuario
no puede ver.
Las pginas web necesitan darle a sus usuarios guas explcitas hacia el
contexto y organizacin de la informacin, porque slo una pequea porcin del
sitio (menos de una pgina) es visible al mismo tiempo sin mover la barra de

desplazamiento:

Mientras usted sea un diseador web es su responsabilidad proveer estas

caractersticas funcionales y de contexto al lector.

Enlaces y navegacin

Regresar e ir a la pgina previa

Todos los sistemas de hipertexto poseen un problema en comn, no

poseen precedentes en medios impresos: por ejemplo regresar a lo largo de una
 29

serie de enlaces que el usuario haya visitado anteriormente no es la misma

operacin de regresar a travs de pginas secuenciales en papel. Cuando los
usuarios hacen clic en un enlace de hipertexto en un documento web,
generalmente son transportados de un sitio web a otro, incluso pueden ser
llevados de un pas a otro.

Por qu las barras de botones son tiles?

Para el diseador de informacin los enlaces de hipertexto son una arma
de doble filo. Los cambios radicales en el contexto que los enlaces generan al
cambiar de una pgina a otra, pueden confundir fcilmente a los usuarios, quienes
necesitan guas organizadas y elementos de interfaz para entender y seguir los
enlaces de hipertexto de una pgina a otra. Esto es cierto particularmente cuando
los usuarios tienen la capacidad de seguir (o al menos reconocer) una secuencia
ordenada de documentos. Observe en el diagrama arriba expuesto que a pesar de
que el usuario ha entrado a la segunda pgina del sitio web en la pgina 6, el sitio
est ordenado en una secuencia de pginas.

Es recomendable aumentar el estndar de opciones del visualizador,

Regresar y Adelantar, con botones de Prxima Pgina y Pgina Anterior
incluidos dentro de la estructura de la pgina, de modo que el lector posea
herramientas de interfaz adicionales para navegar a travs de la informacin en la
secuencia que el autor crea conveniente, sin alterar la caracterstica no lineal de
los documentos en hipertexto.
 30

Grficos para paginas web

Introduccin

Esta seccin contiene tcnicas para optimizar la apariencia y eficiencia de

los grficos de sus pginas web. A pesar de que las publicaciones electrnicas
liberan de los costos y las limitaciones de la reproduccin de color en papel, usted
an necesitar hacer clculos cuidadosos (y algunos compromisos) si desea
optimizar los imgenes y fotografas para distintos tipos de monitores y
velocidades actuales en la Internet.

Grficos y mdems

La mayora de la presencia web actual est conformada por gente

accesando mediante proveedores de servicio, a travs de modems de 28.8 Kilobits
por segundo (Kbps) desde sus casas, oficinas o lugares de trabajo remotos. A 28.8
kbps usted slo obtiene 3.6 KiloBytes (KB.) por segundo (recuerde que toma 8 bit
para formar un Byte entero). Esto significa que una modesta imagen de 36 KB.
Una pgina web podra tomar 10 segundos o ms para cargar en el visualizador
del lector. Los ndices de transmisin actual variarn dependiendo del tipo de
mdem, la velocidad del servidor web, el tipo de conexin a Internet que se use y
otros factores, pero el punto principal est claro: mientras usted utilice ms
grficos, ms tiempo esperar el lector para ver su pgina.
Utilizar un grfico de pantalla completa como men de la pgina principal,
ms un fondo grfico podra dejar a sus lectores esperando impacientemente por
un minuto o ms, incluso si poseen la ultima tecnologa en mdem y una buena
conexin a Internet. Mire a su reloj (o mejor an, mantenga la respiracin) por un
minuto completo, luego pregntese s esa es la bienvenida que desea darle a sus
usuarios cuando estos visiten su sitio web. Una mejor estrategia de interfaz sera
incrementar gradualmente la carga grfica de sus pginas, sometiendo a los
 31

lectores a tiempos de descarga razonables a medida que se internan en su pgina.

De este modo los usuarios van interesndose en su contenido, estarn dispuestos
a esperar periodos de tiempo un poco ms largos que en la pgina principal,
especialmente si usted le brinda descripciones sobre el tamao de los grficos (en
bytes) o advertencias sobre que pginas en particular estn llenas de grficos y
tomarn bastante tiempo en descargar.

Grficos e intranets

Para fortuna de los diseadores grficos, muchos sitios web son creados
principalmente para usuarios educacionales, organizacionales o comerciales
quienes accesan desde sus intranet locales o remotas a velocidades Ethernet o
superiores. Los grficos y el rendimiento de las pginas son tambin de
importancia para estos usuarios, por lo tanto no tiene mucho sentido el restringir
arbitrariamente los grficos de este tipo de publicaciones bajo la razn de ahorrar
ancho de banda. Los nazis del ancho de banda siempre olvidan el siguiente
punto: el aspecto grfico es lo que llev la mayora de la gente al web en primer
lugar. Si usted tiene alta velocidad de acceso, aprovchelo!

Modos de color

A continuacin se presenta un breve repaso de los modos de color,

explicando parte de la terminologa bsica utilizada en los sistemas operativos
Macintosh y Windows.

Los monitores de color actuales para computadoras de escritorio estn

basados en Tubos de Rayos Catdicos (en ingls CRT). Como los CRT transmiten
luz, los monitores de CRT utilizan el modo de color aditivo Rojo-Verde-Azul (en
ingls RGB). El modelo RGB es llamado aditivo porque mediante la adicin de tres
colores puros se obtiene la luz blanca.
 32

Los sistemas operativos (Mac, Windows, etc.) organizan la pantalla del

monitor como una malla, o coordenadas x,y como un tablero de ajedrez. Cada
pequea caja en la pantalla es llamada pixel (como abreviatura de picture
element). Las pantallas actuales de Windows y Macintosh estan hechas de estas
mallas o pixeles (vea el diagrama abajo).

Pixeles y color

Para controlar a cada pixel en la pantalla el sistema operativo debe dedicar

una pequea cantidad de memoria para cada pixel. Solo como una referencia la
memoria dedicada a lo que se ve en pantalla es llamada generalmente como RAM
en video o VRAM. En la forma ms simple de pantallas blanco y negro, un solo
bit de memoria es asignado a cada pixel. De este modo cada bit de memoria
puede ser solo positivo o negativo (0 1), por lo tanto un sistema de video de un
solo bit puede manejar solamente dos colores (blanco o negro) para cada pixel en
la pantalla:
 33

Si se dedica ms bits de memoria a cada pixel en la pantalla, entonces

podemos manejar ms colores. Cuando 8 bits de memoria son dedicados a cada
pixel, cada pixel podra ser uno de 256 colores. (256 = 2 a la octava potencia; en
otras palabras, 256 es el mximo nmero de combinaciones nicas de ceros y
unos que se pueden hacer en 8 bits). Este modo de video es llamado de ocho
bits o 256 colores, y es muy comn en los computadores actuales,
 34

especialmente en las computadoras porttiles y computadoras de escritorio.

Si se emplea an ms memoria para cada pixel, podemos obtener algo

cercano al color de calidad fotogrfica en la pantalla. El modo de video color
verdadero o de 24 bit puede mostrar millones de colores nicos
simultneamente en la pantalla. Color verdadero (24 bit) son imgenes creadas a
partir del uso de 24 bits de memoria para cada pixel; ocho para cada componente
rojo, verde y azul (8+8+8=24).

La cantidad de VRAM dedicada a cada pixel de la pantalla generalmente se

denomina (profundidad de bits) del monitor. La mayora de los computadores Mac
y Windows vendidos en los ltimos aos son capaces de mostrar profundidades de
color superiores a 8 bit, en miles (16 bit) o millones (24 bit) de colores
simultneos.
Para chequear los modo de color disponibles en su sistema, utilice
Pantalla en Control Panel (Win95) o Monitores en Control Panel (Mac).
 35

Profundidad de bits y archivos grficos de color

La terminologa y esquemas de memoria utilizados en los modos de video

son directamente anlogos a los que describen la profundidad de color en los
archivos grficos. En su estado descomprimido, los archivos de imgen de ocho bit
o 256 colores hacen que la imagen se refiera a una paleta o ndice (llamado
tambin Tabla de Referencia de Color o CLUT en ingls). El tema principal de las
imgenes de 8 bit es que estas no pueden contener nunca ms de 256 colores.
 36

Las imgenes en color real o de 24 bit descomprimidas son generalmente

mucho ms grandes que las imgenes de ocho bit descomprimidas, porque en una
imagen de 24 bit se dedican 24 bits de memoria a cada pixel, generalmente en
tres capas monocromticas: una roja, una verde y una azul.
 37

Formatos de los archivos de grficos

El Formato de Intercambio de Grficos (GIF) fue popularizado por el

Servicio de Informacin Compuserve en los 80 como un eficiente medio para
transmitir imgenes a travs de redes de datos. A comienzos de los `90 los
creadores del World Wide Web adoptaron el formato GIF por su eficiencia y amplia
familiaridad. Actualmente la mayora de las imgenes en el web estn en formato
GIF. Virtualmente todos los navegadores web soportan el formato grfico GIF para
las imgenes en lnea. El formato GIF incorpora un esquema de compresin que
mantiene los archivos en su mnimo tamao, y los archivos GIF estn limitados a
paletas de color de ocho bit (256 colores o menos). Existen actualmente algunas
variantes del formato bsico GIF que soportan colores transparentes y aaden el
soporte para imgenes entrelazadas, popularizadas por el visualizdor del web
Netscape Navigator.
Usted puede obtener algunas referencias sobre los distintos formatos GIF
como GIF87a o GIF89a. Todos los tipos de imgenes GIF funcionarn en los
navegadores que soporten el formato bsico GIF, de manera que no debe
preocuparse, sus lectores podrn ver sus imgenes GIF sin importar la versin de
GIF que usted emplee. Aquellos usuarios que poseen navegadores con soporte
para transparencias y entrelazado (como el Netscape Navigator y el Internet
Explorer) apreciarn efectos visuales ms sofisticados, pero todos podrn ver sus
imgenes GIF bsicas.

Compresin de los archivos GIF

El formato GIF utiliza un tipo de compresin relativamente bsico (Lempel

Zev Welch, o LZW) que suprime las ineficiencias en el almacenamiento de
informacin, sin causar prdida de datos o distorsin de la imagen. El esquema de
compresin LZW es el ms eficiente al comprimir imgenes con amplias
extensiones de color homogneo: aunque en realidad no es tan bueno.
comprimiendo fotos complejas con abundantes texturas y gamas de color. Todas
 38

las variaciones de archivos GIF incorporan la compresin grfica LZW. Vea Siegel
(1996) para una excelente discusin sobre como optimizar grficos para la
compresin GIF.

Archivos GIF entrelazados

La descarga de grficos GIF convencionales (no entrelazados) se realiza

con una lnea de pixeles a la vez, y los visualizadores del web como el Netscape
Navigator muestran una lnea de la imagen a la vez, mientras la construyen
gradualmente en la pantalla. En los archivos GIF entrelazados, la informacin de la
imagen est almacenada en un formato que le permite al Netscape (y otros
navegadores que soporten GIFs entrelazados) comenzar a construir una imagen
de baja resolucin del tamao total de la imagen en la pantalla mientras el archivo
an est descargando. El efecto animado de borroso a claro del entrelazado es
visualmente atractivo, pero el beneficio ms importante del entrelazado es que le
 39

brinda al lector una rpida muestra del rea total de la imagen. Este efecto de
muestra puede dar cabida a una mala interpretacin, ya que los archivos
entrelazados no cargan ms rpido que los no entrelazados, solamente toman un
poco ms de tiempo para descargar porque la muestra borrosa (en el archivo
entrelazado) llega ms rpido que la imagen total (en la imagen no entralazada).

Ntese que los ejemplos arriba mostrados solo funcionan la primera vez
que se utilizan. Despus de eso su navegador tal vez cargue la imagen desde su
cach localmente, y la carga en el navegador se visualmente muy rpida, ya que
se realiza desde su disco duro, no desde el web. Utilice el botn de Recargar
(actualizar o reload) para repetir la carga del grfico si carga demasiado rpido,
para as ver la diferencia. Ambos ejemplos de fotografa arriba expuestos son
idnticos excepto por el entrelazado.

Archivos GIF transparentes

Archivos en formato GIF89a le permiten escoger uno o ms colores de la

tabla de referencia del GIF para que sea(n) transparente(s). Utilizando
herramientas de edicin de imgenes como el Adobe Photoshop (y otras utilidades
compartidas shareware), usted puede seleccionar un color para que sea invisible.
 40

Normalmente el color que usted selecciona es el de fondo. En el ejemplo siguiente,

escogemos el fondo rosado para que se convierta en transparente:

Nosotros utilizamos GIF transparentes para los encabezados y pies de pgina de

cada pgina en este manual. El fondo transparente permite a las letras Yale
C/AIM Web Style Guide atravesar el fondo gris de la columna hasta el fondo
blanco de la pgina. El grfico siguiente muestra el encabezado grfico con
transparencia en el tope, y luego muestra como se vera el mismo grfico si no
fuera un GIF transparente:

Desafortunadamente, la propiedad de transparencia no es selectiva, si

usted hace un color transparente, entonces cada pixel en el grfico que comparta
el mismo color se vuelve invisible. Esto puede en ocasiones tener consecuencias
 41

inesperadas, cuando un color es usado tanto en el fondo como en otros lugares de

la imagen por ejemplo:

Aadir transparencia a un grfico GIF tambin puede llevar a resultados

decepcionantes, cuando el grfico contiene bordes degradados con pixeles de
mltiples colores, sta tcnica se denomina Antialiasing y lo que hace es suavizar
visualmente los bordes de las formas slidas, insertando pixeles de colores
intermedios entre el fondo y el color slido. En el ejemplo mostrado abajo, cuando
cambiamos el color de fondo de blanco a transparente (dejando que se vea el
fondo gris de la pgina), obtenemos un desagradable halo blanco alrededor del
grfico.
 42

Usted puede evitarse ese problema con las imgenes suavizadas, creando
grficos sobre un fondo similar al color que usted ha escogido para sus pginas
web. En nuestro caso escogimos blanco como un color de fondo para las pginas
de este manual de estilo. La pintura del ave mostrada en la parte inferior es un

rectangulo (los grficos GIF son siempre rectngulos), pero usted no puede ver los
bordes porque pintamos el fondo en blanco, y luego ajustamos el color blanco del
GIF para que fuera transparente. Esto nos asegura que el ave aparecer sobre un
fondo blanco todo el tiempo, y que los bordes del grfico nunca se vern:

La transparencia funciona con diagramas y formas complejas. Los grficos

GIF de la imagen inferior atraviesan la columna gris y el fondo blanco, porque no
ajustamos el fondo blanco como transparente. As evitamos problemas potenciales
con un halo blanco que rodee a las hojas en la zona de la columna gris, teniendo
que remover el blanco degradado de los bordes de las hojas:
 43

Grficos JPEG

Otro formato grfico usado comnmente en el web es el JPEG (Joint

Photographic Experts Group, o Grupo de Expertos Fotogrficos Unidos), un
esquema de compresin que minimiza el tamao de los archivos. Las imgenes
JPEG son imgenes a full color (24 bit o color real), que en contraste con los GIFs
estn limitados a un mximo de 256 colores en una imagen. Por ello existe mucho
inters en JPEG por parte de los fotgrafos, artistas, diseadores grficos,
especialistas de imgenes mdicas, historiadores de arte y otros grupos para los
que la calidad de imagen es mxima y donde la fidelidad de color no puede ser
comprometida.
JPEG utiliza una muy sofisticada tcnica matemtica llamada
transformacin discreta al coseno que produce una escala de degradacin de la
compresin de grficos. As usted puede escoger el grado de compresin que
desea aplicarle a un imagen en formato JPEG, pero haciendo esto usted tambin
determina la calidad de la imagen. Mientras ms comprima una foto con la
compresin JPEG, ms se degrada la calidad de la imagen. Esto es posible porque
el algoritmo de JPEG descarta los datos innecesarios mientras comprime la
imagen, lo cual es llamado generalmente una tcnica de prdida de imagen. Los
resultados son ms fciles de ver que de explicar. Ntese que la degradacin de la
imagen aumenta en proporcin directa con el aumento de la compresin JPEG:
 44

La figura superior muestra una fotografa original (a), y tres vistas detalladas de
los distintos niveles de compresin JPEG: calidad excelente (b), calidad buena
(c) y calidad pobre. Note la cantidad de cuadrcula en la imagen (d). El patrn de
cuadritos y el ruido oscuro de los pixeles en el fondo verde, son efectos
clsicos de la compresin JPEG.
Abajo hay otro ejemplo de la compresin JPEG. La imagen superior es un
GIF entrelazado. La del medio es la misma imagen como archivo JPEG, comprimida
en Photoshop a calidad media. El delfn inferior es tambin una imagen JPEG,
comprimida con calidad pobre. Note la gran cantidad de ruido y distorsin que
causa la compresin intensiva en el delfn inferior; por lo tanto, no vale la pena
ahorro en el tiempo de descarga a cambio de imgenes de baja calidad.
 45

Guarde sus imgenes no comprimidas!

Una vez que usted comprime una imagen en el formato JPEG, usted ha
perdido datos que no podr recuperar nunca jams, por lo tanto guarde una
imagen no comprimida del archivo original de su imagen.
Una nueva forma de archivo JPEG llamada JPEG progresivo le da a los
archivos de grficos la misma tcnica de descarga gradual (de borroso a claro) que
ofrecen los GIF entrelazados, al igual que estos las imgenes JPEG progresivas
 46

usualmente toman un poco ms para cargar en la pgina, pero a cambio le

brindan al lector una muestra ms rpida de la imagen (aunque en principio sea
borrosa).

Artificios de las imgenes JPEG

El algoritmo JPEG fue optimizado para compresin convencional de

fotografas y tambin es muy bueno al manejar ilustraciones complejas en pintura
(que lucen como fotografas). Fotos y artes con colores suaves y transiciones de
tonos, con pocas reas de contraste brusco o bordes delineados, son ideales para
la compresin JPEG. De cualquier forma, la mayora de los elementos de diseo,
diagramas, letras en imgenes y muchas ilustraciones, estn compuestas de
grficos delineados con colores brillantes que son poco vistos en las fotografas.
La compresin JPEG puede tener un desempeo pobre al manejar grficos
generados por computadora, botones, imgenes ttulo, o cualquier otro objeto de
color artificial con bordes duros como los vistos en los trabajos de arte o
diagramas. Cuando se comprime con JPEG, los diagramas muestran un ruido
alrededor de las reas de transicin producto del patrn de compresin, ya que el
algoritmo de compresin desea ver transiciones de tonos y no puede reproducir
cambios bruscos, como los bordes de los diagramas.
 47

Resumen, Formatos de archivo

Usos para los archivos GIF y JPEG

Ahora que Netscape y otros navegadores soportan ambos tipos de

imgenes (GIF y JPEG), las imgenes de sus pginas web en lnea pueden utilizar
cualquiera de los formatos grficos. De cualquier forma, en la prctica la mayora
de los webmasters continuan a favor del formato GIF para la mayora de los
elementos de diseo. Sin embargo se suelen usar JPEG para las fotografas,
ilustraciones complejas, imgenes mdicas y otro tipo de grficos, donde los
artificios de compresin del proceso JPEG, no degraden severamente la calidad de
la imagen (tal y como lo hace con los diagramas).

Ventajas de los archivos GIF

Es el formato grfico de soporte ms amplio en el web

Todo los navegadores grficos soportan el formato GIF de imgenes en
lnea
Los diagramas se ven mejor en GIF que en JPEG
 48

Los GIF soportan transparencia y entrelazado

Ventajas de los JPEG

Tasa de compresin, facilitando mayores velocidades de descarga

Da excelentes resultados en la mayora de las fotografas e imgenes
mdicas
Soporta imgenes en color verdadero (profundidad de 24 bit)

Ilustraciones

El reto principal al crear ilustraciones para pginas web, es la relativa baja

definicin en la pantalla de la computadora. Actualmente las pantallas pueden
reproducir miles o millones de colores, y la riqueza de color puede en ocasiones
hacer las limitaciones menos notables.
Grficos muy complejos o fotografas a color, a veces lucen
sorprendentemente bien en las pginas web, por dos razones principales:
Los modos de video de color verdadero (24 bit) o alto color (16 bit),
muestran suficientes colores para reproducir con precisin fotografas o
arte complejo.
La luz transmitida desde el monitor muestra un rango ms dinmico y
una intensidad de color mayor, que la luz reflejada de por las pginas
impresas.

Usuarios relacionados con la educacin, estn despertando ante el hecho

de que la publicacin digital est relacionada estrechamente con la publicacin en
color, esto se debe a que en el web no hay restricciones de carcter econmico
para publicar en colores en vez de blanco y negro. Las pginas web tal vez sean
actualmente los mejores medios para distribuir fotografa en color, por ser mucho
 49

ms barata que la impresin a color, y tambin es ms consistente y confiable que

cualquiera de los ms expertos (y costosos) medios de impresin:

El web tambin es excelente para transmitir arte de color complejo a

estudiantes:

Procesando ilustraciones complejas o fotografas

La grfica anatmica de arriba fue originalmente creada con una

resolucin mucho mayor (1000 por 2000 pixeles, profundidad de color 24 bits).
Cuando redujimos una copia al tamao de la de arriba, y utilizamos el filtro en
Photoshop de difuminar la mscara (Unsharp mask), ajustandola a un 60% para
restaurar la claridad del grfico. A pesar de que esta pequea versin del grfico
ha perdido un poco de resolucin y detalle de color, an muestra todas las
regiones anatmicas, resultando as tan buena como su equivalente grfico en un
libro impreso.
Escogimos el formato de archivo JPEG para la imagen anatmica porque el
trabajo de arte es relativamente grande para una imagen web. Tambin porque no
contiene rotulados ni elementos de diagrama, que se reproduzcan de manera
deficiente en los JPEG comprimidos. Las imgenes JPEG pueden ser empleadas
para pinturas y fotografas con etiquetas, si usted escoge el modo de compresin
 50

adecuado. La pintura en la parte superior fue comprimida en Photoshop a un nivel

de buena calidad, el cual es el nivel medio de compresin (excelente, buena,
pobre). Si usted escoge el modo buena o excelente, las etiquetas de texto
podrn verse aceptables, al menos en modos de video de 24 o 16 bit. Ntese que
el texto de la firma es claro y legible, a pesar de que un acercamiento muestra un

poco de ruido alrededor de los caracteres. Todos los dems grficos en la

pgina estn en formato GIF, porque son ms pequeos o porque contienen
elementos de diagrama y/o texto.

Diagramas para la pantalla

Los diagramas bsicos tambin funcionan bien en la pantalla del

computador si estn bien diseados para coincidir con la malla de pixeles en la
pantalla. Los grficos construidos con lneas ortogonales (lneas horizontales o
verticales) o lneas diagonales con ngulos de 45 se ven mejor en la pantalla, tal
y como esta vista de acercamiento lo ilustra:
 51

Los iconos complejos son difciles de interpretar y lucen borrosos y

confusos en la pantalla. Mantenga sus iconos e imgenes de navegacin tan
sencillos como sea posible:

Grficos con perspectiva isomtrica tambin funcionan bien, porque estos

dependen de lneas rectas y diagonales con 45 de inclinacin.
 52

Los grficos creados cuidadosamente para coincidir con la malla de pixeles

no pueden ser cambiados de tamao automticamente en Photoshop, deben ser
redibujados manualmente en tamaos ms grandes o pequeos para evitar la
borrosidad y distorsin que destruye su eficiencia:

Siempre utilice los grficos GIF para diagramas, grficos de navegacin, y

grficos que contengan texto.

Optimizando los grficos, I

Los grficos a color son una de las caractersticas que define a las
publicaciones en lnea. En contraste al alto costo y complejidad de la impresin en
cuatro colores en papel, con documentos electrnicos no hay necesidad de
economizar evitando el uso de contenido en colores. Existen potenciales bajas de
desempeo al llenar sus pginas web de grandes y brillantes imgenes en color,
 53

pero con la adecuada planificacin usted puede optimizar los grficos en sus
pginas web, para que descarguen ms rpido y reproduzcan de manera ms
precisa el color en la pantalla del lector.

Color y los grficos GIF

El formato grfico GIF fue desarrollado para optimizar la transmisin de

datos de imgenes a travs de las redes. Para mantener los archivos con una
tamao reducido, los diseadores de GIF limitaron el nmero de colores en una
imagen GIF a 256. Imgenes limitadas a 256 colores tambin son llamadas
imgenes de 8 bit o de color indexado. El color indexado se refiere a la paleta
de indexacin que cada imagen crea a partir de su composicin de colores. Por
ejemplo, la imagen GIF de abajo contiene 256 colores, mostrados en la paleta de
colores:
 54

Puede parecer que 256 colores son ms que suficiente para manejar la
mayora de las imgenes, pero los grficos GIF estn algo limitados en su habilidad
de manejar la casi infinita gama de colores que tienen la mayora de las
fotografas. Cuando usted convierte una imagen de color real (que generalmente
contiene millones de colores) a una de tipo GIF 255 colores, usted pierde parte del
detalle de la imagen. A travs de un proceso llamado temblado (dithering), los
programas de edicin de imgenes como el Photoshop yuxtaponen pixeles de
distintos colores en un suave patrn de puntos, propiciando una gama de colores
intermedios en la imagen cuando se ve esta a una determinada distancia (o
acercamiento, zoom).
 55

Paletas personalizadas y paletas de color del sistema

Normalmente cuando usted convierte una imagen de color real en un GIF,

usted deja que el programa escoja los 256 colores que mejor coinciden con la
imagen en particular. Esto resulta para las imgenes optimizadas en GIF, pero trae
sus desventajas. El problema se presenta cuando dos o ms GIFs con paleta
personalizada (que necesitaran 512 colores simultneos), necesitan estar en
pantalla al mismo tiempo la computadora en tal caso slo podr mostrar 256 (un
modo de video de 8 bit). Si el lector de su pgina tiene un monitor que solo
muestra 256 colores al mismo tiempo (como la mayora de los viejos monitores
SVGA de la Mac), entonces las imgenes se vern distorsionados.
La mayora de los navegadores como el Internet Explorer y el Netscape
avigator resuelven dichos problemas de demasiados colores en la imagen,
utilizando la paleta del sistema de los sistemas operativos Macintosh o Windows.
Cuando trabajan sobre un modo de video de 256 colores, el programa navegador
fuerza el rango de colores en la pgina a coincidir con los colores de la paleta
estndar del sistema:
 56

Desafortunadamente, las paletas de sistema de Mac y Windows no son las

mismas, solo 216 de los colores son idnticos en ambas paletas de sistema. Una
paleta que incorpora los colores comunes de ambos estndar Mac y Windows se
puede apreciar abajo:

Forzar un GIF hecho de una paleta personalizada, (figura a., abajo) para
que sea mostrado dentro de una paleta de color limitado (sistema), en ocasiones
genera distorsiones desagradables en la imagen. Un navegador web corriendo en
un modo de video de 8 bit, no tiene manera de optimizar su paleta de colores
particular, el usa la simple lgica de forzar la imagen al color equivalente (o ms
cercano) en la paleta de sistema. El resultado generalmente corresponde a
distorsiones bruscas de color (figura b., abajo):
 57

Optimizando los grficos, II

Si usted utiliza un programa de edicin de imgenes sofisticado como el

Debabilizer 1.6 para Mac, usted puede convertir las imgenes para que estn
conforme a las paletas Macintosh o Windows (incluso una paleta que este de
acuerdo a ambos sistemas). Usted perder algo de resolucin y fidelidad en la
imagen debido al dithering, pero sus imgenes se vern bien en la mayora de
modos de video de 256 colores. La imagen GIF en la parte inferior tiene una paleta
personalizada:

Esta es la misma imagen adaptada a la paleta de sistema de Macintosh.

 58

Tomando en cuenta que todas las paletas de sistema RGB comparten los mismo
colores, sta imagen se ver relativamente bien en ambos sistemas operativos.
Ntese sin embargo, en el detalle ampliado de la imagen, como el color y la
resolucin de la imagen se pierden como consecuencia del forzado a la paleta del
sistema; no solo se pierden colores tambin se pierde resolucin:

Otra opcin y una mejor

Usted puede escoger que hacer la mayora de las veces: Utilizar grficos
GIF con paletas de color personalizadas, o imgenes JPEG. La mayora de los
usuarios de computadoras ahora trabajan en mquinas capaces de mostrar modos
de video superiores a los 8 bits de profundidad, por lo tanto, muchas de las
situaciones indeseables, como la degradacin (dithering), se estn convirtiendo en
cosa del pasado. En aplicaciones de la fotografa como la medicina, ingeniera y la
historia del arte (por nombrar slo algunas), la calidad de imagen es lo esencial.
Por lo tanto, utilizar imgenes GIF con paletas de color personalizadas, o imgenes
JPEG, y resignarse a que algunos usuarios vean imgenes degradadas no resulta
del todo conveniente. Tal vez usted debera poner una nota en la cual seale que
las imgenes en la pgina estn optimizadas para ser vistas en modos de video de
16 bit o superior.
Por ejemplo, la mayora de las imgenes de las que dependen los
diagnsticos mdicos estn en blanco y negro (ejemplo una radiografa pectoral).
Cuando se convierten a GIF con una paleta de color personalizada de 256 escalas
de grises y se ven en un modo de video de 16 o 24 bit de profundidad de color, se
reproduce una distorsin de la escala de gris. La figura B muestra una ampliacin
de un archivo sin comprimir del Photoshop; la C muestra la misma rea en la
versin comprimida en GIF (no hay prdida en la calidad de la imagen debido a la
compresin con GIF):
 59

Recuerde:
Siempre guarde una copia de los archivos de grficos y fotografas
originales en su estado de color mximo antes de hacer una nueva versin
utilizando la paleta del sistema. En la medida en que los computadores con alto
nivel de color (16 bit) y color real (24 bit), se convierten en algo cada vez ms
comn, los problemas de distorsin de color en las pginas web gradualmente se
acabarn y tal vez usted quiera remplazar sus imgenes en 8 bit por las versiones
full color dentro de unos aos. Pero usted solo puede hacer eso si guarda los
originales.

Para los fotgrafos u otros publicadores a fines deberan utilizar el formato

de archivo JPEG. El formato JPEG permite una compresin ms eficiente de los
archivos y aumenta la velocidad de descarga de las imgenes grandes. De
cualquier forma, los JPEG son principalmente para imgenes full color (que
contiene miles o millones de colores al mismo tiempo), de modo que las imgenes
JPEG se vern distorsionadas cuando son vistas en un modo de video de 256
 60

colores o inferior. Netscape hace un buen trabajo mostrando imgenes JPEG en

modos de video de 8 bit, pero slo entornos de 16 o 24 bits, mostrarn las
imgenes JPEG de manera precisa.

Alto y ancho a travs de etiquetas

S usted pone etiquetas de altura (HEIGHT) y ancho (WIDTH) en las

etiquetas de imagen en su cdigo HTML, dicha informacin le ordena al navegador
cuanto espacio dentro de la pgina debe dedicar a la imagen. As el visualizador,
comienza a mostrar la pgina incluso antes de que los grficos hayan comenzado a
descargar. Esto no aumenta la velocidad de descarga de las imgenes (lo nico
que logra esto es una conexin ms rpida), pero le permite al usuario ver la
estructura bsica de la pgina rpidamente. Cuando usted proporciona los datos
de alto y ancho de los grficos de la pgina, el navegador por lo general llenar
primero los espacios dedicados a texto primero, y luego verter los grficos en los
espacios ya apartados. As el usuario puede comenzar a leer la pgina mientras los
grficos son cargados. Por ejemplo:

<IMG SRC="picture.gif" HEIGHT="30" WIDTH="475">

Para un mejor rendimiento, asegurese que todas las etiquetas de su

cdigo HTML incluyan la informacin de ancho y alto (incluso para los pequeos
botones grficos).

Colores de fondo

Los fondos web de colores ofrecen un medio cero-ancho-de-banda para

cambiar el aspecto de sus pginas sin aadir grficos. Tambin permiten
incrementar la visibilidad de sus pginas, ajustar el color de fondo con el arte de
 61

imgenes presentado y para sealar un amplio cambio de contexto de un lugar de

su sitio a otro.
Los fondos de patrones e imgenes de fondo son los elementos ms
controversiales para las pginas web. Ambas caractersticas aaden una
complejidad de elementos grficos, sin incrementar la legibilidad. Una pobre
seleccin de grficos de fondo ha sido la causa de algunas de las ms horribles
pginas del web. De cualquier forma, en manos de un experimentado y
documentado diseador grfico el uso de este tipo de caractersticas para el fondo
puede resultar en un efecto tan impresionante como el impacto grfico visto en los
CD-ROMs multimedia.

Cambiando los colores de los elementos de la pgina

Netscape le permite especificar un color determinado para el fondo, el

texto y los enlaces de hipertexto de su pgina. Haciendo posible el deshacerse del
fondo gris por defecto, sin tener para ello que descargar una imagen. Tambin
puede manipular los colores de otros elementos en las pginas, usando un sencillo
conjunto de extensiones HTML. Estas extensiones pueden ser la forma ms
eficiente de brindarle a sus pginas un aspecto particular, porque el navegador
maneja todos los cambios de colores, y sus lectores no tiene que sentarse a
esperar mientras descargan un montn de grficos.

Escoger el color de fondo es fcil en programas de edicin de pginas web

con estructuras WYSIWYG (siglas en ingls de: what you see is what you get, en
castellano lo que usted ve es lo que usted obtiene). Desafortunadamente, escoger
un color sin una de estas herramientas de edicin es un procedimiento tedioso. El
color especificado en la etiqueta se hace en cdigo hexadecimal, donde los seis
elementos proporcionan los valores de rojo, azul y verde que generan el color. En
la etiqueta, el cdigo hexadecimal siempre est precedido por un smbolo #:
(#RRGGBB). Tomando en cuenta que todo esto se maneja visualmente con la
 62

nueva generacin de editores de pginas web, no entraremos en detalles con el

arcaico modo de seleccin de colores hexadecimal.

Aqu estn los cdigos hexadecimales para algunos colores de fondo:

Utilizando extensiones HTML para cambiar el color del fondo de la pgina

es algo sencillo, solo se deben aadir unos tantos parmetros a la etiqueta BODY
al principio del cdigo HTML de su documento web. El siguiente ejemplo genera un
fondo blanco:

<BODY BGCOLOR="#FFFFFF">

Colores de fondo y legibilidad

Cambiar el color de fondo de un pgina de gris a blanco es realmente la

nica modificacin del fondo en la pgina estndar que recomendamos, s su ms
alta prioridad es la legibilidad. La legibilidad en la pantalla de los computadores ya
est comprometida por la baja resolucin de los monitores. Las pantallas comunes
de un computador Macintosh o Windows muestran el texto aproximadamente
entre 72 a 80 puntos por pulgada (aproximadamente 5.200 puntos por pulgada
cuadrada) o casi 300 veces menos resolucin de una pgina de una revista comn,
 63

(1.440.000 puntos por pulgada cuadrada). Texto negro sobre un fondo blanco
refleja el mejor tipo de contraste. Estudios han demostrado que los fondos en
negro son un poco menos legibles que los fondos en blanco, incluso cuando se
emplean letra blancas (para mximo contraste). Los fondos de color pueden
funcionar como una alternativa al simple gris, si los colores se mantienen con baja
saturacin. Por ejemplo, los pasteles y grises claros, con tonos claros de marrn
funcionan mejor.

Patrones de fondo Netscape

A comienzos de 1995 Netscape 1.1 le brind a los autores de pginas la

habilidad de utilizar pequeos grficos JPEG o GIF (o una imagen grande), para
formar un patrn de fondo detrs de la pgina web. La caracterstica es
controversial en las discusiones de los diseadores web, porque las pginas que
utilizan imgenes de fondo tardan ms en descargar, y a causa de dichos patrones
se hace las pginas menos legibles, Esto puede resolverse si estas son diseadas
cuidadosamente.

Para que sta tcnica sea aplicable, la textura grfica debe ser un pequeo
GIF o JPEG, preferiblemente no ms grande que 100 por 100 pixeles de tamao.
Por nuestra experiencia los fondos JPEG descargan ligeramente ms rpido que
sus equivalentes en GIF. Generalmente dichos fondos de patrones grficos son
empleados para generar texturas homogneas:
 64

Los fondos grficos son aadidos a la pgina web a travs de un

parmetro de la etiqueta BODY:

<BODY BACKGROUND="example.jpeg">

Cuando Netscape ve la etiqueta BACKGROUND, dispone la imagen

example.jpeg en mosaico en toda la extensin de la pgina, debajo del texto y
otros grficos. Navegadores anteriores que no soportan imgenes de fondo solo
ignorarn la etiqueta de fondo, y le darn a la pgina un fondo blanco o gris por
defecto.
 65

El cmo usted utilice las texturas de fondo depende completamente de sus

objetivos para su sitio web, las velocidades de acceso que posee su audiencia, y s
la apariencia y estilo CD-ROM multimedia (que se convierte rpidamente en un
clich), contribuye a cumplir las metas especficas de su sitio web. Utilizando un
conjunto de texturas complicadas para el fondo, en cualquier pgina que es de
acceso comn a gente ocupada que busca informacin de trabajo, sera absurdo
someter al lector a largos tiempos de espera, apariencia poco profesional y pobre
legibilidad que disgustara a sus usuarios. De cualquier forma, en manos de un
diseador grfico experimentado, creando pginas diseadas para generar impacto
grfico, la opcin de utilizar texturas abre muchas posibilidades visuales
interesantes. Esto es aplicable generalmente en las universidades y organizaciones
comerciales, donde rpidas velocidades de acceso a la red son comunes y el ancho
de banda no es una preocupacin tan grande como para los usuarios de mdems.
Nuestro consejo es: si usted no posee un entrenamiento grfico
profesional o experiencia construyendo sistemas de comunicacin grfica
complejos, entonces aljese de las imgenes o texturas de fondo, ya que sus
posibilidades de cometer un error funcional y antiesttico son increbles.

Imgenes "mapa"

Las imgenes mapa ofrecen una forma de definir mltiples enlaces en una
sola imagen en una pgina web. As usted puede hacer un aviso en el tope de su
pgina, e incrustarle mltiples reas botn en el grfico. Las imgenes de
encabezado y pie de pgina utilizados en esta gua de estilo son simples imgenes
mapa. As es como se vera el encabezado grfico si usted pudiera ver los enlaces
asignados a reas especficas en la imagen:
 66

Imgenes mapa servidor vs. Imgenes mapa cliente

Hasta hace poco las imgenes mapa sufran de una reputacin de ser
complejas de implementar y lentas de ejecutar, porque el procedimiento original
requera una referencia a un archivo distinto en el servidor, cada vez que el
usuario hacia clic en un rea. Esta tecnologa de imagen mapa de tipo servidor
era innecesariamente compleja y muy ineficiente. Desde comienzos de 1996 la
mayora de los navegadores han soportado las imgenes mapa tipo cliente,
donde la informacin sobre que reas especficas son enlaces, ya est incorporada
en el cdigo HTML de la pgina web a la que pertenece. La mayora de los
programas actuales de creacin de pginas web, incorporan sencillas interfaces
grficas para generar imgenes mapa; por lo tanto, no incluiremos los detalles
tcnicos aqu. (Vanse los enlaces de referencia para ms informacin sobre los
detalles tcnicos al crear imgenes mapa, o mire el cdigo fuente HTML de alguna
pgina que contenga imgenes mapa).

Eficiencia del espacio e impacto grfico

Las imgenes mapa se han convertido en una caracterstica estndar de la

mayora de los sitios web diseados profesionalmente porque ofrecen una
combinacin efectiva de atractivo visual siempre y cuando se usen de manera
adecuada la funcionalidad del espacio. Las imgenes mapa son efectivas
particularmente cuando son incorporadas como un grfico de tamao moderado,
en el tope de las pginas o en los logos y estructuras grficas que identifican su
pgina. Por ejemplo, Apple Computer utiliza una imagen mapa en la parte superior
de su pgina de educacin, dicha imagen proporciona doce enlaces distintos
dentro de un grfico definido, que instantneamente identifica la pgina como
parte del sitio de Apple:
 67

Flexibilidad grfica

Las imgenes mapa son la nica forma de incorporar mltiples enlaces a

una ilustracin grfica, tal y como el ejemplo anatmico:

Las imgenes mapa son tambin el medio esencial para superar la

estructura vertical y orientada linealmente, por la que se caracterizan las pginas
web comunes creadas con etiquetas HTML estndar. Con las imgenes mapa usted
puede simplemente abandonar la estructura de pgina HTML, y construir enlaces
 68

en imgenes grandes, tal y como lo hara al disear un CD-ROM multimedia. Esto

sin olvidar la condicin de velocidad de descarga a considerar, dependiendo del
pblico al que se dirige; Intranet o World Wide Web.
 69

Apndice
Recomendaciones para la creacin y manejo de archivos que formaran parte de un
sitio web:

- Utilice siempre para los archivos de cualquier tipo (imgenes, texto,

HTML) nombres con TODAS las letras en minsculas para evitar confusiones y
dificultades al enlazar los archivos desde otros documentos.
- Para nombrar los archivos utilice (preferiblemente) palabras de 8
caracteres como mximo. No utilice caracteres especiales, por ejemplo , , ni
espacios en blanco para evitar incompatibilidades en otros sistemas, recuerde que
la pgina web que usted est diseando puede ser consultada y guardada por un
usuario en cualquier parte del mundo con cualquier tipo de computador (por
ejemplo un joven en Japn utilizando Windows 3.1).
- Clasifique y distribuya los archivos de un mismo tema y/o tipo (a su
criterio) en subdirectorios distintos para evitar desorden en su carpeta
public_html, lo cual puede traer problemas cuando se desea actualizar o
expandir el contenido del sitio.
- Haga cuidadosamente las referencias a archivos de imgenes o
hipertexto, tomando cuenta el criterio de las rutas relativas. Comencemos por
saber que es la ruta. La ruta (traduccin de path en ingls) es el camino que se
debe recorrer en el sistema de archivos para conseguir el fichero al que usted hace
referencia. De esta manera considere lo grave que seria si las rutas a las
imgenes en su pgina estn mal, eso significa que en vez de las imgenes se
vera en el navegador un icono indicando que no se consigue la imagen.

Existen dos maneras de indicar el camino hacia los archivos dentro de nuestro sitio
web:
 70

En primer lugar est el mtodo absoluto, haciendo una analoga a la vida real,
supongamos que vive en una ciudad donde existe un McDonalds. En su Ciudad
usted sabe que debe tomar un autobs desde su casa al Este de la ciudad donde
esta el McDonalds, una vez all usted puede comer una hamburguesa.jpg. Si lo
tradujsemos al formato de las direcciones en Internet seria algo como:

http://www.ciudad.org/Este/McDonalds/hamburguesa.jpg
Esta es una ruta absoluta.
Sin embargo un da que usted va de paseo por el Este de la ciudad
(http://www.ciudad.org/Este/) decide que quiere comerse una hamburguesa.jpg
en McDonalds. S usted toma la ruta absoluta, descrita arriba, usted tendr
que hacer un largo recorrido para ir hasta su casa y seguir el camino completo
hasta el McDonalds. Por el contrario, si usted considera donde se encuentra
actualmente, slo recorre el camino que le falta para llegar a su destino
utilizando una ruta relativa. Esta sera:

McDonalds/hamburguesa.jpg

La cual aadida al final de su posicin actual:

http://www.ciudad.org/Este/
genera la ruta completa de manera ms rpida, resultando:
http://www.ciudad.org/Este/McDonalds/hamburguesa.jpg

De esta manera se agiliza el funcionamiento de su sitio web, ya que el navegador

no debe localizar el servidor www.ciudad.org cada vez que busca un elemento, es
ms eficiente tomar en cuenta la posicin actual y partir de all con una ruta
relativa.

Adems, generalmente usted no crea y modifica los archivos directamente en

el servidor donde va a trabajar, usted edita en su PC y luego enva los archivos
 71

organizados y listos a un servidor. Ahora imagine que todas las rutas a sus pginas
e imgenes estn hechas de manera absoluta, y su servidor cambia de nombre o
usted decide cambiarse por costos. En tal caso, cuando vaya a publicar en el
nuevo servidor, ninguna referencia a imgenes o archivos funcionar puesto que
las rutas absolutas se refieren a su antiguo servidor. Es lo mismo que si usted va a
otra ciudad (www.londres.org) y desea comer en McDonalds estando en
Downtown, no le servir de mucho la ruta absoluta:
http://www.ciudad.org/Este/McDonalds/hamburguesa.jpg

Usted debe tomar en cuenta donde est actualmente y siguiendo la

ruta relativa McDonalds/hamburguesa.jpg, podr comerse una hamburguesa
con seguridad y rapidez, ya que con su ubicacin
(http://www.londres.org/Downtown/) y su ruta relativa, construye la direccin
completa y especfica.

Por lo general los editores HTML se encargan de este asunto, pero no

siempre lo hacen de la mejor manera; ya que a veces incluyen la ruta absoluta de
los archivos en su disco duro, algo horrible como:
file:///C|/Mis%20documentos/carlosr/mi_pagina/iconos/flecha.gif

Comnmente el servidor donde usted publica su pgina no posee el mismo

sistema de archivos, ni estructura de carpetas que su computador, por lo tanto
cuando las referencias incluyen esta ruta absoluta, las cosas no funcionan bien.

Para contrarrestar este problema tan comn usted debe ignorar todos las
carpetas superiores a directorio donde est la pgina principal de su sitio
(index.html), ya que sta se considera como su carpeta principal,
independientemente del computador en que se encuentre, en este caso la parte de
la ruta a ignorar es:
file:///C|/Mis%20documentos/carlosr/mi_pagina/
 72

Entonces para hacer referencia al archivo flecha.gif en la carpeta "iconos" slo

debe escribir iconos/flecha.gif. Recuerde que el resto de la ruta es agregado
automticamente por el servidor cuando se publica su(s) pgina(s) web.

Como ltima recomendacin con respecto a rutas absolutas y relativas, cuando

tenga organizado su sitio con archivos clasificados en varias carpetas, usted debe
salir de la carpeta actual y entrar a la que desea llegar. Esto seria como salir del
McDonalds para luego ir a Graffiti, usted generalmente sale por la puerta (bueno
al menos debera hacerlo). Para salir de una carpeta en el sistema de archivos
usted utiliza dos puntos seguidos ..; por ejemplo, estamos leyendo el archivo
familia.html en la carpeta personal, cuya ruta absoluta sera algo como:
file:///C|/Mis documentos/carlosr/mi_pagina/personal/familia.html
y usted desea hacer una referencia a su archivo companeros.html en la carpeta
oficina, cuya ruta absoluta sera algo como:
file:///C|/Mis documentos/carlosr/mi_pagina/oficina/companeros.html
En este caso usted debe salir de la carpeta personal, haciendo uso de .., entrar
a oficina e invocar a companeros.html. Esto se hace de la siguiente manera:
../oficina/companeros.html

Adems debe recordar que el separador entre nombre de carpetas usado en

Internet es / (forward slash o barra) en vez de \ (back slash o barra invertida).
Este ltimo es el usado en MS-DOS y Windows para separar carpetas.

- Como ltima pero no menos importante recomendacin, recuerde que los

servidores Unix utilizan como pgina principal de los directorios, cualquier archivo
denominado "index.html" (sin las comillas, por supuesto). Por el contrario en los
servidores Windows NT, el servidor web emplea la pagina "default.htm" como
pgina principal. Para saber ms acerca de este tema, y las caractersticas propias
de su servidor web consulte al administrador de su red local.