A la hora de realizar un tutorial, una de las pocas desventajas que encontraba en hacerlo en versión web respecto a realizarlo en pdf, era que en el pdf se podía pasar página con las flechas del teclado, lo cual que resulta muy útil cuando se está leyendo algo con formato libro o tutorial paso a paso, y no conocía la forma de tener la misma funcionalidad para navegar en la web.
En la versión web, la forma de pasar página que había creado consistía en el símbolo < para ir a la página anterior, y en el símbolo > para ir a la página siguiente. Ambas flechas se encontraban dentro de una lista de dos elementos.
Por ejemplo, en la página 2, para pasar a la página anterior y siguiente (páginas 1 y 3), el código HTML de la lista tendría este aspecto:
<ul>
<li id="anterior"><a title="Anterior" href="paso-1.html"><</a></li>
<li id="siguiente"><a title="Siguiente" href="paso-3.html">></a></li>
</ul>
De esta forma se podía navegar atrás y adelante en el tutorial haciendo clic sobre los símbolos < (<) y > (>).
Para que también se pudiera avanzar y retroceder en el tutorial utilizando las flechas izquierda o derecha del teclado o las teclas de avance y retroceso de página, creé el script keyCode.js con una función, llamada getValueKey, que sería llamada desde el HTML cuando la página se hubiera cargado:
<html>
....
<head>
....
<script type="text/javascript" src="js/keyCode.js"></script>
</head>
<body onload="getValueKey()">
....
</body>
</html>Para no tener que escribir un script personalizado para cada página (el tutorial tenía más de 200 páginas), lo primero que hice en el script fue extraer dinámicamente la dirección a la que apuntaban las flechas de anterior y siguiente. Como los elementos de la lista tenían el identificador anterior y siguiente, y el href se encontraba dentro de cada elemento de la lista, la forma de extraer las direcciones a las que había que navegar las almacené en variables de esta forma:
var anterior=document.getElementById("anterior").firstChild.getAttribute("href");
var siguiente=document.getElementById("siguiente").lastChild.getAttribute("href");Para extraer el código de la tecla pulsada y almacenarlo en una variable llamada code, utilicé el siguiente código:
document.onkeyup = KeyCheck;
if (element.captureEvents) element.captureEvents(Event.CLICK);
function KeyCheck(e)
{
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
}Por último, según la tecla pulsada (recogida en la variable code), la página saltaría a la que habíamos guardado en las variables anterior y siguiente. Para ello añadí el siguiente código dentro de la función KeyCheck:
switch(code)
{
case 33:
case 37:
window.location.href = anterior;
return false;
break;
case 34:
case 39:
window.location.href = siguiente;
return false;
break;
}De esta forma voy a la página guardada en la variable anterior tanto si pulso en Re Pág (33) o la flecha izquierda (37), y voy a la página siguiente si pulso en Av Pág (34) o la flecha derecha (39).
Incluí una línea con return false para anular el código que el navegador pudiera tener por defecto para esa tecla, lo que puede resultar muy importante según las teclas que queramos detectar.
Para el caso de encontrarnos en la primera o última página del tutorial, podríamos crear como excepción dos scripts diferentes eliminando la referencia a la variable anterior o siguiente, y eliminando del switch los casos que correspondan.
Archivo Javascript completo: keyCode.js
Demo: Tutorial de Flash CS5 (navegable con el teclado)
Fuente consultada: Javascript – Introduction to Events
Lista de códigos: A list of keys and the JavaScript char codes they correspond to