Alva's Blogg

Här kommer lite resultat av testerna jag gjorde Inga valideringsfel kvar nu, tidigare fel var främst om tabbnavigering. Sidan fick 100 av 100 på SeRankings mobilvänlighetstest, vilket visar att hemsidan har en responsiv design. WAVE visade 32 varningar, främst på grund av att jag använde tabindex=”0″ på korten (<li>-element). Jag gjorde detta för att kunna…

Idé och syfte Jag vill göra en webbsida som på ett enkelt och tydligt sätt visar vilka val eleverna på Teknikprogrammet kan göra under årskurs 1 till 3. Målet är att sidan ska hjälpa både elever som redan går där och elever i årskurs 9 som funderar på att börja, att förstå vilka kurser och…

Idé och syfte Syftet med projektet är att förbättra Paolos webbplats med det jag har lärt mig om webbutveckling i denna kursen. Jag vill visa att jag kan jobba med modern teknik och göra en webbplats som ser bättre ut, fungerar bättre och är lätt att använda. Webbplatsen är tänkt för Paolos kunder, som oftast…

Resultat Den nya versionen av webbplatsen fungerar bra och uppfyller nästan alla mål jag hade. Den är fortfarande responsiv, men layouten är nu tydligare och mer användarvänlig. Jag har fixat fel i HTML- och CSS-koden, optimerat bilderna för att sidan ska ladda snabbare och även lagt in lite Java-script Prestandan ligger på en bra nivå,…

När man bygger hemsidor måste man ta hänsyn till GDPR och skydda användarens data. URL:er ska vara enkla och strukturerade så att de är enkla att förstå, det förbättrar navigeringen. När man ska använda bilder från internet är det viktigt att de är licenserade under Creative Commons eller annat tillåtet användningsvillkor. Skapar man eget innehåll,…

I denna uppgift har jag använt mig av Media Queries för att skapa en mer responsiv design utav Markdown-sidan jag tidigare gjort. Detta är dock en ganska krånglig process, då det krävs att man gör många justeringar för att säkerställa att designen fungerar bra på olika skärmstorlekar och enheter. Det innebär att man måste anpassa…

I denna uppgiften har ändrat Skog-sidan med ramverket Bootstrap för att skapa en responsiv design. Förändringar och utvärdering: De förändringar jag gjort för att få sidan att ha en mer responsiv design för att anpassa sig utefter enheten är att använda ett ramverk som redan är testat för att anpassa sig utefter enheten. Jag använde…

WAVE-testet jag gjorde visade att min landing-page har 0 fel och 0 kontrast fel, men en varning som gäller alternativ text för bilden på kaktusen. Jag väljer att inte fixa detta eftersom bilden fungerar som en logotyp, och dess funktion framgår redan av sammanhanget. Dessutom påverkar detta inte tillgängligheten av sidan på ett sätt som…

Åtgärder för att förbättra prestandan Efter Optimering Prestandamätningen visar att sidan nu laddas snabbt och bra. Efter att ha optimerat bilderna och använt lazy loading fick den 100 på prestandamätningen, vilket betyder att åtgärderna fick önskad effekt. Sidans laddningstid minskade och alla viktiga mätvärden blev bättre.

Slutsats Alla tre testerna visar att sidan har problem med laddningstid, stor sidstorlek och att innehållet flyttar sig när det laddas. Bland annat vad som kan förbättras: Efter att ha komprimerat koden Slutsats efter att komprimerat koden: Jag insåg att även om komprimerad HTML borde leda till bättre prestanda genom att minska filstorleken, så beror…