WEBSITE DB. Copenhagen Business Academy Multimediedesigner. 3 semester 2 projekt, oktober 2014 Gruppe 1 MulA

Transkript

1 WEBSITE DB Copenhagen Business Academy Multimediedesigner 3 semester 2 projekt, oktober 2014 Gruppe 1 MulA Kia Dahlen, Pia Ellenton Jensen, Maria Korshøj Andersen & Kamilla Klein Website URL:

2 Lærere: Jesper Hinchely Tue Becher Portfolio Kamilla Klein: Maria Korshøj Andersen: Pia Ellenton Jensen: Kia Dahlen: 2

3 Indholdsfortegnelse INDLEDNING... 4 AFGRÆNSNING... 4 OM DANCEHALL... 4 SCRUM... 4 BURN- DOWN CHART... 4 DESIGN BRIEF... 5 MOODBOARD... 5 DESIGN VALG... 6 DESIGN MANUAL... 7 LAYOUT... 7 HEADER... 7 FARVER... 8 LOGO... 9 Farve... 9 Negativ... 9 TYPOGRAFI... 9 NAVIGATIONSDIAGRAM MOCKUP USE CASE DETALJERET BESKRIVELSE AF USE CASE ATTRIBUT TABEL ER- DIAGRAMMET TESTCASE DOKUMENTATION AF KODNING DATABASE FORBINDELSE MENU TOP RATINGS RATING FORM RATING INPUT BILAG SCRUM TESTCASE

4 Indledning Vi har fået til opgave, at arbejde med Dancehall i 90 erne. Vi skal udarbejde et website, hvor man skal kunne rate billeder, musik og videoer fra kunstnerne. Afgrænsning Oprindeligt skulle der laves en side hvor man kunne læse om kunstnerne. Dette har vi været nødsaget til at undlade, da tiden ikke var til det. Om Dancehall Dancehall er en musikgenre, der minder om den populære jamaicanske musikgenre reggae, der opstod omkring 1979 erne. Yellowman og Eek- a- Mouse var de største navne i 1990 erne indenfor Dancehall. Den store ændring fra 70 erne til 90 erne var, at der kom flere instrumenter til musikken, og det gjorde, at musikken udviklede sig hastigt. Dancehall var tilbage i tiden en fest for homoseksuelle, men det blev ændret i 90 erne af Buju Banton med hans sang "Boom Bye Bye". Her begyndte Dancehall musikken, at komme under kritik af deres anti- homoseksuelle tekster i et par sange. Hele dette optøj gjorde, at der blev dannet en kampagne, som hed Stop Murder Music. Scrum Se bilag 1 Burn- down chart 4

5 Design brief Før begyndelsen af udarbejdelsen af websitet, har vi lavet noget forarbejde for designet. Det er med til at skabe overblik og for at blive enige om hvordan websitet skal struktureres. Moodboard For at skabe stemning på hjemmesiden, vil vi arbejde med farverne grøn, gul og rød. Stemningen skal være varm og eksotisk, så det passer til den jamaicanske kultur. 5

6 Design valg Vi kunne godt tænke os, at arbejde med enkelthed på siderne. Der skal være struktur på både master og child siderne. Vi vil indsætte et logo, som skal indsættes i headeren (960px, 150px). I logoet skal der stå Dancehall 90 erne. Headeren skal være gennemgående på alle sider, for at skabe opmærksomhed på Dancehall. I headeren vil der være en menu i venstre side under logoet, hvor man kan navigere rundt i video, musik og billeder. Navigationen skal være simpel og let. Vi vil ikke implementere en footer, da vi ikke anser, at det er relevant for websitet. På både master og child siderne, vil vi have en grøn baggrund, som skal give os den jamaicanske og varme stemning. På forsiden vil vi have et slideshow, hvortil der kører 3 forskellige billeder, for at skabe liv på den ellers statiske side. Baggrunden på alle bannere skal være det jamaicanske flag, da Dancehall genren stammer derfra. Under menupunktet Billeder, så vil vi gerne have portrætbilleder af kunstnerne, for at vise en mere personlig side af kunstnerne, så brugeren har noget, at forholde sig til. I typografien vil vi gerne have en bold skrifttype, som har fødder og som virker lidt dominerende. Dette ønsker vi, da vi vil opretholde det mere dominerende, som prægede Dancehall musikken i 90 erne. Vores website appellerer til dem, der allerede kender til musik genren, og vi vil derfor ikke skabe fokus på hvad Dancehall genren er. Websitet skal give en følelse af den varme jamaicanske kultur, og derved give brugeren lyst til at lytte til musikken. 6

7 Design manual Layout Vi har udarbejdet en wireframe, som viser strukturen på både master og child siderne. Header 7

8 Farver For at skabe den varme stemning på websitet bruges farverne grøn, gul og orange. Disse farver harmonerer godt sammen og skaber en sydlandsk stemning. 8

9 Logo Farve Negativ Typografi Font, Patua One A B C D E F G H I J K L M N O P Q R S T U V X Y Z Æ Ø Å a b c d e f g h i j k l m n o p q r s t u v x y z æ ø å Size: 100px * 133px Vores primære typografi er Patua One, og vores sekundære typografi er Arial. 9

10 Navigationsdiagram Mockup 10

11 Use case Use case modellen illustrerer de forskellige handlinger, som vores database skal kunne håndtere. Det bliver set fra både brugerens og administratorens synsvinkel. Modellen kan bruges, som vejledning til at sikre, at databasen kan håndtere de ønskede handlinger. Detaljeret beskrivelse af use case ID: UC- 01. Navn: Rating. Formål: Man skal kunne rate musik, video og billeder. Aktør: Bruger. Frekvens: Når brugeren ser nogen, han/hun ønsker at rate. Startbetingelser: Der skal være internetforbindelse, hjemmesiden skal fungere optimalt, og der skal være forbindelse til databasen. Beskrivelse: Brugeren finder noget musik, en video eller et billede og markerer antal stjerner, som brugeren ønsker at give, og der skal kunne gives fra 1 til 5 stjerner. Undtagelser: Brugeren kan ikke rate, hvis der ikke er en internetforbindelse. Illustrationer: Der skal være grå (tomme stjerner), som bliver gule, når brugeren holder over dem. Slutbetingelser: Stjernerne bliver gule og svaret bliver gemt og sendt til databasen. 11

12 ID: UC- 02. Navn: Lytte til musik Formål: Man skal kunne lytte til musik. Aktør: Bruger. Frekvens: Når brugeren vil høre musik Startbetingelser: Der skal være internetforbindelse, og hjemmesiden skal fungere optimalt, og der skal være forbindelse til databasen. Beskrivelse: Brugeren finder noget musik, som han/hun gerne vil høre, og trykker afspil. Undtagelser: Databasen er nede, derved er musikken ikke tilgængelig. Illustrationer: Der vises en play/pause knap, hertil vises også album/sang titlen. Slutbetingelser: Musikken skal ikke gentage, men skal fortsætte til næste sang. ID: UC- 06. Navn: Se billeder Formål: Brugeren skal kunne se billeder af artister Aktør: Bruger. Frekvens: Når brugeren vil se billeder af diverse artister Startbetingelser: Der skal være internetforbindelse, og hjemmesiden skal fungere optimalt, forbindelse til database. Beskrivelse: Brugeren har mulighed for at se billeder af forskellige artister. Undtagelser: Brugeren kan ikke se billederne, hvis der ingen internetforbindelse er. Illustrationer: Der skal være et billede, som skal kunne blive ratede. Slutbetingelser: Der skal være billeder tilgængeligt. 12

13 Attribut tabel Entity Attribut Value Notes Data type Rating ID No. Unique no. No. Value No. No. Description All char. Alfano. Media ID No. Unique no. No. Name All char. Alfano. Link All char. Alfano. Media type ID No. Unique no. No. Name All char. Alfano. Artist ID No. Unique no. No. Name All char. Alfano. Biography All char. Alfano. 13

14 Er- diagrammet Her ses vores ER- diagram. Dette bruges til at skabe overblik over opbygningen af databasen. Testcase Se bilag 2 14

15 Dokumentation af kodning Database forbindelse Først oprettede vi forbindelsen til databasen. Dette blev gjort ved, at oprette forbindelse til localhost, indtaste brugernavnet, kode og til sidst databasens navn piajensen_nu. Udover dette, så er der lavet en betingelse, som sørger for, at hvis der ikke kan oprettes forbindelse til databasen, så skal den brokke sig; Connect Error. Menu 15

16 Til at lave menuen bruges php. Der laves et array, og her skrives filnavne og de tildelte navne. Herefter tildeles den valgte side (curpage) en class (active), så man kan se hvilken side, som man befinder sig på. Top ratings Først skabes der forbindelse til databasen vha. require. Herefter skal medianen findes for hvert medies samlede rating. Det rangerer vi efter DESC, som er faldende værdier, det vil sige, at det højst ratede medie vil ligge øverst, og det lavest ratede medie vil ligge nederst. Dernæst bindes resultaterne til nogle parametre ($musikname, $musiklink og $musvalue), så vi senere kan vise resultatet til brugeren. Derefter laves der en løkke (while), så den finder og viser alle de ratede medier i den valgte mediegruppe. Til sidst bliver resultatet vist til brugeren. 16

17 Rating form Hver stjerne har fået en værdi fra 1-5. Når brugeren rater et medie, så sendes værdien til ratingform.php, som sørger for, at det sendes til databasen. Ud over den angivne værdi i ratingen, så sendes også vid, som i dette tilfælde er videoernes ID. Så databasen kan skelne mellem hvilke videoer der har fået hvilke værdier. 17

18 Rating input Efter brugeren har ratet, og trykket på stem, filtreres først, om det er en gyldig værdi. Herefter oprettes der forbindelse til databasen vha. require og laver et SQL statement og sætter rating værdien og media_id ind i rating tabellen. Så gøres SQL en klar (prepare) og parametrene ($mid og $rvalue (som vi hentede i starten)) bindes på. ii står for integer, som betyder, at værdierne, som der hentes, er tal. Efter det er blevet eksekveret, så skriver vi Tak for din stemme. 18

19 Bilag Scrum Sprint Effort "Day 0" calculated using three time estimates (or PERT) 94,32 No. of team member per task Total amount of work [1] No. of Team members: 4 Story ID Stories / Tasks Read note i cells for calculations Daily working hours: 3 Task ID Planned Estimate effort in hours No. of Sprint Days: 10 A B C M [2] Sd [3] Available hours of work (resources): Research 4 1,8 0,3 0,4 0,75 0,45 0,09 Duration >10%- Break down and reestimate 2 Scrum 4 2,2 0,25 0,5 1 0,55 0,15 Duration >10%- Break down and reestimate 3 Analyse ,25 1,5 1,25 0,1 4 Designbrief 4 2 0,25 0,5 0,75 0,5 0,1 Duration >10%- Break down and reestimate 5 Mockup 4 1,96 0,2 0,5 0,75 0,49 0,11 Duration >10%- Break down and reestimate 6 Navigationsdiagram 4 0,88 0,1 0,2 0,4 0,22 0,06 Duration >10%- Break down and reestimate 7 Test af website 4 3 0,5 0,75 1 0,75 0,1 Duration >10%- Break down and reestimate 8 Usecase 4 3 0,5 0,75 1 0,75 0,1 Duration >10%- Break down and reestimate 9 Testcases [5] Attribut tabel 4 1,8 0,4 0,45 0,5 0,45 0,02 11 ER-model 4 4 0,5 1 1,5 1 0,2 Duration >10%- Break down and reestimate 12 Database [6] ,5 2 1,5 0,2 Duration >10%- Break down and reestimate 13 Find information 4 2,2 0,25 0,5 1 0,55 0,15 Duration >10%- Break down and reestimate 14 Website 4 27, ,8 1,4 Duration >10%- Break down and reestimate 15 Rating/voting ,4 Duration >10%- Break down and reestimate 16 Sortering af liste med produkter 4 0,8 0,1 0,2 0,3 0,2 0,04 Duration >10%- Break down and reestimate 17 Designvalg ,5 2 1,5 0,2 Duration >10%- Break down and reestimate 18 Dokumention af kode 4 4,2 0,75 1 1,5 1,05 0,15 Duration >10%- Break down and reestimate 19 Rapport ,4 Duration >10%- Break down and reestimate 20 Forberedelse til præsentation 4 2,28 0,35 0,5 1 0,57 0,13 Duration >10%- Break down and reestimate 4 19

20 Testcase 20