compartidísimo: 3 Puntos básicos que necesitas verificar al usar jQuery, para que sí te funcionen los trucos en el blog

¿Alguna vez te has frustrado porque no te funciona un truco que usa jQuery, incluso hasta molestado con el redactor/creador de un tutorial? Quizás alguna vez te ha pasado, y buscando repuestas a tus porqués te atormentas, te enfadas, y piensas que quien escribió el tutorial seguramente cometió algún error (que también puede pasar), o que tú no estas hecho para eso, y sales despavorido de la página sin ganas de volver a intentarlo.

Afortunadamente, la mayoría de las veces, este problema tiene una solución simple, claro, pensando que todo está bien en el tutorial. Sólo tenemos que saber ciertos puntos básicos que de escapársenos, los trucos que tanto deseamos ver funcionar, simplemente no funcionarán.

Anteriormente te hablaba de 6 cosas que debes tomar en cuenta al usar jQuery en tu blog, ahora hablaremos un poco de cómo ordenar correctamente jQuery y los scripts que funcionan con él en la plantilla de Blogger, para que sí te funcionen los trucos, y muy bien.

¿Qué necesitamos verificar al usar jQuery por primera vez?

No es nada del otro mundo, nada que nos vaya a provocar un colapso neuronal,
son sólo ciertos puntos básicos que NO debemos ignorar...

1. Tener puesto jQuery sólo una vez en la plantilla. Al seguir un tutorial que use jQuery, antes de agregarlo, verifica que no lo tengas agregado. Recuerda que no necesariamente tiene que verse igual la versión, puede ser que tengas una versión más antigua, y luzca diferente a la del tutorial que estás siguiendo, pero eso no significa que lo deberías volver a agregar.

¿Cómo identifico a jQuery?

A jQuery lo encontramos dentro de una etiqueta llamada <script> y usualmente es descargado desde la libreria CDN de Google, eso quiere decir que Google lo aloja por nosotros, y sólo tenemos que hacer una "petición" a través de un enlace, para que sea descargado en nuestra plantilla.

El sctript con el enlace de jQuery, usándolo desde la libreria CDN de Google, luciría mas o menos así...

Ahí en el enlace, dice jQuery. La parte que viene resaltada de rojo, es la versión que se está solicitando, en este ejemplo, es la versión 1.8.1 y "min" resaltado de azul, quiere decir "minified" o minimizada o comprimida, que es la que deberíamos usar ya que es más ligera, que la que no está comprimida y que se identifica porque no lleva "min" en el enlace.

También, podemos descargar jQuery desde su pagina, o bien, alojarlo nosotros mismos, esto último no te lo recomiendo mucho, sobre todo si utilizas servicios de alojamiento gratuitos o poco confiables.

2. Cuidar el orden en que ubicas jQuery y los scripts que funcionan con éste.

Cuando usas jQuery, debes primero poner el script con el enlace a éste, y luego el/los script(s) que funcionan con él.

Este es un ejemplo de la estructura de una plantilla del diseñador de plantillas, ahí podemos ver donde colocaríamos jQuery y el resto de los scripts que funcionan con éste.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

<html>

<head>

<meta.../>

<title> El titulo de Blog </title>
<b:skin><![CDATA[/*
Los créditos y luego las Variables de la Plantilla*/
/* Aquí está el CSS del Blog*/
]]></b:skin>
<b:template-skin>
/* Mas CSS y otro código */
</b:template-skin>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs
/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript">
// El código que utiliza usualmente $ y que va a ejecutarse va aquí, y que funciona con jQuery. Ejemplo: $(document).ready(function(){
</script>

</head>

<body>
  

</body>

  </html>

En la parte que he resaltado con fondo azul, podemos ver primero el script que contiene un enlace a la librería de Google, para que sea descargado jQuery en nuestra plantilla.
Luego, vemos un script donde iría el código JavaScript, que va a ejecutarse y que funciona con jQuery. Por favor lee los comentarios resaltados de verde.

Si usaras varios trucos que funcionan con jQuery, asegúrate de ir colocando los scripts debajo del último script que has agregado y que también funciona con jQuery. Podemos agrupar los scipts, de tal modo que no requiramos meter el contenido cada vez en una nueva etiqueta <script>, eso lo veremos luego. Lo importante ahora es hacer que los trucos que usan jQuery funcionen ;)

3. Comprobar que no se use scriptaculous en la plantilla.

Otra razón que puede impedir que un truco funcione, es que tengas agregado scriptaculous en la plantilla, y de ser así, hay tres formas de arreglar el problema:

a) Quitar scriptaculous y sólo usar jQuery. Puede parecer una solución radical, pero, puede ser que el truco que necesita scriptaculous, también pueda conseguirse con jQuery, y de ser así, te estarás ahorrando "tiempo de carga en el blog", ya que no tendrá que descargarse de forma externa otros scripts en tu plantilla. En otras palabras vas a aligerar la carga de tu blog.

b) Poner primero jQuery "antes" que scriptaculous. Podemos usar jQuery y scriptaculous en la plantilla, poniendo primero jQuery, y después a scriptaculous, y en lugar de utilizar el alias "$" usar "jQuery" con el script que trabaja con jQuery.

Aquí el ejemplo que se muestra en la página de jQuery:

<html>
 <head>
   <script src="jquery.js"></script>
   <script src="prototype.js"></script>
   <script>
     // Usa jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Usa Prototype con $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

b) Usar jQuery y scriptaculous resolviendo el problema con el uso de la llamada noConflict. Otra solución que puede usarse cuando la anterior no es viable, es utilizar la llamada noCoflict, en el script que funciona con jQuery, eso evitaría tener conflictos al usar ambas librerías.

Finalmente a divertirse usando jQuery ;)

6 comentarios :

Gabriel Bárcenaenero 24, 2013
Hola Karla, recurro a tu experiencia para que me ayudes en lo siguiente:
(Me interesan sobretodo estos dos gadgets... Menú deslizante y las flechas de desplazamiento arriba/abajo, aparte de que hay otros que usan el jquery y van bien).

De acuerdo a tu publicación:
En el punto uno, por ahora he tenido que poner DOS veces el jQuery porque si lo pongo UNA sola vez en el HEAD, no me funcionan las flechas de deslizamiento.
Sé que de acuerdo al punto dos, me está afectando el orden; pero no sé como solucionarlo.
En cuanto al punto tres, NO lo uso.
Este es el blog de pruebas: http://gabozan.blogspot.com/
Un saludo y gracias de antemano.
ResponderEliminar
Respuestas
AliethkODabril 18, 2013
Hola Karla, tengo un problema con mi blog (soy muy nuevo) tengo arriba una barra deslizante donde están imágenes de libros, o mas bien tenia.. Desaparecieron las flechas (izquierda derecha)
al colocar botones de arriba y abajo, ayuda por favor!
aquí para que te fijes: http://literatocompartido.blogspot.com/
Gracias de antemano.
ResponderEliminar
Respuestas