33

Librerías JavaScript : script.aculo.us, y prototype,

Scriptaculous Logo

Unas de las librerias de Javascript más conocidas son Prototipe y Scriptculous, que pueden usarse en Blogger para conseguir algunos efectos muy funcionales en distintas partes del blog.

Lo mejor de estas librerías es que no es necesario colocar la "llamada" a sus funciones cada vez que vayamos a usar algún efecto que las necesite.

Tendremos que cargarlas solo una vez en nuestra plantilla colocando antes de </head> el código API de Google:


<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
<!-- Prototype y Scriptaculous-->


Este código hará que se carguen todos los códigos que necesitamos para los distintos efectos, como por ejemplo el Effect.toggle que es el que uso en el Escaparate para el "mostrar/ocultar" en el título de las entradas expandibles y que nos posibilita el mostrar y ocultar elementos de forma animada.

Tendremos que revisar de vez en cuando, si las versiones son actualizadas en Google Apis ya que aunque los efectos que estemos usando funcionaran igualmente, lo mejor es mantenerse actualizado.

En próximas entradas veremos algunos de los efectos que podemos conseguir con el uso de estas librerías, como el "ir arriba" con efecto slide o el mostrar y ocultar para los gadgets de la sidebar.

Entradas Relacionadas:

33 comentarios:


Guille Zimm

Hola Roza como te va?
Estoy empezando con un blog. que va a hablar de las esperiencias de la vida... bue.. en fin te pregunto como poner la flechita que sube al tope la pagina?? como tenes vos gracias.
mi blog es patodoc.com.ar

Pucho

Gracias Rosa, espero ansioso la entrada donde expliques como expadir/contraer con efecto deslizante. Un saludo

GOEL

Bueno... tengo una curiosidad y la verdad no se nada de codigos... asi que pregunto a quien si sabe..
Rosa, vos sabes como escribir un texto que siga el puntero del mouse?
si tu respuesta es si (se que es lo mas seguro), espero tu ayuda...
Gracias... por toda tu colaboracion..

Lajarín

Hola, tengo una consulta y espero no te importe la realice en este post :)
Me gustaría poner enlaces en la imagen de cabecera de mi blog, tal como lo hacen en este:http://www.curiousoldlibrary.blogspot.com/
¿cómo podría hacerlo?
gracias de antemano
jose maria

Fero

Excelente!
Voy a colocarlo inmediatamente, y quedo en espera de tus próximos post.

Me gustaría saber como conseguir el efecto maravilloso que tiene este blog de muestra en la barra lateral:
http://newzen-for-blogger.blogspot.commuy agradecido Rosa,
Genial.

Marianella

Hola mi querida Rosa, me encanta como colocaste tu ENLAZAME, pero no lo he encontrado como hacerlo, asi con un boton y me lleve a otra pagina para seguir pasos.

Espero que me guies, un beso de En Tu Ausencia

Jessica

Yay!! Gracias Rosa! Estaré esperando ansiosa como explicas como utilizo este script para el efecto deslizante en diversas cosas.

Rosa

Guille Zimm Acabo de decir en esta misma entrada, que más adelante explicaré como colocar la flechita con el mismo efecto que yo tengo...como de "deslizamineto".

Para incluirla on una subida "normal" puedes ver esta entrada:
http://elescaparatederosa.blogspot.com/2007/11/volver-arriba-en-cada-post.html

Rosa

@Pucho @Jessica Enseguida...;)
Ando probando con distintos elementos y es muy sencillo, no tendréis mayor problema, una vez aprendida la teoría, para mostrar y ocultar cualquier cosa...

Rosa

GOEL Puedes ver en esta entrada como hacer eso que dices, aunque la verdad, ese tipo de códigos no están hechos para Blogger y podrían dar algún tipo de problemas...

http://elescaparatederosa.blogspot.com/2007/10/frase-o-texto-que-sigue-al-cursor.html

Graciela

Rosi el efecto que tienes en expandir y ocultar queda bellísimo, ahora nos explicarás lo de las librerías, muy bien :P seguiré expectante la explicación!!! besitos.

Rosa

Lajarín Eso se llama un mapa de imagen...antes no era bien recibido por los navegadores, ahora dicen que si...aunque no se, al estar en el header con varios enlaces como afectará a la indexación...
En fin, aquí puedes leer algo sobre el tema que te sirva de punto de partida...no puedo ayudarte mucho más.
http://www.webestilo.com/html/cap6b.phtml

Rosa

Fero No es necesario que lo incluyas si no estás usando ninguna función...aunque bueno, je,je, se que alguna vas a aprovechar seguro.;)

Ese menú que me muestras está hecho precisamente usando Prototype, una de estas librerías...lo miraré ;)

Fero

Rosa: Lo coloqué porque espero poder aprender a usarlo pronto. Aquí estaré, aprendiendo :)
Justo estoy viendo tus post anteriores.

Gracias; saludos.

Inma

Hola Posa, ya sabes que la ignorancia es muy atrevida. No se si esta librería es compatible con otras, si el blog puede tener más de una...
Perdona mi ignorancia.
Gracias y besitos

Rosa

Marianella Mira aquí:
http://elescaparatederosa.blogspot.com/2008/03/link-tu-blog-mediante-un-widget.html

Rosa

Graciela Lo he hecho con esta librería precisamente :D iremos viendo como hacer estas cositas...

Rosa

Inma Buena pregunta, en serio. Pues no, no pueden combinarse más de una y es una pena, porque tengo algunas cosillas para JQuery también que están genial...

Mary Lovecraft

Oye pues genial esta librería no, Rosita Linda??
a mí de momento me ha sonado un poco a chino (sólo intuyo algo) pero me quedé tranquila de que nos irás explicando poco a poco.

gracias por compartir tanto :D

Céz

Jajajaja tengo el mismo sentimiento que Mary Lovercraft, a mi me pareció un poco fuera de nuestros pocos conocimientos "hmtlianos" jajaja. Presiento que Rosa trae un as bajo su manga. Muy intrigado estoy...

Rosa

Mary No hay que saber mucho más...es como cargar cualquier script pero solo lo hacemos una vez porque vale para muchos efectos.
En Vagabundia hay abundante información sobre el tema...yo también soy una aprendiz :D

Rosa

Céz De veras que es algo sencillo, ya verás...solo publiqué esta entrada para no tener que indicar que no hace falta colocar la librería cada vez que publique algo sobre como hacer un efecto...

Mateo

Ya lo puse, ahora no tengo la menor idea de para que me sirve jajaaj si alguien me tira una pista quizas pueda mejorar algo mi blog.

Rosa

Mateo No había que poner nada... solo es una entrada informativa sobre el uso de unas librería de script que en un futuro voy a usar como referencia para añadir efectos al blog...
Me parece que no es una buena opción la que tomas de "añadir cualquier cosa" al blog solo porque la ves aquí o en otros blogs de ayuda, acabarás sobrecargando el blog innecesariamente, lo más importante es un contenido de calidad, no hay que preocuparse tanto por el aspecto...

Ana

Hola Rosa, por aqui visitandote como siempre, no se si me recuerdas soy DyDy, espero te encuentres bien y como siempre gracias por toda tu ayuda,
Esta ves escribo para ayudarle al usuario llamado
Lajarin, con lo de la imagen mapeada, yo las hago y en realidad es bastante sencillo, parace dificil pero no lo es, aqui les dejo el link de un excelente videotutorial donde lo explican detalladamente y es muy sencillo de hacer, saludos:
http://www.youtube.com/watch?v=4mL6zG2roic&feature=related

Rosa

Ana Claro que me acuerdo, como no voy a acordarme de la reina de los flash :D

¡Gracias!

Ana

jajjajaja Gracias Rosa, por acordarte de mi.
Te voy a enviar un email con alguna informacion que te interesara sobre mis trabajos y demas, saluditos

Sergio

Aquí hay un ejemplo del uso que le podemos dar a scriptaculos jejeje:

http://sviudes.blogspot.com/2009/08/quieres-poner-shin-chan-paseando-por-tu.html

Rosa

Sergio Ja,ja, muy simpático, yo lo tengo probado con mariposas y abejitas, pero ese es la bombaaa.
¿Es tu blog? Quizás podría publicarlo con referencia a la entrada y demás, por supuesto.

Fabio De Minicis

Hola Rosa, antes todo felicitarte por el blog, me está siendo de mucha ayuda tus consejos. Estoy queriendo instalar las pestañas deslizantes en el margen derecho y cuando pego las librerias que nos aconsejar antes de HEAD me pasa que se borran mis seguidores...no sé si me he explicado bien, gracias por tus consejos y espero que me puedas dar algún consejo de cómo hacerlo.

Gerardo

genial me funciona perfecto muchas gracias
Rosa :)

Eligor!

Me di cuenta que existe un pequeño problema con este script, que oculta los SEGUIDORES (blogger), existira solucion a esto? :S

Rosa

Eligor! Y si. Aquí estála solución:

http://elescaparatederosa.blogspot.com/2010/06/mostrar-el-gadget-de-seguidores-usando.html

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S