JQuery 1.6.3 liberado

JQuery 1.6.3 es la tercera actualización de la última versión liberada de esta librería de funciones JavaScript.

Este lanzamiento trae solución a varios problemas de seguridad además de mejoras en el manejo de los nombres de atributo de datos en HTML5 y supresión de las animaciones “worm holes” debido a las múltiples quejas realizadas.

En cuanto a los bugs de seguridad solucionados por JQuery 1.6.3 se ha corregido un vector de ataque XSS que algunos sites están usando para seleccionar elementos usando location.hash que permite la inyección de scripts en la página.

Pese a no existir una confirmación sobre su llegada definitiva, este lanzamiento podría ser uno de los últimos antes de la liberación de jQuery 1.7.

Aquellos que lo deseen pueden acceder a más información de JQuery 1.6.3 desde blog.jquery.com.

fuente:desarrolloweb

jQuery desde un CDN

– El pasado mes de enero el equipo de trabajo de la popular librería Javascript anunció que impediría el hotlinking de archivos y recursos sobre los dominios de jQuery.

Esta amenaza, que todavía no ha llegado a cumplirse, hace recomendable que alojemos el fichero en nuestro servidor o que empecemos a usar una Red de Distribución de Contenido CDN.

Un CDN (Content Delivery Network) es un sistema formado por servidores que contienen copias de datos y que colocados en varios puntos estratégicos de una red maximizan el ancho de banda para la distribución de ficheros.

Los CDN más populares son los que de forma gratuita ofrece Google o Microsoft aunque también existen otras alternativas como el de Edgecast.

Usar un CDN tiene varias ventajas:

  • Liberar a nuestro servidor de la carga de estos archivos
  • Incrementar las posibilidades de que el fichero esté cacheado: al usar un CDN podemos aprovechar la versión cacheada de jQuery que haya generado alguna otra página por la que hayamos navegado sin tener que volver a descargarlo.
  • Mayor velocidad a la hora de servir el fichero gracias a una mejor tasa de transferencia del CDN frente a la de nuestro propio servidor hosting

Interesados pueden acceder al final de este post a una comparativa llevada a cabo por Pingdom, donde conocer el mejor rendimiento de los principales CDN al servir jQuery.

fuente:desarrolloweb

JQuery 1.6.2 disponible

El equipo de trabajo de este popular framework javascript acaba de liberar una la versión de mantenimiento jQuery 1.6.2.

Esta última actualización de jQuery 1.6.x está centrada en ofrecer solución a varios problemas de la versión anterior. Aquellos que deseen obtener completa información acerca de los cambios y mejoras de jQuery 1.6.2 pueden acceder a blog.jquery.com.

Sin una confirmación oficial, la próxima versión jQuery 1.7 se espera pueda llegar a partir del próximo mes de agosto.

Aquellos que desarrolladores que deseen acceder a más información de jQuery 1.6.2 pueden hacerlo desdejquery.com.

post

Plugins para jQuery recomendados

jQuery, la popular librería de funciones JavaScript con la que facilitar el trabajo a los programadores, dispone de numerosos plugins con los que mejorar y hacer más atractivos nuestros sitios web.

Los plugins jQuery, por tanto, se convierten en una interesante herramienta para desarrolladores y diseñadores web con la que ampliar las funcionalidades del framework.

Como cada cierto tiempo, hemos hecho una recopilación de plugins jQuery que nos han llamado la atención:

Skitter, plugin para jQuery con el que crear slideshows con distintos tipos de animación.

jQuery Tags Input, es un interesante plugin para la gestión dinámica de etiquetas.

Zoomable Images Gallery, para crear una galería de imágenes con opciones de zoom.

Booklet, para mostrar imágenes en formato libro con el efecto de paso de páginas.

jQuery Form, permite de manera fácil y simple la actualización de formularios HTML para usar AJAX.

jGrow, plugin que hace que el área de escritura se ajuste de acuerdo a la longitud del texto.

gvChart, usa Google Charts para gráficos interactivos en HTML.

Nueva version de jQuery 1.6 esta disponible para descargar

jQuery 1.6 es la última versión estable de la librería de funciones JavaScript con la que facilitar el trabajo a los programadores.

Este nuevo lanzamiento viene con mejoras en la selección de atributos, separación entre atributos y propiedades en el DOM, mejoras de rendimiento y varios bugs solucionados de la versión anterior.

Interesados pueden acceder a más información sobre las características, cambios y mejoras de jQuery 1.6 final desde blog.jquery.com.

Junto a este lanzamiento final del framework JavaScript más popular, el equipo de trabajo de jQuery ha anunciado que ya ha empezado a desarrollar jQuery 1.7 cuyo lanzamiento final se espera llegue a lo largo del próximo mes de agosto.

jQuery 1.5.2 disponible

jQuery 1.5.2 es un lanzamiento de mantenimiento de la recién estrenada versión estable de la librería de funciones JavaScript con la que reducir el tiempo de programación mejorando en rapidez y sencillez.

Esta actualización en la que no se incluyen nuevas características ni funcionalidades está centrada en solucionar hasta 18 bugs de la versión anterior.

Como ya hemos señalado en alguna ocasión en DesarrolloWeb.com disponemos de un manual en español donde dar a conocer lo más relevante acerca de este popular framework JavaScript.

jQuery es software libre y de código abierto. Interesados pueden acceder a jQuery 1.5 final desde jquery.com.

Liberada la primera actualización de la recién estrenada jQuery 1.5

jQuery 1.5.1 acaba de ser liberado por el equipo de desarrollo del popular framework javascript.

Esta actualización de mantenimiento (minor release) de la popular librería javascript se centra en solucionar una serie de bugs de jQuery 1.5, además de añadir soporte para el navegador Internet Explorer 9.

Aquellos que deseen conocer con todo detalle las características de este nuevo lanzamiento pueden hacerlo desde blog.jquery.com.

Por otro lado, el equipo de trabajo de este framework ha iniciado los trabajos en jQuery 1.6 cuyo lanzamiento se espera para últimos de abril o primeros de mayo.

Interesados pueden acceder a la descarga de jQuery 1.5.1 desde jquery.com.

JavaScript fácil y rápido con jQuery

Aunque la librería más conocida y utilizada hasta hace poco era Prototype, ha surgido una nueva librería llamada jQuery, que incluye muchas de las ideas de Prototype y a las que añade muchas otras nuevas ideas para crear una librería espectacular: muy pequeña, rápida, ligera y con cientos de utilidades.

Las aplicaciones web cada vez son más complejas, ya que incorporan nuevos efectosvisuales e interacciones dinámicas (Ajax, auto-completar, drag&drop, elementos que aparecen/desaparecen, animaciones, etc.).

Al mismo tiempo, el desarrollo de las aplicaciones web avanzadas es cada vez más complicado, ya que deben funcionar correctamente en al menos 5 navegadores diferentes (Internet Explorer 6 y 7, Firefox, Opera y Safari) y el tiempo de desarrollo se reduce por la necesidad continua de incluir novedades en la aplicación.

Por todo ello, es imprescindible utilizar librerías JavaScript que simplifiquen el desarrollo y permitan crear aplicaciones compatibles con todos los navegadores.

¿Qué es jQuery?

Según sus creadores, jQuery es una “librería JavaScript muy rápida y muy ligera que simplifica el desarrollo de la parte de cliente de las aplicaciones web”. En otras palabras, jQuery incluye muchas utilidades para crear fácilmente las páginas web de las aplicaciones dinámicas complejas.

Conceptos básicos

Para utilizar jQuery, solamente es necesario descargar la librería y enlazar en nuestras páginas el único archivo JavaScript que la forma:

<script type="text/javascript" src="jquery.js"></script>

La librería se puede descargar en dos versiones: la versión descomprimida ocupa 61 KB y es la mejor opción para desarrollar aplicaciones. La versión comprimida ocupa sólo 20 KB y es la opción ideal en el servidor de producción, para minimizar el tiempo de carga de la aplicación.

Una de las instrucciones más utilizadas en las aplicaciones JavaScript es la siguiente:

window.onload = function() { ... }

La instrucción anterior permite ejecutar el código JavaScript una vez que la página se ha cargado por completo. Se trata de una instrucción imprescindible en las aplicaciones web complejas, porque cualquier modificación en la página o la selección de cualquier elemento necesita que el árbol DOM de la página se haya construido por completo, y por tanto, que esté disponible el código HTML de la página entera. jQuery dispone de una instrucción muy similar equivalente a la anterior:

$(document).ready( function() { ... } );

La gran ventaja de la función de jQuery, es que la página se puede manipular en cuanto se ha cargado su código HTML (y por tanto, se ha construido el árbol DOM de la página) mientras que la función de JavaScript espera a que se carguen todos los elementos de la página, incluyendo todas las imágenes. De esta forma, las aplicaciones realizadas con jQuery pueden responder de forma mucho más rápida que las aplicaciones JavaScript tradicionales.

Por otra parte, la función getElementById() es posiblemente la más utilizada al desarrollar aplicaciones web, ya que permite seleccionar un elemento a partir de su atributo “id”. Además, existen otras dos funciones relacionadas: getElementsByTagName() y getElementsByName(). jQuery incluye la función $() como una alternativa más rápida y completa para seleccionar cualquier elemento de la página:

Con JavaScript

// Seleccionar un elemento
document.getElementById("miParrafo");
// Seleccionar todos los enlaces
document.getElementsByTagName("a");
// Seleccionar todo lo anterior
?
// Seleccionar mediante la clase CSS
?

Con jQuery

// Seleccionar un elemento
$("#miParrafo");
 // Seleccionar todos los enlaces
$("a");
// Seleccionar todo lo anterior
$("#miParrafo, a")
// Seleccionar mediante la clase CSS
$(".miClase")

Selectores avanzados

Uno de los componentes más impresionantes de jQuery es el de sus selectores, que permiten olvidarse de los aburridos document.getElementById() y del código JavaScript complejo. jQuery utiliza lo mejor de CSS 1, CSS 2, CSS 3 y XPath para seleccionar de forma sencilla cualquier elemento de la página sin necesidad de saturar el código XHTML con atributos “id”. Ejemplos:

// Seleccionar todos los párrafos de la página que tengan al menos un enlace
$("p[a]")
// Seleccionar todos los "div" que no estén ocultos
$("div:visible")
// Seleccionar todos los radio buttons que han sido seleccionados
$("input[@type=radio][@checked]")
// Seleccionar varios elementos mediante sus "id" y "class" (devuelve un array)
$("p.importante, div#menu, span#introduccion p.especial a")

Además, jQuery soporta muchos de los selectores que define CSS 3, algo que los navegadores actuales sólo pueden soñar con tener algún día, como :nth-child(n), :empty, :not, :disabled. Para los programadores más acostumbrados a trabajar con XML, jQuery también permite utilizar XPath para seleccionar elementos, como por ejemplo:

// Seleccionar todos los párrafos de la página
$("/html/body//p");
// Seleccionar todos los enlaces cuyo atributo "rel" valga "nofollow"
$("//a[@ref='nofollow']");

jQuery es tan avanzado que incluso añade sus propios selectores que no existen ni en CSS ni en XPath, pero que facilitan mucho el desarrollo de las aplicaciones:

// Selecciona todos los elementos pares de una lista (":odd" selecciona los impares)
$("ul#menu li:even")
// Selecciona los 4 primeros párrafos de la página
$("p:lt(4) ")
// Selecciona todos los enlaces que contengan el texto "pincha aquí"
$("a:contains('pincha aquí')")

Eventos

Además del evento ready() visto anteriormente, jQuery dispone de varias funciones relacionadas con la gestión de los eventos. El método bind(), por ejemplo, permite asociar un número ilimitado de eventos a un mismo elemento:

// Al pinchar sobre un párrafo de la página, se muestra un alert() con su contenido
$("p").bind("click", function() {
   alert( $(this).text() );
});

El modelo de eventos de jQuery es muy completo, ya que cada evento dispone de dos posibilidades: si no se pasa ninguna función, se ejecuta el evento del elemento; si se pasa una función, se asocia esta función al evento del elemento:

// Ejecuta el evento "onclick" en todos los párrafos de la página
$("p").click();
// Asocia una función al evento "onclick" de todos los párrafos de la página
$("p").click(function() {
   alert( $(this).text() );
});

jQuery dispone de tantas funciones como eventos estándar de JavaScript. El nombre de cada función es el mismo que el del evento, sin el habitual prefijo “on”: focus(), blur(), keyup(), mouseover(), mouseup(), resize(), submit(), etc.

Además, jQuery añade un evento que no existe en JavaScript y que es realmente útil para muchas aplicaciones: toggle(). A este método se le pasan dos funciones, cuya ejecución se alterna en función de las veces que se pincha sobre el elemento.

La primera vez que se pincha sobre el elemento (y todas las veces impares), se ejecuta la primera función y la segunda vez que se pincha el elemento (y todas las veces pares) se ejecuta la segunda función:

$("p").toggle(function(){
   alert("Me acabas de activar");
},function(){
   alert("Me acabas de desactivar");
});

Interacciones Ajax

Ahora que la mayoría de aplicaciones web deben incorporar interacciones creadas con Ajax, jQuery permite incluirlas sin ningún tipo de dificultad. Los siguientes ejemplos muestran lo sencillo que es realizar algunas interacciones comunes en Ajax:

// Cargar el contenido de una página HTML en un elemento
$("div#noticias").load("noticias.html");
// Descargar un script desde el servidor y ejecutarlo
$.getScript("/ruta/hasta/miScript.js");
// Petición GET al servidor con parámetros y función de respuesta
// La petición POST es idéntica, salvo que se cambia $.get por $.post
$.get("/ruta/hasta/el/scriptDelServidor.php",
   { idProducto: "AX00342", cantidad: "3" },
   function(data){
     alert("Se ha añadido al carrito: " + data);
   }
);

Además, jQuery incluye muchas otras funciones para construir peticiones Ajax complejas y para notificar al usuario el inicio/ejecución/finalización de las peticiones Ajax.

Efectos visuales

Todas las aplicaciones web modernas incorporan pequeños efectos visuales y animaciones que, si se utilizan de forma adecuada, mejoran la interacción con la aplicación y su usabilidad. jQuery incluye de serie los efectos visuales más utilizados por los diseñadores, pudiendo controlar mediante sus opciones la duración de cada efecto:

$("p").hide();        // Ocultar un elemento
$("p").show();        // Mostrar un elemento
$("p").toggle();      // Si estaba oculto, mostrarlo; si era visible, ocultarlo
$("p").show("slow");  // Mostrar el elemento con una animación muy suave
$("p").slideToggle("fast"); // Desplegar/ocultar el elemento con una animación muy rápida
$("p").fadeOut();     // El elemento desaparece con un fundido muy suave

Otras utilidades

jQuery incluye muchas otras funciones para facilitar el desarrollo de las aplicaciones web, entre otras:

// Obtiene el valor de la propiedad "color" de CSS del primer párrafo de la página
$("p").css("color");
// Establece el valor de la propiedad "color" de CSS
$("p").css("color","red");
// Establece varias propiedades CSS de un elemento
$("p").css({ color: "red", background: "blue", font-weight: "bold" });
// Oculta todos los elementos de un formulario
$(miFormulario.elements).hide();
// Devuelve "true" si el navegador es alguna versión de Internet Explorer
$.browser.msie
// Devuelve "true" si el navegador es alguna versión de Safari
$.browser.safari
// Obtiene o establece el valor del "innerHTML" del elemento
$("#contenidos").html();
$("#contenidos").html("<h1>Contenidos</h1><p>Cargando...</p>");
// Añade la clase CSS a todos los elementos o la quita si ya la tenían establecida
$("p").toggleClass("seleccionado");

Este artículo sólo muestra una mínima parte de las posibilidades de la excelente librería jQuery. Gracias a jQuery, puedes hacer mucho más y mucho mejor pero escribiendo menos código JavaScript, además de tener la garantía absoluta de que tus aplicaciones funcionan igual de bien en cualquier navegador.

Lecturas de referencia

La mayoría de la información y ejemplos de este artículo han sido extraídos de la excelente documentación en inglés de jQuery. Una buena forma de estudiar la API completa de jQuery es acceder a la guía visual.