Universidad Nacional Experimental del Táchira

Centro de Estudios en Teleinformática (CETI)

Laboratorio de Comunicación Multimedia (L@bcomm)

Manual de Diseño y Estilo Web

V.1.0

Revisión y Adaptación: Emir Medina

Traducción: Carlos Maldonado
Revisión Final: Ing. José Lopez
Fuente: Center for Advanced Instructional Media
Yale University.
 2

Filosofía
Introducción
Lo que éste manual no es
Una nota acerca de los navegadores

Propósito de su sitio
¿Cuáles son sus objetivos
fundamentales? Conozca a su audiencia
Cibernautas
Usuarios ocasionales y
novatos Usuarios frecuentes y
expertos Usuarios
internacionales

Estrategias de diseño
Cibernautas
Entrenamiento
Enseñando
Educación
Referencia
 Diseño de interfaz

Introducción
Paginas web vs. Diseño de documentos
convencionales Antecedentes del diseño impreso
Hacer sus páginas
independientes Quien
Que
Cuand
o
Donde

Diseño básico de la interfaz

Diseño centrado en el usuario
Incluir ayudas para una navegación
clara Páginas ciegas

Acceso a la información
Brindarle acceso directo a los
usuarios Ancho de banda e
interacción Simplicidad y consistencia
Estabilidad de diseño
Retroalimentación y diálogo
Diseño para los incapacitados

Navegación
Provea contexto o pierda al lector

Enlaces y navegación
“Regresar” e ir a la página
previa Su primer sitio web
 Porque las barras de botones son útiles
Enlaces relativos vs. Enlaces arreglados

Gráficos para paginas web

Introducción
Gráficos y módems
Gráficos e
intranets

Modos de color
Pixeles y color
Profundidad de bits y archivos gráficos de color

Formatos de los archivos de gráficos

Compresión de los archivos GIF

Archivos GIF entrelazados

Archivos GIF transparentes

Gráficos JPEG
Guarde sus imágenes no
comprimidas! Artificios de las
imágenes JPEG

Resumen, Formatos de archivo

Usos para los archivos GIF y
JPEG Ventajas de los archivos
GIF Ventajas de los JPEG
Ilustraciones
Procesando ilustraciones complejas o
fotografías Diagramas para la pantalla

Optimizando los gráficos, I

Color y los gráficos GIF
Paletas personalizadas y paletas de color del sistema

Optimizando los gráficos, II

Otra opción y una mejor
Alto y ancho a través de etiquetas

Colores de fondo
Cambiando los colores de los elementos de la
página Colores de fondo y legibilidad
Patrones de fondo Netscape

Imágenes "mapa"
Imágenes mapa servidor vs. Imágenes mapa
cliente Eficiencia del espacio e impacto gráfico
Flexibilidad gráfica
Filosofía

Introducción

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
años, en el diseño de software multimedia, interfaces gráficas. Hay muy buenos
sitios web y libros que enfatizan el HTML (Lenguaje de Marcado Hipertexto), y
otros que enfatizan el diseño gráfico Web orientado artística o comercialmente. De
cualquier manera, pocas son las fuentes de documentación existentes que han
intentado alcanzar un diseño de sitios y páginas web, como un reto que combine la
edición tradicional, con el diseño gráfico, el diseño de interfaz, diseño de
información y las habilidades técnicas requeridas para optimizar el código HTML,
gráficos y texto en las páginas web.

Lo que éste manual no es

Nuestro acercamiento al lenguaje HTML y el generalizado problema del
diseño de información para el sistema World Wide Web, no esta basado en la
filosofía que maneja el desarrollo de información estructurada a través de
herramientas de publicación, tal como el lenguaje pariente del HTML, SGML
(Standard Generalized Markup Language). Las recomendaciones proporcionadas
aquí están dirigidas a los intereses prácticos de inclinar y adaptar una herramienta
de edición y publicación relativamente primitiva (HTML) a propósitos para los
cuales nunca se pensó que se utilizara (diseño de páginas gráficas). Si está
interesado en preguntas más amplias sobre publicación en sistemas altamente
estructurados independientes del software navegador (browser), sistema operativo
o restricciones tipográficas, usted debería empezar por consultar en el sitio del
Consorcio del World Wide Web (W3C), el cual tiene una gran cantidad de
referencias técnicas e históricas relacionadas, con el desarrollo de texto
estructurado y material histórico sobre el WWW.

Una nota acerca de los navegadores

La mayoría de los consejos de diseño y la información técnica contenida
aquí, plantean el cómo optimizar los gráficos 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 información aquí que beneficie a los
usuarios de navegadores modo texto, ya que el enfoque principal de este manual
está en el diseño de páginas web gráficas.
 Propósito de su sitio

El primer paso para diseñar 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 propósitos y objetivos, el proyecto comenzará
a vagar fuera del camino y hundirse, o puede llegar al punto de reflejar escasos
resultados.
La planificación 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 diseñar su propio
sitio usted debería:

 Identificar el público al que desea dirigirse

 Manifestar sus propósitos de manera explícita
 Saber sus principales objetivos
 Tener un conciso perfil de la información que su sitio va a tener

¿Cuáles son sus objetivos fundamentales?

Una concreta y corta manifestación de sus objetivos deberían conformar
las bases del diseño de su sitio. De allí se debe partir para expandir las metas
impuestas en los objetivos, lo cual también le servirá como herramienta para
analizar el éxito de su sitio web. Por ejemplo:

“Esperamos que el sitio web de la asociación cumpla estas metas en el

término de los próximos 12 meses:
El sitio web reducirá la demanda de información de rutina en la oficina
principal, tal como; actividades de la asociación, fechas tope, cuotas o
deudas pendientes e información sobre reuniones de la asociación.
Esperamos que el sitio web también traiga consigo el ahorro de una suma
significativa en envío y procesamiento de correspondencia de rutina entre
los miembros de la asociación. El sitio web también albergará todo el
 contenido que actualmente se publica en la revista trimestral de la
asociación, pero también contendrá información más actualizada mientras se
van organizando eventos. Después de un año se encuestará a los miembros
de la asociación en temas como el éxito de la revista en el sitio web, y
explorar las posibilidades de cerrar la publicación de la revista en papel.”

La descripción de los objetivos debería continuar planteando un poco más

las metas financieras específicas y otras metas organizacionales que el sitio web
debe cumplir.
Construir un sitio web es generalmente un proceso dinámico, y no un
proyecto limitado con información estática. El manejo editorial a largo plazo y el
mantenimiento técnico debe ser considerado en sus planes para el sitio. Sin esta
gran perspectiva, su publicación electrónica sufrirá el mismo destino que muchas
otras, un comienzo entusiasta, pero sin logros duraderos.

Conozca a su audiencia
El próximo paso en el proceso de diseño es identificar los usuarios
potenciales que utilizarán su sitio web, de modo que pueda estructurarlo en
función de sus expectativas y necesidades. El conocimiento, antecedente, intereses
y las necesidades de los usuarios que varían desde principiantes que requieren una
presentación estructurada cuidadosamente, hasta los usuarios avanzados que
pueden irritarse ante cualquier cosa que parezca manipularlos o atrasarlos en su
búsqueda de información, son elementos a considerar. Un sistema bien diseñado
debe ser capaz de adaptarse a un rango de habilidades de usuario e intereses. Por
ejemplo, si la meta de su página web es manejar información interna de la
empresa, documentos de recursos humanos u otra información que suele
publicarse en manuales en papel, su sitio será utilizado por mucha gente que lo
visitará varias veces al día, y también por gente que lo consulte sólo de manera
ocasional.
 Cibernautas

Las paginas web dirigidas a los navegantes deben ser análogas con las
portadas de las revistas. El objetivo es incitar al navegante casual con fortaleza de
gráficos y audaces planteamientos de contenido. Todos los enlaces en su página
web deben apuntar hacia las páginas internas del sitio. Proveer una clara y concisa
presentación de lo que hay en el sitio puede ser de interés para el lector.

Usuarios ocasionales y novatos

Estos usuarios dependen de una clara estructura, fácil acceso y los
comentarios que ilustran cómo está organizada la información en su sitio web. Los
novatos tienden a intimidarse por los complejos menús de texto y pueden sentirse
inseguros a navegar en un sitio que no es atractivo gráficamente 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 página web.
Usuarios poco frecuentes de un sitio generalmente aprovechan las páginas de
resumen, mapas jerárquicos y diseños gráficos o iconos que sirvan para recordar
donde se encuentra ubicada la información en el sitio. Un glosario de términos
técnicos, acrónimos, abreviaturas y una lista de las “Preguntas más frecuentes”
puede ser útil para los nuevos o no muy frecuentes visitantes de la página.

Usuarios frecuentes y expertos

Estos usuarios utilizan su sitio para obtener información de manera rápida
y precisa. Usuarios expertos son muy impacientes con los menús que poseen
múltiples imágenes y solo ofrecen entre dos y seis opciones. Los usuarios expertos
piden rápidos y desplegados menús de texto. Las delicadezas gráficas los vuelven
locos. Usuarios frecuentes y expertos generalmente tienen metas específicas en
mente, y le son bastante útiles los menús de texto detallados, un perfil de la
estructura del sitio, o índices amplios que permitan una rápida búsqueda y
obtención de la información, aunque es necesario recalcar que con la incorporación
de una maquina de búsqueda 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
búsquedas para encontrar su información.

Usuarios internacionales
Recuerde que usted está diseñando para el WWW. Sus lectores podrían
ser personas de su misma calle, o gente en Australia o Polonia. Para alcanzar el
máximo número de usuarios en otros países usted podría proveer versiones
traducidas, al menos de las páginas principales. Evite el uso de jerga propia de su
localidad o acrónimos técnicos complicados en las páginas 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 mayoría de los países
restantes ésta fecha abreviada se lee como “3 de abril de 1997”.
 Estrategias de diseño

Todas las maneras de representar información están regidas por ciertos

parámetros determinados por sus objetivos, las características prácticas del medio
seleccionado y la naturaleza de sus usuarios. El gráfico debajo muestra los cuatro
principales tipos de información que se deben ofrecer en una intranet contra dos
variables fundamentales: la estructura lineal de su presentación, 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
propósito específico en mente. Las técnicas para llevar estos clientes potenciales a
un sitio de ventas o entretenimiento están más allá del alcance de este manual,
pero podrá conseguir algunas recomendaciones pertinentes. Las siguientes
categorías de usos web son más adecuadas para los sitios corporativos y
educativos donde los usuarios llegan con un propósito definido.
 Entrenamiento

Aplicaciones para la educación basadas en el web tienden a poseer un

diseño bastante lineal, y presentan pocas oportunidades de desviarse del flujo
central de la presentación. No confunda a los usuarios o confunda sus propias
expectativas ofreciendo muchos enlaces fuera del mensaje principal. Restringir los
enlaces sólo a funciones de paginado como “Próximo” y “Anterior” garantiza que
todos los lectores vean la misma presentación, y le permite hacer una predicción
más precisa sobre el tiempo de contacto del usuario con el documento.

Enseñando

Las buenas aplicaciones educativas son construidas en base a una

narración central concreta, pero generalmente se debe ofrecer ciertas
oportunidades a los estudiantes para desviarse hacia otros temas de importancia.
La información presentada en las fuentes investigativas alternas es usualmente
más sofisticada y profunda que la conseguida en las aplicaciones educativas. Los
enlaces (links) son el aspecto más poderoso del web, pero también puede
convertirse en una distracción que puede interferir en el proceso básico de
aprendizaje. Si usted desea proveerle enlaces a otros sitios en línea relacionados
con lo que está enseñando, debería considerar la idea de agrupar todas estas
referencias en una página aparte separada del flujo principal de información.
Usualmente los usuarios desearan imprimir material del web y leerlo después en
papel. Facilíteles ésta opción y brinda una versión “para imprimir” que acumule
muchas páginas 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 años ha logrado tener una gran aceptación entre los
usuarios de la internet.
 Educación

En este ámbito debe destacarse que los documentos dirigidos a una

comunidad heurística y auto-didáctica pueden interferir en la estrategia de diseño,
convirtiendo a estos en una presentación de carácter restringido y lineal. En
ocasiones los usuarios comunes ya están altamente adiestrados como para
someterse a este tipo de publicaciones. Las estructuras flexibles, interactivas de
diseño no-lineal son ideales para este tipo de usuarios, ya que es bastante difícil
predecir que tópicos, son de mayor interés para un profesional con experiencia o
un estudiante. El diseño debe permitir el acceso rápido a una amplia gama de
tópicos 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 rápido y brindan información, pero este tipo de audiencia se aburre
fácilmente y necesita la presencia de contenido gráfico e ilustraciones bien
diseñadas que se relacionen con el material. El tiempo de contacto entre el usuario
y el documento es impredecible, pero por lo general será más corto que los sitios
de educación o entrenamiento porque los usuarios frecuentemente están bajo
presión de tiempo. Opciones de fácil impresión del documento son también
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 información
para después estudiarla con mas detenimiento.

Referencia
Los sitios web de referencia bien diseñados, le permiten al usuario entrar
rápidamente dentro del sitio, conseguir lo que quieren e imprimir o descargar
(download) fácilmente lo que necesite. Típicamente 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
búsqueda y obtención rápida, fácil descarga de los archivos y opciones de
impresión convenientes. Mantener los gráficos al mínimo para el beneficio de la
velocidad de descarga, y tal vez puede interesarse en investigar sobre software de
búsqueda 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 más corto mejor.

Diseño de interfaz

Introducción

Los usuarios de documentos web no solo se fijan en la información, estos

interactúan con la publicación en gran variedad de maneras sin precedentes en el
diseño de documentos en papel. La interfaz gráfica de usuario (GUI) de un sistema
computarizado incluye la interacción entre imágenes y conceptos, las
características visuales detalladas de cada componente de la interfaz gráfica y la
secuencia funcional de relaciones a lo largo del documento, que producen la
característica de “look and feel” (observar y persibir) de las páginas web.

El diseño gráfico y las características visuales no se emplean solo para

avivar el aspecto de una página web, los gráficos son parte integral de la
experiencia del usuario con su sitio y estilo. En los documentos interactivos es
imposible separar el diseño de imágenes con el diseño de interfaz de la página.

Paginas web vs. Diseño de documentos convencionales

La mayoría de nuestros conceptos actuales con respecto a la estructura de
información, derivan de la organización de libros impresos y periódicos, y toda la
serie de indexado de libros y sistemas de catálogo que se desarrollan en base a la
información impresa. Las interfaces estándard de los libros del mundo de habla
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 característica de un libro, desde la
tabla de contenidos hasta el índice y pies de página, han evolucionado a través 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 después del crecimiento explosivo de la publicación, que
sucedió después de Gutenberg, tomó más de 100 años desarrollar el numerado de
páginas, los índices, tablas de contenido e incluso las páginas de título, de modo
que se convirtieran en características rutinarias de los libros. Los documentos web
sufrirán una evolución similar y una estandarización de la manera en que la
información se organiza y se hace disponible electrónicamente.

Antecedentes del diseño impreso

A pesar de que los documentos interactivos enlazados a través de los
hipermedios, proponen retos de innovación a los diseñadores de sistemas de
información, la mayoría de la asesoría necesaria para diseñar, crear, ensamblar,
editar y organizar distintos medios, no está radicalmente alejado de las prácticas
actuales en los medios impresos. La mayoría de los documentos web pueden ser
creados de acuerdo a las recomendaciones de estilo editorial y organización de
“The Chicago Manual of Style”. La mayoría de lo que una organización necesita
saber con respecto a la creación clara, amplia y consistente en cuanto a
estándares de publicaciones internas, está disponible en guías como “Xerox
Publishing Standards: Un manual de estilo y diseño”. No se confunda con la
novedad de las páginas web porque corre con el riesgo de dejar a un lado las
reglas básicas editoriales y de diseño gráfico.
 Hacer sus páginas independientes

Las páginas 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 página web que no tiene nada que ver con la actual. Por ello las páginas web
necesitan ser más independientes que las páginas de un libro convencional. Esto
usualmente significa que los encabezados y pies de página de las páginas web son
más informativas y elaboradas que las páginas impresas. Sería absurdo repetir los
derechos de copia (Copyright), autor y fecha de un libro al final de cada página,
pero las páginas web necesitan en ocasiones ese tipo de información porque una
sola página 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 páginas
web. Publicaciones profesionales, revistas, y la mayoría de los periódicos repiten la
fecha, volumen y número de ejemplar en la parte superior o inferior de cada
página impresa, porque saben que los lectores suelen extraer artículos del
periódico o copias fotoestáticas de publicaciones y posteriormente necesitan citar
la información con los datos de la fuente original del artículo.
Dadas estas dificultades potenciales al momento de crear sitios web, los
cuales están llenos de complejos contenidos y además son fáciles de usar; la mejor
estrategia es aplicar consistentemente algunos de los principios básicos de diseño
en cada página que usted elabore. Los elementos básicos de un documento no son
complicados y no tienen prácticamente nada que ver con la tecnología de Internet.
Es tal como el tipo de ensayos de secundaria: quién, qué, cuándo y dónde.

Quién
¿Quién está hablando? La pregunta es tan básica, y dicha información es
tan frecuentemente obviada por los autores web, quienes en ocasiones pasan por
alto la pieza fundamental de información que el lector necesita para fundamentar
el origen del documento: ¿quién me está diciendo esto? Bien sea que la página
pertenezca a un autor individual o una institución, siempre debe decírsele al lector
quien creó la página web. La avalancha de sitios web propagando información
incorrecta o mal interpretando material sobre el choque del vuelo 800 de la TWA
nos ofrece un vívido ejemplo de cómo información de origen o autenticidad
desconocida, puede rápidamente dominar la legítima discusión e investigación.

Qué
Todos los documentos necesitan de títulos claros para capturar la atención
de los lectores, pero por varias razones particulares de las páginas web este
elemento de edición básico es crucial. El título del documento es en ocasiones lo
primero que muestran los visores de documentos WWW mientras descargan la
página (download). En las páginas con exceso de gráficos, el título puede ser lo
único que los usuarios vean por unos cuantos segundos mientras las imágenes
terminan de cargarse en la página. Adicionalmente, el título de la página se
convertirá en el texto marcador de página (bookmark o favorito), generado por el
visor si el usuario elige añadir la dirección actual a su directorio de páginas de
acceso directo. Un título ambiguo o extraño, o un título que contenga más
términos técnicos que lenguaje natural, no ayudará al usuario a recordar porque
incluyó la página dentro de sus marcadores de página.

Cuándo
La puntualidad es uno de los elementos más importantes al determinar el
valor de un documento. Tomamos información sobre la edad de la mayoría de los
documentos, por ejemplo: periódicos, revistas y virtualmente cualquier
correspondencia de oficina, todas tienen fecha. Por lo tanto, se debe fechar cada
página 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
línea que son actualizados regularmente, pues tal vez no se vea una señal
significativa de cambio de contenido para los lectores ocasionales. La información
corporativa, manuales personales, información sobre productos, y otros
documentos técnicos que son distribuidos como páginas web, deben tener siempre
las fechas de edición.

Dónde
El web es un lugar extraño que tiene inmensas dimensiones de
información, pero pocas señales explícitas en cuanto a la situación física donde el
documento se origina. Se hace clic en un enlace y podría estar conectado a un
servidor en Sidney, Australia; Chicago, EEUU o prácticamente cualquier otro lugar
con acceso a Internet. A menos que usted esté bien documentado en cuanto a la
estructura y gramática de las direcciones (URL), puede ser algo difícil decir el
origen de una página. Después 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 dónde es usted, con (si es relevante)
sus afiliaciones corporativas o institucionales.
Incorporar la dirección principal (home URL) al menos en las páginas
principales de su sitio, es una fácil manera de mantener la conexión con el lugar al
que pertenece. Una vez que el lector ha guardado la página como un archivo de
texto o impreso la página en papel, esta conexión 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
características opcionales. Muchos de nosotros actualmente tenemos montañas de
páginas web impresas que están por ahí, sin ninguna forma sencilla de re-
encontrar sus direcciones en el web para saber cuál es su origen.
Usted debe especificar sólidamente el título, autor, afiliaciones
institucionales del autor, fecha de revisión, y proveer al menos un enlace a una
página local en cada página de su sistema; además de colocar la URL de la página
principal (home page), en algunas de las páginas principales de su sitio.
 Incluya estos elementos básicos y usted ya tendrá alrededor de un 90%
del recorrido para proveer de información a sus lectores con una comprensible
interfaz de usuario.
 Diseño básico de la interfaz

Diseño centrado en el usuario

Las interfaces gráficas de usuario fueron diseñadas para darle a las
personas control directo sobre sus computadoras personales. Los usuarios actuales
esperan un nivel avanzado de diseño de cualquier interfaz gráfica, incluyendo las
páginas web. La meta es satisfacer las necesiadades de sus usuarios potenciales,
adaptando la tecnología del web a sus expectativas, nunca exigiendo que el lector
se conforme con una interfaz que interponga obstáculos innecesarios en su
camino.
Es en este momento donde su investigación sobre las necesidades y
características de su audiencia es muy importante. Es imposible diseñar para una
persona desconocida cuyas necesidades usted no entiende. Para mejorar esta
situación debe crear situaciones ejemplo con distintos tipos de usuarios buscando
una parte específica de la información en su sitio. ¿Qué ayuda le puede brindar a
un usuario avanzado el diseño de su página, sí él busca una fracción específica de
información? ¿Podría un novato intimidarse ante un menú de texto complicado?
Probar sus diseños y obtener opiniones de los usuarios es la mejor forma de
determinar si sus ideas de diseño están dándole a los usuarios lo que ellos esperan
del sitio.

Incluir ayudas para una navegación clara

En el estado actual de la tecnología en el web la mayoría de las páginas
web incluyen navegar a través de enlaces de hipertexto entre documentos. El
principal problema de interfaz en los sitios web es la falta de sentido de ubicación
con respecto a la organización interna de información. Iconos explícitos, esquemas
gráficos, una visión global basada en texto o gráficos (site map) y una sección de
sumario pueden, darle al usuario la seguridad de que puede encontrar lo que está
buscando sin perder tiempo.
Los usuarios deben siempre poder retornar fácilmente a su página
principal, y a otros puntos de navegación principales de su sitio. Estos enlaces
básicos, deben estar presentes en cada página de su sitio, ya que son en
ocasiones botones gráficos que proporcionan navegación básica y ayudan a crear
una identidad gráfica, que le señala al usuario que aún está en su sitio web. Por
ejemplo en el sitio de Netscape Corp. esta barra de botones aparece en la parte
inferior de cada página.
La barra de botones es útil (muchas opciones en un lugar reducido),
predecibles, (siempre esta allí, al final de todas las páginas) y le brinda un una
identidad gráfica consistente a cada página en el sitio de Netscape.

Páginas ciegas
Cada página debe contener al menos un enlace. Las páginas estilo “calle
ciega” sin enlaces a ningún otro página local en el sitio no sólo son una frustración
para el usuario, sino que generalmente es la pérdida de una oportunidad de llevar
el navegador a otra página en su sitio.
Las páginas web a veces aparecen sin ningún preámbulo: los lectores a
veces crean o siguen enlaces a subsecciones específicas. De tal manera, tal vez
nunca vean su página principal o cualquier información introductoria en su sitio
web. Si las páginas de dicha subsección no poseen enlaces de retorno más arriba
en la jerarquía, a la página principal a páginas de menú local, el lector esta
prácticamente bloqueado para accesar al resto de su sitio web.
 Acceso a la información

Brindarle acceso directo a los usuarios

La meta aquí es proveer al usuario con la información que quiere en la
menor cantidad de pasos posibles, y en el menor tiempo. Esto significa que usted
debe diseñar una sistema jerárquico de información eficiente, para minimizar el
número de pasos en las páginas de menú. Estudios sobre las interfaces han
mostrado que los usuarios prefieren menús que presenten un mínimo de cinco a 7
enlaces (no mas); estos mismos usuarios prefieren varias pantallas con baja
densidad de opciones, en vez de muchos niveles de menús simplificados.
En la tabla debajo note que usted no necesita muchos niveles de menú
para mostrar un gran número de opciones:

Ancho de banda e interacción

Los usuarios no toleran largas demoras. Investigaciones de factores
humanos han demostrado que para la mayoría de las actividades de computación,
el espectro de frustración es de alrededor de 10 segundos. Los diseños de páginas
web que no están acorde con la velocidad de acceso a la red de sus usuarios
comunes solo logran frustrarlos. Si sus usuarios son principalmente un publico
navegador común “surfeando” en el web a 28.8 kbps a través de una línea
telefónica, es absurdo poner imágenes muy grandes en sus páginas, ya que el
usuario promedio no tendrá la paciencia suficiente, para esperar indefinidamente
mientras los gráficos descargan a través de la línea telefónica. De cualquier forma,
si usted está construyendo el sitio Intranet de una universidad o una compañía,
donde la mayoría de los usuarios estarán accesando a su servidor web a
velocidades Ethernet (10 Mbps) o mejor, usted puede ser algo más ambicioso en el
uso de gráficos y multimedia.

Simplicidad y consistencia
Los usuarios no se impresionan con la complejidad innecesaria,
especialmente los usuarios que dependen de su sitio para obtener información
puntual y precisa, relacionada con su trabajo. La interacción de la interfaz debe ser
simple, lógica y familiar para la audiencia, si el tema a tratar es el diseño de
información, escoja elementos como un libro o una biblioteca, no una nave
espacial o un televisor. Los mejores diseños de información son aquellos que la
mayoría de los usuarios no perciben.
El trabajo de Studio Archetype para el sitio web de Adobe Corp, es un
excelente modelo de diseño web. Las páginas utilizan ampliamente los gráficos
como ayudas de navegación , consistentemente aplicados a lo largo de todas la
páginas del sitio. Una vez que usted sabe dónde se encuentran los enlaces
estándar en el encabezado gráfico de la página, la interfaz se vuelve casi invisible
y la navegación es fácil.
 Para la máxima funcionalidad y legibilidad de su página, el diseño debe ser
construido sobre un consistente patrón de unidades modulares, todas
compartiendo el mismo formato básico de mayas, temas gráficos, convenciones
editoriales y jerarquías de la organización. La meta es ser consistente y predecible,
de modo que sus usuarios se sientan cómodos navegando en su sitio, y seguros de
que ellos saben como conseguir lo que buscan. La identidad gráfica de una serie
de páginas en su sitio web provee guías visuales para la continuidad de la
información. Los encabezados de menú gráfico presentes en cada página del sitio
de Adobe crean una interfaz de usuario consistente y una identidad corporativa
firme:

Incluso si su página no utiliza gráficos alineados, una firme adhesión al

formato de títulos, subtítulos, pies de página y enlaces a su página principal o
página relacionadas también reforzará el sentido de identificación con el sitio web
de su organización.
Para preservar el efecto de un sistema uniforme de páginas usted podría
considerar la idea de traer información importante a su sitio y adaptarlas a su
esquema de presentación en ves de utilizar enlaces que envíen al lector lejos de su
página (si no existen restricciones de copia por poner la información en su sitio,
claro está).

Estabilidad de diseño
Si desea convencer a sus usuarios de que lo ofrecido por usted es preciso
y confiable usted tendrá que diseñar su sitio web tan cuidadosamente como
cualquier otro tipo de comunicación corporativa, con los mismos exigentes
estándares de diseño y edición. Un sitio que parece desordenado con un diseño
gráfico pobre y bajos estándares de edición no inspiraran seguridad en el usuario.
La estabilidad funcional de su diseño 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
diseñe 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 páginas periódicamente para asegurarse que sus
enlaces aún trabajen adecuadamente, y el contenido que se encuentre en ellas
aún sea relevante para sus necesidades.

Retroalimentación y diálogo
Su diseño web debe ofrecer una constante confirmación visual y funcional
de las opciones y alternativas, a través del diseño gráfico, con botones de
navegación o enlaces de texto ubicados de manera uniforme.
La retroalimentación también significa estar bien preparado para responder
a las necesidades y comentarios de los usuarios. Los sitios web bien diseñados
deben siempre proveer enlaces directos al sitio del editor o webmaster responsable
de la administración del sitio. La planificación de este tipo de relación sobre la
marcha con los usuarios de su sitio es vital para el éxito a largo plazo de la
organización.

Diseño para los incapacitados

No todos los usuarios de su sitio tendrán la capacidad de aprovechar los
gráficos que usted ofrece en sus páginas, ya que una porción de sus usuarios
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 gráficas puedan aún entender las funciones
gráficas de sus páginas. Utilizando software especialmente diseñado, usuarios
ciegos pueden escuchar (a través de voz sintetizada) los mensajes alternativos que
usted provea con sus gráficos; por lo tanto, no se perderán completamente el
contenido de sus fotos y botones de navegación gráfica. Si usted tiene en mente
un sistema de menús gráfico para la navegación, será muy importante la inclusión
de menús alternos basados solo en texto como ayuda para este tipo de usuarios,
quienes no pueden ver ni utilizar sus menús gráficos.

Navegación

Proveer un nutrido y consistente conjunto de navegación gráfica y enlaces

interactivos entre las páginas web de su sitio, llamará la atención de sus usuarios
hacia su página, apartándolos de los enlaces de propósito general y llevándolos
directa y profundamente hacia el contenido que necesitan. De esta manera,
también se colabora en brindarle al usuario una idea de cómo se organiza el site
de su organización y hace gráficamente explícito el orden y lógica de su sitio.

Provea contexto o pierda al lector

Los lectores necesitan un sentido del contexto y de su localización dentro
de una organización de información. En los documentos tradicionales en papel este
sentido de “dónde está usted” es una mezcla del diseño gráfico del libro, la
organización del texto y la sensación física del libro como un objeto. Cuando
vemos un enlace de hipertexto en una página web tenemos algunas señales de
hacia dónde nos dirige, cuánta información está allí y exactamente cómo se
relaciona la información enlazada con la página actual. Incluso la apariencia de
cada una de las páginas individuales está limitada para la mayoría de los usuarios.
La mayoría de las páginas web no se ajustan totalmente al monitor estándar de
oficina (14 o 15”), de forma que siempre hay una parte de la página que el usuario
no puede ver.
Las páginas web necesitan darle a sus usuarios guías explícitas hacia el
contexto y organización de la información, porque sólo una pequeña porción del
sitio (menos de una página) es visible al mismo tiempo sin mover la barra de

desplazamiento:

Mientras usted sea un diseñador web es su responsabilidad proveer estas

características funcionales y de contexto al lector.

Enlaces y navegación

“Regresar” e ir a la página previa

Todos los sistemas de hipertexto poseen un problema en común, no
poseen precedentes en medios impresos: por ejemplo regresar a lo largo de una
serie de enlaces que el usuario haya visitado anteriormente no es la misma
operación de regresar a través de páginas 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 país a otro.

¿Por qué las barras de botones son útiles?

Para el diseñador de información los enlaces de hipertexto son una arma
de doble filo. Los cambios radicales en el contexto que los enlaces generan al
cambiar de una página a otra, pueden confundir fácilmente a los usuarios, quienes
necesitan guías organizadas y elementos de interfaz para entender y seguir los
enlaces de hipertexto de una página 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 página del sitio web en la página 6, el sitio
está ordenado en una secuencia de páginas.

Es recomendable aumentar el estándar de opciones del visualizador,

“Regresar” y “Adelantar”, con botones de “Próxima Página” y “Página Anterior”
incluidos dentro de la estructura de la página, de modo que el lector posea
herramientas de interfaz adicionales para navegar a través de la información en la
secuencia que el autor crea conveniente, sin alterar la característica no lineal de
los documentos en hipertexto.
Gráficos para paginas web

Introducción

Esta sección contiene técnicas para optimizar la apariencia y eficiencia de

los gráficos de sus páginas web. A pesar de que las publicaciones electrónicas
liberan de los costos y las limitaciones de la reproducción de color en papel, usted
aún necesitará hacer cálculos cuidadosos (y algunos compromisos) si desea
optimizar los imágenes y fotografías para distintos tipos de monitores y
velocidades actuales en la Internet.

Gráficos y módems
La mayoría de la presencia web actual está conformada por gente
accesando mediante proveedores de servicio, a través de modems de 28.8 Kilobits
por segundo (Kbps) desde sus casas, oficinas o lugares de trabajo remotos. A 28.8
kbps usted sólo 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 página web podría tomar 10 segundos o más para cargar en el visualizador
del lector. Los índices de transmisión actual variarán dependiendo del tipo de
módem, la velocidad del servidor web, el tipo de conexión a Internet que se use y
otros factores, pero el punto principal está claro: mientras usted utilice más
gráficos, más tiempo esperará el lector para ver su página.
Utilizar un gráfico de pantalla completa como menú de la página principal,
más un fondo gráfico podría dejar a sus lectores esperando impacientemente por
un minuto o más, incluso si poseen la ultima tecnología en módem y una buena
conexión a Internet. Mire a su reloj (o mejor aún, mantenga la respiración) por un
minuto completo, luego pregúntese sí esa es la bienvenida que desea darle a sus
usuarios cuando estos visiten su sitio web. Una mejor estrategia de interfaz sería
incrementar gradualmente la carga gráfica de sus páginas, sometiendo a los
lectores a tiempos de descarga razonables a medida que se internan en su página.
De este modo los usuarios van interesándose en su contenido, estarán dispuestos
a esperar periodos de tiempo un poco más largos que en la página principal,
especialmente si usted le brinda descripciones sobre el tamaño de los gráficos (en
bytes) o advertencias sobre que páginas en particular están llenas de gráficos y
tomarán bastante tiempo en descargar.

Gráficos e intranets
Para fortuna de los diseñadores gráficos, 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 gráficos y el rendimiento de las páginas son también de
importancia para estos usuarios, por lo tanto no tiene mucho sentido el restringir
arbitrariamente los gráficos de este tipo de publicaciones bajo la razón de “ahorrar
ancho de banda”. Los nazis del ancho de banda siempre olvidan el siguiente
punto: el aspecto gráfico es lo que llevó la mayoría de la gente al web en primer
lugar. Si usted tiene alta velocidad de acceso, ¡aprovéchelo!

Modos de color

A continuación se presenta un breve repaso de los modos de color,

explicando parte de la terminología básica utilizada en los sistemas operativos
Macintosh y Windows.

Los monitores de color actuales para computadoras de escritorio están

basados en Tubos de Rayos Catódicos (en inglés CRT). Como los CRT transmiten
luz, los monitores de CRT utilizan el modo de color aditivo Rojo-Verde-Azul (en
inglés RGB). El modelo RGB es llamado aditivo porque mediante la adición de tres
colores puros se obtiene la luz blanca.
 Los sistemas operativos (Mac, Windows, etc.) organizan la pantalla del
monitor como una malla, o coordenadas “x,y” como un tablero de ajedrez. Cada
pequeña 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 pequeña 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 más 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:
 Si se dedica más bits de memoria a cada pixel en la pantalla, entonces
podemos manejar más colores. Cuando 8 bits de memoria son dedicados a cada
pixel, cada pixel podría ser uno de 256 colores. (256 = 2 a la octava potencia; en
otras palabras, 256 es el máximo número 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 común en los computadores actuales,
especialmente en las computadoras portátiles y computadoras de escritorio.

Si se emplea aún más memoria para cada pixel, podemos obtener algo
cercano al color de calidad fotográfica en la pantalla. El modo de video “color
verdadero” o de “24 bit” puede mostrar millones de colores únicos
simultáneamente en la pantalla. Color verdadero (24 bit) son imágenes 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 mayoría de los computadores Mac
y Windows vendidos en los últimos años son capaces de mostrar profundidades de
color superiores a 8 bit, en miles (16 bit) o millones (24 bit) de colores
simultáneos.
Para chequear los modo de color disponibles en su sistema, utilice
“Pantalla” en “Control Panel” (Win95) o “Monitores” en “Control Panel” (Mac).
 Profundidad de bits y archivos gráficos de color
La terminología y esquemas de memoria utilizados en los modos de video
son directamente análogos a los que describen la profundidad de color en los
archivos gráficos. En su estado descomprimido, los archivos de imágen de ocho bit
o 256 colores hacen que la imagen se refiera a una paleta o índice (llamado
también Tabla de Referencia de Color o CLUT en inglés). El tema principal de las
imágenes de 8 bit es que estas no pueden contener nunca más de 256 colores.
 Las imágenes en color real o de 24 bit descomprimidas son generalmente
mucho más grandes que las imágenes de ocho bit descomprimidas, porque en una
imagen de 24 bit se dedican 24 bits de memoria a cada pixel, generalmente en
tres capas monocromáticas: una roja, una verde y una azul.
 Formatos de los archivos de gráficos

El Formato de Intercambio de Gráficos (GIF) fue popularizado por el

Servicio de Información Compuserve en los ‘80 como un eficiente medio para
transmitir imágenes a través 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 mayoría de las imágenes en el web están en formato
GIF. Virtualmente todos los navegadores web soportan el formato gráfico GIF para
las imágenes en línea. El formato GIF incorpora un esquema de compresión que
mantiene los archivos en su mínimo tamaño, y los archivos GIF están limitados a
paletas de color de ocho bit (256 colores o menos). Existen actualmente algunas
variantes del formato básico GIF que soportan colores transparentes y añaden el
soporte para imágenes 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 imágenes GIF funcionarán en los
navegadores que soporten el formato básico GIF, de manera que no debe
preocuparse, sus lectores podrán ver sus imágenes GIF sin importar la versión de
GIF que usted emplee. Aquellos usuarios que poseen navegadores con soporte
para transparencias y entrelazado (como el Netscape Navigator y el Internet
Explorer) apreciarán efectos visuales más sofisticados, pero todos podrán ver sus
imágenes GIF básicas.

Compresión de los archivos GIF

El formato GIF utiliza un tipo de compresión relativamente básico (Lempel
Zev Welch, o LZW) que suprime las ineficiencias en el almacenamiento de
información, sin causar pérdida de datos o distorsión de la imagen. El esquema de
compresión LZW es el más eficiente al comprimir imágenes con amplias
extensiones de color homogéneo: aunque en realidad no es tan bueno.
comprimiendo fotos complejas con abundantes texturas y gamas de color. Todas
las variaciones de archivos GIF incorporan la compresión gráfica LZW. Vea Siegel
(1996) para una excelente discusión sobre como optimizar gráficos para la
compresión GIF.

Archivos GIF entrelazados

La descarga de gráficos GIF convencionales (no entrelazados) se realiza

con una línea de pixeles a la vez, y los visualizadores del web como el Netscape
Navigator muestran una línea de la imagen a la vez, mientras la construyen
gradualmente en la pantalla. En los archivos GIF entrelazados, la información de la
imagen está almacenada en un formato que le permite al Netscape (y otros
navegadores que soporten GIF’s entrelazados) comenzar a construir una imagen
de baja resolución del tamaño total de la imagen en la pantalla mientras el archivo
aún está descargando. El efecto animado de “borroso a claro” del entrelazado es
visualmente atractivo, pero el beneficio más importante del entrelazado es que le
brinda al lector una rápida muestra del área total de la imagen. Este efecto de
muestra puede dar cabida a una mala interpretación, ya que los archivos
entrelazados no cargan más rápido que los no entrelazados, solamente toman un
poco más de tiempo para descargar porque la muestra borrosa (en el archivo
entrelazado) llega más rápido que la imagen total (en la imagen no entralazada).

Nótese que los ejemplos arriba mostrados solo funcionan la primera vez
que se utilizan. Después de eso su navegador tal vez cargue la imagen desde su
caché localmente, y la carga en el navegador se visualmente muy rápida, ya que
se realiza desde su disco duro, no desde el web. Utilice el botón de “Recargar”
(actualizar o “reload”) para repetir la carga del gráfico si carga demasiado rápido,
para así ver la diferencia. Ambos ejemplos de fotografía arriba expuestos son
idénticos excepto por el entrelazado.

Archivos GIF transparentes

Archivos en formato GIF89a le permiten escoger uno o más colores de la

tabla de referencia del GIF para que sea(n) transparente(s). Utilizando
herramientas de edición de imágenes como el Adobe Photoshop (y otras utilidades
compartidas “shareware”), usted puede seleccionar un color para que sea invisible.
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 página de

cada página 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 página. El gráfico siguiente muestra el encabezado gráfico con
transparencia en el tope, y luego muestra como se vería el mismo gráfico 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 gráfico que comparta
el mismo color se vuelve invisible. Esto puede en ocasiones tener consecuencias
inesperadas, cuando un color es usado tanto en el fondo como en otros lugares de
la imagen por ejemplo:

Añadir transparencia a un gráfico GIF también puede llevar a resultados

decepcionantes, cuando el gráfico contiene bordes degradados con pixeles de
múltiples colores, ésta técnica se denomina “Antialiasing” y lo que hace es suavizar
visualmente los bordes de las formas sólidas, insertando pixeles de colores
intermedios entre el fondo y el color sólido. En el ejemplo mostrado abajo, cuando
cambiamos el color de fondo de blanco a transparente (dejando que se vea el
fondo gris de la página), obtenemos un desagradable halo blanco alrededor del
gráfico.
 Usted puede evitarse ese problema con las imágenes suavizadas, creando
gráficos sobre un fondo similar al color que usted ha escogido para sus páginas
web. En nuestro caso escogimos blanco como un color de fondo para las páginas
de este manual de estilo. La pintura del ave mostrada en la parte inferior es un

rectangulo (los gráficos GIF son siempre rectángulos), 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 gráfico nunca se verán:

La transparencia funciona con diagramas y formas complejas. Los gráficos

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:
 Gráficos JPEG

Otro formato gráfico usado comúnmente en el web es el JPEG (Joint

Photographic Experts Group, o Grupo de Expertos Fotográficos Unidos), un
esquema de compresión que minimiza el tamaño de los archivos. Las imágenes
JPEG son imágenes a full color (24 bit o color real), que en contraste con los GIF’s
están limitados a un máximo de 256 colores en una imagen. Por ello existe mucho
interés en JPEG por parte de los fotógrafos, artistas, diseñadores gráficos,
especialistas de imágenes médicas, historiadores de arte y otros grupos para los
que la calidad de imagen es máxima y donde la fidelidad de color no puede ser
comprometida.
JPEG utiliza una muy sofisticada técnica matemática llamada
“transformación discreta al coseno” que produce una escala de degradación de la
compresión de gráficos. Así usted puede escoger el grado de compresión que
desea aplicarle a un imagen en formato JPEG, pero haciendo esto usted también
determina la calidad de la imagen. Mientras más comprima una foto con la
compresión JPEG, más 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 técnica de pérdida de imagen. Los
resultados son más fáciles de ver que de explicar. Nótese que la degradación de la
imagen aumenta en proporción directa con el aumento de la compresión JPEG:
La figura superior muestra una fotografía original (a), y tres vistas detalladas de
los distintos niveles de compresión JPEG: calidad “excelente” (b), calidad “buena”
(c) y calidad “pobre”. Note la cantidad de cuadrícula en la imagen (d). El patrón de
“cuadritos” y el “ruido” oscuro de los pixeles en el fondo verde, son efectos
clásicos de la compresión JPEG.
Abajo hay otro ejemplo de la compresión 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 delfín inferior es también una imagen JPEG,
comprimida con calidad “pobre”. Note la gran cantidad de ruido y distorsión que
causa la compresión intensiva en el delfín inferior; por lo tanto, no vale la pena
ahorro en el tiempo de descarga a cambio de imágenes de baja calidad.
 Guarde sus imágenes no comprimidas!
Una vez que usted comprime una imagen en el formato JPEG, usted ha
perdido datos que no podrá recuperar nunca jamás, 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 gráficos la misma técnica de descarga gradual (de borroso a claro) que
ofrecen los GIF entrelazados, al igual que estos las imágenes JPEG progresivas
usualmente toman un poco más para cargar en la página, pero a cambio le
brindan al lector una muestra más rápida de la imagen (aunque en principio sea
borrosa).

Artificios de las imágenes JPEG

El algoritmo JPEG fue optimizado para compresión convencional de
fotografías y también es muy bueno al manejar ilustraciones complejas en pintura
(que lucen como fotografías). Fotos y artes con colores suaves y transiciones de
tonos, con pocas áreas de contraste brusco o bordes delineados, son ideales para
la compresión JPEG. De cualquier forma, la mayoría de los elementos de diseño,
diagramas, letras en imágenes y muchas ilustraciones, están compuestas de
gráficos delineados con colores brillantes que son poco vistos en las fotografías.
La compresión JPEG puede tener un desempeño pobre al manejar gráficos
generados por computadora, botones, imágenes título, 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 transición producto del patrón de compresión, ya que el
algoritmo de compresión “desea” ver transiciones de tonos y no puede reproducir
cambios bruscos, como los bordes de los diagramas.
 Resumen, Formatos de archivo

Usos para los archivos GIF y JPEG

Ahora que Netscape y otros navegadores soportan ambos tipos de

imágenes (GIF y JPEG), las imágenes de sus páginas web en línea pueden utilizar
cualquiera de los formatos gráficos. De cualquier forma, en la práctica la mayoría
de los webmasters continuan a favor del formato GIF para la mayoría de los
elementos de diseño. Sin embargo se suelen usar JPEG para las fotografías,
ilustraciones complejas, imágenes médicas y otro tipo de gráficos, donde los
artificios de compresión 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 gráfico de soporte más amplio en el web
 Todo los navegadores gráficos soportan el formato GIF de imágenes en
línea
 Los diagramas se ven mejor en GIF que en JPEG
  Los GIF soportan transparencia y entrelazado

Ventajas de los JPEG

 Tasa de compresión, facilitando mayores velocidades de descarga
 Da excelentes resultados en la mayoría de las fotografías e imágenes
médicas
 Soporta imágenes en color verdadero (profundidad de 24 bit)

Ilustraciones

El reto principal al crear ilustraciones para páginas web, es la relativa baja

definición 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.
Gráficos muy complejos o fotografías a color, a veces lucen
sorprendentemente bien en las páginas 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 precisión fotografías o
arte complejo.
 La luz transmitida desde el monitor muestra un rango más dinámico y
una intensidad de color mayor, que la luz reflejada de por las páginas
impresas.

Usuarios relacionados con la educación, están despertando ante el hecho

de que la publicación digital está relacionada estrechamente con la publicación en
color, esto se debe a que en el web no hay restricciones de carácter económico
para publicar en colores en vez de blanco y negro. Las páginas web tal vez sean
actualmente los mejores medios para distribuir fotografía en color, por ser mucho
más barata que la impresión a color, y también es más consistente y confiable que
cualquiera de los más expertos (y costosos) medios de impresión:

El web también es excelente para transmitir arte de color complejo a

estudiantes:

Procesando ilustraciones complejas o fotografías

La gráfica anatómica de arriba fue originalmente creada con una
resolución mucho mayor (1000 por 2000 pixeles, profundidad de color 24 bits).
Cuando redujimos una copia al tamaño de la de arriba, y utilizamos el filtro en
Photoshop de “difuminar la máscara” (Unsharp mask), ajustandola a un 60% para
restaurar la claridad del gráfico. A pesar de que esta pequeña versión del gráfico
ha perdido un poco de resolución y detalle de color, aún muestra todas las
regiones anatómicas, resultando así tan buena como su equivalente gráfico en un
libro impreso.
Escogimos el formato de archivo JPEG para la imagen anatómica porque el
trabajo de arte es relativamente grande para una imagen web. También porque no
contiene rotulados ni elementos de diagrama, que se reproduzcan de manera
deficiente en los JPEG comprimidos. Las imágenes JPEG pueden ser empleadas
para pinturas y fotografías con etiquetas, si usted escoge el modo de compresión
adecuado. La pintura en la parte superior fue comprimida en Photoshop a un nivel
de “buena” calidad, el cual es el nivel medio de compresión (excelente, buena,
pobre). Si usted escoge el modo “buena” o “ excelente”, las etiquetas de texto
podrán verse aceptables, al menos en modos de video de 24 o 16 bit. Nótese 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 demás gráficos en la

página están en formato GIF, porque son más pequeños o porque contienen
elementos de diagrama y/o texto.

Diagramas para la pantalla

Los diagramas básicos también funcionan bien en la pantalla del
computador si están bien diseñados para coincidir con la malla de pixeles en la
pantalla. Los gráficos construidos con líneas ortogonales (líneas horizontales o
verticales) o líneas diagonales con ángulos de 45º se ven mejor en la pantalla, tal
y como esta vista de acercamiento lo ilustra:
 Los iconos complejos son difíciles de interpretar y lucen borrosos y
confusos en la pantalla. Mantenga sus iconos e imágenes de navegación tan
sencillos como sea posible:

Gráficos con perspectiva isométrica también funcionan bien, porque estos

dependen de líneas rectas y diagonales con 45º de inclinación.
 Los gráficos creados cuidadosamente para coincidir con la malla de pixeles
no pueden ser cambiados de tamaño automáticamente en Photoshop, deben ser
redibujados manualmente en tamaños más grandes o pequeños para evitar la
borrosidad y distorsión que destruye su eficiencia:

Siempre utilice los gráficos GIF para diagramas, gráficos de navegación, y

gráficos que contengan texto.

Optimizando los gráficos, I

Los gráficos a color son una de las características que define a las
publicaciones en línea. En contraste al alto costo y complejidad de la impresión en
cuatro colores en papel, con documentos electrónicos no hay necesidad de
economizar evitando el uso de contenido en colores. Existen potenciales bajas de
desempeño al llenar sus páginas web de grandes y brillantes imágenes en color,
pero con la adecuada planificación usted puede optimizar los gráficos en sus
páginas web, para que descarguen más rápido y reproduzcan de manera más
precisa el color en la pantalla del lector.

Color y los gráficos GIF

El formato gráfico GIF fue desarrollado para optimizar la transmisión de
datos de imágenes a través de las redes. Para mantener los archivos con una
tamaño reducido, los diseñadores de GIF limitaron el número de colores en una
imagen GIF a 256. Imágenes limitadas a 256 colores también son llamadas
imágenes de “8 bit” o de “color indexado”. El color indexado se refiere a la paleta
de indexación que cada imagen crea a partir de su composición de colores. Por
ejemplo, la imagen GIF de abajo contiene 256 colores, mostrados en la paleta de
colores:
 Puede parecer que 256 colores son más que suficiente para manejar la
mayoría de las imágenes, pero los gráficos GIF están algo limitados en su habilidad
de manejar la casi infinita gama de colores que tienen la mayoría de las
fotografías. 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 través de un proceso llamado “temblado” (dithering), los
programas de edición de imágenes como el Photoshop yuxtaponen pixeles de
distintos colores en un suave patrón de puntos, propiciando una gama de colores
intermedios en la imagen cuando se ve esta a una determinada distancia (o
acercamiento, zoom).
 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 imágenes optimizadas en GIF, pero trae
sus desventajas. El problema se presenta cuando dos o más GIF’s con paleta
personalizada (que necesitarían 512 colores simultáneos), necesitan estar en
pantalla al mismo tiempo la computadora en tal caso sólo podrá mostrar 256 (un
modo de video de 8 bit). Si el lector de su página tiene un monitor que solo
muestra 256 colores al mismo tiempo (como la mayoría de los viejos monitores
SVGA de la Mac), entonces las imágenes se verán distorsionados.
La mayoría 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 página a coincidir con los colores de la paleta
estándar del sistema:
 Desafortunadamente, las paletas de sistema de Mac y Windows no son las
mismas, solo 216 de los colores son idénticos en ambas paletas de sistema. Una
paleta que incorpora los colores comunes de ambos estándar 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 lógica de forzar la imagen al color equivalente (o más
cercano) en la paleta de sistema. El resultado generalmente corresponde a
distorsiones bruscas de color (figura b., abajo):
 Optimizando los gráficos, II

Si usted utiliza un programa de edición de imágenes sofisticado como el

Debabilizer 1.6 para Mac, usted puede convertir las imágenes para que estén
conforme a las paletas Macintosh o Windows (incluso una paleta que este de
acuerdo a ambos sistemas). Usted perderá algo de resolución y fidelidad en la
imagen debido al “dithering”, pero sus imágenes se verán bien en la mayoría 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.

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

Otra opción y una mejor

Usted puede escoger que hacer la mayoría de las veces: Utilizar gráficos
GIF con paletas de color personalizadas, o imágenes JPEG. La mayoría de los
usuarios de computadoras ahora trabajan en máquinas capaces de mostrar modos
de video superiores a los 8 bits de profundidad, por lo tanto, muchas de las
situaciones indeseables, como la degradación (dithering), se están convirtiendo en
cosa del pasado. En aplicaciones de la fotografía como la medicina, ingeniería y la
historia del arte (por nombrar sólo algunas), la calidad de imagen es lo esencial.
Por lo tanto, utilizar imágenes GIF con paletas de color personalizadas, o imágenes
JPEG, y resignarse a que algunos usuarios vean imágenes degradadas no resulta
del todo conveniente. Tal vez usted debería poner una nota en la cual señale que
las imágenes en la página están optimizadas para ser vistas en modos de video de
16 bit o superior.
Por ejemplo, la mayoría de las imágenes de las que dependen los
diagnósticos médicos están en blanco y negro (ejemplo una radiografía 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 distorsión de la escala de gris. La figura “B” muestra una ampliación
de un archivo sin comprimir del Photoshop; la “C” muestra la misma área en la
versión comprimida en GIF (no hay pérdida en la calidad de la imagen debido a la
compresión con GIF):
 Recuerde:
Siempre guarde una copia de los archivos de gráficos y fotografías
originales en su estado de color máximo antes de hacer una nueva versión
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 más
común, los problemas de distorsión de color en las páginas web gradualmente se
acabarán y tal vez usted quiera remplazar sus imágenes en 8 bit por las versiones
full color dentro de unos años. Pero usted solo puede hacer eso si guarda los
originales.

Para los fotógrafos u otros publicadores a fines deberían utilizar el formato

de archivo JPEG. El formato JPEG permite una compresión más eficiente de los
archivos y aumenta la velocidad de descarga de las imágenes grandes. De
cualquier forma, los JPEG son principalmente para imágenes full color (que
contiene miles o millones de colores al mismo tiempo), de modo que las imágenes
JPEG se verán distorsionadas cuando son vistas en un modo de video de 256
colores o inferior. Netscape hace un buen trabajo mostrando imágenes JPEG en
modos de video de 8 bit, pero sólo entornos de 16 o 24 bits, mostrarán las
imágenes JPEG de manera precisa.

Alto y ancho a través de etiquetas

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

etiquetas de imagen en su código HTML, dicha información le ordena al navegador
cuanto espacio dentro de la página debe dedicar a la imagen. Así el visualizador,
comienza a mostrar la página incluso antes de que los gráficos hayan comenzado a
descargar. Esto no aumenta la velocidad de descarga de las imágenes (lo único
que logra esto es una conexión más rápida), pero le permite al usuario ver la
estructura básica de la página rápidamente. Cuando usted proporciona los datos
de alto y ancho de los gráficos de la página, el navegador por lo general llenará
primero los espacios dedicados a texto primero, y luego verterá los gráficos en los
espacios ya apartados. Así el usuario puede comenzar a leer la página mientras los
gráficos son cargados. Por ejemplo:

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

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

código HTML incluyan la información de ancho y alto (incluso para los pequeños
botones gráficos).

Colores de fondo

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

cambiar el aspecto de sus páginas sin añadir gráficos. También permiten
incrementar la visibilidad de sus páginas, ajustar el color de fondo con el arte de
imágenes presentado y para señalar un amplio cambio de contexto de un lugar de
su sitio a otro.
Los fondos de patrones e imágenes de fondo son los elementos más
controversiales para las páginas web. Ambas características añaden una
complejidad de elementos gráficos, sin incrementar la legibilidad. Una pobre
selección de gráficos de fondo ha sido la causa de algunas de las más horribles
páginas del web. De cualquier forma, en manos de un experimentado y
documentado diseñador gráfico el uso de este tipo de características para el fondo
puede resultar en un efecto tan impresionante como el impacto gráfico visto en los
CD-ROMs multimedia.

Cambiando los colores de los elementos de la página

Netscape le permite especificar un color determinado para el fondo, el
texto y los enlaces de hipertexto de su página. Haciendo posible el deshacerse del
fondo gris por defecto, sin tener para ello que descargar una imagen. También
puede manipular los colores de otros elementos en las páginas, usando un sencillo
conjunto de extensiones HTML. Estas extensiones pueden ser la forma más
eficiente de brindarle a sus páginas un aspecto particular, porque el navegador
maneja todos los cambios de colores, y sus lectores no tiene que sentarse a
esperar mientras descargan un montón de gráficos.

Escoger el color de fondo es fácil en programas de edición de páginas web

con estructuras WYSIWYG (siglas en inglés 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 edición es un procedimiento tedioso. El
color especificado en la etiqueta se hace en código hexadecimal, donde los seis
elementos proporcionan los valores de rojo, azul y verde que generan el color. En
la etiqueta, el código hexadecimal siempre está precedido por un símbolo “#”:
(#RRGGBB). Tomando en cuenta que todo esto se maneja visualmente con la
nueva generación de editores de páginas web, no entraremos en detalles con el
arcaico modo de selección de colores hexadecimal.

Aquí están los códigos hexadecimales para algunos colores de fondo:

Utilizando extensiones HTML para cambiar el color del fondo de la página

es algo sencillo, solo se deben añadir unos tantos parámetros a la etiqueta “BODY”
al principio del código 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 página de gris a blanco es realmente la
única modificación del fondo en la página estándar que recomendamos, sí su más
alta prioridad es la legibilidad. La legibilidad en la pantalla de los computadores ya
está comprometida por la baja resolución 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 resolución de una página de una revista común,
(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 máximo contraste). Los fondos de color pueden
funcionar como una alternativa al simple gris, si los colores se mantienen con baja
saturación. Por ejemplo, los pasteles y grises claros, con tonos claros de marrón
funcionan mejor.

Patrones de fondo Netscape

A comienzos de 1995 Netscape 1.1 le brindó a los autores de páginas la
habilidad de utilizar pequeños gráficos JPEG o GIF (o una imagen grande), para
formar un patrón de fondo detrás de la página web. La característica es
controversial en las discusiones de los diseñadores web, porque las páginas que
utilizan imágenes de fondo tardan más en descargar, y a causa de dichos patrones
se hace las páginas menos legibles, Esto puede resolverse si estas son diseñadas
cuidadosamente.

Para que ésta técnica sea aplicable, la textura gráfica debe ser un pequeño
GIF o JPEG, preferiblemente no más grande que 100 por 100 pixeles de tamaño.
Por nuestra experiencia los fondos JPEG descargan ligeramente más rápido que
sus equivalentes en GIF. Generalmente dichos fondos de patrones gráficos son
empleados para generar texturas homogéneas:
 Los fondos gráficos son añadidos a la página web a través de un
parámetro de la etiqueta “BODY”:

<BODY BACKGROUND="example.jpeg">

Cuando Netscape ve la etiqueta “BACKGROUND”, dispone la imagen

“example.jpeg” en mosaico en toda la extensión de la página, debajo del texto y
otros gráficos. Navegadores anteriores que no soportan imágenes de fondo solo
ignorarán la etiqueta de fondo, y le darán a la página un fondo blanco o gris por
defecto.
 El cómo 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 rápidamente en un
cliché), contribuye a cumplir las metas específicas de su sitio web. Utilizando un
conjunto de texturas complicadas para el fondo, en cualquier página que es de
acceso común a gente ocupada que busca información de trabajo, sería absurdo
someter al lector a largos tiempos de espera, apariencia poco profesional y pobre
legibilidad que disgustaría a sus usuarios. De cualquier forma, en manos de un
diseñador gráfico experimentado, creando páginas diseñadas para generar impacto
gráfico, la opción de utilizar texturas abre muchas posibilidades visuales
interesantes. Esto es aplicable generalmente en las universidades y organizaciones
comerciales, donde rápidas velocidades de acceso a la red son comunes y el ancho
de banda no es una preocupación tan grande como para los usuarios de módems.
Nuestro consejo es: si usted no posee un entrenamiento gráfico
profesional o experiencia construyendo sistemas de comunicación gráfica
complejos, entonces aléjese de las imágenes o texturas de fondo, ya que sus
posibilidades de cometer un error funcional y antiestético son increíbles.

Imágenes "mapa"

Las imágenes mapa ofrecen una forma de definir múltiples enlaces en una
sola imagen en una página web. Así usted puede hacer un aviso en el tope de su
página, e incrustarle múltiples áreas botón en el gráfico. Las imágenes de
encabezado y pie de página utilizados en esta guía de estilo son simples imágenes
mapa. Así es como se vería el encabezado gráfico si usted pudiera ver los enlaces
asignados a áreas específicas en la imagen:
 Imágenes mapa servidor vs. Imágenes mapa cliente
Hasta hace poco las imágenes mapa sufrían de una reputación de ser
complejas de implementar y lentas de ejecutar, porque el procedimiento original
requería una referencia a un archivo distinto en el servidor, cada vez que el
usuario hacia clic en un área. Esta tecnología de imagen mapa de “tipo servidor”
era innecesariamente compleja y muy ineficiente. Desde comienzos de 1996 la
mayoría de los navegadores han soportado las imágenes mapa “tipo cliente”,
donde la información sobre que áreas específicas son enlaces, ya está incorporada
en el código HTML de la página web a la que pertenece. La mayoría de los
programas actuales de creación de páginas web, incorporan sencillas interfaces
gráficas para generar imágenes mapa; por lo tanto, no incluiremos los detalles
técnicos aquí. (Véanse los enlaces de referencia para más información sobre los
detalles técnicos al crear imágenes mapa, o mire el código fuente HTML de alguna
página que contenga imágenes mapa).

Eficiencia del espacio e impacto gráfico

Las imágenes mapa se han convertido en una característica estándar de la
mayoría de los sitios web diseñados profesionalmente porque ofrecen una
combinación efectiva de atractivo visual siempre y cuando se usen de manera
adecuada la funcionalidad del espacio. Las imágenes mapa son efectivas
particularmente cuando son incorporadas como un gráfico de tamaño moderado,
en el tope de las páginas o en los logos y estructuras gráficas que identifican su
página. Por ejemplo, Apple Computer utiliza una imagen mapa en la parte superior
de su página de educación, dicha imagen proporciona doce enlaces distintos
dentro de un gráfico definido, que instantáneamente identifica la página como
parte del sitio de Apple:
 Flexibilidad gráfica
Las imágenes mapa son la única forma de incorporar múltiples enlaces a
una ilustración gráfica, tal y como el ejemplo anatómico:

Las imágenes mapa son también el medio esencial para superar la

estructura vertical y orientada linealmente, por la que se caracterizan las páginas
web comunes creadas con etiquetas HTML estándar. Con las imágenes mapa usted
puede simplemente abandonar la estructura de página HTML, y construir enlaces
en imágenes grandes, tal y como lo haría al diseñar un CD-ROM multimedia. Esto
sin olvidar la condición de velocidad de descarga a considerar, dependiendo del
público al que se dirige; Intranet o World Wide Web.
Apéndice
Recomendaciones para la creación y manejo de archivos que formaran parte de un
sitio web:

- Utilice siempre para los archivos de cualquier tipo (imágenes, texto,

HTML) nombres con TODAS las letras en minúsculas para evitar confusiones y
dificultades al enlazar los archivos desde otros documentos.
- Para nombrar los archivos utilice (preferiblemente) palabras de 8
caracteres como máximo. No utilice caracteres especiales, por ejemplo ñ, á, ü ni
espacios en blanco para evitar incompatibilidades en otros sistemas, recuerde que
la página web que usted está diseñando puede ser consultada y guardada por un
usuario en cualquier parte del mundo con cualquier tipo de computador (por
ejemplo un joven en Japón 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 imágenes o
hipertexto, tomando cuenta el criterio de las rutas relativas. Comencemos por
saber que es la ruta. La ruta (traducción de path en inglés) 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
imágenes en su página están mal, eso significa que en vez de las imágenes se
vería 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:
En primer lugar está el método absoluto, haciendo una analogía a la vida real,
supongamos que vive en una ciudad donde existe un McDonald’s. En su “Ciudad”
usted sabe que debe tomar un autobús desde su casa al “Este” de la ciudad donde
esta el “McDonald’s”, una vez allí usted puede comer una “hamburguesa.jpg”. Si lo
tradujésemos 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 día que usted va de paseo por el “Este” de la ciudad
(http://www.ciudad.org/Este/) decide que quiere comerse una “hamburguesa.jpg”
en “McDonald’s”. 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 McDonald’s. Por el contrario, si usted considera donde se encuentra
actualmente, sólo recorre el camino que le falta para llegar a su destino
utilizando una ruta relativa. Esta sería:

McDonalds/hamburguesa.jpg

La cual añadida al final de su posición actual:

http://www.ciudad.org/Este/
genera la ruta completa de manera más rápida, 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
más eficiente tomar en cuenta la posición actual y partir de allí con una ruta
relativa.

Además, generalmente usted no crea y modifica los archivos directamente en

el servidor donde va a trabajar, usted edita en su PC y luego envía los archivos
organizados y listos a un servidor. Ahora imagine que todas las rutas a sus páginas
e imágenes están 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 imágenes 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 “McDonald’s” 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 ubicación
(http://www.londres.org/Downtown/) y su ruta relativa, construye la dirección
completa y específica.

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

Comúnmente el servidor donde usted publica su página 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 común usted debe ignorar todos las
carpetas superiores a directorio donde está la página 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/
Entonces para hacer referencia al archivo flecha.gif en la carpeta "iconos" sólo
debe escribir “iconos/flecha.gif”. Recuerde que el resto de la ruta es agregado
automáticamente por el servidor cuando se publica su(s) página(s) web.

Como última recomendación 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
McDonald’s para luego ir a Graffiti, usted generalmente sale por la puerta (bueno
al menos debería 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 sería 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 sería 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

Además 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 recomendación, recuerde que los

servidores Unix utilizan como página 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
página principal. Para saber más acerca de este tema, y las características propias
de su servidor web consulte al administrador de su red local.