Uso de efectos para nuestras aplicaciones web

Seguramente nos hemos dado cuenta de los efectos visuales que se usan para mostrar mensajes o advertencias en algunas aplicaciones web o sitios webs. Por ejemplo WordPress hace uso de un Fade ("descoloración") para mostrar mensajes de advertencia u otros. Lo mismo ocurre con Ribosomatic, por ejemplo si no inicias sesión correctamente o no escribes tus datos completos para registrar un comentario entonces aparecerá un mensaje en la parte inferior que hara un cambio de color, con el objetivo de resaltar la advertencia.

Lo bueno de esto, es que no tenemos que saber mucho de JavaScript pues existe un script listo para su uso, muy practico y sencillo. Así es, se trata de un script llamado fat.js realizado por Adam Michela. En esta oportunidad explicaremos brevemente, siguiendo las instrucciones del autor, la manera de usarlo.

Empezemos descargando el archivo, luego para referenciarlo escribimos lo siguiente:

<script type="text/javascript" src="/mi_carpeta/fat.js"></script>

Haremos un fade a un parrafo:

<p id="p1" class="fade">Este primer parrafo realizara un fade: pasara de color amarillo al color de fondo de la pagina.</p>

Es importante colocar un id a la etiqueta, seguida de la clase fade. Este primer ejemplo realiza un fade por defecto de amarillo al color de fondo del parrafo.

Ahora haremos un fade de otro color:

<p id="p2" style="background:#FFFF00" class="fade-0066FF" >Este segundo parrafo cambiara de color azul a color amarillo (color de fondo del parrafo).Haremos uso de fade + el codigo de color.</p>

Este ejemplo hace un fade de azul al color de fondo del parrafo, en este caso amarillo.

Los dos ejemplos anterior hacen un fade al iniciar o refrescar la página, sin embargo podemos realizar un fade que responda a un evento. Como por ejemplo al hacer clic en un boton. Veamos como:

<p>
 <input type="button" value="Hacer Fade" onclick="Fat.fade_element('p3', 60, 10000, '#FF0000', '#00CC00')" />
</p>
<p id="p3">Este tercer parrafo cambiara de color rojo a verde en un lapso de 10 segundos y por cada segundo hara 60 variaciones para que el efecto sea algo mas agradable a la vista. </p>

En este ejemplo hemos puesto un boton y en el evento onclick hemos especificado la función Fat.fade_element(), que maneja 5 parametros para dar formato al efecto fade: id, frames por segundo, duracion del fade, color fade y color final.

Hemos visto la manera de manejar este práctico script, puedes descargar los tres ejemplos desarrollados. Si desarrollamos aplicaciones web (ajax) esta es una excelente herramienta para mostrar mensajes a ciertas acciones o eventos dentro de un página web.