Beacons og HTML/CSS/JavaScript

Materialet er leveret af fagkonsulenten som supplement til vejledningen for faget.

Løsningen skal være baseret på placering af Beacons på “Til salg”-skilte foran huse, hvor potentielle købere via deres smartphone kan få oplysninger om boligen. Omfang: 5-20 lektioner á 45 min.

I dette forløb vil vi anvende teknologi til at forbedre adgangen til informationer. Ud fra et konkret eksempel skal vi konstruere en hjemmeside, der tilgås via Beacons og ændrer tilgængeligheden til informationer om huse til salg.

Eksemplet vil have en klar merkantil toning og tænkes brugt som basis for udvikling af nye innovative/merkantile forløb/elevprojekter. Dog vil forløbet kunne udfoldes til områder der også vedrører de andre gymnasiale retninger.

Forløbet forudsætter at eleverne er gjort bekendt med innovationsbegrebet og tidligere har arbejdet med udvikling af hjemmesider. Det forventes at de har kendskab til HTML, CSS og JavaScript.

Formål

Det overordnede formål med forløbet er, at eleverne fra idéfase til implementering får lov til at udvikle en teknisk innovativ løsning til en problemstilling.

Forløbet skal give eleverne en træning i at planlægge og strukturere et udviklingsforløb og ved at arbejde med kodning, programmering og et teknisk set-up, skal eleverne udvikle en innovativ IT-løsning med fuld funktionalitet.

Læreplansmål

Projektforløbet har fokus på følgende faglige mål fra Informatik C:

Konstruktion af et IT-system

Der fokuseres på at eleverne arbejder systematisk ud fra en udviklingsmodel.
Der udarbejdes low-fidelity prototyper som gradvist forbedres og til sidst kodes i HTML.

IT-systemers påvirkning af den menneskelige aktivitet

Der ses på forandringsprocesser på boligmarkedet. I fokus er den ændring i adfærd systemet kan generere, for personer der ønsker at se på bolig og for ejendomsmæglernes muligheder i forbindelse med boligsalg.

Innovation

Der er fokus på, at eleverne gør rede for innovationsgraden af IT-systemet. Løser innovationen en reel mangel/pain? Derudover skal de forholde sig til om innovationen ligger i interaktionsdesignet, funktionaliteten eller dataanvendelse (ved udvidelse til databaseadgang) - eller potentielt i alle dele.
4p-modellen er anvendelig til afklaring af innovationsgraden
(Evt. Business Model Canvas)

Interaktionsdesign

Elementer for interaktionsdesign diskuteres og tages i anvendelse i forbindelse med udvælgelse af indhold og design af brugergrænseflader, samtidig med at et responsive, mobilvenligt design skal overvejes.
De udarbejdede HTML sider kobles til en CSS-fil.

Programmering

En dynamisk dimension skal tilføjes til hjemmesiden. Der programmeres en lille låneberegner til fastlæggelse af terminsydelsen på et annuitetslån.
Der programmeres i JavaScript.

Datarepræsentation

Udvidet version af hjemmesiden med databaseadgang.
Hvis forløbet afvikles på B-niveau er der mulighed for at have interaktion med en database direkte fra hjemmesiden. En mulighed er her at oprette en formular hvor mulige købere kan booke en fremvisning af den enkelte bolig direkte på hjemmesiden.
Der programmeres i PHP og foretages databaseforespørgsler i SQL.

Planlægning/overvejelser

Forløbet går ud på at eleverne skal konstruere en løsning til præsentation af huse for en ejendomsmægler. Løsningen skal være baseret på placering af Beacons på “Til salg” skilte foran huse, hvor potentielle købere via deres smartphone kan få oplysninger om boligen.

I konstruktionen skal det være muligt at beregne på lånemuligheder direkte på hjemmesiden præsenteret af ejendomsmægleren.

I et udvidet projektforløb, der også inkluderer PHP, SQL og en kobling til en database, skal give potentielle købere mulighed for at tilmelde sig til en fremvisning af boligen.

Dette er set i et innovationsperspektiv ikke en radikal ændring af nuværende praksis, men blot proces- og produktinnovation, og forløbet er et eksempel hvor elevernes tekniske formåen vil være tilstrækkelige til at få ført projektet gennem alle udviklingsfaser og ende med et færdigt og funktionelt produkt.

Forudsætninger

Eleverne skal have kendskab til grundlæggende HTML, CSS og JavaScript og basale principper for interaktionsdesign.

Derudover vil det være en fordel at de også har kendskab til metoder til brugervenlighedstest og systemtest.

Ligeledes bør eleverne enten i forbindelse med forløbet, eller inden kende til radikal og inkrementiel innovation, 4p-modellen og evt. Business Model Canvas.

Forløbets opbygning

Forløbet forventes i sin fulde længde at vare 15-20 lektioner á 45 min, hvis man vælger ikke at inkludere databaseadgang.

En overordnet struktur af forløbet indeholder følgende faser:

Delfase og varighed	Indhold	Arbejdsmetoder
Innovation 2 lektioner (2 x 45 min.)	Innovationsbegrebet, 4p-modellen, evt. Business Model Canvas.
Hjemmesidekonstruktion 2 lektioner (2 x 45 min.)	Systemudvikling, Prototype.
Kodning af siden 4 lektioner (4 x 45 min.)	HTML og CSS.	Eleverne tager udgangspunkt i tidligere udarbejdede hjemmesider, som de modificerer/tilpasser til nuværende projekt (use-modify-create).
Programmering af interaktion 4 lektioner (4 x 45 min.)	JavaScript.	Eleverne tager udgangspunkt i tidligere scripts. Metoden er Stepwise Improvement, hvor eleverne løser opgaven ved at dele den op i mindre dele og genbruge/udvide tidligere udviklet kode.
Klargøring af Beacons 2 lektioner (2 x 45 min.)	Download af apps, opsætning og forbindelse. Placering af webside på server.	Worked example - eleverne benytter følgende: How to Configure your RadBeacon Dot with an Android Device (YouTube) Opsætning af Beacon - vejledning
Testning og implementering 2 lektioner (2 x 45 min.)	Placering af Beacons. Test af brugergrænseflade og funktionalitet.
Præsentation 2 lektioner (2 x 45 min.)	Fremlæggelse eller præsentation for eksterne brugere.

Arbejdsmetoder og produkt

Gruppearbejde med fokus på et produkt som kan tilgås via mobiltelefon og opsætning af beacons.

Grupperne afleverer en dokumentation af deres udarbejdede løsning, - med mock-ups, kodeeksempler og en funktionel digital prototype.

Der kan med fordel gøres plads til en mundtlig præsentation af produktet, da dette ligger i tråd med eksamensformen.

Arbejdsmetoder og produkt

Gruppearbejde med fokus på et produkt som kan tilgås via mobiltelefon og opsætning af beacons.

Grupperne afleverer en dokumentation af deres udarbejdede løsning, - med mock-ups, kodeeksempler og en funktionel digital prototype.

Der kan med fordel gøres plads til en mundtlig præsentation af produktet, da dette ligger i tråd med eksamensformen.

Teknisk set-up

Eleverne skal i deres arbejde have PC/Mac, mobiltelefon og Beacons til deres rådighed.

Derudover skal de anvende en HTML-editor og et FTP-værktøj.

Desuden skal hjemmesiden placeres på en offentlig tilgængelig webserver.

Hvis man ønsker at arbejde med det udvidede projektforløb, hvor der kobles en database til hjemmesiden og der dermed kodes i PHP, skal der også installeres en lokal webserver hos de enkelte elever/grupper.