HNKweb

SmoothTabs es un sistema de navegación mediante pestañas basado en mootools y que permite realizar transiciones entre diferentes secciones con un efecto muy profesional.

Para usarlo tan solo tenemos que incluir el archivo en la cabecera de nuestro HTML:

Definir una lista con las distintas secciones a modo de menú:

Y luego en bloques que se ocultarán automáticamente introducimos el contenido para cada sección:

Luego tan solo tendrás que aplicarle los estilos visuales más apropiados para el proyecto.

He publicado una pequeña prueba a modo de ejemplo y en la página oficial dispones de un ejemplo usando el script HistoryManager, que permite usar las teclas de página anterior y siguiente para moverte por las pestañas visitadas.

Yo ya lo estoy incluyendo en mi próximo tema para el blog [que saldrá en breve].

SmoothTabs - Mootools based page transitions

MooFlow es una galería de imágenes realizada en javascript que simula el estilo del visor de carátulas de iTunes de Apple o el Finders CoverFlow™.

Inspirada en ImageFlow y usando las mootools como framework javascript, la nueva versión de esta galería viene con multitud de mejoras:

• Agrupa todas las imágenes dentro de un bloque.
• Se redimensiona automáticamente para ajustarse a la pantalla.
• Opción de ver la galería a pantalla completa.
• Desplazamiento por las imágenes con las flechas de dirección o la rueda del ratón.
• Opción de “autoplay” para pasar las imágenes a modo de presentación.
• Efecto “reflejo” generado por javascript.
• Carga de imágenes mediante un archivo HTML o una consulta JSON.
• Generación automática de la interfaz visual.
• Estilo basado completamente en CSS.
• Pueden ejecutarse múltiples instancias.

Permite además incluir un slimbox para visualizar las imágenes a tamaño completo haciendo doble click sobre ellas, y mostrar un tooltip con información ampliada al situar el ratón sobre la imagen.
Han preparado una página con varios ejemplos y una de documentación bastante completa.

MooFlow - Javascript based Gallery looks like Apple´s iTunes

Recientemente he subido la versión 1.2 de mi plugin mBox a los repositorios de Wordpress Extend.

Uno de los inconvenientes a la hora de programar plugins para Wordpress que usan archivos css o javascript es que esos archivos se tienen que incluir en la función de cabecera de Wordpress para que nos añada las llamadas en el head. En el plugin lo veríamos tal que así:
add_action('wp_head', 'nuestra_funcion');

Lo malo de esta llamada es que esos archivos se incluyen siempre, aunque en las entradas que estemos visualizando no se use nuestro plugin. Si estamos programando un plugin con una cantidad considerable de javascript, provoca un aumento de tiempo de carga de la web excesivo total para no ser utilizado.

En mi plugin he podido solucionar ese inconveniente haciendo uso del objeto Assets que nos ofrece el framework mootools.

Assets nos permite proporcionar una carga dinámica de imágenes, hojas de estilo y ficheros javascript. En mi caso, en la función de mi plugin, si se detecta la llamada a la galería, se inyectarán el archivo JS y el CSS necesarios.

Tan solo tendremos que crear un nuevo objeto Asset y llamar a su propiedad javascript, pasándole la ruta del archivo a incluir en la página y un identificador:
new Asset.javascript('/js/mbox.js', {id: 'mBox_script'});

Otro de los usos del objeto Asset de mootools, y puede que el más utilizado, es el método images. Images nos va a permitir hacer una pre-carga de un archivo de imagen y devolvernos el elemento img, pero sin inyectarlo en la página.
Este método dispone de las opciones onComplete y onProgress, permitiendo trabajar con el array de elementos img una vez cargados en el cache del navegador:
new Asset.images(['/images/001.png', '/images/002.gif'], {
onComplete: function(){ alert('se han cargado las imagenes!'); }
 });

Mootools Documentation: Assets.js

Por fin me han habilitado la cuenta en Wordpress Extend y os puedo presentar mi nuevo plugin.

mBox es un plugin que permite incluir presentaciones de imágenes en las entradas de Wordpress de una forma sencilla.

Captura y Características:

mBox usa las mootools y ha sido testeado en Firefox 2.x, Safari e Internet Explorer 7.

Una vez configurado, para visualizar la galería de imágenes tan solo hará falta añadir el siguiente código a la entrada [he habilitado un botón en el editor de WP]:
<mbox width="750" height="200" />

Puedes ver un resultado de como quedaría en mi entrada sobre el Disney Fantasyland de Annie Leibovitz que escribí recientemente.

Para más información y descarga puedes dirigirte a la página del proyecto en mi web o a su entrada en el Wordpress Extend.

MooTools Mocha UI es una clase para las MooTools que te permitirá generar ventanas flotantes redimensionables y, como usan la etiqueta canvas, no es necesario el uso de ninguna imagen para visualizarlas. Probadas en Firefox 2, Internet Explorer 6 y 7, Safari 2, y Opera 9.

sLedit es un editor enriquecido al estilo TinyMCE y que usa las MooTools para aplicarlo inline sobre los textareas de tu HTML.

Pamoorama es un script montado sobre MooTools que te permite mostrar tus fotografías panorámicas de forma atractiva, con un visor desplazable, con auto-scroll y configuración de velocidad. Tienes varios ejemplos en la web: ejemplo1, ejemplo2 y ejemplo3.

Pamoorama