Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Qué es JQuery y cómo implementarlo

Escrito por Laura Chuburu

Qué es JQuery

JQuery es una librería de JavaScript (JavaScript es un lenguaje de programación muy usado en desarrollo web). Esta librería de código abierto, simplifica la tarea de programar en JavaScript y permite agregar interactividad a un sitio web sin tener conocimientos del lenguaje.

Sitio web jquery.com

Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos) creados por desarrolladores de todo el mundo. Estos plugins resuelven situaciones concretas dentro del maquetado de un sitio, por ejemplo: un menú responsive, una galería de fotos, un carrousel de imágenes, un slide, un header que cambia de tamaño, el deslizamiento del scroll al hacer clic en un botón (anclas HTML), la transición entre páginas y miles de efectos más.

Cada plugin tiene un sitio web desde donde se pueden descargar sus archivos, con demos, instrucciones para su implementación, opciones de configuración e información de las licencias. En la web hay cientos de blogs que recopilan y analizan los plugins según sus funcionalidades, reuniendo en un sólo post los links a varios plugins de función similar, lo que facilita mucho la búsqueda.

Cómo se instala un plugin

Luego de realizar la búsqueda y comparar los diferentes demos, elegimos el plugin que queremos instalar en nuestro sitio y descargamos los archivos que lo componen. Dependiendo de la complejidad, algunos plugins están compuestos por un sólo archivo .js como por ejemplo el deslizamiento del scroll y otros se componen de un grupo de archivos relacionados entre sí: html, css, js e imágenes con es el caso de una galería de fotos.

Cada plugin tiene sus instrucciones de instalación propias, escritas por su autor, pero vamos enumerar los puntos que hay que tener en cuenta durante el proceso:

1) Librería JQuery

Todos los plugins de JQuery necesitan la librería de JQuery para funcionar. La librería es un archivo .js que se puede descargar desde el sitio oficial: https://jquery.com/ colocar en una carpeta js y luego vincular con una etiqueta <script>, por ejemplo:

<script src="js/jquery-3.2.1.min.js"></script>

Ese vínculo conviene colocarlo dentro del body y hacia el final del HTML para no demorar la carga de los contenidos. Si descargamos el archivo y lo vinculamos de esa manera, debemos subir el archivo a nuestro hosting.

Otra forma de vincular la librería es utilizando el servidor de Google. De esta manera no necesitamos descargarla ni subirla a nuestro servidor. En ese caso, el código es el mismo pero con ruta absoluta:

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

La página donde Google ofrece los vínculos a diferentes recursos es la siguiente: https://developers.google.com/speed/libraries/#jquery

Los archivos .min son archivos que están optimizados (con el código comprimido) y no son editables, se usan en producción cuando se considera que no es necesario hacerle modificaciones. La ventaja es que son más livianos y por lo tanto cargan más rápido.

2) Archivo .js del plugin

Este es el archivo principal del plugin y se obtiene descargando del sitio. Habitualmente el nombre del archivo coincide con el nombre del plugin, por ejemplo:

<script src="js/responsiveslides.min.js"></script>

Hay que tener en cuenta que si copiamos este código de las instrucciones de instalación tenemos que chequear las rutas de los archivos, especialmente el nombre de las carpetas.

3) Estructura HTML

En algunos casos las instrucciones del plugin sugieren una estructura determinada en HTML, por ejemplo que una galería de fotos esté resuelta con listas o con divs o que un elemento sea identificado con class o con ID. Si en el momento de instalar el plugin ya tenemos escrito nuestro HTML, es conveniente adaptarlo a la estructura que sugiere el plugin para asegurarnos de que funcione y no tener que modificar otros elementos como reglas CSS.

4) Función

La función es un bloque de código JavaScript que contiene instrucciones que necesita el plugin para ejecutarse. Se escribe dentro del body entre las etiquetas <script></script>. Puede ir inmediatamente debajo de la estructura HTML del plugin o antes de que cierre la etiqueta body. Si es posible es mejor colocarla hacia el final del documento para que la descarga de la página sea más rápida.

<script>
$(document).ready(function() {
$("#owl").owlCarousel({
autoPlay: 3000,
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});

});
</script>

5) Reglas CSS

La mayoría de los plugins tienen sus propias reglas CSS. Si son pocas líneas conviene incorporarlas a nuestra hoja de estilos, pero si son muchas, entonces mejor guardar el archivo .css descargado en nuestra carpeta css y colocar el vínculo desde el head. El vínculo a la hoja de estilos normalmente está indicado en las instrucciones del plugin, pero es necesario chequear la ruta para que coincida con la ubicación que le dimos en nuestro proyecto.

6) Imágenes

Algunos plugins incorporan imágenes de íconos que son llamados desde el código CSS. En este caso, y si el código es extenso, es conveniente mantener la relación de la ubicación entre el CSS y las imágenes para no romper las rutas. Es más seguro que la carpeta imágenes del plugin quede junto con los CSS que moverla a nuestra carpeta imágenes.

En realción a las rutas y en algunos casos si el plugin tiene mucha cantidad de archivos (todos relacionados entre sí) conviene mantener la carpeta intacta y colocarla por ejemplo dentro de nuestra carpeta js aunque dentro de ella haya archicos css o imágenes. Además, en el caso de querer remover el plugin de nuestra página, sería mucho más simple encontrar los archivos.

NOTA: no necesariamente todos los plugins tienen todos estos elementos, algunos más simples no requieren imágenes, otros tampoco tienen CSS.

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.