Forløb

På disse sider finder du en række forløb målrettet gymnasieundervisning i fagene Informatik, Kommunikation og til dels programmering. Mange af læringsobjekterne linker til sider på Github som udvikler sig løbende – du kan derfor ikke regne med et fast format eller antal i forløbene. Kommentarer, spørgsmål og forslag modtages med stor tak.

One page api-template

Med denne skabelon kan du lave en hel app på en enkelt side: index.html. Projektet bruger følgende teknologier: Et offentligt API uden besværlig autoriseringHandlebars javascriptMaterialize cssjQuery Læs koden grundigt. Slå ovenstående links op for at blive klogere. Vælg et API ved at følge linket – bemærk at du skal finde et API uden autorisering. Så […]

0 comments

Mysql database med node.js

Indhold SystemetTeknologier ImplementeringDatabasen Server.jsOpgave : implementer resten I dette forløb skal vi se på hvordan vi kan oprette forbindelse til en mySQL database med node.js. Fordelene er talrige i forhold til php, først og fremmest behøver vi ikke reloade sider, hver gang vi vil opdatere eller hente tupler i databasen. Hent oplægget på github Systemet […]

0 comments

My javascript notes

This is a completely unordered reference to modern javascript. It includes various examples on how to do stuff the vanilla way.

0 comments

Google books api med node

Google har mange api’er. Nogle af dem koster penge, andre er gratis og uden autentifikation. Google books tilhører sidste gruppe. Det er altså relativt nemt at sætte et kald op til Google books – og da projektet fra begyndelsen har haft som målsætning at digitalisere hele verdens litterære arv, er det sådan set et pænt […]

0 comments

Fat Arrow

Fedepile funktioner => er efterhånden ved at være lige så vigtige at kunne forstå, for at fortolke og skabe moderne javascript, som morgenmad. Men første gang du støder på en stump kode med “fat arrows”, er det meget muligt du ingenting forstår. Fat arrow functions blev indført med såkaldt moderne javascript (ES6), og gør kodning […]

0 comments

CSS styleguide

Indhold AnimateTransform 2DTranslateSelectCombinatorsSelect all children Select adjacent elementsSelect all siblings This is my attempt to present the most important elements of the standard CSS functions. For an extensive overview, refer to the W3C spec. Animate Transform 2D Translate The translate() method moves an element from its current position (according to the parameters given for axis). […]

0 comments

CSS Boilerplates

Indhold Skeleton CSS – responsive and super simple PureBuild a grid with pure.css Task: build this grid The Bulma css boilerplateMobile first, responsive first Adjusting column widthsResponsive columnsNesting ColumnsTilesWrap-up BulmaOther minimal CSS boilerplatesMaterialize.cssAlternatives to materialize.css In short, a CSS boilerplate is a css template – a file with premade css you can download and use. […]

0 comments

Bored API med handlebars

Du keder dig. Men du har ikke overvejet at du kan bruge det fantastiske activity api til at programmere en app, som andre i samme situation kan bruge. Til dette projekt skal vi bruge: The bored API Handlebars javascript Materialize css jQuery Arkitektur Vi laver projektet på en enkelt side, index.html. Dette kan lade sig […]

0 comments

Objekter i Javascript 1

Der er virkelig mange måder at lave objekter på i Javascript. Og det skyldes måske på den ene side at sproget er opvokset på nettet, hvor det gerne må gå stærkt med at programmere små funktioner. Men på den anden side, at sproget har vokset sig temmelig stort og omfattende, og nu om dage også […]

0 comments

Objects – lynhurtige objekter i Javascript

https://javascript.info/object  

0 comments

Data!

På din vej rundt på nettet – og i forskellige API’er – eller bare hjemmesider – vil du støde på forskellige dataformater. Det kan fx være du ser følgende: CSV (comma separated values) JSON (Javascript Object Notation) //Godt!! HTML (Ja, som nettet er lavet af – men hvordan får vi mening ud af det?) CSV […]

0 comments

JSON i lokal fil

Lad os prøve at se på hvordan vi henter data fra en lokal fil med JSON data. Der er virkelig mange ressourcer på nettet med JSON data – både statiske og dynamiske – men her ser vi altså på et eksempel, hvor vi opretter en lokal fil og fylder den med JSON data. Vi vil […]

0 comments

JSON fra New York Times API (med apikey)

Nogle API’er kræver at du først opretter en konto og får udleveret en nøgle, kaldet en api_key, som du så bruger til at identificere dig når du henter data. Der kan være mange gode grunde til at folk skal oprette en nøgle først – dem der vedligeholder api’et kan jo på den måde se hvem […]

0 comments

Weather!

0 comments

Hearthstone API Clientside JSON

Med denne skitse tilgår vi Hearthstones api ved hjælp af et script som hedder jQuery. Det er altså ikke helt det samme som p5.js, som vi plejer at bruge, men som i kan se i koden, er det genkendeligt. Kig i jQuery dokumentationen her Hent en api-kode til Hearthstones api her  – og det er også […]

0 comments

Rejseplanen

Indhold LæsestofInteraktionsdesignTeknologierRejseplanens APIOm ReST Api’erNodeStylesheet framework: MilligramOpret en generisk request funktionUdvid funktionen med flere parametreParse JSON I denne øvelse skal vi arbejde med Rejseplanens API. Rejseplanen har lavet deres system sådan, at nysgerrige udefra der gerne vil eksperimentere med deres data, kan anmode om at få udleveret en såkaldt base-url. Med den kan man lave […]

0 comments

API: Rita.js

Github repo til dette indlæg  Hvad er et API? Lad os sige vi er meteorologisk institut. Vi har så en hel masse data på lige så mange servere, og vi vil egentlig gerne give folk adgang til nogle af de data. Det kunne vi selvfølgelig gøre ved at lave en hjemmeside, som yr.no eller dmi.dk […]

0 comments

Spotify Rest API med node.js og p5.js

Spotify’s API er på flere måder mere komplekst end dem vi har kigget på indtil videre. Det er det bl.a fordi det kræver et reelt spotify login (premium), for at identificere en klient, og give adgang til funktionerne. Denne del af API’et vil vi ikke gå i detaljer med her – i eksemplet nedenfor er […]

0 comments

NPM – Spotify

Lad os få fat i spotify’s api og se hvordan man hiver noget basic information ud af det. Gå først ind og opret en developer konto og få en API key her. https://www.npmjs.com/package/node-spotify-api    

0 comments

Animation med p5.js og p5play

Der er masser af måder man kan lave små visuelle animationer og bevægelse på med p5.js. I dette forløb skal vi se på nogle af dem. Vi kommer bl.a ind på nogle temporale strukturer – hvordan man programmerer fænomener over tid samt repræsentationer og billedbehandling. For det første bruger vi et ekstra bibliotek: p5play. Det […]

0 comments

1 node.js

Hvis du er kommet til dette indlæg, har du formentlig prøvet at eksperimentere med p5.js og javascript kode i forskellige sammenhænge. Det du skal lære nu, er en metode som gør det muligt for flere personer at bruge dine sketches samtidigt. Altså flere personer kunne i princippet sidde forskellige steder i verden og tegne på […]

0 comments

2 npm

Indhold NpmExpress packageTilbage til server.jsLad os hoste nogle filerFørEfter…Opsamling Okay, så vi har installeret node – og vi har fundet ud af at vi kan køre en server via kommandoprompten – og starte en fil vi selv har lavet: server.js. Og det er jo super. Men på en måde fik vi ikke helt afsluttet hvad […]

0 comments

3 Sockets

Ok. Så nu har vi en webserver der kører node og som åbner vores egen server.js fil og hoster vores skitse i p5 lokalt på port 3000. Nu skal vi tilføje det kode som gør det muligt for klienter på serveren, at sende beskeder frem og tilbage til hinanden i realtid. Og dermed er vi […]

0 comments

4 Kommunikation

Så er vi næsten i mål. Vi har skrevet koden til en lille webserver vi kan starte og køre, og vi har oprettet forbindelse med en klient – som har fået sit helt eget id. Vi kan åbne to forskellige browservinduer og forbinde til serveren – og i terminalvinduet kan vi de får forbindelse begge […]

0 comments

5 Multiplayer server skabelon

Lad os med udgangspunkt i skabelonen med websockets, prøve at sætte noget funktionalitet op til et lille multiplayer spil. Her skal vi holde tungen lige i munden i begyndelsen. Hvad gør serveren – og hvad gør klienterne? Vi er jo vant til at programmere javascript således, at klienten gør alt arbejdet. Hvis vi vil bevæge […]

0 comments

Websockets med Node.js – elev tutorials

I dette indlæg samles forskellige tutorials hvor elever forklarer nøjagtigt hvordan du installerer node.js og opretter et lille setup med websockets på din egen computer. Udførlig video med alle trin Tekst tutorial med skabelon Websockets med node.js og socket.io  

0 comments

Tegn og gæt med websockets og node.js

Indhold Fremgangsmåde trin for trinOPRET VARIABLE PÅ SERVERENOPRET VARIABLE PÅ KLIENTENSEND BRUGERNAVN FRA KLIENT(ERNE)MODTAG BRUGERNAVNE PÅ SERVERENSTART SPIL FRA SERVERENMODTAG RUNDE PÅ KLIENTERNEMODTAG ORD FRA SERVERENSTART TIMER PÅ SERVERENMODTAG TIDSTÆLLER PÅ KLIENTERMODTAG GÆT PÅ SERVEREN I denne øvelse skal vi forsøge at gøre vores template til et lille spil – nærmere bestemt tegnelegen “Tegn & […]

0 comments

Phillips Hue med node.js

https://developers.meethue.com/documentation/getting-started Find din egen ip-adresse win: ipconfig / mac: ifconfig Find hue-bridge adresse: Kig i app’en under bridge info Brugernavn: fælles – få det på tavlen API: Phillips Hue REST Phillips Hue arbejder som et såkaldt REST API. Det vil sige at man har nogle helt fast vedtagne regler for hvordan man skriver kommandoer til […]

0 comments

Inspiration, links mm

Sjællandske borgere arbejder mindst frivilligt https://www.tveast.dk/artikel/sjaellandske-borgere-arbejder-mindst-frivilligt  

0 comments

Tænke højt test

En tænke højt test er en kvalitativ metode til at teste et digitalt produkts brugervenlighed og udtryk. Ved at guide og observere brugere mens de afprøver produktet, får man indtryk af hvordan andre tænker og oplever et design. Læs mere om teorien bag testen her  For at arbejde med en tænke-højt-test skal man igennem tre […]

0 comments

Forløb: it-system med database

Indhold Lektion 1 + 2 Database: Analyse og modelleringLektion 3: Interaktionsdesign 1Lektion 4: PHPmyadminLektion 5+6+7: Implementering 1OpgaverI Plenum…Individuelle opgaverTilmeldingerSværere/frie opgaverLektion X: Sikkerhed og GDPRLektion XX: Udseende I denne øvelse skal i skabe et it-system, som gør det muligt at oprette og tilmelde sig LAN parties på skolen. I skal altså lave det HTML og PHP […]

0 comments

1 Opret database

Når man skal oprette en database bruger man SQL. Typisk har man et eller andet hjælpeprogram, fx PHPMyadmin, hvor man kan oprette entiteter og attributter uden at skrive SQL selv. Den SQL der kører nedenunder er imidlertid ret simpel og minder om naturligt sprog. Nedenfor er der et par eksempler på de mest almindelige operationer. […]

0 comments

2 Forbind med php

Når vi skal oprette forbindelse til en mysql database, bruger vi php sider. De fungerer på mange måder som en HTML side, men man kan med tagget <?php ?> fortælle serveren, at den skal gøre noget før den sender det færdige html til klienten. Opret en tom side PÅ din server (fx direkte via ftp) […]

0 comments

3 Hent og vis tabeller

Når vi skal hente info i databasen bruger vi følgende opskrift: Byg en SQL querystring (fx) “Select * from Person” Kør strengen med din Connection, og sæt resultatet ind i en ny variabel (det returneres som et array) Løb resultat-arrayet igennem og gør et eller andet med det Lav en ny side PÅ serveren (med […]

0 comments

4 Indsæt

Når vi skal indsætte data bliver der lidt flere trin. Det foregår nogenlunde i den her rækkefølge: Lav en HTML form, som brugeren kan indtaste felterne i (fx titel, starttidspunkt, sluttidspunkt) Når brugeren trykker Send kaldes siden igen – nu med disse variable gemt i et såkaldt POST array, og så Bygges et sql insert […]

0 comments

5 Opdatér

Lad os sige vi har oprettet en bruger, og vil opdatere stamoplysninger (navn, adresse, alder osv). Her vil vi altså lave en side, som henter allerede indsatte oplysninger fra en tabel, og giver brugeren mulighed for at opdatere dem. Det vil sige, at vi må lave følgende operationer: Lav en side som viser stamoplysninger i […]

0 comments

Skabelon

Disse filer indeholder noget af det der skal til for at komme i gang med LAN systemet. Kort fortalt en række php og css filer, der opretter forbindelse til databasen, og har nogle sider der kan noget – men ikke alt! Det er nu opgaven i fællesskab at finde ud af hvad der  mangler, og […]

0 comments

Send info mellem php-sider

Indhold Man bruger arrays til at sende info mellem php-siderGET: Variable efter spørgsmålstegn i URL’enPOST: Variable gemt i en formFordele og ulemper ved GET og POSTGET:POST: Man bruger arrays til at sende info mellem php-sider En PHP side bygger ofte noget op ud fra opslag i databasen. Den kan for eksempel vise en bestemt begivenhed […]

0 comments

Afsluttende opgave: byg et it-system til LAN parties

I denne opgave skal i redegøre for udviklingen af et database-baseret it-system, som gennemgået i forløbet. I skal aflevere en skriftlig opgave af 3-4 siders omfang, ledsaget af en zip-fil med jeres kode (det er meget vigtigt at koden er dokumenteret). Opgaven skal også indeholde en URL til det færdige system – eller så meget i […]

0 comments

Scrum

Har du nogensinde tænkte over hvordan it-systemer bliver til i en stor organisation eller virksomhed i den virkelige verden derude? Lad os sige Facebook vil implementere et eller andet nyt: flere reactions for eksempel. Eller en feature til gruppefunktionalitet. Eller en fejl der skal rettes. Eller… Hvordan prioriterer man hvad der er vigtigst, hvor lang tid […]

0 comments

Kryptering

Indhold 1 – HTML input feltetBrug https…2 Serversiden2.a Escape strengen (undgå SQL injection)2.b HASH passwordet2.c SALT passwordet Salt kryptering er en måde at sikre sig mod visse former for password hacking. Krypteringen foregår i flere trin – lad os kigge på dem et ad gangen. 1 – HTML input feltet Lad os sige at vores […]

0 comments

Data og information

Og meget mere her…

0 comments

Database – hvad er big data?

0 comments

Noter

It-system med database: LAN fester på Skolen Entiteter og attributter Person Person_id (INT,  AI, PRIMARY KEY) Navn (varchar(255), NOT NULL) Alder (INT (16), NOT NULL) Køn (FK, NOT NULL) Tlf (PHONE, NOT NULL) Email (MAIL, NOT NULL) Kontaktforælder tlf (PHONE, NULL) Brugernavn (varchar(255), NOT NULL) Password (varchar, NOT NULL) Køn Køn_id Titel Roller Rolle_id Rolle […]

0 comments

Fang en lyd

Lyd er et godt eksempel på de trin man typisk skal igennem, før man kan arbejde med hardware input i Processing. Betragt nedenstående kodestump. I første linje importeres biblioteket processing.sound. Det er en masse tillægsfunktioner, som fylder så meget at de ikke er medtaget i den grundlæggende software. For at kunne importere biblioteket skal du […]

0 comments

Video eksperimenter

På denne github kan du se en masse eksempler på hvordan man kan manipulere et indgående videosignal live: https://github.com/shiffman/LearningProcessing/tree/master/chp16_video Download biblioteket og pak det ud et sted hvor du kan finde det (eller clone med github, hvis du kan) Opgaver Vælg en af nedenstående funktioner – åbn skitsen og prøv at undersøge nøjagtig hvad der […]

0 comments

Intro til computervision

I denne video gennemgås hvordan man – sådan helt basic – programmerer en simpel form for computervision.  

0 comments

Fang en Video

Editor og sprog: Processing Ressourcer: Learning Processing (video tutorials, eksempler mm) Med Processing kan vi hente mange former for input og en af de væsentligste kilder er selvfølgelig video. Med et webcam input kan man spore bevægelse, objekter, ansigter og mange andre ting. Men hvad vil det egentlig sige at få et videosignal ind i et […]

0 comments

Digtal kunderejse til frivilligt arbejde

Indhold ForundersøgelseTal og statistikAfsenderanalyseKanalerMålgruppeanalyseInterview med afsenderenBudskaber og kommunikationsopgaverInformationsproblemForberedelseHvad er et informationsproblem?Analyseopgave: behov/relevans matrixSkriftlig aflevering: ForundersøgelseUddybningPlanlægningProduktvalgKanalvalgKunderejseProduktionRedskaberProcesEvaluering Dette forløb handler om at markedsføre frivilligt arbejde i Holbæk kommune. I skal ud fra en grundig forundersøgelse planlægge og producere en række kommunikationsprodukter, som kan udvide kendskabet og i sidste ende få flere borgere i målgruppen, til at bidrage […]

0 comments

Databaser: Kageopskrifter

Indhold Databaser er modeller af virkelighedenAnalysenUse CasesNeed to have og nice to haveNeedNiceEntiteter og AttributterDatatyperFagterm: RelationerØvelse: entitet-relations diagram Databaser er modeller af virkeligheden Databaser er modeller af virkeligheden. Facebook har en database – hvad mon der er i den? Jo, der er selvfølgelig stamoplysninger om brugere, oplysninger om ting de har postet, poster de har […]

0 comments