Genial formulario con CSS y jQuery !!!

Genial formulario con CSS y jQuery !!!

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

 

 

Objeto interactivo en 3D con jQuery

jQuery Interactive

jQuery Interactive

En este artículo podréis ver cómo crear un objeto interactivo en 3D mediante imágenes y un simple JS.

Al hacer drag sobre la imagen arrastramos el objeto de tal modo que parece que estamos realizando un giro en 3D. En realidad estamos cargando todas y cada una de las imágenes que componen ese movimiento 360º. El efecto es perfecto para una galería de coches por ejemplo, el único problema es que nos tendremos que hacer con todas las imágenes de la rotación completa.

(más…)

ascensor.js Código jQuery para navegación web

Navegación web con jQuery

Navegación web con jQuery

La navegación web en una sola página es una forma de dar al usuario una transición entre secciones natural y muy vistosa.

Para ello existen multitud de plugins jQuery que facilitan el uso de este sistema de navegación.

Todas las áreas de contenido se encuentran en la misma página, y gracias al menú nos vamos desplazando por cada una de ellas.

(más…)

Un plugin de jQuery para crear tooltip estilo barra de herramientas

Crear tooltips con jQuery

Crear tooltips con jQuery

Toolbar.js es un plugin de jQuery que nos ayuda a crear fácilmente tooltip estilo barras de herramientas.

Se trata de un plugin muy sencillo que nos permite crear cualquier tipo de barra de herramientas.

Permite abrir la barra desde cualquier elemento, los elementos de la barra de herramientas son fácilmente personalizables. Las barras pueden aparecer horizontales o verticales, por encima o debajo del botón.

(más…)

Divierte tus cajas de texto con jQuery

divertirse con 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 😉

 

 

VER DEMO

Slide Down Box Menu, un menú completísimo con jQuery y CSS

Menú con jQuery y CSS

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.

VER DEMO Y DESCARGAR MENÚ SLIDE DOWN BOX

Espectaculares efectos para listas desplegables. jQuery y CSS

Lista desplegable con jQuery y CSS

Lista desplegable con jQuery y CSS

Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.

El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.

El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo 😉

 

VER DEMO Y DESCARGAR ARCHIVO GRATIS LISTAS DESPLEGABLES

 

 

Plugin jQuery para compartir en redes sociales

Plugin jQuery para insertar redes sociales en tu web

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.

 

VER DEMO Y DESCARGAR CÓDIGO

Tooltipster, un plugin jQuery súper útil para el usuario

Tooltipster

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…)

Espectacular menú 3D desplegable con CSS y jQuery !!!

Menú desplegable efecto 3D

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…)

Rollover de imágenes con jQuery

efectos hover con 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…)

Los 50 jQuery más usados en el 2012

los 50 jQuery más usados en 2012

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í.

 

VER LOS 50 PLUGINS JQUERY

Impresionante Portfolio Adaptativo con jQuery

Portfolio adaptativo en 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.

 

VER DEMO Y DESCARGAR CÓDIGO

Scroll horizontal, vertical e infinito con jQuery.

Plugin jQuery para hacer Scroll

Plugin jQuery para hacer Scroll

Plugin para realizar scroll horizontal, scroll vertical y scroll infinito con jQuery.

Súper útil para realizar sliders o incluso para hacer webs tipo parallax. Además de realizar los desplazamientos con aceleración, nos permite poder navegar entre capas con barra de scroll o con botones.
El caso del scroll infinito merece una mención especial. Se trata de realizar una navegación vertical en la que el contenido se va cargando poco a poco mientras nosotros navegamos las primeras pantallas, según vamos aproximándonos al final del scroll, la página vuelve a cargar nuevas secciones.

VISITAR ARTÍCULO ORIGINAL Y DESCARGAR CÓDIGO

CSS3 y jQuery !!!. Ejemplos alucinantes.

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…)

Plugins jQuery listos para llevar

jQuery listo para llevar...

MiniJs es un sitio en el que podrás encontrar varios plugins jQuery, listos para integrar en tu web. No son muchos, pero los que están merecen la pena, y supongo que irán añadiendo.

Entre los MiniJs que podemos encontrar tenemos:

  • Count – una cuenta atrás de caracteres como la que podemos encontrar en Twitter.
  • Tip – los Tips son una ayuda genial en el diseño web. Se trata de pequeños globos que hacemos aparecer, para avisar o ayudar a nuestros usuarios. Este tipo de globos, los estaréis viendo ya en muchos formularios jQuery.
  • Slider – un típico slider para ver galerías.
  • Notification – activa una capa para lanzar un mensaje.
  • Feed – un plugin para mostrar tu actividad en Twitter.

Pues bien el código es bastante sencillito, existe algún que otro plugin más y seguramente irán sumando.