Las librerías de Javascript: jQuery

Las librerías de Javascript: jQuery

Ya hemos visto teoría sobre distintos lenguajes relacionados con la programación web, ya sea PHP, JavaScript, etc, y los usos que le podemos dar. Pero ahora nos llega una duda. Pese a que tenemos CSS para dar el aspecto deseado y hacer que nuestras páginas sean más bonitas a la vista de nuestros futuros usuarios y al público en general, siguen siendo páginas con poca vida.

Hay muchas técnicas de hacer que las páginas web ganen atractivo con efectos o haciendo que los estilos se modifiquen en función de como actúe el usuario. Una de estas técnicas es JQuery, que pese a que lleve la palabra “Query” en su nombre, no tiene nada que ver con bases de datos. JQuery es una librería para JavaScript (la “J” de su nombre es por este lenguaje) la cual básicamente sirve para simplificar la interacción de los documentos HTML y el usuario. Vamos a ver algunos aspectos de esta librería tan usada a nivel mundial.

Saca todo el potencial de tu web con JQuery y JavaScript

Empezando por lo básico, ¿qué es JQuery? Debemos entender que no es un lenguaje nuevo ni tampoco un entorno externo. Es una librería de un lenguaje ya existente conocido por nosotros. Esto significa que en realidad lo que hacemos es enriquecer JavaScript. La gracia de usar librerías es que funcionalidades que aparentemente requieren muchas lineas de código, gracias a ellas se simplifica muchísimo, y eso mismo ocurre con JQuery. Gracias a ella, detalles como por ejemplo que una imagen se vaya adaptando al tamaño de la pantalla es mucho más sencillo a nivel de esfuerzo por parte del diseñador. Además es de licencia libre, por lo que su uso no requiere un pago adicional.

Las posibilidades que nos da esta librería son varias, pero las más comunes y vistosas son:

  • Modificación de los estilos (CSS). Podremos hacer que los estilos ya definidos en la hoja se modifiquen cuando se cumplan algunos requisitos. Por ejemplo, imaginemos que tenemos una barra superior con un menú y queremos que siempre esté a la vista al hacer scroll. Con JQuery es posible.
  • Efectos y animaciones. Podremos establecer animaciones sencillas sin tener que recurrir a otros lenguajes muy pesados.
  • Utilidades a nivel de datos locales, como el lenguaje del navegador.
  • Compatible con la gran mayoría de navegadores comerciales, lo que incluye Firefox, Opera, Chrome, Safari, Internet Explorer (Microsoft Edge para windows 10).

Tal y como podéis ver, ofrece grandes ventajas y su compatibilidad tan amplia nos asegura que llegará a muchos ordenadores, incluso los más antiguos.

Todo esto está muy bien, pero ¿y los ejemplos?

Dicen que una imagen vale más que mil palabras, por lo que vamos a ver unos ejemplos de lo que es capaz de hacer JQuery por nosotros si llegamos a dominarlo. Las posibilidades son bastante amplias: desde poder arrastrar objetos por la pantalla, hacer que algún elemento se adapte a ella, o que un menú esté visible siempre, sin importar si hacemos scroll.

Cambiar el tamaño de un objeto 

Por ejemplo, un objeto que podemos cambiar su tamaño. Pese a que las cajas de texto ya incorporan esto, imaginad que tenemos un servicio para hacer plantillas, o necesitamos que el usuario decida el tamaño final de algún objeto. Esto es perfecto, ya que nos ahorra las típicas cajas preguntando píxeles y es más cercano, porqué lo puedes hacer desde una pantalla táctil también.

Efectos del menú 

Distintos efectos para mostrar las opciones de un menú. ¿Que mejor que hacer de nuestros menús un objeto más animado y vivo, que un simple clic? Tenemos variedad de efectos a para poner, y en este ejemplo que os he dejado los podéis ver todos. Esto hace que los usuarios finales tengan un concepto de nuestra web mucho más positivo. Parece que la web sea compleja y “menos cutre”, detalles que, si no afectan a la usabilidad, hacen que sea vista con mejores ojos.

Modificar la posición de un objeto 

Modificar la posición de un objeto, como se muestra en este último ejemplo un poco más complejo que los anteriores, pero esto nos demuestra que, a partir de unos estilos ya existentes, nosotros podemos modificarlos en cualquier momento para cambiar la posición de un objeto. Esto nos puede ser muy útil a la hora de intentar que nuestra web sea visualizada sin problemas sin depender del tamaño de la pantalla o del dispositivo, ya sea el PC, el teléfono o la tableta.

En resumen, JQuery nos ofrece un gran elenco de recursos a añadir a nuestra página web, mediante JavaScript, los cuales serían muy largos y tediosos de incorporar. Estos recursos hacen que nuestra web sea más bonita a nivel visual, adaptable a todas las posibles plataformas y, sobretodo, nos dará un aire de profesionalidad. Pero sobretodo no olvidéis que, por muy bonitos que sean los efectos o por muy útil que sea JQuery, no podéis perder de vista la usabilidad y la arquitectura de la información, ya que por muy bonitos que sean los efectos, si la web está mal construida, no hay animación que anime ese bajón.

¿Conocíais Jquery?¿Os parece complejo, o por más bien una tontería? Hacédmelo saber en los comentarios.

Curso relacionado: Curso de Creación y Desarrollo de páginas web