Gracias a JavaScript podemos añadir muchos efectos a nuestras interfaces de usuario. Como usuarios no es grato tener a mano aplicaciones ó servicios web que hacen uso inteligente de JavaScript, pues el resultado es un entorno intuitivo y fácil de usar. Hoy en día podemos encontrar una gran infinidad de recursos, herramientas, librerías y códigos para hacer uso de efectos con JavaScript en nuestros proyectos con tan solo configurar un par de opciones. Veamos aquí 10 técnicas que podemos poner en práctica en nuestros desarrollos así mejorar la experiencia del usuario final, hacer que se sientan felices.

Nube de tags (etiquetas ó palabras clave)

The jQuery hover sub tag cloud agrega un bonito efecto a nuestra nube de tag. Pulsamos sobre alguna etiqueta y en un cuadro adicional aparecen las sub-etiquetas.

Nube de tags con jQuery

Efecto de opacidad

Opacity Change es un tutorial que nos explica como usar script.aculo.us para crear un efecto de cambio de opacidad para un elemento html. Esta técnica es muy usada cuando posamos el cursor sobre algún elemento de una página web, cliqueamos un botón check u option, etc.

Opacidad efecto

Subir y cortar imágenes

Hace poco presentamos un tutorial de como cortar una imágen (crop image) con JavaScript y PHP. Pues bien aquí hay otro tutorial: jQuery image upload and crop, que nos enseña el proceso de subir y cortar la imágen (2 en 1) . Si nos aventuramos en un proyecto tipo flickr pues esto nos puede ayudar.

 Upload y crop imagen

Medidor de seguridad de contraseñas

Muchos servicios web han agregado un aspecto importante de seguridad en sus formularios de registro. Mientras escribimos nuestra futura contraseña un medidor en la parte inferior muestra que tan fuerte ó débil es. Password Strength Meter es una ayuda a este respecto, trabaja con prototype/script.aculo.us.

Contraseña segura

Ampliar una imagen

Magic Zoom permite ampliar una imagen y verla a detalle con si usaramos una lupa.

Zoom imágenes

Auto-tabular

Es un método muy usado en formularios de registro. Una vez superado en límite de carácteres en cada input (entrada de datos) automáticamente pasa al siguiente. jQuery Autotab podemos lograr esto en nuestros formularios web.

Auto tab

Ver más en 10 Smart Javascript Techniques to Improve Your UI