Dibujo de teclados realistas

He hecho un programa Perl que genera dibujos de teclados bastante realistas, en HTML+CSS. Muchos de los esquemas de teclado que encontraba no son realistas, por ejemplo porque ponen todas las teclas juntas, sin seperación entre ellas (cuado en uno real, están separadas). Para este programa, cogí un pie de rey y medí las proporciones entre medidas.

Se muestra sólo la parte central de un teclado de ordenador en español, no la alfanumérica. Opcionalmente se puede hacer que las teclas salgan sin separación entre ellas (¡pero entonces deja de ser realista!) y que las teclas tengan su nombre escrito encima (en las 4 esquinas, como en los reales).

Hacer esto en HTML+CSS es muy poco apropiado y no lo recomiendo. En este artículo explico por qué.

1 Ejemplos y código

Código del programa: dibuja.pl.html
Ejemplo del fichero que genera: tec.xhtml (y ver abajo)

2 Galería de teclados HTML de varios tamaños generados por dibuja.pl

3 Por qué este sistema es malo. Y alternativas

Usar HTML+CSS para esto es complejo por problemas con los decimales en medidas pixelares (ver: http://www.danielclemente.com/html/medios_px/). Por eso, no lo hagas a menos que te gusten los retos. Hay sistemas mucho mejores:

escribir SVG
escribir Postscript directamente
escribir PNG directamente (ej. con ImageMagick)
usar un programa que ya haga esto, como xkbprint
hasta un simple .txt con Unicode, como en http://linuxfr.org/~mildred/22731.html

4 Nuevas ideas para hacer (o más bien: no hacer)

El programa se podría ampliar de muchas formas:

a otros diseños de teclado (ej: con más teclas, menos, más grandes, más separadas, etc.)
a otras distribuciones de teclas dentro del mismo teclado (Dvorak, Qwerty, Colemak, Neo, Enti-Key++, Azerty,…)
al dibujo de todo el teclado incluyendo el alfanumérico, cursores y las teclas de función (F1, …)

Pero no recomiendo seguir con este sistema complejo de HTML+CSS (ver sección anterior). También sería inútil empezar una base de datos de diseños o de distribuciones, ya que éstas ya existen (ej: en el servidor gráfico X).

4.1 Mejoras posibles

entender y describir con tutoriales cómo se organizan en X los diseños de teclado (¿geometrías?) y las distribuciones de teclas (¿mapas?). Explicar qué son los .xkb, .xkm, los programas xmodmap, setxkbmap, loadkeys, …
crear un programa que, tomando un diseño y una distribución, genere un .svg. El programa xkbprint ya casi lo hace (pero crea .ps y no es muy fácil de usar). El programa xkeycaps también podría adaptarse para ello. Se ha de aceptar entrada también en forma de xmodmap.

Entre otras. Cualquier cosa que simplifique el tema de diseños de teclado va a ser de ayuda.

5 Trabajos relacionados

Otros intentos parecidos:

xkbprint es un programa que dibuja teclados, pero no en HTML+CSS
xkeycaps también muestra un teclado en pantalla, pero tampoco HTML+CSS
Teclado danés en HTML+CSS.
El mismo en SVG.
Más SVGs: variante de un Dvorak para el español.

Este programa lo fui haciendo en días sueltos entre 2005 y 2013; muy poco a poco.

Todo este programa y artículo y diseños están en dominio público: úsalos como quieras.