JavaScript

Los formularios web son probablemente la manera más fácil y común de enviar información desde nuestro computador (como usuarios) hacia el servidor. Por ello, muchas veces debemos establecer ciertas medidas que eviten los errores al procesar los datos. Una de esta medidas de validación la podemos lograr con Ajax.

Vía ajaxian, llego a este útil tutorial que nos explica como utilizar la librería Prototype para crear fácil y rápidamente la validación de formularios web con ajax.

La página del autor nos deja un ejemplo de lo excelente que queda el formulario web, por supuesto con algo de CSS.

Tutorial | Really easy field validation with Prototype

Uber-Uploader es un script hecho en PHP y Ajax que permite subir archivos al servidor mostrando una barra de progreso de carga y varios datos que informan su estado: Porcentaje subido, velocidad de transferencia y más. Se trata de un script muy completo, además de ser gratuito y muy fácil de instalar y/o modificar.

Vía | Digg

¿Haz pensado alguna vez, que utilizando JavaScript se puede crear un favicon distinto para cada página de un Sitio Web? Por si no lo sabes, un favicon es el icono que esta asociado a la bookmark de un sitio web y que algunas veces suele acompañar a la url en la barra de direcciones... si usas firefox u Opera te habrás percatado de su existencia.

¿Porqué un favicón dinámico? La idea de tener un favicon dinámico (cambiante) es la de proporcionar a tus lectores, por ejemplo, la posibilidad de identificar fácilmente un artículo, noticia ó una página en particular de todo tu sitio web.

Esto es lo que pensó Michael Mahemoff al crear una pequeña librería JavaScript llamada favicon.js. Y en su artículo Dynamic Favicons explica como usarla en nuestro website. El código es el siguiente:

var favicon = {

change: function(iconURL, optionalDocTitle) {
if (arguments.length==2) {
document.title = optionalDocTitle;
}
this.addLink(iconURL, "icon");
this.addLink(iconURL, "shortcut icon");
},

addLink: function(iconURL, relValue) {
var link = document.createElement("link");
link.type = "image/x-icon";
link.rel = relValue;
link.href = iconURL;
this.removeLinkIfExists(relValue);
this.docHead.appendChild(link);
},

removeLinkIfExists: function(relValue) {
var links = this.docHead.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var link = links[i];
if (link.type=="image/x-icon" && link.rel==relValue) {
this.docHead.removeChild(link);
return; // Assuming only one match at most.
}
}
},

docHead:document.getElementsByTagName("head")[0]
}

Y creó dos ejemplos para verlo en funcionamiento:

• Ejemplo 1: El favicon cambia cada vez que se escribe en el formulario.
• Ejemplo 2: El favicon cambia cada 5 segundos.

Fuente | Dynamic Favicons
Via | Digg

Cinco enlaces, relacionados al desarrollo con ajax, que pueden sernos de utilidad:

Durable v0.2: Es un nuevo tema para wordpress, que permite a los usuarios modificar, en tiempo real, cada elemento del diseño del blog. Muy recomendado.

JotForm: Es una completa aplicación ajax que nos permite crear formularios on line. Esta basado en JavaScript. Integra edición en tiempo real, drag and drop para crear los formularios de una manera fácil y divertida. Es necesario registrarse para descargar el código.

Blibs Image Editor: Es una herramienta hecha con JavaScript que nos permite editar imágenes en tiempo real, con muchas más herramientas que la muy difundida Pixoh, por ejemplo podemos escribir en la imagen.

Ajax Indicator: Un paquete de gifs animados que pueden utilizarse en las aplicaciones ajax para indicar que la petición se esta ejecutando.

Ajax Chess: Es una aplicación ajax para jugar ajedrez en línea, con chat incluido.

Cuando ajax es usado correctamente, se respeta la usabilidad, la accesibilidad y, lo más importante, se proporciona una agradable experiencia al usuario. Muchas veces, programarlo todo, principalmente si uno es nuevo en esto, suele llevar mucho tiempo. Pero ahora, tenemos un camino más fácil para añadir funcionalidades ajax a nuestro sitio web.

Dhtmlgoodies ofrece una gran colección de excelentes scripts de HTML dinámico y Ajax, los cuales podemos reutilizar gratuitamente. Además, vienen con instrucciones para ponerlos en práctica y una demostración en linea de como quedará el script en nuestra página web.

Para muestra, dos botones de esta gran librería: Una práctica encuesta con ajax y un drag and drop. Así como estos, hay muchos más ejemplos asombrosos .

Vía | Digg

Prototype es una librería JavaScript muy bien desarrollada y que nos libra de gran parte del trabajo asociado a crear páginas web altamente interactivas. Si haz buscado información recientemente, probablemente haz notado que su documentación es muy escasa.

En esta segunda parte del artículo escrito por Dan Webb: Painless JavaScript Using Prototype, nos introducimos al uso del objeto XMLHttpRequest y recopilamos los documentos publicados en la red, que nos serán de suma utilidad...