Reloj retro con Mootools

Posted by Omar Benyakhlef on dic 9, 2009 in Ajax, Diseño de páginas web, Mootools, Tutoriales | 4 comments

Diseño Retro con Mootools

El diseño web con Ajax no tiene límites, hoy os dejo un increible reloj retro creado en Mootools.

El diseño retro está muy logrado, incluso deja caer sus números con un efecto “flip”, como aquellos paneles del aeropuerto que marcaban los números de los vuelos y sus retrasos.

CONTINUAR LEYENDO “Reloj retro con Mootools” »

Share and Enjoy

Diseño Web. Animación con jQuery

Posted by Omar Benyakhlef on nov 27, 2009 in Ajax, Diseño de páginas web, jQuery, Mootools | 19 comments

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.

CONTINUAR LEYENDO “Diseño Web. Animación con jQuery” »

Share and Enjoy

Sexy LightBox 2.2 y compañía…

Posted by Omar Benyakhlef on ago 7, 2009 in Ajax, Diseño de páginas web, jQuery, Mootools, Usabilidad | 9 comments

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.

CONTINUAR LEYENDO “Sexy LightBox 2.2 y compañía…” »

Share and Enjoy

Carro de la compra con Ajax

Posted by Omar Benyakhlef on jul 16, 2009 in Ajax, Diseño de páginas web, Mootools, Usabilidad | 8 comments

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.

CONTINUAR LEYENDO “Carro de la compra con Ajax” »

Share and Enjoy

SlideMenu con Mootools

Posted by Omar Benyakhlef on abr 15, 2009 in Ajax, Mootools | 3 comments

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

Share and Enjoy

Redondear divs e imágenes con Mootools

Posted by Omar Benyakhlef on abr 6, 2009 in Ajax, Mootools | 1 comment

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

Share and Enjoy