Resultat
- Valideringar
Här är godkända valideringar för både CSS och HTML. Innan jag fixade fel så var det <div> fel där jag hade placerat dem fel och på vissa ställen inte stängt.
2. WAVE tillgänglighetstest
På den första bilden visar testet ett kontrast fel. Jag ändrade i min CSS fel och ändrade färger för att få rätt kontrast. Använde mig även av WebAIM Contrast Checker för att se vilka färger som uppfyllde AA och AAA kraven. På sista bilden kan man se att efter mina ändringar så fick jag 8.59:1 i kontrasttestet och min webbsida uppfyller nu AA och AAA kraven.
3. Pingdom Website Speed Test
Jag fick performance grade A vilket är det högsta. Fick ett tips att komprimerna bilder med gzip men jag nöjde mig och gjorde inte det då jag redan ändrat storlek, komprimerat och ändrat format på alla bilder som används på min sida.
4. PageSpeed Insights test
Jag fick väldigt goda värden som man kan se ovan. På bästa metoder fick jag 86 men det valde jag att inte lösa då den klagade på att jag inte hade <meta viewport> vilket jag har om man kollar i alla mina html koder, det störde jag mig på något otroligt.
5. Bing mobilvänlighetstest
På detta test fick jag bra feedback men sen var det det med viewport men det är inget jag kan lösa då jag redan har viewport i mina html koder. Detta visar att min sida har en responsiv design och är användarvänlig.
Problem och motgångar (lösningar)
I min projektplan hade jag som krav/mål att man skulle kunna ändra dagsvy till veckovy och vice versa dynamiskt, dvs att det inte skulle vara flera html koder som representerar olika innehåll. Detta skulle jag göra med hjälp av html men som vi kan se nu så blev det flera html koder istället. För det första hade jag inte jobbat så mycket med javascript innan vilket gjorde detta en mycket större utmaning att anta än jag förväntat mig. Jag började faktiskt med en dynamisk version men när jag skulle börja addera fler saker såsom olika vyer för olika veckor, dagar och klasser tog det mot. Jag ville också implementera bilder vid sidan om schemat som jag har nu men det kunde jag inte lösa. Min lösning blev att ta den långa vägen, att göra flera html koder istället för javascript.
Det var svårt att göra koden så semantisk som möjligt, jag började med <div> på nästan allt i princip men sedan när jag var klar så ändrade jag om till section, ul och list för att göra koden mer tillgänglig men jag upptäckte mitt i att mina dropdown knappar slutade funka. Jag felsökte men det fungerade inte så jag tog tillbaka gamla koden. Min kod nu är delvis semantisk men jag lade till några ARIA attribut istället för HTML, vilket var nytt för mig men en rolig utmaning.
Utvärdering
Detta projekt ställde mina kunskaper på prov då detta varit det mest tidskrävande och jobbigaste projekt hittils. För det första behövde man göra en projektplan och komma på hur sin sida skulle se ut själv utan hjälp eller specifika krav (mer än att det skulle vara responsiv design). För det andra blev projektet längre och större än jag trodde vilket dröjde ut på tiden och jag blev bara frustrerad om något blev fel då det saktade ner mig och min chans att bli klar. Dock så är jag nöjd då jag uppnått det flesta mål såsom responsiv design, god prestanda och validerade koder. Javascripten gjorde sidan mer interaktiv då det lade till en effekt när man trycker på dropdown knapparna och detta är jag mest nöjd med.
Det som var svårast var den semantiska delen då jag behövde gå tillbaka till min ursprungskod då det inte funkade när jag ändrade om koden. Jag fick till en delvis semantisk kod så det är jag ändå nöjd över då det var min svåraste motgång.
Jag hade önskat att jag lade mer tid på den semantiska delen och att jag klurade ut/ hade mer tid till att göra sidan dynamisk med hjälp av javascript. Detta skulle tagit min sida till en helt annan nivå och jag skulle varit mer nöjd men jag är ändå nöjd med resultaten och detta var ett lärorikt projekt!
