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.

Primera parte: Los errrores más comunes que no debes cometer al diseñar tus páginas web educativas - problemas con la estructura

En las primeras etapas de Internet, la mayor parte de las páginas web eran realizadas por aficionados, donde cada cual colgaba una página con el diseño y la estructura que más le gustaba en ese momento o que podía realizar, ya que las herramientas no eran tan amplias como lo son actualmente. A medida que han pasado los años, los sitios web han empezado a cumplir un estándar en cuanto a diseño y usabilidad. No es necesario tener un profundo conocimiento de diseño para realizar una buena página web. Eso sí, debes tener en cuenta varios aspectos relacionados con la estructura, el diseño, las imágenes y el texto, para comenzar.

Para asegurar las visitas a tus páginas web, aparte del contenido, es muy importante que ésta no contenga errores. Como un abrebocas para mejorar el diseño de tu sitio web, en esta serie de cuatro envíos, les mostraré varios consejos a seguir y nuevas ideas para tu sitio web.

Problemas con la estructura del sitio web

Cualquier trabajo que no posea estructura alguna, promueve el caos y el desorden. Por lo tanto, disponer de una estructura clara y ordenada hará que cualquier lector de tu página navegue más cómodamente por ella.

1. Ausencia de estructura

Según el tema que quieras crear, éste dispondrá de una estructura o de otra. Eso sí, lo que está en claro es que la página debe poseer una estructura ordenada para que el usuario que entre en ella no se pierda. La estructura debe estar planificada antes de empezar. Por ello, no está de más que coloques índices de contenido y barras de navegación en todas tus páginas.

2. Elementos de navegación

Los elementos de navegación son importantes en las páginas porque permiten moverse en ella directamente de una parte a otra. Por lo que si la página es más larga de una pantalla y media, sería conveniente que insertaras un elemento que enlace al principio de la página.

3. Páginas sin enlaces de retorno

No elabores páginas que no enlazan a otras páginas o a la página principal. El visitante se verá en un callejón sin salida ya que no tendrá por donde continuar. No hagas que tenga que utilizar la tecla de retorno del navegador. Ten muy en cuenta esto, ya que podría significar el fin de la visita a la página.

4. Enlaces rotos

Los enlaces mantienen viva la web, sin ellos Internet dejaría de ser operativa. Prueba regularmente cada enlace web y revisa el código de la página (html, dhtml, javascript, etc.).

Si tus visitantes encuentran enlaces rotos, que no funciona, que dan error o no llevan a ninguna parte, pierden el interés por tu sitio web. Por eso, puedes comprobar si funcionan o no tus vínculos desde el programa Dreamweaver en: menú Archivo> comprobar página > comprobar vínculos.
También se pueden chequear los vínculos externos e internos a través del servicio de la organización World Wide Web Consortium, W3C, a través del siguiente enlace: . Tomará un tiempo pero valdra la pena.

5. Diseña la página para un tamaño concreto

La página que diseñes estará orientada a un público específico. Dependiendo de esto puedes configurarla para resoluciones de pantalla de 800x600 si la página va a un público indeterminado, que no pertenece a un sector en concreto y que puede disponer tanto de un monitor de 15 pulgadas como de 24 pulgadas.

Si por el contrario, sabes con certeza que los visitantes que entrarán en tu sitio web, serán por ejemplo, diseñadores en un gran porcentaje, puedes arriesgarte y definir una configuración de pantalla de por ejemplo 1024x768 pixeles.
El tamaño absoluto y la resolución deben estar en concordancia para una visualización correcta, siendo aceptables los siguientes valores:
Para monitores de 14 o 15 pulgadas, la resoución máxima apreciable sería 800x600 pixeles.
Para monitores de 17 pulgadas, la resolución máxima apreciable sería 800x600 ó 1024x768 pixeles.
Para monitores de 21 pulgadas, la resolución máxima apreciable sería a partir de 1024x768 pixeles.
Las posibles resoluciones de un equipo dependen sobre todo de la calidad del monitor y de la tarjeta gráfica del computador.

....continuará con la parte 2...Problemas en el diseño de las páginas web

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