Botones Social Media con jQuery y CSS
En diseño web se ha vuelto imprescindible poder compartir tus contenidos con tus usuarios, si además lo puedes hacer de una manera vistosa, no solo gustará más a tus usuario, si no que será mucho más fácil que se vean tentados a utilizarlo.
AjaxMint nos muestra un alucinante ejemplo en el que además nos permite descargarnos el código.
simular iPhone en web
El diseño web es usabilidad y ¿qué hay más usable que el desplazamiento sobre la pantalla de un iPhone?. Un desplazamiento que además de facilitarnos la navegación por elementos mayores que la resolución de pantalla, nos hace tener la sensación de control absoluto sobre lo que estamos viendo, con una absoluta fluidez que nos permite fácilmente trasladarnos de un lado a otro del documento.
Pues bien, esto mismo ya está inventado para web, Overscroll es un plugin de jQuery que consigue el mismo efecto que el desplazamiento del iPhone.
En el siguiente enlace podréis ver una demo de su funcionamiento y descargaros gratuitamente el código fuente. Como véis en el ejemplo es una aplicación que asemeja el desplazamiento por pantalla del google maps.
Cargador de vídeos en jQuery
El diseño web con jQuery además de haber conseguido una mayor usabilidad y velocidad de navegación, nos proporciona una infinidad de soluciones a cuestiones que hasta ahora eran muy laboriosas y pesadas tanto de elaborar como a la hora de cargar la página. Hoy os dejo el dualSlider, otro slide en este caso utilizado como cargador de vídeos que además de ser muy vistoso, nos permite añadir acciones muy útiles a la vez que reproducimos nuestros vídeos (textos y titulares adicionales, reproducción automática…)
El paso de un vídeo a otro puede ser manual o automático, pudiendo además controlar fácilmente la velocidad de transición de uno a otro.
Por supuesto que código gratuito listo para funcionar. Podéis ver el funcionamiento y descargar todos los archivos necesarios en http://www.hugoandcat.com/DualSlider/index.html
Si queréis ver otros slides en este blog de diseño, visitad los siguientes post
Más jQuery para tu web
La relación diseño web + jQuery ha sido sin duda la última revolución del diseño web. Más posibilidades, más usabilidad, más ligero,…
Hoy os dejo una forma de hacer todavía más usable vuestra web o blog. Se trata de las típicas pestañas que quedan siempre fijas a una determinada altura de la pantalla, independientemente de que hagamos scroll. Muy útil para colocar los accesos a redes sociales, RSS, o al carrito de la compra.
En el post de tympanus.net además de poder descargaros el código, podréis ver cómo funciona.
SlideDeck
Un buen diseño web ha de adaptarse al perfil del usuario que lo va a utilizar y a las necesidades del producto que queremos mostrar, para esto, debemos de estar siempre a la última, ver todas las tendencias y todas las nuevas herramientas que nos ofrece el desarrollo web, en este caso y una vez más, utilizando jQuery.
Hoy os dejo una verdadera joya, el SlideDeck, una nueva forma de mostrar el contenido de una web que últimamente se está poniendo de moda, es muy intuitivo, elimina la sobrecarga de información dando una mejor experiencia de usabilidad e incluso hace divertido interactuar con él.
Es ideal para mostrar diferentes destacados en una página, o incluso, podríamos usarla para hacer enteramente la web dentro de ella (para pequeñas webs de información).
Además de espectacular, es súper usable, ya que por ejemplo podemos cambiar de información moviendo la rueda del ratón.
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.
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.
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.
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.
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 !!!
Demostraciones de lo que se puede llegar a hacer con JQuery
Esta es una lista de algunos sitios en los que podemos ver hasta qué punto podemos diseñar una magnífica navegación con JQuery. Además de hacer todo más intuitivo y atractivo, el tiempo de carga es infinitamente inferior a otros sistemas al no tener que recargar la página o llamar a otra. JQuery consigue darnos una navegación tan fluida, que en numerosas ocasiones no sabrás si navegas por flash o html.
Estoy convencido que estas librerías ya son presente del diseño y que cada vez veremos más sitios programados con esta tecnología. Hoy en día cualquier web de primer orden ya incorpora Ajax en sus formularios, porque además de ser más rápida la navegación conseguimos ayudas geniales para el usuario.
A continuación una serie de webs que seguro que os van a sorprender:
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
JQuery, varias páginas en una
Hace tiempo ya escribí un post acerca de esta característica de Ajax, la de enseñar y esconder código, dado que cada vez estoy viendo más esta práctica, he decidido reciclarlo.
Ajax ha revolucionado el diseño web. Con librerías como jQuery podemos conseguir infinidad de efectos en una página web. Entre ellos está el de cargar contenido sin necesidad de recargar la página, el ejemplo lo tenéis en la web www.sourcebits.com, esta web muestra varias páginas dentro de una úncica.
Se trata de esconder y enseñar contenido, y para hacerlo, se sirve de efectos de desplazamiento o fundidos. En esta web podemos ver como se pliegan los contenidos que queremos abandonar, para luego desplegar los nuevos que hemos solicitado. Visualmente todo esto es genial pero como todo tiene sus pros y sus contras.
A favor: la carga de contenidos es muy rápida, la fluidez de navegación puede llegar a ser muy buena y el impacto visual es enorme, ante la novedad, el usuario recordará tu web como algo muy innovador.
Nos da la opción de generar nuevas url’s dentro de la actual del tipo «#loquesea», eso significa que nos quitamos de un plumazo los problemas SEO que pudiese originar.
Sinceramente no veo ningún problema en utilizar esta librería, creo que es futuro y como diseñadores deberíamos empezar a implantarlo en nuestros futuros proyectos.
Para saber más sobre cómo funciona y descargarse la librería, visita este post «contenidos con jQuery«
¿Cómo hacer zoom sobre una imágen con jQuery?
Cuanto más investigo más consigue sorprenderme. Ahora estoy con un proyecto en el que necesito hacer una lupa o zoom sobre las imágenes. Lo primero que se me pasó por la cabeza fue buscar una solución en flash, pero dadas mis limitaciones, eso me haría crear un flash para cada zoom. Hasta que finalmente encontré esta joya, ¿cómo hacer zoom con jQuery?.
El resultado como podréis comprobar, es alucinante !!!!. Al colocarnos sobre las imágenes se abre una capa flotante que nos va mostrando la selección que estamos marcando.
El plugin se llama jQzoom y tanto la descarga como los ejemplos los podéis conseguir en Mind Projects.
Con jQuery podemos usa cualquier tipografía en nuestra web.
Una de las grandes limitaciones del diseño web, es el escaso abanico de fuentes que podemos usar para diseñar una web. Como es sabido, para que un usuario pueda ver una web con una determinada tipografía, debe de tenerla incorporada en su máquina.
Hace tiempo que surgió el sFIR, acrónimo de Scalable Inman Flash Replacement, mediante esta técnica, podemos reemplazar textos por flash. Seguramente por la complejidad de configuración no se ha hecho todo lo popular que debería, pero ahora, con la biblioteca jQuery, parece ser que hemos dado un gran paso adelante, gracias a la inmensa librería de plugins, el convertir un texto en swf es ahora mucho más fácil y rápido.
Gracias a jQuery, no necesitamos especificar color y demás atributos de la fuente. Además ahora ya no es necesario subir el archivo a producción o tener un servidor local para ver el resultado. Todo esto unido a que es más rápido e intuitivo, hace más atractiva la opción de comenzar a introducir nuevas fuentes en nuestros diseños.
Kemie Guaida nos ofrece un tutorial perféctamente ilustrado y todos los enlaces necesarios para poder usar esta técnica.
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.
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.
Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO
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
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
Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO
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
Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO
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
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
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.
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.
Biblioteca multi-touch para WebApp
En numerosas ocasiones se ha recurrido al desarrollo de aplicaciones nativas al no existir la posibilidad de poder realizar ciertos desarrollos para web.
Una de las limitaciones en una aplicación web era el no poder programar gestos multitáctiles, como pellizcar para agrandar o disminuir el zoom, rotar, drag and drop,… Gracias a Hammer.js, ahora podemos implementar todo tipo de gesto multi-touch en nuestra WebApp
Hammer.js es una biblioteca javascript (requiere jQuery) para gestos multitáctiles de apenas 2kb destinado a operar con los gestos multitáctiles, clic, doble clic, arrastrar, mantener pulsado, escalar,…
Además, parece ser que ha sido testada en diferentes smartphones y tablets comprobando su compatibilidad.
Slider para Web App
Todos conocemos el efecto de pase de fotos o de la navegación entre contenidos en un Smartphone o tablet. Al desplazar el contenido hacia un lado u otro, este desaparece y aparece el siguiente. Este es el código que traemos hoy en este post de diseño web, en este caso para Web App.
El complemento utilizado es Swipe, un slider ligero hecho para mobile.
Al igual que si de un iPhone, iPad o Android se tratase, el pase de fotografías o contenidos se puede hacer en ambas direcciones, además, Swipe permite el giro de pantalla y se adapta a la pantalla escalándose sin problema alguno.
