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