Mootools es un framework JavaScript que facilita el desarrollo de aplicaciones web dinámicas mediante la agrupación de funciones para manipular el DOM, manejar eventos, crear y modificar elementos, y más. Algunas ventajas de Mootools son que es modular, de código abierto, bien documentado y con una gran comunidad de desarrolladores que lo mantienen y mejoran.

1. Mootools y otros frameworks JS

2. Que es JavaScript? JavaScript es un lenguaje de programación interpretado , es decir, que no requiere compilación , utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C . Al igual que Java , JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia , si bien esta se realiza siguiendo el paradigma de programación basada en prototipos , ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad. Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM .

3. Que es un Framework? Marco de trabajo Son diseñados con el intento de facilitar el desarrollo de software, permitiendo a los diseñadores y programadores pasar más tiempo identificando requerimientos de software que tratando con los tediosos detalles de bajo nivel de proveer un sistema funcional.

4. Porque usar un Framework? Javascript Cross-browser: compatible con todos los navegadores AJAX ( A synchronous J avaScript A nd X ML ) : XMLHttpRequest ( interfaz empleada para realizar peticiones HTTP y HTTPS a servidores WEB ) Ventajas de ser un Framework

5. Ejemplo de XMLHttpRequest sin Framework if (window.XMLHttpRequest) { this.xmlhttp = new XMLHttpRequest(); if (this.xmlhttp.overrideMimeType) { this.xmlhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE try { this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try { this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { this.xmlhttp = null; } } if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') { this.xmlhttp = new XMLHttpRequest(); if (!this.xmlhttp){ this.failed = true; } } }

6. Unos cuantos Frameworks Mootools: "El framework javascript compacto" http://mootools.net/ JQuery: "Librería Javascript para escribir menos y hacer más" http://jquery.com/ Prototype: "El framework javascript cuyo propósito es facilitar el desarrollo de aplicaciones dinámicas" http://www.prototypejs.org/ YUI: "The Yahoo! User Interface Library" http://developer.yahoo.com/yui/ Dojo: "Experiencias grandes… para cualquiera" http://www.dojotoolkit.org/ Qooxdoo: "La nueva era del desarrollo web" http://qooxdoo.org/ GWT Google Web Toolkit: "construye aplicaciones Ajax en lenguaje Java" http://code.google.com/webtoolkit/ Rico: "Javascript para aplicaciones de Internet de contenido enriquecido" http://openrico.org/rico/home.page Ext JS: "Documentación, diseño y código limpio" http://extjs.com/

7. Más Frameworks SproutCore Spry JavaScriptMVC midori Archetype JavaScript Framework June Framework UIZE SimpleJS Fleegix.js The Foo Framework (un framework basado en Prototype): http://foo.riiv.net/ script.aculo.us (también basado en Prototype): http://script.aculo.us/ AJS (Framework Javascript ultraligero): http://orangoo.com/labs/AJS/ ZK (Ajax web framework): http://www.zkoss.org/

8. Puntos a tener en cuenta cuando eliges un Framework js Rapidez : los usuarios esperan agilidad a la hora de mostrar la página, da igual lo bien diseñada que esté o los efectos que muestren. Por ello es muy importante que el framework tenga buen rendimiento y que sea rápido. Tamaño del js : el tamaño es importante en dos aspectos: lo que tarda en cargarse en la página y el ancho de banda que consume. Yo añadiría que en los frameworks que te permiten seleccionar que componentes queremos añadir, solo seleccionemos los necesarios. A parte, siempre viene bien comprimir el js. Documentación : es como aprender un lenguaje nuevo, da igual que sepas Javascript, no se parecerá demasiado a lo que hayas usado anteriormente. Cuanto mejor esté documentado mejor. Comunidad : lo más importante de un proyecto open source es la comunidad que hay detrás de ella. Los miembros de la comunidad aportan ayuda, código, ejemplos y mucho más que nos facilitará el trabajo. Módulos : los módulos nos permiten incluir solo las funcionalidades que deseamos, ahorrando en rendimiento. Quién lo usa : el hecho de que sitios importantes usen un framework es un reconocimiento a su calidad.

9. Cual elegir? Funcionan diferente dependiendo del navegador y del sistema operativo (velocidad de selectores). Ofrecen opciones diferentes (efectos, OO, plugins o módulos, …). Los pesos varían dependiendo del Framework, y de los módulos que necesitemos. No hay ninguno que eclipse a los demás.

10. Por que Mootools? Y por que no? No hay que cerrarse en banda, sinó probarlos todos. No son solo efectos. Es modular Se lee como un libro Va creciendo para ser relativamente joven Facilidad de programar OO Fácil creación de elementos (DOM) Propio gestor de eventos (permite generar nuevos) Tiene opciones que son muy fáciles Y tiene plugins y extensiones para hacer lo mismo que cualquier otro Framework

11. Descripción de Mootools Core : colección de funciones de apoyo de las que hace uso el resto de components. Class : es la librería base de MooTools para la instanciación de objetos Natives : Colección de mejoras al objeto nativo JavaScript , añadiendo funcionalidades, compatibilidad y nuevos métodos que simplifican el código. Element : multitud de mejoras y compatibilidades al objeto HTML Utilities : utilidades: cookies, JSON, selectors, … Fx: API avanzada para animar Elements Request : proporciona una interfaz para peticiones XHR , Cookie y herramientas para JSON Plugins

12. Browser Features: Browser.Features.xpath - ( boolean ) True if the browser supports DOM queries using XPath. Browser.Features.xhr - ( boolean ) True if the browser supports native XMLHTTP object. Engine: Browser.Engine.trident - ( boolean ) True if the current browser uses the trident engine (e.g. Internet Explorer). Browser.Engine.gecko - ( boolean ) True if the current browser uses the gecko engine (e.g. Firefox, or any Mozilla Browser). Browser.Engine.webkit - ( boolean ) True if the current browser uses the webkit engine (e.g. Safari, Google Chrome, Konqueror). Browser.Engine.presto - ( boolean ) True if the current browser uses the presto engine (e.g. Opera 9). Browser.Engine.name - ( string ) The name of the engine. Browser.Engine.version - ( number ) The version of the engine. (e.g. 950) Browser.Plugins.Flash.version - ( number ) The major version of the flash plugin installed. Browser.Plugins.Flash.build - ( number ) The build version of the flash plugin installed. Platform: Browser.Platform.mac - ( boolean ) True if the platform is Mac. Browser.Platform.win - ( boolean ) True if the platform is Windows. Browser.Platform.linux - ( boolean ) True if the platform is Linux. Browser.Platform.ipod - ( boolean ) True if the platform is an iPod touch / iPhone. Browser.Platform.other - ( boolean ) True if the platform is neither Mac, Windows, Linux nor iPod. Browser.Platform.name - ( string ) The name of the platform.

13. Native y Element ARRAY : Each , every , filter , clean , indexOf , map , some , associate , link , contains , extend , getLast , getRandom , include , combine , erase , empty , flatten , hexToRgb , rgbToHex FUNCTION, NUMBER, STRING, HASH, EVENT ELEMENT: constructor , getElement , getElements , getElementById , Set , get , erase , match , inject , grab , adopt , wraps , appendText , dispose , clone , replaces , hasClass , addClass , removeClass , toggleClass , getPrevious , getAllPrevious , getNext , getAllNext , getFirst , getLast , getParent , getParents , getChildren , hasChild , empty , destroy , toQueryString , getSelected , getProperty , getProperties , setProperty , setProperties , removeProperty , removeProperties , store , retrieve , html , text , tag ELEMENT.EVENT, ELEMENT.STYLE, ELEMENT.DIMENSIONS

14. Eventos de window Casi siempre vamos a necesitar un disparador: window.addEvent( 'domready ', function() { // código que se ejecuta cuando el navegador tiene todo el HTML }); window.addEvent( 'load ', function() { // código que se ejecuta cuando el navegador tiene toda la página web descargada (HTML, CSS, imágenes, JS, Flash, …) });

15. $(‘nombre’) : recoge el elemento del DOM que tiene el id=“nombre” $$(‘#listado li’) : recoge una colección de elementos li dentro del elemento con id=“listado” $$(‘#listado’) : recoge una colección que contiene un elemento con id=“listado” $$(‘body a’) : recoge una colección con todos los links del HTML

16. Selectores selectors body div.example, div.note div[class|=dialog] div #title div[class!=made_up] body div h1#title div[class~=example] div p div #title div:not(.example) div > p ul.toc li.tocline2 p:contains(selectors) div + p ul.toc > li.tocline2 p:nth-child(even) div ~ p h1#title + div > p p:nth-child(2n) div[class^=exa][class$=mple] h1[id]:contains(Selectors) p:nth-child(odd) div p a a[href][lang][class] p:nth-child(2n+1) div, p, a div[class] p:nth-child(n) .note div[class=example] p:only-child div.example div[class^=exa] p:last-child ul .tocline2 div[class$=mple] p:first-child div[class*=e]

17. Más selectores .getElement(); //selects the first child anchor within the element with the ID 'body_wrap' $('body_wrap').getElement('a'); .getElements(); //selects all children with the class 'special_anchor_class' within the element 'body_wrap' $('body_wrap').getElements('.special_anchor_class'); .getParent(); $('child_id').getParent(); $$('div:even'); $$('div:odd'); <div>Even</div><!-- above example would select this element --> <div>Odd</div> <div>Even</div><!-- above example would select this element • <div>Odd</div> Selectors W3C CSS3

18. Arrays .each(); $$('div').each( function () { alert('a div'); }); ['apple', 'banana', 'lemon'].each(function(item, index){ alert(index + &quot; = &quot; + item); }); $A var myCopy = $A(myArray ); .getLast(); .getRandom();

19. Funciones //Define simple_function as a function var simple_function = function (param){ alert(param); } window.addEvent('domready', function () { simple_function(‘DOM cargado’); });

20. Eventos $('id_name').addEvent('click', function (){ alert(‘click event'); }); Mouseenter, mouseleave, keydown, keypress, keyup $('myTextarea').addEvent('keydown', function (event){ if (event.key == &quot;k&quot;) { alert(&quot;This tutorial has been brought you by the letter k.&quot;); }); }); event.shift (bool), event.control, event.alt, event.wheel, … MooTools Docs - Plugins/Event $('id_name').removeEvent('mouseleave', mouseLeaveFunction);

21. Crear elementos var newElementVar = new Element('div', { 'id': 'id_name', 'text': 'I am a new div', 'styles': { 'width': '200px', 'height': '200px', 'background-color': '#eee', 'float': 'left‘ } });

22. Manipulando elementos .get(); $('id_name').get('tag'); // span Id, name, value, href, src, class, text, … .set(); $('id_name').set('href', 'http://www.google.com');

23. Mover elementos .inject(); var myFirstElement = new Element('div', {id: 'myFirstElement'}); var mySecondElement = new Element('div', {id: 'mySecondElement'}); var myThirdElement = new Element('div', {id: 'myThirdElement'}); myFirstElement.inject(mySecondElement); <div id=&quot;mySecondElement&quot;> <div id=&quot;myFirstElement&quot;></div> </div> myThirdElement.inject(mySecondElement, 'top'); <div id=&quot;mySecondElement“> <div id=&quot;myThirdElement&quot;></div> <div id=&quot;myFirstElement&quot;></div> </div> 'top', 'bottom', 'after’ o 'before'

24. Estilos de los elementos .setStyle(); $('body_wrap').setStyle('background-color', '#eeeeee'); $$('.class_name').setStyle('background-color', '#eeeeee'); .getStyle(); var styleValue = $('body_wrap').getStyle('background-color'); .setStyles(); $('body_wrap').setStyles({ 'width': '1000px', 'height': '1000px', 'background-color': '#eeeeee‘ }); .getStyles();

25. Bibliografía 30 Days of Mootools 1.2 A MooTools Tutorial :: The &quot;Mootorial“ Selectors W3C CSS3 MooTools Docs Demos