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

Con tanta gente hablando sobre declarar la guerra al navegador Internet Explorer de Microsoft, he aprovechado para actualizar y subir a los repositorios de Wordpress Extend mi plugin NoIE.

NoIE lo único que hace es simular en la parte superior de la pantalla una barra de alerta de seguridad al entrar en el blog con una versión del navegador Internet Explorer. Al hacer click en esta barra se visualiza un documento comentando en detalle los problemas del IE.

Así que si estais hartos de llenar el CSS con hacks para que las webs se vean correctamente en el navegador de Microsoft pero piensas como la gente de kabytes que, como yo, creen que prohibir no es la solución, pues súmate a la causa y monta el plugin!

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

Me han gustado los dos primeros puntos del nuevo curso al que me he matriculado de Desarrollo de Aplicaciones de Escritorio en servidores Web con Ajax.

1. Abrir el Internet Explorer… y bajarse el navegador Mozilla Firefox.
2. Descargas las extensiones WebDeveloper y Firebug.

Sin duda es un muy buen comienzo…

Con el 98% de trabajo completado, creo que es un buen momento para poner en fase de producción mi nuevo tema uve3.

Conservando mucho del estilo anterior, he querido montar un tema de una sola columna con un bloque de opciones extenso al pie de la página. Escrito completamente desde cero, ahora me tocará revisar los archivos CSS para hacer un poco de limpieza y optimización. He intentado no optimizar tema lo máximo posible, evitando el uso de imágenes innecesarias para que la carga de la página no se vea perjudicada.

Para montar el tema he usado:

• MooTools para efectos de desplazamiento y búsqueda dinámica.
• Silk Icons, Social Bookmark Iconset y Tango Icon Library para las imágenes.
• Social Wallpapering para las imágenes de la cabecera (sí, hay varias que iré rotando)
• JS Quicktags para los botones de etiquetas HTML en los comentarios.

Y le he activado a Wordpress los plugins:

• Compact Monthly Archive para el listado de meses por año.
• flickrRSS para mostrar mis fotos más recientes de flickr.
• LCG para los últimos comentarios.
• Twitter for Wordpress para mostrar el último mensaje de twitter.

En cuanto remate los flecos pendientes de este tema prometo ponerme con mi anterior tema, fenix, para estandarizarlo y publicarlo para su uso. [si, es algo que tengo pendiente desde hace unos meses]

Por supuesto decir que he pensado el tema para ofrecer al usuario una claridad y sencillez a la hora de navegar por la web y acceder a los contenidos, si veis que algo falla o se puede mejorar no dudeis en poner vuestras sugerencias en los comentarios de esta entrada.

Como curiosidad final os publico el comienzo de este tema, el boceto a mano hecho en cama un día de sonambulismo: