Webshop

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.
  • Tutorial til HTML [1]
  • Tutorial til CSS [2]
  • Tutorial til PHP [3]
• 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. (Gøres igennem phpMyAdmin hvor de insætter nye records i varetabellen)
• Efter de har tilføjet de nye varer skal de forsøge at oprette ordrer hvor de nye varer indgår, hvorefter de tjekker backend.php for at se om de er med.

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 backend.php, hvor ordrerne fra webshoppen vises.

Opgaver:

• Eleverne finder uhensigtsmæssigheder i backend.php og skriver dem ned
• Eleverne skal herefter analysere sig frem til forbedringsforslag - f.eks. sortering
• Eleverne tegner en papirprototype over deres forberede version af backend.php
• Eleverne undersøger kildekoden i backend.php
• 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 backend.php (B/A niveau)

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 webshop er brugervenlig. Som underviser kan du enten vælge om eleverne skal teste:

• Den oprindelige webshop
• Den papirprototype der blev lavet i opgave 2
• Den prototyper der blev laver i opgave 2.1
• Hvis eleverne har lavet opgave 4 kan backend.php 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 webshop

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 webshop.

Enten kan eleverne komme på en case eller underviseren kan udlevere en case.

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.