WEBSITE WITH DATABASE

1 WEBSITE WITH DATABASE Projekt: 3,2. oktober 2014 Lærere: JHI/TUJE Klasse: MulA13 Gruppenr: MULA3

2 Faktaark:

3 Indholdsfortegnelse: Faktaark:.................................. 2 Indholdsfortegnelse:......................... 3 Indledning................................ 4 Processer................................. 5 Målgruppeanalyse.......................... 6 Argumentation for designvalg................ 10 Designmanual proces....................... 11 Designbrief proces......................... 11 Design Brief.............................. 11 Logo.................................. 13 Modellering proces........................ 14 ER-Diagram.............................. 14 Attributliste.............................. 15 Use Case................................. 16 Use Case................................. 17 Test cases................................ 18 PHP kodeeksempel........................ 20 Projektplanlægning........................ 21 Konklussion.............................. 23 Kildeliste:................................ 24 Bilag: fra 24 til 29.......................... 25 Design Manual............................ 25

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

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

6 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 n 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-

7 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,

8 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,

9 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, 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. 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. 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

10 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 n 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 n 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 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 hjemmer at have menuen i venstre og den vil derfor fungere som et genkendeligt element.

11 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 hjemme der har et professionelt look og tage udgangspunkt i musikgenren Disco. Grundidéen med hjemmen 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

12 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. 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å n 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 med nedadgående struktur uden list style item. Dette vil fremstå lidt gammeldags så vi imødekommer målgruppens teknologi skepsis. 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

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

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

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

16 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. Navn: Rating af mediefil Id: UC-1 Beskrivelse: Man skal kunne bedømme de forskellige mediefiler der ligger på hjemmen. 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 under hvor der er vist et enkelt billede, en gif eller et youtubeklip. Man skal være inde på en af kategorirne hvor alle filer fra samme medietype er vist. Hyppighed: Hyppigheden er ca. 5 ratings pr. person der besøger n. Forventet forløb: 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 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.

17 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å hjemmen virker. Dette er en simpelt måde forpå man tjekker om den korrekte url er indsat i tabellen.

18 Navigationsdiagram Navigationsdiagrammet viser vores plan med websitets informationsarkitektur. Den er meget simpel da vi vil simplificere vores brugers færd på n. Via få klik vil man være helt nede i arkitekturen og dermed hurtigt komme frem til rating funktionen.

19 PHP kodeeksempel Screenshottet viser hvordan man lægger data i databasen. Her er der to variabler, som får deres indput fra en anden, 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å n, 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 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.

20 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, 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.

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

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

Kildeliste: Projekt 3,2 WEBSITE with DATABASE 23 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 r: https://www.youtube.com/watch?v=nmf_00eajd8 Baggrundsbillede: http://www.wallpaperglow.com/wp-content/uploads/2014/08/1938495-604940-colorful-blurry-dotted-lights-over-black-background.jpg Animationer: http://giphy.com/categories/reactions/ https://www.tumblr.com/search/disco

24 Bilag 1: fra 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 forn. 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

Layout: Wireframe: 8-grid: 1024px, kolonne: 114px, gap: 16px. Projekt 3,2 WEBSITE with DATABASE 25

Typografi: Vi har brugt em. til at justere skriftstørrelse på websitet. Primær font: Calibri Light. Projekt 3,2 WEBSITE with DATABASE 26 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:

27 For: Master:

28 Child: Header: Footer:

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