El plugin automáticamente recorrera todo el contenido de nuestra página buscando las cabeceras (h1, h2, h3 …) y creando una lista de enlaces con sus anclas o anchors. Además nos añade un efecto de desplazamiento suave al hacer clic sobre estás anclas y también destacará en el menú la posición actual donde nos encontremos.

Un plugin sencillo, ideal para crear páginas de documentación, para faq’s o para contenido muy largo en general.

Para integrar el plugin en nuestra página simplemente bastará con incluir la librería de jQuery además del archivo jquery.toc.js e iniciar el plugin.

$('#toc').toc({
    'selectors': 'h1,h2,h3', //elements to use as headings
    'container': 'body', //element to find all selectors in
    'smoothScrolling': true, //enable or disable smooth scrolling on click
    'prefix': 'toc', //prefix for anchor tags and class names
    'highlightOnScroll': true, //add class to heading that is currently in focus
    'highlightOffset': 100, //offset to trigger the next headline
    'anchorName': function(i, heading, prefix) { //custom function for anchor name
        return prefix+i;
    }
});

A continuación solo nos queda darle algo de CSS al menú. Por ejemplo, para dejarlo tal y como se muestra en la documentación bastaría con:

#toc {
    top: 0px;
    left: 0px;
    height: 100%;
    position: fixed;
    background: #333;
    box-shadow: inset -5px 0 5px 0px #000;
    width: 150px;
    padding-top: 20px;
    color: #fff;
}

#toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#toc li {
    padding: 5px 10px;
}

#toc a {
    color: #fff;
    text-decoration: none;
    display: block;
}

#toc .toc-h2 {
    padding-left: 10px;
}

#toc .toc-h3 {
    padding-left: 20px;
}

#toc .toc-active {
    background: #336699;
    box-shadow: inset -5px 0px 10px -5px #000;
}

No se que utilidad más halla del efecto visual podemos sacarle a este plugin, pero me ha llamado la atención y lo comparto con ustedes.

// Codigo para redirigir al primer enlace encontrado
$('elemento').bind('click', function(){
    window.location = $('a:first', this).attr('href');
});

El problema es que no era un enlace real por lo que si hacíamos click central o Mayus + Clic por ejemplo para abrir el enlace en una nueva pestaña, no funcionaba.

Con SuperLink solucionamos esto ya que lo que hace es crear un elemento a posicionado de forma absoluta sobre el elemento con lo cual tenemos un enlace real.

Para usarlo, además de la librería agregamos la siguiente linea:

$('elemento').superLink('a:last');

Tiene algunos problemas como que por ejemplo no podemos usar el :hover del elemento ya que al situar un a encima este no vale de nada.

Aqui no suelo hablar de Mootools porque personalmente prefiero jQuery, pero este plugin, SimpleModal me ha sorprendido por su aspecto y funcionalidad.

Con SimpleModel podremos generar alertas, ventanas de confirmación o ventanas modales con cualquier contenido HTML como imágenes, vídeos, texto, etc. Además también podremos usar Ajax en ellas.

Otra ventaja es que el aspecto por defecto está muy bien logrado y es visualmente muy atractivo sin tener que modificar nada.

Como podemos ver en la demo de jwerty, por ejemplo, si apretamos Ctrl + Alt + Z, por ejemplo, descargamos el plugin.

Lo mejor de todo es que es realmente sencillo de usar:

jwerty.key('ctrl+shift+P', function () { [...] });
jwerty.key('⌃+⇧+P', function () { [...] });

Sencillo, ¿verdad?

Flexslider es un plugin jQuery que destaca por adaptarse al tamaño de la ventana tal y como podemos ver en la demostración.

El plugin es completamente gratuito e incluye animaciones de transición personalizables y otras opciones típicas de este tipo de plugins. Además es muy ligero (solo 5 kb reducido) y es compatible con Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, y IE7+ así como dispositivos móviles con iOS y Android.

Con jQuery podemos mejorarlos. Con el plugin Multiselect cambia el diseño y mejora la usabilidad de estos elementos.

Usando este plugin permitiremos al usuario seleccionar varios elementos usando solo el ratón. Además estos elementos se mostrarán en una lista teniendo la posibilidad de eliminarlos pulsando la x situada a la derecha.

En este caso me encuentro con jQuery Favicon Notifier, un plugin que te permite añadir notificaciones al favicon tal y como hace, por ejemplo, Gmail.

Te permite definir la posición del número en cuestión así como los colores de este, por ejemplo:

$.faviconNotify('/favicon.ico', 67, 'br', '#123456', '#ABCDEF');

Como vemos, le pasamos 5 parámatros:

1. Imagen del icono
2. Número
3. Posición del número. Puede ser tl que sería top-left, tr sería top-right o bl o br que serían bottom-left y bottom-right respectivamente.
4. Color del borde
5. … y color interno del numero.

Un plugin ligerito, sencillo y útil para añadirle funcionalidad a nuestro Favicon.

Como vemos en el web del plugin, este aún se encuentra en versión beta pero funciona y se puede usar.

$(document).ready(function() {
$('#forward').click(function() {
  $('#test').animate({
	translateX:'-=150',
	translateY:'+=150',
	scale:'+=2',
	rotateY: '+='+(2*Math.PI),
	rotateX: '+='+Math.PI,
	rotateZ: '+='+Math.PI
  },1500);
});  

$('#backward').click(function() {
  $('#test').animate({
	translateX:'+=150',
	translateY:'-=150',
	scale:'-=2',
	rotateY: '-='+(2*Math.PI),
	rotateX: '-='+Math.PI,
	rotateZ: '-='+Math.PI
  },1500);
})
});

El código anterior crea dos animaciones. Una al cliquear el elemento #forward que aumenta la imagen usando un efecto 3D. Y la otra, #backward, reduce la imagen usando el mismo efecto. Podemos ver este efecto en la web.

Lo que hace es comprobar el navegador (dispositivo) que usa el visitante para acceder a nuestra web. Si este se trata de un móvil sigue el siguiente proceso:

1. Detiene la carga de imágenes, vídeos, etc.
2. Carga los recursos que Mobilize necesita.
3. Y adapta el contenido para ser visto desde un móvil.

En la documentación podemos ver un ejemplo del resultado que podemos obtener.

Para instalar Mobilize.js en nuestra web tenemos varios métodos. Pero, si usamos WordPress lo muy sencillo. Simplemente tenemos que instalar el plugin oficial.

El resultado, como vemos en la imagen o en la demostración online, es muy bueno. Pero, además de mejorar el aspecto, se mejora la usabilidad ya que el área cliqueable aumenta mas allá del checkbox en si abarcando también el texto a la derecha.

Este plugin también ha sido probado en los navegadores más populares por lo que no nos debería de dar problemas.

Algunas de las ventajas de este plugin además de poder ordenar una tabla, es la opción de elegir varias columans de ordenación. También, el plugin detecta el tipo de datos que tiene cada columna para ordenar URL, IP’s, Fechas, entre otros, de mejor forma.

El código es bastante ligero por lo que no se notará apenas en el tiempo de carga de la página y además es compatible con todos los navegadores actuales y no tanto como: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ y Chrome.

Empezando

El uso del plugin es muy sencillo. Para empezar, como siempre, tenemos que incluir la librería jQuery y el plugin en sí.

Luego solo nos queda iniciarlo y indicarle la tabla.

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
); 

Esto será suficiente para iniciar el plugin. Si queremos, tenemos disponibles más opciones de configuración que podemos ver en la documentación.

Hay que tener en cuenta que es necesario que la tabla disponga de las etiquetas THEAD y TBODY, si no, no funcionará.

Para usarlo, en nuestra cabecera debemos de incluir la librería jQuery y el archivo de Fittext, además de iniciarlo e indicarle donde se aplicará.

Este plugin solo dispone de una opción de configuración que nos permite hacer que el tamaño del texto cambie en mayor o menor proporción o en menos.

$("#responsive_headline").fitText(1.2); // mas
$("#responsive_headline").fitText(0.8); // menos

Por medio de CSS es recomendable definir el ancho del texto como width:100% y si definimos un font-size este actuará como ancho máximo de la fuente.

Nos permite incluir tanto texto, como imagenes o vídeos y además podemos incluir explicaciones, elementos desplegables y miniaturas entre otras cosas. Poco más se puede pedir.

Lo bueno, además de la facilidad de programar una copia de seguridad y olvidarnos de estar realizándolas manualmente, es que podemos almacenar esta copia de seguridad en otro servidor FTP, en Amazon S3, Microsoft Azure (Blob), RackSpaceCloud, DropBox, SugarSync o mandarnos la copia vía email. Con lo cual el riesgo de perder la copia de seguridad se reduce.

Este plugin utiliza la API de Smush.it para reducir las imágenes lo más posible.

El funcionamiento es sencillo. Lo instalamos y cada imagen que subamos automáticamente de comprimirá reduciendo todo el espacio posible. Para reducir imágenes antiguas simplemente vamos a la Librería y pulsamos Smush.it now! para procesar esa imagen.

Esto se puede simplificar cambiando las fechas actuales por fechas relativas que directamente nos digan cuando fue publicada la noticia. Más sencillo y visual para el usuario.

Para ello tenemos el plugin, Date In a Nice Tone. Tras instalarlo deberemos de introducir la función <? wp_date_in_a_nice_tone(); ?>  en nuestro theme en el sitio en el que queremos que nos aparezca la fecha.

El plugin viene en ingles, pero podremos traducirlo editando un poco el código, es muy sencillo. Aún así para mayor comodidad os dejo mi traducción para descargar.