Hace unos meses, a raíz de un de un artículo de Jakob Nielsen, comentaba la posibilidad de hacer más usables los formularios de login mediante un checkbox para mostrar y ocultar la contraseña.

Y aunque la idea no me parecía descabellada, pasó de largo por mi cabeza como tantas y tantas cosas que vemos al día por Internet.

Sin embargo, después de tener la posibilidad utilizar un móvil para conectarme a Internet, me doy cuenta de cuan engorroso puede llegar a ser meter nuestra contraseña utilizando el teclado del móvil, y lo frustrante que es no saber si lo que has introducido es la contraseña correcta.

El resultado de todo esto es un pequeño script en jQuery que nos permite mostrar y ocultar el valor de un input de tipo password.

DEMO | DESCARGAR EJEMPLO

Más info, después del salto

La forma de hacerlo es muy sencilla. Simplemente creamos un input de tipo “text” donde copiaremos lo que se escriba en el password, y viceversa. Mediante el checkbox, mostraremos u ocultaremos ese input con la contraseña “legible”.

Mediante el HTML, creamos el típico formulario de login, con sus campos usuario y contraseña:

<form action="#">
     <fieldset>
          <p>
               <label for="user">Usuario</label>
               <input type="text" id="user" />
          </p>
          <p>
               <label for="password-hide">Contraseña</label>
               <input type="password" id="password-hide" />
          </p>
          <p>
               <input type="submit" id="send" value="Enviar" />
          </p>
     </fieldset>
</form>

Con jQuery hacemos el resto.

jQuery(document).ready(function() {
     var passwText = jQuery('#password-hide');

     // Creamos el input que contendrá la contraseña "visible"
     // y el checkbox
     passwText.after('<span class="showpass"><input type="text" id="password-show" /><input type="checkbox" id="toogle-check"/><label for="toogle-check">Mostrar Contraseña</label></span >');
     var toogCheck = jQuery('#toogle-check');
     var inputText = jQuery('#password-show');

     inputText.hide();

     // Recogemos los caracteres introducidos como contraseña
     // y los compiamos al otro campo
     inputText.keyup(function() { passwText.attr('value', inputText.attr('value')); });
     passwText.keyup(function() { inputText.attr('value', passwText.attr('value')); });

     // Click sobre el checkbox
     $(toogCheck).click(function() {
          if( toogCheck.is(':checked') ) {
               inputText.show(); passwText.hide();
          } else {
               inputText.hide(); passwText.show();
          }
     });
});

Creamos el campo que contendrá la contraseña visible (#password-show) y el checkbox que los habilitará. Es necesario crearlos con jQuery, ya que si el usuario no tiene activado javascript en su navegador, no le aparecerán campos inservibles en el formulario de login que le puedan confundir.

Con el evento keyup de jQuery, recogeremos los caracteres de la contraseña para tener exactamente igual ambos campos (#password-hide y #password-show). Mapeamos el evento keyup de los dos input, ya que el usuario también puede introducir su contraseña en “modo visible”.

Por último, con el evento click controlamos el checkbox, para mostrar el “input password”, o el “input text”.

DEMO | DESCARGAR EJEMPLO

Ese sistema nos puede interesar cuando no necesitamos la valoración del usuario, y tan solo queremos mostrar un ranking estático de forma mucho más visual de lo que podría ser el típico numero de 1 a 5.

Hoy, para cerrar el círculo, vamos a ver como crear otro sistema de valoración, esta vez utilizando jQuery.

- VER DEMO - | - DESCARGAR EJEMPLO -

Creando el HTML

El código HTML necesario es muy simple:

<h1>Test rating jQuery</h1>
<div id="rating">
<span class="moving-bg">&nbsp;</span>
<span>&nbsp;</span>
</div>
<div id="status2">8.0</div>
<div id="msg"></div>

Necesitamos 2 capas, una para la barra (rating), otra para el valor numérico de la votación (status2). La tercera capa (msg) es simplemente para mostrar al usuario la votación que ha realizado, y es totalmente prescindible.

Como veis, el código no es demasiado semántico, pero es algo que se puede perdonar en favor de una mayor interactividad por parte del usuario.

Los resultados, por ahora, no son espectaculares.

Añadiendo CSS.

Para formar la “rejilla” de valoración, necesitaremos 2 imágenes: la rejilla y el fondo con el degradado.

La idea es la siguiente:

rainbow.png y grid.png son imágenes de fondo para el div#rating y el segundo span, respectivamente. El span.moving-bg, situado en medio de los dos, es el que iremos moviendo dependiendo de la posición del cursor, o del valor de la votación.

Al desplazar el span gris,  a través de las transparencias de grid.png se podrá ver el degradado que hay como fondo, dando la sensación de que son las “celdas” de grid.png las que se van “llenando”.

El CSS quedaría así:

#rating {
background: transparent url(images/rainbow.png) 0 0 no-repeat;
width: 216px;
height: 41px;
float: left;
position: relative;
z-index: 2;
overflow: hidden;
cursor: pointer;
}
#rating span{
display: block;
width: 216px;
height: 41px;
background: transparent url(images/grid.png) 0 0 no-repeat;
position: relative;
z-index: 1;
}
#rating span.moving-bg{
position: absolute;
top:0;
left:0;
background-image: none;
background-color: #CCC;
}
#status2 {
width: 50px;
float: left;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
font-size: 2em;
text-align: center;
font-weight: bold;
margin-left: 10px;
}
#msg {
clear: both;
}

Después aplicar los estilos del CSS, el resultado mejora notablemente.

Dale vida con jQuery

Ahora, lo tenemos todo ya preparado para añadir el “toque mágico” con jQuery, y convertir esto en un sistema de valoración como esperamos.

Analizando la situación, nos damos cuenta de que tendremos cuatro escenarios diferentes:

1. Carga de la página
2. El usuario sitúa el cursor encima de la barra.
3. El usuario hace clic para emitir su voto.
4. El usuario quita el cursor de la barra.

Sabemos que una tarea que tendremos que repetir con frecuencia es la de actualizar la posición del fondo gris, por lo tanto vamos a crear una sencilla función, para que nuestro código esté lo más limpio posible.

/**
 * Mueve la capa de "color" para que se adapte al valor
 * pasado.
 * @param valor int
 * @param tamanyo_capa int
 */
function actualizarPos (valor, tamanyo_capa) {
var p = Math.round(valor * tamanyo_capa / 10);
$('#rating span.moving-bg').animate( { left: p }, 500 );
}

actualizarPos tan solo actualiza, dependiendo del tamaño de la capa contenedora, la posición del fondo gris, dependiendo de la valoración (valor).
Nos valdremos de la función de jQuery document.ready, para ejecutar nuestro código cuando ya el DOM esté cargado:

$(document).ready( function() {
// Obtenemos el valor inicial
var valoracion_defecto = parseFloat($('#status2').html());
// Obtenemos el tamaño del div
var w = $('#rating').css('width');
// eliminamos el px
var width_div = parseInt(w.slice(0,w.length-2));

// Al usuario siempre mostraremos una cifra con un solo decimal
var valoracion_defecto_num = valoracion_defecto.toPrecision(2);
actualizarPos(valoracion_defecto, width_div);

   $("#rating").mousemove(function(e){

// Obtenemos la posición del cursor dentro del elemento
var x = e.pageX - this.offsetLeft;
// Desplazamos la barra gris hasta esa posición
$('#rating span.moving-bg').css('left', x);
// Actualizamos el valor numérico
// Este valor siempre será un entero
$('#status2').html(Math.round(x*10/width_div));

   });
   $("#rating").click(function(e){
// Obtenemos la posicion del cursor dentro del elemento.
var x = e.pageX - this.offsetLeft;
// Obtenemos el resultado de la votación
var r = Math.round(x*100/width_div/10);

// Actualizamos el valor numerico
valoracion_defecto = (valoracion_defecto + r) / 2;
// lo mostramos en pantalla, siempre con un solo decimal
valoracion_defecto_num = valoracion_defecto.toPrecision(2);
$('#status2').html(valoracion_defecto_num);

// Actualizamos la posición de la barra gris
actualizarPos(valoracion_defecto, width_div);
// Mostramos el mensaje al usuario de su voto.
$('#msg').html("Has votado: " + r);
   });

   $("#rating").mouseout(function(e){
// Actualizamos el valor numérico al que pertenece
$('#status2').html(valoracion_defecto_num);
// Actualizamos la posición de la barra gris
actualizarPos(valoracion_defecto, width_div);
   });

});

Dividimos el código en cuatro bloques:
Al cargar la página, obtenemos el valor por defecto de la votación y posicionamos la barra gris dependiendo del valor obtenido.
La valoración que se muestra al usuario siempre será una cifra con 1 decimal, por lo que utilizamos la función toPrecision().

Cuando el usuario situé el cursor encima del elemento, se ejecutará la función mousemove. En este caso, obtenemos la posición del cursor dentro del elemento, y movemos la barra gris a la posición del cursor. También actualizamos el valor numérico, que deberá ser un entero.

Cuando el usuario mueva el cursor fuera de la barra (mouseout), esta volverá a tomar el valor del campo numérico por defecto.

Si el usuario hace click sobre la barra (click), lo tomaremos como que quiere realizar una valoración. Entonces, actualizaremos el valor para hacer la media entre el valor existente, y su votación.
Si asociamos el sistema a una base de datos, es en este método donde deberemos realizar la consulta de actualización mediante AJAX. Para este tutorial, nos conformaremos con actualizar el valor en pantalla, y que se vea reflejado en la barra.

Utilizando los métodos mousemove, mouseout y click de jQuery, cubrimos todos los posibles estados por los que puede pasar nuestro sistema de valoración, y con pageX y offsetLeft, seremos capaces de conocer la posición del cursor dentro del elemento.

Cómo conectar este sistema a una base de datos, y registrar las votaciones mediante AJAX, lo dejaremos para un próximo capítulo

- VER DEMO -
- DESCARGAR EJEMPLO -

Los chicos de NetTuts nos explican detalladamente, 10 técnicas para optimizar nuestro código javascript creado con jQuery.

Casi todos los navegadores actuales (Firefox, Safari, Chrome, Opera) poseen motores de javascript lo suficientemente potentes como para que en temas de optimización, las mejoras que obtenemos deban medirse en milisegundos, sin embargo, Microsoft con sus Internet Explorer aún sigue siendo el rival a batir, por lo que nunca está de más adoptar estas sugerencias como costumbre habitual.

Además, si algún día nos enfrentamos a un proyecto que haga un uso intensivo de javascript, notaremos la diferencia.

Algunos de los consejos son:

Utiliza siempre la última versión de jQuery.

Google dispone de una API de Bibliotecas AJAX para el acceso a las versiones de los frameworks de javascript más importantes, como son jQuery, Prototype, script.aculo.us, Mootools, etc. Este método nos permite estar siempre actualizados con la última versión de jQuery, sin embargo, debes tener en cuenta que aunque no pase muy a menudo, Google puede estar caído y entonces no podremos acceder a la librería.

Usa FOR en vez de EACH

Los métodos nativos siempre son más rápidos que cualquier helper de un framework. Recorrer un array de n elementos mediante $.each es alrededor de 10 veces más lento que hacerlo mediante un for.

Selecciona por #id y no por .clase

A la hora de seleccionar un elemento con jQuery, encontramos que es mucho más rápido hacerlo por su atributo id que no por su clase. ¿Porqué? jQuery utiliza en caso de utilizar el id, el método getElementByID(), nativo del navegador.

Cuando no sea posible seleccionar un elemento por su id, es recomendable especificar el contenedor más cercano a este que contenga un id.

Es decir:

$(”#contenedor .enlaces a”)

será mucho más rápido que

$(”.enlaces a”)

No olvides el return false

Añade return false; al final de tus funciones, para evitar comportamientos inesperados como el típico “salto” al principio de la web.

Articulo completo | 10 Ways to Instantly Increase Your jQuery Performance