Entrenadores de Gimnasia del Mundo
El sitio web de World Gymnastics Coaches es una plataforma dinámica diseñada para mostrar episodios de podcast con opiniones y entrevistas a entrenadores de gimnasia de todo el mundo. Construido con Framer, el sitio web integra un CMS (Sistema de Gestión de Contenidos) para gestionar y mostrar los episodios de podcast sin problemas. Cada episodio incluye un título, una descripción, una duración y un reproductor de Spotify integrado, lo que proporciona a los visitantes una experiencia interactiva y atractiva.
El objetivo del proyecto era crear un sitio web visualmente atractivo y fácil de usar que permitiera a los visitantes explorar y escuchar los episodios del podcast directamente en la plataforma. El concepto giraba en torno a aprovechar las potentes herramientas de diseño y desarrollo de Framer para construir un sitio web totalmente dinámico en el que el contenido pudiera actualizarse fácilmente mediante un CMS. Este enfoque garantiza que el sitio web siga siendo escalable y fácil de mantener a medida que se añaden nuevos episodios.
El sitio web se desarrolló utilizando las herramientas de desarrollo visual de Framer y componentes de código personalizados. Las características clave del proceso de desarrollo incluyen
Integración de CMS: Se creó una colección CMS personalizada para gestionar los episodios de podcast, incluyendo campos para título, descripción, duración, imagen y enlaces para incrustar Spotify.
Componentes dinámicos: Se construyó un componente PodcastPlayer reutilizable utilizando React (TSX) para mostrar dinámicamente cada episodio. Este componente integra el reproductor incrustado de Spotify, garantizando una experiencia de escucha fluida.
Diseño adaptable: El sitio web fue diseñado para ser totalmente responsivo, asegurando una óptima visualización e interacción a través de dispositivos.
Función de repetición: La función Repeat de Framer se utilizó para generar dinámicamente una lista de episodios de podcast basada en la colección CMS, eliminando la necesidad de actualizaciones manuales.
El principal reto era crear una solución dinámica y escalable para mostrar los episodios de podcast sin necesidad de codificación manual para cada nuevo episodio. Además, integrar reproductores de Spotify directamente en el sitio web planteaba un obstáculo técnico, ya que los enlaces estándar de Spotify no funcionan en iframes. El objetivo era garantizar que cada episodio pudiera reproducirse directamente en el sitio web sin redirigir a los usuarios a plataformas externas.
La solución implicada:
Spotify Embed Links: Utilizar los enlaces incrustados de Spotify (generados a partir de la opción «Compartir > Incrustar») para garantizar que los reproductores de podcasts pudieran mostrarse directamente en el sitio web.
Componente personalizado: Desarrollo de un componente PodcastPlayer personalizado en Framer utilizando React (TSX). Este componente extrae datos dinámicamente del CMS y muestra los detalles del episodio junto con el reproductor de Spotify.
Contenido dirigido por CMS: Aprovechando el CMS de Framer para gestionar todo el contenido del podcast, facilitando la adición, actualización o eliminación de episodios sin tocar el código.
Función de repetición: Utilizando la funcionalidad Repeat de Framer para generar automáticamente una lista de episodios basada en la colección CMS, asegurando la escalabilidad y la eficiencia.
El resultado es un sitio web elegante, dinámico y fácil de usar que muestra el podcast World Gymnastics Coaches de una manera atractiva e interactiva. Este proyecto pone de manifiesto la capacidad de Framer para crear sitios web modernos y basados en contenidos con una intervención manual mínima.
