Outbook: diseño web, usabilidad, y documentación

jueves, junio 25, 2009

Enmascaramiento de contraseñas en los formularios

Actualizado 2009-06-30.

Según Jakob Nielsen Ocultar los caracteres de un campo de contraseña (mediante <input type="password" id="ejemplo" name="ejemplo" />) puede ocasionar algunos problemas. Considero que se pasa un poco, de modo que expongo los que creo que son más importantes:

  • El usuario no ve lo que está escribiendo, lo que facilita que se equivoque.
  • Utilización de contraseñas más sencillas a la vez que inseguras o uso del copiar-pegar para introducir la contraseña.
  • En dispositivos móviles, en los que la escritura es más incómoda e imprecisa el usuario puede desesperarse, pensando si habrá tecleado bien.

He de aclarar que en bastantes dispositivos móviles en los campos de contraseña el caracter introducido está visible durante un breve espacio de tiempo, pero puede que no sea suficiente.

Nielsen también menciona que ocultar los caracteres de contraseña puede hacer que los usuarios se desanimen a entrar en un sitio web. Esto me parece un poco exagerado.

Puede que sea interesante dejar visibles los caracteres de los campos de contraseña, pero, si nos decantamos por esa opción habrá usuarios que no se sientan seguros, ya que la contraseña será visible por otras personas (imaginemos punto de acceso a Internet en un lugar público). Aquí Nielsen sugiere el uso de un checkbox para activar o desactivar la ocultación de los caracteres.

Ejemplo en Winzip

Capturas de la pantalla de encriptación de WinZip 12, en las que se puede apreciar la casilla que alterna la contraseña visible u oculta:

Ventana de encriptación de WinZip 12 con contraseña oculta

Ventana de encriptación de WinZip 12 con contraseña visible

Enlaces relacionados

Etiquetas: , , , ,

enviado por jervert el jueves, junio 25, 2009 | 4 comentarios

miércoles, junio 17, 2009

Opera Mobile 9.7 beta

Opera ha lanzado la beta de la versión 9.7 para Windows Mobile.

Trae novedades como Opera Turbo, aceleración por Open GL y mejor renderizado de las páginas.

Yo lo he instalado en un HTC Diamond, en el que como ya traía una versión integrada en el sistema no la sobreescribe, y los accesos directos siguen apuntando a dicha versión. Para ejecutar la 9.7 habría que ir con el explorador al directorio donde se haya instalado y ejecutar OperaL.exe. En este dispositivo, la nueva versión tiene un rendimiento notablemente superior al de la 9.5.

Etiquetas: , , ,

enviado por jervert el miércoles, junio 17, 2009 | 0 comentarios

lunes, junio 01, 2009

Unión Europea: la nueva URSS

Ya está otra vez la Unión Europea con que Microsoft no incluya el Internet Explorer en Windows.

Es que es absurdo. Internet Explorer viene con Windows igual que Firefox viene con Ubuntu o Konqueror con Kubuntu (y a los Linux nadie les está diciendo que no dejan elegir al usuario).

Microsoft ha cedido en lo que debía, en la posibilidad de desactivar Internet Explorer (en Windows 7). ¿Pero por que no puede incluir lo que le de la gana en su sitema operativo?

Yo le sugiero a ese nido de ratas burócratas-intervencionistas que es la Unión Europea que vaya un pasito más allá: creen ustedes un navegador de la Unión Europea, cobren a los usuarios un impuesto por usarlo (a todos los ciudadanos, lo usen o no lo uses, que así sería más injusto, tal como a ustedes les gusta) y que el navegador descargue desde un servidor central de la UE una lista de sitios prohibidos (ya saben, todos aquellos que sean contrarios a la Unión Europea, el intervencionismo el islam, el progresismo, el ecologismo o la masonería, grupos con el que ustedes se identifican plenamente).

La UE cada vez se parece más a la URSS:

  • Planificación de la economía al más puro estilo soviético (¡Muérete de envidia Stalin!)
  • Ausencia de democracia en el poder ejecutivo. ¿Quien elige al gobierno de la UE?
  • Si en un referendum la población dice NO, volvemos a convocar una y otra vez hasta que digan SI (véase Irlanda y el Tratado de Lisboa). Y si vemos que van a seguir diciendo NO, pues les amenazamos y ya está.
  • Un parlamento elegido en elecciones democráticas pero que solo sirve como fachada democrática (pura apariencia).

La caída del muro de Berlín no fue la derrota del comunismo. El comunismo dejó el cuerpo muerto e inerte que era la URSS y se reencarnó en la que por entonces erá la Comunidad Económica Europea.

El muro de Berlín no protegía a la URSS del mundo libre, sino que protegía al mundo libre de la URSS. Y hoy lo vemos demostrado.

La UE huele muy mal.

Etiquetas: , , , , ,

enviado por jervert el lunes, junio 01, 2009 | 4 comentarios

lunes, mayo 11, 2009

Decálogo de maquetación web

Diez consejos útiles que mejorarán ostensiblemente la accesibilidad de un sitio web:

  1. Utilización de encabezados (H1-H6) para estructurar el documento y utilizar adecuadamente los párrafos y listas. En los encabezados no se saltan niveles. Cuando una lista tiene un solo elemento no es una lista: es un párrafo.
  2. Los textos de los enlaces habrán de ser descriptivos de la acción que realizan, y deberán avisar si se abren en ventana nueva.
  3. Maquetar con capas (elementos DIV), en lugar de con tablas.
  4. Utilizar Javascript no intrusivo y que su presencia no sea obligatoria: todo el contenido y la funcionalidad del sitio deberá estar disponible sin necesidad de Javascript. No utilizar atributos HTML (onclick, onmouseover, etc.) para eventos de Javascript.
  5. Utilizar colores de fondo y de texto que hagan un buen contraste.
  6. No utilizar imágenes con texto, salvo en logotipos. Utilizar fuentes de sistema para evitar ese mal uso de las imágenes.
  7. Toda imagen que tenga contenido informativo deberá llevar texto alternativo (atributo alt). El atributo irá vacío en caso contrario. Si es una imagen que se repite en diversas páginas, no es informativa, y no es publicable, debería ir como fondo mediante CSS.
  8. Estructurar bien los formularios: grupos de campos dentro de elementos FIELDSET con sus correspondientes LEGEND, elementos INPUT, SELECT y TEXTAREA contenidos dentro del elemento LABEL (asociación implícita), y atributo for en el LABEL y atributo id en el elemento de campo con el mismo valor (asociación explícita).
  9. Uso del elemento OBJECT para añadir contenido en Flash o en Java, incluyendo el contenido alternativo correspondiente para aquellos usuarios que no dispongan del plugin.
  10. Separación de contenido (HTML), presentación (CSS) y comportamiento (Javascript). En el documento HTML solo se mete HTML, y no se utilizan atributos para controlar la presentación. No se mete código Javascript en el elemento SCRIPT (que solo ha de incluirse dentro del elemento HEAD y nunca fuera de él), ni código CSS en el elemento STYLE (de hecho a la CSS se la llama con el elemento LINK).

Etiquetas: , , ,

enviado por jervert el lunes, mayo 11, 2009 | 1 comentarios

jueves, abril 02, 2009

CSS: problema de doble margen en IE6

Cuando un elemento está flotado dentro de un contenedor y tiene definido un margen, nos podemos encontrar con la desagradable sorpresa de ver como Internet Explorer 6 duplica dicho margen.

Supongamos que tenemos esta regla CSS:

div.capa p.parrafo {float:left; margin-left:10px;}

Internet Explorer 6 sacará un margen de 20px.

Se puede solucionar con un hack CSS, que valida pero es un poco chapuza:

div.capa p.parrafo {float:left; margin-left:10px;}
* html div.capa p.parrafo {margin-left:5px;}

O como dicen en Position is Everything añadir un display:inline; a la regla CSS:

div.capa p.parrafo {display:inline; float:left; margin-left:10px;}

De esta forma el elemento sigue siendo bloque, ya que tiene el float, y sale con el margen definido en Internet Explorer.

Saber más

Etiquetas: , , , ,

enviado por jervert el jueves, abril 02, 2009 | 0 comentarios

lunes, marzo 23, 2009

Versión portable de IE

Están disponibles para descargar varias versiones portables de Internet Explorer y otros navegadores en Xenocode.

Etiquetas: , ,

enviado por jervert el lunes, marzo 23, 2009 | 4 comentarios