Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual de Diseño y Estilo WEB 99
Manual de Diseño y Estilo WEB 99
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
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
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
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.
7
referencias tcnicas e histricas relacionadas, con el desarrollo de texto
estructurado y material histrico sobre el WWW.
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:
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.
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.
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
central
concreta,
pero
generalmente
se
debe
ofrecer
ciertas
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
conceptos,
las
16
inglesa
se
encuentran
bien
establecidas
ampliamente
aceptadas
con
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
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,
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 reencontrar sus direcciones en el web para saber cul es su origen.
Usted
debe
especificar
slidamente
el
ttulo,
autor,
afiliaciones
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
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:
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
sobre
un
consistente
patrn
de
unidades
modulares,
todas
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.
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.
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:
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.
30
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
33
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
de
24
bit
puede
mostrar
millones
de
colores
nicos
35
36
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.
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.
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.
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:
41
inesperadas, cuando un color es usado tanto en el fondo como en otros lugares de
la imagen por ejemplo:
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:
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
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
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).
47
Resumen, Formatos de archivo
48
Los GIF soportan transparencia y entrelazado
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
fotografas
color,
veces
lucen
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:
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.
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:
52
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.
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
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:
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.
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.
62
nueva generacin de editores de pginas web, no entraremos en detalles con el
arcaico modo de seleccin de colores hexadecimal.
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.
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
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
67
Flexibilidad grfica
Las imgenes mapa son la nica forma de incorporar mltiples enlaces a
una ilustracin grfica, tal y como el ejemplo anatmico:
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:
HTML) nombres con TODAS las letras en minsculas para evitar confusiones y
dificultades al enlazar los archivos desde otros documentos.
-
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
rapidez,
ya
que
con
su
ubicacin
ya
que
sta
se
considera
como
su
carpeta
principal,
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.