I finally got it, after a few days of debugging and testing I finally have the first release of a nice and open source virtual keyboard programmed in JavaScript for your webapps wich randomly moves inside a container for each keystroke.

Get the first (and beta) release of SVK v0.01 (Secure Virtual Keyboard). Decompress the files, and load kb.htm in your favourite web browser (right now, only supporting IE6 and FF1.5, but more browsers are coming…). One more thing… I’m Spanish as well as the keyboard image; but using any other keyboard shouldn’t be too hard (next release will include a much better documentation).

I first saw a nice keyboard like this in the Grupo Santander Supernet’s login system. The truth is that this is an open source implementation of their work. I have used some of their images, so until I got an answer from them about the license of the used images I have to warn you not to use them for any commercial purpose, just academic purpose.

My implementation uses the Prototype framework, but I will release a Prototype-free version in a few days (two weeks or so). I also use CSS to load and apply some filters to the images instead of loading all diferent images with JavaScript (check their application and check mine). We both use the map HTML tag to map the different keys of the keyboard, although I don’t really use the image of the img HTML tag; I have a transparent image where I use the map, but this image is inside a div which has the real keyboard image as a background (and this is where I apply the random movement as well as the opacity filter).

Because of my obsession with object-oriented development, I have found some issues with IE (what a surprise.. eh?): creating areas for the map with the DOM core function createElement() worked but IE didn’t do nothing when clicking; so I finally used the innerHTML property (check the _createMap method, non-working code is included but commented).

There’s still a lot of work to do, check the README file, but I think my approach is a good start to get a nice virtual keyboard and also secure. I encourage you to read the LICENSE terms (GNU/GPL v2) and remember what I said about the images (it would be nice if someone did a Creative Commons keyboard)

Happy downloading, and feedback (bugs, request features, fixes for known issues,…) is welcome.

Update [30-09-2006]: Check the demo page (Remember… only IE6 and FF1.5 are officially supported…)

Update [24-04-2008]: I’m working on a new version! And… demo page fixed (sorry for taking so long)

Vía Ajaxian, me entero de la aparición de una nueva librería, muy ligera (poco menos de 3KB), de efectos visuales en javascript llamada bytefx (Simple effects in few bytes).

En la web principal de la librería hay un pequeño API así como pequeños ejemplos de uso. No obstante, también tienen un par de páginas de muestra para ver lo que se puede hacer con la librería; aunque en estos momentos sólo funciona una de las dos.

Los efectos que se pueden generar con esta librería son:

• Filtrado alpha (alpha)
• Limpieza de intervalos entre transiciones (clear)
• Gradiente de color; sí como el gradiente de color que hace Wordpress (color)
• Arrastre de elementos (drag)
• Transición de imagen; crea una transición alpha de un elemento a otro (fade)
• Mover un elemento (move)
• Posicionar un elemento (position)
• Redimensionado de un elemento (size)

Es compatible con los siguientes exploradores web:

• IE 5.5+
• FF1+
• Konqueror 3.X+
• Opera9+
• Safari2+

…y algo menos compatible con:

• IE5
• Opera 7 y 8

Esta librería se asemeja a otras como script.aculo.us o moo.fx, aunque es bastante más simple pero útil para dar un poco de magia a nuestras webs; así que otra más a tener en cuenta a la hora de elegir la librería que usaremos en nuestros proyectos para crear los efectos gráficos

Me gusta mucho esta librería porque no exige el uso de la libreria prototype, vamos que no está basada en prototype, y de nuevo por su ligereza, ¿te había dicho que es muy ligera? (Menos de 3 KB)

A veces, no es necesario utilizar la librería más potente si podemos hacerlo con otra más simple, ¿para qué desperciar potencia que no tenemos intención de utilizar?

Estaba yo navegando por la web de Alcohol (sí… ya sé que es tarde, pero hasta el próximo lunes no empiezo las clases, así que tengo que aprovechar) y me he topado con el anuncio de que el hermano pequeño de Alcohol 120% es, desde hace 6 días (el 20 de éste mes), gratuito.

La licencia es para uso personal no comercial en una sóla máquina.

Para aquellos que no conozcan las maravillas de éste programa y su hermano mayor, se trata de un programa de copias de seguridad de CD’s y DVD’s así como de emulación de una o varias unidades de CD o DVD. Vamos, que el programa permite, teniendo una imagen de los discos (copia del contenido del disco físico en un fichero en el disco duro) de un juego de ordenador o de los de un programa, simular que hemos introducido los discos físicamente en la unidad de CD o DVD que podamos tener o no ;).

Utilizado con frecuencia para copiar juegos de ordenador (que suelen estar protegidos con fuertes protecciones para evitar las copias) porque permite realizar duplicados exactos. Pero, mejor que sea Alcohol-Soft quien te explique todas las características.

Las diferencias de esta versión frente a las de su hermano mayor son la imposibilidad de escribir a discos físicos una imagen de un disco (es decir, grabar una imagen a un CD ó DVD), el máximo de 6 unidades virtuales de CD ó DVD y… la instalación de una de esas engorrosas barras de búsqueda (Protection Database Search Toolbar), o lo que es lo mismo: spyware y ese es el motivo por el que titulo la entrada como “gratuito al 52%”; desconozco si se podrá quitar o incluso no instalar. Nada en este mundo es gratis, aunque es un avance.

En cualquier caso, feliz descarga a aquellos interesados.

Ya tengo practicamente todo listo para la conferencia/taller sobre AJAX que mañana, sábado daré en el Centro Cívico “Río Vena” de la ciudad de Burgos a las 19:30 dentro de las Cyberjornadas organizadas en paralelo a la Enredada 2006, que se celebra desde ayer hasta el próximo domingo en dicho edificio.

Qué decir, que todos estais invitados. Aunque, por desgracia, debido a que los recursos son limitados (bastante que los hay), el número máximo de personas que podrá realizar el taller es de 20; no obstante, durante los primeros 30-40 minutos de los 90-100 previstos haré una introducción con transparencias (transparencias que he hecho con LaTeX y casi muero en el intento…), y durante la misma, sólo hay que escuchar y mirar

De todas formas, no creo que haya ningún inconveniente por parte de la Organización (por la mía, por supuesto que no), en que si alguien está muy interesado, se acople a alguna de las 10 parejas que vayan. Y en cualquier caso, como lo que hagamos lo veremos en pantalla grande, pues también se podrá ver.

El domingo colgaré tanto la presentación en PDF (junto con los ficheros fuentes que he usado para hacerla) como los ejemplos prácticos que desarrollaremos durante el taller. No lo cuelgo ahora, porque todavía estoy rematándolo (si… ya lo sé… siempre a última hora…) y porque los primeros que lo verán… serán los que asistan
¡Nos vemos en Burgos! (espero que haga bueno… :S )

Actualización: Ya podeis descargar la presentación así como los ejemplos prácticos. Aprovecho para indicaros que ahora mismo estoy en la Enredada y estoy disfrutando a pesar de que la visita es fugaz. También el trato ha sido exquisito por parte de la Organización; algo que debo decir y agradecer. Y por supuesto, animar a todo aquel que no haya venido, que lo haga el próximo año.