SBK Ādaži — sieviešu basketbola kluba mājaslapas dizains un izstrāde

SBK Ādaži mājaslapa ir sieviešu basketbola kluba vietne, kuras dizainu un izstrādi veica CREATING.LV. Klubam vajadzēja mājaslapu, kas iepazīstina ar komandu un spēlētājām, parāda kluba dzīvi fotogrāfijās un palīdz interesentēm pieteikties komandai vai sazināties par sadarbību.

Vietne uzrunā divas galvenās grupas: meitenes un sievietes, kuras vēlas spēlēt basketbolu, un tos, kas vēlas ar klubu sadarboties. Abām grupām vajadzīgs īss ceļš no pirmā iespaida līdz saziņai. Tāpēc šī basketbola kluba mājaslapa ne tikai rāda komandu, bet arī piedāvā pieteikšanās formu un vienmēr pieejamu WhatsApp pogu.

CREATING.LV izveidoja mājaslapas dizainu un izstrādāja vietni: struktūru un sadaļas, spēlētāju prezentāciju, galeriju, animācijas, pieteikšanās formu ar apstrādi serverī un tehnisko SEO pamatu. Projekts aptvēra gan vizuālo koncepciju, gan programmēšanu — tā ir pilna mājaslapas izstrāde līdz vietnei, kas pieteikumus nosūta uz e-pastu.

Mājaslapā ir piecas sadaļas un atsevišķa 404 lapa:

• Sākums — sākumskats ar basketbolisti un saukli “Mūsu laukums. Mūsu spēle.” un spēlētāju lente;
• Komanda — spēlētājas pa vienai ar attēlu, vārdu un numuru;
• Treniņi un spēles — lapa, kas sagatavota treniņu un spēļu informācijai;
• Pasākumi un galerija — kluba dzīves fotogrāfijas;
• Kontakti — saziņas iespējas, WhatsApp, Instagram un Facebook saites.

Struktūra ir apzināti īsa: no izvēlnes apmeklētājs uzreiz nonāk pie komandas, fotogrāfijām vai kontaktiem. Atsevišķā 404 lapa parādās, ja apmeklētājs atver neesošu adresi, piemēram, kļūdaini ierakstītu saiti: viņš paliek kluba vietnē, nevis redz servera standarta kļūdas paziņojumu.

Spēlētājas vietnē parādītas divos veidos. Sākumlapā ir horizontāla spēlētāju lente, kuru var ritināt, un katra kartīte apstājas savā vietā (scroll-snap). Komandas lapā spēlētājas rādītas pa vienai — ar attēlu, vārdu, numuru un skaitītāju, kas parāda, kura no komandas spēlētājām pašlaik redzama.

Abas lapas izmanto vienu kopīgu spēlētāju datu avotu. Ja komandas sastāvs mainās, dati jālabo vienā vietā, un izmaiņas parādās gan sākumlapā, gan komandas lapā. Tā divās vietnes daļās nevar rasties atšķirīgs sastāvs.

Sadaļā “Pasākumi un galerija” apkopotas kluba dzīves fotogrāfijas no spēlēm un treniņiem. Dažādu proporciju attēli veido daudzveidīgu režģi, bet katru fotogrāfiju var atvērt palielinājuma skatā (lightbox) ar parakstu, kas paskaidro, kas attēlā redzams.

Sadaļa “Gribi spēlēt basketbolu? Nāc pie mums!” aicina interesentes pievienoties klubam. Pieteikšanās notiek vienā dialoglodziņā ar diviem režīmiem — “pievienoties komandai” un “piedāvāt sadarbību”. Tā abiem mērķiem pietiek ar vienu formu, un no izvēlētā režīma redzams, par ko ir pieteikums.

Pieteikumu apstrādā PHP skripts serverī, kas:

• pārbauda aizpildītos laukus;
• aizsargā pret surogātpastu ar slēptu lauku (honeypot);
• ierobežo pārāk biežus pieprasījumus;
• nosūta pieteikumu uz e-pastu, izmantojot SMTP.

Abu režīmu e-pastu saņemšana ir pārbaudīta. Formu papildina biežāk uzdotie jautājumi, peldošā WhatsApp poga un saites uz kluba Instagram un Facebook kontiem. Tā interesente var izvēlēties sev ērtāko ceļu: aizpildīt formu, uzrakstīt ziņu vai vispirms izlasīt atbildes uz biežākajiem jautājumiem.

Honeypot ir formas lauks, ko apmeklētājs neredz, bet automātiskas surogātpasta programmas to parasti aizpilda, tāpēc pēc šī lauka skripts var atšķirt automātiskus iesniegumus no cilvēku aizpildītiem. Biežuma ierobežojums neļauj īsā laikā iesūtīt pārāk daudz pieprasījumu. Abi paņēmieni paredzēti, lai e-pastā nenonāktu automātiski ģenerētas ziņas un īstie pieteikumi starp tām nepazustu.

Dizaina pamatā ir basketbola laukums: laukuma līnijas, bumbas trajektorija un kaķa ķepas kā kluba zīmola akcents. Violetie un tumšie toņi, oranžie akcenti un fonti Archivo un Manrope veido vienotu vizuālo valodu, kas vienā stilā saista visas basketbola kluba mājaslapas lapas, bet spēlētāju fotogrāfijas un numuri šo noskaņu turpina komandas prezentācijā.

Bumbas metienu animē GSAP, un animācija ņem vērā samazinātas kustības iestatījumu, ko lietotājs var ieslēgt savā ierīcē. Šo iestatījumu parasti ieslēdz cilvēki, kuriem kustīgi ekrāna elementi traucē lasīt vai rada diskomfortu, tāpēc tā ievērošana ir daļa no vietnes piekļūstamības. Telefonā izvēlne atveras ar izvēlnes pogu, galvene paliek redzama arī ritinot, un izkārtojums pielāgojas šauram ekrānam.

SBK Ādaži mājaslapa veidota ar Astro 4 un TypeScript un tiek statiski ģenerēta: lapas tiek sagatavotas iepriekš kā HTML faili, tāpēc satura rādīšanai nav vajadzīga datubāze. Pārejas starp lapām nodrošina Astro View Transitions, animācijām izmantots GSAP, bet pieteikumus apstrādā PHP skripts serverī. View Transitions ļauj pāreju no vienas lapas uz nākamo parādīt kā plūstošu animāciju, lai gan katra lapa joprojām ir atsevišķs HTML fails.

SEO pamats ielikts jau kodā:

• katrai lapai savs virsraksts, apraksts, kanoniskā adrese un Open Graph dati;
• strukturētie dati — WebSite, BreadcrumbList, SportsTeam un FAQPage, kas meklētājiem mašīnlasāmā veidā apraksta vietni, lapas vietu vietnes struktūrā, sporta komandu un biežāk uzdotos jautājumus ar atbildēm;
• sitemap, robots.txt un llms.txt — pēdējais ir īss vietnes apraksts teksta failā, kas paredzēts mākslīgā intelekta rīkiem.

Statiskai vietnei nav administrēšanas paneļa un datubāzes, kas regulāri jāatjaunina, tāpēc uzturamo komponentu ir mazāk. Vienīgā dinamiskā daļa ir pieteikumu apstrāde serverī, un to aizsargā lauku pārbaude, honeypot un pieprasījumu biežuma ierobežojums. Satura izmaiņas, piemēram, jaunas spēlētājas pievienošanu, veic projekta datos un pēc tam vietni ģenerē no jauna, tāpēc, plānojot šādu vietni, jau sākumā jāvienojas, kurš atjaunos saturu.

Šāda sporta kluba mājaslapa der klubiem, komandām un biedrībām, kurām jāparāda sastāvs un kluba dzīve un jāpieņem pieteikumi no jauniem dalībniekiem vai partneriem. Statiska vietne ar vienu pieteikšanās formu ir piemērota, ja saturs nav jāatjauno katru dienu. Ja klubs pats bieži publicē jaunumus, var izvēlēties arī risinājumu ar satura pārvaldības sistēmu, piemēram, WordPress.

Līdzīga sporta kluba mājaslapa var kalpot arī futbola, volejbola vai hokeja komandai: spēlētāju dati, galerija un pieteikšanās forma ir universāli, bet dizains katram klubam jāveido no paša kluba zīmola. Par vizuālo daļu un lietojamību vairāk — web dizains un UX/UI.

• Mājaslapu izstrāde
• Web dizains un UX/UI

Portfolio atspoguļo projekta nodošanas laikā izstrādāto risinājumu. Pašreizējā vietne var būt mainīta.