por Omar Benyakhlef | jQuery, Usabilidad
Tooltipster
Tooltipster es un plugin muy ligero de jQuery, que nos permite facilitar información complementaria al usuario en nuestra web.
Las ventanas de ayuda son del todo customizables, podemos meter desde el simple mensaje de ayuda a una compleja maquetación en HTML. Este tipo de práctica supone un paso de gigante a la hora de hacer más usable una web.
Esta ayuda puede aplicarse tanto en formularios como en diversos elementos interactivos de la web, botones de opciones, imágenes de una galería, incluso como respuesta a la acción sobre un botón, podemos utilizar este plugin para avisar al usuario de que la acción del botón se ha producido con éxito o no, son múltiples los usos que podemos encontrarle.
(más…)
por Omar Benyakhlef | jQuery
Menú desplegable efecto 3D
Espectacular, mucho, ¿dónde colocarlo? eso ya es otra cosa…
El caso es que si quieres incorporar a tu diseño web un menú con efecto «persiana 3D», este es el código que necesitas.
Tanto el efecto de desplegar como el de plegar, simulan gravedad. Además, podemos colocarlo de frente o simulando profundidad, creando así aún más sensación de elemento 3D. La fluidez del movimiento es muy buena y eso le hace más real.
Estoy seguro de que más de uno lo va a tener en cuenta para su próximo diseño web, y sobre todo que a nadie dejará indiferente 😉
(más…)
por Omar Benyakhlef | jQuery
efectos hover con jQuery
¿Quieres dar un aspecto más interactivo a tu diseño web?, existe la posibilidad de mediante jQuery y CSS meter un efecto a todas las imágenes de tu sitio con el plugin Adipoli.
Se trata de varios efectos que hacen más atractivas las imágenes que mostramos en nuestro sitio. Este plugin en concreto, nos permite elegir entre varios tipos de hover, además, podremos determinar la velocidad de transición y controlar tanto el estado inicial de la imagen como el que se produce al colocar el ratón sobre ella.
Entre los efectos que podremos ver en la demo y que por supuesto podremos descargar gratuitamente, está el paso de la imagen en blanco y negro a color, efectos tipo pop-up, o aclarar u oscurecer imágenes con muy buenas transiciones.
(más…)
por Omar Benyakhlef | HTML5, jQuery
Dibujar gráficos con HTML5 y jQuery
Hasta ahora, el único modo de introducir un buen gráfico en un diseño web, era o bien mediante una imagen, o con flash si queríamos hacer algo dinámico. Ahora, gracias a HTML5 y por supuesto a jQuery, podemos fácilmente hacer un gráfico personalizado de una forma rápida y con un buen diseño.
Para ello, utilizamos el plugin de jQuery visualize.js
(más…)
por Omar Benyakhlef | Diseño Web, jQuery, jQuery Mobile
los 50 jQuery más usados en 2012
He encontrado en speckyboy.com, un artículo que creo de gran utilidad para tener en cuenta en nuestros diseños web. Se trata de 50 plugins jQuery, de todo tipo.
Entre ellos podrás encontrar plugins para distribuir contenido en la página, plugins para crear efectos, parallax, responsive, menús de navegación, sliders, gráficos, fuentes, etc…
Merece la pena echarle un vistazo, muchos de ellos ya los conoceréis porque los hemos tratado aquí.
por Omar Benyakhlef | CSS, jQuery
Portfolio adaptativo en jQuery
Se trata de un plugin de jQuery muy vistoso, intuitivo y lo más importante, «adaptativo«.
Las imágenes se amontonan por categorías, y al hacer clic sobre cada una de estas categorías, las imágenes que la forman se exparcen por la pantalla.
La distribución de las fotografías, se puede hacer utilizando diferentes transiciones CSS. En el caso de que el navegador no soporte estas trancisiones, jQuery se encargará de hacer un repliegue sencillo.
Para poder agrupar las imágenes en su correspondiente categoría, utilizamos la etiqueta lidata-pile:
<lidata-pile="Group 1">
La distribución de imágenes es adaptativa, se reparten horizontalmente teniendo en cuenta el ancho de pantalla.
