En IBM nos ofrecen un artículo interesante sobre el rendimiento de estas aplicaciones y como medirlo y mejorarlo mediante Firebug e YSlow.

El tiempo de una llamada Ajax se centra en tres aspectos: tiempo de respuesta del servidor, tiempo de transferencia y tiempo de procesado en el cliente. Es importante bajar estos tiempos ya que así agilizaremos nuestras aplicaciones.

Reduce el número de llamadas HTTP, aunque en el cliente se puedan anular, en el servidor se procesan, por lo que es tiempo de proceso malgastado. También es interesante reducir el tamaño del contenido de la respuesta que devuelve el servidor, cuanto menos haya para mandar, menos se tarda en enviar y menos se tarda en procesar.

Una lectura interesante que nos ayudará paso a paso a mejorar nuestras aplicaciones.

Ajax performance analysis

AxsJAX añade accesibilidad según lo definido por la W3C ARIA, siendo necesarios los siguientes requisitos:

• Un navegador como Firefox 2.0 que soporte la W3C ARIA.
• Tecnologías que respondan correctamente a las mejoras de accesibilidad añadidas por la W3C ARIA.
• Alguna de las mejoras añadidas por AxsJAX dependen del soporte para las live regions, una característica que permite a las tecnologías como los screen readers tratar correctamente con actualizaciones asíncronas de partes de la página web.

El framework AxsJAX puede añadir accesibilidad a aplicaciones Web 2.0 existentes mediante las siguientes técnicas:

• Como un bookmarklet.
• Usando Greasemonkey.
• Usando Fire Vox.

AsxJax

Tan solo es necesario situar las fotografías en un directorio y ya dispondremos de un album, sin necesidad de crear thumbnails ya que Minishowcase se encarga de ello.

Disponible en varios idiomas, nos muestra las imágenes mediante lightbox y nos permite visualizarlas mediante un slideshow. A parte podemos compartir las galerías mediante enlaces permanentes.

Minishowcase

Vía / WebAppers

• Ajax es una herramienta, no un juguete: en muchos casos el uso de Ajax es totalmente innecesario.
• No se lleva bien con el botón back del navegador: este botón es necesario para la usabilidad y javascript no se lleva muy bien con él.
• No avisar de que se realiza una acción: cuando hago click en alguna zona de la página y se genera una acción, se debería avisar de ello para que el usuario sepa que se están actualizando datos.
• Dejar a los usuarios offline de lado: que cada vez haya más gente con conexión a internet, no quita que nos debamos olvidar de la gente que apenas hace uso de ella, por ello es necesario pensar que las páginas en Ajax muestran datos de forma dinámica, y que no se producirá el refresco de datos si el usuario está offline.
• Hacer esperar al usuario: la 'A' de Ajax es de asíncrono, no es necesario que el usuario haga algo para obtener datos, nos podemos adelantar a sus acciones e ir realizando peticiones para obtener esos datos y que el usuario no tenga que esperar la respuesta.
• Enviar información sensible de forma visible: en muchas ocasiones enviamos al navegador los mismos datos que se reciben en la aplicación, la diferencia es que la aplicación filtra esos datos y muestra los que convienen. En el navegador, aunque no se muestren todos, si se envían se podrán ver.
• Asumir que Ajax es una única plataforma: hay que testear correctamente las aplicaciones Ajax para que se puedan ver en las distintas plataformas que permiten Ajax, por ejemplo los distintos navegadores.
• Múltiples usuarios: si tu aplicación la usan varios usuarios a la vez, ten en cuenta que puede haber problemas al actualizar datos por parte de unos y visualizarlos por parte de otros.
• Excesivo trabajo para el navegador: a veces el uso de aplicaciones Ajax hace que el navegador tenga que realizar muchas tareas, lo cual puede no ser bueno para el rendimiento.
• Olvidarse de aquellos que no tienen Javascript: según las estadísticas son un 11%, por ello siempre hay que ofrecer una alternativa no Ajax.
• No usar enlaces: al refrescarse el contenido dinámicamente, nos olvidamos de los enlaces para poder acceder a esa información.
• Salirse de lo común en la usabilidad: al permitirnos realizar operaciones poco habituales, nos encontramos con la circunstancia de que esperemos que el usuario realice una acción que este no espera que se tenga que hacer así. La gente suele estar acostumbrada a realizar siempre lo mismo.
• No realizar cambios en cascada: nos olvidamos de que cuando cambia una parte de la página deben cambiar a su vez otras partes relacionadas.

Yo a parte añadiría algo que se suele decir con frecuencia pero que nunca está mal volver a repetirlo: el que asíncrono implica que si se lanzan varias peticiones al servidor, el orden de llegada no tiene que ser el mismo que el orden de envío, esto es muy importante a la hora de actualizar datos.

Ajax Mistakes

Las características que nos ofrece son las siguientes:

• Ajax: facilita la inclusión de Ajax en nuestra aplicación.
• Pencil: para poder actualizar el HTML de forma sencilla, ofrece una herramienta llamada Pencil, se trata de decir a Xaja donde es que se quiere escribir en el HTML.
• DOM Mapping: para manipular desde PHP el DOM del HTML.
• Libería de etiquetas: para hacer más sencillo el desarrollo de los programadores.
• Reverse Ajax: lo explicado anteriormente, que nos permite enviar datos al servidor.
• Base de datos: una herramienta para acceder de forma sencilla a los datos.

Xaja

Vía / International PHP Magazine

La diferencia entre este framework y los otros es que no toma control sobre toda tu aplicación web, sino solamente de la parte donde se necesita. Además, su core ocupa tan solo 12Kb, pudiendo admitir plugins para ampliar su funcionalidad.

jPOP

Vía / dzone

Ofrece soporte para XML, JSON y texto en las transacciones Ajax, a parte de funcionar para Safari, Firefox, IE y Opera.

Dentro de las novedades que ofrece la recién versión 1.0, nos encontramos con: facilidad para trabajar con formularios, debug, integración con Firebug.

My-BIC

Vía / PHPDeveloper.org

Actualmente está probado para los navegadores Mozilla, Firefox, Internet Explorer y Opera. Su uso parece muy sencillo En el código PHP debes indicar la función:

<?php
function miFuncion($texto){
   return $texto;
}
$plx = new PHPLiveX("miFuncion");
// También se puede hacer así
// $plx = new PHPLiveX();
// $plx->Export("miFuncion");
?>

Y luego en el HTML debes escribir lo siguiente:

<script type="text/javascript">
<? $plx->Run(); ?>
</script>

PHPLiveX

Vía / VT’s Tech Blog

Está diseñado para crear de forma rápida aplicaciones Ajax secillas, seguras y fáciles de mantener.

Se trata de crear funciones PHP que se encarguen de todo, no es necesario registrar callbacks, ni de importar otras funciones. Tan solo se escribe una función y se llama.

La seguridad que nos ofrece es debido a que las peticiones SAJA sólo son válidas si el usuario está actualmente en la página desde donde proviene la petición. A parte, para darle mayor seguridad, se puede encriptar los datos de entrada del usuario antes de que se envíen al servidor.

Tan solo ocupa 14K y 3.8K para el usuario final. No utiliza XML debido a que pesa demasiado y a que parsearlo requiere más proceso que con datos normales. No es necesario escribir código Javascript a no ser que quieras hacer algo fuera de lo común.

SAJA

Vía / Ajaxian

Entre los enlaces que nos ofrece encontramos tutoriales de Javascript, de los cuales me ha gustado A (Re)-Introduction to JavaScript. También nos ofrece un listado de enlaces sobre depuración de Javascript, yo la verdad me quedo con Firebug y me olvido del resto, pero bueno, no todo el mundo tiene que tener mis preferencias. Sobre el listado de editores de Javascript debo decir que es muy pobre, si mal no creo todos están basados en Eclipse (jDeveloper también lo está si mal no creo) y todos basados en el mundo Java.

La serie de enlaces sobre tutoriales de Ajax es extensa, y a mí me gusta recomendar todo lo que sea sobre Ajax y accesibilidad, algo bastante importante y que a veces olvidamos un poco.

También aporta enlaces para las librerías más conocidas que tratan Ajax, como pueden ser Scriptaculous, Prototype y Mootols.

Un lugar que tener en nuestros favoritos.

Ajax.solutoire.com

Vía / Proletarium

En algunas ocasiones no suele ser de nuestro agrado que usuarios accedan directamente a las URLs empleadas para Ajax.

Para evitar esta situación se puede usar un script sencillo. Se tomará en cuenta el valor de la variable de entorno HTTP_REFERER, la cual nos devuelve desde qué página se accede a nuestro script.

$ref = getenv('HTTP_REFERER');

Si el contenido de esta variable es false entonces es que se ha accedido directamente desde el navegador, si no, es que se accede desde una página, también habrá que comprobar que la página es la que nosotros queremos.

<?php
  $ref = getenv('HTTP_REFERER');
 
  if (!$ref || $ref != '[nuestra url]') {
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "xhtml1-transitional.dtd">
<html>
<head>
<title>Sentido Web - Redireccionamiento Ajax</title>
</head>
<body> 
<h1>Sentido Web - Redireccionamiento Ajax</h1>
<p><?php echo "Hola, son las ".date("H:i:s"); ?></p>
</body>
</html>
<?php
  } else {    
    echo "Hola, son las ".date("H:i:s");
	}
?>

En este caso mostraremos una página cuando no haya referer o no sea el que nosotros esperamos. También se podría hacer para que el referer estuviera en el servidor, pero eso lo dejo para que lo haga el que lo necesita.

Una funcionalidad parecida se podría usar por temas de accesibilidad, dependiendo de un parámetro que indique si se trata de una llamada Ajax o no, se devuelva la información para el script del cliente o se muestre la información en una página.

<a href="url-ajax.php" onclick="ajax('url-ajax.php?ajax=1')">Enlace</a>

En el caso de haber problemas de accesibilidad, el enlace accede a la página con la información. En caso contrario, ejecuta la funciona ajax(), indicándole que se trata de una llamada Ajax para que nos devuelva la información formateada, ya sea en XML o JSON o como queramos.

Entre los agregadores que utiliza, nos encontramos con del.icio.us, Digg, dzone, Ajaxian, furl.net y muchos otros, algunos de los cuales no tengo muy claro si los pondría, o al menos los situaría al final de la lista. Creo que es mejor que muestren los más específicos como dzone o Ajaxian que del.icio.us.

A parte también te muestra ofertas de trabajo relacionadas con la temática web 2.0.

XMLHttpRequest

Vía / PuntoGeek

Algunos os llevaréis las manos a la cabeza y no sin razón, pero la verdad es que a mí personalmente me vendría muy bien en ciertos proyectos en los que para ejecutar el más mínimo comando casi hay que enviar cien peticiones a la gente de redes encargada de los servidores de los proyectos. O cuando el acceso a telnet lo tienes restringido desde el trabajo.

Lo que está claro es que hay que añadirle toda la seguridad habida y por haber. En el artículo al que hago referencia, se pueden ver todos los controles de seguridad que hay que usar y copiar el script php necesario.

PHP and AJAX shell console

Aunque parezca mentira, se me ocurre una posible necesidad de esta libraría. Hay veces en el que proyectos grandes (y no muy organizados) se realizan en diversos lenguajes de programación y se puede dar la situación de que haya que acceder a la librería de Microsoft desde PHP.

La verdad es que es una posibilidad muy remota, pero aún así, alguna posibilidad ha tenido que pensar la gente de Microsoft para llevar a cabo este proyecto, porque no tiene mucho sentido crear un librería para usar un framework de Ajax hecho en .NET para usarlo con PHP, sobre todo cuando ya hay tantos frameworks para PHP que añaden esta funcionalidad y que son muy útiles.

Para quien tenga ánimos de usarla, comentarles que para ello es necesario instalar primero ASP.NET AJAX, y luego enlazar con la librería en PHP y en JS.

PHP for Microsoft AJAX Library

Vía / Brian Goldfarb's Blog

De todos los que muestran, los que a mí, personalmente, más me han gustado son:

• Prototype Window: permite abrir ventanas con contenido de otras urls, convertir capas en ventanas, abrir alertas, confirmaciones, y siendo posible que todas las ventanas se puedan mover, minimizar, maximizar y cerrar.
• Edit-in-Place with Ajax: permite modificar el contenido de una capa directamente, sin necesidad de formularios.
• Download dragable RSS boxes script: muestra ventanas con feeds, las cuales se puede mover, cerrar, editar y actualizar. Es estilo Netvibes.
• AJAX Fisheye List Widget: muestra una barra de herramientas con efecto ojo de pez.
• Amberjack site tours: nos facilita hacer una visita guiada de nuestro website.
• Slideshow Alternative: efecto de slideshow interesante.
• Digg - like spy script: efecto similar al spy de Digg.
• Unobtrusive table sort script: ordenación de tablas mediante selección de columnas.
• TurboDbAdmin: administrador de base de datos.

MiniAjax

Vía / Intenta