Webmaster Libre

gRaphaël es una sencilla librería con la que insertar gráficos en tus sitios web será coser y cantar. Descarga el javascript, inclúyelo en tus páginas y con unas simples líneas de código podrás mostrar gráficos de tarta, de líneas, de puntos…

gRaphaël está bajo licencia MIT

enlace: gRaphaël

vía Web Resources Depot

Una forma interesante de darle un poco de vida a esas tablas que introducimos en nuestros sitios web para contener listados de, por ejemplo, productos. Con un poco de Prototype es francamente sencillo conseguir:

• Alternar el color de las filas
• Cambiar el color de fondo de la fila al pasar el ratón por encima
• Al hacer click en una columna se abre una ventana con información sobre la misma

La tabla que queremos mejorar es algo así:

Ahora colocamos el siguiente código Javascript en un archivo a parte, así podremos reutilizarlo y no hacer demasiado pesada la página con la tabla

var ListTable = Class.create();
ListTable.prototype = {
initialize: function(tableId, path) {
table = $(tableId);
Element.addClassName(table, ‘listTable’);
var odd = true;
$A(table.getElementsByTagName(‘TR’)).each(function(row){
if(row.id !== ”){
listRow = new ListRow(row, path, odd);
odd = !odd;
}
});
}
};

var ListRow = Class.create();
ListRow.prototype = {
initialize: function(row, path, odd) {
this.row = row;
this.path = path;
if(odd) {
this.addBehavior(‘ltOdd’, ‘ltOddOver’);
} else{
this.addBehavior(‘ltEven’, ‘ltEvenOver’);
}
},
addBehavior: function(clazz, classOver) {
Element.addClassName(this.row, clazz);
this.classOver = classOver;
this.row.onmouseover = this.handleOnMouseOver.bindAsEventListener(this);
this.row.onmouseout = this.handleOnMouseOut.bindAsEventListener(this);
this.row.onclick = this.handleOnClick.bindAsEventListener(this);
},
handleOnClick: function(event) {
location.href = this.path + ‘?id=’ + this.row.id;
},
handleOnMouseOver: function(event) {
Element.addClassName(this.row, this.classOver);
},
handleOnMouseOut: function(event) {
Element.removeClassName(this.row, this.classOver);
}
};

Añades el archivo prototype.js al directorio del javascript y listo.

Toda la explicación del «truco» en el artículo original, con un ejemplo para descargar de regalo: Enhance list tables with Prototype Javascript Framework

Open-jACOB Draw2D es una librería Javascript que te permite crear gráficos y diagramas. Su interfaz te permitirá dibujarlos directamente desde tu navegador, sin necesidad de instalar ningún software adicional.

Open-jACOB Draw2D es el componente de dibujo de Open-jACOB un editor de Workflow al puro estilo de Visio con la finalidad de probar que realmente puede hacerse totalmente online y sin necesidad de instalar plugins.

Open-jACOB Draw2D: http://www.openjacob.org/draw2d.html
Demo Interactiva: http://www.openjacob.org/draw2d/simple_interactive/index.html

Open-jACOB: http://www.openjacob.org/index.html

Vía Ajaxian

SWFUpload es una pequeña librería javascript/swf que te permitirá crear agradables diálogos de subida de archivos para tus aplicaciones web.

Características:

• Muestra sólo los tipos de archivo seleccionados en el diálogo
• Permite subir múltiples archivos a la vez presionando ctrl/shift-seleccion
• Activa funciones en Javascript al iniciar, cancelar, en progreso y finalizado
• Obtiene la información/tamaño del archivo antes de iniciar la subida
• Da estilo a los botones del modo que prefieras
• Crea barras de progreso/información usando XHTML y CSS válido
• Sin recargas de página, los archivos se muestran según terminan de subirse
• Funciona en todas las plataformas con soporte para Flash ( está hecho en Flash 8 )
• Se degrada a un formulario de upload HTML para navegadores sin Javascript o Flash

SWFUpload: http://labb.dev.mammon.se/swfupload/

Via Ajaxian

El otro día nos sorprendíamos con la librería Animator.js, del que se hacía eco Andrés Nieto que nos permitía crear excelentes efectos de animación de elementos de una página con CSS y Javascript.

Hoy descubro MochiKit.Animator, una versión totalmente renovada y vectorizada de la librería de Bernard Sumption, que genera complejas animaciones con un par de líneas de código y permite unos efectos realmente impresionantes.

MochiKit.Animator Demo: http://gr.ayre.st/~grayrest/animator/animator.html