Sexy LightBox 2.2 y compañía…

7 08 2009
LightBox

LightBox

Bien, como todos sabéis los popup hace tiempo que pasaron a la historia del diseño web.

Afortunadamente y debido a varios motivos (usabilidad, y popup killers en navegadores) esta práctica ha desaparecido y ha dejado paso a otro tipo de popups, menos agresivos y más vistosos.

Hoy, buscando un LightBox para un proyecto nuevo, me he dado cuenta de que no tenía material en el blog, así que aquí os dejo unas cuantas reseñas que seguramente os puedan ayudar.

Leer el resto de esta entrada »





Espectacular jQuery

27 07 2009
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.

Leer el resto de esta entrada »





Carro de la compra con Ajax

16 07 2009
Carrito de la compra con Ajax

Carrito de la compra con Ajax

El diseño web se ha rendido definitivamente a las  funcionalidades de AJAX, no sólo porque nos permite actualizar nuestra página sin refrescar la pantalla, si no también por la gran ayuda que supone para el diseñador a la hora de diseñar un sitio usable.

Existen cientos de ejemplos que respaldan su uso, en este blog ya hemos hablado en varias ocasiones de ejemplos muy útiles realizados con Ajax. En esta ocasión, vamos a ver un ejemplo en el que la usabilidad de una tienda online se hace infinitamente más clara y visual para el usuario.

Leer el resto de esta entrada »





Redondear divs e imágenes con Mootools

6 04 2009
Redondear esquinas de imágenes y capas

Redondear esquinas de imágenes y capas

Una práctica muy común en diseño web es redondear las imágenes o las capas que contienen nuestro texto. Existen muchas formas de hacer esto, desde meter un background para las capas o usar CSS en las imágenes hasta el que propongo hoy, usar Mootools.

Phatfusion nos enseña cómo hacerlo. Necesitamos tener la biblioteca Mootools v1.11 y es compatible con los navegadores más usados hoy en día, tanto para pc como mac.

Ver ejemplo y descargar código





Paneles deslizables con jQuery

30 03 2009
Paneles deslizables en 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.





PageSlide con jQuery

9 02 2009
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