Scriptaculous-iza tu blog!

Como –para los que lo leyeron o le dieron una mirada- habrán notado en mi post anterior, “Shane Hines – Blues for Balalaika", usé un efecto muy interesante para mostrar y ocultar una traducción de una cita en inglés que podría parecer complejo a primera vista pero que en realidad es súper fácil de implementar en tu blog.

Script.aculo.us es el nombre de una biblioteca JavaScript que te permite usar una basta paleta de efectos en el blog, tanto para textos como imágenes o elementos en el sidebar.

La instalación.

Los scripts ya están hechos y si quieres implementarlos en tu blog, solo debes poner en la plantilla de HTML, antes de la etiqueta </head>, un código:

(yo uso esta forma pero en realidad existen otras formas)

<script src='http://www.google.com/jsapi'/> 
<script> 
  google.load("prototype", "1.6.1.0"); 
     window.JSON = { 
        parse: function (st) { return st.evalJSON(); }, 
        stringify: function(obj) { return Object.toJSON(obj); }
        }; 
  google.load("scriptaculous", "1.8.3");
</script>

Como verán, ahí solo estamos diciéndole al blog que cuando cargue, también cargue esos scripts que están alojados en AJAX Libraries API de Google, los cuales si quieren pueden descargar y alojarlos en su propio directorio (pero les recomiendo que usen la de Google no más). Además, después de la línea que dice “google.load("prototype", "1.6.1.0");”, le agregué unos códigos (hack hecho por Pizcos | vía Vagabundia) que soluciona un problema: y es que al parecer al cargar estos scripts de esta forma, los widgets de Google (como el Friend Connect), no funcionan, se quedan en blanco; pero ya con este hack, el problema queda solucionado.

A continuación veremos cómo, para crear los efectos, solo se necesitan de 3 cosas: el enlace, el elemento y el efecto.

El enlace.

Una vez que terminan con la instalación, viene la parte divertida y, podría decirse, extensa pues ahora tu blog es capaz de muchos efectos. La forma de jugar con los efectos es definir los elementos a scriptaculousizar y crear un link que active el (o los) efectos. Ese link (que puede ser puesto en cualquier parte del blog), debería estar formado de la siguiente forma:

<a href="javascript:void(0);" 
   new evento="Effect.Efecto("elemento",parámetros,opciones);return false;">
   Enlace
</a>

Donde:

• evento es cualquier evento de javascript, es decir, lo que “disparará” el efecto. Puede ser, por ejemplo: onclick (al hacer click al enlace), onmouseover (al pasar el mouse sobre el enlace) u onmouseout (al sacar el mouse de sobre el enlace). [véase: “Tutorial: Mapa de imagen + mouseover por área para nuestro logo”]
• Efecto es el nombre del efecto a utilizar.
• elemento es el nombre (definido por <div id="nombre">) del elemento sobre el cual se efectuará el efecto.
• Enlace, es el texto o imagen al que se le dará click para activar el efecto.
• parámetros son variables propios de cada efecto que puedes cambiar a tu gusto.

El elemento.

El elemento al que le aplicarás el efecto debe estar contenido por un bloque <div> y además debe estar definido con un nombre único en el documento para poder ser identificado correctamente. Se podría decir que, en general, el elemento al cual se le aplicará el efecto, tendrá la siguiente forma:

<div id="nombre">
   contenido del elemento (puede ser texto, imágenes, videos, etc)
</div>

 

Los efectos.

Como ya mencione, scriptaculous permite agregar una gran selección de efectos a tu blog. Aquí solo mencionaré los nombres de cada efecto y mas o menos lo que hace cada uno (para más detalles, les recomiendo mucho visitar la wiki de scriptaculous o sino también Vagabundia en su lista de efectos: parte 1, 2, 3 y 4). Pero recuerden que además, estos efectos se pueden combinar.

• Effect.Appear / Effect.Fade : muestra/oculta un elemento.
• Effect.BlindUp : ocultar un elemento deslizándolo hacia arriba.
• Effect.BlindDown : muestra un elemento deslizándolo hacia abajo.
• Effect.DropOut : hace que un elemento se “caiga” y se desvanezca al mismo tiempo.
• Effect.Fold : achica un elemento horizontalmente hacia arriba y de ahí a la izquierda hasta hacerlo desaparecer.
• Effect.Grow : hace “crecer” (agranda) un elemento hacia una dirección (hacia arriba, abajo, etc.)
• Effect.Highlight : “enciende” un color en el fondo de un elemento y lo “apaga” lentamente.
• Effect.Morph : cambia el estilo CSS de un elemento, como por ejemplo su tamaño, o los colores.
• Effect.Move : cambia la posición de un elemento, cambiando sus coordenadas.
• Effect.multiple : toma una matriz de elementos y realiza un efecto para cada elemento.
• Effect.Opacity : cambia la opacidad o transparencia de un elemento.
• Effect.Parallel : te permite combinar una serie de efectos.
• Effect.Puff : da la ilusión de un elemento desvaneciéndose como el humo.
• Effect.Pulsate : hace parpadear un elemento.
• Effect.Scale : cambia el ancho y el largo de un elemento, dándole un efecto suave.
• Effect.ScrollTo : desplaza  la pagina (como con la barra lateral de cualquier pagina) a cierto punto.
• Effect.Shake : sacude un elemento de derecha a izquierda.
• Effect.Shrink : achica un elemento en cierta dirección hasta desaparecerlo.
• Effect.SlideDown : desliza un elemento hacia abajo, mostrándolo.
• Effect.SlideUp : desliza un elemento hacia arriba, ocultándolo.
• Effect.Squish : reduce o achica un elemento hacia su esquina superior izquierda.
• Effect.SwitchOff : oculta un elemento dando la ilusión de estar apagando un televisor.
• Effect.tagityText : transforma un texto en una cadena de caracteres contenidos por un cuadro.
• Effect.toggle : muestra u oculta un elemento a través de diferentes animaciones.
• Effect.Transitions : anima un elemento a través de diferentes funciones.

|