Mootools, aparte de ofrecer un nutrido grupo de librerías para realizar efectos interesantes en Javascript, tiene una gentil comunidad de desarrolladores que crean componentes que se pueden utilizar en las páginas web que estemos realizando. Así que podemos beneficiarnos del esfuerzo de desarrollo de otras personas para realizar páginas con efectos impactantes rápidamente.

No vamos por ahora a explicar cómo poner en marcha estos componentes, sólo a comentarlos por encima y mostrar ejemplos. Tenemos una sección de DesarrolloWeb.com donde vamos a ir colocando distintos scripts, plugins y componentes realizados con mootools: Scripts Mootools.

Interfaz de pestañas

Si queremos utilizar en una página web una interfaz de pestañas, se ofrece un componente muy interesante en: MooTabs.

Este componente permite diversos tipos de pestañas con variados efectos y transiciones e incluso la obtención por Ajax de los contenidos de las diversas pestañas.

La instalación y configuración de las pestañas es sencilla, pero encontré un problema que identifico como incompatibilidad entre las versiones mootools 1.1 y la 1.11, porque si no utilizas la versión 1.1 no funciona.

Popup DHTML Slimbox

Con este componente podemos mostrar imágenes cuando un usuario hace un clic en una miniatura. Las imágenes se muestran con una especie de ventana emergente dinámica, que se ajusta a las dimensiones de la imagen. Además, el fondo se queda como grisaceo, en segundo plano.

Podemos conocer más del componente y verlo en marcha en su propia página web: http://www.digitalia.be/software/slimbox

Pase de diapositivas

Hay varios componentes de pase de diapositivas o efectos visuales sobre imágenes que van cambiando. Tal vez el más impactante y con mayores opciones de configuración sea el SmoothGallery.

El componente es tan espectacular como lo podría ser una animación en Flash, con la particularidad que sólo utiliza Javascript para su puesta en marcha (y HTML con CSS, por supuesto).

Podemos ver la página del componente donde tiene diversos demo con distintas funcionalidades y configuraciones: http://smoothgallery.jondesign.net/

Calendario o seleccionador de fecha

Otro componente muy útil es un calendario para seleccionar fechas, que permite escoger una fecha determinada visualmente. Nosotros tendríamos un campo fecha que al pulsarlo se mostraría un calendario del mes y año actuales. Podemos movernos por el calendario cambiando el mes y el año y luego pulsando cualquier día del calendario se seleccionaría esa fecha determinada.

Uno de los calendarios más atractivos visualmente que he visto es el que ofrecen en esta dirección: http://www.electricprism.com/aeron/calendar/

Conclusión

Como se puede ver, las interfaces y funcionalidades que se pueden hacer con Mootools son tantas como la imaginación nos permita concebir.

Lo que está claro por mi experiencia hasta estos momentos es que se necesitan bastantes conocimientos de Javascript, HTML y CSS para poner en marcha los componentes, pues aunque muchos de ellos funcionan de manera modular, están compuestos de varios archivos con distintos códigos que tenemos que saber incluir y utilizar en nuestras páginas. Algunos problemas que he encontrado yo:

• A veces existen problemas de versiones, porque los componentes utilizaban una versión distinta de Mootools que la que estamos utilizando nosotros
• Algunas veces la documentación es escasa.
• Si da un problema en un navegador es casi imposible revisar el código para tratar de arreglarlo.
• Una simple declaración de estilos CSS te puede tirar al traste todas las pruebas y hacerte perder horas de tu precioso tiempo.

Esto es lo que veo yo que tienen algunos de los componentes con los que he trabajado. Espero que este manual nos ayude a solucionar más rápidamente cualquier eventualidad, aunque por ahora este artículo simplemente quería mostrar un poco las cosas avanzadas que se pueden realizar con Mootools.

Una vez más recuerdo que en la sección de Scripts Mootools de DesarrolloWeb.com iremos publicando los componentes útiles que encontremos con Mootools.