Visitando el sitio de Code and Theory quedé algo asombrado de lo que habían hecho con el encabezado. Una animación muy sutil, pero da un aire muy elegante al sitio. Así que me puse a tirar un poco de código para probar el rendimiento de una animación de ese tamaño -verán, yo la quería de fondo completo :D

He aquí el resultado: demo.

Evidentemente le hace falta detector de imagenes cargadas antes de cada animación. Lo resolví temporalmente con un hack pero solo probado en Firefox, en Opera hay que esperar la ronda de 18 segundos para que las imagenes queden en caché y la animación sea fluida.

Estoy en proceso de rediseñar algunos sitios y este es un efecto que quiero introducir más adelante, así que era necesario jugar un poco por ahora. El código completo aquí.

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.

Esta pequeña caja que se encuentra en el pie de página del blog, la hice con Mootools, PHP y la API de Last.fm, me gustó muchísimo así que probablemente haré algo con la API de Flickr que podría darme un resultado muy bueno. No lo hice antes por que no soy tan adicto a Flickr, como lo soy a Last.fm :)

Entre otras mejoras menores, cambié un poco el CSS para que el texto sea más agradable para los lectores. Hice algunos austes de tamaño en los elementos minimos, yo se, ni se notaban pero a mi me da paranoia saber que una caja esta desalineada por 1 pixel de la otra :S

Para los curiosos del código que usé para conectarme con Last.fm…

<?php
	$ch = curl_init('http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&amp;user=Linnk&amp;api_key=TU_API_DE_LASTFM&amp;period=3month');
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_GET, 3);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$salida = curl_exec($ch);
	curl_close($ch);
 
	$xml = new SimpleXMLElement($salida);
?>
 
<div>
<?php $n=1; foreach($xml->topartists->artist as $artist): ?>
<div class="artist" title="<?= $artist->name ?>"><div class="image"><img src="<?= $artist->image[0] ?>" border="0" alt="" /></div></div>
<?php $n++; if($n>32) break; endforeach; ?>
</div>

Me devolvía 50 artistas, pero yo no quería tantas por que no cabían en el espacio designado, así que lo limito a 32. El resutlado de la API lo leo con SimpleXML y lo imprimo directamente. Este código es llamado mediante AJAX, desde Mootools con el que despues le aplico los efectos para hacerlo un poco más interesante.

No creo que valga la pena extenderme por que es una especie de hack. Hace falta mucho para convertirlo en un plugin decente, así que seguramente haré cambios en todos los script para mejorarlos. En cualquier caso, eres libre de leer mi script para Mootools juanbenavides.js, que está sin compresión ;)

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.