#!/usr/bin/perl
# dibuja.pl:
# Este programa genera un dibujo de una distribución de teclado, mediante HTML+CSS
#
# 28-11-2005 Daniel Clemente Laboreo. Actualizado en: enero-2006, enero-2012, enero-2013
# Más información en: http://www.danielclemente.com/teclado/dibuja.html
#
# Pongo este código en dominio público; haz lo que quieras.
#
use strict;
use warnings;
use Getopt::Long;
my $ancho_total;
my $sinletras;
my $id_div;
my $fichero_destino;
GetOptions(
'anchura:i' => \$ancho_total,
'sinletras' => \$sinletras,
'id:s' => \$id_div,
# 'help!' => \$help,
) or instrucciones();
if($#ARGV + 1 != 1) {
print "\nMe has de decir el fichero de destino.\n\n";
instrucciones();
exit;
}
$fichero_destino=$ARGV[0];
#print "escribo en $fichero_destino\n"; exit;
sub instrucciones {
print << "EOF";
Este programa genera un fichero HTML con el dibujo de un teclado.
Uso:
$0 [--anchura 750] [--sinletras] [--id tec1] salida.html
Opciones:
--anchura 750: tamaño total del teclado
--sinletras: si lo pones, no saldrán etiquetas
--id tec1: meter todo en un <div> con ese id, y aplicar CSS sólo a ése (así puedes poner varios teclados en una misma página)
salida.html: fichero de destino (se sobreescribirá)
EOF
exit;
}
package Tie::Keys;
my @t4=(
# 1: normal 2: Shift 3: AltGr 4: AltGr+Shift (ésta no sale dibujada en teclados)
#
# En la tecla salen:
# /-----\
# | 2 4 |
# | 1 3 |
# \-----/
#
#
# Y en este array están en orden '1' '2' '3' '4'
# Fila 1
'o', 'a', '\\', '',
'1', '!', '|', '',
'2', '"', '@', '',
'3', '·', '#', '',
'4', '$', '', '',
'5', '%', '', '',
'6', '&', '¬', '',
'7', '/', '', '',
'8', '(', '', '',
'9', ')', '', '',
'0', '=', '', '',
'\'', '?', '', '',
'¡', '¿', '', '',
'<--', '', '', '',
# Fila 2
'Tab', '←', '', '',
'', 'Q', '', '',
'', 'W', '', '',
'', 'E', '', '',
'', 'R', '', '',
'', 'T', '', '',
'', 'Y', '', '',
'', 'U', '', '',
'', 'I', '', '',
'', 'O', '', '',
'', 'P', '', '',
'`', '^', '[', '',
'+', '*', ']', '',
'Enter', '↵', '', '',
# ↵ es ↵. También se puede usar: '─┘' (─┘)
#Fila 3
'Mayús', 'Bloq', '', '',
'', 'A', '', '',
'', 'S', '', '',
'', 'D', '', '',
'', 'F', '', '',
'', 'G', '', '',
'', 'H', '', '',
'', 'J', '', '',
'', 'K', '', '',
'', 'L', '', '',
'', 'Ñ', '', '',
'´', 'ö', '{', '',
'', 'ç', '}', '',
'', '', '', '',
# Fila 4
'↑', '', '', '',
'<', '>', '', '',
'', 'Z', '', '',
'', 'X', '', '',
'', 'C', '', '',
'', 'V', '', '',
'', 'B', '', '',
'', 'N', '', '',
'', 'M', '', '',
',', ';', '', '',
'.', ':', '', '',
'-', '_', '', '',
'↑', '', '', '',
# Fila 5
'Ctrl', '', '', '',
'-', '', '', '',
'Alt', '', '', '',
'', '', '', '', # redunda 'espacio'
'AltGr', '', '', '',
'-', '', '', '',
'-', '', '', '',
'Ctrl', '', '', '',
);
#
# 24
# 13
#
# Transformar de (1,2,3,4) a (2,4,1,3), que es más cómodo para escribirlo luego
my @t;
while ( my ($v1,$v2,$v3,$v4) = splice @t4,0,4 ) {
push @t, ($v2, $v4, $v1, $v3);
}
sub FETCH { shift @t; }
sub TIESCALAR {
my ($class, $value) = @_;
bless \$value => $class;
}
package main;
tie my $k, "Tie::Keys";
# Ahora, cada vez que se lee $k, devuelve el siguiente valor que toca escribir en el HTML (en orden 2,4,1,3)
# Ahora, sobre tipos de tecla y sus medidas:
# ------------------------------------------
#
# En mi teclado he visto los siguientes tipos de tecla:
#
# L: letra: a, b, c, 1, 2, 3, ...
# R: retroceso: la tecla de arriba a la derecha
# T: tabulador: 2a fila a la izquierda
# B: bloq_mayús: debajo del tabulador
# M1: mayús_izq: la tecla de mayúsculas de la izquierda, en cuarta fila
# M2: mayús_der: la tecla de mayúsculas de la derecha, en cuarta fila
# A: alt: Alt, AltGr, logotipos
# E: espacio: la barra espaciadora
#
# Les he dado nombres a cada una. Si juntas todas, puedes formar combinaciones como ALBERTM, MARBELT, LETRAMB, BLAMERT, BLATMER, ALTMERB, ELTAMBR, RBLTEMA, ... pero me decido por "TEMBLAR" como nombre para el conjunto :-)
#
# Además hay otras medidas:
# h: espacio horizontal entre tecla y tecla; fíjate en que es siempre el mismo en todo el teclado
# hv: espacio entre fila y fila
# altura: altura de una tecla; son un poco más altas que anchas
# fuente: tamaño (¿en píxels?) del tipo de letra usado para el nombre de la tecla
# ancho_total: desde el borde izquierdo del tabulador hasta el borde derecho del 'entrar', o sea, incluyendo bordes
# borde: (usada internamente): es la mitad del espacio entre tecla y tecla (h)
# curvatura: de las esquinas. Muchos teclados tienen esquinas redondeadas, y así las teclas no pinchan
# margen_izq_texto: (estético): distancia horizontal entre texto de la tecla y borde izquierdo de la tecla
# margen_sup_textodoble: (estético): distancia vertical entre texto de la tecla y borde superior de la tecla, en teclas en las que hay sitio para dos filas de texto
# margen_sup_textocentrado: (estético): distancia vertical entre texto de la tecla y borde superior de la tecla, en teclas cuyo texto está en el centro
# Después de medirlo de forma precisa, creo que mi teclado puede describirse como:
#
# Fila1: 13 L + 1 R + 14 h = ancho_total
# Fila2: 1 T + 12 L + 1 T + 14 h = ancho_total
# Fila3: 1 B + 12 L + 1 M1 + 14 h = ancho_total
# Fila4: 1 M1+ 11 L + 1 M2 + 13 h = ancho_total
# Fila5: 1 T + 2 A + 1 E + 3 A + 1 T + 8 h = ancho_total
#
# Notas:
# - He considerado el 'Entrar' como dos teclas, una en fila 2 (con tamaño del 'Tabulador') y otra en fila 3 (con tamaño del 'Mayúsculas izquierdo').
# - ¡¡ Todas las filas miden lo mismo de ancho !! Hay que conseguir que en el programa también sea así.
# - Para el 'h' no sólo he contado huecos, sino que he sumado 1 ya que tanto a la izquierda del 'tabulador' como a la derecha del 'entrar' hay medio hueco
# El usuario da un ancho_total en píxels. El programa ha de calcular cada medida (las de TEMBLAR y el resto).
# No se puede intentar "resolver" el sistema de ecuaciones anterior porque hay más incógnitas que ecuaciones. Hay que aportar nuevos datos, por ejemplo en forma de relaciones medidas en un teclado real.
# Después de haber probado muchos, el método elegido para este programa es:
# 1. El usuario escribe en el programa únicamente:
# - la medida del ancho total del teclado (en píxels). Es también la medida de la "caja donde estará contenido el teclado".
# - la relación de cada variable (de TEMBLAR etc.) respecto a ancho_total. Por ejemplo, E=0.362280701754*ancho_total (el 'espacio' es un 36'22% de toda la anchura del teclado), o L=0.0456140350877*ancho_total (el ancho de una tecla normal es un 4'56% del total). Esto se ha calculado de forma precisa a partir de medidas (bastante precisas) de un teclado real.
# 2. El programa usa estos factores para calcular el tamaño teórico en píxels de cada medida (TEMBLAR etc.). Como se tienen todas las relaciones, el cálculo es directo.
# 3. Desgraciadamente y no de buen gusto se hacen pequeños retoques para que los cálculos teóricos se puedan mostrar en la pantalla (ver sección sobre "redondeo" más abajo).
# 4. El programa escribe el código HTML con las teclas, y un código CSS (hecho a medida) que hace que parezcan un teclado.
#
# Problema del redondeo:
# ----------------------
# Resulta que en una pantalla no se puede distinguir entre una línea de 1px y otra de 1.2px (ya que no se puede encender sólo un trozo de píxel). Lo que hace Firefox es: un borde escrito como de 1px a 1.4px medirá 1 píxel, pero uno de 1.5px a 2px se verá como uno 2 píxels.
#
# Sobre este problema del redondeo escribí unos resultados y un programa para probarlo: http://www.danielclemente.com/html/medios_px/
#
# El redondeo es un problema que nos afecta, porque si pones 10 veces una tecla de 30.4 píxels, creerás que en total mide 304 píxels, pero el navegador estará mostrando sólo 300, y la fila no cuadrará con el resto de filas.
# Hay que redondear el número (quitar decimales). En concreto hay que redondear cada uno de los valores calculados por medio de las relaciones, pues son los valores en píxels de cada elemento que hay que representar en pantalla.
# Lo malo es que al redondear, ya no se conseguirá la anchura_total pedida por el usuario, sino una distinta (más grande o más pequeña). Lo peor es que es distinta para cada fila, y por tanto no es viable lo de hacer que TODO el teclado tenga una anchura_total un poco mayor o menor a la pedida. Por tanto, la única alternativa es retocar el tamaño de algunas teclas hasta que cada fila mida lo mismo.
# Pero cuidado, al cambiar ligeramente una tecla como por ejemplo el 'mayúsculas izquierdo' de la fila 4, eso hará que la fila 3 cambie de tamaño, pues la 3 también usa M1 para la parte inferior del 'entrar'. En vez de hacer eso, en la fila 4 habría que cambiar la tecla M2, que no tiene efectos secundarios.
# Casi todas las filas contienen una tecla que se puede cambiar sin afectar al resto de filas:
# Fila1: R
# Fila2: ....ninguna; es la única excepción. tiene T, pero T sale en la 5 también
# Fila3: B
# Fila4: M2
# Fila5: E
#
# (Ver fórmulas más arriba).
# Para arreglar la excepción de la segunda fila, lo que hago es tratar el tabulador (a la izquierda) como una excepción, que en ese lugar puede medir algo máso algo menos que en los otros. Probé como alternativa tocar no el Tab sino la parte superior del 'entrar' (que debería medir T) pero es inviable, pues una modificación en la tecla „entrar“ la puede destrozar y quitarle esa forma de L invertida.
#
#
# Tomar datos del usuario, poner predeterminados
$ancho_total||=750; # en píxels
# Prueba con distintas medidas (no sólo 750px) para encontrar fallos de medidas. La tecla más maltratada es la „entrar“
#$ancho_total=1050;
#$ancho_total=300;
$id_div||="tec1";
# Medidas
my %medidas=(); # Se calcularán luego
#my ($T,$E,$M1,$M2,$B,$L,$A,$R); # Se calcularán luego
#my ($h,$hv,$alt,$fuente);
# Razones en función de ancho_total
# Tomadas de un teclado Logitech Y-SU61 el 4-10-2007 por Daniel Clemente y un 'pie de rey'.
my %razones = (
L => 13/285,
R => 32/285,
T => 22.5/285,
B => 27/285, # calculado teóricamente pues la tecla tiene un montículo más pequeño, de 22.5 mm
A => 17.75/285,
M1 => 18/285,
M2 => 46/285,
E => 103.25/285,
#
h => 6/285, # separación horizontal entre tecla y tecla
hv => 5/285, # separación vertical entre fila y fila
altura => 15/285, # de cada tecla
fuente => 8/400, # probando a ojo para que quede bien
);
#
# Calcular medidas a partir de las razones y el ancho total
foreach my $tipo (keys %razones) {
$medidas{$tipo}=$ancho_total*$razones{$tipo};
}
$medidas{borde}=$medidas{h}/2;
# ¡¡¡¡Atención!!!! En esta división /2 aparecen decimales en „borde“. Por tanto luego toca redondear „borde“ *Y USARLA* (no usar ya „h“, sino „borde“). Perdí muchas horas hasta que descubrí esto.
#
## Nota: el borde ha de ser función del tamaño de tecla. No puede ser fijo, porque entonces no cuadrarán las teclas. Por ejemplo, si lo aumentas mucho, la cuarta fila (emp. por. arr.) crecerá mucho más que la quinta, porque tiene muchos más huecos. En este caso es obligatorio hacer un redondeo brusco.
# Medidas puramente estéticas. Las he elegido a ojo para que queden bien; no las he medido pues hay mucha variedad
$medidas{curvatura}=$medidas{altura}/8;
#$medidas{curvatura}=0; # si no te gusta la moda de las „esquinas redondeadas“, ponle 0
$medidas{margen_sup_textodoble}=$medidas{altura}/11; # BONUS: revisar
$medidas{margen_sup_textocentrado}=$medidas{altura}/4; # BONUS: revisar
$medidas{margen_izq_texto}=$medidas{altura}/9; # BONUS: revisar
print "Las razones usadas fueron @{[%razones]}. FIN.\n";
print "Las medidas calculadas para anchura $ancho_total fueron:\n@{[%medidas]}\n. FIN.\n";
# Toca redondeo y luego el error se repartirá entre los ajuste_f1, ajuste_f2, … ajuste_f5
# Ver en cdv la versión en que el error se intenta repartir entre las propias medidas base (volviendo a cambiar eso las proporciones de fila y por tanto el error).
if (1) {
foreach my $tipo (keys %medidas) {
$medidas{$tipo}=sprintf ("%.0f",$medidas{$tipo});
}
print "Las medidas redondeadas fueron:\n@{[%medidas]}\n. FIN.\n";
} else {print "No hago redondeo\n";}
my @errores=
(
$ancho_total - (13*$medidas{L}+1*$medidas{R}+(2*14*$medidas{borde})),
$ancho_total - (2*$medidas{T}+12*$medidas{L}+(2*14*$medidas{borde})),
$ancho_total - (1*$medidas{B}+12*$medidas{L}+1*$medidas{M1}+(2*14*$medidas{borde})),
$ancho_total - (1*$medidas{M1}+11*$medidas{L}+1*$medidas{M2}+(2*13*$medidas{borde})),
$ancho_total - (2*$medidas{T}+5*$medidas{A}+1*$medidas{E}+(2*8*$medidas{borde})),
);
print "El error es en cada fila: @errores\n";
my @finales=(
(13*$medidas{L}+($medidas{R}+$errores[0])+(2*14*$medidas{borde})),
(1*$medidas{T}+($medidas{T}+$errores[1])+12*$medidas{L}+(2*14*$medidas{borde})),
(($medidas{B}+$errores[2])+12*$medidas{L}+1*$medidas{M1}+(2*14*$medidas{borde})),
(1*$medidas{M1}+11*$medidas{L}+($medidas{M2}+$errores[3])+(2*13*$medidas{borde})),
(2*$medidas{T}+5*$medidas{A}+($medidas{E}+$errores[4])+(2*8*$medidas{borde})),
);
print "Con esto, las medidas quedan: @finales (han de ser todas iguales).\n";
# Escribir el HTML (fijo) y el CSS con los valores calculados
open (FICHI, ">$fichero_destino") or die("No puedo abrir fichero de destino");
print FICHI << "FINAL";
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dibujo de teclado</title>
<style type="text/css">/*<![CDATA[*/
/* Página entera */
body {
/* overflow: scroll;
white-space:nowrap;
*/
}
/* Marco que contiene las 5 filas de teclas */
#${id_div} {
width: @{[${ancho_total}+0]}px;
/* ¡sin height! */
margin: 0 auto;
border:5px solid black;
background: black;
line-height:0;
border-radius:3px;
}
/* Salto de línea al cambiar de fila */
#${id_div}>br, #${id_div}>div>br {clear:both;}
/* Todas las teclas tienen estas propiedades: */
div[id="${id_div}"]>div { /* el "id" es por la "specifity" (ver estándar) */
float:left;
line-height:100%;
background: #444;
color: #ddc;
border: $medidas{borde}px outset gray;
height:$medidas{altura}px;
width:$medidas{L}px;
font-size:$medidas{fuente}px;
font-family:sans-serif;
/* font-weight:bold; mucho mejor SIN negrita */
border-radius: $medidas{curvatura}px;
}
/* Anchuras de las teclas no cuadradas. */
#${id_div} .r1k14 {width: $medidas{R}px;}
#${id_div} .r2k01, #${id_div} .r2k14, #${id_div} .r5k01, #${id_div} .r5k08 {width: $medidas{T}px;}
#${id_div} .r3k01 {width: $medidas{B}px;}
#${id_div} .r3k14, #${id_div} .r4k01 {width: $medidas{M1}px;}
#${id_div} .r4k13 {width: $medidas{M2}px;}
#${id_div} .r5k02, #${id_div} .r5k03, #${id_div} .r5k05, #${id_div} .r5k06, #${id_div} .r5k07 {width: $medidas{A}px;}
#${id_div} .r5k04 {width: $medidas{E}px;}
/* Redefinición de anchuras para las 5 teclas (una por fila) que se pueden alargar/reducir para consumir el error de redondeo de cada fila (para que no se note) */
#${id_div} .r1k14 {width: @{[ $medidas{R}+$errores[0] ]}px;}
#${id_div} .r2k01 {width: @{[ $medidas{T}+$errores[1] ]}px;}
#${id_div} .r3k01 {width: @{[ $medidas{B}+$errores[2] ]}px;}
#${id_div} .r4k13 {width: @{[ $medidas{M2}+$errores[3] ]}px;}
#${id_div} .r5k04 {width: @{[ $medidas{E}+$errores[4] ]}px;}
/* Arreglo para la parte de abajo del Enter */
#${id_div} .r3k14 {background: noooooo-white; border-top-width:0; margin-top:-$medidas{borde}px; padding-top:@{[ $medidas{borde}*2 ]}px; }
/* Si quieres ocultar las 3 teclas logo de la fila 5, comenta esto: */
/*
#${id_div} .r5k02, #${id_div} .r5k06, #${id_div} .r5k07 {visibility:hidden;}
*/
/* Pone un nombre en cada esquina de la tecla */
#${id_div}>div>span:first-child , #${id_div}>div>br+span { float: left; background: nooo-#ccf; }
#${id_div}>div>span:first-child+span, #${id_div}>div>br+span+span { float: right; background: noooo-#ffc; }
/* estilos para todos los nombres de tecla */
body #${id_div}>div>span {
@{[ $sinletras?"display:none;":"" ]}
padding-top:$medidas{margen_sup_textodoble}px;
padding-left:$medidas{margen_izq_texto}px;
}
/* El nombre que sale en el tecla Espacio, centrado */
/* hay que quitar el float para que tenga efecto */
#${id_div} .r5k04 {text-align:center;}
#${id_div}>div.r5k04 > span {float:none;}
/* En algunas teclas no hay 4 nombres, sino sólo uno, en el centro.
La primera regla oculta los 4 span, y la segunda recoloca el primero */
#${id_div} .r1k14>*,
#${id_div} .r2k01>*,
#${id_div} .r4k01>*, #${id_div} .r4k13>*,
#${id_div} .r5k01>*, #${id_div} .r5k03>*, #${id_div} .r5k04>*, #${id_div} .r5k05>*, #${id_div} .r5k08>*
{display:none;}
#${id_div} .r1k14>br+span,
#${id_div} .r2k01>br+span,
#${id_div} .r4k01>br+span, #${id_div} .r4k13>br+span,
#${id_div} .r5k01>br+span, #${id_div} .r5k03>br+span, #${id_div} .r5k04>br+span, #${id_div} .r5k05>br+span, #${id_div} .r5k08>br+span
{ display: inline; float:none; position:relative;top:$medidas{margen_sup_textocentrado}px;}
/* Fin */
/*]]>*/</style>
</head>
<body>
<!--
<div style="width:${ancho_total}px;border:2px solid red;">
<br />
</div>
-->
<!-- El código HTML es todo igual; la magia se hace en el CSS -->
<div id="${id_div}">
<!--
1: 14
2: 13+enter
3: 13+enter
4: 13
5: 8
-->
<div class="r1k01">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k02">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k03">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k04">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k05">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k06">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k07">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k08">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k09">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k10">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k11">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k12">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k13">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r1k14">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<br />
<div class="r2k01">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k02">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k03">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k04">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k05">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k06">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k07">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k08">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k09">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k10">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k11">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k12">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k13">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r2k14">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<br />
<div class="r3k01">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k02">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k03">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k04">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k05">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k06">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k07">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k08">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k09">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k10">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k11">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k12">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k13">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r3k14">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<br />
<div class="r4k01">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k02">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k03">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k04">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k05">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k06">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k07">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k08">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k09">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k10">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k11">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k12">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r4k13">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<br />
<div class="r5k01">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k02">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k03">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k04">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k05">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k06">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k07">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<div class="r5k08">
<span>$k</span><span>$k</span> <br /> <span>$k</span><span>$k</span> <br />
</div>
<br />
</div>
<!-- <p>Hola</p> -->
</body>
</html>
FINAL
close(FICHI);
print "\nGrabado todo en $fichero_destino\n";
exit;
# Queda por hacer:
# - centrar bien los textos de dentro de las letras, en todos los casos
# - hacer bonito
syntax highlighted by Code2HTML, v. 0.9.1