Yamoos Blogg

Kategori: Webbutveckling

  • Moment 7 – Säkra lösenord

    Före:

    Efter:

    Jag har använt Password Meter för att testa ett gammalt lösenord. Jag ändrade om bokstäverna O till nollor och lade till ett specialtecken och det höjdes från 45% till 98% vilket var väldigt bra då den fortfarande liknar det gamla lösenordet fast med andra siffor istället för bokstäver.

    Lösenordshanterare

    Jag har tidigare använt Googles lösenordshanterare. Jag har 51 olika lösenord lagrade och för att få åtkomst till dem så behöver jag skriva in lösenordet för datorn vilket är ganska bra och säkert men mitt lösenord till datorn är likt många andra lösenord jag har vilket ökar säkerhetsrisken. Jag har valt att testa ett nytt lösenordshanterare och den funkar superbra. Den heter NordPass och när man först skapar kontot så skapar man ett ”master password” som endast ska vara för att låsa upp lösenordshanteraren då den förvarnar dig att inte använda samma lösenord någon annanstans.

    Mina lösenord

    Det lösenord jag använder för WP är ett väldigt svårt lösenord då jag autogenerera det via google när jag först valde ut lösenordet och den får 100% av mätaren.

    Detta är för mitt lösenord för Filezilla och det är ganska starkt men jag bör sätta in en till siffra eller specialtecken för att stärka det mer.

    Jag har samma lösenord för min CPANEL och jag borde byta till något annat, kanske liknande för att öka säkerheten och då har jag min lösenordshanterare till hjälp att hålla ordning på alla lösenord.

    Hantering av lösenord på personlig nivå

    Att hantera lösenord på ett säkert sätt är inte bara viktigt , det handlar också om att ta ansvar. Som ansvarig för en webbplats måste jag skydda användarnas information och stoppa obehöriga från att komma åt den. Därför:

    • använder jag inte samma lösenord på flera ställen
    • sparar jag aldrig lösenord i öppna filer eller mejl
    • ser jag till att bara använda säkra tjänster

    Jag vet också att tredjepartskod, som till exempel plugins eller externa script, kan vara en risk. En plugin i WordPress kan ha dolda säkerhetshål eller samla in information utan att jag märker det. Därför väljer jag bara tillägg som är kända och uppdaterade.

    När jag väljer webbhotell tittar jag också på hur säkra de är. Jag kollar till exempel:

    • om de erbjuder SSL-certifikat
    • hur de gör med backup
    • om det går att använda tvåfaktorsinloggning

  • Projekt 03 – Skolis – Utvädering/resultat

    Resultat

    1. Valideringar

    Här är godkända valideringar för både CSS och HTML. Innan jag fixade fel så var det <div> fel där jag hade placerat dem fel och på vissa ställen inte stängt.

    2. WAVE tillgänglighetstest

    På den första bilden visar testet ett kontrast fel. Jag ändrade i min CSS fel och ändrade färger för att få rätt kontrast. Använde mig även av WebAIM Contrast Checker för att se vilka färger som uppfyllde AA och AAA kraven. På sista bilden kan man se att efter mina ändringar så fick jag 8.59:1 i kontrasttestet och min webbsida uppfyller nu AA och AAA kraven.

    3. Pingdom Website Speed Test

    Jag fick performance grade A vilket är det högsta. Fick ett tips att komprimerna bilder med gzip men jag nöjde mig och gjorde inte det då jag redan ändrat storlek, komprimerat och ändrat format på alla bilder som används på min sida.

    4. PageSpeed Insights test

    Jag fick väldigt goda värden som man kan se ovan. På bästa metoder fick jag 86 men det valde jag att inte lösa då den klagade på att jag inte hade <meta viewport> vilket jag har om man kollar i alla mina html koder, det störde jag mig på något otroligt.

    5. Bing mobilvänlighetstest

    På detta test fick jag bra feedback men sen var det det med viewport men det är inget jag kan lösa då jag redan har viewport i mina html koder. Detta visar att min sida har en responsiv design och är användarvänlig.

    Problem och motgångar (lösningar)

    I min projektplan hade jag som krav/mål att man skulle kunna ändra dagsvy till veckovy och vice versa dynamiskt, dvs att det inte skulle vara flera html koder som representerar olika innehåll. Detta skulle jag göra med hjälp av html men som vi kan se nu så blev det flera html koder istället. För det första hade jag inte jobbat så mycket med javascript innan vilket gjorde detta en mycket större utmaning att anta än jag förväntat mig. Jag började faktiskt med en dynamisk version men när jag skulle börja addera fler saker såsom olika vyer för olika veckor, dagar och klasser tog det mot. Jag ville också implementera bilder vid sidan om schemat som jag har nu men det kunde jag inte lösa. Min lösning blev att ta den långa vägen, att göra flera html koder istället för javascript.

    Det var svårt att göra koden så semantisk som möjligt, jag började med <div> på nästan allt i princip men sedan när jag var klar så ändrade jag om till section, ul och list för att göra koden mer tillgänglig men jag upptäckte mitt i att mina dropdown knappar slutade funka. Jag felsökte men det fungerade inte så jag tog tillbaka gamla koden. Min kod nu är delvis semantisk men jag lade till några ARIA attribut istället för HTML, vilket var nytt för mig men en rolig utmaning.

    Utvärdering

    Detta projekt ställde mina kunskaper på prov då detta varit det mest tidskrävande och jobbigaste projekt hittils. För det första behövde man göra en projektplan och komma på hur sin sida skulle se ut själv utan hjälp eller specifika krav (mer än att det skulle vara responsiv design). För det andra blev projektet längre och större än jag trodde vilket dröjde ut på tiden och jag blev bara frustrerad om något blev fel då det saktade ner mig och min chans att bli klar. Dock så är jag nöjd då jag uppnått det flesta mål såsom responsiv design, god prestanda och validerade koder. Javascripten gjorde sidan mer interaktiv då det lade till en effekt när man trycker på dropdown knapparna och detta är jag mest nöjd med.

    Det som var svårast var den semantiska delen då jag behövde gå tillbaka till min ursprungskod då det inte funkade när jag ändrade om koden. Jag fick till en delvis semantisk kod så det är jag ändå nöjd över då det var min svåraste motgång.

    Jag hade önskat att jag lade mer tid på den semantiska delen och att jag klurade ut/ hade mer tid till att göra sidan dynamisk med hjälp av javascript. Detta skulle tagit min sida till en helt annan nivå och jag skulle varit mer nöjd men jag är ändå nöjd med resultaten och detta var ett lärorikt projekt!

  • Projektplan – Projekt 03 – Skolis

    Projektbeskrivning

    Jag vill skapa en responsiv och användarvänlig webbsida som visar ett skolschema. Sidan har en tydlig struktur med header, main och footer, samt en sidomeny där användaren kan välja att visa schema för klass, sal eller lärare. Schemat kan visas som dagsvy eller veckovy. För att öka användarupplevelsen ska sidan innehålla en enkel JavaScript-funktion, exempelvis för att byta vy mellan dag och vecka utan att ladda om sidan.

    Mål och syfte

    • Bygga en responsiv webbsida med modern HTML5 och CSS.
    • Implementera en sidomeny för val av schema (klass, sal, lärare).
    • Visa ett enkelt, färgkodat schema med veckodagar och tider.
    • Använda JavaScript för att byta mellan dagsvy och veckovy dynamiskt.
    • Säkerställa god prestanda och användarvänlighet på olika enheter.
    • Ha validerad html och CSS kod

    Målgrupp

    Primärt elever och skolpersonal, men projektet är främst en teknisk övning för att visa webbutvecklingskunskaper.

    Krav

    • Header: Sidans titel.
    • Sidomeny: Val mellan klass, sal och lärare; dropdown för specifikt val; knappar för dagsvy och veckovy.
    • Schema: Visas i ett rutnät med veckodagar och tider, färgkodade rutor.
    • Responsiv design: Sidomenyn anpassar sig efter skärmstorlek.
    • JavaScript: Dynamiskt byte mellan dagsvy och veckovy utan omladdning.
    • Semantisk, välstrukturerad HTML5.
    • Användning av CSS Grid och Flexbox.
    • Responsiv design via media queries.
    • Optimerad prestanda och enkel kod.

    Design och teknik

    • HTML5
    • CSS: Grid för schemarutnät, flexbox för sidomeny och layout, media queries för responsivitet.
    • JavaScript

    Tidsplan (2 veckor)

    Vecka 1:

    • Planering och strukturering av sidan
    • Grundläggande HTML och sidomeny
    • Skapa schemarutnät och styling
    • Skapa schemarutnät och styling

    Vecka 2:

    • Testning och justeringar
    • Dokumentation och förberedelse för inlämning

    MIN SKISS