por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Usabilidad
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.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, Mootools, Usabilidad
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…)
por Omar Benyakhlef | Ajax, 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
por Omar Benyakhlef | Ajax, Mootools
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
por Omar Benyakhlef | Ajax, Diseño de páginas web, 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.
por Omar Benyakhlef | Ajax, jQuery
Sexy Curls jQuery
Hace muy poco tiempo, en diseño web, era imposible ver efectos que no fuesen producidos y postproducidos con flash. Hoy en día y desde hace un tiempo son numerosos los distintos tipos de efecto que podemos encontrar en cualquier diseño web.
Hoy os dejo un nuevo plugin (al menos para mi), el «Sexy Curl» de jQuery. Sexy porque este efecto «desnuda» la pantalla dejando ver el código html que hay por debajo.
Este efecto fue muy utilizado en photoshop hace años, en los que era muy frecuente ver el efecto curl en numerosas fotos y publicidad.
En el margen superior derecho aparece un efecto de página doblada, al coger con el ratón la esquina y arrastrarla, podemos ver cómo aparece todo el código html que compone la página. No se puede decir que sea un efecto útil, que ayude a la usabiliad, es simplemente una «chulería más» de esta increíble librería Ajax.
Ver el ejemplo
