Diseño Web. Animación con jQuery

Diseño Web. Animación con jQuery

Magia con jQuery

Magia con jQuery

Ya conocéis mi debilidad por usar Ajax en diseño web, me parece una solución que además de dar usabilidad a nuestra web, nos da oportunidad de sorprender al usuario, captando así su atención.

En esta ocasión vamos a hablar de unas cuantas librerías para hacer animaciones.
Muchos de los ejemplos que vais a ver están en bruto, es decir, no llevan nada de diseño, en vosotros estará el hacer que esas animaciones sean todo lo espectaculares que vuestra imaginación os sugiera.

(más…)

Sexy LightBox 2.2 y compañía…

Sexy LightBox 2.2 y compañía…

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.

(más…)

Carro de la compra con Ajax

Carro de la compra con Ajax

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.

(más…)

SlideMenu con Mootools

SlideMenu con Mootools

SlideMenu con Mootools

SlideMenu con Mootools

Mootools es una de las librerías que más soluciones nos aportan en el diseño web. Su ligereza hacen que podamos hacer las webs más usables y vistosas.

En un post anterior, vimos cómo hacer un SlideMenu con CSS, esta vez el mismo ejemplo pero con Mootools, más fluido y con la posibilidad de añadirle más efectos. Podemos hacerlo tanto horizontal como vertical, activarlo con un clic o con un mouseover, modificar el ancho de expansión de las imágenes activas, dar efecto rebote a las aperturas, …

Pesa sólo 7,83 kb y necesitaremos la librería Mootools v1.2

Ver post completo y descarga en byScripts.info

Redondear divs e imágenes con Mootools

Redondear divs e imágenes con Mootools

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