viernes, 19 de febrero de 2010

Coleccion de efectos AJAX

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma. AJAX es una combinación de cuatro tecnologías ya existentes, XHTML y CSS, DOM, el objeto XMLHttpRequest y XML.
Bueno la anterior definición era la teoría del AJAX, ahora viene la parte bonita…la practica.

1) GreyBox

greybox.jpgGreyBox te permitirá lanzar páginas webs que serán cargadas en una ventana de tipo popup.
Pero sin que programas de tipo anti-popup las puedan bloquear.
Con esto evitarás que el usuario pueda perder la web de referencia de la que procede, ya que no le aparece un cuadro de url, limitando de cierta forma la navegación fuera de nuestro sitio.



2) Instant.js

instant_js1.jpg
Con instant.js lograrás darle a las imágenes de tu sitio un bonito efecto de foto sacada con una polaroid. Añadiendo un bonito borde blanco a cada una de las imágenes.
La funcionalidad de un sitio nunca tiene que estar debajo del diseño de esta, pero sin duda alguna, pero mejorar el aspecto de una web siempre ayudará a hacer más agradable tu sitio.



3) mooTable

mootables1.jpgCon este recurso ajax, podrás hacer que tus tablas se puedan reordenar sin tener que recargar la página completa, con el consiguiente ahorro de carga para el servidor, y el beneficio añadido de no hacer esperar al usuario. La ordenación se realiza realiza vía DOM.
No lo he probado, pero si trata de forma correcta los distintos formatos de monedas, será una aplicación a tener muy en cuenta.



4) FancyForm

fancy_forms.jpgCon FancyForm conseguiremos darle algo más de vida a nuestros formularios y hacerlos bastante más atractivos.
Integrarlo será bastante sencillo, sólo tendremos que agregar el fichero javascript y añadir una etiqueta de clase a los elementos que queremos que se vean modificados.



5) Image menu

phatfusion_image_menu.jpg Con este efecto ajax podremos tener un menu en el que aparezcan imágenes, lo que le dará mucha vistosidad al sitio.
Saludos desde lo más profundo de los bytes.




6) AmberJack: Site Tour Creator

Aquí tenemos una biblioteca JavaScript de poco peso pero gran utilidad, ya que le permite pequeña caja de descripción en cada página.
amberjac_site_tour_creatopr.jpg
Esto permite a los usuarios hacer un recorrido de las distintas secciones de un sitio web, sin que tengan que ver una demo en flash o similar. Como extra, tenemos la posibilidad de poder descargar diferentes pieles (skins) o bien crear nuestras propias pieles (con pieles me refiero al aspecto exterior), para que coincida con el aspecto de nuestra página web. Aquí está la galería de skins por lo que puedes ver si tienen un tema que le vaya bien a tu sitio web o bien puedes usarlo para tener ideas de como hacer tu propio skin.



7) ImageFlow

Inspirado en el “coverflow” del iPod (la forma que tiene el iPod de mostrar las carátulas de los discos), ImageFlow nos muestra una colección de imágenes que el usuario puede desplazarse usando una barra de desplazamiento situada en la parte inferior del conjunto de imágenes. Cuando el usuario hace clic sobre una imagen, se dirige a otra página web con la imagen mostrada.
imageflow_0_8.jpg



8) ShadowBox.js Media viewer

ShadowBox es un magnifico visor de medios, y ¿a qué me refiero con esto? Pués a que ShadowBox nos ofrece un soporte para mostrar archivos de varios tipos, además de imágenes, podemos poner en él vídeos flash, vídeos de youtube incrustados, y las páginas web. Lo que hace que valga la pena probar y jugar con este script.
shadowbo_js.jpg



9) TJPzoom 3

TJPzoom le permite hacer zoom sobre determinadas secciones de una imagen de alta resolución. Manteniendo presionado el botón del ratón y arrastrando hacia arriba o hacia abajo, puede aumentar o disminuir el zoom de la imagen, vamos es una lupa.
tjpzoom_3_image_magnifier.jpg



10) mootools Tips

Mootools Tips es parte de la mootools, alguna de las herramientas de esta biblioteca ya han sido comentadas antes. Este marco nos permite ofrecer consejos para el usuario, cuando el usuario pase el ratón sobre un enlace o una imagen, le aparecerá información adicional sobre el elemento.
mootools_tips.jpg
Algunas de las opciones que se pueden ajustar son los estilos CSS, la velocidad de transición….
Requiere la biblioteca javascripts mootools.

No hay comentarios:

Publicar un comentario