1. planering Gannt-schema(https://unito.io/blog/gantt-chart-templates/)
2. Kravspec
   • Vilka är sidan intressant för.
   • Vilka behov ska projektet tillfredsställa.
   • Vilka funktioner ska webbsidan ha.
   • prioritera vilka krav som är viktigast.
3. Skapa en design på hur jag vill att webbsidan ska se ut. https://app.diagrams.net/
   • navigerings struktur
   • placering av innehåll
   • färg scheman https://coolors.co/
   • bilder och ikoner https://www.pexels.com/sv-se/
   • hur den responsiva designen ser ut på olika användaragenter
4. Användbarhet och tillgänglighet https://pagespeed.web.dev/
   • Synnedsättning
   • Hörselnedsättning
   • Motoriska svårigheter
   • Kognitiva svårigheter
5. Mobil anpassad https://www.bing.com/webmaster/tools/mobile-friendliness
6. Validering https://validator.w3.org/nu/#textarea
7. SEO
   • titeltaggar
   • metabeskrivningar
   • alt-texter för bilder
8. Validering
9. Utvärdering och reflektion.

SEO

För det första så skulle jag lägga till andra titeltaggar än de som jag har ljust nu eftersom de jag har är alla samma på alla sidorna. Jag hade istället kunna ändra de till något som är mer relevant till ljust den sidan man är på. Till exempel att när man är inne på tekniker så ska det stå “Paolos webb tekniker” istället för bara “Paolos webb”.

Jag borde även lägga till en meta beskrivning som ger en sammanfattning av innehållet på de olika sidorna för att förbättra klick frekvensen till webbsidan. För ljust nu har jag inte någon meta beskrivning på någon av sidorna.

Jag skulle även kunna göra så att webbsidan blir mer mobil vänlig eftersom webbsidor som är mobil vänliga blir prioriterade av sökmotorerna. Det hade jag kunnat göra genom att till exempel göra så att bilderna inte är utsatta till ett specifikt antal pixlar utan att jag istället använder % eller em för att bestämma storlekarna för bilderna.

SSL/TLS var redan implementerat på Paolo Webb, så jag behövde inte ändra på någonting. Så Paolo behöver inte oroa sig om att hans webbsida kanske inte är säker, för det är den. 👮💪

Tillämpning på egen webbplats

När jag gick in på cPanel för att ändra på det som behövdes ändra på så märkte jag att allt var precis så som det skulle vara och jag behövde inte ändra på någonting.

Lagar

Det hade varit svårt att veta om det hade varit säkert att dela sina personuppgifter på sidor om GDPR inte fanns som en lag. Man har ju som användare mer rättigheter med GDPR som gör att vi kan bestämma själva ifall vi vill att våra personuppgifter ska raderas eller vara kvar på en webbsida. Så jag tycker personligen att GDPR är någonting som är väldigt bra eftersom att den gör att det jag ger till webbsidor kommer att lagras säkert och inte användas på ett felaktigt sätt.

Jag kan verkligen fatta varför upphovsrättslagen är så pass hård eftersom att den skyddar skaparen som har lagt ner mycket tid på sina verk från att andra ska använda deras grejer på ett sätt som man kanske inte vill att det ska användas på eller utan att ha frågat om lov. Creative Commons värkar vara något jätte bra eftersom att man får tillgång till bilder och låtar på ett enkelt sätt bara man följer de lagar som skaparen har satt på sitt verk.

Om jag hade lagt ner mycket tid på att till exempel skapa en bild, så hade jag inte velat att andra personer hade använt den bilden. men om jag hade skapat någonting som var till för ett lärande syfte så hade jag nog varit ganska okej med att andra använder det. De grejer som du har skapat på kursolle tror jag ändå att du är okej med att andra använder i ett lärande syfte, och jag tror att det hade varit lite samma ifall jag hade gjort något som andra skulle använda sig för att lära sig saker.

Det som man måste tänka på när man ska bygga en webbsida är att man måste se till att man inte tar några bilder, texter, filmer eller musik av någon som inte har godkänt att man använder deras verk. Om det nu är så att man verkligen vill använda en viss bild som man hittade på nätet som inte är gratis, så kan man fråga skaparen om lov att använda det som de har gjort eller även betala en summa för att få använda bilden. Men det smidigaste är ju ifall man tar en egen bild och använder. Eller så kan man till exempel använda Creative Commons för att få tag på bilder som man får använda.

Jag är ganska säker på att jag inte har brutit mot någon av lagarna eftersom jag antingen har tagit bilderna själv eller tagit filmer och bilder från ställen där det är gratis.

Lösenordet “fiskgratäng” va inte lika dåligt som jag hade förväntat mig att det skulle vara, men det var inte heller så jättebra.

Efter att jag bytte ut ett i mot ett utropstecken och ett a mot ett @ så blev lösenordet starkare, och lösenords mätaren slutade gnälla om att jag inte hade med några symboler.

Lösenordet blev väldigt starkt efter att jag lade till två stycken punkter mellan de tre sista bokstäverna. Jag trodde seriöst inte att det skulle göra så stor skillnad från hur det var innan.

Det blev 100% strong efter att jag lade till en stor bokstav i början av lösenordet och en siffra i slutet av lösenordet.

Jag har tidigare använt appen Keeper på min telefon eftersom min pappa hade skapat något familj abonnemang och sa åt mig att ladda ner appen. Jag suger vanligtvis på att komma ihåg vad jag har för lösenord på olika grejer, så jag brukade för det mesta bara ha samma lösenord till allt. Men efter att jag har börjat använda keeper så har jag för det mesta olika lösenord på allt eftersom att jag inte behöver komma ihåg det själv längre. Jag är väldigt nöjd med den appen även ifall den bara finns på min telefon eftersom det mesta jag använder är på mobilen och inte på någon dator. Jag är inte helt säker på om jag ens kan använda den appen på datorn eller inte. Men jag tänkte i alla fall att jag kunde testa Bitwarden på min skoldator för att se om den skulle vara till någon hjälp med de lösenord som är kopplade till skolan.

Så nu när jag har testat att använda Bitwarden för mina lösenord jag har till skolan så har jag märkt att det faktiskt var smidigt. Men jag hade dock inte så många som jag behövde lägga in, så jag kanske inte riktigt fick hela upplevelsen med att ha många lösenord.

Jag märkte dock när jag skulle lägga in alla lösenord i Bitwarden att 90% av alla mina lösenord som jag har till skolan är exakt lika dana, vilket kanske inte är så fantastiskt. De ända unika lösenorden är de som jag själv inte har behövt hitta på. Så nu när jag har Bitwarden på min dator blir jag säkert lite bättre på att använda mer unika lösenord eftersom jag inte kommer behöva komma ihåg dem.

Men nu när jag ändå har haft lite tid kvar på lektionen så har jag bytt ut lite lösenord som var sämst till lösenord som är fantastiska. Så nu har det blivit svårt för alla hackare att hacka mig. 💪🤩🤪

Ramverk

Den originala versionen av markdownsidan där jag hade min egna css var inte alls mobil vänlig. Så jag använde istället materialize ramverket och dess css för att lätt kunna bygga upp sidan för att få den mobil vänlig.

(Bings mobilvänlighetstest fungerar inte just nu, så jag kan inte jämföra de två variationerna med det verktyget.)

Media query

Sidan var från början inte särskilt mobil vänlig, men efter att jag använde media query så blev det mycket bättre. Alltså så bestämde jag hur sidan skulle se ut när skärmen var en viss storlek så att sidan skulle fungera lika bra på en telefon som på en dator.

(Bings mobil vänlighets test fungerade inte när jag skulle kolla hur sidan blev efter jag använde media query.)

DOM

Jag lyckades inte genomföra hela uppgiften eftersom att den var väldigt svår, men jag kom ändå en liten bit på vägen.

1. Validering av kod: https://validator.w3.org/nu/#textarea.
2. Kolla prestandan: https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect och https://www.webpagetest.org/.
3. Kolla mobil vänlighet: https://www.bing.com/webmaster/tools/mobile-friendliness.
4. Ändra storlek på bilder om det behövs: https://imageresizer.com/sv.
5. Om du vill ta bort “White space”:https://www.textfixer.com/html/compress-html-compression.php och https://csscompressor.com/.
6. Kolla tillgänglighet: https://wave.webaim.org/ och https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect.

Originalversionen av skogs sidan.

Senaste versionen av skogs sidan. Skillnaden mellan den senaste och den originala versionen är att jag har lagt till texter om vad bilderna är för något. Men jag hade satt att bild beskrivningarna var samma sak vilket det verkade som om de inte tyckte om. Jag har även lagt till ett språk på den senaste versionen av koden. det som är likt är att det är dålig kontrast mellan text och bakgrund vilket gör det svårt att läsa vad det står på hemsidan.

Samma sak visas på denna sidan, alltså att bakgrundsfärgen och textfärgen är alldeles för lika.

Dessa blev resultaten efter att jag fixade problemen.

Efter jag fixade alla problemen och gjorde ett nytt tillgänglighets test så var det inte några nya problem som hade uppstått.

Det jag ändrade var att jag bytte färgen på den gröna och ljusgråa texten så att de istället blev svarta och enklare att läsa. Jag lade även till att koden var skriven på svenska så att det inte skulle bli några konstiga tecken i texterna.

Innan jag lade till språk på koden så var det konstiga bokstäver och tecken i texterna vilket blev fixat efter jag la dit lang=”sv”

Jag bytte ju även också färgerna på texterna till svart så att kontrasterna mellan bakgrunden och texterna skulle bli större, så att det är lättare att läsa om man har sämre syn.

Det verkar som om att bildfilerna är större än vad de behöver vara på varje bild. Så jag tänker göra om bildernas storlekar till 875×583.

Jag tycker att ändringarna på bilderna gjorde skillnad eftersom att prestandan gick från 74 till 87. Jag tror inte att man kan göra så mycket mer med bilderna för att få ett bättre resultat, så jag är nöjd.

På de båda sidorna stod det att det var bilderna som var det största problemet och att de tar längst tid att laddas in eftersom att de var större än nödvändigt.

På ena sidan kan man se att in laddningstiden har gått ner efter att jag komprimerade sidan, men på den andra så verkar det inte ha blivit någon skillnad. Så jag antar att man kommer se större skillnad på ändringar på olika sidor.