Make your own AJAX progress bar Haga su propia barra de progreso AJAX

Posted on July 7, 2008 at 5:28 am Publicado el 7 de julio de 2008 a 5:28 am

A synchronous Ja vascript with X ML, commonly called A sincrónica con Ja vascript X ML, comúnmente llamado AJAX , drives an increasing number of Web 2.0 applications and sites such as Gmail, Google Maps and many others. , Impulsa un número cada vez mayor de 2,0 aplicaciones Web y sitios como Gmail, Google Maps y muchos otros. Its popularity has to do with several factors, an important one of which is the ability to update a page without a complete refresh. Su popularidad tiene que ver con varios factores, una importante uno de los cuales es la capacidad de actualizar una página sin una completa actualización.

When a user refreshes a non-AJAX page, though, they know what’s going on and will wait for the refresh to occur. Cuando un usuario no se actualiza-AJAX página, sin embargo, ellos saben lo que está pasando y va a esperar a que la actualización que se produzca. With AJAX, a click on a widget can cause an update to begin but the user won’t know that it’s in progress, or complete, unless the programming behind the widget gives the user an indicator such as a progress bar or spinning ball, or even GMAIL’s unpretentious Loading…. red text indicator. Con AJAX, un clic sobre un widget puede causar una actualización para comenzar, pero el usuario no sabrá que está en progreso, o completo, a menos que la programación tras el widget le da al usuario un indicador como una barra de progreso o el hilado de bolas , O incluso de GMAIL sin Cargando…. Indicador rojo texto.

But, you want to do better than a text indicator! Pero, usted quiere hacer mejor que un indicador de texto! And even though you, like me, might be graphically challenged or just plain too busy to twiddle with Photoshop or other tools for hours perfecting the perfect animated GIF file for your site, you are in luck! Y aunque usted, como yo, podría ser impugnada gráficamente o simplemente demasiado ocupado para twiddle Photoshop o con otros instrumentos para perfeccionar la hora perfecta de archivos GIF animados para su sitio, usted está en suerte!

The folks behind the ajaxload.info site have prepared a nifty Web 2.0 interface for you to select a graphical progress indicator from a range of righteous options. La gente detrás del sitio ajaxload.info han preparado un excelente 2,0 interfaz Web para que usted seleccione un indicador gráfico de progreso de una amplia gama de opciones justos. Then, quickly customize the background and foreground colors using easy menu options and set a few other details. Entonces, rápidamente personalizar el fondo y primer plano los colores utilizando las opciones de menú fácil y fijar algunos otros detalles.

It takes all of two minutes, not counting the time you waste spend studying the possibilities. You preview online, and when happy (or exhausted!) download your shiny new Web 2.0-style animated indicator, and install it on your site. Toma todas las de dos minutos, sin contar el tiempo que los residuos pasan estudiando las posibilidades. Obtener una vista previa en línea, y cuando feliz (o agotado!) Descargar su brillante nueva Web 2.0-indicador de estilo de animación, e instalarlo en su sitio.

To try it, point your browser over at Para probarlo, dirija su navegador a más de ajaxload.info and the simple and clear interface will step you through the process. y la sencilla y clara interfaz paso a través del proceso.

This is it! Eso es todo! This is all you have to deal with, now we begin to look at the options. Using the drop down, scan through the list of more than thirty progress animations. Mac and Windows styles are included. Esto es todo lo que tiene que hacer frente, ahora empezamos a ver en las opciones. Usando el menú desplegable, escaneado a través de la lista de más de treinta animaciones progreso. Mac y Windows se incluyen los estilos.

There are more than thirty options available already, and more being created. Hay más de treinta opciones disponibles ya, y más se va a crear. As you see, they start off as black and white templates. Como puede ver, empezar como en blanco y negro plantillas. What you don’t see here (but will at ¿Qué no ves aquí (pero a ajaxload.info ) is that these are all animated indicators - which you will add to your site and turn on and off as part of your AJAX widget update / execute process. ) Es que estos son todos los indicadores de animación - que usted añadir a su sitio y activa y se desactiva como parte de su actualización widget AJAX / proceso de ejecución.

Once you’ve selected a style from the options in the first drop-down, use the color-picker widget to select the foreground and background colors. Una vez que hayas seleccionado un estilo de las opciones en el primer menú desplegable, utilice el selector de color-widget para la selección del primer plano y colores de fondo. You also select a transparency option for the colors. Usted también seleccionar una opción de transparencia para los colores. Click Generate It! Haga clic en Generar! And you will quickly see your indicator displayed in the preview box below the creation palette. Y usted ver rápidamente su indicador está representada en el cuadro de abajo una vista previa de la paleta de creación.

If you like what you see, you download the animated GIF file. Si te gusta lo que ves, que se descargue el archivo GIF animado. If you need to experiment with other progress options or colors, go back to the palette and make your adjustments, the click Generate It! Si usted necesita experimentar con otras opciones de progreso o colores, volver a la paleta y hacer los ajustes, haga clic en la Generar It! Until you like what you see. Hasta que te gusta lo que ves.

Ajaxload.info is currently in beta, but functions well and is free to use. Ajaxload.info se encuentra en fase beta, pero funciona bien y es libre de utilizar. It’s sure to save you loads of time over the alternative of using a graphics tool, and it will both help your users, and give your site that spiffy Web 2.0-ness that you crave. Está seguro de lo que le ahorrará un montón de tiempo durante la alternativa de utilizar una herramienta gráfica, y que tanto ayuda a sus usuarios, y dar su sitio web que spiffy Web 2.0-ción que anhelamos.

Pete Kushmeider, writer and blogger Pete Kushmeider, escritor y blogger

Technorati Tags: Technorati Tags: AJAX , ajaxload.info , Free AJAX applets Libre AJAX applets

If you enjoyed this post, make sure you En caso de que haya disfrutado de este puesto, asegúrese de que subscribe to my RSS feed suscribirse a mi feed RSS ! !

» Filed Under »Presentadas en virtud de Cool Websites Cool Páginas web