← Back
UAB Mèdia
web

UAB Mèdia

Nov 16, 2021 → Jun 3, 2022

Qué es UABMèdia

UABMèdia es un proyecto de vital importancia para la televisión y la radio de la Universitat Autònoma de Barcelona (UAB).

Consiste en un servicio web para consultar cualquier producto multimedia generado allí. Todos los podcasts, noticias, programas de vídeo y cualquier tipo de evento cultural están almacenados aquí como una biblioteca digital del departamento de comunicación de la universidad.

Captura y mockup de la landing page de UAB Mèdia
Captura y mockup de la landing page de UAB Mèdia.

Incluso puedes escuchar la radio universitaria desde la web sin descargar ninguna app.

Stack tecnológico

La herramienta principal para hacer realidad UABMèdia es el lenguaje de programación PHP y Javascript para la interacción. Funciona con servicios WebTV y la base de datos de AWS para almacenar los medios.

En el sitio web, usamos diferentes APIs para consultar estos resultados y mostrarlos al usuario.

Utilizamos Javascript de diversas formas, como funciones de frontend (por ejemplo, reproducir o pausar música, establecer un temporizador para la radio…) o para mostrar contenido condicionalmente: Por ejemplo, si las noticias están en directo, las verás.

Diseño responsivo

Diseño responsivo de UAB Mèdia en móvil
Diseño responsivo de UAB Mèdia en móvil

El diseño responsivo es clave para el servicio; durante 2021, el 78% de las visitas se realizaron desde dispositivos móviles, por lo que la experiencia móvil debe ser igual de buena o incluso mejor que en pantallas grandes.

En este ejemplo podemos ver cómo se presenta el contenido en dispositivos móviles:

  • La navegación se desplaza a la parte inferior, como en las interfaces modernas.
  • La pestaña seleccionada actualmente aparece más oscura para saber siempre dónde estás.
  • La sección de radio tiene otro color para marcar sus partes; el botón de reproducción tiene un alto contraste para mostrar su importancia en el sitio.
  • Todas las cajas (como la del tiempo) tienen un ancho limitado y márgenes pequeños en dirección horizontal para que nunca toquen los bordes de la pantalla (es parte de la interfaz, principal diferencia respecto a la radio o la navegación).

Mi rol

Participé durante casi un año como becario de desarrollador frontend. A veces éramos más, pero normalmente solo éramos 2 o 3 personas trabajando en el proyecto porque tenía un presupuesto reducido y era su primer año en funcionamiento. Hoy en día es algo más grande y cuenta con más personas.

Me encargué de la parte de frontend del proyecto, haciendo que el sitio web se viera bien y funcionara correctamente. Tuve que crear el diseño responsivo y las animaciones.

También realicé tareas interesantes como el reproductor de radio, el widget del tiempo o la sección de noticias; fueron necesarias algunas funciones de Javascript para hacerlas funcionar.

En mis últimos días, también enseñé a los nuevos becarios cómo trabajar con el proyecto y cómo hacer funcionar el sitio web.

Lo que aprendí

  1. Javascript es una herramienta poderosa; tuve que aprenderla para que el reproductor de radio funcionase y fue una gran experiencia alcanzar ese objetivo como esperaban los diseñadores.

  2. El diseño responsivo es imprescindible hoy en día; tuve que hacer que el sitio web se viera bien en todos los dispositivos y fue un reto conseguir que funcionara en todos los tamaños de pantalla.

  3. Las animaciones son una gran manera de mejorar el aspecto del sitio web; tuve que crear algunas animaciones para que el sitio pareciera más vivo y fue una gran experiencia aprender a hacerlas.

  4. El trabajo en equipo es fundamental para que un proyecto funcione; tuve que trabajar con otras personas y fue una gran experiencia aprender a colaborar con ellas.

  5. Github es una herramienta poderosa para trabajar en equipo; tuve que aprender a usarla, hice algunos cursos sobre branching, merging y pull requests y fue una gran experiencia.

Conclusión

UABMèdia fue una gran oportunidad para crecer como desarrollador y como persona; tuve que aprender muchas cosas y fue una gran experiencia aprender a trabajar en un pequeño equipo de desarrolladores.

Enlaces

Proyectos similares

UAB Mèdia

© 2026 Pol Gubau Amores