SBK Ādaži: diseño y desarrollo del sitio web de un club de baloncesto femenino

El sitio web de SBK Ādaži es la web de un club de baloncesto femenino diseñada y desarrollada por CREATING.LV. El club necesitaba un sitio web que presentara al equipo y a sus jugadoras, mostrara la vida del club en fotografías y ayudara a las interesadas a solicitar su incorporación al equipo o a ponerse en contacto para colaborar.

La web se dirige a dos grupos principales: chicas y mujeres que quieren jugar al baloncesto, y quienes desean colaborar con el club. Ambos grupos necesitan un camino corto desde la primera impresión hasta el contacto. Por eso, este sitio web de club de baloncesto no solo muestra el equipo, sino que también ofrece un formulario de solicitud y un botón de WhatsApp siempre disponible.

CREATING.LV creó el diseño del sitio web y desarrolló la web: la estructura y las secciones, la presentación de las jugadoras, la galería, las animaciones, un formulario de solicitud con procesamiento en el servidor y la base de SEO técnico. El proyecto abarcó tanto el concepto visual como la programación: es un desarrollo de sitio web completo, hasta llegar a una web que envía las solicitudes por email.

El sitio web tiene cinco secciones y una página 404 propia:

• Inicio: vista principal con una jugadora de baloncesto y el eslogan “Mūsu laukums. Mūsu spēle.” (“Nuestra pista. Nuestro juego.”), además de un carrusel de jugadoras;
• Equipo: las jugadoras una a una, con foto, nombre y número;
• Entrenamientos y partidos: página preparada para la información sobre entrenamientos y partidos;
• Eventos y galería: fotografías de la vida del club;
• Contacto: formas de contacto y enlaces a WhatsApp, Instagram y Facebook.

La estructura es deliberadamente corta: desde el menú, el visitante llega directamente al equipo, a las fotografías o al contacto. La página 404 propia aparece si el visitante abre una dirección inexistente, por ejemplo un enlace mal escrito: así permanece en la web del club en lugar de ver el mensaje de error estándar del servidor.

Las jugadoras se muestran en la web de dos formas. En la página de inicio hay un carrusel horizontal de jugadoras que se puede desplazar, y cada tarjeta se detiene en su sitio (scroll-snap). En la página del equipo, las jugadoras aparecen una a una, con foto, nombre, número y un contador que indica qué jugadora del equipo se está viendo.

Ambas páginas utilizan una única fuente común de datos de las jugadoras. Si cambia la plantilla, los datos se corrigen en un solo lugar y los cambios aparecen tanto en la página de inicio como en la del equipo. Así, las dos partes de la web no pueden mostrar plantillas distintas.

La sección “Eventos y galería” reúne fotografías de la vida del club en partidos y entrenamientos. Las imágenes de distintas proporciones forman una cuadrícula variada, y cada fotografía puede abrirse en una vista ampliada (lightbox) con un pie de foto que explica lo que se ve en la imagen.

La sección “¿Quieres jugar al baloncesto? ¡Únete a nosotras!” invita a las interesadas a unirse al club. La solicitud se hace en un único cuadro de diálogo con dos modos: “unirse al equipo” y “ofrecer colaboración”. Así, un solo formulario sirve para ambos fines, y el modo elegido muestra de qué trata la solicitud.

Las solicitudes las procesa un script PHP en el servidor que:

• comprueba los campos rellenados;
• protege contra el spam con un campo oculto (honeypot);
• limita las solicitudes demasiado frecuentes;
• envía la solicitud por email mediante SMTP.

Se ha comprobado la recepción de los emails de ambos modos. El formulario se complementa con preguntas frecuentes, un botón flotante de WhatsApp y enlaces a las cuentas de Instagram y Facebook del club. Así, la interesada puede elegir la vía que le resulte más cómoda: rellenar el formulario, escribir un mensaje o leer primero las respuestas a las preguntas frecuentes.

Un honeypot es un campo de formulario que el visitante no ve, pero que los programas automáticos de spam suelen rellenar, de modo que gracias a este campo el script puede distinguir los envíos automáticos de los rellenados por personas. La limitación de frecuencia impide enviar demasiadas solicitudes en poco tiempo. Ambas técnicas sirven para que no lleguen al correo mensajes generados automáticamente y para que las solicitudes reales no se pierdan entre ellos.

El diseño se basa en una pista de baloncesto: las líneas de la pista, la trayectoria del balón y unas huellas de gato como acento de la marca del club. Los tonos morados y oscuros, los acentos naranjas y las fuentes Archivo y Manrope crean un lenguaje visual unificado que une con un mismo estilo todas las páginas del sitio web del club de baloncesto, mientras que las fotografías y los números de las jugadoras trasladan este ambiente a la presentación del equipo.

El lanzamiento del balón está animado con GSAP, y la animación respeta el ajuste de movimiento reducido que el usuario puede activar en su dispositivo. Este ajuste suelen activarlo personas a las que los elementos en movimiento de la pantalla les dificultan la lectura o les causan molestias, por lo que respetarlo forma parte de la accesibilidad de la web. En el móvil, el menú se abre con el botón de menú, la cabecera permanece visible al desplazarse y la disposición se adapta a la pantalla estrecha.

El sitio web de SBK Ādaži está creado con Astro 4 y TypeScript y se genera de forma estática: las páginas se preparan de antemano como archivos HTML, por lo que no se necesita una base de datos para mostrar el contenido. Las transiciones entre páginas las proporciona Astro View Transitions, para las animaciones se utiliza GSAP y las solicitudes las procesa un script PHP en el servidor. View Transitions permite mostrar el paso de una página a la siguiente como una animación fluida, aunque cada página sigue siendo un archivo HTML independiente.

La base de SEO está integrada ya en el código:

• cada página tiene su propio título, descripción, dirección canónica y datos Open Graph;
• datos estructurados: WebSite, BreadcrumbList, SportsTeam y FAQPage, que describen a los buscadores, de forma legible por máquinas, el sitio, la posición de la página en la estructura del sitio, el equipo deportivo y las preguntas frecuentes con sus respuestas;
• sitemap, robots.txt y llms.txt: este último es una breve descripción del sitio en un archivo de texto, pensada para las herramientas de inteligencia artificial.

Un sitio estático no tiene panel de administración ni base de datos que haya que actualizar periódicamente, por lo que hay menos componentes que mantener. La única parte dinámica es el procesamiento de solicitudes en el servidor, protegido mediante la validación de campos, el honeypot y la limitación de frecuencia de las solicitudes. Los cambios de contenido, como añadir una nueva jugadora, se hacen en los datos del proyecto y después la web se genera de nuevo; por eso, al planificar un sitio así, hay que acordar desde el principio quién actualizará el contenido.

Un sitio web de club deportivo como este es adecuado para clubes, equipos y asociaciones que necesitan mostrar su plantilla y la vida del club y recibir solicitudes de nuevos miembros o socios. Un sitio estático con un único formulario de solicitud es adecuado si el contenido no tiene que actualizarse a diario. Si el propio club publica noticias con frecuencia, también se puede optar por una solución con un sistema de gestión de contenidos, como WordPress.

Un sitio web de club deportivo similar puede servir también a un equipo de fútbol, voleibol o hockey: los datos de los jugadores, la galería y el formulario de solicitud son universales, pero el diseño debe crearse para cada club a partir de su propia marca. Más sobre la parte visual y la usabilidad en diseño web y UX/UI.

• Desarrollo de sitios web
• Diseño web y UX/UI

El portfolio refleja la solución desarrollada en el momento de la entrega del proyecto. El sitio actual puede haber cambiado.