Rediseño de la web en WordPress de Ràdio 90 implementando una PWA

Asignatura: Trabajo Final de Grado (TFG)
Titulación: Grado en Multimedia
Nombre del estudiante: Xavier Baca Garcia
Consultor y profesor: Joan Giner Miguelez y Carlos Casado Martínez

Introducción

Ràdio 90 es la emisora libre y cultural de la comarca de la Garrotxa, en Girona. Es una radio altruista con la idea de compartir sus contenidos de la forma más sencilla y transparente posible. Su producción se encuentra bajo licencia Creative Commons.

La web actual se realizó en 2010 utilizando WordPress. A partir de entonces se han publicado todos los programas de radio realizados.

Ahora mismo la web continúa en explotación, pero a nivel gráfico, de arquitectura y de funcionamiento en dispositivos móviles está claramente obsoleta y no es adaptativa. La cantidad de episodios publicados se acerca a los 4000, agrupados en más de 30 programas o podcasts diferentes. Este es el activo más importante de la emisora. Es lo que se quiere potenciar porque actualmente el acceso es difícil y sin un RSS Feed para cada programa.

Un RSS Feed, que traducido sería «canal de sindicación realmente simple», es un archivo en formato XML que contiene la información de los episodios de un podcast y sirve para poderse suscribir. Esto posibilita la distribución de los contenidos a través de aplicaciones o directorios específicos.

De la necesidad de hacer una actualización y remodelación de esta web nace el proyecto que ahora os presento. Este debe permitir hacerla más atractiva y accesible.

Etapas y retos

La metodología empleada ha constado de cuatro fases. La primera comenzó con una investigación haciendo un pequeño estudio de mercado para recoger ideas. Se intercambian estas con el cliente y se pasa a la segunda fase, la de definición.

En la definición se constata que el tipo de usuario es muy amplio. Se llega a la conclusión de que será necesario que la web sea ligera dada la diferencia de niveles tecnológicos del público objetivo.

Se definen el libro de estilo y los objetivos principales.

La tercera fase es la de generación. En medio de ella es donde el impacto de la pandemia del COVID-19 provoca un cambio en la planificación prevista inicialmente. Ha tenido que reajustarse acortando algunos plazos y compactándola con la cuarta y última fase, la de evaluación, que se ha estado retroalimentando constantemente con la de generación hasta llegar al final. Se ha realizado una evaluación heurística y un test informal con usuarios.

Los objetivos marcados son:

• Disponer de una web y una PWA para escuchar la radio en directo y los podcasts publicados.
• Elaborar un diseño de la interfaz bajo la óptica del diseño centrado en el usuario que sea adaptativo y ofrezca la máxima sencillez y usabilidad.
• Crear una arquitectura de la información que simplifique y reduzca al máximo las interacciones antes de la escucha.
• Poner al alcance del oyente toda la información de cada uno de los programas.
• Ofrecer información sobre eventos, programas o actividades con notificaciones push.
• Cumplir con los estándares de accesibilidad, así como la validación CSS y HTML.

En el diseño conceptual se ha definido la arquitectura de la información, con la organización de los contenidos y la navegación con sus menús. Se definen también las taxonomías.

• Tenemos tres tipos de contenidos: entradas de tipo estándar; de tipo audio, y las páginas.
• En cuanto a las categorías, se definen ocho. Seis para los contenidos de audio: Pop-Rock, Hip Hop-Reggae-Funk, Electrónica-Experimental, Jazz-Blues, Músicas del mundo, Culturales; y dos para los contenidos estándar: Noticias, Programas externos.
• También aparece una entidad que nos servirá para definir cada uno de los programas, que es la QT-Serie.
• La utilización de etiquetas permitirá una clasificación más definida de los contenidos.
• La navegación se simplifica, haciéndola poco profunda para acercar el contenido al usuario.

Respecto al diseño visual se siguen los colores del logo. Además, se utiliza el blanco, el negro y el gris, se elige una tipografía sin serifa y se profundiza en el estilo fotográfico que se quiere dar a la web, remarcando su importancia.

En el diseño de contenidos se ha buscado la brevedad y la simplificación, aunque muchos de estos ya venían de la antigua web. A partir de ahí se elabora un prototipo para empezar a trabajar.

Para implantar la solución, primero se debía encontrar la mejor manera de migrar los contenidos existentes, que eran de dos tipos. Por un lado, las noticias, que son entradas en la web. Para poder importar tanto imágenes como texto ha hecho falta apoyarnos en la extensión DeMomentSomTres Export. Por otro lado, los programas de radio. El cliente dispone de un repositorio en Internet organizado en carpetas donde cada una contiene los episodios de un programa o podcast que le da nombre. Con un pequeño problema, no dispone de ningún RSS Feed para hacer la importación.

Para solventar el problema de no tener RSS Feed, se implementa una solución en PHP en el repositorio. Se generan los RSS Feeds de forma automática con una URL única para cada programa.

Al mismo tiempo, se evalúan varias extensiones para encontrar cual puede realizar de forma satisfactoria la importación. Elegimos Simple Seriously Podcasting.

Después de ver diferentes opciones encontramos un tema que cumple con nuestras necesidades y tiene una capacidad de adaptación suficiente: WPCast. Este incorpora diferentes extensiones (algunas de las cuales usaremos), así como un maquetador visual que permite diseñar las páginas con mucha facilidad y un tema hijo que es el que activaremos.

• Destacar la extensión que realiza la carga de las páginas transformando los enlaces de las mismas en llamadas Ajax, actualizando solo la parte de la pantalla que hace referencia al contenido y el fondo, permitiendo la reproducción de audio sin interrupción.
• Otras extensiones destacadas son el propio reproductor, la que permite la ordenación de las taxonomías, la que incorpora las QT-Series o la que nos proporciona la posibilidad de compartir fácilmente los contenidos y valorarlos.

La migración, a pesar de haber podido automatizarla en gran parte, ha sido dura, porque ha hecho falta editar cada entrada de cada episodio. Aparte de la extensión específica para hacer la importación de los podcasts, se ha utilizado Quick Featured Images para asignar una misma imagen destacada a un grupo de episodios. También ha sido de ayuda la capacidad de edición masiva del propio WordPress.

Paralelamente, se decide trasladar el desarrollo al mismo hosting donde está la web antigua para acortar el tiempo de trabajo y disponer de HTTPS, imprescindible para la PWA. Esta accesibilidad permite a un grupo evaluador de usuarios comprobar el funcionamiento y reportar sus impresiones.

Las PWA, aplicaciones web progresivas, son una extensión de las páginas web que, a través del uso de manifiestos, service workers y otras tecnologías, trabajan como si fueran una aplicación móvil. Las PWA se pueden ejecutar en segundo plano sin navegador. Es posible instalarlas en dispositivos móviles como una aplicación más y también en Windows a través de Google Chrome y Mozilla Firefox. Windows 10 ofrece soporte para aplicaciones web progresivas en la tienda de Microsoft.

Las PWA hacen difícil reconocer la diferencia entre la web y las aplicaciones, ya que pueden realizar tareas que hasta ahora eran propias de las aplicaciones nativas. Por ejemplo, las notificaciones, el funcionamiento sin conexión a Internet con contenidos estáticos o la posibilidad de instalar una versión más ligera en lugar de la aplicación completa. Para la implantación de la PWA se ha utilizado la extensión Super Progressive Web Apps.

En cuanto a las decisiones tomadas, las más destacadas han sido:

• Elegir el CMS WordPress por la dimensión de la web. Por estar optimizado para los motores de búsqueda, tener una interfaz fácil e intuitiva y por la experiencia en su uso tanto de las personas que la tendrán que manejar como de mí mismo.
• Cómo hacer la migración de los contenidos con casi 4000 episodios y unas 700 noticias.
• Elegir un tema dedicado expresamente a publicar podcasts.
• Desarrollar en el hosting.
• Elegir los tipos de contenidos.
• Crear las taxonomías agrupadas en categorías y etiquetas.
• Estructurar la navegación con los diferentes menús.
• Maquetar las diferentes páginas sin barra lateral para simplificarlas.

Conclusiones

El hecho de encontrar una solución a un problema real con el que tengo vinculación ha sido una gran motivación. Me ha servido para consolidar algunas de las competencias adquiridas a lo largo del grado, lo que ha sido muy enriquecedor. Diría que estimulante y estresante a partes iguales.

Para la emisora, recogiendo su feedback, creo que será un paso adelante que los acercará mucho más a su audiencia y les permitirá aumentarla.

Se han conseguido todos los objetivos principales salvo las notificaciones push. Teniendo en cuenta los condicionantes externos que han afectado al desarrollo del proyecto estoy moderadamente satisfecho.

La nueva web se encuentra ya en explotación. Después de entregar el TFG se completó una pequeña parte de podcasts que, por su complejidad, el cliente quería revisar antes de publicar y se finalizó la importación de las noticias antiguas.

La memoria del trabajo de final de grado está publicada en el repositorio institucional de la UOC, accesible a través del siguiente enlace: http://hdl.handle.net/10609/120647.

Enlaces relacionados

La web se puede consultar a través de: https://www.r90.org

Documentación

Bibliografía

CALVO-FERNÁNDEZ RODRÍGUEZ, Amaia et al. Avaluació de la usabilitat. Barcelona: FUOC, 2011.

MONJO PALAU, Tona. Disseny d’interfícies multimèdia. Barcelona: FUOC, 2011.

MORVILLE, Peter, ROSENFELD, Louis. Arquitectura de la informació per al World Wide Web. Barcelona: FUOC, 2012.

Disseny centrat en les persones [en línea]. Design Toolkit, UOC(2019). Disponible en:

¿Qué es una PWA? [en línea]. Appnet (2020).Disponible en:

https://www.tu-app.net/progressive-web-apps/

Cita recomendada: BACA GARCIA, Xavier. Rediseño de la web en WordPress de Ràdio 90 implementando una PWA. Mosaic [en línea], mayo 2021, no. 193. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n193.2120