Creo que es muy interesante que participen de este tipo de experiencias las personas que tienen que ver en cualquiera de sus roles con sitios web. La jornada es gratuita y requiere de una inscripción previa que se puede realizar enviando Nombre, Número de Documento y empresa/organización a:
acc@isoc.org.ar

La Jornada es organizada por el Capítulo Argentina de Internet Society (ISOC-AR) y se desarrollará en las oficinas de Microsoft de Argentina, en Bouchard 710 Piso 4.

Ver mapa más grande

Más información sobre la jornada

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

El grupo se llama UPA Argentina y hacen reuniones mensuales en la Ciudad de Buenos Aires de capacitación, debate, intercambio de ideas, etc., además de compartir una lista de correo a la que, aquellos que la propuesta les resulte interesante, se puedan suscribir.

En la última reunión, según lo que me cuenta Gonzalo Auza, que fue quien me contactó para participar, se hizo una presentación sobre Arquitectura de Información, un debate posterior y un ejercicio lúdico de ordenamiento de tarjetas; y en la anterior profesionales de renombre como ser Eduardo Mercovich, Enrique Stanziola y Jorge Plano hicieron presentaciones.

Me parece una muy buena iniciativa ya que una de las formas de difundir la usabilidad es a través de la socialización del conocimiento, logrando a través de estas acciones el crecimiento del mercado y la concientización de la necesidad de estas disciplinas como parte integral de la expansión e innovación en los desarrollos en internet.

Hasta la próxima!

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

El evento se realizará en el Auditorio del Edificio Anexo de la Cámara de Diputados en Rivadavia 1865. Es una actividad no arancelada. Se realizará transcripción simultánea para hipoacúsicos.

Expondrán Cynthia Waddell y Michael R. Burks del ICDRI, International Center for Disability Resources on the Internet junto con Diputados, Senadores, especialistas en accesibilidad web y expertos en discapacidad.

Para cualquier consulta pueden escribir a acc@isoc.org.ar

Mi consejo es no se lo pierdan :)

Para más información pueden leer la Gacetilla de Prensa

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

Según la Wikipedia, un newsletter o boletín electrónico "es una publicación distribuida de forma regular, generalmente centrada en un tema principal que es del interés de sus suscriptores."En un principio este delivery de información calificada se realizaba en papel por medio el correo postal, con el advenimiento de la era de la información tuvo su salto al mundo digital y aparecieron los newsletters electrónicos enviados a suscriptores vía e-mail.

El objetivo primario de esta práctica de marketing digital es entregar información a los usuarios sobre actualizaciones del sitio o lo que se les ocurra a los editores que pudiera interesarle a sus suscriptores, el fin último tiene que ver con la fidelización del usuario, es decir, el newsletter se transforma en un embajador de la calidad de nuestro sitio, por ello debemos prestar atención a lo que estamos enviando.

Sobre la información

De más está decir que la información tiene que ser relevante, o sea de interés para el grupo de suscriptores. Los contenidos tienen que perseguir algún estándar de calidad que pueda ser percibido por sus usuarios, de no cumplir con estas sentencias, no lo envíen y no utilicen el newsletter como soporte para enviar publicidad, a menos que los usuarios lo hayan solicitado expresamente.

Es importante que el newsletter contenga la siguiente información:

• Nombre del sitio, En el formato HTML debe ir también el logo.
• URL del sitio, información de contacto, nombre de la persona responsable.
• Información sobre la administración de la suscripción.

Sobre el formato y la presentación de la información

Los formatos de entrega más populares son HTML y texto plano, los cuales deben ser ofrecidos a nuestros usuarios para que éstos elijan cómo quieren que la información les llegue. Para los usuarios que elijan como formato HTML, habrá que considerar algunos aspectos de la presentación de la información, por ejemplo:

• Ancho recomendado: la longitud horizontal máxima que puede alcanzar el mensaje para que la información sea correctamente interpretada. Por mi parte recomiendo un máximo de 500 px a 550 px. En esta medida no solo hay que tener en cuenta la resolución del monitor de los usuarios, sino también el uso del panel de previsualización de los clientes de mail por parte de la mayoría de los clientes de mail de escritorio y que seguramente se va a incorporar en las próximas generaciones de servicios de mail web based. La idea es que el mail pueda mostrarse correctamente cuando el usuario lo previsualiza en su cliente de correo, si después quiere abrirlo para verlo mejor, enhorabuena, pero hay muchos usuarios que ya no utilizan esta funcionalidad, sino que visualizan lo que se ve en el panel de previsualización.
• Modelo de pirámide invertida: es recomendable que la información más importante esté lo más arriba posible dentro de la estructura. Se recomienda empezar por la conclusión, un párrafo como resumen e ir agregando información gradualmente, de modo que los usuarios puedan tener una idea global del contenido incluso sino no lo leen entero.
• Estructurar el texto para que sea escaneable: utilizartítulos claros, significativos y diferenciados de los textos, párrafos cortos y concisos, viñetas y recuadros para cortar la monotonía de la información pero no perdiendo de vista la moderación. Asegurar también, el balance necesario entre las zonas de congestión de la información y los espacios en blanco necesarios para "airear" la información. No justificar el texto, los cortes que encontramos en la alineación a la izquierda, generados por el tamaño aleatorio del texto ayudan a la lectura en pantalla, que es mucho más dificultosa para el ojo humano. (Ver: How Users Read on the Web). Se recomienda como máximo el uso de 3 tipos distintos de tipografías.
• Poner mucha atención los encabezados del newsletter: el asunto debe ser, como vengo diciendo con los títulos, descripciones, etc.: descriptivo y concreto. Hay que tener especial cuidado con el Sender (from) es recomendable no utilizar alias genéricos como "listadmin" o "postmaster" sino más bien nombres reales, del sitio o del encargado del mismo. Y por último el destinatario del mensaje debe ser el mail del suscriptor, no eufemismos de listas tales como "listaboletin", y ni hablar del "undisclosed recipient" para que el receptor pueda saber fácilmente por cual dirección de correo le llega determinada lista.

Sobre los estilos (CSS o Tablas)

Aquí entramos en una larga discusión acerca si para maquetar un newsletter, de cara a que se vea bien en los múltiples clientes de mail, se debería utilizar tablas o CSS.

He aquí unas recomendaciones al respecto:

• Incluir el tag <style> embebido en el HTML en vez de referenciarlo externamente mediante un link. También se aconseja que este tag, amén de que no sea políticamente correcto, se posicione a continuación del tag <body>en vez de antes de éste para que el HTMl pueda ser interpretado por el servicio de Hotmail.
• Tratar de no maquetar con CSS, aunque muchos sostengan que un maquetado correctamente semántico es posible, mi experiencia indica que la mayoría de los dispositivos no se ponen de acuerdo sobre una manera unificada de mostrar la información.
• No usar código JavaScript muchas veces pueden disparar alertas de seguridad en la PC de los usuarios, creo que no tengo que explicar lo mal que nos haría quedar una situación de ese estilo.
• Hacer un testeo de los documentos con un validador HTML (ej: validator.w3.org) ya que el excesivo uso de los tags o incluso un mal uso de los mismos (tags mal cerrados o no cerrados en absoluto) pueden hacer que el boletín sea catalogado como spam y consecuentemente filtrado.

Sobre el uso de imágenes y otros elementos multimedia

En los newsletter en HTML se recomienda:

• El diseño tiene que estar estructurado de manera que, si las imágenes no se visualizan, el e-mail no pierda significado y no quede trunco su diseño visual sino siga transmitiendo una imagen profesional. Recordemos que la mayoría de los clientes modernos, tanto desktop como web-based bloquean por defecto las imágenes en los emails.
• Se deben evitar las imágenes para encabezados, links, textos o sentencias, la información catalogada como importante debe mantenerse más allá de una posible falla al mostrar los elementos multimedia. La imágenes suelen ser útiles para acompañar ciertos contenidos, obviamente mostrar los logos y para background y diseño visual en general, pero traten de evitar su uso en información importante. Todas las imágenes deben tener su correspondiente texto alternativo (alt), el cual tiene que estar acorde a la funcionalidad del texto multimedia (Ver art: Texto alternativo: la imagen o la función)
• Declarar los atributos de ancho y alto en tag IMG que muestra las imágenes, se da esta recomendación porque algunos clientes de mail pueden distorsionar las mismas al mostrarlas si las medidas no están definidas.
• Incluir un link a la versión en línea del newsletter al principio del mail para que aquellos que no pueden visualizarlo correctamente en el programa de correo puedan hacerlo en el sitio.
• Acerca de la inclusión del flash en los e-mail, por favor ¡chicos no lo hagan en sus casas! Hablando en serio: los programas de mail no soportan flash, lo que quieran mostrar no se va a ver.

Ejemplo de newsletter compuesto únicamente de ¡una imagen!:

Basándonos en esto, viene la siguiente recomendación: "realicen pruebas de envíos en múltiples software, plataformas, clientes de mail, proveedores conocidos, etc." Testeen "apagando" las imágenes del newsletter. Si el mail no llega bien, si se rompe o no se entiende, pierde su fuerza, su significado, su propósito.

Accesibilidad

• Es preferible siempre el uso de texto a imágenes
• Usar colores que generen buen contraste entre tipografías y fondos.
• La información importante debe estar arriba y datos del estilo de suscripción / desuscripción, direcciones, copyright, etc, al final del documento.
• Evitar el uso de largas cadenas de caracteres para separa textos o secciones, como por ejemplo guiones, asteriscos, barras, etc. Ya que los lectores de pantalla tienden a interpretarlos uno a uno.

Hasta acá el resumen. Seguro que hay muchas más para agregar, si se te ocurre alguna bienvenido sea tu comentario.

Hasta la próxima.

Enlaces Recomendados

• Email Design Guidelines for 2006
• Email Newsletters: Surviving Inbox Congestion

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

¿Cómo socializar el conocimiento si cada vez eran más necesarios skills tecnológicos fuera del alcance del usuario común? La respuesta, tiempo después, viene dada por la Web 2.0 que pone a disposición de los usuarios los instrumentos necesarios para que puedan generar sin tener que preocuparse del bagaje tecnológico subyacente, porque esta nueva etapa de la web les provee de todos los servicios necesarios para crear, publicar, compartir información en cualquier tipo de formato y que ésta a su vez pueda valorizarse a través de las redes sociales y la construcción de valor colectivo.

La incógnita se resolvió de forma que todos quedamos felices: la programación, lenguajes y estándares web son cada vez más complejos y profesionales, pero los usuarios no tienen por qué enterarse, porque no necesitan conocer de estos temas, ellos necesitan saber con qué servicios web cuentan para la tarea que quieren desarrollar. Así, por ejemplo si necesitan:

• escribir un documento: Writely.com
• trabajar colaborativamente: Basecamp
• armar o compartir favoritos: del.icio.us
• ubicarse en un mapa: Google Maps (Direcciones por ahora solo U.S.)
• publicar imágenes: Flickr
• subir videos: YouTube
• Enterarse de las noticias más votadas: Digg
• Publicar un weblog: Blogger
• y asi con todas las herramientas de esta nueva Web 2.0

Un poco de historia obligada

Esta etapa de la historia comienza cuando Tim O’Reilly lanzó el término Web 2.0 al ruedo en una conferencia, según este Sr. la web había evolucionado, cambiando las reglas y los modelos de negocios existentes hacia esta nueva versión, que vendría a ser algo así como la segunda generación de los servicios web que presentan como gran característica la ruptura de las barreras que impedían al usuario la utilización de servicios web como si fueran desktop, y la potenciación del uso colaborativo de esas herramientas a través de internet. La receta parece simple:

Esta idea se presenta en contraposición a la versión estática de la Web 1.0 vista como un repositorio estático de información escasamente actualizada o el semidinamismo de la Web 1.5 más conocida como la época de las “.com” representada por los primeros CMS y las grandes bases de datos.

La Web 2.0 es una mezcla de términos tecnológicos (CSS, XHTML, AJAX, RSS, API, etc, etc, etc.) con términos sociales (Folksonomies, Social Networking, Collaborative Work, etc). Este conjunto de siglas extrañas son las que aportan las nuevas funcionalidades, repasemos el tema, aquí tenemos una imagen con un tagcloud de la Web 2.0, podemos inferir a priori que los términos de mayor tamaño son los que más la representan, entonces repansado un poco que son algunos de estos términos tendremos una idea más acabada de su relevancia:

• Folksonomies: se basan en la descripción conjunta de un material por parte de muchas personas que realizan una categorización colaborativa por medio de tags simples no jerárquicos, cuantas más personas cataloguen un recurso surgirán las palabras clave más relevantes que son las que terminarán por describir el material en cuestión.
• Social software: ayudan a generar comunidades y redes de trabajo a través de herramientas de comunicación que propician la interacción y colaboración de sus miembros.
• Blogs y Wikis: son sistema de publicación automatizados que permiten la socialización de la información sin necesidades de grandes conocimientos tecnológicos.
• CSS Design + Web Standards : tecnologías que aluden al marcado y formato de las páginas y la correcta utilización de los estándares del W3C.
• Microformatos:
  consisten en un aprovechamiento consensuado de algunos atributos XHMTL (rel y class) que sirven para identificar contenidos específicos otorgándoles un mayor valor semántico.
• AJAX: conjunto de tecnologías para el desarrollo web que permite crear aplicaciones que interactúan con los usuarios sin refrescar las páginas contra el servidor.
• RSS/ATOM: protocolos estandarizados que potencian la sindicación y agregación de contenidos web a través de la portabilidad de la información.
• API: son especificaciones de comunicación entre componentes software que suelen proporcionar un conjunto de funciones de uso frecuente, así los programadores pueden utilizarlas en sus desarrollos y ahorrarse el trabajo de hacerlo desde cero.
• The long tail: es un concepto de marketing que muestra lo que pasa con internet y las ventas, en el ambiente comercial tradicional físico en el que nos manejamos es negocio tener en stock y vender aquellos artículos con gran volúmen de ventas, y es aquí donde internet cambia el modelo de negocios ya que si bien los productos con grandes ventas siguen siendolo, al poder ofrecer catálogos ilimitados, se logra que todos los productos ofrecidos vendan algo. Internet potencia la venta de productos no muy populares, una pequeña cantidad de cada uno pero si sumanos todos esos esfuerzos obtenemos en un gráfico de distribución de ventas, una cola larga, tanto que su superficie es mayor que la de su cabeza.

Y muchos más pero estos conceptos ya nos dan una mejor idea de qué se teje en estos días en la web, en esencia, la Web 2.0 no se trata de una evolución del desarrollo tecnológico, sino de una nueva configuración de este espacio virtual en el que nos movemos aún de forma bastante rudimentaria: de sitios web desconectados y elementales a una plataforma de interacción entre los usuarios de la red con multiples herramientas al alcance de nuestras manos para generar buscar y categorizar la información.

El tratamiento social que sufre la información en este nuevo contexto la enriquece, la hace más pertinente, encontrable y hace que pasemos a depender menos de complicados algoritmos de búsquedas que nos lleven a la info, desembarcando en uno de los pilares de la tan baqueteada web semántica: los datos que presentan relevancia por la metainformación que contienen.

Sintetizando, la web 2.0 es una plataforma de oportunidades, tecnológicas, de conocimiento, de negocios que recién estamos comenzando a explotar.

Hasta la próxima.

Enlaces recomendados:

• What is Web 2.0?  
• Web 2.0 según la Wikipedia
• Web 2.0: The Power Behind the Hype
• The Amorality of Web 2.0
• Web 2.0 by Paul Graham
• Web 2.0: Mistaking the Forest for the Trees?
• Review of the Year’s Best Web 2.0 Explanations

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

En el afán de encontrar una equivalencia en español para este término he visto palabras tales como: buscabilidad, encontrabilidad, recuperabilidad, y otros tan olvidables como estos. Ricardo Baeza Yates utiliza ubicuidad como sinónimo de findability y la divide en dos partes: buscabilidad, como la capacidad de un sitio para ser encontrado desde un buscador y visibilidad como la capacidad el sitio de mostrarse, ser usable, ofrecer información que pueda verse y encontrarse, etc..

Particularmente no me agrada el término ubiciudad porque significa omnipresencia o presencia en todos lados, y en realidad acá se habla de una única ubicación que sea reconocible de forma unívoca. Pero sí rescato esta doble composición del termino findability que alude tanto a la situación puertas afuera del sitio en su relación con otros sitios y con los sistemas de información, por ejemplo en su posicionamiento en los buscadores, y por otro lado a la situación puertas adentro que tiene que ver con la situación de los recursos del sitio: la usabilidad del mismo, las estructuras, la arquitectura de la información, etc. Es ir un paso más allá, es no solo diseñar un sitio y sus recursos poniendo énfasis en que sea usable sino también que sea encontrable.

¿Que podemos hacer nosotros para incrementar el findability de un sitio?

Contenidos de calidad

Lo más importante que necesitamos para aparecer en lo alto de un ranking de búsqueda en Google es que la información que brindamos en nuestro sitio sea útil, usable, accesible y que esté escrita de forma clara y precisa.

Los títulos deben responder a la misma consigna, claridad y significación, son muy bien valorados por los buscador y por ello debe incluir las palabras clave que tengan que ver con su contenido, en un segundo plano, la inclusión de palabras o frases clave en la descripción de un recurso, suele también ser tomada en cuenta para el ranking.

Debemos tener en cuenta que los usuarios al frente de los buscadores aprenden rápidamente a focalizar sus búsquedas. Por la cantidad de datos que puede arrojar una única palabra clave, han aprendido a hacer combinaciones de estas que los lleven a resultados más refinados. Entonces hay que tener en cuenta aquellas palabras clave que la gente utiliza para llegar a nuestro sitio, esto se puede realizar mediante un análisis de los logs del servidor, programas como el awstats, ya procesan por defecto este tipo de información.

El enriquecimiento del contenido a través de enlaces a otros sitios tiene una doble ventaja, por un lado le presentamos al usuario información relacionada que eleva el valor del recurso y por otro lado se incrementa nuestra credibilidad, ello hará que otros sitios nos citen y esto a su vez logrará que tengamos un mejor ranking en los buscadores, ya que estos miden la popularidad de un sitio web en base a los links que otras páginas les hacen. Es un círculo virtuoso en el que es recomendable entrar.

Código de calidad

El uso de HTML de acuerdo a los estándares facilita el trabajo de los spiders, que son los robots que recorren la red indexando la información, ya que éstos están programados para manejarse dentro de un código ideal tal como dicen las especificaciones que tiene que ser.

Al construir una página debemos tener en cuenta que su bien nuestros usuarios humanos no husmean generalmente en la maraña de código que tenemos atrás, los robots suelen andar por estos caminos en busca de información para indexar. Si al codificar las páginas no somos cuidadosos y dejamos tags sin cerrar, links rotos, javascript en abundancia o código con conflictos de programación, los robots verán complicado su trabajo y en algunos casos hasta dejarán de lado nuestro sitio.

A la hora de planificar un recurso hay que tratar de no usar imágenes para representar información que sea importante para entender el recurso, como títulos, subtítulos, por la importancia que le da un buscador a un atributo h1 en contraposición con el alt de una imagen, demás está decir que se utilice el que sea, debe ser claro y descriptivo.

Navegación de calidad

Aparte de darle importancia al contenido y al código de nuestras páginas, debemos también dedicar parte de nuestra atención a la navegación del sitio, si esta resulta intrincada, con callejones sin salida, sin una ida y vuelta fluida, no solo impactará negativamente en la experiencia de la visita de nuestros usuarios, sino que también complicará el posicionamiento dentro de los principales buscadores.

Un mapa de sitio claro y completo, sin llegar a ser muy complejo de entender es una gran opción, para que nuestros usuarios puedan tener a primera vista una idea general de qué les estamos ofreciendo.

Google está estrenando en el mercado un nueva herramienta: Google Sitemaps con la que nos permite interactuar con sus sistemas de indexación. El procedimiento sería el siguiente: colocamos en nuestro sitio un archivo XML con un formato particular convenido con Google, que contenga cierta información sobre las página de nuestro sitio (URL, última actualización, frecuencia de actualización, prioridad.) y lo referenciamos desde Google, el cual se encargará de indexar las páginas que se detallan en el archivo y de establecer una frecuencia temporal para la actualización del mismo.

Accesibilidad

La accesibilidad también influye sobre el ranking de nuestro sitio en los buscadores, porque también necesita de estructuras claras y de meta información que permita a los usuarios acceder mediante infinidad de dispositivos a la información de un sitio. Los títulos claros, bien etiquetados, el uso de una jerarquía semántica, la información alternativa de imágenes y multimedia hacen que un sitio sea más accesible pero a la vez es más encontrable.

Qué pasa con los sitios en flash

La mayoría de los robots que recorren la red en busca de las páginas responden a estructuras de páginas, por lo que les resulta imposible sondear en un objeto flash, así como un lector de pantalla no puede acceder a su información para transmitírsela a un usuario no vidente, tampoco el spider de google puede. Esto significa que los buscadores privilegiarán las paginas de texto antes que las llamativas animaciones multimedia que tan bien se llevan con el ojo del usuario inexperto.

Otras cosas a tener en cuenta

Tener un dominio propio incrementa nuestras chances, y si además las URL dentro de nuestros sitios son legibles tanto por humanos como por robots, sumaremos puntos extra, miren estos dos ejemplos y saquen sus conclusiones de cual de estas URL puede ser mejor rankeada:

http://www.interacciones.com.ar/tagging-folksonomies-y-tags-clouds

http://designforum.aiga.org/content.cfm?ContentAlias=_getfullarticle&aid=1345223

Las páginas que tienen URL simples tienen mejor ranking en un buscador que aquellas que tienen URL complejas, generalmente las URL simples son patrimonio de las páginas estáticas, en contraposición de las páginas dinámicas que suelen incluir parámetros (por ejemplo con "?", "=" , "@").

La oferta de diferentes formatos de información también nos ayuda, brindar a nuestros usuarios la posibilidad de acceder a las noticias via RSS esto incrementará las visitas al sitio, ayudándonos en nuestra escalada virtual.

En resumen, cada vez tendremos que tener más cosas en cuenta para mejorar nuestros sitios, según Peter Morville, precursor de esta última movida y autor de Ambient Findability, hay que prestarle más atención a esta cualidad, ya que el peor error de usabilidad que te puede ocurrir es que los usuarios no encuentren tu sitio, pero en este sentido aclara que no es que sea una parte de la usabilidad, sino más bien que el findability precede a la usabilidad, en este sentido acota:
You can’t use what you can’t find.

Hasta la próxima.

Enlaces recomendados:

• Findability.org
• Ambient Findability
• Ambient Findability: Findability Hacks
• How Findability Determines Authority Online: The Wikipedia Phenomenon
• Ubicuidad y Usabilidad en la Web
• Google Information for Webmasters
• Guía de posicionamiento en buscadores

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

El propósito del sitio debe ser claro y explícito

Es importante que nuestra home page hable por nosotros, en un primer vistazo debe comunicar a los usuarios quienes somos, que hacemos, y hasta más importante, en qué le podemos ser útiles.

Para ello podemos hacer uso de los slogans que acompañan al logo y ayudan a la marca en la comunicación de los objetivos. También se puede poner una introducción en la home que explique en pocas palabras este tema.

Declarar la identidad del sitio

Es importante ubicar de forma visible los mecanismos para ponerse en contacto con el sitio, tanto en línea: email, como postales y telefónicos. Esto nos da credibilidad y nos corporiza.

Diseño universal

Diferentes grupos de usuarios, necesitan diferentes interfaces, por ello se diseña con independencia del dispositivo, es decir, separando el contenido del formato, para permitir su presentación en múltiples plataformas y sistemas operativos como así también para su activación desde diversos dispositivos de entrada.

Las páginas deben ser testeadas durante las etapas de desarrollo para que su formato se visualice correctamente usando diferentes plataformas y navegadores.

Diseño consistente

Es necesario presentar uniformidad en la estructura del sitio para transmitirles a nuestros usuarios cuándo están en nuestro sitio, cuando se van por un enlace que le recomendamos.

En sitios grandes y con públicos heterogéneos es frecuente que los diseñadores se encuentren ante la disyuntiva de ofrecer diseños diferentes para cada perfil, pero a pesar de estas personalizaciones (colores, tipografías, estilo de imágenes, etc.) hay ciertos pasos que se pueden seguir para lograr la consistencia:

• Mantener un encabezado común, y también puede ser un pié, en todas las páginas que le indique al usuario que sigue navegando dentro de la misma estructura de la página anterior. No tiene que ser el mismo del home, generalmente lo que usamos para la página principal es vistoso y probablemente podamos reducir su tamaño en las páginas internas.
• Si es posible mantener un background común entre todas las páginas, siempre se recomiendan fondos claros con tipografía oscura para no cansar la vista de los lectores.
• Indicarle a cada paso donde está, a donde puede ir y si es posible de donde viene (breadcrumbs)
• Ofrecer las opciones principales del sitio para que el usuario tenga a mano cuales son sus posibilidades de navegación.

Se trata de que página tras páginas los usuarios se familiaricen con el entorno y entonces puedan dedicarse a la exploración del contenido sin estar pensando en la orientación dentro del sitio.

La oferta heterogénea en cuanto al destino final (dentro del sitio o en otros sitios) debe ser explicitada, es conveniente que la oferta interna se encuentre agrupada en un sector (por ejemplo las botoneras del sitio) y la oferta externa se encuentre ubicada en otro sector (por ejemplo a la izquierda, pueden ser en forma de banners o no).

Evitar los callejones sin salida

Las páginas del sitio deben poseer la suficiente navegación para permitir al usuario que ha entrado seguir hacia las demás secciones del sitio y volver para atrás en su recorrido.

Es necesario que todas las páginas internas tengan enlace a la página principal del sitio y de existir también a la página anterior en la jerarquía, mientras más profundo sea el sitio, más probable es que el usuario se equivoque de ruta y lo más fácil sea volver hacia atrás, esto se logra a través de los breadcrumb, que cumplen la función de path y  van marcando el recorrido del usuario a través de las páginas jerárquicamente.

El logo del sitio que se encuentra en el header de cada página debe siempre tener un link a la home, salvo en la home misma. El mapa del sitio debe estar también referido desde todas las páginas al igual que el mail de contacto.

Evitar la sobrecarga informativa

Hay que tener en cuenta que demasiada información (textual, visual…) en una sola página confunde y agota al usuario. También la legibilidad del texto (tipo y tamaño de fuente, contraste entre el color de la fuente y el fondo…) es un factor muy importante al que prestarle especial atención, ya que por más importantes y valiosos que sean nuestros contenidos, de nada servirán si no pueden llegar a nuestros usuarios de forma clara, comprensible y descansada.

El balance entre las zonas blancas y las que tienen contenido debe estar equilibrado, El fondo blanco generalizado no permite una clara separación de las distintas áreas de la página (contenido, navegación, header, etc) . Si las interfaz no puede individualizarse, el usuario no podrá concentrarse en el contenido porque no lo puede separar de los elementos de navegación.

La función de búsqueda debe estar en un lugar preponderante

La búsqueda es muy importante dentro de cualquier sitio, gran parte de los usuarios de internet son search-oriented, eso significa que cuando entran a una página lo primero que hacen es expresar sus inquietudes en el campo de búsqueda. Por ello es indispensable que haya un buscador en la home page y demás página del sitio, en un lugar preponderante o visible y que el campo de texto tenga el ancho suficiente para que los usuarios puedan escribir cómodamente, esto significa al menos 25 caracteres.

Utilizar los títulos de las páginas

Los títulos de las páginas sirven de orientación al usuario tanto cuando está en primer plano como cuando queda en background, porque es lo que se muestra en la barra inferior del escritorio. Entonces lo óptimo sería que tenga información acerca de la página en donde se encuentra y del sitio que depende.

También sirven para aumentar el índice de findability de los buscadores.

Estructura de las páginas

Las páginas en occidente se estructuran de izquierda a derecha, de arriba hacia abajo, cuando los usuarios navegan un sitio siguen un patrón:

1. Primero se fijan en la parte superior izquierda de la pantalla,
2. Revolotean en esa área,
3. Luego, después de estudiar detenidamente la parte superior de la página, exploran
   más abajo con un barrido de izquierda a derecha.

Este patrón recomienda ubicar contenidos de la siguiente forma:

• En la parte superior izquierda se encontraría el logo de la organización y preferiblemente un slogan que describa el objetivo de la misma.
• Los elementos de navegación (barras) deben ubicarse de forma horizontal a continuación de la cabecera, de izquierda a derecha y / o a la izquierda de la pantalla
• En el centro superior la información de mayor importancia.
• En la izquierda y en la parte inferior, información de menor rango.
• Se pueden utilizar jerarquías para facilitar la exploración de la información:
  • títulos y subtítulos destacados
  • información relacionada concentrada en un mismo espacio
  • negrita, cursiva, etc., para enfatizar los contenidos
  • color para discriminar y distribuir informaciones

Los links deben ser reconocibles fácilmente

Los enlaces deben se identificados como tales a simple vista (colores definidos y uniformes en todo el sitio, subrayados si se encuentran insertos en un texto o si son títulos) y deben además indicar el estado en el que se encuentran (azul para los activos, violeta para los ya visitados), esto ayuda al usuario en su exploración de páginas con gran cantidad de información   ya que puede reconocer a simple vista los lugares por donde ya pasó.

El comportamiento se debe mantener también de forma estructural, eso significa que si se utiliza el enlace en el título en una parte del sitio, deberá respetarse esa norma para todo el sito.

Los enlaces que ocupan más de una línea deben ser reconocidos como una unidad. Las imágenes que acompañan a los enlaces deben tener el mismo comportamiento que ellos, o sea deben tener link. Los links del tipo: "hacer clic aquí"  deben ser evitados, no son accesibles y confunden a los usuarios sobre la información que encontrarán del otro lado.

No usar el color azul o subrayado para otro texto que no sea link. También hay que cuidar que no haya imágenes que parezcan enlaces y en realidad no lo sean, de aquí la necesidad de que los enlaces sean unívocamente distinguibles, para que el usuario no se la pase haciendo clic en toda la pantalla adivinando donde están los enlaces.

con respecto al target de los enlaces les recomiendo encarecidamente no hacer que se abran en una ventana nueva, ya que trae complicaciones tales como:

• deshabilita la función del botón "Atrás" que es uno de los métodos de navegación más utilizados por los usuarios que no tienen experiencia.
• además de que puede ser desconcertante para usuarios novatos que no pueden darse cuenta de que tienen más de una ventana abierta.
• Es una práctica que molesta a los usuarios, los que pueden decidir volver o no a nuestro sitio en base a su experiencia en el mismo, el usuario se sentirá agradecido hacia aquellos sitios que le dejen practicar libremente su derecho a navegar.

Uso de textos alternativos para las imágenes

Siempre que se introducen imágenes en una página se deben incorporar con el atributo "alt" para describirlas (si se define a través de un texto corto, si la explicación debe ser más amplia se utilizará el atributo "longdesc", que especifica una URL con el documento que contiene una descripción más exhaustiva de la imagen). Se pretende así que cuando las imágenes sean deshabilitadas el sitio pueda seguir siendo entendible, ya que si el sitio utiliza botoneras hechas en base a imágenes y si éstasn no tienen texto alternativo, cuando, por distintos motivos las mismas no carguen, gran parte de la estructura y navegación del sitio se perderá.

Utilizar tags y hojas de estilo apropiadamente

Se deben utilizar los tags de forma semántica cuando sea posible, es decir usarlos para la función que fueron creados y no para dar un formato particular a un documento ya que no ayudará a la comprensión del documento por parte de personas que no puedan verlo.

Por ejemplo:

• <em>Texto enfatizado</em>
• <strong>Texto con fuerte énfasis</strong>
• <cite>Texto citado</cite>
• ^{Texto en superíndice}
• _{Texto en subíndice}
• <abbr title=“significado” lang=“en”>abreviaturas</abbr>
• <acronym title=“significado” lang=“es”>acrónimos</acronym>
• h1, h2… h6 para los encabezados

Como verán los tags <b> (bold) e <i> (itálica) se reemplazan por <strong>  y <em> respectivamente, si bien no pasa nada si ponen b en lugar de strong,  o si ponen tags en mayusculas o no los anidan correctamente, porque la mayoría de los navegadores son bastante permisivos y hacen vista gorda a este tipo de errores, el problema reside en que el código no valida contra los estándares.

Enlaces recomendados:

• Guía de Evaluación Heurística de Sitios Web
• Top Ten Web Design Mistakes of 2005
• The Principles of Design
• Accessibility myths and misconceptions
• Simple Design Tips for Non-Designers
• Credibilidad en la web
• Eyetracking y estructuras de páginas web

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

• Prioridad I
• Prioridad II

1. Cada vez que un acrónimo o abreviatura aparezca por primera vez en un documento, debe ser especificada. (4.2)

Lo primero que deberíamos hacer es poder distinguir uno de otro, para ello recurrimos a sus respectivas definiciones en la Wikipedia:

Un acrónimo es un conjunto de letras formado por las iniciales de otras palabras. El término procede del griego, donde: akros es punta y onymos es nombre. Por ejemplo: URL (Uniform Resource Locator)

Una abreviatura es la representación escrita de una o varias palabras mediante una o varias de sus letras, a fin de que la palabras o las palabras en cuestión resulten más cortas en el texto.Como por ejemplo Mb. (Mega Byte).

Para mayores datos sobre diferencias pueden leer Abreviaturas y acrónimos en la web

Una vez que ya tenemos una noción de a qué grupo corresponde nuestra palabra debemos encerrarla en el tag correspondiente y usar el atributo title para describir su naturaleza por ejemplo:

Una <acronym title="Uniform Resource Locator">URL</acronym> es…

La casilla cuenta con 20 <abbr title="Mega Byte">Mb.</abbr>

2. Identifique el idioma principal de un documento. (4.3)

Esta recomendación se refiere a incluir en el tag html (el primer tag, el que abre el documento) el atributo lang que tendrá un valor referente al lenguaje en el que está escrito el documento.

Sirve para que los lectores de pantalla puedan interpretar la página con una correcta pronunciación y obviamente toda información semántica que le agreguemos a nuestros contenidos ayudará en un futuro cuando más funcionalidades estén implementadas para interpretarla.

<HTML lang="es"> ... </HTML>

En XML y XHTML el atributo se denomina xml:lang y utiliza los mismos valores.

3. Generar un orden lógico de navegación, para enlaces, controles de formularios y otros objetos. (9.4)

Esto implica que el usuario pueda desplazarse normalmente dentro de una página en el orden que propone la navegación aún si no cuenta con los dispositivos estándar, como por ejemplo el mouse. Para ello deben fijarse, mediante el código html, estructuras que puedan brindar una alternativa a la navegación convencional de los elementos activos. Una persona ciega, si no le entregamos una página que tenga sentido cuando el lector la traduzca, tendrá dificultades para entender lo que tratamos de transmitirle.

Este orden se puede estipular para que la persona se desplace por la página mediante el uso de la tecla tab, que le permitirá saltar de enlace en enlace o de campo en campo en el caso de ser un formulario.

Si bien esto se puede cumplir con un concienzudo diseño que ordene lógicamente los elementos de la página de la manera en que queremos mostrarlos, podemos ayudarnos mediante el atributo tabindex (se puede usar en los siguientes tags que respresentan elementos activos: a, area, button, input, object, select, y textarea.) se puede ayudar a fijar esa navegación.

El procedimiento comprende que se le asigne a cada elemento activo de la página el atributo tabindex con un valor positivo. Entonces el orden de navegación se dará desde el elemento con el tabindex más bajo hasta el que tenga el valor más alto. Luego seguirán aquellos que no tengan el atributo y finalmente los que tengan atributo disabled no serán tomados en cuenta.

<form action="" method="">
<input tabindex="2" type="text" name="user">
<input tabindex="1" type=" password" name="password">
<input tabindex="3" type="submit" name="ingresar">
</form>

En el ejemplo, si se usa el tab como método de desplazamiento, éste pasará primero por el tabindex 1, que es el campo user, luego el tabindex 2 que es el campo password y finalmente pasará al tabindex 3: el botón ingresar.

4. Brindar atajos de teclado para los links importantes y controles de formulario (9.5)

Aparte del orden de tabulación se puede incorporar otro atributo que permite el acceso a los elementos activos de la página: accesskey (que se utiliza en los siguientes tags: a, area, button, input, label, legend y textarea)

Accesskey permite realizar atajos de teclado a los elementos activos para que se puedan alcanzar con facilidad.

<a href="index.html" title="Acerca de la empresa" accesskey="A">Acerca de…</a>

En este ejemplo el usuario puede activar la letra A para ir al destino del enlace.

Por ahora no hay un estandar acerca de qué significan cada una de las teclas disponibles por lo que se recomienda brindar información sobre las asignaciones que se realizan.

5. Incluir barras de navegación en el sitio como mecanismo de navegación. (13.5)

Las barras de navegación son conjuntos de enlaces que permiten que el usuario acceda a los contenidos que ofrecemos en nuestro sitio, conviene entonces que sean facilmente reconocibles, que dispongan de un ordenamiento claro de la información y que se encuentren preferiblemente en un mismo lugar y con una sola estética a lo largo del sitio para su fácil reconocimiento por parte del usuario.

También se debe tener en cuenta la cantidad de ítems o categorías/secciones principales que contendría la barra, se recomiendan que sean pocas y concisas, si el sitio es muy grande, mejor presentar las categorías principales y que éstas sean lógicos contenedores de subcategorías/subsecciones que puedan llegar a presentarse, una buena regla a seguir es la de: The Magical Number Seven, Plus or Minus Two.

6. Incluir caracteres imprimibles, que no sirvan como link, entre los links contiguos. (10.5)
7. Identificar en conjuntos lógicos los enlaces relacionados (13.6)

La pauta 5 es lo que se denomina una pauta temporal, porque incluye la sentencia que dice que “hasta que las aplicaciones de usuario y ayudas técnicas interpreten claramente los vínculos contiguos…�? o sea es algo que hay que hacer porque la tecnología todavía no lo resolvió pero no perdamos las esperanzas. La pauta 6 también es temporal, o sea su uso se promueve hasta que el próximo cambio tecnológico resuelva la situación sin necesidad de realizar este tipo de adecuaciones.

Esto se aplica a las barras de navegacion principales de un sitio que son omnipresentes en todas sus páginas, entonces, un usuario que use lector de pantalla para interpretar una página debería siempre que ingrese a una nueva página releer las opciones de esa botonera. Es por ello que si agrupamos los enlaces en un conjunto lógico, como puede ser la barra de navegación, debemos identificarlo como una unidad. Al tratar los enlaces relacionados como un todo, podemos poner a disposición del usuario acciones simples que afecten a todo el conjunto, por ejemplo que puedan saltarsela en las páginas internas.

Cúales son las opciones que podemos brindarle a nuestros usuarios para que puedan saltearse este grupo de enlaces:

• Incluir un link al principio de la barra que sea "Saltar Navegación principal" y que le premita hacer justamente eso o sea un anchor que le permita llegar a donde comienza el contenido dentro de la misma página..
• Proporcionar una hoja de estilo para que los usuarios puedan ocultar el grupo de enlaces.
• usar el tag map que permita agrupar los enlaces, y también identificarlos con el atributo title

En el ejemplo, el tag map agrupa el conjunto de enlaces que forman la barra de navegación principal que aparece al top de cada página, tiene un atributo title que lo identifica como tal. El primer enlace del grupo sirve para llegar a un marcador ubicado al terminar el conjunto que ayuda a saltar la información que ya se conoce.

Los enlaces incorporan los caracteres imprimibles, para impedir que los lectores de pantalla viejos lean los enlaces adyacentes como un único enlace, y también para dar una distinción visual que pueda ayudar a los usuarios a diferenciar los enlaces a simple vista.

<map title="Barra de navegación">
[ <a href="#salto">Saltar Barra de navegación</a> ]
[ <a href="prueba1.html">Sección 1</a> ]
[ <a href="prueba2.html">Sección 2</a> ]
[ <a href="prueba3.html">Sección 3</a> ]
[ <a href="prueba4.html">Sección 4</a> ]
[ <a href="prueba5.html">Sección 5</a> ]
</map>
<h1><a name="salto">Título del texto del sitio </a></h1>

8. Las opciones de búsqueda deben permitir diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias (13.7)

Si se incluye una búsqueda en el sitio, qué cosas se deben hacer para brindar al usuario una interfaz de búsqueda que le sea útil:

• Se debe ofrecer al usuario interfaces de búsqueda en todas las páginas del sitio.(preferentemente con la misma ubicación y el mismo estilo, para que el usuario pueda ubicarla en todas las páginas.
• Debería contar con mecanismos para la búsqueda que facilitaran las acciones de los usuarios, por ejemplo en caso de que la búsqueda resultara nula, ofrecer otras alternativas, información sobre cómo ampliar las posibilidades de la búsqueda, etc.
• Un campo de texto lo suficientemente ancho como para que permita ingresar palabras largas o varias palabras sin que se oculten parte de las mismas para que el usuario pueda ver la sentencia completa y corregirla si así lo dese, muchos usuarios no miran la pantalla cuando escriben con el teclado, sino que lo hacen una vez que terminaron de tipear la oración.
• Incluir una página para realizar búsquedas avanzadas. Es mejor agrupar las opciones avanzadas en una página aparte, accesible desde el cuadro de diálogo de búsqueda que está presente en todas las páginas para aquellos usuarios que necesitan refinar o ampliar la búsqueda más allá de las opciones por defecto que ofrece la búsqueda simple.

9. Ubicar la información destacada al principio de los encabezamientos, párrafos, listas, etc. (13.8)

Los encabezados, títulos, y descripciones de los enlaces deben ser claros y precisos, ya que por ejemplo estos últimos puden ser leídos fuera de contexto.

• Los encabezados deben ser útiles para describir la información que contienen en pocas palabras que orienten al usuariio para que sepa si le sirve o no leer el artículo.
• En una lista de enlaces por ejemplo, que es una posibilidad que ofrecen los lectores de voz como por ejemplo el Jaws. Entonces la idea es presentar la información lo más clara y unívoca posible, de nada sirven los Click aquí o los Leer más ya que sacados del contexto no se sabe a ciencia cierta a dónde puede conducirnos. Podemos ayudarnos del atributo title para el tag a que permite incluir mayor información del contexto al cual nos lleva.
  <a href="pagina1.html" title="Ir a la sección 1: Cómo ingresar" >Sección 1</a>




• Tener en cuenta el principio de la pirámide invertida, según el cual cuando se escribe para internet, aparte de un título claro, se comienza con la conclusión en un resumen corto y se va agregando información gradualmente, de modo que los lectores puedan tener una idea global del contenido incluso si no lo leen entero.
• Los elementos estructurales tales como títulos, subtítulos, párrafos, citas, (h1 a h6, p y cite) deben estar marcados correctamente porque esto es útil para las personas que utilizan lectores de voz, ya que tienen la posibilidad de ir saltando de marcador en marcador a través de una página, para ayudar mejor a este tipo de navegación también se puede hacer lo siguiente:
  • Desarrollar un concepto principal por párrafo.
  • Evitar el uso de palabras no comunes (jerga, etc) que no estén descriptas en el documento y alentar el uso de las comunes, manejando un lenguaje coloquial, más entendible para los usuarios, evitando también frases o estructuras complicadas.

10. Incluir presentaciones gráficas o auditivas cuando facilite la comprensión del contenido (14.2)

Cierta información es conveniente presentarla acompañadad de gráficos o sonidos que complementen en concepto. Está comprobado que la información sobre procesos o procedimientos parece ser mejor comprendida cuando se utilizan animaciones, gráficos e infografías para explicarlas. De esto la gente de Eyetrack III hizo un estudio

Ejemplos de multimedia que complementan al texto:

1. Un esquema de los datos complejos, tales como las cifras de negocios del año fiscal anterior.
2. Una traducción del texto a una presentación animada en lenguaje de señas. El lenguaje de señas es muy diferente de los idiomas verbales. Por ejemplo, algunas personas que pueden comunicarse a través del lenguaje de señas americano, no son capaces de leer inglés americano.
3. Los sonidos pre-grabados de música, discursos hablados o efectos sonoros pueden también ayudar a los no-lectores que pueden percibir presentaciones auditivas. Si bien el texto puede convertirse en discurso a través del sintetizador de voz, los cambios del tono de la voz del discurso grabado proporcionan información que con el sintetizador de voz se pierde.

11. Preparar la información para que los usuarios puedan recibirla de acuerdo a sus preferencias de idioma, formato o tipo de contenido. (11.3)

Esta pauta se divide en 2 partes, por un lado propone mejoras que se pueden realizar sin mucho esfuerzo tales como:

• Proveer enlaces a diferentes versiones del contenido ofrecido, por ejemplo en otros idiomas.
• Usar negociación del contenido para proveer al usuario del contenido que solicita, por ejemplo sergún el idioma que lo representa.
• Indicar tanto el tipo de contenido como el idioma en la información cuando se disponga de estos datos, esto se puede hacer a través de los atributos type y hreflang.
  • hreflang es un atributo del tag a que indica el idioma con que el usuario se va a encontrar si sigue el link. El valor de este atributo está dado por el RFC1766 que especifica los identificadores para cada lenguaje. Por ejemplo: en para inglés fr para frances, es-ar para español argentino, etc.
  • title ayuda a describir mejor el destino del enlace que lo contiene.
    <a href="http://www.ietf.org/rfc/rfc1766.txt" hreflang="en" title="Request for Comments 1766">RFC1766</a>

Otras premisas que se puede adoptar para brindarle al usuario información de una forma que pueda comprender explota facilidades tecnicas que aportan los CSS en su revisión 2, como por ejemplo:

• Las propiedades auditivas se utilizan para entregar información a usuarios que utilizan lectores de voz de manera parecida al tipo de letra que proporciona información visual. es decir utilizar las voces para recalcar enfasis, distinguir títulos de párrafos, enfatizas puntuación, etc.
• Se puede tambien diseñar hojas de estilo para mostrar documentos en distintos dispositivos, a través de la regla @media, por ejemplo para impresos, para braille, sintetizadores de voz, etc. Existen muchos tipos de media configurable en las CSS como ser aural para sintetizadores de voz, braille para este tipo de dispositivos tactiles, print para el estilo de impresión. handheld para dispositivos portátiles, tv para televisión, etc. Ejemplo:

  @media print { h1 { color: #FF0000; }}
@media screen { h1 { color: #000000; }}

12. Diferenciar y transmitir información acerca de la composición de los documentos (13.9)

Un documento puede representar más de una página, puede ser un libro que esté dividido en capítulos, o puede ser un libro que sea parte de una colección también por ello, y como no podemos prever en donde ingresarán los usuarios a nuestras páginas debemos agregar a nuestro contenido información que nos permita presentarlo como un paquete coherente.

Se puede usar el metadato link para agregar este tipo de información en las páginas. ayuda a describir la estructura de navegación que le proponemos al usuario con respecto a un documento en particular. Por ejemplo si nuestros usuarios ingresaron a la página por un buscador y cayeron en el capítulo 7 del libro, ésta página podría tener la siguiente meta información

<head>
<title>Chapter 7</title>
<link rel="Index" href="index.html">
<link rel="Next" href="chapter8.html">
<link rel="Prev" href="chapter6.html">
</head>

También podemos utilizar documentos empaquetados para que puedan ser descargados y leídos sin conexión, se utiliza para ello programas de compresión como ser zip, tar, rar, etc.

13. Permitir saltar sobre un ASCII art de varias líneas. (13.10)

Siempre antes que usar ASCII art (dibujos hechos a base de combinación de caracteres), es preferible utilizar imágenes, ya que a estas se le puede incluir información a través de la etiqueta alt, pero puede darse que la finalidad sera mostrar el ASCII, entonces en ese caso se tiene que brindar un link (anchor) para que el usuario pueda saltar el dibujo y en caso que el dibujo proporcione información que enriquezca el contenido, se puede usar el atributo longdesc para brindar una descripción más detallada del gráfico. Por ejemplo:

<a href="#salto">Saltar ASCII art</a>

        ,,
  ___(  )___
 /            \
/\/\/\||/\/\/\
        ^^

<a name="salto">Contínua texto despues del dibujo.</a>

14. Incluir caracteres por defecto en los cuadros de edición y áreas de texto de los formularios. (10.4)

Esto se pide hasta que las aplicaciones de usuario puedan renderizar correctamente los campos vacíos. Sobre todo el tipo textarea que es basicamente un campo de texto multilínea y necesita de una frase para poder ser interpretado correctamente, como se ve en el código:

<form action="">
<textarea name="comentario" rows="20" cols="80">Ingrese aquí su comentario</textarea>
<input type="submit" value="Enviar" / >
</form>

15. Incluir enlaces de texto redundantes para las zonas activas de los mapas de imágenes (1.5)

Aquí nos encontramos con otra pauta estilo: "hasta que las aplicaciones de usuario…."

Toda aquella información no textual (imágenes, applets, sonidos, presentaciones multimedia, etc.) deberán tener información alternativa que cumpla la función que transmitir los datos equivalentes en formato textual. (a través de alt y longdesc)

Cuando incluimos en una página un mapa de imagen client.-side también deberemos brindar esa información en modo textual, esto se logra mediante la incorporación de enlaces de texto redundantes para cada parte del mapa. Esto se hace a través del tag object que se debería mostrar cuando no se puede mostrar el mapa de imagen.

<object data="imagen1.jpg" type="image/gif" usemap="#map1">
<map name="map1">
[<a href="index.html" shape="rect" coords="0,10,16,25">Índice</a>]
[<a href="pagina1.html" shape="rect" coords="10,20,26,35">Página 1 </a>]
[<a href="pagina2.html" shape="rect" coords="24,30,50,60">Página 2 </a>]
</map>
</object>

16. Proporcione resúmenes de las tablas (5.5)
17 y abreviaturas para las etiquetas de encabezamiento. (5.6)

Proporcione un título mediante el tag caption que se ubica en la estructura de la tabla y sirve para describirla como se observa en el ejemplo:


<table>
  <caption>Acrónimos de uso común en tecnología</caption>
  <thead>
    <tr>
      <th>Siglas</th>
      <th>Significado</th>
    </tr>
  </thead>
  tbody>
    <tr>
      <td>P2P</td>
      <td>Peer to peer</td>
    </tr>
    <tr>
      <td>WAP</td>
    <td>Wireless Application Protocol</td>
    </tr>
    <tr>
      <td>LDAP</td>
      <td>Lightweight Directory Access Protocol</td>
    </tr>
  </tbody>
</table>


También se puede utilizar el tatributo title del tag table para una descripción de pocas palabras .

El atributo summary ofrece un resumen de las relaciones entre celdas por ejemplo un valor para la tabla anterior sería:

summary="tabla que presenta las siglas de un acrónimo y su significado"

Es particularmente útil cuando presentamos tablas de doble entrada También puede servir para incorporar la tabla dentro del contexto del documento.

18.Proporcionar texto lineal alternativo para todas las tablas que maquetan texto en paralelo, en columnas de palabras. (10.3)

Cuando se utilizan las tablas para maquetar información es muy facil la lectura de las mismas pudiendo ver la página en frente, del monitor, pero por ejemplo los lectores de voz viejos tiene problemas para interpretar columna por columna y hacen una lectura lineal, esto conlleva a una interpretación erronea de la información. Cuando las tablas no son de maquetación sino que contienen datos la información también puede desorganizarse y tornarse incomprensible.

Entonces para especificar un orden de recorrido de las columnas se utiliza el atributo dir, el cual especifica una secuencia de recorrido de las columnas, esto puede cambiar con el idioma de la página que especifica un sentido de lectura. Los valores del atributo dir son rtl (right to left) o ltr (left to right)

19. Cree un estilo de presentación que sea coherente en todas las páginas (14.3)

Un mismo look & feel a través de todo el sitio le permite al usuario saber que ptodavia se encuentra en el mismo sitio, que las estructuras se mantienen de página en página para su familiarización, comodidad y rápido movimiento entre las páginas.

Por otra parte tenemos recomendaciones sobre el uso de las CSS, si bien tienen gran potencialidad, también pueden ser peligrosas por su naturaleza diversificada, para ello tenemos que tenerlas bajo nuestro control, estos 3 ítems pueden ayudarnos con este tema:

• Utilizar pocas hojas de estilo, documentarlas y mantener la estructura actializada.
• Evitar las hojas de estilo incrustadas en las páginas si los estilos se van a repetir para otras páginas.
• La estructura de classes, ids y elementos debe ser coherente, y repetible a través de las hojas de estilo utilizadas.

Uff, fue largo, pero valió la pena.

Hasta la próxima

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

Introduce el concepto de nodo como sinónimo de tipos de contenido, cualquier recurso que se ingrese al sistema pasa a ser un nodo, que puede ser variable e incluir artículos, historias, posts, encuestas, imágenes, libros colaborativos, reseñas, recetas, etcétera. Este nuevo concepto nos permite estandarizar la información asignándoles las mismas características a distintos objetos y la posibilidad de tener toda la información catalogada.

La clasificación de los nodos es un tanto arbitraria y está al servicio de los usuarios/administradores de contenidos que pueden construir los que necesite.

Taxonomías

El sistema de taxonomía de Drupal es robusto y potente, el contenido se organiza en categorías que se arman a través del módulo taxonomías, el cual permite generar vocabularios controlados con términos que pueden ordenarse jerárquicamente y asociarse a un tipo de nodo en particular si hiciera falta. Se puede configurar que un nodo pueda ser clasificado bajo uno o múltiples términos de un vocacbulario, flexibilidad que agradecemos quienes administramos sistemas de contenidos rígidos.

Modularización del crecimiento

Si bien las características básicas de Drupal son suficientes como para lanzar un sitio completo, el core incluye: administración de usuarios, páginas, vocabulario, comentarios y sindicación. Su potencialidad reside en su estructura modular que permite ser extendida y customizada a gusto y placer del administrador para distintas funciones por medio de módulos de fácil instalación. Entonces este multifacético CMS nos permitiría armar desde un blog personal hasta una intranet corporativa, pasando por bibliotecas digitales, wikis, sitios de e-commerce, álbumes de fotos y hasta recetas de cocina….

Estos módulos son desarrollados por una gran comunidad que colaboran para el crecimiento de esta herramienta. Algunos de los más destacados a mi gusto y que se los puede encontrar en la sección módulos de Drupal son:

• AdSense: permite mostrar fácilmente el servicio de publicidad de Google "Adsense".
• Book Review: sirve para publicar reseñas de libros, como si fuera un nodo más, ya que provee campos específicos para esta tarea
• Captcha: añade al sistema de registro de usuarios una validación manual (copiar el código de una imagen distorsionada) para evitar el uso masivo por parte de robots, con fines inescrupulosos.
• Daily: ofrece un nuevo tipo de nodo que sirven para mostrar tiras cómicas o frases diarias. El nodo está asociado a una fecha y esto permite su navegación a ediciones pasadas a través de un calendario.
• E-Commerce: serie de módulos que permite crear una herramienta de e-business.
• Folksonomy: una API para armar clasificaciones simples no-jerárquicas para los nodos, como del.icio.us.
• Font size: provee al usuario la funcionalidad de poder cambiar el tamaño de fuente usado mediante CSS y javascript
• Highlight: resalta las palabras clave en los resultados de una búsqueda.
• Live Discussion: permite mostrar en una página un bloque con la lista de los comentarios recientes.
• Organic groups: permite a los usuarios crear y administrar grupos de personas.
• Photo album: permite mantener múltiples álbumes de fotos.
• Project: herramienta de seguimiento de proyectos con notificaciones vía e-mail.
• Recipe: módulo que permite el intercambio de recetas de cocina.
• Scheduler: permite incorporar capacidades de publicación o despublicación automática para los distintos nodos.
• Site map: permite construir de forma automática un mapa del sitio que puede desplegar información customizada.
• Spam: herramientas para manejar de forma automatizada el spam.
• Subscriptions: permite a los usuarios suscribirse para recibir notificaciones sobre nuevo contenido o actualizaciones en el sitio.
• Syndication: permite centralizar en una página todos los RSS que genera Drupal.
• Video: permite incluir videos en formato QuickTime en el sitio.

Y muchas otras cosas más….

Otras funcionalidades

• Sistema de cache de contenidos
• Versionador de contenidos
• URL Alias:
  permite la asignación de direcciones legibles por buscadores (que se traduce en mejor ranking) y por humanos para mayor usabilidad al ser más sencillos de recordar..
• Fácilmente traducible a otros idiomas y soporte multilingüe
• Instalación centralizada para múltiples sitios (hasta de distintos formatos)
• Cumple con los estándares de XHTML del W3C
• Cuenta con una herramienta de foro
• Soporte de Blogger API para publicación remota
• Estadísticas de referrers, popularidad del contenido, etc.
• Encuestas mediante uno de sus módulos se pueden generar encuestas on-line .
• Libro Colaborativo como un wiki, permite la creación de un proyecto en donde muchos usuarios contribuyen en su construcción.
• Agregador de noticias para incluir links a contenidos otros sitios. Con sistema de cache y configuración de los tiempos.
• Customización de Themes: brinda la base para ampliar y customizar las plantillas del sitio.

Crítica

En cuestiones de accesibilidad, Drupal parece llevarse todas las palmas dada su flexibilidad para desarrollar las plantillas y su uso intensivo de CSS y XHTML, la responsabilidad encaja del lado del administrador.

Si hablamos de usabilidad, podemos decir que la gente de Drupal tiene gran conciencia y poco a poco van mejorando la herramienta. Tienen una lista de desarrolladores donde se discuten este tipo de temas, hace poco Jeffrey Veen escribió un artículo sobre la usabilidad de los CMS open source, la comunidad de desarrolladores de Drupal acusó recibo, pusieron las cartas sobre la mesa con una propuesta audaz. y Veen respondió, en cierto sentido tiene razón Jeffrey, pero hubiera sido lindo ver su nombre trabajando para la comunida Open Source.

Con respecto a lo malo, creo haber leido ya esta crítica en otros sitios que han migrado, y luego de mi experiencia, no puedo hacer otra cosa que afirmarla. Si bien no es un sistema integralmente complejo, cuesta trabajo entenderlo de entrada, sobre todo los que estamos acostumbrados a sistemas más rígidos como MovableType, Pmachine o incluso WordPress. Hay que tomarse el trabajo en serio y empezar a averiguar cómo eso de la taxonomía, de los nodos, los módulos, los themes, permisos, etc, etc. Pero mientras vamos superando los escollos del camino se va abriendo delante nuestro un horizonte de posibilidades muy vasto.

Hasta la próxima.

Enlaces recomendados

• Drupal user’s guide
• Making A Better Open Source CMS

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

Luego de las últimas jornadas de accesibilidad del Sidar, me quedó la sensación de que: o las personas que no tienen mucha o nula experiencia en el tema no entendieron nada, o nosotros no terminamos de explicarnos para que puedan entendernos. El principal obstáculo que encontré cuando charlaba con la gente entre disertación y disertación fue la certeza de que un diseño accesible era despojado, de creatividad limitante, tirando a sólo texto y que aparte era más trabajoso y por ende, mucho más caro.

A ver si podemos echar un poco de luz sobre el tema. La accesibilidad bien entendida no limita el diseño visual de las páginas, por supuesto, dentro de límites razonables. Accesibilidad es sinónimo de elementos de la interfaz, elementos que subyacen, elementos que por su propia naturaleza son la mayor parte de las veces invisibles.

¿Cómo nos damos cuenta si estamos frente a un sitio que es accesible a simple vista? Porque lo publican, ni más ni menos. Un sitio despojado puede no ser accesible y un sitio gráficamente exuberante puede serlo, Si no me creen le pido que visiten estas opciones que ofrece CSSZenGarden:

• Somewhere
• The Way Zen Works
• Neat & Tidy

Todas ellas cumplen con las especificaciones AAA del W3, en idioma sencillo: son re-accesibles. Como pueden ver, un diseño accesible no se caracteriza por ser despojado, sino que observa pautas más elementales y que a simple vista no influyen en el diseño, nombraré algunas de ellas para que se den una idea:

• Utilizar texto alternativo para los elementos multimedia o no textuales.
• Uso de hojas de estilo para controlar la disposición y la presentación del sitio.
• Organización jerárquica y semántica de los documentos para que puedan ser leídos deshabilitando la hoja de estilo.
• Insertar el resumen e identificar los encabezados de filas y columnas en las tablas.
• Generar un orden de tabulación lógico para los enlaces.
• Proporcionar Accesskey para los enlaces importantes.
• Usar lenguajes que validen contra las especificaciones del W3 (HTML, XHTML, CSS, etc.)
• Marcar los cambios del idioma
• Subtitulado de audio y video

Estas pautas no influyen de manera determinante en el diseño visual de un documento, pero si lo hacen en la calidad de la interacción que brinde el sitio que las incluya. Un proyecto planteado desde un principio accesible requiere un poco más de trabajo y experiencia que uno que no tenga en cuenta esta premisa, pero también se reducirán los costos y se mejorará el producto, siempre es mejor hacerlo bien que hacerlo dos veces, aunque esta verdad no esté muy difundida.

Crear una versión de paralela del sitio no es beneficioso para nadie. Tener 2 versiones de un sitio en línea representa una duplicación de recursos, en cuestiones de marketing podemos agregar que les está negando a los usuarios del sitio principal las mejoras que implementa la accesibilidad en un sitio y de las que todos podemos disfrutar.

Que una página paralela sea primordialmente texto no se garantiza que sea accesible, por lo tanto las revisiones que se ahorra en el sitio principal las debe aplicar al sitio paralelo. Por no mencionar el sentimiento de malestar que genera en los usuarios que necesitan de la accesibilidad como parte de la calidad de la experiencia que tienen a sentirse marginados (“Como en un Ghetto”) puntualizó sagazmente Carlos Neri en su presentación en las VIII Jornadas de Accesibilidad del Sidar).

La accesibilidad representa también un paso en la modernización de las
estructuras, ya que las pautas de accesibilidad fomentan el diseño a través de los estándares en la web, los cuales a su vez tienden hacia una convergencia futura que nos hallará a todos sumergidos en la Web Semántica. (Esperemos…)

El diseño accesible, al basarse en los estándares web, incrementa los beneficios al bajar los costos de un sitio web, traducido en la disminución del peso de las páginas (hasta en un 50%) que a su vez bajan el ancho de banda usado y también permite una navegación del sitio a mayor velocidad.

También está el tema de las personas que se conectan a la web a través de múltiples dispositivos, además de aquellos que acceden con un ordenador y usan windows con internet explorer, hay que tener en cuenta que cada vez son más las que usan otro sistema operativo, u otro browser, que usan distintos periféricos como ser teclados braille, pulsadores, o que directamente interactúan mediante otro tipo de dispositivos: teléfonos móviles, PDA, etc. El respeto de los estándares abre las puertas de nuestro sitio a una audiencia ampliada.

Luego tenemos el tema de la reducción de los tiempos de mantenimiento por la centralización de la visualización de las páginas a través de un esquema de hojas de estilo.

Lejos de ser minimalistas (como he sentido decir por ahí) los diseños accesibles son ricos en información para múltiples audiencias y pueden albergar un diseño visual opulento. Las ventajas, algunas descriptas más arriba, son numerosas y convincentes. Además el tema del diseño para todos está creciendo y a su paso va concientizando a la población. Sólo me queda una pregunta: ¿Qué esperan?

Voy a darles una mano para arrancar. Comiencen leyendo las pautas de accesibilidad al contenido web

Hasta la próxima.

Enlaces recomendados:

• Accessibility myths and misconceptions
• La accesibilidad mejora la usabilidad y viceversa
• Auxiliary Benefits of Accessible Web Design
• Guía casera y personal de aplicación de las pautas de accesibilidad
• Guía casera y personal de aplicación de las pautas de accesibilidad (Parte II)
• Guía casera y personal de aplicación de las pautas de accesibilidad (Parte III)

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

Pautas de accesibilidad para la prioridad x

Contraste para las imágenes

Las combinaciones de colores en las imágenes deben poseer el suficiente contraste para que puedan ser percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro.

Usar marcadores en vez de imágenes para transmitir la información

En vez de presentar información en formato imagen, se trata de hacerlo con texto y resolver el diseño con hojas de estilo, mejor aún en el caso de que existiera un lenguaje acorde para transmitir la información se debe emplear éste, es decir una fórmula matemática en vez de presentarse como una imagen para que no pierda su formato, podría ser representada utilizando MathML.

Documentos validados por las gramáticas formales publicadas.

Crear un documento que sea válido tiene que ver con el DOCTYPE del documento. EL DOCTYPE es la primera línea de texto que figura en el código del archivo y sirve para indentificar y validad la estructura del mismo contra estándares prefijados, por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Indica que el documento que lo contiene está hecho conforme a los estándares de HTML 4.01 que se valida contra la DTD loose.dtd, la cual contiene la semántica de la especificación y se encuentra hosteada en el W3CSi la declaración del DOCTYPE es correcta, permite al navegador del usuario conocer e interpretar la estructura del documento. El W3C cuenta con un servicio de validación.

Uso de las hojas de estilo (CSS) para controlar la maquetación y la presentación.

Es aconsejable usar CSS para diseñar los contenidos en vez de usar imágenes ya que de esta forma los contenidos estarán disponibles para más usuarios, sobre todo aquellos que no utilizan los dispositivos estándares para acceder a la web. Por ejemplo, CSS puede manejar las sangrías, el centrado del texto, los espaciados entre letras y palabras, la dirección del texto, etc. Entonces: En vez de
definir en el HTML.

<div align="center"><h1>Titulo 1</h1></div>

Lo hacemos en nuestra hoja de estilo:

h1 { text-align: center;}

A través de las hojas de estilo se puede controlar la posición visual de los elementos de un documento independientemente del lugar que ocupen dentro del documento, esto se logra utilizando las propiedades: "floa"", "position", "top", "right", "bottom" y "left". El lugar que ocupen dentro del documento debería responder al orden en el que se mostrarían los elementos sin la hoja de estilo y con ella se pueden posicionar los elementos de acuerdo a cualquier tipo de diseño visual.

El uso de hojas de estilo permite que los usuarios definan sus propios estilos y a través de facilidades que ofrecen los navegadores los impongan a los del autor, de esta forma pueden tener control total sobre contraste de colores o tamaños de letras para navegar los sitios con comodidad.

Usar unidades de medida relativas para los elementos de un documento

Esta pauta indica que se deberían usar medidas relativas ("em" o % en vez de "px")y porcentajes para definir los elementos y posiciones dentro de un documento, en vez de medidas absolutas. (Si ya se que yo no lo cumplo, pero es más que nada por desconocimiento de cómo funcionan las medidas relativas en distintos ambientes prometo migrar en cuanto lo tenga bien estudiado). Por ejemplo: En vez de utilizar px o pt:

<STYLE type="text/css">
	h1 { font-size: 11px; }
</STYLE>

Usamos medidas relativas para el tamaño de la letra:

<STYLE type="text/css">
h1 { font-size: 10em; }
</STYLE>

Los elementos de encabezado deben transmitir la estructura lógica de acuerdo con la especificación.

HTML nos da la posibilidad de estructurar contenidos claramente a través del uso de las etiquetas de encabezamiento (h1, h2, h3, h4, h5 y h6) los cuales deberían guardar un orden lógico (primero h1, luego h2 y así sucesivamente) no debiendo saltarse ninguno de estos niveles.

También hay que considerar que no está bien utilizar los encabezados para algún tipo de efecto de diseño que no sea el de mostrar un encabezado, por ejemplo no usar h1 para agrandar un texto que llame la atención al usuario. Un ejemplo del buen uso de las etiquetas de encabezamiento sería:

<h1>Título del libro</h1>
<h2>Título del capítulo</h2>
<h3>Título de la sección</h3>

Listas e ítems de las listas marcados correctamente

Las listas se utilizan para facilitar la estructuración de la información dentro de un documento, esta información puede no tener un orden determinado, para lo cual usamos viñetas para mostrarla o pueden responder a un orden, por ejemplo una receta de cocina, en ese caso utilizamos números. Este tipo de recurso, además puede contener niveles y subniveles de información, su visualización se facilita a través de listas anidadas, con hojas de estilo se podrá usar en un futuro el elemento before, el cual inserta un contenido x antes del contenido real del elemento.

Les dejo el ejemplo que encontré en el documento con las técnicas del W3C, yo no lo pude hacer andar, igualmente hasta que los navegadores no interpreten este tipo de elementos no se podrán implementar con éxito en los desarrollos web:

<STYLE type="text/css">UL, OL { counter-reset: item }LI { display: block }LI:before { content: counters(item, "."); counter-increment: item }</STYLE>

Este pedazo de código servirá para cuando anidemos listas, los subniveles de las mismas se formen mediante números compuestos por ejemplo el primer nivel será 1, el segundo 1.1, el tercero 1.1.1 y así sucesivamente, ya que así entregan mayor información que las listas anidadas con números simples, que son los que vienen por defecto en el código. Como esto aún no se arma en forma automática, lo que hay que hacer es especificar el nivel de anidamiento mediante información contextual, ¿Cómo? Vamos a utilizar de ejemplo las listas que arma el W3 en sus especificaciones, es un poco retorcido pero muy efectivo, en la hoja de estilo le indican que no muestre los números de las listas que vienen por defecto y los agrega a mano, de esta manera la comprensión de las listas se enriquece tanto para los usuarios que lo visualizan en pantalla como aquellos que acceder a la infomacióna través de un lector de pantalla.

Por el lado del CSS:

<STYLE type="text/css">
  OL {list-style-type: none}
</STYLE>

Por el lado del HTML:

<ul><li>1 Document structure and metadata<li><ul><li>1.1 Metadata</li><li>1.2 Structural grouping</li></ul> </ul>

No usar los tags de citas para formatear textos

Este punto refiere a la correcta utilización de los tags BLOCKQUOTE y Q. El tag Q se utiliza para citas cortas y el efecto visual es el de imprimir las comillas dobles al texto que anida. El tag BLOCKQUOTE sirve para anidar citas en bloque, se usa para diferenciar párrafos que son citas de párrafos comunes. El efecto visual que imprime este tags es que indenta los textos que contiene.

Asegurar que los contenidos dinámicos sean accesibles

Esta pauta se refiere a darte al usuario control sobre los eventos que suceden o pueden sucederse dentro de la página, entonces hasta que los programas que utilizan nuestros usuarios para acceder a una página web permitan este control, se recomienda evitar:

1. El parpadeo del contenido.
2. Los movimientos en las páginas.
3. Actualizaciones automáticas de las páginas.
4. Redirecciones automáticas (éstas se recomienda hacerlas para que se ejecuten desde el servidor y no desde la página web)
5. Nuevas ventanas (pop ups) o cambiar el foco de la ventana actual sin permiso del usuario.

Utilizar tecnologías W3C

basicamente utilización de HTML, XHTML, CSS, etc…

Evitar características desaconsejadas por las tecnologías W3C.

En referencia a este punto, podemos señalar que hay que tener cuidado al utilizar tecnologías W3C en relación a versiones que pueden estar obsoletas por ejemplo, en HTML 4.0 el tag FONT ya no se usa más en su lugar su función se realiza desde la hoja de estilos. Otro ejemplo puede ser la utilización de una fuente que no sea estándar en las máquinas de los usuarios.

Dividir los bloques largos de información en grupos más manejables.

Este punto se materializa en las siguientes acciones:
Utilizar el tag FIELDSET para agrupar controles de formulario en
unidades semánticas y describirlas con el tag LEGEND. También se
recomienta el uso de LABEL y TABINDEX para completar la accesibil idad del formulario tal como se puede ver en el siguiente cuadro.

No recomendado

<form action="" method="post">   <input type="text" id="nombre" tabindex="1"><input type="text" id="apellido" tabindex="2"><input type="text" id="empresa" tabindex="3"></form>

Recomendado

<form action="" method="post"><fieldset><legend>datos personales</legend><label for="nombre">nombre: <input type="text" id="nombre" tabindex="1"></label> <label for="apellido">apellido: <input type="text" id="apellido" tabindex="2"> </label> </fieldset>   <fieldset> <legend>datos laborales</legend><label for="empresa">empresa: <input type="text" id="empresa" tabindex="3"> </label></fieldset></form>

Otras acciones dentro del mismo concepto son:

1. Usar el tag OPTGROUP para organizar listas de opciones de menú en los formularios.
2. Usar tablas para datos tabulares, describirlas con CAPTION, agrupar filas y columnas con THEAD,
3. TBODY, TFOOT y COLGROUP.
4. Anidar listas con UL, OL y DL.
5. Usar H1 – H6 para estructurar documentos y separar tramos largos de texto.
6. Separar los párrafos con el tag P.

Identificar el objetivo de cada enlace.

El texto que contiene el enlace debe ser significativo y corto, para que pueda ser identificado univocamente fuera de su contexto, por ejemplo cuando un lector de pantalla ennumera solamente los enlaces que puede legar a tener una página. No deben usarse frases del estilo: "Haz click aqui" o "Información del producto" ya que solas no brindan mucha ayuda. También se puede enriquecer la información del enlace con el atributo title del tag A que permite agregar mayores datos que se verán cuando el usuario pase el mouse sobre el enlace, como en el texto alternativo de las imágenes. Un ejemplo de su uso sería:

<a href="aquivalaurl.html" title="descripción extendida">Aqui va el texto del  enlace</a>

Utilizar los metadatos para agregar información de tipo semántica al sitio

Los metadatos son datos estructurados que describen la información sobre un recurso, más claramente son "datos sobre los datos" y sirven para describir los recursos de forma tal que sean más facilmente localizables. ¿Cuales son los metadatos que me provee el lenguaje HTML
para describir mis recursos?:

• TITLE (título del recurso)
• ADDRESS se usa para dar información de contacto
• META este tag especifica una serie de metadatos que pueden ser utilizados para la descripción de un recurso, tales como palabras clave, descripción, fecha, datos del autor, de copyrigth, etc. También se pueden incluir otros estándares que amplían estos metadatos, como por ejemplo Dublin Core.
• LINK este tag ayuda a describir los mecanismos y organización de la navegación del documento y adjuntar documentos, como por ejemplo distintos tipos de hojas de estilo que ayuden a la comprension de la información dependiendo del contexto en el que es visualizada.

Brindar información adicional sobre la estructura del sitio

No hay mucho para destacar aquí salvo la importancia de contar con un mapa del sitio que simplifique en un vistazo la estructura del sitio a nuestros visitantes.

Usar los mecanismos de navegación de forma coherente.

Este punto destaca la importancia de mantener un estilo y ser consecuente con el mismo, colocar los elementos de navegación al alcance del usuario y siempre en los mismos espacios, es decir las páginas deben contar con una estructura simple y ordenada, que se repita a lo largo
de todo el sitio, las barras de navegación, los contenidos, la publicidad, etc, las opciones de búsqueda deben situarse en el mismo lugar siempre.

Y si sen usan…

Ahora, si todo lo que se dijo antes no sirvió, las pautas tienen su parta blanda que incluyen lo que se debería hacer si el autor no pudo con su genio e hizo uso de los elementos prohibidos:

• Si se usan tablas: no las utilicen para maquetar la info please! Ahora si no pudo aguantarse y la utilizó para maquetar… no usar los marcadores estructurales para realizar un efecto visual de formato por ejemplo TH es un tag que resalta y señala una celda que contiene el encabezamiento de una tabla y no debe ser usado para reslatar otra cosa que no sea eso.
• Si se usan frames: hay que describir la función de cada uno de los frames que se muestran, sobre todo 12.2 Describa el propósito de los marcos y cómo éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco.
• Si se usan formularios: las etiquetas deben estar colocadas adecuadamente y asociadas explícitamente con sus controles.
• Si se usan applets y/o scripts: la manipulación de los eventos debe ser independiente del dispositivo, o sea algun script que para su correcto funcionamiento dependa del mouse mostrará serias complicaciones al momento de ser ejecutado en un contexto donde este elemento no esté presente, por ejemplo el caso de algunas personas con problemas motores. Olvidemosnos de los movimientos en las páginas.

Bueno y hasta acá la prioridad 2 que tardó mucho tiempo en llegar y resultó más larga de lo que imaginaba.

Hasta la próxima

Enlaces relacionados:

• HTML Techniques for Web Content Accessibility Guidelines 1.0
• An Introduction To Accessible Web Design

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

Si bien el producto todavía está en fase beta y las invitaciones para testearlo son escasas, tuve la suerte de acceder a una (gracias Julian!) y la sorpresa que me llevé fue esperadamente grata, ya que no esperaba menos de Google.

Las tres S

Gmail tiene tres pilares fundamentales que lo hacen atractivo de por sí aún sin haber hurgado dentro del a interfaz, que son:

• Search:Gmail pone al servicio de su comunidad el motor de Google para la administración de la información enviada y recibida.
• Storage: 1 Giga de almacenamiento para nuestra información.
• Speed: Gmail es austero, carga rápido, aún desde una conexión dial-up. Además, según los chicos Google esto se logra
  eliminando el concepto de almacenamiento en carpetas y agregando la organización de mensajes a través de los labels threads de conversaciones y un eficiente manejo del spam que permiten un ahorro de tiempo por parte del usuario en cuanto a la administración de la
  información que tiene en su cuenta.

Carpetas vs labels

El concepto sobre el que se arma difiere de las convenciones que vienen manejando los principales proveedores, una de las primeras preguntas que me surgió cuando ingresé por primera vez fue: ¿Dónde están las carpetas? ¿Cómo creo más carpetas? ya que debido al caudal de mails que manejo, suele tornarse un caos si no los organizo. Si embargo gmail no usa el concepto de la carpeta para archivar, en su lugar nos encontramos con labels. Si bien cuenta con los elementos usuales: Inbox, Sent Mail, Spam y Trash, incorpora otros que resultan verdaderamente útiles.

"All Mail" finalmente es el repositorio de todos los mails que ingresan a la cuenta, salvo aquellos que sean spam, allí encontraremos centralizados los mensajes que están en el Inbox y los que se "archivaron". Aquí surge el tema del archivo que es interesante, los mensajes no se archivan en carpetas reconocibles y navegables cada vez que los necesitemos, "Archive" es un comando que permite despejar el inbox, ¿Dónde encontramos los mensajes físicamente? en "All mail" ¿Y si la carpeta tiene muchos mensajes? Pues allí es donde entra a relucir la mística de Google con su potente motor de búsqueda al servicio de nuestros mensajes, imposible no encontrar lo que buscamos.

A esto se agrega un nuevo concepto, que es el de los labels, que son categorizaciones a gusto del usuario que corren en forma transversal a la organización que les contaba en el párrafo anterior. La ventaja sobre la organización en carpetas (que es excluyente, el mensaje es almacenado en una u otra carpeta) es que un mensaje puede tener múltiples labels que le son familiares al usuario y facilitan la recuperación mediante una búsqueda o la navegación de los labels.

Se suma un nuevo elemento: "Starred" que vendría a ser como un resaltador de mensajes, que coloca una estrellita amarilla a la
izquierda de los mensajes que nos interesa destacar y que luego se pueden visualizar todos juntos.

La forma en cómo despliego Google los mensajes también es novedosa, es una tabla en la que cada fila representa un mensaje, y cada mensaje despliega los siguientes datos: sender, subject, fecha y los "snippets" (recortes de texto que reproducen un fragmento del primer párrafo de cada mensaje).

Atajos de teclado

Particularmente trato de utilizar lo menos posible el mouse cuando trabajo en la computadora, quizás sea porque soy un poco vaga y no tengo ganas de estirar la mano para agarrarlo, no me he puesto a averiguarlo seriamente. La cuestión es que soy de esas personas que se aprenden los principales shortcuts de los programas y manejan lo más posible desde el teclado. Justamente por eso me puse muy contenta cuando vi el extensivo uso de Gmail hace de los atajos de teclado para funciones esenciales, cuidando de que éstas sean significativas y que las principales estén expresadas en una sola tecla:

• c para redactar un nuevo mensaje (compose)
• j y k para older y newer, subir y bajar en la lista de mensajes (estos programadores son amantes del vi)
• o para abrir el mensaje seleccionado (open)
• r para responder (reply)
• a para responder a todos (reply all)
• f para reenviar el mensaje (forward)
• ! para reportar span, un hallazgo!

Y así hay una larga lista de teclas y combinaciones de teclas que mejoran las condiciones de vida de los tecladofílicos.

Mensajes, Threads y mucho más

Otra característica interesante que ayuda a la organización de los mensajes es la agrupación por threads o más bien conversaciones de mensajes, por ejemplo, estuvimos "maileándonos" (enviando y recibiendo mensajes) con una persona, ¿Cómo seguir las implicancias de la conversación? Simple, estas "conversaciones" son agrupadas en orden cronológico para su mejor entendimiento, las cuales se muestran a primera vista colapsadas y existe la opción de expandirlas, de responder o reenviar un trozo en particular independientemente de su ubicación. La interfaz de respuesta del mensaje se encuentra al final de la conversación y también puede desagregarse en una nueva ventana para poder seguir navegando los mensajes en la ventana original.

Gmail explota al máximo JavaScript y DHTMLpara brindar al usuario información contextual adicional, que algunos navegadores no soportan.

A la hora de redactar un mensaje, nos encontramos con perlitas tales como la función de auto completar el campo de destinatario con las direcciones de nuestra lista de contacto, las cuales se agregan automáticamente. Nada que envidiarle a nuestro lector de mail de escritorio.

Accesibilidad en Gmail

Con respecto a la accesibilidad, si bien no he tenido mucho tiempo para testear la aplicación estuve leyendo un artículo de Mark Pilgrim que se llama Gmail accessibility en donde hace un punteo de los temas pendientes, como el uso de frames, la inhabilitación para navegar ciertas botoneras mediante la tecla tab, hay funciones disfrazadas como links que no son alcanzables con un lector de pantalla, resumiendo, Mark expresa que la única forma de hacer menos accesible a Gmail hubiera sido programándolo en flash… Sin embargo, la gente de UI de Google ha expresado que les preocupa la accesibilidad de la herramienta y está en sus objetivos este punto.

Ya terminando por ahora con esta entrega, quedan muchos temas en el tintero, las publicidades, las políticas de privacidad y más análisis de las interfaces de esta prometedora herramienta. Google ha sorprendido con su desembarco en áreas distintas de su core business, pero la sorpresa está dada por la toma por asalto del nuevo mercado y la tendencia que impone con sus productos, la pregunta ahora es luego
del lanzamiento de Gmail, ¿Cuál será el próximo paso?

Hasta la próxima.

Enlaces relacionados:

• About Gmail
• Gmail gems
• Gmail accessibility
• Preview: Google’s Gmail Beta

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

La primera sorpresa con la nueva especificación es la falta de compatibilidad hacia atrás es decir con sus parientes cercanos HTML y hasta XHTML1, ya habíamos visto que migrar de HTML4 a XHTML1 era algo sencillo y hasta cuasi automático pero al parecer ya no esta tan facil con la nueva version de este lenguaje de marca. Algunos lo ven como una ventaja, en el artículo The Web’s future: XHTML 2.0, Nicholas Chase reflexiona acerca de lo pernicioso que resultó esta integración vertical hacia atrás para mantener los viejos navegadores.

El HTML, como ya saben, nació como un lenguaje de marca, no como un lenguaje de presentación de contenidos, lo que pasó a lo largo de su vida es que las necesidades de la web crecieron de manera exponencial, arrollando y desvirtuando el HTML a su paso. XHTML 2.0 representa un cambio radical para el diseño web tal como lo conocemos hoy, por la desaparición de los tags de formato.

¿Qué cosas cambian en esta versión mejorada?

• Aparecen nuevos tags o elementos en escena:
  • nl y name para listas de navegación
  • h y section que se encargarán de definir encabezados y secciones
  • line reemplazará a br (que dejará de existir)
  • XForms, XFrames y eventos de XML reemplazan a los tags form, frames y event respectivamente
  • quote reemplaza a q
• Otros cambian o amplían su función:
  • object englobará los antiguos tags img y applet
  • href será un atributo común, tanto que puede ser definido para cualquier otro tag no solo a
  • Hay una clara distinción entre acronym y abbr, a partir de este borrador
  • Las tablas cuenta con un modelo normalizado para su contenido
• Y por supuesto el El DOCTYPE

La especificación a pesar de ser un borrador ya cuenta con unas cuantas características discutibles, como por ejemplo, se le cuestiona la pérdida del efecto democratizador del HTML, es decir, que cualquier pueda hacer webs, con XHTML 2.0 y hasta que los programas de diseño no se adapten, la cosa no va a ser tan fácil. Pero las ventajas que presenta son grandes, a saber:

• Alcanzar la interoperabilidad del XML, a través de la definición del contenido en forma definitiva y para múltiples propósitos además de la posibilidad de separar perfectamente el contenido de la presentación mediante la utilización de las hojas de estilo. También, al estar basada en XML, los documentos deben ser well formed o no andarán.
• Mayor accesibilidad y mayor usabilidad, poniendo énfasis en la estructura más que en la presentación, para construir documentos semánticamente enriquecidos con mayor facilidad. Logrando también un diseño universal independiente del dispositivo con un correcto uso de los elementos que asegure a correcta interpretación por parte de los distintos agentes.

El XHTML 2.0 no está tocando a nuestra puerta ni mucho menos, se calcula que falta aún más de dos años para una especificación definitiva y a ello deberemos agregarle el tiempo que llevará que los navegadores y los programas de desarrollo se adapten al nuevo estándar. Pero promete y mucho, mientras tanto podemos visitar la página de Sjoerd Visscher w3future.com, que está desarrollada bajo la especificación XHTML 2.0, se ve bien en IE6, Mozilla y Opera, allí podemos ver el uso de las listas de navegación, el atributo href utilizado en varios tags y la incorporacion de los tags section y h que por ahora perfilan como interesantes logros de la nueva especificación.

El camino de la web semántica se está tapizando con XHTML 2, es claro que si pretendemos lograr una interoperabilidad de las redes y un entendimiento por parte de los ordenadores de los contenidos que hay en las redes a un nivel exhaustivo, debemos desechar las estructuras obsoletas y viciadas para migrar hacia estructuras semánticamente comprensibles. Finalmente queda decir que estamos aún en el draft, y que va a haber mucha marcha y contramarcha en el tema. y como dijo Nicholas Chase:

"Good-bye backward compatibility, hello structure. "

Hasta la próxima.

Enlaces relacionados:

• W3C: XHTML 2.0 working draft, August 5, 2002
• Usability, Accessibility and XHTML2
• How easy is XHTML2?
• Changes in XHTML 2.0

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

Cada vez más, el tema de la accesibilidad va ocupando un lugar en nuestros proyectos, pero se está empezando a formar un mito que ata fuertemente la aplicación de la accesibilidad en la web a la parte tecnológica, o sea que pasa a ser “algo que tiene que ver con el programador”. Los primeros esfuerzos locales que surgen para la concientización del tema tienen que ver con capacitación de programadores web, de webmasters, de los diseñadores, de los analistas. Si bien este proceder no está mal, hay que tratar de no caer en este facilismo.

La accesibilidad la hacemos entre todos. Nunca mejor utilizada esta frase, ¿Qué es lo que trato de transmitir? pensemos en un equipo interdisciplinario que trabaja en una aplicación web, un programador,
un editor de contenidos, un diseñador de la interacción y un corrector de estilo, cada uno de ellos tiene un papel importante en la generación de la accesibilidad de ese contenido que están pensando desarrollar.

El programador tiene una tarea clara en cuestiones de accesibilidad, su tarea es el desarrollo de una estructura que cuente con las características necesarias para el acceso óptimo a la información.

El editor deberá pensar en los elementos hipertextuales y multimedia que reforzarán la presentación de ese contenido y deberá hacerlo tomando en cuenta qué pautas de accesibilidad refieren a esos recursos para que los mismos sean accesibles, por ejemplo si el contenido se refuerza con una serie de gráficos en imágenes, el editor deberá brindar la información necesaria para que el programador pueda agregar los tags (por ejemplo alt o longdesc) que darán entendimiento al contenido. O también debe saber discernir cuando una imagen aporta al contenido para agregarle un texto alternativo descriptivo o cuando simplemente es parte del diseño para agregar un alt nulo que permita que ciertos lectores pasen por alto elementos prescindibles.

El diseñador de la interacción debe tener especial cuidado en relación a la estructuración de la información debe tener en cuenta como la leerá y la recorrerá una persona sin discapacidades y cómo lo
hará una perdona con discapacidad visual o motora, por ejemplo debe tener especial cuidado al diseñar la navegación para que no contengan menús desplegables (drop-down lists) o que el recorrido de un formulario se pueda realizar con la tecla tab del teclado.

El corrector tiene que revisar los contenidos y emparejarlos para con el estilo de un sitio el cual se rige generalmente por el manual de estilo. Y tiene que tener en cuenta las pautas de accesibilidad para corregir aquellas cosas que puedan haber sido pasadas por alto a la hora de elaborar un contenido, por ejemplo, deberá verificar que no existan links sin sentido del estilo “haga clic aquí”.

Como ven, en este escenario, cada uno de los que construimos un sitio, ya seamos tecnólogos, o contenidistas, tenemos un papel que desempeñar.

Creo que a esta altura ya no se discute acerca de si accesibilidad si o accesibilidad no, el nuevo modelo presenta discusiones tales sobre cuanta accesibilidad, las cuestiones de mínima, las de máxima, todos comprendemos que la accesibilidad es necesaria y en algunos casos indispensable ya que por ejemplo el Estado como proveedor de recursos y servicios no puede darse el lujo de atender al cierta porción de la población y dejar otro tanto afuera.

El Estado es quien tiene que velar por el bienestar de sus usuarios y debe tomar cartas en el asunto a fin de que, por lo menos, los sitios que caigan dentro de su orbita sean accesibles. Les dejo la inquietud.

Hasta la próxima

Enlaces relacionados:

• Petición por la Accesibilidad de los “eGov” en los países Ibero-Americanos
• Informe sobre la evolucion de los servicios publicos electrónicos (Formato PDF 1029 Kb)
• The role of government in web accessibility

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.

En este nuevo siglo que ya transitamos cómodamente, el acceso y uso de las TIC (Tecnologías de la Información y la comunicación) se convierte en un factor decisivo para el éxito en tanto en ámbitos laborales como académicos, por lo que no debería sorprendernos que la imposibilidad de acceso a los recursos agrande la brecha entre los que tiene acceso y los que no a la información en Internet, debemos tener cuidado con el uso que se hace de la tecnología para no profundizar los modelos de exclusión existentes.

Hace algunos meses asisti como oradora a una charla sobre accesibilidad en Internet, en la que les mostraba al auditorio (pequeño por cierto) algunos ejemplos prácticos de aplicación de las pautas para la accesibilidad del WAI. Generalmente en esas charlas recalco lo que signfica la restricción, del acceso para un grupo particular de personas a un recurso, como discriminación, o sea la forma en como se utilizan algunas tecnologías en la web provocan discriminación.

En ese momento de la charla, se oyeron expresiones de la gente que creian que era un comparación drástica y preguntaron: ¿No será demasiado? A mi me parece que no, ¿Ustedes qué creen? Imaginen tener que acceder a buscar información necesaria a un lugar donde no entienden el idioma…

Si bien la tecnología avanza a pasos agigantados y hoy son menos los obstáculos que una persona con discapacidad debe sortear, en Internet navegamos día a día en entornos inaccesibles, estos baches son los que provocan la discriminación por ello se necesitan una serie de acciones que reviertan las acciones negativas dentro de este campo.

Dentro de este proyecto es fundamental la inclusión del Estado no solo para la protección de sus ciudadanos sin también para dar el ejemplo y proporcionar el marco jurídico necesario para que las personas discapacitadas tengan libre acceso a la información y recursos esenciales en la web.

También es fundamental el apoyo de esta cruzada por parte de las grandes empresas que poseen los medios para implementar estos cambios y que deben sentirse obligados a través de su compromiso con la sociedad como parte activa en integrante de la misma.

Las web accesibles nos benefician a todos, el diseño universal ya no es una utopía sino que está contemplado en el próximo salto evolutivo de la web, dentro de no mucho tiempo le daremos la bienvenida a la Web Semántica y todos sus beneficios.

Bueno, desde aquí va mi aporte para que reflexionemos.

Hasta la próxima.

Enlaces relacionados con el tema:

• European Disability Forum

Escrito por Viv Dehaes
Publicado originalmente en: Interacciones
Bajo licencia CC Reconocimiento-No Comercial-Sin Obra Derivada 2.5 Argentina.