mootools y sexyimages
Upcoming SlideShare
Loading in...5
×
 

mootools y sexyimages

on

  • 2,205 views

 

Statistics

Views

Total Views
2,205
Views on SlideShare
2,192
Embed Views
13

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 13

http://www.slideshare.net 11
http://elescribidordejeancarlos.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

mootools y sexyimages mootools y sexyimages Presentation Transcript

  • PROYECTO PROGRAMACION WEB MOOTOOLS Y SEXY LIGHT BOX 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/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/
  • 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/
  • 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.
  • 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;
  • 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;
  • FIN GRACIAS