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.