El uso de
frameworks, librerías
JavaScript que permiten incluir efectos, controles de
AJAX y otras sutilezas, se está haciendo cada vez más común. Actualmente, hay varios disponibles (
mootools,
jquery,
Ruby on Rails) y, por lo general, los agregamos como parte de algún
hack pero muy raramente les prestamos atención.
Una de las más difundidas es
prototype que generalmente se combina con
script.aculo.us; juntas, permiten utilizar, por ejemplo,
LightWindow. Son muchos los sitios de
Blogger que las incluyen y son parte integral de
Wordpress ya que es utilizada por innumerables
plugins.
Lo que no parece ser muy conocido (o por lo menos muy utilizado) es que este tipo de
scripts poseen un nucleo de funciones que van mucho más allá y que, una vez que las insertamos en nuestra página
web, están a nuestra disposición, multiplicando las posibilidades de crear efectos muy sencillamente.
En mi caso, utilizo las conocidas
prototype + scriptaculous + effects que se cargan para poder crear
ventanas modales; otros las utilizan para mostrar
rankings o la
navbar de
Blogger. En todos los casos, las descargamos, las alojamos en algún servidor propio y las incluimos en la plantilla antes de
</head>:
<script src="URL/prototype.js" type="text/javascript" />
<script src="URL/scriptaculous.js?load=effects" type='text/javascript" />
Si no podemos o no queremos descargar los
scripts, podemos usar los que provee la
Wiki de script.aculo.us:
http://wiki.script.aculo.us/javascripts/prototype.jshttp://wiki.script.aculo.us/javascripts/scriptaculous.js
Una vez que los tenemos agregados al
blog, ya disponemos del nucleo de efectos visuales.
Estos efectos son seis: opacidad, escala, transformación, movimiento, resaltado y paralelo. Y la mayoría de ellos son muy sencillos de implementar; sólo necesitamos un enlace donde poder hacer
click y poner el contenido sobre el que queremos crear el efecto dentro de un bloque
DIV al que le damos un nombre único mediante el atributo
ID. En general, sería algo así:
<a href="javascript:void(0);"
onclick="new Effect.CUAL("nombre",parámetros,opciones);return false;">
ENLACE</a
>
.......
<div id="nombre">
... el contenido ...
</div>donde CUAL será el efecto a usar y nombre el identificador.
Todos los efectos poseen una serie de parámetros por defecto que pueden modificarse, por ejemplo:
duration: el tiempo del efecto en segundos (por defecto es 1.0)
delay: cantidad de segundos antes de comenzar el efecto (por defeto es 0.0)
fps: frames por segundo (por defecto 25, máximo 100)
Empecemos mirando los tres más sencillos:
La única variación de estos ejemplos es que, en lugar de utilizar el evento onclick podemos utilizar cualquier otro evento de JavaScript:
onclick="new Effect.CUAL("nombre",parámetros,opciones);return false;"
onmouseover="new Effect.CUAL("nombre",parámetros,opciones);return false;"
onmouseout="new Effect.CUAL("nombre",parámetros,opciones);return false;"
Ya se ha lanzado oficialmente la Wikia Search, el buscador que pretende competir con Google.
