Kapitel 13. Databaser

Kan du huske figuren her fra kapitel 5. Figuren beskriver, hvordan næsten alle programmer/apps er bygget op.

I dette kapitel skal vi kikke på, hvad en database er for noget.

Link til toppen af siden.

13.1 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.

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.

NAVN	HÅRFARVE	ØVRIGT
Lene	Rød	LIlle, går i smart tøj, dyrker fitness
Lone	Brun	Hø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.2 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.

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.

Trin 3. Sidste og sværeste skridt: Undgå redundans

Redundans betyder “overflødig”. Så hvis din arbejdsgiver siger, at du er redundant, så bliver du nok fyret.

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

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 navne Det 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 :

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

• 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

E-R diagrammer kan være ret indviklede

Her er et eksempel, og E-R diagrammer kan sagtens blive endnu mere komplicerede end eksemplet her.

Bemærk at de dels i kasserne skriver tabellens navne og alle attributter, dvs. alle tabellens felter. Dels skriver de lidt andre notationer om relationerne. E-R diagrammer har lidt forskellig notation, lige som dialekter i et sprog

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

ØNSKE	SQL KODE
Hent alle data fra tabellen Kunder	SELECT * 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 tabeller	SELECT * 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 databaseprogram Excels 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

Jeg gennemgår alt databaseteori. Helt fra 0. Hvad er en database og hvordan kommer man 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.

Kapitel 15. Interaktionsdesign

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.

Når jeg f.eks. skifter min mobiltelefon ud, så er der på den nye mobiltelefon ofte en opdateret udgave af det gamle system. Det skal jeg som regel lige vænne mig til først. Det gælder også, hvis jeg køber en ny ovn, kører i en ny bil eller bruger en hjemmeside.

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.

Som designere af produkter ønsker vi altid, at det er så nemt for brugeren som muligt. Vi ønsker høj brugervenlighed/brugbarhed eller “usability” på engelsk. Vi kan gå skridet videre og snakke “user experience”, ofte forkortet til “ux” selv i danske jobannoncer.

Faktaboks: “Brugervenlighed eller brugbarhed, det er sagen” (Hamlet) Blandt forskere er der næsten religionkrigs-lignende diskussioner om vi skal kalde et brugerorienteret design for “brugervenligt” eller “brugbart”. Brugervenlighed antyder, at et godt design “bare” er en venlighed over for brugeren. “Brugbart” siger derimod, at hvis det ikke kan bruges, så er det ubrugeligt. “Brugbarhed” er for mig egentlig det korrekte ord, men brug gerne begge ord

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

• Web sider 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 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.

15.1 Brugbarhed: Design

Reglerne for design af brugbarhed er éns, uanset om du designer et brugerpanel til en mikrobølgeovn eller du laver en hjemmeside. Forskellen er, at hvis du laver en hjemmeside, så er konkurrenterne lige præcist 1 klik væk. Hvis brugeren ikke er tilfreds, så har du et problem.

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

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.

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.

15.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 interaktionsdesignere 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. Så der er alt mulig grund til at involvere dem 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.

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.

15.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.

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.

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 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.

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.

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

TAG	FORKLARING	W3SCHOOLS REFERENCE
<!DOCTYPE html>	Tagget fortæller, at vi bruger den seneste version af HTML	w3schools.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

<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 :-).

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.

NR	REGEL	EKSEMPEL
1	Alle tags starter med “<” og slutter med “>”	<html>
2	Mange tags (alle i eksemplet) har et starttag og et sluttag. Sluttagget starter med en skråstreg	<h1>…</h1>
3	Tags 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>
4	Vi starter og slutter med <html>	<html>. …. </html>
5	Vi 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>
6	Alt sideindhold, med undtagelse af <title>, ligger i <body> tagget	<body><h1>…</h1> </body>
7	Tags kan være åbne. Dvs. at de har et starttag og et sluttag. De har et indhold imellem tagsne.	<h1>…</h1>
8	Tags 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.

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.

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”.

NR	REGEL
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

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.

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

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.

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

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:

EKSEMPEL	KODE	FORKLARING
Skrift	h1{ font-family: Calibri; font-size: 30px; text-aling: center; }	Styler tagget <h1> med en skrifttype, størrelse og centrering
Farver	h1{ 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)
Baggrund	body{ background-color: 000fff; background-image: url("images/mitBillede.png"; }	Styler tagget <body> med en baggrundsfarve og et baggrunds billede

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

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.

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.

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

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:

• CSS sprogets opbygning: w3schools.com/css/css_syntax.asp
• CSS farver: w3schools.com/css/css_colors.asp
• 3 måder at indsætte CSS på: w3schools.com/css/css_howto.asp

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.

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

Link til toppen af siden.

18.1 SEO med meta tags

Vi bruger meta tags til overordnede ting på hjemmesiden, og de er altid placeret i <head> sektionen.

Du kender tagget <meta charset=”UTF-8″>, som sikrer, at vi kan skrive æ, ø og å. Du skal skal lære 3 meta tags mere, som vi bruger til at gøre Google Prinsessen og andre søgemaskiner glade.

TAG	FORKLARING	W3SCHOOLS HENVISNING
DESCRIPTION	Skriv her en beskrivelse af siden. Skriv lige så meget du vil, men skriv det vigtigste først, for folk læser kun det første. Genbrug aldrig din beskrivelse, Google Prinsessen hader gentagelser.	w3schools.com/tags/tag_meta.asp
KEYWORDS	Skriv de ord, som du gerne vil findes på. Sydfyn, weekendophold osv. Bemærk, at der står både “Fåborg” og “Faaborg”. Tag forskellige stavemåder med herunder, hvis folk ofte staver ordet forkert. Du må skrive lige så mange ord, du vil, men gentag ikke sid selv helt og holdent.	w3schools.com/tags/tag_meta.asp
AUTHOR	Udelukkende til brug for egoet. Det ser da fedt ud, når Google Prinsessen finder dit navn på nettet på en hjemmeside	w3schools.com/tags/tag_meta.asp

Nedenfor har jeg søgt på “Sydfyn”. Det, der kommer frem, er noget der er placeret i hjemmesidernes metatags.

Link til toppen af siden.

18.2 Opsummering på SEO

Meta koder er meget simple, men de skal være i orden på alle dine HTML sider. Ellers kommer du bagerst i køen af de mange bejlere, som Google Prinsessen har.

Til inspiration. Michael fra firmaet Become laver gratis webinarer, bl.a. om Google og Facebook Ads. Her er et link til et gratis webinar om SEO: https://www.become.dk/webinarer/webinar-seo-hvilke-10-on-page-faktorer-er-vigtigst-at-fokusere-paaa-netop-nu/.

Link til toppen af siden.

18.3 Afslutning

Tillykke: Du er nu igennem pensum.

IT-branchen er en ung branche, og det præger branchen. Der er store muligheder, ikke kun som udvikler, men også i krydsfeltet mellem økonomi og IT. Det gælder ikke mindst, når man digitaliserer virksomheder.

Det bedste ved branchen er den åbenhed, som folk kommer med. Alle IT folk bruger internettet meget i deres arbejde. Folk er mere end villige til at dele deres viden på nettet. Jeg er f.eks. medlem af et community, WordPress Danmark på Facebook. Når jeg spørger, går sjældent mere end en time eller 2, så har de svar jeg mangler. Hvis du også bruger de engelske communities, er mulighederne for svar nærmest ubegrænsede.

Husk at du kan bruge hjemmesiden her til at repetere begreberne. Gå ind under Informatik C > Emne 4. Repetition og dokumentationsopgave > Oversigt over fagbegreber https://bliv-klogere.ibc.dk/index.php/begreber/. Pøj-pøj til eksamen :-).

Link til toppen af siden.