1. No category

Projekt 3,2 WEBSITE with DATABASE
WEBSITE
WITH
DATABASE
Projekt: 3,2. oktober 2014
Lærere: JHI/TUJE
Klasse: MulA13
Gruppenr: MULA3
side
1
Projekt 3,2 WEBSITE with DATABASE
Faktaark:
side
2
Projekt 3,2 WEBSITE with DATABASE
Indholdsfortegnelse:
Faktaark:
.
.
.
.
.
.
.
.
.
Indholdsfortegnelse:
Indledning
Processer
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Målgruppeanalyse
.
Argumentation for designvalg
Designmanual proces
Designbrief proces
Design Brief
Logo
.
.
.
.
.
Use Case
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Attributliste
Use Case
.
.
Modellering proces
ER-Diagram
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Test cases
.
PHP kodeeksempel
.
Projektplanlægning
Konklussion
Kildeliste:
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Bilag: fra side 24 til 29
.
Design Manual
.
.
2
3
4
5
6
10
11
11
11
13
14
14
15
16
17
18
20
21
23
24
25
25
side
3
Projekt 3,2 WEBSITE with DATABASE
Indledning
Vi har i tidligere projekter beskæftiget
os med enten back-end del eller frontend del. Dette projekt forbinder disse
to dele til et samlet brugbart website
der tager udgangspunkt i et givent
emne inden for musik. Vores tildelte
emne er Disco, der skal virke som et
gennemgående tema på websitet.
Websitet skal præsentere et ratingsystem, som brugeren skal kunne bruge og
forstå. Sitet skal fremstå brugervenligt
for vores målgruppe og ikke mindst
skal der være noget grafik, musik og
interaktive elementer der skal tiltrække
brugeren.
side
4
Projekt 3,2 WEBSITE with DATABASE
Processer
Vi arbejder på at designe indefra og ud.
Det vil sige at vi først må tage stilling
til hvilken målgruppe vi har med at
gøre og hvilke funktioner der skal være
tilgængelige på websitet. Når vi har
disse ting på plads kan vi begynde at
lave wireframe og designvalg der skal
ligge til grund for websitets opbygning.
Processen er derfor meget vigtig når
man går i gang med et stort projekt som
dette. Alt skal laves i en bestemt rækkefølge for at man kan ende ud med et
produkt der taler til målgruppen.
side
5
Projekt 3,2 WEBSITE with DATABASE
Målgruppeanalyse
Disco er en musikgenre som alle kender
og de fleste kan lide. De har minder fra
musikken fra familiefester, første kys,
osv. Den umiddelbare målgruppe kunne
derfor rumme alle disse menneske og
aldersgrupper med deres minder som
de har opbygget gennem livet med de
drømme de har drømt.
Målgruppe:
Vi har valgt at være meget specifik i
vores målgruppe, da mange i ovenstående allerede har kendskab til hvor
de kan finde deres ynglings disco toner.
Vores målgruppe vil derfor være
kvinden født sidst 1950 og op gennem
1960erne, Hun har gennem sit liv lyttet
til radio eks. P3, Hun har ingen eller
kort uddannelse, hun har kun lille eller
ingen interesse for IT/smartphones. Hun
har ofte også problemer med at bruge /
finde de tjenester og informationer på
internettet/smartphones og også problemer ved at bruge diverse APP’s som
hendes børn ofte må downloader for
hende til telefonen.
Lavprovinsionel:
Hun er traditionel og lever livet i
provinsen i eget hus som hun og manden har knoklet for at få, hun kan også
bo i en mindre by i provinsen i lejet/
andel rækkehus eller lejlighed. Det er
de traditionelle varer der bliver købt i
lavprissupermarkeder og der er traditionel madlavning. Der bliver hæget om
traditioner, så der bliver holdt tradi
tionel Påskefrokost og Mortensaften og
div. andre traditionsrige begivenheder.
Hun har stærke familie traditioner og
ser familie som en ophøjet størrelse.
Økonomisk:
Hun passer sit job, er trofast og loyal
mod sin arbejdsgiver.
Der bliver sparret på pengene, rejser er
der ikke mange af – måske en campingvogn som står som fast-ligger-vogn på
en campingplads i DK. Der bliver ikke
købt designer- og eller luksusvarer.
Bilen hvis sådan en haves er passet og
plejet og omtrent 10 år gammel.
Der er sparret op til pension gennem
arbejdet og måske en smule ved siden
af. Huset/andel (hvis sådan et haves) er
en del af opsparingen.
Teknologi:
Hun er bange/nervøs for de udfordringer teknologi/internettet/smartphones har
bragt med sig. Hendes kendskab er lille,
hun får ofte hjælp til at få installeret
APP’s og giver hellere telefonen fra sig
end at sidde med installeringer selv.
Hun er skræmt ved tanken om kun
at modtage post fra det offentlige via
e-boks.
Politisk observans:
Hun stemmer med høj sandsynlighed
DF, hvis der i familien har været
tradition for at stemme på Social-
side
6
Projekt 3,2 WEBSITE with DATABASE
demokraterne er det der hun sætter sin
stemme – dog med en vis usikkerhed da
hun har en forkærlighed for det nære og
danske.
Hun tilhører det Traditionelle-individorienterede Segment, Hun er bange
for det fremmede og ser gerne sig og
sine og de svage i det danske samfund
prioriteret fremfor at der bliver sendt
økonomisk støtte udenlands.
Interviews: Nedenstående er tre interview med
kvinder – der er ingen der er et helt
klart billede på vores målgruppe men
kvinder der sagtens kunne være i en del
af vores målgruppe.
Interview med tre forskellige kvinder
der ELSKER Disko og 80’er musik.
Beskrivelse:
1. KVINDE født 1963, gift på 25. år,
uddannet pædagog, født ind i arbejderklassen, opvokset i Greve Strand,
interesser som barn gymnastik og heste.
Ikke stærk i skolen til opgaver. Uddannet sent I livet. Mor til 4 børn nu bosiddende på gård i Jylland i en skov med
plejebørn, børnebørn og heste omkring
sig. 3 Biler VW, Chrystler, Jeep og 12
personers bus.
2. KVINDE født 1965, samlevende
på 12. år, uddannet SOSU-assistent,
født ind i arbejderklassen, opvokset
i København, i skolen var venner
og frikvarter det interessante. Bor i
København N lejet lejlighed 3 værelser,
Uddannet sidst i tyverne. Ingen børn,
rejser ofte på skiferie. Ingen bil.
Interviewet er gennemført via TNSGallup nedenstående segment stammer
fra TNSGallup og er ikke skrevet af
medlemmer fra gruppen
“Resultat via TNSGalup
Kvinden tilhører det Traditionelle-individorienterede Segment
Gør-det-selv & have-arbejde
Teknologi-skepsis
Fædrelandskærlighed
Pensionister
I det Traditionelle-individorienterede
segment er det nøgleord som fædrelandskærlighed, teknologi-skepsis samt
gør-det-selv, der i stor udstrækning kan
danne rammen for dette befolkningsudsnits udseende. Her finder man den
ældre generation, der nyder sin pensionisttilværelse og ikke ønsker, at dagligdagen skal bryde med traditionelle
danske rammer og værdier. Personerne i
dette segment har typisk lavere indkomster og ofte ingen eller en lavere
uddannelse. De har overvejende til huse
i provinskommunerne – især vest for
Storebælt, hvor landejendomme eller
gårde ofte er den foretrukne boligform.
Personerne i dette segment er af den
opfattelse, at Danmark skal passe
sig selv, løse sine egne problemer og
generelt være kraftigt tilbageholdende
på den internationale scene. Personerne i det Traditionelle-individorienterede segment har stor kærlighed
til sit fædreland, og det er her Dansk
Folkeparti henter sine kernevælgere.
Personerne i det Traditionelle-individorienterede segment ynder at leve efter
et mere gammeldags familiemønster,
side
7
Projekt 3,2 WEBSITE with DATABASE
hvor manden indtager en mere dominerende rolle. På hjemmefronten bruger
husmoderen meget tid på huslige sysler,
og i køkkenet står den på traditionel
dansk mad (indkøbt i en discountbutik) og hjemmebag, hvis hun ikke syr,
broderer, hækler eller læser den sidste
nye romannovelle i ugebladet. Mandens
domæne findes i haven eller hobbyrummet, hvor interessen for havearbejde og
gør-det-selv arbejde dyrkes i høj grad.
Det Traditionelle-individorienterede
segment interesser sig i stor udstrækning for underholdning i TV samt for at
læse lokalstof i aviser. Medier såsom
Familie Journalen, Hjemmet, Ude og
Hjemme, Se & Hør, tilbudsaviser fra
supermarkeder og gratis distriktsblade
eller lokalaviser udgør de foretrukne
medievalg. Man har stor skepsis over
for den teknologiske udvikling og er af
den opfattelse, at moderne teknik tager
magten fra menneskene. Rygning, især
af hjemmerullede cigaretter er relativt
udbredt i det Traditionelle-individorienterede segment, og mange har en stærk
spillelidenskab for Lotto, oftest med
Joker.”
Beskrivelse: 3. KVINDE født 1973, samboende
på 6. år, uddannet grafiker, født ind i
arbejderklassen/mindre erhversdrivende, opvokset i Solrød Strand, interesser som barn heste. Stærk i skolen
til opgaver. Gymnasieluddannelse plus
erhversuddannelse. Mor til 2 børn.
bosiddende i Karslunde ved stranden,
kæresten virksomhedsejer – 2 biler
BMW/Golf
Interviewet er gennemført via TNSGallup nedenstående segmenter stammer
fra TNSGallup og er ikke skrevet af
medlemmer fra gruppen
“Resultat via TNSGalup
Tilhører det Moderne-individorienterede Segment
De dynamiske unge
Sin egen lykkes smed
Pionerer
I det Moderne-individorienterede
segment finder man de unge, der er
med fremme og oppe på beatet. De er
dynamiske og karrierelystne og villige
til at yde den indsats, der skal til for at
nå højt op på karrierestigen. Det er ikke
nødvendigvis en kort eller lang akademisk uddannelse, der har banet vejen
for deres succes eller den overrepræsentation af højere indkomster, som er til
stede i det Moderne-individorienterede
segment.
Personerne i dette segment udgøres
hovedsageligt af unge i alderen 20-39
med en klar overrepræsentation af
mænd. Mange har endnu ikke stiftet
familie og er stadig hyppige brugere
af aktiviteter uden for hjemmet. De er
synlige i det pulserende gadebillede på
cafeer, restauranter, diskoteker og biografer. Deres udseende og ydre fremtoning står ligeledes højt på dagsordenen, når de skal gebærde sig i deres
fremadstormende tilværelse, og derfor
sværger de til sport samtidig med, at de
også er hyppigere brugere af solarier.
Knaphed på tid karakteriserer det
moderne-individorienterede segment,
side
8
Projekt 3,2 WEBSITE with DATABASE
hvorfor der ofte står færdigretter på
menuen, hvis de da ikke har købt deres
mad ude. Selvom deres hverdag ofte er
præget af travlhed og knaphed på tid,
tager de sig også tid til deres venner og
familie, og når der skal holdes ferie er
det storbyferie, sportsferie, skiferie eller
en forlænget weekend i udlandet, som
står øverst på ønskelisten.
Personerne i det moderne-individorienterede segment er deres egen lykkes
smed og vil gerne klare skærene selv
uden indblanding fra offentlig side,
hvilket ligeledes afspejles i deres stærke
politiske tilknytningsforhold til Venstre og Konservative. De synes, at det
er for let at få penge fra det offentlige,
de sætter frihed til at vælge i højsædet
og ønsker, at Danmark skal fokusere
på sine egne problemer, før man yder
økonomisk støtte til andre lande.
De moderne-individorienterede er
stærkt interesseret i erhvervsforhold,
hvilket naturligvis også afspejles i deres
medievalg, idet printmedier såsom
Jyllands-Posten, Dagbladet Børsen,
Børsens Nyhedsmagasin, Erhvervsbladet og Penge & Privatøkonomi er
hyppigt foretrukne medier. Derudover
rangerer M!, Golf Magasinet, Tipsbladet, og diverse Bilmagasiner også
højt på deres læsepræferenceliste.
Ny teknologi, IT, biler, stereoanlæg/
Hi-fi og det moderne-individorienterede
segment er størrelser, som går hånd i
hånd. De moderne-individorienterede er
hyppige brugere af PC’ere og internet
såvel på arbejdspladsen som i hjemmet,
og deres tilstedeværelse på internettet
bruges på at deltage i konkurrencer
og klikke på bannerreklamer, og ikke
mindst på nyheds- og informationssøgning. Søgning efter finans- og erhvervs-information, anvendelse af PC-/
net-banking, samt gennemførelse af
aktie- og obligations-handler via internettet synes ligeledes ofte at berettige
deres tilstedeværelse på internettet.”
side
9
Projekt 3,2 WEBSITE with DATABASE
Argumentation
for designvalg
Designvalg er vigtige i processen
fordi de skal tages på baggrund af det
research vi har lavet af målgruppe og
samfundet i tidsperioden. I vores afsnit
om designvalg kan du læse mere om
hvilke designvalg vi har taget og hvilke
overvejelser vi har gjort i forbindelse
med disse.
Musik 70-80’erne
Disco er meget karakteristisk for
70’erne og start 80’erne. På baggrund
af vores research af genren og tiden
omkring denne er vi kommet frem til
nogle klare karakteristika som vi vil
inddrage på vores site.
Websitets udtryk
Vores website udtrykker en bestemt
stemning som først og fremmest kommer til udtryk i baggrunden. Den er
varm og gylden og får tankerne ledt
hen på genskæret fra en diskokugle
eller bobler i et champagneglas. Dette
får siden til at virke festlig men holder
stadig et sofistikeret look i og med at
den er holdt i rolige farver.
Farvetema
Websitet er holdt i varme gyldne farver
i lyse brunlige nuancer. Dette virker
afbalanceret i forhold til indholdet som
er meget farverigt og opsigtsvækkende.
Vi prøvede i første omgang at holde
websitet i en dunkel stemning med en
mørk baggrund med kraftige farver og
mørke contentboxe men vi fandt hurtigt
ud af at dette ville blive for tungt og
fjerne fokus fra vores indhold.
Websitets opbygning
Websitet er bygget op af contentboxe
der er firkantede med borderradius der
gør hjørnerne runde. Dette har vi gjort
for at gøre sitet mere blødt og roligt. Da
en stor del af vores målgruppe er skeptiske overfor teknologi vil vi derfor lave
siden så let og overskuelig som muligt.
Vi har valgt at bruge skrifttypen Calibri
Light, da den er letlæselig for brugeren.
Skrifttypen er ofte brugt som standard i
tekstprogrammet Word som de fleste fra
vores målgruppe bruger med jævnlige
mellemrum.
Menuen på vores website er placeret i
venstre side med menupunkterne som
en nedadgående liste uden list style
item. Dette er lidt gammeldags og
imødekommer vores brugere da den
er meget simpel. Det er typisk for lidt
ældre hjemmesider at have menuen i
venstre side og den vil derfor fungere
som et genkendeligt element.
side
10
Projekt 3,2 WEBSITE with DATABASE
Designmanual
proces
Designmanualen er en præcis og
detaljeret gennemgang af alle designmæssige elementer i projektet.
Rettesnor for andre
Designmanualen er tilegnet andre
designere som skal kunne se tekniske
retningslinjer for at kunne holde den
samme stil som oprindeligt var tiltænkt.
Der vil derfor være nogle dos and
don’ts i forbindelse med en designmanual.
Vi har taget udgangspunkt i en skabelon
som er udarbejdet i klassens undervisning. Der er flere forskellige kategorier
som skal inddrages bl.a. logo, layout,
billeder og typografi. Logoet skal
dokumenteres i form af flere forskellige
udgaver og filtyper. Billedtypen skal
dokumenteres og forklares så man er
fuldstændig klar over hvad man må og
ikke må.
Designbrief
proces
I sidste del af projektet finder vi ud af
at designbrief skal laves i starten af et
projekt, som noget af det første. Når vi
tænker tilbage kunne vi godt have brugt
et designbrief i starten af processen som
vi alle var enige om og kunne arbejde
ud efter for at få en mere ensformig
arbejdsgang i projektet. Vores designbrief er derfor skrevet ud fra de designmæssige elementer som vi hen ad vejen
er blevet enige om og som vi i sidste
ende er tilfredse med.
Design Brief
Produktet skal munde ud i en showcase
hjemmeside der har et professionelt
look og tage udgangspunkt i musikgenren Disco.
Grundidéen med hjemmesiden er at
man skal kunne bedømme udvalgte
medier i form af billeder, animationer
og videoer. Brugeren skal også kunne
se en top-liste med
USP
Vores Unique Selling Point (USP) er at
brugeren får en helt speciel oplevelse.
Brugeren bliver taget tilbage i tiden
og kan gense en masse indhold som er
diskorelateret.
Brugeren
Vi vil gerne ramme kvinden der er født
sidst 1950 og op gennem 1960erne.
Hun vil have en masse minder forbundet med denne tid og musik, som hun
på websitet kan gense og glæde sig
over.
Discotiden forbinder man ofte med
mange forskellige farvesammensætninger. Man kommer ofte til at tænke
på regnbuens nuancer i forbindelse
med lys på diskoteket. Vi vælger dog
at gå en anden vej mht. selve websitets
rammer. Det skal virke roligt og lidt
afdæmpet da vi vil sætte fokus på indholdet som kommer til at være meget
farverigt og opsigtsvækkende. Derfor
holdes websitets farver i lysebrune
side
11
Projekt 3,2 WEBSITE with DATABASE
gyldne nuancer som vil lede brugeren
hen på genskæret fra en diskokugle
eller champagne.
Indhold på sitet
De billeder vi vil bruge på websitet
kommer til at være farverige, festlige og
med mennesker. Det er vigtigt at vores
brugere allerede har stiftet bekendtskab
med vores billeder før. Derfor vil vi
bruge vinyl artwork som grundlag for
vores billeder.
Videoerne skal være youtubeklip som
vi indlejrer på websitet. De skal være
sange af forskellige kunstnere som
vi mener har haft en betydning for
disko-tiden. Alle videoerne skal være
musikvideoer så de visuelt er spændende for brugeren.
Animationerne på websitet er sjove
og uformelle. De er meget farverige,
underholdende og meget sigende for
opfattelsen af diskotiden.
Der kommer til at være en klar linje
mellem vores tre slags medieindhold.
De samme kunstnere vil gå igen hvilket
vil gøre websitets indhold mere sammenhængende.
Typografi
Fonten skal være letlæselig da vores
målgruppe er en lidt ældre generation.
Vi bruger Calibri Light da den er nem
at læse på web og virker som standard i
andre programmer såsom Word.
Vi vil være meget uformelle og “need
på jorden” i vores talemåde på websitet. Brugeren skal føle sig hjemme og
tilbage til den diskotiden. Vores måde at
skrive på vil være ligetil og uden brug
af fremmedord. Vores målgruppe har
ikke nødvendigvis særligt lange uddannelser hvilket er med til at bestemme
hvordan kommunikationen udformer
sig på websitet.
Opbygning af sitet
Layout skal bygges op i form af en baggrund, nogle content boxe med en lidt
nedsat opacitet. Derudover skal logo og
søgefeldt placeres øverst på siden som
en header. En footer vil ligge i bunden
af sitet som en fane med oplysninger
om firmaet bag samt ikoner til sociale
medier.
Menuen skal ligge I højre side med
nedadgående struktur uden list style
item. Dette vil fremstå lidt gammeldags så vi imødekommer målgruppens
teknologi skepsis.
side
12
Projekt 3,2 WEBSITE with DATABASE
Logo
Tidsperiode 1975+ til midt 1980
Musikgenre: Disco
Efter research besluttede vi at logostil skulle stilmæssigt associeres med
perioden. Kigger man på nettet/pladeomslag ses skrifttyper med forskellige udsmykninger, streger, stjerner,
cirkulære former osv. Tidsperioden
fremstår som farverig – i 70’erne mere
dæmpet mens 80’erne er præget af klare
farver der nærmer sig neon.
Da vi nu er i 2014 har vi besluttet at
blande noget af disco-tidens stil med
elementer fra vores egen periode, Vi har
valgt at bruge de metalliske farver for at
give vores logo og site et mere nutidigt
look. De metalliske farver er meget
oppe i tiden og for ikke at virke for
70-80’agtige har vi blandet elementer
fra begge perioder.
side
13
Projekt 3,2 WEBSITE with DATABASE
Modellering proces
ER-Diagram
ER-diagrammet er noget af det første vi
laver for at få et overblik over databasens struktur. I første omgang var
vi meget i tvivl om ER-diagrammets
opbygning, fordi rating-systemet skulle
implementeres. Der er mange måder
hvorpå man kan løse problemet vedr.
rating. Vores første udkast til ER-diagrammet indeholdt både artister, albums
osv. Dette fandt vi hurtigt ud af ville
blive for kompliceret og ikke nødvendigt i forhold til det vores website
skulle bruges til.
Det endelige ER-diagram er mere
simpelt og indeholder rating systemet.
Hver mediefil der kan bedømmes ligger
under tabellen Media. Den indeholder
mediaId, navn, link og en foreignkey
der hedder media_TypeId_fk, som
henviser til tabellen MediaType. Denne
tabel beskriver hvilken slags fil der er
blevet oprettet fx billede, animation
eller video. Når en video bliver bedømt
får den enkelte stemme et unikt Id som
det ses i votes tabellen. Derudover deler
den en sammensat primary key mellem
value og media tabellerne. Det betyder
at hvert voteId har et bestemt valueId,
som vi har forudbestemt er et tal mellem 1-5, samt mediaId som bestemmer,
hvilken fil bedømmelsen skal tilknyttes.
side
14
Projekt 3,2 WEBSITE with DATABASE
Attributliste
Attributlisten indeholder alle de infor
mationer vi skal bruge til at oprette
databasen. Først og fremmest kan man
se tabellernes navne. Under hver tabel
har vi skrevet de tilhørende attributter
og tilføjet deres værdier og eventuelle
noter. Værdierne beskriver hvilken
slags data vi har med at gøre, hvilket
resulterer i at vi indsætter INT når vi
attributten er et tal og VARCHAR hvis
data er bogstaver. Noterne viser at
attributten evt. er en primarykey og om
den skal være autoincrement! Den sidste kollonne hedder Num/Alphanum og
sætter en regel for hvilken slags syntax
der hører til attributten. Hvis attributten
er et tal må der kun være tal, men hvis
attributten er VARCHAR må der både
indgå tal og bogstaver.
side
15
Projekt 3,2 WEBSITE with DATABASE
Use Case
For at sikre os at vi har styr på websitets funktioner laver vi use cases.
Ud fra use case modellen kan man se
hvilke funktioner eller begrænsninger
der er opstillet fra brugerens og administratorens perspektiv. Nedenfor vil
du kunne se en mere dybdegående use
case beskrivelse af funktionen der gør
det muligt for brugeren at bedømme
nogle mediefiler der ligger tilgængeligt
på websitet. Den beskriver bl.a. hvilke
starttilstande kan være for at man kan
påbegynde netop denne funktion.
Forventet forløb:
•
•
Navn: Rating af mediefil
Id: UC-1
Beskrivelse: Man skal kunne bedømme
de forskellige mediefiler der ligger på
hjemmesiden.
Mål: Man skal få vist hvor mange
stjerner man har givet den pågældende
fil.
Starttilstande:
•
•
Man skal være inde på en underside
hvor der er vist et enkelt billede, en
gif eller et youtubeklip.
Man skal være inde på en af kategorisiderne hvor alle filer fra samme
medietype er vist.
Hyppighed: Hyppigheden er ca. 5 ratings pr. person der besøger siden.
•
Use case begynder når brugeren vil
vurdere den fil som brugeren har
været inde på.
Brugeren vil vurdere mediet på
en skala fra 1-5 stjerner. Brugeren
trykker på det antal stjerner der skal
gives.
Use case ender når brugeren har
modtaget en bekræftelse af at rating
er modtaget og behandlet.
Sluttilstand: En side med bekræftelse
kommer op og en knap der linker til
top-10 liste med højest ratede filer.
Aktører:
•
•
Brugeren (vurderer ved at trykke på
det antal stjerne han/hun vil give)
Administratorer opdaterer filer der
kan rates.
side
16
Projekt 3,2 WEBSITE with DATABASE
Test cases
Test cases hjælper os med at teste de
use cases vi har lavet, med andre ord
tester vi de hyppigste funktioner der
er tilgængelige på websitet, inden vi
sender det ud. Det bruges til at finde fejl
i vores use cases. Da vi har lavet en use
case der handler om rating, var det passende at lave en lignende test case.
Den første testcase beskriver hvordan
man kan teste om rating funktionen rent
faktisk virker. Den tager udgangspunkt
i at man gerne vil se om et udvalgt
billede kan rykke en plads op i placeringen på toplisten. Test casen beskriver
trin for trin hvordan man udfører denne
test. Hvis test casen resulterer planmæssigt vil man ved hjælp af rating
funktionen rykke et billede højere op i
placeringen og derved bevise at ratingfunktionen virker
Den anden test case beskriver trin for
trin hvordan man tjekker om medielinks på hjemmesiden virker. Dette er en
simpelt måde forpå man tjekker om den
korrekte url er indsat i tabellen.
side
17
Projekt 3,2 WEBSITE with DATABASE
Navigationsdiagram
Navigationsdiagrammet viser vores
plan med websitets informationsarkitektur. Den er meget simpel da
vi vil simplificere vores brugers færd
på siden. Via få klik vil man være helt
nede i arkitekturen og dermed hurtigt
komme frem til rating funktionen.
side
18
Projekt 3,2 WEBSITE with DATABASE
PHP kodeeksempel
Screenshottet viser hvordan man lægger
data i databasen. Her er der to variabler,
som får deres indput fra en anden side,
hvilket de gør via filter_input (l. 6-7).
Filter_input kan få parametret enten
via GET eller POST, i dette tilfælde er
det GET, da det var nemmest for os, at
vi kunne se i URL’en, hvad der skete,
når man trykkede stem. Efter test ville
det være en god idé at ændre GET til
POST, så man ikke kan sende URL’en
eller gå frem og tilbage på siden, for
derefter hele tiden at stemme. Dette
burde kombineres med en feature, der
gør, at man kun kan stemme én gang
per session, men på grund af tidspres,
har vi ikke nået denne.
Når vi har input fra den forrige side lagt
ned to variabler, henholdsvis $mediaid og $valuevote. Disse afgør hvilket
medie og hvilken karakter der er stemt
på.
I linje 10 ser vi, at hvis disse variabler
ikke er tomme, så kører koden inde i {}
– hvis ikke springer den over, og printer
beskeden af $regmsg ud, som øverst i
koden (l. 4) er sat til at være tom.
I koden mellem linje 10 – 15 sker der
det, at vi putter vores SQL statement
ned i en php variabel, vi kalder $sql.
Spørgsmålstegnene er placeholders,
som bliver erstattet med vores variabler.
Herefter bliver der lavet et håndtag,
som forbereder på at køre koden (l.
11). På linje 12 bliver vores parametre
bundet på, og det er disse, som erstatter
spørgsmålstegnene i vores SQL. Koden
på linje 13 kører koden, og på linje 15
bliver den før tomme variabel $regmsg
sat lig med en en tekststreng. Det
betyder, at når koden bliver afsluttet og
kommer ned på linje 19, så er den lig:
”Tak for din stemme”, i stedet for at
være tom.
Billedet er et eksempel på at ligge en rating i databasen.
side
19
Projekt 3,2 WEBSITE with DATABASE
Projektplanlægning
Til at planlægge projektet har vi brugt
Scrum. Scrum er en måde at styre og
planlægge projekter på, og til fordel
for Gantt Chart har de tidsangivelser
i timer, hvor Gantt kun har dage.
Denne måde gør det meget nemmere
at se, hvad arbejdstimerne reelt bliver
brugt på, samt hvilke ting, der overskrider den estimerede tidsplan.
Estimat af tidsforbrug
Da vi havde lavet vores PBS (Product Breakdown Structure), kunne vi
gå i gang og udfylde vores Planning
Sheet. Planning Sheet bruges til at
regne ud, hvor og hvor mange timer,
man skal bruge på hver opgave.
Øverst angiver vi hvor mange dage
der bruges til sprinten (i dette tilfælde 10), og hvor mange timer, der er
til rådighed om dagen. Dette bliver
ganget, og i vores tilfælde fik vi 210
timer til udarbejdelse af projektet.
Vores PBS ses på venstre side, som
er alle de opgaver, der skal løses.
Herefter angiver man 3 gæt på,
hvor lang tid opgaven vil tage, og
så beregner arket en median. Dette
bliver ganget med antal gruppemedlemmer, der er om at løse opgaven.
Kontrol af tidsforbrug
Undervejs i processen sørgede vi
for at holde styr på det konsumerede timeforbrug på hver opgave.
Dette gjorde vi ved hjælp af Sprint
Backlog Burndown. Hver arbejdsopgave har, som nævnt før, et antal
normerede arbejdstimer, og i Sprint
Backlog Burndown kan vi finde ud
af, hvor mange timer, der er brugt
per dag. De timer der er brugt dag 1
trækkes fra det antal timer, der er til
rådighed. Herved ændres det antal
timer, der er resterende på opgaven.
Det smarte ved denne måde at holde
styr på timer og opgaver er, at det
giver et meget nuanceret overblik
over omfanget og resterende timer på
sprinten.
Planning sheet bruges til at estimere tidsforbrug og arbejdskraft pr opgave.
side
20
Projekt 3,2 WEBSITE with DATABASE
Sprint Backlog Burndown bruges til undervejs i sprinten at holde styr på timeforbrug på hver opgave, så man nemt får et billede af, hvor man er i processen.
Efter Sprint Backlog Burndown er
blevet udfyldt, får man en Burndown
Chart, som viser hvor mange timer,
der er blevet brugt hver enkel dag. Det
vises dog omvendt, ved at vise arbejdsopgavernes timeantal, om aftager
lineært hver dag. Da vi har vurderet
alle arbejdsopgaverne til at tage 170,7
timer, giver det 17,07 timers arbejde
om dagen.
Grunden til, at graferne ikke ligger helt
samme sted er, at der er blevet brugt
nogle flere timer end de 17 den første
dag, for at sikre, vi er kommet godt fra
start. Det viser på grafen at vi har færre
timer tilbage, og derfor ligger den blå
kurve lavere end den, der viser hvad,
vi har planlagt.
Burndown Chart viser det endelige billede af det planlagte tidsforbrug samt det
endelige tidsforbrug baseret på dage i sprinten.
side
21
Projekt 3,2 WEBSITE with DATABASE
Konklussion
Dette projekt har været en stor
udfordring for os som gruppe. Først og
fremmest har vi haft svært ved at tage
valg omkring design hvilket har presset os tidsmæssigt i sidste ende. For at
ramme vores målgruppe har vi gået på
kompromis med mange af vores egne
idéer til designet. Man kan derfor godt
blive usikker på om det man laver er
godt nok. Vi har lært utrolig meget af
denne oplevelse som fremover gør os
i stand til at designe noget for hvem
som helst det skulle være. Samlet set
er vi godt tilfredse med vores endelige
produkt, som vi mener rammer den
valgte målgruppe. Fremover vil vi
lave designbrief i starten af projektet, så vi kan blive enige om hvilken
designmæssig retning vi skal gå. Dette
vil være et godt redskab når man deler
opgaverne op og arbejder hver for sig
som vi har været nødsaget til under
dette projekt. Alt i alt en lærerrig proces der med garanti vil ligge til grund
for et endnu bedre næste projekt.
side
22
Projekt 3,2 WEBSITE with DATABASE
Kildeliste:
Research til genren Disco:
http://da.wikipedia.org/wiki/Disco
Målgruppeanalyse:
http://tns-gallup.dk/kompas
http://tns-gallup.dk/services/gallup-kompas
Desing og fonte:
https://www.google.dk/search?q=skrifttyper+i+80’erne&biw=1274
&bih=631&tbm=isch&tbo=u&source=univ&sa=X&ei=zT5NVN_
DJ6eGywOsyYHYBg&ved=0CEYQsAQ
http://www.fontspace.com/category/1980s
HTML, PHP, modellering og SQL:
Rating System med stjerner:
http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/
Udregne gennemsnitsværdien af en rating med SQL:
https://www.udemy.com/blog/sql-average/
Oprettelse af ER-model med rating:
Excelark med eksempel: Rating – Simple Vote ER Model.xlsx
Eksempel på rating med php og database, link mellem sider:
https://www.youtube.com/watch?v=NmF_00eAjD8
Baggrundsbillede:
http://www.wallpaperglow.com/wp-content/uploads/2014/08/1938495604940-colorful-blurry-dotted-lights-over-black-background.jpg
Animationer:
http://giphy.com/categories/reactions/
https://www.tumblr.com/search/disco
side
23
Projekt 3,2 WEBSITE with DATABASE
Bilag 1: fra side 24 til 29
Design Manual
Logo:
Vores logo signalerer disco-stemning i form af ordet Disco formet som
neon rør, efterfulgt af ordet ’Classics’ skrevet med font: Helvetica italia.
Formålet med kombinationen af disse to ord er at gøre brugeren opmærksom på hvilken genre websitet fokuserer på. Derudover giver ordet Classics et tilbagelænet og afslappet udtryk som vil få brugeren til at føle sig
”hjemme”. O’et i ordet disco kan tilnærmelsesvis ligne en grammofonplade samtidig vil tage brugeren tilbage til disco-tiden. På websitet skal
logoet virke som link der leder brugeren tilbage til forsiden.
Sort/Hvid udgave:
Placering: Logoet skal placeres øverst i venstre hjørne af websitet. Den
skal fylde de 3 første columns som i alt fylder 374px i bredden.
CMYK black 100% opacity 33%
Classics
black
Classics
Hvid
Classics
#D91F04
Classics
Pantone proces 125-4U
Classics
side
24
Projekt 3,2 WEBSITE with DATABASE
Layout:
Wireframe: 8-grid: 1024px, kolonne: 114px, gap: 16px.
side
25
Projekt 3,2 WEBSITE with DATABASE
Typografi:
Vi har brugt em. til at justere skriftstørrelse på websitet.
Primær font: Calibri Light.
Eksempler:
Calibri light:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Calibri Light Bold:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Farve: Sort og Hvid
Generelt:
Filformater: websitet indeholder filer tilhørende følgende formater: .png,
.jpeg, .gif
Farvepalette:
side
26
Projekt 3,2 WEBSITE with DATABASE
Forside:
Master:
side
27
Projekt 3,2 WEBSITE with DATABASE
Child:
Header:
Footer:
side
28
Projekt 3,2 WEBSITE with DATABASE
Covers:
Form: Billederne er kvadratiske da de viser vinyler som altid kommer i kvadratisk emballage.
Farvetemperatur: Alle billeder er primært holdt i varme farver. De er meget
farverige da det hørte tiden til.
Motivvalg: Da det er svært at finde billeder af vinylerne har vi udvalgt
motiverne ud fra de mest farverige og i bedst billedkvalitet. Derudover er der
mennesker på de fleste motiver. Personerne på billederne er ofte fremhævet og
stærke i udtrykket.
Alt-tekst: beskriver billedets motiv
Animationer:
Form: Rektangler, størrelsen er afhænger af den enkelte
animation.
Motivvalg:
Motiverne er valgt ud fra det man forbinder med disco-tiden: Fest, farver,
diskoteker, dans, sjov.
side
29