AJAX24

Componentes y Efectos AJAX

Suscríbete vía Email

Idle Spy para Mootools - Detectando la ausencia de interacción

Nuestra misión como programadores es velar por los recursos de nuestros usuarios y por los de nuestro servidor. Las aplicaciones ajax suelen realizar constantes pedidos al servidor, y aunque cambiemos de ventana o pestaña suelen continuar ejecutándose malgastando CPU del usuario, y ancho de banda y otros recursos del servidor.

Imaginemos una aplicación como Gmail, que esté constantemente chequeando si hay nuevos correos en el servidor para mostrarlos, además actualizando cada un minuto las fechas en formato time ago para mostrar el tiempo transcurrido desde que se recibió el correo. Si cambiamos de pestaña, muchas de esas acciones se deberían detener mientras no volvamos. Si abrís decenas de pestañas a la vez como yo y en un navegador tan goloso de memoria como Firefox, tened por seguro que las apps que no optimizan sus recursos terminarán saturando el navegador.

Hoy os traigo la clase IdleSpy para Mootools que monitoriza los eventos de ratón y teclado para determinar si el usuario está interactuando con la página y establecer un estado de inactividad (idle) para detener ciertas acciones o enviar un mensaje y llamar la atención del usuario.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

  var IdleSpy = new Class({
    Implements: [Options, Events],
 
    options: {
      idleTime: 60000 //1 min
    },
 
    initialize: function(options) {
      this.setOptions(options);
      this.idle = false;
 
      documente.id(document.body).addEvents({
        'mousemove': this.doBack.bind(this),
        'mousewheel': this.doBack.bind(this),
        'keydown': this.doBack.bind(this)
      });
    },
 
    start: function() {
      this.idleTimer = this.doIdle.delay(this.options.idleTime, this);
    },
 
    doBack: function() {
      if (this.idleTimer) {
        $clear(this.idleTimer);
      }
      if (this.idle) {
        this.idle = false;
        this.fireEvent('back');
      }
      this.start();
    },
 
    doIdle: function() {
      this.idle = true;
      this.fireEvent('idle');
      this.idleTimer = this.doIdle.delay(this.options.idleTime, this);
    }
  });

La clase es bien sencilla de utilizar, creamos una instancia pasándole como parámetro el tiempo en milisegundos para considerar el estado de idle y podemos escuchar dos eventos idle o back para ser notificado cuando el usuario vuelva a interactuar con la página.

1
2
3
4
5
6
7
8
9
10

 var idleSpy = new IdleSpy({
   idleTime: 300000
 });
 
 idleSpy.addEvents({
   'idle': function() { /* on user idle code here */ },
   'back': function() { /* on user back code here */ }
 });
 
 idleSpy.start();

No la he probado demasiado aun, así que espero comentarios

Soluciones para otros frameworks AJAX:

• YUI: Detecting if the user is idle with JavaScript and YUI 3
• jQuery: jQuery idleTimer plugin
• Prototype: Simple JavaScript Idle State using Prototype

Update1: añadido chequeo de del evento mousewheel
Update2: añadido this.start() al onBack, bug señalado por eneko.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

PNG Fix para IE6 con Mootools - e24PNGFix

Yo siempre me he declarado abiertamente en contra del uso Internet Explorer 6. IE me hace perder 3 o 4 horas de trabajo todos los días y nos pone a los desarrolladores web en la disyuntiva de limitar nuestras posibilidades de creación o renunciar a una cuota de mercado que aun no es despreciable.

Uno de los principales problemas de IE6 es su incompatibilidad con los PNGs transparentes, aunque esto es solucionable mediante uno de sus filtros de css. Hasta ahora yo había utilizado FixPNG de ClientCide, pero he detectado una limitación cuando aplicamos un efecto de transición de opacidad a un PNG transparente en IE6 o IE7, ya sea con el Tween o el Morph.

FixPNG soluciona el problema de la transparencia del PNG añadiendo la propiedad de css filter:

1
2
3
4
5
6
7
8
9
10
11
12
13

var replacement = new Element('span', {
	id:(el.id)?el.id:'',
	'class':(el.className)?el.className:'',
	title:(el.title)?el.title:(el.alt)?el.alt:'',
	styles: {
		display: vis?'inline-block':'none',
		width: dim.x,
		height: dim.y,
		filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" 
			+ el.src + "', sizingMethod='scale');"
	},
	src: el.src
});

Hasta aquí bien, pero el problema radica en que cuando modificamos la opacidad de un elemento con Mootools en Internet Explorer, este lo que hace a través de la misma propiedad de CSS filter.

1

if (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';

Por tanto nuestro efecto de transición de opacidad funcionará pero el PNG no será transparente y veremos un comportamiento un tanto extraño.

He desarrollado mi propio FixPNG para solucionar algunas de mis animaciones mientras ClientCide y Mootools solucionan el suyo.

Para usar e24PNGFix, las imágenes deben ponerse como background mediante css, ej:

1

<div id="myimg"  style="background: url(img/myimg.png) no-repeat"></div>

Y bastaría con la siguiente sentencia de javascript:

1

Browser.fixPNG('myimg');

Este script al menos satisface mis necesidades, sois libre de usarlo o no, aquí os dejo el código de e24FixPNG:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*
 e24PNGFix
	- MooTools version required: 1.2.2
	Changelog:
		- 1.0: First release
*/
 
/*Based on the fixPNG module from MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006-2007 Valerio Proietti, <http://mad4milk.net>, MIT Style License.||Clientcide Copyright (c) 2006-2008, http://www.clientcide.com/wiki/cnet-libraries#license*/
/* Copyright: equipo24 S.L.N.E <http://equipo24.com/> - Distributed under MIT License - Keep this message! */
 
$extend(Browser, {
	fixPNG: function(el) {
		if (Browser.Engine.trident){
			el = document.id(el);
			var w = el.getStyle('width');
			var h = el.getStyle('height');
			var imgURL = el.getStyle('background');
			if (imgURL.test(/\((.+)\)/)){
				el.setStyle('background', '');
 
				var subEl = new Element('div', {
					'style': 'width: ' + w + ';' +
					'height: ' + h + ';' +
					"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.match(/\((.+)\)/)[1] + "');"							
				});	
				el.grab(subEl);							
			};
		}
	}
});

En el próximo post documentaré otro efecto e24WalkerFx, sin e24PNGFix me hubiera sido imposible utilizar PNGs transparentes.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Mootools 1.2.3 y Clientcide 2.1.0 lanzados hoy

Hoy ha sido lanzada la versión 1.2.3 de mootools, la que constituye el último paso de cara a la versión 2.0. El release es principalmente un conjunto de correciones de errores, pero hay que destacar la nueva funcionalidad de compatibilidad con otros frameworks.

Aunque no es recomendable utilizar dos frameworks ajax diferentes en una misma página, es cierto que en ocaciones es inevitable, sobre todo los que programamos plugins que no se sabe con qué otros scripts van a coexistir. La solución es muy simple, sustituir el $ por document.id().

Lo que antes era:

1

var el = $('myid');

Ahora puede ser así:

1

var el = document.id('myid');

También ha sido lanzado hoy Clientcide 2.1.0, cuyo principal cambio es la adaptación de la compatibilidad con los demás frameworks.

Ahora tendré que sacar 15 minuticos y actualizar todos mis plugins.

Fuente: mootools blog

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Monitoriza el scroll con e24ScrollEvents para mootools

Introducción
Hace muy poco David Walsh publicó en su blog ScrollSpy, un plug-in con objetivos muy similares a e24ScrollEvents. En ese momento ya tenía algo adelantado de e24ScrollEvents para un proyecto en el que trabajaba y no desistí de su desarrollo porque creo que tiene algunos añadidos que hacen que sea muy fácil de usar. Compáralos y usa el que mejor se ajuste a tus necesidades.

e24ScrollEvents es un plug-in para Mootools que permite detectar qué elementos son visibles según la posición del scroll de la página. Para ello añade dos nuevos eventos a la clase Element de Mootools que se activan cuando el elemento aparece en el área visible o se oculta.

Demos
Demo1: Galería de Fotos Ajax
Demo2: Ejemplo Básico

¿Cómo utilizarlo?
Incluye Mootools 1.2.2 Core dentro del header del código HTML de la página. Puedes generar una versión de la librería de tamaño óptimo desde el Mootools Core Builder, seleccionando DOMReady, Element.Dimensions, Element.Style, Element.Events, Class.Extras y todas sus dependencias. Y además incluye e24ScrollEvents después de ambos:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24scrollevents-1.0.js" type="text/javascript"></script>

Ahora veremos el código javascript necesario para comenzar a observar el scroll. Primero añadimos los controladores para los nuevos eventos “visible” y “hidden”. Supongamos que tenemos dos elementos “el1″ y “el2″ que nos interesa enterarnos cuando aparezcan en el área visible.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var el1 = $('el1');
el1.addEvents({
	'visible': function() {
		el1.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el1.setStyle('border', 'none');
	}
});	
 
var el2 = $('el2');
el2.addEvents({
	'visible': function() {
		el2.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el2.setStyle('border', 'none');
	}
});

Luego creamos una instancia de e24ScrollEvents pasándole como parámetro un objeto de opciones. Entre las opciones tenemos: el elemento contenedor (window si queremos que sea la página), el modo (vertical u horizontal) y un array con los elementos que se subscribirán a los eventos “visible” y “hidden”. Esto hará que se comience a monitorizar la visibilidad de los elementos subscritos.

1
2
3
4
5

new e24ScrollEvents({
	container: window,
	mode: 'vertical',
	elements: ['el1', 'el2']
});

Descripción de las opciones

• container: El id del elemento que tiene el scroll. Si es el scroll de la página debes poner window.
• mode: El scroll que deseamos controlar, los posibles valores son vertical u horizontal.
• elements: El array de elementos que se subscribirán a los eventos visible y hidden. Puede ayudar mucho utilizar los selectores de mootools ej. $$(’.myelements’).

Métodos

• listenScroll: Activa los eventos “visible” y “hidden” en los elementos visibles. Este método solo es necesario llamarlo si queremos chequear la visibilidad aunque no se haya movido el scroll, por ejemplo justo después de añadir los controladores de los eventos a los elementos.

Nuevos Eventos de Element

• visible: Se activa cuando el elemento aparecen el área visible. Recibe como parámetro el propio elemento y la posición del scroll.
• hidden: Se activa cuando el elemento desaparece del área visible. Recibe como parámetro el propio elemento y la posición del scroll.

Errores conocidos y cosas por hacer

• Controlar la visibilidad horizontal y verticalmente a la vez. A mi no me hizo falta para mi proyecto, pero podría ser útil.

Licencia
Distribuido bajo Licencia MIT

Descargar
e24ScrollEvents 1.0 (38.8 KB, incluye los demos)

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Capta la atención de un objeto con e24SpotLight para mootools

Introducción
e24SpotLight es un plug-in para Mootools que permite captar la atención del usuario sobre una región. El efecto simula un apagado de luces dejando solo iluminada la región que deseamos destacar.

Demos
Demo1: Seleccionando un objeto
Demo2: Seleccionando una región
Demo3: e24Presenter + e24SpotLight

¿Cómo utilizarlo?
Incluye Mootools 1.2.2 Core dentro del header del código HTML de la página. Puedes generar una versión de la librería de tamaño óptimo desde el Mootools Core Builder, seleccionando DOMReady, Element.Dimensions, Fx.Transitions, Fx.Morph y todas sus dependencias. Y además incluye e24SpotLight después de ambos:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24spotlight-1.0.js" type="text/javascript"></script>

Ahora veremos el código javascript necesario para inicializar el spotlight. Pasaremos como parámetro un objeto de opciones. Los parámetros los veremos en detalle más abajo.

1
2
3
4
5
6
7
8
9

	var spotLight = new e24SpotLight({
		transition: 'quad:in',
		duration: 200,
		zindex: 5,
		bgcolor: '#000000',
		opacity: 0.7,
		margin: 8,
		delay: 2000
	});

Si queremos activar un elemento del DOM dado su Id o su referencia

1

  spotLight.lightOn('mydiv');

O si queremos si queremos activar una región dadas sus coordenadas y dimensiones

1

  spotLight.lightOn({left: 100, top: 150, width: 300, height: 300});

Descripción de las opciones

• transition: El nombre de la transición que se utilizará, ej. ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
• duration: La duración en milisegundos del efecto de iluminación.
• zindex: El z-index de la capa overlay.
• bgcolor: El el color de la capa overlad.
• opacity: La opacidad de la capa overlay.
• margin: El margen a dejar por fuera de la región a iluminar.
• delay: El tiempo en milisegundos para que se oculte la capa overlay. Si se deja a cero entonces no se ocultará nunca, a no ser que se haga click sobre ella.

Métodos

• lightOn: Ilumina una región o un objeto. Si queremos que ilumine un objeto le pasamos como parámetro el Id o la referrencia. Si queremos que ilumine una región le pasamos las coordenadas y las dimensiones {left: 100, top: 150, width: 300, height: 300}.
• lightOff: Oculta la capa overlay.

Errores conocidos y cosas por hacer
No se me ocurre nada pero estaría encantado de escuchar vuestras opiniones.

Licencia
Distribuido bajo Licencia MIT

Descargar
e24SpotLight 1.0 (27 KB, incluye los demos)

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

e24BubbleFx - Transición de fotos mediante efecto de burbuja

Introducción
e24BubbleFx es un plug-in para Mootools que consiste en la transición entre dos fotografías, una como capa superior y otra inferior alternándose la visión de una u otra con un efecto burbuja de la propia imagen superior.
Lo mejor es verlo en acción y así entenderéis rápidamente a que me refiero.

Demos
Demo1: Ejemplo básico
Demo2: Ejemplo con eventos

¿Cómo utilizarlo?
Incluye Mootools 1.2.2 Core dentro del header del código HTML de la página. Puedes generar una versión de la librería de tamaño óptimo desde el Mootools Core Builder, seleccionando DOMReady, Fx.Transitions, Fx.Tween y todas sus dependencias. Y además incluye e24BubbleFx después de ambos:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24bubblefx-1.0rc.js" type="text/javascript"></script>

Ahora escribe el código HTML necesario para definir el visor del efecto. Necesitaremos una capa contenedora (“visor” en el ejemplo). Esta capa tendrá la imagen de fondo que se irá descubriendo mediante el efecto. Debes tener en cuenta que la imagen que pongas de fondo aparecerá directamente en caso de ausencia de javascript, o sea que el efecto degradará satisfactoriamente.

Luego un poco de CSS básico para que el efecto funcione. Simplemente definir un alto y ancho para la capa y definir la imagen de fondo.

1
2
3
4
5
6

#visor {
	position:relative;
	width:1000px;
	height:250px;
	background: url(img/back1.jpg) no-repeat;
}

Ahora veremos el código javascript necesario para el funcionamiento del efecto. Pasaremos como parámetro un objeto de opciones. Entre las principales opciones tenemos “container” que debería ser el id de la capa contenedora del efecto, “visor” en este caso. Los demás parámetros los veremos en detalle más abajo. Por último tenemos que llamar el método start pasándole un array de coordenadas que describirá los pasos de la burbuja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	var bubbleFx = new e24BubbleFx({
		container: 'visor',
		width: 1000,
		height: 250,
		initStep: {x:0, w:100},
		frontImg: 'img/back2.jpg',
		backImg: 'img/back2.jpg',
		transition: 'quad:out',
		infinite: false
	});
 
	discoverFx.start([
		{x:200, w:520, d1:800, d2:1100},
		{x:350, w:270, d1:800, d2:800},
		{x:0, w:230, d1:800, d2:1100},
		{x:250, w:530, d1:800, d2:1100},
		{x:300, w:700, d1:800, d2:1100}
	]);

Descripción de las opciones

• container: El id de la capa que contendrá el efecto
• backImg: El camino a la imagen que aparecerá debajo, la misma que definimos mediante css para la capa contenedora
• frontImg: El camino a la imagen que aparecerá arriba
• width: El ancho del visor
• height: El alto del visor
• transition: El nombre de la transición que se utilizará, ej. ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
• stepDuration: La duración en milisegundos de cada uno de los movimientos, aunque valor puede ser sobrescrito a nivel de paso como veremos luego
• infinity: (true/false) En caso de true la animación se repetirá infinitamente.
• infiniteDelay: El tiempo de espera en milisegundos para reiniciar la animación en caso de que la opción infinity esté activada
• initStep: {x:0, w:0} La coordenada de inicio del efecto, donde x es la posición de la burbuja y w el ancho.

Eventos

• onStep: function(index). Este evento se lanza en cada paso de la animación y recibe como parámetro el número del paso comenzando por cero
• onComplete: function(). Este evento se lanza al finalizar la animación. En caso de que infinity sea true se lanzará en cada ciclo.

Métodos

• start: Inicia la animación. Recibe como parámetro un array de coordenadas. Debes tener en cuenta que este efecto se basa en el movimiento de la burbuja que deja ver la imagen de atrás, por lo que está coordenadas definen la posición y ancho de la burbuja en cada paso. Además se puede establecer la duración de las animaciones de ambas paredes de la burbuja.
  • x: distancia de la burbuja contando desde la pared izquierda del visor
  • w: ancho de la burbuja
  • d1: duración en milisegundos de la animación de la pared izquierda de la burbuja
  • d2: duración en milisegundos de la animación de la pared derecha de la burbuja
  ^?Ver código JAVASCRIPT

  1 2 3 4 5 6 7

  discoverFx.start([ {x:200, w:520, d1:800, d2:1100}, {x:350, w:270, d1:800, d2:800}, {x:0, w:230, d1:800, d2:1100}, {x:250, w:530, d1:800, d2:1100}, {x:300, w:700, d1:800, d2:1100} ]);

• safeStart: Similar a start pero inicia después de precargar las imágenes necesarias para el efecto. NOTA: Este método requiere mootools-1.2.2.1-more.js con la clase Asset
• cancel: Cancela la animación en caso de que infinity sea true

Errores conocidos y cosas por hacer

• Hacer que el método cancel cancele completamente la animación, ahora solo cancela que no se repita en caso de infinity true
• Permitir transición entre más de dos imágenes
• Permitir hacer el efecto en dirección vertical

Licencia
Distribuido bajo Licencia MIT

Descargar
e24BubbleFx 1.0RC (218 KB, incluye los demos)

El corazón de este efecto son las coordenadas de los pasos de la burbuja, una correcta y creativa combinación de pasos puede dar como resultado un efecto único. Os invito a compartir vuestras combinaciones de pasos.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Monperla.es – Web totalmente Ajax desarrollada con prototype y scriptaculous

Desde que comenzamos a publicar este blog hemos venido ofreciendo una serie de componentes y técnicas para desarrollar un sitio completamente Ajax. Hoy veremos cómo uniendo todas estas técnicas obtenemos resultados que hasta hace bien poco parecían imposible sin tener que recurrir al Flash.

El caso de estudio es Monperla, una tienda online de joyería de la perla, en particular veremos ahora la web corporativa y próximamente cuando terminemos la nueva versión tienda la analizaremos también.

Los que seguís de cerca nuestro blog notarán enseguida que el protagonista de la página es e24Squares, el efecto galería de bloques aleatorios que publicamos en posts anteriores. Este efecto está integrado de manera que cada página del sitio se relaciona con una imagen y cuando se carga una nueva página el efecto se ejecuta haciendo la transición entre la imagen de la pagina actual con la de destino.

Como se ve las páginas se cargan asincrónicamente apareciendo un efecto fade. Una característica importante del sitio es que se ha cuidado que degrade satisfactoriamente cuando la ejecución javascript esté deshabilitada, por lo que el sitio se indexará perfectamente por los buscadores, para ello hemos utilizado las técnicas descritas en el post donde comentamos la importancia de evento onDomReady.

Como se ha comentado en posts anteriores, las webs que para cargar una nueva página lo hacen mediante llamadas asincrónicas ajax sin necesidad de recargar la página presentan el problema de que si el usuario utiliza el botón Atrás (back) del navegador la página se abandonaría. Para solucionar esto hemos utilizado el componente protoHistoryManager.

La web tiene otros efectos Ajax más tradicionales como ventanas lighbox para ampliar algunas fotos, rollover en algunas fotos. Además permite agrandar o achicar el tamaño de la fuente de los textos.

Espero que sirva de ayuda para aquellos que han solicitado ejemplos y aplicaciones de nuestros componentes. Agradeceríamos que nos comunicarais los errores encontréis en las diferentes versiones de los navegadores.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Ajaxigg - Red social sobre novedades del mundo AJAX

equipo24 se complace en anunciar el lanzamiento de Ajaxigg. Ajaxigg es una read social al estilo digg.com y meneame.es donde los usuarios podrán compartir noticias, componentes, trucos,  tutoriales  relacionados con el desarrollo ajax. En Ajaxigg son los usuarios quienes deciden qué noticias son más relevante mediante su sistema de votaciones.

En estos momentos solo está disponible para la comunidad hispanoparlante pero muy pronto estará lista la versión en inglés.

Espero que os sea útil.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Las llamadas asyncrónicas de ajax, la clave de los buscadores web2.0

La principal bondad de ajax de permitir realizar llamadas asincrónicas y servir resultados sin interrumpir la experiencia del usuario en la página, constituye la clave de hoy día en los buscadores Web2.0.

Aqui os dejo algunos ejemplos que nos hacen la vida más fácil gracias a esta fabulosa tecnología:

• Minube - Buscador de vuelos baratos
• Shopall
• AjaxLookup Domain Whois

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

History Manager para AJAX, solución al botón back

Una de las mayores críticas a las aplicaciones web en AJAX es acerca de sus limitaciones de accesibilidad y usabilidad. Los usuarios tienen ya vicios y costumbres y no entiende de AJAX, ello solo quieren que si le dan al botón back funcione como siempre y valla a la página anterior, y que si marcan una página en sus favoritos que luego cuando vuelva valla a la pantalla que el marcó y no a la página principal que es lo que suele suceder con las páginas web en AJAX.

Digitarald.de ha desarrollado una solución HistoryManager - The Ajax Back-Button (v1.0) para aquellos que usan Mootools   Pueden probar sus ejemplos, y por mi parte yo lo he implementado en www.equipo24.com

Como también suelo desarrollar con Prototype he reescrito el código para que sea compatible con dicha librería, la forma de uso es muy similar al original. Espero que os sea útil.

Descargar prototype.historyManager.js

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Copyright 2009. AJAX24. Powered by equipo24

• Inicio
• Ajaxigg
• Acerca de
• Contacto