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?