Librerias isiAJAX

Es una libreria escrita en JavaScript para trabajar con AJAX. Tiene varias funciones que facilitan el trabajo con esta nueva forma de transferencia de datos. Una de las caracteristicas de isiAJAX esque no depende de ningun lenguaje web de servidor, funciona para cualquiera y no necesita, PHP, ASP ni JSP.

Es tambien ideal para combinar con otro proyecto que ya hice isiXML juntos forman la pareja perfecta para trabajar con AJAX y XML.

Entre los ejemplos que muestra tienen:

- Envio de comentarios
- Actualizacion de registros in situ
- Ejemplo usando base de datos y busquedas compleja
- Lector RSS

AJAX no es un fin, es un medio

Mucha gente dará por sentado que si alguien preocupado por temas de usabilidad y accesibilidad hace un artículo sobre AJAX es para concluir: “no uséis AJAX, es el demonio, AJAX no es accesible”.

Nada más lejos de mis intenciones. Me gusta AJAX, he trabajado con AJAX y recomiendo a menudo AJAX. Y aquí entran las matizaciones.

- Recomiendo AJAX para problemas concretos y siempre con sentido común.

- No recomiendo AJAX a toda costa, para todo, sólo porque los demás lo están usando o con el único afán de hacer alarde del dominio de la tecnología de moda. Usar AJAX con cualquier otro objetivo que no sea el de hacer más fácil, satisfactoria y productiva la experiencia del usuario, es simplemente una estupidez, y lo que es peor, un error que se descubre demasiado tarde.

En definitiva: AJAX no es un fin, es un medio para mejorar la experiencia del usuario. Parece evidente, pero un inquietante número de arquitectos y diseñadores software pierden la perspectiva.

Tablesorter: Ordenar tabla con jQuery

Tablesorter es un plugin para jQuery que convierte una tabla estándar HTML con etiquetas THEAD y TBODY en una tabla ordenable sin necesidad de recargar la página (AJAX). Tablesorter puede analizar y clasificar de manera satisfactoria muchos tipos de datos.

Características

- Ordenado de múltiples columnas.
- Ordenado de datos tipo: texto, URI, enteros, moneda, punto flotante, direcciones IP, fechas (ISO, formatos largos y cortos), hora e incluso un formato propio.
- Soporta etiquetas ROWSPAN y COLSPAN en TH (cabeceras).
- Soporta formato de ordenado secundario. Es decir, puede ordenar alfabeticamente y como formato secundario: ordenar por números.
- El tamaño del archivo 7.4KB.

articulo sacado de: ribosomatic

Phatfusion

Phatfusion es un sitio web donde encontramos muchas utilidades javascript-flash de gran calidad. Un lugar muy visitado por los desarrolladores web. Podemos encontrar:

- Image Menu
- Validate
- Lightbox
- Multibox
- Slider
- y muchos mas

Todos hechos con mootools con soporte para imágenes, video, flash, mp3's y html. Compatible con Firefox 2, IE6, IE7 y Safari.Realmente muy útil.

Taller de JavaScript: Ajax y manipulación del DOM

Estas diapositivas muestran paso a paso los conceptos resumidos y prácticos de JavaScript, Ajax, DOM y jQuery (en inglés).

View Upload your own

Aplicaciones AJAX interesantes

Algunas de las aplicaciones AJAX más interesantes que circulan por internet:

Kiko: Calendario online. Están preparando una API.
Backbase’s RSS Reader: Buen diseño, posibilidad de descargar la aplicación
BackPack: Gestor de proyectos (con un todo-list)
Writely: Un procesador de textos online, podemos exportar a formatos word y están pendientes de añadir funcionalidades para blogs y API.
Amazon Zuggest: Una especie de Google Suggest pero con Amazon.
Time Tracker: Gestor de tiempo
Del.icio.us Director: Gestor de links en del.icio.us
Backbase’s Information Portal: Portal tipo página de inicio, con noticias, el tiempo, etc…
Protopage: Otro portal similar al anterior, con posibilidad de agregar feeds.
Periodic Table of the Elements: Tabla periódica de elementos para estudiantes de química.
AJAX IM: Cliente tipo messenger vía web.
Tadalist: Otro todo list (cosas pendientes de hacer), lista de tareas pendientes.
24SevenOffice: un ERP/CRM impresionante, aunque de pago y solo via online. Podemos verlo funcionar aquí

También podemos encontrar algunos otros en: Ajaxian, Techcrunch o en Readwriteweb.

JavaScript: Compatibilidad de Firefox con IExplorer

Firefox tiende a cumplir con alegría la especificación de JavaScript actual (la 1.8 y en breve la 2.0, también llamada ECMAScript pues ECMA es la entidad encargada de estandarizar JavaScript), mientras que IE, como todo lo de Microsoft, se escora hacia lo propietario, utilizando formas de acceso a propiedades no estandarizadas o, incluso, inventándose nuevas. De hecho, la versión de JavaScript de Microsoft se llama JScript, siendo diferentes el conjunto de objetos y propiedades accesibles desde JavaScript y desde JScript (distintos árboles DOM).

Si se programa únicamente pensando en IE (JScript) queda en el aire qué pasaría con navegadores que, siendo compatibles con JavaScript, no lo sean con JScript: Opera, Safari, Netscape, Konkeror,... y un largo etcétera de los mackeros y linuxeros.

Sin embargo, si se lleva todo hacia JavaScript perdemos al navegador potencialmente más frecuente, el IE.

Solución: de compromiso, como siempre.

Se coge el Firefox y se le instala un parseador o intérprete de JavaScript con consola de errores (recomiendo la extensión Firebug, habilitando la detección de todos los errores posibles, incluso warnings). Ejecutamos la web en cuestión y vamos comprobando los fallos.

Por cada uno se ve la llamada equivalente estándar que debería funcionar y se ponen las dos opciones, con un if-then-else.

EJEMPLO (no funcionaría en Firefox):

var obj = null;

obj = document.all("nombreelemento");

document.all NO funciona en Firefox, pero sí en IE. Es común que la gente copie y pegue este código desde cualquier ejemplo de Internet. (En realidad, las últimas versiones de Firefox sí que son compatibles con la llamada document.all(“nombrelemento”), pero al interrogar al browser por la existencia del método document.all devuelve “false”, precisamente por compatibilidad con los estándares de JavaScript.)

CÓMO RESOLVERLO:

var obj = null;

if (document.all){ /* Requiere que los IDs sean únicos en la página y que no coincidan con el atributo NAME de otros elementos. DOM de JScript, IE.*/

obj = document.all["nombreelemento"];
} else if (document.getElementById){
/* Para navegadores que soporten el DOM W3C. Firefox. */
obj = document.getElementById("nombreelemento");
}


MÁS RÁPIDO AÚN (usando la forma abreviada del if-else):

var obj = document.all ? document.all("nombreelemento") : document.getElementById("nombreelemento");


OTRA POSIBILIDAD: que haya propiedades sin correspondencia, por ejemplo:
La tecla pulsada en IE se recoge en event.keyCode y en Firefox (y demás W3C compatibles) en event.which.

if (((document.all) ? event.keyCode : event.which)==13)

IE leerá el event.keyCode y Firefox event.which.


Alfonso Diego de Gea García.
Ingeniero Informático.

Prototype window class

Prototype window class libreria basada en Prototype, con la que podremos emular ventanas de cualquier entorno gráfico.

Con el manejo JavaScript y CSS nos permite emular ventanas dentro de páginas web. Dispone de varios temas y permite mover las ventanas creadas, redimensionarlas, crear alertas, cuadros de diálogo, cargar URLs externas o datos mediante AJAX.

MiniAjax.com

MiniAjax.com es un sitio web donde se exponen pequeños scripts que utilizan la tecnología AJAX.

El sitio que recopila librerias DHTML y Ajax gratuitas para los desarrolladores WEB esta aplicaciones podemos descargarlas y usarlas en cualquier proyecto que estemos desarrollando.

Una buen sitio para mantenernos al tanto de este tipo de scripts que, reconozcámoslo, no te van a hacer el trabajo pero pueden añadir un toque de “estilo” a tus desarrollos.

GCOEX X, escritorio web sobre Ajax

GCOE X es un entorno o escritorio web libre el cual se puede utilizar desde cualquier computadora. Para su funcionamiento no se necesita instalar plugins o algún programa ya que se ejecuta en cualquier navegador web que soporte Javascript (usa Ajax).

El entorno de GCOE X contiene aplicaciones como: chat, bloc de notas ,terminal, navegador web, y otros mas, es lo que se muestra en su demostracion. No hay duda que las aplicaciones web ganan terreno cada día, una de las principales ventajas es la utilizacion en cualquier momento y cualquier pc que tenga conexion a internet.

Autocompletar

Este es un ejempo de la tecnología AJAX, con la cual se pueden enviar y recibir datos al servidor sin tener que recargar toda la página.

Este ejemplo imita en parte el comportamiento de google suggest (al entrar en esa web, tendrás que teclear algo para ver el efecto).

Descarga el script

Mas de 450 utilidades en Ajax, Javascript y Dhtml

AjaxRain es un sitio que ofrece ejemplos y demos para descargar con tecnología Ajax (ide, librerías, demos, ejemplos, código fuente) sobre Ajax, Javascript y Dhtml; de momento existen mas 485 utilidades. Así que si estamos por desarrollar un proyecto en el que usemos javascript y demas cosas, seria bueno darle un vistazo y ver que utilidades nos puede ofecer.

Aprendiendo jQuery en 15 minutos

Vía Ajaxian, una pequeña presentacion acerca del uso de jQuery. Explica selectores CSS, manejo de eventos, Ajax entre otros.

Recuperando datos mediante la propiedad responseXML

El atributo responseXML devuelve una referéncia al cuerpo del documento descargado del servidor en una petición con XMLHttpRequest en formato XML.

Utilización

oDocumento = oXMLHttpRequest.responseXML;

oDocumento - Referéncia al cuerpo del objeto recibido.
oXMLHttpRequest - Objeto XMLHttpRequest

La propiedad responseXML se utiliza para tratar los datos recibidos en formato XML desde el servidor, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con readyStatechange sea igual a 4 (a punto).

Esta propiedad nos devolverá null siempre que la respuesta XMLdel servidor no tenga el encabezado text/xml, application/xml o acabe en +xml.

Utilizaremos las propiedades del Modelo de Objetos de Documento (DOM) para tratar los datos XML recibidos.

Ejemplo

Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest previamente y realizado una petición de un xml con marcas haremos que nos alerte el número de item's.

// Creamos la función
function fFuncion ()
{
// Si el estado es "A punto"
if ( oXMLHttpRequest.readyState == 4)
{
// Accedemos al documento XML
oDocumento = oXMLHttpRequest.responseXML.documentElement;
// Alertamos el numeto de item's
alert ( oDocumento.getElementsByTagName('item').length );
} }
// Definimos la función handler del evento
oXMLHttpRequest.onreadystatechange = fFuncion;

Recuperando datos mediante la propiedad responseText

Normalmente accederemos a la propiedad responseText cuando el objeto XMLHttpRequest nos informa que toda la información fue remitida por el servidor, esto ocurre cuando la propiedad readyState del objeto XMLHttpRequest almacena el valor 4.

El atributo responseText devuelve el texto del documento descargado del servidor en una petición con XMLHttpRequest.

Utilización

sDocumento = oXMLHttpRequest.responseText;
sDocumento - Cadena de caracteres con el texto del documento.
oXMLHttpRequest - Objeto XMLHttpRequest

La propiedad responseText se utiliza para tratar los datos recibidos desde el servidor que no tienen formato XML, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto).

Siempre que podamos intentaremos usar responseXML en lugar de responseText y XML para la los datos en lugar de texto plano.

// Creamos la función
function fFuncion ()
{
// Si el estado es "A punto"
if ( oXMLHttpRequest.readyState == 4)
{
// Alertamos el texto
alert ( oXMLHttpRequest.responseText );
}
}
// Definimos la función handler del evento
oXMLHttpRequest.onreadystatechange = fFuncion;

Realizar una petición con AJAX

Continuando con nuestro repaso sobre ajax , ahora veremos el primer paso para establecer la comunicación con el servidor haciendo la petición, posteriormente, el servidor nos preparará y devolverá una información que ya veremos más adelante como recibimos, tratamos e incorporamos en nuestra página.

Existen dos tipos de petición al servidor que explicaremos en la referéncia del método open, la petición síncrona y la asíncrona, pero por definición AJAX utiliza comunicación asíncrona que es la que explicaremos.

Realizando la petición al servidor

Utilizaremos los métodos open, onreadystatechange y send, que sirven respectivamente para preparar la petición, seleccionar la función de recepción e iniciar la petición.

Al método open, hay que pasarle el método de petición (GET) y la URL que se enviará al servidor y mediante la cual, el servidor, creará la respuesta que posteriormente leeremos.

// Creamos el objeto
ohttp = AJAXCrearObjeto();
// Preparamos la petición
ohttp.open('GET', 'archivo.txt');
// Preparamos la recepción
ohttp.onreadystatechange = leerDatos;
// Realizamos la petición
ohttp.send('' ");

Para que esto funcione, tendremos que haber declarado la función leerDatos para tratar los datos recibidos del servidor y mostrarlos al usuario, pero esto lo veremos más adelante.

Paso de parámetros

En la petición AJAX podemos pasar parámetros tanto por POST como por GET a nuestro servidor.Para pasar parametros por get ( por URL ) , usaremos una URL con parametros en la función open independientemente de usar el método GET o POST, por ejemplo:

// Creamos la variable parametro
parametro = 'Datos pasados por GET';
// Creamos el objeto
ohttp = AJAXCrearObjeto();
// Preparamos la petición con parametros
ohttp.open('GET', 'pagina.php?parametro=' + escape(parametro));
// Preparamos la recepción
ohttp.onreadystatechange = leerDatos;
// Realizamos la petición
ohttp.send(''");

Para pasarlos por POST, deberemos usar el método POST en la función open y pasar los parámetros desde la función send, veamos un ejemplo:

// Creamos la variable parametro
parametro = 'Datos pasados por POST';
// Creamos el objeto
ohttp = AJAXCrearObjeto();
// Preparamos la petición con parametros
ohttp.open('POST','pagina.php');
// Preparamos la recepción
ohttp.onreadystatechange = leerDatos;
// Realizamos la petición
ohttp.send( 'parametro=' + escape(parametro));

Este articulo es una entrada para algo mas grande que vendra.

Precargas para imágenes con CSS

Este ejemplo no viene mucho al caso de ajax pero buscando encontre este que la verdad no sabia como se hacia pero siempre se aprende algo nuevo no importa si es un ejemplo antiguo.



No hay nada más fastidioso que una conexión a Internet lenta. Sobre todo cuando nuestros usuarios navegan con ella y a veces ni siquiera saben que falta cargar una imagen que quizás nos llevo tiempo editar para ese post. Pero si deseamos que nuestros usuarios logren ver todas las imágenes de nuestros post aun cuando naveguen con conexiones lentas, existe una forma muy fácil de decirles a nuestros usuarios de forma visual de que algo esta faltando cargar en nuestro post. Por ejemplo agregando una imagen visual que les hará saber que la imagen se esta cargando en el post y de esta forma acaben viendo de que trata esa imagen.

Para agregar de fondo la imagen de “precarga” a nuestras imágenes solo necesitaremos esta línea muy simple de CSS que deberemos agregar nuestra hoja de estilo.

img { background: url(loading.gif) no-repeat 50% 50%; }

Bueno espero que les sirva es muy sencillo de utilizar y nada despreciable.

El Golpedegato: Meneados sobre AJAX

El Golpedegato: Meneados sobre AJAX

Objeto XMLHttpRequest

El objeto XMLHttpRequest es un elemento fundamental para la comunicación asincrónica con el servidor. Este objeto nos permite enviar y recibir información en formato XML y en general en cualquier formato .

La creación de un objeto de esta clase varía si se trata del Internet Explorer de Microsoft, ya que este no lo incorpora en JavaScript si no que se trata de una ActiveX:

if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su creación de la siguiente manera:

if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();

Ahora como vimos, seria mejor trabajor este parte en una funcion que nos retorne un objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador donde se esté ejecutando:

function nuevoAjax()

{

/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */

var xmlhttp=false;

try

{

// Creacion del objeto AJAX para navegadores no IE

xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e)

{

try

{

// Creacion del objet AJAX para IE

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(E) { xmlhttp=false; }

}

if (!xmlhttp && typeof XMLHttpRequest!="undefined")

{

xmlhttp=new XMLHttpRequest();

}

return xmlhttp;

}

Es decir la función nuevoAjax se encargará de retornarnos un objeto de la clase XMLHttpRequest.

Las propiedades principales del objeto XMLHttpRequest son:

• onreadystatechange Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado.
• readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser0 No inicializado (el método open no a sido llamado)
  - 1 Cargando (se llamó al método open)
  - 2 Cargado (se llamó al método send y ya tenemos la cabecera de la petición HTTP y el status)
  - 3 Interactivo (la propiedad responseText tiene datos parciales)
  - 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)
• responseText Almacena el string devuelto por el servidor, luego de haber hecho una petición.
• responseXML Similar a la anterior (responseText) con la diferencia que el string devuelto por el servidor se encuentra en formato XML.
  

Los métodos principales del objeto XMLHttpRequest son:

• open Abre un requerimiento HTTP al servidor.
• send Envía el requerimiento al servidor.

En el proximo les mostrare un ejemplo en el cual se daran cuenta de su funcionamiento.

Efecto de reflejo en imagenes

Hace unos dias estuve googleando y me tope con algo curioso que fue el poner ese efecto de reflejo en las imagenes que hoy en dia estan siendo muy usadas en varias webs.

Este script que permite agregar un efecto de reflejo o espejo a nuestras imágenes. Simplemente basta indicar el atributo id de una etiqueta img.

Podemos ver unos ejemplos en la blog del autor, como también descargar un ejemplo en el cual se maneja mas de una imagen.