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.

Las 14 Pautas de Accesibilidad

Aqui transcribo las 14 Pautas de Accesibilidad que emitio la W3C para crear sitios usables. En este Post no entrare a discutir ni aclarar ninguna de ellas, lo hare una por una en Post posteriores.

PAUTA 1: Proporcione alternativas equivalentes al contenido visual y auditivo.
PAUTA 2: No se base sólo en el color.
PAUTA 3: Utilice marcadores y hojas de estilo y hágalo apropiadamente.
PAUTA 4: Identifique el idioma original usado.
PAUTA 5: Cree tablas que se transformen correctamente.
PAUTA 6: Asegure que las páginas que incorporan nuevas tecnologías se transformen
correctamente.
PAUTA 7: Asegure al usuario el control sobre los cambios de los contenidos
tempo-dependientes.
PAUTA 8: Asegure la accesibilidad directa de las interfaces de usuario incrustadas.
PAUTA 9: Diseñe para la independencia del dispositivo.
PAUTA 10: Utilice soluciones provisionales.
PAUTA 11: Utilice las tecnologías y pautas W3C.
PAUTA 12: Proporcione información de contexto y orientación.
PAUTA 13: Proporcione mecanismos claros de navegación.
PAUTA 14: Asegure que los documentos sean claros y simples.

Guia breve para crear sitios web accesibles

1. Imágenes y animaciones: Use texto alternativo (atributo alt) para describir la función de los elementos visuales.

2. Mapas de imagen: Use mapas de cliente y texto alternativo para las zonas activas.

3. Multimedia: Facilite subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos no accesibles.

4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de contexto.
Por ejemplo, no usar «pincha aquí».

5. Organización de las páginas: Use encabezados (H1, H2, H3,...), listas y estructura consistente. Use Hojas de Estilos en Cascada (CSS) para maquetación y estilo, donde sea posible.

6. Gráficos de datos: Resuma o use el atributo longdesc.

7. Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan soporte.

8. Marcos (Frames): Etiquete con los atributos title o name.

9. Tablas: Realícelas de manera que se puedan leer línea a línea. Incluya un resumen.
Evite el uso de tablas para dar formato a las páginas.

10. Revise su trabajo: Valide el código HTML. Use herramientas de evaluación y navegadores sólo-texto para verificar la accesibilidad.

Los Errores más Frecuentes a la hora de Diseñar en Web

1-. Modelo de negocio

Tratar la Web como un simple folleto, en vez de cómo algo fundamental que va a cambiar la forma de dirigir la empresa en la economía en red.

2-. Gestión de proyectos

Gestionar un proyecto web como si se tratara de un proyecto corporativo tradicional. Esto nos lleva a un diseño interno provisto de una interfaz de usuario inconsistente. En vez de ello, un siito web debe ser gestionado como un proyecto específico de interfaz de cliente.

3-. Arquitectura de la información

Estructurar el sitio para que refleje la forma en que la empresa está estructurada. En vez de ello, el sitio debe estar estructurado para reflejar las tareas de los usuarios y sus puntos de vista en el espacio informativo.

4-. Diseño de páginas

Crear páginas que tengan un aspecto atractivo y que evoquen sensaciones positivas al ser probadas internamente. Las pruebas internas no sufren los retrasos de tiempo de respuesta, que son el determinante principal de la usabilidad; de forma similar, una prueba no expone la dificultad que va a tener un usuario novel en encontrar y comprender los distintos elementos de las páginas. En lugar de ello, diseño el sitio para que el usuario tenga una experiencia óptima en circunstancias reales, aunque sus pruebas sean menos “atractivas”.

5-. Creación de contenido

Escribir en el mismo estilo lineal en el que siempre haya escrito. En lugar de ello, oblíguese a escribir con un nuevo estilo optimizado para los lectores en línea, los cuales suelen escanear el texto y necesitan páginas muy breves con la información secundaria relegada a páginas de apoyo.

6-. Estrategia de vinculación

Tratar su propio sitio como el único importante, sin vínculos a otros sitios y sin puntos de entrada bien diseñados para que otros coloquen sus vínculos. Muchas empresas no utilizan vínculos correctos al mencionar su sitio web en su propia publicidad. En vez de ello, recuerde que el hipertexto es la base de la Web, y que ningún sitio es una isla.

Esperamos que esta introducción haya servido para que el alumno se plantee cosas que quizás antes obviaba cuando tenga que diseñar un sitio web y, fundamentalmente, para que lo haga siempre –no nos cansaremos de repetirlo– desde el punto de vista del usuario.

Por último, ha de quedar claro que la usabilidad no tiene que ver únicamente con el diseño gráfico, o con que haya mecanismos apropiados de navegación, exista un mapa del sitio, etcétera. En muchas ocasiones, el problema viene de no haber sabido ofrecer la funcionalidad demandada por el usuario o que, simplemente, le haría sentirse más satisfecho usando nuestro sitio.

En definitiva, como afirma Nielsen, «la Web es un medio nuevo, por lo que requiere un planteamiento distinto».

Cómo usamos la Web

Uno de los errores más comunes a la hora de diseñar una página web es pensar que el usuario va a leerla como si se tratase de la página de un libro, comenzando arriba a la izquierda y leyendo de manera secuencial todo el contenido de la página, hasta el final. Además, tendemos a creer que va a dedicar un tiempo a averiguar cómo hemos organizado las cosas (en la propia página y en el sitio web en general) y que sopesará las distintas opciones que ésta le ofrece antes de decirse a pulsar en un determinado enlace.

Lo anterior se parece bastante poco al modo en que todos nosotros utilizamos la Web. En vez de eso, lo que hacemos la mayoría de usuarios de Internet es hojear las páginas, hacer lectura rápida de parte del texto y pulsar en el primer enlace que capta nuestra intención de un modo u otro, o que nos recuerda aquello que estamos tratando de hacer. Es decir, normalmente hay grandes porciones de la página para las que ni siquiera miramos.

Como afirma Steve Krug, el diseñador de la página muchas veces piensa que está
haciendo literatura (o, cuando menos, una especie de folleto de un producto) mientras que el usuario se enfrenta a la Web con una actitud similar a la que mostramos ante las vallas publicitarias que vemos en la carretera mientras viajamos en su coche a cien kilómetros por hora.

Así pues, en vez de tratar de luchar contra esta actitud, lo que debemos hacer es asumirla y, sabiendo que casi nadie va a molestarse en leer detenidamente ni, mucho menos, en orden, el contenido de nuestras páginas web, trataremos precisamente de favorecer esa lectura rápida para captar la atención del usuario sobre aquellos aspectos más importantes de cada página.

En "Creación de sitios usables y arquitectura de la información" veremos algunas pautas de diseño que pueden ayudarnos a facilitar dicha lectura rápida.

Básicamente, de lo que se trata es ofrecer una clara jerarquía visual de la página, como siempre, desde el punto de vista del usuario, tratando de destacar aquello que consideremos más importante para él en cada contexto, y no lo que la empresa piense que es más importante.

Algunos de estos principios de diseño tienen que ver con el uso correcto del espacio en blanco, la eliminación del ruido de la página, omitiendo todo aquello que sea prescindible para así dar más preponderancia a lo fundamental, hacer que los enlaces resulten obvios
(es decir, que el usuario sepa que ahí se puede pulsar), etcétera.

¿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.

La importancia de Desarrollar HTML con Listas

Muchas veces la diferencia entre un codigo limpio y accesible que nos permite modificar el Look&Feel de un componente web o sencillamente "hacer lo que se pueda por el paciente" esta en la correcta estructuracion del HTML.
A lo largo de mi carrera, he pasado por diversas etapas, desde usar tablas para distribuir contenidos, pasando por la tipica conversion de imagenes de Fireworks para Dreamweaver y mostrar el site cargado de imagenes hasta el uso de div's, clases y Id's para darle look&feel a todo y posicionar todo en la interfaz de usuario.

Ha sido un largo y a veces, por que no?, tortuoso camino del cual he aprendido ciertas cosas:

1) Las secciones se estructuran a traves de la etiqueta (div)
2) Los contenidos de texto se estructuran a traves de la etiqueta (p)
3) Los diferentes contenidos de una seccion se estructuran con Listas (ul, li)
4) Los resultados de reportes se presentaran en tablas (función para la que han sido creadas)

Hasta aqui todo bien, pero detengamonos en el punto 3 y fijemonos en algo:
Cuando yo quiero jerarquizar contenido (Titulo, Subtitulo, Imagen, Contenido) que opciones tengo:

Tabular todo y mostrar el contenido en diferentes celdas Hacer uso del Divisionismo y crear div's hasta para separar los diferentes parrafosUsar al libre albedrio dentro de un Div etiquetas Perfecto, yo me quedaria con la opcion 3 .... pero que tal si el cliente a ultima hora (y creame que ocurre), decide darle un cambio drastico de posicion, visualizacion o distribucion a una zona de contenido.

1-. El hecho de usar tablas me impide bajo toda circunstancia cambiar de posicion algun componente, en el mejor de los escenarios tengo que crear nuevas celdas y divisiones y aguantar los descuadres de medidas que esto genera.

2-. Si use divisiones, estare en una posicion mas privilegiada que con las tablas, pero igual las medidas de los divs y su opcion de flotar me crearan quebraderos de cabeza.

3-. Por ultimo, si use style, y el reposicionar todo eso se puede volver complicado al entrar en el codigo .. sino me creen, hagan la prueba.

Existe una opcion, que aunque parece bastante primitiva, desde el momento que la descubri, cambio mi vida por completo, veamos:Estructurando todo el contenido en listas tengo varios problemas resueltos:

1) La presentacion secuencial de los contenidos esta estructurada y jerarquizada, por lo que puedo con unicamente declarar una clase mover a mi antojo todo el contenido que encierra una lista o sub-lista.

2) En combinacion con la etiqueta de estilo CSS float, puedo usar tanto vertical como horizontalmente el contenido de las listas.

3) A la hora de cambiar look&Feel, el codigo es mas limpio por lo que sera mas legible y por ultimo de fácil comprension.

Desde aqui le animo a que pruebe a hacer por ejemplo una galeria de imagenes basadas en listas, o una barra de navegacion.

Mi Primera Entrada

Hola amigos: Esta es mi primera entrada en mi Blog Web4Dummies, y mi idea es descubrirle a todo aquel que visita mi Blog, el apasionante mundo de Internet, pero visto desde bastidores, de como funcionan las paginas web, como se llega a montar un sitio y por que se ha montado ese sitio, cual es el camino a seguir, etc. Es decir les mostrare desde el punto de vista del desarrollador cuales son las herramientas, las metodologías y los procesos para el desarrollo de un Sitio Web.