Los formularios vienen acompañados de botones para realizar acciones en combo, por ejemplo Aceptar/Cancelar.  Si tomamos en cuenta el perfil general de nuestros usuarios: occidentales que leen de izquierda a derecha, los comportamientos más frecuentemente usados del combo deberían estar a la izquierda y los no tanto a la derecha, entonces, ustedes qué creen? en un formulario, el botón de aceptar debería estar a la derecha? o a la izquierda? y el de cancelar?

A mi entender, “Aceptar” es la opción principal, a menos que se equivoquen, se arrepientan o pase algo excepcional, los usuarios no suelen cancelar formularios luego de empezar a llenarlos, entonces la acción de Aceptar debería estar a la izquierda y la de Cancelar a la derecha, no?

Hace unos días, al tratar de suscribirme a un Journal no entendía por qué, luego de terminar de llenarlo, me mostraba de nuevo el formulario vacío en vez de una página de confirmación, luego de que me pasara 2 veces, decidí prestar atención al proceso y me di cuenta que estaba apretando el botón de cancelar en vez del de guardar porque los habían puesto al reves de mis suposiciones.

He aquí la impresión de pantalla del formulario, como se ve en el área donde están los botones con las acciones (Clear form a la izquierda y Send Form a la derecha) hay un cartel resaltado en rojo que dice: Usted debe hacer clic en el botón “Send form” para completar el registro. Esto me hace pensar en que mucha gente debe equivocarse, al llenar el formulario. Pero no nos confundamos, los usuarios no son los que están errados, los que están errados son quienes realizaron esta página y cuando vieron que el número de errores crecía en vez de solucionarlo cambiando los botones de lugar, lo parcharon con un cartel.

Sin embargo no es el único ejemplo que encontré, en la siguiente imagen, de las interfases del MT 4, podemos observar que cuando se abre la ventana para publicar el sitio la acción más a mano que ofrece el formulario (contrario al imaginario popular) es Cancelar, la diferenciación por color (Gris para cancelar y azul para publicar) no sirve en este caso porque el gris del botón cancelar no es lo suficientemente claro como para darme la idea de segunda opción.

Este año llegó a mis manos los secretos del futuro de Arthur Clarke, escrito en 1962, en el  que especula con el futuro y próximos descubrimientos para fechas tan lejanas en ese entonces como 1982, si es que la humanidad no se ha destruido para esas épocas como reza la contraportada. Al final del libro  hay una suerte de calendario de inventos y progresos en una línea de tiempo que va desde el 1800 hasta el 2100, como habrán imaginado, todo lo que esa línea de tiempo expresa a partir de 1962 es futurología casi en estado puro. Podemos encontrarnos entonces que para el año 2000 se predijo la Colonización de planetas o para el 2010 el control del clima.

¿A qué viene todo esto? no soy tan pretenciosa del futuro como Clarke, no espero viajes interplanetarios, pero plantada en el año 2000 yo hubiera firmado que a 2008 ya tendríamos una web más organizada, basada en partones, en estándares para GUI, que proporcionaran  ayuda a los usuarios a través del reconocimiento de los elementos de una interfaz y su comportamiento esperado. La consistencia siempre ha sido uno de los elementos más importnates de la usabilidad, en ese sentido esta se logra por la mayoría, el comportamiento usual, o normal parte de la norma, que no es otra cosa que la regla fijada por la mayoría, todo aquello que entra dentro de la curva normal.

Jakob Nielsen, con la modestia que lo caracteriza, promueve la “Ley de la experiencia del usuario web de Jakob” en la cual postula que: los usuarios pasan mucho tiempo en otros sitios, entonces, cualquier cosa que sea usada por la mayoría de los otros sitios será grabada a fuego en los usuarios y si te desvías de esa senda tendrás grades problemas de usabilidad.

Si bien esto es cierto, creo que la falta una parte porque también es cierto que el usuario no adopta comportamientos, funciones o interfases que no tengan que ver con su modelo mental por más mayoría de sitios lo usen, entonces podríamos redefinir la ley de Jakob sosteniendo que lo que sea que se repita en la gran mayoría de los sitios también debe coincidir con la lógica de la mayoría de los usuarios para contar con su asimilación. En este sentido parece ser una serpiente que se muerde la cola ya que, a causa de las leyes estadísticas, los diseñadores, muchos de ellos por lo menos, arribarán a una solución coincidente también.

Volviendo a los botones, Jakob Nielsen sacó un artículo donde también plantea la posición de los botones OK/CANCEL, que retuerce una vuelta más el tema: ateniéndose a los estándares según las plataformas que usen sus usuarios, entonces, en lo que respecta a los botones:

• Microsoft pone el Ok a la izquierda
• Apple pone el Ok a la derecha

¿Entonces qué hacer? Nielsen propone, salomónicamente, que para aplicaciones de escritorio se utilice la convención que cada una de ellas propone, pero ¿qué pasa con aplicaciones web? que son casi independientes del sistema operativo, la propuesta es similar, propone mirar los logs y tomar parte por la plataformas que más te visita, en la mayoría de los casos: Windows. No sabría explicar por qué pero esta respuesta no termina de cerrarme.

Pasando a otra persona que sabe mucho del tema, Luke Wroblewski sostiene que, dentro de un formulario, las acciones de Guardar, Enviar, Continuar, son primarias ya que son las que habilitan la acción más importante dentro del form que es la finalización del mismo. En la misma dirección las acciones menos usadas como Cancelar, Borrar, o Ir Atras, son consideradas secundarias.

Debido a que muchas veces los usuarios utilizan las acciones secundarias por error, lo ocasiona muchas veces pérdida de datos es que muchos diseñadores están en contra de considerarlas en las interfaces, pero muchos otros creemos que es mejor que estén, para determinados casos y como salvaguarda para los usuarios. (ver post El botón reset en formularios web de octubre de 2003).

La situación que se presenta es la siguiente, necesitamos posicionar dos acciones, una primaria y una secundaria, una que nos llevará al éxito y una que podría ser letal para nuestros planes en un mismo sector, pero de manera tal que queden perfectamente diferenciadas. ¿Cómo podremos lograr esto?

Una estrategia muy usada es reducir la importancia visual de las acciones secundarias acompañadas o no, por un resaltado de las acciones primarias, esto ayudará a enfocar la atención del usuario hacia las acciones importantes pero sin dejar de ofrecerle un escape por si lo necesita.

Esta imagen es un buen ejemplo, pertenece a Feedly y muestra en la esquina derecha cómo el botón de la acción primaria “Suscribe” es visible y la acción secundaria “Cancel” ni siquiera es un botón, sino que es un link en donde además de haber perdido jerarquía de acción de formulario, el que sea un link reduce el área clicleable y de esta manera también la posiblidad de accionarlo por error.

Mientras que los estándares en la web siguen rondando en torno a código palpable (CSS, HTML, XML, incluso accesibilidad) cuesta mucho ponerse de acuerdo en cuanto  a los mecanismos que proporcionan la experiencia del usuario en la web, cuestiones como navegación, interacción, y acciones complejas son quizás demasiado subjetivas para un único criterio, para el “diseño centrado en el usuario” porque lo primero que hay que preguntarse es ¿quien es mi usuario?

Hasta la próxima!

Enlaces recomendados:

• UseIt: OK–Cancel or Cancel–OK?
• UseIt: Do Interface Standards Stifle Design Creativity?
• LukeW: Primary & Secondary Actions in Web Forms
• Peachpit:Creating Bulletproof and Easy to Complete Web Forms
• IBM DeveloperWorks: Using Web widgets wisely
• IxDA: Next & previous button order

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

Creado por Nick Bradbury (el mismo del TopStyle) hace algunos años fue comprado por Newsgator, durante muchos años fue (y sigue siendo) mi contacto con el mundo de los RSS y es, a mi parecer, uno de los mejores sino el mejor lector para Windows (También liberaron la versión para mac: NetNewsWire, pero no conozco que tal es).

Entre las funcionalidades que me seducen podemos comentar:

• La posibilidad de crear búsquedas por keywords dentro de los feeds que manejamos, que, en cada actualización revisará los updates en busca de correspondencias, armando una lista constantemente actualizada que puedo revisar en cualquier momento. De esta manera puedo trackear temas que resulten de mi interés.
• Facilidades para importar y exportar en formato OPML, para llevar y traer lo que me plazca.
• Su integración con explorer o firefox permite tanto navegar dentro del feedDemon (para vistazos rápidos) como en otro navegador para mayor comodidad, con un solo clic.
• Permite navegar con la facilidad de las solapas para manejar múltiples ventanas.
• Permite marcar ítems para verlos cuando estoy offline.
• Y por último, el reciente descubrimiento del Panic button. Resulta ser que estaba revisando mis lecturas pendientes, que superan fácilmente los 150 feeds, cuando me aparece este cartel:

Esto se puede traducir como: “Tienes 1900 ítems sin leer, ¡eso es mucho para leer! Esto no es correo electrónico, no tiene que leer todo. ¿Quizás es tiempo de pulsar el botón de pánico y dejar que FeedDemon marque como leídos algunos ítems por ti?”

Definitivamente toda una ayuda para el navegante agobiado.

Hasta la próxima.

Enlaces recomendados

• Digital inspiration: Why FeedDemon is Better Than Google Reader and Bloglines
• Wired: NewsGator Gives It Away: NetNewsWire, FeedDemon Now Free
• Nick Bradbury: FREE Demon? Yes, FeedDemon is Now Free!
  

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

Entonces, Web 3.0 es el término que se está empezando a utilizar para definir la última (por ahora) evolución de la interacción en la web.

Las características principales de este nuevo paradigma son:

1. La web como una gran base de datos distribuida: pensando la información en múltiples repositorios basados en XML, RDF y microformatos, que propicien la conversión de cualquier dato estructurado de esta manera en una página web.
2. La consolidación de la web semántica: acercándonos al pensamiento de Tim Berners Lee, la web semántica tendría como base la estandarización de todos sus datos, en un formato mayoritariamente unificado, el cual pueda ser comprendido por agentes inteligentes que clasificarían la información de manera más eficiente para devolver resultados más precisos ante un pedido de información por parte de nosotros, los usuarios. Este apartado más que los demás es el que provoca mi escepticismo acerca de la cercanía del desembarco de la web semántica, ya que no sólo la cantidad de datos a clasificar es inconmensurable, sino que tampoco hay un acuerdo unívoco acera de los estándares de dicha catalogación.
3. Contenido accesible a través de múltiples dispositivos: comprende el diseño de las interfases de manera tal que puedan ser accedidas desde multiplicidad de dispositivos: televisores, celulares, pda, etc. En la jerga solemos mencionar este ítem como diseño universal.
4. Apalancamiento de las tecnologías de inteligencia artificial: a través de agentes inteligentes que puedan aprender de la interacción con los usuarios. Inclusive hay robots conversacionales como MegaHal (emulando la IA de 2001 Odisea del espacio) que aprenden, conversando con otros usuarios, nuevas palabras, almacenándolas y reutilizándolas en nuevas estructuras, por supuesto que no siempre sus frases sonarán coherentes, pero es cuestión de tener paciencia y enseñarle. El uso de chatterbots en ambientes de aprendizaje también está muy extendido.
5. La web geoespacial: combina la información geográfica disponible de los usuario, con la información abstracta que predomina en la web, generando contextos que permiten realizar búsquedas u ofertar servicios en base a la localización, por ejemplo: en un banco de recursos poder saber quién mas de tu zona está participando, logrando a través de la declaración georreferencial de un usuario, su ubicación espacial y el contacto con pares que se encuentren dentro de un mismo territorio.
6. Ambiente 3D que transforme la web que conocemos en espacios tridimensionales inmersivos, donde los usuarios puedan sumergirse e interactuar a través de representaciones, como por ejemplos los desarrollados en Second Life, esta visión abrirá nuevas formas de conectarse e interactuar usando entornos colaborativos en 3D. Inclusive ya intentos tímidos de inracción entre la web (2D) mayoritariamente software social y los mundos virtuales (3D) como por ejemplo SnapZilla, que es un sitio para compartir fotos exclusivamente de Second Life.

Justamente la inclusión de una dimensión más en el juego es uno de los mayores potenciales de cambio de esta nueva propuesta, y es por ello que muchos nos preguntamos si el día de mañana esta disociación que existe entre la web y los mundos virtuales tal como la conocemos hoy podrá mantenerse indemne sin que los usuarios tiren abajo sus muros.
Según Gartner Research, para el año 2011, 80% de la población en línea estará involucrada en mundos virtuales (no relacionados con juegos). Lo cual significa un vuelco de gran parte de la población de internet hacia ambientes inmersivos que contendrán todas las facilidades de la web, las redes y entornos colaborativos y mucho más poco más si lo pensamos como Neal Stephenson lo relató en SnowCrash.

Cuadro sintético

A continuación hice un resumen de lo que se viene hablando de las eras de la web, para terminar de comprender mejor de dónde venimos, qué tenemos a nuestro alcance y hacia dónde pareciera que vamos.

Convengamos que algunas características desaparecieron, de la web 1.0 a la 2.0 hay un cambio radical de las reglas de juego, pero desde este estadio a la 3.0 deberían replicarse muchas de las conquistas ganadas a las que se le agregan las nuevas características de la web 3.0.

Igualmente, aún estamos transitando la ya desprestigiada web 2.0 y nos falta aprender mucho más de sus componentes y sobre todo sacarle el jugo antes de pretender pasar a la próxima ronda.

Hasta la próxima.

Enlaces recomendados:

• Interacciones: Categoría Web Semántica
  
• Technology Review: Special Reports Web 3.0
• PC Magazine: Web 3.0 – Features
• Maestros del web: La Web 3.0, añade significado
• Explorar SL: Explorar SL

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

Como era de esperar, no todos los que reproducen los contenidos del sitio lo hacen de la forma indicada, por ejemplo mi artículo CSS- Separando la visualización del contenido en Wikilearning tiene la cita correspondiente a mi satisfacción, pero por ejemplo sitios como emagister el mismo artículo, está puesto como si fuera un curso, cuando no lo es y encima te obligan a dejar tu mail para poder verlo, y encima está citado como perteneciente a Viv Dehaes de Wikilearning! les escribí haciéndoles constar el problema, pero me respondieron que ellos citan la fuente así y básicamente que me joda… ¿Qué se puede hacer en casos como este? Les escribí de nuevo, diciéndoles que si no acatan mi pedido bajen mis contenidos de ese sitio porque están violando los términos de la licencia, veremos que contestan.

Volviendo al tema, la cuestión es qué pasa con los contenidos de uno replicados en sitios de otros, cómo repercute esta situación en la posición en buscadores que tanto cuesta ganar…

Hay algunas personas que reproducen nuestros contenidos en otros sitios como recopilación de la información o con otros motivos igualmente razonables, pero, según lo que estuve investigando hay otras personas que lo hacen para mejorar su posicionamiento en los buscadores más importantes, la idea que rige este comportamiento es que reproduciendo contenidos útiles o simplemente de sitios bien posicionados lograrán aumentar el rankeo del suyo propio.

El tomar contenidos de otros sitios les da la posibilidad a esta gente de pocos recursos, de incrementar el tamaño de sus sitios, y consecuentemente las palabras claves indexables, lo que pensarán, los llevará al tope de las primeras páginas en la devolución de una búsqueda.

Este razonamiento es bastante ingenuo ya que Google, por ejemplo, penaliza esta suerte de multiplicación de contenidos, para ello ha desarrollado una patente denominada Detecting duplicate and near-duplicate files para poder detectar este problema y de paso penalizar a los perpetradores.

¿Por qué le interesa a google el tema?

Básicamente tiene que ver con mejorar su servicio, reconocer esta suerte de espejos de sitios les permite:

• No almacenar varias copias de un mismo contenido,
• y, lo que es importante: no devolver resultados de búsqueda contaminados con copias de contenidos, sino más bien brindarle al usuario un servicio de calidad, con los sitios originales.

¿Cómo detectan los contenidos duplicados?

En muy resumidas cuentas: deshuesan el documento en partes (frases, párrafos, etc.) luego le asignan una huella digital a cada una y a través de una bocha de algoritmos y fórmulas complejas comparan si dos documentos son similares, si al menos un gran porcentaje de las huellas digitales se repiten en los documento tenemos duplicación.

En este punto la cuestión es detectar cuál es el original y cual la copia: generalmente se adopta un esquema temporal, o sea el primer sitio indexado por el buscador se considera original y los demás pasarán automáticamente como copia. Hay otros criterios que se tienen en cuenta que tienen que ver con la antigüedad del dominio, el posicionamiento del sitio y su tamaño entre otros, que pueden desvirtuar esta situación haciendo que algunos contenidos, a pesar de ser copias, se presenten en un resultado de búsqueda mejor posicionados que los originales. Yo misma soy víctima de esta trampa del sistema cuando artículos de interacciones.com.ar aparecen mejor rankeados en otros sitios que aquí.

¿Qué pasa con las copias?

Las páginas web de los sitios que duplican contenidos también son indexadas, la cuestión es que si los algoritmos de google detectan la duplicación pueden perder mucha posición en el ranking e incluso no ser mostradas en el resultado de la búsqueda. De esta manera hay que repensar este comportamiento ya que si se copia contenido de otro sitio para mejorar el posicionamiento, lo que en realidad se logra es caer en desgracia bajo la atenta mirada de google y empeorar el posicionamiento que se logró.

¿Qué pasa si se comete una injusticia?

Puede ser que en este proceso automático de detección caigan justos por pecadores, o también incautos que realmente no se dieron cuenta de lo que estaba pasando, por ejemplo, los buscadores ven contenido duplicado en las siguientes prácticas:

• Uso de sitios espejos o de desarrollo en línea sin restricciones.
• Inclusión en el sitio de descripciones de productos o servicios que vienen de un distribuidor y se pueden encontrar en otros sitios que también comercializan el producto o servicio.
• Versiones para impresión, que colocan en el sitio el mismo contenido pero despojado del diseño para una mejor impresión.
• Páginas que sindican RSS de otros sitios o partes del sitio.
• Utilización de múltiples URL para acceder a un mismo recurso y también el uso de variables y valores en la URL

En la mayoría de los casos se recomienda que en el archivo robots.txt se le especifique que partes seguir y cuales no, de esta forma se podría armar una estrategia para no perjudicar el ranking en los buscadores.

También se recomienda para impedir la indexación de contenido duplicado que podamos identificar fácilmente, el uso del siguiente metatag que va en el HEAD del HTML e impide que los robots indexen dicho documento:

<meta name="robots" content="noindex">

Google también pone a disposición de los webmasters un formulario de advertencia para que podamos avisarles sobre ciertos sitios que realizan prácticas fraudulentas entre ellas la de duplicar contenidos de otros sitios. Google promete investigar nuestras denuncias hasta las últimas consecuencias y de esa manera evitar la polución ambiental. Esto se puede encontrar en el siguiente link Información de Google para webmasters.

Hasta la próxima.

Enlaces Recomendados

• Xeoweb: ¿Quién te plagia?
• La penalización del contenido duplicado
• Herramienta para la detección de copias: CopyScape
• SEOHome: Contenido duplicado y Google

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

El artículo completo se puede acceder desde: Search Engine Ranking Factors. Lo que pretendo hacer aquí es un resumen del mismo porque me pareció muy interesante completo y revelador.

SEOmoz, sitio que promueve la optimización del posicionamiento en los buscadores (Google, Yahoo, MSN, etc.), publica este artículo en el que se realizó un análisis colectivo de una lista de factores que afectan de distintas maneras la posición en los buscadores. En el análisis se examinaron 103 factores, que se dividieron en cinco categorías:

• Factores dentro del documento: uso apropiado de tags, metatags, keyword, existencia de enlaces internos y externos, textos alternativos de multimedia, cita a fuentes, entre otros.
• Factores del sitio: nombre de dominio, enlaces referenciados desde la comunidad, cantidad y tamaño de los documentos que se alojan en el servidor, existencia de un mapa de sitio, uso de redirecciones, etc.
• Factores que afectan el valore de un enlace: título del enlace, existencia de enlaces externos hacia la página, popularidad del sitio, ubicación del enlace en la estructura del sitio, etc.
• Factores del lado del servidor: accesibilidad al documento, parámetros dinámicos en la URL, extensión de la URL,  uso de frames, presencia del archivo robots.txt, etc.
• Factores que perjudican el ranking: keyword spamming, enlaces rotos, contenido duplicado, enlaces a páginas mal catalogadas, contenido ilegal, prácticas faltas de ética, etc.

Doce personas participaron en la calificación y lo hicieron mediante dos variables:

• La importancia asignada a cada factor (va desde Importancia excepcional hasta Sin importancia),
• El grado de acuerdo / desacuerdo alcanzado entre los participantes sobre la importancia de cada factor (va desde muy discutido a altamente concensuado).

Los siguientes puntos son los diez elegidos como aquellos que influyen considerablemente en el ranking de un buscador:

1. Título de las páginas

Se refiere al título de la página, es utilizado por la ventana del navegador y también por los buscadores como Google para presentar la página cada vez que es incluida en un SERP. Tenerlo y que sea significativo afecta positivamente el ranking, mientras que la situación contraria provoca un efecto negativo. Algunos de los participantes sostenían la posibilidad de que fuera unívoco. De nada sirve que todos los títulos de tus páginas sean iguales.

2. Título del enlace

La premisa es que el título del enlace sea significativo, descriptivo, útil ya que los buscadores les dan mucha importancia, por ello algunos gurúes recomiendan incluir palabras clave sobre el contenido del sitio en los títulos de los enlaces, por ejemplo si tenemos una página que habla de accesibilidad, ser debería pensar en incluir enlaces que utilicen el tema como palabra clave, "Acerca de la accesibilidad" "Accesibilidad en la web" y así, pero también advierten que la sobrepoblación de keywords en los títulos de los enlaces puede jugar en contra.

Los links de texto sirven para aumentar la clasificación tanto de de la página que lo contiene como aquella a la que hace referencia.

3. Palabras clave usadas en el texto del documento

La idea es utilizar en el texto, palabras que pensamos nuestros usuarios utilizarían para buscar información que coincida con la que tenemos en nuestras páginas.

4. Accesibilidad de  un documento

No refiere este estudio a la accesibilidad al contenido web planteada por el WAI sino más bien a un consenso más simple a posibilidad que tiene un recurso/ página/sitio de ser accedido, alcanzado, por ello algunos sostienen que no es un tópico de ranking sino más bien de indexación de los contenidos ya que si no pueden llegar hasta el sitio no podrán indexarlo.

Se consideran problemas de acceso a los documentos por ejemplo: errores 404 errors, caídas de servidores o servicios, esconder la información detrás de plug-ins especiales, formularios, javascripts o redirecciones de URL, que no permiten que los spiders alcancen el contenido.

Con respecto a la accesibilidad tal como la conocemos, ésta también contribuye al SEO de las páginas ya que muchas de las pautas que proponen afectan de forma positiva el posicionamiento, por ejemplo: desaconsejar el uso de flash, alentar el uso de información alternativa para el contenido multimedia, el uso correcto de los tags semánticos, etc.

5. Enlaces a un documento desde páginas internas del sitio.

Si una página en un sitio es linkeada por ejemplo, por varias páginas importantes páginas del sitio esto repercutirá de manera más positiva que si hubiera sido linkeada por otras páginas fuera del sitio. Esto le concede a este recurso gran importancia porque es algo que depende exclusivamente de las personas que mantienen el sitio, entonces podemos empezar a jugar potenciando este factor con palabras clave escritas en el texto del link.

6. Tema principal del sitio

Que el tema esté claramente especificado puede ayudar a su posicionamiento en el ranking dentro de un conjunto de páginas de temática similar. Cuanto más específico sea el tema y mejor explicitado esté en el sitio más fácil será el encontrarlo en una página de resultados dada por las palabras clave que utilizamos para posicionarnos y que nuestros usuarios utilizan para encontrar información relacionada.

7. Enlaces hacia otras páginas

Los links externos son factores de gran influencia para la relevancia.

8. Popularidad del sitio en la comunidad temática (a través de los enlaces que lo referencian)

Los buscadores consideran comunidades temáticas a los grupos de sitios que comparten temas similares y se linkean frecuentemente entre sí. Un sitio perteneciente a una de estas comunidades a través de links de otros sitios similares puede ser mejor rankeado y con mayor autoridad sobre el tema dentro de la comunidad.

9. Popularidad global del sitio en internet

Así como es bueno que los comunes reconozcan la calidad de un sitio y le otorguen el tan preciado enlace, también es importante el peso que puedan llegar a tener todos los links que están dirigidos desde cualquier lugar de internet a un único dominio. Y si encima los links son de sitios bien rankeados, la influencia que esto ejercería sobre el posicionamiento global debería ser más fuerte aún.

Otros aventuran que si los links vienen de sitios en otro idioma (dado por la terminación del dominio: ca canada, jp: japón, etc) esto podría ser aún más que relevante.

10. Keyword Spamming

Este factor a diferencia de los demás, afecta negativamente un ranking. Keyword Spamming está definido como el abuso de palabras claves por ejemplo usar keywords que estén bien ranqueadas y no tengan que ver con el contenido a mostrar pero inducen a las personas a acceder "engañados" a estos documentos aumentando sus visitas falsamente.

Aquellos que no hacen la diferencia pero creíamos que si

En este estudio intervinieron muy diversos factores que afectan positiva o negativamente el ranking de una página, seguramente ustedes conocen más elementos de posicionamiento que estos 10 que se nombran aquí. Lo que me llamó la atención fu encontrar entre los elementos que influyen poco y nada algunos que yo creía que si lo hacían, por ejemplo:

• Validación del W3C: este organismo a nivel internacional establece los estándares y pautas de los distintos lenguajes que se utilizan en internet y yo hubiera jurado que una página "well formed" hubiera sido mejor ranqueada que esos engendros llenos de tablas.
• Tamaño de los documentos: parece no influir en la decisión del jurando, una página que pese 500 Kb y solo pueda ser vista en la NASA y otra que tenga un peso estándar de 50Kb tienen las mismas chances, por ahora.
• Longitud de la URL: esperamos que en un futuro las direcciones web quilométricas sean sinónimo de poca usabilidad o poca confianza.

Para ir cerrando, hay que tener en claro que la base de la pirámide son los contenidos, la información, los servicios que brindamos, todo esto pasa por el grado de utilidad de los mismos: el posicionamiento, las visitas al sitio, el reconocimiento como autoridad en un tema, etc.

Hasta la próxima.

Enlaces recomendados:

• El Título de la página
• Anchor Text Optimization
  
• High Accessibility Is Effective Search Engine Optimization
• Google Information for Webmasters: SEO
• Google’s Patent: Information Retrieval Based on Historical Data

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.

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

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.

Desde algún tiempo, como muchos, me he vuelto aficionada a los RSS, hasta tal punto que ya no pierdo horas visitando los sitios que me interesan, sino que ahora las pierdo en mi lector de RSS. Particularmente, me es muy útil el contar con una recopilación de las noticias de los sitiios que más visito, porque, al escanear el contenido, puedo manejar una enorme cantidad de información de una forma más eficiente.

Una buena definición de este nuevo paradigma lo encontré en Vanderwal.net:

"Los lectores de RSS son un libre flujo de información y ponen en las manos de los usuarios la opción del consumo de información."

Si necesitas un background de cómo se usan los RSS podes leer "RSS, informarse sin navegar" que es un artículo sencillo y completo.

Escribir pensando en los RSS

A diferencia de las noticias que me llegaban por mail cuando me suscribía a una lista, con mi feed reader yo puedo ver todos los post del sitio y no solo los extractos seleccionados por el editor, otra de las ventajas por sobre el e-mail es que tengo la plena seguridad de que entre las noticias que he solicitado no se va a colar ningún spam.

Los RSS se han convertido en una herramienta de comunicación útil y con un gran potencial, pero aquellos que tenemos que empezar a pensar ella como algo en sí mismo y no como un servicio más que se genera solo y no molesta. En efecto los mayores problemas que he tenido para leer los RSS se han dado cuando los autores se ayudaron del contexto para presentar una noticia por ejemplo y extrapolada de su medio no tiene mucho sentido.

Por ejemplo, un dia descargando los post con el Feeddemon, me topé en el RSS de La Nación, importante diario argentino, con el siguiente panorama:

El post es confuso y la experiencia deja de ser placentera, no entiendo lo que quiere decir y para poder hacerlo debería ir hasta su página para comprenderlo, todavía me estoy preguntando de qué se trata porque me negué a ir a la página para revisar la noticia en señal de protesta.

La competencia: Diario Clarín, aporta un muy buen ejemplo de lo que no se debe hacer:

En mi travesía para escribir sobre este tema me he cruzado con una gran cantidad de páginas que hablan acerca de como construir un RSS, lamentablemente pocos hablan de cómo construirlo bien, igualmente confío que con el crecimiento de esta herramienta surgirán pautas y recomendaciones que ayuden a mejorar la eficacia del medio.

Sin embargo hay una perla en este amplio océano de información: Mark Nottingham tiene en su sito un Tutorial de RSS para publicadores de contenidos y webmasters, que es muy bueno, y comienza por lo básico:  qué es un RSS, como podemos utilizarlo, y muy importante: Tips para generar buenos RSS feeds.

Con respecto a los que generamos información, si antes debíamos tener ciertos recaudos cuando escribimos un artículo para la web, ahora debemos sumarles aquellos que ocasionaron la llegada de los RSS a nuestras vidas. Más que nunca debemos tener en cuenta:

• Títulos: deben ser descriptivos, informativos, claros y de ser posible cortos.
• Copetes: indispensables. Hay que tratar de resumir la idea global del post. Si el primer párrafo tiene datos que se complementan con los sucesivos párrafos del post quizás no se llegue a comprender el concepto que se intenta transmitir para llamar la atención a nuestros lectores. También hay que tener en cuenta que ciertos readers truncan los textos en una cantidad determinada de caracteres, así que lo bueno, si es breve, es dos veces bueno, tratemos de que no nos trunquen la idea.
• URL: obviamente la dirección del recurso, aquí hay que decir que es recomendable que cada recurso tenga una URL única.
• Logo del sitio: La mayoría de los feed readers permiten mostrar el logo del sitio y esto le sirve al lector para distinguir a simple vista de donde viene la noticia y de paso nos posicionamos un cachito en la mente de nuestro consumidores como diría Al Ries.
• Lenguaje: no se olviden de setear correctamente el lenguaje!!! la mayoría deja el que viene por defecto: en-us, siendo que por ejemplo interacciones tiene que ser es-ar (español-Argentina), si tienen ganas pueden ver la lista de códigos.
  Para qué sirve esto? para que cuando los robots indexen nuestro contenidos tengan en cuenta el idioma en el que está escrito a la hora de catalogarlo.

Un consejo para aquellos que tiene RSS, suscríbanse los suyos y mírenlos con objetividad.

Si bien hace un tiempo los RSS eran algo que se generaba automáticamente cuando escribíamos en nuestro weblog, algo ajeno y misterioso, hoy en día existen herramientas de autor que nos permiten crear nuestro propios archivos para publicar y controlar las características avanzadas que incrementan la potencia de los RSS, como por ejemplo Feed for All.

A pesar del potencial que ofrecen los metadatos en la sindicación de contenidos, la mayoría de los RSS viene por defecto con las opciones arriba citadas, sin embargo, la potencialidad de los RSS involucra características adicionales muy interesantes, tales como:

• copyright: puede incluir una declaración de derechos de autor del contenido que se sindica.
• managingEditor: aquí se puede poner el e-mail del editor, útil para posibles contactos.
• webMaster: tambíen permite insertar el e-mail del encargado del sitio, para por ejemplo avisarle de un link roto.
• pubDate: la fecha de publicación del contenido, muy útil en publicaciones periódicas.
• lastBuildDate: fecha de la última vez que cambió el feed.
• skipDays y skipHours estos elementos perimte controlar la frecuencia de chequeo del feed reader que puede ser algunos días específicos de las semana o algunas horas del día. El feed reader pasará por alto el día o las horas señaladas en estos elementos.
• Y otros… Ver especificaciones de RSS 2.0

Usos de los RSS

Los RSS son una herramienta portentosa que aún no se ha desarrollado en plenitud, pero la velocidad con la que crece nos hace pensar que es uno de los más importantes proyectos de comunicaciones de los últimos tiempos.

Las empresas están siguiendo el ejemplo de ThinkGeek o Amazon que hacen llegar a mi escritorio los productos que sacan al mercado.

El National Weather Service, que envía alertas, que bueno sería tener un servicio así por este hemisferio.

En temas de e-goverment encontramos que el estado de Utah en su División de compras y servicios generales utiliza esta tecnología para la publicación de sus licitaciones. Así cualquiera que pretenda saber cuales son los pedidos de licitaciones puede hacerlo rápida y facilmente.

Inclusive tiene múltiples usos en el ámbito educativo, cuando un profesor puede utilizarlo para mantener a los padres de sus alumnos al tanto de las tareas de los mismos.

No podemos dejar de lado el valor informativo que tienen los RSS de los diarios, si hace algunos años nos resultó fabuloso tenerlos en internet imagínensé ahora tenerlos todos juntos en una misma pantalla.

La sindicación ha llegado para quedarse y tendremos que conocerla para sacarle todo el jugo, los modelos de negocios que plantea este nuevo escenario son numerosos y por qué no? redituables.

Hasta la próxima.

Enlaces relacionados:

• List of common feed publishing errors
• RSS Usability Issue
• Plugging the RSS Usability Hole

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

En su tercera etapa, usando Eyetool este estudio se encargó de observar a 46 personas, durante una hora cada uno, prestando atención al movimiento de sus ojos en la pantalla ante diferentes sitios con noticias en sus portadas específicamente seleccionados.

Los datos que nos aporta el estudio, como sus realizadores se apresuraron a dejar en claro, no poseen un rigor científico inquebrantable, ya que por la naturaleza del estudio es más amplio que profundo, pero nos sirve para rescatar un par de ítems, algunos ya sabidos de facto y otros novedosos, y utilizarlos en la construcción de webs que tengan noticias, o artículos para atraer la atención de los navegantes sobre los mismos.

Cómo se lee en la web

Para entender este estudio es necesario comprender mínimamente el proceso de lectura de las personas. El común de la gente, al ingresar a una web, no leen los textos palabra por palabra, sino que "escanean la página", barren la página a la caza de palabras u oraciones que llamen su atención o coincidan con el objeto de su búsqueda.

Otra premisa a tener en cuenta es que reconocen las palabras como un todo, no miran cada letra individualmente dentro de la palabra, esto se debe a una función del cerebro humano muy útil que se denomina autocompletar que con su "base de datos" rellena los huecos para darles un significado que nos permite reconocer palabras y objetos. Por ello es inportante el uso prudente de mayúsculas y minúsculas, ya que, por ejemplo, un párrafo en máyúsculas disminuye esta capacidad de reconocimiento.

El estudio utiliza dos términos importantes para sus conclusiones uno de ellos es fijación y el otro es sacudida, pues bien, veamos de qué se trata.

El ojo no se desliza suave y pausadamente a través del texto sino que mira una palabra o grupo de palabras brevemente, este comportamiento se conoce como fijación y toma un tiempo promedio de 0.25 segundos.

Luego de una fijación, los ojos se mueven al próximo grupo de palabras que llamen la atención, esta acción es la sacudida y tiene un tiempo promedio de 0.1 segundos.

En definitive una fijación es una breve pausa del ojo mientras busca alguna palabra o frase que le llame la atención y una sacudida es el camino que recorre entre las fijaciones.

Patrón de lectura y estructura de la página principal

En la navegación, los ojos presentan el siguiente patrón de movimientos:

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

El estudio reivindica el comportamiento de lectura de izquierda a derecha y de arriba hacia abajo propio de las culturas occidentales, por lo que es recomendables ubicar contenidos de importancia en esta zona, es importante que en la parte superior izquierda se encuentre el logo de la organización y preferiblemente un slogan que describa el objetivo de la misma.

Otra forma de mostrar este patrón es dividiendo la página con una grilla, como en la imagen, en la que se marcan las zonas de importancia con rojo en oposición a las zonas verdes en donde el ojo suele fijarse con menor frecuencia. Teniendo en cuenta esta grilla, los datos importantes deben ocupar el espacio rojo, seguido en importancia por el amarillo, dejando la cuadrícula pintada de verde para información adicional con un nivel menor de importancia.

Uso de titulares + copetes en la Home Page

La mayoría de los sitios con noticias utilizan una combinación de títulos y copetes para atraer a los visitantes a que recorran las distintas ofertas. En el estudio se detectó que las páginas que combinan titulares y copetes, en contraposición de aquellos que solo utilizan titulares tienen más páginas vistas, más páginas leídas y mayor scroll vertical ya que el uso de titulares y copetes ayuda a dispersar el interés del lector a través de la página. A esto debemos sumarle que los párrafos cortos (entre 10 y 25 palabras) reciben mayor atención que los largos y que las personas sólo prestan atención a la tercera parte de los mismos, o sea sólo miran un par de palabras y si éstas llamaron su atención, seguirán leyendo. Y para terminar podemos agregar que, en promedio, un titular tiene menos que un segundo para captar la atención de un visitante al sitio de una atención de visitante de sitio.

Tipografías grandes vs. tipografía pequeñas

El estudio concluye que las tipografías pequeñas alientan un comportamiento tendiente a focalizar la vista (leer los textos), mientras que las tipografías grandes alientan el escaneo de la página.

Se rumorea que esto se da porque los usuarios pasan menos tiempo enfocando en textos de tipografías grandes ya que éstos representan menor cantidad de palabras donde fijar la atención. Cuando las personas buscan alrededor en busca de frases que capturen su atención.

Con un titular más grande que el copete y en una ínea separada, las personas tendieron a ver los titulares y saltarse los copetes; escudriñando los titulares a través de la página. Ya que el titular se percibe como el elemento importante del bloque, entonces las personas deciden que viendo el titular es suficiente y se saltan el copete. En esta situación el titulo debería tener un significado en si mismo, o sea la información relevante debería transmitirse en las pocas palabras que conforman el título y no utilizar los que en el medio se conoce como "títulos ingeniosos", mayor información será presentada por el copete, pero no deberá depender de éste, ningún elemento de significación importante para la comprensión del artículo.

Mientras más grandes son los títulos en relación con sus copetes, menor es la posibilidad de que el copete sea visto o leído. Cuando los titulares y sus copetes tienen el mismo tamaño (pequeño) entonces ambos son visto o leídos más seguido.

Por lo tanto, si se quiere que los lectores fijen sus ojos en la página por un tiempo prolongado, se deberán usar tipografías chicas para los titulares y similares para el copete. También tener en cuenta que si se usan títulos con tipografías grandes, éstos deben ser significativos y no complementarse a través de las bajadas.

Formato de la información

En Internet el secreto es ser breves, esto significa no escribir mas del 50% del texto que se usaríaen una publicación de papel.

El principio de la "pirámide invertida" nos enseña que cuando se escribe para la web se debe comenzar con la conclusión, un resumen corto e ir agregando información gradualmente, de modo que los lectores puedan tener una idea global del contenido incluso si no lo leen entero.

Una vez que los lectores se interesaron la noticia como para hacer clic en ella, el reto ahora es cuál es la mejor forma de mostrarle la información requerida. Con respecto a la presentación del texto, el formato tradicional de una sola columna tuvo un rendimiento mejor en términos de fijación de la vista, en relación a formatos de 2 y 3
columnas.

Para el artículo, se sugiere el uso de un párrafo descriptivo en negritas, luego de los títulos ya que es un recurso muy visto por los lectores y aquellas páginas que lo poseen tienen un porcentaje de lectura mucho más alto que cuando no está presente este recurso.

El uso de párrafos cortos alientan a los lectores a continuar con la lectura.

Textos y multimedia para presentar conceptos

Hay cierto tipo de información a la cual es conveniente presentarla mediante una buena descripción y otro tipo de información que es mejor explicada a través de gráficos.

Los participantes en su mayoría recordaron en forma correcta hechos, nombres y lugares cuando se les presentó la información con formato de texto, mientras que conceptos nuevos, no familiares fueron más precisamente recordados cuando los participantes recibieron estos datos en formato multimedia.

Es decir que la información sobre procesos o procedimientos parece ser mejor comprendida cuando se utilizan animaciones, gráficos e infografías para explicarlas.

A tener en cuenta

Aún cuando concuerde con la mayoría de los resultados que se presentan en el estudio, debemos tener en cuenta que este es un estudio acotado y que habrá diferencias de un sitio a otro y de una clase de público a otra, por ejemplo, uno de los puntos del estudio en cuanto al uso de los titulares deja al descubierto que los participantes del estudio cuando se encontraban con titulares subrayados, generalmente no leían los copetes que acompañaban al título por lo que se postuló que el subrayado desalentaba la lectura de los copetes al provocar una ruptura en el fluir del párrafo.

Ahora, si yo tengo como público objetivo a personas con muy poca idea de intenet o quizás analfabetas digitales, porque, por ejemplo, mi sitio les enseñe sobre internet, no recomendaría que links en la home no se subrayaran si fueran títulos ya que es un aprendizaje básico por el cual cualquier persona tiene vivenciar en su pasaje por internet.

Los resultados del estudio son en gran parte útiles, pero no son las tablas de la ley escritas por el fuego divino, usen su experiencia en cada paso, preguntensé si tal cambio les sirve para crecer o si no se ajusta a lo que sus usuarios necesitan.

Más conclusiones

El estudio abarca muchos puntos más que los que se desarrollaron acá, yo puntualicé en aquellos que me llamaron más la atención y son fácilmente implementables, Les recomiendo que visiten la página del estudio y se la devoren porque vale la pena.

Otras de las conclusiones a las que arribaron los investigadores son:

• las personas miran generalmente debajo de la primera pantalla (hacen scroll) buscando algo que les atraiga
• la barra de navegación ubicada en la parte superior de la página funciona mejor que en otra ubicación
• gran cantidad de personas miran primero el texto antes que las imágenes
• Mientras más grande sean las imágenes, más tiempo pasaran las personas mirándolas.
• De todos los avisos comerciales que se testearon los más vistos fueron los de texto
• La proximidad del aviso a una noticia o editorial que atraiga o sea popular, le ayudará ser más visto.

Enlaces recomendados:

• The Eyetrack III research
• Cyberjournalist: Highlights of new eyetrack research
• Useit: How Users Read on the Web

Imagen 1: Extraida de Don’t make me think de Steve Krug
Imagen 2: Extraida del Site The Eyetrack III research
Adaptación de las imágenes: Gracias Silvana!

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.

Uno de los problemas que se presentan es que Internet Explorer reconoce el tag <acronym> pero no lo hace el tag <abbr> por lo que muchas veces se privilegia el uso de <acronym> para cualquiera de los dos casos.

Aquí se abre otra cuestión, definir qué es un acrónimo y qué unaabreviatura.  Por ello comencé una investigación acerca del tema. Según 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)

Pero parece ser que este criterio no está tampoco unánimemente decidido, unos son de la idea que los acrónimos sólo son aquellos que gracias a que contienen vocales pueden pronunciarse como palabras como por ejemplo FAQ (Frequently Asked Questions) mientras que otros sostienen que pueden perfectamente ser acrónimos aquellos que tengan la secuencia de letras iniciales completas auún cuando no se puedan pronunciar como una palabra sino letra por letra, como por ejemplo: HTTP (Hyper Text Transfer Protocol).

En lo que respecta a las abreviaturas, la Wikipedia sostiene:

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

En HTMLestos elementos son de gran importancia tanto para familiarizar a los usuarios con términos más bien técnicos que quizás desconocían como para darles una mano a los lectores de pantallas que utilizan los usuarios con problemas de visión, es más se pueden hacer manejos desde la hoja de estilo para que por ejemplo a las abreviaturas las deletree en vez de tratar de interpretarlas, todo un logro si preguntan mi opinión.

Otro tip a tener en cuenta a la hora de utilizar este tipo de herramientas es la posibilidad de señalar el lenguaje en el que está explicado el acrónimo, ésto ayuda a la pronunciación correcta del
término por el lector de pantalla. Por ejemplo:

<abbr title="Cascading Style Sheets" lang="en">CSS</abbr>

Otra de las sorpresas que me encontré en el camino es que había términos que yo creía eran acrónimos y en realidad eran abreviaturas, el artículo de Craig Saila HTML is not an acronym… es bastante ilustrador al respecto.

En este punto debo aclarar que Wikipedia considera de HTML es un acrónimo y lo he visto en varios lados así, pero parece ser que palabras como HTML, CSS y otras son abreviaturas nomas… parece ser que parte en la culpa por la confusión la tiene el W3C ya que su definición de acronym y abbr está medio difusa.

Para sumarle un grano de arena más a la pelea Internet Explorer decidión no soportar el tag <abbr>. Pero esto también es fácil de subsanar gracias a nuestras queridas amigas las hojas de estilo, con las siguientes líneas podemos engañar al browser para que nos muestre las abreviaturas de la misma forma que los acrónimos:

abbr, acronym {
       border-bottom: 1px dashed #000;
}

Hasta la próxima.

Enlaces realcionados:

• Abreviaturas versus Acrónimos
• acronym vs. abbr

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.

Es un criterio básico del DCU (Diseño centrado en el usuario) que el usuario tenga libertad y control para moverse dentro de la interfase, que tenga la posibilidad de volver atrás en sus pasos. Si yo privo a mis usuarios del botón de reset, estoy diciendo que es peligroso para ellos interactuar con él y que por ello yo decido no incluir esa opción dentro de mi diseño. Equivale a pensar que puedo entrar en la casa de un usuario y sacarle los cuchillos de la cocina porque pueden resultar riegosos para él… Creo que no hay que descartar el botón reset de los formularios sino que hay que diseñarlo de manera que exprese su función inequivocamente.

Otra de las razones por las cuales estoy a favor del botón reset es que éste brinda al usuario inexperto la tranquilidad de borrar todos los datos de un formulario si se ha arrepentido de llenarlo, esta acción también se logra con el botón recargar (reload) del navegador, pero muy pocos usuarios lo utilizan.

Luego de mirar por encima del hombro como los usuarios escriben un comentario en el MT he descubierto por qué muchas veces se pierden.

La explicación es sencilla, es la maldita manía de colocar en un formulario como primera opción "Cancelar" y como segunda opción "Aceptar" "Guardar" "Postear" o como se llame, entonces, los usuario plasman sus pensamientos, y a continuación luego de revisarlos teclean "Tab" y "Enter" que equivaldría a pasar al siguiente campo (que denería ser el botón de submit) y aceptar. También he visto a aquellos usuarios que se manejan con el mouse hace clic en la primera opción de la izquierda, sin ni siquiera fijarse en el label del botón.

Lamentablemente en el MT estas dos acciones equivalen a cancelar el comentario, perdiéndolo irreversiblemente la unica posibilidad de recuperación depende de la memoria de quien lo compuso. Así mismo he visto este comportamiento en un sinnúmero de formularios en la web, no sé del otro lado del mundo pero aquí en el hemisferio sur de américa las personas tienden más veces a publicar los datos que ponen en el formulario que a borrarlos por lo que el submit debería estar más a mano que el reset, sobre todo cuando hay un porcertaje alto de usuarios que se manejan con la tecla tab para ir saltando de campo en campo.

Como corolario me gustaría agregar para los desarrolladores que por el bien de sus usuarios sitúen el botón submit a la izquierda del botón reset del formulario y separados por un amplio e inconfundible espacio. Si esto no los ha convencido por lo menos agreguen un mensaje de alerta para que los usuarios puedan confirmar si realmente quieren borrar o simplemente publicar equivocándole al botón o si fue un enter antes de tiempo.

Hasta la próxima.

Enlaces relacionados con el tema:

• Jakob Nielsen’s Alertbox, April 16, 2000: Reset and Cancel Buttons
• Design Principles and Usability Heuristics (PDF 378 Kb)

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

El HTML es un lenguaje de formato o de marcado definido por el SGML, que provee el marco para el manejo del hipertexto independientemente de los dispositivos utilizados.

Cuando, en epocas tempranas de la web, El HTML fue desarrollado por Tim Berners-Lee para el intercambio de documentación científica, brindaba las herramientas mínimas e indispensables basándose en un sencillo set de tags para dar formato a los textos para su mejor comprensión. Fue por ello que el tag table fue concebido para presentar datos en forma tabulada y no para maquetar un diseño, el tag p era para delimitar los párrafos y no para generar espacios, y así un monton de cosas.

Lo que pasó es que el éxito de la web fue tremendo, entre 1994 y 2001 internet sufrió una gran expansión comercial que provocó la pérdida de la integridad de los documentos a través de la creación de extensiones del lenguaje que pudieran dar formato a los requerimientos de los clientes en cuanto al diseño estético de sus sitios. Podemos imaginar facilmente que la especificación del HTML 2.0 delineada allá por 1995 quedó un poco estrecha, fue por ello que el HTML también evolucionó aportando cada vez más herramientas a los diseñadores y programadores de páginas hasta llegar al que conocemos hoy, el estándar HTML 4.01. Sin embargo estos estándares se encuentran relegados, por no decir que nadie les presta atención la web que conocemos es un agujero negro de información sin un patron semántico que nos permita rescatar ordenar y catalogar de forma usable el valioso contenido de sus páginas regadas a lo largo de su red.

Hace tiempo que el W3C, es conciente de este problema y ha delineado un par de acciones para la concresión de la tan ansiada Web Semántica. Por ejemplo recomienda la transición del HTML al XHTML el cual es considerado como el siguiente escalon en la evolución del hipertexto ya que vuelca al diseñador en el camino del XMLsin alejarlo de la sintaxis familiar del HTML. El XHTML reformula la sintaxis del HTML para convertirse en una aplicación XML, sumandole a las características del primero, como lenguaje de marcado, las de ser un lenguaje de contenido por lo que al pasar a XHTML estaríamos pisando terrenos de XML.

Pero… ¿Qué ventajas claras posee el XHTML sobre nuestro viejo amigo el HTML?

Para comenzar la información dentro de un XHTML es portable y legible por todos los sistemas que utilicen XML como estandar, esto también implica que la información es accesible.

XHTML permite la creación de tags propietarios que complementan los ya definidos en XHTML para enriquecer la información que se está presentando.

XHTML permite de una forma más terminante la separación entre contenido y formato a partir de la utilización de las CSS para maquetar, dejandole a los tags del XHTML un papel de mayor contenido semántico. por ejemplo podemos utilizar los siguientes tags para realzar el significado de su contenido:

• em: enfatizar el contenido
• cite: para delimitar citas de autores
• acronym: delimita las siglas y aporta su significado
• abbr: marca una abreviatura
• code: enmarca códigos como por ejemplo cuando queremos mostrar un código de programación

A la hora de crear un documento XHTML tenemos que tener en cuenta que:

• Los documentos XHTML deben incluir una declaración de "tipo de documento".
• El código debe estar en minúsculas.
• Los valores de los atributos deben ir entre comillas.
• Los tags no vacíos deben tener ser acompañados por su tag de cierre.
• Los tags vacíos deben llevar terminación.
• Los tags deben estar anidados ordenadamente
• Los valores de atributos iguales sin variantes no pueden ser simplificados.
• Existen elementos obligatorios.

Mayor información pueden encontrarla en XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)

Hasta la próxima.

Enlaces relacionados con el tema:

• A Framework for Understanding and Classifying Ontology Applications (1999) PDF
• RDF – Model and Syntax Specification
• Semantic Web – XML2000
• The Languages of the Semantic Web

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