indreoesterbro.bysileha.com LOKALOMRÅDE - 3 SEMESTER EKSAMEN INDRE ØSTERBRO



Relaterede dokumenter
Projekt database. (vores htmlside)

CPH Business Academy. Lærere: JHI & TUJE

Modul 2 Database projekt Multimediedesign 3. semester Gruppe 3 IRF/TUJE

Gruppe nr. MULB2, Multimediedesign 3. semester hold B. Tue Becher Jesper Hinchely

Portfolioudvikling. Line la Fontaine. Multimediedesigner

Ahmad Celik, Garwun Jeffrey Lai og Besir Redzepi : 3. Semester. Multimediedesigner Projektstart: 28/ Aflevering: 09/10-209

Jayne Alice Jensen [Link til portfolio]

Introducering af Flip MinoHD:

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

SIDEN PÅ WORDPRESS.COM

Lærere: Jesper Hinchely, Merete Geldermann Lútzen, Morten Rold, Ivan Rosenvinge Frederiksen, Tue Bjerl Nielsen og Marc Kluge. Antal anslag ca

Lærere: Jesper Hinchely, Merete Geldermann Lútzen, Morten Rold, Ivan Rosenvinge Frederiksen, Tue Bjerl Nielsen og Marc Kluge. Antal anslag ca

srum Fritidsaktiviteter : 1. Semester. Multimediedesigner Projektstart: 17/ Aflevering: 4/

CFunding-IT. Web DB Multimediedesigner 3. Semester Gruppe 15

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

24 tips til din markedsføring

Trin for trin guide til Google Analytics

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

Portfolio. Udvikling af min portfolio Link til portfolio: Michell Aagaard Dranig

3. Semester Mul-A PROJEKT 3 FUNDING. Louise Marie Bonke Charlotte Bruhn Stine Dorry Meulengracht Madsen.

FACEBOOK MARKETING. Simple teknikker der kan booste virksomhedens salg og omsætning via Facebook.

Grafisk design. Ide. Designprocess. Målgruppe

kollegiekokkenet.tmpdesign.dk Side 1

DATABASE Projekt 1-3. semester

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING

Grundforløbsprøve Projektbeskrivelse

VELKOMMEN 3. KOM GODT I GANG 4 Log ind 5 Kontrolpanel 6 Tilpas profil 7 Tilknyt hold 8 Tilknyt fag 9

Installation af Wordpress

Crowdfunding. Modul 3. CPH Business Academy. Lærere: JHI & TUJE www

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

grafisk design Se webappen på din mobil

Afsluttende Projekt - Kom/IT

Database. Pr jekt. Hold CLmul-a14e Gruppe 3 3. semester Vejledere: Tue Becher Ivan R. Frederiksen

Produkt. Index side GRAFISK DESIGN

CLmul-b14e Gruppe 2 2. Database projekt

Cykelhandler projekt KOM / IT

Grafisk produktion & workflow

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress.

Vi glæder os til at arbejde sammen med jer! De bedste hilsner. Sebastian Hansen og Bjarke Nielsen HeltSimpelt.dk

PROJEKT WEB_DB CROWDFUNDING

Grafisk Design 70% Skitser

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

Strategirapport for Bloggen alletidersslankekur.dk

Konkurrencer NONSTOP. Motivation & problemfelt

SÅDAN KOMMER DU I MÅL GUIDE. JOSEFINA ESTRADA COOP CROWDFUNDING Roskildevej 45, 2620 Albertslund

Indholdsfortegnelse. Side 1 af 8

Manual til at redigere på stafetforlivet.dk for holddeltagere

Grafik Design...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Målgruppe...6 Købskriterier Design Parametre...8 Tekst Illustrationer

GRUPPE 5 Line - Nanna - Thea - Sarah

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

HESTBJERG WEB GRAFISK WORKFLOW

Carlas cupcakes. Projekt.

Web DB project semester - 3. projekt - Gruppenr. 23 MULA - September 2015

Infographic Klasse arbejdsmiljø

ViKoSys. Virksomheds Kontakt System

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

3) Først og fremmest kan du vælge hvilket tema din side skal have.

Pinterest Kickstart din pinning

GRAFISK WORKFLOW. 1 Grafisk workflow

Oliver Marco van Komen Afsluttende opgave Kost ved slidgigt. Case 2. Personlig fysisk hjælp

Dokumentation for hjemmeside til Merry Maids Rengøring ApS.

Afsluttende opgave - Kommunikation/IT C Klasse 1.1

Forside 1: Bagside og bogryg:

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Valgfrit tema. Kommunikation/IT Jannik Nordahl-Pedersen. HTX - Roskilde. Klasse 3.5

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

Grafisk produktion & workflow: Alt til forfesten

Manual til at redigere på stafetforlivet.dk for holdkaptajner

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

Projekt Database, Gruppe 4A. Projekt 1, 3. Semester D A T A B A S E. Klasse MulA13 Gruppenummer: A4

MONIQUE BOOTS-NIELSEN / GRAFIKER

Startside med basisindstillinger - Wordpress

SmartWeb Brugermanual

Træd et skridt tilbage og tænk som den kundetype, du gerne vil tiltrække! Hvad vil de gerne mødes af, når de kommer til din side?

Sociale Medier & SEO-pakker: Karakteristikker

Velkommen til REX onlinehjælp

E-zine Online magazine

BRUGTE KLODSER TIL NYE IDEER DESIGNMANUAL & SOCIAL PLAYBOOK

Vistemmernu. Et webbaseret værktøj udviklet af Programdatateket i Skive. programdatateket@viauc.dk Web:

Sådan kommer du i gang med boldnettet

Bilag 2. Noter. Alternativ: Skriv pakkelabel i søgefeltet Klik på linket ved teksten øverst: pakke labels

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

Portfolio redesign. Kia Dahlen! 1. semester eksamen! MUL-A 2013! !!!

POST IT! Cph Business Academy Multimediedesign 2. Semester flow april Kirstine Marie Rasmussen cph-

Delaflevering. Webdesign og webkommunikation, (hold 2), IT Universitetet, f2011. Kim Yde, Kenneth Hansen,

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

IT Sikkerhed. Digital Mobning.

Sådan opretter du en Facebook-side

Indholdsfortegnelse. Hvorfor skal jeg tage backup af min blog? Side 3. Tag backup med UpDraft Side 4. Tag manuelt backup Side

Kom flyvende fra start

IT projekt uge 4 9. Marie Vinter, Roskilde Tekniske Gymnasium, klasse 2.6 IT, bw, uge

Procesbeskrivelse - Webprogrammering

Jysk Online Medie ApS - Vestergade 32, 8600 Silkeborg - Tlf.:

Interviewer: Men da du så kom ind på siden hvad var dit førstehåndsindtryk af den så?

GRAFISK PRODUKTIONSFORSTÅELSE

Transkript:

indreoesterbro.bysileha.com LOKALOMRÅDE - 3 SEMESTER EKSAMEN INDRE ØSTERBRO

Gruppe 9 56 156 Vejledere Wordpress login side 02

INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE 03 GRUPPEKONTRAKT 1.0 04 INDLEDNING 2.0 05 Product Breakdown Structure 2.2 06 Udviklingsmetode 2.3 07 Sprint Burndown Chart 2.4 08 Risikoanalyse 2.5 09 Interessentanalyse 2.6 10 ANALYSE 3.0 12 Kommunikationsplan 3.1 12 Udvidet målgruppeanalyse 3.1.1 14 AIDA 3.2 15 Delkonklusion af analyse 3.3 15 DESIGN 4.0 16 Moodboard 4.1 16 Wireframe 4.2 16 Mockup 4.3 17 Design brief 4.4 18 Designmanual 4.5 18 Informationsarkitektur 4.6 21 Informationsdesign 4.6.1 21 Interaktionsdesign 4.6.2 22 Præsentationsdesign 4.6.3 23 Delkonklusion af design 4.7 23 SUPPLERENDE MEDIER 5.0 24 Online medier 5.1 24 Offline medier 5.2 25 FUNKTIONALITET 6.0 29 Navigationsdiagram 6.1 29 Wordpress 6.2 29 Plugins 6.2.1 30 SEO 6.3 31 Google analytics 6.4 31 Non-funktionelle krav 6.5 32 Funktionelle krav 6.6 33 Use cases 6.6.1 34 User story 6.6.2 37 Delkonklusion af Funktionalitet 6.7 37 DATABASE 7.0 38 Attributtabel 7.1 38 ER-diagram 7.2 39 CRUD Matrix 7.3 40 Delkonklusion af database 7.4 40 KODE 8.0 41 Kodeeksempler 8.1 41 TEST 9.0 44 KONKLUSION 10.0 45 LITTERATURLISTE 11.0 46 BILAG 12.0 47 side 03

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

INDLEDNING 2.0 Vi har valgt Indre Østerbro, som vores lokalområde. Børge Hansen har doneret nogle penge for at få lavet et website for Indre Østerbro, da han elsker dette sted, hvor han også er født og opvokset. Han har fundet sammen med fire andre, som gerne vil arbejde frivilligt på projektet. De skal sammen sørge for, at opdatere siden og holde debatten i live. Sammen har de lavet Indre Østerbro Forening. Måden foreningen tjener penge til arrangementer og markedsføring af websitet er, at der er reklamer på siden, som er relevante for målgruppen. Indre Østerbro Foreningen har ansat os, som multimediedesignere, til at lave deres website og nogle supplerende medier. PROBLEMFORMULERING 2.1 Hvordan laver vi et website til beboerne på Indre Østerbro? Hvordan får vi beboere fra Indre Østerbro til at benytte websitet for deres lokalsamfund? Hvordan kommunikerer vi bedst muligt websitet ud via de valgte supplerende medier? Hvordan rammer vi bedst muligt de forskellige målgrupper i området? side 05

INDLEDNING 2.0 PRODUCT BREAKDOWN STRUCTURE 2.2 Vi har lavet en PBS for at få et overblik over, hvad vi skal lave under projektet. Denne model kan vi dernæst bruge i vores Sprint Burndown Chart, hvor vi kan sætte tid på alle de elementer, vi har skrevet ind i vores PBS. Figur 1 side 06

INDLEDNING 2.0 UDVILKLINGSMETODE 2.3 Vi har valgt at arbejde med prototypingparadigmet, da vi løbende vil teste de ting vi har lavet og hele tiden forbedre det. Vi vil altså køre de trin, vi har nået, igennem flere gange indtil vi har opnået, det vi ønskede fra starten. Dette paradigme synes vi passede bedst, da vi har mulighed for at gå tilbage og teste, samt rette på de ting vi har lavet. Dog har vi valgt at kombinere prototypingparadigmet med en agil metode, da vi har lavet to Sprints med Burndown Chart. Vi valgte at arbejde med denne del af den agile metode, da vi synes, at det er praktisk, at man kan se planlagte og brugte tid. På denne måde, kan vi i fremtiden se, hvor man skal sætte mere eller mindre fokus. Vi har illustreret på figur 2, hvordan vi har brugt prototyping paradigmet. Vi har taget udgangspunkt i figurerne fra Digital Media Management 1 og lavet en der passer på hvordan vi gerne ville arbejde. De tests vi har lavet undervejs kan ses i bilag 1. Da vi har valgt prototypingparadigmet, vil vi i realiteten ikke være færdige, når Sprintet er færdigt. Det første Sprint viser, hvad vi skal nå i forhold til analyser og forarbejde, hvor vi i andet Sprint vil begynde på det praktiske. Figur 2 1 Fischer, Louise Harder og Marie Oosterbaan: Digital Media Management side 07

INDLEDNING 2.0 SPRINT BURNDOWNV CHART 2.4 I vores PBS har vi defineret, hvad vi skal lave til vores projekt. Vi har valgt at vores projektplan skal være et Sprint Burndown Chart, fordi vi ved hjælp af denne, kan finde ud af hvor lang tid hver enkelt punkt i vores PBS tager og dermed lave en plan over projektet. Det hjælper os i sidste ende med at blive færdige med projektet til tiden og er derfor meget vigtig at have. figur 3 side 08

INDLEDNING 2.0 RISIKOANALYSE 2.5 Vi har lavet en risikoanalyse over vores projekt. Her ser vi på hvilke risici, der kan være og hvor stor sandsynligheden er, for at de vil ske, samt hvilken indvirkningen de vil have på projektet. Derefter har vi set på hvad eventuelle løsninger kunne være, da uforudsigelige problemer, kan få en stor betydning for, hvordan vores projekt udvikler sig. Da der kan være et utal af risici for et projekt har vi valgt tre ud, som ville have en stor indvirkning på projektet. A: En risiko kunne være, at vores server bryder sammen og at websitet ikke vil være tilgængeligt. Sandsynligheden for at det kunne ske, ville være en 2 er og risikoen vil være en 4 på indvirkningen. B: Da prototypen skal lanceres til en bestemt tid, vil der også være en risiko for, at projektet ikke når at blive færdig i tide, da der er mange ting der skal laves. Sandsynligheden for, at dette sker ligger på en 2 er men den har 5 på indvirkning. Figur 4 C: En anden risiko kunne være at Børge, sponsoren for projektet, forlod projektet inden han havde doneret sine penge til projektet. Sandsynligheden er en 1 er, men indvirkningen vil være en 5 er og ødelægge hele projektet. Det er vigtigt at kende risiciene på forhånd således, at man kan lave nogle løsninger og være på forkant med problemer, hvis de skulle opstå. Vi bruger altså vores risikoanalyse, hvis der skulle opstå nogle problemer i projektet, så vi dermed kan gøre brug af de løsninger, vi allerede har fundet til problemerne. Løsningerne på de tre risicis kunne være: Skulle det ske, at vores server bryder sammen imens vi arbejder på projektet, vil vi enten komme bagud i vores tidsplan eller tabe noget arbejde, som vi har lavet. Løsningen til dette kan være at man hele tiden sikrer sig, at man har gemt en kopi af det man har lavet, sådan at hvis noget går tabt, har man altid en backup og en stabil server. Som skrevet tidligere, kan det også ske, at vi ikke bliver færdige med projektet til tiden. Her ville løsningen være, at man laver en projektplan, som vi har gjort, og at man følger den meget nøje. På den måde bliver deadlines og tidsplaner overholdt og projektet bliver færdigt til tiden. Det er også muligt, at der sker noget med vores ildsjæl, Børge. Derfor må man sikre sig, at det økonomiske er på plads, inden man når for langt i projektet og samtidig også lave en back-up plan således, at det måske kunne lade sig gøre, at der var nogle andre, der kunne være interesseret i at sponsorere projektet. Dette kan for eksempel være sponsorer og lokale virksomheder. side 09

INDLEDNING 2.0 INTERESSENTANALYSE 2.6 I denne analyse har vi fundet frem til de vigtigste interessenter og placeret dem i rækkefølge, hvor dem, med mest interesse i projektet, er først. Indre Østerbro Forening, sammen med Børge, er teamet bag websitet og projektet og derfor har de størst interesse i projektet og dets gennemførsel. Beboerne er også en aktiv part i projektet, da websitet bliver lavet af dem - for dem. Derfor har de også stor interesse i at projektet bliver gennemført, da det vil forbedre deres lokalmiljø. Interessenter der skal involveres Indre Østerbro forening og beboer - disse interessenter skal involveres, da de har stor indflydelse på projektet. Deres medvirken er nødvendig for at projektet kan blive gennemført. Indre Østerbro Foreningen er fem beboere med stor interesse for Indre Østerbro. De ønsker at fremme bydelen og derfor er det vigtigt at beboerne bliver involveret, så siden bliver noget de ønsker at bruge og føler, at de har været en del af. Desuden skal vi, som designere, også involveres, da det er os, som skal levere produktet. Interessenter der skal orienteres Pendlere, ydre Østerbro og omegn, forretningsdrivende og kommunen skal orienteres, da deres medvirken eller indflydelse på projektet ikke er særlig vigtig. Designerne, os, har en stor og aktiv rolle i at projektet bliver færdigt og gjort ordentligt, da det er os, som skal levere et stykke arbejde til Indre Østerbro Forening. Kommunen, forretningsdrivende, Ydre Østerbro og omegn og pendlere gennem Indre Østerbro, er alle eksterne faktorer, som skal orienteres om projektet, men de skal hverken høres eller informeres, da de ikke har en indflydelse på, hvordan projektet kommer til at forløbe. Dog kunne det være rart for dem, at blive orienteret omkring projektet, når det er færdigt, så de kan læse på siden eller medvirke i nogle arrangementer, hvis det har deres interesse og er relevant for dem. side 10

INDLEDNING 2.0 Med denne analyse har vi nu klargjort, hvem der er nødvendige at involvere i projektet og hvem der ikke er. På denne måde bliver det nemmere at imødekomme deres interesser. Vi kan analysere os frem til hvad interessenternes formål og forventninger med projektet er, på denne måde kan vi imødekomme deres forventninger med projektet og derved få et vellykket projekt, som de gerne vil gøre brug af. Dette gør vi blandt andet ved hjælp af vores kommunikationsplan og vores test. Her kan vi få indblik i, hvordan vi får beboerne til at bruge websitet og få dem til at involvere sig mere i deres lokalsamfund. Figur 5 side 11

ANALYSE 3.0 KOMMUNIKATIONSPLAN 3.1 Vi har lavet en kommunikationsplan, da det er essentielt for vores produkt, at vi klargør, hvad vi vil sige til hvem, hvordan og med hvilket medie. Formål Formålet med vores kommunikation er, at få beboerne på Indre Østerbro til at benytte websitet. Afsender vil gerne bringe Indre Østerbro sammen og forbedre lokalsamfundet, så det er vigtigt at kommunikationen fortæller om, hvorfor beboerne skal bruge websitet og hvad de vil få ud af at bruge det. Effekt Den ønskede effekt med vores kommunikation er, at beboerne på Indre Østerbro begynder at bruge websitet og deltager aktivt på det. For at opnå denne effekt skal flest muligt have kendskab til sitet. En anden ønsket effekt er, at mindst 40 procent af beboerne på Indre Østerbro bruger websitet aktivt i løbet af måneden. Afsender Indre Østerbro Foreningen er afsenderen. Vi som designere er kommunikatorer. I foreningen har vi Børge, som er formand og står for den daglige gang i foreningen og det overordnede omkring websitet. Udover Børge er der fire frivillige, som tager sig af nye debatter, skaber opmærksomhed omkring sitet, finder sponsorer, laver annoncer og regnskab for hele foreningen. Der bliver brugt omkring seks timer om ugen i foreningen. Afsenderens viden og troværdighed vurderes som troværdig og på lige fod som målgruppens, da foreningen, selv bor på Indre Østerbro. Derfor har disse mennesker selv en interesse i, at gøre området bedre og løse de eventuelle problemer lokalområdet kan have. Afsenderens hensigt med kommunikationen vurderes som en kærlighedserklæring til området. Børge og de andre frivillige i foreningen, har en stor kærlighed til deres lokalområde og ønsker at forbedre det, samt skabe et tættere lokalsamfund med events og debatter. Det billede som modtageren skal danne af afsenderen er, at det er en forening med lyst til at forbedre og socialisere Indre Østerbro - endda frivilligt. Modtageren skal se afsenderen som ligemænd, der har ligeså meget at skulle have sagt som beboerne selv. De er blot talerør, som sørger for, at debatterne bliver sat i gang og beboerne har mulighed for at blive hørt. Både målgruppe og afsender er, som nævnt tidligere, aktive interessenter, der begge skal involveres i projektet. I vores tilfælde opleves kommunikation som kommende direkte fra afsenderen. Vi bruger ikke Børge som hovedafsender, da det i nogle tilfælde kan være uhensigtsmæssigt, kun at bruge én person som afsender, hvis der er nogle der ikke kan lide ham, eller at han bliver involveret i nogle dårlige sager. På denne måde er han i baggrunden og foreningen er forrest. side 12

ANALYSE 3.0 Målgruppe Vores primære målgruppe er moderne børnefamilier med god indkomst og med ét eller få ønskebørn. Forældrene har typisk mellemlange eller lange videregående uddannelser og tjener over gennemsnittet, hvilket gør, at de kan sætte større fokus på miljø og økologi. Disse familier går meget op i kulturelle ting, cafébesøg og gode madvarer. Familierne tager helst cyklen frem og tilbage fra arbejde, da dette er sundest og mest miljørigtigt. Vores sekundære målgruppe er ældre par i 60 erne eller derover, som har boet i området i mange år, disse par har typisk en erhversfaglig uddannelse 2. Vi har valgt at fokusere mest på vores primære målgruppe, men vi har stadig vores sekundære målgruppe med i processen, når vi laver website og indhold til dette. Brugerprofil Katrine og Jakob Thomsen er i slutningen af 30 erne og bor på Viborgvej 24, 2100 KBH Ø. De har ønskebarnet, Alexandrine på seks år. Katrine er jurist og Jakob er arkitekt. Fritiden bruges gerne på Louisiana, en tur i teateret eller på en café med en øko-latte. De er bevidste om velvære og sundhed, derfor cykler de meget og løber også i fritiden. De handler for det meste i Irma eller SuperBest, da de ikke har noget imod at betale ekstra for gode økologiske råvarer. De tjekker ofte nettet for kulturelle begivenheder i og udenfor deres lokalområde. De går op i at deres lokalsamfund er miljøvenligt og godt og vil gerne deltage og bidrage til, at det bliver bedre. De læser aviserne, Berlingske Tidende, Politiken, Weekendavisen og de stemmer hovedsageligt på højrefløjen 2. Budskab Benyt Indre Østerbro s website og vær med til at gøre vores lokalsamfund et bedre sted. Medie Da vores primære målgruppe er moderne børnefamilier, er det vigtigt at tilpasse medierne til dem. Derfor har vi valgt computer, mobil, outdoor og trykager. App s er en stor del af manges hverdag og til tider lettere tilgængeligt end computere på farten, derfor har vi valgt at lave en app, så man stadig kan tjekke informationerne ud på mobilen. Støj Da vores primære målgruppe er moderne børnefamilier, kan der være mange årsager til, at de bliver forstyrret og mister fokus fra det vi prøver at kommunikere til dem. Derfor er det vigtigt, at målrette kommunikationen så meget som muligt, så vi rammer målgruppen helt præcist. De skal helst vende tilbage efter at de har været forstyrret af sultne børn og tilbud fra Irma. Med denne kommunikationsplan kan vi sikre kvaliteten på vores website. Nu kender vi hvem vi vil tale til, målgruppen, hvad vi gerne vil fortælle dem, budskabet, og hvem der siger det, afsender. Vi kan bruge kommunikationsplanen senere i projektet, når vi skal lave websitet og de supplerende medier således at de henvender sig til den målgruppe vi har fundet frem til og sådan at de har den forventede effekt, som vi har beskrevet i kommunikationsplanen, så det passer til formålet. 2 conzoom.eu side 13

ANALYSE 3.0 Indre Østerbro Foreningen Indre I N DR Øste rbro E Ø ST E RBR O Indre Østerbro Indre Østerbro Afsender indre oeste Budskab rbro.d k Effekt Medie Støj Udvidet målgruppeanalyse 3.1.1 Vi har brugt en kvalitativ og en kvantitativ metode til vores udvidet målgruppeanalyse. Vi brugte den kvalitative spørgeteknik da vi lavede personlige interview og kvantitativ da vi kiggede på conzoom.eu for svar. Vi har ved hjælp af interview og conzoom.eu fået bekræftet at vores antagede målgruppe er den korrekte. Vores interviews kan ses i bilag 2. figur 6 I personlige interviews er man kun interviewer og personen man spørger. På denne måde får man personlige svar. Forberedelsen tager også en del tid, da man skal udvælge de rigtige spørgsmål og spørge på den rigtige måde. Vi har valgt at lave et struktureret interview på Indre Østerbro. På denne måde vil spørgsmålene følge en bestemt rækkefølge. De fleste af vores spørgsmål var åbne spørgsmål. Dette giver plads til at personen kan komme med sine egne holdninger. Der var dog også nogle lukkede spørgsmål, hvor personen kun kan svare ja eller nej. side 14

ANALYSE 3.0 AIDA 3.2 Vi har valgt at lave en AIDA-model til vores plakat, som også fungerer som vores postkort, for at sikre at den ønskede effekt af plakaten opnås. Effekten af plakaten skal være, at de mennesker, der ser den, vil gå ind på vores website eller vil downloade vores app. For at vi kan opnå netop dette har vi lavet en AIDA-model, som kan sikre opmærksomhed, interesse og forhåbentlig gøre at målgruppen handler på dette. Attention Vi skal få den potentielle brugers opmærksomhed, således at de får lyst til at besøge websitet. Dette gøres ved at bruge et stort grafisk element, der skal springe i øjnene, når man først ser plakaten og tiltrække de potentielle brugeres opmærksomhed. Udover dette har vi valgt at lave en stor overskrift, som vi vil placere øverst på plakaten og som skal give både opmærksomhed og interesse. Interest For at den potentielle bruger skal blive interesseret i vores website og besøge det, vil vi lave en kort sætning omkring websitet. Denne sætning skal være et hurtigt indblik i websitet og fortælle, at man selv kan være med til at bestemme hvad dagsordenen er på Indre Østerbro og dermed skabe noget interesse. Dette gør vi ved hjælp af vores tagline dit, mit - vores Østerbro. Dette skal give folk lyst til at være en del af fællesskabet. Action Det element som er sværest i AIDA, er at få folk til rent faktisk at agere. Vi vil med denne plakat gerne have at folk, vil gå ind og besøge websitet. Der vil som sådan ikke være en call-to-action-knap, da det jo netop er en plakat. Webadressen står dog med andre farver, så den skiller sig ud fra resten af sætningen og på den måde vil fungere som en call-to-action. Derudover vil der være en QR-kode, som man kan hente app en ned på mobilen, hvilket også vil fungere som en call-to-action. Delkonklusion af analyse 3.3 Ud fra disse analyser kan vi konkludere, at vi har fundet frem til nogle essentielle ting, der skulle fastlægges, for at kunne få et godt produkt i sidste ende. Vi har først fundet frem til hvilke risici vi kunne støde på i projektet og hvordan vi kan løse dem. Derudover har vi vist, at vores målgruppe er fastlagt og meget præcis, hvilket gør det nemmere for os, at designe et website til dem. Ved hjælp af vores målgruppeanalyse kan vi se hvordan vi skal kommunikere til målgruppen. Vi har også lavet en AIDA over hvordan vi tiltrækker deres opmærksomhed. Vi kan altså konkludere, at disse analyser er vigtige for at opnå et godt slutresultat. Desire For at give den potentielle bruger lyst til at gå ind på websitet, skal vi forklare på plakaten, at hvis man går ind på websitet, kan man være en del af det, der sker i området og samtidig være med til at bestemme. side 15

DESIGN 4.0 figur 7 Moodboard 4.1 Vi har valgt at lave et moodboard som det første i vores designprocess, da det giver en god idé omkring hvilke associationer man har til emnet lokalområde og hvilken stemning man ønsker på websitet. Man kan kalde det et mindmap over hvad Indre Østerbro er og hvad vi skal have med i vores projekt. Vi ville gerne fokusere på målgruppens holdninger omkring økologiske varer og deres vægt på familieliv. Derudover ville vi også gerne have fokus på de ældre i lokalområdet. figur 8 Wireframe 4.2 Til vores opsætning af websitet har vi valgt at lave både wireframe og mockup. Wireframe er skelettet til vores website, som hjælper os når vi skal designe og kode den. Det giver nogle retningslinjer at gå efter og gør det nemmere at implementere på mockup en. Vores mockup fortæller os mere detaljeret, hvordan websitet skal se ud, hvilke farver, fonte og billeder der skal bruges og hvor de skal være placeret. side 16

DESIGN 4.0 MOCKUP 4.3 Logo Menu Reklamer Hererendebat Slider Hererendebat Hererendebat Hererendebat Senestedebater Indholdpåsiden Footer Tilmeldignyhedsbrevet Send figur 9 side 17

DESIGN 4.0 Design brief 4.4 Indre Østerbro Foreningen har ansvaret for projektet. De er fire frivillige samt Børge, som er ildsjælen. De har forskellige roller og ansvaret for forskellige områder. Dog er det os, designerne, der har ansvaret for websitet og at den er færdig til den givende deadline, som er den 22. december. Foreningen er blevet officielt dannet fredag den 28. november, hvor vi som designere fik tildelt opgaven den 1. december. Formålet med websitet er, at samle Indre Østerbro og få beboerne til at deltage aktivt i deres lokalsamfund. Foreningen vil tjene penge til at lave events, ved at have reklamer på sitet. Vores mål med websitet er, at det bliver benyttet aktivt og at beboerne, finder den information de har behov for, eller selv er med til at dele de informationer, som de finder spændende. Vi vil lave et website både for vores primære og sekundære målgruppe. Dog vil websitets fokus være på den primære målgruppe. Foreningen ønsker en prototype af websitet på dansk, med en tilhørende app og suplerende medier, som skal markedsføre websitet og få flere brugere til at benytte sitet. Designerne er fire multimediedesignere, der har til opgave at udvikle en prototype af Indre Østerbro Foreningens website, app og supplerende medier. Designmanual 4.5 Typografi Typografien er vigtig på vores website, da der skal være en del tekst i form af forum og debatter. Derfor har vi gjort os nogle helt bestemte valg for, at få det mest optimale ud af skriften. Vi har valgt at arbejde med fonten Lato på vores website, da den er meget enkel og minimalistisk, hvilket også er det udtryk vi gerne vil give vores website. Udover det, er den let at læse og overskuelig, selvom der måske står en del tekst på sitet. Lato ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 0123456789 Vi har valgt at bruge Titillium Web til vores rapport, som er en sans-serif font, da den er letlæselig og meget minimalistik. Titillium Web ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 01234567890123456789 side 18

DESIGN 4.0 Alverata Irregular PE Vi har brugt fonten Alverata Irregular PE i vores logo. Den giver et frisk pust og har et moderne og specielt touch. ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 01234567890123456789 Abadi MT Condensed Light Vi har brugt fonten Abadi MT Condensed Light på vores plakat ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 01234567890123456789 Calligraffiti Vi har brugt fonten Calligraffiti på vores plakat. Abadi Calisto MT Vi har brugt fonten Calisto MT på vores plakat ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 01234567890123456789 Farver Farverne på websitet er ligesom teksten meget enkle. Vi har valgt at arbejde med hvid, grå og en del nuancer af blå. Vi vil gerne skabe et klassisk look, som passer til vores målgruppe og disse farver hjælper til at skabe dette look. Den blå farve er meget seriøs og giver websitet en seriøs og pålidelig tone. ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå 01234567890123456789 side 19

DESIGN 4.0 Logo Vi har valgt at lave et logo af bygninger, for at vise at det er et lokalt område, der er tale om. Vi har valgt at bruge Sions kirken, som er en af kirkerne på Østerbro, derudover valgte vi at bruge Bien, som er den bygning der er placeret på Trianglen og som de fleste mennesker kan relatere til, når de tænker på Østerbro. På den måde ville dem der bor på Indre Østerbro, ikke være i tvivl om, at logoet ville have noget med Østerbro at gøre. Vi valgte at lave vores logo i flat design, for at give det et moderne touch, som passer til vores målgruppe. Vi har holdt os indenfor de samme farver, som beskrevet tidligere. Layout Vi har valgt at layoutet på websitet skal være meget funktionelt, fordi vi har mange features på sitet. Temaet vi har valgt er i forvejen responsive. Dog har vi i denne omgang valgt at fokusere på websitet i fuld skærm, da vi har en app. Billedstilen Vi har valgt at billedstilen skal være professionelle billeder, dog ikke alt for opsatte. Billederne skal være i høj kvalitet og gerne af mennesker som bor på Indre Østerbro for at tiltale målgruppen bedst muligt. logo med hvid tagline logo med grå tagline Tone of voice Det er vigtigt for Indre Østerbro Foreningen, at tonen på websitet er venlig, imødekommende og på samme niveau som brugerne. Dog er det vigtigt at beboerne, føler at der er nogen der tager sig af sitet og sørger for indholdet er korrekt og passende. Derfor vil foreningen sørge for at tonen bliver holdt pæn på sitet, når beboerne lægger ting op og upassende beskeder vil blive slettet af foreningen. Boblerne Vi har valgt at lave bobler på siderne, for at bryde det meget firkantede look, vi har på sitet. Boblerne skal fungere som ensartethed på siderne og gøre billeder på siden mere spændende at se på. logo i B&W logo i negativ figur 10 side 20

DESIGN 4.0 Designprincipper Designprincipperne er gældende for både app og website. #4 Ensartethed Vi har lagt stor vægt på ensartetheden på websitet. Dette er blandt andet gjort ved at lave bobler på nogle af vores sites. #7 fleksibilitet og brugervenlighed Vi har valgt at vores website skal være meget fleksibelt. Der er altså mange ting man kan gøre, som at registrere sig som bruger, kommentere debatter og selv lægge indhold op på websitet. Der skal være meget indhold på websitet, så derfor er det også essentielt, at den er brugervenlig, så det er let at finde rundt i informationen uden at blive forvirret. #17 Lukkethed Da vi har meget information på websitet, har det været vigtigt for os, at afgrænse områderne, så websiten bliver delt mere op og brugeren har lettere ved at finde ud af, hvor tingene hører til. På websiten bliver indholdet delt op af forskellige farver eller linjer, som afgrænser områderne. Informationsarkitektur 4.6 Det er vigtigt at overveje hvilke informationer der skal være på websitet, så vi kan finde det mest relevante i forhold til målgruppen. Derudover er det også vigtigt at se på, hvilke andre midler der kan hjælpe til at forstå informationen og brugerens forståelse og påvirkning af sitet. Alt dette kan hjælpe os til at finde den rette information, men også finde ud af hvilke virkemidler, der skal være og hvordan vi visuelt understøtter brugervenligheden bedst muligt. Informationsdesign 4.6.1 Det er vigtigt at beslutte hvilket materiale der skal være på sitet, så det er relevant for brugeren. Et problem med dette på vores website kunne være, at brugerne selv bidrager med information, hvilket kan betyde at denne information ikke stemmer overens med målgruppen eller det budskab, som er udtænkt i kommunikationsplanen. Løsningen på dette er, at have nogle strukturerede menu- og underpunkter, som beskriver overfor brugeren, hvor de forskellige informationer skal placeres og hvilke emner der kan tales om på websiten. For at udvælge den rigtige information til websitet har vi interviewet målgruppen, som kom med gode idéer til, hvilken information vi kunne have på websitet. Målgruppen kom med idéer til hvad de mener kunne være interessant og hvad de gerne ville læse om. Dette kan læses i bilag 2. side 21

DESIGN 4.0 Interaktionsdesign 4.6.2 Måden brugeren interagerer på websitet kan ses som: input, behandling og feedback. Input kan ske ved, at brugeren klikker på Debat i menulinjen. Behandlingen sker ved at ens klik bliver behandlet og dette fører til feedback, hvor brugeren kommer ind på debat -sitet. Inde på websitet er der mange steder hvor brugeren aktivt kan vælge. Dette er menupunkter, nyhedsbrevstilmelding, billeder (bobler) og andre interaktive ting på sitet. Der vil hovedsageligt være ting brugeren kan klikke på. Designet skal være let og forståeligt, da brugerens interaktionsform afhænger meget af hvilke erfaringer og viden, som brugeren har i forvejen. Brugeren har også mulighed for at påvirke hvad andre brugere oplever på websitet, da de selv kan uploade ting. Dette giver en stor følelse af interaktions frihed, da brugeren selv kan påvirke i hvilken retningen websitet skal gå, indenfor grænserne, som er blevet sat i kommunikationsplanen. Det er Indre Østerbro Forenings opgave at sørge for, at disse ting bliver overholdt. side 22

DESIGN 4.0 Præsentationsdesign 4.6.3 Vi har valgt følgende medieelementer på websitet for at kommunikere bedre og mere tydeligt til den valgte målgruppe. Da vi har valgt at arbejde med tekst, skal vi sørge for at teksterne ikke er for lange, de skal skrives kort, klart og præcist. Det skal være let for brugeren at skimme teksten og stadig forstå. Vi har også valgt at arbejde med billeder på sitet, da de er lette at huske og gør brugerfladen mere indbydende og får websitet til at se mere spændende ud. Vi bruger billeder og grafik til at fremhæve og supplere hvad vi allerede har stående på websitet. Derfor har vi valgt at bruge mange billeder og mindre tekst. Som udgangspunkt har alle sider mindst et billede. Delkonklusion af design 4.7 Vi kan konkludere, at det er meget vigtigt, at fastlægge hvordan ens design skal se ud, før man begynder at lave websitet. På denne måde er alle indforstået med opsætningen af sitet, brugen af farver og fonte og hvordan informationen skal placeret på websitet og hvilke slags informationer vi skal have med. Vi kan også konkludere, at vi, ved at gøre det på denne måde, kunne bruge al vores viden fra analyser til at lave noget design, som passer til målgruppen og deres behov. På den måde kan vi nemmere få kodet det ønskede website. Det kan være en god idé at lave websitet efter de forskellige opmærksomhedsniveauer og hvilke forventninger brugeren har til indhold og placering på sitet for en større brugervenlighed. I bilag 3 kan I se hvor på websitet, vi har fulgt dette. Vores website følger figuren om F pattern, 3 som handler om hvordan folk læser på nettet. Det ses tydeligt at opmærksomheden er i venstre side i et F. Vi har det vigtigste i venstre, som er vores menupunkt og de aktuelle debatter. Figur 11 3 Fischer, Louise Harder og Marie Oosterbaan: Digital Media Management. side 23

SUPPLERENDE MEDIER 5.0 For at lave vores supplerende medier, har vi brugt vores målgruppeanalyse for at finde ud af, hvilke andre medier, som vores målgruppe gør brug af og er i nærheden af tit. Nedenfor beskrives alle de supplerende medier Online medier 5.1 App Vi har udviklet en app, da vores primære målgruppe er mennesker, som stort set altid har deres mobil på sig, både for at de kan kontaktes på alle tider og alle steder og desuden ønsker at være opdaterede konstant. Appen fungerer som en forlængelse af websitet og holdes derfor stilmæssigt og indholdsmæssigt som websitet med næsten de samme menupunkter. Er man logget ind, kan man deltage i debatter, lægge billeder op, på samme måde som hvis man var logget ind på websitet. Man kan skanne en QR-kode og hente appen via Play Butik eller App Store. Da appen på nuværende tidspunkt er en prototype er dette ikke blevet implementeret. Derfor er appen heller ikke forbundet til databasen og indholdet man ser på nuværende tidspunkt, er lagt ind manuelt. Kodeeksempler app Nedenstående kode er til headeren i appen, hvor vores logo er tilføjet. figur 12 Wireframe app Vi har lavet et wireframe over vores app, for at få et overblik over antallet af sider og hvordan de skal forbindes til hinanden. Den giver også en idé om hvordan siderne skal se ud. side 24

SUPPLERENDE MEDIER 5.0 Nedenstående kode gør det muligt at uploade et billede, der allerede ligger på telefonen eller tage et nyt billede og uploade. Offline medier 5.2 Magasin Vi har valgt at lave tre forskellige tryksager. Vi har valgt at lave en reklame i et magasin. Magasinet er tænkt som et der er særligt tilegnet Østerbro - det kunne også være i en lokalavis, så vi ikke rammer alle i hele Danmark, men kun folk der er bosiddende på Indre Østerbro. Plakat og postkort Vi har valgt at lave en plakat, som bliver brugt flere steder. Vi bruger den blandt andet til busstoppesteder, ved togstationer og på de lokale caféer. Vi har også t ænkt, at den skal hænge på metro stationer, når de kommer til Østerbro. På den måde vil vores målgruppe se plakaten og forhåbentligt besøge websitet og tilmelde sig. Vi har valgt at alle vores supplerende medier skal være i flat design som vores logo, for at skabe noget genkendelighed blandt medierne. Vi har valgt at holde de samme farver, som også bruges i logoet. På den måde kan brugerne lettere se at tingene hører sammen. Denne plakat bliver brugt både som en tryksag, men også som outdoor i form af metroplakat og busreklame. Vi har også valgt at bruge plakaten som GoCard, der skal være på de lokale caféer for at skabe mere reklame omkring websitet. Dette har vi valgt at gøre, fordi vores primære målgruppe tit besøger caféer. GoCard side 25

SUPPLERENDE MEDIER 5.0 Magasin Metroplakat side 26

SUPPLERENDE MEDIER 5.0 Busreklame Vi har valgt at en af vores supplerende medier skal være en reklame på en bus. Bor man på Indre Østerbro vil man hver dag se de mange busser, der kører i lokalområdet og mange vil måske også selv benytte dem. Derfor er det essentielt at have en reklame på en af disse busser, da mange beboere vil se den når de er på farten. Vi har valgt en fængende tekst, som skal virke som en appetizer til websitet og fortælle lidt om hvad sitet egentlig går ud på. Fodboldtryk For at skaffe omtale og reklame er F.C København blevet en sponsor for websitet. Da F.C København er den største klub der ligger i lokalområdet, har de valgt at tro på projektet og de er gået med til, at lave gratis markedsføring for websitet i et år. Derefter skal der findes en ny sponsor til sitet. Billedet viser hvordan spillernes nye trøjer kommer til at se ud. Ved at få FC København til at sponsere sitet, formår vi også at ramme mændene i lokalområdet. Samtidig er det vigtigt at URL en står med store bogstaver, som er lette at se når bussen kører forbi, sådan at beboerne ved hvad de skal gå ind på. Selve designet minder meget om vores andre supplerende medier, samt designet og farverne på websitet, som også er i vektor-grafik og med de blå nuancer. På den måde skaber vi en rød tråd imellem de forskellige medier sådan at det er let at genkende dem.. t e b a k s s e l æl f g no e t t a b e d i g a t l e D K l i k i n d p å i n d r e o e s t e r b r o. b y s i l e h a. c o m d i t, mi t -v o r e s Fodboldtryk Busreklame side 27

SUPPLERENDE MEDIER 5.0 Kaffereklame For at ramme vores primære målgruppe, har vi valgt at lave en label på en kaffe, som skal sælges på de lokale caféer på Indre Østerbro. Ud fra vores målgruppeanalyse antager vi nu at størstedelen af de beboere, der bor på Indre Østerbro, i deres fritid eller i pauserne på arbejdet, godt kan lide at gå på café og få sig en øko-latte. Derfor er denne kaffereklame oplagt. Kaffereklame side 28

FUNKTIONALITET 6.0 Navigationsdiagram 6.1 Vi har lavet et navigationsdiagram, som fungerer som mockup til menuen på websitet og formålet er, at få navigationen til at være let og logisk for brugeren. Da vi har to menuer pga. login funktionen har vi lavet to navigationsdiagrammer Wordpress 6.2 Vi har udarbejdet vores website i CMS-systemet Wordpress. Man kan rette i designet ved at bruge et child theme uden, at det, man har stylet i css en ikke bliver overskrevet hvis temaet opdateres. Man er ofte lidt begrænset af det tema man har valgt, så det gælder om at finde et tema, hvor begrænsningerne er så få som mulige. Først havde vi valgt et tema ved navn Hueman, dog var dette tema så begrænset, at vi blev tvunget til at skifte tema. Vi valgte derefter at bruge temaet Twenty Fourteen, som gav os mulighed for at lave mere. Vi har haft store problemer med vores temaer og at Wordpress ikke kunne håndtere, at vi selv skrev kode PHP i editoren. figur 13 Menu for brugere som er logget ud Vi har valgt at beholde vores database dokumentation, for at vise hvordan det skulle fungere og hvilke ønsker, vi har haft for vores website. På grund af vores sene skift af tema, har vi ikke kunne sætte os ind i de forskellige koder temaet har. figur 14 Menu for brugere som er logget ind Wordpress er god til blogs og til simple sites, hvor man ikke har behov for at ændre meget i temaet. Hvis man har større sites, hvor man gerne vil designe meget selv, er det virkelig svært, hvis man ikke køber temaer og plugins. side 29

FUNKTIONALITET 6.0 Plugins 6.2.1 Vi har brugt disse plugins, fordi de passer godt til den løsning vores website skulle have. Contact form 7 Dette er en af de mest downloadede plugins i Wordpress, den er enkel og virker som den skal - vi har haft gode erfaringer med den fra tidligere og derfor valgte vi at bruge den på vores kontaktside. User Ultra Lite Vi har fundet et plugin til at registrer bruger på websitet og give dem flere funktioner, når brugeren er logget ind på det. Plugin et hedder User Ultra Lite og har været downloadet over 68.000 gange og fået en god rating. User Ultra bruges ved hjælp af shortcuts, som man kan sætte ind på de sider man ønsker. Vi ville eksempelvis gerne have en registreringsform ind på siden Registrer så sætter man shortcuttet [usersultra_registration] ind. Vi har også valgt at hvis man skal poste noget på websitet, skal man være oprettet som bruger for at kunne gøre det. User Ultra tilbyder også post muligheder og vi kan vælge at man kun skal kunne tilføje post, hvis man er en registreret bruger. Desværre kan man ikke sætte HTML eller PHP ind i en kategori, så vi har ikke kunne sætte [usersultra_front_publisher] ind på kategorisiden, så tidligere posts og formen var inde på den samme side. Så vi har været nødsaget til at have to sider. User Ultra er et stort plugin med en masse features. Man ville blandt andet kunne logge ind ved hjælp af sin Facebook eller LinkedIn konto, tilføje Vilkår og Betingelser, som brugeren først skal godkende inden man kan oprette sig. Vi har valgt at bruge dem vi synes var mest væsentlige for vores site. Da man generelt er lidt låst fast på Wordpress oplever man også tit begrænsninger på plugins. Vi har derfor ikke kunne ændre teksterne på formularerne til dansk. En anden begrænsning er, at de users man opretter får den samme rolle - i vores tilfælde har vi valgt at bruger skal være author. Vi skal manuelt ind og give en bruger en anden rolle, hvis de skal være andet end authors. Dette kan man gøre under users i dashboard og det er kun administratoren der kan gøre det. Vi har valgt at Børge skal være Editor som vil blive uddybet i brugermanualen, der kan ses i bilag 5. Vi har fundet ud af at de posts, brugeren lægger ind, bliver tildelt en kategori og kan på den måde vises for andre brugere. side 30

FUNKTIONALITET 6.0 SEO 6.3 Det er vigtigt at arbejde med SEO på ens website, så man kan tiltrække brugere, der leder efter det, vi har på websitet. Det er samtidig også godt i forhold til konkurrenter, så man ligger godt placeret på for eksempel Google. For at opnå det bedste resultat har vi valgt at installere pluginet Yoast Wordpress SEO, da det har fået gode anmeldelser, er blevet installeret af rigtig mange mennesker og oftest er det plugin, der bliver refereret til når man søger efter gode SEO plugins. I pluginet er der en masse forskellige muligheder, hvor vi har benyttet os af at skrive keywords. Pluginet har også den feature at man kan se hvor god SEO, der er på hver enkelt side. Google analytics 6.4 Google analytics er et godt værktøj at bruge, så man kan holde styr på, hvor mange der besøger ens side. På denne måde kan man også analysere brugen af websitet og se hvilke sider de kigger på, mens de er på sitet. Her kan Indre Østerbro foreningen se, om deres website bliver brugt eller om ingen besøger dem. Vi har valgt at bruge et plugin ved navn Google Analytics Dashboard for WP, da den havde gode ratings, mange downloads og da vi har haft gode erfaringer med den tidligere. side 31

FUNKTIONALITET 6.0 Non-funktionelle krav 6.5 De non-funktionelle krav hjælper os med at se, hvilke krav der vil være til vores system. Usability Websitet skal være simpelt at bruge og navigere rundt på. Det skal være tjekket for stavefejl i det faste indhold. Det skal være indbydende at se på. Sikkerhed Kravene til sikkerhed er at brugerens oplysninger ikke kan ses af andre og deres password skal være privat. En anden sikkerhed er at, når man skal logge ind på Wordpress Dashboad skal login og password ikke være let at hacke. Performance Websitet skal have en hurtig responstid, så indhold og billeder loader hurtigt på sitet. Kapacitet Dette website skal hovedsageligt fungere som et debatsite, men der skal kunne være logget mange mennesker (200-300) ind på samme tid og sitet skal fortsat fungere optimalt. Tilgængelighed Sitet skal være tilgængeligt 24/7 og vedligeholdelse skal ske på tidspunkter hvor der er færrest brugere som eksempelvis om natten. Pålidelighed Sitet må ikke være nede mere end 3 gange om året og der skal automatisk tages backup af alt indholdet dagligt. side 32

FUNKTIONALITET 6.0 Funktionelle krav 6.6 Vi har lavet en Use Case model for at få overblik over hvad brugeren og administratoren skal kunne. Nedenunder ses vores use cases. figur 15 side 33

FUNKTIONALITET 6.0 Use cases 6.6.1 Use case 01 Navn Kommentér på debatter Identifikation UC01 Beskrivelse Denne use case beskriver hvordan en bruger, som er logget ind på vores website, kan kommentere på de debatter som er på sitet. Dette sker under debatsitet, hvor månedens debat bliver offentliggjort. Mål Målet med denne use case er, at inddrage brugere mere, så de føler at sitet er til dem. På denne måde kan man også få løst nogle eventuelle problemer, der bliver taget op på debatsiderne. Forudsætninger 1. Brugeren skal oprette sig på websitet 2. Brugeren skal logge ind med deres profil på websitet 3. Brugeren skal have mulighed for at skrive deres kommentar til debatten på debatsitet let og forståeligt. blive benyttet hyppigere i starten af måneden end sidst på måneden, hvor debatten eller problemet muligvis er løst. Grundforløb 1. Use casen begynder, når brugeren logger ind på websitet og går ind på debatsitet. 2. Derefter kan brugeren indtaste noget tekst i en tekstboks, som fungerer som kommentarfelt. 3. Use casen slutter ved at brugeren trykker send og har bidraget med deres holdning til månedens debat. Alternativt forløb 1. Brugeren er ikke logget ind og kan derfor ikke kommentere 2. Der er ikke forbindelse til serveren og kommentaren bliver derfor ikke uploadet Efter grundforløb Efter brugeren har kommenteret på en valgfri debat, skal det være muligt at se det på websitet efterfølgende. Aktører Der er tale om to aktører i denne use case. Der er brugeren som selv kan skrive sine kommentare på debatterne. Så er der administratoren som skal sørge for, at tonen forbliver venlig og sober på debatten og der ikke er kommer nogen upassende kommentarer. Hyppighed Denne use case bliver benyttet et par gange om ugen - Beboerne skal kommentere på debatter. Det kan derfor tænkes, at denne use case Indkluderede use cases 1. Log ind. side 34

FUNKTIONALITET 6.0 Use case 02 Navn Læs indhold på sitet Identifikation UC02 Beskrivelse Denne use case beskriver, hvordan bruger og administrator kan læse alt indhold på websitet. Mål Målet med denne use case er at se indholdet, der er på websitet. Forudsætninger 1. Der skal være lagt noget indhold op på websitet Hyppighed Denne use case er en af dem, der udføres mest på websitet. Det primære mål, når man opbygger et website, er at vise noget indhold. Går man ind på websitet vil man, som det første, se på indholdet. Derfor bliver denne use case udført lige så meget, som der er besøgende på websiten. Er det fx 200 om dagen, udføres denne use case 200 gange om dagen. Grundforløb 1. Use casen begynder, når brugeren klikker sig ind på websitet. 2. Dernæst vil brugeren kunne se indholdet på websitet og klikke sig rundt på det som han/hun vil se. Alternativt forløb 1. Der er ikke forbindelse til serveren og indholdet vil ikke blive vist 2. Der er ikke blevet lagt noget indhold op på sitet og der kan derfor ikke vises noget. Efter grundforløb Efter brugeren har læst indholdet på sitet, kan han/hun vælge at oprette sig eller logge ind således at han/hun selv kan være med til at lægge indhold op eller kommentere på indhold. Aktører I denne use case er der to aktører: administrator og user. Det er meget essentielt at brugeren skal kunne læse indholdet på websitet, da det netop er det der er meningen med den. Det skal dog også være muligt for administrator at læse det indhold, der er på sitet, da han/hun selvfølgelig skal kunne se om alt kører som det skal, men også for at se om der bliver lagt upassende indhold op på sitet. Dernæst skal det (i en anden use case) være muligt for administrator, at administrere indholdet ved blandt andet at slette det, der er upassende. Inkluderede use cases Ingen side 35

FUNKTIONALITET 6.0 Use case 03 Navn Upload eget materiale Identifikation UC03 Beskrivelse Denne use case beskriver hvordan en bruger, der har logget ind på sitet, kan uploade eget materiale på sitet. Det vil sige hvordan han/hun kan uploade en tekst, som brugeren selv skriver og tilmed tilføje et billede til teksten hvis han/hun har lyst. Mål Målet med denne use case er at kunne uploade en tekst med tilhørende billede på websitet, således at andre mennesker, der går ind på websitet, kan se det. Forudsætninger 1. Brugeren skal først oprette sig i systemet 2. Brugeren skal være logget ind 3. Der skal være en side med en formular, hvor brugeren på en forholdsvis let måde skal kunne skrive en tekst, uploade et billede og trykke på en submit-knap Hyppighed Denne use case er ikke den, der bliver udført mest på websitet, da man først skal logge sig ind før den kan udføres. Alligevel vil den blive udført nogle gange af de beboere, der er logget ind. Er man landet på websitet bare for at kigge, vil man nødvendigvis ikke selv lægge noget op på sitet. Desuden er det en forudsætning at man, hvis man vil oprette en bruger og uploade sit eget materiale på websitet, bor på Østerbro. Derfor vil hyppigheden være på omkring 2 gange om dagen. Grundforløb 1. Use casen begynder når brugeren, der er logget ind på sitet, går ind på den side, hvor formularen, der består af et rum til tekst, en upload-knap til et billede samt en submit-knap, er. 2. Derefter kan brugeren skrive noget tekst ind i formularen og måske uploade et billede 3. Tilsidst vil brugeren trykke på submit og det indskrevne data lagres i databasen. Alternativt forløb 1. Der er ikke forbindelse til serveren og dataen bliver ikke sendt til databasen. Efter grundforløb Efter brugeren har uploadet sin tekst og billede, skal det være muligt at kunne se det på websiten. side 36

FUNKTIONALITET 6.0 Aktører I denne use case er der to aktører: administrator og user. Det er en forudsætning for brugeren at skulle kunne lægge sit eget materiale op. Inkluderede use cases 1. Log ind 2. Registrer bruger User story 6.6.2 Vi har lavet en user story, for bedre at kunne kommunikere de krav som vi sætter til at oprette en bruger. Det er nemmere at se krav på billeder som disse og det gør, at man ikke misforstår kravene, ved selv at fortolke teksten. På bagsiden af vores user story står der, hvad der kan ske, efter man brugeren trykker på opret. Bemærk at vores postnummer ikke er tilgægenligt på siden, da vi har brugt et Wordpress plugin, hvor det ikke var muligt at have den begrænsning på. Vi har eksempel med i vores kildekode, som forklarer hvordan man laver sådan en begrænsning. Delkonklusion af Funktionalitet 6.7 Ud fra vores arbejde kan vi konkludere, at vi har haft mange problemer med at ændre vores website og få alle de funktionaliteter ind, som vi gerne ville have, på grund af Wordpress. Derfor blev vi nødt til at ændre tema undervejs og droppe de koder, som vi selv har lavet. Vi må konkludere, at det valgte plugin er det bedste for at vores krav bliver opfyldt bedst muligt. figur 16 side 37

DATABASE 7.0 Her har vi dokumentation for vores database, dog skal det siges, at vi ikke selv har kodet vores website eller vores login, som også er beskrevet tidligere. Vi valgt at beholde det vi selv har kodet, for at vise hvordan vi gerne vil have det til at se ud og hvilke krav vi har haft til vores login. Attributtabel 7.1 Denne tabel er god at lave, så man kan fastlægge datatyper og værdier udfra entiteternes attributter. Vi har brugt den senere til at lave vores ER-diagram og CRUD. Entity Attribut Datatype Value user userid INT 6 firstname VARCHAR MAX 40 C lastname VARCHAR MAX 40 C email VARCHAR MAX 40 C zipcode INT 4 username VARCHAR MAX 20 C userpassword VARCHAR MAX 30 C superuser ENUM ( a, ) debat debatid INT 6 headline VARCHAR MAX 200 C message VARCHAR MAX 5000 C userid_fk INT 6 comments commentsid INT 6 message VARCHAR MAX 5000 C userid_fk INT 6 debatid_fk INT 6 forum forumid INT 6 message VARCHAR MAX 5000 C userid_fk INT 6 arrangementer arrangementerid INT 6 headline VARCHAR MAX 200 C message VARCHAR MAX 5000 C userid_fk INT 6 figur 17 side 38

DATABASE 7.0 ER-diagram 7.2 figur 18 Vi har lavet et ER-diagram for at se forholdene mellem de forskellige entiteter, som vi har skrevet i attributtabellen. Her var det nødvendigt at få attributterne, værdierne og datatyperne med fra attribut tabellen. Vores ER-diagram er lavet i tredje normalform, hvilket betyder, at vi identificerer nogle attributter, der kan blive identificeret af nogle andre attributter, i stedet for en primary key - altså hvor det ikke er nødvendigt at kende primary key for at identificere attributten. Debat består af to attributter, en primary key: debatid og en foreign key: userid_fk. Foreign keys vedligeholder forholdet mellem flere entiteter - det er altså en attribut, som i vores tilfælde er vores primary keys, der bliver linket til i en anden entitet. De andre entiteter er bygget op på samme måde. Tabellen users består af syv attributter og en primary key: userid. En primary key er den foretrukne nøgle, som altid er unik. side 39