Min Blogg

[7.3 Lagar]

När man skapar en webbsida är det viktigt att följa GDPR för att skydda användarnas personuppgifter. Det innebär att man måste vara transparent med vilken information man samlar in, hur den används och att alltid få samtycke från användarna. Man måste också ha koll på om man kan använda ett verk och i så fall under vilka förhållanden. Det är en bra idé att använda material som är licensierat under Creative Commons, vilket ger möjlighet att använda och dela innehåll på ett lagligt sätt. När det kommer till eget material vill jag att det skyddas och så at jag har fortfarande kontroll over det, Creative Commons är en bra metod. I första versionen av min Landing Page hade jag använt en bild som jag viste inte om jag kunde använda, men när jag uppdaterade sidan för ett par månader sedan tog jag bort den.

[7.4 Tillämpning på egen webbplats]

Utförde stegen:

[7.5 SEO]

Stegen som jag skulle ta:

• Jag skulle optimera webbplatsen först med metabeskrivningar. En kort sammanfattning till exempel för varje sida för mina uppgifter och projekt skulle hjälpa främst personen så att de vet lite om sidan som de ska besöka men också SEO:n och mig eftersom det knuffar min sida högre upp i sökresultaten.
• Sedan om jag har uppdelat min sida i flera sidor med pagination kan jag använda metanyckelord för att göra sidorna mer SEO vänliga.
• H1 taggar är väldigt lätta att använda för rubriker och hjälper med SEO så jag har ingen anledning att inte använda dem.
• Slutligen är det inte bara för SEO men generellt väldigt viktigt att webbplatsen är mobilanpassad. Det hjälper sidan att rankas högre i sökresultaten men också så klart användaren.

_______________________________________________________________________________________

Jag tycker att det är värt att implementera SSL/TLS på Paolos sida för inte nödvändigtvis nuvarande behoven men också långsiktigt. För nu kommer HTTPS protokollet visa till användarna att sidan är säker och sidan kommer att placeras högre upp i sökresultaten, vilket jag tror Paolo skulle vilja. I framtiden vill han kanske implementera ett kontosystem eller betalningsmetoder och då måste personliga uppgifter vara skyddade. Om han har redan använt SSL/TLS är detta inget problem.

_______________________________________________________________________________________

Jag testade min Landing Page med PageSpeed Insights och fick veta at min sida är 90% optimerad med SEO. Det som saknades var en metabeskrivning.

Jag löste det genom att lägga till en metabeskrivning och passade på också att lägga till robots taggen, med index och follow.

Resultatet:

Jag gjorde MarkDown sidan mer responsiv med hjälp av relativa enheter, media queries och Flexbox. Det behövdes bara ett par värden att updatera med relativa enheter, så det var inget strul med det. Jag använde media query för att anpassa sidan till mobila enheter under 800px. Jag anpassade bilden, titlarna och taballen men använde också Flexbox in i media queryn för att ändra ordningen på stycken och bilden så att de ser bättre ut:

https://als071208ap.hemsida.eu/markdownv2/markdownv2.html

MarkDown före:

MarkDown efter:

_______________________________________________________________________________________

För att träna på ramverk använde jag Materialize för att skapa en ny version av min landing page från början. Jag löste de flesta problemen med hjälp av information på deras hemsida och ett par Youtube tutorials. Det var rätt klurigt men det är väldigt effektivt om man blir bra på det. Jag tycker om Materialize och kanske provar något annat ramverk längre fram:

https://als071208ap.hemsida.eu/materialize/materialize.html

Kontroll med wave.webaim.org:

Det verkar som det finns inga fel och bara en varning. Tjänsten säger att man borde inte hoppa mellan heading nivåer, där jag går från h1 till h3. Jag fixade det genom att ändra storleken av listans titel från h3 till h2:

Kontroll med Eiii Page Checker:

Det fanns inga problem enligt WCAG 20 regelverken och jag ändrade inte något mer.

Innan optimeringen:

Bildernas skala förändras inte i websidans kod, och därför tänker jag att den bästa lösningen är att komprimera dem.

Jag använde mig av tinypng och minskade bildernas filstorlek med ungefär en fjärdedel. Här är resultatet:

Det är tydligt att webbläsaren kan ladda bilderna snabbare än innan och jag anser att det var en bra lösning. Det kan finnas flera åtgärder som man kan ta men det här är en rätt effektiv och lätt lösning.

Validering av skogssidan innan komprimering:

Google PageSpeed Insights:

Webpagetest:

Pingdom:

Det verkar som det största problemet är själva layouten av sidan. Kodens struktur kan förbättras och bilderna kan kanske komprimeras också.

Validering av skogssidan på Google PageSpeed Insights efter komprimering:

Det verkar som det största problemet är själva layouten av sidan. Kodens struktur kan förbättras och bilderna kan kanske komprimeras också.

Validering av skogssidan på Google PageSpeed Insights efter komprimering:

Jag använde mig av Compress HTML för att komprimera all kod på en rad., och PageSpeed eftersom den gav tydligaste resultat. Jag provade de andra två komprimeringstjänsterna också men de fungerade inte eftersom skogssidan har intern CSS. Det verkar som komprimeringen hjälpte lite grant med prestandan och laddningstiden är faktiskt lite snabbare.

Smartphone och Tablet i Chrome:

Smartphone och Tablet i Firefox:

Validering av hur mobilanpassad min sida är:

Enligt tjänsten är min sida mobilanpassad, men när man kollar på den är det tydligt at den är inte helt och hållet. Headern och navigeringsfältet fungerar bra men listan har inte skalats ordentligt. En bra sak dock var att jag uppdaterade min landing page innan uppgiften och den blev mer mobilvänlig utan att jag faktiskt gjorde någonting åt det.

Validering av skogssidan:

Skogssidan verkar inte vara lika bra och behöver mer justering än min hemsida.

https://als071208ap.hemsida.eu

https://als071208ap.hemsida.eu/skog/skog_v1.html

Vad jag gjorde:

• Ändrade språket till svenska
• Doctype html flyttad till rad 1
• Tog bort ett par head taggar
• Felstavningar
• Saknades ett div i slutet
• Använde id istället för alt i bilderna, en av bilderna saknade en attribut helt och hållet
• Style behövde vara utanför body
• Sista section var inte stängd
• Sista paragraph låg på fel ställe
• Id istället för attr på den sista
• Tog bort /p från första stycket
• Tog bort en onödig allmän background color