|

Weebly: crea tu web de forma rápida con Ajax

ByLuis

weebly.pngWeebly nos ofrece la posibilidad de crear páginas web de forma rápida, sencilla y online. Mediante el uso de Ajax y gracias al drag&drop, podemos crearnos nuestro sitio web en pocos minutos.
Entre las características que ofrece encontramos: uso del drag&drop para la generación de páginas, variedad de temas para elegir, subdominios personalizados, posibilidad de exportar a un fichero zip y numerosos tipos de contenido.
weebly2.png
Para los desarrolladores que esté interesados, quizás les guste saber que además de las opciones anteriores, también ofrece lo siguiente: uso personalizado de Ajax (drag&drop, efectos), subida de ficheros mediante Ajax, integración de un botón que nos permite ir atrás/adelante en el sistema de ventanas y diseño de elementos potente.
Demo:

Weebly
Vía / Ajaxian

| |

Endless.com: Experimento de Amazon en comercio electrónico

ByLuis

endless_logo.pngEndless es una nueva tienda de Amazon, dedicada a la venta de zapatos y bolsos, en la que destaca una interfaz de usuario rica y novedosa a base de DHTML y AJAX.
El sitio merece una exploración en profunidad pero un primer recorrido ya nos permite ver detalles alentadores:

  • Explorador visual de los artículo con zoom
  • Filtros de productos por marcas, color, tamaño o precio mediante AJAX (espectacular el de precios)
  • Paginación AJAX

http://sentidoweb.com/img/2007/01/endless_cap_2-thumb.png
Una interfaz de usuario realmente lograda, ejemplo de lo que la web 2.0 está consiguiendo y posiblemente una referencia en patrones de diseño en comercio electrónico.
Una pequeña crítica: se echa de menos un poco de enfoque social; al menos comentarios sobre los productos.

|

AJAX Locking: bloquea el acceso a AJAX

ByLuis

AJAX Locking es una librería de PHP que nos permite bloquear el acceso a los recursos del servidor a las peticiones AJAX. Ocurre con frecuencia que cuando una aplicación usa AJAX se efectuen muchas llamadas al servidor, accediendo todos a los mismos recuersos, pudiendo obtener resultados no muy deseados.
En estos casos, esta libería es lo más adecuado, ya que bloquea recursos del servidor, previniendo estos errores.
AJAX Locking
Vía / PHP Classes

Subir ficheros mediante AJAX

ByLuis

Un muy buen método para subir ficheros mediante AJAX al igual que se hace en GMail, bueno, o parecido. Para algunos puristas, el uso de iframes les puede parecer un crimen, pero la verdad es que en GMail usan también frames y nadie dice nada.
El método que usa está bastante bien pensado, se crea un iframe, en el que se captura el evento onload y cuando se acaba de cargar, se llama a una función que indicamos para avisar de la subida del archivo.
AJAX file upload
Vía / dzone

Consejos para cuando uses Ajax

ByLuis

Ajax tiene muchos amigos debido a la Web 2.0 y muchos enemigos, sobre todo debido a la usabilidad. Al igual que dijimos con el tema de Flash, el problema no es Ajax, sino el uso que se da de él. Por eso, conocer estos consejos nos puede venir bastante bien:

  1. No actualices toda la página usando Ajax, ni modifiques elementos HTML que puedas modificar mediante Javascript y el DOM.
  2. Ten en cuenta que habrá visitantes que tengan el Javascript desactivado o usen un navegador con una version de Javascript antigua o no completa como la de los dispositivos móviles.
  3. Cachea, ya sea en el cliente o en el servidor, las peticiones más frecuentes. Por ejemplo, el autocompletado hace peticiones constantemente al servidor, lo que puede gastar recursos del servidor y la base de datos.
  4. No tengas muchas llamadas concurrentes para cambiar la interfaz, normalmente los navegadores solo realizan dos llamadas HTTP a la vez, por lo que si tienes muchas llamadas para cambiar las imágenes, puede volverse muy lenta la carga.
  5. Usa llamadas asíncronas, ya que si las realizas de forma síncrona y hay problemas de red, el navegador se quedará esperando la respuesta.
  6. Prueba tu aplicación web con una conexión lenta.
  7. Comprueba el uso de memoria del navegador mientras ejecutas tu aplicación web durante 1 ahora, 2, 10, un día.
  8. Comprueba el código de estado http que devuelve XMLHttpRequest.
  9. Prueba a desactivar el objeto XMLHttpRequest.
  10. Usa indicadores de carga para saber que la aplicación está cargando algo.
  11. Ten en cuenta que puedan usar el botón de “Atrás” del navegador.
  12. Si es necesario cancelar un petición ten en cuenta que la petición ya está procesándose en el servidor y que el cliente procesará la respuesta.

Yo añadiría que hay que tener en cuenta que el orden de llegada de las respuestas no tiene que ser el mismo que el de las peticiones, si es importante el orden, usa bloqueos pare evitar problemas de concurrencia.

The top 10 mistakes when using AJAX

Vía / dzone

|

AjaxCore: framework de PHP para Ajax

ByLuis

Ya en otras ocasiones hemos hablado de frameworks de PHP y para aumentar la lista y las alternativas, vamos a hablar de un nuevo framework de PHP pensado en facilitar el desarrollo con Ajax.
Se trata de AjaxCore, un framework cuyo propósito es facilitar el desarrollo de aplicaciones web con Ajax, encargándose de la generación del código Javascript necesario. Usa la librería de Javascript prototype para controlar el uso de las llamadas XMLHTTPRequest.
AjaxCore
Vía / Ajaxian

|

Listas de correo con PHP y AJAX

ByLuis

En SitePoint siempre sacan algún tutorial útil y que nos puede facilitar mucho nuestros desarrollos. En este caso se trata de listas de correos, quizás con el tema de las feeds, ya no se usen mucho, pero conozco a unos cuantos que aún tiran de ellas.

A grandes rasgos se trata de lo siguiente:

  • Un HTML dentro de un PHP que recibe las direcciones de correo de los usuarios.
  • Un Javascript que leerá cada cierto tiempo el formulario y realizará una llamada AJAX al servidor con la dirección de correo introducida.
  • Un script PHP que recibe la dirección, comprueba si es correcta, la almacena en la base de datos y manda un mensaje de que todo ha ido bien o de que ha habido error a la página web para que la muestre al usuario.

Use AJAX and PHP to Build your Mailing List

| | |

Laboratorio: carga de combos

ByLuis

Ayer nos preguntaban cómo cargar combos según lo que se seleccione en otro combo, y aunque no me quedó muy claro la duda que tenía, pues para intentar ayudarle, voy a explicar cómo hacerlo mediante tres posibilidades.

Primeramente explicaremos cómo hacerlo mediante el uso de iframes ocultos. Sí, no es nada web 2.0, pero no a todo el mundo se le da bien el desarrollo web, o no le gusta el uso de Ajax, o simplemente, como me pasa a mí, no nos dejan usar Ajax en los desarrollos del cliente (¡vete a saber por qué!).

Después lo haremos mediante Ajax (¡viva la web 2.0!), pero instanciando nosotros mismos el objeto XMLHttpRequest, para que los conceptos de Ajax no se pierdan dentro del uso de librerías, es importante conocer la base para luego usar una librería que te lo haga todo más fácil.

Y por último, ya no solo en plan web 2.0, sino en plan lo último de lo último, lo haremos usando la librería Prototype. Que la verdad sea dicha, no se trata de reinventar la rueda.

Read More “Laboratorio: carga de combos”

|

Laboratorio: descargas múltiples consecutivas mediante AJAX

ByLuis

Quizás el título parece un tanto extraño, pero quizás no es fácil resumirlo. Se trata de seleccionar varios archivos para bajar y que en vez de bajarlos todos a la vez, se vayan descargando de forma consecutiva, uno detrás de otro.

Para ello vamos a usar AJAX, para ir comprobando qué archivo es el que se está bajando. También usaremos un fichero que contendrá que archivos están en proceso de descargarse, siendo la primera fila del fichero el archivo actual. Cuando finalicen las descargas, se realizará una llamada para borrar el fichero auxiliar.

Cuando se termina de enviar un fichero, mediante el método que ya explicamos, se borrará del fichero auxiliar la primera fila (fichero acabado de enviar), por lo que el proceso AJAX encontrará que el fichero actual y el primero del fichero auxiliar son distintos, por lo que solicitará bajar el nuevo archivo.

Cuando un fichero se descarga, se deselecciona de la lista y se resalta para hacer ver al usuario el cambio de estado.

Read More “Laboratorio: descargas múltiples consecutivas mediante AJAX”

| |

Laboratorio: borrar filas de una tabla en HTML y en la BD

ByLuis

Ayer contábamos como borrar una fila de una tabla en HTML, y en los comentarios, Escael nos preguntaba cómo se podría hacer para que también se borrara de la base de datos.

Pues siguiendo con el modo en que se hace en la administración de WordPress, primero haremos el difuminado del color actual de la fila al color rojo y mientras se realiza el borrado en la tabla de la base de datos, haremos que parpadee el color de la fila. Cuando se haya realizado el borrado en la tabla de la base de datos, se eleminará la fila de la tabla HTML y se mostrará un mensaje de aviso de que se ha borrado de la BD.

Read More “Laboratorio: borrar filas de una tabla en HTML y en la BD”