por Omar Benyakhlef | jQuery, Usabilidad
Menú con jQuery y CSS
En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.
La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.
Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.
Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.
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 | Photoshop, Redes Sociales, Social Media, Usabilidad
CrazyPixels nos trae un interfaz de usuario súper completo para descargar gratuitamente.
El archivo es un PSD, en el que podremos encontrar múltiples utilidades para nuestros diseños de interfaz. Botones de sonido, controles, formularios, calendario, sliders de avatares, mapas, cajas de diálogo,… Todo lo que necesitas para diseñar tu interfaz de usuario.
El diseño es muy limpio y elegante, como todas las capas vienen separadas y bien guardadas en su carpeta, no te será difícil costumizarlo a tu gusto o necesidad.
(más…)
por Omar Benyakhlef | accesibilidad, CSS, Diseño Web, HTML5, jQuery, Usabilidad
Evolución web desde 1990 a 2012
Desde hace unos años, el diseño web ha sufrido una tremenda transformación, gracias a las nuevas tecnologías y a la obligatoria necesidad de los distintos navegadores de adaptarse a ellas.
La web hoy en día es un Universo cada vez mayor de páginas web y aplicaciones web relacionadas entre sí, lleno de vídeos, fotos y contenido interactivo.
Pero detrás de todo esto, existe una interacción de tecnologías y navegadores que intentan día a día hacerse más compatibles y dar al usuario una mejor experiencia.
En los últimos años, la tecnología web ha evolucionado tremendamente, esto, permite a los diseñadores web, la posibilidad de dar rienda suelta a la imaginación, sin tantas limitaciones como hasta ahora había. Las páginas web actuales, son el resultado de los esfuerzos de una comunidad web de código abierto que ayuda a definir estas tecnologías web, como HTML5, CSS3 y WebGL y asegurarse de que están apoyados en todos los navegadores web.
En http://evolutionofweb.appspot.com/, podréis ver toda la evolución que ha sufrido la web desde 1990 hasta 2012. Las bandas de color en esta visualización representan la interacción entre las tecnologías de la web y los navegadores. Como veréis es una lucha es interminable por poder dar al usuario una compatibilidad con las nuevas tecnologías que van surgiendo.
por Omar Benyakhlef | accesibilidad, Ajax, Cool Web Design, CSS, Diseño de páginas web, Diseño Web, HTML5, jQuery, Usabilidad
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!
El diseño webestá en constante evolución.
La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web.
Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que «todo es posible«.
Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad.
A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3, que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Diseño Web, HTML5, Usabilidad
Scroll infinito con History API HTML5
La constante evolución del diseño web, hace que cada vez tengamos más posibilidades de hacer más usables nuestras páginas web.
En esta ocasión Warpspire.com nos deja un claro ejemplo de cómo el HTML5 va a ser una revolución en el diseño web .
Todos aquellos que hayáis navegado por Twitter, habréis visto que no existe paginación. La página se va cargando de nuevo cada vez que llegamos al final del scroll. Esto permite no sobre cargar la página, ya que el contenido se va cargando paulatinamente y sobre todo hace mucho más fácil y rápida la navegación.
Lo mismo sucede si analizamos Facebook, donde podemos ver que también se renuncia a la paginación, utilizando también el scroll sin fin.
Esta API de HTML5 es verdaderamente útil y mejora aún más la navegación de Twitter y Facebook.
(más…)
