Segunda parte: Errrores que no debes cometer - problema en el diseño de la página

Para facilitar la navegación en las páginas y para que todo quede en su sitio, hay que tener en cuenta diferentes aspectos del diseño.

1. Páginas demasiado pesadas

Las páginas que incluyan archivos de un tamaño excesivo tardarán en cargarse. Esto se puede deber a que contienen animaciones en Flash, imágenes de alta calidad, imágenes de mucho peso, etc. Se considera que una página web empieza a tener sobrepeso cuando supera los 120 kb. Fíjate a la hora de diseñarla que no supere esa cantidad ya que cualquier usuario con un modem de 56 kb para su conexión a Internet tendría tiempo para prepararse un café o un mate. :-)
En caso de imágenes, mientras menos pesadas, mejor. Las más pequeñas deben ser de menos de 10Kb y las más grandes no deberían superar los 30Kb. Todo depende del número de imágenes que tiene la página. Si las imágenes se tardan en cargar, siempre es bueno colocar un texto alternativo para que el usuario sepa de qué trata la imagen que va en ese lugar.
Si utilizas Dreamweaver, en la parte inferior derecha aparece el espacio que ocupa la página y el tiempo que tardaría en cargarse. Con estos datos te puedes hacer una idea.

2. Efecto scroll horizontal

Es muy incómodo tener que desplazarse por la barra de desplazamiento horizontal de izquierda a derecha para poder leer el final de cada línea y retornar al otro extremo para seguir leyendo. Esto se evita si se diseña para que ocupe el 100% de la interfaz o ventana, o se define el espacio de trabajo para una pantalla de 800x600 pixeles, asegurándose así que la página podrá ser vista hasta con el monitor más tradicional.

3. La página no se ve de forma correcta

A la hora de diseñar una página es muy importante insertar todo tipo de objetos y texto que forman parte de ella dentro de tablas, capas o ccs para que éstas, cuando se visualicen en el navegador, no aparezcan descolocadas o desordenadas, con unos espacios en blanco sin sentido. Si por el contrario, utilizas capas, tablas o ccs para colocar los elementos de tu página donde lo planificas, éstos aparacerán siempre colocados en el mismo sitio, de manera ordenada y no se visualizarán de forma diferente según la configuración de la pantalla del usuario.

4. Enlaces sin identificar

Los enlaces se indentifican en algunos sitios por tener una línea subrayada y aparecer en color azul. Las pautas de la web indican que se deben colocar los enlaces activos de un color (preferiblemente azul) y los enlaces visitados de otro colo. De esta manera el usuario de la página sabrá de un solo vistazo qué enlaces ha visitado y cuáles no.

5. Colores con poco contraste

Uno de los aspectos a tener en cuenta es el contraste de colores que se produce entre el color del fondo dela página y el del texto. Para que éste se pueda visualizar de forma clara, es necesario que en el caso de que el fondo sea un color claro, el color del texto sea en un color fuerte y viceversa. Puedes hacer pruebas de color en tu página directamente con la paleta de colores. No recomiendo los colores grises claros para el texto sobre fondo blanco, ya que se dificulta su lectura y a pesar de esto, se ha puesto de moda entre programadores y diseñadores de sitios web.

6. Faltas de ortografía

Una de las cartas de presentación más importantes de una página es la inexistencia de faltas de ortografía. Imagina un diseño estupendo de una página web, pero a la hora de leer su contenido lo único con lo que te encuentras es con faltas de ortografía. Esa no es la imagen que se quiere dar. Por eso hay que tener cuidado a la hora de redactar y escrubir sin faltas de ortografías.

7. Accesibilidad en la web para personas con alguna discapacidad

Una de las cosas a tener en cuenta y que normalmente pasan desapercibidas es diseñar páginas web pensando en aquellos que poseen alguna discapacidad y por el motivo que sea no pueden acceder a la página como cualquier otro usuario. Por ello, las medidas a tomar en cuenta para hacerlas más accesibles son:

7.1. Estructurales: HTML es un lenguaje de marcas estructural. Si lo usamos para obtener una apariencia visual, estamos deformando el significado de esas marcas. Para obtener un resultado visual adecuado debemos usar CCS o plantillas.

7.2. Navegación: La navegación debe ser completamente funcional usando únicamente teclas y de fácil orientación.

7.3. Contenido alternativo: Todos los elementos visuales, sonidos, scripts y applets deberían tener un texto alternativo que explique el contenido de los mismos. Este tipo de recomendación están basados en el documento de la w3c y puedes verlo en la siguiente página de la organización The World Wide Web Consortium (W3C): http://www.w3.org/TR/WCAG10/full-checklist.html.

Las páginas que llevan el logo identificativo de la W3C indican una declaración de conformidad por parte del autor o proveedor de contenido de ajustarse al Nivel A de las directrices de accesibilidad para el contenido web 1.0 del W3C, incluyendo todos los puntos de verificación de Prioridad 1 definido en las directrices. Las directrices de accesibilidad para el contenido web 1.0 explican cómo hacer el contenido web accesible para las personas con discapacidad. Ajustándose a estas directrices ayudará a hacer su sitio web educativo más accesible a los usuarios con cierto tipo de discapacidad y beneficiará a todos los uusarios.

Si deseas colocar el logo de accesibilidad en tu sitio web, entra en el sitio de Level Triple-A Conformance to Web Content Accessibility Guidelines 1.0: http://www.w3.org/WAI/WCAG1AAA-Conformance para conocer cuál es el código que debes insertar. También puedes comprobar la accesibilidad de la página desde la herramienta Dreamweaver en el menú Archivos > comprobar página> accesibilidad. Aparecerá una lista en la parte inferior de la pantalla con los errores que tienes que corregir.

Fuente: Personal Computer & Internet. número 17.