por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools
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…)
por Omar Benyakhlef | Diseño Web, jQuery
Rollover con jQuer
Algunos de vosotros habréis tenido (los menos ;), la curiosidad de ver el portfolio de este blog de diseño web. Al situarte sobre la imagen, esta se desplaza y deja ver otra imagen u html. Es un efecto muy utilizado en galerías, ahorra espacio y además es amigable cara al SEO.
Os dejo aquí el ejemplo y el código para realizar estos efectos con jQuery.
por Omar Benyakhlef | CSS, jQuery
Animaciones jQuery y CSS3
25 animaciones jQuery con sus correspondientes tuturiales. Sliders, parallax, landscapes animados, menús, etc…
Seguro que encuentras algo que se adapte a lo que andas buscando.
por Omar Benyakhlef | CSS, Diseño Web, jQuery, Usabilidad
A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que pedimos, es decir, si le pido código postal ya me evito población y provincia porque lo puedo sacar internamente con ese código. Además de esto hay numerosos aspectos que veremos en mayor profundidad en otro post. Hoy vamos a ver cómo colocar los literales de los imput para que la experiencia sea más cómoda para el usuario y en particular un jQuery que además nos va a dar como resultado un formulario que además de usable va a sorprender a nuestros usuarios.
Tenemos varias opciones a la hora de colocar el nombre de cada imput.
NOMBRE EN LA MISMA FILA
Podemos colocar el nombre delante de cada imput, a mi no me gusta esa solución, ya que cada nombre va a tener una longitud y eso va a provocar un desorden visual que repercutirá notablemente en la usabilidad del formulario. Además y más importante, el desplazamiento horizontal que tiene que hacer el usuario con la vista es mucho mayor que en los demás casos, dificultando mucho la usabilidad.
NOMBRE SOBRE EL IMPUT
La segunda opción y más generalizada, es colocar los nombres encima de la caja, nos permite hacer un diseño amigable y cumple perfectamente los estándares de usabilidad. Todo queda en un mismo bloque, nombre e imput.
NOMBRE DENTRO DEL IMPUT
La tercera opción es colocar los nombres dentro del imput, colocándolo como» value». Ahorras espacio vertical, es más elegante, pero tiene un problema, y es que una vez que pinchas dentro del imput el nombre desaparece, por lo que si no has estado atento, no sabes qué te está pidiendo el formulario. Existe la solución, mediante código, de hacer que vuelva a aparecer el nombre cuando pinchamos fuera de la caja. En este caso, es fundamental que el color del texto sea muy suave para que no parezca que está rellenado el imput.
CSS + JQUERY
Esta opción que os traigo hoy es una mezcla entre la segunda y la tercera. Visualmente no puede ser más limpio y además hace «algo» que sorprenderá al usuario y le hará ser más receptivo en la aburrida tarea que es siempre rellenar un formulario.
Esta opción te muestra dentro de la caja su nombre, al pinchar sobre la caja para rellenar el dato, el nombre «salta» y se coloca encima de la caja, de modo que siempre será visible en el formulario. Particularmente me parece muy original, divertido y usable 100%
Aquí os dejo esta opción funcionando y con la posibilidad de que podáis coger todo el código y usarlo en vuestro sitio.
Pincha dentro de cada imput para ver la animación.
See the Pen jqmLOw by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark
por Omar Benyakhlef | jQuery
divertirse con jQuery
Se trata de un plugin experimental en jQuery que lo que hace es amenizar la entrada de texto en las cajas de tu web.
Existe la posibilidad de incluir hasta 5 efectos distintos de animación. Con lo aburrido que es siempre rellenar un formulario, esta puede ser una buena manera de hacerlo más divertido 😉
por Omar Benyakhlef | jQuery, Redes Sociales
Plugin jQuery para insertar redes sociales en tu web
#50C1AL es un plugin de jQuery para compartir tu web o blog en las redes sociales.
El plugin es compatible con prácticamente todas las plataformas, Blogger, Delicious, Facebook, Google, MySpace, Twitter, Linkedin, Digg,… Incluye 46 iconos.
Al pulsar sobre el botón de compartir, la web se oscurece con un blur y aparecen los iconos que hayamos seleccionado para compartir en las redes sociales. El plugin es customizable, podemos modificar las animaciones, velocidad y el blur. No se trata de un plugin mejor que otros, pero no podemos negar que es vistoso.
por Omar Benyakhlef | jQuery
Arde tu texto con jQuery
Pues si, tienes toda la razón, una macarrada !!!
Pero no me digáis que no es potente este plugin jQuery para hacer arder el texto.
Burn jQuery es un plugin que añade un efecto de llama a tu texto, con distintos tipos de sombras y animación.
Admite detenerlo y reiniciarlo dinámicamente, modificar la aceleración y algún que otro detalle más.
por Omar Benyakhlef | CSS, Diseño Web, jQuery
CSS3 y jQuery. Descubre en este post, alucinantes efectos que te ayudarán en tus próximos diseños web.
En este blog de diseño web podréis encontrar gran variedad de artículos sobre jQuery y CSS3 .
En esta ocasión, he intentado hacer una selección lo más variada posible, de ejemplos que podemos necesitar, pero sin duda, al que tenga tiempo, le recomiendo que se de un paseo por http://tympanus.net/ para ver la cantidad de ejemplos que nos ofrece esta tecnología.
Se trata de 14 ejemplos de jQuery y CSS3 para mejorar tu web. En algunos casos se trata de ejemplos para integrar en tu web, y en otros, de verdaderos proyectos para generar una web espectacular.
(más…)
por Omar Benyakhlef | jQuery, Tutoriales
Efectos en texto con jQuery
Hoy traemos más jQuery para diseño web. En este caso se trata de efectos aplicados a párrafos y textos en general.
Podréis simular desde el típico efecto de máquina de escribir, hasta los efectos más alucinantes que hasta ahora sólo eran terreno flash.
A continuación os dejo el listado de efectos junto a la dirección en la que podéis descargarlos. Espero que os sirvan.
(más…)
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
PageSlide con JQuery
¿Habéis visto el efecto que produce el iPhone cuando pasamos de una página a otra?, la pantalla se desplaza horizontalmente dejando ver el siguiente contenido. Este plugin permite a cualquier desarrollador crear una interacción similar en su propio sitio web utilizando unas simples líneas de Javascript.
Adjuntando el método a una etiqueta de ancla, pageSlide envuelve el contenido original en una capa y crea un nuevo bloque para el contenido secundario. Al hacer clic en el evento se invocamos la animación.
Una de las ventajas que tiene es que no perdemos de vista la ventana principal, por lo que en cualquier momento el usuario puede volver a su contenido original con solo hacer clic sobre él.
Este plugin lo encontré en los grupos para desarrolladores de google. La verdad es que es una mina, muy recomendable !!!
Más información sobre PageSlide
por Omar Benyakhlef | Ajax, Diseño de páginas web
Diapositivas con jQuery
A veces necesitamos hacer presentaciones de fotografías de modo automático, tipo diapositivas. Hasta ahora la única solución era meter las imágenes en flash y hacer transiciones entre ellas.
JQuery tiene un plugin llamado CrossSlide capaz de hacer varios tipos de animación cambiando solo un par de parámetros. Las transiciones son bastante fluidas, pero dado que dependen del navegador y de la plataforma que usemos para cambiar el posicionamiento y ver bien estas transiciones, varían los resultados dependiendo de la combinación que tengamos (firefox con windows, Mac o Linux, Explorer, Safari,…).
Toda la explicación de cómo usar este plugin y de cómo usar cada una de las posibilidades de transición las tenéis en Gruppo4.com
por Omar Benyakhlef | Ajax, Diseño de páginas web
jQuery es una biblioteca javscript que permite manejar eventos, desarrollar animaciones y agregar interacción con tecnología Ajax a nuestras páginas.
Una de sus principales características es su simplicidad. Podemos añadir impresionantes efectos con sólo unas pocas líneas de código, lo cual repercute positivamente en el peso de nuestras páginas.
(más…)
por Omar Benyakhlef | Descargas, Diseño Web
Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario.
Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta movimientos de lo más discretos, todo siempre dependiendo del producto que tengamos que vender. En cualquier caso, los efectos interactivos con el scroll, lo que nos permiten como usuario, es tener un control sobre la página del que rara vez solemos disfrutar. Los contenidos no se muestran sin más, gracias a esa interactividad con la profundidad del scroll, podemos controlar la aparición de contenidos, imágenes o animaciones cuando nosotros queramos, incluso echar hacia atrás para ver cómo se ha producido ese efecto.
Esa interacción también promueve la viralización de nuestras páginas, por lo que, como he dicho al principio, siempre teniendo en cuenta el tipo de producto que estamos vendiendo, recomiendo 100% el uso de estas interactividades, al usuario le va a agradar y a nosotros nos permite desarrollar algo más nuestra creatividad.
EJEMPLOS
MAKE YOUR MONEY MATTER.
Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO
EVERY LAST DROP
Otro producto vendido a través de una historia bien ilustrada, otro claro caso de cómo la información va a ser mejor aceptada por el usuario y como decía al principio del artículo, muchas probabilidades de que sea compartida tu página.
VER EJEMPLO
PORSCHE EVOLUTION
En este caso podemos ver cómo ha solucionado Porsche su web para mostrar la evolución de sus vehículos a lo largo de los años y de la música, todo con un efecto parallax activado por el scroll.
VER EJEMPLO
PEUGEOT HYBRID
Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO
CLOSER
Esta web la puedes navegar como cualquier otra, a través de su menú, o la puedes recorrer entera haciendo scroll. Todo tipo de animaciones para tomar ideas.
VER EJEMPLO
COLOR OF THE YEAR
Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO
MELANIE DAVEID
Lo interesante de esta web es observar cómo los contenidos están divididos en dos columnas y cómo una columna espera a la segunda para seguir mostrando contenido, todo ello por supuesto con la ayuda del scroll.
VER EJEMPLO
BAGIGIA
Esta web es antigua, pero la coloco en este listado, para mostrar cómo a través del scroll van cargando distintas imágenes para recrear una animación de un objeto, dando una sensación 3D
VER EJEMPLO
DESCARGAR CÓDIGO
Una de las mejores galerías, podéis ver todos los efectos posibles en http://scrollmagic.io/examples/index.html
Todo tipo de efectos con textos
Una librería tanto para web y móvil. Permite establecer un easing personalizado, rotaciones 3D, …
Librería JS con timelines para generar animaciones mucho más suaves.
Animaciones para transformaciones de escala, rotaciones, animaciones 3D,…
Compatible con cualquier tipo de dispositivo, y perfecto para hacer una demostración de un producto realizando un 360 grados cuando el usuario hace scroll.
Pasa con el scroll de sección en sección con diversos tipos de animaciones
He colocado esta galería porque además de ser un menú muy vistoso y útil, nos muestra cómo van cambiando los puntos según avanzamos en el scroll
Detecta la dirección del scroll mostrando una capa arriba o abajo.
Muy interesante, permite el desplazamiento desigual entre columnas al hacer scroll.
por Omar Benyakhlef | Diseño para móviles, iPhone, jQuery Mobile, Mobile, Usabilidad
Diseño de Web para Móviles
El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.
Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web
Hasta ahora las animaciones en web eran exclusivas del flash, pero con la entrada del Ajax y de bibliotecas como jQuery, ahora podemos ver animaciones que nos hacen dudar sobre cual de las dos tecnologías ha sido la elegida para realizar la animación.
Esto fue lo que me ocurrió al ver esta web, jwhanif.net La carga es muy rápida y las animaciones tienen una fluidez increíble, como no podía ser de otra manera, mi primera reacción fue pulsar el botón derecho del ratón para comprobar que se trataba de flash… pero no!!
(más…)
