JMiur [E]

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.js
http://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;"

37 comentarios:

Eduardo Peinado  

Eres un crack, ahora mismo no estoy puesto con la plantilla, pero seguro que en un futuro le daré un buen uso a este post.

Podrías sacar una colección de trucos por fascículos, ¿no?

Por cierto, aprovecho este comentario, que, aunque entro a diario, creo que no te he felicitado el año nuevo JMiur.

¡Felicidades, gracias, enhorabuena y un abrazo! ¿Completito, eh? Jaja.

Responder
JMiur  

Gracias, Eduardo, que el año sea bueno para todos :D

Mi idea es ir mostrando los efectos disponibles de a poco. Son muchos y hay para elegir. Algunos de ellos son realmente espectaculares.

Responder
Aleix  

Están muy bien todos esos trucos felicidades! Andaba mesas buscando algo parecido.

Solo que hay una cosa que no acabo de conseguir hacer ir. Con los dos primeros .JS basta o hacen falta más para que vaya el de Scale?

Es que entor en el WikiSource y no tengo claro si desde allí se puede bajar el .JS

Saludos

Responder
JMiur  

Aleix:

En todos los casos se necesitan 3 scripts:
prototype.js
scriptaculous.js
effects.js

que se cargan en la plantilla así:

<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">

Puedes usar los de la Wiki, ene ese caso, reemplazas:
URL/prototype.js
por
http://wiki.script.aculo.us/javascripts/prototype.js
y:
URL/scriptaculous.js
por:
http://wiki.script.aculo.us/javascripts/scriptaculous.js

El script effects.js se carga automáticamente.

Si, lo que quieres es descargar los scripts y alojarlos en un servidor prpopio, estas son las direcciones para descargarlas:
Descargar protoype
Descargar scriptaculous
Descargar effects

Sube las 3 a un servidor y utilizas el mismo código para cargarlas en la plantilla pero, cambiando las direcciones por las tuyas.

Responder
Gem@  

Ya me estás provocando, me dejaste descansar un tiempito pero vuelves a la carga con efectos en las imágenes :D

Responder
JMiur  

¿No decías que era lo que mas te gustaba? :D

Habrá varias de estas cosillas para experimentar y ver si pueden ser útiles.

Responder
Gem@  

Estoy segura que más de una, ya te pondré al corriente.
Gracias ;)

Responder
JMiur  

En realidad, la mayoría de estos efectos no son otra cosa que herramientas pero, abren un mundo de posibilidades.

Responder
B-Pirata  

Buenas...
me gustaron los efectos que se pueden lograr por lo que he decidido aventurar, pero en el camino me surgiron algunas dudas y ojala puedan ayudarme...

alojé en hostfile.org el archivo prototype y scriptaculous. ¿debo hacer lo mismo con effects.js o no es necesario?

Otra consulta, ¿en todos los efectos puedo usar las mismas opciones o no? (como duration, from, etc)?
¿y cuales son las opciones?

salu2 y gracias, de antemano

Responder
JMiur  

Sí, debes alojar el archivo effects.js en el mismo lugar.

En cuanto a las opciones, hay un grupo de ellas común a todos los efectos y luego, algunos de de ellos tienen opciones especiales. En la Wiki está documentado todo y en los los posts siguientes a este se enumeran algunos de esos parámetros.

Responder
La Blogueria  

Hola Jmiur, he aplicado el efecto "appear" en un botón, con la idea de que al clicar en él, muestre el contenido. El caso es que no aparece oculto; al clicar en él, desaparece agradablemente y al reclicar reaparece. Reviso el código fuente de tus ejemplos, para averiguar cómo hacer que el contenido sea invisible y aparezca al clicar en el botón. Pero no consigo averiguar cómo o dónde defino eso, y siento que algo muy obvio se me escapa.

Gracias!

Responder
JMiur  

El código más sencillo sería este:

<a onclick="new Effect.Appear('ejemplo');"
href="javascript:void(0);">
EL ENLACE
</a>
<div style="display: none;" id="ejemplo">
El contenido oculto.
</div>

El enlace es tanto un texto como una imagen y el contenido oculto debe estar en un DIV donde debe estar incluido el parámetro STYLE y, en este caso, allí le decimos que no lo muestre.

Este efecto, como casi todos los otros del nucleo, no tienen un efecto inverso es decir, cuando se produce, ya no desaparece otra vez. Se deben combinar para crear cosas más "soficticadas".

En todo caso, si hay algo que quieras realizar en particular, lo vemos.

Responder
La Blogueria  

Perfecto, oh oráculo: era la mala o no ubicación del "display:none;". Lo añadía en "div id" en vez de "div style".

Es mi botón "Come in" que oculta los comentarios recientes; ahora, el contenido está oculto, y al clicar, aparece con el efecto deseado. ¡Es rechuli! me encanta.

¡GRACIAS!!

Responder
JMiur  

Perfecto :D

Mientras no ocultes las lechuzas, todo esta bien :$

Responder
Anónimo  

Hola, espero puedas ayudarme. Tengo un código elaborado con Javascript, trate de insertar efectos de scripttaculous directamente pero al parecer el código no lo permite (por como está elaborado). Explico, para que admita un evento en AJAX hay que hacer una función de Javascript. Para los efectos he hecho una función como: "function highlight(){ new (Effect.Highlight(this)); return false; }" En el código de HTML agrego las librerías prototype.js, scriptaculous.js y effects.js

Luego en el elemento hago esto:

onclick="highlight();"

Sin embargo Firebug me devuelve este error:

Effect is not defined
http://localhost/RC5/js.js
Line 107

Que se refiere función que arriba puse. Puedes ayudarme a saber que pasa? ¿que podría hacer?

Gracias

Responder
JMiur  

edgar:

Tendría que verlo en detalle pero, el error que marca Firebug hace referencia a un archivo local:

http://localhost/RC5/js.js

Es decir, que está en tu PC y no en la web ¿Es así? ¿Estás trabajando offline?

Responder
Inmortal  

Hmmmm, tengo un problema, no parece funcionar el Script, lo aloje en Yahoo Geocities, pero algo anda mal, cuando hago se hace clik en el boton, me lleva a la misma pagina, y le agrega despues de "...blogspot/nombredelId"

Por que?
Ya he intentado mucho, no se que pudiera estar mal.......:X

Espero me ayudes, aunque este post, ya esta viejito

Responder
Inmortal  

Ahh, y perdon, se me paso decir, que le pongo en ENLAZE? Que va a hai, no me qeuda muy claro,...

Gracias

Responder
JMiur  

Necesitaría que me mostraras algún ejemplo aunque no funcione, para que pueda verllo online.

Responder
Unknown  

Hola J.Miur, me preguntaba si conoces algun script para que el efecto Opacity se accione cuando se este en el top de la pagina. Me gustaria aplicarlo a una imagen para 'ir arriba', teniendo en cuenta que no puedo usar jQuery sino prototype y scriptacolous.

Responder
JMiur  

Pués no, la verdad no recuerdo haber visto nada semejante.

Responder
Unknown  

El efecto lo puedes ver en pizcos blog.

Responder
Prof. Cristian E. Moyano  

mmm..no me anda :( debo haber colocado mal el script en la plantilla. Yo lo coloque donde vos dijiste: despuès de "/head" no? y lo que no entiendo es que si el código del script es:

script src="URL/prototype.js" type="text/javascript"
script src="URL/scriptaculous.js?load=effects" type='text/javascript"

donde colocamos la url de "effects.js"?

Ya que en el script solo aparecen los enlaces a:
-prototype.js
-scriptaculous.js

Desde ya muchas gracias.

Responder
JMiur  

Dice ANTES de </head> y no después. Él archivo effects es cargado por scriptaculous y debe estar en el mismo directorio que los otros. Caso contrario, debe ser cargado de otra manera.

Pero, ya que veo que usas los archivos de la wiki y no los has alojado en un servidor, lo mejor es que veas esta entrada porque entonces, sería más cómodo y seguro cargarlos desde Google que es el método que utilizo yo. Será más sencillo de agregar, cargarán más rápido, estarán actualizados y no tendrás problemas. Simplemente copia y pega el código pero antes de </head>

Responder
Chaos The Kid  

Yo logro hacerlos pero me quedo una duda...Como se ponen en el blogger?

Responder
JMiur  

Como cualquier otro código, ta sea en una entrada, en la plantilla o en un elemento HTML; son enlaces iguales que cualqueir otro.

Responder
Daniel Peña  

Hola JMiur, me encantaría saber que eventos acepta esta librería, hice un par de ejemplillos, uno con el onclick (los ejemplos dados son con ese evento), y con onload en el body, pero es posible hacerlos con todos los eventos?, a mi el firebub me daba un error con la funcion flatten() en donde me decia que return this.inject([], function(array, value) ... no era una función :-S

Responder
JMiur  

Para esos detalles, deberías fijarte en la página de los desarrolladores.

Responder
Unknown  

Hola Jmiur,cuando intento poner las dos lineas del script,con sus respectivos links,me dice que tiene error,y lo coloco justo antes de /head cual sera el problema?

Responder
JMiur  

Creo que había un error en el post y le faltanba la barra de cierre ¿Será eso? Fíjate así:

<script src="URL/prototype.js" type="text/javascript" />
<script src="URL/scriptaculous.js?load=effects" type='text/javascript" />

Te recomendaría usar los scripts de Google mismo así te evitas alojarlos ya que scriptaculous.js y effects.js deben estar en la misma carpeta y eso no es fácil de conseguir cuando se usan aloja,mientos gratuitos.

Puedes hacerlo de este modo:

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, &quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Eso, cargará todo y será más rápido. Es el método que uso desde hace un tiempo.

Responder
Huerta  

Hola, alguien ha conseguido desescalar algo, volverlo al tamaño original?? meto valores negativos... pero me hace extraños

Responder
JMiur  

Eso te conviene consultarlo en los foros mismos de los desarrolladores.

Responder
Huerta  

ok, Gracias... lo haré... y os comento. De momento esta solucionado... metiendo tantos porciento a ojo de buen cubero :)
Si quereis echarle un ojo... ytuves.blogspot.com
darle a la bombillita del titulo del post... esta conbinado con tu ejemplo de oscurecer ventanas...aplicado a un video y solo funciona con el chrome,creo que por tener en el object las dimentiones como atributos en vez de con css, pero no puedo dimensionar con css los videos de google y otros servicios :(. Gracias de nuevo por tus aportaciones... no pretendo que soluciones mis problemas. algún día me animaré a colaborar yo tambien, seremos legión. :D

Responder
Carlos Martínez  

Hola JMiur :D.... Paso para saludarte y decirte que he tomado como referencia tu página para la entrada de mi blog, me he adentrado en esto de la programación web y ya voy aprendiendo poco a poco mas de css y librerias java, saludos :P...

Responder
Daniel  

Hola, disculpa cuando se cargan las librerias ¿para qué sirve el signo de interrogación que se encuentra por ejemplo en esta etiqueta?

<script src="URL/scriptaculous.js?load=effects" type='text/javascript" />

Responder
JMiur  

El signo ? indica algún parámetro de cualquier tipo; en este caso, carga un archivo extra llamado effects.js

Responder
Unknown  

muchas gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR