Tuesday, November 13, 2007

Buenas prácticas en el diseño web

1. Información básica
En la portada de cada sitio se deben incluir claramente los elementos que a continuación se presentan, ya que éstos otorgan información importante para el usuario acerca del sitio web.
* Mapa del sitio
Especialmente si la estructura de navegación es compleja, ya sea por un gran número de secciones, niveles y subniveles temáticos, siempre será de utilidad tener un panorama completo a través del Mapa del Sitio. Mayor utilidad tendrá si cuenta con enlaces directos a cada una de las páginas.

* Datos de contacto de la unidad
Es fundamental publicar en la portada de los sitios de las unidades el teléfono y dirección de mail a través de los cuales el usuario pueda contactarse en caso de dudas referentes al contenido del sitio (es diferente al webmaster).

* Fecha de actualización
Incluir también la fecha de la última actualización del sitio en la portada. Es un elemento que puede otorgar mayor información al usuario acerca de la existencia de nuevos contenidos.

* Requerimientos técnicos
Aunque un sitio se debe construir para ser correctamente visualizado, lo más independiente posible, de las características técnicas del computador del usuario, en determinadas ocasiones es necesario explicitar en la portada si se necesita contar con algún requerimiento técnico especial (ej: para instalar alguna aplicación ).

* Encargado del sitio
Incluir en la portada datos de contacto del encargado del sitio (webmaster), nombre, correo o alias de correo, con quien el usuario pueda comunicarse en caso de tener consultas o sugerencias referentes al aspecto técnico del sitio.

2. Uso de marcos o frames
Actualmente no se recomienda el uso de marcos o frames dado que presentan muchos inconvenientes, especialmente para la indexación de las páginas en buscadores. Por otra parte, se pueden utilizar otros recursos técnicos que nos permiten obtener un resultado similar sin recurrir a los marcos o frames.

3. Peso de las páginas
La velocidad de acceso a un sitio depende en gran medida del peso en kilobytes de cada página y de la conexión con que se cuente. Para el caso de conexiones por módem cada página no debiera pesar más de 50 Kb, en tanto que para conexiones más rápidas, 100 Kb es razonable.
Para conocer el peso total de una página se debe sumar el peso del archivo HTML y el peso de cada uno de los elementos que estén presentes en la página: imágenes, videos, sonidos, animaciones, etc.

4. Ancho de las páginas
Las páginas se pueden construir con un ancho fijo o con un ancho variable, según se estime conveniente.
* Páginas de ancho fijo: el contenido de la página se mantiene estático, es independiente del tamaño de la ventana del navegador con que se visualice. Es el caso de la actual versión del Web UC, cuyas páginas tienen un ancho fijo, para una resolución mínima de pantalla de 1024x768 pixeles.
* Páginas de ancho variable: el contenido de la página es adaptable a las modificaciones que el usuario realice en el tamaño de la ventana del navegador.

5. Elementos gráficos y multimediales
Recomendaciones tendientes a asegurar la correcta inclusión de elementos gráficos y multimediales de modo de evitar que su peso afecte el rendimiento de la página:

* Peso de las imágenes
Se recomienda reducir al máximo posible el peso de las imágenes para no aumentar el tiempo de descarga de la página. Para ello se puede intervenir sobre 3 aspectos de la imagen: tamaño, cantidad de colores y resolución (72 dpi es suficiente para imágenes en web).

* Formato adecuado
Los dos formatos más usados para manejar las imágenes en web son:
* Formato GIF: recomendado para imágenes con pocos colores (soporta sólo hasta 256 colores) o de colores planos (Ej: diagramas, íconos, viñetas, fotos pequeñas o en blanco y negro etc.).
* Formato JPG: recomendado para imágenes de mayor tamaño y con mucho color (Ej: ilustraciones, fotografías a todo color, etc). Se recomienda probar ambos formatos para determinar el óptimo.

* Animaciones Flash
Se recomienda no incorporar grandes animaciones Flash directamente en la portada. Su uso demora la carga del sitio y lo hace agotador para quien tiene que ingresar repetidamente a éste.
Una buena práctica es incluir un enlace que permita saltar la presentación para entrar directamente al sitio, de modo que la presentación sea opcional.

* Plug-ins
Cuando se utilizan recursos multimediales que requieren el uso de “plug-ins” (programas visualizadores especiales) para revisarlos, se recomienda incluir el programa para ser descargado u ofrecer un enlace a los sitios donde obtenerlo.

* Archivos descargables
Cuando se incluyen recursos para ser descargados al computador personal del usuario (archivos de Video, Audio, Flash, PDFs, docs, ppts u otros), se recomienda indicar el peso de los mismos, con el objetivo de preparar al usuario a una probable espera en el proceso.

* Imágenes de fondo
Esta práctica no es aconsejable ya que aumenta el peso de la página y por ende, el tiempo de descarga. Además, frecuentemente dificulta la legibilidad de los textos.

6. Programación html

* Estructura de archivos
Es conveniente mantener un orden de carpetas para almacenar los diferentes tipos de archivos que conforman el sitio. La página de inicio debiera llamarse: index.html, e ir acompañada de las distintas carpetas, por ejemplo:

o html, para las páginas
o img para las imágenes
o swf, para las animaciones flash

* Nombre de archivos
Es conveniente que los nombres de archivos tengan no más de 8 caracteres, en minúsculas, sin espacios ni signos. Aunque actualmente los sistemas operativos de los computadores de escritorio, permiten crear archivos con nombres más largos, con mayúsculas, etc. el sitio web finalmente será alojado en servidores con otros sistemas operativos más estrictos al respecto.

* Uso de meta tags adecuados
Los “meta tags” son un conjunto de elementos que van en la parte superior (head) del código fuente de cada página. Mediante ellos se describe información concreta sobre la página a los sistemas de indexación y búsqueda. Los más importantes son los siguientes:

* Utilización de CSS
Las hojas de estilo en cascada permiten manejar en forma separada el aspecto formal (el diseño de las páginas), de el contenido. De esta manera se facilita la mantención de un sitio, ya que modificando sólo un archivo de texto se puede controlar el diseño de todas las páginas de un sitio.
La forma más eficiente para usar CSS es vincular el archivo de texto (.css), en el encabezado del código fuente de cada página, de la siguiente manera:

En ese archivo se especifican las características de los elementos de todas las páginas, por ejemplo: la fuente, su color y tamaño, para el texto, para los títulos, subtítulos, párrafos; el espacio entre líneas, entre letras, las indentaciones; las características de las tablas: bordes, colores de fondo, imágenes, etc.
* Multiplataforma
Dado que los sitios web pueden ser accedidos desde computadores que utilizan diferentes sistemas operativos, se debe asegurar que en la mayor parte de ellos, las páginas puedan verse sin mayores contratiempos.
Para asegurar esto, las recomendaciones son las siguientes:
* Utilizar código HTML estándar, evitar que el código sea optimizado para un navegador en especial.
* Probar el sitio en diferentes sistemas operativos y navegadores (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Mozilla, Netscape Communicator, Opera y Safari.

Fuente: http://www.puc.cl/manualdeestilo/html/practicas.html

No comments: