Leyendo varios blogs he acabado en uno muy bueno con 14 hojas de referencia rápida para diseño web, de entre las que destacan esta hoja de CSS y la hoja de Mootools 2.1.

En cualquier caso recomiendo que, si estas empezando con Mootools, te bajes una versión del framework sin compresión y con comentarios. No le tengas miedo al código del framework, está tan bien escrito que es como leer poesía en la programación. Gracias a sus estandares, podemos consultar el código -que es perfectamente entendible- y aprender mucho para desarrollar nuestras aplicaciones.

No queda opción, hay que interceptar cuando el usuario presiona ciertas teclas en ciertos lugares. Por suerte, fue muy fácil hacerlo. Para Mootools el script sería así:

window.addEvent('domready',function(){
 
	if($$('div.no-f5').length > 0)
	{
		document.addEvent('keydown',function(event){
 
			var tag = event.target.tagName.toLowerCase();
 
			if(event.key=='f5' || (event.key=='backspace' && tag!='input' && tag!='textarea'))
				event.stop();
		});
	}
});

Revisamos si existe un div.no-f5, que no es más que una clase bandera, para saber si en esa pantalla necesitaré del script. Si procede, creo el evento keydown para el documento. Cuando el evento suceda, comprobamos a que elemento se está apuntando, pues no queremos interceptar el backspace cuando el usuario esta escribiendo en algún campo de texto, pero si en cualquier otro caso pues lo regresaría a la pantalla anterior. La tecla F5 la interceptamos en todo momento.

Al mismo tiempo, descubrí (todo por no leer en su momento), que Mootols no extiende el objeto event.target con $, por razones de rendimiento. Así que si los chicos de Moo tuvieron buenas razones, decidí no extenderlo aunque hacer un $(event.target).get('tag') era muy tentador… pero hacerlo con Javascript nativo es muy fácil y cross browser.

Tanto el problema como la solución son detalles muy simples y normalmente subestimadas, pero seguro salvas a algún usuario de que se arranque el cabello mientras llenaba un enorme formulario.

Siempre le he sido fiel a este framework para Javascript, y ahora que salió la Mootools v1.2.1 me da gusto y me parece estupendo que avancen, aunque ésta vez solo sea una ligera lista de cambios.

Últimamente he tenido que aprender algo de Prototype y Script.aculo.us para unos proyectos y no me convencen aún, al igual que pasó con JQuery cuando lo utilicé. Espero poder aprender más de ellos y en el futuro, quizá pueda hacer alguna crítica, comparación, lo que sea… por el momento, a disfrutar de Mootools :)

Pensando en alternativas para mantener la accesibilidad de un correo electrónico y al mismo tiempo, mantenerlo oculto de los spambots, me han surgido muchas ideas, mi favorita es ésta:

Suponiendo que los spambots no ejecutan javascript, usaremos mootools para desarrollar un script muy sencillo que logrará mantener oculto el correo, pero que tendrá esa accesibilidad indispensable.

Primero, el código HTML. Publicamos los correos con ésta sintaxis:

<span class="email">correo (de dominio.com)</span>

Es poco técnico, pero en caso de que el script no se ejecute (por la razón que sea), seguirá legible para el usuario humano. Es importante mantener esa “forma” para el script de Mootools, el cual sería algo así:

$$('.email').each(function(e) {
    var text = e.get('text').split(' ');
    var email = text[0] + '@' + text[2].replace(')','');
    new Element('a', {'href' : 'mailto:' + email, 'text' : email}).replaces(e);
});

El resultado será que cuando éste script se ejecute, reemplazará el original span por un enlace totalmente accesible para el usuario final:

<a href="mailto:correo@dominio.com">correo@dominio.com</a>

Sinceramente, se me ha ocurrido esta variación partiendo de la propuesta de David Walsh, mi versión es un poco diferente, pero creo que cumple el objetivo.

El propósito es que cuando un spambot éntre al sitio, no asócie esa sintaxis con la de un correo normal y no lo guarde en su base de datos. Pero cuando un usuario visita el sitio, su navegador interpretara el correo oculto gracias al script en Mootools, y todo funcionará sin que el usuario se de cuenta.