Syfte

Syftet med min webbplats är att informera om discgolf och samtidigt dela med mig av mitt intresse för sporten. Webbplatsen kommer att innehålla information om olika kasttekniker, vilka discar som passar bäst i olika situationer samt tips på discgolfbanor i närheten av Alingsås och Göteborgsområdet. Jag vill också få in ett personligt inslag genom att visa min egen utveckling inom sporten och berätta lite om min nivå som spelare. Målet är att sidan ska vara användbar både för nybörjare och för personer som redan spelar discgolf och vill utvecklas mer inom sporten.

Uppbyggnad

• Hem: Första sidan som presenterar webbplatsen och ger en kort introduktion till discgolf samt vad besökaren kan hitta på sidan.
• Kasttekniker: Andra sidan som visar olika kasttekniker inom discgolf, till exempel backhand, forehand och putt. Här ska det finnas förklaringar och exempel på hur teknikerna används.
• Platser: Tredje sidan som visar populära discgolfbanor i närheten av Alingsås och Göteborgsområdet. Här vill jag tipsa om banor som jag själv känner till eller har spelat på.
• Utrustning: Fjärde sidan som ska innehålla de olika typerna av discar som ska användas vid olika tillfällen i spelet.
• Om: Den sista sidan ska innehålla information om mig, mitt intresse för discgolf och min egen utveckling inom sporten.
• Jag vill även ha en rubrik vid toppen av sidan och någon sorts Nav-bar, men jag vet inte hur jag vill ha den än så länge.

Arbetsplanering

• Jag ska börja med att bygga webbplatsen i mobilversion, så att sidan fungerar bra och är användarvänlig på mobiltelefon, iPad och andra mindre skärmar. Genom detta ska jag använda flexbox eller media queries för att skilja på desktop och mobilversionen.
• Jag ska Jobba sida för sida och börja på nästa sida efter den andra är helt fixad.
• Om bilder används på webbplatsen ska de inte tas direkt från Google, utan hämtas från säkra källor där bilderna är fria att använda eller tillåtna enligt licens, som t.ex Pexels eller Unsplash.
• Jag ska använda färger som passar ihop. De ska inte vara för starka och kontrasten ska göra att t.ex texten inte är svår att se.
• Jag ska få in en enkel och fungerande Javascript/DOM-script kod, som ska göra någon sorts funktion på sidan.
• När webbplatsen är färdig ska den testas och kontrolleras för att säkerställa att allt fungerar som det ska. För detta kan verktyg som “PageSpeed Insights” användas för att kontrollera prestanda, tillgänglighet, SEO och mobilanpassning.
• Sedan för att vara noga med tillgänglighet samt mobilanpassningen så kan jag använda andra sidor som “WAVE webaim” för tillgängligheten och sedan “bing” och “Am I Responsive” för att kolla mobilanpassningen.
• När webbsidan är under verk kan den testas i olika webbservrar och se om det är någon skillnad.
• När allt är klart så dubbelkolla om allt fungerar innan inlämning.

Utförande

Genomförandeplan

Så här har jag tänkt att startsidan (Home Page) ska se ut. I mobilversionen finns en header med en H1-rubrik och en navigationsmeny (nav-bar) under. Därefter följer en hero-sektion som inleder sidans huvudinnehåll (main). Längst ner finns fyra rutor med länkar till de fyra andra sidorna. Desktopversionen ser nästan identisk ut. Den enda skillnaden är att navigationsmenyn är placerad inuti headern i stället för under den.

Här visas hur jag har tänkt att Tekniker-sidan ska se ut i både mobil- och desktopversionen. Headern (H1) och navigationsmenyn (nav-baren) är desamma som på startsidan i båda versionerna. Sidans huvudinnehåll (main) består av en H2-rubrik högst upp, följt av flera kort med information om olika tekniker. Varje kort innehåller en H3-rubrik som är länkad till en egen HTML-sida med mer information om den specifika tekniken. I mobilversionen visas korten under varandra, medan de i desktopversionen är placerade i två kolumner för att utnyttja skärmytan bättre.

Här visas hur jag har tänkt att Banor-sidan ska se ut i både mobil- och desktopversionen. Headern (H1) och navigationsmenyn (nav-baren) är desamma som på de övriga sidorna. I det övre vänstra hörnet finns en stadsväljare på både mobil och desktop. Med hjälp av denna kan användaren välja vilken stads discgolfbanor som ska visas. När en stad har valts visas kort med bilder och information om de olika banorna. I mobilskissen visas endast två banor, men den färdiga sidan kommer att innehålla fler. H2-rubriken kommer att ändras beroende på vilken stad användaren har valt. Dessutom kommer det att finnas dold text som kan visas genom en klickfunktion på “H3:orna” i blocken.

Här visas en mall för hur Utrustnings-sidan ska se ut i både mobil- och desktopversionen. Headern (H1) och navigationsmenyn (nav-baren) är desamma som på de övriga sidorna. Sidans huvudinnehåll (main) börjar med en H2-rubrik och följs sedan av flera kort med information om olika typer av utrustning. I mobilversionen visas korten i en kolumn, medan de i desktopversionen är placerade i två kolumner för att utnyttja skärmytan bättre. Varje kort innehåller en klickbar H3-rubrik. Under denna finns dold text som visas när användaren klickar på rubriken. Dessutom innehåller varje kort en bild som hör till den aktuella utrustningen.

Detta är en mall för hur Om mig-sidan ska se ut i både mobil- och desktopversionen. Headern (H1) och navigationsmenyn (nav-baren) är desamma som på de övriga sidorna. Sidans innehåll är relativt enkelt och består av en H2-rubrik högst upp. Under rubriken finns två textblock placerade efter varandra som innehåller information om mig. Det finns ingen större skillnad mellan mobil- och desktopversionen av sidan. Den enda skillnaden är navigationsmenyns placering, på samma sätt som på de övriga sidorna.

Hur sidorna blev

Sidorna blev så som jag hade tänkt mig och det är inte mycket att förklara för det gjorde jag på ritningarna. Men allting fungerar och jag är nöjd.

Prestanda

Jag har kollat prestanda på alla sidor och det ser bra ut på alla men det är vissa bilder som behövde fixas.

Här är två bilder på pestandan på Hem-sidan. Här var de ända felen att bilderna på sidan var lite för stora, men saken är att de får väldigt dålig upplösning om jag ändrar storlek och prestandan är redan hög så detta var något som jag inte förändrade

Vi ser att denna prestanda är lite sämre, detta beror på bilderna, men jag ändrade på dessa bilder och nu ser det ut såhär:

Här nere är banor-sidan:

Det ända problemet på banor sidan var att flera bilder var otroligt mycket större än var de borde varit så det fixade jag och satte dem till den rekommenderade storleken. Prestandan var ju hög från början och gjorde ingen skillnad.

Här på Utrustnings-sidan är prestandan bra det är lite problem med bildernas storlek men upplösningen på bilderna blir dålig om de komprimeras. Så de får stanna såhär.

Mobil responsivitet

Jag har använt sidorna “Am I Responsive” och “bing” och fick detta resultat:

Här är både Hem-sidan och Banor-sidan i ‘Am I Responsive’, där de ser bra ut. Det enda problemet är att nav-baren overflowar lite i mobilversionen, men det är inte ett så stort problem och ser inte så farligt ut heller, så jag låter det vara.

Här har jag kollat tekniker-sidan och utrustnings-sidan på sidan “bing” där den visar bara gröna bockar på mobilvänligheten.

Tillgänglighet

Jag har använt programmet “WAVE Webaim” för att kolla prestandan och har kollat på alla de fem olika sidorna.

Inga stora fel här, det ända var att två bilder hade samma als som programmet tycker är lite av en “Alert”, men det fixade jag med att ändra den ena texten helt.

Inga fel alls här, det visade att allt var bra.

Den säger att min klick funktion endast är för mus, men detta tycker jag själv inte stämmer så jag ignorerar den helt.

inga fel här, allt är som det ska vara.

Det är väldigt lite på denna sida så det finns inga fel här heller.

Validering

Vi ser här att de fem sidornas HTML-kod och CSS-kod är helt felfria i valideringen. Inga fel eller errors hittades någonstans.

Olika Webbsidor

Jag testade min hemsida i tre olika webbläsare: Google Chrome, Firefox och Edge. Alla visade sidan likadant och det var ingen skillnad mellan dem.

Problem

Jag känner att utförandet av denna sida har gått bra och ganska snabbt. Problem har jag haft lite med till exempel JavaScript och att få det att fungera som det ska. Men annars har allt fungerat som det ska, och det har inte varit några större problem.

Ett problem jag faktiskt hade var att hitta bilder med bra upplösning och som var lagliga att använda. Men jag hittade bilder tillslut och slutprodukten blev väldigt bra tillslut ändå.

Är jag nöjd?

Ja, jag är nöjd. Jag gjorde mina mallar och hade en tanke och plan för hur denna sida skulle se ut. Det resulterade i att alla sidor liknar det jag hade tänkt mig och mina mallar. Jag har fått ut det jag ville med sidan, att sprida mitt intresse inom discgolf men också kanske få andra att börja spela discgolf genom denna sida.

Det finns saker som skulle kunna göras bättre och mer avancerat, med större funktioner och liknande. Men jag är nöjd med det jag har och skulle i nuläget inte vilja förändra så mycket, mer än att jag verkligen skulle ha velat ha fler val när det gäller bilder.