¿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í...
<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 veras así
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" />
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>
<!-- La apertura de la etiqueta html -->
<html>
<!-- Aquí empieza la seccion de la cabecera de la plantilla -->
<head>
<!-- Aquí van las etiquetas "meta" -->
<meta.../>
<!-- Aquí va el titulo del Blog -->
<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>
<!-- 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 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 ;)
No hay comentarios:
Publicar un comentario