Como introducir JQuery en nuestra web
Vamos a aprender como introducir JQuery en una web, para ello tenemos que seguir una serie de sencillos pasos que vamos a ir explicando de uno en uno.
Descargando la última versión
Lo primero que debemos de hacer es descargar la última versión de Jquery, de este modo todas sus funciones estarán activas.
Lo único que debemos de hacer es entrar en la web oficial de jquery, y acceder a la sección de descargas, una vez allí debemos de bajarnos la última versión. Yo prefiero la comprimida (Producción) ya que ocupa menos y no vamos a modificar su funcionalidad y su carga es más rápida.
Cuando nos muestre el código deberemos de copiarlo y pegarlo en un editor de texto como sublime, notepad++ o atom, y guardarlo con el nombre que queramos, aunque recomiendo ponerle jquery-xxx.js, donde las x son la versión.
La estructura de directorios
Como de costumbre es bastante útil que nuestro proyecto este bien organizado en carpetas, de modo que nuestro archivo JQuery estaría dentro de una carpeta llamada js, de ese modo tendremos aislados nuestros archivos javascript de los demás.
De este modo nos quedaría una estructura de carpetas como la de la imagen.
Creando una página sencilla
El siguiente paso es crear nuestro archivo html, que no tendrá demasiado complejidad, de hecho quedará más o menos como el siguiente:
<!DOCTYPE html> <html> <head> <title>Ejemplo de inclusión de JQuery</title> <script type="text/javascript" src="js/jquery-214.js"></script> <script> </script> </head> <body> </body> </html>
Como podemos observar es un html practicamente en blanco, donde se ha enlazado el archivo de JQuery ubicado en la carpeta js y se ha dejado una etiqueta script sin nada con el fin de ir escribiendo en ella nuestras funcionalidades.
Aunque lo correcto es que las funcionalidades se encuentren en otro archivo js que hagamos nosotros, nosotros trabajaremos muchas veces desde el mismo html para que sea mucho más didáctico.
¿Y ahora que…?
Bueno ya tenemos nuestra página lista para funcionar, ahora debemos de asegurarnos de nuestra páginas haya terminado de cargar para poder afectar a todo el documento y su estructura, si no hacemos esto el riesgo de que haya algún error es bastante alto, sobre todo si nuestra web es compleja y tarda más en cargar. Aunque en realidad no hace falta esperar todo ese tiempo, ya que solo hay que esperar a que el navegador reciba el código HTML completo y lo haya procesado.
JQuery dispone de de una manera de hacer acciones justo cuando ya esta lista nuestra página, y será algo con lo que nos iremos acostumbrando ya que tendremos que hacerlo en todas nuestras aplicaciones.
<script>
$(document).ready(function(){
//código que ejecutará nuestra página
});
</script>
Básicamente lo que estamos haciendo es un referencia al documento (nuestra página) y definiendo un evento con el método ready() que se ejecuta al estar lista nuestra página.
Cuando ya tenemos todo esto, lo único que nos queda por hacer es guardar nuestro archivo html y estamos listos para empezar a trabajar…
Conectar JQuery con CDN
CDN (Content Delivery Network) o red de entrega de contenido, es un servicio que nos permite enlazar en caliente nuestra web a un sitio donde se encuentra JQuery, en lugar de hacerlo desde nuestro propio proyecto.
Existen diferentes lugares desde donde conectar JQuery con nuestro proyecto como Google, Microsoft… aunque para mi gusto (quitando el ponerlo en el proyecto) lo mejor es hacerlo desde la propia web de JQuery en la sección de descargas.
No cabe duda de que los CDN tienen ventajas y desventajas y son algo a tener en cuenta, a continuación se pueden ver las mas significantes de cada cara de la moneda:
Ventajas:
- Mayor velocidad de entrega: es muy posible que al encontrarse en código de JQuery en un servidor muy potente, hay que considerar que hablamos de google, Microsoft… sus servidores pueden ser más rápidos que los que nosotros usemos, aunque para el peso que vemos personalmente no creo que eso se note mucho actualmente.
- Cacheado: JQuery es un framework muy utilizado y es muy probable que el usuario de nuestro proyecto ya haya pasado por una web que tenga
Desventajas:
- No podemos modificar el framework: Si queremos hacer algún cambio en el framework nos será imposible ya que viene de un sitio donde no tenemos acceso y es el mismo para todos los usuarios.
- Se requiere conexión a Internet: Si en algun momento carecemos de la conexión durante el desarrollo y no disponemos de ella nuestros scripts no funcionarán. (Es cierto que es difícil, pero me he visto en esa tesitura.)
- Se cae el servidor: en este caso pasaría igual que el punto anterior, es cierto que no suele ocurrir, pero nunca se sabe.
Conclusiones
Ya sea descargando el framework o bien por CDN, es necesario que nuestra web esté conectada a JQuery para poder hacer uso de él. Es cuestión de gustos escoger una forma u otra.
En las siguientes entregas iremos haciendo ya algunas cosas curiosas para empezar a crear efectos partiendo de la base aquí explicada.
