Practice Log n Share

Septiembre de 2026

@@ ++ [] [] @@ [] ++ [] ++ ++ ++ ++ @@ ++ ## ## ## [] [] [] [] [] [] [] [] []
## @@ [] [] @@ ++ [] ## @@ ++ ## [] ++ @@ ++ ++ @@ [] [] [] [] [] [] [] [] []
++ @@ ## [] ++ ## ## ## @@ ## ++ ## ## ## ++ @@ ## [] [] [] [] [] [] [] [] []
@@ ++ ## [] @@ ## @@ @@ ## ++ ++ ++ ++ ## [] ## ## [] [] [] [] [] [] [] [] []
## [] ++ @@ [] @@ @@ @@ @@ [] ## ++ ## ## @@ ++ [] [] [] [] [] [] [] [] [] []
++ [] ## ## @@ ## @@ @@ ## @@ [] ## ++ @@ @@ ++ [] [] [] [] [] [] [] [] [] []
++ ++ @@ @@ ++ ++ [] ## ## @@ [] [] @@ [] @@ ++ [] [] [] [] [] [] [] [] [] []

Resumen

Registrar la práctica con un toque y mostrar la misma pantalla al profesor en clase. Ideé y diseñé esta app para iPhone para mi propia práctica de saxofón, y la implementé en colaboración con IA.

Pantalla de registro. Una cuadrícula del historial encabeza la barra de hoy (54 minutos en total) y las tarjetas de categorías. La práctica de piezas lleva más de 27 minutos en curso, resaltada con un color más claro y un contorno blanco. — Registro a la izquierda, compartir a la derecha. Un toque en una categoría inicia el cronómetro; en clase se muestra el resumen de la práctica entre clases. Las pantallas usan datos ficticios ilustrativos. Las capturas muestran la interfaz original en japonés.

Pantalla para compartir. Del día de la clase, el 17 de septiembre, al 24: 4 horas y 38 minutos en total, barras por categoría y una tabla diaria con todas las categorías sin desplazamiento horizontal. — Registro a la izquierda, compartir a la derecha. Un toque en una categoría inicia el cronómetro; en clase se muestra el resumen de la práctica entre clases. Las pantallas usan datos ficticios ilustrativos. Las capturas muestran la interfaz original en japonés.

Mi papel: Planificación, diseño UX/UI e implementación (con Claude Code y Codex)
Periodo: Septiembre de 2026
Tecnología: React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

Probar la demo web (incluye mis registros de práctica hasta el 20 de septiembre de 2026)

Origen — «¿Cómo va la práctica?»: no sabía responder

En mis clases quincenales, responder «sobre todo escalas» no explicaba qué había practicado ni cuánto. Escribir un diario en papel con el saxofón colgado del cuello resultaba incómodo, y las apps de registro de tiempo que probé estaban pensadas para revisar los datos a solas.

Las barras superiores muestran la práctica diaria; los marcos rojos señalan las clases. En clase muestro el resumen del intervalo. Las fechas y los tiempos son ficticios; las barras de arriba y abajo suman lo mismo.

Registro — Con el instrumento en las manos, un solo toque

Durante la práctica solo toco las tarjetas de categorías. Un toque inicia el cronómetro, otra tarjeta cambia de categoría y un segundo toque en la misma lo detiene.

Un día — Una vez llena, la barra sigue llena

La barra de hoy se llena al llegar a una hora. Después, el total actual define el extremo derecho, para que no reaparezca un hueco en una barra que ya estaba llena.

Práctica de hoy — 1 h 05 min

Elegida

Descartada

Comparación con 65 minutos de práctica. Arriba, el diseño elegido sitúa el total en el extremo derecho, con una escala mínima de una hora. Abajo, el descartado amplía la escala de 60 a 90 y a 120 minutos. Al superar una hora, solo la barra inferior vuelve a mostrar un hueco.

Acumulación — Todo a la vista, desde el primer día

La intensidad del verde indica la práctica y los marcos rojos, las clases. El desplazamiento horizontal permite volver al primer día registrado. Prioricé poder consultar años de práctica frente a aligerar el renderizado.

Cuadrícula del historial. La intensidad del verde representa la práctica de junio a septiembre; los marcos rojos señalan las clases quincenales. — Cinco niveles: 0 minutos, menos de 30, menos de 60, menos de 90 y 90 o más. Al abrir la app, esta práctica acumulada es lo primero que se ve.

Evolución — Las tarjetas como panel de control de la práctica

Construí las pantallas a partir de una especificación elaborada conversando con IA, y repetí el proceso de probarlas y corregirlas. Exploré el registro y la puesta en común en una versión web inicial antes de implementar la app para iPhone.

Versión inicial del 9 de septiembre. Seis tarjetas pequeñas y el total de hoy, 40 minutos, ocupan zonas separadas de la pantalla de registro. — Las versiones inicial y web usan los mismos datos ficticios (seis categorías, 40 minutos hoy). iOS 1.0 usa otros datos ficticios.

Versión web del 21 de septiembre. Categoría y tiempo de hoy comparten una tarjeta grande; los 10 minutos de lectura de partitura en curso aparecen resaltados. — Las versiones inicial y web usan los mismos datos ficticios (seis categorías, 40 minutos hoy). iOS 1.0 usa otros datos ficticios.

Nombre y tiempo, juntos: Destaqué el tiempo de hoy en cada tarjeta para vincular qué practiqué con cuánto tiempo le dediqué.
El estado actual, de un vistazo: Iluminé solo la tarjeta en curso y atenué las demás.
Los controles, dentro de la pantalla: Hice que el desplazamiento se detuviera donde una fila de tarjetas cabe en la pantalla.

Al final repetí unas 15 veces un ciclo: Claude Code planteaba posibles problemas, Codex los verificaba y corregía, y yo decidía qué cambios aceptar.

Sensaciones — Elegir cómo se detiene probándolo

No conseguía que se moviera con fluidez y se asentara con precisión solo con instrucciones verbales. Creé con IA una herramienta para cambiar métodos y valores al instante, comparé cinco métodos en un dispositivo real y elegí el ajuste de desplazamiento nativo del navegador.

Modelo de joroba

Destino proyectado

Nativo proximity
Elegida

Nativo mandatory

Sin ajuste

Posiciones tras levantar el dedo, comparadas a la misma escala. El cero punteado es la posición de ajuste. De los registros del dispositivo seleccioné cinco gestos por método a velocidades de 0,6–1,8 px/ms, calculadas con las posiciones de los 60 ms anteriores, priorizando los más cercanos a 1,2 px/ms. Los ajustes, puntos de partida y direcciones varían entre gestos.

Herramienta de ajuste del desplazamiento. Opciones para alternar entre cinco métodos y sus parámetros, junto a una pantalla de teléfono para probar la interacción. — Comparé cómo se detenía el desplazamiento en un dispositivo real mientras registraba distancia y velocidad. Abre la imagen para ampliarla.

Como producto — Más allá de la práctica

La apariencia sigue los ajustes del dispositivo. Los registros se guardan en el dispositivo y se respaldan automáticamente en iCloud.

Modo claro. Pantalla de registro. Una cuadrícula del historial encabeza la barra de hoy (54 minutos en total) y las tarjetas de categorías. La práctica de piezas lleva más de 27 minutos en curso, resaltada con un color más claro y un contorno blanco. — La misma pantalla de registro en modo claro y oscuro.

Modo oscuro. Pantalla de registro. Una cuadrícula del historial encabeza la barra de hoy (54 minutos en total) y las tarjetas de categorías. La práctica de piezas lleva más de 27 minutos en curso, resaltada con un color más claro y un contorno blanco. — La misma pantalla de registro en modo claro y oscuro.

El icono de la cabecera se elige según la práctica: 47 de música, 15 de ejercicio, 15 de idiomas y aprendizaje, 11 de arte, 14 de creación y vida cotidiana, y 7 de expresión. El saxofón se basa en Qlementine Icons (licencia MIT).

Al usarla — La siguiente pregunta: cuánto detalle registrar

Usé la app en mi práctica matutina y enseñé la pantalla a mi profesor en clase. Su respuesta fue que el contenido se entendía de un vistazo y que registrar los tipos de escalas la haría aún más útil (paráfrasis). Estoy considerando un nivel por debajo de las categorías para añadir detalle sin perder sencillez.

Materiales

La demo web permite probar el registro y la puesta en común. Incluye mis registros de práctica hasta el 20 de septiembre de 2026; los cambios se guardan solo en el navegador que estás usando.