7. Moment07 - Tekniken och lagar

Även om denna kurs är väldigt praktisk och ett stort fokus ligger på att skapa webbsidor så är det viktigt att hålla koll på lagar och förordningar samt att följa dessa i arbetet. För att dina webbprojekt skall bli lyckade kommer det också krävas att du har en bra planering som följs. Dessa saker kommer vi gå igenom i detta moment där vi också kort kikar på tekniken bakom webben.

7.1 Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

7.1.1 Centralt innehåll

• Webben som plattform, dess historia och samhällspåverkan.
• Teknisk orientering om webbens protokoll, adresser, säkerhet och samspelet mellan klient och server.
• Processen för ett webbutvecklingsprojekt med målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
• Riktlinjer för god praxis inom webbutveckling.
• Lagar och andra bestämmelser som styr digital information, till exempel personuppgiftslagen och lagen om elektronisk kommunikation.
• Terminologi inom området webbutveckling.

7.2 Lösenordshantering och säkra lösenord

Att prata om lösenordshantering på webben är en stor fråga med många bottnar. I denna kursen kommer vi lägga fokus på lösenordshantering för dig som användare i första hand men också lite fokus på hur du kan/skall tänka som webbutvecklare. I den kommande kursen, Webbserverprogrammering01, pratar vi om lösenordshantering utifrån ett perspektiv för lagring och hantering av andras lösenord.

Vissa saker när det gäller lösenord är självklara men tål att upprepas;

1. Välj ett komplext lösenord.
2. Välj ett unikt lösenord.
3. Ha olika lösenord på alla tjänster.
4. Aktivera tvåfaktorsautentisering där det är möjligt.
5. Kom ihåg dina lösenord, skriv inte ner dem på lappar.

7.2.1 Komplexa lösenord

Att välja ett svårt lösenord är enklare sagt än gjort när man samtidigt skall kunna komma ihåg det. Men det går att förändra ganska enkelt utan att lösenordet skall behöva bestå av oändligt många tecken.

Vi tar hjälp av en tjänst som heter The Password Meter för att se hur vi kan göra ett enkelt lösenord lite svårare att hacka.

Jag kommer leka med ett så enkelt lösenord som football för att se vad jag kan göra med detta. football har jag valt för att det är ett ord som finns med som exempel på flera siter för vanliga och dåliga lösenord, här är ett exempel på sammanställning av de vanligaste lösenorden och här är en annan.Ordet football är också ganska enkelt att förändra på olika sätt.

Resultat från The Password Meter

I bilden så kommer jag fokusera på värdet i rutan score för att jämföra olika resultat. Det finns information i tabellerna Additions/Deductions som visar hur lösenordets score räknas fram. Här kan vi få ledtrådar för vad vi skall ändra för att få ett högre värde.

Vi blandar versaler och gemener för att se vad det kan göra på resultatet.

Resultat från The Password Meter

Direkt får vi ett score på 29% med denna enkla åtgärd. Vad händer om jag slänger in någon siffra. Jag byter ett o mot en nolla och ett l till en etta.

Resultat från The Password Meter

Nu händer det saker. Jag gör en sista ändring, in med specialtecken. a får bli @ och l får bli !.

Resultat från The Password Meter

Nu är detta korta lösenord tillräckligt säkert för mig. Tänk på att dessa förändringar a->@, o->0, l->1 osv är ganska vanliga ändringar men ofta ökar det säkerheten en hel del, gör du mer ovanliga förändringar kommer det naturligtvis ändra säkerheten ännu mer.

7.2.2 Ovanliga lösenord

Allt för många användare använder enkla lösenord som är lätta att komma ihåg. Men att de är lätta att komma ihåg innebär också troligtvis att detta är lösenord som andra också har tyckt var lätta att komma ihåg. Det finns oändligt med listor på nätet med vanliga lösenord, här är en samling som även visar topplistor historiskt, https://en.wikipedia.org/wiki/List_of_the_most_common_passwords. Där hittar vi bl.a. football men också kluriga lösenord som abc123, password, 123456789 och admin.

7.2.3 Olika lösenord på olika siter

Du har säkert hört om att olika siter har blivit utsatta för attacker ibland och att det har läckt känsligt data. Problemet är att om det finns en koppling mellan min mailadress, som ofta används som inloggningsinformation, och ett lösenord så är det just denna kombinationen som är den första som en bot kommer att testa när de vill hacka någon av mina andra tjänster. Säg att jag kör med lösenordet Fo0tB@1! på Instagram och denna informationen läcker ut. Då kommer ju naturligtvis boten att testa just detta lösenord i kombination med min mailadress på Facebook, Google, Twitter och alla andra tjänster. Har jag använt samma lösen på olika ställen så kommer de att kunna få access till mitt konto.

Att det läcker data är ingen hemlighet. Vill du kolla om din mailadress har funnits med vid sådana läckage så testa mailadressen på https://haveibeenpwned.com. Min jobbmail har inte funnits med vid någon läcka men min privata mailadress har läckt åtta gånger, vid avläsning i februari 2024. Att mailadressen har läckts är allvarligt nog, men kika också på vilken ytterligare information som läckt.

7.2.4 Aktivera tvåfaktorsautentisering

Tvåfaktorsautentisering innebär att du vid inloggning behöver bevisa att du är du på fler sätt än att bara ange ett korrekt lösenord. Det vanligaste är att du har någon form av autentisering i mobilen eller via ett mail. Sedan fungerar detta olika på olika siter. Google/Facebook varnar när du loggar in från nya enheter men har lite lägre säkerhet när du loggar in från en känd enhet. För att logga in på din bank behöver du troligtvis autentisera dig via BankID eller med en bankdosa.

7.2.5 Komma ihåg lösenorden, lösenordshanterare

Om du nu skall ha komplicerade unika lösenord för alla dina inloggningar så behöver du hitta en bra lösning för detta. Denna lösning heter lösenordshanterare.

En lösenordshanterare är en applikation som tar hand om alla dina lösenord och mer eller mindre automatiskt logga in dig på alla siter, appar och tjänster som du behöver komma åt. Vissa lösenordshanterare funkar i en specifik miljö t.ex. Apple och Google som har sin egna inbyggda lösenordshanterare. Sedan finns det andra lösenordshanterare som fungerar i flera olika miljöer, t.ex. LastPass, Dashlane, bitwarden eller 1password.

Olika lösenordshanterare fungerar lite olika men jag vill att du testar att installera en om du inte har använt dem tidigare. Jag har valt att rekommendera bitwarden då jag tycker att den har bra funktionalitet i gratisversionen och den är lätt att komma igång med. Gå till bitwardens hemsida och klicka sedan på Get Started om du vill testa på egen hand eller kika på filmen nedan för att få en genomgång av applikationen och hur man kommer igång.

Vill du hellre testa en annan lösenordshanterare så går det bra.

7.3 Lagar och etik i webbutveckling

När vi skapar och publicerar material på webben – vare sig det handlar om text, bilder, grafik eller multimedia som ljud och video – är det viktigt att vi spelar efter reglerna. Det finns en hel del lagar och regler som styr vad vi får och inte får göra.

7.3.1 GDPR: Skydd av personuppgifter

Sedan maj 2018 gäller GDPR (General Data Protection Regulation) som lag i alla EU:s medlemsländer. Detta ersatte den svenska Personuppgiftslagen och ställer högre krav på hur vi får samla in, lagra och använda personuppgifter. Det inkluderar allt från namn och e-postadresser till bilder och IP-adresser. GDPR syftar till att stärka individers rättigheter och kräver bland annat tydligt samtycke för att få behandla personuppgifter. Om en användare ber om det, måste vi kunna radera deras information. Ignoreras dessa regler kan det leda till stora böter.

Som webbutvecklare är det viktigt att du förstår dessa regler för att skydda både användarna och dig själv. Tänk på hur du hanterar formulär, kommentarsfält och användarregistrering på din webbplats. Detta blir ännu viktigare i kursen Webbserverprogrammering01 då vi börjar lagra data på webben.

7.3.2 Upphovsrättslagen (URL)

Upphovsrättslagen skyddar skaparens rättigheter till deras verk, oavsett om det är texter, bilder, musik eller filmer. I Sverige, liksom i resten av EU, innebär detta att du inte kan använda någon annans arbete utan tillstånd. Varje skapare har rätt att bestämma över sitt verk, och att bryta mot upphovsrätten kan bli dyrt.

Kom ihåg, bara för att något finns på internet betyder det inte att det är fritt att använda. Så dubbelkolla alltid om du får använda en bild eller text innan du publicerar den på din webbplats. Att citera korta delar av en text är oftast okej, men att kopiera större delar eller hela verk utan tillstånd är inte tillåtet.

7.3.3 Creative Commons: En värld av delning

Creative Commons är en organisation som erbjuder licenser som gör det enklare för skapare att dela med sig av sina verk. Dessa licenser varierar från att tillåta nästan alla former av användning till mer begränsade former, som till exempel att bara tillåta icke-kommersiell användning eller att kräva att verket inte förändras. Genom att använda Creative Commons-licenserat material kan du berika din webbplats utan att bryta mot upphovsrätten, så länge du följer licensens villkor.

Sammanfattningsvis kan vi koka ner saker du behöver tänka på i tre viktiga punkter;

• GDPR: Se till att du har användarens samtycke innan du samlar in eller lagrar personuppgifter.
• Upphovsrätt: Använd inte andras verk utan tillstånd. Sök efter material som är fritt att använda eller licensierat under Creative Commons.
• Etik: Var alltid transparent med hur du hanterar data och respektera användarnas integritet och rättigheter.

Att navigera i webbutvecklingens värld kräver inte bara tekniska färdigheter utan även en förståelse för lagar och etik. Det gör dig till en ansvarsfull och respekterad utvecklare.

7.4 Grundläggande tekniker och säkerhet på webben

I takt med att internet fortsätter att växa och utvecklas, blir förståelsen för webbens grundläggande tekniker och säkerhetsaspekter allt viktigare. Detta avsnitt syftar till att ge en översikt till webbens protokoll, adressering, säkerhet och samspelet mellan klient och server, samt att förklara vikten av säker dataöverföring genom SSL/TLS.

7.4.1 Webbens protokoll och adresser

Internet är byggt på komplexa men väldefinierade regler, kända som protokoll. Två av de mest grundläggande protokollen är HTTP (Hypertext Transfer Protocol) och HTTPS (HTTP Secure), som styr hur webbsidor och filer överförs över internet. Varje gång du besöker en webbsida, använder din webbläsare dessa protokoll för att begära sidans innehåll från en server.

Varje resurs på webben, vare sig det är en webbsida, bild eller video, har en unik identifierare känd som en URL (Uniform Resource Locator). En URL innehåller flera delar, inklusive protokollet (som https://), domännamnet (som exempel.se), och eventuellt en sökväg till specifika filer eller sidor på servern.

7.4.2 Samspelet mellan klient och server

Kommunikationen över internet sker huvudsakligen mellan två parter: klienten (till exempel, en webbläsare) och servern (där webbplatsens data och filer finns lagrade). När du skriver in en URL i din webbläsare, skickar den en begäran till den angivna servern att ladda ner sidan, som sedan renderas och visas för dig. Denna process kräver robust säkerhet för att skydda både användarens och webbplatsens data.

SSL (Secure Sockets Layer) och dess efterföljare TLS (Transport Layer Security) är krypteringsprotokoll som säkerställer att dataöverföringen mellan klient och server är säker. Detta är särskilt viktigt när känslig information, såsom lösenord, personuppgifter eller betalningsinformation, skickas över internet.

Användning av SSL/TLS manifesteras genom HTTPS i en webbadress, istället för det osäkra HTTP. Det indikerar att en webbplats är säker och att all kommunikation är krypterad och skyddad från avlyssning eller manipulation.

Varför SSL/TLS är nödvändigt;

• Förtroende: En SSL/TLS-krypterad webbplats signalerar till besökarna att deras data är säker, vilket ökar förtroendet för din webbplats.
• Säkerhet: Skyddar användarnas information från att bli stulen eller manipulerad under överföring.
• SEO: Google och andra sökmotorer favoriserar HTTPS-webbplatser, vilket kan förbättra din webbplats sökplacering.
• Krav för vissa funktioner: Moderna webbteknologier och funktioner, såsom betalningsintegrationer, kräver ofta HTTPS för att fungera säkert.

7.4.3 Tillämpning på dina webbplatser

När du bygger webbplatser – vare sig det är en WordPress-blogg, en statisk webbplats, eller en webbplats för en kund – är det viktigt att alltid använda SSL/TLS. De flesta webbhotell erbjuder idag enkla sätt att implementera SSL-certifikat, ofta utan extra kostnad. Att säkerställa att dina webbplatser använder HTTPS är ett grundläggande steg för att skydda både dina och dina användares data.

7.5 SEO

SEO ligger egentligen utanför denna kursen men om du ändå får så många andra verktyg för att kunna bygga och leverera en webbplats till någon utifrån en beställning så finns det några enkla saker du kan tänka på för att dina webbplatser skall hamna längre upp vid sökning.

SEO står för Sökmotoroptimering och är processen att optimera en webbplats för att öka dess synlighet när människor söker efter produkter eller tjänster relaterade till webbplatsens erbjudande på Google, Bing och andra sökmotorer. Ju bättre synlighet en webbplats har i sökresultaten, desto mer sannolikt är det att den lockar till sig uppmärksamhet och attraherar potentiella och befintliga kunder till företaget.

7.5.1 SEO checklista

Här är en enkel checklista med justeringar som kan göra en stor skillnad i hur väl en webbplats rankas i sökresultaten:

• Titeltaggar: Se till att varje sida på din webbplats har en unik titeltagg som beskriver sidans innehåll. Det är bäst om titeltaggen innehåller nyckelord som folk sannolikt kommer att söka efter.
• Metabeskrivningar: Varje sida bör även ha en unik metabeskrivning som fungerar som en sammanfattning av sidans innehåll. Även här är det bra att inkludera relevanta nyckelord.
• Huvudrubriker (H1): Använd H1-taggarna för att ge sidor en tydlig rubrik och inkludera viktiga nyckelord där det är möjligt och relevant.
• Alt-text för bilder: Förbättra tillgängligheten och SEO genom att lägga till beskrivande alt-texter till alla bilder. Detta hjälper sökmotorer att förstå bilder bättre.
• Mobilanpassning: Se till att din webbplats är mobilvänlig. Sökmotorer, särskilt Google, prioriterar mobilanpassade webbplatser i sina sökresultat.
• Snabba laddningstider: Webbplatser som laddar snabbt rankas högre. Använd verktyg som Google PageSpeed Insights för att kontrollera din webbplats hastighet och få förslag på förbättringar. Att webbsidans html- och css-kod är korrekt validerad påverkar till viss del laddtiden.
• Intern länkning: Skapa länkar mellan sidor inom din webbplats för att hjälpa sökmotorer att upptäcka nytt innehåll och förstå webbplatsens struktur.
• Säker webbplats (HTTPS): En säker webbplats använder HTTPS. Detta är en rankingfaktor för Google, så det är viktigt att din webbplats är säker.
• Kvalitativt innehåll: Slutligen, och kanske viktigast, se till att din webbplats erbjuder värdefullt och relevant innehåll för din målgrupp. Webbplatser med högkvalitativt innehåll tenderar att rankas högre i sökresultaten.

Av alla punkter ovan så är det kanske metataggar som vi inte presenterat specifikt tidigare. Metataggar är HTML-taggar som placeras i huvudet (head-sektionen) på en webbsida. De är inte synliga för användare som besöker sidan men kan läsas av sökmotorer och andra webbtjänster. Metataggar ger metadata om webbsidans innehåll, som titel, beskrivning, och nyckelord. Även om alla metataggar inte direkt påverkar SEO, spelar de en stor roll i hur din webbsida presenteras i sökresultaten och kan påverka klickfrekvensen (CTR). De viktigaste metataggarna är;

• Title Tag (Titeltagg): Beskriver sidans titel och är en av de viktigaste faktorerna för SEO och användarupplevelsen. Innehållet visas som sidans titel i sökresultaten och i webbläsarfliken. Innehållet bör vara unik för varje sida och inkludera relevanta nyckelord.
• Meta Description (Metabeskrivning): ger en kort sammanfattning av sidans innehåll. Även om den inte direkt påverkar sidans ranking, är en välformulerad metabeskrivning viktig för att förbättra CTR från sökresultatsidan. Innehållet bör vara mellan 150-160 tecken och inkludera relevanta nyckelord.
• Meta Keywords (Metanyckelord). Tidigare användes denna tagg för att ange vilka nyckelord som är relevanta för sidans innehåll. På grund av missbruk har dock de flesta stora sökmotorer, inklusive Google, slutat att ta hänsyn till denna tagg för rankingändamål.
• Robots Tag. Denna tagg används för att instruera sökmotorers web crawler om hur de ska indexera och följa länkar på sidan. Genom att använda värden som "index, follow" (standardbeteendet) eller "noindex, nofollow" kan du styra tillgängligheten av innehållet för sökmotorerna.

<head>
	<title>Informationssida om SEO</title>
	<meta name="description" content="Informationssida om SEO för gymnasieelever som läser Webbutveckling01. Sidan utgår från en checklista och visa bra tips för att rankas högre i sökresultaten.">
	<meta name="robots" content="index, follow">
</head>

7.6 Att jobba i projekt

För de alldra minsta projekten som du gör för din egen skull kanske inte behöver vara så väldokumenterade eller välplanerade. Men det finns tillfällen då detta är en förutsättning för ett lyckat projekt, dessa tillfällen kan vara om det finns en kund med tydliga krav, om projektet utvecklas av flera personer eller om projektet är mer omfattande än att hela projektets alla krav enkelt kan hållas i utvecklarens huvud.

7.6.1 Att ta fram en kravspec

Att utveckla en kravspecifikation (kravspec) är en grundläggande del av alla projekt. En välutformad kravspecifikation hjälper till att säkerställa att alla inblandade parter har en gemensam förståelse för projektets mål, funktioner och begränsningar. Här nedan följer en guide på hur elever kan arbeta med att ta fram en kravspecifikation, samt viktiga delar att tänka på för att planera och utföra ett webbplatsprojekt.

• Identifiera intressenter: Börja med att identifiera vem som är intressenterna för projektet. Det kan vara användare, kunder, projektmedlemmar eller andra som påverkas av projektet.
• Behovsanalys: Förstå och dokumentera de grundläggande behoven som projektet ska tillfredsställa. Detta kan innebära att samla in information genom intervjuer, enkäter, workshops eller forskning.
• Definiera syfte och mål: Klart och tydligt definiera vad projektet syftar till att uppnå. Detta inkluderar både övergripande mål och specifika, mätbara mål.
• Funktionella krav: Lista de specifika funktionerna som webbplatsen måste ha. För ett projekt som informerar om ett teknikprogram kan detta inkludera en översikt av programmet, detaljer om olika inriktningar, kursinformation, och möjlighet för användare att ställa frågor eller begära mer information.
• Icke-funktionella krav: Dessa inkluderar prestandakrav, säkerhetskrav, användbarhetskrav och andra kvalitetsstandarder som projektet måste uppfylla.
• Prioritering: Bestäm vilka krav som är måsten, bör, och kan ha. Detta hjälper till att fokusera på det viktigaste under projektets gång.
• Godkännande: Se till att alla intressenter granskar och godkänner kravspecifikationen innan design och utveckling börjar.

Beroende på projektet så är punkterna ovan mer eller mindre relevanta. Men för att veta om punkten är relevant så behöver utvecklarna ta ställning till punkten och dess innehåll.

7.6.2 Att planera och utföra projektet

För att planera och utföra projektet effektivt, överväg följande delar:

• Projektplanering: Utarbeta en detaljerad projektplan som inkluderar tidsramar, resursallokering, och milstolpar. Använd gärna projektledningsverktyg, eller ett enklare Gannt-schema, för att organisera och följa upp projektets framsteg. Här hittar du mallar till Gannt-scheman för Google Sheet.
• Design: Baserat på kravspecifikationen, börja med att skapa wireframes eller prototyper för webbplatsens layout och användargränssnitt. Detta bör inkludera navigeringsstruktur, placering av innehåll, färgscheman, typografi, bilder och ikoner och hur den responsiva designen ser ut på olika användaragenter.
• Utveckling: Utveckla webbplatsen enligt designen och kravspecifikationen. Se till att implementera bästa praxis för kodning och webbutveckling.
• Validering och testning: Kontrollera att HTML/CSS är validerad och följ webbstandarder. Testa webbplatsen på olika enheter och webbläsare för att säkerställa kompatibilitet och användarvänlighet. Utför även användartester för att samla feedback.
• Lansering och uppföljning: När webbplatsen är redo, lansera den. Efter lanseringen, fortsätt att övervaka webbplatsens prestanda, användarfeedback, och gör nödvändiga justeringar.
• Dokumentation: Håll en löpande dokumentation genom hela projektet. Detta inkluderar teknisk dokumentation för webbplatsen samt dokumentation av projektets framsteg.

I detta avsnitt så är de flesta punkter relevanta även i skolmiljö, även om lansering och uppföljning kanske inte hinns med. Däremot så är flera av punkterna beroende av punker i avsnitt 7.6.1 och då underlättar det naturligtvis att dessa punkter är ordentligt genomarbetade.

7.6.3 Att dokumentera projektet

Dokumentation är en avgörande del av varje projekt, inte bara för att säkerställa att alla är på samma sida under projektets gång, utan också för att underlätta framtida underhåll och uppdateringar. Bra dokumentation sparar tid och resurser genom att minska behovet av onödig kommunikation och förvirring. Följande typer av dokumentation är viktiga för ett lyckat projekt:

• Teknisk dokumentation: Detaljerar systemets arkitektur, kodbas, och API:er för utvecklare. Kan i enklare projekt vara en sitemap för att visa vilka filer som ingår i projektet. En sitemap har två syften, dels att visa upp alla filer som ingår i projektet, men det kan också vara en hjälp för en sökmotor att indexera ett projekt som du vill att sökmotorn skall indexera den. xml-sitemaps.com kan generera en sitemap.
• Användardokumentation: Instruktioner och hjälpresurser för slutanvändare eller kunder.
• Projektdokumentation: Inkluderar projektplanen, kravspecifikationen, mötesanteckningar, och andra dokument som genereras under projektets gång.

Att använda dessa punkter (i avsnitt 7.6) som en checklista inför projekt för kurserna i Webbutveckling01, Webbserverprogrammering01, Programmering02 och framförallt för att skapa projekt i Gymnasiearbetet kommer hjälpa dig att genomföra lyckade projekt.