Fagtermer og huskeord

It-systemer

Arbejdsmetoder

Når man skal lave et it-system – uanset om det er en hjemmeside med HTML eller WordPress, en app eller en database, går man som regel ud fra at der er noget planlægning noget implementering og noget evaluering (test, brugerundersøgelse mv)Ikke desto mindre er det vigtigt at man ikke ser alt for kronologisk på disse faser. Det ville man kalde en Vandfaldsmodel, fordi man for eksempel udfører en planlægning – og så aldrig vender tilbage til planlægningsfasen igen. I stedet skal man se på processen som agil (forandringsparat) og iterativ (cirkelformet, gentagende): man er altid parat til at gå tilbage og ændre og udvikle sit produkt.

Brainstorm

Kender i… -det er her man er åben og får en masse idéer. Skriv også idéer ned som er for vilde og ikke kan blive til noget i første omgang.

Kravspecifikation

Præcis beskrivelse af hvad produktet skal kunne. Laves så nidkær og nøjagtig som muligt.

Læs mere i grundbogen her

Målgrupper

Skal overvejes og nedskrives. Jo mere præcist des bedre: “16-17 årige i Holbæk og omegn og deres forældre” er bedre end “Unge mennesker”

Læs mere i grundbogen her

Interaktionsdesign

Indeholder de metoder og overvejelser man kan gøre sig om et it-produkt før man går i gang med at implementere det (kode det eller sætte det op i wordpress osv). Kan bl.a indeholde

Læs mere i grundbogen her

Modellering

Er det overordnede område, der involverer et interaktionsdesign. Men man kan modellere mange ting og metoderne er forskellige. Man modellerer for eksempel en database ved at lave E/R diagrammer og use-cases. Eller man modellerer en app ved at lave Flowcharts og POP skitser.

Læs mere i grundbogen her

Programmering

Kan foregå i forskellige kodesprog og på forskellige niveauer. Vi har programmeret i Javascript, som er “nettets programmeringssprog”. Det bruges typisk til at lave funktionalitet og interaktion på hjemmesider, men som i har set kan det også bruges til at programmere spil og visuelle programmer.

Læs mere i grundbogen her og se uddybning længere nede

Test

Er de metoder man bruger til at undersøge om et it-system er brugervenligt og funktionelt korrekt. Tænke-højt test er en metode til at undersøge brugervenlighed, mens test også an være af mere teknisk karakter. Hvis man for eksempel gerne vil vide om en app fungerer efter hensigten, kan man sætte et program op som “lader som om” det er hundredevis af kunstige brugere, som afprøver systemet på alle leder og kanter.

Læs mere i grundbogen her

Test af Brugervenlighed

Når man skal teste brugervenlighed på hjemmesider kan man bruge kvantitative test (såsom spørgeskemaer) eller kvalitative test (såsom interviews eller tænke højt test).

Læs mere om tænke højt test her

Dokumentation

Er dels de produkter der kommer ud af modellering og interaktionsdesign (flowcharts, E/R diagrammer osv). Men i programmering er dert samtidig meget vigtigt at dokumentere koden direkte i kodefilerne.

Læs mere i grundbogen her

3-lags arkitektur

Man kan se på software som opdelt i 3 lag. Det første lag er brugergrænsefladen, det man ser som bruger. Det næste er funktionaliteten – det som gør at man kan interagere med grænsefladen. Det tredje lag er data – de oplysninger der bliver gemt og manipuleret.

Lad os tage en hjemmeside som eksempel: det første lag er brugergrænsefladen, opbygget i HTML og CSS. Det næste lag er funktionaliteten, typisk opbygget i javascript og php. Det tredje lag er en database, hvorfra oplysninger bliver hentet og gemt via funktionerne i lag 2, og vist i lag 1.

Innovation i it-systemer

Læs kapitlet om innovation i grundbogen her

Databaser

Læs mere om modellering og databaser i grundbogen

Se evt mere i indlæggene her:

Databaser: Kageopskrifter

Informatik C: Lav et it-system med WordPress

Store mængder info på nettet gemmes typisk i en database. Når du for eksempel opretter en WordPress side, gemmes oplysninger om brugere, indhold i siderne, produkter og kategorier osv osv, alt sammen i en database. Man kan forestille sig en database som et Excel-ark: tabeller med rækker og kolonner.

Entiteter, attributter og relationer

Når man modellerer en database skal man tage stilling til dens entiteter, hvad de består af og hvordan de hænger sammen. Eksempel: Vi skal bygge en database over alle pølsevogne i Danmark. Databasen skal bruges til at skabe overblik og administrere forretningen. Den kan både bruges af den centrale organisation og eksempelvis til at lave oversigtskort på en hjemmeside mm.

Vi kunne for eksempel vælge entiteterne

  • Person
  • Adresse
  • Priser
  • Produkter
  • Råvarer

Personer er dem som har vognen – pølsemændende. Adresser er de steder vognene står. Entiteterne er altså de tabeller der til sidst kommer til at være i selve databasen.

Entiteter har attributter – egenskaber:

  • Pølsemand
    • Fornavn
    • Efternavn
    • Køn

Osv osv. Attributter er egentlig bare kolonner i databasens tabeller. Det er vigtigt at angive attributternes datatyper (tekst, tal) så man kun opretter plads i databasen til det der er brug for.

Endelig er der så relationer. Det er sammenhængen mellem tabellerne: Pølsemand – bruger – råvarer. Råvarer – har – priser.

E/R Diagram

Diagram over databasens entiteter og relationer.

Use-cases

Virkelighedstro scenarier for hvordan man kan bruge en database eller et andet it system. Use-cases må meget gerne være specifikt formuleret, f.eks:

Per er pølsemand og har brug for at finde ud af hvilke varer der er ved at løbe tør fra lageret. Han åbner hjemmesiden, trykker på lager, trykker på “Sortér efter lagerstatus”. Der er derefter en knap med teksten “Udskriv alle med lav lagerstatus”, som han trykker på. Dermed får han en overskuelig liste han videre kan bruge til varebestilling.

Kravspecifikation

En database er en del af et samlet it-system – hvor man kan indsætte, læse og rette oplysninger. Kravspecifikationen forklarer i punktform hvad systemet skal kunne. Det er smart at dele kravspecifikationen op i “need to have” og “nice to have”, så mere avancerede funktioner kan implementeres på et senere tidspunkt.

Læs mere om kravspecifikationer i grundbogen her

PHP

(Hypertext Preprocessor) Mens html og javascript kører på den klient-computer som viser hjemmesiden, er php filer server-side. Det vil sige, at en .php side kan udføre kommandoer på selve serveren. Typisk at hente informationer i en database, men kan også være lydfiler, video, komprimering og mange andre opgaver. Med .php kan en hjemmeside for alvor blive funktionel og interaktive. Det er også php sider, der kører WordPress.

SQL

(structured query language). Det sprog man bruger til at kommunikere med databaser. Når man har oprettet forbindelse til en database kan man for eksempel skrive

SELECT * FROM Pølsemand WHERE Fornavn = 'Per'

Resultatet ville være en liste med alle de pølsemænd, der har fornavnet Per.

Participants database

I timerne har vi arbejdet med plugin, der hedder “participants database”. Det er en mulighed for at lave en database med en enkelt tabel – participants. Det er således ret begrænset hvad man kan med værktøjet, til gengæld er det udmærket til at illustrere hvordan man:

  • laver en komplet entitet med attributter
  • viser formularer til at oprette nye poster
  • sender mails til nye brugere
  • laver formularer til at redigere eller slette nye poster

Programmering

Er det man bruger til at lave computerprogrammer, spil, apps, modellering af fysiske systemer eller kemiske formler eller matematiske simuleringer osv osv. Vi har brugt Javascript til at programmere med (se også længere nede). Javascript er et rimelig simpelt programmeringssprog, men det smarte ved det er, at det kan køre i en browser.

Lad os i det følgende forestille os et simpelt program med en rund kugle vi vil have til at bevæge sig hen over skærmen.

Variabel

En navngivet værdi, som kan forandre sig mens programmet kører. Vi kunne for eksempel have en hastighed på kuglen vi kalder speed. Den kan så sættes til 0 eller 100 eller et andet tal. Dermed kan variablen bruges til at flytte kuglen på skærmen med en eller anden hastighed.

Læs mere om variable i grundbogen her

Funktioner

En funktion er noget kode som udfører et eller andet som skal ske mange gange. Vi kunne f.eks forestille os at kuglen skulle vende om, når den rammer siden af skærmen. Det kunne vi gøre i en funktion. F.eks kunne funktionen kaldes bounce().

Læs mere om funktioner i grundbogen her

Sekvenser

Hentyder egentlig bare til at programmer kører kronologisk gennem de linjer der står i koden. Men nogle gange vil programmet “hoppe” fra et sted til et andet. For eksempel i en logisk betingelse: hvis kuglen har ramt siden af programmet, .. Her vil programmet kun bruge den næste linje hvis betingelsen er opfyldt – ellers “hopper” det videre.

Læs mere om sekvenser i grundbogen her

Løkker

Er metoder til at gøre noget flere gange i træk. Hvis vi f.eks havde fem kugler og skulle kalde funktionen bounce() på dem allesammen, kunne vi bruge en løkke med en tæller til at løbe kuglerne igennem. Denne løkke kaldes en for-løkke. Det hedder den fordi man skriver

for(i=0;i<5;i++){
    balls[i].bounce();
}

Der findes også andre løkker, f.eks while løkkker, hvor man gør noget indtil en logisk betingelse er opfyldt.

Læs mere om løkker i grundbogen her

Objekter

Når vi programmerer noget mere komplekst, bruger vi objekter til at holde styr på sagerne. Eksempel: vi programmerer sæbebobler. Sæbebobler har variable (størrelse, tyngdekraftpåvirkning) og funktioner (f.eks til at svæve og gå i stykker).

Sæbebobler programmerer vi som et objekt, så vi kan kopiere dem og give dem forskellige egenskaber. Typisk vil vi så lægge koderne til objektet sæbeboble i en separat fil, den kunne for eksempel hedde soapbobble.js.

Internettet

Internettet: Kort fortalt et meget stort antal servere, som via en række globale protokoller (http, ftp, https m.fl), forbinder klient-computere over hele verden.

Web-server

Computer som har en unik adresse på Internettet (ip-adresse), og derfor kan være vært (host) for et eller flere websites. I har jeres egen virtuelle webserver: http://u17-nicklasj.it.slotshaven.dk. Der findes også andre typer servere – fx fil-servere – som bruges til at dele filer på et internt netværk.

FTP

(File Transfer Protokol). Protokol som giver tilladelse at lægge filer ud på en webserver. Normalt når vi går på Internettet bruger vi protokollen HTTP, som kun giver mulighed for at SE filer på en webserver. Med FTP kan vi også uploade, redigere og slette filer. Typisk via en FTP klient, fx FileZilla.

HTTP

(Hyper Text Transfer Protokol). Den protokol som browsere bruger, når de skal hente og vise indhold fra en webserver. HTML, CSS og Javascript filer.

Hjemmeside

En samling indhold og funktioner, som man finder ved at gå ind på en web-server. Kan både kodes i hånden ved hjælp af HTML, CSS og Javascript, eller ved at anvende et CMS system.

HTML

(Hypertext Markup Language). Internettets formelle sprog. Egentlig ikke decideret kode, men en måde at “markere” tekst på, så teksten får forskellige funktioner. Det kan være overskrift-niveauer, felter til input i forms, hyperlinks mv. Man kan sige at HTML er super struktureret tekst. Når filer har endelsen .html, skal de åbnes af et program som forstår html-markup, typisk en browser.

HTML filer hedder .html. I en mappe på en webserver skal der ofte som minimum ligge en fil der hedder lige præcis index.html. Når den ligger i en mappe kan browseren automatisk se, at det er den første fil der skal åbnes.

CSS

(Cascading Style Sheets). Man kan sige at HTML er indhold og CSS er form – farver, størrelse, kanter og andet udseende.

Filer med endelsen .css tilknyttes HTML sider med et link i HTML sidens <header> tag. Derefter kan man give elementer i html filen id’er og klasser, som kan bruges i stylesheetet.

F.eks er der i html filen et element, h1:

<h1 class="red">Her er en overskrift med klassen "red"</h1> 

I stylesheetet kan vi så påvirke alle elementer med denne klasse ved at skrive sådan her:

.red{

    color:red;

}

Javascript

Javascript bruges til at lave funktioner og interaktivitet på html sider.

Alt det vi har lavet i programmering, er skrevet med Javascript. Med javascript kan man “gøre noget” med html koderne – reagere på input fra en form, sende en besked til brugeren, flytte elementer rundt og meget andet.

Men man kan altså også lave små programmer eller spil, som vi har gjort i programmering. Her bruger vi et Javascript bibliotek, dvs noget Javascript der er skrevet i forvejen, og som giver os en masse funktioner vi kan bruge.

I programmering har vi brugt et Javascript som hedder p5.js. Det skal ligge i samme mappe som de andre filer i programmet, og man linker så til det i html sidens <header> præcis ligesom med et stylesheet. Når der er linket til det kan vi bruge funktionerne, f.eks

function draw(){

ellipse(100, 100, 20, 20);

}

Både draw() og ellipse() er funktioner fra Javascriptet p5.js.

Hyperlinks

Internettets grundlæggende idé – at sætte tekster op så de kan linke til hinanden på kryds og tværs med et enkelt klik.

Klik her for noget om den blå farve i links

Eller her for lidt mere historie

Browser

Program som kører på klientens maskine, henter indhold fra servere, og viser det til slutbrugeren. Fx Chrome, Safari, Edge, Firefox mv. Overordnet set foregår det sådan her:

  1. Du skriver en URL i dit browser vindue – fx http://www.dr.dk
  2. Browseren kontakter den nærmeste DNS server for at finde ud af hvilken unik adresse (ip-adresse), der svarer til domænenavnet dr.dk
  3. Browseren får svar: det er en server med ip-adressen 159.20.6.22
  4. Serveren sender en forespørgsel (et request) til denne server
  5. Serveren svarer med et ok – og en masse html og css
  6. Browseren oversætter (parser) koderne, og viser hjemmesiden

CMS system

(Content Management Systemer) er online redskaber til at lave hjemmesider som kan noget mere end blot at være visitkort. Typisk gemmes informationer om indhold, brugere og funktioner i en underliggende database, og dermed bliver det muligt at lave en masse funktioner – fx

    1. Rollestyring. Flere personer kan logge ind på siden og ændre på indhold og funktioner i et hierarki. Administrator må gerne rette i kundeoplsysninger – det må redaktøren ikke – etc..
    2. Dokumentstyring. Sider kan for eksempel have versions styring så man kan hente en ældre version. Eller sider kan være private, så man skal være logget ind for at se dem. Eller sider kan oprettes efter skabeloner, så man for eksempel kan opbygge en gruppe sider med produkter, ansatte eller tilbud som så ser ud på en bestemt måde.
    3. Integration. CMS systemer gør det ofte også muligt at lave plugins, så andre redskaber nemt kan integreres med dem – det kan gøre det nemt at poste indhold til sociale medier, at integrere video eller billeder, at samle kontaktoplysninger og kalenderfunktioner fra andre sider mv.
  • Responsivt design. Når du bruger et CMS system til at designe din hjemmeside, kan du ofte være sikker på at det er sat op til at se pænt ud på de fleste browsere og devices. Dvs at hvis du eksempelvis åbner siden på din mobil, skærer den antallet af kolonner ned, så tekst og billeder er tydelige og læsevenlige.

WordPress

Det CMS system vi har arbejdet med i timerne. Oprindeligt et blog-værktøj, men i dag bruges det til rigtig mange andre ting. Fordele ved WP er at det er gratis, brugervenligt og kæmpestort – ulemper kan være at det er meget skabelon-præget og i høj grad fungerer som et shopping site for andre leverandører; det er gratis lige indtil du rigtig skal til at bruge det til noget – så koster det fordi de plug-ins du installerer, har en betalingsmodel. Andre CMS systemer der kan være relevant for mindre virksomheder er eksempelvis Drupal, Joomla eller TYPO3.

Sikkerhed og personfølsomme oplysninger

Ophavsret

Hvis man bruger billeder, film, figurer eller andet på en hjemmeside uden at spørge om lov først, bryder man som udgangspunkt ophavsretsloven.

Mens man udvikler en prototype eller lignende må man derfor tage denne overvejelse med i sit arbejde. Det er fx okay at sige, at man ikke vil publicere noget, før man har fået tilladelse.

Men det er ikke okay at glemme at tage stilling til spørgsmålet.

GDPR og personfølsomme oplysninger

Læs mere om GDPR i indlægget her

Design og farver

Webdesign

Godt webdesign handler om at lave et brugervenligt og æstetisk udtryk.

En rettesnor for alt dette kan findes i den oversigt i har fået udleveret fra bogen Det Kommunikerende Menneske. Her har man i kort form nogle af de ting man skal være opmærksom på.

Webdesign (Fra bogen Det Kommunikerende Menneske af Claus Bangsholm)

Farver

Farvevalg kan betyde noget for om brugeren opfatter siden som glad, seriøs osv. I skal ikke kunne udfolde jer i timevis om farvevalg, men det er godt at tage stilling til nogle grundlæggende valg. Se i følgende indlæg:

Læs mere om farver her 

Skrifttyper

Helt overordnet skelner man mellem skrifttyper med eller uden serif. Seriffer er små grafiske tilføjelser til bogstavets krop. På dansk beskrives seriffer ofte som “fødder”.

  • Times new Roman er den klassiske serifskrifttype
  • Arial er den klassiske skrifttype uden serif

Serif skrifttyper mener mange er lettere at læse – de bruges ofte i akademiske opgaver og bøger. Skrifttyper uden serif bruges ofte på nettet – de giver et mere enkelt og moderne udtryk.

I et stylesheet vælger man skrifttype ved f.eks at skrive

p {

font-family: arial;

}

Google har mange flotte skrifttyper til gratis brug: https://fonts.google.com/.

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *