17 septiembre 2012

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

jquery
¿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 estás hecho para éso, 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 librería CDN de Google. Éso quiere decir que Google lo aloja por nosotros, y sólo tenemos que hacer una "petición" usando dicha etiqueta <script>, para que sea descargado en nuestra plantilla.

El script enlazado jQuery, desde la libreria CDN de Google, luciría así:

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

Una vez puesto en la plantilla, al guardar los cambios, lo verás así:

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

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 comprimida, que es la que deberíamos usar ya que es más ligera, que la que no lo está y que se identifica porque no lleva "min" en el enlace.

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

En otras ocasiones, puede ser que una plantilla incluya, o un tutorial utilice un enlace a la versión más reciente de jQuery, en cuyo caso luciría así cuando es alojada por el mismo jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" />

O así cuando es alojada por Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />


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>
<!-- La apertura de la etiqueta html -->
<html><!-- Aquí empieza la sección de la cabecera de la plantilla -->
<head>
<!-- Aquí van las etiquetas "meta" --> <meta.../>
<!-- Aquí va el título del Blog --> <title> El título 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>
<!-- Este es el script con jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs
/jquery/1.8.1/jquery.min.js"></script>

<!-- Este es un script que funciona con jQuery -->
<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>

<!--Luego está el cierre de la etiqueta head -->
</head>
<!--Luego está la apertura de la etiqueta body -->
<body>
<!-- Aquí esta todo el contenido del blog -->
<!--Luego está el cierre de la etiqueta body -->
</body>
<!-- Luego viene el cierre de la etiqueta html -->
</html>


En la parte que he resaltado de 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 usarás 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>, éso 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>


c) 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 ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.