En esta entrada vamos a ver 5 funciones que tal vez no sabías que se podían hacer con PostgreSQL pero que al saber cuándo y dónde utilizarlas nos puede simplificar el desarrollo de nuestras aplicaciones.

1. Un único query que retorne datos asociados de otra tabla.

Por ejemplo, listado de usuarios y los intereses de cada uno (que se encuentan en otra tabla)

Funciones: array_agg y array_to_string

select u.nombre, u.apellido
,(select array_to_string(array_agg(intereses),’,’) from usuario_interes where usuario_id = u.usuario_id) as intereses
from usuario u

Retorna los intereses como: “futbol,basket,tenis”

2. Obtener la cantidad total de registros afectados en un LIMIT sin necesidad de realizar otro query count(*).

Ideal para paginación de resultados, pudiendo colocar el total general de registros, más allá del total de cada página.

Función: OVER()

select nombre, apellido, count(*) OVER() as total
from usuarios
limit 10 offset 30

3. Obtener un valor determinado sobre un listado de elementos separados por un caracter común.

función: split_part

select split_part(‘a,b,c,d’, ‘,’ , 2);

Resultado: “b”

Ideal para parsear campos en donde se mantiene alguna normalización que permita obtener algún dato en particular. Por dar un ejemplo, un número telefónico separado por “-“, se puede obtener por un lado la característica y por otro la numeración.

4- Formateo de fechas y retornarlas en el uso horario correspondiente.

Cuando utilizar now() o current_timestamp para obtener la fecha del sistema, esta se va a guardar en el formato horario del servidor, que seguramente va a ser diferente al nuestro

select to_char(fecha_creacion AT TIME ZONE ‘-03:00′, ‘DD/MM/YYYY’) as fecha
from usuario

5- Como usar FullText Index, para realizar búsquedas ágiles y contextuales.

Útil para realizar un única búsqueda y que esta se realize en muchos campos, sin necesidad de utilizar un like por cada campo. Además la performance utilizando fulltext es muy buena y se puedan agregar lógica en las búsquedas.

Crear un campo en la tabla que contengan todos los valores por lo que se quiere ubicar el registro.

search varchar(512);

Crear un campo tsvector para poder indexar el contenido.

textsearchable_index tsvector;

Luego cada vez que se inserta o se actualizan los datos se debe realizar lo siguiente

UPDATE usuario set search = coalesce(nombre,”) || ‘ ‘ || coalesce(apellido,”) || ‘ ‘ || coalesce(email,”);

UPDATE usuario SET textsearchable_index = to_tsvector(search);

Para realizar las búsquedas se debe utilizar

select *
from usuario
where textsearchable_index @@ to_tsquery(‘Juan’)

select *
from usuario
where textsearchable_index @@ to_tsquery(‘Juan & Perez’)

select *
from usuario
where textsearchable_index @@ to_tsquery(‘Jua:*’)

Lo principal que se debe tener en cuenta para desarrollar esta página es tener claro el foco que se quiere dar, es muy diferente si estamos mostrando únicamente contenido informativo o bien queremos vender un producto, lo principal a tener en cuenta en ambos casos es un diseño profesional que muestre la importancia del sitio, mostrar claramente el producto o información y  algo que debe tener mucha importancia y no hay que obviar son los tiempos de respuestas.

Algunas cosas a tener en cuenta en el desarrollo de un landing page:

• El logo de la empresa debe ser lo principal, un título muy llamativo y texto bien organizado y breve, ya que como todos sabemos los usuarios no leen.  Adquirir la mayor confianza del usuario.
• El diseño debe ser creativo, debemos llamar la atención del usuario, pero lo principal es no distraerlo demasiado.
• Tiene que ser muy claro el punto de acción en la página que queremos transmitir, por ejemplo donde el usuario debe hacer click para adquirir un producto (click-to-action).
• Un formulario de contacto práctico, sin necesidad de solicitar demasiada información al usuario. “Registrate hoy y accede a …..”.
• Lo importante es ofrecer algún tipo de incentivo, oferta, descuentos, etc.
• Si es un producto, una foto de muy buena calidad, se debe seleccionar cuidadosamente las imágenes que se colocarán, ya que mejoran mucho la calidad de la página.
• No incluir enlaces que saquen al usuario de la página!.

Lo fundamental es obtener estadísticas e información que nos de la posibilidad de adaptar el diseño y distribución de los datos en la página según el comportamiento de los usuarios, necesitamos verificar como fué el impacto del landing page y de esta forma mejorar las conversiones.

Existe una herramienta que nos ayuda mucho en el intento de desarrollar un landing page perfecto, es el  Google Website Optimizer cuya función principal es realizar pruebas online en diferentes versiones de una misma página de forma aleatoria y analizar el comportamiento de los usuarios, permitiéndonos analizar los resultados y realizar los cambios necesario para el desarrollo del landing page. Esta herramienta es gratuita y Google garantiza la privacidad de la información.

Esta competencia trae aparejado en la euforia de salir victorioso la creación de sus propios estándares HTML para mostrar una clara diferencia con la competencia, dando un gran dolor de cabeza a los desarrolladores, ya que tenemos no solo que probar nuestro código en los diferentes browsers, sino que en muchas ocasiones adaptarlos por problemas de compatibilidad. FireFox es uno de los navegadores que más respeta la compatibilidad del código (salvo el recién salido Firefox 5 que ya nos hemos encontrado con diferencias en la visualización de algunos divs), así que diseñar y probar el código HTML en FireFox es una forma de asegurarse un código estándard. También el Chrome es un muy buen navegador que trae de forma nativa herramientas que ayudan a los desarrolladores a identificar los problemas.

En Braintive enfrentamos esta problemática basándonos siempre en los estándares HTML brindados por el W3C (The World Wide Web Consortium), una comunidad  internacional que trabaja para desarrollar estándares web, liderado por el ‘inventor de la web’ Tim Berners-Lee. La comisión además de brindar documentación y guías, posee una herramienta para realizar validaciones de nuestro código HTML e informarnos de las diferencias de compatibilidad, una herramienta muy útil para desarrolladores y diseñadores.

Cada desarrollo que realizamos es testeado no solo por el sector de control de calidad, sino también utilizamos una serie de herramientas que verifican la visualización del contenido HTML resultante en los diferentes navegadores, así como también como nos visualizarían los robots de búsqueda de Google, Yahoo, etc..

Un referente nuestro de usabilidad es Jakob Nielsen y citando su cuarta heurísticas de usabilidad dice:

Consistencia y estándares. Los usuarios no deben tener que preguntarse si las diversas palabras, situaciones, o acciones significan la misma cosa. En general siga las normas y convenciones de la plataforma sobre la que está implementando el sistema.

El futuro nos trae aún más problemas de compatibilidad y dolores de cabeza para los desarrolladores, el nuevo HTML5 y su soporte en cada navegador!.

La lentitud de la carga de la página web está básicamente relacionada con el peso o tamaño del html, imágenes, javascript y los diferentes objetos que se carguen, la idea principal es optimizarlo lo más que se pueda y disminuir la cantidad de peticiones que se hacen desde el navegador hacia el servidor, así como también el peso general de todo el contenido.

Existen muchas herramientas que ayudan a medir los tiempos y dan diferentes recomendaciones para poder mejorarlos eficientemente, un ejemplo es el Page Speed creado por Google que tiene una serie de extensiones para FireFox y Chrome, también posee una versión online.

Algunas cosas que deben tomarse en cuenta para optimizar las páginas son:

1. Implementar CSS Sprites, que consiste en generar una única imagen a partir de varias imágenes que se visualizan en una página y luego por medio de estilos mover parte de la imagen que se desea mostrar. Con esta técnica se reduce la cantidad de peticiones que se realiza hacia el servidor ya que únicamente se necesita una sola imagen.

2. Especificar las dimensiones de cada imagen, por medio de los atributos width y height de la etiqueta IMG.

3. Disminuir el tamaño de las imágenes lo más que se puede, tratando de no perder mucha calidad. Existen aplicaciones que optimizan las imágenes para que sean visualizadas via web.

3. Habilitar compresión gzip sobre el contenido estático, imágenes, archivo de estilos css, js, etc. El ahorro del tamaño de cada archivo es muy grande, se comprime alrededor de un 70%, dependiendo las configuraciones que se establezcan dentro del web server.

4. Utilizar paralización en la carga de imágenes, si todas las imágenes se encuentran en un único dominio, el browser va a ir encolando cada petición hasta cargar todas, en cambio sí se utilizan varios dominios el browser las solicita de forma paralela desde cada dominio img1.sitio.com, img2.sitio.com, etc. Se puede utilizar servicios externos para alojar las imágenes, por ejemplo Akamai.

5. Reducir el tamaño del archivo de estilos css y los archivos JavaScript, eliminar el código que no sea utilizado. Eliminar espacios, tabulaciones, comentarios, tamaño de variables, enters, etc., para que el archivo pese lo menos posible. Existen aplicaciones que ayudan a comprimir el contenido.

6. Habilitar el cache dentro de los dominios que sirven contenido estático (imágenes, css, javascript, etc).

7. Brindar el contenido estático desde dominios con cookies deshabilitadas, para reducir el tamaño de cada solicitud al servidor.

8. Verificar el html, primero que nada debe cumplir con las validaciones de la W3C, todo el código debe ser estandard. No abusar del uso de etiquetas que puedan ser reemplazadas por otras o por un manejo dentro de los estilos, evitar utilizar tabulaciones, contenido en mayúscula, tratar de poner todo en una sola línea. Todo lo que pueda sumar para reducir el tamaño general del html.

9. No abusar de la utilización de librerías de jQuery, no incluir archivos js que no son utilizados o únicamente se utilizan pocas funcionalidad, a veces es mejor desarrollar nuestras propias funciones y no incluir un GRAN archivo que contiene demasiadas cosas que  no son utilizadas.

10. Poner la inclusión de los archivos javascript al final?, esto es algo que realmente me genera ruido, aunque es una sugerencia que ya anda dando vueltas hace bastante, la idea es evitar el bloqueo de las solicitudes, al colocarlo al final se puede descomprimir un poco la carga. También se esta hablando mucho de “Deferred Javascript”, la carga diferida permite descargar scripts después que la página se ha cargado, lo que reduce las solicitudes de vuelta en la red con el servidor, para esto les dejo un link para que se entretengan un poco.

Un dato importante es que el tiempo promedio de carga en la web es de aproximadamente 2.5 segundos, siempre intentemos estar por debajo de ese número.

Jakob estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que denominó las “reglas generales” para identificar los posibles problemas de usabilidad.

1. Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.
2. Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
3. Control y libertad del usuario: hay ocasiones en que los usuarios elegirán las funciones del sistema por error y necesitarán una “salida de emergencia” claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.
4. Consistencia y estándares: los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.
5. Prevención de errores: mucho mejor que un buen diseño de mensajes de error es realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.
6. Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones, El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.
7. Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes.
8. Estética y diseño minimalista: los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de información relevante y disminuye su visibilidad relativa.
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.
10. Ayuda y documentación: incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

Estas reglas son las claves para poder facilitar el uso de cualquier persona, no solo dentro de los sitios web, sino en cualquier sistema de información.

 

no contar con un formulario adecuado, más allá del tipo de producto o contenido que esté brindando.

El radio de conversión mide el porcentaje de visitantes que logran realizar una determinada acción dentro de una página, por ejemplo cuantos visitantes logran realizar el envío del formulario de registración.

Esto es lo primero que debemos medir, cuál es nuestro porcentaje de conversión dentro de una registración, aquí nos vamos a dar cuenta en primera instancia qué cantidad de registros se están perdiendo. Por ejemplo si contamos con 100 visitantes diarios dentro de la registración y solo tenemos el 10% de conversiones (que hayan finalizado el proceso de registración), estamos perdiéndonos 90 registraciones diarias.

Cuando desarrollamos la registración, pensamos que cada objeto colocado tenía un propósito determinado y suponemos que el usuario lo entendería, pero en muchas ocasiones esto no sucede, los formularios no son claros y las acciones sobre los mismos no se comprenden.

Lo primero que se debe analizar para mejorar el porcentaje de registración es determinar si existen elementos dentro del formulario que pueden ser eliminados, tal vez estamos solicitando información de más, no relevante o privada que el usuario puede no querer ingresar y por dicho motivo fracasar la registración. Mientras más extenso sea el formulario, menos posibilidades se tiene de llegar a realizar el envío de los datos con éxito. Minimizando el ingreso del formulario ya vamos a notar un incremento del porcentaje de registración.

Otro punto muy importante son los textos y títulos, se conoce que los usuarios no leen los mensajes que se visualizan en la pantalla, por lo tanto se debe colocar mensajes precisos, claros y destacados donde corresponda y se debe brindar ayuda en campos que se consideren difíciles de entender.

Evitemos el envío de los datos que contienen errores, para luego refrescar la página y mostrar un largo listado de mensajes de validación, lo ideal es que el formulario se valide a medida que los datos son ingresados, para evitar el ‘post’ innecesario de los datos inválidos. Para realizar estas validaciones se puede utilizar Ajax y librerías de validaciones que son fáciles de implementar con jquery.

Hasta este momento podemos mejorar el porcentaje de registración, pero nos estamos perdiendo de un análisis más profundo en donde vamos a poder acceder a una cantidad muy importante de mejoras que ayudarán considerablemente a mejorar las conversiones. Existe una herramienta, entre otras, muy importante llamada ClickTale que nos permite ver un poco más allá y acceder a información que nos ayudará a mejorar los formularios. Esta herramienta nos permite obtener información sobre la experiencia que el usuario tuvo dentro del site.

Mapa de calor

Permite observar el movimiento que el usuario realizo con el mouse dentro de la página, dándonos una idea importante sobre la atención, dentro de un browser el movimiento del mouse emula la vista y nos da información sobre la ‘atención del usuario’.

Esto nos ayudará a reposicionar los objetos dentro del formulario.

Monitor en tiempo real

Permite acceder a grabaciones en donde se visualiza exactamente lo que el usuario realizó dentro del formulario, movimientos, datos ingresados, clicks, etc.
Hay una gran cantidad de datos que no nos llegan debido al fracaso de la registración, por ejemplo viendo estas grabaciones podemos darnos cuenta que existen varios usuarios que ingresan dentro del campo ‘número de calle’ el texto ‘km 25, sin numeración, etc.’ y nuestra validación solo permite números enteros. Gracias a esta información podemos darnos cuenta de un error al momento de plantear las validaciones del formularios y asumiendo que siempre debería venir un tipo de dato específico.

Esto nos hace dar cuenta de defectos del formulario, que no podríamos ver de otra manera, ya que no accedemos a los registros fallidos.

Errores javascript

Brinda información de todos los errores de javascript que sucedieron, muchas veces estas son cosas fundamentales por las cuales fracasa la registración y no nos damos cuenta ya que suceden en determinados momentos puntuales con datos precisos. De esta forma podemos acceder al error y correguirlos.

Analisis de formularios

Una de las funciones más importantes de esta herramienta es poder medir exactamente los porcentajes de conversión y que cantidades de intentos fracasaron en cada paso del tunel, esto nos da información muy importante.

Cuales son los campos en donde más tiempo pasa el usuario, esto ayuda a determinar la causa, ¿no se comprenden?, ¿datos difíciles?, ¿tiene que ir a buscar algún dato en otro lado?

Datos que son eliminados y vueltos a ingresar. (refill), ¿porque los usuarios necesitan modificarlos?

Que campos se dejan en blanco, si el porcentaje es muy grande tenemos que preguntarnos si son útiles realmente.

Campos que contienen datos originalmente en el formulario y el usuario los cambia. Si el porcentaje es muy grande, seguramente debemos cambiar el dato default.

Por supuesto que antes de colocar un formulario de registración debemos realizar todo un análisis de usabilidad y realizar todas las pruebas necesarias hasta obtenter un formulario sin errores y optimizado en profundidad, pero no siempre se cuenta con los recuersos necesario, con esta herramienta podemos obtener una ayuda muy importante.

Es fundamental para incrementar la cantidad de accesos que nuestro sitio sea mostrado en los primeros resultados de los buscadores, ya que el usuario evita la paginación, generalmente lo que no se visualiza en la primer página, no es accedido.

Existen muchas referencias en internet de cómo incrementar el posicionamiento y muchas empresas a las que se pueden contratar para que nos den un informe de todas las cosas que debemos mejorar en nuestro sitio web para que sea mejor indexado por los buscadores.

Cada buscador posee robots que diariamente inspeccionan los documentos web en internet para mantener actualizada la base de datos de los motores de búsqueda, por ejemplo en el caso de Google, es el GoogleBot.

20 TIPs que utilizamos en Braintive para mejorar el posicionamiento orgánico de nuestros sitios web dentro de los buscadores:

1. Todas las páginas deben tener un TITULO y DESCRIPTION diferentes, etiquetas title y description de la cabecera head. Estas etiquetas son las que primero se van a indexar por los buscadores, al igual que la URL.
2. Tener URLs semánticas o amigables, esto sería lo más difícil de implementar en un sitio que no fué pensado originalmente de esta forma, ya que no solo se debe aplicar una regla de re-escritura en el web server, se debe reprogramar la forma en que armamos los links. Una url semántica debe describir la url sin tener códigos o IDs internos, por ejemplo http://dominio/notas/mejorar-el-posicionamiento-por-medio-del-seo. Para esto se utiliza dentro de los web servers lo que se denomina módulos urlrewrite.
3. Tratar de tener la mayor cantidad de links de otros sitios de buena categoría que apunten a contenido de nuestro sitio.
4. Generar contenido único, no copiar contenido de otros sitios y colocarlos en el nuestro.
5. El código HTML debe estar bien estructurado, existen validadores que nos pueden ayudar a que sea lo más standard posible.
6. Evitar que nuestro sitio contenga contenido en Flash, ya que este no puede ser indexado por los buscadores.
7. Evitar que los textos sean parte de imagenes, lo ideal es que contenga la mayor cantidad de texto indexable.
8. Estructurar correctamente las etiquetas h1, h2, h3… según la importancia de los textos dentro del contenido, h1 para los títulos, h2 para los subtítulos, etc..
9. Todas las etiquetas IMAGE deben tener el atributo ALT con la descripción correspondiente y la etiqueta A debe contener el atributo TITLE.
10. No utilizar frames dentro de nuestras páginas y se utilizan que contengan los atributos descriptivos que informen de que se trata el marco.
11. Evitar links rotos (error 404), si tenemos links que ya no existen más, deben ser redireccionados por medio de una respuesta 301 (redirect) para informarle a los buscadores del cambio.
12. Intentar que nuestro sitio cargue cada página lo más rápido posible, para esto existen herramientas que nos ayudan a identificar y mejorar los tiempos de carga, como la extensión PageSpeed para FireFox.
13. Por medio de herramientas para webmaster, que cada buscador posee, se puede acceder ‘a como nos están indexando’, por ejemplo el Google WebMaster, donde permite restringir urls, saber que contenido esta duplicado, entre otras cosas.
14. Eliminar links a sitios de baja categoría, evitar tener accesos desde nuestro sitio a sitios externos que no poseen una buena categoría dentro de los buscadores. Se puede utilizar el atributo rel=”nofollow” dentro de la etiqueta anchor.
15. Generar un sitemap con todas las páginas que queremos sean inexadas, muchas de estas pueden no ser accedidas normalmente por los usuarios, para esto se puede barrer nuestra base de datos y generar cada link con los parámetros que corresponden. Como crear el sitemap para google.
16. Restringir las páginas que no queremos que sean indexadas y determinar también los horarios de visitas de los robots, para que, por ejemplo, no influyan en la performance de nuestro sitio. Se utiliza para esto el robots.txt
17. No nos volvamos locos por tener un buen PageRank, esto ya no es lo más importante para la indexación en Google.
18. Minimizar la cantidad de links que se deben pasar hasta llegar a la página final.
19. No utilizar javascript para realizar redirecciones entre páginas.
20. No engañar a los buscadores!, no intentes trucos que estan dando vueltas por internet, tarde o temprano los buscadores se van a dar cuenta y te bajaran la categoría.

Es fundamental seguir de cerca los resultados de estas optimizaciones para ir ajustándolos sobre la marcha.

El término se asocia directamente con la idea de compartir  información y la colaboración que los usuarios generan. Hablamos de wikis, blogs, fotoblogs,  redes sociales, etc.

Para mi el término web 2.0 debería asociarse directamente con una solución técnica que se pudo lograr con el avance de la tecnología utilizada para el desarrollo web y no con una idea revolucionaria de colaboración. Todos hablan de la web 2.0 como algo nuevo que surgió en los últimos años, cuando podríamos compararlos perfectamente con ideas del pasado.

Si nos remontamos hace 12 años atrás o más, nos encontraríamos con un llamado ‘portal horizontal’ como El Sitio, que era un lugar de entrada para una variedad muy grande de servicios que se brindaban a los usuarios, en donde muchos de esos servicios podríamos asociarlos hoy en día con sitios 2.0.

En ese entonces en Argentina (como en Latinoamérica) no se tenía un acceso general a  banda ancha, los usuarios utilizaban acceso mediante dial-up y el contenido era muy lento de cargar.

Podríamos hacer un paralelismo entre el ayer (El Sitio) y el hoy (Web 2.0).

CupidoNet = Facebook

Chat 3D = Second Life

Habitantes = Blogs

La cara del sitio = FotoBlogs

El problema principal por la cual los viejos portales horizontales no pudieron continuar hasta hoy fue por la falta de tecnología para resolver ciertas problemáticas de forma práctica y rápida, además lo pobre que era la velocidad de conexión a Internet. Como anécdota recuerdo que en ese entonces un problema grave para el Chat 3D (algo totalmente revolucionario en ese entonces, creado por El Sitio) fue que el plugin pesaba alrededor de 80kb para bajarlo, un peso que hoy es insignificante!.

Tanto Alfred como Yo, tuvimos el honor de participar en todos los avances tecnológicos que tuvo Internet en los últimos 15 años, fuimos parte del crecimiento y ayudamos al mismo desde nuestro humilde lugar.

Desde Braintive le deseamos un muy feliz día a INTERNET.

La accesibilidad en un sitio web se refiere a la capacidad del mismo para ser accedido por cualquier persona independientemente de sus limitaciones físicas (por ejemplo la discapacidad visual), también hace referencia no solo al acceso, sino también al uso, donde toca ya cuestiones de ‘usabilidad’.

Prácticamente nadie toma en cuenta esta premisa a la hora de desarrollar un sitio web y suponen que las personas detrás podrán acceder sin problemas al contenido, sin darse cuenta el potencial que tiene un sitio que puede ser accedido por cualquier persona, ya que los accesos en definitiva se traducen de alguna manera a un valor de retorno.

Por ejemplo, suponemos que una persona podría estar viendo un determinado botón de acceso al contenido, de un color, forma o tamaño pensado para  alentar al usuario a hacer click, cuando en realidad esta persona podría estar trabajando con el monitor apagado, ya que es una persona ciega. ¿Cómo puede ‘ver’ entonces el botón?,  son utilizados programas que leen el contenido y avisan al usuario donde pueden hacer click, el botón como figura no genera ningún valor, ya que no puede ser visto, el valor aquí lo genera el texto.

Las personas ciegas o con disminución considerable de la vista utilizan programas que leen el contenido de la página web y de esta forma pueden navegar sin problemas, se sorprenderían observar como ellos trabajan con el monitor apagado y pueden perfectamente ‘visualizar’ cualquier contenido. Un software utilizado para esto es el JAWS

En muchos países ya existe legislación que obliga a determinas páginas de organismos públicos o de algunas empresas a brindar contenido accesible en sus sitios web. El WAI (Web Accessibility Initiative) grupo perteneciente al W3C (The World Wide Web Consortium) también creó pautas para ayudar a desarrollar contenido accesible.

No es necesario sacrificar el diseño a la  hora de hacer un sitio web accesible, simplemente hay que seguir una serie de pautas para guiar el diseño de páginas web a un diseño accesible. Algunas ideas que implementamos en Braintive a la hora de desarrollar un sitio web, para no limitar el acceso de nadie al contenido:

• Todas las páginas deben tener la etiqueta de cabecera TITLE, explicando lo que el usuario va a encontrar, por ejemplo: Página principal, Listado de productos.
• Usar correctamente las etiquetas h1, h2, .. donde debe informar la importancia que tienen los títulos y textos dentro de la página.
• No utilizar tablas para centrar textos o colocar secciones, las tablas deben ser utilizadas para grillas, el posicionamiento de texto se deben realizar por medio de estilos css.
• Utilizar la etiqueta ABBR para brindar detalles sobre abreviaciones, por ejemplo si el texto dice cant. se debe informar que el texto correcto es ‘cantidad’.
• Todas las imágenes deben tener el atributo ALT con el texto al que hace referencia la imagen, si el botón es una imagen que dice ‘Aceptar’, el atributo ALT debe tener el mismo texto. Si se requiere mayor detalle se debe utilizar el atributo LONGDESC
• Los links deben tener el atributo TITLE informando la acción que genera el click, más allá del texto, por ejemplo si link dice ‘compras’, el atributo TITLE debería contener ‘Listado de mis compras mensuales’.
• No utilizar palabras comunes para definir links, como ‘aquí’, utilizar frases más descriptivas dentro de los links.
• Definir atajos de teclado en los links, atributo ACCESSKEY.
• Si se utilizan FRAMES se debe colocar el titulo descriptivo en el atributo TITLE.
• Los listados de selección o navegación deben ser colocados dentro de las etiquetas UL y LI, luego por medio de los estilos css se brinda un correcto diseño.
• Dentro de los formularios se debe utilizar etiquetas standards que son interpretadas por todos los lectores web, que luego por estilos css se puede colocar el diseño acorde al sitio web. Estas son: LEGEND, FIELDSET, LABEL. Por ejemplo la etiqueta LABEL relaciona el texto con el elemento del formulario.
• Tener en cuenta los colores que se asignarán a los botones, existen programas para evaluar como un daltónico los visualizará.
• Dar la posibilidad de agrandar el texto de las letras, por default deben tener un tamaño correctamente legible.
• Si se utiliza javascript, tener un plan B que funcione con javascript desactivado, ya que es posible que algunos lectores no lo soporten.
• Evitar el uso de FLASH! aunque las versiones nuevas de flash y componentes que se agregan a la hora de desarrollar dicen poseer soporte de accesibilidad, existe la posibilidad de incompatibilidad en la lectura del flash por medio del navegador que utiliza el usuario que tienen inconvenientes de accesibilidad. El FLASH es un binario (plugin) que no tiene las etiquetas estándares de HTML por lo tanto imposibilita la lectura por medio de los programas utilizados por personas ciegas para interpretar el contenido web.

No hay que considerar pérdida de tiempo en implementar estas técnicas, es fundamental no limitar el acceso al contenido.

Google tiene una influencia muy grande sobre las costumbres de los usuarios y las exigencias
de los mismos, ya que nos acostumbra a que dentro de la primera página de resultados se encuentre realmente lo que necesitamos encontrar.

Según Jakob Nielsen, una de las personas más respetadas en el ámbito de usabilidad en la Web: “La gente quiere sitios que los lleve, sin rodeos, al punto. Tienen muy poca paciencia“, “Los usuarios de internet siempre han sido despiadados y ahora lo son más que nunca“.

Los resultados no deben ser una lotería ni un índice telefónico, tienen que tener un determinado orden de relevancia. Google cambió los típicos resultados ordenados alfabéticamente por resultados ordenados por relevancia, los resultados que tienen más chances de ser seleccionados por el usuario deben ir al comienzo y así sucesivamente hasta la página 2.412 (que nadie va a visitar), esto hace inevitablemente que los buscadores internos que poseen los sitios web se adapten.

Ahora bien, “¿Cómo ordeno mis resultados por relevancia?”, no es tarea fácil pero voy a dar algunos TIPs que pueden ayudar mucho.

• Si hablamos de compras, ordenar los resultados que corresponden a compras habituales del usuario.
• Ordenar los registros de acuerdo a la cantidad de accesos que tuvieron, los registros más accedidos tienen mayor relevancia. Otros usuarios deben ayudar a establecer el orden,  si la mayoría está buscando ”algo” y hacen click en un determinado registro, este tiene un valor agregado que debe tomarse en cuenta para valorizar la relevancia.
• Llevar un registro de lo que el propio usuario busca habitualmente y donde hace click, para luego valorizar el término buscado frente a los registros que corresponden.
• Un producto en oferta o en una determinada promoción puede interesar al usuario.
• Restar relevancia a los resultados que contienen palabras que están seguidas de una preposición, es decir si el usuario busca “XXX” y el texto dice “AAA de XXX”.
• Sumar relevancia si la palabra buscada se encuentra al comienzo del nombre principal del registro encontrado.
• Si las búsquedas se realizan sobre textos, libros, etc., se debe valorizar la cantidad de veces que el término buscado se encuentra dentro del texto. Si aparece 100 veces tiene mayor relevancia que 5 veces. Los servicios que poseen los principales motores de base de datos tienen funciones que realizan este ranking.
• Dar mayor relevancia si el término buscado hace referencia a la “marca” en el caso de productos o a las etiquetas (tags)
• No ordenar los resultados de acuerdo a la ganancia que nos dejaría el registro, no ordenar por márgenes de venta. Tenemos que retornar los resultados que el usuario necesita y no lo que nosotros queremos darles.
• Dar la posibilidad de que el usuario reordene los resultados por otros métodos, nombre, precio, marca.
• Siempre se debe mostrar la cantidad de resultados encontrados y la cantidad que son visualizados por página.
• La velocidad de respuesta es muy importante, pero más importante es la calidad de los resultados.

* Hay que tener en cuenta que se deben adaptar estas ideas al tipo de “producto” que estamos vendiendo o queremos mostrar en nuestro sitio. Cada lógica debe sumar o restar sobre un ranking que luego debe tomarse como orden de los resultados.

Sobre los términos ingresados por el usuario:

• Relacionar términos de búsquedas con términos reales, por ejemplo coche con automóvil .
• Tomar en cuenta los plurales y singulares. Toda búsqueda debe obtener los mismos resultados tanto con palabras en singular que en plural.
• Eliminar las palabras aburridas o conocidas como “Ignored words”, por ejemplo las preposiciones, no generan relevancia alguna sobre la búsqueda, ya que las descripciones pueden variar con los términos buscados por los usuarios. El usuario puede buscar “Libro sobre la guerra civil“ y el texto del site registro dice “Libro de la guerra civil”.
• Tener en cuenta la ortografía, el usuario puede cometer errores al escribir una palabra. Lo ideal es corregir automáticamente las palabras por medio de algún diccionario o bien utilizar “soundex” (algoritmo fonético).

El buscador debe retornar los resultados que el usuario quiere encontrar y no lo que nosotros queremos mostrar.

Citando nuevamente a Jakob: Cuando observas a la gente buscando algo, con frecuencia ves que no obtiene los resultados que quería, en el largo plazo, quien quiera superar a Google sólo tiene que crear un mejor sistema de búsquedas.

Un buscador vertical, es un buscador que se especializa en un determinado sector concreto, lo que permite analizar con mayor detalle la información y obtener resultados más actualizados y relevantes para el usuario. Implementar este concepto en buscadores internos en los sitios web es una forma de brindar al usuario resultados de mayor calidad.