Mootools Y Otros Frameworks JS

2,493 views
2,364 views

Published on

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

No Downloads
Views
Total views
2,493
On SlideShare
0
From Embeds
0
Number of Embeds
176
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mootools Y Otros Frameworks JS

  1. 1. Mootools y otros frameworks JS
  2. 2. Que es JavaScript? <ul><ul><li>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 . </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>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 . </li></ul></ul>
  3. 3. Que es un Framework? <ul><ul><li>Marco de trabajo </li></ul></ul><ul><ul><li>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. </li></ul></ul>
  4. 4. Porque usar un Framework? <ul><ul><li>Javascript Cross-browser: compatible con todos los navegadores </li></ul></ul><ul><ul><li>AJAX ( A synchronous J avaScript A nd X ML ) : XMLHttpRequest ( interfaz empleada para realizar peticiones HTTP y HTTPS a servidores WEB ) </li></ul></ul><ul><ul><li>Ventajas de ser un Framework </li></ul></ul>
  5. 5. Ejemplo de XMLHttpRequest sin Framework <ul><ul><ul><ul><li>if (window.XMLHttpRequest) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.xmlhttp = new XMLHttpRequest(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>if (this.xmlhttp.overrideMimeType) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.xmlhttp.overrideMimeType('text/xml'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>else if (window.ActiveXObject) { // IE </li></ul></ul></ul></ul><ul><ul><ul><ul><li>try { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.xmlhttp = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>}catch (e) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>try { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.xmlhttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} catch (e) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.xmlhttp = null; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.xmlhttp = new XMLHttpRequest(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>if (!this.xmlhttp){ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this.failed = true; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul>
  6. 6. Unos cuantos Frameworks <ul><ul><li>Mootools: &quot;El framework javascript compacto&quot; http://mootools.net/ </li></ul></ul><ul><ul><li>JQuery: &quot;Librería Javascript para escribir menos y hacer más&quot; http://jquery.com/ </li></ul></ul><ul><ul><li>Prototype: &quot;El framework javascript cuyo propósito es facilitar el desarrollo de aplicaciones dinámicas&quot; http://www.prototypejs.org/ </li></ul></ul><ul><ul><li>YUI: &quot;The Yahoo! User Interface Library&quot; http://developer.yahoo.com/yui/ </li></ul></ul><ul><ul><li>Dojo: &quot;Experiencias grandes… para cualquiera&quot; http://www.dojotoolkit.org/ </li></ul></ul><ul><ul><li>Qooxdoo: &quot;La nueva era del desarrollo web&quot; http://qooxdoo.org/ </li></ul></ul><ul><ul><li>GWT Google Web Toolkit: &quot;construye aplicaciones Ajax en lenguaje Java&quot; http://code.google.com/webtoolkit/ </li></ul></ul><ul><ul><li>Rico: &quot;Javascript para aplicaciones de Internet de contenido enriquecido&quot; http://openrico.org/rico/home.page </li></ul></ul><ul><ul><li>Ext JS: &quot;Documentación, diseño y código limpio&quot; http://extjs.com/ </li></ul></ul>
  7. 7. Más Frameworks <ul><ul><li>SproutCore </li></ul></ul><ul><ul><li>Spry </li></ul></ul><ul><ul><li>JavaScriptMVC </li></ul></ul><ul><ul><li>midori </li></ul></ul><ul><ul><li>Archetype JavaScript Framework </li></ul></ul><ul><ul><li>June Framework </li></ul></ul><ul><ul><li>UIZE </li></ul></ul><ul><ul><li>SimpleJS </li></ul></ul><ul><ul><li>Fleegix.js </li></ul></ul><ul><ul><li>The Foo Framework (un framework basado en Prototype): http://foo.riiv.net/ </li></ul></ul><ul><ul><li>script.aculo.us (también basado en Prototype): http://script.aculo.us/ </li></ul></ul><ul><ul><li>AJS (Framework Javascript ultraligero): http://orangoo.com/labs/AJS/ </li></ul></ul><ul><ul><li>ZK (Ajax web framework): http://www.zkoss.org/ </li></ul></ul>
  8. 8. Puntos a tener en cuenta cuando eliges un Framework js <ul><ul><li>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. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Módulos : los módulos nos permiten incluir solo las funcionalidades que deseamos, ahorrando en rendimiento. </li></ul></ul><ul><ul><li>Quién lo usa : el hecho de que sitios importantes usen un framework es un reconocimiento a su calidad. </li></ul></ul>
  9. 9. Cual elegir? <ul><ul><li>Funcionan diferente dependiendo del navegador y del sistema operativo (velocidad de selectores). </li></ul></ul><ul><ul><li>Ofrecen opciones diferentes (efectos, OO, plugins o módulos, …). </li></ul></ul><ul><ul><li>Los pesos varían dependiendo del Framework, y de los módulos que necesitemos. </li></ul></ul><ul><ul><li>No hay ninguno que eclipse a los demás. </li></ul></ul>
  10. 10. Por que Mootools? <ul><ul><li>Y por que no? No hay que cerrarse en banda, sinó probarlos todos. </li></ul></ul><ul><ul><li>No son solo efectos. </li></ul></ul><ul><ul><li>Es modular </li></ul></ul><ul><ul><li>Se lee como un libro </li></ul></ul><ul><ul><li>Va creciendo para ser relativamente joven </li></ul></ul><ul><ul><li>Facilidad de programar OO </li></ul></ul><ul><ul><li>Fácil creación de elementos (DOM) </li></ul></ul><ul><ul><li>Propio gestor de eventos (permite generar nuevos) </li></ul></ul><ul><ul><li>Tiene opciones que son muy fáciles </li></ul></ul><ul><ul><li>Y tiene plugins y extensiones para hacer lo mismo que cualquier otro Framework </li></ul></ul>
  11. 11. Descripción de Mootools <ul><ul><li>Core : colección de funciones de apoyo de las que hace uso el resto de components. </li></ul></ul><ul><ul><li>Class : es la librería base de MooTools para la instanciación de objetos </li></ul></ul><ul><ul><li>Natives : Colección de mejoras al objeto nativo JavaScript , añadiendo funcionalidades, compatibilidad y nuevos métodos que simplifican el código. </li></ul></ul><ul><ul><li>Element : multitud de mejoras y compatibilidades al objeto HTML </li></ul></ul><ul><ul><li>Utilities : utilidades: cookies, JSON, selectors, … </li></ul></ul><ul><ul><li>Fx: API avanzada para animar Elements </li></ul></ul><ul><ul><li>Request : proporciona una interfaz para peticiones XHR , Cookie y herramientas para JSON </li></ul></ul><ul><ul><li>Plugins </li></ul></ul>
  12. 12. Browser <ul><li>Features: </li></ul><ul><ul><li>Browser.Features.xpath - ( boolean ) True if the browser supports DOM queries using XPath. </li></ul></ul><ul><ul><li>Browser.Features.xhr - ( boolean ) True if the browser supports native XMLHTTP object. </li></ul></ul><ul><li>Engine: </li></ul><ul><ul><li>Browser.Engine.trident - ( boolean ) True if the current browser uses the trident engine (e.g. Internet Explorer). </li></ul></ul><ul><ul><li>Browser.Engine.gecko - ( boolean ) True if the current browser uses the gecko engine (e.g. Firefox, or any Mozilla Browser). </li></ul></ul><ul><ul><li>Browser.Engine.webkit - ( boolean ) True if the current browser uses the webkit engine (e.g. Safari, Google Chrome, Konqueror). </li></ul></ul><ul><ul><li>Browser.Engine.presto - ( boolean ) True if the current browser uses the presto engine (e.g. Opera 9). </li></ul></ul><ul><ul><li>Browser.Engine.name - ( string ) The name of the engine. </li></ul></ul><ul><ul><li>Browser.Engine.version - ( number ) The version of the engine. (e.g. 950) </li></ul></ul><ul><ul><li>Browser.Plugins.Flash.version - ( number ) The major version of the flash plugin installed. </li></ul></ul><ul><ul><li>Browser.Plugins.Flash.build - ( number ) The build version of the flash plugin installed. </li></ul></ul><ul><li>Platform: </li></ul><ul><ul><li>Browser.Platform.mac - ( boolean ) True if the platform is Mac. </li></ul></ul><ul><ul><li>Browser.Platform.win - ( boolean ) True if the platform is Windows. </li></ul></ul><ul><ul><li>Browser.Platform.linux - ( boolean ) True if the platform is Linux. </li></ul></ul><ul><ul><li>Browser.Platform.ipod - ( boolean ) True if the platform is an iPod touch / iPhone. </li></ul></ul><ul><ul><li>Browser.Platform.other - ( boolean ) True if the platform is neither Mac, Windows, Linux nor iPod. </li></ul></ul><ul><ul><li>Browser.Platform.name - ( string ) The name of the platform. </li></ul></ul>
  13. 13. Native y Element <ul><ul><li>ARRAY : Each , every , filter , clean , indexOf , map , some , associate , link , contains , extend , getLast , getRandom , include , combine , erase , empty , flatten , hexToRgb , rgbToHex </li></ul></ul><ul><ul><li>FUNCTION, NUMBER, STRING, HASH, EVENT </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>ELEMENT.EVENT, ELEMENT.STYLE, ELEMENT.DIMENSIONS </li></ul></ul>
  14. 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. 15. <ul><ul><li>$(‘nombre’) : recoge el elemento del DOM que tiene el id=“nombre” </li></ul></ul><ul><ul><li>$$(‘#listado li’) : recoge una colección de elementos li dentro del elemento con id=“listado” </li></ul></ul><ul><ul><li>$$(‘#listado’) : recoge una colección que contiene un elemento con id=“listado” </li></ul></ul><ul><ul><li>$$(‘body a’) : recoge una colección con todos los links del HTML </li></ul></ul>
  16. 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. 17. Más selectores <ul><ul><li>.getElement(); </li></ul></ul><ul><li>//selects the first child anchor within the element with the ID 'body_wrap' $('body_wrap').getElement('a'); </li></ul><ul><ul><li>.getElements(); </li></ul></ul><ul><li>//selects all children with the class 'special_anchor_class' within the element 'body_wrap' $('body_wrap').getElements('.special_anchor_class'); </li></ul><ul><ul><li>.getParent(); </li></ul></ul><ul><li>$('child_id').getParent(); </li></ul><ul><ul><li>$$('div:even'); $$('div:odd'); </li></ul></ul><ul><li><div>Even</div><!-- above example would select this element --> </li></ul><ul><li><div>Odd</div> </li></ul><ul><li><div>Even</div><!-- above example would select this element • </li></ul><ul><li><div>Odd</div> </li></ul><ul><ul><li>Selectors W3C CSS3 </li></ul></ul>
  18. 18. Arrays <ul><ul><li>.each(); </li></ul></ul><ul><ul><ul><li>$$('div').each( function () { alert('a div'); }); </li></ul></ul></ul><ul><ul><ul><li>['apple', 'banana', 'lemon'].each(function(item, index){ </li></ul></ul></ul><ul><ul><ul><li>alert(index + &quot; = &quot; + item); </li></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li>$A </li></ul></ul><ul><ul><ul><li>var myCopy = $A(myArray ); </li></ul></ul></ul><ul><ul><li>.getLast(); </li></ul></ul><ul><ul><li>.getRandom(); </li></ul></ul>
  19. 19. Funciones <ul><ul><ul><li>//Define simple_function as a function </li></ul></ul></ul><ul><ul><ul><li>var simple_function = function (param){ </li></ul></ul></ul><ul><ul><ul><li>alert(param); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>window.addEvent('domready', function () { </li></ul></ul></ul><ul><ul><ul><li>simple_function(‘DOM cargado’); </li></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul>
  20. 20. Eventos <ul><li>$('id_name').addEvent('click', function (){ </li></ul><ul><li>alert(‘click event'); </li></ul><ul><li>}); </li></ul><ul><ul><li>Mouseenter, mouseleave, keydown, keypress, keyup </li></ul></ul><ul><li>$('myTextarea').addEvent('keydown', function (event){ </li></ul><ul><li>if (event.key == &quot;k&quot;) { </li></ul><ul><li>alert(&quot;This tutorial has been brought you by the letter k.&quot;); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><ul><li>event.shift (bool), event.control, event.alt, event.wheel, … </li></ul></ul><ul><li>MooTools Docs - Plugins/Event </li></ul><ul><li>$('id_name').removeEvent('mouseleave', mouseLeaveFunction); </li></ul>
  21. 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. 22. Manipulando elementos <ul><ul><li>.get(); </li></ul></ul><ul><ul><ul><ul><li>$('id_name').get('tag'); // span </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Id, name, value, href, src, class, text, … </li></ul></ul></ul></ul><ul><ul><li>.set(); </li></ul></ul><ul><ul><ul><ul><li>$('id_name').set('href', 'http://www.google.com'); </li></ul></ul></ul></ul>
  23. 23. Mover elementos <ul><ul><li>.inject(); </li></ul></ul><ul><li>var myFirstElement = new Element('div', {id: 'myFirstElement'}); </li></ul><ul><li>var mySecondElement = new Element('div', {id: 'mySecondElement'}); </li></ul><ul><li>var myThirdElement = new Element('div', {id: 'myThirdElement'}); </li></ul><ul><li>myFirstElement.inject(mySecondElement); </li></ul><ul><ul><li><div id=&quot;mySecondElement&quot;> </li></ul></ul><ul><ul><li><div id=&quot;myFirstElement&quot;></div> </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li>myThirdElement.inject(mySecondElement, 'top'); </li></ul><ul><ul><li><div id=&quot;mySecondElement“> </li></ul></ul><ul><ul><li><div id=&quot;myThirdElement&quot;></div> </li></ul></ul><ul><ul><li><div id=&quot;myFirstElement&quot;></div> </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li>'top', 'bottom', 'after’ o 'before' </li></ul>
  24. 24. Estilos de los elementos <ul><ul><li>.setStyle(); </li></ul></ul><ul><ul><ul><ul><li>$('body_wrap').setStyle('background-color', '#eeeeee'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>$$('.class_name').setStyle('background-color', '#eeeeee'); </li></ul></ul></ul></ul><ul><ul><li>.getStyle(); </li></ul></ul><ul><ul><ul><ul><li>var styleValue = $('body_wrap').getStyle('background-color'); </li></ul></ul></ul></ul><ul><ul><li>.setStyles(); </li></ul></ul><ul><ul><ul><ul><li>$('body_wrap').setStyles({ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>'width': '1000px', </li></ul></ul></ul></ul><ul><ul><ul><ul><li>'height': '1000px', </li></ul></ul></ul></ul><ul><ul><ul><ul><li>'background-color': '#eeeeee‘ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>}); </li></ul></ul></ul></ul><ul><ul><li>.getStyles(); </li></ul></ul>
  25. 25. Bibliografía <ul><ul><li>30 Days of Mootools 1.2 </li></ul></ul><ul><ul><li>A MooTools Tutorial :: The &quot;Mootorial“ </li></ul></ul><ul><ul><li>Selectors W3C CSS3 </li></ul></ul><ul><ul><li>MooTools Docs </li></ul></ul><ul><ul><li>Demos </li></ul></ul>

×