Alfredo Juarez

Es increíble como la gente no reconoce entre un navegador y un buscador, y más increíble aun que algunas personas confundan a Google con un navegador.

Esta encuesta fue realizada por Google Creative Lab a las personas que pasaban por el times square de Nueva York.

[Via alt1040]

Este video fue presentado hace algunos días, ahora los autores presentan el “Making of” del video, el cual muestra el gran trabajo que realizaron estas personas.

[Via Alt1040]

Lo primero que debemos tomar en cuenta a la hora de implementar atajos de teclado en una aplicación Web es no redefinir los atajos por defecto del navegador o sistema operativo, ya que se pudiera dar el caso de que el usuario intente hacer una acción común y la aplicación web lo interprete de otra manera, por ejemplo: Imaginemos que el usuario quiere cerrar la pestaña y presiona Ctrl+W, pero tu definiste Ctrl+W para otra acción dentro de la aplicación, el usuario verá su intento frustrado por querer cerrar la pestaña.

Como puedes saber, Javascript tiene muchos “escuchadores de eventos”. Para los atajos del teclado usaremos onkeyup, el cual permite efectuar una acción cuando una tecla es presionada. Entonces, solo tenemos que comparar el valor del código de teclado retornado con nuestros atajos de teclado.

Los códigos de teclado consisten en 2 o 3 numeros, cada tecla tiene su propio código (vea la lista completa al final).

EJEMPLOS

En el siguiente ejemplo vamos a ejecutar una acción si la tecla combinación de teclas Ctrl+S es presionada:

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
         alert('Guardando...!');
         return false;
    }
}

Ahora veamos el mismo ejemplo, pero utilizando jQuery:

var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
        alert('guardando... Con jQuery');
 	return false;
 }
});

En estos ejemplos, empezamos verificando si la tecla Ctrl fue presionada, Si fue presionada, el valor inicial de la variable isCtrl será “true“. si las teclas son liberadas, a isCtrl se le asignará “false” de nuevo.

Una vez hecho esto, tenemos que verificar si la segunda tecla presionada es S, como nuestro atajo consiste en una combinación de teclas, también debemos verificar si la variable isCtrl es “true“.

Si las dos teclas fueron presionadas, mostraremos una alerta para mostrar un mensaje, por supuesto, en una aplicación real, podemos agregarle más funcionalidad.

Referencia de códigos

El articulo original fue publicado en CatsWhoCode, traducido por mí.