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 […]
Fag
135 posts
as Rachel Andrews put it: Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns. Huskeregel: justify eller align? Måske virker denne regel åndssvag først, men jo mere jeg bruger […]
CSS Preprocessors Boilerplates is one way towards achieving a responsive and elegant design, but this path will always include one essential flaw: it comes at the expense of your freedom. If what you really want is particular and unique control over your own designs, you will often find that boilerplates […]
Google analytics is a web analytics service offered by Google and a central part of the company’s marketing platform. Basically it works by adding a small javascript (tracking code) to the bottom section of a website, whereafter all user activity is collected and reported to a webservice. You will need […]
This is a completely unordered reference to modern javascript. It includes various examples on how to do stuff the vanilla way.
Build cross platform desktop apps with JavaScript, HTML, and CSS Electron is a node-based system that makes it very easy to convert your website into a desktop app. Beneath the surface, Electron uses the Chromium rendering engine and the nodejs runtime, to complete the task. Electron is developed and maintained […]
In short, a CSS boilerplate is a css template – a file with premade css you can download and use. Typically assisted by a style guide or reference, that gives you a set of rules (classes, structures) – and when you follow these, you’ll quickly be able to produce well-formed, […]
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). To move an element 50 […]
Efter nøjere forundersøgelser og interviews med relevante hovedpersoner i branchen, er jeg nu klar med det afsluttende og absolut sidste oplæg til jeres eksamensmappe og forberedelse dertil. Dette dokument – samt dokumentet med fagtermer og huskeord udgør hermed det vigtigste i skal sætte jer ind i og aflevere, før jeres […]
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 autorisering Handlebars javascript Materialize css jQuery 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 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, […]
Dette dokument indeholder korte forklaringer og links til en række centrale begreber i kommunikationsfaget. Dokumentet kan bruges som reference og terminologi, fx ifbm rapportskrivning eller eksamen i faget på gymnasialt niveau. Dokumentet er inddelt efter kommunikationsarbejdets faser, men kan også bruges som opslag gennem indholdsfortegnelsen eller søgning. Faser i kommunikationsarbejde […]
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 […]
Projektbeskrivelsen skal afleveres på Lectio 25.2. 2019 kl. 23. Der er afsat 2 elevtimerRapporten skal afleveres på Lectio senest 26.04.2018 kl. 23.59. Der er afsat 12 elevtimer. Projektbeskrivelsen Projektbeskrivelsen skal omfatte tre ting: Beskriv ideen med det planlagte IT-produkt Skitser hvilke værktøjer/teknologier, der forventes anvendt Giv et udkast til kravspecifikation […]
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 Vi vil […]
På slottet har vi en del faste ressourcer og lokaler – fx 3D printere, VR Lab, musiklokalet, almindelige printere samt værksteder. Men disse lokaler bliver egentlig ikke ret tydeligt præsenteret for hverken elever eller lærere: hvad er reglerne for brug – og hvordan bruger man dem helt praktisk? Det skal […]
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, […]
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 […]
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 […]
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 […]
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 […]
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 kald direkte ind i api’ets søgefunktionalitet, og dermed skabe nogle anderledes […]
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 […]
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 […]
A wireframe is a basic skeleton of your layout. Wireframes don’t use real user interface elements; instead, they use placeholders — UI elements are represented as boxes Usually, wireframes used early on in the design and development process to validate information architecture and general user flows. Wikipedia Apr 24, 2018 […]
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
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 […]
I denne øvelse skal vi lave et tekstbaseret spil med objektorienteret programmering i Python. Det er ikke fancy – et tekstbaseret spil, hvor brugeren tager beslutninger som tekst, og sådan. Men det giver et overblik over hvordan du laver klasser – objekter – i Python. Og bruger dem til at instantiere objekter som unikke […]
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 […]
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 en webserver er. Normalt […]
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 […]
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 […]
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 […]
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
I denne øvelse skal vi forsøge at gøre vores template til et lille spil – nærmere bestemt tegnelegen “Tegn & Gæt”. Vi starter med en klient/server template, der kun akkurat kan det mest nødvendige. Hent multiplayer server template her Loading… Fremgangsmåde trin for trin Lad os først teste applikationen i […]
EN AF OS case – HTX 2018-2019 (1) Læs powerpointen og opret et indlæg, hvor i begynder med jeres forundersøgelse. Besvar følgende spørgsmål: Hvilke centrale fakta om psykisk sygdom finder i? (vælg mindst tre punkter) Mindst 1/2 m danskere er ramt af en psykisk sygdom (En Af Os) Ca. hver […]
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 […]
Sjællandske borgere arbejder mindst frivilligt https://www.tveast.dk/artikel/sjaellandske-borgere-arbejder-mindst-frivilligt
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 […]
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 der er nødvendigt for at tilmelde sig og gemme tilmeldinger i en database. Men i skal også lave det interaktionsdesign, som […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 og håndtere tilmelding til netop den ting. Og hvis php-siden skal slå en bestemt begivenhed op i databasen, må den jo […]