MOOTOOLS – PARTE I – INTRODUCCION

Actualmente contamos con muchas opciones al momento de elegir una librería o framework Javascript que nos ayude y facilite la creación de aplicaciones Web 2.0. Estos frameworks  nos ayudan a crear animaciones e interactividad con el usuario la cual ofrece una mejor experiencia y facilidad de uso de nuestras aplicaciones así como también las hace más atractivas y vistosas.

En este post hablaré sobre uno de los frameworks que más me ha gustado y que actualmente uso en todos mis nuevos desarrollos, estoy hablando de Mootools.

Mootools es un muy potente framework de trabajo orientado a objeto, desarrollado en Javascript, el cual nos permite crear aplicaciones Web muy dinámicas y con un diseño único, atractivo, interactivo y muy web 2.0.

Al ser una librería escrita en Javascript, es muy sencilla de utilizar y no requiere ningún componente extraño adicional para funcionar, simplemente la incluimos en la página en la que vamos a usarla y la usamos. Eso es todo. Además es compatible con todos los más importantes navegadores actuales permitiendo así olvidarnos un poco del problema de siempre… ver como funciona en un IE6… además ya existen muchísimos plugins como los que hemos tratado en otros artículos por ejemplo MoodalBox, entre otros…

Usando MooTools – Primer acercamiento.

Primero debemos descargar la librería de http://mootools.net/download, en esta página nos ofrece descargar la librería con solo los componentes que requerimos en nuestro desarrollo, esto lo hace con el fin de quitar los componentes que no usaremos y así hacerla aun más liviana de lo que ya es. En nuestro caso seleccionaremos todos los módulos y así poder probar todo lo que necesitamos utilizar.

NOTA: Para efectos de desarrollo es bueno usar la librería completa y luego cuando pasemos a producción podemos usar una versión reducida con solo lo que se necesita.

Ahora solo debemos incluirla en la ruta de nuestro proyecto, y luego en la página o páginas que necesitamos.

<script type=»text/javascript» src=»js/mootools.js»></script>

Recomendación: Al descargar el archivo de la librería queda con un nombre largo tipo mootools-release-x.xx.js.txt, recomiendo que lo renombremos con un nombre más corto como por ejemplo mootools.js.

Cuando la página carga todo su contenido, excepto imágenes esta en un estado llamado domready, y cuando ya ha cargado las imágenes se llama load.

En este caso usaremos el domready para poder ejecutar nuestros ejemplos.

Recodemos que para probar los ejemplos el código JavaScript hay que ponerlo en el head dentro de una función que se ejecute en el momento que la página cargue. Es decir en domready

Ejemplo:

window.addEvent(‘domready’,function(){ // mootools ejecuta cuando pagina esta en estado ready

// CODIGO JS MOOTOOLS

});

Bueno, esto es todo en esta primera parte, pronto publicare una segunda parte con mas detalles y explicando la estructura a usar en un desarrollo usando mootools, por ahora les dejo algunos links con ejemplos de cosas hechas con mootools que igual pueden servirnos para hacer nuestros sitios mas atractivos y funcionales y de paso ir aprendiendo lo básico para usar mootools.

links Ejemplos:

http://demos.mootools.net/

http://ceslava.com/blog/los-mejores-41-ejemplos-del-uso-de-la-libreria-mootools-ajax/

http://www.ajaxman.net/476/video-usando-ajax-y-aspnet/

pd. Pido escusas por la demora en publicar ya que he tenido problemas de conexión a internet entonces no he tenido mucho tiempo para reportar en ninguno de los blogs. espero pronto publicar la segunda parte y dejarla mas completa. gracias por el apoyo.

DG.

PARTE II – addEvent