Espectacular jQuery

Espectacular jQuery

“Diseño web con jQuery, cada vez más y más utilidades para hacer un sitio bueno usable y vistoso”, esto es lo que una y otra vez vemos en todos los post relacionados con el jQuery.

Sigo recopilando utilidades para el diseño web, y sigo sorprendiéndome. No existe límite, las distintas librerías Ajax, como el jQuery o Mootools, nos proporcionan herramientas suficientes para poder construir un sitio web usable y vistoso.

Hoy vamos a ver, desde cómo hacer la galería de productos de Apple, hasta un modo impresionante de ocultar y mostrar información.

Paneles deslizables con jQuery

Paneles deslizables en jQuery

Css-Triks es un blog de diseño web referente para muchos de nosotros.

Hace unos días encontré un post que me está sirviendo de mucha ayuda en un nuevo diseño web que tengo entre manos. Me parece genial, es muy ligero y es una solución muy buena para enseñar productos en una web.

Se trata de una galería que va mostrando y ocultando los divs que hemos definido en la página, con un efecto zoom.

Lo podéis descargar gratuitamente en el post original. Espero que os sirva.

Cambiar el tamaño de fuente en función del párrafo con Javascript

cambiar font-size con javascript

En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.

Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.

A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.

PageSlide con jQuery

PageSlide con JQuery

¿Habéis visto el efecto que produce el iPhone cuando pasamos de una página a otra?, la pantalla se desplaza horizontalmente dejando ver el siguiente contenido. Este plugin permite a cualquier desarrollador crear una interacción similar en su propio sitio web utilizando unas simples líneas de Javascript.

Adjuntando el método a una etiqueta de ancla, pageSlide envuelve el contenido original en una capa y crea un nuevo bloque para el contenido secundario. Al hacer clic en el evento se invocamos la animación.

Una de las ventajas que tiene es que no perdemos de vista la ventana principal, por lo que en cualquier momento el usuario puede volver a su contenido original con solo hacer clic sobre él.

Este plugin lo encontré en los grupos para desarrolladores de google. La verdad es que es una mina, muy recomendable !!!

Más información sobre PageSlide

Todo es posible con JQuery

Demostraciones de lo que se puede llegar a hacer con JQuery

Esta es una lista de algunos sitios en los que podemos ver hasta qué punto podemos diseñar una magnífica navegación con JQuery. Además de hacer todo más intuitivo y atractivo, el tiempo de carga es infinitamente inferior a otros sistemas al no tener que recargar la página o llamar a otra. JQuery consigue darnos una navegación tan fluida, que en numerosas ocasiones no sabrás si navegas por flash o html.

Estoy convencido que estas librerías ya son presente del diseño y que cada vez veremos más sitios programados con esta tecnología. Hoy en día cualquier web de primer orden ya incorpora Ajax en sus formularios, porque además de ser más rápida la navegación conseguimos ayudas geniales para el usuario.

A continuación una serie de webs que seguro que os van a sorprender:

Diapositivas con jQuery

Diapositivas con jQuery

A veces necesitamos hacer presentaciones de fotografías de modo automático, tipo diapositivas. Hasta ahora la única solución era meter las imágenes en flash y hacer transiciones entre ellas.

JQuery tiene un plugin llamado CrossSlide capaz de hacer varios tipos de animación cambiando solo un par de parámetros. Las transiciones son bastante fluidas, pero dado que dependen del navegador y de la plataforma que usemos para cambiar el posicionamiento y ver bien estas transiciones, varían los resultados dependiendo de la combinación que tengamos (firefox con windows, Mac o Linux, Explorer, Safari,…).

Toda la explicación de cómo usar este plugin y de cómo usar cada una de las posibilidades de transición las tenéis en Gruppo4.com