mootools y sexyimages

1,654 views
1,565 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,654
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

mootools y sexyimages

  1. 1. PROYECTO PROGRAMACION WEB MOOTOOLS Y SEXY LIGHT BOX JEAN CARLOS MORALES 2009 - 2010
  2. 2. 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.
  3. 3. 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.
  4. 4. <ul><li>Ligero: el framework no pesa demasiado en Kb y </li></ul><ul><li>No tiene que cargar mucho el navegador. </li></ul><ul><li>Modular: mootools se compone de diversos módulos </li></ul><ul><li>y podemos seleccionar los que vamos a utilizar para </li></ul><ul><li>incorporarlos en nuestras páginas web, dejando los </li></ul><ul><li>otros para que no ocupen tiempo de descarga ni </li></ul><ul><li>procesamiento. </li></ul>
  5. 5. <ul><li>Libre de errores: podemos confiar en el sistema </li></ul><ul><li>porque las herramientas de Mootools </li></ul><ul><li>funcionan perfectamente, sin emitir errores en </li></ul><ul><li>tiempo de ejecución. </li></ul><ul><li>Soportado por una amplia comunidad: existen </li></ul><ul><li>muchos desarrolladores que lo utilizan con éxito y </li></ul><ul><li>han creado una serie de componentes adicionales </li></ul><ul><li>ya listos para usar en nuestras páginas web, como </li></ul><ul><li>calendarios, editores de texto, etc. </li></ul>
  6. 6. 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
  7. 7. 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/j avascript/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/
  8. 8. 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/j avascript/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/
  9. 9. 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=&quot;text/javascript&quot; src=&quot;scripts/sexylightbox.v2.3.mootools.min.js&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;css/sexylightbox.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> <script type=&quot;text/javascript&quot;> 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.
  10. 10. 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&quot; rel=&quot;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 =&quot;sexylightbox&quot;
  11. 11. Listado de los mas importantes frameworks javascript Mootools: &quot;El framework javascript compacto&quot; JQuery: &quot;Librería Javascript para escribir menos y hacer más&quot; Prototype: &quot;El framework javascript cuyo propósito es facilitar el desarrollo de aplicaciones dinámicas&quot; YUI: &quot;The Yahoo! User Interface Library&quot; Dojo: &quot;Experiencias grandes… para cualquiera&quot; Qooxdoo: &quot;La nueva era del desarrollo web&quot; GWT Google Web Toolkit: &quot;construye aplicaciones Ajax en lenguaje Java&quot; Rico: &quot;Javascript para aplicaciones de Internet de contenido enriquecido&quot; Ext JS: &quot;Documentación, diseño y código limpio&quot;
  12. 12. FIN GRACIAS

×