JQuery es una librería Javascript en código libre (licencia MIT y GNU) que nos permite dar a Joomla funcionalidades y efectos adicionales, por ejemplo, galerías de fotos, efectos rotativos, mejoras en visualización en distintos navegadores y un varias utilidades que mediante HTML y CSS no son posibles de realizar por sí solos.

Integración de Jquery en Joomla

La librería de Javascript nativa de Joomla es Mootools, pero desde la versión 3.0 se incorporó Jquery en el core de Joomla. Así como podemos encontrar una gran cantidad de recursos en el directorio de extensiones de Joomla, también podemos encontrar una cantidad aún mayor de recursos Jquery gratuitas y en código libre que se pueden integrar a nuestro portal Joomla.

La integracion se puede hacer de 2 vias, mediante la url hospedada en Google CDN (http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js), o bien, descargandola directamente desde www.jquery.com y subiendola por FTP a un directorio de nuestro sitio web. Es recomendable llamar a la librería Jquery de Google CDN principalmente por un tema de rapidez de carga del sitio y de actualizaciones en la librería.
Luego de integrado se hace el llamado desde el código, dentro de la etiqueta HEAD. Ejemplo:

Si extrañaban el típico type="text/javascript" que se utilizaba anteriormente para indicarle al navegador que estamos usando un script, es porque desde la llegada de HTML5, Javascript es el lenguaje que viene por defecto.

Conflictos comunes

En un principio las funciones de Jquery se identificaban con el caracter $(), este fue cambiado posteriormente por Jquery(), este cambio es el que causa frecuentes problemas de compatibilidad Jquery. Para solucionar estos problemas existen algunos plugins gratuitos como Jquery Easy que nos facilita la vida al momento de integrar Jquery.

Librerias especificas

Es posible que nos encontremos con algunos desarrolladores de prestigio como Yootheme, el cual incorpora su propia librería de Jquery dentro de su componente Widgetkit. Este no esta vinculado al tradicional que se encuentra en Google Apis, sino que viene incorporado dentro del componente. Esto también podría producir algún problema de incompatibilidad, pero es frecuentemente solucionable mediante el plugin Jquery Easy.

Ejemplo Práctico (Mapa interactivo)

Previo a la insercion de un codigo personalizado dentro de un articulo o un modulo, se necesita una extension que nos permita la inclusion de codigo custom, por ejemplo, Easy Custom Code que se encuentra en el directorio de extensiones de Joomla en el siguiente enlace 

Con el siguiente ejemplo vamos a incorporar un efecto "On Hover" a un mapa con coordenadas, podemos hacerlo mediante un script realizado con Jquery que se puede ver en funcionamiento en la siguiente URL 

Si nos fijamos en el código fuente podemos ver que cada uno de los países fueron dibujados con la función "mapa de coordenadas" que probablemente fue trazado con dreamweaver. Si queremos incorporar el mismo mapa en un articulo debemos descargar las carpetas que componen el script y se encuentran aqui .

Luego subimos la carpeta a nuestro servidor y revisamos la carpeta "Docs" que contiene los HTML del script y son los que debemos copiar y pegar en nuestro artículo o módulo de Joomla. Luego debemos actualizar los vínculos a la imagen y script jquery que ya están alojadas en nuestro servidor.

Si queremos cambiar el mapa que viene por defecto podemos cambiar la imagen y trazar las coordenadas con la función de Dreamweaver o Fireworks, luego se exporta el html generado.

Glosario:

• Jquery UI: serie de elementos pre desarrollados para Jquery. Permite dar atributos y funciones como arrastrar, desaparecer, autocompletar, etc.
• MooTools: librería de Javascript nativa de Joomla.
• No-conflict mode: no es más que el reemplazo de $() por JQuery(), para evitar incompatibilidades entre las versiones antiguas del script y versiones recientes.

Conclusión

Jquery es un gran complemento de Joomla, si logras conocer en profundidad esta tecnología y con conocimientos de PHP, estarás a un paso de crear una nueva extensión para Joomla.

Recursos JQuery

http://www.jquery.com (pagina oficial)
http://www.jqueryrain.com/ (recursos)
http://www.facebook.com/jqueryrain (todos los dias nos sorprenden con algo nuevo)