Google+ Como empezar a usar jQuery en un sitio web en 3 pasos - Tutorial - Miopiblog

sábado, 8 de diciembre de 2012

Como empezar a usar jQuery en un sitio web en 3 pasos - Tutorial

En este tutorial, te intentaré explicar como empezar a utilizar jQuery en un sitio web, en sólo 3 pasos. De esta manera se te abrirán las puertas a un fantástico mundo repleto de todo tipo de funciones, animaciones, plugins... se puede hacer muchísimo con jQuery, además es muy fácil, ya verás.

1- Lo primero que debes hacer es dirigirte a la página oficial de jQuery y descargar la última versión de jQuery. A continuación crea un archivo .js con el contenido descargado e introdúcelo dentro del directorio javascript de tu sitio web, a este nuevo documento lo llamamos "jquery-1.8.3.min.js". Pues bien, en este momento, el directorio javascript de tu sitio web debería ser algo parecido a esto:


2 - El segundo paso es hasta más simple que el primero. Vamos a cargar el archivo .js que hemos creado, en nuestro sitio web, como si de otro archivo javascript más se tratara, así de fácil. Por si estás perdido te lo explico todo paso a paso: debes introducir entre las secciones <head> y </head> de la página web en la que quieres utilizar jquery lo siguiente:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
si entiendes un poco sobre el tema, sabrás que esta etiqueta puede variar según donde hayas ubicado el archivo .js que contiene jQuery en su interior. En este caso al escribir src="js/  estamos indicando que debe cargar un archivo existente en el interior de la carpeta "js", ubicada en el directorio del sitio web, que es la correspondiente a javascript.  Para que lo entiendas aún mejor, debería quedar algo así:


Otra forma de cargar jquery todavía más simple que la anterior, es hacerlo desde Google. Para ello, basta con que introduzcas entre las secciones <head> y </head> de tu sitio web lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Nuestro código quedaría así:


Otros usuarios prefieren cargar desde el repositorio y, sólo en caso de que este falle, entonces hacerlo desde el servidor, para ello, te puede servir este código:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>// <![CDATA[
!window.jQuery && document.write('<script src="js/jquery-1.8.3.min.js" mce_src="js/jquery-1.8.3.min.js"><\/script>')
// ]]></script>

Basta con introducirlo entre las secciones <head>, donde siempre : -) eso sí, para que éste último código funcione bien, debes realizar antes el primer paso que explico en este post, que es descargar jquery y crear el archivo .js dentro de nuestra carpeta js del directorio del sitio web. ¿Te lías? yo creo que no, es fácil!!!

Y por fin, la última manera de utilizar jQuery de la que yo he oído hablar: otra manera de empezar a utilizar jQuery en un sitio web, es hacerlo ayudándote de la API de javascript de Google, pero este método nunca lo he probado, por lo que mejor lo dejamos así todo que está más bonito, no? jeje!!!

3 - Ahora sí, ha llegado la hora de la verdad y vamos probar jQuery en nuestro sitio web, para confirmar que todo funciona correctamente, el último paso. Voy a facilitarte un pequeño fragmento de código jQuery, que debes introducir entre las etiquedas <body> y </body> de la página en la que quieres probar jQuery, o cargarlo mediante js, como un archivo javascript normal:

<script type="text/javascript">
$(document).ready(function() {
on() { $('#animacion').fadeIn(2000);
$('#botonprueba1').click(funct i$('#animacion').animate({ "left":"0", "top":"0", "width":"100%",
"height":"100%" },2500); }); });
</script>

Nos falta el código de "botonprueba1" que es simplemente un botón que he creado para accionar jquery y probar como funciona:

<div class="centrar"><input type="button" id="botonprueba1" value="Probar jquery" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/></div>

y ahora un último fragmento de código, que es el div sobre el que jquery va a ejercer o accionar una animación:

<div id="animacion" style="display:none;position:fixed;background:#000000;widht:100px;height:100px;z-index:10000000;"></div>

Bueno, eso es todo. Espero haberte explicado bien que es lo que puedes hacer para comenzar a utilizar jQuery en un sitio web. Además con animación y todo eh? jeje!!!

Recuerda que si no tienes ningún tipo de conocimientos previos sobre javascript, html, o jquery, puede que te cueste un poco entender este pequeño tutorial o hacerlo que funcione bien, pero si lo lees detenidamente, te darás cuenta de que es muy fácil y seguro que te sale a la primera. Anímate y prueba, no sabes todo lo que te estás perdiendo si no utilizas jQuery.

¿aún tienes dudas? ok, a ver si viendo los dos videotutoriales para empezar a usar jquery que te he preparado, te aclaras un poco más. Espero que te sirvan de utilidad y muchas gracias por visitar mi blog.

Por cierto, una vez que hayas acabado, puedes comenzar a experimentar y utilizar efectos jQuery como éstos.

Seguidores (seguir blog)

Me siguen en google plus: