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!

• Mootools creara un directorio de Plugins
• ¡MooTools 1.2 ya ha sido publicado!
• jTools, el nuevo nombre para MooTools
• Ya ha sido publicado moo.rd 1.3.1
• Moo.rd + Mootools = Amor
• Personaliza tus checkboxes y radio buttons con MooForms
• Cambios y novedades en Moo.rd
• Moo.rd 1.3.1: La primera demo oficial
• Como utilizar las clases de Mootools

Tras el éxito internacional que tuvo la compañia alemana 1and1 en America, Alemania, Francia y Reino unido como líder en alojamiento web y registro de dominios a escala mundial. La empresa creada en 1998 decidió expandirse en nuestro país a traves de su promoción “Pack de bienvenida” (alojamiento web + dominio .es gratuito durante dos años) que fue lanzado a mediados de 2007 y que tuvo como fecha límite el 31 de Octubre. Tras una primera ampliación hasta el 31 de diciembre (fin de año de 2007) y recibir un gran número de registros. Han decidio lanzar una segunda ampliación de la oferta hasta el 31 de enero de 2008.

Así que, si perdistes la primera ocasión aprovecha esta nueva oportunidad, sin compromiso de permanencia, para poder tener un hosting excelente durante dos años.

¿No crees, que vale la pena?

Trozo del e-mail recibido de 1and1.es:

Dominio .es GRATIS hasta el 31 de enero: ¡Ampliamos la fecha límite!

Para todos nuestros Clientes del Pack Bienvenida, que NO hayan registrado aún el dominio gratuito .es, queremos darles otra gran noticia…

Todavía pueden registrar GRATIS su dominio .es HASTA EL 31 DE ENERO DE 2008 y disfrutar de su página web gratuitamente durante 2 años.

Con nuestra campaña de ayuda al registro de dominios .es, hemos alcanzado un nuevo reto en el mundo del Web Hosting del que queremos que usted también sea partícipe.

No puede haber otro momento mejor para formar parte del éxito de 1&1.

• phpBB3 ya esta en la calle!

Para todos aquellos que necesitéis ordenar, optimizar y limpiar hojas de estilo, os presento la herramienta on-line Clean CSS. ¡Creedme!, os puede facilitar mucho vuestro trabajo.

Antes de utilizar esta herramienta, vuestro código CSS tiene que estar bien formado. Esta herramienta no corrige fallos (no es un validador). Para aseguraros de que vuestro código es válido, utilizad el W3C Validator.

Clean CSS nos permitirá personalizar muchas opciones, entre ellas están: ordenar las propiedades, ordenar los selectores, comprimir colores, comprimir font-weight, mantener los comentarios, eliminar propiedades inválidas dependiendo de la versión de CSS, etc. Cabe destacar sobre todas ellas el aspecto final de nuestra hoja de estilos, es decir, el grado de compresión del archivo CSS, que dependerá (en gran medida) del aspecto/formato que tenga. Por ejemplo, no es lo mismo este aspecto compacto:

body,h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

que este otro, mucho mas claro y espaciado:

body,h1,h2,h3,h4,h5,h6
{
 margin:0;
 padding:0;
}
h1,h2,h3,h4,h5,h6
{
 font-size:100%;
 font-weight:400;
}

Aunque podemos escoger entre los siguientes aspectos/formatos predefinidos:

• Highest (no readability, smallest size)
• High (moderate readability, smaller size)
• Standard (balance between readability and size)
• Low (higher readability)
• Custom (enter below)

Como no acababa de gustarme ninguno, opte por personalizar uno propio que es bastante parecido a la opción Standard y que a continuación os dejo. Para utilizarlo debéis seleccionar la opción “custom” y pegarlo en el textarea posicionado arriba a la derecha :

<span class="at">|</span> <span class="format">{</span>
|<span class="selector">|</span> <span class="format">{</span>
|    <span class="property">|</span><span class="value">|</span><span class="format">;</span>
|<span class="format">}</span>|
|
<span class="format">}</span>
||</span> <span class="format">{</span>
|

Finalmente, una vez halláis optimizado vuestro código CSS, veréis los resultados que hablan por si solos.

[errores 136]
Input:67.981KB, Output:55.608KB
Compression Ratio:18.1% (-12333 Bytes)

¿Que os parece esta herramienta?, ¿Conoceis alguna mejor?

• No existen artículos relacionados.

A los que ya conoceis este software, comunicaros que el equipo de Zatto España, ha anunciado a todos sus subscriptores mediante el siguiente e-mail (adjunto al final de este escrito), que por motivo de estas fechas navideñas, ha augmentado su oferta con los siguientes nuevos canales:

• Aragón Sat: Canal autonómico de Aragón.
• TVC Internacional: Emisión internacional del canal autonómico de Catalunya.
• TVG Europa (a partir de enero).
• Popular TV: Canal de información y entretenimiento enfocado en la
  familia.
• Canal Parlamento.
• The Poker Channel (en inglés): Todo sobre el póker.
• Bloomberg TV (en inglés, a partir de enero): Uno de los canales de
  noticias financieras más prestigiosos del mundo.

Pero no todo son buenas noticias, ya que TVE ha cerrado el grifo, y ha pedido que interrumpan la retransmisión de Teledeporte y Canal 24 Horas. Aún asi, a seguir disfrutando de la tele alla donde esteis!

por cierto, os habeis fijado que utilizan phplist como newsletter?

from Zattoo News <news@zattoo.com>
subject YA VIENEN LOS REYES…

Los Reyes Magos se han adelantado un poco y han pasado por Zattoo para
dejarnos algunos canales nuevos. Será porque quieren que ya los
disfrutéis durante las vacaciones de Navidad? Este es su regalo:

- Aragón Sat: Canal autonómico para todos los mañicos y cualquiera que
se sienta jotero…
- TVC Internacional: la televisió en català. Ja pots veure
«Polònia» allà on vulguis
- TVG Europa (a partir de enero): Se tés morriña ou estás enganchado ao
Luar, para ti a Galega.
- Popular TV: Canal de información y entretenimiento enfocado en la
familia.
- Canal Parlamento: De acuerdo… no es “House”, pero con las
elecciones cada vez más cerca, igual es una buena oportunidad para ver a
quien vas a votar..
- The Poker Channel (en inglés): Todo sobre el póker. ¿Sabíais que el
ganador del último torneo anual más importante de póker (WSOP) es una
mujer, tiene 19 años, es noruega y por llevarse este premio se ha
embolsado 2 millones de dólares…? Pues sí.
- Bloomberg TV (en inglés, a partir de enero): Uno de los canales de
noticias financieras más prestigiosos del mundo.

Desgraciadamente, junto a estas buenas noticias, llega una un poco mala.
TVE nos ha pedido que interrumpamos la retransmisión de Teledeporte y de
Canal 24 Horas, a pesar de que la había autorizado hace tiempo. No
entendemos muy bien los motivos, pero tenemos que respetar su decisión, a
la espera de que regresen pronto a nuestra parrilla y a vuestras
pantallas…

Estamos recibiendo muchos correos electrónicos preguntando si vamos a
añadir nuevos canales. Como veis, hacemos todo lo que podemos para daros
una oferta mayor, pero como dependemos de las cadenas, a veces las cosas no
van todo lo rápidamente que quisiéramos. Si tenéis sugerencias para
nuevos canales, no dudéis en escribirnos. Es más, quizás sea una buena
idea que escribáis también al canal en cuestión…

¡Felices fiestas a todos! y sed malos…

Zattoo España

–
Powered by PHPlist, www.phplist.com

• No existen artículos relacionados.