- Användbarhet och Tillgänglighet:Jag hade anpassat bildernas storlek och format så att de inte drar mer resurser än nödvändigt. Jag hade även tagit bort fonten “permenant marker” då det inte längre är ett krav och enligt PageSpeed Insights tar mycket resurser.
- Responsiv Design:
Jag skulle primärt lägga till Media Queries vid olika lämpliga brytpunkter för att köra sidan mobilvänlig. Jag hade också kunnat använda variabler för att deklarera färgerna till webbplatsen ifall jag i framtiden vill byta färger eller lägga till ett “dark mode” läge. - Projektplanering och Dokumentation:
En kort planering/lista över det jag planerar att ändra och hur jag planerar att göra det hade varit bra. Att sedan ha en checklista man kan gå i genom för att kontrollera att allt stämmer hade varit bra.
Author: admin
-
moment 7 – Att jobba i projekt
-
Moment 7 – SEO (checklista)
Checklista för SEO:
- Titel taggar
- Meta taggar
- Korrekt HTML5 (Rubriker, semantiska element)
- Alt-text för bilder
- Mobilanpassning
- Snabba laddningstider
- Intern länking
- HTTPS
- Bra kvalitet på innehåll
Om jag utgår från denna checklista så har jag framför allt kunnat förbättra mobilanpassning, meta taggar och använt mer semantiska element på Paolos Webb. Just nu har den inga meta taggar, ingen mobilanpassning och minimal mängd semantiska element. Däremot så är allt annat på listan för det mesta godkänt.
När det kommer till SSL/TLS är det inte jättenödvändigt på Paolos Webb då inga uppgifter sparas på något sätt, men jag tror redan att det ändå är aktivt automatiskt just nu och en säker anslutning ger större trovärdighet hos kunder oavsett om något skumt försiggår eller inte.
-
Moment 7 – Lagar
Allmänt så tycker jag att existensen av GDPR, URL och Creative Commons är bra. Det skyddar personers kreativa verk online från stöld och otillåten använding samtidigt som det förenklar sökandet efter media som får användas. Det största problemet jag tänker på är att området är en gråskala, det är inte alltid moraliskt självklart om något borde tillåtes eller inte vilket följaktligen kan orsaka problem för folk som inte vill något illa eller som vill utnyttja systemet.
När jag hittar bilder online som ska användas i kommersiellt syfte eller användas på ett sätt sådant att alla har tillgång till det försöker jag använda tjänster som pexels så jag kan få bilder som är tillåtna att använda.
Däremot om jag själv laddar upp media på nätet så vill jag för det mesta att det inte används otillåtet. Det jag absolut inte vill är att mitt arbete marknadsförs som någon annans, men om någon istället tydligt förklarar att arbetet är mitt så tror jag det är lugnt i de flesta fallen.
Om jag tar som exempel användningen av tutorials på Kursolle av t.ex. BroCode så tycker jag att det är okej. Du länkar till videon och förklarar tydligt att det inte tillhör Kursolle. Eftersom det också används i utbildningssyfte och tutorialen är till för att lära ut så känns det konstigt om den inte skulle få användas på detta sätt. Däremot är det jag tycker inte det som faktiskt är tillåtet – om BroCode skulle kräva att videorna tas ner skulle det nog behöva göras.
I mina projekt jag nu gjort så tror jag inte att jag använt någon media otillåtet. Kanske i min första WordPress jag gjorde om katter, men även då tror jag också att jag gjorde lite research om de gick att använda eller inte.
-
m07 – Säkra lösenord
Här testade jag en lösenord “Potatis” i Password Meter och gjorde sedan små ändringar för att se hur komplexiteten av lösenordet skulle ändras.
Med endast lite små förändringer så kan ett kort och enkelt lösenorde bli ganska komplext.
Det andra jag gjorde vara att ladda ner och konfigurera lösenordshanteraren Bitwarden. Jag har funderat ett tag på att börja använda en lösenordhanterare för bättre säkerhet och även kunna hålla koll på alla mina lösenord på ett organiserat sett så detta moment blev ett perfekt tillfälle att faktiskt börja med det.
Jag kommer förhoppningsvis att från och med nu kunna hålla håll på mina lösenord och även ha en högre komplexitet när jag endast behöver komma ihåg ett huvudlösenord. Däremot så har jag väldigt många lösenord på alla möjliga tjänster så att samla allt på ett ställe kommer kräva tålamod och ork.
Angående de lösenord jag just nu använder i ett skolsammanhang så hade några av dem antagligen behöva bytas till något mer komplext men jag får väl se om mycket jag orkar.
-
Moment 6 – Responsiv Design
I moment 6 – responsiv deign har jag gjort två versioner av Markdown sidan från moment 3. I den första varianten som du hittar här använde jag mig av tenkniker så som relativa enheter, media queries, flexbox/grid och css variabler för att göra sidan responsiv till olika användarenheter.
Jag tycker inte att något var särskilt utmanande. Jag har använt flex/grid ganska mycket innan moment 6 och använder det bekvämt. Även resterande kunskaper har jag bekantat mig med till en viss del innan och hade inga större problem med att implementera. För att få responsivitet för olika skärmar har jag för det mesta använt media queries.
Den andra varianten jag gjorde av markdown så använde jag mig av ramverket materialize, det kan du hitta här. Jag kompletterade även med lite egen CSS för lite småsaker jag inte kunde göra med materialize, till exempel göra så att <body> element inte tar upp 100% av bredden vid stora skärmar.
Här är resultat för Markdown sidan innan några förändringar: Det står att sidan är mobilanpassad men som vi kan se det beter den sig konstigt.
Resultat för Responsiv Markdown sida: Man kan de att sidan är bättre anpassad för små skärmar.
Resultat av Markdown gjort med materialize: Av någon anledning så är huvudrubriken svart, inte centrerad och väldigt liten vilket den inte är på en faktiskt mobilenhet.
-
Checklista för Validering
- Validera HTML och CSS
- Följ HTML-5 och använd semantiska element + beskrivande namn på element.
- Kontrollera din hemsida i en annan webläsare och kontrollera mobilvänlighet.
- Kontrollera Prestanda: PageSpeed Insights, Pingdom.
Ändra t.ex. bildstorlek och bildformat. - Kontrollera tillgänglighet med WAVE (hemsida eller tillägg)
- Gå i genom en checklista med din hemsida för att se om den håller sig till din valda standard.
-
5.4 – Tillgänglighet
Efter att ha testat original versionen och den senaste versionen av Skogssidan uppstod samme problem därför finns endast bild på ett av resultaten som du kan hitta nedanför:
De tre felen jag fick var dålig kontrast skillnad på text och bakgrund. Jag åtgärdade det genom att ändra två färger som användes av text och headers så att de hade större konstrast mot den vita bakgrunden. Resultatet blev följande:
Ändringen förbättrar tillgängligheten eftersom konstrastet blir större mellan text och bakgrund och det vill lättare att urskilja och läsa innehållet. Det nya resultatet hade inga kontrast fel längre, som kan avläsas i bilden ovan.
-
5.3.4 – Bildprestanda
Det här är resultat jag fick innan jag tagit några åtgärder, då tar bilderna upp väldigt mycket mer plats än nödvändigt. Som feedback ska jag använda ett modernare bildformat (WebP istället för JPEG) och minska bildstorleken eftersom den är alldeles för stor och måste skalas ner vilket minskar prestanda.
Jag började med att ändra storleken från 6000×4000 till den efterfrågade 875×583 på samtliga bilder, det gav följande resultat:
Som man ser så minskade bildernas samanlagda storlek drastiskt från över 10 000 KiB till 1 000 KiB, “largest contentful draw” gick även från 55.3 sekunder ner till 5.9 sekunders, dock så gick prestanda värdet från ~70 till ~60 (på PageSpeed Insights).
Slutligen så ändrade jag även bildformat till WebP. Resultatet blev följande:
Filstorleken på bilderna minskade igen, om än 25%. Däremot så gick prestanda värdet upp till 89, alltså precis innan grönmarkering vilket fortfarnade är bra.
Jag tänkte först även komprimera Webp filerna eftersom jag fortfarande kan “Öka bildkomprimeringsfaktorn” men jag hittade inget smidigt sätt att göra det så jag nöjer mig. Resultat blev fortfarande större än jag förväntade och om det är något man ska åtgärda så är det själva bildstorleken: undvik att ha bilder med högre upplösning än vad ska skall användas.
-
5.3.3 – Prestanda
Jag fick lite olika resultat på hemsidorna men PageSpeed Insights verkar ha gett mig sämst resultat. Det största problemet är definitivt bilderna – deras bildstorlek och formatet på en bild är inte optimerat. När jag komprimerade HTML filen (som också innehåller CSS) reducerades storleken från 4.62kB till 2.87kB men förvånansvärt så blev prestanda resultatet sämre, där bilderna igen var största problemet.
Före komprimering:
Efter komprimering: (En av hemsidorna hade endast 1 gratis använding)
-
5.3.2 – Användaragenter och utvecklingverktyg
Det är inte så förvånande att mitt resultat inte är så bra med tanke på att jag inte har försökt anpassa min Landing Page alls till mobilen. Däremot så har jag lite ideer som kommer förbättra det. Jag kan ändra flex-direction till column istället för row, jag kan göra att text blir större och att marginal och padding blir mindre, och lite annat.
På bilderna så valde jag iPhone 12 Pro och iPad Air i Chrome och FireFox som webbläsare. Man ser såklart att hemsidan inte är anpassad till mindre enheter, speciellt på smartphone. Men skillnaden mellan Firefox och Chrome var däremot inte stor.
