Chismes del Lince 17: La prueba de los dedos, un metrónomo para las manos
Mediodía en la cueva del Lince. El Lince está tocándose el pulgar con el índice, muy concentrado, con la lengua fuera y a destiempo.
—¿Qué haces? —pregunta la Gata.
—Gimnasia de dedos. Pero voy sin ritmo y me aburro.
—Pues yo te marco el ritmo. Tú haces, yo pito.
—¿Y si no llego?
—Entonces vas más lento. Aquí no se gana nada.
Introducción
El móvil ya ha escuchado, hablado, contado pasos, medido la voz, el temblor y el ritmo de unos toques, y recordado una pastilla. Ahora hace de entrenador de dedos.
El Chisme 17 es una pequeña tanda de tres ejercicios de manos:
- Tocar el pulgar con el índice, diez veces.
- Tocar el pulgar con el dedo medio, diez veces.
- Abrir y cerrar la mano, diez veces.
La app no mide nada y no usa la cámara. Hace tres cosas:
- Dice el ejercicio, en voz alta y escrito.
- Enseña una imagen del gesto.
- Marca el ritmo con un pitido, una palabra grande («TOCA», «ABRE») y un contador
3 / 10.
El ritmo se elige entre lento, normal y rápido. Reglas de siempre: botones enormes, nada de teclear, letra grande y todo lo que dice la Gata, escrito.
⚠️ Esto es una curiosidad técnica, no una terapia
No es un producto sanitario ni un ejercicio de rehabilitación. Son gestos sencillos con un metrónomo. No prometas beneficios, y si alguien tiene una pauta de su fisioterapeuta o su médico, esa es la que vale.
No mide ni guarda nada de la persona. Solo recuerda sus preferencias (ritmo, voz y pitido) en el navegador.
Si algo duele o molesta, se para.
Pruébala aquí (en su propia dirección, en el móvil): https://montesteam.org/app/chisme17dedos.html
Las imágenes de los ejercicios
Decir el ejercicio en voz alta y escribirlo está bien. Pero una imagen que enseñe el gesto lo hace mucho más claro. La app usa cuatro imágenes:
| Archivo | Qué enseña |
|---|---|
dedos-1-indice.png | Pulgar tocando el índice |
dedos-2-medio.png | Pulgar tocando el medio |
dedos-3-abierta.png | Mano abierta |
dedos-4-cerrada.png | Mano cerrada (las 3 y 4 se alternan solas) |
Si falta alguna imagen, la app enseña un emoji en su lugar. Así funciona aunque todavía no las tengas.
Cómo generarlas sin gastar los créditos
Los generadores de imágenes (Copilot Designer, por ejemplo) tienen límite diario. Así que, para no malgastar:
- Una clase, un prompt. Cada grupo genera una sola imagen. Cuatro grupos, cuatro imágenes, y nadie se queda sin créditos.
- Todos usan el mismo bloque de estilo (el de abajo) para que las cuatro imágenes parezcan de la misma serie.
- Pide fondo blanco liso y formato cuadrado.
- No pidas texto dentro de la imagen. A la IA se le dan fatal las letras.
- Regla de oro: cuenta los dedos. Las manos son la pesadilla de los generadores: salen manos con seis dedos, pulgares dobles o nudillos imposibles. Si tiene un dedo de más, no vale. Ese es el momento de gastar un crédito en repetirlo.
- Guarda la imagen con el nombre exacto de la tabla y súbela a la misma carpeta que la app (o cambia la constante
IMG).
El bloque de estilo (se pega al final de cada prompt)
Estilo: ilustración de cómic limpia y alegre, contornos gruesos negros, colores planos y cálidos (rojo bermejo, crema y amarillo), un solo objeto grande y centrado, fondo blanco liso, formato cuadrado, sin texto, sin letras, sin marcas de agua. La mano tiene exactamente cinco dedos.Los cuatro prompts
1. Pulgar con índice → dedos-1-indice.png
Una mano de lince de dibujos animados, grande y en primer plano, con el pulgar y el índice tocándose en forma de pinza perfecta, como si sujetara una miga de pan invisible. Una gafas de aviador diminutas descansan sobre el índice. Gesto muy claro.2. Pulgar con medio → dedos-2-medio.png
Una mano de gata de dibujos animados, grande y en primer plano, con el pulgar tocando la punta del dedo medio, el índice, el anular y el meñique estirados hacia arriba. Una mariposa curiosa se ha posado en el índice. Gesto muy claro.3. Mano abierta → dedos-3-abierta.png
Una mano de dibujos animados con la palma hacia nosotros y los cinco dedos muy abiertos y separados, como una estrella o una flor que se acaba de abrir. Pequeños destellos alrededor. Gesto muy claro.4. Mano cerrada → dedos-4-cerrada.png
La misma mano de dibujos animados del mismo color, pero con el puño bien cerrado, como un guante de boxeo pequeñito y decidido. Pequeñas líneas de energía alrededor. Gesto muy claro.Prompts graciosos para que el alumnado invente los suyos
Cambia el «objeto» y la mano se transforma. Probad estas ideas (y añadid el bloque de estilo):
- El cangrejo: «una mano convertida en un cangrejo que pellizca con la pinza, ojos saltones sobre el nudillo».
- El cocodrilo: «una mano abierta que es la boca de un cocodrilo simpático con dientes de dibujos animados».
- La flor: «una mano abierta de la que brotan pétalos, y un cierre que parece un capullo dormido».
- El títere: «una mano que habla como un títere de calcetín, con ojos pegados».
- El pulpo: «cinco dedos que son tentáculos de pulpo que se enroscan hasta hacer un puño».
- El Lince y la Gata: «el Lince y la Gata haciendo el mismo gesto, cada uno con su mano, mirándose con cara de competencia».
Para pensar en clase: ¿Qué prompt os dio más dedos de la cuenta? ¿Cómo se lo explicaríais a la IA para que lo corrija? ¿Qué os dice eso de cómo «ve» una IA una mano?
Cómo funciona por dentro
Elegir ritmo → ejercicio con imagen y voz → cuenta atrás 3-2-1 → metrónomo (pitido + palabra + contador) → siguiente ejercicio
- La persona elige el ritmo y pulsa Empezar.
- Para cada ejercicio, la Gata lo dice y lo escribe, y se ve la imagen. La persona pulsa Listo cuando tiene la mano preparada.
- Hay una cuenta atrás (3, 2, 1) con pitido.
- Después, un temporizador va marcando dos pasos por movimiento: «TOCA» (pitido agudo) y «ABRE» (pitido grave). La imagen se encoge y se atenúa en «ABRE»; en el ejercicio 3 se alternan las imágenes de mano cerrada y abierta.
- A los diez movimientos, pasa al siguiente ejercicio.
Los tres ritmos
| Ritmo | Un movimiento dura | Movimientos por minuto |
|---|---|---|
| Lento | 2,4 s | 25 |
| Normal | 1,6 s | 37,5 |
| Rápido | 1,0 s | 60 |
Cuatro decisiones de ingeniería
1. Un pitido que no necesita archivos. El sonido se genera con la Web Audio API: un oscilador a 880 Hz para «TOCA» y a 440 Hz para «ABRE», con un golpe corto que se apaga. Sin descargas y sin derechos de autor.
2. Dos pasos por movimiento. Un temporizador (setInterval) con medio periodo va alternando «cierra» y «abre». Cambiar el ritmo es cambiar un número.
3. Se oye y se ve. El pitido solo no basta: a alguien le puede costar oírlo, y a otra persona verlo. Por eso hay pitido, palabra grande, contador y cambio en la imagen. Y se puede quitar la voz o el pitido.
4. Ir lento no es perder. No hay puntuación ni tiempo ni «lo has hecho mal». Solo ritmo.
Los límites
- Un
setIntervalno es un reloj de precisión. Si el móvil está ocupado, el pitido puede desviarse unas décimas de segundo. - No comprueba que hagas el gesto. Marca el ritmo; no sabe qué hace tu mano. Lo quitamos a propósito.
- El audio y la voz dependen del móvil. Con el volumen bajo o el modo silencio, no suenan.
- Si la pantalla se apaga, el metrónomo se detiene.
- Las imágenes las generas tú. Si falta alguna, aparece un emoji.
Lo que todavía hay que comprobar en el móvil real
- ¿Se oye bien el pitido? ¿Molesta el agudo?
- ¿Son cómodos los tres ritmos o falta uno más lento?
- ¿Se entiende «TOCA / ABRE», o es mejor otro par de palabras?
- ¿Se leen bien las imágenes del gesto?
Para el aula
- Cambia el ritmo. Añade un ritmo «Muy lento» a
RITMOS. ¿Qué número le pones? - Calcula los movimientos por minuto. ¿Cómo sale 25 a partir de 2,4 s? Escribe la fórmula.
- Un pitido distinto. Cambia 880 y 440. ¿Qué pasa con la onda
squareotriangle? - Añade un ejercicio. Un ejercicio nuevo es una línea más en
EJ: «pulgar con anular», «cerrar el puño»… - Cuenta el error. Pon un cronómetro y mide cuánto dura un ejercicio de verdad. ¿Coincide con la cuenta?
- Haz tus imágenes. ¿Qué prompt os dio más dedos de la cuenta? ¿Cómo se lo explicaríais a la IA?
- Piensa en la ética. ¿Qué diferencia hay entre guiar un ejercicio y evaluar a quien lo hace?
Del aula a la calle: Aprendizaje-Servicio
La ruta de siempre: aprender → escuchar → construir y probar con acompañamiento → mejorar → devolver. Queremos ofrecérsela a Parkinson Sol Estepona y preguntar, sobre todo a profesionales y familias, si les sirve de algo. Puede que no, y también aprenderemos.
Lo que queremos aprender de las personas
- ¿Se entienden los ejercicios con la imagen y la voz?
- ¿Es cómodo el ritmo? ¿Cuál se elige más?
- ¿El pitido ayuda o agobia?
- ¿Qué ejercicios echarías de menos? ¿Y cuáles sobran?
Si alguien se siente incómodo, se para.
Paso 1: prepara las imágenes
Genera las cuatro imágenes con los prompts de arriba, guárdalas con los nombres de la tabla y súbelas a la misma carpeta que la app. Si las subes a otra, cambia const IMG="".
Paso 2: prepara la página
Este chisme no necesita Worker ni clave de API. Copia el código de la sección HTML y guárdalo como chisme17dedos.html en tu carpeta app. Lo que quizá quieras tocar está al principio del <script>:
const N=10; // movimientos por ejercicio
const IMG=""; // carpeta de las imágenes
const RITMOS=[{nom:"Lento",s:2.4},{nom:"Normal",s:1.6},{nom:"Rápido",s:1.0}];Paso 3: súbela y pruébala
Ábrela directamente en su dirección (no dentro de una entrada de WordPress), desde el móvil. Pulsa Empezar, escucha a la Gata, pulsa Listo y sigue el pitido.
Si algo falla
- No suena el pitido: sube el volumen, quita el modo silencio y toca la pantalla una vez (los navegadores no dejan sonar hasta que hay un toque).
- La Gata no habla: revisa el volumen y que «Voz» esté en «sí».
- No sale la imagen: comprueba el nombre del archivo y la carpeta. Mientras, verás un emoji.
- Se para a media sesión: la pantalla se ha apagado. Ajusta el tiempo de bloqueo.
Conclusión
Con un temporizador, un oscilador de audio y cuatro imágenes hemos hecho un entrenador de ritmo: ritmo → ejercicio → cuenta atrás → pitido + palabra + contador. Lo interesante son las decisiones: no usar la cámara cuando no hace falta, avisar con la vista y con el oído y no puntuar a nadie.
El Lince hizo los tres ejercicios a ritmo lento. La Gata, por cierto, no los hizo. Solo pitaba.
⚠️ ANTES DE PUBLICAR NADA, LEE ESTO
No es un producto sanitario ni una terapia. Es una prueba técnica de un centro educativo. No prometas beneficios que no hemos comprobado.
Si alguien tiene una pauta de su profesional sanitario, esa es la que vale.
Las imágenes están hechas con IA. Revisa que no salga ninguna persona real reconocible y que la mano tenga cinco dedos.
Si lo usas en un centro educativo, revisa las indicaciones de la persona responsable de protección de datos.
La tecnología es la parte fácil. Decidir cómo, con quién y para qué la usamos es el verdadero chisme.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>La prueba de los dedos</title>
<style>
:root{--ink:#1d1715;--bg:#f8f6f3;--bermejo:#a3261a;--ok:#17703a;--line:#ddd5cd;--mute:#5f524b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:20px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:560px;margin:0 auto;padding:18px 16px 40px;text-align:center}
h1{font-size:30px;line-height:1.15;margin:.3em 0 .4em;color:var(--bermejo);font-weight:800}
button{font:inherit;color:inherit}
:focus-visible{outline:4px solid #1b5fd1;outline-offset:2px}
.btn{display:block;width:100%;min-height:64px;margin:12px 0;border:2px solid var(--bermejo);border-radius:14px;background:#fff;color:var(--bermejo);font-weight:700;cursor:pointer}
.btn.on{background:var(--bermejo);color:#fff}
.btn.big{min-height:100px;font-size:30px;border-radius:22px;background:var(--ok);border-color:var(--ok);color:#fff}
.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0;text-align:left}
.note{font-size:16px;color:var(--mute)}
.row{display:flex;gap:10px}.row .btn{margin:6px 0;font-size:18px}
.ej img,.ej .fa{width:min(70vw,300px);height:min(70vw,300px);object-fit:contain;margin:0 auto;display:block;transition:transform .15s,opacity .15s}
.ej .fa{font-size:150px;line-height:1.8}
.ej.abre img,.ej.abre .fa{transform:scale(.8);opacity:.55}
#acc{font-size:56px;font-weight:800;color:var(--bermejo);min-height:1.2em}
#n{font-size:44px;font-weight:800;min-height:1.2em}
</style>
</head>
<body>
<main id="app"></main>
<script>
const $=s=>document.querySelector(s);
const esc=s=>String(s).replace(/[&<>"]/g,c=>({"&":"&","<":"<",">":">",'"':"""}[c]));
const ls={get(k,d){try{const v=JSON.parse(localStorage.getItem(k));return v==null?d:v}catch(e){return d}},set(k,v){try{localStorage.setItem(k,JSON.stringify(v))}catch(e){}}};
// ---- AJUSTES (tócalos en clase) ----
const N=10; // movimientos por ejercicio
const IMG=""; // carpeta de las imágenes ("" = la misma que esta página)
// segundos que dura un movimiento completo (cerrar + abrir)
const RITMOS=[{nom:"Lento",s:2.4},{nom:"Normal",s:1.6},{nom:"Rápido",s:1.0}];
// a = lo que se dice al cerrar, b = al abrir. img: una o dos imágenes (con dos, se alternan)
const EJ=[
{nom:"Pulgar con índice",voz:"Toca el pulgar con el índice y ábrelos. Diez veces, al ritmo del pitido.",fa:"👌",img:["dedos-1-indice.png"],a:"TOCA",b:"ABRE"},
{nom:"Pulgar con medio",voz:"Ahora toca el pulgar con el dedo medio y ábrelos. Diez veces.",fa:"🤏",img:["dedos-2-medio.png"],a:"TOCA",b:"ABRE"},
{nom:"Abrir y cerrar la mano",voz:"Ahora cierra la mano y ábrela. Diez veces.",fa:"🖐️",img:["dedos-4-cerrada.png","dedos-3-abierta.png"],a:"CIERRA",b:"ABRE"}
];
let S={fase:"inicio",k:0,ritmo:ls.get("dedos.ritmo",1),voz:ls.get("dedos.voz",true),son:ls.get("dedos.son",true)},tm=null,ac=null;
function speak(t){if(!S.voz||!window.speechSynthesis)return;speechSynthesis.cancel();const u=new SpeechSynthesisUtterance(t);u.lang="es-ES";u.rate=.9;speechSynthesis.speak(u)}
function pita(f,d){
if(!S.son)return;
try{ac=ac||new (window.AudioContext||window.webkitAudioContext)();
const o=ac.createOscillator(),g=ac.createGain();o.frequency.value=f;g.gain.value=.25;
o.connect(g);g.connect(ac.destination);o.start();g.gain.exponentialRampToValueAtTime(.001,ac.currentTime+d);o.stop(ac.currentTime+d)}catch(e){}
}
function set(k,v){S[k]=v;ls.set("dedos."+k,v);render()}
function empezar(){S.k=0;instr()}
function instr(){S.fase="instr";render();speak(EJ[S.k].voz)}
// Cuenta atrás 3-2-1 y después el metrónomo: dos pasos por movimiento (cerrar y abrir)
function ritmo(){
const e=EJ[S.k],T=RITMOS[S.ritmo].s*500;let c=3;
S.fase="cuenta";render();$("#acc").textContent=c;speak("Preparados");pita(500,.2);
tm=setInterval(()=>{
c--;
if(c>0){$("#acc").textContent=c;pita(500,.2);return}
clearInterval(tm);S.fase="ritmo";render();
let paso=0;
const tic=()=>{
if(paso>=N*2){clearInterval(tm);return siguiente()}
const cierra=paso%2===0;
$("#acc").textContent=cierra?e.a:e.b;
$("#n").textContent=(Math.floor(paso/2)+1)+" / "+N;
$("#ej").className="ej"+(cierra?"":" abre");
if(e.img.length>1)$("#im").src=IMG+e.img[cierra?0:1];
pita(cierra?880:440,.12);paso++;
};
tic();tm=setInterval(tic,T);
},1000);
}
function siguiente(){S.k++;if(S.k<EJ.length)instr();else{S.fase="fin";render();speak("Hecho. Muy bien.")}}
function parar(){clearInterval(tm);S.fase="inicio";if(window.speechSynthesis)speechSynthesis.cancel();render()}
function imgHtml(){const e=EJ[S.k];return '<div class="ej" id="ej"><div class="fa" id="fa">'+e.fa+'</div><img id="im" alt="" src="'+IMG+e.img[0]+'" onload="document.getElementById(\'fa\').style.display=\'none\'"></div>'}
function render(){
const e=EJ[S.k],a=$("#app");let h="";
if(S.fase==="inicio"){
h='<h1>La prueba de los dedos</h1><p class="note">Tres ejercicios cortos. La Gata te dice qué hacer y marca el ritmo con un pitido.</p>'+
'<p><b>Ritmo</b></p><div class="row">'+RITMOS.map((r,i)=>'<button class="btn'+(S.ritmo===i?" on":"")+'" onclick="set(\'ritmo\','+i+')">'+r.nom+'</button>').join("")+'</div>'+
'<button class="btn big" onclick="empezar()">Empezar</button>'+
'<div class="row"><button class="btn'+(S.voz?" on":"")+'" onclick="set(\'voz\','+!S.voz+')">Voz: '+(S.voz?"sí":"no")+'</button><button class="btn'+(S.son?" on":"")+'" onclick="set(\'son\','+!S.son+')">Pitido: '+(S.son?"sí":"no")+'</button></div>'+
'<p class="note">No es una prueba médica ni mide nada: solo guía unos ejercicios sencillos. Si algo te molesta o te duele, para. Hazlo con la mano que quieras y a tu ritmo.</p>';
}else if(S.fase==="instr"){
h='<p class="note">Ejercicio '+(S.k+1)+' de '+EJ.length+'</p><h1>'+esc(e.nom)+'</h1>'+imgHtml()+
'<div class="box" aria-live="polite"><b>Gata:</b> '+esc(e.voz)+'</div><button class="btn big" onclick="ritmo()">Listo</button><button class="btn" onclick="parar()">Salir</button>';
}else if(S.fase==="cuenta"||S.fase==="ritmo"){
h='<h1>'+esc(e.nom)+'</h1>'+imgHtml()+'<div id="acc" aria-live="assertive"></div><div id="n"></div><button class="btn" onclick="parar()">Parar</button>';
}else{
h='<h1>¡Hecho!</h1><div class="box">Has terminado los tres ejercicios. Mañana, otra vez, si te apetece.</div><button class="btn big" onclick="parar()">Volver al inicio</button>';
}
a.innerHTML=h;
}
render();
</script>
</body>
</html>
