F. Pautas de estilo

Recogemos aquí, como resumen de algunos de los apartados vistos en este bloque de contenidos y en bloque anteriores, algunos consejos que esperamos que os sean útiles no sólo durante el proceso de construcción de vuestras páginas web, sino también durante su mantenimiento.

Posiblemente muchos de estos consejos os parezcan obvios, pero no por ello hemos dejado de apuntarlos aquí.

Como veréis la mayoría de estos consejos están relacionados con la usabilidad y la accesibilidad y son de aplicación a las páginas y los contenidos que podéis crear en cualquier otro sitio pero trataremos de remitiros, si lo consideramos conveniente, a las pautas para el desarrollo de un sitio web en EducaMadrid.

Imagen tomada de la Wikimedia Commons.

Pauta general

El objetivo de nuesto espacio web debe estar claramente definido y visible. Ya sea en la cabecera de las páginas o mediante algún tipo de texto en la home de nuestro sitio, debemos exponer a los visitantes de forma breve y clara qué es lo que van a encontrar en las páginas que pueden visitar. Recordad que la mayor parte de las visitas a páginas web no pasan de la página de entrada. Si queremos que los posibles visitante navegen por nuestras páginas deberemos informarles claramente de cuál es el contenido que pueden encontrar en ellas. En este sentido, es muy conveniente evitar la páginas de introducción que no aportan nada al sitio. El usuario busca información, no florituras o demostraciones gráficas de que se dominan las herramientas de diseño.

El usuario debe saber siempre dónde se encuentra. Si queremos que nuestros visitantes se centren en el contenido y se olviden de la navegación, los elementos que le indiquen dónde se encuentra y cómo desandar el camino iniciado deben ser evidentes. Para conseguir esto disponemos de varios recursos:

1. Si usamos logotipos, que estén siempre presentes.
2. Diseñar un menú de navegación bien organizado. Con nombres de enlaces significativos. Conviene evitar los menús anidados porque puede resultar difícil navegar a través de ellos. Si es imprescindible su uso, no es conveniente desarrollar más de un nivel de anidamiento, usad las opciones de ocultar páginas y dentro de las secciones que contienen páginas ocultas usad el porlet "navegador" o un portet mapa del web configurado para que muestre sólo el contenido de esa sección.
3. Usar caminos de migas, pero recordad que su función principal es que los usuarios sepan dónde están no servir como menú de navegación.
4. Disponer de un mapa del web.

Sobre la Navegabilidad dentro de los contenidos:

Barras de desplazamiento:

1. Evitar el desplazamiento horizontal: los usuarios no están habituados a usar la barra de desplazamiento horizontal. Si al leer un texto parte de su contenido se pierde en la pantalla por la derecha, es muy posible que el usuario no haga el esfuerzo de leerlo. Al usar el editior de contenidos de EducaMadrid este error no se producirá si tenéis en cuenta unas normas básicas que casi se pueden reducir a dos: no insertar imágenes con unas dimensiones muy grandes y no insertar tablas con una definición de ancho muy grande.
2. Si es posible, evitar también los desplazamientos verticales. Para ello sería deseable que los contenidos se diseñen para que quepan en pantalla, sin que el usuario tenga que usar la barra de desplazamiento vertical o la rueda del ratón para desplazarse arriba y abajo.

Enlaces:

1. Los enlaces dentro de los contenidos deben ser claramente identificables. Es conveniente que se ajusten a la norma, es decir, que tengan un color diferente al resto del texto, el color azul es el estandar, y que estén subrayados. También es conveniente que los enlaces a sitios o páginas ya visitados aparezcan en otro color, en este caso el rojo es el estandar.
2. Si estamos proporcionando a los usuarios una lista de enlaces debemos asegurarnos de que existe suficiente espacio entre ellos para evitar que se pueda pulsar sobre un enlace no deseado.
3. ¿Los enlaces deben abrirse en una nueva ventana o en una pestaña diferente? Si los enlaces remiten a otra sección o página de nuestro sitio web debemos evitar que se abran nuevas ventanas o pestañas. En el caso de que enlacemos a documentos pdf, la norma aceptada es que se abran en una nueva ventana. Si enlazamos a otras páginas web deberemos decidir qué opción tomamos teniendo en cuenta si importa o no que el usuario pierda la referencia de nuestro sitio web.
4. Si los enlaces apuntan a un documento o archivo que se va descargar o que tiene un tamaño muy grande es conveniente indicar hacia dónde nos remite el enlace (archivo zip, hoja de cálculo, documento de texto, mp3, etc.), con ello facilitamos que los usuarios sepan de antemano si quieren o no realizar esta acción, puesto que al hacer clic sobre el enlace el navegador posiblemente les pedirá que confirmen la descarga o les pida que seleccionen un programa para abrir el documento o archivo.

Pestañas:

1. Si dentro de un página queremos mostrar varios contenidos, que estén claramente separados y que el usuario pueda acceder a ellos rápidamente sin tener que navegar por unos y otros hasta encontrar el que le interesa lo mejor es usar pestañas. En EducaMadrid exite la posibilidad de organizar los contenidos en petañas usando el porlet "menú de contenidos" cuyo uso se ha descrito anteriormente.
2. En el caso de que decidamos usar pestañas, es conveniente que ocupen una sola fila para que el usuario no tenga que emplear demasiado tiempo en navegar y distinguir entre ellas. También es conveniente que tengan un título significativo y que no sea excesivamente largo para que el aspecto de las pestañas sea homogéneo.

Tamaño de los párrafos y organización: siguiendo las pautas dadas por Jakob Nielsen es conveniente que los parrafos sean cortos y que se organicen para que primero aparezcan las ideas principales y después su desarrollo. Para la lectura en pantalla es preferible una organización analítica del contenido a una organización sintética.

Títulos de página, encabezados de contenidos, apartados, subapartados...

1. El tamaño de la fuente utilizada o los elementos de realce (negrilla, subrayado, cambio de color), deben permitir que se distinga la organización y la jerarquía de los contenidos. Es conveniente usar las opciones de estilo que nos ofrece el editor HTML.
   
   
   
2. Como es obvio, el título de la página debe de estar en la parte superior, lo más cerca posible de la cabecera.

Fuentes de letras:

1. En este apartado sí hay diferencia con los textos impresos. Para la lectura en pantalla se recomienda el uso de fuente sans-serif porque se muestran mejor pantalla, mientras que para los textos impresos la recomendación es usar fuentes serif (Garamond, Times new-Roman, Georgia).
2. Es conveniente usar fuentes cuya implementación en los ordenadores de los usuarios es casi segura. Si utilizamos un tipo de fuente poco habitual, es posible que no esté en la lista de fuentes del ordenador de usuario y en ese caso el navegador utilizará otra fuente para reemplazarla con lo que cabe la posibilidad de que el documento no se vea tal y como lo hemos diseñado. La fuentes más utilizadas para páginas web son Verdana, Arial, Tahoma y Trebuchet, todas ellas de tipo sans-serif. Si queremos utilizar una fuente serif pensada para que se vea bien en pantalla lo mejor es recurrir al tipo Georgia.
   
   
   

Interlineado: los editores de texto web suelen ajustar el interlineado a los tamaños de fuente utilizadas por sí solos. De todos modos no está de más comprobar que las líneas de texto no aparecen ni muy juntas ni muy separadas. La pauta a seguir es aquí la misma que en los textos impresos. Es conveniente que el interlineado guarde con respecto al tamaño de texto una proporción de un 120%, es decir, si usamos un tamaño de fuente de 1.0 em (10 píxeles), el interlineado adecuado será de 1.2 em (12 px.).

Tablas: deben usarse para ofrecer datos tabulados no para organizar los contenidos dentro de las páginas. Detallaremos esto en los consejos sobre accesibilidad. Sólo recordar que la organización en columnas o de otras maneas no lineáles de los contenidos puede hacerse mediante CSS.

Contraste: Es necesario que entre el color usado para el texto y el fondo de página exista suficiente contraste, de no ser así reduciremos significativamente la legibilidad de los contenidos.

Imágenes y gráficos: "una imagen vale más que mil palabras", pero también es potencialmente más ambigua. En la medida de lo posible hay que usar imágenes que aporten valor añadido al contenido o al menos que no se lo quiten porque sean una fuente de distracción que no aporte nada significativo.

Vídeos y otros elementos multimedia embebidos:

1. Al igual que con las imágenes debemos preguntarnos si aportan información o por el contrario pueden ser una fuente de distracción.
   
2. Y hablando de distracción, si tenemos claro que el vídeo integrado es importante, debemos tener en cuenta que verlo y escucharlo requiere toda la atención del usuario y por tanto no debe estar rodeado de otros elementos que puedan distraer su atención.
3. También es importante recordar que el usuario debe ser quien tome las decisiones sobre qué consultar y qué no. En el caso de los vídeos o de las presentaciones debe tener la opción de reproducirlos o no. No debemos por tanto configurarlos para que se reproduzcan automáticamente.
4. Por último debemos recordar que hoy por hoy el estandar es flash y todos los navegadores disponen de plugin para reproducir este tipo de formato. Si usamos otros formatos corremos el riesgo de que el elemento multimedia no pueda verse.

---

Ampliar información:

• Ocho errores habituales que debemos evitar cuando diseñamos una web
• Las 75 directrices de accesibilidad de Jakob Nielsen
• 35 consejos sobre usabilidad

Debemos recordar que estamos trabajando con un gestor de contenidos en el que delegamos una gran parte de la organización y diseño de nuestro sitio web. Este gestor de contenidos que para nosotros es EducaMadrid se llama realmente Liferay. Sobre todos aquellos aspectos relacionados con el diseño y la organización de nuestro sitio web que delegamos en el gestor de contenidos no podemos controlar si cumplen o no las pautas de accesibilidad.

¿Nos garantiza EducaMadrid la accesibilidad de las páginas alojadas en el portal?

Si accedemos a la home de EducaMadrid veremos que abajo tenemos un enlace que pone Accesibilidad. Cuando pulsamos sobre este enlace accedemos a una página en la que podemos encontrar este texto:

No parece por tanto debemos preocuparnos del cumplimiento de pautas de accesibilidad que afectan al diseño y a la navegabilidad de nuestras páginas. Pero sí deberemos de preocuparnos de que estas pautas también se cumplan, en la medida de lo posible, en los contenidos que creemos y que embebamos y que pongamos a disposición de los usuarios en nuestras páginas.

Como decíamos anteriormente debemos intentar que las pautas básicas de accesibilidad se cumplan en los contenidos que creemos y que pongamos a disposición de los usuarios en nuestras páginas.

En este sentido y como resumen podemos tener en cuenta la pautas de la guía breve para crear sitios web accesibles de la W3C.

• Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual. Esto quiere decir que cuando insertemos una imagen en algún contenido no debemos olvidarnos de al menos poner un título signficativo a la imagen y también una descripción.

• Figuras y diagramas: Describalos brevemente en la pagina o use el atributo longdesc. En tanto que las figuras y diagramas se insertarán como imágenes la pauta es la misma que en el punto anterior, pero ahora se recomienda que la descripción larga esté presente.

• Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
• Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo, evite "pincha aquí".
• Organización interna de los contenidos : Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.
• Tablas: Facilite la lectura línea a línea. Resuma. Hay que evitar el uso de tablas para organizar los contenidos. En el editor de contenidos de Educamadrid disponemos de la posibilidad de usar plantillas para organizar los contenidos, esto organizará el contenido mediante las etiquetas <div>, esta opción es preferible a utiliar tablas.

En caso de tener que usar tablas, para facilitar su lectura, es conveniente que no haya más de una columna, para que el texto pueda ser leído por filas. También es conveniente incluir un resumen de la tabla.

----

Más información:

• Guía breve para crear sitios web accesible [Consultado el 09/11/2010]
  

• Técnicas Fundamentales para las Pautas de Accesibilidad al Contenido en la Web [Consultado el 09/11/2010]