Diseño Eficiente

Crear una página web no consiste simplemente en recopilar una serie de textos, imágenes, sonidos, etc. (lo que se llama el contenido) e irlos insertando en la página.

Diseñar una buena página, y más aún un sitio web completo, conlleva la realización de una serie de tareas previas.

Diseño de un sitio Web

Fases del diseño:

• Definir los objetivos del sitio
• Definir la estructura de las páginas
• Diseñar la interacción con el usuario
• Diseñar la interfaz gráfica

Definir los objetivos del sitio

La respuesta a las preguntas ¿a quién va dirigido el sitio web? y ¿qué va a ofrecer el sitio web a sus visitantes? determina los contenidos del sitio, tanto en el fondo (la información que se va a publicar) como en la forma (los tipos de medios que se van a utilizar para mostrar esta información).

Definir la estructura de las páginas

La información que se va a publicar en el sitio se estructura en páginas independientes conectadas entre sí. La estructura más típica para un sitio web es la de árbol, con una página principal en la raíz del mismo y las demás páginas repartidas en los diferentes niveles del árbol.

Diseñar la interacción con el usuario

Se diseña un mecanismo de navegación que permita al visitante desplazarse cómodamente por las páginas. También se decidi la interacción basada en formularios y scripts dinámicos.

Diseñar la interfaz gráfica

Se diseña el aspecto visual del sitio web, eligiendo un estilo global de diseño, diseñando cada una de las páginas y los elementos gráficos comunes a todas ellas.

Es muy interesante el uso de metáforas, que son representaciones visuales cercanas al usuario y relacionadas con el tema de la página (ejemplo: inmobilaria).

 

Creación de las páginas

Tras las cuatro fases anteriores ya se puede pasar a la creación de las páginas individuales del sitio con las herramientas adecuadas.

También se deberá decidir si se van a usar tecnologías complejas como la programación CGI o el acceso a bases de datos, que exigen ciertos requisitos por parte del servidor web.

El paso final

Una vez creadas las páginas aún quedan una serie de tareas importantes por hacer:

• Comprobar a fondo las páginas para detectar posibles errores antes de su publicación.
• Realizar pruebas de usabilidad.
• Transferir las páginas a su ubicación definitiva en el servidor web.
• Dar de alta la página en distintos buscadores.

 

- Consejos generales sobre el sitio

• Ofrecer una organización clara e intuitiva de la información (índice, tabla de contenidos, nueva información).
• Crear una página principal de tamaño no muy grande para que se cargue rápidamente. Un mapa sensible con una metáfora del sitio es una excelente opción.
• Organizar las páginas siguiendo una estructura jerárquica con distintos niveles y colocando la información más importante en los niveles más altos.
• Ofrecer un sistema de navegación comprensible y visualmente claro (barra de navegación, mapa sensible).
• Proporcionar información general sobre el sitio web.
• Informar al visitante de la estructura del sitio web proporcionándole, por ejemplo, un mapa del sitio.
• Separar informaciones distintas en páginas distintas.
• Indicar al visitante en qué parte del sitio se encuentra en cada momento. Por ejemplo, resaltando el elemento de la barra de navegación que corresponde a la página actual.
• Utilizar un mismo estilo para todos los iconos del sitio. Si es posible conviene crearse uno mismo sus propios iconos, ya que así se podrán diseñar de acuerdo con el contenido del sitio.
• Mantener el mismo estilo de diseño en todas las páginas para dar una imagen uniforme al sitio web.
• Proporcionar un mecanismo de navegación textual para los usuarios que naveguen con las imágenes desactivadas.
• Utilizar hojas de estilo en cascada para aplicar el mismo estilo a todas las páginas del sitio.
• Ofrecer formas de realizar búsquedas en el sitio web.

Consejos generales sobre las páginas

• Reducir el desplazamiento dentro de una página.
• Usar tablas con bordes invisibles para formatear páginas con precisión.
• Utilizar las marcas semánticas preferiblemente a las físicas.
• Utilizar mucho espacio en blanco.
• No colocar demasiados objetos en una misma página, ya que al establecerse una conexión independiente con el servidor para cada uno de ellos el tiempo de carga aumenta.
• Dar a la página un título significativo, ya que este texto es el que se almacenará en la libreta de direcciones del visitante cuando agregue la página a su lista de favoritos.
• Utilizar los elementos META del encabezamiento para proporcionar a los buscadores información sobre la página.
• Incluir en la página información de contacto para el envío de comentarios o sugerencias.
• Indicar la fecha de la última actualización de la página para que los visitantes asiduos sepan cuándo se han producido cambios. Si la página ha dejado de mantenerse, indicarlo de alguna manera para evitar que los visitantes pierdan tiempo volviendo o puedan recibir información obsoleta.
• Diseñar las páginas pensando en distintos navegadores y plataformas. No abusar de elementos que no estén ampliamente soportados o al menos hacer que las páginas sean entendibles sin ellos. De otra forma se estará descartando de entrada a un buen puñado de potenciales visitantes.
• Crear distintas versiones de la página si es imprescindible hacer uso de características específicas de un navegador concreto y utilizar un script para enviar de forma automática al visitante a la página adecuada a su configuración. Deben evitarse mensajes del tipo "lo siento, su navegador no es capaz de visualizar esta página".

Consejos sobre el texto

• No colocar demasiada cantidad, ya que el texto es más difícil de leer en la pantalla que en el papel. Si es preciso, colocar la información en varias páginas.
• No utilizar muchas fuentes distintas en la misma página. Dos fuentes como máximo es lo recomendable.
• Utilizar fuentes de tamaño suficientemente grande.
• Utilizar fuentes estándar. Si es necesario colocar un texto con una fuente especial es preferible crear un rótulo de texto.
• No utilizar párrafos vacíos para añadir espaciado vertical, ya que el efecto puede variar de un navegador a otro. Usar en su lugar saltos de línea o colocar los elementos mediante tablas para una mayor precisión.
• No abusar de las mayúsculas. El texto en minúsculas resulta más fácil de leer.
• No abusar del texto intermitente, ya que puede llegar a ser molesto.

Consejos sobre los enlaces

• Los enlaces deben poder identificarse con claridad. El usuario debe ser informado de alguna forma de cuáles son los elementos activos de la página.
• Indicar al usuario a dónde le van a llevar los enlaces.
• Limitar el número de enlaces dentro de una página.
• Comprobar que todos los enlaces apuntan al sitio deseado antes de publicar la página.
• No incluir espacios en blanco entre las marcas de comienzo y fin del ancla y el texto o imagen activos, ya que esto puede producir un antiestético efecto de subrayado al visualizarse el enlace.
• Integrar el enlace en el texto de forma natural y sin interrumpirlo (evitar, por ejemplo, frases del estilo de 'pulsar aquí para ir a tal sitio').
• El texto enlazado debe ser breve.
• Si el enlace está formado por una imagen y un texto simultáneamente, es conveniente que ambos aparezcan juntos.
• Es interesante usar un URL como texto del enlace, ya que así quedará constancia escrita del mismo cuando se imprima la página.
• Agrupar los enlaces relacionados entre sí colocándolos mediante listas organizadas o menús (gráficos o textuales).
• No dejar páginas huérfanas, sin enlaces. Siempre se debe proporcionar al menos una forma de regresar a la página principal.
• Mantener los enlaces al día.
• No colocar enlaces a páginas no disponibles. Evitar el típico icono de página en obras.

Consejos sobre las imágenes

• Utilizar el atributo ALT para proporcionar información a los usuarios que navegan sin imágenes.
• Utilizar los atributos HEIGHT y WIDTH para acelerar la presentación de la página.
• Evitar los bordes dentados y el efecto de halo en las imágenes transparentes.
• Reescalar la imagen al tamaño deseado (nunca hacerlo en la propia página con los atributos WIDTH y HEIGHT), suavizándola antes para evitar el efecto de dentado.
• Suavizar los colores para uniformar colores próximos adyacentes y obtener así un mayor grado de compresión.
• Disminuir el número de colores de la imagen (profundidad de color). Con esto disminuye el tamaño del fichero y se deja sitio libre en la paleta para otros colores.
• Utilizar siempre que sea posible la paleta de colores web. Si se utiliza una paleta adaptativa es necesario comprobar que la imagen se visualiza correctamente en el navegador.
• Utilizar paletas comunes (superpaletas) para las imágenes que aparezcan simultáneamente en la página.
• Probar con distintos formatos y relaciones de compresión al grabar la imagen con el fin de encontrar la mejor relación calidad/tamaño.
• Guardar las imágenes de gran tamaño en modo entrelazado.
• Incluir imágenes de baja resolución para aquellas imágenes que puedan tardar en cargarse.
• Colocar versiones reducidas de las imágenes que enlacen con las versiones completas en el caso de que éstas sean muy grandes o no vayan a ser accedidas por todos los visitantes.
• Trocear las imágenes que van a ser reutilizadas en parte (por ejemplo, las barras de navegación) para aprovechar su almacenamiento en la memoria caché del ordenador.
• Cargar imágenes en segundo plano. Si una página no carga imágenes nuevas se puede aprovechar para cargar alguna imagen en segundo plano, de forma que cuando se necesite la imagen ésta ya se encuentre en la memoria caché y se cargue rápidamente.
• Como consejo final, la suma de los tamaños de todas las imágenes nuevas de una página (es decir, sin contar las que se encuentran en la memoria caché) no debería exceder de los 50 ó 60 K.

Consejos sobre las imágenes de fondo

• Utilizar fondos simples y discretos que faciliten la lectura de la página.
• Utilizar imágenes con poca profundidad de color para que no consuman mucho espacio de la paleta.
• Utilizar preferentemente la paleta de colores web para evitar el tramado.
• Modificar si es preciso el color del texto para que contraste claramente con el del fondo.
• Asegurarse de que los colores quedan bien en distintas máquinas y con distintos navegadores (sobre todo en pantallas de baja resolución).
• Utilizar conjuntamente los atributos BACKGROUND y BGCOLOR para que la página sea legible mientras se carga la imagen de fondo.

Consejos sobre los elementos multimedia

• No abusar de los sonidos de fondo, ya que pueden resultar molestos si se prolongan durante mucho tiempo.
• Utilizar animaciones vectoriales para crear efectos de animación complejos, ya que tienen tamaños más pequeños que las animaciones GIF.
• No abusar de los iconos animados, sobre todo si se usan como elementos meramente decorativos.
• Utilizar mapas sensibles para crear una metáfora del sitio web.
• Utilizar el atributo ALT en los elementos AREA de los mapas sensibles.
• Colocar controles de reproducción para los clips de audio y vídeo.
• Utilizar los elementos NOEMBED y NOSCRIPT para proporcionar un contenido alternativo a los navegadores que no soporten los elementos EMBED y SCRIPT, respectivamente.
• Proporcionar información para la descarga de los plugins necesarios para visualizar los objetos incrustados.
• No colocar directamente en la página objetos incrustados de gran tamaño como los vídeos. Colocar en su lugar un enlace, que podrá estar asociado a una versión reducida del objeto, e informar del tamaño exacto del objeto enlazado.
• No utilizar gratuitamente tecnologías complejas (por ejemplo, VRML).

Consejos sobre los marcos

• Comprobar que las dimensiones de un marco son suficientes para mostrar su contenido en el caso de que se eliminen las barras de desplazamiento.
• No abusar del uso de marcos.
• Usar TARGET="_top" o TARGET="_blank" al saltar a otras páginas para que éstas se muestren en la ventana completa del navegador.
• Utilizar el elemento NOFRAMES para proporcionar un contenido alternativo a los navegadores que no soporten marcos.

Consejos sobre los formularios

• Validar los datos introducidos por el usuario en el propio navegador mediante scripts para evitar un procesamiento innecesario en el servidor.
• Enviar el formulario a una dirección de correo electrónico para obtener los datos introducidos por el usuario sin necesidad de escribir un programa CGI.
• Utilizar tablas para colocar los elementos de entrada del formulario de la forma deseada.

Consejos sobre las páginas dinámicas

• Comprobar la visualización de la página en las configuraciones más habituales.
• Proporcionar alternativas para los navegadores que no soporten algunos elementos de la página o indicar la configuración necesaria para visualizarla correctamente.