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.

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

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.

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)