Después de la "resaca" de la nochevieja, y de felicitar el 2010 (o 1948), es hora de ponerse las pilas y empezar con algo serio.
Esta vez voy a contar como utilizar JQuery para implementar AJAX en tu página web, y de qué manera puedes solventar el mayor problema que tiene AJAX ahora mismo, que no es otro que la indexacion por parte de los buscadores como Google.

Antes de empezar voy a realizar una breve introducción a AJAX,y a comentar las ventajas y desventajas que trae, y para empezar, tengo que decir que AJAX, siglas de Asynchronous JavaScript And XML, es un conjunto de 4 tecnologías que sirve para comunicar el navegador con el servidor sin necesidad de recargar la página.
Esto nos brinda muchas oportunidades, ya que, junto con los efectos de JQuery se pueden lograr cosas sorprendentes, y además, como no hace falta recargar la página, podemos ahorrar ancho de banda, lo que reduce la carga del servidor.

No voy a entrar más en detalle, para más información puedes acceder a la Wikipedia, o buscar en Google, pero ahora vamos a implementarlo.

Funciones AJAX de JQuery

JQuery ya viene con AJAX de serie, y tiene multitud de funciones muy simples que se encargan de realizar toda la labor "chunga", pero de momento con la función load(), de momento , nos vale.

El funcionamiento es muy sencillo, aunque se puede complicar más para realizar peticiones mas complejas, no es necesario, y para ellas recurriremos a la función ajax().

Load()

Espero que no te importe estimado navegante, que para explicar la función utilice el código de mi web para ganar dinero, ya que es un código que de momento funciona, y puedes ver en cualquier momento.

La solución al problema de los buscadores es "sencilla" pero laboriosa, ya que se trata de realizar la página sin AJAX y de manera que funcione, y después introducir el atributo rel en donde pondremos la url que queramos llamar para cargar, de manera que los navegadores que no tienen Javascript (como los rastreadores de Google) puedan navegar por la página, y así también, si alguien abre algún enlace en una pestaña nueva, se cargará correctamente.

Para la función load() voy a usar de ejemplo el calendario que hay en Sinpasta, ya que funciona tanto por AJAX como sin el, y su funcionamiento es muy sencillo.
Antes de poner el código HTML, tengo que decir que hay un fichero, llamado ajax.php que simplemente recibe por parámetro una url de un archivo, y lo incluye, lo uso para evitar tener líos con las rutas relativas, y que es el que se encarga de llamar a calendar.php, que es el que genera toda la vista HTML del calendario.

El código HTML de los enlaces que hacen que el calendario cambie la vista del mes es el siguiente:

Como puedes observar, el atributo href hace referencia a un archivo distinto que el atributo rel, a continuación pongo el Javascript necesario para que funcione con AJAX

Acabo de caer en que no he explicado livequery, y es un plugin realmente importante, así que voy a explicarlo ahora, de momento, del código anterior sólamente fijate en las líneas que hay dentro de function.
En la primera puedes ver el funcionamiento de load, que lo único que hace es pedir al servidor el fichero que se encuentra donde especifica el atributo rel del elemento que lo ha llamado, y lo mete dentro de "#calendario .sidebarcontent".
En la segunda se devuelve false, de este modo el navegador no se dirigirá hacia donde apunta el atributo href.

Pequeña pausa para explicar LiveQuery

Si estás realizando una página web con AJAX, puede que te aya surgido el problema de que cargas una parte de la página con AJAX, y que de repente todos las acciones que tendrían que realizarse a través de JavaScript dentro de la parte que has cargado por AJAX no funcionan, eso es debido a que el JavaScript se aplica sobre la página una vez cargada, y al cargar nuevos elementos, no se les aplica el tratamiento JavaScript y por lo tanto no funciona.
Para solucionarlo tenemos el plugin LiveQuery. Se instala igual que todos, y su funcionamiento es muy simple, tan sólo tienes que llamar a la función livequery que toma dos atributos, el primero el el "disparador", en el ejemplo anterior, era click, que es como si se hubiera puesto .click(function(){, pero eso no hubiera funcionado bien. El segundo atributo es la función que se va a realizar.

ajax()

Una vez vista la función load, vamos a ver como enviar un formulario a través de AJAX, ahora con la función ajax(), valga la redundancia.
El código HTML es el que uso en Sinpasta, no lo voy a poner porque es muy largo y es un formulario normal, sólo que cada input tiene una id para acceder a él a través de los selectores de JQuery.

El código Javascript es el siguiente:

Como puedes observar, he usado livequery, ya que el formulario va dentro de una parte de la página que se carga con AJAX, lo siguiente es meter en variables los campos que rellena el navegante.
Después genero una String que será la que se pase en forma de petición POST al servidor, con la funcion ajax(), pero antes elimino todo el html que tiene el #formulario y #comentarios y los oculto.
Lo que voy a comentar ahora linea a linea es lo que hay dentro de la funcion ajax(), que es lo más interesante:

1. Lo primero que hago es definir el tipo de petición que es, en este caso, al enviar el formulario, prefiero que sea POST.
2. La url a donde ha de ir la petición, como siempre, a través de ajax.php.
3. data hace referencia a los datos que hay que pasar, en este caso la url pasada antes.
4. El datatype indica que los datos van en HTML.
5. En esta línea indico la función que quiero que se realize, pasando como parámetro la respuesta a la petición POST.
6. Cargo el HTML de la respuesta en #formulario y en #comentarios cargo todos los comentarios de esa entrada.
7. Para acabar hago que tanto #formulario como #comentarios aparezcan con un efecto fadeIn().

He quitado las comprobaciones del formulario, que el correo sea válido, que todos los campos esten completados etc... para que no sea muy largo el código.

Existen otras muchas funciones para utilizar AJAX con JQuery, entre ellas una de las que más uso yo es getJSON, pero es un poco más avanzada, y al menos para lo básico de AJAX con lo puesto aquí es suficiente. Si te interesa el tema del JSON espero poder publicar en breves una entrada hablando sólo de él, te invito a pasarte de vez en cuando, o a suscribirte al feed para estar al tanto de su publicación.

Espero que te haya gustado, y sobretodo que te haya sido útil y te haya dado ideas para mejorar tu web. Siento no haber puesto fotos, se que hacen la entrada mas amena, pero en este caso no creo que fuera necesario.

Llevo un tiempo alejado del blog por motivos navideños, pero bueno, hoy te traigo un tutorial sobre cómo personalizar un menú animado usando el plugin Lavalamp.

Conociendo lavalamp:

Lavalamp es un plugin para realizar menús mas llamativos para tu web.
Viene con tres ejemplos, que son los siguientes:

Con imagen:

• Home
• Plant a tree
• Travel
• Ride an elephant

Sin imagen

• Home
• Plant a tree
• Travel
• Ride an elephant

Subrayado

• Home
• Plant a tree
• Travel
• Ride an elephant

Nosotros nos vamos a fijar en el primero, el de la imagen, que es el que utilizaremos para editar.

Preparando el HTML

Si te fijas en el menú que hay en mi web para ganar dinero, entre cada elemento del menú hay un separador, y al pasar el selector por el, desaparece como pasando por debajo, a parte de tener el primer elemento y el último redondeados.
Voy a explicar cómo lo hice, pero primero pongo el código HTML y lo comento:

Comento por lineas, que es mejor:

1. Esto simplemente es el div que engloba todo el menú.
2. Este primer ul es para el lateral izquierdo redondeado, por eso su...
3. ...único li no tiene texto, solo  , que es un espacio en blanco...
4. ...y cierre del ul.
5. Aquí está la "chicha" del menú, como puedes observar, después de abrir el ul...
6. ...lo primero que hay es un li con clase spacer, que no es mas que un separador.
7. Este elemento tiene la clase current que quiere decir que es el elemento sobre el que "descansa" la sombra.
8. Otro spacer.
9. Enlace hacia el blog.
10. Spacer.
11. Enlace hacia el foro.
12. Spacer.
13. Enlace a preguntas frecuentes.
14. Spacer.
15. Último elemento con enlace hacia Contacto.
16. Spacer.
17. Cierre del ul.
18. De aquí en adelante un ul para hacer el  lateral derecho al igual que el izquierdo, y cierre del div.

Ahora que ya tenemos el html, vamos con el CSS...

Dando un poco de estilo con CSS

Como son bastantes selectores, voy a ir comentandolos de uno en uno

El primer elemento es el que hace referencia al menú entero, el div con menu como id

1. Selector.
2. Un ancho excesivo, pero así me aseguro que no se caerá ningún elemento.
3. La altura.
4. Al principio no se muestra, pero se mostrará con JQuery poniéndole un efecto.
5. Margen a 0.

El primer ul del menú

Simplemente se alinea a la izquierda.

Ahora el elemento central del menú

1. Selector.
2. El position relative es necesario para que no haga cosas extrañas la "sombra".
3. La propiedad overflow con el valor hidden hace que cuando algo se vaya a mostrar fuera de su espacio reservado, lo que se escapa no se muestre.
4. El float left es necesario para que no se descuelgue el último ul.

Características generales de ul y li

Ahora vamos a empezar a editar el CSS que afecta a la sombra de LavaLamp

1. Selector dado por LavaLamp.
2. La propiedad z-index se utiliza para traer al frente este elemento, por encima de todos aquellos que tengan un z-index menor a 8.
3. Display block muestra el inicio de la sombra como un elemento que forma parte del bloque.
4. La altura.
5. La imagen de fondo.
6. z-index sólo se aplica a elementos posicionados, asi que toca posicionar este.
7. Le quitamos el borde.

1. Selector dado por LavaLamp.
2. Ponemos la misma imagen que antes, pero ahora si que la repetimos a lo largo del eje x.
3. Mismo display que el elemento anterior.
4. Misma altura.
5. Le quitamos el margen de la izquierda.
6. Le quitamos el borde.

Vamos a por los spacers

Este elemento realmente no tiene mucha explicación, solamente se ponen los bordes laterales, y un z-index de valor 10, que hace que se muestre por encima de la "sombra" y asi parece que pasa "por debajo".
La imagen de fondo no es más que una tira con sombra, que era de una variación que hice del primer diseño, ahora habría que poner algo transparente pero entonces no quedaría tan bien.

Ya casi está todo, vamos con los enlaces del menú

Mencionar solo el atriburo padding, que hace que la zona de click sea mayor, el z-index que hace que se muestren las letras por encima de todo, la alineación centrada y el float left, el resto es, como gustan decir en mi escuela, trivial.

Para terminar, los laterales redondeados

Instalando LavaLamp.

Ahora viene lo más sencillo, como casi todo con JQuery.
Te recomiendo, que le eches un ojo a la introducción a JQuery de este blog, para ir más rápido todavía.

Lo primero que tienes que hacer es descargarte el plugin, si esque no lo has hecho ya, comprimido en un zip, o directamente en *.js, todo desde este enlace, en el cual explican en inglés como funciona.

Ahora, tal como lo explico en la introducción a JQuery, tienes que enlazar los ficheros *.js dentro del head de tu página.

Una vez echo esto, con la siguiente función, activarás el LavaLamp sobre el elemento central del menú:

Y el resultado final... puedes verlo en Sinpastaenelbolsillo.com.

He pensado que para empezar a poner ejemplos de JQuery lo mejor es empezar por algo sencillo, y lo más sencillo que tengo hecho en la página, a parte de los bordes redondeados que ya explicaré, es la posibilidad de crear un efecto de contracción y expansión de los elementos del sidebar, no preguntes la utilizad, simplemente me pareció bien implementarlo

Si has ido siguiendo este blog, y has estructurado el sidebar como expliqué en esta entrada simplemente tendrá que copiar y pegar la siguiente función en el documento ready.js, sino, tienes dos posibles caminos, entender el código y adaptarlo, cosa que no es muy difícil, o ir a la entrada en cuestión y estructurar tu sidebar así, lo más recomendable.

Primero pongo el código, y después lo explico:

Parece más complejo de lo que realmente es, pero no te preocupes, traduciré por lineas:

1. "Al hacer click en un elemento .sidebartop..."
2. "...si el elemento siguiente a éste (en el que he hecho click) está oculto..."
3. "...desplegar hacia abajo el elemento siguiente a éste..."
4. "...en caso contrario..."
5. "...contraer el elemento siguiente a éste..."
6. Esta linea y siguientes sólo acaban de cerrar la función.

Puedes dejar el ratón encima de algo que no entiendas para que aparezca un texto que te diga que parte del código es la que realiza cada cosa.

Como puedes observar es muy sencillo realizar un efecto "cortinilla" con JQuery.

Para terminar, te recomiendo echarle un ojo a las funciones slideUp() y slideDown(), ya que aceptan como pará metros la velocidad del efecto y funciones a realizar al terminarlo.

Llevo unos días sin publicar ningún tutorial o memoria, y como hoy no tengo demasiado tiempo, he decidido publicar una introducción a JQuery, utilizada en mi web de ganar dinero para conseguir efectos como el contraer y expandir los elementos del sidebar (hacer click en el título de cada uno), tener bordes redondeados, utilizar Ajax + Json para optimizar el tráfico y un sinfín más de cosas que puedes hacer de la manera mas sencilla que puedas imaginar.

¿Qué es JQuery?

JQuery es un framework de Javascript, que permite interactuar fácilmente con los elementos HTML, manipular el arbol DOM, manejar eventos y animaciones e integrar la tecnología AJAX de manera fácil y cómoda.
He puesto enlaces a la wikipedia en todas las palabras que considero que es recomendable conocer, y decir que la definición la he basado en la de la wikipedia.

¿Cómo se instala?

De la forma mas sencilla que puedas imaginarte, simplemente accede a la página oficial de JQuery y descárgatelo en la carpeta donde tengas la página web, en mi caso uso la versión 1.3.2 en su versión completa, así que tengo un fichero llamado jquery-1.3.2.js.

Ahora tienes que ir al fichero index.html y añadir la siguiente linea a la cabecera (dentro de las etiquetas <head></head>)

Y ya está listo para ser usado.

¿Cómo empiezo a hacer cosas con JQuery?

Este fin de semana empezaré a publicar entradas con todo lo que he hecho con JQuery en Sinpastaenelbolsillo, pero si no puedes esperar hasta entonces, vamos a hablar un poco de los selectores, algunas funciones básicas y de los plugins

Selectores:

El primer paso para poder hacer cosas con JQuery es saber como seleccionar cada elemento, y para eso está la función $(String), que devuelve el elemento (o elementos) que están definidos como se indica en la String, pongo unos ejemplos

Como puedes observar, la String que hay que pasar como parámetros, son los selectores que usas normalmente en el CSS.

Funciones básicas y/o más comunes:

addClass(String)/removeClass(String) - Estos dos métodos sirven para añadir o eliminar clases a los elementos html seleccionados, de manera que puedes cambiar el estilo de cualquier cosa de manera dinámica.

Ejemplo:

En el ejemplo, al ejecutarse JQuery, le añadirá la clase fondoNegro al body, y el fondo de la página será negro.

html(String) - Con este método cambiaremos el html que haya dentro de un elemento por el pasado como String.
Si no pasas ningún atributo, es decir, lo dejas en html() te devuelve el html que haya dentro del elemento seleccionado.

Ejemplo:

Ahora, al ejecutarse, cambiará el contenido del body por "<h1>Hola!!</h1>".

show()/hide() - Muestra/oculta los elementos seleccionados. Ambos tienen una variante con paŕametos que sirven para modificar la velocidad a la que muesta/oculta los elementos seleccionados.

Plugins:

Existen multitud de plugins para JQuery creados por la comunidad, con infinita variedad de efectos, desde menús animados, como el que tengo en mi web para ganar dinero, redondear elementos o widgets para añadir a tu web.

Instalarlos suele ser sencillo, por regla general viene un fichero README en el cual indican la instalación, que no suele ser mas complicada que extraer los ficheros dentro del servidor y enlazarlos dentro de <head></head> al igual que hiciste con JQuery.

Para finalizar, y en previsión de siguientes tutoriales, te recomiendo crear un documento *.js llamado ready, es decir, un fichero llamado ready.js, y enlazarlo como si fuera un plugin.
En este documento irá todo lo que se tiene que ejecutar cuando la página esté cargada, para ello escribe lo siguiente dentro del fichero y dejalo asi: