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

Muy al estilo .Mac Web Gallery, un sistema de galería web para imágenes y videos realmente impresionante, Sebastian Brink ha desarrollado una aplicación llamada qGallery.

Es muy simple de utilizar, solamente sube las imágenes a tamaño completo y un XML con los nombres de los archivos a un directorio. Luego añade el script y un div en una página web. La galería se monta automáticamente gracias a PHP.

Permite visualizar las imágenes como mosaico o como un carrusel, es decir, al estilo coverflow de las carátulas de Apple. Las miniaturas se visualizan con un reflejo inferior y su tamaño se puede controlar mediante una barra de desplazamiento. Al pulsar sobre una de ellas se muestra la imagen a tamaño completo al estilo Lightbox.

Es compatible con Safari 3.1, Firefox 2.x e Internet Explorer 7.

Igual me anote algunas ideas para mi fotoroom.

Vía: Ajaxian

qGallery - Galería de Imagenes con Prototype

Hace algún tiempo se puso de moda el protector de pantalla PolarClock de pixelbreaker. Para quien no lo conozca es un tipo de reloj que muestra las horas y días en forma de arcos que van aumentando de 0 a 360º en base a su valor.

Pues bien, como Gareth Evans se aburría un poco en casa y no tenía nada que hacer, decidió montarse un PolarClock en javascript. Y como le seguía sobrando el tiempo y es tan majo el chico, pues se preparó un estupendo tutorial donde muestra todos los pasos que siguió para programar el reloj.

Impresionante!!

PrototypeJS PolarClock by Gareth Evans

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

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.

Imaset es el nombre del plugin que ha desarrollado Alex Barros y del que acaba de liberar la versión 2.0 estable.

Lo que permite este plugin es controlar los efectos visuales de la imágenes que subas a Wordpress a la hora de escribir una entrada. Para ello, tras activarlo, te aparecerá un botón justo encima de la opción ‘Subir’. Cuando subas una imágen y pulses el botón, se abrirá un ventana en donde podrás añadirle dinámicamente una multitud de efectos a la imágen:

• Decoración
  • Sombra
  • Marco
  • Reflejo
  • Brillo
  • Perspectiva
  • Ondular
• Color
  • Invertir colores
  • Escala de grises
  • Sepia
  • Colorizar
• Efectos
  • Desenfoque suave
  • Desenfoque fuerte
  • Encontrar bordes

Una vez que generes la imágen deseada, puedes añadirla automáticamente al editor de la entrada.

Para poder utilizar este plugin, tu servidor debe soportar PHP 4+ y tener instaada la librería GD. Es compatible con Wordpress 2.x+.

Un plugin muy currado, fácil de usar y que dará mucho juego a tu blog. Pruébalo!

Imaset, Control Total sobre tus Imágenes de Wordpress