ModernCaptcha: captcha con usabilidad

ByLuis

Si el otro día mostrábamos un ejemplo de CAPTCHA, ahora mostramos un ejemplo de CAPTCHA en el que no se trata de reconocer un texto deformado, sino de asociar un logotipo a un nombre. Así por ejemplo saldría el logotipo de Sentido Web y el usuario debería seleccionar “Sentido Web” de una lista de nombres.
La idea es buena, ya que un impedido visual tendría problemas para reconocer el texto deformado, que ya de por sí nos cuesta reconocer al resto. Pero le encuentro un problema, se supone que el CAPTCHA está hecho para que procesos OCR automáticos, pero o bien se tiene una lista de logotipos enorme, o se podría reconocer la imagen del logo con el nombre correspondiente.
Así, sin pensarlo mucho, se podría hacer la media de cada componente RGB de cada pixel de la imagen para asociarla a cada nombre, claro que si la imagen se cambiara de tamaño o se rotara se evitaría este “ataque”, aunque sería ponerse a buscar otro algoritmo más eficiente, que seguro que se pueden encontrar por internet.
ModernCaptcha – when captcha meets usability
Vía / dzone

Similar Posts

| | | |

Cómo destacar en el menú de navegación el acceso en que nos encontramos

ByLuis

Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos.

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative

Evitar spam en formularios mediante Javascript

ByLuis

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

| |

Interfaces Google: Douglas Bowman, usabilidad, rediseños…

ByLuis

Este sábado Douglas Bowman, por si alguien no le conoce, uno de los mejores desarolladores web ampliamente conocido por su labor en la promoción de los estándares web especialmente desde su blog y creador, entre otras obras maestras, de la versión actual de Blogger, confirmaba que se va a Google para desempeñar un cargo creado para él: Visual Design Lead en el que será el responsable de las interfaces de los productos colaborativos y de comunicación como Calendar, Writely, Gmail Page Creator, y el mencionado Blogger.

¿Google quiere dejar de ser feo?. No. Nunca ha sido feo, aunque le ataquen por ahí “pseudo-gurus insulsos” como apunta Armando Sosa. Google ha estado tradicionalmente mal maquetado y ahí Bowman con su experiencia en interfaces sociales, además del talento gráfico ¿por qué negarlo?, al servicio siempre de la “usabilidad Google” encajan a la perfección. Lástima que las tareas de Bowman no incluya la maquetación del buscador.

Siguiendo con la usabilidad…

Este artículo de Don Norman y el más reciente publicado por Derek Powazek en los que critican la usabilidad y el diseño de la home del buscador comparándola con MSN Search y Yahoo solo generan confusión. Joshua Porter repasa los dos textos y aporta opiniones muy interesantes:

The success of Google doesn’t come from their sparse homepage, their goofy logo, or by “deception”. It comes from the ability to consistently give relevant results to our queries… end of story.

For Google to change its design strategy to satisfy the whim of a few designers would be suicide. It would ignore their amazing success to date, erode the emotional attachment of the people who use it, and start them down the slippery slope of compromising a simple, easy-to-use search engine.

¿Rediseños de la home de Google como el que propuso Andy Rutledge pueden ser un suicidio?. Es más estético. Con niveles de información mejor jerarquizados, pero que a priori, a falta de análisis con usuarios, tendería a la distracción. Principalmente, con los azules de fondo y los contenidos de la parte inferior.

google_redux.gif

Volviendo al fichaje de Bowman. Una prueba más de que la vanguardia en la industria del diseño web se encuentra en la blogosfera y que las interfaces sociales, en las que por definición pasaremos mayor tiempo navegando, han de ser además de muy eficaces como todas, “enamorar” visualmente.

Dicho esto, sin contenidos no hay diseño pijo que te salve.

| |

Cómo hacer una tag cloud ‘perfecta’

ByLuis

tagcloud.pngAlgo típico de la Web 2.0 son las tag clouds o nube de etiquetas, las cuales muestran las etiquetas definidas en nuestra sitio, variando el tamaño de la letra según la relevancia del tag.
Se trata de algo muy vistoso y que cumple bien su objetivo, acceder a lo más importante de forma rápida. El problema está cuando queremos implementar nuestra propia tag cloud (claro, que nos podemos dejar de romper la cabeza y buscar alguien que ya lo haga). Por ejemplo, si la nube tiene scroll, ya sea por la cantidad de tags o por la ventana del usuario, la finalidad de que los más destacados sean los más visibles puede fallar si alguna etiqueta importante queda oculta por el scrolling.
Con este problema y muchos otros se ha encontrado Kevin Hoffman y por ello se ha creado un documento en el que explica cómo resolver esos problemas (o al menos intentarlo).
Whitepaper : In Search of the Perfect Tag Cloud
Via / dzone

| |

Laboratorio: filtrado de tablas

ByLuis

Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
filtrado-tablas.png

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “líquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
filtro.gif

Read More “Laboratorio: filtrado de tablas”

| |

Posicionamiento y estilo de las imágenes en los lectores RSS

ByLuis

Este verano cuando hicimos las plantillas (web de uso interno) de Blogia 2.0, uno de los elementos que cuidamos fue el de dar estilo a las imágenes cuando el autor elige la posición de la imagen desde el editor WYSIWYG.

cssimg-feeds.jpg

Desde entonces, nos preguntamos por qué los lectores RSS, sobre todo los on line, no incluyen unas líneas de CSS para respetar el posicionamiento de las fotos que incluimos en los posts. Requerería de una estandarización ya usada ampliamente por muchas css blogueras pero no en la de los lectores de feeds.

Con 3 clases sería más que suficiente:

/* --- Img's post -------------------- */
img.left, img.right, img.center {
border: 3px solid #d0dfc3;
padding: 3px
}
img.left {
float: left;
margin: 0.5em 1em 0.5em 0;
}
img.right {
float: right;
margin: 0.5em 0 0.5em 1em;
}
img.center {
margin: 0 auto 10px auto;
display: block;
text-align: center
}

Que sepamos, solo Bloglines contempla img.left pero sin preocuparse excesivamente de darle un estilo cuidado.