Separación de Paginas en Areas claramente definidas.

Según Steve Krugg, «los usuarios deberían ser capaces de señalar las distintas áreas de una página y decir cosas como: “lo que puedo hacer en este sitio”, “productos que vende esta empresa”, “navegación para ir al resto del sito”, etcétera».

Realmente, a propósito de la jerarquía visual, hay que dividir la página en áreas claramente definidas porque permite que los usuarios puedan decidir rápidamente y casi sin pensar en qué áreas de la página deben centrar su atención y cuáles pueden obviar.

Resultan significativos los estudios acerca de la lectura rápida de los usuarios en la Web que vienen a sugerir que éstos deciden muy rápidamente en qué partes de la página es más probable que esté la información que buscan y que casi nunca miran para el resto de la página.

Una forma de definir las areas, es utilizando las etiquetas <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , donde cada una de ellas indica el titulo o subtitulo en funcion de la importancia del contenido, asi por ejemplo <h1> seria el titulo principal de la pagina o documento que estamos mostrando, <h2> serian los titulos de los principales apartados del contenido de esa pagina, <h3> serian los subtitulos de dichos contenidos y asi sucesivamente hasta llegar a <h6>.

Hacer uso de las convenciones

Las convenciones son una serie de normas no escritas, adquiridas por el uso cotidiano, que todo el mundo conoce y sabe interpretar correctamente.

Es decir, vendrían a representar una especie de estándares de facto. Si nos atenemos a ellas, garantizamos que nuestros usuarios van a ser capaces de usar un determinado producto, saber moverse cómodamente por un sitio web, leer un nuevo periódico o revista... sin tener que estudiar un manual de usuario ni dedicar un tiempo a la experimentación y el aprendizaje.

Al igual que sabemos hojear un periódico gracias a que podemos identificar fácilmente las distintas noticias que lo forman porque todos ellos siguen unos patrones comunes (los titulares más grandes y en negrita que se expanden tantas columnas como ocupa la noticia, por ejemplo), hay multitud de convenciones que se han ido estableciendo en la Web y que deberemos seguir si no queremos que usar nuestro sitio sea una especie de pesadilla para sus visitantes.

Por citar sólo algunos de ellos, podemos enumerar los siguientes:

Los enlaces en azul y subrayados

El uso de menús de navegación (normalmente, en forma de barra lateral izquierda o bien en la parte superior de la página)

La metáfora de la cesta de la compra

etcétera

Creación de una Jerarquia Visual Clara

¿Cómo facilitamos el proceso de lectura rápida a un usuario? Una de las mejores cosas que podemos hacer en este sentido es que la apariencia de todos los elementos de la página refleje lo más fielmente posible las relaciones entre esos mismos elementos. Es decir, que
quede claro qué cosas están relacionadas entre sí, qué cosas son parte de otras y así sucesivamente.

En otras palabras, es necesario crear una jerarquía visual lo más clara posible, que refleje la estructura lógica subyacente de la página.

Pero, ¿qué queremos decir realmente con crear una jerarquía visual? Pues cosas como las siguientes:

Cuanto más importante es una cosa, más prominente debe ser en la página Aunque pueda parecer una obviedad, muchos sitios Web no respetan esta sencilla máxima, no sólo de la Web, sino de cualquier publicación impresa.

Por ejemplo, que los títulos destaquen del contenido normal de la página, ya sea haciéndolos más grandes, poniéndolos en negrita o en otro color, dejando más espaciado entre ellos y el resto de los elementos, etcétera (o bien mediante una combinación de las técnicas anteriores).

Las cosas que están lógicamente relacionadas también han de estarlo visualmente
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido. Anidar visualmente unos elementos dentro de otros para mostrar qué cosas son parte de otras

Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido.

1. Facilitar la lectura rápida


Ya hemos comentado que cuando usamos la Web, en vez de leer, todos tendemos a hojear las páginas, y que no debíamos pretender luchar contra ese hábito de los usuarios sino asumirlo y aun potenciarlo. ¿Cómo? Eso es lo que vamos a ver en este apartado, mediante algunos sencillos consejos.

En concreto, éstas son las cinco cosas más importantes que, a juicio de Steve Krug (Krug,
2000 ) debemos hacer para asegurarnos de que nuestros usuarios ven —y son capaces de comprender— la mayor parte posible de nuestro sitio:

Crear una clara jearquía visual en cada página

Hacer uso de las convenciones

Separar las páginas en áreas cláramente definidas

Hacer obvio dónde se puede hacer clic

Minimizar el ruido



1.1 Crear una jerarquía visual clara

¿Cómo facilitamos el proceso de lectura rápida a un usuario? Una de las mejores cosas que podemos hacer en este sentido es que la apariencia de todos los elementos de la página refleje lo más fielmente posible las relaciones entre esos mismos elementos. Es decir, que
quede claro qué cosas están relacionadas entre sí, qué cosas son parte de otras y así sucesivamente.

En otras palabras, es necesario crear una jerarquía visual lo más clara posible, que refleje la estructura lógica subyacente de la página.

Pero, ¿qué queremos decir realmente con crear una jerarquía visual? Pues cosas como las siguientes:

Cuanto más importante es una cosa, más prominente debe ser en la página Aunque pueda parecer una obviedad, muchos sitios Web no respetan esta sencilla máxima, no sólo de la Web, sino de cualquier publicación impresa.

Por ejemplo, que los títulos destaquen del contenido normal de la página, ya sea haciéndolos más grandes, poniéndolos en negrita o en otro color, dejando más espaciado entre ellos y el resto de los elementos, etcétera (o bien mediante una combinación de las técnicas anteriores).

Las cosas que están lógicamente relacionadas también han de estarlo visualmente

Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido. Anidar visualmente unos elementos dentro de otros para mostrar qué cosas
son parte de otras

Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido.

La Creación de Contenidos Web

Ya hemos comentado que cuando usamos la Web, en vez de leer, todos tendemos a hojear las páginas, y que no debíamos pretender luchar contra ese hábito de los usuarios sino asumirlo y aun potenciarlo. ¿Cómo? Eso es lo que vamos a ver en este apartado, mediante algunos sencillos consejos.

En concreto, éstas son las cinco cosas más importantes que, a juicio de Steve Krug (Krug,
2000 ) debemos hacer para asegurarnos de que nuestros usuarios ven —y son capaces de comprender— la mayor parte posible de nuestro sitio:

Crear una clara jearquía visual en cada página

Hacer uso de las convenciones

Separar las páginas en áreas cláramente definidas

Hacer obvio dónde se puede hacer clic

Minimizar el ruido

El uso de Extensiones con Adobe Dreamweaver CS3

Mucho se ha hablado y mucho se ha escrito sobre este magnifico programa editor visual de HTML. Son muchos los que lo usan para maquetar y darle un toque profesional a sus sitios, pero creo que somos muy pocos los que en realidad conocemos toda la potencia y funcionalidad de dicho programa.
Hace algun tiempo, escribi en Google "Macromedia Extension", y .... oh gran sorpresa!, me encontre frente a un listado de sitios los cuales estaban por supuesto en varios idiomas, pero que por sobre todos ellos destacaba una empresa por aquel entonces Rumana llamada "Inter AKT", la cual se dedicaba a crear extensiones para Macromedia Dreamweaver (en aquel entonces). Asi que decidi buscar en otros sitios de intercambio P2P toda la lista de extensiones que alli estaban listadas e instalarlas en mi Dreamweaver 8 (por aquel entonces).
El resultado fue increible, me encontre en mi interfaz dentro de la caja de insercion de objetos una serie de pestañas nuevas que entre otras cosas y con tan solo dos clicks de raton y un sencillo cuadro de configuracion me permitian entre otras cosas:
- Crear un Carrousel de Fotos
- Crear una Carrito de Compras (Shopping Cart)
- Crear un Foro
- Intercambiar XML por MySQL y al reves

En fin todo un mundo de oportunidades al alcance de uno con tan solo dos clicks de raton y sin saber programar.

Amigo, le hago la siguiente pregunta: Sabe Ud en cuanto tiempo era yo capaz de diseñar, desarrollar y programar un Carrousel de Imagenes? .... en 4 horas .... gracias a Adobe Extension .. ahora en 4 Clicks ... ah! y lo mas importante ... sin errores! ... por que lo de los errores eran en aquel entonces, hoy ya no.

¿Qué son las «prioridades», los «niveles de adecuación» y cómo se usan?

A la hora de evaluar un site, es importante que el contenido del mismo este diseñado acorde con las pautas de accesibilidad que recomienda la W3C y la WAI 508.

Para averiguar si nuestro sitio cumple con dichas pautas (14 en total), existen sitios que se encargan de validar nuestro contenido en funcion de unos puntos de verificacion (76 en total), cada punto de verificación tiene asignado uno de los tres niveles de prioridad.
• La Prioridad 1 es para los puntos de verificación que el desarrollador tiene que satisfacer;
si no, algunos grupos de personas serán incapaces de acceder a la información
de un sitio;
• La Prioridad 2 el desarrollador debe satisfacerla; sin ello alguien encontrará muchas
dificultades para acceder a la información;
• La Prioridad 3 el desarrollador puede satisfacerla; de lo contrario, algunas personas
hallarán dificultades para acceder a la información.

Segun los resultados, nos dan una serie de recomendaciones y nos pueden calificar en funcion de 3 niveles de adecuacion, la especificación tiene tres «niveles de adecuación» para facilitar la referencia por otras organizaciones:
• El nivel de adecuación «A» (A) incluye los puntos de verificación de prioridad 1;
• El nivel «Doble A» (AA) incluye las prioridades 1 y 2;
Esta página de «preguntas más frecuentes» proporciona información sobre la
recomendación W3C (World Wide Web Consortium) «Pautas de Accesibilidad
al Contenido en la Web 1.0», emitida el 5 de mayo de 1999.
20
• El nivel «Triple A» (AAA) incluye las prioridades 1, 2 y 3.
Para aquellos cuyas páginas siguen estas pautas, hay disponibles unos logotipos que
pueden colocar en sus sitios para mostrar su nivel de adecuación. Vea la pregunta 12 de
este documento “¿Qué recursos de apoyo están disponibles para usar estas pautas?”,
para informarse sobre los programas de revisión, parcialmente automatizados, de ayuda
para la valoración de los sitios.

Que son las Pautas de Accesibilidad Web

Las «Pautas de Accesibilidad al Contenido en la Web 1.0» son una especificación del W3C que proporciona una guía sobre la accesibilidad de los sitios de la Web para las personas con discapacidades.
Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C. La especificación contiene catorce pautas, que son los principios generales para el diseño accesible. Cada pauta está asociada a uno o más puntos de verificación que describen cómo aplicar esa pauta a las presentaciones de las páginas
Web.
Un apéndice de estas pautas, la «Lista de puntos de verificación para las Pautas de
Accesibilidad al Contenido en la Web 1.0», presenta los puntos de verificación clasificados por prioridades, para encontrarlas fácilmente. Estas pautas no sólo hacen las páginas más accesibles para las personas con discapacidad, sino que tienen el beneficio adicional de hacerlas más accesibles para todos los usuarios que utilizan navegadores diferentes o los nuevos ordenadores portátiles o basados en la voz.