Mina skolprojekt
Landing page – Moment 1 och 2
Jag har skapat en Landing Page där jag samlar mina uppgifter och moment i kursen Webbutveckling. Jag har använt HTML och CSS för att bygga sidan på ett strukturerat sätt och sett till att den ser snygg och användarvänlig ut.
Det svåra tycker jag var CSS-koden, särskilt när man skulle få till avstånden mellan de olika rubrikerna och länkarna, och se till att länkarna både såg bra ut och var tydliga att klicka på samt att man förstod vad varje länk betydde. Men jag tycker ändå att sidan blev bra och det var roligt att se resultatet, även om det var ganska jobbigt att göra.
MarkDown – Moment 3
Jag har skapat en sida på beställning där målet var att återskapa originalet så noggrant som möjligt. Sidan innehåller instruktioner om hur man använder Markdown, och jag har försökt följa strukturen, designen och innehållet från förlagan. Fokus har legat på att få både layout och funktioner att stämma överens med originalet.
Det som var svårast i den här uppgiften var att få till listan med alla kommandon. Jag har inte jobbat så mycket med table tidigare, så det tog lite tid att förstå hur jag skulle bygga upp den på rätt sätt. Men efter att jag testat mig fram och ändrat några gånger fick jag det att funka till slut.
Burgerbase – Moment 4
Jag har följt en tutorial där jag byggde en hamburgarsida som innehöll HTML, CSS och lite JavaScript. Jag följde instruktionerna noggrant och använde CSS-koden från tutorialen. Jag försökte också förstå hur CSS:en fungerade genom att analysera och testa vad han hade gjort.
Jag tyckte inte den här uppgiften var så svår och ganska tråkig eftersom vi bara skulle följa en tutorial. Men han visade ändå nya saker som att använda javascript för att scrolla på sidan.
Burgerbase (Olika sidor) – Moment 4 (extra)
Denna uppgift är samma som förra, men istället för att det bara var en sida så var det flera sidor. På den uppgiften följde jag nästan också tutorialen eller använde samma kod. Men jag fick ändra lite för att det skulle fungera med olika sidor.
Så på denna uppgiften var det lite mer att göra, men den var fortfarande inte så svår och fortfarande ganska tråkig.
Teori – Moment 5
I detta moment är det många olika uppgifter, det skulle ta en stor del av denna sidan om jag lade upp allt här så jag har två länkar nedan som har de olika uppgifterna i sig.
Responsiv Design – Moment 6
Jag har valt att visa metoderna media queries och ramverk för att göra sidorna mobilvänliga.
Jag börjar med media queries, som jag använde för att anpassa en tidigare uppgift, Markdown, som från början inte var mobilvänlig. Genom att använda media queries kunde jag justera layouten så att den fungerar bättre på mindre skärmar. Nedan kan du se hur sidans mobilvänlighet var innan, och sedan hur den nya versionen ser ut i olika storlekar och om den är mobilvänlig:
Jag anpassade sidan för olika storlekar. När sidan visas i mobilstorlek ändras den blåa grundfärgen till grön. För surfplattor (t.ex. iPad) ändras färgen istället till röd. I originalkoden hade containern “.ruta” en “min-width” på 800px, vilket gjorde att sidan inte kunde bli mindre än så och därför skapades en horisontell scroll på mobil. Genom att i media queries ändra “min-width” till 0 kunde sidan anpassa sig efter skärmens storlek och därmed undvika “overflow”.
Sedan kommer vi till ramverk. Här valde jag att skapa en helt ny sida istället för att bygga om en tidigare. Med hjälp av Bootstrap kunde jag enkelt göra sidan anpassad för olika skärmstorlekar.
Nedan visas hur sidan ser ut i olika storlekar, samt hur layouten förändras för att fungera på både mobil och dator.
Det jag har gjort här är att jag har lagt till marginaler på vänster och höger sida av innehållet, men endast för större skärmar. På mobil visas innehållet istället över hela bredden av sidan för att utnyttja skärmytan bättre.
För att åstadkomma detta använde jag Bootstrap-klasserna “ms-lg-5” och “me-lg-5”. Dessa gör att marginalerna endast aktiveras när skärmen är i större storlek (desktop), men inte på mobil. Detta bidrar till att sidan blir mer mobilvänlig eftersom innehållet inte känns instängt på mindre skärmar.
Jag har även använt Bootstrap-grid med klasser som col-12 och col-lg-6, vilket gör att innehållet staplas på mobil men visas i två kolumner på större skärmar. Detta gör layouten mer anpassad efter olika enheter.
Teknik, Lagar och Projekt – Moment 7
Säkra lösenord
I mitt första “försök” så valde jag ett lösenord som ses ganska halvbra. Den har små bokstäver och siffor som gör den hyfsat säker (41%). Men lösenordet är inte så praktiskt eftersom jag gör den enkla sifferordningen 1, 2 och 3 som är det som kommer testas först om någon försöker lista ut det.
I nästa “försök” kan man se att jag gjorde några ändringar i lösenordet. De ändringar jag gjorde var att ändra ett l, o:et och g:et till stora bokstäver istället för små. Detta gjorde lösenordet nästan dubbelt så starkt. Det krävs alltså inte så stora ändringar för att enkelt förstärka sitt lösenord.
I sista bilden kan vi se att det är 100 % säkerhet. Det jag ändrade och lade till var ett snabel-a (@) istället för det vanliga a:et. Sedan ändrade jag o:et till en nolla och lade till ett utropstecken i slutet av lösenordet.
Tankar om Lösenordshanterare
Den enda lösenordshanteraren jag har använt och fortfarande använder är Googles. Jag tycker att det är en bra sak eftersom jag inte behöver ha lika bra koll på alla mina lösenord (även om det fortfarande är bra att ha koll). Tjänsten kan dessutom föreslå starka lösenord om man inte vill skapa egna, vilket gör att lösenorden blir svårare att gissa och därmed säkrare.
Samtidigt kan det finnas nackdelar, till exempel att man blir beroende av en enda tjänst. Om någon skulle få tillgång till ens Google-konto kan det innebära att alla sparade lösenord blir utsatta.
Sammanfattningsvis tycker jag att lösenordshanterare är bra, men det är också viktigt att ha egen koll.
Lagar
Jag tycker att GDPR är bra eftersom det skyddar människors och företags personliga information. Samtidigt kan det göra det svårare att till exempel skapa webbsidor, eftersom det inte alltid finns så många bilder och annat material man får använda. Man måste alltså vara noggrann och ha tydligt samtycke när man samlar in material från nätet.
Jag tycker att Creative Commons är bra eftersom det gör det möjligt att använda andras material lagligt, så länge man följer reglerna. Det ger fler möjligheter att till exempel skapa bättre webbsidor, samtidigt som det fortfarande gynnar de som äger materialet.
På mina sidor finns det vissa bilder som är direkt tagna från Google, vilket kan bryta mot reglerna. Dessa finns i moment 1 och projekt 1, där jag har använt bilder utan att kontrollera om de är tillåtna, istället för att använda lagliga sidor som till exempel Pexels.
Detta fixade jag genom att ta bilder från den lagliga sidan Pexels som har gratis bilder, istället för bilder rakt tagna från Google.
Tillämpningar
Jag kontrollerade SSL/TLS status i cPanel. Alla relevanta domäner hade AutoSSL Domain Validated aktivt (grönt hänglås). Jag har även kontrollerat domänerna under Domains och aktiverat Force HTTPS Redirect så att webbplatsen använder HTTPS.
Jobba i projekt
Användarvänligheten behöver förbättras, och jag vill göra sidan bättre för personer som besöker min sida oavsett förmåga. En viktig del är tillgänglighet, till exempel tydligare struktur med rubriker, bättre kontraster, alt-texter på bilder och enklare navigation. Det skulle göra webbplatsen lättare att använda för alla besökare.
En av de viktigaste sakerna att fixa är mobilanpassningen, eftersom den är väldigt dålig just nu. Sidan behöver anpassas för att fungera bra på alla olika skärmar. Verktygen jag tänker använda mig av för att mobilanpassa sidan är exempelvis media query eller flexbox och grid.
När det gäller projektplanering tycker jag det är viktigt att först planera vilka förbättringar som ska göras, i vilken ordning de ska göras och dokumentera ändringar under arbetets gång. Det gör det lättare att hålla struktur i projektet och följa upp vad som fungerar och vad som behöver förbättras. Jag tänker använda detta i arbetet med Paolos Webb 2.0 för att arbeta mer genomtänkt och organiserat än i första versionen.
Paolos Webb – Projekt 1
Den här uppgiften tyckte jag var rolig, och det fanns flera detaljer som gjorde den intressant, till exempel att man absolut inte fick använda färgen röd eller liknande färger. Det fanns också delar som var lite svårare. En sak var att göra rutorna med förklaringar och få allt att se snyggt ut, speciellt att få bilderna att ligga bra. Den första sidan blev jag inte helt nöjd med, men jag valde att låta den vara eftersom jag inte ville göra den för komplicerad och riskera att den såg konstig ut.
