ConveyIT - Visualisation of your dreams 3. semester - 2. projekt Lavet af: Tevfik Özyigit, Niels Sigaard, Jesper Kjær, Nevin Ciftci & Komal Ahmed Projektaflevering: 07.10.2011-26.10.2011 URL: http://www.tevfik.dk/vote_db2/menu/index.php 1
Indholdsfortegnelse: 1. Indledning side 3 2. Projektplan - Gantt Kort side 4 3. Dokumentation af design process side 5-6 4. Dokumentation af hjemmesiden side 7-8 5. Dokumentation af databasen side 9-13 6. Reflektioner side 14 7. Bilag side 15-16 2
1. Indledning I anledning med dette projekt er vi blevet bedt om at lave en udstillingsvindue projekt for ConveyIT, en lille medie bureau der ligger i det centrale København. Vi skal som multimediedesigner hjælpe ConveyIT med at lave et projekt hvor formålet er at designe og udvikle webbaseret stemme og bedømmelse som kan anvendes på kommercielle hjemmesider, hvor brugeren kan stemme og kommenterer de medier der ligger på sitet. Projektets formål er at ville blive brugt senere til markedsføring rettet mod nye potentielle kunder. I projektet vil vi lave en hjemmeside, der præsenterer en stemme system for medier, samt med funktioner som sortering af medier på hjemmesiden, hvor alle af medier vil være vores egne produkter. På hjemmeside har vi selv lavet billeder, via Adobe Photoshop CS5 og Illustrator CS5 software, som brugeren kan stemme på. Vi har lavet en video, som viser 1.semesters introtur dag, en video projekt i Knord og flairwondo video, som handler om bartender. 3
2. Projektplan - Gantt Kort Vi har i starten af vores projekt lavet en plan over hvad der skal med i rapporten og i hvilken række følge tingene skulle laves. På den måde har vi en overblik over vores projekt og styr på hvad der skal med og hvad der mangler i rapporten. Gannt kortet er en hjælp til at kunne vise hvor lang tid vi har brugt til de forskellige dele i rapporten, så der bliver en mulighed for at kunne nå frem til vores mål. 4
3. Dokumentation af design process Farvevalg: Den orangefarve blev udgangspunktet for farvevalget, fordi ifølge vores kilder så er Orange en farve for kreativitet, forandring og ambition. Farven betyder desuden underdanighed, fravælgelse og begærløshed iblandt budister og Kærlighed, lykke og overflod i Japan. USA er det et symbol på Halloween og i inkvisitionen var det et symbol på forræderi, hvilket godt kan have kulturelle spor. Orange komplimentære farve er blå 1. Herfra tog vi de to blå nuancer som er vist på farveoversigten på forrige side. Farven blå står ifølge vores kilde til at udstråle autoritet, rolighed, accept og balance, som er et professionelt udtryk i forretningssammenhænge. Farven blå har desuden positive religiøse referenceramme omkring i verdenen. Den sorte farve er valgt som tekst farve og er ikke 100% CMYK sort, men det er farven der bliver brugt på trykkerier så som eksskolernes trykkeri til at trykke sort. RGB koden til den er 1D1D1B. Den hvide farve er valgt som baggrund for at skabe den største kontrast imellem indhold og baggrund. RGB farvekoden FFFFFF oversættes til CMYK som at der ikke optræder farve og derfor vil det være i sammenhæng med tryk papirets farve der kommer til udtryk hvor denne farve optræder og for det meste er det hvidt eller meget lyst. Fonten: På hjemmesiden har vi bestemt at bruge Arial, da den er Arial er i dag en typografi som man kan finde på alle computer stort set. Af samme grund blev den udvalgt til at virke på vores webside og så fordi den er funktionel god og letlæselig. Der er en tydelig adskillelse imellem bogstaverne og imellem ordene og forskellen imellem rummet imellem bogstaver og ord er stort nok til at virke tydeligt at der er et skel, men ikke så stort at det ikke stadig er harmonisk. Den bliver i forvejen anvendt en del steder på nettet, lige som Verdana, Helvetica og lign. 1 Kilde fra Internettet: http://www.kuler.adobe.com complementary. 5
3. Dokumentation af design process Logo: Fonten til logoen er Streetvertising Bold, da den er typografi af typen sansserif, som yderligere kan klassificeres som en stencil typografi. Dette kan den fordi den er velegnet til at lave stencil af og anvende til gadereklamering, hvis man ønsker det. Den er letlæselig og har et bredt anvendelsesmulighed, uden at signalerer kriminalitet, som stencil oftest bliver anvendt til. Både til hærværk i politisk øjemed og hærværk i vandalismens navn. Bogstaverne kan således både skæres ud af et samlet stykke materiale eller skæres ud individuelt til et skilt. Denne typografi har et særdeles moderne udtryk, er funktionel og i sin natur ret i øjefaldende. Adspredelsen imellem bogstaverne er ikke lige så stor som ved f.eks. Arial, men den er tydelig nok til at kunne anvendes til et typografisk logo. Vi har også lavet en bevel and emboss effekt som du kan se på logoen. Slogan: Visualisation of your dreams : ConveyITs forretning bygger på at levere medier af forskellige afstøbninger til deres kunder, et visuelt udtryk for deres kunders virksomheder. Ideer er at spille på virksomhedernes ledelses driftsfølelse, et begær eller en følelse som de har i virke omkring virksomhed. Man kunne også lave et rationelt prægende slogan så som professionalize your dreams, men dette ville mere appellerer til nye virksomheder frem for allerede etablerede virksomheder, hvorimod visualisering af drømme er præcis hvad ConveyIT arbejder med. 6
4. Dokumentation af hjemmesiden Wireframes: Det er vores oprindeligt ide til hjemmesiden og det er vores forslag til hvordan vores hjemmesiden skal se ud. Det er en standard layout med en proffesionel design. Vi har i hver boks målt hvor mange pixel der skal være på indholdet. Layout: Det er en standard layout hvor der er en header (logo, menulinie), kontent som indholder billeder/tekst/video/flash og en footer som er copyright af os. 7
4. Dokumentation af hjemmesiden Navigationsdiagram: Vi har lavet en navigationsdiagram, som viser de forskellige sider man kan komme ind på, og hvad der ligger ind på de valgte sider. Lokal menu: Rate video, Rate flash og rate images er tilknyttet sammen med global menu: Toplist image, toplist all, og graph rating. Og de begge menuer ligger under Home siden. 8
5. Dokumentation af databasen Use Case Model: Usecase model viser for både user og administrator opgave. De tre vigtigste ting som brugeren skal på hjemmesiden er at browse på hjemmeside, votere/rating, see resultater og see toplisten. Adminstratoreren har næsten samme rolle som brugeren har og eventualt kan de også uploade/slette de billeder, flash og videoen på hjemmesiden. Brugeren er den som styr hjemmeside udefra og administrator styr hjemmesiden indenfra. 9
5. Dokumentation af databasen Userstories/Aktivitetsdiagram: Name: Voting/Rating Identifier UC1 Preconditions (List of state(s) the system can be in before this use case starts): 1. In vote/rate page. 2. Rating images/video/flash. 3. Only one time can IP Address be used in computer to vote/rate images/video/flash. Basic Course (the Happy Path): 1. Use case begins when you go to vote/flash/ video page. 2. Select images/video/flash to vote. 3. Select rate from 1-5. 4. Voting successful. 5. Back function - to go back to images/video/flash page to vote/rate again. 6. Use case ends when voting is successfully. Post conditions: When use case ends: 1. Only one time can IP Address be used in computer to vote/rate images/video/flash. 10
5. Dokumentation af databasen 3.NF med fuld attributer: Her viser den 3. NF til relation mellem brugeren og rating og billeder. En specifik bruger kan have mange stemmninger og en rating kan have mange billeder. Formålet med 3.NF model er at skabe en model over databehovet for vores projekt. Ved modellen kan der ses relationen mellem funktionerne og i hvilke retninger forgår informationsflowet. Dermed blev der oplyst attributter, som beskriver væsentlige egenskaber ved entiteter. I modellen har vi valgt at gøre relations optionalitet som mandatory og kardinalitet som en eller flere. 11
5. Dokumentation af databasen Tabellen af 3. NF med fuld attributter: Entity/ Relation Attributes Value Notes Datatype Num. / Alfanum. Users userid Number INT, Primary N username A-Z VARCHAR 45 A age Number INT N comments A-Z VARCHAR 10 A Ratings RatingsID Number INT, Primary N ImageID Number INT N rating Number VARCHAR 1 N date Number VARCHAR 35 N ip Number VARCHAR 15 N fk_imageid Number INT N fk_videoid Number INT N fk_usersid Number INT N fk_flashid Number INT N Images ImageID Number INT, Primary N imageurl A-Z, number VARCHAR 45 AN imagename A-Z VARCHAR 45 A Flash FlashID Number INT, Primary N flashurl A-Z VARCHAR 45 AN flashname A-Z VARCHAR 45 A Video VideoID Number INT, Primary N videourl A-Z, number VARCHAR 45 AN videoname A-Z VARCHAR 45 A 12
5. Dokumentation af databasen CRUD Matrix Model: Vi har denne del af opgaven lavet en tabel over de base funktionen create, read, update og delete for triner og enheder fra use case. Med denne tabel kan man se relationen mellem triner og enheder og de forskellige funktioner de har. Entity Use Case Users Rating Images Browse R R R Vote/Rate CR CR R See result U RU R See toplist R R R Insert/delete CRUD RD CRUD 13
6. Reflektioner I anledning med vores projektforløb har vi delt opgaver i mellem os for at nå frem til vores mål. Vi har haft mulighed for at lave vores projekt i skolen og selvfølgelig også efter skolen, hvor vi har aftalt hen ad vejen om hvad der skal nåes efterhånden til den givende dag. Vi har haft en god projekt samarbejde. Vi har lært de advanceret af databasen til at brug i stemning. Det var en stor udfordringen for os til at lære noget nyt i databasen især når man skal lave en vote/rate database. 14
6. Bilag Reklame sjov 1. minut Introduktion(beskrivelse) Billederne tegner vi selv! Video 2 video Forskellige farver giver billederne liv! Klipper tingene sammen 1. Reklame 2. Blæksprutte Vi ser her på billeder den brainstorm vi har lavet for videoen, som vi har tænkt til at brugeren kan stemme på. 15
6. Bilag Vandfaldsmodellen Det er en standard vandfaldsmodel, som har 6 trapper, hvor man lander på den færdiggørelse af hjemmesiden - dvs. tester man selve databasen om den virker og lave en validatering. 16