| | | |

Nueva versión de FireBug

ByLuis

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

ByLuis

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

ByLuis

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

ByLuis

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

moo.ajax: clase javascript para usar AJAX

ByLuis

Para aquellos que conozcan moo.fx, les gustará saber, que sus autores han sacado una clase javascript para usar AJAX, funciona con prototipe.lite, la cual es proporcionada por moo.fx y su utilización es sencilla:

new ajax(url, opciones);

Las opciones vienen encerradas entre llaves y pueden ser:

  • method: método de llamada AJAX (GET o POST)
  • postBody: párametros si eliges el método POST
  • onComplete: la función que se ejecuta cuando acabe la petición
  • update: el elemento DOM o el ID del elemento que va a ser modificado para mostrar el resultado

Para aquellos que les guste moo.fx, existe también un generador mediante PHP: MooFx Generator

Vía / aNieto2K

Spry: el framework AJAX de Adobe

ByLuis

adobe-labs.pngAdobe ha sacado a la luz un framework para crear aplicaciones AJAX, el cual proporciona funcionalidades que permite a los diseñadores crear páginas que provean una mejor experiencia a sus usuarios.

La posibilidad mas destacable que ofrece es la de incorporar datos de un XML en nuestras páginas sin necesidad de refrescar la página, usando un poco de Javascript, CSS y HTML. El objetivo es que no sea necesario un gran conocimiento de diseño web para poder usarlo.

Demos

  • Photo Gallery: una galería de fotografías basado en XML.
  • Product Table: una tabla interactiva que muestra datos basados en XML.
  • RSS Reader: un lector de RSS que muestra como multiplos XML pueden crear una buena interfaz.

Spry framework for Ajax

Vía / Brajeshwar

|

Ajax paso a paso: el ahorcado

ByLuis

Seguimos con nuestro especial sobre AJAX. Esta vez vamos a intentar dar un ejemplo de interactividad con el usuario y nada mejor para ello que un juego: el ahorcado.
ahoracado.png

La verdad es que los juegos de este tipo ya no se estilan, pero es un ejemplo sencillo que podemos usar para otros casos, por ejemplo formularios, encuestas, … Se trata de que el usuario interactúa sin preocuparse y la aplicación reacciona según lo que haga el usuario.

Read More “Ajax paso a paso: el ahorcado”

| |

AJAX paso a paso: Información de imágenes

ByLuis

AJAX tiene muchas utilidades, y aunque a veces se abusa de ello, siempre nos puede dar agilidad a la hora de cargar la página, vamos a mostrar un caso de cómo cargar datos nuevos en la página una vez se haya finalizado la carga de la página en sí. Para ello, un ejemplo que nos viene perfecto es una galería de imágenes y cargar los datos de cada imágen de forma asíncrona, que puede ser costoso si se carga la página con los datos de las imágenes y que el usuario tenga que esperar a esta información, cuando es posible que no le interese. A parte, explicaremos otro tipo de método de recibir datos, esta vez mediante el método POST y un XML.
ajax-imagenes.png

Read More “AJAX paso a paso: Información de imágenes”