Escuela de Fútbol Huachipato Escuela de Fútbol Huachipato · Punta Arenas
En uso real desde agosto 2026

Portal Acereros — asistencia y comunicación para una escuela de fútbol.

Cómo diseñamos y construimos, desde cero, una PWA para reemplazar planillas de Drive en la cancha.

Industria: fútbol formativo Rol de qup: diseño + desarrollo Stack: PWA, HTML/JS vanilla Estado: en uso real desde agosto 2026
Jugar con el Demo Interactivo →
Portal Acereros — inicio de sesión con RUT
El brief

Escuela de Fútbol Huachipato (Punta Arenas) pasaba asistencia y avisos con planillas de Google Drive. En la cancha, bajo el sol y sin buena conexión, esto era lento y poco confiable — no había nómina centralizada ni forma directa de avisar a los apoderados. Nos acercamos a ellos para construir, sin costo mientras el producto madura, un piloto real que resolviera ese problema específico.

Hoy el portal está en uso real: desde agosto de 2026 la escuela dio de baja sus planillas antiguas de Drive y empezó de cero en el portal. Lo usan el administrador, los profesores por categoría y los apoderados.

Cómo lo abordamos

Problema → decisiones → solución

01

El problema

Buscar un link de Drive en el celular, sin señal, en medio de un entrenamiento, hacía que pasar asistencia tomara minutos en vez de segundos.

02

La decisión de diseño

Priorizamos botones grandes de un solo toque, sin scroll, y que la app funcionara igual con o sin internet — el profesor no puede depender de la señal en la cancha.

03

La solución

Una PWA instalable con tres experiencias — Profesor, Administrador, Apoderado — conectadas en tiempo real, sin necesidad de App Store.

La interfaz

Así se ve en la cancha

Cada pantalla resuelve una fricción puntual — no son capturas genéricas, son decisiones concretas.

Portal Acereros — toma de asistencia del profesor en el celular

Toma de asistencia (celular)

Decisión: dos botones grandes por alumno (Presente/Ausente), guardado con un toque — pensado para usarse con el celular en una mano.

Portal Acereros — resumen del apoderado en el celular

Resumen del apoderado

Decisión: porcentajes en color en vez de tablas, para que se entienda de un vistazo — se entra solo con el RUT del alumno, sin contraseña.

En el computador

Portal Acereros — asistencia del profesor en el computador

Asistencia en el computador

Decisión: la misma pantalla, en dos columnas, para quien pasa lista desde un notebook en la sede.

Portal Acereros — panel de accesos del administrador

Aprobaciones del admin

Decisión: nadie entra a la nómina sin aprobación manual — evita duplicados y altas no autorizadas por error.

Lo nuevo desde agosto 2026

Capturas del portal real con datos ficticios: ningún nombre ni RUT corresponde a una persona. Desliza para ver más →

Portal Acereros — código QR para que el apoderado se registre

QR de autorregistro

El profesor lo muestra en la cancha y el apoderado inscribe a su hijo desde su propio celular.

Portal Acereros — niño de prueba con aviso de registro repetido

Niño a prueba

Pide los datos del apoderado y avisa si el "niño nuevo" ya se había registrado antes.

Portal Acereros — ficha completa de asistencia de un alumno

Buscador con ficha

Cualquier profesor busca a un alumno y ve su asistencia completa, mes a mes.

Portal Acereros — citación a un partido lista para enviar por WhatsApp

Citaciones que se guardan

"Guardar y copiar" o "Guardar y WhatsApp": la citación siempre queda en el historial.

Portal Acereros — asistencia al partido y jugador agregado sin estar citado

Asistencia al partido

Marca quién fue de los citados y suma al jugador que llegó sin estar en la lista.

Portal Acereros — revisión de la nómina del administrador

Revisión de la nómina

Detecta alumnos que no aparecen en las listas y los agrega con un clic.

Portal Acereros — comprobante de pago con folio y logo

Comprobantes de pago

Con folio correlativo y logo, para un jugador o para el equipo completo.

Portal Acereros — citaciones a partidos y calendario del apoderado

Partidos del apoderado

Los partidos que vienen salen como "Programado", nunca como falta; calendario con filtros.

Tres roles, tres problemas distintos

Un portal, tres mini-casos

El Profesor

Problema

Pasar asistencia, generar reportes y avisar partidos le tomaba tiempo que no tenía en la cancha.

Solución

Botones grandes por alumno, citaciones a WhatsApp con un clic, reportes en PDF automáticos y Muro de Noticias para avisos.

  • Citaciones por WhatsApp que siempre se guardan (Guardar y copiar o Guardar y enviar), con historial.
  • Asistencia al partido: marca quién fue de los citados y agrega a un jugador no citado que llegó.
  • Niño a prueba con registro obligatorio del apoderado; avisa si es un repetido y permite pasarlo a la lista oficial.
  • Código QR para que el apoderado se registre solo desde su celular.
  • Buscador de alumnos con la ficha completa de asistencia.

El Administrador

Problema

Sin visibilidad ni control sobre altas y bajas de alumnos, ni forma de auditar lo que ve su equipo técnico.

Solución

Panel de aprobación de accesos (aprobar, rechazar, reintegrar o dar de baja) y modo "👁️ Ver como profesor" para auditar sin alterar datos.

  • Editar los datos de un alumno (fecha de nacimiento, RUT, contacto) sin tocar la planilla.
  • Revisión de la nómina: detecta alumnos aprobados que no aparecen en las listas y los agrega con un clic.
  • Comprobantes de pago con folio y logo, individuales o de equipo completo.
  • Categorías asignadas por profesor, permiso de moderador y protección para que una cuenta de profesor no sea sobrescrita.

El Apoderado

Problema

No sabía si su hijo asistía o si había partido, sin llamar al profesor.

Solución

Acceso instantáneo con el RUT del alumno, sin registro ni contraseña — semáforo de asistencia, calendario y Muro de Noticias.

  • Asistencia a entrenamientos y a partidos por separado; los partidos futuros salen como «Programado».
  • Calendario con filtros, descarga en PDF, insignias «nuevo» y preguntas frecuentes.
Resultados hasta ahora

[ agregar número real de alumnos activos y tiempo ahorrado cuando estén medidos — no inventar cifras ]

Próximos pasos:

Disponible ahora

Instala Portal Acereros en tu celular en segundos

Escuela de Fútbol Huachipato Escuela de Fútbol Huachipato · Punta Arenas

Portal Acereros ya está en uso real en la escuela. Es una PWA: sin App Store, sin actualizaciones eternas. Ábrela desde el navegador y agrégala a tu pantalla de inicio en un clic.

Abrir Portal Acereros
01

Abre el link

Entra a la app desde Chrome o Safari en tu celular.

02

Agregar a inicio

Toca el menú (⋮ en Android, compartir en iPhone) y elige "Agregar a pantalla de inicio".

03

Listo

El ícono queda en tu celular como una app nativa, funcione con o sin internet.

Construido para la velocidad.

HTML/JS Vanilla Service Worker Google Apps Script PWA

Validamos la idea con un MVP rápido y luego escalamos a un entorno frontend en Netlify. Al prescindir de frameworks pesados, el portal carga en fracciones de segundo, ideal para las malas conexiones de internet en recintos deportivos. El ingreso hace una sola llamada al servidor en vez de tres, y los datos se guardan en caché para mostrarse al instante.

Desde la cancha

Lo que aprendimos

La latencia pesaba más que el código

Hacer menos viajes al servidor dio más velocidad que micro-optimizar funciones.

El RUT simplifica, pero hay que protegerlo

Usar el RUT como llave única facilita el acceso del apoderado, pero obliga a proteger los roles: el RUT de un profesor nunca debe tratarse como el de un alumno.

Una sola fuente de verdad

Convivir con la planilla antigua generó datos cruzados. La escuela la dio de baja y empezó de cero.

Una hoja de cálculo alcanza para una escuela

Funciona como base de datos si se acompaña de revisión de nómina y de una lectura tolerante de los datos ingresados a mano.

Testimonio · Pendiente

Aquí irá la cita real de un profesor, administrador o apoderado del Portal Acereros. Espacio reservado hasta contar con el testimonio confirmado.

¿Tu escuela o club tiene un problema parecido?

Conversemos si te sirve una versión de este portal, con tu marca o con la nuestra.

Cotizar mi proyecto → Probar el Demo