Señal en vivo
Reproductor persistente, estado de reproducción, volumen recordado, mini reproductor y datos del programa al aire.
Sistema en capas
RadioFamilia Web no se documenta solo como una página de radio, sino como una base de sitio autogestionable: una experiencia pública rápida, una API que concentra reglas de negocio y un panel administrativo para operar contenido sin tocar código.
El caso de Radio Familia 107.9 FM demuestra el modelo con módulos reales: transmisión en vivo, agenda efectiva, eventos, donativos, redes, medios, revisiones, roles y publicación por estados editoriales.
UXSitio público React/Vite
APIPHP modular bajo /v1
DBMySQL/MariaDB
AdminPanel con roles
MediosUploads + WebP
AuditoríaHistorial y revisiones
Qué queda reutilizable
La solución deja una estructura que puede adaptarse a otras
organizaciones: frontend estático, panel bajo /admin,
endpoints públicos y protegidos, migraciones SQL, seeds, biblioteca
de medios, permisos, auditoría y flujo de despliegue documentado.
Lo específico de la emisora vive como módulos configurables: reproductor persistente, programa al aire, calendario semanal, excepciones, recurrencias y carrusel derivado de la agenda efectiva.
Experiencia pública
El sitio público no es una página estática: muestra información calculada desde el contenido administrado, mantiene el reproductor activo y conecta cada módulo con datos configurables.
Programas destacados
Carrusel derivado de la agenda efectiva, con selección automática y posibilidad de forzar prioridades desde administración.
Eventos
Eventos independientes de la programación radial, con destacados, prioridad, fecha, lugar, imagen y modo de apertura.
Donativos
Configuración administrable para cuenta bancaria, contacto, tiers y preparación de flujo con Stripe sin manejar tarjetas en el sitio.
Programación y calendario
La agenda no se dibuja manualmente en la página. La API calcula la programación efectiva y el frontend la presenta en tabla y calendario usando las mismas reglas.
Lo que permite administrar
El proyecto se planteó para que el contenido operativo cambie desde el panel, no desde el código. Cada módulo conserva estados, validaciones, permisos y reglas de publicación.
Identidad y contenido
Logotipo, lema, imagen principal, misión, visión, valores, contacto, redes sociales y secciones institucionales editables.
Misa y Biblia
Horarios, reflexiones con vigencia, contenido enriquecido controlado, imágenes opcionales y publicación por estado editorial.
Contacto y redes
Redes activables, enlaces reales, iconos de marca, redes personalizadas y datos de contacto centralizados en el sitio.
Medios y respaldos visuales
Biblioteca de imágenes, variantes WebP, originales privados y composiciones de respaldo cuando un contenido no tiene imagen propia.
Panel administrativo
El panel es la pieza que convierte el sitio en autogestionable: cada módulo permite operar contenido real con permisos, estados, validaciones y trazabilidad.
Acceso protegido
Inicio de sesión bajo /admin, restauración de sesión, cookie segura, CSRF y rutas administrativas separadas del sitio público.
Dashboard operativo
Vista inicial para orientar al administrador y entrar a los módulos de contenido, programación, medios, eventos y configuración.
Edición del inicio
Contenido de portada, textos institucionales, bloques visibles, llamadas a la acción e información pública modificable desde formularios.
Marca y recursos
Administración de logotipo, lema, imagen principal y recursos visuales sin tocar el código del sitio.
Operación de programación
La administración de la agenda se diseñó para evitar cambios manuales en base de datos y para conservar historial de lo publicado.
Control y trazabilidad
Panel pensado para no técnicos
El panel administrativo concentra el mantenimiento del sitio: usuarios, roles, programas, horarios, excepciones, recurrencias, eventos, contenido institucional, redes, medios, donativos y auditoría. La persona responsable puede preparar borradores, publicar contenido, archivar registros y consultar cambios sin intervenir la base de datos directamente.
La seguridad se diseñó desde backend: sesión con cookie
HttpOnly, token CSRF en mutaciones, permisos por rol,
validación de entradas, sanitización de contenido enriquecido y
respuestas sin trazas ni secretos. Los roles base contemplan
administración total, programación, contenido y consulta.
Galería
