Gruppe 8 - Eksamens rapport - 3. semester by Andreas Münter

Eksamensopgave, 3. semester Cphbusiness Lyngby Multimediedesigner, 3. semester MulB13e, gruppe 8 December 2014

http://kampsax.designduck.dk

FAKTAARK

Projekt titel: Projekt 4 - Site for a local community Vejledere: Tue Becher Ivan Rosenvinge Frederiksen Merete Geldermann Lützen Ditlev Skanderby Morten Rold Jesper Hinchely Frederik David Tang Ian Wisler-Poulsen Klasse: Mulb Årgang: 2013 Gruppenummer: 8

Antal anslag: 50.058 / 20.85 normalside

Projekt URL-adresse: http://kampsax.designduck.dk Lærer / Censor | Bruger: Brugernavn:

bruger@kampsax.dk

Password:

password

Lærer / Censor | Admin:

Brugernavn:

test@kampsax.dk

Password:

password

Opret ny bruger: http://kampsax.designduck.dk/opret-bruger.php App URL-adresse: App download til Android: Se APP dokumentering

Steffen Marschall ______________________________________ Valgfag:

App udvikling

Mail: cph-sm148@cphbusiness.dk Portfolio: http://steffenmarschall.com

Martin Ungermann Stæhr ______________________________________ Valgfag:

App udvikling

Mail: cph-ms20@cphbusiness.dk Portfolio: http://martinstaehr.dk

Patrick Bomann Tofteng ______________________________________ Valgfag:

App udvikling

Mail: cph-pt60@cphbusiness.dk Portfolio: http://patricktofteng.dk/cph/1.semester/portfolio/

Erik Andreas Münter ______________________________________ Valgfag:

App udvikling

Mail: cph-em38@cphbusiness.dk Portfolio: cph.designduck.dk

INDHOLDS FORTEGNELSE FAKTAARK INTRODUKTION

DESIGNMANUAL

8 Indledning 9 Problemformulering 10 Afgrænsning 12 Ideudvikling 14 SCRUM

53 Logo 61 Farver 63 Typografi 67 Layout 69 Grundelementer 70 Billedstil 73 Print eksempler

ANALYSER

TESTING

PROJEKT UDVIKLING

AFSLUTTENDE

18 Risikoanalyse 20 Interessentanalyse 22 Målgruppe analyse 24 kommunikations plan 26 AIDA

30 Design brief 32 Bootstrap 34 SEO optimering 37 Database 38 Use-cases 40 Kode dokumentering 44 APP udvikling 46 Design principper 49 mockups

76 Prototype brugertest 78 Gangstertest 80 Afsluttende brugertest 81 Ekspertvurdering

84 Konklusion 86 Referencer 88 Bilag 1 - PBS 89 Bilag 2 - Risikoanalyse 90 Bilag 3 - SCRUM sprint 10 dage 92 Bilag 4 - SCRUM sprint 12 dage 94 Bilag 5 - Interessentanalyse 95 Bilag 6 - Lasswell 96 Bilag 7 - AIDA modellen 97 Bilag 8 - ER-diagram

98 99 100 101 102 102 103 104 105 106 107 108 110 111 112 113 114

Bilag 9 - Attribute tabel Bilag 10 - CRUD matrix Bilag 11 - Profil side start mockup Bilag 12 - Forside start mockup Bilag 13 - Profil side mockup Bilag 14 - Event mockup Bilag 15 - Forside mockup Bilag 16 - Kampsax farvehjul Bilag 17 - Plakat eksempel Bilag 18 - Flyer eksempel Bilag 19 - UC1 – Opret bruger (bruger) Bilag 20 - UC2 – Opret bruger (admin) Bilag 21 - UC3 – Opret event (bruger + admin) Bilag 22 - UC4 - Opret nyhed (Admin) Bilag 23 - UC5 – Opret forum tråd (bruger) Bilag 24 - UC6 – Opret forum tråd (admin) Bilag 25 - Kampsax.designduck.dk sitemap

INTRO DUKTION INDLEDNING

PROBLEMFORMULERING

AFGRÆNSNING

IDEUDVIKLING

SCRUM

INDLEDNING Når man bor på et kollegium er fællesskab en vigtig faktor. Derfor er det ofte et af første spørgsmål man stiller når man flytter ind, altså lige efter hvor meget koster det? Spørgsmål som; Hvad laver i af fælles ting? Hvor ligger kollegiets bar? Hvor ofte holdes der fest? osv. Det er ligesom grunden til man flytter på kollegium. At man gerne vil bo ude, dog helst et sted man kan være social og det er forholdsvis billigt på samme tid. I denne forbindelse har en anonym velgører lagt en sum penge til Kampsax kollegiet for at lave en ny webportal, for at gøre Kampsax til et bedre forbundet kollegium. Til webportal skal der laves en tilhørende app, som skal fungerer som webportalen, bare i lommen version. Vi er

blevet hyret som developer team til at lave denne portal til Kampsax kollegiet ved DTU. Hertil hører en helt ny designlinje for hele kollegiet. Kampsax kollegiet er stort dansk kollegium hvis nuværende webportal er meget forvirrende. Derfor ønsker vi at gøre det nemmere for de 521 beboere at holde sig orienteret om begivenheder, nyheder mv.

INTRODUKTION

PROBLEMFORMULERING • Hvordan kan vi lave en moderne webportal til Kampsax kollegiet? Arbejdsspørgsmål • Hvem er målgruppen? • Hvordan får vi beboerne til at benytte sig af den nye webportal? • Hvordan laver vi et design der fanger den specifikke målgruppe? • Hvordan reklamere vi for den nye webportal? • Hvilke øvrige medier skal vi benytte os af? Vi har hertil udarbejdet en række analyser for at finde interessenter, risikoer for opgaven, samt præcisere målgruppen. Arbejdsformen for hele projektet bliver udført i to SCRUM sprints. På henholdsvis 10 dage og 12 dage. Hertil har vi udarbejdet en product breakdown structure (PBS) og sprint backlog, product backlog og BurnDownChart.

INTRODUKTION

AFGRÆNSNING

Ved dette projektet ønsker vi at lave en fungerende webportal, der kan håndtere opsætning og læsning af nyheder, begivenheder og diskussion. Den skal indeholde generel information om kollegiet; faciliteter, bestyrelse, kontakt mv.

Ligeledes bliver der lavet en app, som ender op med at fungerer som en håndholdt version af hjemmesiden. Det vil simpelt fungere som hjemmesiden, men sat ind i en placeholder til android devices og eksporteret som en .apk fil.

Hele webportalen bliver opsat i Bootstrap framework og ellers kodet fra bunden. Det er planen at man skal kunne kontrollere langt de største dele af hjemmesiden fra frontend. Dog vil der være statiske elementer, der ved aflevering af projektet ikke vil fungerer som dynamiske sider.

Da planen er at opbygge en webportal fra bunden uden at benytte sig af CMS system, regner vi ikke med at kunne nå alle backend elementer i forhold til bruger og administrator funktioner, men holder fokus på de vigtigste.

Webportalen vil blive lavet på dansk, da vi ikke mener vi har tid til at lave en oversætnings mulighed som vil fungere godt. Da Google Translate i vores øjne ikke vil være tilstrækkeligt.

Vi regner ligeledes med at endelig brugertesting og ekspertvurdering bliver udført efter afleveret projekt i december.

INTRODUKTION

FAKTA Ud af de 521 beboer er der kun ca. 12% piger.

IDEUDVIKLING Før vi kunne påbegynde arbejdet med at lave en portal til et lokalsamfund, skulle vi finde ud af hvad vores emne skulle være.

Vi startede derfor med at sætte os sammen i gruppen og skrive alle idéer ned på et stykke papir. Vi kom lidt rundt i Nordsjælland omegn og snakkede alt fra kommuner til uddannelsessteder.

Efter at have snakket fordele og ulemper i forbindelse med de forskellige emner, endte vi op med at ville lave en webportal til Kampsax kollegiet som var igangsat af deres webudvalg.

INTRODUKTION

EMNEVALG Vi valgte at fokusere på Kampsax kollegiet med en webportal som hovedopgaven. Årsagen til at vi valgte et kollegium frem for en kommune skyldes at vi kunne få frihed til at skabe en visuel identitet fra bunden. Ved ikke at være bundet til et eksisterende logo og design som fx en kommune har. Der eksisterer ingen designmanual for selve Kampsax kollegiet. Derfor ville vi selv være i stand til at komme med vores egne forslag til kollegiets nye visuelle identitet.

Selve idéen om at lave en webportal for et kollegium som Kampsax, der ligger på DTU campus, var en god mulighed for at lave et moderne design der var rettet imod en lidt mere teknisk anlagt gruppe unge mennesker. Hvilket gav os muligheden for at både lave et seriøst design, men med strejf at lidt nørdet humor af og til på siden.

SCRUM Som projektplanlægnings værktøj har vi valgt at arbejde med SCRUM som vores metode.

SCRUM er en agil udviklingsmetode, som tager udgangspunkt i at udvikle software. Da dette kan være en uforudsigelig proces er metoden udviklet således at man kan have fleksible tidsplaner og arbejde i små udviklingshold. Dette er en kæmpe forskel fra fx vandfaldsmetoden, hvor man planlægger en proces der skal flyde gennem faserne, mens SCRUM giver muligheden for at ændre kravene til opgaven løbende1 2.

Vi har valgt at køre vores SCRUM sprints over to gange af henholdsvis 10 – og 12 dage. Det giver os muligheden for at mødes på dag 10 (Sprint review) og holde et længere møde om hvad der nu skal ske i processen, i modsætning til de 15 minutters møde vi har som opstart på hver dag (Daily sprint). Ved disse møder fortælles der kort hvad der er sket de sidste 24 timer siden vi havde møde sidst og hvad der skal ske nu.

1) http://da.wikipedia.org/wiki/Scrum 2) http://da.wikipedia.org/wiki/Vandfaldsmodellen 3) http://www.teamspeak.com/ 4) https://docs.google.com/presentation/

Ved Sprint review er der også mulighed for at snakke om hvad der virkede godt og hvad der bør laves om til næste sprint, og ikke mindst vælge en ny SCRUM master, der skal styre det næste Sprint. Under hele processen har vi oprettet en teamspeak kanal3, hvorpå vi altid kan tale med hinanden under processen. Derfor har vi også valgt at holde fysiske møder til et minimum, da vi ligeledes har benyttet os af Google Presentation4 som en stor opslagstavle vi alle har adgang til at ændre i. Ligeledes på vores tidligere oprettede facebook gruppe, da vi har arbejdet sammen i tidligere projekter. For at få afdækket vores arbejdsopgaver inden vi satte os ned med backloggen til SCRUM, lavede vi en PBS (Product Breakdown Structure) til opgaven. For at give os et overblik over de arbejdsopgaver der skulle dækkes ind.

INTRODUKTION

Se “PBS” i fuld størrelse

Se “BurnDownChart 10 dage” i fuld størrelse

15 Se “BurnDownChart 12 dage” i fuld størrelse

ANA LYSER 18

RISIKOANALYSE

INTERESSENTANALYSE

MÅLGRUPPE ANALYSE

KOMMUNIKATIONSPLAN

AIDA

RISIKOANALYSE Vi har foretaget en risikoanalyse af vores projektet.

(Vi tager udgangspunkt i at vi er hyret til at lave dette job, og ikke at det er en skoleopgave) Ved hjælp af denne analyse kan vi finde eventuelle risiko områder og forhåbenlig fange dem i deres tidlige stadier og have en nødløsning klar.5

Se “Risikoanalyse model” i fuld størrelse

5) Louise Harder Fischer, Marie Oosterbaan ; Digital Medie Management ; 3. udgave 2010 ; side 84

ID no.

Risiko navn

Beskrivels

Overstiger budgettet

Overforbrug af budgettet

Dårlig tidsplan

Tidsplanen blive skredet.

Problem med database og kodning

Koden eller data virker pludselig

Sygdom og fravær

Hvis personen ik arbejde hjemme

Målgruppen

Misforstået målg

Tekniske problemer

Problemer med disk, internet mv

Fejl i rapporten

Eventuelt forstå fejl eller mangler

Mangler på webportalen

Manglende elem er i forhold til giv opgave

Mangler/fejl på brugertest

Fejlførte usabilit som giver falsk ved fx ikke færd prototype af we eller App

Manglende sammenhæng

Problemer i forh den røde tråd i p duktet

ANALYSE

Påvirkning (1 -5)

Sandsynlighed (1 -5)

Risk værdi (p*s)

Fremlægge budget og ændringer til dette

Gruppen arbejder ekstra hårdt for at hente op på manglende tid, og sørger for at planlægge en ordenlig plan fra starten

abasen ikke

Tjek kode og database løbende for at minimere eventuelle fejl

kke kan efra

Andre skal overtage personens arbejde og finde hoved og hale i det

gruppe

Ændringer i design og hovedkoncept

pc, v

Husk at tage back-up

åelses r

Hvis man finder en fejl. Skal man huske at give de andre i gruppen informationen, så det kan påpejes ved eksamen/ fremvisningen

Få rettet op på eventuelle oversete elementer på bedste vis og ikke til at lægge sig ud med flere side projekter.

Usability tests skal udføres igen

At holde sig til designbreifet og rettet de steder hvor man falder udenfor kategori

mentven

ty tests data, dig ebportal

hold til pro-

Next steps

INTERESSENT ANALYSE Efter en brainstorm kom vi frem til vores fem interessenter. Hver af disse grupper har en interesse i at denne webportal bliver udført. Alle har forskellige grader af interesse omkring emnet og andre har mere indflydelse på at projektet kan blive gennemført end andre. Dette har vi lavet en analyse af for at finde eventuelle interesse konflikter der kan opstå under/efter projektudviklingen. Så denne analyse er til for at fange dem før de bliver en realitet. Og hvis de bliver det, hvordan skal det så gribes an.6

Interesser, krav og forventninger

• PKS

•

NETGRUPPEN •

Beboere

•

Som indehaver af kollegiet har de almagt over kollegiet. Har ikke den store interesse i lokale webportaler på kollegier. Kan have en begrænsning i forhold til midler.

Interesseret i en ny løsning for deres webportal, som de pt benytter hos DTU. Det kunne skabe nye sociale beboere, hvis det er nemmere at have indflydelse og viden om kollegiet. Har magt angående server og “go for projektet” i forhold til behov og midler.

•

Interesseret i projektet. For at få bedre overblik over nyheder, events mv. på kollegiet.

•

Interesse i at dette projekt bliver gennemført. Så der kommer godt sammenhold på Kampsax og derfor tiltrækker nye studerende til stedet. Som ønsker at gå på DTU

•

Vi har en klar interesse i at dette projekt bliver udført og klar inden jul.

DTU

“Interessentnalyse model” i fuld størrelse Arbejdsgruppen 6) Louise Harder Fischer, Marie Oosterbaan ; Digital Medie Management ; 3. udgave 2010 ; side 55

ANALYSE

Eventuelle konflikter / Hvornår

•

Hvis projektet går hen og bliver for stort i forhold til midler og det ender op med underskud. Kan det føre til projektstop. Hvor PKS stopper midlerne til NETGRUPPEN/ KAMPSAX

• •

Hvis projektet går hen og bliver for stort i forhold til midler. Hvis projektet bliver startet op og aldrig sluttet. Så der står en portal der giver dårligt lys omkring kollegiet.

•

Der bliver lanceret en portal som ikke fungerer og er uoverskuelig

•

Webportalen går hen og bliver for irrelavant i forhold til DTU

• •

Tidbegrænsning Interne konflikter

Tillag / løsninger

• • •

Fremlægge nyt budget Søge fonde Indsamlingsfest

•

Finde freelancer og foretage ændringer i UX i forhold til brugerundersøgelser Kontakt PKS om budget problemer for at finde fællesløsning

•

Ændringer i UX i forhold til brugerundersøgelser

•

Snak med DTU om eventuelle ændringer til webportalen der fremviser mere hvordan DTU og Kampsax har sammenspil.

•

Planlæg fornuftigt ved brug af fornuftig arbejdsplan Henvis til gruppekontrakt og overhold aftalte omstændigheder.

•

MÅLGRUPPE ANALYSE

Til dette projekt har vi valgt at benytte B2C (Business-2-Consumer) marketings segmenterings analyse modellen7. da vi ønskede at danne os et hurtigt billede over vores målgruppe. Ved brugen af denne segmenterings analyse fandt vi frem til følgende:

Kampsax kollegiet ligger lige ved DTU (Danmarks Tekniske Universitet) og er derfor beboet af mange unge mennesker på en teknisk uddannelse, som typisk er mellem 18 til 28 år. De studerende på tekniske uddannelser er oftest opdateret omkring de fleste teknologiske påfund der findes nu til dags, og er derfor også med på “beatet” når det kommer til computer udstyr og programmer.

Derfor er vores primære målgruppe 18 til 28 årige med deres teknologiske snilde på plads. Det er unge mennesker der har deres browsere fuldt opdateret. Bruger windows som primær styresystem, Mac OS som sekundær og der er nok også en god del der muligvis har linux. Da det sekundære mål er at ramme eventuelle nye beboere, har vi forsøgt med vores design at lave en imødekommende side som fortæller kort, nemt og præcist om kollegiet. Det skal være nemt for nye besøgende på siden at finde information om kollegiet.

7) Zigler, Christian Oxholm ; Marketing Management - kort og godt ; 4. udgave 2005 ; side 91 - 92

ANALYSE

Hovedkriterier

Segmenteringskriterier

Eksempler

Geografiske

• Land • Region

Primært Kampsax, med mulighed for nyindflyttere fra primært Danmark, sekundært resten af verden.

Demografiske

• Køn • Alder • Indkomst

Alle køn i alderen 18 - 28 år, som er studerende. Indkomst SU + diverse.

Psykografiske

• Livstil • Holdninger • Personlighed

Fællesskab søgende og åbne. Gamle såvel som nye beboere.

Adfærdsmæssige

• Brugerstatus/Loyalitet • Udbytte ved webportalen/app • Hobby • Færdighed • Medie-/shoppingvaner

Holder af overskuelighed og nem tilgang til tingene. Ikke bange for ny og anderledes tilgang til teknologi og social adfærd på nettet.

Teknografiske

• Teknologisk viden • Anvendelse af internettet • Aktiv i form af sociale medier

Over gennemsnitlig bruger viden om teknologi. Kan finde rundt på nettet og daglige brugere af sociale medier.

KOMMUNIKATIONS PLAN Vi har valgt at benytte os af Lasswells kommunikations model, da den giver redegør for hvilke modtagere, afsendere og budskab der ønskes at rammes8.

Alt sammen centreret rundt om hvilken kanal der ønskes at sendes ud fra.

Se “Lasswells kommunikations model” i fuld størrelse

AFSENDER

Kampsax kollegiets netgruppe og beboerrådet er primære aktør for webportalen. De ønsker at ramme målgruppen med informationer om deres nye webportal, og hvad den kan bidrage med til på Kampsax kollegiet. Det ønskes at den nye webportal skal overtage gamle hjemmesiders plads, og derfor skal den nye portal være

omdrejningspunkt for al information fra kollegiet, bestyrelsen, pedeller og ikke mindst beboerne selv.

BUDSKAB

Da målgruppen er kollegiets 521 beboere er selve Kampsax kollegie portals budskab at det skal være hurtigt og nemt kan holde sig opdateret. Det er derfor vigtigt at altid holde fast i at webportalens budskab er overskuelighed for alle beboere, og det skal selvfølgelig afspejles i designet. På samme tid ønskes det også at det nye design sender et budskab om et moderne og lettere nørdet kollegium. Det er vigtigt at “nørdet” budskabet forbliver en positiv vinkel, som gør at fremtidige DTU studerende ønsker at vælge Kampsax kollegiet frem for et andet, på baggrund af deres miljø.

MEDIE

Vi har designet en webportal til kollegiet, som er den primære tiltag til en ny løsning af hjemmeside til kollegiet. Det positive ved

8) Krag Jacobsen, Jan ; 29 spørgsmål ; 2. udgave 2012 ; side 17

ANALYSE

at benytte en hjemmesiden til alt, er at beboere og eventuelle nyindflyttere ikke skal til at besøge fire forskellige sider for at benytte sig af faciliteter, deltage i events eller blot se informationer om kollegiet. Da den nye webportal også fungerer som samlingssted for al information. For at støtte op om den moderne tid, hvor alle altid er på farten. Har vi vaglt at understøtte vores webportal med en app der fungerer som en lomme version af hjemmesiden. Ydermere bliver der hængt plakater og delt flyers ud på kollegiet om denne nye portal, som skal være med til at få folk i gang med at benytte sig af den.

KOMMUNIKATIONSMILJØ / STØJ Som udgangspunkt har vores portal i forhold til information ikke nogen konkurrent, da den gamle webportal ville blive lukket ned i frobindelse med åbningen af den nye.

Dog kan der snakkes om en støjeffekt i forhold til events, da beboerne muligvis vil benytte sig af facebook til at oprette denne type begivenheder. Det samme med plakater og eventuelle flyers. Da det er et stort kollegie, hænger der på forhånd mange plakater på tavlerne og ligger mange flyers/foldere på borde og i køkkenerne.

EFFEKT

Vi ønsker gennem webportalen at skabe et miljø på Kampsax der er rettet imod fællesskab og vel informerede kollegianere. Der bunder i en portal der er med til at skabe overblik over events og nyheder samt at kunne deltage i debatter. Det skal få flere af beboerne på Kampsax til at oprette/deltage i events og at skabe bedre sammenhold på tværs af det store kollegium.

AIDA

For at bedre belyse hvad vi ønsker vores målgruppe skal opfange af meddelse med vores nye webportal. Har vi sammensat en AIDA (Attention, Interest, Desire, Action) analyse9. Modellen tager udgangspunkt i webportalen.

velkomst side der indeholder kort om nyheder, events, forum og egen profil. Siden er ligesom resten af designet opsat i firkanter med billeder eller tekst. Dette skaber et nemt overblik af informationer og skulle gerne give brugerne fornemmelsen af at være i en menu på i deres operativsystem eller i et computerspil.

ATTENTION

For besøgende der ikke er logget ind. Har vi skabt et anderledes og nyt design til om Skab blikfang når man kommer ind på kollegiet, da siden er opstillet med store hjemmesiden. Vi har derfor valgt at bruge et billeder i bokse, som gerne skulle gøre at stort baggrundsbillede af hovedindgangen brugerne har lyst til at bevæge sig videre til Kampsax kollegiet. Da det også signalerer rundt på hjemmesiden. at du er på en Kampsax hjemmeside, og lige herunder kan man finde nyeste nyhed og event på kollegiet. Så man hurtigt kan holde sig informeret, helt uden at logge ind. Vi ønsker at beboerne får opfyldt et behov i at være vel informeret om kollegiets events og tiltag. Derfor er der arbejdet på at al information om dette er nemt tilgængeligt. Det handler om at vedholde besøgendes interesse når de bevæger sig rundt på Webportalen skulle gerne understøtte idéen webportalen. om et socialt kollegie, hvor der er plads til at være sig selv. Derfor er det vigtigt at For beboere der kan logge ind har vi en stor

DESIRE

INTEREST

9) Zigler, Christian Oxholm ; Marketing Management - kort og godt ; 4. udgave 2005 ; side 187 - 188

ANALYSE

billederne på siden er positive, i den forstand at de fremviser kollegiet fra en positiv side.

ACTION

Da vores webportal fungerer som en aktiv platform for brugere hvor de kan deltage aktivt på forum eller oprette events. Vedholder vi brugerne ved at vi selv kan oprette indhold på webportalen.

Se “AIDA modellen” i fuld størrelse

Hvilket giver en aktiv og dynamisk webportal. Der vil som admin være mulighed for at kunne oprette nyheder på webportalen.

PROJEKT

UDVIKLING DESIGN BRIEF

BOOTSTRAP

SEO OPTIMERING

DATABASE

USE-CASES

KODE DOKUMENTERING

APP UDVIKLING

DESIGN PRINCIPPER

MOCKUPS

DESIGN BRIEF Start på projektet: 01-12-2014

Afleveringsfrist: 22-12-2014

OPGAVEN

Vores arbejdsgruppe har fået til opgave at fremstille en webportal til Kampsax kollegiet. Denne webportal skal have information om kollegiet for alle. En mulighed for at logge ind, hvis man er oprettet som bruger i systemet. Her skal man kunne oprette events, nyheder og forum indlæg.

MÅLGRUPPEN

Beboere på Kampsax kollegiet 18 - 28 år.

KRAV TIL PRODUKTET

Farver: Da mange af brugerne af siden nok ofte er oppe sent. Arbejder vi med dæmpede farver. Helt præcis med farverne orange, cyan, knækket hvid og neutral sort. Det er en farve kombination der komplimenterer hinanden godt. Den neutrale sort er hovedfarven for hjemmesiden, og bliver brugt for at dæmpe lyset fra hjemmesiden, mens cyan, orange skal fungerer til diverse grafiske elementer. Den hvide fungerer som farve til tekst og highlights. Vi gør også brug af farverne grøn og rød som farver til advarsel og godkendt.

PROJEKTUDVIKLINGEN

Billeder: Skal afspejle et glad og fællesskabssøgende kollegie. Derfor skal billeder gerne have billeder af glade kollegianere. Hvis der er billeder af kollegiets bygninger, skal de helst være lyse og åbne. Logo: Logoet skal stå i kontrast til hjemmesidens baggrund. Derfor skal den udføres med hvid skrift, men highlights af orange og cyan.

Elementer: I designet skal der kunne trækkes paralleller rundt på hele sitet. Eventuelle design elementer skal udføres i hovedfarverne cyan og orange. Tekster: Al statisk tekst der bliver skrevet på siden af administratorer, skal helst være let læseligt og ikke for mange snørklede sætninger eller avancerede ord.

Det skal afspejle elementer af Kampsax kollegiet, men være moderne og ikke for kompleks. Typografi: Skrifttypen skal være moderne, nemt læselig.

BOOTSTRAP DOKUMENTERING HVORFOR BOOTSTRAP?

Eftersom at hele vores gruppe havde taget mobile som valgfag, skulle vi skabe et gennemarbejdet website, og dertil udvikle en app tæt knyttet til websitet, både design- og funktionsmæssigt. Til dette er Bootstrap er et fantastisk HTML, CSS og Javascript framework der gør det både hurtigere og nemmere at udarbejde en gennemført platform til stortset hvilket som helst projekt. Hvilket gjorde det at arbejde i Bootstrap til det oplagte valg. Herudover har vi som en gruppe tidligere arbejdet med Bootstrap til skoleprojekter såvel som personlige projekter, hvilket betød at det var en del nemmere at gå til, imens det stadig forblev en lærerig arbejdsproces.

HVORDAN GJORDE VI?

strap. Dette var alle Bootstrap CSS filer der tillod os at arbejde med alle de forudbestemte design elementer, samt Bootstraps Javascript fil, der muliggøre det at benytte sig af alle Bootstraps gennemarbejdede funktionaliteter. Hertil var det vigtigste af alt det nødvendige kode til grid-systemet som skal benyttes til at skabe et responsivt design. Med filerne på plads var vi i stand til at skabe vores helt eget unikke produkt med hensigt til funktionalitet, såvel som design.

OPSÆTNING

Ved brugen af Bootstrap blev det langt lettere at opnå det ønskede layout, eftersom at grid-systemet opdeler elementerne i kolonner og rows, der fungerer responsivt. I nedenstående eksempel kan det ses hvorledes der blive skabt en row og derefter to kolonner der fylder 6 ud af de 12 mulige kolonner.

Som noget af det første skulle vi anskaffe og loade diverse filer der er tilknyttet Boot-

10) http://getbootstrap.com/css/#grid 11) http://gs.statcounter.com/#all-browser-ww-monthly-201311-201411

PROJEKTUDVIKLINGEN

Begge kolonner er sat til xs-12 (extra small), hvilket får kolonnerne til at fylde alle af de 12 mulige kolonner på mobile enheder, og dertil sørger for at kolonnerne bliver vist listet under i hinanden, i stedet for side om side. Herudover er kolonnerne sat til md-6 og lg-6 så de fylder 6 ud af de 12 mulige kolonner på desktops og larger desktops, hvilket simpelthen er store og større displays til en pc og typisk displays over 992 og 1200 pixels i display bredden. Hertil vil begge kolonner dog stadig blive smidt ned på hver deres række hvis vinduet bliver down-sized til en display bredde, på mindre end de 768 pixels, også på desktops. Bootstrap har selv opsat en meget handy tabel der viser hvordan diverse aspekter af grid-systemet er sat op på simpelvis således10:

Vi brugte løbende utrolig meget tid på at teste hjemmesiden i alle de mest anvendte browsers (Google Chrome, Safari, Internet Explorer 9+, Mozilla Firefox), for at være sikre på at designet og layoutet virkede fornuftigt i de mest anvendte browsere. Vi har dog valgt at ligge særlig vægt på Chrome og Internet Explorer da de forsat er de mest benyttede browsere til dags dato.11

RETROPERSPEKTIV / DELKONKLUSION

Selvom vi kun formår at benytte og udvinde en brøkdel af alle de goder som Bootstrap har at byde på, har vi stadigvæk formået at gøre os brug af en lang række af dets værktøjer til udvikling af design samt funktionalitet. Bootstrap giver udviklerne rammerne samt værktøjerne til at skabe en unik platform, men sørger for at man får frie tøjler. På samme tid er der utrolig meget hjælp at finde online fra selve holdet bag Bootstrap samt eksempler på kode og hvordan man kan gøre brug af alle de ting som Bootstrap tilbyder.

SEO OPTIMERING Search engine optimisering (SEO) er hvor man gennemtænker koden bag hjemmesiden, for at nemmere kunne blive fundet af søgemaskiner.

For at minske load tiden på sitet har vi valgt at optimere alle billeder og javascript filer til webløsning, altså mindst mulige størrelser.

For at gøre vores side mere søgevenlig har vi valgt at se på en række forskellige emner indenfor optimiseringen som vi fandt vigtigst.

Vi har benyttet os af Google PageSpeed til at analysere om vores site var optimeret til så hurtig load time som muligt.

<TITLE>

(Vi har dog ikke benyttet os af minimerede filer, da udarbejdningen af sitet ikke er overstået)

For at leve op til SEO omkring title’s skal være unikke per side. Har vi indsat et php statement i vores title tag, som tager variablen $htitle fra hver side og sætter den ind i title tagget. Herved får siden en dynamisk title per side man besøger.

FILSTØRRELSER

For at have den optimale beskrivelse af en hjemmeside skal man helst ramme maks 160 tegn. Det har vi opfyldt på vores site, og forsøgt at skrive en kort fangende tekst omkring kollegiet og webportalen.

“ALT” TAGS OG FILNAVNE

For at ydligere optimere vores site har vi sørger for at alle <img> tags er forsynet med et “alt“ tag, der beskriver det billede man ser på. Alle billeder, php filer og dokumenter er navngivet med navne der er tilpasset til indholdet af hvad man ser på.

PROJEKTUDVIKLINGEN

Dog skal det nævnes at billeder som brugerer af sitet uploader ikke kan kontrolleres i forhold til filnavn til indhold. Derfor bliver billedet forsynet med en id og et alt tag svarende til hvad billedet bliver uploadet til.

Vi har også indtastet sitet på webmaster tools fra Google. For at kunne optimere sitet for verdens største søgemaskine. Her kan man også vælge hvordan google skal tolke et site og videresende en til ved tryk på linket.

ROBOT

Her tænkes særligt på hvorvidt sitet skal starte med www eller ikke, og hertil kom vi frem til at sitet bør skrives:

For at få søgemaskiner til at indeksere sitet har vi indarbejdet det med meta tagget name=”robots”. For at tillade søgemaskiner at komme ind på sitet.

kampsax.designduck.dk

GOOGLE WEBMASTER TOOLS OG ANALYTICS

For at holde styr på hvordan forskellige sider har af effekt på brugerne, har vi valgt at installere Google analytics plugin på sitet. Det betyder ikke så meget for selve SEO optimeringen, men med tiden vil vi være i stand til at kunne se hvordan afvisningsprocenten mv ligger for de forskellige sites. Derefter finde løsninger på hvorfor folk går hurtigt videre, bliver eller helt lukker sit faneblad.

Se “ER-diagram” i fuld størrelse

Se “Attribute tabel” i fuld størrelse

Se “CRUD matrix” i fuld størrelse

PROJEKTUDVIKLINGEN

DATABASE Til brugen af denne webportal vidste vi at følgende krav skulle opfyldes, for at vi selv mente at det var en attraktiv webportal for et kollegium. • • • •

Nyheder Forum Events Om kollegiet

Da portalen ikke kræver database indhold omkring statisk info som ‘Om kollegiet’, står vi tilbage med nyheder, forum og events. Der skal laves en funktionel database, og den skal udvikles i 3NF (3. normal form) for at mindske risikoen for duplikeringer, og ydermere, må der ikke være nogen attributter, der er afhængige af andre attributter uden at disse er en nøgle12.

Vi udarbejdede en mockup attribute tabel for at finde ud af hvad der skulle fyldes i database tabellerne. Herefter skrev vi koden i MySQL Workbench og udviklede en færdig attribute tabel. Hvor vi endte op med 9 tabeller (som vist på ER-diagrammet).

CRUD

Til slut i database fasen sammensatte vi vores CRUD matrix (Create, Read, Update, Delete). For at finde de eksisterende use-cases der fandtes til vores webportal. (Se CRUD matrixen til venstre).

12) http://en.wikipedia.org/wiki/Third_normal_form

USE-CASES HVORFOR VALGTE VI AT BENYTTE USE CASES?

Kort forklaret var det at benytte og formulere nogle use cases en god måde for os at forstå præcis, hvad for nogle vigtige interaktioner en bruger eller admin skulle kunne lave på sitet.

SE USE-CASES:

(klik for at komme til use-case bilaget) • UC1 Opret bruger (Bruger) - Denne use case beskriver hvad der skal ske for

at en person kan blive oprettet som bruger på

hjemmesiden.

• UC2 Opret bruger (Admin) - Denne use case beskriver hvad der skal ske for

Det hjalp os til at forstå på et mere ”step-by-step” niveau, hvad der skulle ske ift. de forskellige handlinger aktøren laver og hvordan systemet så skulle reagere på disse handlinger. På den måde kunne vi finde eventuelle mangler eller problemer før vi begyndte at lave elementerne og undgå at skulle rette mange fejl efter at arbejdet var lavet.

at en person kan blive oprettet som bruger på

hjemmesiden fra admins perspektiv.

Use cases var altså med til at forebygge fejl/ mangler og evt. teste at funktionerne fungerede efter vores hensigt.

• UC3 Opret event (Bruger+Admin)

- Denne use case beskriver hvad der skal ske for

at en bruger/admin kan oprette et event på

hjemmesiden.

• UC4 Opret nyhed (Admin) Denne use case beskriver hvad der skal ske for at en admin kan oprette en nyhed på hjemmesiden.

• UC5 Opret forum tråd (Bruger) Denne use case beskriver hvad der skal ske for at

en bruger kan oprette en tråd på sitets forummer.

• UC6 Opret forum tråd (Admin) Denne use case beskriver hvad der skal ske for at

en admin kan oprette en tråd på sitets forummer.

PROJEKTUDVIKLINGEN

Opret bruger Opret event

ADMIN

Opret nyhed

BRUGER

Opret forum tr책d Rediger profil

KODE DOKUMENTERING Her vil de vigtigste dele af vores kode blive dokumenteret. Vi har valgt at gå mest i dybden med ‘events.php’ fordi den indeholder mange af de funktioner der også bliver brugt på andre sider. Det er samtidig også her vi har vores mest avanceret kode løsninger. De farvet bokse her under indeholder kode, taget direkre ud fra vores filer. Øverst i boksen står der hvor linjerne af koden kan blive fundet i vores filer. Kommentarer og ‘white space’ er blevet fjernet, for et bedre overblik. Koden bliver herefter beskrevet så kort og præsist som muligt. (Vi beklager for eventuelle ‘breaks’ der ikke findes originalt i koden. Da den er sat ind i rapporten, så der kan forekomme denne slags små ændringer)

events.php - linje 25 - 27

$currentuser = $_SESSION[‘uid’]; $curdate = date(“Y-m-d”); Brugerens id (uid), som er gemt i en session, bliver gemt i variabel. Senere skal den bruges til at vise de events, den enkelte bruger er blivet inviteret til. Datoen for det tidspunkt man ‘loader’ siden bliver gemt i en variable ($curdate), som der skal bruges til at filtrer de kommendene event fra de allerede afholdte events.

events.php - linje 30 - 39 if ($_GET[‘filter’] == ‘kommende’) { $where = 1; $kommende = ‘ event-active’; } else if ($_GET[‘filter’] == ‘afholdte’) { $where = 2; $afholdte = ‘ event-active’; } else { $kommende = ‘ event-active’; $where = 1; }

PROJEKTUDVIKLINGEN

Hvis man har trykket på at, events skal filteres efter kommende eller afholdte, bliver url’en ændret til fx. “events.php?filter=kommende”. I dette tilfælde har man vælgt at sortere efter kommende events. Hvis ‘kommende’ er valgt bliver ‘$where’ sat til ‘1’, hvis ‘afholdte’ er valgt bliver ‘$where’ sat til ‘2’. Dette bruges senere til at bestemme om der skal sorteret efter kommende datoer eller forige datoer. Samtidig bliver henholdsvist ‘$kommende’ eller ‘$afholdte’ sat til ‘ event-active’, der bruges til at vise hvilken en af knapperne, man har trykket på. Hvis ‘filter’ ikke er sat i url’en, sker der det samme som hvis man har valgt ‘kommende’, da det er vores ønske at vise de kommende events ‘by default’.

events.php - linje 8 - 20 if ($where == 1) { $wherestmt = “> ‘$curdate’”; } else if ($where == 2) { $wherestmt = “< ‘$curdate’”; }

Hvis ‘$where’ = ‘1’ skal de kommende events vises. Modsat hvis ‘$where’ = ‘2’, her skal de afholdte events vises.

events.php - linje 8 - 20 $sql = “SELECT NULL FROM event LEFT JOIN evitelist ON evitelist.eventid = event.eid LEFT JOIN grouplist ON grouplist.gid = evitelist.groupid LEFT JOIN users ON users.ugroup = grouplist.gid WHERE edato $wherestmt AND (event. type = ‘public’ or users.uid = $currentuser)”; $stmt = $mysqli->prepare($sql); $stmt->execute(); $stmt->store_result(); $rows = $stmt->num_rows;

For at vi kan få vores ‘pagination’ til at virke, skal vi først tælle antallet af events der skal vises på siden. Vi vælger “ingen ting” fra event hvor ‘edato’ er henholdsvis større eller mindre end den nuværende dato. (Efter om der skal være kommende eller forige events.) Og der hvor ‘event.type’ er ‘public’ eller hvor ‘users.uid’ er det uid som den logget ind bruger har ($currentuser). Altså vi vælger de events som brugeren er inviteret til og de events hvor alle er velkommen, hvor datoen enten er større eller mindre end den nuværenden dato. Forsættes på næste side

Til sidst tæller vi antallet af rækker i databasen der passer overens med vores kriterier. Tallet bliver gemt i ‘$rows’.

events.php - linje 78 - 89 $rowsperpage = 4; $lastpage = ceil($rows / $rowsperpage); if ($page <1) { $page = 1; } else if ($page > $lastpage) { $page = $lastpage; } $limit = “LIMIT “ . ($page - 1)*$rowsperpage . “, $rowsperpage”; Vi vælger hvor mange events vi ønsker at vise per side og gemmer antallet i ‘$rowsperpage’. Vi dividerer antallet af events med antallet af ønskede events per side og runder op til nærmeste hele tal. På den måde kan vi regne ud hvor mange sider vores ‘pagination’ skal indeholde.

Hvis ‘$page’ er mindre end ‘1’ bliver ‘$page’ sat til ‘1’. Hvis ‘$page’ er større end ‘$lastpage’ bliver ‘$page’ sat til den sidste side. På denne møde sikre vi os at man ikke kan komme over på en side der er mindre end ‘1’’ og større end den sidste side.

events.php - linje 97 - 112 $sql = “SELECT eid, etitle, description, date_format(sdato, ‘%d-%m-%Y’), date_ format(edato, ‘%d-%m-%Y’), date_format(stime, ‘%H:%i’), date_format(etime, ‘%H:%i’), loca FROM `event` LEFT JOIN evitelist ON evitelist.eventid = event.eid LEFT JOIN grouplist ON grouplist.gid = evitelist.groupid LEFT JOIN users ON users.ugroup = grouplist.gid WHERE edato $wherestmt AND (event. type = ‘public’ or users.uid = $currentuser) ORDER BY edato ASC, etime ASC $limit“; $stmt = $mysqli->prepare($sql); $stmt->execute(); $stmt->bind_result($eid, $etitle, $desc, $sdato, $edato, $stime, $etime, $loca); $stmt->store_result(); Her vælger vi, som før, de events der skal vises på siden. vi binder resultaterne så vi senere kan udskrive dem.

PROJEKTUDVIKLINGEN

events.php - linje 183 - 188 if($page != 1) { $prev = $page -1; $pagination .= “<li><a href=’?side=”.$prev.$filter.”’>&laquo;Previous</a></ li>”;

events.php - linje 190 - 197 for ($i=1; $i<=$lastpage; $i++) { if ($page == $i) { $active = “class=’active’”; } else { $active = “”; } $pagination .= “<li “.$active.”><a href=’?side=”.$i.$filter.”’>”.$i.”</a></li>”; }

} else { $pagination .= “<li class=’disabled’><a href=’’>&laquo;Previous</a></ li>”;

I mellem ‘tilbage’ og ‘frem’ knapperne, er der en liste af sider fra ‘1’ til den sidste side. Hvis man er på den bestemte side bilver knappen, highlighted så man tydeligt kan se hvor man befinder sig.

} Hvis man befinder sig på en side som ikke er den første, bliver ‘$prev’ sat til ‘$page’ -1, som er den side man er på -1. Samtidig bliver ‘$pagination’ sat til at lave en ‘tilbage’ knap i pagination menuen. Hvis man er på første side bliver denne knap ‘disabled’. Samme er gældene for ‘frem’ knappen, der i stedet for at minduse, pludser med ‘1’. Denne knap bliver ‘disabled’ når den side man er på er den samme som den sidste siden i ‘paginationen’

APP UDVIKLING Da vores endelige resultat af Kampsax portal app’en skulle fungere som en lommeversion af webportalen.

Vi har valgt simpelt at benytte det til at man kan bruge tilbage knappen på sin smarthphone

Har vi valgt at udvikle den som det sidste tiltag i vores proces. Da vi ønskede at føre hjemmesiden ind i en ‘native wrapper’, og blot ændre menu funktionen for webportalen. Så den føltes mere som en app til sit håndholdte device.

APP LOGO

App’en er blevet udviklet kun til Android devices i første omgang, med særlig vægt på Android mobiler og ikke tablets eller Chrome Books. Herunder ses et billede af AppInventor systemet der er brugt til at udvikle appen.

Her kan man se at det bruger en slags puslespilsbrikker til at opstille jQuery i koden.

I forbindelse med app’en har vi selvfølgelig udarbejdet et logo som gerne skulle fange essensen af vores design og farvevalg til webportalen og det oprindelige logo dertil.

PROJEKTUDVIKLINGEN

DESIGN PRINCIPPER GRID

Vi har på webportalen arbejdet ud fra idéen om at siden skulle ligne et computerspils startmenu eller opstarten af ens operativsystem. For at sigte imod vores tekniske målgruppe. Derfor har vi også arbejdet særligt imod et fungerende gridsystem, og i den forbindelse har vi valgt at arbejde med Bootstrap Framework. Som sørger for et responsivt gridsystem, som gav en fantastisk mulighed for at arbejde i firkantede grid systemer.

LUFT

På webportalen er der givet et tydeligt luftrum til de elementer der skal adskilles. Derved give et overblik for brugeren om de elemementer vi ønsker fremhævet i vores design.

LUKKETHED

Ved brug af princippet om lukkethed får vi skabt en ramme rundt om vores elementer på webportalen. Vi anvender farver, billeder og linier til at lukke elementer, så de ikke flyder ind i andre.

GENKENDELIGHED

Brugen af ikoner og farver på portalen, er med til at skabe en genkendelighed på sitet. Ikonerne skulle gerne give brugerne en idé om hvad der ligger bag dem, helt uden at have besøgt webportalen før. Ved brug af farver har vi fx. rød som advarsels farve og grøn som oprettelses farve, hvor man bl.a. oprettet artikler, forum indlæg mv.

PROJEKTUDVIKLINGEN

GRID

LUKKETHED

LUFT

“Profil side start mockup” i fuld størrelse

Se “Forside start mockup” i fuld størrelse

Se “Profil side mockup” i fuld størrelse

Se “Event mockup” i fuld størrelse

Se “Forside mockup” i fuld størrelse

PROJEKTUDVIKLINGEN

MOCKUPS Før vi startede med at kode og lave design elementer til selve designet af webportalen. Lavede vi en serie af mockups (set her til venstre). Ud fra designprincipperne startede vi med at arbejde ud fra idéen om et design som gav fornemmelsen af at komme ind i et computerspil eller starte sit operativsystem op. Derfor kom vi hurtigt frem til at designet skulle opstilles i et overskueligt og nemt tilgængeligt grid system. Hvilket også er en af grundende til at vi har valgt at arbejde med Bootstrap Framework til dette projekt.

A M

P A

S 50

DESIGN MANUAL 52

LOGO

FARVER

TYPOGRAFI

LAYOUT

GRUNDELEMENTER

BILLEDSTIL

PRINT EKSEMPLER

GENERELT

Kampsax kollegie portal logoet er lavet som et samlet logo og skal derfor aldrig vises på andre måder end den her fremviste måde. Logoet er designet ud fra idéen om at lave et simpelt logo som havde elementer af Kampsax kollegiets område. Hertil den orange blok, som afspejler en boligblok på kollegiet set ovenfra. Den cyan linie er fra designprincipperne om lukkethed der gerne skulle give fornemmelsen af at logoet er et rektangel.

ROTATION

Logoet må gerne roteres 90 grader med uret fremad fra dets originale position i 0 grader. Det er med til at skabe et logo der også kan blive brugt i stående tilstand, som fx til print materialer eller simpelt til et online banner.

DESIGNMANUAL

LOGO 53

DESIGNMANUAL

Logoet findes i varianterne af hvid - (positiv) og sort skrift (negativ).

LOGO

LOGO VARIANTER

Udført i henholdsvis hvid/sort med orange og cyan. Se respektafstand og placering på næste side.

DESIGNMANUAL

Afstanden som holder logoet væk fra andre forstyrende elementer.

LOGO

RESPEKTAFSTAND Kan defineres som svarende til o’et i kollegie eller portal.

PLACERING

Logoet skal placeres frit stående fra andre elementer. Og skal som udgangspunkt placeres på en mørk baggrund, ellers skal den negative version benyttes.

KOLLEGIELOGOET UDFØRT I HVID, ORANGE OG CYAN (Lavet som nyt logo til selve kollegiet. Til flag, skilte mv.)

KOLLEGIELOGOET I NEGATIV UDFØRT I HVID, ORANGE OG CYAN (Lavet som nyt logo til selve kollegiet. Til flag, skilte mv.)

DESIGNMANUAL

LOGO

KAMPSAX KOLLEGIET LOGO

Kampsax kollegie portal logoet blev originalt lavet webportalen, men blev videreudviklet til at være et nyt kollegiums logo. Til brug på skilte, flag mv. Kampsax Kollegiet logoet er udført på præcis samme vis som portal logoet og har samme regler glædende som portal logoet. Må roteres 90 grader fremad med uret, benytter O’et i kollegiet som respektafstand måler og skal placeres fritstående.

SORT PANTONE Neutral Black c HEX: #231f20 c:0 m:0 y:0 k:100 R:35 G:31 B:32

ORANGE PANTONE 144 c HEX: #f7941d c:0 m:50 y:100 k:0 R:247 G:148 B:29

CYAN PANTONE 801 c HEX: #00aeef c:100 m:0 y:0 k:0 R:0 G:174 B:239

HVID PANTONE 663 c HEX: #fffef9 c:0 m:0 y:2 k:0 R:255 G:254 B:249

RØD PANTONE 1795 C HEX: #d51c29 c:0 m:99 y:91 k:11 R:213 G:28 B:41

GRØN PANTONE 7739 c HEX: #0db14b c:80 m:0 y:100 k:0 R:13 G:177 B:75

DESIGNMANUAL

(Vi har vedhæftet et farvehjul for at vise hvor farverne ligger i forhold til hinanden)

SORT

Har vi valgt som baggrunden til vores design på webportalen. Da den sætter en dæmper på lyset på ens pc, tablet eller smartphone. Grunden til dette er at mange studerende arbejder sent og derfor tjekker hjemmesider sent om aftenen. Derfor skulle webportalen gerne afspejle en sent vågen studerendes synpunkt på lyse hjemmesider.

ORANGE & CYAN

FARVER

Illustreret her ses alle farver der er en del af Kampsax designmanual. Det er som vist tilladt at benytte farverne med en hvis opacitet/nuance.

Repræsenterer hovedfarverne i vores design. Vi har valgt dem på baggrund af murstensfarven orange på Kampsax kollegiet. Det er en lysere orange end murestene og grunden til den cyan farve er at den komplimenterer orange. Hvilket giver et flot farvespil på portalen og i fremtidigt grafisk design.

HVID

Den hvide farve er valgt som en knækket hvid pantone farve som fungerer godt med den sorte når den kommer på print.

RØD & GRØN

Skal fungerer som signalfarver i designlinien. De skal bruges i minimalt omfang. Kun for at highlighte en oprettelse/ nyt (GRØN) eller advarsel/slet/fjern (RØD).

61 Se “Farvehjul” i fuld størrelse

HELVETICA NEUE

Kampsax designlinjes primære skrifttype til brug i tekster og grafik. Vi har valgt Helvetica neue da der er en fremtidige skrifttype som fungerer godt på mange nye devices og bliver kun bedre med at skærme bliver mere klare, ved bedre opløsning og skarpere farver.

ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopqr stuvwxyzæøå 0123456789,@-?&/. ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopqr stuvwxyzæøå 0123456789,@-?&/.

ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopq rstuvwxyzæøå 0123456789,@-?&/. ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopq rstuvwxyzæøå 0123456789,@-?&/.

DESIGNMANUAL

TYPOGRAFI 63

ADOBE GARAMOND PRO

Garamond benyttes i ganske små mængder og kun til grafik på print materiale eller som en highlighter til tekst der bør fremhæves. Vi har valgt at arbejde med Adobe Garamond Pro, da den giver en stærk kontrast til vores primær font Helvetica Neue utroligt godt. Da det er en serif (med fødder) skrifttype, mens Helvetica Neue er san-serif (uden fødder).

DESIGNMANUAL

ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopqr stuvwxyzæøå 0123456789,@-?&/. ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopq rstuvwxyzæøå 0123456789,@-?&/. ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopq rstuvwxyzæøå 0123456789,@-?&/.

TYPOGRAFI

ABCDEFGHIJKLMNOPQ RSTUVWXYZÆØÅ abcdefghijklmnopqr stuvwxyzæøå 0123456789,@-?&/.

.col- .col- .col- .col- .colmd-1 md-1 md-1 md-1 md-1

.col-md-4

.col- .col- .col- .col- .col- .col- .colmd-1 md-1 md-1 md-1 md-1 md-1 md-1

.col-md-4

.col-md-8

.col-xs-6 .col-md-6 .col-lg-6

.col-md-4

.col-xs-6 .col-md-6 .col-lg-6

.col-xs-12 .col-md-12 .col-lg-12

DESIGNMANUAL

Her arbejdes der ud fra Twitter Bootstrap (v3.2.0). Det er et 12 delt system, der har en div container der passer til 1170px, i bredden, i max størrelsen. Ved rigtig brug af de funktioner Bootstrap tilbyder er det muligt at få hjemmesiden til at være fuld responsive ved brug af media queries.

LAYOUT

HJEMMESIDEN

GRAFISKE ELEMENTER De grafiske elementer på webportalen bliver afspejlet hele vejen igennem designlinjen, ved firkanterne og ikonerne brugt på webportalen.

IKONER Ikonerne på portalen skulle gerne hjælpe brugerne til at hurtigt kunne navigere rundt ved kun at se ikonet. Derfor er det vigtigt at ikonerne aldrig beskåret mere end 5% af margin rundt.

Ikonerne må gerne roteres, dog aldrig mere end 90 grader frem og tilbage. Som vist herunder.

DESIGNMANUAL

Vores design er bygget op omkring firkanter. De benyttes som placeholders og grafiske elementer p책 portalen og print materiale. Firkanterne m책 gerne roteres, dog kun i -45 +45 grader. Alt andet giver ikke symetri i designet.

GRUNDELEMENTER

FIRKANTER

DESIGNMANUAL

Billedstilen skal gerne vise Kampsax univers hvor unge mennesker bor sammen og laver sjove og motiverende oplevelser sammen. Billeder af bygningen eller området skal være lyse og rummelige. Derfor skal der ikke findes billeder på print eller webportalen, hvor man ser mørke kroge af Kampsax eller billeder fra efter en fest hvor der ikke er blevet ryddet op endnu. Billeder af fester, aktiviter og generelt personer på Kampsax skal gerne fremstå som ægte og naturlige situationer. Det er vigtigt at billederne viser fællesskabet, men der behøver ikke være flere personer på et billede. Enkeltpersonsbilleder skulle gerne vise en person der har kontakt til andre omkring sig og ikke fotografen.

BILLEDSTIL

GENERELT

Alt om Kampsax kollegiet samlet ét sted. Nyt website og ny app

Kampsaxkollegiet.dk Se “Plakat eksempel” i fuld størrelse

Kampsax kollegiet har fået en ny webportal til gavn for beboere og alle med interesse for kollegiet

Få de seneste nyheder og hold dig opdateret med hvad der sker på Kampsax

Giv din mening til kende om de forskellige ting der sker på Kampsax

Opret eller se fremtidige events på kollegiet. Nem måde at have overblik over hvad der sker af spændende ting omkring dig

Fungerer også som app til din smartphone

Se “Flyer eksempel” i fuld størrelse

DESIGNMANUAL

Vores valg af metode til at promovere og reklamere for den nye Kampsax portal var at lave plakater og flyers, der kunne blive hængt op og delt ud rundt omkring på kollegiet. Således ville beboerne blive gjort opmærksom på den nye portal og derfra selv søge mere information om hjemmesiden.

Både plakaten og flyeren er sat op til at ligne hjemmesiden ved at benytte de samme farver og samme slags setup og grafiske elementer til dels. Dette er gjort for at skabe en genkendelsesfaktor for modtageren sådan, at det virker som noget man har set før. Dette skulle gerne medvirke til at når modtageren besøger webportalen, efter at have set plakaten/flyeren, kan identificere sig frem til at det er det rette website man er kommet frem til. Flyeren beskriver kort nogle af de ting man kan benytte portalen til og giver dermed modtageren en idé om hvad det hele går ud på før overhovedet at have set hjemmesiden. Plakaten viser hjemmesidens forside på en større desktop skærm og på en mobil for at give modtageren forståelsen for at portalen kan benyttes på både store og små -

enheder, altså er let at bruge og let tilgængeligt.

PRINT EKSEMPLER

FLYER & PLAKAT

Derfor burde vores tryksager gerne på hver sin måde skabe opmærksomhed om hjemmesiden og skabe en bedre forståelse om portalen.

TESTING PROTOTYPE BRUGERTEST

GANGSTER TEST

AFSLUTTENDE BRUGERTEST

EKSPERTVURDERING

DESIGN

IMPLEMENTERING

ANALYSE

TESTING

PROTOTYPE BRUGERTEST Den 15. december besøgte vi Kampsax kollegiet for at udføre en brugertest af prototypen af webportalen. Hvor vi testede 3 personer fra forskellige målgruppe områder

vi havde ramt plet med vores design valg, men der også manglede en god del ting på siden.

Testperson 1: Mand, 20 år Testperson 2: Mand, 27 år Testperson 3: Kvinde, 22 år

GODT • Moderne webportal. • Meget tilgængelig med store tiles/ firkanter. • Ligner Windows 8, men mere overskueligt • Godt design og nemt at finde rundt. • Elsker forum idéen

Ved udførslen af en brugertest i det tidlige stadie af webportalen. Kunne vi nå at udarbejde de eventuelle fejl og kriterier som testpersoner ikke kunne lide.

Generel opfattelse af webportalen: Positiv

Vi udførte en simpel test der førte SKAL ÆNDRES / TILFØJES testpersonerne rundt i de fleste kroge af den • Flere farver eksisterende hjemmeside og dens design. • Svært at finde adressen til kollegiet • Problemer med at finde hvor man var på (Se testspørgsmålene til højre) nogen undersider. • Events kunne være bedre opstilt. Selve testen blev udført som en standard brugertest med en observatør, en testleder Vi tog kritikken til os og satte igang med at og selvfølgelig en testperson13. foretage de ønskede ændringer til sitet. Vi fik taget en god bunke notater og lærte at

13) Gregersen, Ole , Wisler-Poulsen, Ian ; Usability ; 1. udagve 2011 ; side 96

TESTING

BRUGERTEST SPØRGSMÅL Hvordan foregår en brugertest? Når man starter en brugertest er det vigtigt at sætte ens testperson ind i den stemning der findes omkring opgaven han/hun er på vej ind til. Derfor starter vi også vores test med at fortælle vores testperson hvordan de nu bør tænke.

SPØRGSMÅL

Du står og skal til at flytte ind på Kampsax kollegiet 1. Find information om værelset. Mere præcist hvor stort værelserne er, eventuelt en grundplan. 2. Du ved at du skal ud at rejse i februar måned til slut april, og vil gerne fremleje dit værelse. Find ud af hvorvidt der behøver være møbler på værelset ved fremlejning. Og kan man overhoved fremleje?

3. Du er nu flyttet ind på kollegiet, og skal logge ind for første gang. Venligst benyt kode og brugernavn foran dig, og prøv at logge ind. Bruger: test@kampsax.dk Password: password 4. Du er nu logget ind. Du vil gerne finde ud af hvilken fest er den næste kommende fest Kampsax baren. 5. Du vil gerne se om der findes et godt tilbud på forummet. Find købs forummet og byd på en varer. 6. Du har nu udført vores brugertest. Har du nogen yderligere kommentarer til webportalen? - Farver? - Navigation? - mv.

GANGSTERTEST

Vi besluttede os for at lave en gangstertest af vores webportal, eftersom at det er utrolig god måde at teste sidens informationsarkitektur. Testen består af 6 spørgsmål og tager udgangspunkt i, at testpersonen havner på en underside han/ hun ikke selv har navigeret til.

TESTPERSON

Hjemmesiden der bliver testet kan få alt imellem 0-18 point, det giver et godt overordnet indtryk af hvorledes elementerne på platformen fungerer som planlagt. Selvom det overordnede indtryk som regel er tilstrækkeligt, er det stadig nødvendigt at gå i dybden med de forskellige resultater af spørgsmålene, for at rette de eventuelle områder der trak mest ned i testen.

1. Sidens identifikation: Hvilken side befinder du dig på (kan han se logo navn osv?)

Til selve gangstertesten kan der med fordel benyttes, en testperson som vejledes af en testleder der tager notater og nedskriver eventuelle kommentarer der måtte komme med undervejs, da vedkommende bedes tænke højt14.

Navn: Peter Koefod Stender Alder: 23 Civilstatus: Single, udeboende Beskæftigelse: Studerer kemi på DTU

SPØRGSMÅL

• 3 point – Fremstår tydeligt på siden ”Kampsax kollegie portal”. 2. Sektioner: Hvilke overordnede sektioner er der på siden (Designets måde at anvise hvad der er) • 3 point - 5 overordnede sektioner ses i toppen af siden samt 5 undersektioner her hvor jeg befinder mig. 3. Underside: Hvilken underside befinder du dig på? • 3 point – Står som overskrift på siden og breadcrumbs viser min navigation.

14) Gregersen, Ole , Wisler-Poulsen, Ian ; Usability ; 1. udagve 2011 ; side 42

TESTING

4. Lokal Navigation: Hvilke muligheder har du på dette niveau/undersider på samme niveau (menuer, genveje, knapper og funktioner) • 3 point – Der er en underside menu på dette niveau og det fremstår tydeligt. 5. Placeringsindikatorer: Hvor er du i den samlede struktur – hvordan er du kommet dertil (findes der brødkrummesti, er der overblik i navigationen, markering af aktuel placering osv?) • 3 point – Der er breadcrumbs, jeg er kommer dertil via hovedmenuen og en undermenu, derudover er der overblik i navigation mht. Markering af menupunkt. 6. Søgefunktion: Kan du søge på siden, hvor henne og får du de forventede resultater? • 0 point – Eksisterer ikke på siden - kommentar: ”Hvis der var rigtig mange tråde inde på forumet, hvis det rent faktisk blev udgivet til kampsax, som deres kollegie webportal, ville en soegefunktion være på sin plads.

SAMLET POINT: 15 KONKLUSION AF GANGSTERTEST Vi var tilfredse med resultatet af vores gangstertest. Testpersonen kom med nogle interessante kommentarer undervejs, der alle er blevet noteret og taget til eftertanke. Det eneste der trak ned i vores gangstertest var den ikke eksisterende søgefunktion. Efter en kort samtale omkring portalen, blev vi enige om at vi skulle indsætte en søgefunktion til forummet, hvilket blev implementeret den næste dag.

AFSLUTTENDE BRUGERTEST I forbindelse med prototypen lavede vi en brugertest af sitet for at finde de fejl og mangler vi havde midt i processen.

Derfor ønsker vi at udføre endnu en brugertest, for at være sikker på at vi nu har lukket de eventuelle fejl og tilføjet de ønsker som beboerne kun tænke sig på webportalen. Brugertesten vil blive udført i start januar og præsenteret ved eksaminationen.

BRUGERTEST SPØRGSMÅL

Du er flyttet ind på Kampsax kollegiet og har modtaget dine login oplysninger på en mail.

1. Naviger til kampsax.designduck.dk og login med dine nye oplysninger. 2. Rediger dine profiloplysninger – slut af med at opdatere dit password.

3. Upload et nyt profil billede til din brugerprofil på webportalen. 4. Dit køkken holder en julefrokost og i har venner blandt andre køkkener på Kampsax der skal inviteres, opret et event den 21, januar og inviter mindst 3 køkkener. 5. Du har anskaffet dig et nyt skrivebord og skal af med dit gamle, du vil gerne sælge det, opret et salgopslag på webportalen. 6. Du har i mellemtiden fundet ud af at jeres fest den 21. januar ikke bliver til noget. Slet dit event igen. 7. Du har nu udført vores brugertest har du nogen yderligere kommentarer til sitet. - Farver? - Navigation? - m.v

TESTING

EKSPERT VURDERING En ekspertvurdering er en systematisk måde at gennemgå et website, hvor generelle retningslinjer inden for usability bruges til vurdere websitets kvilitet i brugen. Grundlaget for ekspertvurderingen er, at eksperterne til en vis grad kan forudse fejl og mangler, der vil skabe problemer på websitet for de faktiske brugere, når de interagerer med det.15 Vi ønsker at få foretaget en ekspertvurdering af vores site for at finde fejl som brugertesten ikke vil finde. Da ekspertvurderingen som nævnt ovenover er en systematisk gennemgang af sitet, finder man ofte små fejl som brugerne ikke opdager første gang. Det er en gennemgang af de 10 heuristikker/retningslinier af Jakob Nielsen har opstillet, som er de mest anvendte og anerkendte. Denne test vil blive udført af en anden gruppe i starten af januar.

15) Gregersen, Ole , Wisler-Poulsen, Ian ; Usability ; 1. udagve 2011 ; side 64

AFSLUTTENDE 84

KONKLUSION

REFERENCER

BILAG

KONKLUSION Vi ønskede at udarbejde en webportal for Kampsax Kollegiet som skulle samle og organisere beboerne på kollegiet på en nem og overskuelig måde. Målet med dette var at holde beboerne opdateret med nyheder samt at skabe et bedre fællesskab på kollegiet. Kampsax har allerede en webportal, problemet er bare at der er ingen af beboerne der bruger webportalen da den er uoverskuelig og kompliceret. Vi har derfor udviklet en webportal med et simpelt grid design som giver beboerne et godt overblik over events og nyheder på Kampsax Kollegiet. Funktionerne på siden er relevante for beboerne, disse skal gerne

være med til at sikre at beboerne ville benytte webportalen. Eftersom vores målgruppe er unge mennesker, der primært består af folk der studere på DTU, var det vigtigt at vi udviklede et design der appellerede til teknisk interesserede med et moderne layout. Dertil hjalp det gevaldigt at Kampsax ikke har en fastlagt visuel identitet, hvilket gav os som udviklere forholdsvis frie tøjler til at udvikle det vi mente var det rigtige design til målgruppen. Derfor fandt vi hurtigt ud af at webportalens layout skulle minde om det man ser i menuen på et computerspil eller operativ system.

AFSLUTTENDE

Vi testede vores webportal via. en prototype brugertest hos den primære målgruppe, for at finde ud af hvorvidt webportalen gjorde det den skulle kunne.

ved indflytningen. Brevet indeholder al information om den nye indflytters login informationer til webportalen, samt en hurtig guide i at benytte den.

På samme tid modtog vi også feedback angående design og layout. Stortset alle testpersonerne nævnte ligheden mellem vores layout og det design man ser hos et operativ system, mere specifikt Windows 8. Hvilket også var et af de punkter vi havde sigtet efter med vores design af webportalen.

For at få informationen ud om det tilhørende app, er plakaten forsynet med informationer om den, samt en QR kode til hentning af appen til sin android smartphone.

For at få reklamen ud om den nye webportal var vores primære plan at sætte plakater op og dele flyers ud op til release datoen. Senere hen vil nye beboere blive informeret i form af et obligatorisk informationsbrev

Formålet med dette projekt har været at skabe et univers hvori Kampsax kollegianerne kunne blive mere sociale ved at holde sig opdateret om hvad der sker på kollegiet og deltage aktivt på portalen. Med dette projekt har vi formået at gøre lige præcis dette.

REFERENCER BØGER • • • •

Jackobsen, Jan Kragh : 29 spørgsmål : Udgave 2, Samfundslitteratur, 2012 Wisler-Poulsen, Ian : 20 Designprincipper : Udgave 1, Grafisk Litteratur, 2012 Wisler-Poulsen, Ian og Gregersen, Ole : Usability : Udgave 1, Grafisk Litteratur, 2009 Harder Fischer, Louise og Oosterbaan, Marie : Digital Media Management : Udgave 3, Nyt Teknisk Forlag, 2010 • Zigler, Christian Oxholm ; Marketing Management ; Udgave 4, Forlaget Samfundslitteratur, 2005

VÆRKTØJER: • • • • • • • • • •

Google Slides Google Sheets Adobe Creative Cloud programmer - Photoshop, Illustrator, InDesign, Lightroom mv. Notepad ++ Browsere - Chrome, Safari, Internet Explorer, Mozilla Firefox. MySQL Workbench Filezilla TeamSpeak 3 Notepad Paint

REFERENCER

LINKS • • • • • • • • • • • • • • • • • • • • • • • • • • • •

http://getbootstrap.com/ http://stackoverflow.com/ http://www.w3schools.com/ http://www.iconfinder.com/ http://gs.statcounter.com/#all-browser-ww-monthly-201311-201411 http://da.wikipedia.org/wiki/Scrum http://da.wikipedia.org/wiki/Vandfaldsmodellen http://en.wikipedia.org/wiki/Third_normal_form http://www.phpfreaks.com/tutorial/basic-pagination http://www.itu.dk/courses/DFMN/F2005/Henrik%20Dahl.htm http://www.kampsaxkollegiet.dk/ http://www.mannaz.com/da/projektledelse/projektmodel/analysefasen/interessentanalysen/ http://www.risikoanalyser.dk/ http://www.kl.dk/ImageVaultFiles/id_38269/cf_202/Projekth-ndbog.PDF http://www.lasertryk.dk/produkter/dat/loesblade/priser-paa-losblade.aspx#0 http://www.lasertryk.dk/produkter/dat/plakater/priser-paa-plakater.aspx http://www.tagxedo.com/app.html http://images.slideplayer.dk/7/1988659/slides/slide_5.jpg http://colors-ofmylife.blogspot.dk/2013/06/sommerfest-pa-kampsax-kollegiet.html http://3.bp.blogspot.com/-CFy2g-abSFQ/Uis2dl2PeZI/AAAAAAAAAL0/4qCJJMX4kEs/ s1600/DSC_0040.JPG http://media.avisen.dk/billeder/studiejob_3160403_26.ashx http://www.dagens.dk/sites/default/files/field/image/indbrud_2_0.jpg http://linnkatarina.com/wp-content/uploads/2013/03/frokenkraesen_koldhavende_ boller8.jpg http://multimedia.pol.dk/archive/00588/K_benhavns_Universi_588438a.jpg http://akkr.dk/wp-content/uploads/akkr/Forside2-735x185.jpg http://www.bt.dk/sites/default/files-dk/node-images/6/3/3006649-.jpg http://multimedia.pol.dk/archive/00512/DM_i_bordfodbold_512239a.jpg http://adityabhandari.com/wp-content/uploads/2011/04/img_user_testing.jpg

Tilbage til SCRUM

BILAG 1 - PBS

Tilbage til Risikoanalyse

BILAG 2 - RISIKOANALYSE

Tilbage til SCRUM

BILAG 3 - SCRUM SPRINT 10 DAGE

Tilbage til SCRUM

BILAG 4 - SCRUM SPRINT 12 DAGE

Tilbage til Interessentanalyse

BILAG 5 - INTERESSENTANALYSE

Tilbage til kommunikationsplan

BILAG 6 - LASSWELL KOMMUNIKATIONS MODEL KAMPSAX KOLLEGIET netgruppen / beboerrådet

HVEM

Vi ønsker at være mere sociale

SIGER HVAD

TIL HVEM

Webportal, app, plakater og flyers

Kampsax kollegiets beboere og fremtidige beboere.

I HVILKEN KANAL

MED HVILKEN EFFEKT

95 Fællesskab og vel informeret.

Tilbage til AIDA

BILAG 7 - AIDA MODELLEN

Tilbage til Database

BILAG 8 - ER-DIAGRAM

Tilbage til Database

BILAG 9 - ATTRIBUTE TABEL

Tilbage til Database

BILAG 10 - CRUD MATRIX

Tilbage til Mockups

BILAG 11 - PROFIL SIDE START MOCKUP

100

Tilbage til Mockups

BILAG 12 - FORSIDE START MOCKUP

101

Tilbage til Mockups

BILAG 13 - PROFIL SIDE MOCKUP

BILAG 14 - EVENT MOCKUP

102

Tilbage til Mockups

BILAG 15 - FORSIDE MOCKUP

103

Tilbage til Farver

BILAG 16 - KAMPSAX FARVEHJUL

104

Tilbage til Print eksempler

BILAG 17 - PLAKAT EKSEMPEL

Alt om Kampsax kollegiet samlet ĂŠt sted. Nyt website og ny app

Kampsaxkollegiet.dk

105

Tilbage til Print eksempler

BILAG 18 - FLYER EKSEMPEL

Kampsax kollegiet har fået en ny webportal til gavn for beboere og alle med interesse for kollegiet

Få de seneste nyheder og hold dig opdateret med hvad der sker på Kampsax

Giv din mening til kende om de forskellige ting der sker på Kampsax

Opret eller se fremtidige events på kollegiet. Nem måde at have overblik over hvad der sker af spændende ting omkring dig

106

Fungerer også som app til din smartphone

Tilbage til Use Cases

BILAG 19 UC1 – OPRET BRUGER (BRUGER) Name: Oprettelse af bruger (bruger) Identifier: UC1 Description: Denne use case beskriver hvad der skal ske for at en person kan blive oprettet som bruger på hjemmesiden. Goal: En person er blevet oprettet som bruger. Preconditions: • Hjemmesiden skal være indlæst og på siden hvor formularen til brugeroprettelse er, skal den udfyldes. • Den del af databasen, der har med brugeroprettelse at gøre skal være sat op og funktionel. Assumptions: • Personen der vil oprette en bruger har en browser. • Personen skal flytte ind på Kampsax eller er allerede flyttet ind og mangler en bruger på portalen. Frequency: Denne use case er estimeret til oftest at kunne foregå ved slutningen af semestre på de forskellige typer uddannelser. Dette er estimeret ved at have kollegiets reglement in mente og ved generel kendskab af kollegiet. Basic Course: 1. Use case begynder ved at en person som skal flytte ind på Kampsax eller som allerede bor på Kampsax uden bruger på sitet, vil oprettes som bruger på sitet. Personen åbner en tilsendt mail fra en

admin, hvor der står login informationer og et auto-genereret password som personen så selv skal ændre til noget personligt. Personen logger ind og indtaster sit nye password og indtaster eventuelle manglende informationer, accepterer diverse betingelser m.m. og gemmer sine informationer. 2. Use case slutter ved at personen klikker submit og hans/hendes nye informationer gemmes i databasen med sin bruger, oprettelsen er fuldendt. Alternate Course A: Personen indtastede forkerte oplysninger i sin brugerprofil. Condition: Personen indtastede nogle forkerte informationer. 1. Personen kom til at skrive nogle forkerte informationer i sin brugerprofil. 2. Brugeren klikker ”Rediger profil” og ændrer de forkerte informationer der blev gemt i databasen. 3. Personen klikker ”Gem oplysninger” og de ændrede informationer gemmes korrekt i databasen. Ændringen er gemt i databasen. Alternate Course B: Personen modtog aldrig nogen mail fra Kampsax om hvad de skulle gøre.

(Forsættes på næste side)

107

BILAG 19 - UC1 – OPRET BRUGER (BRUGER) (FORSAT) Conditions: Personen modtog aldrig nogen mail. 1. Da der aldrig kom nogen mail fra Kampsax kunne personen ikke oprette sig som bruger på sitet. 2. Personen kontakter Kampsax og får rettet hvad fejl der nu må være opstået eller i hvert fald underrettet de rette om problemet. 3. Fejlen bliver rettet og personen modtager en mail fra Kampsax med informationerne der er rettet og kan nu oprette sig som bruger på sitet. Oprettelsen er fuldendt med de korrekte informationer. Post Conditions: Personen har fået sin brugerkonto oprettet og databasen er blevet opdateret med deres information. Actors: • Brugeren Extended Use Case: • UC3 – Oprettelse af event (bruger+ admin)

108

Notes: • Besøgende på sitet kan ikke blive oprettet som bruger medmindre de bor på Kampsax eller skal til at flytte ind på Kampsax.

BILAG 20 UC2 – OPRET BRUGER (A Name: Oprettelse af bruger (admin) Identifier: UC2 Description: Denne use case beskriver hvad der skal ske for at en person kan blive oprettet som bruger på hjemmesiden fra admins perspektiv. Goal: En person er blevet oprettet som bruger. Preconditions: • Hjemmesiden skal være indlæst og på siden hvor formularen til brugeroprettelse er, skal den udfyldes. • Den del af databasen, der har med brugeroprettelse at gøre skal være sat op og funktionel. Assumptions: • Personen der skal oprettes som bruger har en browser og fungerende mail. • Personen der skal oprettes som bruger skal flytte ind på Kampsax eller er allerede flyttet ind og mangler en bruger på portalen. Frequency: Denne use case er estimeret til oftest at kunne foregå ved slutningen af semestre på de forskellige typer uddannelser. Dette er estimeret ved at have kollegiets reglement in mente og ved generel kendskab af kollegiet. Basic Course: 1. Use case begynder ved at en person som skal flytte ind på Kampsax eller som allerede bor på Kampsax uden bruger

Tilbage til Use Cases

ADMIN) på sitet, vil oprettes som bruger på sitet. Admin får brugerens informationer og opretter brugeren med givne informationer og et auto-genereret password. 2. Admin tjekker at alle informationer er korrekte og trykker opret bruger. 3. Use case slutter ved at admin har oprettet brugeren og at en mail er sendt afsted til personen som så selv skal ordne resten af processen. Brugeren er indtil videre gemt i databasen og oprettelsen er fuldendt indtil videre. Alternate Course A: Admin indtastede forkerte oplysninger og personen der skal oprettes har ikke fået nogen mail. Condition: Admin indtastede nogle forkerte informationer og mail mangler. 1. Admin kom til at skrive nogle forkerte informationer i oprettelsen af brugerens profil. 2. Personen der skal oprettes som bruger underretter admin/netgruppen om at han/hun ikke har modtaget nogen mail og at der er sket en fejl. 3. Admin tjekker oprettelsen, retter sine fejl og får sendt en ny mail afsted til personen der skal oprettes som bruger på sitet. Oprettelsen bliver sendt afsted med mail korrekt og personen modtager nu en mail med informationerne.

Post Conditions: Personen har fået sin brugerkonto oprettet og databasen er blevet opdateret med deres information. Actors: • Admin (+ brugeren) Extended Use Case: • None Notes: • Besøgende på sitet kan ikke blive oprettet som bruger medmindre de bor på Kampsax eller skal til at flytte ind på Kampsax.

109

Tilbage til Use Cases

BILAG 21 UC3 – OPRET EVENT (BRUGER + ADMIN) Name: Oprettelse af event (bruger + admin) Identifier: UC3 Description: Denne use case beskriver hvad der skal ske for at en bruger/admin kan oprette et event på hjemmesiden. Goal: Et event er blevet oprettet af en bruger eller admin. Preconditions: • Hjemmesiden skal være indlæst og på siden hvor man opretter events skal de rette informationer gives. • Den del af databasen, der har med oprettelse af events at gøre skal være sat op og funktionel. Assumptions: • Personen der vil oprette et event har en bruger eller er admin. • Brugeren/admin vil gerne oprette et event for personer på Kampsax-kollegiet. Frequency: Denne use case er estimeret til at kunne foregå op til ca. 4-5 gange dagligt, baseret på hjemmesidens størrelse og indhold.

110

Basic Course: 1. Use case begynder ved at en bruger eller en admin gerne vil oprette et event for andre brugere af Kampsax’ hjemmeside 2. Personen indtaster event informationerne de korrekte steder i formularen og sikrer sig at alle informationer er korrekte.

3. Use case slutter ved at personen klikker ”Opret event” og det event gemmes i databasen, oprettelsen er fuldendt. Alternate Course A: Brugeren opdager at der er blevet indtastet nogle forkerte informationer og vil gerne rette sine fejl. Condition: Brugeren indtastede nogle forkerte informationer. 1. Brugeren kom til at skrive nogle forkerte informationer og vil nu rette sine fejl. 2. Brugeren sletter det forkerte event og opretter et nyt med de korrekte informationer. 3. Brugeren klikker ”Opret event” og det nye event gemmes med de korrekte informationer og kan læses/tilmeldes af andre brugere. Oprettelsen er fuldendt. Post Conditions: Brugeren har fået oprettet et event og databasen er blevet opdateret med informationerne. Actors: Brugeren / Admin Extended Use Case: None Notes: • Den besøgende kan ikke oprette events uden at være oprettet som bruger. • Man kan ikke se eller tilmelde sig events uden at være logget ind.

Tilbage til Use Cases

BILAG 22 UC4 - OPRET NYHED (ADMIN) Name: Oprettelse af nyhed (Admin) Identifier: UC4 Description: Denne use case beskriver hvad der skal ske for at en admin kan oprette en nyhed på hjemmesiden. Goal: En nyhed er blevet oprettet af en admin. Preconditions: • Hjemmesiden skal være indlæst og på siden hvor man opretter nyheder skal de rette informationer gives. • Den del af databasen, der har med oprettelse af nyheder at gøre skal være sat op og funktionel. Assumptions: Admin vil gerne oprette en nyhed for Kampsax-kollegiets brugere. Frequency: Denne use case er estimeret til at kunne foregå op til ca. 2-3 gange dagligt, baseret på hjemmesidens størrelse og indhold. Basic Course: 1. Use case begynder ved at en admin gerne vil oprette en nyhed for andre brugere af Kampsax’ hjemmeside. 2. Admin klikker sig ind på nyheder og dernæst på ”Opret Nyhed”. Admin udfylder diverse input felter med de korrekte informationer. 3. Use case slutter ved at admin klikker ”opret nyhed” og nyheden gemmes i databasen og kan læses af de andre brugere, oprettelsen er fuldendt.

Alternate Course A: Admin indtastede forkerte oplysninger. Condition: Admin indtastede nogle forkerte informationer. • Da admin oprettede nyheden fandt han senere ud af, at han havde skrevet nogle informationer forkert. • Admin sletter den forkerte nyhed og opretter en ny nyhed med de rette informationer. • Nyheden er genoprettet med de rette informationer i databasen og kan læses af de andre brugere. Rettelsen er fuldendt. Post Conditions: Admin har fået oprettet en nyhed med korrekte informationer som er gemt i databasen Actors: Admin Extended Use Case: None Notes: • Det er kun admins som kan oprette nyheder på sitet. • Nyheder kan læses af både brugere og admins på sitet.

111

Tilbage til Use Cases

BILAG 23 UC5 – OPRET FORUM TRÅD (BRUGER) Name: Oprettelse af forum tråd (bruger) Identifier: UC5 Description: Denne use case beskriver hvad der skal ske for at en bruger kan oprette en tråd på sitets forummer. Goal: En tråd er blevet oprettet på forummet af en bruger. Preconditions: • Hjemmesiden skal være indlæst og på siden hvor man opretter tråde på forummer skal de rette informationer gives. • Den del af databasen, der har med oprettelse af tråde i forummer at gøre skal være sat op og funktionel.

Assumptions: Brugeren vil gerne oprette en tråd på forummet for Kampsax’ brugere og vil gerne have at de skal kunne se/kommentere på opslaget. Frequency: Denne use case er estimeret til at kunne foregå op til ca. 10 gange dagligt, baseret på hjemmesidens størrelse og indhold.

112

Basic Course: 1. Use case begynder ved at en bruger gerne vil oprette en tråd som andre brugere af Kampsax’ hjemmeside kan kommentere på. 2. Brugeren klikker sig ind på Forum og dernæst vælger en kategori og trykker ”Opret ny tråd” 3. Brugeren indtaster de korrekte informationer og tjekker at alt er i orden.

4. Use case slutter ved at brugeren klikker ”Opret indlæg” og tråden gemmes i databasen og kan læses af de andre brugere, oprettelsen er fuldendt. Alternate Course A: Brugeren indtastede forkerte oplysninger. Condition: Brugeren indtastede nogle forkerte informationer. 1. Da brugeren oprettede tråden fandt han senere ud af, at han havde skrevet nogle informationer forkert. 2. Brugeren sletter den forkerte tråd og opretter en ny tråd med de rette informationer. 3. Tråden er genoprettet med de rette informationer i databasen og kan læses af de andre brugere. Rettelsen er fuldendt. Post Conditions: Brugeren har fået oprettet en tråd i en forum kategori som kan læses og kommenteres af andre brugere af Kampsax’ site. Actors: Brugeren Extended Use Case: None Notes: • Det er kun brugere og admins som kan oprette tråde på sitet. • Det er kun oprettede brugere på sitet som kan se og kommentere på de forskellige forummer.

Tilbage til Use Cases

BILAG 24 UC6 – OPRET FORUM TRÅD (ADMIN) Name: Oprettelse af forum tråd (admin) Identifier: UC6 Description: Denne use case beskriver hvad der skal ske for at en admin kan oprette en tråd på sitets forummer. Goal: En tråd er blevet oprettet på forummet af en admin. Preconditions: • Hjemmesiden skal være indlæst og på siden hvor man opretter tråde på forummer skal de rette informationer gives. • Den del af databasen, der har med oprettelse af tråde i forummer at gøre skal være sat op og funktionel.

Assumptions: Admin vil gerne oprette en tråd på forummet for Kampsax’ brugere og vil gerne have at de skal kunne se/kommentere på opslaget. Frequency: Denne use case er estimeret til at kunne foregå op til ca. 10 gange dagligt, baseret på hjemmesidens størrelse og indhold. Basic Course: 1. Use case begynder ved at en admin gerne vil oprette en tråd som andre brugere af Kampsax’ hjemmeside kan kommentere på. 2. Admin klikker sig ind på Forum og dernæst vælger en kategori eller opretter en ny kategori og trykker ”Opret ny tråd” 3. Admin indtaster de korrekte informationer og tjekker at alt er i orden. 4. Use case slutter ved at admin klikker ”Opret indlæg” og tråden gemmes i da-

tabasen og kan læses af de andre brugere, oprettelsen er fuldendt. Alternate Course A: Admin indtastede forkerte oplysninger. Condition: Admin indtastede nogle forkerte informationer. 1. Da admin oprettede tråden fandt han senere ud af, at han havde skrevet nogle informationer forkert. 2. Admin sletter den forkerte tråd (eller kategori) og opretter en ny (kategori og) tråd med de rette informationer. 3. Tråden er genoprettet med de rette informationer i databasen og kan læses af de andre brugere. Rettelsen er fuldendt. Post Conditions: Brugeren har fået oprettet en tråd i en forum kategori som kan læses og kommenteres af andre brugere af Kampsax’ site. Actors: Admin Extended Use Case: None Notes: • Det er kun brugere og admins som kan oprette tråde på sitet. • Det er kun admins som kan oprette/ slette kategorier. • Det er kun oprettede brugere på sitet som kan se og kommentere på de forskellige forummer.

113

BILAG 25 - SITEMAP

114

115