Bezerik » Traducciones

Moo.rd + Mootools = Amor

Bezerik — Mon, 05 May 2008 18:12:34 +0000

Tras el lanzamiento de la primera versión oficial de moo.rd, Riccardo Degni publica el nuevo Centro de Descargas donde encontrareis la última versión estable: Moo.Rd v1.3.

Articulo original : moo.rd + MooTools = Love
Autor: RD
Traducido por: Xavier Gómez

He añadido una nueva y sorprendente característica para el Centro de Descargas, que llegará tan pronto como este lista la nueva versión: la integración completa entre moo.rd y MooTools.

Respecto al tipo de compresión, ahora puedes decidir si incluir MooTools en la última secuencia de comandos o no. Además puedes escoger entre las dos versiones de MooTools. Las posibilidades de descarga son:

MooTools Needed: añade solo los componentes de MooTools necesarios por moo.rd. Esto no incluye plug-ins y otras cosas. Escogela si necesitas una versión lite del script, sin renunciar al núcleo.
MooTools Full: como dice la frase, este es el script íntegro de MooTools enpaquetado.
No MooTools: no incluye MooTools. Escogela si quieres construir una versión personalizada de MooTools, pero hay que tener cuidado con los componentes que se eligen!

El nombre final del script escogido en el Centro de Descargas se generará considerando tus opciones.

Si la web2.0 quiere dar a los usuarios la capacidad de personalizar completamente la página o la aplicación que deseen, esta nueva funcionalidad hace que el centro de descargas sea una completa característica web2.0!

Rompe con lo standard, descargas estáticas… Ahora puedes construir todas las versiones que necesites, con la seguridad de que todos los componentes necesarios se incluyen automáticamente de una forma elegante, ya que el centro de descargas va a hacer todo el trabajo por ti.

Cambios y novedades en Moo.rd

Bezerik — Fri, 11 Apr 2008 12:36:33 +0000

Después del lanzamiento de la primera demo oficial de Moo.rd, llegan más novedades. Echadle sino, un vistazo a los ejemplos de moo.rd.

Articulo original (en italiano): Cambiamenti ed evoluzioni
Autor: Cristiano
Traducido por: Xavier Gómez

Las últimas semanas han estado llenas de acontecimientos para el proyecto Moo.Rd. Noticias positivas y, lamentablemente negativas para el desarrollo de la nueva versión de nuestra biblioteca modular basada en Mootools.

La mala noticia está relacionada con el hecho de que Luciano Amodio, uno de los componentes de nuestro equipo, tuvo que dejar el proyecto por motivos personales: desde aqui le enviamos todo nuestro afecto, estima y nuestro deseo de que regrese lo antes posible para volver a trabajar con nosotros.

La buena noticia es que Richard Digno ha finalizado el nuevo sistema de descargas: el uso de esta herramienta permitirá a los “beta testers” descargar siempre la última versión de nuestro framework y además seleccionar solo los componentes que deseen.

La version de mootools sobre la qual estamos trabajando es la 1,2 beta 2. Cuando se publique la versión final de mootools se añadirán al sistema de descargas la capacidad de descargar completamente este framework o sólo los componentes necesarios para el buen funcionamiento de Moo.Rd.

Otra pequeña novedad desde un punto de vista puramente hedonista-gráfico es la decisión adoptada de mutuo acuerdo entre mi persona y Riccardo de dotar a la biblioteca de un auténtico “embalaje virtual” que puede identificar de forma exclusiva la distribución y, por qué no, la publicación de moo.rd.

Aquí el resultado final (con la inconfundible presencia de nuestra mascota Moocha)

Las últimas noticias ya se había comprobado al despliegue de algunos plugins (extensiones) para la plataforma de BlogEngine.NET, que permitirá el uso de algunas de las nuevas características en Moo.Rd. El calendario para el inicio del desarrollo está previsto con el lanzamiento de la primera versión definitiva del nuevo framework.

Moo.rd 1.3.1: La primera demo oficial

Bezerik — Thu, 10 Apr 2008 11:59:09 +0000

Si no teniamos bastante con Mootools, ya podeis echarle un vistazo a Moo.rd, una super ligera libreria Javascript basada en Mootools, modular, flexible y totalmente compatible con los Plugins de Mootools.

Hace tiempo que tenia que haver traducido esto artículo.

Articulo Original (en ingles): moo.rd 1.3.1: the first official demo
Autor: RD
Traducido por: Xavier Gómez

Ya esta aqui la primera demo oficial de la nueva versión de moo.rd. Aunque se trata de una versión beta, trae un nuevo, más potente y más coherente motor Customize (personalizar).

Actualmente, estas són las tres demos de moo.rd1.3.1beta Customize:

Las nuevas clases Custom.Alert y Custom.Confirm son modales, fijas, y pueden arrastrarse (drag&drop), al igual que las demás. Pero son Custom (personalizables), de modo que podemos darles nuestro propio estilo, elegir una superposición (realizados por la nueva clase Overlay Utility), hacer que aparezcan/desaparezcan con la transición fade, y muchos más.

Quiero tener el estilo de Apple, más el estilo de Windows, más mi estilo personal en la página: ¿misión imposible? ¡Con custom.Alerts y custom.Confirms es posible!

La nueva clase SmoothScrolling es útil para todas las necesidades de movimiento deslizante suave que necesitemos. Para ello se ha extendido la clase Fx.Scroll, aprovechandose de sus opciones, al igual que wheelStops. Además, podemos elegir qué anclas son afectadas y los parámetros Fx de los “efectos”.

Como utilizar las clases de Mootools

Bezerik — Thu, 14 Feb 2008 18:25:59 +0000

Articulo Original: MooTools Classes: How to use them
Autor: Valerio de http://blog.mootools.net/
TRaducido por: Xavier Gómez

Automóviles

Entonces, ¿Qué es una clase? Una clase es una fábrica de coches. Una fábrica que arroja un número infinito de automóviles.

Si tienes que hacer un viaje, y luego otro, y luego otro, probablemente utilizarás el mismo coche una y otra vez. Sólo si decides cambiar algo en tu coche, como por ejemplo el motor, o el color, o los materiales de los asientos, entonces, necesitarás un nuevo coche.

Hagamos un ejemplo fictício totalmente fuera de lugar, y imaginemos que compras un automóvil de la tienda de coches! Quiero decir que compraré un Smart:

var mySmartCar = new Car({model: 'smart'});

Ahora que tengo mi coche, aparcado en mi garaje virtual. Demos una un viaje virtual!

mySmartCar.goTo('Washington DC');

¡Ese viaje estuvo genial!, vayamos a la ciudad de Nueva York:

mySmartCar.goTo('New York');

Como puedes ver, estoy usando el mismo coche para ir a Washington DC y a la ciudad de Nueva York. Están geográficamente cerca, así que mi coche Smart será suficiente. ¿Qué sucederá si tengo que cruzar Rusia que es un país frio? Necesitaré otro coche, un coche más grande y poderoso. Eso es exactamente cuando debo utilizar “new” otra vez.

var myBigCar = new Car({model: 'Jeep'});

Una vez creado, utilizemoslo:

myBigCar.goTo('Russia').goTo('China');

No pensava que ir a China fuese tan fácil.

Clases

En MooTools tenemos clases para realizar diferentes tipos de acciones. Tenemos clases que tratan los datos (Request) o clases que muestran efectos visuales (Fx) y muchos más de los que no voy hablar hoy aquí.

Fx.Morph, por ejemplo, es tu fábrica y por lo tanto, Fx.Morph hace coches. Vamos a comprar un coche ahora: Quiero un coche que tenga una duración de 1000 ms, y quiero que quede vinculado al elemento HTML llamado “element”:

var myMorph = new Fx.Morph(element, {duration: 1000});

Ahora tengo un coche, que nosotros llamamos Instance. Vamos a utilizarlo para cambiar la altura y anchura a 200 para el elemento previamente creado:

myMorph.start({height: 200, width: 200});

Nada más fácil.
En estos días, veo el mismo error que se comete una y otra vez: La gente compra un automóvil, y hacen un solo viaje con él:

new Fx.Morph(element, {duration: 1000}).start({height: 200, width: 200});

Normalmente, esto se atribuye a un evento de click, que hace las cosas aún peor:

element.addEvent('click', function(){    new Fx.Morph(this, {duration: 1000}).start({height: 200, width: 200});

});

Bueno, esta no es la forma de vida de como MooTools funciona! Al igual que en la vida real, no hay necesidad de comprar un coche en cada viaje que realizas, a menos que desees cambiar significativamente las propiedades de este coche. Este enfoque de usar y tirar es erróneo en muchos sentidos.

En primer lugar, es ineficiente en el uso de la memoria, ya que se instancia una nueva clase cada vez que se hace click en el botón. En segundo lugar, es también ineficiente en velocidad, ya que se llama al constructor de la clase cada vez que se hace click en el botón. En tercer lugar, la utilización de este enfoque hace imposible aprovechar las ventajas de las propiedades de la Instancia.

En la Clase Fx hay una serie de propiedades y controles que existen para ver si el efecto está en ejecución, y una serie de opciones que puedes definir para determinar el comportamiento de las posteriores llamadas de arranque si anteriormente ya existía uno en ejecución.

Esta es la forma de escribir correctamente el ejemplo anterior:

var myMorph = new Fx.Morph(element, {duration: 1000});element.addEvent('click', function(){

myMorph.start({height: 200, width: 200});

});

De esta manera, creamos la Instancia una sola vez, y ¡se vuelve a reutilizar cada vez que el usuario hace click en el botón! No se estropeará el efecto por la culpa del abuso de varios clicks, y nuestro OCD tendrá un descanso.

Ocurre lo mismo con la Solicitud de clases. ¿Qué ocurre si envio la misma petición varias veces? ¿Debería cancelar la última? ¿Debería enviar ambos? ¿Debería ponerlos en cola?

Si no utilizas correctamente los instanciaciones de las clases, cada vez se hará una nueva solicitud. Lo mismo sucede con Fx: un nuevo fx en el mismo elemento se iniciará al mismo tiempo, y básicamente solo conseguirás estropear toda la animación.

MooTools no es Script.aculo.us

Este enfoque de “usar y tirar” se utilizó (y sigue siendo utilizado) en Script.aculo.us.

Como un usuario novato de scriptaculous, siempre luché con el problema de “iniciar múltiples llamadas (instanciaciones)”, y más a menudo que yo debía, tome ventaja en la opción de onComplete (afterFinish, en Script.aculo.us) para establecer flags, y verificarlas luego en mis eventos de click, a fin de evitar las ejecuciones múltiples en el mismo tiempo.

Esta es exactamente la razón por la que decidí escribir mi propia biblioteca de efectos, llamado moo.fx (que posteriormente se convertiría en MooTools), de modo que podrían utilizar las clases – y de sus istanciaciones, como objetos reutilizables.

Esto no es para criticar el enfoque de Script.aculo.us. Dado que la biblioteca está diseñada para funcionar de esa manera, que es exactamente la forma en la que debe administrarse. MooTools sin embargo, no está diseñado para trabajar de esta manera, y el uso de este con el mismo modo que Script.aculo.us es un error.

¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento

Bezerik — Mon, 28 Jan 2008 22:20:00 +0000

Articulo original (en ingles): What’s New in 1.2: Element Storage
Autor: Tom de http://blog.mootools.net
Traducido por: Xavier Gómez

Otra característica nueva que se ha incorporado en la última versión de MooTools es el Element Storage (elemento de almacenamiento). Este artículo describe el uso de esta gran novedad, así como la razón por la que se desarrolló, y cómo se puede utilizar para mantener tus aplicaciones organizadas y eficientes.

¿Qué es todo esto del elemento de almacenamiento?

El desarrollo de aplicaciones avanzadas de JavaScript, es a veces beneficiosa para asociar atributos o propiedades adicionales a los elementos DOM. Los quales siempre hemos sido capaces de utilizar como contenedores para el almacenamiento de todo tipo de datos, aunque esta técnica genérica tiene algunos inconvenientes. Si bien los problemas asociados a esta técnica son casi exclusivamente los problemas causados por Internet Explorer, que sin embargo, deben ser tratados.

Observemos el siguiente ejemplo sencillo:

var element = $('myElement');
element.effectInstance = new Fx.Tween(element, 'color');
element.customProperty = 'someProperty';

element.effectInstance;
//the Fx.Tween instance
element.customProperty;
//'someProperty'

Como sabemos, a IE no le gusta cuando los objetos se almacenan como atributos de Elemento, y la propiedad effectInstance se fuga si no es administrado manualmente. Otro de los problemas que hemos visto es que cuando se accede a innerHTML de cualquier elemento padre de nuestro elemento, IE devolverá propiedades simples (como strings, números, etc) junto con las propiedades esperadas. Esto significa que customProperty sería copiado, lo que podría plantear un problema si fuese el único atributo personalizable. Es evidente que de los dos casos, la gestión de memoria es nuestro mayor problema en este punto, pero ambas son cuestiones a considerar.

¿Que es lo que va hacer Moo?

MooTools se utiliza para almacenar eventos y atributos personalizados directamente en las propiedades de los elementos llamados $events y $attributes. MooTools separa manualmente las propiedades de estos elementos de la descarga de la página.

Echemos un vistazo a nuestro ejemplo anterior, esta vez el almacenamiento de los elementos se halla en la variable $attributes

var element = $('myElement');
element.$attributes.effectInstance = new Fx.Tween(element, 'color');
element.$attributes.customProperty = 'someProperty';

element.$attributes.effectInstance;
//the Fx.Tween instance
element.$attributes.customProperty;
//'someProperty'

En este ejemplo no se producen fugas o los efectos adversos del primera ejemplo, pero ¡no es aconsejable utilizarlo! También, a veces, se cuelga el navegador alahora de descargar, tratando de borrar todas esas cosas. De todos modos este estilo de código no encaja con el resto de MooTools, por lo que hemos propuesto una solución mejor.

Cuando accedemos a un elemento, queremos ser capaces de almacenar y recuperar las propiedades de los elementos. Pero, ¿por qué atribuir estas propiedades directamente al elemento? Si se utiliza alguna forma de almacenamiento externo, no tendríamos que preocuparnos por la limpieza de los valores al descargar la página, las cosas irían más rápido, y las fugas de memoria serían una cosa del pasado.

Una solución digna de MooTools

Element.Storage es totalmente nuevo en MooTools 1.2. Es básicamente un Hash externo que almacena todas las propiedades y eventos personalizados para cada uno de los elementos con los que interactúa.
Echemos otra mirada a nuestro ejemplo anterior, esta vez utilizando el nuevo Element.Storage API:

var element = $('myElement');
element.store('effectInstance', new Fx.Tween(element, 'color'));
element.store('customProperty', 'someProperty');

element.retrieve('effectInstance');
//the Fx.Tween instance
element.retrieve('customProperty');
//'someProperty'

Tenga en cuenta que los eventos y las acciones ya no se asignan directamente a los Elementos. Todo se almacena en el Hash exterior, y administrado por MooTools, así que como desarrollador ya no tienen nada de qué preocuparse.

Cómo funciona (y para que lo estamos utilizando)

Para aquellos que estén interesados, les animo a que echen un vistazo al código fuente. En el fondo, todos los elementos que interactúan o se utilizan cuando se trabaja con MooTools reciben un número de identificación único (ID). Esta identificación que, en realidad, esta adjunta al elemento, luego sirve como clave (key) en el Element.Storage Hash.
Queremos que MooTools sea lo más rápido posible, por lo que hacemos un montón de memoization. En el fondo, la idea es no crear algo hasta la primera vez que sea necesario, pero luego cachearlo para su inmediato uso posterior. Muchos de ustedes ya han probado las versiones beta de MooTools 1.2 y se han divierto con el nuevo Elemento shortcuts. Todos estos shortcuts utilizan la nueva API de almacenamiento para hacer las cosas tan fluidas y eficientes como nos es posible.

Ejemplos avanzados

Elemento:retrieve actualmente acepta un segundo parámetro opcional que actuará como el valor por defecto para almacenar otro valor si no existe previamente. A continuación, recuperamos el valor tal y como se esperaba.

$('myElement').retrieve('defaultValue', 'Some Default Value');
//stores and returns 'Some Default Value' if the key doesn't previously exist

Además, muchos usuarios han preguntado por el namespacing del Elemento de almacenamiento. Hemos respondido diciéndoles que esto actualmente ya permite eso desde el momento en que se puede almacenar objetos y Hashes. Veámos el siguiente ejemplo.

var element = $('myElement');
var data = element.retrieve('galleryData', {});
data.id = 16;
data.source = '/images/16.jpg';
data.title = 'Some Title';
//later
$('myElement').retrieve('galleryData');
//{ id: 16, source: '/images/16.jpg', title: 'Some Title' }
$('myElement').retrieve('galleryData').id;
//16

Las posibilidades son infinitas. Nos encantaría conocer que a todo el mundo le gusta esta nueva función, así como la manera en que la usan en sus aplicaciones. ¡En mi próximo artículo hablaré un poco más sobre cómo MooTools utiliza el elemento de almacenamiento Element Storage para todos los impresionantes nuevos elementos shortcuts como por ejemplo Element:highlight!

– Ciao for now!