Guía para el diseño de Páginas en Internet

uía para el diseño de Páginas en Internet
Versión imprimible.
Ubicación de los documentos "en línea":
●
●
●
●
●
●
●
●
●
●
●
http://www.geocities.com/SiliconValley/Heights/1779/index.html (Introducción general)
http://www.geocities.com/SiliconValley/Heights/1779/enlaces.html (Enlaces en las Páginas)
http://www.geocities.com/SiliconValley/Heights/1779/longitud.html (Longitud de las Páginas)
http://www.geocities.com/SiliconValley/Heights/1779/graficos.html (Uso adecuado de Gráficos)
http://www.geocities.com/SiliconValley/Heights/1779/mapas.html (Uso de Imágenes Mapa)
http://www.geocities.com/SiliconValley/Heights/1779/color.html (Uso adecuado del color)
http://www.geocities.com/SiliconValley/Heights/1779/navegacion.html (Facilitar la navegación)
http://www.geocities.com/SiliconValley/Heights/1779/calidad.html (Calidad del documento)
http://www.geocities.com/SiliconValley/Heights/1779/contenido.html (Contenido del documento)
http://www.geocities.com/SiliconValley/Heights/1779/lenguaje.html (Utilización correcta del lenguaje)
http://www.geocities.com/SiliconValley/Heights/1779/imprimible.pdf (Este documento)
Introducción general
El presente documento está dedicado a ayudar en la construcción, el diseño, la edición y la
optimización de Páginas en Internet para ser un apoyo en la creación un sitio web que tenga una
apariencia profesional y un contenido llamativo. Es una guía de estilo y asume que el lector tiene
nociones básicas de HTML.
Los consejos, tanto de diseño como de contenido, que aquí ofrezco se encuentran organizados por
temas y la mayoría de ellos están documentados por diseñadores profesionales; aunque algunos están
basados únicamente en mi experiencia personal como ávido fanático de Internet y después de haber
diseñado unas cuantas páginas y de haber visitado muchas otras.
Enlaces en las Páginas
Los Enlaces (también llamados "Links", "Ligas" o "Vínculos"), son una parte fundamental
de las Páginas, ya que proporcionan un medio de conexión a otros documentos.
Describe el Enlace
Es necesario que cada Enlace contenga una descripción coherente para que el usuario
identifique su función. Por ejemplo:
Guía para el Diseño de Páginas en Internet es un documento en español sobre cómo diseñar
correctamente una Página en la Red.
es preferible a:
Presiona aquí.
Elige una longitud adecuada para el Enlace
Una sola palabra puede ser muy pequeña y carente de significado.
En cambio una frase entera puede ser difícil de leer, especialmente si el texto ocupa más de
una línea.
No cambies el color de los Enlaces si no es necesario
Por conveniencia, los Enlaces no visitados son generalmente de un color más brillante que
los que ya visitaste. Al cambiar esto podrías confundir a los usuarios, especialmente aquellos
con monitor monocromático.
Longitud de las Páginas
Diseña tus páginas cortas y concisas
Por regla general ninguna Página debe exceder una pantalla y media de longitud vertical, ya
que si es muy larga, se corre el riesgo de perder la atención de los usuarios. Esto se aplica en
la mayoría de los casos. Sin embargo si tienes una Página importante que requiera la atención
del lector, no la hagas mayor de una pantalla. En cambio, si el contenido es interesante y
estás seguro que vale la pena extenderte más, puedes hacerlo; pero recuerda que una Página
pequeña es más fácil de administrar y mantener.
Toma en cuenta a los distintos monitores
En los monitores tradicionales el área de exhibición se mide en pixeles (pixel, abreviatura
inglesa de "picture element"). Aunque esta medida tendera a aumentar en un futuro cercano;
el estándar actual es de 800 pixeles, por lo que se debe procurar que la longitud de las
Páginas no la sobrepase. Aunado a esto, algunos navegadores utilizan un poco de este espacio
para sus barras de desplazamiento, lo que nos reduce el área de visualización unos 40 pixeles.
Al respetar cuidadosamente estas restricciones, nos aseguraremos que se desplieguen
correctamente en cualquier monitor. Como este punto puede ser un poco confuso,
proporciono un ejemplo de lo anterior.
Aunque esta imagen no se encuentra representada en tamaño real, sirve para ilustrar porqué
una Pagina debe ser diseñada con una longitud horizontal menor a los 760 pixeles: Aunque
técnicamente la resolución estándar sea de 800, el navegador se apropia de unos cuantos
pixeles para sus bordes y su barra de desplazamiento.
Uso adecuado de Gráficos
Las imágenes pueden darle vida a una Página y servir como una excelente guía de
información visual. Son elementos muy importantes y por lo tanto debemos ser muy
cuidadosos en su uso.
Limita la cantidad de gráficos en el documento
Utiliza imágenes esporádicamente y sólo si ayudan a explicar mejor un tema o a mejorar el
atractivo visual de tu Página. Toma en cuenta que cada gráfica que agregues a tu documento
aumenta el tiempo de espera para tu lector.
Mantén el tamaño total de las imágenes abajo de 30K
Para optimizar el tiempo de acceso a tu documento, el tamaño de las imágenes no debe
sobrepasar 30K. Si te es imperativo utilizar gráficas de gran tamaño, reduce el número total
de colores en ellas y procura que estén en algún formato de visualización progresiva para que
tu usuario pueda tener una idea de lo que la imagen representa antes de ser cargada por
completo.
Ayuda a los navegadores a minimizar el tiempo de espera
Por regla general, siempre incluye descripciones ALT en tus imágenes. También es muy
importante que especifiques el largo y ancho (HEIGHT and WIDTH) de las mismas, lo que
permitirá que algunos navegadores las carguen más rápido.
Uso de Imágenes Mapa
Las Imágenes Mapa (image maps o mapas sensibles) proporcionan un medio valioso de
navegación y contribuyen al atractivo visual de la Página. Sin embargo en algunos casos
pueden confundir al usuario y no son soportadas por todos los navegadores.
Delimita claramente las regiones "activas" o "sensibles"
Las regiones activas de un Imagen Mapa son los puntos donde el usuario puede seleccionar o
"hacer click". Es muy importante que estén perfectamente definidas, de preferencia en forma
de botones y separadas una de la otra.
Como se puede observar, las opciones que el usuario tiene se encuentran delimitadas y
separadas una de la otra. De esta forma, evitamos la posibilidad de confusión (y frustración)
por parte de nuestro lector.
No olvides repetir los mismos enlaces en forma de texto
Esto ayuda a los usuarios con navegadores sin gráficos o que para minimizar el tiempo de
espera los mantienen apagados, ya que en cualquiera de los dos casos es imposible saber que
ésa imagen es un Mapa y por lo tanto no puede ser utilizada.
Uso adecuado del color
Utiliza colores contrastantes y "seguros"
Si tu documento utiliza un fondo obscuro, usa un color claro para el texto y si utiliza un
fondo claro, usa un fondo obscuro para el texto. Ten mucho cuidado con los tonos que vas a
utilizar ya que pueden dificultar enormemente la lectura del texto, especialmente si utilizas
un tamaño pequeño de letra. Para entender mejor cómo se relacionan los colores entre sí,
observa lo siguiente:
●
●
●
●
Seleccionar un color y variar su claridad u obscuridad esporádicamente hará que se
distingan algunos elementos y se imparta variedad.
La selección de dos colores que se encuentran adyacentes en la rueda crea armonía, ya
que están relacionados.
Utilizar dos colores que NO se encuentran adyacentes crea contraste.
Los colores brillantes atraen más la atención del lector, por lo que te recomiendo
usarlos en la información más importante.
La mayoría de los navegadores utiliza una paleta estándar de 216 colores llamada Netscape
Palette. Al utilizar alguno de ellos, te estás asegurando de que los colores de tu Página se van
a desplegar de igual manera en todos los navegadores y plataformas (PC, Mac, etc.)
Estos son los 216 colores que se consideran "seguros" para una Página en Internet. Aunque
la selección es muy limitada, si utilizas únicamente estos colores se visualizarán
idénticamente en todos los navegadores o plataformas. Además evitarás las "difuminaciones
de color" (color diffusion o anti-alias frizzles), que le quitan valor estético a tu página.
Especifica un color de fondo
Es importante que aunque tu documento utilice una imagen de fondo, también especifiques
un color en el atributo BGCOLOR, ya que éste se mostrará en la pantalla inmediatamente y así
el usuario podrá empezar a leer el texto sin espera. Además, esto ayuda a los usuarios con
navegadores que no soportan imágenes de fondo o que por comodidad las mantienen
apagadas.
Estandariza los colores
Si te es posible, trata de utilizar colores iguales o similares en todas las Páginas que
conforman un mismo sitio web. De esta forma se integrarán mejor unas a las otras y
adquirirán un aspecto mas profesional.
Facilitar la navegación
Incluye un encabezado al inicio de cada Página
La información que debe dar la bienvenida a tu lector es el nombre de tu sitio y la sección del
mismo en la que se encuentre. Aunque el comando <H1> funciona de maravilla con este
propósito, tu encabezado no tiene que ser grande o estar resaltado, sólo separado del resto del
texto.
Elige un buen título HTML para tu documento
Es importante elegir un buen título HTML que refleje el contenido general de tu documento.
Esto le ahorra tiempo a la gente que encuentra tu Página en un servicio de búsqueda, ya que
estos generalmente lo toman como referencia.
No hagas referencia a los 'botones' del navegador
Por ejemplo, nunca dejes un camino cerrado donde los usuarios tengan que presionar el botón
"back" de su navegador para regresar a la Página anterior porque no puedes asumir que todos
los navegadores tengan ese botón.
Proporciona un enlace a tu Página principal
Debido a que tus lectores pueden provenir de cualquier otra Página y no necesariamente de tu
principal, proporciona en cada documento un enlace en forma de texto, gráfico o botón a la
misma, así estarás seguro que el usuario la encontrará rápidamente.
Calidad del documento
Prueba regularmente cada Enlace y revisa tu código HTML
Si tus visitantes encuentran callejones sin salida o Enlaces rotos pueden perder el interés en
tu Página. Si tu código HTML no está correcto, algunos navegadores podrían interpretarlo
incorrectamente o ignorarlo. Para evitar estos problemas, te recomiendo "validar" el
documento en uno de los servicios gratuitos que puedes encontrar en la Red; pero no incluyas
las pequeñas imágenes que estos servicios otorgan al final del proceso, pues no hacen más
que desperdiciar tiempo y espacio.
Revisa la ortografía y la gramática de tu documento
Si tienes algún programa que revise tu ortografía, por favor úsalo. Si no, que alguien más
revise el texto.
No utilices comandos específicos de ciertos navegadores
Los comandos específicos no pueden ser interpretados por todos los navegadores, por lo que
debes evitarlos si te es posible. Un ejemplo de éstos comandos es la Marquesina del Internet
Explorer, que solo puede ser interpretado correctamente por dicho navegador y el comando
<BLINK> de Netscape, que además es muy molesto. Utiliza siempre el estándar propuesto
por el World Wide Web Consortium.
Contenido del documento
Revisa tu texto y borra lo que no sea necesario
Por regla general, trata de que el texto de tu Página sea conciso y sin rodeos. Recuerda que si
el contenido de tu documento es interesante y la estás actualizando constantemente, tus
lectores la visitarán más de una vez. Un documento que no aporta nada no causa interés
alguno.
Utiliza mayúsculas y minúsculas adecuadamente
El ser humano no lee las palabras más comunes ensamblando las letras que la componen para
formar una palabra reconocible, sino por su forma general. Por ejemplo:
Si todo el texto de tu documento se encuentra en mayúsculas, podría dificultar la lectura del
mismo, ya que en la mayoría de las fuentes tipográficas todas las palabras tienen forma
similar y monótona cuando están compuestas únicamente por letras mayúsculas:
Sé consistente con los términos utilizados
No modifiques la forma en la que te refieres a los distintos conceptos a lo largo de tus
documentos. Por ejemplo, si vas a utilizar las siglas "Mb" para referirte a la palabra inglesa
"Megabyte", ten cuidado de no utilizar "mb", "MB" o "mB" en una mención posterior.
Utilización correcta del lenguaje
Cuida tu lenguaje
Dependiendo del contenido de tu página es necesario que observes el tipo de lenguaje que
vas a utilizar tomando en cuenta el público a quien va dirigido.
Frases que, en mi opinión, deberían evitarse:
●
●
En construcción: Supuestamente una Página debe ser actualizada constantemente y por lo tanto
siempre se encuentra "en construcción". Si agregas una imagen que señale esto sólo estas
desperdiciando tiempo y espacio. Por otro lado, es recomendable crear una sección donde le
informes a tus lectores de cambios que pretendas hacer en tus documentos en un futuro cercano o de
actualizaciones recientes que éstos hayan tenido. Incluso en algunos casos pudiera ser benéfico dar a
conocer la fecha de la última modificación a los mismos.
Esta página se ve mejor con...: Como se recomienda en otras secciones, no diseñes tus Páginas
teniendo en mente algún programa específico. Si creas un documento al que sólo se le pueda sacar el
máximo provecho con un navegador en particular, utilizando algunos de los llamados "plugins" o
con un intérprete de comandos del lenguaje "java" o "javascript"; los usuarios que no cuenten con
ellos se verán frustrados. Una posible solución sería crear varias versiones del mismo documento,
cada una optimizada para una combinación de navegador y aditamento externo en específico.
Éste documento presenta la información encontrada en la
Guía para el diseño de Paginas en Internet al día 16 de julio del 2004.