Projekt02

Under projektet har jag lärt mig ganska mycket, speciellt att utnyttja verktyg för att förbättra sidan inom olika delar såsom prestanda, bild prestanda och tillgänglighet. Jag har lärt mig mer om semantisk HTML, CSS och litegrann av Javascript. Jag har lärt mig hur viktigt det är med en bra planering och struktur för lite större…

Jag kommer att använda ett verktyg från wave.webaim.org för att testa tillgängligheten på sidan. Tillgänglighet index.html (hem) Alert pågrund av att sidans huvudinnehåll har en Kontakta mig knapp som leder till om sidan samtidigt som det finns en länk till om sidan i navbar. Tillgänglighet tekniker.html Liknande fel som förra. Problemet är att sidans namn…

Nu har jag konverterat alla bilder till AVIF format. Det gjorde stor skillnad i både storlek på bilerna samt resultat i prestanda. Prestanda index.html (hem) Prestanda tekniker.html Helt maxad trots 4 bilder. Prestanda projekt.html 100% igen. Prestanda om.html (om sida) 100% prestanda även här, nu finns det inte riktigt något mer att göra.

På detta inlägget testar jag prestandan på p02 innan jag har optimerat den. Prestanda index.html (hem) Prestandan är väldigt bra för att inte ha blivit optimerad Prestanda tekniker.html Väldigt bra här också trots flera bilder Prestanda projekt.html Väldigt bra här också Prestanda på om.html (om sida) 100 i prestanda, finns inte direkt något att göra…

I detta inlägget ska jag validera HTML och även CSS koden för att visa att den är korrekt uppbyggd. För HTML använder jag validator.w3.org och för CSS jigsaw.w3.org Validering index.html Validering gav inga varningar eller fel på index.html Validering av tekniker.html Allt funkade rätt här också. Validering av projekt.html Som tur är allt rätt här…

Med denna kod matchar jag på alla list element i navbar. Javascriptet kollar vilken sida som är aktiv och jämför med länkarna i navbar. När den får en träff sätter den class=”active” i den html kod som den läser in för sidan man är på. Detta är ett skalbart alternativ till att sätta klassen på…

Här ska jag gå igenom den CSS som används på sidan. Här är den första delen av CSS: Här ställer jag in att alla element har noll i marginal och 0 i padding från början. Detta gör att det blir lättare att sätta eller beräkna marginaler och padding istället för att behöva ta hänsyn till…

Index html Här kommer jag att beskriva viktiga delar av HTML koden exempelvis hur jag har gjort sidan anpassad för responsiv design, tillgänglighet och prestanda. I head har jag följande rad: Den här raden justerar viewport, den synliga ytan, till den bredd som enhetens skärm kan hantera. Den sätter också zoomnivån till 100%, vilket förhindrar…

I projekt 02, ska vi använda en liknande struktur och färgschema som i projekt 01. Jag har valt att ändra färgerna lite för att skapa bättre kontrast för tillgänglighet, samtidigt som det gör den lite snyggare. Jag har också flyttat menyn till höger sida, och valt ett annat typsnitt. Bilden nedan visar hur jag tänker…

Syftet med detta projekt är att vidareutveckla den existerande webbsidan med nya tekniker som jag har lärt mig. Detta kommer att visa potentiella kunder att Paolo kan erbjuda ytterligare tjänster. Målgruppen är småföretag och föreningar som behöver hjälp med enklare former av webbsidor. Den nya sidans struktur kommer se ut enligt wireframe nedan. Genom att…