Como crear efectos en JQuery
21/06/2017

Como crear efectos en JQuery

Programación y Diseño Web

Como ya sabréis en los últimos meses he insistido bastante con que JavaScript es un lenguaje muy versátil usado para muchos fines, tanto relacionado con web como enfocado a aplicaciones móviles. Hoy os quiero hablar de una biblioteca dedicada a crear efectos visuales que harán más bonita nuestra presentación. Vamos allá.

Jquery, la biblioteca que necesitas para complementar tu web

Antes de nada debemos comprender que Jquery no es ni un framework ni nada por el estilo que ya hemos revisado en este blog. Esta biblioteca actúa de manera que nos ahorra trabajo al escribir código JS. ¿Esto qué significa? Muy sencillo, y es que al igual que ocurre con Bootstrap, Jquery es sólo un conjunto de clases que hacen cierto trabajo por nosotros, es decir que si quisiéramos obtener el mismo resultado picando el código de 0, o hard codding, necesitaremos más líneas. Vamos, que no nos sale a cuenta ya que generamos más texto. Entonces esto nos lleva a la siguiente pregunta: ¿cuando vamos a usar Jquery en nuestros proyectos? Aquí debemos valorar el tamaño de dicho proyecto. Es evidente que si únicamente necesitamos hacer un efecto sobre una imagen al pasar el ratón por encima no vamos a implementar todo un seguido de clases que pueden llegar a hacer mucho más que eso, si no que gracias a CSS y JavaScript, junto a la modificación del DOM, de la cual podéis leer un poco más aquí, lo vamos a crear nosotros mismos. No es complicado y hoy en día hay guías por doquier para poder hacerlo, incluso ejemplos funcionales. Recordad que somos programadores, si podemos encontrarlo bien explicado y funcional, tomamos el código y lo implementamos. Esto lo comento porqué debemos pensar que incorporar Jquery en nuestro proyecto es simplemente enlazar un fichero JS en nuestro HTML (en el siguiente párrafo os explicaré cómo), y cuanto más ligero sea, mejor para el servidor, por supuesto.

Formas de incluir Jquery en nuestra web

Bien, sabido todo esto, repasemos las maneras que tenemos de incorporar esta biblioteca. Recordemos que para enlazar código JavaScript en HTML debemos poner la etiqueta script dentro del head, de este modo nos encontramos dos maneras de hacer uso de ello:

  • Mediante descarga, podemos descargar libremente todo lo necesario para hacer uso de la biblioteca desde la misma página principal. Esto nos obliga a tener que escribir la ruta de forma manual dentro de la etiqueta head de nuestro fichero HTML.
  • Usando el CDN, o abreviatura de Content Delivery Network, nos permite no tener que descargar nada y acceder directamente a una versión remota de estos ficheros. Si no os queréis complicar, es lo que yo os recomendaría, de hecho es la versión que yo uso en mi página principal.

Os encontraréis que os pide seleccionar una versión, pero con escoger la última sin comprimir (uncompressed) será suficiente.

Funcionamiento de Jquery

Ahora que ya hemos incluido esta biblioteca a nuestro proyecto, analicemos un poco más su funcionamiento, tomando como ejemplo la creación de clases u objetos en JavaScript, de la cual puedes aprender un poco más aquí. Como bien he comentado, esto es únicamente un seguido de clases y objetos a los que debemos acceder cada vez que necesitemos hacer algo concreto, lo que nos facilita el trabajo. Ya que estamos hablando de efectos, vamos a mirar la API relacionada con esto mirando las bases. Jquery, como ocurre con JavaScript puro, debe recoger los elementos del DOM con un identificador a la clase (class) o nombre (name), de lo contrario no sabremos a quién debemos aplicar el efecto. Una vez tenemos bien identificado el objeto, le aplicamos el efecto con la siguiente sintaxis:

$( ".target" ).hide();

Donde “target” es el objeto HTML al cual queremos aplicarle el “hide”. Esto nos ofrece que con esta única línea de código vamos a poder esconder del DOM un elemento, cosa que usando JavaScript puro sería:

document.getElementsByClassName('appBanner')[0].style.visibility = 'hidden';

Como podemos observar, pese a que sigue siendo una sola línea de código, es más larga y conlleva tener en cuenta más cosas, y sin embargo accediendo a .hide nosotros mismos nos despreocupamos totalmente del “cómo” y vamos directamente a que la página responda como nosotros queremos.

Jquery está en muchos lugares, e incluso se puede usar con el desarrollo móvil, por lo que es una buena apuesta tratar de aprender a usarlo y, de hecho, con nuestro curso de desarrollo de aplicaciones móviles orientado a Apache Cordova tratamos los efectos visuales con Jquery Mobile, una rama de esta biblioteca optimizada para usarla en los dispositivos pequeños.

¿Conocías esta biblioteca JavaScript? ¿Esperabas que se pudiera lograr tanto con este lenguaje web? Ya hemos visto que se usa en Ionic, Apache Cordova o incluso frameworks más complejos como Appcelerator Titanium, de modo que os animo a todos a darle duro y ver todas las posibilidades que ofrece.

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.