GUIA PARA EL DISEÑO DE PÁGINAS WEB
|
|
 |
Introducción general
Este documento está dedicado a ayudar en la construcción y el
diseño de Páginas de Internet. Es una guía de estilo
y no un tutorial de HTML debido a que ya existen excelentes referencias sobre
ello en varios idiomas.
Enlaces en las Páginas
Los Enlaces (Links, Ligas, Vínculos o como prefieras llamarles), son una parte fundamental de las Páginas, ya que proporcionan un medio de conexión a otros documentos.
Describe el Enlace
Por ejemplo:
DataLink hizo una página en español
sobre el Diseño de Páginas
es preferible a
Presiona aquí para ir a la página de
DataLink.
Elige una longitud adecuada para el Enlace
Una sola palabra puede ser muy pequeña y carente
de significado.
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 darle dolor de cabeza a los que usan 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, podría aburrir a 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 diferentes monitores
En los monitores tradicionales el área de exhibición se mide
en pixeles (pixel, abreviatura inglesa de "picture element"). La
medida estándar es de 640x480 pixeles por lo que procura que la longitud
horizontal de tus Páginas sea de 640 pixeles para asegurarte que se
despliegue correctamente en cualquier monitor.
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, recuerda que una imagen dice más que mil palabras.
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 formato 'interlaced'.
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) 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"
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 y, de preferencia en forma de botones
y separadas una de la otra.
A continuación, un ejemplo de una Imagen Mapa bien realizada, que se
encuentra en el Servicio de Búsqueda de Netscape para seleccionar el
buscador que prefieres utilizar:
No olvides poner los mismos enlaces en 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.Vea a continuación la rueda de colores:
Para entender mejor cómo se relacionan los colores entre sí, observa lo siguiente:
1.Seleccionar un color y variar su claridad u obscuridad esporádicamente
hará que se distingan algunos elementos y se imparta variedad.
2.La selección de dos colores que se encuentran adyacentes en la rueda
crea armonía, ya que están relacionados.
3.Utilizar dos colores que NO se encuentran adyacentes crea contraste.
4.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.)
|
Netscape Palette
|
 |
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 tus Páginas. De esta forma se integrarán mejor unas a las otras y adquirirán un aspecto mas profesional.
Facilitar la navegación
Pon un encabezado al inicio de cada Página
Aunque el comando <H1> funciona de maravilla, el encabezado de tu página
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 página. Esto le ahorra tiempo a la gente que encuentra tu página
en un servicio de búsqueda (como Yahoo) 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 la Página Principal, proporciona un enlace en
texto, gráfico o botón a la misma de cada documento, así
estarás seguro que el usuario la encontrará rápidamente.
Calidad del documento
Prueba cada Enlace y revisa tu código HTML
Si la gente encuentra callejones sin salida o Enlaces rotos puede perder el
interés en tu Página. También toma en cuenta que si tu
código HTML no está correcto, algunos navegadores podrían
interpretarlo incorrectamente o ignorarlo por lo que te recomiendo validarlo
en uno de los servicios gratuitos que puedes encontrar en una búsqueda
en Yahoo de HTML Checkers.
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 evítalos 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.
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
mas 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 mas comunes ensamblando las letras que la
componen para formar una palabra reconocible, sino por su forma general. Por
ejemplo:
Perro Agua Libro
Si todo el texto de tu documento se encuentra en mayúsculas, podría
dificultar la lecura 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:
PERRO AGUA LIBRO
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 a quien va dirigido.
Palabras 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, aunque sí es aceptable y recomendable poner una sección donde le informes a tus lectores de cambios o actualizaciones futuras que pretendas hacer en tus documentos.
Esta página se ve mejor con...: Como se recomienda en otras
secciones, no diseñes tus páginas teniendo en mente algún
navegador específico. Si creas un documento al que sólo se le
pueda sacar el máximo provecho con un navegador en particular, los
usuarios que no lo utilicen se verán frustrados. Mejor diseña
una página a la que se le pueda sacar el mejor provecho con todos los
navegadores comúnmente utilizados.
Enlaces a Páginas relacionadas
A continuación algunos enlaces a Páginas que conciernen al diseño y edición de HTML y que pueden ser de utilidad.
WebMaestro - Crea
tu página del Web
Una excelente guía para la construcción de documentos HTML.
Si necesitas algunos recursos como imágenes o sonidos para tu Página
o quieres consultar rápidamente cómo lograr algún efecto
en particular te recomiendo ampliamente que la visites, ya que contiene instrucciones
paso a paso de algunos comandos con sus respectivas opciones que te servirán
al crear tu Página. (En castellano) .
Manual
de HTML
Otra guía muy buena que puede servir como ayuda a todo aquel que desee
aprender HTML para crear su Página. Contiene, además, interesantes
enlaces que pueden ser de utilidad; aunque presenta muy lenta actualización.
(En castellano).
NCSA
Beginner's Guide to HTML
Una recopilación de los comandos HTML con sus respectivas opciones
realizada por los creadores del navegador 'Mossaic'. Dicen ser la guía
de éste tipo más frecuentemente visitada y estoy de acuerdo
en que hicieron un excelente trabajo. (En inglés) .
volver al principio de la página
