Introducción
Para que las páginas Web sean fácilmente legibles y atractivas conviene tener en cuenta una serie de criterios a la hora de realizarlas. A continuación se dan una serie de consejos. Algunos son útiles para cualquier tipo de página que se quiera preparar. Otros están específicamente dirigidos a la realización de páginas de interés educativo.
Criterios generales
1. Elegir bien los fondos. Que faciliten la lectura sin interferir con el texto. Lo mejor para evitar errores es no usarlos o que sean muy suaves. Si se usan, que empleen muy poco tiempo de carga, si son JPEG que tengan la máxima compresión; si su formato es GIF, con menos de 256 colores (color de 8 bits)
2. Dejar lo más clara posible cuál es la situación en el conjunto del sitio de la página abierta y como se puede llegar a otros lugares. Indicar:
a. dónde se está;
b. cómo llegar a un lugar;
c. confirmación de que se está en el buen camino (cuando se comienza una sección nueva) Usar los mismos elementos de navegación en todas las páginas y secciones. Incluir botones de página siguiente y página anterior en la barra de navegación para que el lector pueda saber cual es la secuencia elegida por el diseñador del sitio. Esa similitud en las páginas (no uniformidad total) facilita mucho también la velocidad con la que llegan las páginas (permanencia en el cache de imágenes si se les pone la misma url, etc.).
3. Cuidar la página inicial: normalmente es la primera que se visitará y dará la idea de lo que es el Web.
4. A la hora de diseñar, diseñar sitios, no páginas. Hacer un boceto de todo el sitio Web, pensando un aspecto y una estructura adecuados a la finalidad que persigue (académico, divertido, personal, etc.) Darle un aspecto uniforme y a la vez familiar (si es para dar información, los usuarios están acostumbrados al estilo típico de los periódicos). Diseñar para que sea fácil la ampliación del Web. Diseñar con cuaderno y lápiz, no en html.
5. Diseñar el Web con una jerarquía de la información clara: que el usuario encuentre la información en el menor número de pasos posible y en el menor tiempo. El contenido es lo que debe interesar a los visitantes. Optar por el contenido antes que por el diseño si hay duda entre los dos.
6. Dejar muy claro: quien dice qué, cuándo y dónde lo dice, Poner la fuente de la información. Escribir títulos claros. Poner fechas de los datos, estadísticas, etc. que se aporten.
7. Si lo que se ponen en las páginas son textos largos que el usuario querrá leer con atención es mejor poner páginas largas que facilitan la concentración. Es bueno facilitar herramientas para imprimir el texto o guardarlo en el Web con facilidad. (Puede convenir poner junto a las páginas fragmentadas un enlace que lleve a una página en la que todo el texto esté contenido conjuntamente de forma que sea fácil imprimirlo o guardarlo).
8. Fechar las páginas. Así se facilita su actualización. Poner fechas como 22-DIC-98 para no confundir a los visitantes internacionales.
Líneas y tipos de letras
1. Huir del parpadeo en palabras o imágenes.
2. Truco. Usar una imagen gif transparente de un pixel para lograr interlineados mayores, sangrías o márgenes.
3. No escribir líneas muy largas. Dificultan la lectura. De alrededor de unas 40 letras (vieja regla del alfabeto y medio de longitud).
4. No abusar de los textos en mayúsculas. Los usuarios pueden configurar la legibilidad de los textos, pero hay muchos que no lo hacen: cuidar el hacerlos de origen bien legibles.
5. Usar uno o dos tipos de letras y no más. Lo mejor combinar una tipografía fina con otra gruesa. Y una de palo con otra de serif (?).
6. Usar sólo excepcionalmente los tipos pequeños de las letras (en este caso se leen mejor los tipos de palo: Helvética o Arial). Las cursivas se leen muy mal en tipos pequeños: no usar.
Errores a evitar al confeccionar páginas Web
1. Usar inadecuadamente los marcos (frames). Rompen la unidad de la pag Web y no tienen una dirección inequívoca de url por lo que pueden plantear algunos problemas. Algunos navegadores no las pueden ver. Bien usadas pueden ser útiles en algunos casos, pero hay que poner una dirección url a cada marco.
2. Usar las últimas tecnologías Web. Muchos no las pueden usar. Esperar a ver como funcionan.
3. Llenar la página de figuras en movimiento, etc. Evitar también textos de los que deben ser corridos (scrolling) para ser observados
4. Usar URL complicadas. Hay que ponerlas sencillas y bien estructuradas.
5. No incluir en cada página una indicación clara de su procedencia, en que Web está situada, etc. para que los que llegan a la pag directamente puedan acceder a la cabecera del Web.
6. Páginas largas en la parte introductoria del Web. Sólo se suele leer la parte superior de la página, la que aparece en pantalla, y pocos siguen hacia abajo. Poner la información principal en esa parte superior. Las páginas que contienen la información que una persona interesada va a leer conviene, por el contrario que sean largas para que no tenga que estar continuamente conectandose a nuevas páginas.
7. No contener buenas herramientas de navegación para ir de unos lugares a otros.
8. No usar los colores estándar para los enlaces. En general, se debe usar azul para el no visitado y rojo o púrpura para el visitado. La coherencia de colores y el no desconcertar al usuario ayudan al buen uso del Web
9. No poner al día la información. Descuidar el mantenimiento del Web.
10. Hacer páginas que tardan mucho en ser traídas.
Otras ideas
1. Trabajar con plantillas. Son ficheros que se archivan con las etiquetas básicas de html, incluyendo los elementos gráficos comunes (barras de navegación, logotipos) ya colocados. Para hacer una página real se hace una copia de la plantilla y se pone el contenido nuevo utilizando los estilos de los párrafos en los que se basa aprovechando las etiquetas de html existentes. Quizas conviene poner índices o sistemas de localización si la página es muy larga e incluir la barra de navegación en la parte baja de la página. Poner siempre los botones de navegación con texto alternativo.
2. Cuando un sitio tiene mucho contenido o una estructura compleja es bueno suministrar una herramienta de búsqueda.
3. Los colores que mejor funcionan son el blanco, negro y rojo. Blanco como fondo y negro como texto o al revés y rojo para resaltar. Tener cuidado con el resto de los colores porque es difícil acertar, no tienen suficiente contraste y se leen con dificultad o dañan la retina.
4. Inscribir el sitio Web en los motores de búsqueda.
5. Usar imágenes cuando sea necesario para dar más profundidad al contenido y a la comprensión de lo que en la página se dice. No usarlas, en general, por simple motivo estético. Poner pies en las fotos. Aclaran la información y le dan calidad.
6. El tamaño total de todas las imágenes usadas en una página no debería ser mayor de 30 a 50 KB, por ahora, hasta que no mejore la velocidad de comunicación. Si hay que incluir imágenes grandes, hacer un enlace en miniatura de la imagen que da acceso a la grande (poner su tamaño y formato para que el lector pueda saber lo que tiene que traer y se haga una idea de lo que le costará). Pero siempre preguntarse antes si merece la pena ofrecer ese gráfico.
7. Para grandes gráficos de más de 30 KB usar la técnica de que se vea por capas cada vez más enfocado (GIF) o en versiones de resolución cada vez mayor (JPEG). El lector sabrá lo que está esperando y decidirá si le compensa esperar.
8. Reducir el número de colores de las imágenes. 50 puede ser un número razonable. Usar la misma tabla de colores en todos los gráficos de una misma página: así se ahorra tiempo.
9. Para las imágenes fotográficas es mejor el formato JPEG que el GIF. Distorsiona menos los colores y transmite con más fidelidad los detalles.
10. Para reducir el tamaño de un archivo gráfico partir de la imagen de mejor resolución y luego ir ensayando reducciones de la paleta de colores hasta conseguir la calidad mínima aceptable.
11. El uso de boliches (las flechas y demás dibujos que marcan el comienzo de cada párrafo en una lista (bullets)) o de pequeños iconos gráficos para clarificar, destacar o señalizar la lectura, o para reforzar la coherencia o el esquema lógico de la lectura, puede ser útil. Pero no se debe abusar de ellos o usarlos sólo porque parezca ingenioso.
12. No hacer páginas de gran tamaño. Que no superen los 30 KB salvo alguna excepción que podría llegar a los 70 KB.
13. Pensar que el usuario puede estar utilizando pantalla de 640 x 480 pixels o de 800 x 600; con modem de entre 14.400 y 33.600 bps y con monitor de 256 colores.
14. Considerar el tener un texto de web alternativo sin imágenes para los que no tienen conexiones rápidas o sin marcos.
15. Si se incluye una lista de enlaces, comentarlos. Normalmente con unas palabras es suficiente.
16. Cuando un sitio se renueva informar sobre lo que hay de nuevo. Poner fechas a lo nuevo. Si el sitio es más complejo poner una página especial para las novedades.
Webs educativos
1. Presentar y organizar la información de forma que se persiga un objetivo de aprendizaje concreto. Incluir páginas:
– de información,
– de referencia. Son las que contestan las preguntas más frecuentes (FAQ); dan información complementaria; ayudan a entender los conceptos con ayuda de gráficos, etc.;
– que motiven. Las que ayudan a comparar lo que se va a aprender de nuevo con lo que se sabe de antemano; señalan las ventajas de los conocimientos nuevos que se proponen; animan a actuaciones diversas, etc.;
– que orienten. Porque tratan los asuntos uno a uno; preparan al estudiante novato para hacer frente a lo que le proponemos; insisten en lo fundamental; etc.;
– que guíen a través del curso, informen sobre como usarlo, etc.
– No mezclar estas finalidades en una sóla página Web. Usar páginas distintas para lograr cada una de las finalidades.
2. Saber y fijar por escrito para qué queremos el curso que se está preparando. Hacer un plan claro de como queremos que quede. No dejarse seducir por las posibilidades de la tecnología. Usar las tecnologías para cubrir los objetivos educacionales y no añadir cosas sin más, porque la tecnología lo permite.
3. Modular la realización. Así se facilita el ir por partes e, incluso, que diferentes personas hagan las diferentes partes.
4. No poner un número excesivo de gráficos. Adecuar el tamaño de sus ficheros para que se carguen rápido.
5. Comprobar que los enlaces funcionan.
6. Hacer una buena presentación del curso. Presentar al profesor con algunos comentarios sobre su experiencia profesional, visión del curso, etc. Presentar el curso con un bien estudiado índice de contenidos y explicar lo que se espera de este curso (sus objetivos) y lo que se espera de los alumnos para que tengan claro como lo deben enfocar. Dejar muy claro lo que se les exigirá y como hacerlo y como se les evaluará (tipos de exámenes, fechas, etc.)
7. Cuidar la Introducción de los temas. Decir al estudiante lo que se le va a decir, decírselo y después decirle lo que se le ha dicho. Cuidar los enlaces de unos temas con otros para que sepan donde están, etc.
8. Motivar y facilitar, sin imponer, la comunicación entre estudiantes y con el profesor. Especialmente importante en los cursos online.
9. Escribir una página de instrucciones sobre como manejarse en el curso: uso de los botones de avance y retroceso de páginas, etc., etc.
10. Incluir abundantes enlaces en todas las páginas para que el estudiante pueda circular por el curso sin problemas.
11. Uso de las referencias. No son para que el alumno las estudie. El contenido principal del curso debe estar en las páginas principales. Las referencias son gráficos, diagramas, tablas, etc. que no son para memorizar ni sirven para entrenar en ninguna habilidad, pero que dan riqueza y profundidad a lo que se aprende. Son más para usar por el estudiante con experiencia que por el novato. Se deben poner de forma que sean fáciles de encontrar, claras en lo que expresan y, si se fraccionan para facilitar el seguimiento de las más complejas, se debe hacer de forma que no se pierda el sentido total de la referencia. En las páginas de instrucciones o de orientación se debe enseñar como usar las referencias.
12. No hacer páginas muy largas (máximo 5 o 6 hojas impresas. Si deben ser más largas por algún motivo incluir siempre al inicio un pequeño índice de lo que va a contener la página. Quizás, hacer esto también aunque sean más cortas.
13. Evaluar el curso y ver como lo usan los estudiantes y para ver que mejoras se pueden introducir.
