jQuery 1.5: Novedades, Descargas, CDNs y uso en WordPress

jQuery LogoComo relojes perfectamente sincronizados, los chicos de jQuery cumplen lo prometido, ya que el día de ayer liberaron su nueva versión estable: jQuery 1.5.

Para descargar jQuery 1.5, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

http://code.jquery.com/jquery-1.5.min.js

También podemos usar los CDN de Google y Microsoft:

Microsoft CDN:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js

Google CDN:

https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

¿Cómo usar jQuery 1.5 en WordPress?

Como somos desarrolladores inquietos siempre nos gana la “versionitis”, y una de las primeras cosas que quisiéramos hacer es utilizar jQuery 1.5 en algún theme o plugin que estemos desarrollando para WordPress. Lo único que debemos hacer es agregar el código siguiente al archivo function.php del theme correspondiente:

add_filter('script_loader_src', 'my_script_loader_src', 10, 2);
function my_script_loader_src($src, $handle) {
	if ($handle == "jquery")
		return "http://code.jquery.com/jquery-1.5.min.js";
	return $src;
}

Ahora cada llamada a wp_enqueue_script cargará jQuery 1.5 en vez del que viene por defecto en WordPress. Obviamente puedes cambiar el enlace y utilizar el CDN de tu preferencia.

¿Qué novedades hay en jQuery 1.5?

¡Cierto! Aún ni he mencionado las novedades de jQuery 1.5. Aquí las principales:

  • El Módulo Ajax ha sido totalmente reescrito, lo cual corrige muchos defectos en el viejo sistema e igualmente provee un mayor nivel de consistencia en el API.

    Ahora cuando se hace alguna llamada a jQuery.ajax, jQuery.get o jQuery.post, se devuelve un objeto jXHR, el cual es consistente con el objeto XMLHttpRequest para todas las plataformas. Esto permite tareas antes imposibles, como el abortar solicitudes JSONP.

    Más información sobre este gran cambio en la documentación sobre jQuery.ajax().

  • Otra novedad sumamente interesante son los Objetos Diferidos (Deferred Objects), que permiten trabajar con valores devueltos de solicitudes Ajax asíncronas que pudieran no estar presentes de manera inmediata. Adicionalmente proporcionan la habilidad de adjuntar múltiples manejadores de eventos, algo que antes era imposible.

    Como ejemplo, el siguiente código antes no era posible, pero con jQuery 1.5 ya podemos adjuntar varios manejadores de eventos de manera inmediata luego de hacer la solicitud Ajax:

    var jxhr = $.ajax({ url: "ejemplo.php" })
        .success(function() { alert("¡Éxito!"); })
        .error(function() { alert("¡Ocurrió un Error!"); })
        .complete(function() { alert("Solicitud Completada"); });

    Más información en la documentación de los Deferred Objects.

  • ¡Otra poderosa novedad! Con jquery.Sub() ahora es posible anular métodos nativos de jQuery sin realmente destruirlos, o sea, podemos clonar una instancia de jQuery para modificar sus propiedades y métodos, sin afectar al objeto original de jQuery.

    Con jQuery.sub() la imaginación es el límite, ya que podemos extender el propio framework sin afectar su núcleo (core). Aquí un ejemplo:

    (function() {
      var myjQuery = jQuery.sub();
     
      myjQuery.fn.remove = function() {
        // Nueva funcionalidad
        this.trigger("remove");
     
        // Debemos asegurarnos de llamar el método original de jQuery
        return jQuery.fn.remove.apply( this, arguments );
      };
     
      myjQuery(function($) {
        $(".menu").click(function() {
          $(this).find(".submenu").remove();
        });
     
        // El nuevo evento en acción desde la copia de jQuery
        $(document).bind("remove", function(e) {
          $(e.target).parent().hide();
        });
      });
    })();
  • El resto de las novedades, pueden encontrarlas en la documentación completa de jQuery 1.5

Referencias

Para el presente post, usé las siguientes referencias:

Share

jQuery 1.5 RC1

jQuery Logo¡Los chicos de jQuery cumplen lo prometido! Acaban de liberar jQuery 1.5 RC1.

Mayormente se trata de una corrección de errores (bugs) de la Beta 1. La versión final debe ser liberada el último día del presente mes. ¡Estén pendientes!

Para descargar jQuery 1.5 RC1, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos.

Fuente: jQuery Blog.

Share

Zommy, Plugin de jQuery para aplicar Zoom en Imágenes

Zoomy

Zoomy es un interesante plugin para jQuery que te permitirá aplicar acercamientos (zoom) a imágenes.

El único requisito es tener dos copias de la imagen (la original y la “grande” que se mostrará con el zoom). Aunque esto suene redundante y engorroso, no lo es si pensamos que la mayoría de los sistemas CMS, como WordPress, guardan e incluso generan diversos tamaños de las imágenes.

Como ejemplo de uso, imaginemos lo siguiente:

<a href="imagen-grande.jpg" class="zoom">
    <img src="imagen-normal.jpg" alt="Esta es la imagen que se muestra inicialmente" />
</a>

Para aplicar Zoomy, basta agregar lo siguiente a nuestro código Javascript:

$(function(){
    $('.zoom').zoomy();                
})(jQuery)

Más detalles y descarga del plugin: ❰Zoomy

Via: Blogfreakz.

Share

jQuery cumple 5 años y lo celebra liberando jQuery 1.5 Beta 1

jQuery LogojQuery cumple hoy, 14 de enero de 2011, 5 años de vida, y sus desarrolladores lo celebran liberando jQuery 1.5 Beta 1. Y no sólo eso, planean sacar la versión candidata en 10 días y la versión final antes de finalizar el mes.

¿Qué novedades tenemos? Se ha reescrito por completo el módulo Ajax. Se considera el cambio más significativo en esta versión, ya que brinda numerosas mejoras en el desempeño, estabilidad y características de $.ajax.

Para leer la lista completa (¡y extensa!) de cambios, mejoras y corrección de errores (bug fixes), los invito a leer el anuncio oficial.

Para descargar jQuery 1.5 Beta 1, usen los siguientes enlaces directos:

Fuente: jQuery Blog.

Share

Peculiaridades del CDN de Google (con jQuery y MooTools)

Hace poco les platiqué sobre los cambios en el CDN de Microsoft, hoy toca hablar sobre algunas peculiaridades del CDN de Google (de las que carece el de Redmond).

La forma típica de llamar a jQuery usando el CDN de Google es:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

En el ejemplo anterior, se hace referencia a la última versión de jQuery actualmente.

Pero… ¿y qué sucede cuando sale una nueva versión de jQuery? ¿tenemos que modificar manualmente la línea de código anterior? Si lo hacemos de esa manera, si es necesario, pero si usamos un truco, nos ahorrará la modificación manual.

Ok, ¿cuál es el truco?

Realmente es muy sencillo: ambiar la parte /1.4.4/, con alguno de los siguientes valores.

/1.4.4/ Tal y como está en el ejemplo mencionado. Carga una versión específica de jQuery, y nunca cambiará su referencia.
/1.4/ De esta manera, se cargará la última versión estable de la rama 1.4.X, o sea, el día de hoy cargaría la versión 1.4.4, y cuando fuese liberada la versión 1.4.5, sería la nueva que se cargaría. Cuando jQuery llegase a la versión 1.5, esta forma enlazaría a la última versión estable de la rama 1.4.
/1/ De manera similar, esta forma cargará la última versión estable de la rama 1.X, o sea, el día de hoy cargaría la versión 1.4.4, y cuando fuese liberada la versión 2.0, esta forma enlazaría a la última versión estable de la rama 1.X.

Las tres formas quedarían de la siguiente manera:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

¡Genial! Pero… ¿cuándo usar una forma u otra?

De las tres formas mencionadas, sólo la primera (/1.4.4/) ofrece un caché de 1 año, con lo cual se gana en ancho de banda y mejor desempeño, pero con la desventaja que tenemos que apegarnos a una versión específica de jQuery, lo cual para muchos no es malo, hay quienes prefieren una versión fija ya probada que funcione y no cambiar a una nueva versión que pudiera “romper” el funcionamiento de una aplicación web.

Las otras dos formas, /1.4/ y /1/, ofrecen un caché con tiempo de vida limitado, una hora exactamente; o sea, que cada hora se tiene que volver a descargar jQuery, para asegurarse de contar con la última versión disponible (según la forma elegida). A primera vista tiene mayores desventajas que la primera forma, pero para quienes desean siempre usar la última versión disponible de jQuery, cualquiera de estas dos formas será el truco de magia que estaban esperando.

¡Pero yo no uso jQuery! ¿Funciona para Mootools?

¡Claro! Con MooTools es exactamente igual. Tomando en cuenta que la última versión estable al día de hoy es MooTools 1.3, tendríamos los ejemplos siguientes:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js"></script>

Sin duda, es un excelente truco para aquellos que les guste vivir al límite :-)

Fuente: CSS Tricks.

Share

Cambios en el CDN de Microsoft

En mis posts recientes sobre jQuery siempre hago mención a los CDN (Content Delivery Network) de Google y Microsoft, y recién me entero que este último acaba de sufrir ciertos cambios.

Haciendo una pausa, una nota para quienes no conocen el concepto detrás de las CDN, cito a la Wikipedia:

Una Red de Entrega o Distribución de Contenidos (CDN) es un sistema de computadoras que contienen copias de datos, localizadas en varios puntos de una red (en este caso Internet), para maximizar el ancho de banda de acceso a los datos desde computadoras clientes de la misma red. De esta manera, el cliente accede a una copia de los datos de una computadora cercana a él mismo, sin que sea necesario su acceso al servidor central, evitándole cuellos de botella.

¿Cuál es el cambio?

En resumen: ajax.microsoft.com ha sido renombrado a ajax.aspnetcdn.com

El cambio es para evitar el envío innecesario de cookies que se pudiese generar cuando el navegador haga referencia al dominio microsoft.com; de esta manera se incrementa el desempeño hasta en un 25%.

Para quienes estén usando ajax.microsoft.com no deben preocuparse, pues no será eliminado o descontinuado, pero si se recomienda migrar al nuevo ajax.aspnetcdn.com.

Viejo Formato: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.js
Nuevo Formato: http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js

Ejemplo de uso

Dentro de <header>, debemos poner:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>

o bien

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>

Por obvias razones, es mejor usar la segunda opción, la minimizada.

Fuente: Scott Hunter. Via @ElijahManor

Share

jQuery 1.4.4

jQuery LogojQuery 1.4.4 ¡ha sido liberado! Es la cuarta actualización menor desde jQuery 1.4; corrige varios errores (bugs) e incluye algunas mejoras desde jQuery 1.4.3.

¿Qué novedades tenemos?

  • Nuevo método de animación .fadeToggle(), que muestra u oculta elementos animando su opacidad.
  • Los métodos .width() y .height() ya no devuelven 0 (cero) al ser aplicados en elementos ocultos con display: none. Para determinar si un elemento se encuentra oculto puedes usar .is(':hidden').
  • Y algunas otras mejoras al código existente.

Para descargar la nueva actualización de jQuery, pueden ir al sitio oficial, o bien, usar los siguientes enlaces directos:

Adicionalmente, para proyectos online pueden utilizar directamente el URL proporcionado por los CDNs de Google o Microsoft:

Fuente: jQuery Blog.

Share

Deslizarse al inicio o final de una Página Web con jQuery

El típico enlace “Ir al Inicio” gracias a JavaScript, y en especial con jQuery, ha retomado fuerza en muchos sitios y aplicaciones web. ¿Cómo hacerlo? ¿necesito de un plugin para jQuery con dicho efecto? ¡Para nada! Es sumamente sencillo implementarlo por nosotros mismos,

Imaginemos que dentro nuestro <body> tenemos algo como sigue:

<a id="IrFinal" href="#">Deslizarse hasta el final</a>
<div>
<!-- Aquí va el contenido -->
</div>
<a id="IrInicio" href="#">Deslizarse hasta el principio</a>

Usando jQuery, el evento click y el efecto animate con la propiedad scrollTop, tenemos el siguiente código:

$(function () {
   $('#IrFinal').click(function () {
       $('html, body').animate({
           scrollTop: $(document).height()
       },
       1500);
       return false;
   });
 
   $('#IrInicio').click(function () {
       $('html, body').animate({
           scrollTop: '0px'
       },
       1500);
       return false;
   });
}); ​
​

Aquí el demo. Le agregué contenido arbitrario para que el efecto se vea mejor.

Fuente: DevCurry.

Share

jQuery 1.4.3

jQuery LogoCasi ocho meses tuvieron que pasar para que la nueva versión del framework JavaScript más popular entre los desarrolladores web viera la luz del día; fue un periodo considerablemente largo, pero ya está con nosotros jQuery 1.4.3.

¿Qué novedades tenemos?

  • Practicamente todo el módulo CSS se reescribió, con un enfoque a la extensibilidad. Ahora es posible escribir plugins CSS que extiendan la funcionalidad que proveen .css() and .animate().
  • Nueva propiedad event.namespace que contiene el namespace del evento del objeto que fue pasado por medio de .trigger().
  • Nueva propiedad jQuery.fx.interval que expone el tiempo (en milisegundos, por defecto es 13) en que todos los efectos son ejecutados. Haciendo menor este número se logran animaciones más suaves en algunos navegadores (como Chrome), aunque sea a expensas del CPU.
  • Nuevo método jQuery.type, que determina el tipo interno de JavaScript de un objeto.
  • Nuevo método jQuery.isWindow, que determina si un objeto probablemente sea una ventana.
  • Y muchas mejoras al código existente.

Para descargar la nueva actualización de jQuery, pueden ir al sitio oficial, o bien, usar los siguientes enlaces directos:

Adicionalmente, para proyectos online pueden utilizar directamente el URL proporcionado por el CDN de Google:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js

Fuente: jQuery Blog.

Share

Diferencias entre 'return false' y 'e.preventDefault()' [jQuery]

Estimados desarrolladores, amantes de jQuery, ¿cuál es la diferencia funcional entre estos dos fragmentos de código?

$("a").click(function() {
   // Acciones
   return false;
}
$("a").click(function(e) {
   // Acciones
   e.preventDefault();
}

Debo reconocer que hasta el día de ayer usaba ambas opciones de manera indistinta para evitar la acción por defecto del evento en cuestión (en este caso evitar que al hacer click al hipervínculo el navegador vaya a la dirección especificada en el href correspondiente), pero gracias al tip de Chris puedo decir que hoy conozco la diferencia.

Al ejecutarse return false, no sólo se evita la acción por defecto del evento, si no que también evita la propagación en el DOM, lo que se conoce como “bubbling up“. En términos prácticos, para que ambos fragmentos de código sean funcionalmente iguales, quedarían así:

$("a").click(function() {
   // Acciones
   return false;
}
$("a").click(function(e) {
   // Acciones
   e.preventDefault();
   e.stopPropagation();
}

Pequeño detalle, pero muy importante para tomarlo en cuenta al momento de programar con jQuery.

Share