|

Laboratorio: navegación por teclado

Ya en varios sitios se ha mostrado como realizar la navegación mediante el teclado, esto significa usar las teclas para acceder a contenidos o para realizar acciones.

Nosotros queremos darle un toque de automatización, que tan solo sea necesario añadir un enlace interno en el documento para acceder a la zona del documento.

Crearemos un script que obtenga todos los enlaces internos del documento y si tienen el atributo rel y su valor tiene el formato “formato:[letra]“, se considerará un objetivo para la navegación por teclado. La letra será la que se usará para acceder y pueden repetirse, por lo que si se repiten las teclas para el shortcut, se irán alternando uno a uno los distintos enlaces.

El script consta de dos partes, uno que se ejecuta después de la carga del documento y que recupera todos los enlaces internos y los agrupa por shortcut, y otro que captura el evento onkeydown del document para acceder a la zona del documento (que será modificando el location).

var __SHORTCUTS__ = {
// Guarda los shortcuts con los enlaces
shortcuts: new Array(),
// Índice del enlace actual organizado por shortcuts
idx_shortcuts: new Array(),
// Obtiene todos los enlaces internos y los que corresponden a un shortcut los almacena
leer_shortcuts: function(e) {
var objs = document.getElementsByTagName("A");
for (var i=0; i<objs.length; i++) {
var rel = objs[i].rel;
if (rel && rel.match(/shortcut:[a-z]/i) && objs[i].name) {
var tipo = (rel.substring(rel.indexOf(":")+1)+"").toUpperCase().substring(0, 1);
if (!__SHORTCUTS__.shortcuts[tipo]) {
__SHORTCUTS__.shortcuts[tipo] = new Array();
__SHORTCUTS__.idx_shortcuts[tipo] = 0;
}
__SHORTCUTS__.shortcuts[tipo][__SHORTCUTS__.shortcuts[tipo].length] = objs[i];
}
}
// Capturo el evento de pulsado de teclado en el document
document.onkeydown = __SHORTCUTS__.controlar_keypress;
},
// Captura una tecla pulsada y accede al shortcut que tenga asociado
controlar_keypress: function(e) {
try {
if (!e) e = event;
var key = e.keyCode;
// Obtengo el caracter correspondiente, quizás esto falle, no he hecho pruebas suficientes
var c = String.fromCharCode(key);
// Si es una letra
if (c.match(/^[a-z]$/i)) {
// Obtengo el enlace para el shortcut
var obj = __SHORTCUTS__.shortcuts[c.toUpperCase()][__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]];
// Acceso a esa parte del documento
document.location = "#"+obj.name;
// Incremento el indice para que acceda al siguiente
__SHORTCUTS__.idx_shortcuts[c.toUpperCase()] = (__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]+1)%__SHORTCUTS__.shortcuts[c.toUpperCase()].length;
}
} catch (e) {} // En IE me da un error que no llego a comprender, ¡cómo no!
}
}
// Cargo el proceso en el onload
if (window.addEventListener) {
window.addEventListener("load", function(event) {__SHORTCUTS__.leer_shortcuts(event);}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(event) {__SHORTCUTS__.leer_shortcuts(event);});
} else {
document.onload = function(event) {__SHORTCUTS__.leer_shortcuts(event);}
}

Para indicar qué elementos tienen shortcut, modificamos los estilos para mostrar subrayada la primera letra del elemento, para lo cual el elemento debe tener el atributo title con valor “SHORTCUT: [letra]“. Mejorando así la accesibilidad ya que no añadimos ninguna etiqueta para la primera letra. Por supuesto en IE6 no funciona y con la etiqueta legend tampoco me funciona.

*[title~="SHORTCUT:"]:first-letter {
padding-bottom: 2px;
border-bottom: 1px dotted #000000;
}

Para este ejemplo tenemos dos tipos de shortcuts: ‘P’ para ciertos párrafos y ‘C’ para acceder al formulario de comentarios.

Ejemplo

|

Koala: herramientas para hacer how-to

koala.pngIBM está desarrollando una extensión para Firefox llamada Koala que permite grabar la actividad que se desarrolla en el navegador y generar un script que se guardará en una página y que podrá ser consultado.
El ejemplo que nos ofrecen muestra cómo se accede a una página de búsquedas de casas y se van introduciendo datos para obtener los resultados deseados. En la extensión para Firefox se va mostrando mediante texto las acciones que se ejecutan, por ejemplo “Acceder a la pagina tal”, “Seleccionar ‘2 habitaciones'” y así con cada una de las acciones que hemos ido realizando. Estos textos son editables y después cuando se ejecuta el script para aprender el howto, se tienen en cuenta los datos cambiados.
koala2.png
La verdad es que estoy deseando que se haga pública esta extensión, a muchos nos podría ahorrar documentación para los proyectos.
Koala
Vía / CNET News.com

links for 2007-03-30

|

phpPgAdmin: administra PostgreSQL desde la web

Casi todos conocemos phpmyadmin, una aplicación web para administrar nuestras bases de datos en MySQL. En este caso se trata de phpPgAdmin, lo mismo pero para PostgreSQL. No todo el mundo trabaja con MySQL, por lo que esta herramienta le vendrá muy bien a aquellos que usen esta base de datos.
phppgadmin.png
Entre las características que ofrece nos encontramos con la posibilidad de administrar varios servidores, soporte a múltiples versiones de PostgreSQL, administración de usuarios, grupos, bases de datos, esquemas, etc…, manipulación sencilla de datos, exportar los datos a diferentes formatos, importar sentencias SQL y mucho más.
Ahora solo falta que hagan algo para Oracle para hacerme feliz.
phpPgAdmin

Truwex Online: validador de accesibilidad y calidad

Truwex ofrece una herramienta online para comprobar la accesibilidad y la calidad de un URL dada. Una de las mayores diferencias con otras aplicaciones parecidas es que valida el código HTML generado, no solo el código HTML plano, tiene en cuenta el código generado por el Javascript.
Algo que también me ha llamado mucho la atención es que ofrece la posibilidad de ver los errores detectados en la propia página, incluso cuando se trata de capas ocultas, facilitando así la localización de los errores, y por qué no, entender qué es lo que está mal hecho.
truwex.png
En la misma página nos explican los errores que detecta y cómo solucionarlos.
También es curiosa la aplicación online que comprueba el script de Google Analytics que contiene la página.
Truwex Online
Vía / 456 Barea Street

links for 2007-03-29

| |

Laboratorio: no permitir que accedan directamente a las urls empleadas en Ajax

Cuando usamos Ajax en nuestras aplicaciones solemos usar un script específico que devuelva los datos preparados para que el cliente los interprete y los muestre.

En algunas ocasiones no suele ser de nuestro agrado que usuarios accedan directamente a las URLs empleadas para Ajax.

Para evitar esta situación se puede usar un script sencillo. Se tomará en cuenta el valor de la variable de entorno HTTP_REFERER, la cual nos devuelve desde qué página se accede a nuestro script.

$ref = getenv('HTTP_REFERER');

Si el contenido de esta variable es false entonces es que se ha accedido directamente desde el navegador, si no, es que se accede desde una página, también habrá que comprobar que la página es la que nosotros queremos.

<?php
$ref = getenv('HTTP_REFERER');
if (!$ref || $ref != '[nuestra url]') {
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<title>Sentido Web - Redireccionamiento Ajax</title>
</head>
<body>
<h1>Sentido Web - Redireccionamiento Ajax</h1>
<p><?php echo "Hola, son las ".date("H:i:s"); ?></p>
</body>
</html>
<?php
} else {
echo "Hola, son las ".date("H:i:s");
}
?>

En este caso mostraremos una página cuando no haya referer o no sea el que nosotros esperamos. También se podría hacer para que el referer estuviera en el servidor, pero eso lo dejo para que lo haga el que lo necesita.

Una funcionalidad parecida se podría usar por temas de accesibilidad, dependiendo de un parámetro que indique si se trata de una llamada Ajax o no, se devuelva la información para el script del cliente o se muestre la información en una página.

<a href="url-ajax.php" onclick="ajax('url-ajax.php?ajax=1')">Enlace</a>

En el caso de haber problemas de accesibilidad, el enlace accede a la página con la información. En caso contrario, ejecuta la funciona ajax(), indicándole que se trata de una llamada Ajax para que nos devuelva la información formateada, ya sea en XML o JSON o como queramos.

| |

Usar polimorfismo en PHP5 para acceder a diferentes BD

Gracias al tratamiento de objetos que nos permite PHP5, es posible diseñar aplicaciones de una forma más eficiente. Un caso de ello es el polimorfismo, lo cual va a permitir acceder y trabajar con diferentes tipos de bases de datos de una forma única.
En el artículo en el que hacemos referencia, explican detalladamente cómo usar el polimorfismo para acceder a datos mediante MySQL y SQLite. Para ello se crearán una clase abstracta y dos clases que extenderán de esta, siendo cada una de estas las encargadas de tratar el acceso a MySQL o a SQLite.
Después se deberá crear una clase que maneje estas clases, dependiendo de un parámetro, se usará una de las clases (MySQL o SQLite). Esta última clase será la que instancie el usuario final, por lo que para él será transparente el tratamiento que se haga de una u otra base de datos.
Algo que también destacaría de este artículo es la forma de no hacerlo, algo que me he encontrado en alguna ocasión en Java (donde hay polimorfismo desde siempre). La forma incorrecta de hacerlo es creando una única clase y diferenciando en cada método diferentes códigos dependiendo de si se trata de una BD u otra.
Abstracting Database Access Using Polymorphism with Objects in PHP 5

links for 2007-03-28

Arrays en Javascript

Ahora que está tan de moda el Ajax, el JSON, que requieren un conocimiento un poco avanzado de Javascript, nos olvidamos de tener una buen base para luego no tener dificultades cuando realizamos nuestras aplicaciones clientes.
Aunque inicialmente Javascript no admitía arrays, su uso es una de las características más necesitadas. Por experiencia he comprobado que algunas personas solo conocen su funcionalidad más común, por lo que no estaría mal que le echaran un vistazo a este manual sobre arrays en Javascript, el cual es bastante completo.
A parte de los métodos que admiten y su funcionamiento, destacaría dos partes: la primera es que los arrays se tratan por referencia, no por valor; la segunda parte es el inclusión mediante prototype de otros métodos, como ordenamiento de forma númerica y encontrar valores entre otros.
Mastering Javascript Arrays
Vía / dzone