Monperla.es – Web totalmente Ajax desarrollada con prototype y scriptaculous
Sábado, 2 de Agosto, 2008
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.
