|

Escritorio AJAX estilo Netvibes

Interesante y extenso tutorial sobre cómo realizar un escritorio AJAX del estilo Netvibes. El escritorio del ejemplo consta de una barra de accesos directos y de widgets (ventanas que muestran información).
escritorio-ajax.png

El tutorial explica varios temas distintos, que juntos hacen posible el escritorio AJAX:

AJAX Desktop Tutorial

Vía / Pixel Groovy

|

Cosas que no hay que hacer cuando usas AJAX

Siempre es bueno aprender de todo, y una de las mejores formas de aprender es de los fallos, si son los tuyos, mejor, pero si son de otros, tambien bien. En este caso, se trata de un estudio sobre Live.com y algunas cosas que han encontrado que no son buenas a la hora de seguir.

  • Cuidado con las comunicaciones: el que AJAX se conecte al servidor para refrescar la página y no nos demos cuenta, tampoco quita que tengamos que estar conectando todo el tiempo. El número de conexiones repercute en el ancho de banda, lo cual puede ser negativo para el cliente y para el servidor.
  • Tratar con XML es lento: cierto que el XML es muy bueno para transmitir datos, es legible para el programador y para el servidor, pero pasearlo nos puede llevar demasiado tiempo. Posible recomendación: JSON.
  • Ir cargando la página poco a poco: las nuevas aplicaciones web suelen requerir de mucha programación, lo cual puede tardar en cargarse, y cuando si no se va mostrando algo, el usuario pensará que la página es lenta, por eso es preferible ir cargando lo necesario y luego ir cargando el resto, así el usuario no se desesperará.

Vía / ZDNet.com

| |

Comet paso a paso: pizarra colaborativa para páginas web

Hoy vamos a ver otro ejemplo de Comet, que a los que trabajamos en desarrollo web, nos puede venir muy bien, para cuando queremos testear una aplicación web de forma conjunta y online. También puede ser útil para realizar presentaciones.

Se trata de una pizarra colaborativa, para dibujar sobre páginas web. Cada usuario dibuja sobre el navegador y el resto de los usuarios ven lo que ha dibujado. Nada mejor para entenderlo que el siguiente video.

Se van a usar sobre todo tres cosas: comet, canvas y http://www.php.net/xml, todo sobre Firefox.

Read More “Comet paso a paso: pizarra colaborativa para páginas web”

|

AJAX paso a paso: validar enlaces

En ocasiones en nuestros blogs o páginas ponemos una referencia a otro sitio, que cuando el visitante intenta acceder, se encuentra con que la página ya no está disponible. Vamos a hacer una pequeña función que una vez cargada la página vaya comprobando mediante AJAX si el enlace es correcto y si no lo es, lo modificaremos para que cuando se pulse en él, aparezca un mensaje indicando que ya no es un enlace válido.

Read More “AJAX paso a paso: validar enlaces”

| | | |

Nueva versión de FireBug

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint

Script AJAX para crear pestañas

Aunque es más fácil hacer copy/paste de un script o simplemente usarlo, que ver cómo funciona por dentro, os recomiendo que le echéis un ojo a este script para crear pestañas mediante AJAX.
Si os fijáis, se trata de una lista ul que mediante estilos forma las pestañas. En cada uno de los elementos li hay un enlace a cada una de las páginas que queremos mostrar. También habrá un div que contendrá la página que queremos mostrar en su interior.
Lo más interesante para mí es que la idea que se suele tener de que AJAX tiene que apuntar a un script no es cierta, apunta a una url y obtiene el resultado, si es un script, el resultado que este devuelva, y si es una página HTML, el contenido de esta.
La segunda cosa que resaltaría es una forma de programar que me parece muy limpia, escribir el HTML sin Javascripts añadidos que son complicados de seguir (sobre todo eventos: onclick, onmouseover, …) y luego que el script general se encargue de modificar los elementos HTML como corresponda, en este caso coge los enlaces y les añade el evento onclick, el cual depende del contenido del atributo href y el atributo rel.
Ajax Tabs Content script
Vía / Digg

| | |

AJAX paso a paso: autocompletado en cajas de texto

Hace ya tiempo escribí en display: NONE cómo hacer que el texto se autocompletara en una caja de texto según se fuera escribiendo en ella. En esa entrada comentaba que la obtención de los datos, que era mediante Javascript, se podía realizar mediante AJAX. Hoy vamos a explicar cómo se haría esa llamada mediante AJAX.
ajax-autocompletado.png

Read More “AJAX paso a paso: autocompletado en cajas de texto”

|

Google Web Toolkit: Ajax con Google

google.pngGoogle acaba de lanzar un framework para realizar aplicaciones AJAX mediante Java de forma sencilla: Google Web Toolkit (GWT). GWT permite olvidarte de las dificultades que se producen cuando quieres dar al usuario el dinamismo de AJAX y el tener que cumplir estándares. Solo tienes que crear tu aplicación en Java y GWT se encargará de traducirla en Javascript y HTML.
Write AJAX applications in the Java language with Google Web Toolkit
Vía / Digg