Kampsport HTML-mallar

Responsiva HTML-mallar för kampsport

En HTML-mall för kampsport levereras som källfiler som du kan öppna och redigera direkt. Källkoden innehåller vanligtvis en öppningssektion, passlistor och instruktörskort samt ett schema och ett kontaktformulär. Exempelinnehåll för en dojo finns placerat där dina faktiska uppgifter ska ligga; den första frågan är därför hur mycket av koden du behöver skriva om för din verkliga verksamhet.

Kod som du faktiskt kan redigera

Det mesta av arbetet efter nedladdningen består av att byta ut innehåll. Du anpassar bältesfärgerna efter din skolas graderingssystem, döper om discipliner, lägger till en nybörjargrupp, och koden måste kunna hantera detta utan att kräva en total ombyggnad.

Det finns några saker som är värda att öppna filerna för att granska:

• hur passblocket är uppbyggt, eftersom samma modul upprepas för varje pass i schemat
• om koden för instruktörer håller grad, disciplin och foto som separata fält
• hur formuläret för kontakt eller provträning är uppbyggt och hur många fält det hanterar utan omskrivning av kod
• hur mycket JavaScript som följer med menyer och bildspel (sliders), och hur smidigt en oanvänd komponent kan tas bort

Ett passkort listar normalt disciplin, nivå och åldersgrupp, med tränare och starttid placerade därunder. En ny nybörjargrupp på torsdagar blir då bara ytterligare en kopia av det kortet. En karateklubb som kör kata och kumite behöver två varianter av samma block, och att bygga den andra varianten manuellt tar tid vid varje schemaändring.

Scheman rymmer mer än bara dagar och tider

Träningsschemat är den mest krävande delen av källkoden. En enskild vardag kan innehålla ett barnpass, grundträning för vuxna och öppen matta (open mat), alla med sin egen nivå och tränare. Benämningar väger lika tungt som klockslagen, eftersom pass med dräkt (gi) och utan dräkt (no-gi) ofta delar tid med nybörjar- och fortsättningsgrupper.

Kampsportssidor kombinerar ofta korta etiketter med mycket praktisk information. Passnamn, veckodagar, tider, åldersintervall, bältesnivåer, tränarnamn och lokaluppgifter måste förbli läsbara när den tillgängliga bredden förändras. Responsiv kod ska bevara denna hierarki snarare än att bara krympa skrivbordsinnehållet. Ett schema kan behöva ordnas på ett annat sätt i mobilen, medan programkort staplas vertikalt under varandra. Nicepages guide för responsiv webbdesign beskriver det responsiva arbetsflödet för att anpassa sidlayouter till olika skärmstorlekar. Använd verkligt dojoinnehåll vid granskningen. ”Grundläggande BJJ för barn” eller ”Avancerad kumite för vuxna” tar mer plats än en kort platshållartext, och ett veckoschema kan avslöja problem med marginaler som är osynliga i en förenklad demo.

Mobiler stuvar om passkorten

Elever kollar träningstider i mobilen, ofta på väg till dojon. Breda schemarader är det första som skapar problem. Kolumner trycks ihop, ett långt instruktörsnamn radbryts under sin grad och nivåangivelsen hamnar långt ifrån det pass den tillhör. Nicepage hjälper till här med responsiva lägen för datorer, surfplattor och mobiler, där du kan se hur layouten anpassar sig i realtid.

Bedöm en mall efter hur mycket källkod du behöver ändra. En klubb med tre pass och ett fast schema passar i nästan vilken struktur som helst, eftersom ändringarna stannar vid text och bilder. En akademi med flera discipliner, åldersklasser och graderingstillfällen bör öppna demofilerna och räkna hur många block som måste byggas från grunden. Det antalet är mallens verkliga pris.