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.

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.

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
• p2pFinder - Buscador de archivos torrents y enlaces eDonkey
• Shopall
• AjaxLookup Domain Whois

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

Para los amantes de los estándares de la web os propongo un truco para simular el comportamiento del atributo “target” de la etiqueta <a>, sin dejar de cumplir el estándar HTML 4.0 Strict o XHTML 1.0 Strict.

Para ello utilizaremos el atributo rel=”external” que no incumple con los estándares. Utilizaremos un script que revisará todos los enlaces (etiquetas <a>) cuyo atributo “rel” tenga valor “external” y le asignará un evento “onclick” que cancelará el evento por defecto y abrirá la URL de “href” en una nueva ventana.

<a href="http://www.equipo24.com" rel="external">Sitio desarrollado con mootools</a>

A continuación os dejo los códigos javascript para Mootools y una solución general sin necesidad de bibiliotecas externas.

Mootools

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();	
				window.open(this.getProperty('href'));
			}.bind(el));
		}	
	});
}

window.addEvent('domready', function() { 
	fix_external_links();
});

Sin bibliotecas externas

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;

Introducción

e24Squares es una extensión para scriptaculous que permite hacer transiciones entre imágenes con un efecto original. Este efecto genera una serie de cuadros blancos que van apareciendo de forma aleatoria en diferentes posiciones mientras la siguiente imagen va apareciendo detrás con un efecto de opacidad o fade. La extensión puede ser usada como galería de fotos o como un efecto decorativo en nuestra página web.

Demos

• Transiciones Manuales
• Reproducción automática

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24Squares después de ambos:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24squares.js'></script>

Ahora escriba el código HTML necesario para definir la galería. Necesitaremos una capa contenedora (“visor” en el ejemplo) y dentro de la capa contenedora pondremos una imagen que será la que aparezca inicialmente antes de comenzar el efecto.

<!--e24Squares container -->
<div id="visor" >
	<img src="img/liberty.jpg" alt="imagen 1" />
</div>
<!-- End of e24Squares container -->

Ahora veremos el código javascript necesario para el funcionamiento del efecto, donde pasaremos como primer parámetro el id de la capa contenedora de la galería “visor”, como segundo parámetro pasaremos un array con los nombres de los archivos de las imágenes y por último un array de parámetros para el efecto.

oe24Squares = new e24Squares( 'visor', 
			    [ 'liberty.jpg', 'newyork2.jpg', 'mexico.jpg', 'newyork.jpg' ],
				{ 
					base: 'img/', 
					width: 640, 
					height: 300, 
					rows: 3, 
					cols: 5, 
					hideonfinish: true, 
					autostart: true, 
					duration: 1.0, 
					interval: 1.0 
				}
			);

Todas las Opciones

• base: El camino donde se encuentran las imágenes.
• width: Ancho en pixeles del visor de la galería.
• height: Alto en pixeles del visor de la galería.
• rows: Cantidad de filas en que se dividirá el visor para formar los cuadros de la transición. Valor por defecto: 3
• cols: Cantidad de columnas en que se dividirá el visor para formar los cuadros de la transición. Valor por defecto: 5
• duration: Un valor decimal que representa el tiempo en segundos que durará la transición entre una foto y la siguiente. Valor por defecto: 1.0
• interval: Un valor decimal que representa el tiempo en segundos que tardará en comenzar la siguiente transición. Valor por defecto: 0.3
• color: Representa el color de los cuadros que aparecerán en el efecto. Valor por defecto: #ffffff
• autostart: Un valor booleano, si es true la animación se inicia automáticamente, si es false necesitaremos llamar al método start() para iniciar la reproducción automática o llamar al método transition() para ir a una imagen determinada. Valor por defecto: false
• hideonfinish: Un valor booleano, si es true el visor se ocultará cuando llegue a la última foto, si es false la última foto permanecerá visible. Valor por defecto: false
• callback: función que se llamará cuando se complete la última transición, útil para concatenar con otro efecto.

Métodos

• start: No requiere parámetros, inicia la animación si el efecto se creó con el parámetro autostart como false.
• transition((int)index, (function)pCallback): Recibe como primer parámetro el índice de la imagen a mostrar(la primera es 0), el segundo parámetro es una función que se llamará cuando termine la transición por si se necesita concatenar con otra acción.

oe24Squares.transition(2);

Errores conocidos y cosas por hacer

• Permitir que la reproducción automática comience por el primero cuando llegue al final.

Descargar

e24Squares 0.2 beta (218 KB, incluye los demos)

En el post anterior vimos la importancia de cuidar que nuestros scripts AJAX degraden correctamente. Hoy veremos un caso práctico de cómo lograrlo utilizando prototype.

Pongamos como ejemplo el efecto e24Writer descrito en posts anteriores. El e24Writer hace que una serie de elementos aparezcan progresivamente, por tanto necesitaríamos que dichos elementos estén ocultos antes de comenzar el efecto. Supongamos que animaremos el texto “AJAX”, de manera que aparezca letra a letra. Si ocultamos este texto inicialmente poniendo la propiedad de CSS display a none, si por alguna razón de las descritas en el post anterior el javascript fallara entonces nuestra web no degradaría correctamente porque el texto “AJAX” nunca se mostraría.

Si por el contrario dejamos el texto visible de inicio necesitaríamos ocultarlo antes de que se muestre la página, para ello necesitaríamos hacerlo en un evento que se ejecute apenas tengamos acceso a todo el DOM y antes de que se muestre la página. Este evento es sin duda el “domReady”.

A diferencia de otras bibliotecas de AJAX como Mootools, YUI o ExtJs, Prototype no implementa nativamente el evento “domReady”. Pero si buscamos en Google por “prototype domReady” encontramos varias extensiones como esta

Event.onDOMReady(function() {
  $('text').hide();
  oe24Writer = new e24Writer( 'text', { autostart: true, duration: 1.0, interval: 0.3 });
});

De esta forma el texto podrá leerse independientemente de la presencia o no de javascript.

Con cada nueva versión los navegadores nos traen nuevas funcionalidades que nos permiten dotar a nuestras páginas de efectos AJAX cada vez más avanzados y atractivos. Aunque la mayoría de estas mejoras van de la mano en los navegadores más populares y cada vez están más estandarizadas, siempre existen factores que hacen que nos encontremos con diferentes escenarios como los siguientes:

• Usuarios que continúan usando antiguas versiones de los navegadores.
• Usuarios que utilizan navegadores menos populares o menos estándares.
• Usuarios que por razones de seguridad deshabilitan las secuencias de comandos javascript u otras restricciones similares.
• Las arañas de los buscadores que no suelen interpretar javascript y por tanto algunos textos pueden quedar ocultos de cara a los buscadores.
• Usuarios con problemas de accesibilidad que utilizan otros mecanismos para leer las páginas.

Para poder llegar a todos estos usuarios es necesario que aquellas páginas que utilicen javascript para lograr efectos AJAX avanzados degraden correctamente en inglés “gracefully degrade” o lo que es lo mismo que sean capaces de funcionar en ausencia de javascript u otra capacidad especial.

En el próximo post veremos un caso concreto y como resolverlo utilizando Prototype.

Introducción

e24TabMenu es un plugin de scriptaculous que permite hacer un tab menú que al clicar sobre sus pestañas se expanden hacia abajo.

Demos

• Con todas las pestañas ocultas
• Con una pestaña expandida por defecto

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24TabMenu después de ambos:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>

Ahora escriba el código HTML necesario para definir el menú. Necesitaremos una capa contenedora (“menu” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento del menú donde podremos añadir el contenido correspondiente. A continuación añada un enlace (etiqueta “A”) para cada pestaña del menú, el atributo “rel” debe tener como valor e24menuitem[id_de_la_capa_del_contenido] donde id_de_la_capa_del_contenido es el nombre de la capa que contiene el contenido del elemento de menú a desplegar (en el ejemplo “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Además, después de los enlaces podemos añadir contenido que aparecerá cuando el menú no tenga ninguna pestaña desplegada.

<div id="menu" ><!---menu container--> 
  <div id="item_3d" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_gall" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_menu" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_efec" class="menutarget"> 
    Contenido
  </div> 
 
  <!---tabs del menu--> 
  <a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="img/3d.gif" alt="Efectos 3D" /></a> 
  <a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="img/galerias.gif" alt="Galeria de fotos AJAX" /></a> 
  <a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="img/menus.gif" alt="Efectos de Menus" /></a> 
  <a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="img/efectos.gif" alt="Otros efectos ajax" /></a> 
  <!---tabs del menu--> 
 
  <div id="maincontent"> 
    Contenido principal 
  </div><!--texto--> 
</div><!--menu container-->

Ahora veremos el código javascript necesario para el funcionamiento del menú, donde pasaremos como primer parámetro el id de la capa contenedora del menú “menu” y un array de parámetros para el efecto.

oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } );

Todas las Opciones

• duration: Un valor decimal que representa el tiempo en segundos que durará el despliegue de la pestaña del menú. Valor por defecto: 1.0
• transition: Función que modifica cada punto de la animación: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
• callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.

Métodos

• toggleMenu: Despliega o expande una pestaña de menú según sea el caso. Requiere como parámetro el objeto referente al enlace correspondiente al elemento de menú en cuestión.

  oe24TabMenu.toggleMenu($('3d'));

Errores conocidos y cosas por hacer

• Permitir el menú en varias direcciones, de abajo hacia arriba, izquierda a derecha, derecha a izquierda.

Descargar

e24TabMenu 0.8 beta (176 KB)

Introducción

e24Writer es un plugin de scriptaculous que permite hacer una animación donde los elementos van apareciendo progresivamente mediante una transición de opacidad. Los elementos pueden ser imágenes, elementos HTML o texto.

Demos

• Animación de Imágenes
• Animación de un Texto

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro de header del código HTML de la página. Incluya e24Writer después de ambos

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24writer.js'></script>

Este efecto consiste en hacer una aparición progresiva de un grupo de elementos, por ejemplo las letras de un texto. Para esto debemos separar cada uno de los elementos, si el texto a animar es una imagen entonces necesitaremos picar la imagen en cada una de las letras.

Ahora escriba el código HTML necesario para definir el contenido a animar. Necesitaremos una capa contenedora (“letters” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento de la animación, por ejemplo una capa para cada letra.

<div id="letters" >
		<div class="letter"><img src="img/letter1.jpg" alt="letra1" /></div>
		<div class="letter"><img src="img/letter2.jpg" alt="letra2" /></div>
		<div class="letter"><img src="img/letter3.jpg" alt="letra3" /></div>
		<div class="letter"><img src="img/letter4.jpg" alt="letra4" /></div>
</div>

A continuación escribimos el código javascript necesario para ejecutar la animación. Le pasaremos como primer parámetro el id de la capa contenedora “letters” y un array de parámetros para el efecto.

oe24Writer = new e24Writer( 'letters', { autostart: true, duration: 1.0, interval: 0.3 });

Todas las Opciones

• autostart: Un valor booleano, si es true la animación se inicia automáticamente, si es false necesitaremos llamar al método start() para iniciar la animación. Valor por defecto: false
• duration: Un valor decimal que representa el tiempo en segundos que durará la transición de opacidad de cada elemento. Valor por defecto: 1.0
• interval: Un valor decimal que representa el tiempo en segundos que pasará entre cada aparición de cada elemento. Valor por defecto: 0.3
• callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.

Métodos

• start: No requiere parámetros, inicia la animación si el efecto se creó con el parámetro autostart como false.

Errores conocidos y cosas por hacer

• Permitir varias hacer la animación en varias direcciones, izquierda-derecha, derecha-izquierda.
• Permitir reiniciar la animación.

Descargar

e24Writer 0.4.1 beta (71.33 KB)