Qué es jQuery
Antes de instalar cualquier jQuery plugins, hay que entender que es la librería jQuery.
jQuery es una librería (o biblioteca) JavaScript que fue creada por John Resign, que permite interactuar con los documentos HTML, manipular el árbol DOM, gestionar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
En su 10 años de vida jQuery ha conseguido ser la librería Javascript más utilizada en todas las páginas web creada y activas.
jQuery es un único fichero Javascript que contiene todas las funcionalidades de DOM, efectos eventos y AJAX. Con esta librería se puede cambiar el contenido de las páginas web sin necesidad de recargarla, con la manipulación del DOM y las peticiones AJAX. La versión actual es la 3.1.0.
Los proyectos de la Fundation: jquery y jquery uy
Ante todo hay que decir que la “jQuery Foundation” es el organismo que hoy en día se ocupa del desarrollo y manutención de jquery. Tiene entre sus proyectos además del mismo jQuery, también otro importante proyecto muy utilizado como jQuery ui. En la página web de la Foundation jQuery se puede encontrar toda la información necesaria sobre cada uno de sus proyectos. Además esta es una página rica de documentación y código de ejemplo como desarrollar (utilizar) jQuery o jQuery ui en nuestras páginas web.
Porque utilizar los jQuery plugins
Hoy en día en todos mis proyectos estoy utilizado jQuery para desarrollar algunas funcionalidad útiles a la usabiulidad de mi páginas web. Un ejemplo concreto podría ser el XXXXXXXXXXXX de está página web (enlace al proyecto de portfolio). jQuery nos ayuda a economizar nuestro tiempo y a hacer más potentes y usables nuestras aplicaciones u nuestras páginas web.
Esta librería javascript es utilizada en más del 90% de páginas web y eso hace que sea ya un estándar web el hecho de incluirlo en nuestros proyectos. Es de fácil aprendizaje, eso si, seria mucho mejor empezar a aprender JavaScript porque esa librerías de JavaScript depende.
Con la librería jQuery es relativamente sencillo crear animaciones, objectos animados, y si en conjunto utilizamos un poco de animaciones hechas con HTML5/CSS3, nos quedaran páginas web espectaculares.
Otro aspecto importante es el manejo del DOM usando css y también el manejo rápido de propiedades y css.
Como instalar jQuery
Es muy simple incluir en nuestros proyectos web la librera de jQuery. Yo aconsejo siempre incluirlo en el footer de nuestros proyectos. Eso no es siempre posible porqué hay códigos que hay que ejecutarlo antes que se cargue la página. En estos caso el archivo hay que incluirlo en el Header. En linea general en una plantilla WordPress hay que insertar en el archivo footer.php esta linea:
< script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min-js”>< /script>
Esta linea lo que hace es incluir a nuestro proyecto el archivo comprimido (min) de la versión 1.11.3 de jquery.
Hay dos posibilidad de incluir la librería de jQuery en nuestro sitio web. Hay que decir que es imprescindible incluir el archivo jQuery.js antes de incluir cualquier otro plugin que depende de esa librería.
Descargar el archivo de la librería jQuery en local
La primera opción es incluir en local en nuestros proyecto, por ejemplo en una carpeta /js/ el archivo:
< script src=“/js/1.11.3/jquery.min-js”>< /script>
Esta ruta puede cambiar según tu proyecto.
Por ejemplo en WordPress podría ser algo como este:
< script src=“< ?php bloginfo(‘template_directory’)?>/js/jquery.min-js”>< /script>
La función bloginfo(‘’) lo que hace es imprimir la ruta correcta de nuestro tema wordpress.
con CDNs
La otra manera de incluir la librería jQuery en nuestros proyectos web es la de utilizar los CDNs. Un CDN es un Content Delivery Network o Red de entrega de contenidos. Además un CDN permite que el cliente descargue el archivo desde un tercero en lugar de nuestro servidor.
Las ventajas de utilizar un CDN
- Ahorro del proprio ancho de banda.
Ante todo hay que decir que si en lugar de ser nuestro servidor el que sirve la librería jquery, lo hace otro servidor, estamos ahorrando el ancho de banda. De todos modos hay que decir que estamos hablando de unos pocos Kbs por petición, entonces el coste es marginal. - Mayor velocidad en la descarga de la librería jQuery.
Las peticiones simultáneas que pueden realizarse a un mismo servidor suelen limitarse en número. Entonces si nuestra página web está compuesta por muchos archivo, utilizar un CDN permite que los archivos puedan descargarse de forma paralela diminuyendo el tiempo necesario para cargarse. - Uso mejor de la cache en el lado cliente.
Este es el punto más importante de utilizar un CDN. Cada vez que un navegador navega una página web, este guarda cada archivo css o javascript, para recurrir a ellos en futuras visitas. Eso significa que a lo largo del día el navegador de llega de archivos. Sin embrago cuando usamos un CDN que sea Google, Microsoft o Amazon, podemos aprovechar la versión cacheada que haya generado alguna otra página por la que hayamos navegados tener que volver a descargarlo.
Enlaces directos a los CDNs más populares:
Google
Microsoft
Amazon
MAXCDN
JSDelivr
Los mejores 26 jQuery plugins (con descarga directa)
Finalmente os pongo 26 jQuery plugins que nos pueden ayudar en vuestro proyectos web. Muchos de estos plugins son ya versiones bastante estables, de todos modos os aconsejo de probarlo antes de ponerlos en en el proyecto en producción.
Como instalar los jQuery plugins
En conclusion puedo deciros que la instalación de un plugin jQuery es bastante sencilla. Hay solo que incluir el archivo después de incluir el archivo de jQuery.
2. Moment.js
4. Alertify
Este plugin me gusta mucho porqué permite crear ventanas modal en las cual se pueden incluir «botones» que generan eventos al pinchar sobre esos. El creator del proyecto ya no sigue la manutención de plugin pero hay otras páginas web que lo están desarrollando como:
5. Tooltipster
6. Chartjs
7. Jarallax
8. Scrollpath
9. gridalicious
10. iosslider
11. Slinky Menu
12. Tabslet
13. Readable
Una buena tipografía puede hacer o romper un diseño web, por eso es muy útil este plugin.
14. Unsolder
15. Aground Modal
Avgrund es un plugin de jQuery para ventanas modales. Utiliza un interesante concepto que muestra profundidad entre la ventana y la página. Funciona en todos los navegadores modernos.
16. Monthly.js
17. paginationjs
18. Fancybox
19. FormValidation (de pago – 50$)
20. Sticky Header
21. rPage
22. Image Map Pro (de pago 9$)
23. 360 Product View (de pago 10$)
24. SweetModal
25. Tablesorter
MUY IMPORTANTE: Puede ser que algunos plugins no funcionan con algunas versiones de jQuery. Lo que os aconsejo es mirar en la documentación de cada plugin cual versión se aconseja para cada plugin.