Mootools Y Otros Frameworks JS

Mootools y otros frameworks JS

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 .

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.

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

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;
}
}
}

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/

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/

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.

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.

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

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

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.

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

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, …) });

$(‘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

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]

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>
<div>Odd</div>
<div>Even</div><!-- above example would select this element •
<div>Odd</div>
Selectors W3C CSS3

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

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

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

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‘ } });

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

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="mySecondElement">
<div id="myFirstElement"></div>
</div>
myThirdElement.inject(mySecondElement, 'top');
<div id="mySecondElement“>
<div id="myThirdElement"></div>
<div id="myFirstElement"></div>
</div>
'top', 'bottom', 'after’ o 'before'

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();

Bibliografía
30 Days of Mootools 1.2
A MooTools Tutorial :: The "Mootorial“
Selectors W3C CSS3
MooTools Docs
Demos

Mootools Y Otros Frameworks JS

by ianmonge on Mar 17, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 103

Statistics

Mootools Y Otros Frameworks JS — Presentation Transcript

http://otroblogmas.com	94
http://www.slideshare.net	9