Lærebog til informatik C

Indholdsfortegnelse

DEL 1. INTRODUKTION

Kapitel 1. Indledning

1.1 Hvad er informatik

Informatik er et ret nyt fag. De første elver startede i august 2017, og faget er obligatorisk på HHX. Det er planen, at andre gymnasielle uddannelser også skal have det som obligatorisk fag.

Baggrunden er, at vi efterhånden er storforbrugere af IT. Vi bruger IT, men IT bruger også os. Vi er nødt til at være klogere på IT i bred forstand for at forstå meget af det, der foregår omkring os.

Nogle af de emner, vi skal igennem, er;

  • Hvordan er en app opbygget
  • Hvordan laver man brugervenligt design
  • Hvordan påvirker informationsteknolOgien os, og hvordan påvirker vi den
  • Hvad er data, og hvad kan det bruges til
  • Hvad er en database
  • Hvordan laver man hjemmesider

Link til toppen af siden.

Kapitel 2. Det grafiske puslespil

Der er mange elementer, som du skal få til at spille sammen, når du skal lave et layout eller en prototype. Kend reglerne og respekter reglerne, men være heller ikke bange for at bryde dem.

Tænk på dit layout som en god film. En opskrift på en god film kan være:

Den gode film har …Det gode layout har derfor …
– En eller få hovedroller– Overskriften og/eller få elementer overstråler alt andet
– Birollerne i et film skal være synlige. Mere synlige end statisterne, men ikke så dominerende som hovedrollen– Under-overskrifter eller ikke-så-vigtige billeder/grafik skal være mindre end hovedoverskriften, men ikke så synlige som brødteksten
  • En god film har en eller 2 hovedpersoner. Derfor: Overskriften og/eller et dominerende billede overstråler alt andet
  • Birollerne i et film skal være synlige. Mere synlige end statisterne, men ikke så dominerende som hovedrollen. Derfor: Under-overskrifter eller ikke-så-vigtige billeder/grafik skal være mindre end hovedoverskriften, men ikke så synlige som brødteksten
  • Statisterne giver filmen fylde, men de er anonyme. Derfor: Brødtekst er vigtig, men må ikke overstråle overskrifterne
  • I en god film er der en klar handling. Derfor: Hjælp din læser. Skru op for billeder og grafik, ned for unødvendig tekst
  • En god film har orden og hiraki. Vis brugeren, hvad “hovedrolen” er, så brugeren ikke er i tvivl. Dvs. sørg for, at det vigtige træder frem. Baggrunden skal fremhæve forgrunden

I de næste 3 afsnit gennemgår jeg kort forskellige elementer inden for grafik: Typografier, farver og gestaltlove.

Link til toppen af siden.

2.1 Typografier

Typografier er det samme som skrifttyper. Man kan dele alle skrifttyper ind i 2 slags skrift: Serif og sans-serif. Serif betyder “fod”. Nogle typer skrift har en lille fod på bogstaverne, andre har det ikke.

Skrifttyper
Serif og sans-serif skrift

Hvis vi sætter en lille fod på bogstaverne, så danner bogstaverne en kunstig linje. Den linje hjælper os især, hvis vi laver lange tekster. Til korte tekster er det bedre med skrifttyper uden fødder. På nettet finder vi mest sans-serif skrifttyper.

Skrifttyper kan understrege vores budskab. Den her skrifttype er f.eks. meget brugt i det vilde vest i USA.

Skrifttype på en bar i det vilde west

Hos www.dafont.com kan du finde en guldgrube af sjove skrifttyper, grænsende til det vanvittige. https://www.youtube.com/embed/_ukXb-fAfSI?feature=oembed

Hvis emnet interesserer dig, så kik på artiklen her, som har undersøgt brugen af typografier på hjemmesider generelt: https://www.smashingmagazine.com/2009/08/typographic-design-survey-best-practices-from-the-best-blogs/Link til toppen af siden.

2.2 Farvelære

Vi bruger farver mere end vi tror. Farver kan hjælpe os med at understrege budskabet. Kik f.eks. på http://play.barbie.com/da-dk, hjemmeside for barbiedukken. Et orgie i bløde pastelfarver, men siden henvender sig også til små piger, ikke til voksne. Ikke overraskende er hjemmesiden for Rammstein, tysk heavyrock-gruppe, noget mere “maskulin” i sit udtryk. https://www.rammstein.de/de/. Politiet bruger kølige, alvorlige farver for at understrege autoritet, mens en klovn i cirkus er et orgie af varme og stærke farver.

Farvelære handler om at forstå farver. Start med Goethes farvecirkel. Ud fra 3 grundfarver: Rød, blå og gul dannede han alle mulige andre farver.

Farvecirklen fortæller os en masse. 2 farver på hver sin side af cirklen vil fremhæve hinanden. En orange farve fungerer godt med blå baggrund og omvendt. Dette kalder man for “kontrastfarver”. Der er dog en vigtig undtagelse: Brug aldrig kontrastfarverne rød-grøn sammen, for farveblinde kan ikke se forskel.

BEGREBFORKLARING
KontrastfarverFarver, der står overfor hinanden i farvecirklen. Kontrastfarver fremhæver hinanden
Varme og kolde farverVarme farver træder frem og er gode forgrundsfarver. Kolde træder tilbage og er gode baggrundsfarver. Varme og kolde farver står overfor hinanden i farvecirklen. Verdens bedste baggrundsfarve er … grå. Kik på grå beton, al grafitti træder tydeligt frem.
FarvefamilierF.eks. pastelfarver, jordfarver, pangfarver. Man kan skabe en god sammenhæng ved at bruge farver fra samme farvefamilie.

Farveudtryk

I de næste videoer kan du lære om både teoretisk farvelære og om farvelære i praksis.

Link til toppen af siden.

2.3 Gestaltlovene

Når vi ser på ting, har vi nogle ubevidste måder at opfatte (eller “perceptionere) tingene på. Vi ser “skikkelser” eller på tysk “gestalter”, “hvad der er stillet i orden. Hjernen forsøger at skabe sammenhænge i, hvad den ser. Disse måder er formuleret i gestaltlovene.

Faktaboks: Hvad er en gestalt? En gestalt er tysk for “skikkelse”. Et eksempel: Vrede Viggo går i terapi, fordi han er rasende på sin far. Tereapeuten beder Viggo forestille sig, at hans far sidder i en stol overfor ham, og så får Viggo ellers lov til at fortælle hans far et par borgerlige ord. Faderen er selvfølgelig ikke til stede fysisk. Den form for terapi kaldes “gestaltterapi”

Gestaltlovene har enorm betydning, når man laver grafisk design. Hvis man f.eks. (som på denne hjemmeside) lukker navigationen inde i en ramme, anbringer dem tæt ved hinanden og giver dem samme typografi, så opfatter hjernen alle menupunkter som hørende sammen. Det er pga. loven om lukkethed, lighed, nærhed og måske loven om symmetri. Kik selv efter.

Skærmfoto fra forsiden
Bemærk, at navigationen er lukket inde i en kasse, de står tæt og med samme typografi

Her er en oversigt over de 5 måske 6 gestaltlove. De 3 første, dvs. loven om nærhed (og afstand), loven om lighed og loven om lukkethed er klart de vigtigste og mest brugte.

Link til toppen af siden.

1. gestaltlov. Loven om nærhed (afstand)

“Objekter anbragt tæt ved hinanden opfattes som hørende sammen”.

Man kan udlede af loven, at ting, der er anbragt fjernt fra hinanden, opfatter vi omvendt ikke som hørende sammen.

De blå og røde cirkler opfatter vi som hørende sammen i 3 grupper. Dels står de tæt, dels er der afstand mellem de 3 grupper

1. gestaltlov

Link til toppen af siden.

2. gestaltlov. Loven om lighed

“Objekter der ligner hinanden, opfattes som hørende sammen”.

Vi opfatter de røde objekter som hørende sammen og de blå som hørende sammen. Både pga. farven, men også fordi de røde har firkantede hjørner mens de blå har runde hjørner.

2. gestaltlov

Link til toppen af siden.

3. gestaltlov. Loven om lukkethed

“Objekter, som er lukket inde, opfattes som hørende sammen”.

De røde cirkler til højre er lukket inde af en blå baggrund, så dem opfatter vi som hørende sammen

3. gestaltlov

Link til toppen af siden.

4. gestaltlov. Loven om forbundethed

“Objekter, der er forbundet, opfattes som hørende sammen”.

De røde cirkler, som er forbundne, opfatter vi som hørende sammen. To mennesker, der holder hinanden i hånden, vil vi også opfatte som hørende sammen.

4. Gestaltlov. Loven om forbundethed

Link til toppen af siden.

5. gestaltlov. Loven om figur og baggrund

“Den mindste, afgrænsede figur på arealet vil først blive opfattet som figuren”.

Hvad ser du først? Vasen eller de 2 ansigter vendt mod hinanden? Den sorte farve er afgrænset, så på det første billede ser du ansigterne først, på det andet billede ser du vasen først.

5. Gestaltlov. Loven om figur og baggrund

Link til toppen af siden.

6. gestaltlov. Loven om symmetri

“To figurer, anbragt symmetrisk omkring en linje, opfattes som hørende sammen”.

Vi opfatter de 2 cirkler som hørende sammen, fordi de er anbragt symmetrisk omkring linjen.

6. gestaltlov. Loven om symmetri

Link til toppen af siden.

2.4 Gode råd til din grafiske produktion

Her er et par gode råd.

  • Sørg for, at alt tekst er nemt at læse. Mørk tekstfarve på mørk baggrund er sjældent en god idé
  • Brug kølige farver til baggrund og varme til forgrund
  • Tænk på målgruppen og design efter det
  • Overhold gestaltlovene
  • Skab symmetri og sæt de grafiske elementer på linje
  • Skab orden. Det vigtigste skal være tydeligt
  • Skab genkendelighed. Genbrug farver, grafik og skrifttyper. Det gør brugeren tryg
  • KISS (Keep It Simple and Stupid)

Eksempel 1. Baggrund- og forgrundsfarve

Den første er rædselsfuld. Lys tekst på en skriggul baggrund. Jeg får næsten ondt i øjnene. Nr 2 er bedre. Der er en god kontrast, men den gule baggrundsfarve dominerer teksten. Nr. 3 er god. Diskret baggrundsfarve, god kontrast og teksten får hovedrollen.

Eksempel 2. Symmetri

Ove Schneiders løbesidet. Der er INGEN symmetri. Siden er så rodet, så det nærmest er kult.

Gucci har selvfølgelig en helt anderledes orden og symmetri. Der er tænkt over hver en lille stump grafik her, og tingene er millimeter symetriske.

Skab orden og symmetri og hiraki

Her er et forslag til en AGF fanside. Det er svært at se, hvad der er vigtigst da alle skrifttyper er lige store. Navigationen er virkelig rodet. Men ok, det er en side for fanfraktionen “Tossehjørnet”, så de er tilgivet. Der er i øvrigt ingen hjørner på Aarhus Station :-).

Nu er der skabt noget orden. Overskrifterne har et hiraki, der er orden på navigationen, og der er symmetri. Dvs. at tingene er på linje eller centrerede.

Alt i alt. Kend reglerne. Du må gerne bryde reglerne, men du skal kunne argumentere for det. Et eksempel: Fodboldholdet Liverpool er et af verdens mest populære hold. De spiller i rødt. Rød er en meget varm farve, og duer som udgangspunkt ikke som baggrundsfarve. Jeg har alligevel set et fornuftigt forslag til en hjemmeside for Liverpool med rød baggrund.

Link til toppen af siden.

Kapitel 3. Forberedelser til en app

Når man skal udvikle en app, en hjemmeside eller lignende, så er der forskellige måder at indkredse det færdige resultat på. I kapitlet her skal du se et par metoder.

Link til toppen af siden.

3.1 Målgrupper

Det gælder ikke kun i IT-verdenen, at man skal tænke over, hvem modtageren er. Hvis vi vil overbringe folk et budskab, så skal vi gøre os klart, hvem målgruppen er. En af de mest brugte modeller er Minerva-modellen.

Minerva modellen

Minerva deler målgrupperne ind efter 2 akser. Moderne kontra traditionel og idealistisk kontra materialistisk. Det giver 4 områder:

  • De blå: Typisk højreorienterede, vellønnede, ledere. Prestige, tro på sig selv, resultatorienteret. Måske er det ikke tilfældigt, at f.eks. Venstre har en blå partifarve.
  • De violette: Typisk faglærte, men mere orienteret mod traditionelle værdier. Praktikere, orienteret mod spænding. De elsker Olsen-Banden og de traditionelle kan finde på at stemme på Dansk Folkeparti
  • De rosa: Politisk midten, en del kvinder, idealister frem for materialister. Tradition, det nære miljø, familie
  • De grønne: Idealister og moderne. Her har vi “økoflipperen” og folk, der typisk stemmer på alternativet eller lignende moderne og idealistiske partier . Engagement, fællesskabsorienteret, principmennesker

En sidste gruppe, du ikke finder i modellen, er de grå. De er gruppen i midten, som kan være svære at placere. De kan have kendetegn fra flere kategorier på en gang.

Link til toppen af siden.

3.2 Prototyper

Hvis man skal bygge et hus, så starter man med en plantegning. Det forstår både dem, der skal have et hus, og dem, der skal bygge det. Så kan man tage på ferie og når man kommer hjem, står huset præcist som aftalt.

Sådan er det langt fra med apps. Her er vi nødt til at kunne snakke sammen undervejs og justere undervejs. Vi er på forhånd slet ikke så sikre på det færdige produkt, som vi er med et hus eller en madopskrift. Derfor har vi brug for, at vi kan snakke sammen undervejs og korrigere projektet om nødvendigt. Meget mere om det i kapitel 4. Udviklingsmodeller

En vigtig brik i app udvikling er modeller eller prototyper. Prototyper er ikke et færdigt produkt. Det ligner bare det færdige produkt så meget, at både udvikler og kunde kan forstå hinanden og komme videre i projektet. Det er langt billigere at lave en prototype end at lave et færdigt produkt.

Der er frit spil i forhold til at vælge, hvordan en prototype skal laves. Det kan være en tegning, noget i PhotoShop eller endda en PowerPoint. Her er en model for boligindretning. Du har allerede prøvet at lave en prototype i PowerPoint den første gang, du havde informatik.

Tegningen er venligst stillet til rådighed af HusCompagniet

Link til toppen af siden.

3.3 Strukturdiagrammer

En nem og effektiv måde at skaffe sig overblik på, er at lave en oversigt i punktform. Det gælder både, hvis man producere en ny app/hjemmeside, men det gælder også i forhold til eksisterende apps/hjemmesider. Punktopstillinger har den fordel, at det er super nemt at bytte rundt på tingene.

For hjemmesiden her kunne en punktopstilling se sådan ud: Bemærk at søgefunktionen er anbragt lidt for sig selv, for den er ikke som sådan en del af menuen.

  • Forside
  • Informatik C
    • Lærebog til informatik C
    • Emne 1. Udvikling
      • Modul 1. Introduktion
      • … osv
  • Informatik B
  • …osv.
  • Søg

Indtil nu har vi fokuseret på layout. Vi vil nu kikke på funktion. Hvem skal bruge appen, og hvad skal brugergruppen kunne gøre med appen. Til det brug har vi use-case eller på dansk “brugstilfælde”.

Link til toppen af siden.

3.4 Use-case/brugstilfælde

Lad os tage en typisk webshop som eksepel. Her er et eksempel på et use case diagram for køb på en webshop.

  • Til venstre ser du brugergrupperne
    • Det er kun de registrerede brugere, der kan foretage et køb
    • De ikke-registrerede kan kun se produktet og så registrere sig
  • Midt i er de ting, de skal kunne: Se produktet, foretage køb, tjekke ud og registrere sig
  • Til højre ser du de nødvendige services
    • Godkendelse af indtastede data. Så brugeren ikke fejlindtaster
    • Kreditkort og/eller payPal service. Det kunne også være mobilePay service

Kilde: http://informatik-gym.dk/glossary/use-case/

Link til toppen af siden.

Kapitel 4. Udviklingsmodeller

4.1 Vandfaldsmodellen

Hr og fru Nygift har købt en grund til et hus, hvor de skal bygge og bo. De hyrer en arkitektfirma, de bliver enige om hvordan huset skal se ud plus en pris. Så går byggeriet i gang. Først rydder man grunden, støber fundamentet, bygger murene, holder rejsegilde osv. osv., og til sidst får Hr. og fru Nygift nøglerne i hånden. Huset ser ud som aftalt, og alt er dejligt.

Kendetegnende for huset som projekt er, at når man først har tegningerne, så er både kunden og bygherren en rigtig god og fælles idé om det færdige resultat. Det er også kendetegnende, at man tager en ting af gangen. Man siger, at man arbejder i faser. Når først en fase er afsluttet, f.eks. hvis murene er opført, så går man ikke tilbage og ændrer på fundamentet eller tegningerne. Man går heller ikke i gang med taget, mens man støber fundamentet.

Udviklingsmetoden kaldes for “vandfaldsmodellen”. Den er kendetegnet ved, at at vi lukker en fase helt, før vi starter den næste.

Vandfaldsmodellen

Link til toppen af siden.

4.2 Agile metoder

Vandfaldsmodellen er en traditionel metode til at lede projekter. Den metode brugte man også til IT-projekter, men man stødte hurtigt ind i nogle problemer:

  • Det var svært at lave udspecificeret kravspecifikation, for vi ved ikke helt, hvordan det færdige produkt skal se ud
  • Udviklerne kunne støde ind i ting undervejs, der ændrede projektet. F.eks. at noget udvikling viser sig at være uforholdsmæssigt dyrt
  • Det samme for kunden. Kundens behov kunne sagtens ændre sig undervejs.
  • Alt i alt kunne både kunde og producent stå med en fornemmelse af, at kravspecifikationen var en klods om benet, snarere end en hjælp

Derfor begyndte man at bruge helt andre projektmodeller til IT-projekter. De kaldes “agile” metoder. “Agil” betyder “bevægelig” eller “adræt”. Kongstanken ved agile (bevægelige) metoder er, at vi skal kunne tilpasse projektet undervejs, fordi vi bliver klogere hen ad vejen. Modsat byggeri så har vi ikke fuld viden om det færdige resultat i starten af projektet, til gengæld gør det ikke noget, hvis vi laver lidt om her og der.

Måden vi gør det på, er ved at blive enige om en ramme for projektet. Typisk en kerne, som skal være i orden. Rundt om kernen nogle ting, som kunne være rare at få, men som kan ændres undervejs.

Så holder vi et startmøde med kunden og bliver enige om de første skridt, kaldet et “scrum”. Vi designer, implementerer og afprøver ligesom i vandfaldsmodellen. Det nye er, at vi allerede efter typisk 2 – 4 uger holder et nyt møde med kunden. Så tager man resultaterne op til vurdering og planlægger de næste 2 – 4 ugers udvikling.

Perioderne fra et kundemøde til det næste kalder man et “sprint” eller en “iteration”, vist med en cirkel i figuren nedenfor. Sådan bliver man ved, indtil projektet er i hus. Den tætte kontakt mellem kunde og udvikler sikrer, at projektet hele tiden justeres efter både kundens behov og de ressourcer, der er til rådighed. “Fail often, fail early”: Jo tidligere vi fanger fejlene, jo nemmere og billigere er det at rette dem.

Et typisk agilt forløb

Faktaboks: Hvad betyder “scrum”?

Udtrykket scrum stammer fra rugby. Spillerne står i en klynge, når bolden gives op, næsten som i amerikansk fodbold. Så sker der noget, og efter kort tid stopper spillet igen, og man laver en ny scrum.

Scrum hentyder til, at IT-udvikling er et tæt teamwork. Her er et billede af scrum i rugby:

Scrum

Link til toppen af siden.

4.3 Fordele og ulemper ved vandfaldsmodeller kontra agile metoder

Fordele og ulemper ved agile hhv. vandfaldsmodeller.

VANDFALDSMODELLENAGILE METODER
FORDELE– Velegnet til projekter, hvor vi er helt sikre på slutproduktet
– Revisoren bliver glad: Det er nemt at dokumentere
– Det er også nemt at placere ansvaret
– God til at fange fejl undervejs og få dem rettet
.Virker meget mere fleksibel end vandfaldsmodeller
– Tæt kontakt med kunden hele tiden, kunden får et medansvar
ULEMPER– Kan virke stiv og gammeldags
– Svært at gå tilbage og rette fejl
– Kræver mere af projektlederen, fordi man ikke har en helt så fast køreplan
– Kræver høj grad af tillid mellem udvikler og kunde
– Ved uenigheder kan det være sværere at placere ansvaret

Link til toppen af siden.

4.4 Hvad ender vi så med for et produkt

Næsten alle virksomheder har et ERP system. ERP står for “Enterprise Resource Planning”. Kernen i systemet er bogholderiet eller regnskabet, men ERP systemer kan og bliver udvidet til at kunne styre næsten alt i en virksomhed. Løn, lager, produktion, fakturering, snart sagt alt. I faget virksomhedsøkonomi vil du helt sikkert støde på ERP systemer.

Vi siger nu, at en virksomheds ERP system er blevet forældet, eller at virksomheden f.eks. har købt en anden virksomhed, og at de 2 ERP systemer nu skal kobles sammen. En kæmpe opgave med et kæmpe ansvar.

Deres projekt ser sådan ud:

Hvis man styrer projektet ud fra traditionel projektledelse, dvs. vandfaldsmodellen, vil man typisk få det her resultat.

Hvis vi i stedet havde styret efter agile metoder (agil = “bevægelig”, “forandringsparat”), så havde vi fået det her resultat:

Vandfaldsmodellen er forudsigelig, men svær at tilpasse. Agile metoder er mere uforudsigelige, men nemmere at tilpasse. Agile metoder passer bedst til it-projekter, fordi både udviklere og kunde vil ønske tilpasninger undervejs. Samtidig er det forholdsvis nemt at rette i et it-projekt modsat f.eks. hvis man bygger et hus.

Link til toppen af siden.

Kapitel 5. Brugervenlighed og test

Interaktionsdesign handler om, hvordan du “inter-agerer” eller samarbejder med et produkt. Jeg tænker her ikke på en ny køkkenkniv, men et produkt, hvor 2-vejs kommunikation er mulig. Jeg gør noget og får et svar fra produktet. Næsten alle digitale produkter kan lave 2-vejs kommunikation.

Der er mange penge i godt interaktionsdesign. Tænk på, hvor meget personale det f.eks. sparer, at flypassagerer efterhånden kan tjekke ind selv uden hjælp.

Nødvendigheden af godt interaktionsdesign kan opsummeres sådan:

  • Web sider, apps og andre digitale produkter bliver skabt for at blive brugt og for at skabe en mer-værdi​
  • Derfor er fokus på brugeren og brugen rigtig vigtig​
  • Et website, app eller lignende er et stykke værktøj  der kan hjælpe med at løse en opgave​
  • Hvis værktøjet ikke kan løse opgaven, er det et dårligt stykke værktøj​
  • Et dårligt stykke værktøj giver utilfredse kunder ​
  • Utilfredse kunder finder et nyt stykke værktøj

Brugbarhed kan f.eks. udtrykkes sådan:

  • Let at lære​
  • Let at huske​
  • Pålideligt​
  • Effektivt at bruge​
  • Tilfredsstillende at bruge

Link til toppen af siden.

5.1 Brugbarhed: Design

Du ved allerede en del om design fra kapitel 3 Det grafiske puslespil. Din viden om typografier, farvelære og ikke mindst gestaltlovene gælder stadigvæk.

Link til toppen af siden.

Fitts lov

Fitts lov siger, at

  • Jo større et mål er, jo hurtigere/nemmere er det at ramme
  • Jo tættere målene er på hinanden, jo hurtigere/nemmere er de at ramme

Hvis vi vil øge brugbarheden på et produkt, skal vi derfor lave knapperne store og placere dem tæt.

Hicks lov

Hicks lov siger, at jo flere valgmuligheder vi har, jo længere tid/sværere er det at tage en beslutning.

Hvis vil øge brugbarheden på et produkt, skal vi derfor begrænse valgmulighederne og evt. lave et hiraki. Det sidste svarer til, at vi i stedet for 15 punkter i hovedmenuen måske kun har 5, mens resten bliver til underpunkter.

DSB’s hjemmeside. Jeg synes, at de har fat i Hicks lov, men ikke i Fitt’s lov

KISS

KISS står for Keep IT Simple and Stupid. Gør det nemt for brugeren. Eller som forfatteren Steve Krug udtrykte det i en bog “Don’t make me think”.

Gør det nemt for brugeren. Jo mindre brugeren skal tænke, jo hurtigere og jo bedre.

FTF

FTF står for “putting First Things First”. Læg det, som brugeren har mest brug for, forrest i menuen.

Link til toppen af siden.

5.2 Involver brugerne

“Operationen lykkedes, men patienten døde”

Ovenstående citat er skrækscenariet. Vi laver en god løsning, men den er ubrugelig.

Som designere mister vi meget hurtigt vores “jomfrulighed” over for det, vi designer. Vi bliver til eksperter frem for brugere. Det gælder for interaktionsdesign som for skriftlige opgaver: Man bliver blind på det, man selv laver.

Samtidig har brugerne har enorm magt inden for den digitale produkter, og de vælger os fra, hvis vi skaber bøvl for dem. Ved webshops er konkurrenterne f.eks. kun et klik væk. Så der er alt mulig grund til at involvere brugerne fra start. Det har vi forskellige måder til.

I kapitel 4 Udviklingsmodeller lærte du om, at vi inden for IT foretrækker agil udvikling frem for den traditionelle vandfaldsmodel.

Agil udviklingsmodel
Agil udvikling

Fordelen ved den agile model er, at den giver bedre mulighed for at korrigere projektet undervejs. Den giver også bedre muligheder for at involvere brugerne. Afprøvning kan fint finde sted med brugerne. En gren af agil udvikling kaldet “extreme programming” kræver direkte, at udviklerne sidder i samme lokale som brugerne.

Link til toppen af siden.

5.3 Brugertest og systemtest

Vi bruger mange metoder for at nå og forstå både kunder og brugerne. Gentagne møder med brugere og kunder som i den agile udviklingsmodel er kun en af flere muligheder, vi har

  • Prototyper. Protyper er mini-udgaver af det færdige resultat. En god prototype kan give en god dialog med brugerne
  • Teste undervejs

Der findes forskellige brugertest. Du skal kende disse typer test.

  • Eksperttest eller heuristisk test
  • Tænke-højt test
  • Kvantitative test

Faktaboks. Der er forskel på brugertest og systemtest

  • I en systemtest tester vi for, om et system virker som aftalt
  • Hvis vi tester, om vores knapper og links virker, så er det en systemtest
  • På DSB’s hjemmeside www.dsb.dk kunne vi f.eks. tjekke, om der er muligt at købe en billet fra Kolding til Odense
  • I en brugertest involverer vi brugerne
  • En brugertest på DSB’s hjemmeside kunne være, om brugerne kan finde ud af at købe en billet fra Kolding til Odense

Eksperttest

En eksperttest eller heuristisk test er såre simpelt. Det er, når du tester dit eget arbejde. Det er nemt, billigt og effektivt, men det kan ikke stå alene.

Tænke-højt test

Tænke-højt test er en test, hvor man stiller brugere forskellige opgaver. Lad os tage DSB som eksempel. Brugeren får til opgave, at de skal være i Nykøbing Falster i morgen kl. 12. Hvilket tog skal de tage og hvad koster billetten.

Brugeren tænker så højt, f.eks. “Hm, først vil jeg åbne DSBs hjemmeside”. “Mon der er en billetknap, næeh, jeg klikker her i stedet …”. Designerne er så bag brugeren og lytter med. På den måde lærer de, hvordan brugeren opfatter programmet.

Tænke-højt test er helt fantastiske, og f.eks. Microsoft har dyre lokaler indrettet specielt til tænke-højt tests. Men de kan være dyre at gennemføre. Især hvis man ønsker et bredt udsnit af brugerne.

Link til toppen af siden.

Kvantitative test

Kvantitative test er, at man typisk beder brugerne besvare et spørgeskema. De skal så svare på spørgsmål om brugbarhed, indhold. Man kan bede brugerne udføre opgaver og bagefter fortælle, om det var let/svært, og hvad man kan gøre bedre.

Kvantitative test er billigere end tænke-højt test, men de kommer ikke helt så tæt på brugerne hvis kontakten til brugerne kun sker gennem spørgeskemaer.

Brugerundersøgelser breder sig til den fysiske verden. Vi har alle mødt standere som disse

Link til toppen af siden.

A-B test eller splittest

A-B test eller splittest er en meget anvendt måde at teste på. Det går ud på, at man deler (= “splitter”) sin gruppe op i 2 normalt cirka lige store dele. Den ene del udfører man testen på. Det kunne være, om de køber mere af en bestemt vare på en webshop efter en kampagne. Den anden del af gruppen er kontrolgruppe.

Når testen er ovre, sammenligner man resultaterne for de 2 grupper.

Link til toppen af siden.

Kapitel 6. Digital markedsføring

Bemærk: En del af afsnit 1 er primært taget fra lærebogen “Afsætning” af Lene Jørgensen m.fl. Bogen bruges i hvert fald på IBC Kolding.

Set med salgsøjne har vi overordnet 3 kategorier af digitale medier:

  • Ovned media
    • Egne medier, f.eks. websted, egen Facebook/Instagram/Youtube profil mv.
    • Optimering gennem f.eks. Google Analytics er en kæmpe hjælp
    • Svarer til intern søgemaskineoptimering, dvs. SEO
  • Paid media
    • Søgeordsoptimering
    • Bannerreklamer/video
    • Facebook
  • Earned media
    • Vores “street credit”, dvs. hvis vi f.eks. har en populær blog/populær hjemmeside
    • Hvis andre linker til os, og vi linker til dem
Sammenhæng mellem de 3 medietyper

Hvad er en “landing page”?

Hvis man har en reklame på nettet med et link til organisationens hjemmeside, så linker man langt fra altid til forsiden. Man bruger ofte en særlig side, skabt til formålet, der hedder en “landing page”. Landing page er direkte rettet mod dem, som “lander” på hjemmesiden ud fra reklamen. Dvs. den følger op på et eventuelt tilbud og guider brugerne videre.Landing page indgår sjældent i hjemmesidens menu, men den er uvuderlig både i forhold til at byde kunderne velkommen, men også til at måle effekten af reklamen. Hvis man kan se en stor trafik på landing page, så virker reklamen.
  • Der er forskel på push og pull markedsføring
    • Push = når jeg skubber noget ud til dig: Lægger reklame på Facebook og Instagram. Kunden søger og finder selv informationen
    • Pull = Hvis man f.eks. skriver “Sneakers” skrives i Google, så “trækkes” kunden ind gennem Google Search/Google Shopping

Link til toppen af siden.

6.1 Paid media/eksten søgemaskineoptimering

Paid media er, hvis vi går ud og køber os til online markedsføring. Det klasse eksempel er reklamer på Facebook eller at betale Google for at komme højt i deres søgemaskine.

  • Paid media anvendes både til push og pull markedsføring (modsat hvad der står i lærebogen om afsætning)
  • De mest anvendte er søgeordsannoncering + bannerreklamer
  • Søgeordsannoncering betyder, at vi betaler for at stå højt oppe hos Google

Her er et eksempel på, hvor kringlet det kan være at købe de rigtige søgeord . Det kræver god indsigt i en branche at kunne gøre det rigtigt.

  • En italiensk restaurant i Kolding vil gerne have flere besøgende ind på hjemmesiden
  • De overvejer at købe søgeordet “italiensk restaurant”. Bemærk: De betaler først til Google, hvis nogen klikker på søgeordet
  • Men: De er ikke interesseret i at annoncere for kunder, som bor f.eks. på Sjælland. De kører nok næppe til Kolding for at spise italiensk, hvis de kan få det samme mad i f.eks. Roskilde. De kunder er der ingen grund til at bruge penge på. Så de køber søgeordene “italiensk restaurant Kolding”.
  • De vil også gerne reklamere for mad, så de vil købe ordet “pizza”. Men de vil ikke konkurrerere med take-away pizzaer, heller ikke i Kolding, så den idé dropper de. Til gengæld er de gode til at lave ravioli, så de køber ordet “ravioli”. Ravioli er pasta med fyld

Bannerreklamer er en mulighed, men det skal altid kombineres med en “call-to-action” knap. Dvs. at annoncen har til formål at få folk til at klikke på en knap. så de kommer ind på hjemmesiden. Gerne en landing page.

På Facebook har man kæmpe muligheder for at målrette reklamer, og du kan gå ind ikke kun på det første niveau i salgstragten. Tilbage til vores italienske restaurant. De vil lave en bannerreklame til Facebook. Hvem skal så have den reklame? De kan gøre det utroligt specifikt, som f.eks.:

  • Folk, der bor i en afstand af maks 10 km fra Kolding
  • De skal mindst have en middel indkomst
  • De skal være over 20 år
  • De skal have liket opslag om mad
  • De må gerne have besøgt Italien
  • Osv. osv.

Link til toppen af siden.

6.2 Owned media/intern søgemaskineoptimering

Owned media er de medier, vi selv ejer. Det kan være vores hjemmeside, men det kan også være Facebook, Twitter eller andre online medier som vi styrer og kontrollerer.

Når vi bygger en hjemmeside og/eller webshop, kan vi følge nogle bestemte regler, som Google sætter op. Følger vi de regler, ranker vi højere i Google end hjemmesider, der ikke følger reglerne.

En virksomhed havde en webshop for elektrikere med bl.a. skabe til elektriske installationer. De ville ændre navnene fra “skabe” til “inkapslinger”. Da de ændrede navnet, faldt antallet af brugere. For folk søgte på “el-skabe” på nettet, ikke “el-kapslinger”.

En del af søgemaskineoptimering er, hvis anerkendte medier linker til os. Hvis man kan få populære hjemmesider til at linke til os, så kommer vi højt i søgemaskinerne. Det samme sker, hvis der er mange, der linker til os. Det hedder “link-building”.

Virksomheden Granturismo Cars A/S leaser dyre biler. De har fundet en super smart måde at bruge YouTube på, og de tjener penge på deres arbejde. De producerer YouTube videoer om deres biler, og dem, de interviewer, må gerne være kritiske. De har over 10 mio visninger af deres videoer. Her er et par af de seneste videoer. Granturismo Cars “ejer” jo deres egen YouTube kanal, så de behøves ikke at betale for reklamer her.

Link til toppen af siden.

6.3 Earned media

Sæt nu, hvis vi kan få andre til at gøre markedsføringsarbejdet for os? Det lyder næsten for godt til at være sandt.

Nogen siger, at den bedste reklame er gratis. F. eks. hvis folk taler godt om os. En anden mulighed er at få nogen til at like os på Facebook. Hvis nogen deler opslag eller andet fra os, bare fordi de synes om det, så er det godt for os. Trafikstyrelsen lavede engang en video rettet mod unge mænd, der kører for stærkt i bil. Den bestod af søde, unge og topløse piger, som pegede på skilte med fartgrænser samtidig med, at bilerne kørte forbi. Videoen gik verden rundt!

At få andre til at sprede budskaberne digitalt kaldes “viral markedsføring”. Hvis Granturismo Cars får folk til a sprede deres YouTube videoerne, så er det også viral markedsføring.

Link til toppen af siden.

6.4 Forbrugeranmeldelser, influencers og online markedsføring på webshops

Forbrugeranmeldelser

Hvis du bliver anmeldt positivt f.eks. på TrustPilot, så fremmer det din forretning. Desværre er det muligt at købe sig til anmeldelser på TrustPilot og at fjerne negative anmeldelser, så du kan ikke stole 100% på dem. Jo, hvis du ser anmeldelser som ikke er overdrevent positive, så kan du stole på selve anmeldelsen.

Link til toppen af siden.

Ekstern markedsføring via influencers

Influencers har ikke specielt mange år på bagen som anerkendt markedsføringskanal. Det er de ved at blive nu. Det kan skifte meget fra branche til branche, hvor meget influencere påvirker deres følgere. Influencers er dog en mulighed, som man ikke mere automatisk skal se bort fra. Egentlig er influencere “paid media”.

Link til toppen af siden.

Online markedsføring og webshops

Som du allerede har forstået, så er der mange muligheder for online markedsføring. Når det handler om online medier, så har vi yderligere den mulighed, at vi kan få statistik på alt. Jeg mener det: ALT. Vi ved, hvor kunderne kommer fra, hvor lang tid de bruger på de enkelte sider, hvad de har klikket på, hvilke sider der er mest populære osv. osv.

Link til toppen af siden.

Kapitel 7. Innovation

Når forandringens vinde blæser, bygger nogle læskure. Andre sætter vindmøller op

Kinesisk ordsprog

I Danmark er vores lønninger er høje, langt højere end i f.eks. Kina og Indien. Vi kan ikke konkurrere med ret mange lande, hvis det gælder om billige lønninger. Andre lande kan f.eks. bygge skibe langt billigere end os. Byer som Nakskov, Helsingør, Aarhus og København mistet mange arbejdspladser, fordi der førhen lå skibsværfter i byen. Nu bygger man skibene i lande som Sydkorea og Bangladesh.

Men hvad gør vi så? Jo, vi må finde på noget nyt, som vi kan tjene penge på. Vi er faktisk rigtigt gode til at finde på noget nyt i Danmark. Vindmøller og medicin er nogle af de områder, hvor Danmark er aller stærkest.

I en international opgørelse er vi den 8. mest innovative nation i verden.

Klide: Jyllands-Posten og Bloomberg

Innovation er afgørende for vores velfærdssamfund. Men innovation behøves ikke kun at være, at man finder på noget ny teknologi. Her er et par eksempler inden for IT og innovation.

  • Facebook og YouTube er verdens største medie, større end traditionelle medier som New York Times, Die Zeit og tv-kanaler som Fox News, BBC. Men ingen af dem laver indhold selv
  • Uber er verdens største formidler af køreture, større end selv det største taxaselskab. Men de har ingen køretøjer selv
  • AirBnb er verdens største udbyder af overnatning, langt foran Hilton, Scandic og hvad de ellers hedder alle sammen. Men de ejer ingen bygninger
  • Volt er en stor budtjeneste, der bringer mad ud. Heller ikke de har et eneste køretøj

I alle tilfælde er der tale om, at virksomhederne ejer en platform, snarere end at de producerer selv eller selv ejer køretøjer eller hoteller.

For at noget er innovativt, skal det opfylde følgende krav:

  • Nytænkende
  • Forbedrende
  • Relevant

Link til toppen af siden.

7.1 Radikal og inkrementel innovation

For at forstå innovation bedre, vil jeg dykke ned i begrebet. Først vil jeg skelne mellem:

  • Radikal innovation
  • Inkrementel innovation (inkrementel betyder “stigende”)

Radikal innovation er, når vi laver noget helt nyt. Inkrementel innovation er, når vi laver en mindre fornyelse.

Et eksempel: At lave en bærbar telefon, som alle kunne have med sig, er radikal innovation. I gamle dage havde alle hjem en tung telefon med ledning. Hvis man skulle tale sammen på farten, var der nogle få, som havde walkie-takies eller kunne tale sammen over en radio. Det sidste var mest til skibe og tog. Hvis man var væk hjemmefra, så kunne man i stedet ringe fra en telefonboks. At en smartphone nu kan måle puls og andre aktiviteter er en mindre fornyelse, så det er inkrementiel innovation.

Telefonbokse var almindelige dengang folk ikke havde mobiltelefonerDe findes kun på museum nu

Link til toppen af siden.

7.2 4p-modellen

Vi har nu lært, at innovation kan deles op i mindre fornyelser/inkrementel innovation eller i store (nyskabende) fornyelser/radikal innovation.

Når man snakker innovation, så vil mange nok forestille sig, at man opfinder et nyt produkt. Produktet kan være inkrementel eller radikal innovation, men det er et produkt. Det er bare ikke hele sandheden om innovation. 4p-modellen deller innovation 4 områder, som alle begyder med “p”. Derfor kalder vi modellen for 4-p modellen:

  • Produkt
  • Proces
  • Position
  • Paradigme

Man kan illustrere det således:

4p modellen
4p modellen. Bemærk at illustrationen er min måde
at vise 4p-modellen på, andre gør det anderledes

Link til toppen af siden.

Inkrementel og radikal innovation i 4p-modellen

Inderst i modellen i det orange område er vores udgangspunkt. Hvis vi laver mindre fornyelser, dvs. inkrementel innovation, bevæger vi os væk fra udgangspunktet og ud i det grønne område. Hvis vi så laver yderligere innovation, så bevæger vi os ud i det blå område og er endnu længere væk fra udgangspunktet. Hvor grænsen præcist går mellem de orange, grønne og blå områder, kan være svær at sige, der er nok snarere tale om en flydende overgang.

Link til toppen af siden.

Produkt, process, position og paradigme i 4p-modellen

Man kan være fornyende på mange måder, det behøves ikke kun at handle om selve produktet. Inden for IT verdenen er man gået fra traditionel projektledelse/vandfaldsmodellen og til agil udvikling. Produktet er det samme, men processen er anderledes, og vi kommer hurtigere og billigere i mål.

OMRÅDEFORKLARING
ProduktSelve det fysiske produkt
ProcessDen måde, man producerer tingene på
PositionHvor er vi i forhold til de andre
ParadigmeDen måde, vi forstår os selv på
Dimensioner i 4-p modellen

Link til toppen af siden.

7.3 Uddybning af 4-p modellen

Produkt

“Traditionel” innovation. Når man forbedrer eller helt nytænker et eksisterende produkt. Det var meget nytænkende, da Apple udviklede de første personlige computere. Indtil da var det kun større virksomheder, som havde computere – og disse computere var på størrelse med et klasseværelse. Med mindre, at man byggede dem selv, entusiaster legede dengang med samlesæts-computere

Apple II IMG fra 1977. Den havde ingen harddisk, men den var den første rigtigt pc!

Link til toppen af siden.

Proces

Måden vi gør tingene på. Som nævnt har det været et stort spring, at man i IT-verden er gået bort fra den traditionelle metode til projektledelse/vandfaldsmodellen og nu foretrækker agile metoder. Repeter kapitel 4, hvis du ikke kan huske, hvad vandfaldsmodeller og agile metoder er for noget :-).

Link til toppen af siden.

Position

Selvom Apple faktisk var den første til at lave en pc, som vi kender den i dag, er de stadigvæk en fornyer inden for elektronik. Deres computere og telefoner kan ikke noget, som andre ikke kan. Men Apple har forstået at indtage en helt særlig position. Designet gør, at mange er villige til at betale dobbelt pris eller mere for deres mobiltelefoner. Apple er blevet eksklusiv. Innovation kan sagtens være, at man differentierer sig fra konkurrenterene (differentierer = forskelliggøre), og derfor kan sætte priserne op. Reklame er et meget anvendt middel til differentiering.

Et andet eksempel. For en del år siden fortalte man Skoda-vitser. Hvorfor er der så mange Skodaer i Vejle? Jo, de kan ikke komme op af bakkerne. Skoda producerede på det tidspunkt mest billige biler. Sådan er det ikke i dag. Nu laver Skoda biler, der kan måle sig med f.eks. BMW.

Link til toppen af siden.

Paradigme

Ordet “paradigme” er et svært ord, og hvis du forstår det, så er du dygtig :-). Paradigme betyder noget i retning af “den gængse opfattelse af tingene” eller “fremherskende tankemåde”.

Et eksempel fra videnskaben. Engang var det en gængse opfattelse i Europa, at (den kristne) gud havde skabt verden, og at verden var flad. I dag ved vi, at jorden er rund, og at vi nærmere er et tilfældigt resultat af udvikling (evolution) end et resultat af en guds skaberværk (kreation). Vi har ændret vores opfattelse af vores oprindelse, dvs. vi har skiftet paradigme.

Der er sket et stort paradigme-skifte inden for IT inden for brugervenlighed. Førhen var udviklernes fokus på, at programmerne skulle virke. Nu er deres fokus på, at brugerne forstår at bruge programmerne. Førhen var brugerne til besvær i udviklingsprocessen, nu kan udviklerne ikke komme tæt nok på brugerne. De har skiftet paradigme. Skiftet fra vandfaldsmodeller til agil udvikling kan også kaldes et paradigme-skifte. Vi har ikke kun skiftet process, vi har også skiftet tankemåde.

Link til toppen af siden.

7.4 Brugerdreven innovation

Brugerne har fået meget og mere magt takket være især sociale medier. Inden for IT verdenen har udviklerne lært, at det er en god idé at lytte til brugerne. Nogle gang er det tvang. Hvis brugerne f.eks. ikke vil købe den nye Iphone, så er Apple tvunget til at udvikle sig for at fastholde indtjeningen.

Man ser dog i stigende grad, at f.eks. Microsoft har fora, hvor man kan foreslå forbedringer. Hvis man involverer brugerne i innovation, kalder man det brugerdrevet innovation. Det koster selvfølgelig penge at involvere brugerne, men omvendt kan det være med at udvikle bedre produkter og fastholde brugernes loyalitet over for produktet.

Link til toppen af siden.

7.5 Innovative begreber inden for IT-verdenen

Her er en oversigt over nogle innovative begreber inden for IT-verdenen. Du kender sikkert nogle af dem i forvejen.

BEGREBFORKLARING
Business Intellegence (BI)Business intellegence (BI) om at omsatte data til værdi. Især i form af bedre beslutninger. Det vil sige, at BI på en møde handler om det samme som både big data (set med virksomhedens øjne) samt data warehousing og data mining.
Data Mining/Data WarehousingPå nogle områder synonymer for big data. Data warehousing er, at man opbevarer data. Data mining er, at man analyserer data. Pivot tabeller i Excel er et eksempel på data mining
Internet of Things (IoT) Man snakker om, at i fremtiden vil næsten alt anvende adgang til internettet. Vi er allerede godt i gang:
  • Når man er på vej til sommerhuset, kan man tænde for varmen i forvejen fra bilen. Mobilen har adgang til nettet, og det samme har varmestyringen i sommerhuset
  • Kommunerne har nogle steder “intelligente brosten”. En intelligent brosten er en sten, som man lægger ned i vejen. Den sender så data om temperaturforhold til Vejdirektoratet som så kan afgøre, om man skal salte vejene for at undgå problemer med is på vejene
Kunstig intelligens (AI, Artificial Intellegence)At software kan træffe sine egne beslutninger. Her er et par eksempler
  • Selvkørende biler
    – En computer, der ud fra røntgenbilleder kan genkende kræftknuder. Og den er bedre end lægerne til det
  • I Billund lufthavn bruger de en maskine til at finde forbudte genstande i flypassagerenes bagage. Den kan genkende f.eks. formen på en pistol eller en kniv

Link til toppen af siden.

DEL 2. DIGITAL DANNELSE

Kapitel 8. Data og internettet

Vi er storforbrugere af både data og internet. Men hvad er data egentlig, og hvordan kan vi sende alle typer data over internettet automatisk.

8.1 Bits er fundamentet for alt data

Når vi arbejder med tekster, er vores mindste enhed bogstavet. Vi har 28 forskellige bogstaver i det danske alfabet, bogstaverne a – å. Når vi arbejder med tal, er vores mindste enhed et ciffer. Vi har 10 forskellige cifre, cifrene eller tallene 0 – 9.

Når vi arbejder med data, er vores mindste enhed et “bit”. En bit kan kun have 2 værdier. Enten “0” svarende til “ikke-strøm” og “1” svarende til “strøm”. Ved hjælp af bits kan vi lagre alt muligt. Det lyder måske mærkeligt, men alt data, lige fra tal over tekster til musik, billeder, livestreaming, fjernsyn, ALT digital data består af bits og kun af bits.

Vi kan ikke lagre ret meget i en enkelt bit. Derfor har vi brug for store mængder bits for at kunne lagre data. 8 bits = 1 byte.

På min helt almindelige bærbare computer har jeg 237 gigabytes til rådighed. Det svarer til ca. 1.900.000.000.000 bits. Eller ca. 380 gange flere bits på min computer, end der er mennesker på jorden.

Her er en oversigt over måleenheder for bits og bytes. Bemærk at man førhen satte 1 kilobyte ikke til 1.000 bytes men 1.024 bytes. Det samme gjaldt de andre betegnelser. De var ikke lig med 1.000 men 1.024 af enheden.

ENHEDMÅLES I
1 byte= 8 bits
1 kilobyte= 1.000 bytes
1 megabyte= 1.000 kilobytes
1 gigabyte= 1.000 megabytes
1 terabyte= 1.000 gitabytes
Overblik over bytes og bits

Se videoen her for at få en god forklaring på bits. Videoen er fra Khan Academy.

Link til toppen af siden.

8.2 Protokoller, IP adresser, DNS servere og URL

Protokoller

En protokol er en bestemt procedure, som man har vedtaget at følge. Du kan kalde det en køreplan eller en sekvens, hvis det er kodning. Et eksempel: Du har bestilt bord på en fin (læs: DYR) restaurant. Du bliver modtaget, din bordbestilling bliver tjekket, og en nydelig klædt tjener følger dig hen til dit bord. Tjeneren præsenterer menukortet, du prøvesmager vinen osv. osv. Alt følger en bestemt køreplan. Når en lærer fører fravær over eleverne til en time, siger man, at han fører protokol.

PROTOKOLLER FØR …… PROTOKOLLER NU
Protokoller før og nu

På internettet har vi masser af vedtagne procedurer for, hvordan vi gør. Det hele skal jo helst fungere uden menneskets indgriben. Protokollen for at sende data over nettet hedder TCP/IP, Transfer Control Protocol/Internet Protocol.

Link til toppen af siden.

IP adresser og DNS servere

For overhovedet at få adgang til internettet, skal du have en IP adresse. En IP adresse består af op til 12 cifre, adskilt i 3 områder af et punktum. Hvis du har en hjemmeside, skal den have en fast IP adresse. F.eks. 69.63.176.13, som skulle være Facebooks IP adresse.

Vi mennesker har lettere ved at huske bogstaver end tal. Derfor indtaster vi www.facebook.com og ikke f.eks. 69.63.176.13 i vores browser. Men computerne foretrækker tal. Derfor findes der DNS servere på internettet. DNS servere kan “oversætte” en hjemmesides navn til en IP adresse. I videoen får du en god forklaring på begreberne:

Link til toppen af siden.

URL

En hjemmesides “adresse” kalder man for en URL: www.facebook.com er Facebooks “URL” .

Videoen nedenfor sætter begreberne i sammenhæng for dig. Videoen er fra Khan Academy.

FAKTABOKS: Hovsa, vi er blevet lidt for populære
Internettet har gået sin sejrsgang verden over, og vi kan snart ikke leve uden. Ikke engang i vores ferier. Der er ved at blive mangel på IP adresser. Så man er i gang med at skifte systemet ud. I stedet for 12 cifre går vi nu op på 25 cifre. Det svarer til, at alle sandskorn kan få sin egen IP adresse.

Link til toppen af siden.

8.3 Sådan sender man data over internettet

Når vi skal sende data over nettet, så sender vi det i pakker. Den procedure, vi følger, er selvfølgelig en protokol. Alt data er som bekendt i bits, og vi bryder den samlede mænge data, vi vil sende, op i pakker. Hver pakker bliver sendt af sin egen rute til den IP adresse som er målet. Hvis en pakke mangler, så giver modtageren besked tilbage om at sende pakken igen.

Internettet er super sikkert at sende data over. Videoen herunder kan hjælpe dig til at forstå, hvordan “pakketransporten” foregår:

Link til toppen af siden.

8.4 Bredbånd

Egentlig er bredbånd internet, som kan klare mere datatrafik end en gammeldags telefonledning. Med en gammeldags telefonledning kan det tage en måned eller mere at downloade en film. For rigtigt mange organisationer og virksomheder i Danmark er det altafgørende, at vi har gode bredbåndsforbindelser, og alle politikere i Danmark er enige om, at selv de mest afsides steder i Danmark skal sikres bredbånd.

Men hvad er bredbånd så? I stedet for bredbånd eller “båndbredde”, som man så siger, så lad os lege “bil-bredde” i stedet for.

Jens og Jensine Hansen bor på en bondegård lige midt på Midtfyn. De skal besøge Viggo og Vibeke Venner, som bor lige midt i Midtjylland. Der er for langt i traktor, så de kører bil i stedet for.

  • Først kører de fra gårdspladsen af en smal markvej ud til landevejen. “Bil-bredden” på markvejen er kun 1 bil
  • Så kører de af landevejen, hvor bilbredden er 2 biler
  • Siden kommer de til motorvejen, hvor bilbredden er 4 biler
  • På motorvejsbroen over Lillebælt er vi helt oppe på en bilbredde på 6 biler. Se billedet herunder
Den Ny Lillebæltsbro: Høj bil-bredde = plads til meget trafik

Bredbånd betyder, at internetforbindelsen har en tilfredsstillende hastighed, og derfor kan bruges til det, vi ønsker. Teleselskaber konkurrerer på bredbåndshastigheder. Danmark har vi et meget veludbygget internet, men selv i fattige lande har de bredbånd.

Link til toppen af siden.

8.5 Klient-server og peer-to-peer netværk

Hvordan kan det lade sig gøre, at mange på samme tid kan”gå på” Facebook? Det kan lade sig gøre, fordi at vi fra forskellige enheder kan forbinde til Facebook. Den, der ser Facebook, kalder vi “klienter”. Det, de ser, ligger på en server. Mange klienter kan “gå på” en server samtidig. Lige som mange kan se det samme TV program samtidigt.

Man kan også forestille sig, at flere computere bliver forbundet i et netværk uden at de har en central server. Denne type netværk kalder vi for peer-to-peer. “Peer” betyder “gruppe”.

KLIENT-SERVER-NETVÆRKPEER-TO-PEER NETVÆRK
klient-server netværkPeer-to-peer

En mobiltelefon, der er forbundet til en computer (her med et kabel, men det kunne selvfølgelig også være trådløst), er også et peer-to-peer netværk. Det er det fordi, at de er forbundne til hinanden som “peers”, dvs. “ligemænd m/k”. Alle har samme status i netværket. Men hvis telefonen går på Facebook, så er den en klient til en server.

Link til toppen af siden.

8.6 Opsummering

Der er mange tekniske udtryk i kapitlet her. Her er en oversigtsvideo:

Link til toppen af siden.

Kapitel 9. Din computer og mobil udspionerer dig

For ikke så lang tid siden sad jeg (Lars, ejer af hjemmesiden her) og fik lyst til at tage til Island på ferie. Jeg surfede ind på nogle turistsider med nogle ualmindeligt flotte billeder fra Island, og blev mere og mere lun på tanken. Bagefter ville jeg høre lidt musik på YouTube og tadaaa: “Helt tilfældigt” dukkede der reklamer for rejser til Island op.

Det er naturligvis ikke tilfældigt, at reklamer for Island dukker op. Jeg er helt sikker på, at du selv har oplevet noget lignende. Faktisk har Google indrømmet, at de aflytter os f.eks. gennem Siri. At sælge data om dig er en “billion-dollar-industry”. I kapitlet her dykker vi ned i, hvordan det kan lade sig gøre. Teknologien bag kan både bruges og misbruges mod os.

Link til toppen af siden.

9.1 Cookies

En cookie er en lille datafil, som kan lagres i din browser. Den lever typisk i 1 – 3 uger, så den “overlever”, selv når du slukker din browser. Så længe den er aktiv, kan den sende data til afsender.

Når du besøger en hjemmeside, bliver du ofte stillet over for valget om du vil acceptere cookies. Her den mest populære hjemmeside i Danmark: Danmarks Radios hjemmeside:

Der findes forskellige slags cookies. Først og fremmest opdeler vi i 1. part og 3. part cookies. Sjovt nok er der ikke noget, der hedder “2. part cookies”.

  • 1. part cookies er en cookie mellem dig og det websted, du besøger. F.eks. dine præferencer, login mv. Der findes 3 1. part cookies: Personaliserede cookies, statistik cookies og tekniske cookies. 1. part cookies regner vi ikke for noget problem i forhold til at beskytte dit privatliv
  • 3. part cookies er en cookie, der kommer “udefra”, og som ejeren af webstedet tillader og normalt også bliver betalt for. F.eks. har Danmarks Radio cookies fra Twitter og Facebook, og de kunne sagtens have endnu flere f.eks. fra Google. Disse cookies kaldes markedsføringscookies. 3. part cookies giver store problemer i forhold til at beskytte dit privatliv

Personaliserede cookies kaldes også tracking cookies. Den følger din færden og forsøger at tilpasse indholdet til dig. F.eks. hvis du er fan af verdens bedste fodboldhold AGF og ofte klikker dig ind på nyheder om AGf, så vil den forsøge at sætte indhold øverst til dig.

Statistik cookies måler, hvordan du bruger hjemmesiden. Hvis du f.eks. finder ud af, at dine brugere på en hjemmeside besøger en bestemt underside, så skal du måske lave et direkte link til den fra forsiden.

Tekniske cookies får hjemmesiden til at virke. Når du ligger varer i indkøbskurven på en webshop, husker den tekniske cookie, hvad du har lagt i kurven. Meget nyttigt, især hvis netforbindelsen pludselig ryger. NemID og at huske logins kommer også ind under tekniske cookies.

Markedsføringscookies er som den eneste en 3. part cookie. Den bruges udelukkende til at målrette reklamer mod dig. Det er markedsføringscookies, der sørgede for, at jeg hurtigt fik en vist en reklame om Island på YouTube. Facebook, Google og andre har cookies på millioner af hjemmesider over hele verden. I de 2 næste afsnit fortæller jeg mere om gode og dårlige sider ved cookies. Jeg fortæller også, hvorfor markedsføringscookies er “bøllen” i klassen.

COOKIE1. ELLER 3. PARTS COOKIEFORKLARING
Personlig cookies/funktionelle cookies1. partRetter hjemmesiden til efter dit behov. F.eks. husker det sprog, du foretrækker på en side eller foreslår flere artikler (f.eks. om fiskeri), hvis du lige har læst en artikel om fiskeri. Ejere af en hjemmeside skal informere dig om personlige cookies og få din tilladelse til at bruge dem.
Statistik1. partMåler, hvordan du bruger hjemmesiden, dvs. den indsamler statistik. Ejere af hjemmeside skal informere dig om statistik cookies og have din tilladelse til at bruge dem
Teknisk eller nødvendige cookies1. partFår hjemmesiden til at fungere. F.eks. husker tekniske cookies din kurv, hvis du webshopper. De husker også dit login. NemID kan f.eks. ikke fungere uden. Ej hjemmesideejer har IKKE pligt til at informere dig om nødvendige cookies
Markedsføring3. partBruges til reklamer og big data, er “bøllen” i klassen. Hvis du f.eks. surfer på Danmarks Radios hjemmeside, er cookies fra alle andre firmaer end Danmarks Radio 3. part/marketing cookies. Ejere af en hjemmeside har pligt til at informere dig om 3. part cookies og skal have din tilladelse for at bruge dem overfor dig
Oversigt over cookies. KIlde: Forbrugerstyrelsen

Kilde: Bl.a. Forbrugerstyrelsen.

Link til toppen af siden.

9.2 De gode sider ved cookies

De fleste er glade for, at hjemmesiderne husker vores login. Vi er også glade at vi ikke behøver at bekymre os, hvis netforbindelsen til webshoppen ryger. Mit fodboldhjerte springer gerne et par slag over af glæde, hvis jeg forrest på en side får tilbudt at læse artikler om AGF’s triumfer.

På webshops er cookies helt uundværlige. De er næsten vigtigere end varerne. Cookies tilbyder kunder “andre kunder har også købt …”. Det kan skabe mersalg. I kombination med 3. part cookies kan man f. eks. målrette reklamer mod bestemte målgrupper. Hvis jeg har vist interesse for Island, så køber firmaer, der sælger ophold på Island, gerne reklamer hos f.eks. YouTube.

Andre eksempler er: Hvis du på Facebook har liket en vase, så kan du målrette reklamer for vaser til folk, som har vist interesse for vasen OG som er måske over 20 år OG som bor på Fyn osv.

Et sidste eksempel: Cookies kan måle, hvad der giver mest salg på en webshop. Virker “tag 3, betal for 2” bedre end “du får 20% rabat resten af måneden”.

Link til toppen af siden.

9.3 De mindre gode sider ved cookies

Firmaer som Facebook, Google og andre såkaldte “data brokere” (firmaer, der sælger data) betaler ejere af hjemmesider for at få lov til at spore brugere. Hvis du f.eks. går ind på Berlingske Tidendes hjemmeside (www.b.dk), så er der ikke mindre end 280 forskellige marketing cookies. Alle cookies indsamler data om dig og sender dem videre til de firmaer, der har betalt Berlingske for at få lov til at samle data ind om besøgende.

I Danmark er det ulovligt at installere alle cookies undtagen tekniske cookies på din browser uden, at du har accepteret det. Men mange firmaer gør, hvad de kan, for at gøre det svært for dig at slippe for cookies. “Slå-ikke-nødvendige-cookies-fra-knappen” er tit ret godt gemt og med god grund set med ejerens øjne. Ejere af store hjemmesider tjener godt på at “sladre” om dig til 3. part. Det gælder ikke mindst Facebook og Google.

Link til toppen af siden.

9.4 Beskyt dig mod cookies

Det er svært at undgå 3. part cookies. Men der er ingen grund til at gøre det let for andre at kikke dig over skulderen. Her er et par gode råd:

  • Undgå Google Chrome når du browser, for den sladrer direkte til Google om alt
  • Jeg bruger selv Firefox, for Firefox er non-profit
  • Browserne Tor og Cliqz går ind og camouflerer din IP adresse, så de er meget sikre
  • Installer eventuelt AdBlocker. Den gør ikke noget ved cookies, men den fjerner reklamer. Reklamer vises ofte på baggrund af cookies, dvs. data, som de henter hos dig på forhånd
  • Andre muligheder er at installere Youblock, som nogle påstår er bedre end AdBlocker
  • Du kan installere Urban Shield. Den “VPN” forvirrer, så det ikke kan spores, hvilken maskine (dvs. IP-nummeret) som du benytter
  • Når du er færdig med at surfe: Gå ind og slet cookies.

Vejledninger i at slette cookies:

Her er jeg i gang med at slette cookies i Firefox

Slet browserdata

Link til toppen af siden.

9.5 Dark patterns

“Dark patterns” kan du oversætte med “skumle hensigter”. Lad os se det fra en fisk’s synspunkt. Fisken “Tommy Torsk”, som du ser nedenfor, han er en torsk og kommer svømmende. Pludselig ser han en super lækker lille snack, en lille fiskelignende ting. Tommy er lækkersulten og bider til, men det skulle Tommy aldrig have gjort. For fisken sidder på en krog, krogen sidder på en line og linen sidder på en fiskestang. Tommy betaler for sin dumhed med livet. Der var altså et “dark pattern” eller en skummel hensigt bagved, at Tommy blev tilbudt en snack.

Der findes masser af dark patterns på nettet, alt for meget, og cookies understøtter dark patterns.

  • For et par år siden blev et bureau, der solgte flybilletter og formidlede chaterture, taget i at tage højere priser for danskere end for svenskere for de samme billetter på deres webshop. De kan se, hvor folk kommer fra, når de går ind på hjemmesiden
  • En webshop lagde 10% oven i prisen, hvis folk brugte Mac. Mac-brugere har ofte flere penge end pc-brugere
  • RyanAir er et lavpris flyselskab med base i Irland (hvor skatten og lønningerne er lave). De har haft stor succes, og de er et af Europas største flyselskaber. Hvis du har prøvet at købe billetter hos RyanAir, så ved du, at det kræver Messis eller Pernille Harders talent for at drible udenom, at du betaler for mere end bare billetten. De 2 er blandt verdens bedste mandlige hhv. kvindelige angribere i fodbold
  • Ejere af velbesøgte hjemmesider tjener store penge på at have 3. part cookies liggende. De skal tilbyde dig at vælge dem fra, men de bruger dark patterns for at undgå, at du vælger dem fra. Her et eksempel fra en af Danmarks mest populære hjemmesider, www.b.dk dvs. hjemmesiden for Berlingske Tidende. Det er tydeligvis nemmere at vælte cookies til end fra
  • Facebook er værre! Du kan næsten ikke vælge cookies fra

Link til toppen af siden.

9.6 Hvad er data overhovedet

Du ved, at data lagres i bit, og du ved, hvordan man sender data over internettet. Men hvad er data egentligt?

Data kommer fra latin af verbet “dare”. Det betyder “at give”. Data er “givet”.

Inden for IT er data oplysninger, som vi lagrer maskinelt. Det er ligegyldigt hvilken type oplysninger vi lagrer, bare vi lagrer og kan hente dem frem igen. Data skal dog også give mening. Hvis jeg skriver “20010102” giver det ikke mening. Men hvis jeg ved, at 2001 er år, 01 er måneden og 02 er dagen i måneden, så giver “20010102” mening som en dato.

Dataformat

Dataformat eller datarepræsentation er den måde, som data repræsenteres på. Vi kan godt skrive en dato som “20010102”, men vi kan også skrive datoen som “2. jan 2001” eller “02-01-2001”. Det vigtige er, at når man overfører data fra et sted til et andet, så skal både afsender og modtager være enige om formatet. Et eksempel. Lad os sige, at du vil notere ned i Excel, at din karakter ligger mellem 7 og 10. Prøv at skriv “7 – 10” i Excel, så laver Excel det straks om til et datoformat.

Dataformater er meget vigtige i databaser, men det emne skal vi nok komme til senere!

Bemærk: Teksten til afsnittet er delvist hentet fra Det Store Danske Leksikon.

Link til toppen af siden.

9.7 Big data

BIg data er, som navnet antyder, en stor bunke data. De indsamlede data kan være enten strukturerede eller ustrukturerede.

  • Ustrukturede data er der ikke orden i. Som udgangspunkt er f.eks. en tilfældig optaget samtale ustruktureret data. Når først vi kan koble dem til en person, så er de strukturerede
  • Strukturerede data er der orden i. Man kan sige, at strukturerede data kan være/er i et Excel-ark

Der findes grundlæggende 5 forskellige typer for data, man kan indsamle.

TYPE DATAFORKLARING
AktivitetsdataData fra aktiviteter, f.eks. at se en film, læse en bog, lytte til musik. Men også at du bruger Mobile Pay. Især mobiltelefoner indsamler enorme mængder af aktivitetsdata
Billed- og video dataF.eks. billeder, taget med smartphones eller alle mulige andre billeder og video
Samtale dataTale. Mobiltelefoner og computere kan lytte og videregiver dine samtaler
SensordataSensorer kan “føle”. F.eks. sensorer ved trafiklys. Din mobiltelefon “føler” hvor du er geografiks, og den videregiver de data
Biometriske dataData, der knytter sig til biologi. F.eks. fingeraftryk, dna, blodtype og ansigtsgenkendelse
Forskellige typer data

Man indsamler alle former for data til big data, selv de mest ustrukturerede data. Alle former for data kan bruges. Sensordata, data fra Danmarks Statistik, personregister-data, dine søgninger i Google, muligvis endda aflyttede samtaler … alt hvad de kan få fat i overhovedet.

Big data = indsamling af data + analyse af data
Big data

Indsamling af data er den ene del af big data. Den anden del er, at man skaber mening i data. Dvs. at alle data, ustrukturerede som strukturerede, ender som strukturerede data. Det er selvfølgelig noget af et analysearbejde, men man har kæmpe servere til at gøre arbejdet. Alt sammen ender i forbløffende præcise beskrivelser af næsten os allesammen, og de beskrivelser kan sælges til gode penge.

Big data illustreret

Fra ustrukturerede data til strukturerede data og big data

Et Søren Smart kan godt lide at købe tøj over nettet. Signe går ind på en webshop, f.eks. Zalando. En bigdata virksomhed (f.eks. Google, Facebook eller andre, der er mange, der lever af big data) har en marketing cookie hos Zalando, så de ved altså, at Søren har surfet på Zalando. Det vil sige, de kender ikke Sørens navn, de har kun IP-adressen på hans computer. De data, de har fra marketingcookien, er endnu ustrukturede. Men: De analyserer data, og de finder hurtigt frem til, at det er Søren Smart, som har den pågældende IP adresse. Nu er deres data om Sørens besøg hos Zalando pludselig strukturede, og de kan sælge deres viden om Søren. Det varer nok ikke længe, før Søren får tøjreklamer på hans Facebook eller andre, sociale medier.

De er ikke dumme hos de sociale medier. Hvis jeg f.eks. liker 3 opslag om bedre miljø, så kan de godt regne ud, at jeg stemmer på partier hvor miljøet er højt på dagsordenen. Det samme gælder, hvis jeg liker mange LBGT-positive opslag, så kan de også godt regne ud, at jeg måske er homoseksuel.

Jeg gik ind og tjekkede, hvad de ved om mig bare i dag. Faktisk er det skræmmende, for jeg gør, hvad jeg kan, for at spænde ben for dem. De ved, at jeg 2 gange har brugt en DSB App og at jeg spiller Pokemon Go. De kan sagtens regne ud, hvor jeg bor (der opholder jeg mig mest) og hvor jeg arbejder. Hvis du begynder at føle, at de har hånden oppe under blusen på dig, så ved du, hvordan jeg har det med dem. Tjek gerne dig selv og din profil hos Google på https://myactivity.google.com/

Donald Trump købte data fra databroker-firmaet Cambridge Analytics til at målrette hans kampange, da han vandt præsidentvalget i 2016. Cambridge Analytics påstod, at de vidste 5.000 ting om hver amerikaner. Fornavn, efternavn, adresse, postnummer og by er kun 5 ting tilsammen.

Er Facebook og Google på kanten af noget uetisk

Kan du huske restauranten PIzzaPellegrina. Vi legede, at PizzaPellegrina er en pizzarestaurant (ikke take-away), som ville lægge bannerreklamer ud på Facebook. PizzaPellegrina bor i Kolding, og i forhold til online markedsføring kan man hos f.eks. Facebook bestille bannerreklamer hos folk, der

  • Bor maks 15 km fra Kolding
  • Har liket opslag om mad
  • Er ældre end 25 år
  • Har besøgt en restaurant inden for de sidste par måneder

Facebook ved disse ting, fordi vi selv fordrer Facebook med disse data. Facebook har 3. part cookies ude allevegne, de ved endda, om man har besøgt webshop og hvor langt, man har nået i købet. På samme måde ved Google hvad du søger efter, hvilke hjemmesider du har besøgt og hvilke videoer, du ser. Alt sammen big data, og alt sammen data til salg.

9.8 Hvordan finder de dig + vigtigste kilde til information om dig

Et kort men meget vigtigt afsnit:

  • Google, Facebook o.lign. ved ikke, at det er dig, når du surfer på nettet. Men de har din IP-adresse. Med noget god regnekraft finder de nemt frem til, at din IP adresse tilhører dig
  • Den vigtigste kilde til data om dig er ikke cookies. Det er din mobiltelefon. Den oplyser f.eks. om hvor du opholder dig, hvad du siger, hvilke SMS’er du sender, dine billeder, dine samtaler …

9.9 Perspektiver på big data

Big data bliver allerede nu brugt i stor stil. Her er nogle eksempler:

  • Man bruger i stor stil big data til markedsføring på webshops, og der bliver købt og solgt store mængder big data
  • Big data kan bruges til at forudse trafikpropper, sygdomme, vejret og endda kriminalitet
  • Inden for sportens verden kan man bruge big data til at forbedre præstationerne
  • Uden big data kan vi glemme alt om selvkørende biler
  • Flere lande men især Kina bruger ansigtsgenkendelse og apps til at kontrollere, hvad deres borgere laver. I Kina har man en app, “WeApp”, som er billetkøb, netbank, socialt medie, datingsite mv. i et. Staten overvåger den app i stor stil.

Forudsætningen for big data er, at vi kan få leveret en masse digitale data over internettet. Det er også, at vi har servere, der kan strukturere vores data.

Nogle ting, man skal tage i betragning, når man anvender data til f.eks. big data.

BEGREBFORKLARING
Åbne dataÅbne data er data, som vi gratis kan få fingre i. Det gælder f. eks. tal fra Danmarks Statistik eller internationale statistik banker. Tal om nationalregnskaber, virksomhedsregnskaber, befolkningsstatistik, vejr mv. er ofte åbne data. Data om, hvad Google ved om dig, er i en vis grad åbne data
Lukkede dataLukkede data kan vi ikke umiddelbart få fingre i. Data kan være beskyttet med et password (f.eks. din Facebook). Vi kan i nogle tilfælde betale os fra det, og i andre tilfælde kan vi ikke få fat i dem. Din lægejournal er f.eks. meget personlig data, som kun myndigheder og dig må få adgang til
Størrelsen på dataHvor store mængder data er der tale om. Er datamængderne store nok. Et eksempel. Hvis svalerne flyver lavt, kommer der regn. Men hvis vi skal forudsige regnen præcist, kræves der meget store mænger data om klimaet
Hastighed på dataHvor hurtigt får vi data leveret. Hvis det går skidt for en virksomhed, duer det ikke, hvis man venter med at kikke på tingene, til vi har de samlede data for årsregnskabet. Hvis der er sket en alvorlig ulykke på en motorvej med tilskadekomne, er det altafgørende, at vi får data om ulykken med det samme, så vi kan sende en ambulance
VariationVi skal have tilstrækkelig variation i data. Hvis vi ønsker at forudsige et folketingsvalg, så skal vi ikke kun spørge borgere i Gentofte Kommune. Gentofte ligger nord for København, der bor næsten kun velhavere. Gentofte er landets rigeste kommune og den eneste med konservativt flertal.
TroværdighedKan vi stole på data. I en undersøgelse fra et gymnasium i Aarhus svarede næsten ingen af eleverne, at de havde taget kokain. Men de kendte alle sammen nogen, der havde prøvet det.

Kapitel 10. Persondataloven og ophavsret

I maj 2018 trådte en lov om beskyttelse af personlige data kaldet “GDPR” (General Data Protection Regulation) i EU. Loven gælder også i Danmark og er vedtaget under navnet “Persondataloven”. Loven har vidtrækkende konsekvenser, og overtrædelser straffes med store bøder.

Kort fortalt går loven ud på:

  • Du har ret til kontrol over, hvad der er registreret om dig, dvs. ret til indsigt
  • Du har ret til, uden varsel, at få indsigt i, hvad der er registreret om dig
  • Du har ret at få rettet fejlagtige data om dig
  • Du har ret til, uden varsel, at få slettet data om dig
  • Det er forbudt at registrere personfølsomme data. Eksempler er data om religion, race, helbred, seksualitet og politisk overbevisning

Et eksempel fra gymnasieverdenen. Hvis Danny Doven stopper på HHX, så kan han kræve, at alt om ham bliver slettet. Hvis Lars Lærer så på et tidspunkt har fået en besked om, at Danny Doven ikke har lavet lektier, så skal Lars slette det. Hvis Lars så ikke lige kan huske, hvor han har gemt beskeden, så kan Lars faktisk blive dømt for at bryde persondataloven. Her er Forbrugerstyrelsens forklaring

Loven gælder ikke i alle tilfælde. Læger, hospitaler og politi må naturligvis registrere alt om dit helbred eller om du er kriminel. Kriminelle kan ikke bede politiet om at slette alle data, som Politiet har om dem. Jo, hvis de kan bevise, at Politiet har lavet en fejl, ellers ikke. Til gengæld er der strenge regler for, hvordan følsomme data som f.eks. helbred og strafbare forhold skal opbevares.

Faktaboks: Uber får bøder

Uber er et virksomhed, der ejer en platform. På platformen kan man udbyde og købe kørsel. Man kan sige, at private kan køre som taxaer og selv bestemme prisen.

Uber fik stjålet data ved et cyberangreb, der forekom tilbage i 2016. Personoplysninger på 57 mio. brugere blev stjålet.Fremfor at notificere brugerne, forsøgte Uber at dække over lækket ved at betale hackerne 100.000 dollars for at slette de stjålne oplysninger.

Det britiske tilsyn udskrev en bøde på 448.039 euro (svarende til knap 3,35 mio. kroner), mens det hollandske landede på en bøde på 600.000 euro (knap 4,48 mio. kroner). Var datalækket forekommet efter, databeskyttelsesforordningen fandt anvendelse, havde disse GDPR-bøder sandsynligvis været markant højere. Kilde og citat: 2ncCompliance Studio

Link til toppen af siden.

10.1 GDPR/persondatalovgivningen

Loven omfatter alle de oplysninger, der kan identificere dig. Personoplysninger omfatter for eksempel:

  • Navn, alder og køn
  • CPR-nummer
  • Din computers IP-adresse
  • Hvor du befinder dig
  • Dit fingeraftryk
  • Dit helbred
  • Din økonomi
  • Religiøs eller seksuel overbevisning

KIlde: Forbrugerstyrelsens hjemmeside: taenk.dk/test-og-forbrugerliv/digitale-tjenester/hvad-er-gdpr-databeskyttelsesloven.

10.2 Hovedregel og undtagelser fra persondataloven

Hovedreglen

Der hverken registreres eller videregives:

  • Almindelige oplysninger
  • Private oplysninger
  • Følsomme oplysninger

..uden din tilladelse og accept.

Undtagelser fra reglen

Der er selvfølgelig en række undtagelser, hvor personlige oplysninger må registeres. Hvis:

  • Du har givet lov (men selv ved samtykke kan det give problemer. Selv hvis du giver lov, må f.eks. en butik eller forening ikke registrere personfølsomme oplysninger som f.eks. seksualitet)
  • Det er nødvendigt for at overholde en aftale eller en retlig forpligtelse
  • Det er nødvendigt for at beskytte dig
  • Det er nødvendigt for at udføre en myndighedsudøvelse
  • Du selv har offentliggjort oplysningerne
  • Det er nødvendigt for at fastlægge retskrav eller strafferetlige krav
  • Det sker i forbindelse med sygepleje eller behandling
  • Dit CPR-nr. har særstatus. Her gælder det, at:
    • Det offentlige må bruge dit CPR-nr. til entydig identifikation af dig, når de fx sender breve til dig
    • En privat virksomhed må bruge dit CPR-nr., når den fx skal udbetale løn til dig, eller hvis du skylder den penge

Datatilsynet er den centrale og uafhængige myndighed, der sørger for, at reglerne i Persondataloven bliver overholdt. Datatilsynet kan politianmelde brud på reglerne, og de tøver ikke med at gøre det.

Link til toppen af siden.

10.3 Almindelige, private og følsomme persondata

Nogle oplysninger om dig er mere personlige end andre. Hvis FlirteFie vil have en affære med Generte Gerda (til en forandring jagter Fie denne gang piger, men hun er til lidt af hvert) kan sagtens finde ud af, hvor Generte Gerda bor henne ved at slå op på nettet. Gerdas adresse er hverken privat eller følsom. Til gengæld er det meget personligt, at FlirteFie og GenerteGerda er på vej til at få en affære.

Man kan dele personlige oplysninger op i 3 former for oplysninger. Almindelige oplysninger, private og følsomme

TYPE OPLYSNINGEKSEMPEL
Almindelige oplysninger– Navn
– Fødselsdato
– Adresse
– Telefonnummer
– Kundeforhold (i en vis grad)
– Økonomiske forhold (i en vis grad)
Private oplysninger– Om du er straffet og for hvad
– Om du har sociale problemer og er i kontakt med fx kommunen?
– Dine interne familieforhold fx skilsmisse, problemer med alkohol og stoffer
Følsomme oplysninger– Din racemæssige eller etniske baggrund
– Din politiske, filosofiske eller religiøse overbevisning
– Om du er medlem af en fagforening, og hvilken
– Oplysninger om dit seksuelle tilhørsforhold eller din helbredstilstand
Opdeling i personlige, private og følsomme oplysninger

10.4 Konsekvenser for virksomheder

GDPR-loven er en meget kraftfuld lov, og den har givet anledning til store ændringer. På mange måder er loven sund fornuft og “god opførsel”, men nu er der pludselig en streng lovgivning, man kan blive dømt efter.

  • Virksomheder over en vis størrelse skal have en GDPR ansvarlig. Det gælder f.eks. også på skoler inklusive gymnasier, hvor man håndterer store mængder persondata
  • En organisation må kun offentliggøre portrætbilleder af dig, hvis du har givet dem lov
  • En organisation skal oplyse, hvis de overvåger en medarbejders brug af f.eks. en arbejdscomputer
  • Du skal informeres, hvis der er overvågningskameraer på din arbejdsplads

Alt i alt har det betydet, at mange organisationer er blevet betydeligt mere forsigtige i deres omgang med personfølsomme data. Forestil dig f.eks. hvis en bank lækkede eller slogte oplysninger om din økonomi og blev dømt efter persondataloven. Så var der nok ikke så mange kunder tilbage i den bank.

Link til toppen af siden.

10.5 Konsekvenser for databrokere (f.eks. Google og Facebook)

Som vi tidligere har set, indsamler virksomheder som Google og Facebook store mængder data om os f.eks. gennem cookies. De analyserer på det, og de er i stand til at lave ret præcise profiler af os. Den viden lever de af sælge, f.eks. til webshops eller andre, der ønsker at købe disse data.

Ud fra GDPR loven er det ulovligt at registrere, hvilken politisk overbevisning man har. Men hvis jeg f.eks. liker et par opslag om miljø f.eks. fra Greenpeace eller Danmarks Naturfredningsforening, så kan Facebook godt regne ud, at jeg nok stemmer på et parti, som går op i miljø. Så loven kan være svær at udføre i praksis.

Det er et åbent spørgsmål, hvordan vi kan kontrollere f.eks. Facebook. Kan de f.eks. undskylde sig med, at deres data er registreret i USA og/eller Kina, hvor GDPR ikke gælder?

Link til toppen af siden.

10.6 Ophavsret ©

Har du undret dig over det lille symbol her, “©”. Det betyder, at det, du ser, er omfattet af copyrights. Dvs. du må ikke bare kopiere løs uden at spørge ejeren. Reglerne gælder også, hvis der ikke står et ©. Du må f.eks. ikke kopiere Legos logo til din egen virksomhed. Til gengæld må du gerne bruge Lego og alle mulige andres værker, så længe at det er til en skoleopgave.

Jeg må f.eks. ikke kopiere en jumbobog, skrive at “Kilde: Walt Disney” og så udgive det som mit eget. Det samme gælder musik, film eller alt, hvad man kan betegne som et “Værk”. Lego har mange folk ansat, der overvåger, at andre ikke kopierer deres Legoklodser.

Et “Værk” er et stykke arbejde, som

  • Ophavsmanden har skabt ved egen skabende indsats
  • Værket skal have en vis grad af originalitet

En idé er ikke et værk, sjovt nok, så man kan ikke have copyrights på idéer.

I Danmark overvåger virksomheden CopyDan, at man ikke kopierer fra andre. Man må f.eks. ikke fotokopiere en hel lærebog. At det så sker alligevel, f.eks. på universiteterne, er så en anden sag. CopyDan er ret kradse at have med at gøre. I princippet kan de kræve penge af en person, der kopierer en bog, selvom personen er forfatteren.

Link til toppen af siden.

Kapitel 11. Kommunikation, internet fænomener og IT-systemer i organisationer

Meget groft sagt kan man dele kommunikation op i 2 typer

  • 1-vejs kommunikation. Her er der en afsender og en modtager, men modtageren kan ikke svare afsenderen.
  • 2-vejs kommunikation. Her er der også en afsender og en modtager, men modtageren kan svare afsenderen. Samtaler,

Radio, TV, papirsreklamer og nogle elektroniske reklamer, en stadionspeaker er alle eksempler på 1-vejs kommunikation. Hvis du får skældud, er det også en slags envejs kommunikation, afsenderen er ligeglad med dine svar selvom du har mulighed for at svare :-).

Samtaler, emails, Facebook, telefonsamtaler, sms er alle eksempler på 2-vejs kommunikation.

Et socialt medie (SoMe) definerer vi som programmer eller apps, der muliggør en hurtig udveksling af samtaler, billeder mm. mellem forskellige personer”. Kilde: Wikipedia

Sagt på en anden måde: SoMe er digital 2-vejs kommunikation. I daglig tale tænker vi typisk på medier med et stærkt element af deling. Facebook, YouTube, Twitter, SnapChat osv. Men sms og emails kan man også godt definere som sociale medier.

Faktaboks. Tik Tok og storpolitik

TikTok er et meget populært og stærkt voksende sociale medie, hvor man laver og deler videoer. Men hovedkontoret er i Beijing i Kina, og det har fået mange til at frygte, at data bliver delt med den kinesiske regering. Indien har forbudt Tik Tok, Australien og USA overvejer det samme. For tiden (juli 2020) er hverken USA, Australien og Indien på særlig god fod med Kina.

Kina er selv gået i forvejen. I Kina skal man bruge appen WeChat i stede for alt det, vi bruger både Facebook, datingsider, netbank, og apps til bestilling af hotel, taxa, fly- og togbilletter til … plus det løse. Alle data fra WeChat går direkte til den kinesiske regering som et led i deres meget omfattende overvågning af deres borgere.

Link til toppen af siden.

11.1 Internet fænomener

Samtidig med, at vi alle har adgang (og råd) til internet, computere og smartphones, så har vi i løbet af ganske få år har vi oplevet en rivende udvikling i sociale medier. Sociale medier er, ligesom smartphonen, på godt og ondt blevet en del af vores hverdag.

Vi har allerede været inde på, at vores internet surfen og brug af sociale medier kan skabe problemer med deling af personfølsomme data og stalking. Men der er også skabt en masse nyt, som er fulgt med internettet og de sociale medier. Dette “nyt” kalder vi for internet fænomener. For 20 år siden ville ingen kunne forestille sig, at man kunne leve af at lave gratis videoer og lægge dem på internettet. Eksempler kan være:

  • Memes
  • Influencer
  • Spam
  • Shitstorms
  • Trolls
  • YouTuber

Her er en nogle memes fra en konkurrence på IBC Fredericia/Middelfart og Kolding. Eleverne har som altid en god humor 🙂

Link til toppen af siden.

11.2 Færdselsregler på internettet og i de sociale medier

Som alle andre medier kan SoMe både bruges og misbruges. Derfor er det nødvendigt, at vi bruger vores sunde fornuft, når vi bruger SoMe. Med SoMe kan budskaber af enhver art spredes hurtigere end lyden og nå alle afkroge af verden på meget kort tid. Tag f.eks. Donald Trump. Vha. Twitter kan han sprede budskaber på sekunder til hele verden.

Link til toppen af siden.

Eksempel 1. En saudiarabisk kvinde redder sig selv

I Saudi-Arabien har man meget strenge love for, hvad kvinder må. Det er først for nylig, at kvinder f.eks. må køre bil. Kvinder skal stadigvæk gå tildækket i det offentlige rum, og de skal følges med en mand. Dødsstraf ved halshugning er helt almindeligt i Saudi Arabien.

En saudiarabisk teenager stod til at skulle giftes mod hendes vilje. Hun var ud af en rig familie, så hun stak af med et fly til Australien i 2019. Flyet mellemlandede i Bangkok, og her fangede de saudiske myndigheder hende med henblik på at sende hende retur til Saudi-Arabien. De låste hende inde på et hotelværelse, men de glemte at tage mobiltelefonen fra hende. Hun delte billeder af sig selv og sin situation, og snart kende hele verden hendes situation. Det endte med, at de thailandske myndigheder befriede hende (selvom de havde sagt god for, at saudierne spærrede hende i første omgang. I dag har hun politisk asyl i Canada.

Læs gerne selv om historien f.eks. på https://www.dr.dk/nyheder/udland/canada-giver-asyl-til-saudiarabisk-teenager-pa-flugt.

Link til toppen af siden.

Eksempel 2. Umbrella-sagen

En pige på 15 fra det nordlige København havde sex med en jævnaldrende ung mand. Samlejet var frivilligt, og hun sagde også god for, at hun blev filmet samtidig af mandens kammerater. Det sidste skulle hun nok ikke have sagt god for. Videoen blev delt og i løbet af kort tid havde rigtigt mange, især unge, set videoen.

De medvirkende i sexvideoen var 15 år, da optagelserne blev lavet. Selv om man lovligt kan have sex, fra man er fyldt 15 år, forbyder straffeloven besiddelse og deling af foto og video af personer under 18 år, hvis der er et seksuelt indhold.

Det betyder, at de unge, der har delt videoen, kan dømmes efter straffelovens paragraf 235. Den handler om udbredelse af børnepornografisk materiale. Det kan koste bøde eller fængsel indtil to år. Under særligt skærpende omstændigheder fængsel indtil seks år. Hvis man dømmes efter paragraf 235, kommer det til at fremgå af børneattesten og kan komme til at stå på straffeattesten. Man kan også få problemer ved indrejse til USA. Flere end 1.000 unge er sigtet for at have besiddet videoen.

Link til toppen af siden.

11.3 IT systemer i organisationer

Det er helt sikkert ingen overraskelse for dig, at man anvender IT massivt overalt. Tænk på dig selv, hvordan ville din hverdag se ud, hvis du kun brugte blyant/kuglepen og paper, at mobiltelefonen ikke fandtes og at telefonen i øvrigt kun kunne bruges til at ringe med.

Selvom der findes mange IT systemer, er processen med at digitalisere organisationer langt fra færdig. Snarere tværtimod. Vi har mange systemer, men det kniber ofte med at få systemerne til at arbejde sammen på tværs.

Her er en kort oversigt over IT systemer, som du bør kende til:

Link til toppen af siden.

Programpakker: Microsoft Office og Adobe

Du kender allerede Microsoft Office-pakken. Den hedder “Office” pakken, fordi programmerne dækker typiske kontor-funktioner. Her er en kort oversigt. Du kender helt sikkert allerede Word, Excel og PowerPoint, men der er også andre programmer, som hører til pakken.

Der findes gratis alternativer til Microsoft Office, f.eks. har Google en online kontor-pakke med bl.a. Google Docs.

PROGRAMANVENDELSE
WordTekstbehandling: Breve og rapporter
ExcelLivsnødvendigt, hvis man bare har lært at stave til “ø-k-o-n-o-m-i”
PowerPointPræsentationsprogram
OutlookProgram til ikke kun mail, men også styring af kalendre, aftaler, opgaver o.lign.
OneNoteForholdsvis nyt program til notater. Findes i en officeudgave og en webudgave. Begge dele er gratus, Betalingsudgaven virker ikke på Mac, så derfor bruger vi webudgaven. OneNote er ualmindelig velegnet til at samarbejde over nettet. OneNote er gratis
AccessDatabaseprogram
TeamsProgram til online samarbejde og online undervisning
OnedriveDen server, som Microsoft bruger til at hoste deres løsninger på.

Adobe er lige så dominerende inden for den “kreative” verden, som Microsoft er inden for kontorpakker. Vi taler her om f.eks. billedbehandling, redigering af film, “after effects” i film, brochurer, hjemmesider og lignende. Mest kendt er Adobe Photoshop. Adobes programpakke hedder “Adobe Creative Suite”. Ud over Photoshop finder du f.eks. Illustrator, Dreamweaver, InDesign og andre.

Du kender nok også Adobe Reader, som kan læse og skabe .pdf dokumenter. Når først man har “udskrevet” et dokument i .pdf formatet, så er det svært at lave om på dokumentet igen. Pdf formatet er derfor meget anvendt, hvis man f.eks. laver kontrakter, sender ansøgninger eller f.eks. skal have en bog i trykken. Du kan læse .pdf formatet med gratis programmet Adobe Reader, men du kan også læse det i en browser. Kik selv på deres underholdende præsentation, den signalerer i den grad “kreativitet” :-).

Både Microsoft og Adobe prøver at flytte programmerne online.

Link til toppen af siden.

CMS systemer

CMS står for “Content Management Systems”. Jeg kalder det for “C(k)unden Må Selv”. Det bruges til at styre layout og indhold på en hjemmeside. Typisk logger man ind på systemet online, og kan herfra styre alt indhold og layout. Hele humlen ved systemerne er, at personer helt uden kendskab til hjemmeside-kodning kan varetage alt daglig vedligehold og opdateringer på en hjemmeside.

Du vil i kurset her smage på CMS systemet WordPress, som er verdens mest anvendte til små og mellemstore hjemmesider og blogs. Du kan endda lave webshops i WordPress. WordPress er gratis. CMS findes dog også som betalingssystem, hvor det f.eks. integrerer med ERP systemer (se næste afsnit).

Link til toppen af siden.

11.4 Købeloven

Købeloven er en lov, der regulerer køb og salg i Danmark. Her er et par eksempler fra forbrugerstyrelsens hjemmeside www.forbrug.dk

  • Reglerne beskytter forbrugeren ved køb af varer 
  • Købeloven indeholder nogle grundlæggende principper, som giver forbrugeren og virksomheden visse rettigheder og pligter 
  • Tjenesteydelser som fx fitnessabonnementer og flytning er ikke omfattet af købeloven
  • Forbrugeren har blandt andet to års reklamationsret ved fejl på varen 
  • Er virksomheden ansvarlig for fejlen på varen, har forbrugeren mulighed for at vælge mellem forskellige løsninger. Blandt valgmulighederne er fx reparation eller afslag i prisen
  • I forbrugerkøb kan forbrugeren som udgangspunkt ikke stilles i en dårligere situation, end købeloven dikterer. Der kan dog godt indgås aftaler, som stiller forbrugeren bedre

Gode råd:

  • En mangel efter købeloven er ikke kun en egentlig fejl. Det kan også være, at varen ikke kan det, du er blevet lovet.
  • Du har altid to års reklamationsret. Det betyder, at du har ret til at klage til butikken over fejl og mangler ved varen i to år.
  • Hvis varen har en fejl eller mangel, har du ret til at få den repareret eller byttet til en ny. I nogle tilfælde kan du få pengene tilbage eller et afslag i prisen.
  • Butikken må kun forsøge at reparere eller bytte din vare nogle få gange – typisk en eller to. Derefter kan du få dine penge igen

Faktaboks: Apple og den danske købelov

Apple sælger som bekendt elektronisk udstyr, som er meget populært. Iphones, Mac osv. I USA kan man købe en tillægsforsikring, som giver reklamationsret i et år. Det var helt naturligt for Apple at sælge disse forsikringer i Danmark. Men – den rettighed har man i forvejen som forbruger i Danmark. så for den danske forbruger var det overflødigt at købe en sådan forsikring. Det klagede en kunde over, og Apple blev tvunget til at betale pengene tilbage.

Købeloven er meget forskellig fra land til land. I USA er f.eks. dørsalg tilladt, det er det ikke i Danmark. Hvis nogen ringer og tilbyder dig at købe grøn strøm, eller du bliver antastet af en sælger på gaden, så er det ulovligt. Det er dog ikke ulovligt at sælge avis abonnementer over telefon, og det er heller ikke ulovligt hvis en mellemfolkelig organisation som Amnesty International antaster dig på gaden.

Det siges, at advokaterne står i kø i USA, når folk kommer retur efter krydstogter. Hvis folk har noget at klage over i forhold til deres køb af krydstogt, så fører advokaterne gerne sagen gratis mod, at man deler erstatningen.

Link til toppen af siden.

11.5 Særlige regler ved køb på internettet

Det lyder måske mærkeligt, men du er faktisk bedre beskyttet som forbruger ved køb på internettet end ved køb i en fysisk butik.

Køber du en vare over internettet, kan du ikke mærke på varen eller prøve den, før du betaler. Derfor har du mulighed for at fortryde dit køb i op til 14 dage efter, du har modtaget varen. Fortrydelsesretten gælder dog ikke alle varer og situationer.

Din fortrydelsesret på 14 dage gælder, når du handler i danske netbutikker eller webbutikker i et andet EU-land.

Handler du udenfor EU, kan du ikke gå ud fra, at du har ret til at fortryde dit køb.

Fortrydelsesretten gælder de fleste varer, du køber online i EU. Du kan dog ikke fortryde disse varer:

  • Flybilletter, pakkerejser og billetter til kulturarrangementer
  • Mad
  • Billeje, hotelophold og leje af sommerhus
  • Speciallavede varer, der er lavet særligt til dig
  • Forseglingen på cd’er, dvd’er og software må ikke være brudt – så mister du også din fortrydelsesret.
  • Dele af dit køb kan du kun fortryde, hvis det står i betingelserne for dit køb. I det tilfælde skal du have tilbagebetalt beløbet for den del af købet, du fortryder.

Fortrydelsesret er ikke det samme som reklamationsret. Du kan stadig klage over dit køb, hvis det går i stykker.

Du skal selv betale, hvis du vil sende din vare retur.

Faktaboks: Corona og flybilletter

Det er sådan, at en forbruger har ret til at få pengene retur eller en passende kompensation, hvis en flyafgang aflyses. Det giver god fornuft, at en forbruger f.eks. kan tilbydes f.eks. en hotelovernatning og at rejse med et fly dagen efter i stedet for. Men under corona er mange flyafgange og charterophold aflyst.

Der er i Danmark mange eksempler på, at flyselskaber og rejsearrangører er meget langsomme med at betale pengene tilbage for aflyste rejser. Nogle har forsøgt at omgå loven ved i stedet at udstede vouchers (værdibeviser). Men der er ikke noget at komme efter, købeloven siger, at forbrugeren skal have pengene retur.

Link til toppen af siden.

Kapitel 12. Sikkerhed og kryptering

Sikkerhed og kryptering har været et emne siden romerriget og sikkert før den tid også. De romerske hære sendte vigtige beskeder krypteret, for sæt nu, at fjenden opfattede deres taktik for slaget.

Internettet er super udbredt. Når så mange mennesker bruger det, så vil der næsten automatisk opstå nogle problemer med sikkerhed. Kapitlet her handler om, hvordan man kan gribe det an.

90% af alle problemer med IT-sikkerhed er en “fejl 40”. En fejl 40 er en fejl, der begås af en person, der sidder 40 cm bag skærmen. Menneskelige fejl er ansvarlige for 90% af alle sikkerhedsproblemer med IT. Brug altid din sunde fornuft, når du arbejder med IT og surfer.

Link til toppen af siden.

12.1 Privat sikkerhed

Rigtige mænd tager aldrig backup. Rigtige mænd græder tit

Ovenstående er et ret brugt citat inden for IT-sikkerhed. Du kan gøre meget selv for at øge sikkerheden. Her er nogle forslag:

  • Tag backup en gang imellem af dine filer, gerne i “skyen”
    • Computere har en 6. sans for at bryde sammen, dagen før man skal til eksamen eller aflevere en stor opgave. Laver du opgaver/læser til eksamen, så tag ofte backup
  • Opdater altid dine enheder
  • Beskyt dig med firewalls og antivirus-programmer
  • Brug stærke kodeord. Dvs. gerne kodeord, der er
    • … lange
    • … som aldrig er éns
    • … bruger både store og små bogstaver, tal og måske specialtegn: “JegErKonge” er et dårligt password. “!AGF/er#Altid=Nr1” er et meget stærkt password på flere måder 🙂
  • Gem dine kodeord et sikkert sted
  • Tænk dig om, når du svarer en mail (phishing). Tjek altid afsenderens email. Hvis der står “Penge tilbage skat insert kreditkort”, og afsenderen er “john@23idiot34.com”, så er der nok noget galt. Især hvis der er oplagte stavefejl, svindlerne bruger tit Google Translate
  • Åben og del aldrig materiale eller video, der har karakter af privat porno. Du kan blive straffet hårdt for det
  • Brug sikrede trådløse netværk
  • Beskyt dig mod at blive sporet gennem cookies, brug private browsing og undgå Chrome. se afsnit 8.3 Beskyt dig mod cookies
  • Få repareret din computer på et godkendt værksted
  • Afgiv ikke private oplysninger til hvem som helst
  • Installer ikke piratkopier af noget som helst. Du risikerer malware (= uønskede programmer)
  • Pas på, når du indtaster bankoplysninger og når du bruger NemID, mere om det i næste afsnit
  • Hvis du opretter en profil. Lad være med at bruge Facebook-login, Google-login eller lignende, lav en selvstændig profil. Ellers kan de samkøre dine data. Her et eksempel fra tjenesten GoMore, der er verdens største platform til formidling udlejning af private biler. Jeg har sat et stort, fedt, rødt kryds over de logins, du ikke skal bruge. Bemærk: Det er ok at bruge f.eks. NemID til login.

Læs evt. selv mere hos Rådet for digital sikkerhed, https://www.digitalsikkerhed.dk/. Du kan ligeledes læse om digitalt selvforsvar for dig som person hos https://sikkerdigital.dk/borger/.

Link til toppen af siden.

VPN er meget sikkert

 VPN (virtuelt privat netværk) gør din internetforbindelse ”usynlig”, så den ikke kan overvåges af andre, uanset hvor du logger dig på. Du, eller nogen du kender, har måske allerede stiftet bekendtskab med VPN i forbindelse med at få adgang til dansk tv-indhold på ferien i udlandet.

Forbindelsen kan dog også bruges, hvis du ikke vil have, at din aktivitet på nettet skal kunne spores. VPN er forholdsvist nemt at bruge for både private og virksomheder og effektivt til flere formål.

 VPN-forbindelsen kan også snyde hjemmesider til at tro, at du befinder dig i et andet land, end du reelt gør. Det foregår ved, at din IP-adresse kamufleres. Alle enheder koblet til nettet er udstyret med en IP-adresse, og den kan groft sagt sammenlignes med nummerpladen på en bil. Via en VPN-forbindelse kan du fifle med ”nummerpladen”, og du kan vælge, at det skal se ud som om, din pc eller mobil befinder sig i eksempelvis USA eller England.

VPN er ulovligt i nogle lande, hvis det bruges til ulovlige formål. I Danmark er det fuldt lovligt.

Link til toppen af siden.

12.2 Tor browseren og det mørke net

Tor står for “The Onion Router”. Tor gør alt, hvad de kan, for at skjule din færden for nysgerrige. Der foregår meget kryptering i Tor, og det foregår i “lag” dvs. lige som et løg. Tor prøver at fjerne de oplysninger, som andre kan bruge til at lære mere om dig, og det kan gøre browseren lidt langsommere end ellers. Tor er IKKE en VPN forbindelse, så den er ikke en total beskyttelse mod nysgerrige. Tor er i øvrigt en modificeret udgave af Firefox.

Link til toppen af siden.

Forskel på the dybe net og det mørke net

Man kan sige, at internettet er som et isbjerg. De hjemmesider, som f.eks. Google kan finde, er kun toppen af isbjerget. Der er masser af andre hjemmesider, som Google ikke kan finde.

Men: Der er et hjørne af det dybe net, som er skummelt. Det er det mørke net. Det kan være hjemmesider for kriminelle, hvor du kan køber alt fra børneprostituerede over hælervarer, våben og lejemordere til terrorisme og narko. Det skal siges, at det mørke net ikke kun bruges af kriminelle. Aktivister bruger også det mørke net. Folk, som ønsker en hjemmeside mod Burmas militærdiktatur eller kinesisk, statslig overvågning, bruger nok også det mørke net for at skjule deres aktiviteter for deres modstandere.

Alle hjemmesider som søgemaskinerne ikke kan finde er med i det dybe net. Hvis du har en nyoprettet hjemmeside, som søgemaskinerne endnu ikke kan finde, så er hjemmesiden en del af det dybe net. Det er der ikke noget mærkeligt eller fordækt i.

Browseren Tor giver adgang til (noget af ) det dybe net

Gennem Tor og deres søgemaskine DuckGoDuck kan du få adgang til disse sites. Forskellen på DuckGoDuck og næsten alle andre søgemaskiner er, at du kan søge på sites, der med endelsen “.onion”. (lige som www.dr.dk ender på “.dk”). Mange af de skumle sider hedder noget med “.onion”. Siderne lever typisk kort tid (indtil politiet finder dem) og har svære adresser, f.eks. “sd34szqw..onion”. Der er dog sympatiske tundtagelser. F.eks. er der en whistleblower-side, hvor det giver god mening, at man kan forblive anonyme. Hvis jeg boede i Syrien og kæmpede mod diktatoren Assad, så ville jeg klart foretrække at være anonym.

Tor og DuckGoDuck er ikke ulovlige i sig selv overhovedet, snarere tværtimod. Jeg bruger dem selv, fordi jeg er træt af, at Google altid lurer på mig enten gennem søgemaskinen, cookies eller deres ellers udmærkede browser Chrome. Tor og DuckGoDuck tilbyder modsat de andre en indgang til virkeligt skumle hjemmesider. Alene det at besøge disse sider kan bringe dig i politiets og efterretningsvæseners søgelys, selvom du “bare” er turist. Her er en guide, men pas virkeligt på med, hvad du klikker dig ind på: https://www.webhostingsecretrevealed.net/blog/security/dark-web-websites-onion-links/

Kilde om Tor browseren: https://da.vpnmentor.com/blog/tor-browser-hvad-er-det-hvordan-fungerer-det-og-hvordan-forholder-det-sig-til-brugen-af-en-vpn/

Link til toppen af siden.

Marianas web: Det dybeste dybe eller løse rygter?

Marianas web er opkaldt efter det dybeste sted på jorden: Marianergraven. Ud for Marianerøerne i det østlige Stillehav findes et sted, hvor havdybden er over 11.000 meter.

Der er nogle rygter om, at der findes et virkeligt mørkt mørkt sted på internettet, Marianas web. Ingen ved rigtigt, om det findes, eller hvordan man kommer på det. Men hvis du har lyst, så se videoen her, som fortæller lidt om rygterne. Jeg tillader mig at være lidt skeptisk her :-).

Link til toppen af siden.

12.3 Sikkerhed i virksomheder

De regler, der gælder for dig som privatperson, gælder også i virksomheder. Problemet her er, at brud på sikkerheden kan få kæmpe konsekvenser, og der er grund til at tage IT-sikkerhed alvorligt.

Faktaboks. Mærsk blev hacket

Hackerangreb kostede Mærsk over en milliard kroner. Det store hackerangreb, der skabte ravage i Mærsks operationer i juni og juli, blev en dyr fornøjelse. Rusland stod bag det store hackerangreb, der i sommeren 2017 ramte virksomheder verden over, deriblandt A.P. Møller

Med GDPR lovgivningen har mange virksomheder fået regler for, hvordan man skal behandle personfølsomme data. Skoler, Kommuner, Staten, pensionsselsaber mv. håndterer alle store mængder personfølsom data. Hvis de svigter deres opgave, kan de blive straffet. Repeter evt. kapitel 9 om GDPR.

Men selv med trusler fra statsbetalte hackere, så er den vigtigste kilde til sikkerhedsproblemer inden for IT stadigvæk mennesker og almindelig ubetænksomhed.

Link til toppen af siden.

12.4 Mono-alfabetisk eller Cæsar kryptering

Som nævnt sendte selv romerne krypterede beskeder. En af de mest simple måder at kryptere på kaldes Cæsar kryptering, og metoden blev faktisk brugt i Romerriget. Man forskyder alle bogstaver et antal trin i en retning. Her har jeg forskudt alfabetet 3 trin mod højre:

Julius Cæsar, som han måske så ud. Måneden “juli” er i øvrigt opkaldt efter ham

God huskeregel:

  • Når du KRYPTERER, går du NED i tabellen
  • Når du DEKRYPTERER, skal du OP-klare noget, så her går du OP i tabellen

Link til toppen af siden.

Et eksempel på mono-alfabetisk kryptering

  • Jeg vil kryptere ordet “Frokost”
  • Jeg vil bruge en nøgle, roterer nøglen 2 trin mod venstre. A bliver til C osv.
  • Så ser min nøgle ud som vist her
  • Så laver du krypteringen. “Frokost” bliver til “Htqmquv”

Link til toppen af siden.

12.5 Polyalfabetisk kryptering

Mono-alfabetisk kryptering er desværre nem at gætte. Så derfor har man videreudviklet metoden. Hvis man nu har i stedet for kun at lave en nøgle (en = “mono”) så brugte flere nøgler. Så fik man en langt stærkere kode. Her er en tabel til polyalfabetisk kryptering

Tabel til polyalfabetisk kryptering

Eksempel på poly-alfabetisk kryptering. Dvs. vi går NED i tabellen når vi vil kryptere

  • Tag en sætning: “Informatik” er let (undgå her æ, ø og å)
  • Vedtag en nøgle: F.eks. 3-10-4 (som gentages)
  • Jeg vil kryptere sætningen “Informatik er super”
    • Øverst find bogstav “I” og til venstre find tallet “3”. De mødes i bogstav “K”
    • Find så bogstav “n” øverst og til venstre find tallet “10”. De mødes i bogstav “w”
    • Find bogstav “f” øverste og til venstre find tallet “4”. De mødes i bogstav “i”
    • … sådan fortsætter du
    • … og får til sidst sætningen “Kwiqxuojwkt ht vhv”

Link til toppen af siden.

Eksempel på poly-alfabetisk dekryptering = vi OP-klarer/dekrypterer, vi går OP i tabellen

Her er en sætning som er krypteret med koden 5-12-2: “ERG ztoipt wycve iywe … llbjos nph”

  • Under tallet 5 find bogstav E. Gå op øverst og find bogstavet over E = “A”
  • Under tallet 12 find bogstav R. Gå op øverst og find bogstavet over R =”G”
  • Under tallet 2 find bogstav G. Gå op øverst og find bogstavet over G = “F”
  • Under tallet 5 find bogstav z. Gå op øverst og find bogstavet over z = “v”
  • … fortsæt til du kan danne sætningen: “AGF vinder snart guld – håber jeg”

Hvis du foretrækker video i forhold til kryptering, så har jeg lavet en video her:

Bemærk: Æ skrives “ae”, ø skrives “oe” og å skrives “aa”.

Link til toppen af siden.

12.6 Kryptering på nettet TLS/SSL, http og https

På nettet foregår der massiv kryptering. Det gælder ikke kun hos CIA eller andre efterretningsvæsner, det gælder også for dig som daglig bruger af internettet

TLS “Transport Layer Security” SSL eller “Secure Sockets Layer” er måder at sikre sine data over internettet, ved brug af kryptering og scrambling af data. Hvis du skal på netbank, hvis du skal købe noget over nettet eller noget helt tredie som kræver at visse oplysninger forbliver hemmelige, bruger man det der hedder en TLS/SSL forbindelse. Dette betyder at der bliver oprettet en sikker forbindelse mellem to enheder og at det kun er de to enheder der kan læse og forstå den data der bliver sendt på den forbindelse.

  • Hvis der står “https” foran URL’en, så foregår al trafik til og fra siden krypteret over TSL eller SSL. Der er ofte en hængelås foran URL’en
  • Hvis der står “http” uden “s” foran URL’en, så er trafikken ikke sikker

Http står for “Hyper Text Transfer Protocol” og https står for “Hypertext Transfer Protocol Secure”.

IKEAS hjemmeside og webshop starter selvfølgelig med https, og der er en hængelås foran

Afgiv aldrig oplysninger som NemID og Kreditkotoplysninger til hjemmesider, der ikke starter med html. På webshops kan du også kikke efter e-mærket. E-mærket er en dansk certificeringsordning for webshops. https://www.emaerket.dk/.

Link til toppen af siden.

12.7 Bitcoins

Kryptovaluta er forholdsvis nyt, og kryptovalutaer vinder frem som betalingsmiddel. De vigtigste kryptovalutaer er allerede ret meget værd.

Til sammenligning var Vestas børsværdi i 2020 på ca. 300 mia og Legos tilsvarende værdi på ca. 115 mia.

Kryptovaluta eksisterer uafhængigt af nationalbanker, og de kan bruges på tværs af landegrænser. Nogle spår en fremtid uden almindelige valutaer. Især fordi kryptovalutaer ikke kan styres af stater og fordi der ingen vekslingsgebyrer findes.

Lad os tage en almindelig valuta, f.eks. den danske krone, euroen eller dollaren. Her styrer centralbanken alt mht. valutaen. I Danmark hedder centralbanken “Nationalbanken”. Der er strenge straffe for falskmøntneri. Dvs. folk, der forsøger at lave deres egne kopier af valutaen. Til gengæld passer centralbankerne på valutaen, så vi trygt kan anvende den i vores hverdag. Du lærer meget mere om almindelig valuta i faget international økonomi under emnet pengepolitik.

Nationalbanken tjente milliarder på kronekrigen
Nationalbanken ligger lige over for folketinget midt i København. Den ligner et befæstet fort og med god grund, for de skal passe godt på den danske valuta.

Tilbage til kryptovalutaer. De er lige omvendt. Alle kan lave sin egen kryptovaluta og de mest populære kryptovalutaer baseres alle på peer-to-peer netværk. Dvs. decentrale netværk, som ingen bestemmer over.

FordeleUlemper
  • Uafhængig valuta
  • Kan være mere værdisikker end inflatonshærgede valutaer. F.eks. i Tyrkiet
  • Flyver under radaren i forhold til skat og andre myndigheder, derfor populær blandt kriminelle
  • Ingen vekslingsgebyrer eller gebyrer på betaling med kort
  • Især bitcoins kan svinge enormt i værdi
  • Kan vi stole på den
  • Hvor udbredt er den, f.eks. har Tesla og den kinesiske stat lukket for betaling med bitcoins. Til gengæld har El Salvador åbnet for bitcoins

Link til toppen af siden.

15.8 Bitcoins baserer sig på blockchain-teknologien

For at forstå bitcoins skal du forstå, hvad blockchains er for noget.

Den efterfølgende tekst er hentet primært fra https://da.wikipedia.org/wiki/Blockchain.

Blockchain er en voksende kæde af datablokke. Hver blok indeholder typisk en kryptografisk (dvs. krypteret) henvisning til den forudgående blok, et tidsstempel og et antal transaktioner.

Kernen i blockchains er, at de er designet til at gøre det meget vanskeligt at ændre tidligere transaktioner. Funktionelt kan en blockchain ses som en åben distribueret journal, som kan registrere transaktioner mellem to parter på en effektiv og verificerbar måde.

Når en transaktion først er registreret i en blok, kan ændringer kun gennemføres ved også at ændre alle efterfølgende blokke i samarbejde med hovedparten af det netværk, som driver den givne blockchain.

Man kan sige, at en blockchain fungerer lidt som en gammeldags bankbog. Når man laver en transaktion, så registreres det mange steder i systemet. Man kan ikke lave en tidligere transaktion om, uden at man ændrer mange andre steder også.

En bankbog fra tiden før dankort, mobilepay og kryptovalutaer

Stille og roligt kommer der flere og flere blokke til i forhold til den kæde, som blokken deltager i. Jo flere blokke i kæden, jo sværere er det at lave om på data. F.eks. hvis man vil snyde. Man kan godt lave om, men de andre deltagere i kæden skal acceptere det.

Link til toppen af siden.

15.9 Nøglebegreber inden for blockchain-teknologien

Adresse

Alle blokke har en adresse, og adressen er krypteret. En bloks adresse er altid krypteret, og man anvender hash-code. Hash bruger primtal til krypteringen, men det skal du ikke tænke på :-).

Link til toppen af siden.

Blok

En blok er en samling data, som normalt som minimum vil indeholde:

  • Et tidsstempel for hvornår blokken blev skabt.
  • En henvisning til den foregående blok (sammenkædning). Dette vil ofte være et sekvensnummer (også kaldet ‘højde’) sammen med hashværdien for den foregående blok.
  • Data i form af transaktioner. Det kunne være her, at man f.eks. indsatte data for brug, lige som med en gammeldags bankbog. Se forrige afsnit.

Ofte vil en blok også indeholde en hashværdi for blokken selv, som sikrer at data ikke er forvansket. Den første blok i en kæde kunne se sådan her ud.

Link til toppen af siden.

Hash-kryptering

Du skal nok først vænne dig til, at hash her intet har at gøre med euforiserende stoffer. Inden for kodning bruger vi kryptering med hash-kodning igen og igen. Det lærer du meget mere om på datalogi på universitetet, hvis du går den vej.

Men du er velkommen til at prøve at hash’e almindelig tekst her: https://www.tools4noobs.com/online_tools/hash/. Prøv at skrive f.eks. dit fornavn og se, hvor kompliceret resultatet er.

Link til toppen af siden.

Minedrift

Den gode nyhed er: Alle kan lave deres egne bitcoins. Lige som enhver må tage en skovl og grave efter guld. Så sammenligningen med minedrift er ikke helt tosset. Den dårlige nyhed er: At fremstille en bitcoin er det samme som at løse et meget svært regnestykke, og det kræver enormt meget datakraft at lave en bitcoin. Med god grund, man vil jo sikre sig imod falske bitcoins. Bitcoins er lavet sådan, at der maks kan fremstilles 21 mio. bitcoins. Vi er efterhånden oppe på 18,6 mio, og de bliver sværere og sværere at fremstille.

Link til toppen af siden.

Transaktion

Hvis man betaler med bitcoins, så laver man en transaktion. Det tager op til 10 minutter at gennemføre en transaktion, fordi hele kæden skal opdateres.

Hvis vi f.eks. skriver noget andet i datafeltet og har en anden nounce-værdi, så skal vi optatere hash-værdien. Vores datablok fra før kunne nu se sådan ud:

Link til toppen af siden.

Kapitel 13. Arkitektur i programmer og databaser

Susanne Sulten og Arne Appeltit går på restaurant “Mad & Mæt”. Under måltidet betjener en høflig og velklædt tjener dem. De afgiver en ordre, og tjeneren går ud med ordren i køkkenet. Susanne og Arne har ikke adgang til køkkenet. Når dagen er slut, rydder de op i køkkenet, og “Mæt & Mad” lukker og slukker. Madopskrifter og lager af mad gemmer restauranten et sikkert sted, så det er klart til dagen efter.

99% af alle apps og programmer fungerer på næsten samme måde. De er opdelt i 3 ret adskilte lag:

  • Frontend eller præsentationslaget.
  • Backend eller forretningslaget
  • Databasen eller datalaget

Brugerne ser programmet i frontend eller præsentationslaget. Det svarer til det område, hvor kunderne kommer i restauranten. Det skal være så præsentabelt og indbydende som muligt

Når hjemmesidens brugere klikker på noget, så aktiverer klikket kodning i backend eller forretningslaget. Det svarer til, at tjeneren modtager bestilling på mad og afleverer den ude i køkkenet. Vi vil ikke have brugerne ind i backend, og vi vil heller ikke have restaurantens gæster ud i køkkenet

Vi kan godt gemme ting midlertidigt i både frontend og backend i f.eks. variable og cookies.

Men udgangspunktet er, at når vi slukker programmet, så slukker vi også for hukommelsen, og variablene slettes. Heldigvis har vi datalaget eller databasen. Her kan vi gemme oplysninger, f.eks. om kunder. Vi kan hente oplysningerne frem igen, selvom programmet har været slukket i et stykke tid. I restauranten gemmer vi opskrifter på nettet og har madvarer på frost, hvor de kan være gemt i lang tid

I figuren kan du se, hvordan lagene arbejder sammen. Frontend snakker med backend, der om nødvendigt henter ting ud af databasen og viser det til brugeren i frontend. Den stiplede linje viser, at vi kun vil have kunderne ind i frontend-området.

Model over, hvordan et program er bygget op

Hvis vi sætter det op i en tabel, ser det sådan ud. Jeg har tilladt mig at skrive nogle af de kodesprog på, som anvendes i laget.

LAGBRUGES TILKODESPROGHVIS DET VAR EN RESTAURANT
FrontendPræsentationslag, ses af brugerneKun html, php og javaScript. Ingen andre sprog kan tolkes direkte i en browserKundeområdet
BackendForretningslogikken. Styre programmet og afvikler ordrer fra brugerne i frontend. Ingen adgang for kunderMest php og C# til hjemmesider, men også sprog som java, asp, vb.net m.fl.Køkkenet, hvor retterne laves,
DatabaseGemmer data, så de også er der efter, at programmet er slukket. Vi gemmer næsten alle data i tabeller lidt som i ExcelMySQL, hvis man skriver PHP. Ellers SQL ved C#Det, vi gemmer, når personalet lukker restauranten. Madvarer, opskrifter mv.
Oversigt over de forskellige lag

Link til toppen af siden.

13.1 Et eksempel: Facebook

Et kik på Facebooks forside kan hurtigt forklare, hvad jeg mener.

Når vi ser Facebook, genkender vi hurtigt de mørkeblå og hvide farver. Det, vi ser, er selvfølgelig frontend. Hvis vi kikker op i højre hjørne, kan jeg logge ind med mit brugernavn og password. Hvis jeg indtaster brugernavn og password, overføres det indtastede til backend. Backend spørger videre ned i databasen, som jo har en oversigt over alle brugernavne og password på alle profiler i hele verden. Hvis jeg taster rigtigt, bliver jeg logget ind på min profil, ellers ikke.

Alt hvad jeg skaber på Facebook, fra tekst over billeder, videoer, likes …, alt bliver gemt i databasen. Hvis du begynder at tænke lidt over, hvor meget lagerplads Facebook har brug for, så er svaret: “Meget”.

Hvis du kan se et program/en app, så er der et frontend lag. Hvis du kan udføre noget i frontend, så har vi et backend lag. Hvis programmet kan huske noget fra sidst, du brugte programmet, så har programmet en database.

Link til toppen af siden.

13.2 Databaser

Hvad er en database? Det kan siges meget simpelt: En database er intet andet end en tabel.

Tabellen kan være opbygget på mange indviklede måder, og man kan dele tabellen op, hvis man vil. Men i bund og grund er en database bare en tabel og intet andet.Li

Link til toppen af siden.

Et eksempel: Niels Ny skifter skole

Niels Ny skifter til i en HHX klasse midt i skoleåret. Det er en ret stor klasse. Fagene, især informatik, er super interessante, lærerne er gode, de andre elever er flinke og han bliver allerede den første dag inviteret med til en klassefest.

Han synes oven i købet, at der findes nogle særdeles søde piger på skolen. Niels er ikke verdensmester i navne, så han skriver følgende ned på en serviet om 2 af de sødeste.

NAVNHÅRFARVEØVRIGT
LeneRødLIlle, går i smart tøj, dyrker fitness
LoneBrunHøj, går i joggingtøj, kan lide at gå på café

Har Niels Ny en database? Stort JA, Niels Ny har en lille men fuldt gyldig database.

Link til toppen af siden.

13.3 Normalisering

Niels Ny’s database er udmærket, og den fungerer fint for ham. I hvert fald indtil han har flere Lener og Loner på listen og ikke kan kende forskel.

For at vi kan arbejde professionelt med databaser, er vi nødt til gøre nogle ting ved dem. Denne proces kalder man for “normalisering. Jeg vil kort beskrive de vigtigste her. Bemærk, at du skal gøre dem i rækkefølge, og du må ikke starte på trin 2, før trin 1 er færdig. Du må heller ikke starte på trin 3, før trin 2 er færdig osv. Det kan vises sådan her:

Trin 1. Primærnøgler

Primærnøgler er et godt sted at starte vores normalisering. Her er en lille kundedatabase.

Vi har 2 kunder, “Kim Kunde” der tilfældigvis hedder det samme. Den ene er alletiders kunde, men den anden skylder os rigtigt mange penge. Vi vil kontakte den dårlige kunde og bede ham om at betale det, han skylder. Men vi skulle jo nødig tage fat i den forkerte.

De hedder det samme, og de kan teoretisk også have samme adresse, postnummer, telefonnummer osv. Så hvad gør vi her? Svaret er: Vi må finde på noget unikt, så vi kan identificere dem hver for sig.

Den danske stat bruger cpr-numre for at identificere danskerne. Men den mulighed har vi ikke altid, så vi tilføjer et kundenummer for hver kunde til vores tabel. Det er sådan set ligegyldigt, hvilke numre eller for den sags skyld bogstaver de enkelte kunder har. Bare hvert enkelt nummer er unikt. Et sådant unikt felt for hver kunde i tabellen kalder man en primærnøgle eller et ID. Jeg tilføjer feltet og sætter det forreste, for er praktisk at have primærnøglen forrest.

Alle registreringer i en database skal altid have en primærnøgle, dvs. noget unikt. Ellers kan vi ikke identificere vores registrering, og så bryder vores database sammen. Hvis vi ikke kan finde noget unikt i det, vi i forvejen har registreret, så må vi selv tilføje noget.

Link til toppen af siden.

Trin 2. Del dine data op

Det er en god ide at dele data op i tabellen. Jo bedre en opdeling, jo nemmere kan vi f.eks. finde og sortere data. Min kundedatabase nedenfor er i forvejen ganske fornuftigt opdelt.

Det ville dog være rart, hvis jeg kunne adskille navnet i fornavn og efternavn. Nyttigt, hvis jeg skal sende en pæn besked til en kunde, så vil jeg gerne kunne nøjes med at hente kundens fornavn fra databasen. Jeg ville også gerne kunne sorter kunder efter først efternavn, så fornavn

Man kan diskutere, om adressen då også skal deles op i vej og vejnummer. I praksis er det nok kun folk, som arbejder med alle adresser i et område, f.eks. postvæsen, elektricitetsforsyning m.v., der har sådan en opdeling.

Link til toppen af siden.

Redundans

Redundans betyder “overflødig”. Så hvis din arbejdsgiver siger til dig, at du er redundant, så står du nok til en fyring.

I databaser kan nogle registreringer være overflødige. Hvis vi kan undgå overflødige registreringer. vil vores database fylder mindre, og at den vil være er lettere at vedligeholde. Når vi arbejder med små databaser som i eksemplerne her, så betyder det ikke så meget. Men databaser kan sagtens runde 100.000 registreringer eller flere og så har det stor betydning. Tænk på, hvor mange registrering der er f.eks. på Netflix’ kundekatalog eller det danske CPR register eller hvis vi skal registrere alle bogføringer i en virksomhed.

Jagten på redundans går ud på at finde et felt, som ikke er uafhængigt. Dvs. et felt, hvor det på en eller anden måde er bestemt på forhånd, hvad der skal stå.

  • Det første felt er kundenummer. Hvis vi ser bort fra, at alle felterne skal have et unikt indhold, så kan vi her skrive, hvad vi har lyst til
  • Det samme gælder fornavn, efternavn, adresse og postnummer. Folks fornavn er uafhængigt af deres efternavn. Rikke Rabat kunne lige så godt hedde Rikke Rasmussen eller Rikke Ling-Hu-Chan. Adressen og postnummeret er også uafhængige felter
  • Feltet by er ikke uafhængigt. Feltet er helt og holdent styret af feltet postnummer. Hvis postnummeret er “6000”, SKAL der stå “Kolding” i feltet by. Der kan ikke stå andet. 6000 Slagelse giver ikke mening, lige så lidt som “4200 Kolding” giver mening

Link til toppen af siden.

Når vi har fundet et afhængigt felt, skal vi dele tabellen op

Vi har nu fundet et felt, “by” der er afhængigt. I tabellen optræder Kolding 3 steder og Fredericia 2 steder. Det kan vi skære ned til, at begge byer kun forekommer 1 gang. Det ser sådan ud:

Nu står byerne Kolding og Fredericia kun nævnt 1 gang.

Overholder den nye tabel så reglerne for tabeller? Den skal jo have en primærnøgle. Det har den, feltet postnummer er unikt og kan fungere som primærnøgle. Samtidig har vi bevaret feltet i den gamle tabel. Når feltet findes i 2 tabeller, så kan vi bruge det ene felt til at slå op i den anden tabel.

  • Når feltet er et unikt felt, der bruges til identifikation, kalder vi det for “primærnøgle”
  • Hvis feltet er unikt, og vi samtidig bruger det til at slå op i en anden tabel, kalder vi det for en “fremmednøgle”. Feltet postnummer i den gamle tabel er en fremmednøgle.
Faktaboks: Byer skifter navneDet sker, at byer ændrer navne. Tit er det for at søge byens rødder, eller måske for at gøre byen lettere at markedsføre i udlandet. Åbenrå er skiftet til Aabenraa, Grenå til Grenaa, Århus til Aarhus, Ålborg til Aalborg og Åkirkeby til Aakirkeby for at nævne nogle.Da f.eks. Århus skiftede til Aarhus, skulle man i databaserne kun ændre byens navn et sted, fordi man selvfølgelig har lavet opsplitningen som vist ovenfor. Der er nok 50.000 mennesker eller flere, der havde postadresse 8000 Århus C.

Link til toppen af siden.

13.4 Flade kontra relationelle databaser

  • Hvis en database kun består af 1 tabel, så har vi en flad database
  • Hvis en database består af 2 eller flere forbundne tabeller, så har vi en relationsdatabase

Relationsdatabaser er den mest almindelige databaseform. Hvis du arbejder i f.eks. et ERP system, kan du være sikker på, at der ligger en relationsdatabase bag.

Link til toppen af siden.

13.5 Hvad er en relation

Når vi laver opsplitninger af databasetabeller, laver vi en relation. Der findes 3 former for relationer :

RELATIONFORKLARING
1-til-11 person “A” er gift med 1 anden person “B”, og “B” kan også kun være gift med en “A”
1-til-mange1 person kan have postadresse på 1 postnummer, men 1 postnummer kan godt have mange personer tilknyttet
mange-til-mange1 vare kan købes af mange kunder, og 1 kunde kan købe mange varer

Relationer

  • Når vi har en 1-til-1 relation, splitter vi ikke tabellen op.
  • Når vi har en 1-til-mange relation, så splitter vi tabellen op som vist
  • Når vi har en mange-til-mange relation, er vi nødt til både at splitte tabellen op, men også at lave en mellemtabel

Store databaser kan være virkeligt komplicerede. For ikke at miste overblikket bruger vi E-R diagrammer til at illustrere dem. I E-R diagrammer viser vi tabeller som kasser og relationer som diamanter.

1-til-1 relation

1-til-mange relation

Mange-til-mange relation

Hvis du skal tegne rutediagrammer, E-R diagrammer og lignende, så anbefaler jeg dig at bruge www.draw.io

Link til toppen af siden.

Kapitel 14. Kodning i databaser: SQL

Vi kan kun 4 ting med en database. Vi kalder det for CRUD:

  • Create: Vi kan skabe nyt indhold i databasen
  • Read: Vi kan læse indhold fra databasen
  • Update: Vi kan opdatere indhold i databasen
  • Delete: Vi kan slette indhold i databasen

Til alt kontakt med databaser bruger vi SQL kode. SQL står for “Structured Query Language”. SQL er et simpelt sprog, som lægger tæt op ad menneskesprog. Næsten uanset hvad du gør med en database, så er der SQL involveret. SQL findes sjovt nok i forskellige “dialekter”, f.eks. MySQL og MS-SQL. “MS” står for “Microsoft”, men kernen i sproget er ens for alle. Lige som der er navneord på både dansk, tysk, engelsk, spansk, russisk, indonesisk, wolof og hvilke sprog vi ellers kan komme på.

Link til toppen af siden.

14.1 Eksempler på SQL kode

Vores 2 tabeller fra før kalder vi nu “Kunder” og “PostnummerBy”:

Her er nogle eksempler på SQL kode

ØNSKESQL KODE
Hent alle data fra tabellen KunderSELECT * FROM Kunder;
Hent alle data i felterne FORNAVN og EFTERNAVN.
Efternavnet skal stå først
SELECT EFTERNAVN, FORNAVN FROM Kunder;
Hent alle data i felterne FORNAVN og EFTERNAVN.
Efternavnet skal stå først, og der skal sorteres efter efternavn
SELECT EFTERNAVN, FORNAVN FROM Kunder
ORDER BY EFTERNAVN;
Hent alle oplysninger om kunder, der hedder “Kim”SELECT * FROM Kunder
WHERE FORNAVN = ‘Kim’;
Hent alle oplysninger fra begge tabellerSELECT * FROM Kunder
INNER JOIN Customers ON Orders.Postnummer=PostnummerBy.Postnummer;

Hvis man skal arbejde med kode, så er W3schools et fantastisk sted at starte. De skriver om mange sprog, de skriver simpelt, og man kan prøve det af. Selvfølgelig har de også noget om SQL. Hvis du vil vide mere om SQL, så hop ind på https://www.w3schools.com. Vi vil senere vende tilbage til W3schools, når vi skal kode html og css.

Nem import af data fra Excel til et databaseprogramExcels format er umuligt at importere i database-programmer, med mindre du arbejder med Access, og Access virker ikke på Mac. Til gengæld kan du Excel gemme din tabel i .csv formatet. Hvis du gemmer dit tabel i Excel (eller fra et andet regneark) i .csv formatet, så kan du importere dine tabeller uden problemer i alle databaseprogrammer, herunder SQLite. Jeg anvender SQLite i opgaverne til lærebogen her.
I SQLite har en import-funktion under File > Import, og andre databaseprogrammer vil typisk have samme muligheder. Det gælder også, hvis du henter en .csv fil med landedata fra Verdensbanken, tal fra Danmarks Statistik eller andet.

Link til toppen af siden.

14.2 Hackning vha. SQL injections

Du ved nu, at man bruger SQL til at hente informationer ud af databaser med. Du ved også, at man kun kan 4 ting med en database: Create, Read, Update og Delete (CRUD).

SQL kommandoen “DROP DATABASE testDB” vil slette hele databasen “testDB”.

Formularer og søgefelter giver brugeren adgang til at arbejde med databasen. Hvis en bruger er ondsindet, kan brugeren forsøge at slette databasen ved at sætte SQL kode ind i et felt. Her har jeg sat kode ind i søgefeltet på hjemmesiden her:

Hvis man ikke passer på, så vil en bruger kunne slette min database på den her måde. Det kaldes SQLInjections, og det er en helt almindelig form for hackning.

Link til toppen af siden.

14.3 Opsummering på databaser

Det meste af det, som du skal kunne omkring databaser, har jeg opsummeret i videoen her. Det gælder emner som:

  • Entiteter og relationer
  • Normalisering
  • Primærnøgler og fremmednøgler
  • Redundans
  • Relationer
  • Basis SQL kode

Her er en video, der opsummerer databaser. Jeg gennemgår alt databaseteori helt forfra. Fra hvad en database er, og til hvordan man kommer frem til en funktionsdygtig database. Jeg gennemgår entiteter, relationer, normalisering, primær- og fremmednøgler, redundans samt relationer. Til sidst viser jeg dig lidt SQL kode, som man bruger til at kommunikere med datbasen med.

Link til toppen af siden.

Kapitel 15. Kodebegreber

I dette kapitel skal du lære at genkende nogle kodebegreber, som optræder i næsten alle kodesprog. Man har begreber som variable, forgrening og betingelser, loops mv. i næsten alle kodesprog. Det svarer fuldstændigt til, at man har navneord, udsagnsord, tillægsord mv. i næsten alle talte sprog som f.eks. dansk, engelsk, tysk, spansk osv.

Alt i alt: Du skal kunne følgende udtryk:

UDTRYKKORT FORKLARING
Variabel En beholder, der kan rumme 1 og kun 1 værdi. Til gengæld kan du skifte indholdet lige så tit, du vil
Sekvens Indholdet er ikke så vigtigt, det vigtige er, at koden afvikles i en bestemt rækkefølge
Forgrening og betingelse Hvis en betingelse er opfyldt, så gør en ting. Ellers gør noget andet. Det er altid en hvis-sætning i koden. På engelsk kalder man det en if-then-else sætning
Arrays og loopsEt array er en række af variable. Et loop er en handling, der udføres igen og igen, indtil man er færdig
Funktioner En stik-i-rend dreng, som man kan kode til at gøre alt muligt
Events og funktioner En event er den begivenhed, der sætter funktionen i gang. F.eks. et klik på en knap
Kommentarer Mennesketekst inde i koden. Kommentarer påvirker ikke resten af koden.

Overblik over kodebegreber, som du skal kunne

Link til toppen af siden.

15.1 Rutediagrammer/flowcharts

Inden vi går i gang med koden, skal du lære rutediagrammer at kende. Rutediagrammer er enkle diagrammer over, hvilke “ruter” der er igennem programmet. De er gode til at skabe overblik, og man kan kode direkte efter et rutediagram. På engelsk hedder et rutediagram et “flowchart”.

Vi vil her arbejde med 5 enkelt elementer til rutediagrammer.

ELEMENTSYMBOLFORKLARING
Start/slutOval
rutediagram start/slut
Skal vise start og slut på den del af programmet, man modellerer. Man behøves ikke at modellerer hele programmet i det samme diagram.
Kommando/handlingFirkant
Rutediagram kommando/handling
Forklarer handlingen/kommandoen. Man kan sagtens have flere handlinger efter hinanden
InputRhompe eller “væltet firkant”
Rutediagram input
Hvis brugeren skal indtaste et eller andet
Forgrening/betingelseDiamant
Rutediagram forgrening/betingelse
Valgmulighed. Det er næsten altid et spørgsmål, som man kan svare ja eller nej til
PilePil
Rutediagram pil
Viser forbindelsen mellem de enkelte elementer

Her er et eksempel på et rutediagram for at logge på Facebook. Du kender det sikkert godt. Vi ser her bort fra muligheden af at have glemt adgangskoden eller oprette ny konto.

  • Start: Brugeren vil logge på Facebook
  • Input: Indtast email eller telefonnummer
  • Input: Indtast password
  • Handling: Log på
  • Forgrening/betingelse: Findes brugeren
    • Handling: Hvis ja log på
    • Handling: Hvis nej nægt adgang, giv brugeren en fejlmeddelese og giv mulighed for at logge på igen
  • Slut

Diagrammet ser sådan her ud. Jeg anbefaler, at du tegner med draw.io, men for overskuelighedens skyld har jeg brugt PowerPoint.

Se gerne videoerne. Elementet til input er dog ikke med i videoerne.

Se et worked example herunder. Jeg har brugt PowerPoint som værktøj i videoen, men jeg anbefaler online tegneværktøjer draw.io. Du bestemmer dog selv, hvilket værktøj, du vil bruge.

Link til toppen af siden.

15.2 Variable

Lær det her: “En variabel er en beholder, der kan rumme 1 og kun 1 værdi”. Til gengæld kan den skiftes ud lige så tit, man vil. Her er et par eksempler:

  • Highscore i et spil
  • Antal liv i et spil
  • Din alder. Den bliver opdateret hvert år på din fødselsdag
  • Målscore, tid, alt muligt inden for sportens verden
  • Priser
  • … osv. osv.

Her er der masser af variable. DeHviii (kælenavn for AGF’s hvidblusede fodboldhold) er foran med 2 – 0 mod Brøndby foran på et ret tavst Brøndby Stadion. Vi har brug for 2 variable: 1 til AGF’s målscore og 1 til Brøndbys. For AGF’s vedkommende har vi allerede ændret variablens indhold 2 gange. Vi har også brug for en variabel til tiden. I øvrigt ender kampen 3 – 0 til DeHviii. Det var en smuk dag den 25. august 2019 :-).

DeHviiii på vej mod deres 3. mål mod Brøndby

Video om variable https://www.youtube.com/embed/ZucokMhvksA?feature=oembed

I AppLab definerer vi en variabel ved at skrive “var” + et navn. Vi sætter den gerne lig værdien af et indtastet felt.

Når først vi har defineret en variabel, kan vi bruge den overalt i vores program. Her er variablene vægt og højde defineret.

Link til toppen af siden.

15.3 Sekvens

En sekvens er en rækkefølge. Det er ikke så vigtigt, hvad sekvensen handler om. Det vigtige er rækkefølgen. Her er Gurli Gymnasieelevs rækkefølge, når hun står op om morgenen:

  1. Slå vækkeuret fra
  2. Gå ud på badeværelset
  3. Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
  4. Gå i bad
  5. Spise morgenmad
  6. Pakke skoletasken
  7. Komme ud af døren
  8. Nå bussen
  9. Tjekke mobilen

Hvad nu, hvis Gurli gør tingene i en anden rækkefølge. Så går det galt!

  1. Tjekke mobilen
  2. Komme ud af døren
  3. Spise morgenmad
  4. Nå bussen
  5. Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
  6. Pakke skoletasken
  7. Gå ud på badeværelset
  8. Slå vækkeuret fra
  9. Gå i bad
Du skal op nu, TineGurli-MagretheIngeborg

I kodning kan en sekvens bestå af alt mulig forskellig kode. Det skal bare gøres i den rigtige rækkefølge. https://www.youtube.com/embed/EpOoWBoXUEQ?feature=oembed

Et eksempel fra AppLab. Der er kun 3 kodelinjer i sekvensen her: De 2 lilla og den gule med setText. Men hvis vi byttede rundt på dem, ville det gå galt. Næsten alle programmer har sekvenser.

Link til toppen af siden.

15.4 Forgrening og betingelse

Forgrening og betingelse er det eneste sted i programmet, hvor man kan tage en beslutning. Hvis en betigelse er opfyldt, så gør …. Ellers gør sådan og sådan …

HVIS … SÅ …. ELLERS SÅ ….

I kodning bruger man en HVIS-sætning. På engelsk kaldes det en IF eller en IF-THEN-ELSE sætning. Et typisk eksempel kunne være, når man logger ind med brugernavn og adgangskode

  1. Indtast dit brugernavn og adgangskode
  2. HVIS (brugernavn og adgangskode er rigtige) SÅ (bliver du logget ind) ELLERS SÅ (prøv igen).

Her er en forklarende video om forgrening og betingelser. https://www.youtube.com/embed/-jKlNQoCeFY?feature=oembed

I AppLab ser man if sætninger som blå kode. Her et eksempel, hvor der er hele 4 muligheder.

Link til toppen af siden.

15.5 Arrays og loops

Array betyder “række”. Det er en række fyldt med variable. Et eksempel: Hvis du vil have en elektronisk huskeseddel, så lav punkterne i et array i stedet for individuelle variable. Det gør det nemmere, når vi skal udskrive huskesedlen. Så vil programmet “loope” igennem huskesedlen og udskrive punkterne et for et, indtil alt er skrevet ud.

Du må gerne tænke på tivolier, når vi snakker loops. Folk står i arrays (rækker, dvs. køer) for at prøve loops. Man kan naturligvis have flere loops i et program lige som på billedet her:

“Dæmonen” i Tivoli i København har flere loops, og folk står i “arrays” for at prøve.

Video om loops og arrays. https://www.youtube.com/embed/JGNtsZwhQ2g?feature=oembed

I AppLab ser det ud som vist nedenfor.

Vi definere et array frem for en variabel ved at skrive en firkantet parentes bagefter som i linje 2.

var huskeseddel = [“müstli”, “mælk”, “rosiner”, “the”];

Her er arrayet allerede udfyldt med 4 variable: “müstli”, “mælk”, “rosiner” og “the”. I linje 3 har jeg en helt almindelig variabel var print = “”. Vi bruger kun firkantede parenteser, når vi laver et array og ikke en variabel.

Hvis vi skal loope, bruger vi en “for” løkke som vist med blå farve i linje 4 – 7. For-løkken løber arrayet huskeseddel igennem og skriver elementerne i arrayet “huskeseddel” til variablen print.

Resultatet af kodningen ovenfor. Hvis du vil se det selv, så åben linket her i AppLab: https://studio.code.org/projects/applab/D9eamV28solo71FdkIWpQ-0vKqE2HAVWw34ZCmIeAxo

Link til toppen af siden.

15.6 Funktioner

En funktion er en stik-i-rend dreng. Den kan udføre en handling, f. eks. lægge 2 og 2 sammen, lave en liste, alt muligt. Hvis vi nu siger, at vores stik-i-rend-dreng kan hente en appelsinvand, og han arbejder for Verdensfirmaet A/S. Hvis firmaet var et program, så ville vi have en funktion, som vi kunne kalde “Appelsinvand”. Så vil alle medarbejderne altid bare kunne kalde på “Appelsinvand”, og så kunne de få hentet en appelsinvand når som helst og hvor som helst. Alle dele i koden kan bruge en funktion.

I øvrigt er alt kode, undtagen kommentarer, er pakket ind i funktioner. -Funktioner kan sagtens bruge eller kalde andre funktioner. https://www.youtube.com/embed/exBK2KTcxKk?feature=oembed

I App Lap er alt kode som udgangspunkt “pakket ind” i en funktion. Den grønne klamme, som rummer hele sekvensen, er en funktion. Bemærk at vi kan give funktionen et navn. Normalt bruger vi bare navnet “event”, som AppLab automatisk giver os. Men vi kunne kalde den for “valutaomregner” og så kalde den fra andre funktioner.

Link til toppen af siden.

15.7 Funktioner og events

Hvis brugeren klikker på noget i en app, så kalder man det en “hændelse” eller et “event”. I spil kan event også være, at man skyder fjenden, dør eller bare styrer sin figur i spillet. Et event kalder en funktion. Funktionen indeholder så kode (variable, sekvenser, forgrening og betingelser mv.), som kan udføre den ønskede handling. https://www.youtube.com/embed/yi5ivNKt0lM?feature=oembed

En event er, når der “sker noget” i et spil eller en app. Her den kode, der skal afvikles, når eventen “Klik på button1” er sket. Bemærk at eventen kalder en funktion.

Link til toppen af siden.

15.8 Kommentarer

Kommentarer er mennesketekst, som man sætter ind i koden. Typisk bruger man det til at forklare, hvad der sker i koden. Hvis nu du selv kommer tilbage til din kode efter et par måneder, eller at andre skal forstå din kode, så er kommentarer nyttige.

I virksomheder, hvor de lever af at kode, har de strenge regler for, hvordan man laver kommentarer. Det gør, at programmørerne lettere kan forstå, hvad andre koder. https://www.youtube.com/embed/2hre6b5guYA?feature=oembed

Her er en kommentar i AppLab. Den er med grå farve

Link til toppen af siden.

15.9 Sådan arbejder frontend og backend sammen

Når du skaber kode i App Lap, følger vi næsten altid det samme mønster.

  • Vi starter med at oprette en begivenhed
  • Begivenheden opretter en funktion
  • Inden i funktion gør vi 3 ting
    • Henter data fra indtastningsfelter ind i variable
    • Beregner
    • Returnerer resultatet til backend

Det kan se sådan her ud.

Link til toppen af siden.

Kapitel 16. Frontend kode 1. HTML

Frontend kode er kode, man bruger i frontend delen af en app. Du ved allerede fra kapitel 15, at vi bruger sproget SQL til databaser. Tilsvarende bruger vi kodesprogene HTML, CSS og JavaScript til at kode frontend løsninger. HTML, CSS og JavaScript kan som de eneste sprog læses direkte i en browser.

3 lags arkitektur
3-lags arkitekturen

Vi bruger sprogene således:

  • HTML (Hyper Text Markup Language) er vores fundament. Vi bruger det til at vise tekst og billeder og strukturere sidens layout og indhold
  • CSS (Cascading Style Sheet) bruger vi kun til udseendet. Hvis en tekst skal have hvid farve og baggrunden skal være mørkeblå, så bruger vi CSS
  • JavaScript bruger vi til at lave dynamisk indhold frontend. Dynamisk vil sige, at resultatet af koden kan ændre sig alt afhænig af situationen. Et eksempel er et javaScript, der f.eks. kan skrive “Godmorgen” til brugeren, hvis klokken er før 12 og “Godaften”, hvis klokken er over 18.

Du kan spørge, hvorfor man ikke samler det hele i et sprog. Svaret er, at der aldrig har været og aldrig kommer en samlet plan for det her. Alle hjemmesider bruger HTML, CSS og eventuelt JavaScript frontend.

Link til toppen af siden.

16.1 Introduktion til HTML og W3schools

HTML er som sagt nævnt for alle hjemmesider. Lad os kikke lidt på et eksempel, som du også kan se i videoen.

Lige som i videoen prøver jeg min kode af hos w3schools.com/html/default.asp, din bedste ven på nettet. Uundværlig for næsten alle, der arbejder med hjemmesider, og du kommer til at bruge W3schools meget.

Jeg har basis HTML kode ind til venstre. Så har jeg klikket på den grønne “Run” knap, og så ser jeg resultatet til højre. Resultatet er endnu kun sort-hvidt, når der skal farver på dvs. styling, så skal vi bruge sproget CSS. Mere om CSS i et senere afsnit.

Link til toppen af siden.

Forstå: <html>, <h1>, <p> tagsne

TAGFORKLARINGW3SCHOOLS REFERENCE
<!DOCTYPE html>Tagget fortæller, at vi bruger den seneste version af HTMLw3schools.com/html/html_basic.asp
<html>…</html>Start og slut tag på alt HTML kode. Det fortæller browseren, at vi taler “html’sk”.w3schools.com/html/html_basic.asp
<h1>…</h1><h1> betyder “heading 1” eller overskrift 1. Der findes op til 6 overskrifter. <h1> er den største. Du vil senere lære at skifte farve og størrelse på taggets indhold med CSS kode.w3schools.com/html/html_basic.asp
<p>…</p><p> betyder”paragraf”. På dansk “brødtekst”w3schools.com/html/html_basic.asp

Link til toppen af siden.

<head> og <body> er semantiske tags

Der er altid kun 1 “head” og 1 “body” tag på en html side. De 2 tags kaldes “semantiske tags”. De viser ikke noget i sig selv, men de bruges til at holde orden på resten. Man siger, at de udgør en “sektion”, f.eks. en head eller en body sektion.

Tænk på dem som bokse, man kan lægge forskellig kode i. Mennesker er også delt op i head og body. Modsat mennesker så er det kun indhold i <body> området altså “maven” af koden, som vi viser frem :-).

Head og body i html

Link til toppen af siden.

16.2 Opsummering: De vigtigste regler for HTML kode

Her er en kort opsummering over de vigtigste regler for HTML kode. Hvis det virker som en stor mundfuld, så tag det roligt. Når du begynder at kode, vil de føles mere naturlige.

NRREGELEKSEMPEL
1Alle tags starter med “<” og slutter med “>”<html>
2Mange tags (alle i eksemplet) har et starttag og et sluttag.
Sluttagget starter med en skråstreg
<h1>…</h1>
3Tags er inde i hinanden. Vi siger, at der nestede eller flettede
Det tag, man starter med sidst, afsutter man slutter man først
<head>
<title>…</title>
</head>
4Vi starter og slutter med <html><html>.
….
</html>
5Vi har 2 områder. Et <head> område og et <body> område. Alle andre tags, bortset fra <html> ligger inde i disse tags<head … </head>
<body>…</body>
6Alt sideindhold, med undtagelse af <title>, ligger i <body> tagget<body><h1>…</h1>
</body>
7Tags kan være åbne. Dvs. at de har et starttag og et sluttag. De har et indhold imellem tagsne. <h1>…</h1>

8Tags kan også være lukkede. Så starter og slutter de i samme “< >”. <br> bruges til at lave et linjeskift, mens <img> bruges til at indsætte billeder med<br>
<img src…. >

Link til toppen af siden.

16.3 Gode råd, når du koder

Snart skal du i gang med at kode. Her er et par få, gode råd:

  • “Test often fail early”. Test meget og ofte, så opdager du lettere dine fejl
  • Jo mere irriteret du er, jo tættere er du på at finde fejlen
  • Hold orden, så finder du nemmere dine fejl. Se nederst i afsnittet.
  • Skriv HTML kode med småt. Ikke f.eks. <BODY><H1>…</H1></BODY> men <body><h1>…</h1></body>. Tagget <!DOCTYPE html> er en lille undtagelse.

Alle, jeg gentager ALLE laver fejl, når de koder. Det er en del af læringen, for fejlene er med til at gøre dig dygtig. Jeg påstår, at du ikke kan lave en fejl i HTML, som jeg ikke selv har prøvet at lave :-). I øvrigt er HTML et meget robust sprog. Du kan komme ud for, at det virker, selvom du har lavet et par småfejl.

Link til toppen af siden.

Vær doven. Hvis du holder orden, så finder du nemmere fejlene

Dovenskab lønner sig i kodning. Hvis du holder orden, finder du nemmere fejlene.

Selv om du måske ikke er et ordensmenneske, så hold orden, når du koder. Det lønner sig, du finder hurtigere dine fejl.

Jeg holder orden i HTML på den måde, at når jeg starter et nyt tag inde i et andet tag, så rykker jeg koden 2 pladser mod højre. Når jeg afslutter tagget, rykker jeg tilsvarende teksten 2 pladser mod venstre.

Link til toppen af siden.

16.4 Side, hjemmeside eller site

Desværre bruger man begreber omkring hjemmesider lidt i flæng.

  • En SIDE er en enkelt HTML fil, som man kan se i en browser
  • Et SITE er en komplet hjemmeside. Et site kan være masser af HTML filer, billeder og videoer, som hører til. På dansk kalder man et SITE for en hjemmeside

Link til toppen af siden.

16.5 Mere orden: “Separation of concerns”

Et site kan som sagt bestå af mange forskellige filer, ikke kun HTML filer.

Det er meget vigtigt, at du holder en skarp opdeling af dine filer. Princippet er så vigtigt, at det er en konvention (overordnet regel) for at lave hjemmesider. Princippet hedder “separation of concerns”.

NRREGEL
1.Alle filer skal ligge i 1 og kun 1 overordnet mappe. Det kalder vi for en projektmappe eller rod-mappen
2.Separation of concerns. De forskellige typer filer skal ligge i hver deres mappe: Alle HTML filer skal ligge i projektmappen Alle billedfiler ligger vi en mappe, vi kalder for “billeder” eller “images” Alle CSS filer ligger vi en mappe, vi kalder for “css” eller “style2 osv. osv. med andre typer filer
3.Du må kun bruge engelske bogstaver, når du navngiver filer og mapper. Du må heller ikke bruge hverken mellemrum eller tegn, der kan opfattes matematisk. Start altid med små bogstaver
4.Den HTML side, du vil have som forside, skal altid hedde ”index.html”

Her er et eksempel:

  • Jeg har lavet et site, der handler om Sydfyn. Det ligger i en projekt- eller rodmappe, som jeg har kaldt “Sydfyn”.
  • Inde i mappen ligger mine 3 HTML filer direkte i projektmappen
  • I mappen “images” ligger alle mine billeder
  • I mappen “styles” ligger min(-e) CSS fil(-er). Vi kommer til CSS senere
  • Ingen brug af æ, ø eller å. Ikke kalde en fil for “fåborg”, den skal hedde “faaborg”
  • Min startside hedder index.html
Filer til et site om Sydfyn

Link til toppen af siden.

16.6 Mer’ HTML: Tabeller, billeder, lister, links

Du har nu en grundviden om HTML, og du kan koden en basis side.

Tabeller

Tabeller er meget brugbare på hjemmesider. Vi bruger det til at strukturere indhold, hvis vi f.eks. vil have 2 billeder til at stå ved siden af hinanden. Mange gange ser brugerne slet ikke, at vi har sat en tabel op.

Der findes 4 tags, du skal kende

  • <table> og </table> starter og slutter en tabel
  • <tr> og </tr> starter og slutter en tabelrække. Vi bygger altid op i rækker, ikke i søjler
  • <th> og </th> starter og slutter en tabel celle med en overskrift i. Teksten centreres og skrives med fed
  • <td> og </td> starter og slutter en tabelcelle med almindelig tekst
  • Alle rækker skal have lige mange enten <th> eller <td> celler
  • Du kan slå celler sammen både vandret og lodret

Her er et eksempel. Bemærk strukturen og bemærk, at jeg har sat en lille attribut (border=”1″) på tabellen. Ellers ville stregen i tabellen være usynlig.

Tabel i HTML

Læs mere inde på W3schools.asp under tabeller: https://www.w3schools.com/html/html_tables.asp

Link til toppen af siden.

Billeder

Hjemmesider bugner af billeder, så selvfølgelig skal du lære at indsætte et billede. Det er heller ikke så svært. Du skal bruge koden her <img src=”MIT BILLEDE.jpg” alt=”OVERSKRIFT PÅ BILLEDE”>. Mine STORE BOGSTAVER skal du erstatte, hvis du vil kopiere koden. Her er et indsat billede.

Det vigtige er koden src=”…..”. Inde i anfrselstegnene skal du angive billedets nøjagtige navn og angive nøjagtigt, i hvilken mappe billedet ligger. Hvis du kikker i afsnit Separation of concerns, så jeg har lagt mine billeder i mappen “images”. Hvis jeg vil have fat i et billede i mappen, der hedder “faaborgBy.jpg”, så bliver min kode <img src=”images/faaborgBy.jpg” alt=”Faaborg By”>.

Alt-tagget bruger man til at fortæller brugeren, hvad der på vej, hvis forbindelsen er dårlig og billedet ikke downloader hurtigt nok.

Se mere hos W3schools.com på w3schools.com/html/html_images.asp.

Link til toppen af siden.

Lister

Vi bruger gerne lister på hjemmesider. De findes i 2 grundudgaver. Enten med prikker, ellers med numre. Koden er enkel.

  • Start og slut med <ul>…</ul>, hvis du ønsker en liste med prikker. <ul> står for “unordered list”
  • Start og slut med <ol>…</ol>, hvis du ønsker en liste med numre. <ol> står for “ordered list”
  • Hvis vil have indrykket en liste, skal du bare starte en ny liste inden i din liste

Læs mere om lister på w3schools.com/html/html_lists.asp. Link til toppen af siden.

Link til toppen af siden.

Links

Vi bruger naturligvis masser af hyperlinks eller bare links, når vi hopper fra den ene side til den anden. Koden kan se sådan ud: <a href=”www.w3schools.com>Link til W3schools</a>.

Vi starter med <a href=” …”>, og inden i anførselstegnene sætter vi adressen på det, vi vil linke til. Næste lige som med billeder. Du kan linke til emner både på nettet og på dit eget site. Vi afslutter med </a>. Inde i tagget skriver vi, hvad brugeren skal læse. I eksemplet ovenfor er det “Link til W3schools”. Det kan se sådan ud. Bemærk at HTML farver linket blåt til højre.

Du skal dog vide, at der findes flere slags links. Koden herunder laver et link til en email.
<a href=”mailto:lblj@ibc.dk”>Send email</a>. Læs mere på https://www.w3schools: w3schools.com/html/html_links.asp.

Link til toppen af siden.

16.7 Iframes

En iframe er en stump kode, som kan lave et “vindue” over mod notet indhold på nettet, som befinder sig et helt andet sted. I det lille eksempel her laver jeg en <iframe> eller et “vindue” til AGF’s hjemmeside. AGF’s hjemmeside ligger på www.agf.dk, men alligevel kan jeg se det på min hjemmeside.

Du kan se mere om iframes hos W3schools på w3schools.com/html/html_iframe.asp.

Du kan også indsætte videoer fra YouTube. Se evt. Vejledning 4. Indlejr en video fra YouTube. Du behøves ikke at forstå koden, bare følg vejledningen, kopier koden og sæt den ind.

Link til toppen af siden.

16.8 Undgå problemer med æ, ø og å

Nedenfor er der noget tekst med mange æ, ø og å’er.

Hvis du ser det i en browser, så kan du risikere nedenstående. Det er ikke noget kønt syn. Browserne forstår kun engelske bogstaver.

Der er hjælp at hente. Hvis du indsætter koden <meta charset=”utf-8″> i din <head> sektion, så kan browseren godt tolke danske bogstaver.

Nu virker det:

Der findes andre former for meta tags, men det kommer vi til i kapitel 18.

Link til toppen af siden.

Kapitel 17. Frontend kode 2. CSS

Vi kan lave meget med HTML, men hvad udseende angår, kan vi kan ikke lave andet end hvid baggrund og sort skrift. Vi har med andre ord ikke mulighed for at style i HTML.

Det har vi til gengæld i sproget Cascading Style Sheets eller bare CSS. CSS handler kun om styling, dvs. farver, skrifttyper, placeringer og meget mere. I videoen har jeg lavet en intro om CSS.

Her er en hjemmeside uden noget CSS:

Her er så den samme side med lidt CSS. Kønt er det ikke, men vi er på vej.

Link til toppen af siden.

17.1 CSS opbygning

CSS er ret simpelt i sin opbygning. Se evt. figuren ovenfor.

  • Først skriver du det tag, det drejer sig om. F.eks. h1
  • Så skriver du egenskaben. F.eks. background-color, color, text-align mv.
  • Til sidst skriver du den værdi, egenskaben skal have. F.eks. “lightblue”
  • Til aller sidst sætter du et semikolon

Her er en oversigt:

EKSEMPELKODEFORKLARING
Skrifth1{
font-family: Calibri;
font-size: 30px;
text-aling: center;
}
Styler tagget <h1> med en skrifttype, størrelse og centrering
Farverh1{
color: blue;
}
p{
color: #ffc0cc;
}
 Styler tagget <h1> med farven blå


Styler tagget <p> med farven #ffc0c. Alle farver har en 6-cifret kode (se nedenfor)
Baggrundbody{
background-color: 000fff;
background-image:
url("images/mitBillede.png";
}
Styler tagget <body> med en baggrundsfarve og et baggrunds billede

Link til toppen af siden.

17.2 Hvor skal jeg lægge min CSS kode

Man kan lægge koden 3 steder.

  • Ved selve tagget
  • Øverst på den enkelte HTML side
  • I en fil for sig selv, kaldet et eksternt stylesheet

Link til toppen af siden.

1. Metode. Ved selve tagget (inline CSS)

Her styler du ved selve tagget. Nyttigt, hvis du skal prøve noget af eller øve dig, men hvis du skal gøre det ved alle tags på alle sider, så får du et kodnings- og opateringshelvede:

Inline styling foregår ved, at du inde i selve start tagget skriver: style=”……..;”. Et eksempel:
– <h1 style”color:blue;text-align: center;”>This is a heading</h1>. Nu får <h1> blå farve og bliver centreret.

Inline CSS

Link til toppen af siden.

2. Metode. Øverst på den enkelte HTML side (internal CSS)

Igen praktisk til test. Til forskel fra før kan vi nu style f.eks. alle <p> tags på en gang. Til gengæld vil det stadig være arbejdskrævende at gøre det på alle HTML sider.

Du skriver CSS’en oppe i <head> sektionen og pakker det ind i et tag, <style>. Selve CSS’en skriver vi selvfølgelig på samme måde som før.

Internt CSS

Link til toppen af siden.

3. Metode. Den professionelle måde: Eksternt stylesheet

Kan du huske princippet om “separations of concerns”? Vi kan lave en fil kun med CSS, og så lave referencen til filen øverst på hver side. Vi følger vores princip på smukkeste vis, når vi adskiller HTML og CSS kode frem for at blande det sammen.

CSS’en filen, dvs. det eksterne stylesheet mystyle.css, kunne se sådan her ud:

Hvis vi så laver en præcis reference øverst på hver HTML side, så behøves vi kun at rette stylesheet 1 sted. Ændringen vil slå igennem på alle sider.

Referencen laver du i <head> sektionen. Den ser sådan ud:
– <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

Se figuren nedenfor

Eksternt stylesheet

Link til toppen af siden.

17.4 Hvordan husker jeg dog alt det her?

Simpelt. Alt står inde på W3schools, og du skal nok lære det hen ad vejen, når du koder. Her er nogle referencer:

Link til toppen af siden.

17.5 Gode råd til din kodning

  • “Test often, fail early”. Hellere hyppige småtest end få store, du fanger fejlene bedre
  • Udnyt hierarkiet i koden. Hvis du styler på <body>, styler du også på alle tags inden i body. F.eks. <h1>, <h2>, <p>, <ul> m.fl. Hvis du vil have en skrifttype, der f.eks. gælder overalt, så lav stylingen på <body> i stedet for <h1>, <h1>, <p> osv. enkeltvis
  • Brug W3Schools så meget, som du kan

Link til toppen af siden.

17.6 Kik fremad

HTML og CSS i kombination har et utal af muligheder. Hvad siger du f.eks. til menuen her? Ren HTML og CSS, leveret fra https://www.w3schools.com/css/css_navbar.asp i en <iframe>:

Link til toppen af siden.

Kapitel 18. SEO/søgemaskine optimering

SEO betyder Search Engine Optimazion eller søgemaskine optimering. Den består af 2 dele

  • Passiv optimering. Hvis man følger bestemte regler, så kommer man højere i søgemaskinerne
  • Aktiv optimering. Når du aktivt går ind og betaler for, at du kommer højere i søgemaskinerne. Man køber såkaldte ad-words hos Google

Vi skal i kapitlet her kun kikke på passiv optimering.

Personligt har jeg en bekendt, som havde en lille hjemmeside med en super god adresse. Her solgte han små spil for måske 50 kr pr spil, og han solgte højest for måske for kr. 2.000 om året. Han blev kontaktet af en virksomhed, der udbyder online spil. Han endte med at sælge sit domænenavn for ca. kr. 300.000. Så meget kan de bedste adresser på internettet være værd.

Folk betaler enorme summer for annoncering hos Google. Google sælger ord som f.eks. “Charterferie” som ad-word på auktion. Den, som betaler mest, ligger øverst. Man betaler pr klik. I 2019 omsatte Google for ca. 135 mia dollars. De dyreste adwords i Danmark er Online casino. Google tjener 320 kr. hvis du klikker på den øverste annonce i søgningen. Hvis du har en webshop, kan du roligt regne med, at 5 – 10% af din omsætning ryger lige i Googles lommer.

Google har med andre ord en enorm magt på nettet. Alle bejler til Google- prinsessen lige som i historien om “Klodshans”. Allerede nu skal du lære lidt om, hvordan du kan optimere din hjemmeside til “Google prinsessen”, som jeg kalder hende.

Google prinsessens slot/Googles nye hovedkvarter i Californien

Et par regler, som du allerede nu skal kende og overholde

  • Hav en <title> på din hjemmeside
  • Hav 1 og kun 1 <h1> tag
  • Hav orden på indholdet i både <head> og <body> tagget
  • Brug “alt” tagget til billederne
  • Google Prinsessen hader gentagelser. Kopier aldrig en side helt og holdent, hun ser det øjeblikkeligt og du ryger nederst i søgemaskinen

— SLUT PRUT FINALE, DER ER IKKE MERE TEORI TIL INFORMATIK C, SOM DU SKAL LÆRE 🙂 —

Link til toppen af siden.