PROYECTO PROGRAMACION WEB

MOOTOOLS Y SEXY LIGHTBOX

JEAN CARLOS MORALES

2009 - 2010

Que es MOOTOOLS?

Mootools es un conjunto de librerías, también llamado API, que proveen clases de programación orientada a objetos en Javascript, para realizar una amplia gama de funcionalidades en páginas web, como trabajo con capas, efectos diversos, Ajax y mucho más.

Con Mootools podemos programar todo tipo de scripts en el cliente rápidamente y sin preocuparnos de las distintas particularidades de cada navegador. Mootools está especialmente indicado para programar scripts complejos, que nos costaría mucho más trabajo de realizar si partiésemos de cero.

•Ligero: el framework no pesa demasiado en Kb y No tiene que cargar mucho el navegador.

•Modular: mootools se compone de diversos módulos y podemos seleccionar los que vamos a utilizar para incorporarlos en nuestras páginas web, dejando los otros para que no ocupen tiempo de descarga ni procesamiento.

•Libre de errores: podemos confiar en el sistema porque las herramientas de Mootools funcionan perfectamente, sin emitir errores en tiempo de ejecución.

•Soportado por una amplia comunidad: existen muchos desarrolladores que lo utilizan con éxito y han creado una serie de componentes adicionales ya listos para usar en nuestras páginas web, como calendarios, editores de texto, etc.

Mootools es gratuito y de código abierto, con licencia MIT, que permite usarlo y modificarlo en cualquier caso de uso.

La curva de aprendizaje de Mootools en el inicio resulta bastante complicada pero después de los primeros ejemplos es más sencillo.

http://www.desarrolloweb.com/articulos/primer-ejemplo-con-moontools.html

Sexy light box

-Desarrollado en base al framework de mootols para dar un estilo increíble a los enlaces, iframes,etc.

-Sexy lightbox es un clon mucho mas estilizado del clásico lighbox.

* Sexy LightBox - for mootools 1.2.3 * @name sexylightbox.v2.3.js * @author Eduardo D. Sada - http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2 * @version 2.3.3 * @date 30-Oct-2009 * @copyright (c) 2009 Eduardo D. Sada (www.coders.me) * @license MIT - http://es.wikipedia.org/wiki/Licencia_MIT * @example http://www.coders.me/ejemplos/sexy-lightbox-2/

Sexy light box

-Sexy lightbox es un clon mucho mas estilizado del clásico lighbox.-Desarrollado en base al framework de mootols para dar un estilo increíble a los enlaces, iframes,etc.

* Sexy LightBox - for mootools 1.2.3 * @name sexylightbox.v2.3.js * @author Eduardo D. Sada - http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2 * @version 2.3.3 * @date 30-Oct-2009 * @copyright (c) 2009 Eduardo D. Sada (www.coders.me) * @license MIT - http://es.wikipedia.org/wiki/Licencia_MIT * @example http://www.coders.me/ejemplos/sexy-lightbox-2/

Para que este efecto funcione en nuestra página web simplemente debemos incluir en nuestro header los siguientes: scripts, hojas de estilo y una implementación de función.

<script type="text/javascript" src="scripts/sexylightbox.v2.3.mootools.min.js"></script> <link rel="stylesheet" href="css/sexylightbox.css" type="text/css" media="all" /><script type="text/javascript"> window.addEvent('domready', function(){ SexyLightbox = new SexyLightBox({color:'black', dir: 'sexyimages'}); }); </script>En esta ultima lo que hacemos es decirle al navegador que cuando cargue.window.addEvent('domready', function(){

El framework Javascript Mootools define un evento que vamos a utilizar infinidad de veces. Este método se puede asociar al objeto window, para ejecutar acciones cuando el DOM ha sido cargado por completo y está listo para poder hacer cualquier tipo de acciones con él.

Cuando tenemos el DOM listo

SexyLightbox = new SexyLightBox({color:'black', dir: 'sexyimages'}); . Creamos una nueva instancia de SexyLightbox y le decimos que utilice la carpeta black que a su vez se encuentra en sexyimages.

Además dentro de cada uno de nuestro enlaces tenemos que poner el siguiente código el cual hace la llamada a la función anterior mencionada.

?TB_iframe=true&height=450&width=800" rel="sexylightbox“Con esto le decimos que es un iframe que tiene las dimesiones de 800(ancho) x 450(alto) y que pertenece a la clase ="sexylightbox"

Listado de los mas importantes frameworks javascript

Mootools: "El framework javascript compacto"

JQuery: "Librería Javascript para escribir menos y hacer más"

Prototype: "El framework javascript cuyo propósito es facilitar el desarrollo de aplicaciones dinámicas"

YUI: "The Yahoo! User Interface Library"

Dojo: "Experiencias grandes… para cualquiera"

Qooxdoo: "La nueva era del desarrollo web"

GWT Google Web Toolkit: "construye aplicaciones Ajax en lenguaje Java"

Rico: "Javascript para aplicaciones de Internet de contenido enriquecido"

Ext JS: "Documentación, diseño y código limpio"

FIN

GRACIAS