Cómo funciona el temporizador

Esta página explica cómo lleva el tiempo el temporizador, cuándo cambian los colores y sonidos, y cómo lo revisamos.

Tiempo exacto

Los navegadores hacen más lentos o pausan los temporizadores de las pestañas que no estás viendo. Chrome, por ejemplo, limita los temporizadores en segundo plano a una vez por segundo, y cuando una pestaña lleva unos minutos oculta puede agruparlos a más o menos una vez por minuto. Un temporizador que cuenta pulsos se atrasaría cada vez que te cambias a tus diapositivas.

Por eso este temporizador nunca cuenta pulsos. Al presionar Iniciar guarda el momento exacto en que terminará la fase actual, usando el reloj monotónico del navegador (performance.now(), que no cambia aunque se ajuste la hora de la computadora). Cada vez que se actualiza la pantalla, resta la hora actual de esa hora final. Aunque una actualización llegue tarde, el tiempo restante es correcto.

En las rotaciones por estaciones, cada fase nueva se programa a partir del final de la fase anterior, no del momento en que el navegador notó que terminó. Así, una actualización tardía nunca acumula retraso en una rotación larga.

Al pausar se guarda el tiempo restante; al continuar se fija una nueva hora final. Presionar +1 min mueve la hora final un minuto más tarde.

Qué muestra la pantalla

Los números se redondean hacia arriba al segundo entero, así que un temporizador de 5 minutos muestra 5:00 al empezar y 0:01 hasta el final.
El disco es la fracción que queda de la fase actual. Empieza lleno y se encoge en el sentido de las manecillas del reloj.
Colores: verde mientras queda más del 50 %, amarillo del 50 % al 20 % y rojo en el último 20 %. El tiempo de cambio entre estaciones es morado. Si desactivas el cambio de color, el tiempo de trabajo se queda en verde.

Sonidos

Un aviso de dos notas cuando queda 1:00, solo en temporizadores de más de 90 segundos.
Tres pitidos cortos cuando quedan 3, 2 y 1 segundos.
Una campana ascendente de cuatro notas, dos veces, al final. Otro sonido de cuatro notas marca cada cambio de estación.
Los sonidos se generan en el navegador (Web Audio). Los navegadores solo permiten sonido después de un toque o una tecla, así que el sonido empieza cuando presionas Iniciar o el botón de la bocina.

Cálculo de las estaciones

Tiempo total = estaciones × tiempo por estación + (estaciones − 1) × tiempo de cambio. Por ejemplo, 4 estaciones de 15 minutos con cambios de 1 minuto dan 4 × 15 + 3 × 1 = 63 minutos. No hay cambio después de la última estación.

Pantalla y pantalla completa

Mientras corre el temporizador, la página pide mantener la pantalla encendida (donde el navegador lo permite) para que no se suspenda. Mostrar a la clase pide pantalla completa; en los dispositivos que no lo permiten, la página de todos modos oculta todos los controles.

Cómo lo probamos

Pruebas automáticas corren el núcleo del temporizador con actualizaciones que llegan solo una vez por minuto, como en una pestaña en segundo plano, y revisan que termine exactamente en el momento programado.
Las pruebas revisan que una actualización tardía durante una rotación no mueva la hora final de la siguiente estación, y que una pestaña dormida durante varias fases despierte en la fase correcta con el tiempo correcto.
Los totales de rotación se comparan con cálculos a mano, como el ejemplo de 63 minutos de arriba.
Una prueba en el navegador corre la página real con un reloj simulado que avanza varios minutos de golpe y revisa la pantalla y el mensaje final.
La versión en español usa exactamente el mismo código de cálculo; solo cambian los textos.

¿Preguntas o un problema con el tiempo? Cuéntanos.