Autor

Yo mismo

Diario de Honduras - fotos de mi última gran aventura

Algunas fotos (ejemplo del tutorial Fotolog en PHP)

Artículos

W3Csites.com Mundocitas.com

JQuery, el comportamiento de la web 2.0

publicado el 28 de Septiembre de 2006
Enlace permanente: http://www.marciobarrios.com/jquery

Estamos metidos de lleno en la web 2.0, bueno o eso dicen por la blogosfera, y en cierta manera no les falta razón, cada vez más hay muchos servicios donde prima la interacción de los usuarios, la potencia de lo intuitivo y la recompensa de cubrir una necesidad de los usuarios. Podemos ver muchos ejemplos como Flickr, Delicious, Rollyo, Wikipedia, Youtube, Skype, Digg, 43things, y un larguísimo etcétera. Servicios donde la prioridad no es el comercio (bueno esto es discutible, pero aunque sea el comercio siempre es de manera indirecta), sino las personas, y para ello cada vez más la web va en una dirección: la sencillez, lo funcional y lo intuitivo.

En estos conceptos entra en juego JQuery, ya que podemos crear comportamiento (javascript) de manera eficaz para optimizar la experiencia de los usuarios en nuestra web. Para los que no lo conozcáis es un framework para javascript que nos permite enfocar de una manera diferente la manera de desarrollar el comportamiento de una web. Después de probar algunas librerías de la competencia (como prototype o mochikit) para mi jquery es la mejor opción, ¿porqué? porque es intuitivo y muy fácil de utilizar y de adaptarlo a nuestras necesidades.

La manera más fácil para entender el funcionamiento es mediante ejemplos, aquí os expongo algunos muy simples.

Ejemplo 1: Diferenciar enlaces externos

Imaginemos que queremos que los enlaces externos se vean diferentes que los normales, algo que con el DOM de toda la vida se hace un poco pesado con JQuery es trivial:


$(document).ready(function(){
	$('a[@rel="external"]').addClass('external');
});

Con esto le decimos que al cargar la página seleccione los enlaces que tienen un atributo rel="external" y le añada la clase external, una línia, sencillo y potente.

Ejemplo 2: Aumentar el tamaño de fuente

Añadimos un enlace a través del que aumentaremos el tamaño del texto


<a id="aumentar" href="#">Aumentar fuente</a>

Y nuestro código javascript podria ser algo como esto:


var i=0;

$(document).ready(function(){
	$('#aumentar').click(function(){
		i++;
		if (i>3) i=3;
		switch(i){
			case 0: j=100; break;
			case 1: j=110; break;
			case 2: j=120; break;
			case 3: j=130; break;
		}
		
		$("body").css("font",j + "% 'Trebuchet MS'");	
		
		return false;
	});
});

Aquí declaramos la variable i para evitar que aumentemos más de un 30% el tamaño, cuando clickamos en enlace aumentamos la fuente a través de la función css.

Ejemplo 3: Pintar una tabla

Este ejemplo es muy útil, se trata de pintar las filas impares de una tabla (en el ejemplo con id="datos") para poder diferenciar mejor los datos:


$(document).ready(function(){
	$('table#datos tr:even').addClass('impares');
});

Tan sencillo como esto, seleccionamos las filas impares con :even y le añadimos una clase concreta.

Ejemplo 4: Desplegable

En JQuery también disponemos de una librería de efectos bastante completa, en este caso generaremos un desplegable a partir de un enlace normal


<div>
	<a href="#" class="open">Desplegar</a>
	<p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit. Nulla libero. Nunc a quam. Pellentesque lacus. In nec turpis.</p>
</div>

La clase hidden es para ocultar el texto mediante CSS


$(document).ready(function(){
	$('.open').click(function(){
		$(p,this.parentNode).show();	
		return false;
	});
});

Le decimos que al clickar sobre el enlace despliegue el párrafo, diciéndole que está en el contexto del padre del enlace, en este caso una div.

Estos ejemplos son ejemplos tontos y sencillos, solo se trata de que veáis que ahora con JQuery no tenemos que preocuparnos de cómo lo hacemos, sino de qué hacemos, y marcarnos nuevas metas que antes se veían mermadas por el tipo de desarrollo con javascript.

Lo que destaco de JQuery

Y a partir de aquí dejamos volar nuestra imaginación, y lo mejor es que todo este javascript no es intrusivo y nos permite separar completamente el comportamiento (Javascript) de la estructura (XHTML), con este artículo no pretendo enseñar a utilizar jquery, solo pretendo que la gente que no lo conozca y se dedica a esto le eche una ojeada, y le pasará como a mi, que no se como podía vivir antes sin él! jeje, además JQuery está respaldado por una comunidad no muy amplia pero sí muy devota que contínuamente crece y ayuda a mejorar el framework, yo por mi experiencia puedo decir que lo he utilizado ya en varias aplicaciones a nivel profesional y aunque he tenido algunos problemillas (que parecen solventados en la última versión) me ha servido de muchísima ayuda sin duda y me ha permitido hacer cosas impensables hace un tiempo.

Enlaces de interés: