ColorPicker (selector de color) con jQuery

ExColor es un ColorPicker gratis, desarrollado con jQuery y listo para ser utilizado en nuestros proyectos. A diferencia de otras alternativas similares el diseño de este elemento se puede personalizar muy bien, teniendo opciones para elegir como por ejemplo el tipo de puntero, el estilo de slider, los colores de fondo, sombras, inclusive los colores de los distintos bordes.

El tamaño del plugin es de aproximadamente 16 kb, que si bien no es extremadamente liviano es bastante aceptable para este tipo de elementos que en linea general son bastante más pesados. Si utilizamos la compresión gzip en nuestro servidor el peso se vuelve aún un poco más aceptable.

Un accesorio interesante es el que podemos encontrar en el sitio oficial del plugin, que nos permite, por un lado probar el plugin y por otro personalizar los distintos valores para modificar el aspecto visual.

Utilizar el ColorPicker es muy sencillo, basta con inicializar el plugin, por ejemplo.

$('#my_input').modcoder_excolor();

Recomiendo visitar la web oficial del plugin para encontrar las distintas formas de configuración, son muy simples pero permiten adecuar a la perfección los aspectos estéticos del colorPicker para combinarlos perfectamente a nuestro sitio.

Web: ExColor

Buscador con autocompletar jQuery

VisualSearch es probablemente uno de los mejores plugin jQuery para realizar el trabajo de autocompletar campos de búsqueda. Cuenta con opciones realmente novedosas que solucionan problemas muy complejos de una forma muy simple, por ejemplo el de realizar una búsqueda por diversos campos de una manera lógica.

VisualSearch tiene un peso de 45 kb en su versión de desarrollo y de unos apenas 8kb en su versión comprimida, nada mal para la cantidad de opciones disponibles. A su vez el plugin cuenta con varias dependencias, las mismas se detallan perfectamente en la documentación, para resumir ellas son: jQuery 1.4+, jQuery UI, Underscore.js, Backbone.js.

El punto más interesante de este plugin es que permite realizar búsquedas complejas en una sola linea, esto lo logra mediante la sugerencia de categorías, algo que plugins similares no hacen y que resulta tremendamente importante para búsquedas que requieren analizar múltiples campos. En la captura que coloco a continuación se ve perfectamente como funciona.

En la pagina oficial del plugin pueden ver una demostración online.

El plugin prácticamente no utiliza imágenes, salvo dos, una pequeña lupa y un botón de cancelar. Ambas muy pequeñas y con un peso casi despreciable.

Si VisualSearch no te agrado una buena alternativa para Autocompletar con jQuery.

Web: VisualSearch

Ajustar el ancho de los vídeos automáticamente con jQuery

FitVids es un plugin realmente novedoso, sirve para ajustar automáticamente el ancho de los vídeos embebidos en nuestros sitios, ideal para aquellos diseños elásticos que tanto se utilizan hoy en día.

Los vídeos en general son siempre los que rompen las estructuras en cuanto los navegadores cambian de dimensiones, con FitVids este problema es del pasado porque se encarga de escalar el tamaño según el espacio disponible, redimensionando a la perfección el video embebido.

En el video que inserto a continuación se muestra perfectamente el funcionamiento del plugin.

FitVids from Dave Rupert on Vimeo.

El plugin actualmente funciona perfectamente con los sitios de vídeos más populares de la red: Youtube, Vimeo, Blip.tv, Viddler, etc.

Para utilizarlo solo necesitamos inicializar el plugin pasando como parámetro el selector donde se encuentra contenido el video.

Ejemplo de uso:

$(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
});

Web: FitVids

Calendario jQuery muy liviano

Las funciones básicas de cualquier calendario están perfectamente contempladas en este plugin, inclusive es muy accesible de cara a las modificaciones visuales, simplemente con modificar la hoja de estilos podremos adecuar su gráfica a la de nuestro sitio web.
Ejemplo de instalación:

$("#date2").glDatePicker(
{
    cssName: "android",
    selectedDate: 5
});

En el sitio oficial del calendario van a encontrar muchísimos ejemplos, ademas de una muy completa documentación acerca de las distintas funcionalidades que contiene este plugin.
Web: glDatePicker

Notificaciones con CSS3 y jQuery

Desde Read Team Design ponen a nuestra disposición un modesto, pero muy atractivo set de notificaciones, muy bien logradas, que utilizan CSS3 en su diseño y jQuery para darle funcionalidad.
Hoy por hoy las notificaciones varían muy poco en los distintos sitios, que mejor que un poco de CSS3 para darle un toque distintivo.
Pueden ver una demostración online de su funcionamiento, o bien ver la captura que coloco a continuación para observar como se ven estas fantásticas notificaciones.

Las distintas notificaciones que vienen por defecto comprenden 4 estados distintos: Info, Error, Warning y finalmente Sucess para cuando un evento se finaliza correctamente. Obviamente una vez que descarguemos el código podremos personalizar estas notificaciones o bien crear las nuestras.

Web: Read Team Design

Upload de imágenes HTML5, jQuery con modalidad Drag & Drop

Droparea es un completo plugin jQuery, que utiliza HTML5 y que nos permite de una forma muy sencilla incorporar un formulario de upload de imágenes, con la capacidad de arrastrar y soltar.
Esta forma de realizar una subida de imágenes es bastante más intuitiva y simple de cara al usuario que los formularios convencionales. El formulario se puede configurar, hablando del aspecto visual, por defecto se ve de la siguiente manera:

El usuario simplemente arrastra la imagen al cuadro, la misma se sube al servidor y se muestra en el espacio asignado.
Un ejemplo de implementación sería el siguiente:
HTML:

<div data-width="460" data-height="345" data-type="jpg" data-crop="true"
data-quality="60" data-folder="sample" data-something="stupid"></div>

JAVASCRIPT:

<script>
$('.droparea').droparea({'post' : '/data/dev/droparea/upload.php'});
</script>

Antes de que lo implementen en sus formularios les recomiendo que lo prueben en distintos navegadores. El autor por el momento solo comenta que el plugin fue testeado en Google Chrome y Firefox.

Emular las alertas modales de Facebook con jQuery

Uno de los componentes relacionados a la usabilidad de Facebook que no fue prácticamente modificado con el correr de los años son los cuadros de dialogo modales. Estas alertas están representadas por un titulo, una descripción y dos botones, uno para aceptar la acción y otro para cancelarla.
Una manera de emular estos cuadros de diálogos modales es utilizando FB Modal, un plugin jQuery que es extremadamente fácil de utilizar. El plugin es compatible con los navegadores más modernos: Firefox, Opera, Safari y Chrome.
Así se ve el plugin en funcionamiento:

Una vez instalada la biblioteca del plugin, el mismo puede ser iniciado de la siguiente manera:

$("#your-element-id").fbmodal();

FB Modal tiene multiples opciones de configuración para que podamos personalizarlo a nuestro gusto. Las opciones disponibles son:

$("#your-element-id").fbmodal({
       title: "FaceBook Modal Demo",
      cancel: "Cancel",
        okay: "Okay",
  okaybutton: true,
cancelbutton: true,
     buttons: true,
     opacity: 0.0,
     fadeout: true,
overlayclose: true,
    modaltop: "30%",
  modalwidth: "400"
});

El plugin es muy simple y claro, se pueden cambiar los colores muy rápidamente cambiando unos pocos valores.
Web: FB Modal

Estilo personalizado: checkboxes y botones radio con jQuery

Este tipo de plugins resulta muy útil no solo desde el punto de vista estético sino también desde la usabilidad. Un detalle de esto, es por ejemplo, notar como se extienden las áreas que reciben click de los checkboxs y botones del tipo radio, algo que facilita enormemente su uso.
Un detalle que también merece ser mencionado es que esta implementación esta probada en distintos navegadores, algo que muchos agradecemos, en especial aquellos que odiamos perder tiempo probando y arreglando las diferencias que se producen de la distinta interpretación del código por los distintos browsers.
Web: Maratz

Fondo animado con jQuery

El plugin contempla perfectamente que las imágenes de alta resolución son de por si bastante pesadas, razón por la cual el autor de este plugin incorporo un cargando, que se muestra en el momento preciso en que las imágenes son cargadas, evitando de esta forma que se vea la carga parcial de las distintas fotografías.
Ejemplo de instalación:

$.vegas('slideshow', {
  backgrounds:[
 { src:'/img/background1.jpg' },
 { src:'/img/background2.jpg' },
 { src:'/img/background3.jpg' }
 ]
})('overlay');

Les recomiendo que prueben la demostración online.
Web: Vegas Background

Slider de contenido mixto jQuery

Casi siempre cuando hablamos de slider jQuery nos referimos a los que están compuestos por solo por imágenes, la realidad es que un slider no solo sirve para deslizar imágenes, sino para mostrar cualquier tipo de elemento que deseemos. Lamentablemente la mayoría de los plugins que podemos descargar solo contemplan imágenes como contenido, para suerte de todos nosotros Awkward Showcase plantea un plugin preparado y optimizado para contenido mixto.
Este fantástico slider jQuery soporta, imágenes, vídeos y textos sin ningún problema, simplemente con cargar la información en los divs correspondientes el plugin se encargara de desplegar el contenido.
Por ejemplo, una implementación genial es la de utilizar una imagen y utilizar toolstips para mostrar información de determinado sectores de la fotografía.

Les sugiero que visiten la demostración online para probar las distintas funcionalidades que tiene este slider de contenido mixto.
Web: Awkward Showcase

Upload múltiple con jQuery

La subida múltiple de archivos fue por mucho tiempo uno de los aspecto más complejos desde el punto de vista de la usabilidad, luego con la aparición de las nuevas tecnologías, como por ejemplo AJAX, el asunto se torno un poco más simple de cara al usuario.
Implementar un formulario que permita la subida múltiple de archivos ahora es más fácil que nunca, y más aún si utilizamos un plugin desarrollado con jQuery como por ejemploMultiple File Upload.
Si quieres, puedes pasar directamente a ver una demostración online y ver la mecánica con la que este muy buen plugin funciona.
Captura de pantalla con dos ejemplos:

Algo interesante de este plugin es que si bien la selección se realiza de forma unitaria el complemento va creando una pequeña lista de archivos seleccionados, completamente visible y que el usuario puede editar mediante un simple click eliminando archivos que selecciono y luego se arrepintió. Al finalizar simplemente confirma y los archivos se suben.
Antes de comenzar a utilizar el plugin les recomiendo que revisen toda la documentación para aprovechar al máximo las funcionalidades, por ejemplo el plugin permite acotar las extensiones soportadas, algo ideal para limitar el tipo de archivos a subir.
Web oficial del plugin: Multiple File Upload

Pequeños gráficos con jQuery

Para ir completando un poco más la lista que realice con plugins jQuery para realizar gráficos hoy les quería recomendar Peity, un plugin que sirve pura y exclusivamente para crear gráficos estadísticos de pequeño tamaño, muy al estilo de Google Analytics.

Ejemplo de como se ven los gráficos generados con Peity:

Un punto muy bueno que fue considerado a la perfección por el creador del plugin, es su muy sencilla utilización, por ejemplo si deseamos crear un gráfico de líneas, el siguiente código lo haría sin mayores problemas.

HTML:

5,3,9,6,5,9,7,3,5,2

jQuery:

$(".line").peity("line");

El resultado del código que coloque sería un pequeño gráfico de lineas representando perfectamente los valores que colocamos en el span.

Web: Peity

Rotación de contenidos con jQuery

jShowOff es un plugin jQuery que nos facilitara la tarea de hacer rotar contenidos de forma dinámica. Y si bien no deja de ser un slider similar a los tantos que ya recomendamos en Kabytes, este plugin cuenta con algunas características que lo convierten en una alternativa interesante.
La principal característica importante de este plugin es que trabaja con elementos mixtos a la hora de seleccionar los distintos paneles, podemos utilizar listas ul, li o directamente divs para diferenciar los distintos elementos a mostrar.
Ejemplo de rotación de contenidos con jShowOff:

El plugin ya viene preparado con una hoja de estilo para utilizar, esto también es favorable desde el punto de vista de la personalización, con tan solo modificar un poco el archivo CSS podremos obtener un slider de contenidos que se amolda perfectamente al diseño de nuestro sitio.
Ejemplo de utilización:

$('#features').jshowoff({ speed:1500, links: false }); });

Obviamente #features es el identificador de la caja donde se encuentran todos los elementos a desplegar.
Les recomiendo mirar un poco las opciones y posibles configuraciones que el plugin puede adoptar, también las distintas formas de implementación, por ejemplo podemos optar por una rotación de contenidos minimalistas, que no posee controles, ni efectos. Otra opción es una rotación pero mostrando en el margen inferior miniaturas.
Web: jShowOff

Scroll infinito con jQuery + Plugin WordPress

El scroll infinito se trata esencialmente de la carga de contenidos bajo demanda, actuando en relación a la posición de la barra de scroll del navegador. Esta precarga actualmente la podemos ver en varios sitios importantes, por ejemplo Facebook o Twitter.
Utilizar la metodología del scroll infinito puede ser interesante en casos como:

• El contenido es demasiado largo para mostrar inicialmente, por ejemplo en un post con muchos comentarios.
• Si el contenido se encuentra paginado. Por ejemplo en los resultados de una búsqueda, listas de productos, etc.
• Por cuestiones de usabilidad, si quieres evitar que el usuario deba clickear reiteradas veces en el botón “siguiente”

Implementar un scroll infinito no es completamente fácil, no obstante existe el plugin jQueryinfinite Scroll, que nos va a ayudar muchísimo en esta tarea.

$('#content').infinitescroll({

    navSelector  : "div.navigation",
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"
                   // selector for all items you'll retrieve
  });

Y una excelente noticia para los usuarios de WordPress, en el sitio oficial tenemos disponible en descarga directa un plugin para hacerlo funcionar con nuestro theme 
Lamentablemente no todo es color rosa, utilizar el scroll infinito tiene ciertas desventajas como se detallan en la web del plugin:

• El footer del sitio nunca será alcanzado, al menos no hasta que el contenido a cargar se agote.
• Actualmente no hay forma de cancelar el comportamiento de carga infinita.
• No hay enlace permanente disponibles para el estado de la pagina.
• Agregar contenido dinámico agrega uso de memoria a la pagina visualizada, y esto puede repercutir en el rendimiento del navegador.
• Analytics no ofrece seguimiento para la carga dinámica, no al menos de forma predeterminada, aunque se puede configurar para que lo haga, pero esto requiere un trabajo adicional.

El plugin es muy bueno, pero les recomiendo analizar muy bien si su implementación merece la pena para su sitio web.
Web: infinite Scroll

Efecto jQuery de vibrar y temblar

jRumble es un plugin jQuery que vibra, tiempo y gira cualquier elemento que seleccionemos. Es muy interesante su implementación a modo de efecto para controlar o bien, dirigir la atención del usuario a determinados elementos.
Dentro de las posibilidades de configuración están disponibles las opciones de controlar el rango X, Y, la velocidad, la rotación y finalmente, el evento por el cual queremos lanzar la animación.
Pueden ver las distintas demostraciones desde el sitio oficial del plugin.

Un simple ejemplo de configuración de este plugin podría ser:

$('#demo2').jrumble({
 rangeX: 10,
 rangeY: 10,
 rangeRot: 4
});

Muy simple verdad? 
Web: jRumble

Teclado virtual con jQuery

Muchas aplicaciones para evitar el ingreso de datos directamente desde el teclado por motivos de seguridad, utilizan un teclado virtual, lo interesante de esta metodología es que su implementación no es complicada, y gracias a plugins como Keyboard la instalación de un teclado virtual no lleva más de unos minutos.
La configuración del teclado es muy simple y aunque el plugin esta preparado para diversas configuraciones una típica seria la siguiente:

$(document).ready(function(){
$('.qwerty').keyboard({ layout: 'qwerty'});
});
El teclado virtual se vería de la siguiente manera:

En la documentación oficial pueden encontrar otras configuraciones posibles, algunas sirven para casos muy puntuales y funcionan restringiendo ciertas opciones del teclado.
Este teclado se lanza en el navegador de forma modal, algo interesante para por ejemplo, mostrar el teclado al hacer foco en un determinado elemento.
Web: Keyboard