http://bysileha.com/rate/home.php Gruppe nr. MULB2, Multimediedesign 3. semester hold B. Tue Becher Jesper Hinchely

http://bysileha.com/rate/home.php Gruppe nr. MULB2, Multimediedesign 3. semester hold B. Tue Becher Jesper Hinchely Amanda Lindschouw - cph-al144@cphbusiness.dk http://ahldesign.dk/learningthird.html Michelle Andersen - cph-ma236@cphbusiness.dk http://michelle-denise.dk/portfolio-skole/ Charlotte Øberg - cph-co74@cphbusiness.dk http://charlotteoeberg.dk/semester3.html Simone Hansen - cph-sh248@cphbusiness.dk http://bysileha.com/x/cph.portfolio/ 2

Indholdsfortegnelse Indholdsfortegnelse 3 Gruppekontrakt 0.0 4 Indledning 1.0 5 Scrum dokumentation 2.0 6 Scrum dokumentation 2.0 7 Scrum dokumentation 2.0 8 Design 3.0 9 Moodboard 3.1 10 Design brief 3.2 11 Designmanual 3.3 12 Designmanual 3.3 13 Designmanual 3.3 14 Designmanual 3.3 15 Designmanual 3.3 16 Mock-up 4.0 17 Mock-up 4.0 18 Navigationsdiagram 5.0 19 User story 6.0 20 Use case 7.0 21 Use case 7.0 22 Use case 7.0 23 Use case 7.0 24 Use case 7.0 25 Database dokumentation 8.0 26 Attributtabel 8.1 27 ER diagram 8.2 28 ER diagram 8.2 29 Crud matrix 8.3 30 Kodning 9.0 31 Test cases 10.0 32 Test cases 10.0 33 Test cases 10.0 34 Test cases 10.0 35 Konklusion 11.0 36 Litteraturliste 37 3

Gruppekontrakt 0.0 Vi har valgt at lave en gruppekontrakt over vores forventninger til deltagelse i projektet. Hvis de valgte punkter ikke overholdes, gives der tre chancer, hvor der derefter tages stilling til, om den/de person(er) fortsat kan deltage i samarbejdet. 1. Alle mødetider og aftaler skal overholdes, da disse bliver lavet i samarbejde med resten af gruppens medlemmer. 2. Ved sygdom eller andre pludselige gøremål, skal gruppen kontaktes så hurtigt som muligt. 3. Alle deadlines skal overholdes og hjemmearbejde skal laves til aftalte tidspunkt, så vores projektplan overholdes bedst muligt. alle får det maksimale ud af projektet og lærer mest muligt. Derudover skal alle være inde over hver opgave så meget det er muligt. Der tages dog forbehold for tidspres, hvor arbejdsopgaverne så vidt muligt vil blive uddelegeret, for at overholde valgte deadline. 4

Indledning 1.0 Vi er ansat i virksomheden, Convey-IT, som er en lille virksomhed i København. Vi er blevet valgt til at lave en hjemmeside, der skal vise fremtidige kunder, at Convey-IT kan lave rating systemer og godt design. Vi har fået temaet Britpop med fokus på 80 erne og 90 erne. Britpop, betegnelse for den type britisk popmusik, som var særligt fremherskende i 1990 erne, hvor den talte bands som Suede, Oasis, Pulp, Blur, The Verve og Radiohead. Britpoppen har ikke én enslydende sound. Selv om britpoppen har sine rødder i den britiske indie-scene, var britpoppen i særdeleshed kommerciel. Britpoppen opstod som en reaktion på musikalske og kulturelle trends i de sene 1980 ere og tidlige 1990 ere hovedsageligt som reaktion på grunge-fænomenet fra USA. På trods af britpop-kunstnernes kommercielle succes i resten af Europa og for nogles vedkommende også i USA, uddøde britpoppen som fænomen med årtusindeskiftet. 1 1 http://da.wikipedia.org/wiki/britpop 5

Scrum dokumentation 2.0 Vi har brugt scrum som fremgangsmåde til vores projekt. Hver morgen har vi haft et møde i 15 minutter, hvor vi snakkede om hvor langt vi er kommet og hvad vi skal lave fremover. Vi har lavet en logbog hvor vi har dokumenteret alt der er blevet lavet og skal laves. Her har vi også skrevet hvilke lektier vi hver i sær har for til de resterende dage. På denne måde kan vi holde øje med hvornår alt skal laves og hvad vi mangler at lave. Planningsheet 6

Scrum dokumentation 2.0 Sprint Backlog Burndown 7

Scrum dokumentation 2.0 Burndown chart 8

Design 3.0 Vores design bærer stort præg af hvordan britpop så ud i 80 erne og 90 erne. Stilen var, som også beskrevet bedre nedenfor, meget dyster og lidt grumset. Disse ting, har vi prøvet af få frem blandt andet ved hjælp af de billeder vi bruger på siden. Vi ønskede også siden skulle afspejle, at den er lavet i år 2014 og derfor gav vi den også et mere moderne touch og nogle minimalistiske fonte. 9

Moodboard 3.1 10

Design brief 3.2 Virksomheden som vi leverer et produkt for, er Convey IT. De er et lille mediebureau i central København. Deres hovedfokus er at levere produkter af høj kvalitet, der matcher deres kunders behov. De har givet os, designerne, opgaven at levere en showcase hjemmeside. Deadline for at præsentere vores projekt er den 30 oktober - hvorefter at vi skal lave rettelser og Den opgave der skal løses, er en rating hjemmeside. Den skal vise, hvordan en hjemmeside kan matche et givent tema, som i dette tilfælde er britpop 80 s and 90 s. Målet med vores design er, som tidligere nævnt kort, at lave en showcase hjemmeside, der har ratings, som matcher det tema vi har fået. Hjemmesiden skal vise potentielle kunder, at Convey-IT kan designe og udvikle ratingsystemer, som passer til en professionel og kommerciel hjemmeside. Målgruppe Den primære målgruppe for hjemmesiden, er kunder og potentielle nye kunder. Kunderne som ønsker at få lavet medieprodukter til deres virksomhed. Kunder kunne også være privatpersoner eller selvstændige, der har behov for en hjemmeside eller et andet medieprodukt. Den sekundære målgruppe er, personer som interesserer sig for britpop og derfor har fundet frem til vores hjemmeside. Selvom siden kun er en showcase ville den stadig have relevans for folk med interesse indenfor emnet. 11

Designmanual 3.3 Farver Vi har valgt at arbejde med de farver, som der tema vi har fået. 12

Designmanual 3.3 Big bottom cartoon - overskrift på siderne Helvetica - Light - rapporten Vi har valgt at bruge denne stil som vores overskrift til siderne, da vi i vores undersøgelsesfase fandt mange steder, hvor britpop var skrevet på en lidt anderledes måde, hvor bogstaver ligner klippe klistre og lidt pop up. Denne skrift valgte vi at bruge i rapporten, da den er let at læse, også når der står meget tekst på en side, og samtidig passede den godt til resten af designet. Artist Medium - logo Raleway - Menu Vi valgte at bruge denne font til vores menupunkter, da vi gerne ville have, at det så meget enkel ud, da vi har mange farver og meget spil på vores side. Vi har brugt denne font til ConveyITs logo, da den giver et moderne look og samtidig skiller den sig ud fra resten af siden. fonte. 13

Designmanual 3.3 Logo Vi har lavet et logo for Convey-it, som skal afspejle at det er en it virksomhed, der står bag hjemmesiden. Logoet har som sådan ingen forbindelse til resten af sidens design og har derfor også sine egne farver og font. Vi har efterfølgende valgt, ikke at tage det med på siden, da vores website kun skulle bruges som showcase. Layout Vi har valgt at baggrunden på vores forside er har selv klippet videoen sammen med videoer af de forskellige bands. På de andre sider har vi baggrund ville forvirre mere, da vi har videoer, billeder og animationer på vores andre sider, som også skal kunne køre. Da målgruppen er folk, der lytter til britpop ville det være mest optimalt at designe et website tilpasset deres skærme. For at ramme målgruppens skærme 100% ville det være bedst, at lave websitet responsivt, men da vores side kun skal fungerer som showcase, har vi set bortfra det. Det endelige website ville selvfølgelig blive responsivt. 14

Designmanual 3.3 Designprincipper #4 ensartethed: Elementer på siden, der er ens har en større relation end principper, der ikke er ligner dem. Her har vi ens baggrunde, og når vi fremviser samme måde, så brugeren kan se, at på siden med videoer, hvor de ratede fra 1-5, er det Vi har valgt at vores side skal være mere brug- - Vi har valgt at lave vores side meget enkel og overskuelig, derfor er der lagt mest vægt på brugbarhed. På den måde får brugeren et godt overblik over sidens indhold. #8 genkendelighed: Vi har valgt bruge de samme farver hele vejen igennem. Dels for at understøtte vores tema om britpop, men også for at skabe en genkendelighed på siden. Vi arbejder meget med de samme overskrifter og måden vores sider er bygget op på. Dette gør at brugeren har lettere ved at anvende vores side. #17 lukkethed: Vi har brugt lukkethed på vores website, når vi viser vores videoer, animationer og billeder. der hører til hvilke mediet. 15

Designmanual 3.3 Billeder Vi har valgt at billederne skal afspejle tiden dengang. Derudover har vi valgt, at gøre baggrunden på hjemmesiden lidt grumset og dystert for at afspejle temaet. Vi har valgt at billeder og animationer har en width på 300px og en height 300px Video Videoerne på siden repræsenterer det valgte tema og de valgte bands. Videoen på forsiden skal være mere dyster og er klippet sammen af videoer fra de forskellige bands, så det ikke kun er ét band men dem alle. Derudover skal det at understrege vores tema. format på youtube videoerne er width: 310px x height 315px aldrig har lavet før og da siden er en showcase hjemmeside, har vi valgt at tage chancen. Dette ville dog ikke være et tilfredsstillende resultat på en helt færdig implementeret hjemmeside. Vi har oplevet forsinkelser på både forside og siderne med billeder, videoer og animationer. lemet, men tænker at det kunne have noget med den server, som siden ligger på, som gør at tingene loader med lidt forsinkelse. Det ville vi selvfølgelig få rettet op på, hvis siden skulle programmeres til en virksomhed. Videoen på forsiden loader med en del forsinkelse, da vi aldrig har prøvet at integrere en video på et website før, valgte vi at se bort fra dette, da vi gerne ville prøve at lavet noget vi 16

Mock-up 4.0 17

Mock-up 4.0 fandt vi dog frem til den nuværende løsning, som vi mener er mere brugervenlig og et bedre design. 18

Navigationsdiagram 5.0 19

User story 6.0 Vi har valgt at lave en user story over vores ratingsystem. Her vises der, at efter man har submit og ens rating bliver registreret. Der kan være to forskellige resultater. Enten er ens rating registreret korrekt ellers er der enten sket en fejl, eller man har glemt at stemme. 20

Use case 7.0 21

Use case 7.0 Som tilføjelse til vores use case-model har vi udarbejdet use cases over top 5 funktionen samt rating funktionen. Name: Rate 1-5 : UseCase#1 Description: Brugeren og admin på hjemmesiden har mulighed for at gå ind og rate video, animationer eller billeder med en rate på 1-5, hvor 1 er det dårligste og 5 er det bedste. På den rigtige hjemmeside er det meningen at man kun skal kunne stemme én gang på hver video, foto eller animation, men da vores website er en Goal: Det er målet med denne use case, at man skal kunne gå ind og rate på alle videoer, billeder og animationer, der er lagt ind på hjemmesiden. Det skal være nemt og skal kunne gøres hurtigt ved et enkelt klik med musen. Preconditions: Der er en del forudsætninger for websitet, der skal være opfyldt inden denne use case kan udføres: 1.Websitet skal køre og være online 2.Der skal være gang i serveren 3. Brugeren skal have mulighed for at se mediet som han/hun vil rate Assumptions: For at denne use case kan udføres må det antages at: 1. Brugeren kan se mediet 2. Rating-systemet er synligt og nemt at bruge 3. PHP og SQL-koder er korrekte således, at alt virker og dataen kan sendes videre til databasen 4. Ratingsystemet giver feedback i form af en lille besked, der fx fortæller brugeren at hans/hendes rating er gemt. 22

Use case 7.0 Frequency: Denne use case udføres ofte og systemet skal derfor kunne håndtere, at der skal sendes og håndteres meget data og således skal hjemmesiden også kunne hånd- Basic Course: Når brugeren går ind på hjem- er det medie som han/hun gerne vil rate. Brugeren klikker på den rating (fra 1-5), som han/ hun gerne vil afgive. Dernæst får brugeren en feedback-besked om at ratingen er modtaget. Use casen slutter dernæst, når brugeren går væk fra siden. Post conditions: Der kan ske to ting: 1. Brugeren rater mediet fra 1-5 2. Der er opstået et problem og dataen kan ikke sendes til databasen Actors: I denne use case er der to aktører: 1. Brugeren - der har mulighed for at gå ind på hjemmesiden 2. Administratoren - der styrer hjemmesid en og derfor har adgang til alle use cases. Included Use Cases: Der inkluderes ikke andre use cases i denne use case. Alternate Course: En alternativ vej kan være, at når brugeren har trykket på en værdi fra 1-5, vil dataen ikke blive sendt til databasen. Ratingen afgives altså, men bliver ikke sendt afsted. Her vil der komme en fejlmelding med beskeden om at afstemningen fejlede og at brugeren kan prøve igen. 23

Use case 7.0 Name: Se top 5 UseCase#2 Description: Brugeren og admin på hjemmesiden har mulighed for at gå ind og se hvilke højeste ratings på hjemmesiden. Der vil her være en liste af de 5 højest-ratede. Denne funktion vil kræve både PHP og SQL, som gør at når man går ind og kigger, vil de 5 medier, der har fået de højeste ratings vises i den rigtige rækkefølge. Goal: Det er målet med denne use case, at er og animationer, der har fået de højeste ratings af brugerne. Dette kan både være nyttigt for virksomheder, der er interesseret i at sælge brugerne, da de kan gå ind og tjekke for egen fornøjelses skyld. Preconditions: Der er en del forudsætninger for websitet, der skal være opfyldt inden denne use case kan udføres: 1. Websitet skal køre og være online 2. Der skal være gang i serveren 3. Brugeren skal have mulighed for at se medierne 4. Der skal være rated på medierne Assumptions: For at denne use case kan udføres må det antages at: 1. Brugeren kan rate mediet 3. Brugeren kan se top 5-listen 4. PHP og SQL-koderne virker rigtigt således, at de kan give feedback tilbage til siden 24

Use case 7.0 Frequency: Denne use case udføres ofte og det er derfor også meningen, at siden skal kunne Basic Course: Når brugeren går ind på hjemmesiden, starter use casen. Brugeren klikker sig ind på siden hvor han/hun kan se top 5-listen. Siden (PHP) henter dernæst data fra databasen. Når brugeren kan se indholdet af top 5-listen, slutter use casen. Alternate Course: En alternativ vej kan være, at brugeren ikke kan se top 5-listen. Her vil der så komme en fejlmelding, som fx fortæller at systemet er ude af drift i øjeblikket, dette ville være løsningen hvis vi havde en fuld kørende side. Da vi har lavet en showcase, vil vi dokumenterer hvad der kan ske, men vi har ikke implementeret dem. Post conditions: Der kan ske to ting: 3. Brugeren ser top 5-listen 4. Der er opstået et problem og bruger en kan ikke se top 5-listen og får en fejlmelding i stedet for. Actors: I denne use case er der to aktører: 3. Brugeren - der har mulighed for, at gå ind på hjemmesiden 4. Administratoren - der styrer hjemmesiden og derfor har adgang til alle use cases Included Use Cases: Der inkluderes ikke andre use cases i denne use case. 25

Database dokumentation 8.0 Vi har valgt at lave nedenstående modeller, for bedre at kunne udforme vores database. Det giver et rigtig godt overblik over databasens struktur, når man får udarbejdet et ER diagram, attribut tabel og et CRUD Matrix. 26

Attributtabel 8.1 Nedenstående attributtabel giver et overblik over entiteter og deres tilknyttede attributter i forhold til opbygningen af vores database og dens ratingsystem. Vi har 4 entiteter med tilhørende attributter, som danner rammen om vores ratingsystem. er hvad attributten består af. Dette kan være INT eller VarChar og i Notes-feltet kan man se opmærksom på, f.eks. max. antal i en VarChar, unikke tal. 27

ER diagram 8.2 RateValue: RateValue betår af en PrimaryKey og en attribut RateValue_Point. Begge er en INT (INT=integer). PrimaryKey er RateValue_ID som peger på tabellen Rate. Rate: Rate består af en PrimaryKey og to ForeignKeys som alle 3 er INT. PrimaryKey er Rate_ID og de to ForeignKeys RateValue_ID_Fk og Media_ID_ Fk peger på henholdsvis tabellerne RateValue og Media. MediaType: MediaType består af en PrimaryKey som er en INT og en attribut som er en VarChar på max. 45 tegn. Efter at vi havde kodet databasen og hjemmesiden, fandt vi ud af at tabellen RateValue samme som RateValue_Point og derfor vil man kunne nøjes med at have en kolonne ved navn RateValue i tabellen Rate i stedet for. Media: Media består at en PrimaryKey og en Foreign- Key som begge er en INT og 3 attributter som er VarChar (VarChar=tegn) hvor to max. må indeholde 45 tegn og en må indeholde max. 500 tegn. 28

ER diagram 8.2 29

Crud matrix 8.3 Vi har lavet en CRUD-matrix, som gør det nemt Vores CRUD har også en rød tråd til vores use case, da brugerens og administratorens forhold også illustreres her. Her kan man se, hvem der har lov til at gøre hvad og hvad deres roller er. CRUD står for create, read, update og delete, som tildeles de roller man har valgt. Hvordan dette er gjort kan ses nedenfor. Vi har valgt at administratoren skal have adgang til alt stort set alt og har mulighed for at udøve alle funktionerne, hvorimod at brugeren kun har mulighed for de nødvendige funktioner. 30

Kodning 9.0 Dette er et eksempel på vores SQL-kode, hvor vi laver vores database og en af vores tabeller CREATE DATABASE IF NOT EXISTS ratings; USE ratings; DROP TABLE IF EXISTS Rate; DROP TABLE IF EXISTS RateValue; DROP TABLE IF EXISTS Media; DROP TABLE IF EXISTS MediaType; Her er endnu et eksempel på, hvordan vi indsætter de værdier til de medietyper vi har. Vores typer er foto, video og animation. INSERT INTO MediaType (MediaType_ID, Medi- INSERT INTO MediaType (MediaType_ID, Medi- INSERT INTO MediaType (MediaType_ID, Medi- CREATE TABLE MediaType ( MediaType_ID INT PRIMARY KEY, MediaType_Name VARCHAR(45) ); 31

Test cases 10.0 Vi har foretaget 4 testcases af systemet for at sikre os at det fungerer optimalt. Nedenstående ses resultaterne. Test case name Test Case Description Step Name Step Description/Action Expedted resultat Actual Output Approved 1. Vælg video Her kan brugeren se alle videoer på siden Step 1 Åbne hjemmesiden Kunne se hjemmesiden og at hjemmesiden fungerer Step 2 Vælg video i menu At menuen fungerer og at man rammer på rette underside Step 3 Step 4 Step 5 Step 6 Step 7 Her vælger man Oasis video og giver den 5 Her vælger man Blurs video og giver den 3 Her vælger man Pulps video og giver den 2 Her vælger man The Verves video og giver Her vælger man Suedes video og giver Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen 32

Test cases 10.0 Test case name Test Case Description Step Name Step Description/Action Expedted resultat Actual Output Approved 2. Vælg animation Her kan brugeren se alle animationer på siden Step 1 Åbne hjemmesiden Kunne se hjemmesiden og at hjemmesiden fungerer Step 2 Vælg animation i menu At menuen fungerer og at man rammer på rette underside Step 3 Step 4 Step 5 Step 6 Step 7 Step 8 Her vælger man Radioheads animation og Her vælger man Blurs animation og giver den Her vælger man Oasis animation og giver den Her vælger man The Verves animtion og Her vælger man Pulps animation og giver den 1 glag Gå ind på Top 5 og se om animationerne ligger rigtigt - efter de ratings de har fået Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen At animationerne ligger i den rigtige rækkefælge 33

Test cases 10.0 Test case name Test Case Description Step Name Step Description/Action Expedted resultat Actual Output Approved 3. Vælg billeder Her kan brugeren se alle billeder på siden Step 1 Åbne hjemmesiden Kunne se hjemmesiden og at hjemmesiden fungerer Step 2 Vælg billeder i menu At menuen fungerer og at man rammer på rette underside Step 3 Step 4 Step 5 Step 6 Step 7 Her vælger man Radiohead billede og Her vælger man The Verves billede og giver Her vælger man Pulps billede og giver den 2 Her vælger man Blurs billede og giver den 3 Her vælger man Oasis s billede og giver Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen Er opdateret op Top 5 listen 34

Test cases 10.0 Test case name Test Case Description Step Name Step Description/Action Expedted resultat Actual Output Approved 4. Vælg animation Her skal vi se om Top 5 ændrer sig, efter at vi i forvejen har givet den nogle ratings Step 1 Åbne hjemmesiden Kunne se hjemmesiden og at hjemmesiden fungerer Step 2 Vælg animation i menu At menuen fungerer og at man rammer på rette underside Step 3 Step 4 Step 5 Her vælger man Pulps animation og giver den Her vælger man Blurs animation og giver den Gå ind på Top 5 og se om animationerne ligger rigtigt - efter de ratings de har fået Er opdateret op Top 5 listen Er opdateret op Top 5 listen Animationerne ligger i den rigtige rækkefølge og at rækkefølgerne har ændret sig efter man har givet dem nogle nye ratings 35

Konklusion 11.0 Vi har haft mange udfordringer undervejs, specielt med hele ratingsystemtet. Vi kunne helt sikkert godt have brugt meget mere undervisning i dette. Vi har brugt rigtigt meget tid på selv, at Hele analysedelen med ER-modeller, attribut-tabel, user story og use cases, har vi efterhånden ret godt styr på og heldigvis har vi ikke skulle bruge så meget tid på dette. Vi kan konkludere, at vores design i denne opgave har været utrolig vigtig, for at kunne afspejle vores tildelte genre og vi synes at vi har ramt rigtigt godt, i forhold til hvad vores research af Britpop i 1980erne og 1990erne har vist. 36

Litteraturliste Bøger: Sams Teach Youself SQL In Ten Minuts - Ben forta, 2012 20 Designprincipper - Ian Wisler Poulsen, 2012 Hjemmesider: http://w3schools.com http://google.dk http://validator.w3.org http://youtube.com 37