Webshop
Contents
Status & planer
Dette forløb er færdigt
Der er produceret et worked example der kan hentes her zipfil og ses her webshop
Introduktion
Forløbet kan skaleres til både informatik C/B og IT A. Hvis man gennemfører alle øvelserne bliver de fleste af de faglige mål behandlet og det kan bruge til elevens portfolio eller som en opstart til et eksamensprojekt (B/A-niveau). Forløbet kan dog brydes op således at man kun beskæftiger sig med en eller flere af øvelserne, da de ikke er gensidig afhængige. Dog er introduktionen tilwebshoppen i opgave 1 nødvendig at gennemføre. Slutproduktet kan også varieres og eleverne kan enten aflevere en papirprototype eller en mere eller mindre færdig webshop.
Som underviser kan man selv tilpasse databasen, der lægger til grund for webshoppen, så man kan skabe en bestemt case.
Formål
Eleverne bruger alle webshops til indkøb af forskellige varer og dette forløb har til hensigt at give dem en basisviden om hvilke hensyn man skal tage sig når man designer og udvikler webshops. Desuden vil forløbet give eleverne kendskab til designprincipper, arkitektur, databaser, modellering og programmering.
Læreplansmål
Informatik:
- Interaktionsdesign (C+B): Design af interaktionen i webshoppen
- Arkitekur (C+B): IT-Arkitekturen i webshops
- Data (C+B): Relationelle databaser
- Modellering (C+B): Modellering af flow og process i webshoppen
- Programmering (C+B): Udvikling af webshoppen i HTML, CSS og PHP
Indhold
- Modellering af processer
- Design af brugergrænseflader (gestalt, farver, typografi osv.)
- Database modellering
- Prototyping
- Arkitekturdesign
- Programmering af webapp i PHP
- Test af systemer
Forudsætninger
- Forforståelse: Hvis man agter at eleverne skal programmere en webapp er basisforståelse for HTML/CSS/PHP en klar fordel.
- Teknologi: PC med editor til programmering f.eks. Komodo edit [4] eller Aptana [5].
- Da webshoppen anvender php, så skal eleverne have en lokal server sat op på deres egen pc eller på et webhotel som skole stiller til rådighed.
- Derudover skal hver elev have deres egen MySQL database og en adgang til den gennem phpMyAdmin
Aktiviteter & materialer
Lektionsplan
Antallet af lektioner varierer efter hvor meget vægt man vil lægge på det enkelte emne. Selve udviklingen af app'en tager en del tid, hvis det skal være en prototype, der både visuelt og funktionelt, er af en vis kvalitet.
Materialer
Tekster:
Interaktionsdesign, Kapitel 15, ”Informationsteknologi”. Martin Damhus m. fl., Systime 2013
Gestaltlovene, Niels Gamborg - [6]
Farvernes betydning, Jacob Olsen - [7]
Klient-server og tre-lags-arkitekturen Version 1.0, Henrik Bærbak Christensen - [8]
Typografier
Opgaver
Emnet i dette eksempel er en webshop.
Forløbet er opdelt i en række opgaver, der kan gennemføres i en sammenhæng eller enkeltvis uafhængig af hinanden. :
Opgave 1
Undersøg webshopppen
Varighed ca. 30 minutter
Eleverne får udleveret kildekoden til webshoppen og en adgang til hver sin webshop.
Webshoppen kan ses her Webshop og kildekoden kan hentes her kildekode(zip)
Eleverne svarer på følgende arbejdsspørgsmål:
- Hvilke funktioner er der?
- Hvad mangler der?
- Undersøg koden og forklar hvordan en webshoppen viser produkter og opretter ordrer.
De mangler eleverne registrerer kan bruges som afsæt til de næste opgaver.
Opgave 2
Design og navigation
Varighed cirka 120 minutter
Målet med denne opgave er at eleverne trænes i at modellere problemstillinger og anvende konkret teori til at lave prototyper.
Med udgangspunkt i litteratur om interaktionsdesign, gestaltlove osv. modificerer eleverne app’ens udseende og struktur.
Opgaver:
- På baggrund af deres brug af webshoppen laver eleverne et flowdiagram der viser processen og et strukturdiagram over hjemmesiden
- Eleverne skal lave deres eget redesign og tilpasse strukturen i webshoppen med udgangspunkt i de ideer de fik i opgave 1.
Der tegnes en papirprototype, mens det netop udførte struktur- og flowdiagram tilpasses til ændringerne.
Her kan man vælge at stoppe opgaven på C-niveau eller lade eleverne tilrette designet i opgave 2.2.
Opgave 2.1
Implementering af nyt design
Varigheden varierer efter kompleksitet og omfanget af ændringer - Regn med min. 120 minutter
Målet med denne opgave er at eleverne får forståelse for og træning i at kode i HTML/CSS og PHP.
Implementering af redesign og ny struktur (B/A niveau)
- Eleverne implementerer deres ændringsforslag i app'en (-kræver grundlæggende forståelse for HTML/CSS/PHP)
Opgave 2.2
Styling af webshoppen
Varighed cirka 60 minutter
Målet med denne opgave er at eleverne får forståelse for præsentationslaget og anvender viden om design til styling af hjemmesider.
- Eleverne tilapsser det eksisterende stylesheet så webshoppen får det udseende de øsnker.
- Eleven kan også give webshoppen et navn og indsætte eget logo
Opgaven giver et godt afsæt til at tale om 3-lagsmodellen, hvor vi her arbejder i præsentationslaget.
Opgave 3
Arkitektur - Data
Varighed cirka 60 minutter
Målet med denne opgave er at eleverne får forståelse for datalagets betydning i 3-lagsmodellen. De skal forstå hvordan ændringer i datalaget fører til ændringer i hele systemet, selvom man ikke ændrer ved præsentations- eller applikationslaget.
Webshoppens datalag er en database med fire tabeller (kunde, ordre, ordrelinje og vare). Hent sql filer til importering af databasetabellerne her: SQL filer.
Start lektionen med at præsentere 3-lagsmodellen hvis du ikke har gennemgået den endnu. Hvis den er gennemgået repeteres den kort.
Inden eleverne begynder at ændre i datalaget skal de have billeder af de produkter de gerne vil sælge klar og uploadet til serveren.
Opgaver:
- Eleverne skal nu tilføje deres egne varer. (
- Efter de har tilføjet de nye pizzaer skal de forsøge at oprette ordrer hvor de nye pizzaer bestiller, hvorefter de tjekker oversigt.html for at se om de er med.
- Eleverne skal herefter gå ind og slette gamle ordrer i ordrer.json - Se video - Tjek herefter oversigt.html for at se om det slår igennem.
Opgave 4
Visning af ordrer
Varighed cirka 120 minutter
Målet med denne opgave er at give eleverne indblik i hvordan data præsenteres for brugeren og hvordan det kan ændres.
Eleverne starter med at undersøge oversigt.html, hvor ordrerne fra app'en gemmes.
Opgaver:
- Eleverne finder uhensigtsmæssigheder i oversigt.html og skriver dem ned
- Eleverne skal herefter analysere sig frem til forbedringsforslag - f.eks. sortering
- Eleverne tegner en papirprototype over deres forberede version af oversigt.html
- Eleverne undersøger kildekoden i oversigt.html
- Eleverne analyserer sig frem til hvilke ændringer der skal laves i hvert af lagene i 3-lagsmodellen for at implementere deres eget design (C-niveau)
- Eleverne implementerer deres eget design i oversigt.html
Til underviseren er der lavet kodeeksempler sortering, udvælgelse og visning af bestemte order:
- Sorter ordrer - Højreklik og vælg gem som for at hente filen
- Kun ordrer fra idag - Højreklik og vælg gem som for at hente filen
- Få kommentarer med - Højreklik og vælg gem som for at hente filen
Opgave 5
Test af brugervenlighed
Varighed cirka 90 minutter
Målet med denne opgave er at eleverne skal få indblik i test af systemer
I denne opgave skal du lave en test af om din app er brugervenlig. Som underviser kan du enten vælge om eleverne skal teste:
- Den oprindelige app
- Den papirprototype der blev lavet i opgave 2
- Den prototyper der blev laver i opgave 2.1
- Hvis eleverne har lavet opgave 4 kan oversigt.html også testes - fokus på forskellen mellem testen af den kunderettede del af systemet (frontend) og den del der rettes sig med de ansatte (backend)
Inden testen planlægges og udføres gennemgås test af interaktionsdesign.
- Beskriv hvordan du vil teste om din app er brugervenlig. Beskrivelsen skal som minimum indeholde svar på følgende:
- Hvilke opgaver skal test-deltagerne løse (Lav de spørgsmål som de skal svare på)?
- Hvilken opgave har testlederen?
- Hvor mange testdetagere skal der være?
- Hvad skal der ske før, under og efter testen?
- Udfør testen på jeres prototype. TIP: Lad eleverne teste hinandens prototyper
- Lav tilrettelser på baggrund af den feedback i har fået (vis tilrettelserne ikke skal laves på papir, så skal varigeheden af øvelsen forlænges)
Opgave 6
Opret din egen app
Varighed min. 180 minutter
Målet med denne opgave er at tage de ting eleverne har lært igennem de første opgaver i forløbet og anvende dem til at designe deres egen app.
Enten kan eleverne komme på en case eller underviseren kan udlevere en f.eks. at pizzariaejeren har købt en grillbar og vil også have en app dertil eller lav en app til registrering af fravær.
Pixi
Alle opgaverne kan køres som selvstædige pixiforløb.
Udvidelser og genanvendelse
Skabelonen for undervisningsforløbet kan anvendes til udvikling af flere forløb.
Der er allerede udviklet et ekempel med selv samme app, men hvor datagrundlaget er en MySQL database. Det giver muligheder for at lave mere specifikke dataudtræk med SQL og udvide app'en. Eksemplet kan hentes her: [9] zip: [10], med tilhørende backend (uden design) [11].
Derudover kan man også følge samme skabelon hvor udgangspunktet er en webshop på en php hjemmeside. Se et eksempel her webshop - Download zip med kildekode her zipfil