MUL B - Gruppe 13 Vejledere: Jesper Hinchely Tue Becher Ivan Rosenvinge Camilla Bigum cph-cb164@cphbusiness.dk www.camillabigum.dk

Relaterede dokumenter
Introducering af Flip MinoHD:

CPH Business Academy. Lærere: JHI & TUJE

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GRAFISK PRODUKTIONSFORSTÅELSE

Denne rapport er skrevet af:

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

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

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING

Design Diaries.

PHP 3 UGERS FORLØB PHP, MYSQL & SQL

Url

Rapport. Udarbejdet af: Mayianne Nøks Pedersen. Skole login: knmape68.

PHP Snippets. De små korte. Skrevet af Daniel Pedersen

Grundforløbsprøve Projektbeskrivelse

LEDIG JOURNALIST? Gruppe 9 2 semester 1 projekt: Website Janni, Jens, Morten & Mikael

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

1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN

The Design Diaries PHP projekt

The Design Diaries Project 3 2. Semester. Blog om designprincipper

Indholdsfortegnelse Valg af opgave... 2 Introduktion... 2 Problem... 2 Målgruppe... 2 Afsender... 2 Budskab... 2 Kodning... 3 Effekt...

Trin for trin guide til Google Analytics

Byg web sider. Introduktion:

Grafisk workflow. Se siden her:

GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016

Redesign af Cinnober. Analyse af hjemmesiden Cinnober

if (mysqli_num_rows($res) > 0) { while ($result = $res->fetch_array(mysqli_assoc)) { "<div class=\"article\">".

Procesbeskrivelse - Webprogrammering

IDENTIFON. Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg

grafisk design Se webappen på din mobil

My Event. Funktioner, en oversigt: Kom i gang: Online tilmeldings system.

Portfolioudvikling. Line la Fontaine. Multimediedesigner

OK Fonden. Umbraco CMS Quickguide

Selvvalgt Projekt. ( Det smager godt ) af Ke vin Hartmann, Hold 305.

Rapport på Kommunikation IT projekt

Brugervejledning Joomla

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

Projekt database. (vores htmlside)

Marc Vinther Mikkel Borg Svendsen Nanna Bak Eliassen Sebastian Frank. Tourist Campaign

Gruppe 6. MulA, 2015 Frederik FDTA Jesper JHI Morten MORO Ditlev DSK Marc KLU. Anders Wetterstein - a.wetterstein@gmail.

IT Sikkerhed. Digital Mobning.

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

startup.dk Multimediedesigner 1. års prøve Eksamensprojekt, 2. semester 2015

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

Guide. Administration af FDF.dk/Nyborg. 1. Udgave Ide og layout Christoffer S. Rasmussen

Jayne Alice Jensen [Link til portfolio]

Vejledning til brug af Y s Men s klubintranet administrator guide

Mini brugermanual CMD 5.1

! Kia Dahlen. Kamilla Klein, Pia Jensen og Maria Korshøj Andersen.

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

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

GRAFISK WORKFLOW H1 MARIA SCHELDE

Grafik Workflow...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Brainstorm...6 Målgruppe Signalværdi Sitemap Nuværende sitemap...

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

PROJEKT 3. The Design Diaries. LINK TIL BLOG: Af Mikkel Borg Svendsen & Sebastian Frank MUL B

WORKFLOW & PRODUKTION

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

Projekt - Valgfrit Tema

Interaktionsudvikling

Multimediedesigner. Vedvarende. energi

Log ind med PHP. Denne guide er oprindeligt udgivet på Eksperten.dk. Skrevet den 09. May 2011 af dab93 I kategorien Programmering / Andre

HESTBJERG WEB GRAFISK WORKFLOW

Komm/it eksamensprojekt. RAPPORT. Christoffer, Frederik, Mathias og Martin.

Umbraco installationsvejledning

Grafisk Workflow. hovedforløb 2

ForældreIntra. - Sådan kommer du som forælder godt i gang. August 2016, version 1.1 Skolebestyrelsen/ MVT

Guide til oprettelse/redigering af events på bornholm.info

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

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

Grafisk Design 70% Skitser

Grafisk produktion & workflow

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

RESPONSIV WEBDESIGN. Gøg og Gokke. Kommunikation IT Afleveres d Sara Jacobsen & Natasja Christoffersen 3. års HTX

3. SEMESTER 2. PROJECT MULB Gruppe september 2015

Guide til Mobilize Me v2.0. Original skrevet af:

Herning Centerby Guide til Umbraco

Målgrupper. Af Phuong og Camilla

KONCEPTBESKRIVELSE KarriereIndex - PBA E-konceptudvikler - UCN - Gruppe: Heidi, Janus, Ulrik, Eyla. Konceptbeskrivelse til

Dokumentation. Karen-Louise Fejerskov

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau

Projekt 3: Interaktionsudvikling 11/04.14

DEBAT PÅ SOCIALE MEDIER

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

BRUGTE KLODSER TIL NYE IDEER DESIGNMANUAL & SOCIAL PLAYBOOK

Overvågningskamera. ~Af Svend, Valdemar og Frederik~

AFSLUTTENDE OPGAVE. Lad Grønsted forblive Grøn

Kreativt brief. Line Hasse Kirkegård - HOLD B. Dato: 18. septemper 2015 Kunde: Line Hasse Kirkegård - Multimediedesign studerende Projekt: Portfolio

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

SIDEN PÅ WORDPRESS.COM

program * opsamling * skype foredrag * online markedsføring

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

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

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

Transkript:

Cæcilie Rasmussen cph-cr105@cphbusiness.dk www.caecilierasmussen.com Henriette Solveig Klindt cph-hk15@cphbusiness.dk www.henrietteklindt.dk Eksamen 2014-2015 Site community - Haveforeningen Frederikshøj MUL B - Gruppe 13 Vejledere: Jesper Hinchely Tue Becher Ivan Rosenvinge Camilla Bigum cph-cb164@cphbusiness.dk www.camillabigum.dk Website url: www.henrietteklindt.dk/3eksamen/index.php Video url: http://vimeo.com/115163630 Christina Juulmann cph-cj197@cphbusiness.dk www.chrissycreations.dk Sunna Natasia Mittet cph-sm33@cphbusiness.dk www.sunnanatasia.dk

Indholdsfortegnelse Indledning Projektbeskrivelse Problemformulering Metode og Teori Afgrænsninger Projektplan Sprint planning Analyse Interessent Risikoanalyse Kommunikation Kommunikations strategi Kommunikations plan AIDA Kommunikationsmodel Målgruppe og budskab Design Brief Dokumentation af udvikling Visuel identitet Logoudvikling Wireframes Responsive ER-diagram CRUD Test cases Use cases Kodeeksempler - Website SEO Video - Plakat - Flyer App udvikling Kampagneplan Designmanual Konklusion Litteratur liste Bilag Moodboard Sprint Screendumbs

Indledning HF. Frederikshøj er en helårsbeboet haveforening i Sydhavnen med omkring 400 beboere. Foreningen har tidligere haft et intranet for beboerne, men da det er forældet ønsker de et nyt fælles forum, hvor samtlige beboere kan mødes online og få information, udveksle idéer og arrangementer. Da foreningen allerede har et godt netværk i form af internt ugeblad og sociale aktiviteter, ligger udfordringen i at implementere deres ugeblad samt sociale arrangementer i et online website. 1

Projektbeskrivelse Problemformulering Hvordan kan vi optimere kommunikationen mellem interessenter i HF. Frederikshøj og dermed gøre dette nemmere? Hvordan kan vi via medier skabe et nærvær mellem beboerne? Hvilke sociale interaktioner har beboerne i lokalområdet? Hvordan kan vi integrere idéen hos beboerne? Hvilke medier bruges der i HF. Frederikshøj? Metode og teori Vi vil starte med at lave en projektplan her vil vi som metode anvende SCRUM. Med en risiko og interessentanalyse vil vi foretage dybdegående undersøgelser. Derefter kigge på markedet og skabe et større billede, i forhold til hvilke behov der allerede er opfyldt, og hvad vi kan gøre for at optimere kommunikationen i Hf. Frederikshøj. Når vi kommer langt nok til at kunne teste designet på websitet, bruger vi forskellige usability test, som brugertest for at teste sidens features samt gangstertest for sidens navigation til eventuelle udfordringer som kunne forbedres. Afgrænsninger Da websitet skal være internt for beboerne, afgrænser vi siden til at man ikke skal kunne registrere sig. Dette område sørger administration for, for netop at afgrænse forummet til beboerne og dermed holde det lokalt. Log-in til app så det er muligt at oprette indlæg. Herfra går vi videre til at udvikle en kommunikationsstrategi og segmentering ved hjælp af conzoom for at komme frem til hvilke befolknings grupper målgruppen hører til. Efterfølgende kan vi færdiggøre et Design Brief, således at vi kan fastlægge, hvilke produkter der skal udarbejdes samt hvilke krav vi vil skabe for designet. Herfra kan vi komme i gang med at udarbejde design delen - begyndende med et moodboard. Til sidst vil vi udarbejde en designmanual.

Sprint planning

Sprint planning

Analyse - Interessent Interessenter Fordele Ulemper Vurdering Frederikshøj beboere Internet side til debat/ indlæg og fælles forum Hvis der på siden, ikke bliver debatteret nok og hvis folk ikke læser sitet Dette er vores vigtigeste interessanter. De er beboere i haveforeningen og derfor vores primære målgruppe Sydhavns området At beboerne i området kan følge med i HF. Frederikshøjs nyheder da de er en del af nærområdet At sydhavnens beboere sant Da sydhavnens beboere ikke er vores målgruppe er dette ikke vores interesse-gruppe Fremtidige beboere At personer, som ønsker et hus i haveforeningen nyttig viden på sitet At sitet ikke informere nok omkring beboelse i området, men mere et fælles forum for alle nuværende beboere Dette er også en lille interssant for os, men vores fokus ligger ikke her

Analyse - Interessent HF. Frederikshøj nuværende beboere Fordelene for de nuværende beboere i lokalområdet er helt sikkert, at de får en hjemmeside, hvor de kan kommunikere med hinanden. Udover, at de får en hjemmeside hvor foreningen bliver præsenteret udadtil, så får de samtidig et forum, hvor de kan debatere nyttig info på kryds og tværs. De kan udover, at debatere, skrive opslag om eksempelvis Forsvundne ting samt oploade billeder af hverdagen i lokalsamfundet. På sitet vil man også kunne tilmelde sig de forskellige aktiviter og events som sker i haveforeningen. Fremtidige beboere Fordelene for denne gruppe er, at de kan følge med i foreningens interesser. Er man én af dem, som ønsker og er interesseret i at bo i haveforeningen er dette med fordel en side, som kan vække interesse. Ulempen kan, ligesom hos de to andre interessenter være, at siden ikke vække interesse nok og derfor ikke bliver brugt. Ulemperne for de nuværende beboere kan være, at sitet ikke vil så spændende, som vi synes det er. Men da det er de nuværende beboere, som er vores primære målgruppe vil vi selvfølgelig gøre, alt for at sitet bliver så interessant for beboerne som overhovedet muligt. Sydhavnens beboere Fordelene for Sydhavnens beboere kan være, at de også får et indblik i, hvad deres naboer i HF. Frederikshøj laver. Det kan dog også vende den stik modsatte vej. Det kan måske være ligegyldigt for nogle, men da Frederikshøj er et socialt fælles samfund skal folk omkring selvfølgelig også have lov til, at se hvordan de bor og se hvilke egenskaber sådan ét samfund kan have. Sydhavnens beboere er ikke en segmentering, som vi vil ligge særlig meget fokus på.

Analyse - Risikoanalyse 1 = Lille 3 = Middel 5 = Stor Hvis sandlynlighed x konsekvens er lig med eller over 9 = indsatsområde!!! Hvad kan gå galt? Sandsynlighed (1, 3 eller 5?) Konsekvens (1, 3 eller 5?) Sandsynlighed X Konsekvens Hvad skal der gøres for at undgå denne risiko? At sitet ikke vækker interesse nok 3 5 15 Denne er i stor risiko. For at gøre sitet interessant har vi etableret forskellige aktiviteter på siden, som også skal være med til, at opretholde interessen hos vores målgruppe! At Admin ikke er tilstede 3 1 3 Dette er ikke særlig sandsynligt, men en løsning kunne være, hvis man havde en ekstra-admin. At sitet går ned 1 5 5 Det er også en lav risiko. Vi har selv- At sitet ikke bliver brugt 1 5 5 Denne risiko hænger sammen med den første. I og med, at vi forventer at sitet vil skabe stor interesse hos beboerne, tror vi også på, at det

Analyse - Risikoanalyse En af de store risici i dette projekt er, at få skabt interesse for sitet hos beboerne samt at bibeholde deres opmærksomhed. Vi har valgt at etablere forum, aktiviteter, kalender og kontakt på sitet, så beboerne kan være med hjemme fra stuerne istedet for, at gå op i fælleshuset og tilmelde sig diverse events og begivenheder. Man kan selvfølgelig, som beboer UDEN for haveforeningen også klikke ind på hjemmesiden og se alle indlæggene og aktiviteterne, man kan dog bare ikke logge ind og skrive et indlæg og tilmelde sig de forskellige ting. Det har ingen betydning hvis, Admin ikke er tilstede eller hvis sitet går ned. For det første er det ikke særligt sandsynligt, men derudover så kunne løsningen være, at have en super-user. Sitet er selv-

Kommunikationsplan Kommunikations strategi Mål Haveforeningen Frederikshøj har et godt fællesskab, vi ønsker at styrke dette fællesskab. På nuværende tidspunkt har Frederikshøj et måneds magasin, samt tavler ved fælleshuset. Det er b.la. disse informationer vi ønsker at samle et sted ved at digitalisere dem. Derfor ønsker vi at formidle budskabet om fordelene ved at få en digital samlingsplatform. Media adjustment Vi bestræber os på at nå ud til beboerne ved at gøre tingene så simple for dem at anvende som muligt. Events Det er tiltænkt, at vi som har lavet hjemmesiden, skal ud til beboerne i haveforeningen og holde et informationsmøde. Derfor har vi også valgt at lave en plakat for at fortælle beboerne, hvor og hvornår de kan deltage i begivenheden. Medier - Plakat - En informations folder med praktiske oplysninger - Video (en stemningsfyldt intro video til hjemmesiden, der skal vise formål med en digital samlings platform.) -App Website: Hjemmesiden kommer til at fungere som et samlingspunkt for beboerne i Frederikshøj. Et sted hvor de kan dele praktiske informationer mm. med hinanden. Der vil være et login, så den enkelte beboerne kan logge ind og uploade opslag og billeder samt tilmelde sig diverse aktiviteter.

Kommunikationsplan Formål Formålet med vores kampagne er, at få beboerne I haveforeningen til at samles på deres fælles platform. Afsendere Der er en afsender I kampagnen og det er os, som producere produktet til haveforeningen. Målgruppe Vores målgruppe strækker sig meget bredt! I haveforeningen bor der et hav af forskellige type mennesker med forskellige baggrunde. Unge, som gamle. Kvinder/mænd. Børnefamilier og par. Vigtigt er det også, at nævne, at samfundsklasser heller ikke spiller nogen rolle. Man kunne nemt dømme lokalt området til, at være et underklasse miljø ligesom resten af sydhavnen, men mange af husene i foreningen er ny istandsat og benytter sig eksempelvis af solenergi. Fælles for alle beboerne er, at de alle vægter fællesskab højt, uanset hvilket køn du er, hvor gammel du er og hvilket job du har. Alle er velkomne og de tager imod én med åbne arme. Derfra vi må konkludere, at vores målgruppe er en bred en af slagsen. Budskab Vi vælger budskabet Gør det lettere at kommunikere med dine naboer på det fælles sociale forum Der skal fokuseres på, at fællesforummet kan være med til, at bibeholde og evt. Forstærke foreningens kommunikation imellem hinanden. Kampagnen skal give udtryk for, at alting foregår under nye, ordnede, professionelle forhold (via designet). Medie: Vi har valgt, at mediet i kampagnen, hovedsageligt er en webside, samt en plakat og video. Dertil har vi en app til beboerne, som kan vise de nyeste indlæg, som også ses på hjemmesiden. Appen kan downloades på App Store og GooglePlay en plakat. der et personligt log-in og kodeord, som kun de enkelte beboerne I foreningen kan bruge. Plakaten skal hænge ved foreningens fælleshus og informere om det event, som er tiltænkt for kampagnen. Kommunikationsmiljø optimalt I foreningen. Derfor vurderer vi, at kampagnen har stor interesse for den primære målgruppe.

Aida Vi har valgt at benytte os af AIDA-modellen, da vi gerne vil vække målgruppens nysgerrighed omkring vores site for HF Frederikshøj. beboerne i haveforeningen til, at benytte sig af sitet. Attention Vi vil skabe opmærksomhed omkring vores hjemmeside og dets nye tiltag via de forskellige medier. Vi vil bl.a. sætte plakater op ved fælleshuset, som reklamere for et event som omhandler websitet. Vi vil lave annoncer haveforeningens månedlige blad. Desire Beboerne i Frederikshøj bliver hele tiden, på sitet, mindet om, hvad foreningen står for og hvorfor de egentlig bor der. Da sitet nu kan bruges som et onlineforum, bliver fællesskabet bedre og lettere af vedligeholde i en ellers travl hverdag, da det er kendetegnet for foreningen - Fællesskab. Action For nuværende beboere er der ikke nogen primære action, da de jo ikke bor i lokalområdet pga. forummet, men derimod bor der pga. fællesskabet, men en action kunne være, at de så forummet og ville bruge det for, at være en del af det online-fællesskab som er etableret. Interest Hovedparten som skal vække interesse hos vores målgruppe er selve konceptet ved at etablere et online forum til fritbrug af alle haveforeningens beboere. Derudover kan folk udefra også læse sitet, men ikke kommentere- og poste indlæg. Meningen med dette er, at folk som ikke bor i lokalsamfundet, men er interesseret i det, på den måde kan følge med i hvad der sker og på længere sigt kan blive en mulig beboer.

Kommunikationsmodel Nedenfor ses en udvidet model af Laswells kommunikationsmodel. Da den simple og klassiske model er en model for envejskommunikation, hvor modtagerne ses som passive i kommunika- til det moderne samfund. Med det moderne samfund forstås således, at vi lever i en tid, hvor modtagerne har nem og hurtig adgang til at kommunikere og give feedback ved hjælp af sociale platforme såsom Facebook, men også fra mund til mund. Budskab/medier - I hvilken kanal? De medier vi som afsender mener er reel for at budskabet når bedst muligt ud, er; - Website - App - Video Online medier - Plakat ved fælleshuset - Brochure (folder) Afsender Indkodning Budskab/ medier Afkodning Modtager Støj Støj kan gøre at kommunikation mis- lykkedes. Dette kan gøre, at modtageren afkoder budskabet forkert. Her kan støj eksempelvis være dårlig netforbindelse. Feedback Afsender - Hvem siger hvad? Vi som multimediedesignere er afsender og ønsker at fortælle, at beboerne i HF Frederikshøj skal benytte sig af et nyt website som kan optimere deres kommunikation. Indkodning Under indkodningen vurderer og bestemmer afsenderen budskabets form samt fremgangsmåde (medie) der skal anvendes. De medier vi har valgt at bruge kan ses i næste afsnit. Afkodning Modtagerne har forskellige baggrunde, men samme interesse for haveforeningen, og da budskabet er simpelt og præcist er der ikke meget, at misforstå. Det vil sige, at afkodningen er, hvordan modtageren forstår budskabet. Modtager - til hvem? Vores primære målgruppe er haveforeningens beboere - en blanding af mænd og kvinder, familier og par. Målet med produktionen er at øge foreningens kommunikation.

Målgruppe og budskab Segmentering I dette projekt, er vores segment forudbestemt af det område vi har valgt at arbejde med. Vi har derfor baseret vores analyse på data hentet fra Conzoom. adresser tilknyttet HF.Frederikshøj, kommet frem til at den gruppe som er overrepræsenteret i området hører til G-Seniorer og af typen G2-Lærkevej. Dette segment, hører i henhold til Gallups kompas til den mere traditionelle del af befolkningen. seres som de traditionelt fælleskabsorienterede. Målgruppe Vores målgruppe strækker sig meget bredt. I haveforeningen bor der et hav af forskellige type mennesker med forskellige baggrunde. Unge, som gamle. Kvinder/mænd. Børnefamilier og par. Vi har bl.a. den ældre del af målgruppen, nogle af dem som fokuserer mere på de traditionelle værdier i livet, det vil derfor blive en stor udfordring af får implementeret et digitalt socialt forum, da den del af målgruppen generelt ikke er særligt modtagelige for ny teknologi. Der er dog i højere grad dele af denne målgruppe der er begyndt Derudover har vi også de unge forældre, som begge har en macbook computer og opdateret med den sidste nye viden indenfor teknologi. Vigtigt er det også, at nævne, at samfundsklasser heller ikke spiller nogen rolle. Man kunne nemt dømme lokalt området til, at være et underklasse miljø, men mange af husene i foreningen er ny istandsat og benytter sig eksempelvis af solenergi. Men fælles for alle beboerne er, at de alle vægter fællesskab højt, uanset hvilket køn du er, hvor gammel du er og hvilket job du har. Alle er velkomne og de tager imod én med åbne arme. Derfra vi må konkludere, at vores målgruppe er en bred en af slagsen og derved er vores publikum med til, at skræddersye vores kampagne. Udfra de ovenstående informationer kan vi konkludere, at vores kampagne skal være en neutral en af slagsen. Den skal henvende sig til hvert og en beboer i foreningen. Budskab For at få vores budskab om at øge fællesskabet med et socialt forum ud, vil vi derfor lægge stor vægt på, at motivere beboerne til, at benytte sig af sitet, men også at sørge for at de bliver guidet til brugen af sitet, og appen. Derudover er det vigtigt at sitet er så brugervenligt så muligt så målgruppen ikke mister motivationen til at benytte sig af et nyt digitaliseret forum.

Designbreif Vores grundlæggende ide omkring websites layout var, at lave en nyt funktionelt site, hvor brugervenlighed er prioriteret højt. Vi var alle enige om, at hjemmesiden skulle have et dynamisk look med farver. Vi ville skabe en følelse af tryghed og fællesskab. Som den røde tråd igennem kampagnen har vi valgt at smide vores logo ind på alles vores medier, så folk ved hvad de har med, at gøre. Derudover går de sammen farver igen på de forskellige medier. Vi er efter analyse- og undersøgelsesfasen, kommet frem til hvilke mest optimale at anvende. Vi har lagt vægt på at vi gennem de medier vi har valgt, kan skabe et større fokus på den samlings platform vi skaber til beboerne, og dermed hjælpe til at optimere kommunikationen i haveforeningen. Website - dynamiske elementer Log in Slideshow Navigations menuen Forummet Funktionelle krav Form validering Database Responsiv design SEO Non-funktionelle krav Sikkerhed i forhold til private oplysninger (log in) Billeder skal være optimeret til web Kodestruktur så der nemt kan opdateres Online medier Website App Video Plakat til fronten på haveforeningens forsamlingshus Informations brochure (Beboernes postkasse)

Dokumentation af udvikling Visuel identitet Overordnet set er der en råd tråd gennem alle vores medier. Vi har prøvet, at skabe en følelse af fællesskab og prøvet at få bud- Valg af farver Vi har valgt at bruge lyse, neutrale og rolige farver, da det giver et rent og naturligt website. #AECCB2 #6F8B80 #FFFFFF #707070 #C5C5C5 Da det er en haveforening har vi valgt, at bruge nogle blå/grønne farver, som symbolisere natur og renhed. Derudover er vores wapper hvid, for at holde det simpelt. Vores font farve er en mørkere grå, som står i kontrast til den hvide. Hoveren er en lysere grå. Alle farver er dæmpede, for at holde siden rolig og naturlig. Vi har valgt at bruge Oxygen, som font overalt på hjemmesiden. Det er en let-læselig font, som passer godt til vores site og Capone CG light. Denne font er en smule alternativ og derfor synes vi, at den passer godt til beboerne.

Dokumentation af udvikling Logoudvikling Vores logo har været en del under vejs. Vores første logo var to brædder forskudt ad hinandnen, hvor der stod Haveforening Frederikshøj, hvilket faktisk er gået igen i alle vores logoer, da logoet jo skal repræsentere foreningen, men der var alligevel noget lavet et nyt og opdateret, så istedet for, at det var 2 bræt, blev det til et, men stadig med samme, mange blomster. Vi ved jo, at et logo skal være letgenkendeligt og man ud fra et Vi droppede brædderne og valgte at tegne et træ i en cirkel og skrive teksten Haveforningen Frederikshøj. Et træ fordi, at vi igennem hele produktionen lægger stor vægt på natur. I og med, at det jo er en haveforening skal der også indgå noget med have. Alt er næsten bygget i træ. En cirkel fordi det symbolisere fællesskab og solidaritet.

Dokumentation af udvikling Wireframes

Dokumentation af udvikling Responsive template CRUD ER-diagram

Dokumentation af udvikling Test case 1: Navn: Log in System: PHP, SQL Subsystem: HTML Kort beskrivelse: Logge ind med brugernavn under forum Førtilstand: Start på: forum.php

Dokumentation af udvikling Test case 2: Navn: Opret indlæg System: PHP, SQL Subsystem: HTML Kort beskrivelse: Brugeren skal kunne uploade indlæg til forum Førtilstand: Start på login.php og vær logget ind

Dokumentation af udvikling Test case 3: Navn: Se indlæg System: PHP, SQL Subsystem: HTML Kort beskrivelse: Se indlæg på index.php Førstilstand: Start på index.php

Dokumentation af udvikling Usercase UC01: Slette egne indlæg Aktører: User Beskrivelse: Denne use case beskriver hvordan user sletter sine egne indlæg Mål: User kan slette et indlæg skrevet af personen selv Før-tilstand: - Tabellen indlaeg i databasen er updateret med nye indlæg - User er logget ind med sit personlige brugernavn og kodeord Hyppighed: 20 gange om ugen Basale forløb: 1. use case begynder når user er på siden vis indlæg 2. user trykker slet indlæg 3. use case slut Efter-tilstand: - Tabellen indlaeg i databasen er updateret med et indlæg mindre

Dokumentation af udvikling UC02: Se indlæg Aktører: - Gæst - User - Admin Beskrivelse: Alle aktører kan se indlæg på forummet Mål: Se indlæg oprettet af aktuelle brugere Før-tilstand: Tabellen indlaeg i databasen er updateret med indlæg Antagelser: Det antages at der er oprettet mindst èt indlæg Hyppighed: 800 gange om ugen Basale forløb: 1. use case begynder når aktøreren går ind på hjemmesiden 2. aktøreren navigere sig ind på Forum 3. trykker på Se indlæg 4. use case slutter UC03: Slette alle indlæg Aktører: Admin Beskrivelse: Denne use case beskriver hvordan aktøreren adminstrere indlæg i forummet Mål: Admin skal slette indlæg oprettet af brugere og admin selv Før-tilstand: Tabellen indlaeg i databasen er updateret med nye indlæg Admin er logget ind med brugernavn Admin Hyppighed: 2 gange om ugen Basale forløb: 1. use case starter når admin er på forummet 2. admin ser et indlæg skrevet af enten admin selv eller user 3. admin trykker Slet 4. use case slutter Efter-tilstand: Tabellen indlaeg i databasen er updateret med et indlæg mindre.

Dokumentation af udvikling UC04: Logge ind Aktører: - Admin - User Beskrivelse: Denne use case beskriver hvordan aktører logger ind på forummet Mål: Aktører skal logge ind på forummet Før-tilstand: - User er oprettet i databasen med eget brugernavn og kodeord tilknyttet et id - Admin er oprettet i databasen med brugernavn Admin tilknyttet et id Hyppighed: 300 gange om ugen Basale forløb: 1. use case begynder når aktører navigere sig ind på Forum 2. aktører indtaster sine personlige login data i formen 3. trykker på log ind 4. logget ind som user/admin 5. use case slutter Alternativt forløb: Aktør har fejlagtigt indtastet forkert data i login formen a. Aktøreren modtager fejlmeddelelsen Kunne ikke logge ind b. Aktøreren indtaster de rigtige login data i formen og logges på. UC05: Oprette indlæg Aktører: - Admin - User Beskrivelse: Denne use case beskriver hvordan aktører opretter et indlæg på forummet Mål: Aktører skal skrive et indlæg med et billede Før-tilstand: Admin er logget ind User er logget ind Hyppighed: 150 gange om ugen

Dokumentation af udvikling Basale forløb: 1. use case starter når aktørerne trykker opret indlæg 2. aktørerne klikker i tekst feltet og udfylder dette 3. klikker på knappen gennemse.. 4. vælger et billede og trykker åben 5. trykker post indlæg Alternativt forløb: støttet (.png,.jpg,.gif) hen på Indlæg b. Aktøreren skal altså starte forfra b.1 trykke på indlæg b.2 trykke på opret indlæg b.3 udfylde tekst området b.4 trykke Gennemse.. b.5 trykke åben b.6 trykke post indlæg Beskrivelse: Denne use case beskriver hvordan aktøreren adminstrere alle indlæg Mål: Admin skal redigere indlæg skrevet af users og admin selv Før-tilstand: - Admin er logget ind med brugernavn Admin - Der er oprettet indlæg i forummet Hyppighed: 3 gange om ugen Basale forløb: 1. use case starter når admin er på forummet vis indlæg 2. trykker Rediger 3. trykker updater 4. use case slutter Eftertilstand: Databasen er updateret med ny data i tabellen indlaeg UC06: Redigere alle indlæg Aktører: Admin

Dokumentation af udvikling UC07: Redigere egne indlæg Aktører: User Beskrivelse: User kan redigere egne indlæg Mål: User skal kunne redigere sine indlæg på forummet Før-tilstand: User er logget ind Antagelse: Det antages at user har oprettet et indlæg Hyppighed: 10 gange om ugen Basale forløb: 1. use case begynder når User navigere sig ind til siden vis indlæg 2. user trykker på Rediger under et indlæg skrevet af user selv 3. use case slutter Efter-tilstand: attribut feltet tid i tabellen indlaeg i databasen er updateret til ny tid

Dokumentation af udvikling Website - Forum Vi skulle kode et forum hvor der var en gæst, en user, og en admin. Gæst kan se alle indlæg, bruger kan se alle indlæg og oprette /slette/redigere sine egne indlæg. Admin skal have adgang til alle indlæg hvor han/hun kan CRUD. Her er den del af login hvor bruger får tildelt deres rettigheder, vi kalder det level, Da de allerede har fået tildelt deres brugernavn og kodeord skal de ikke registrere sig først. <?php session_start();?> ---Head--Head slut ---Body- <?php // start SESSION - put SESSION value i $user $user = $_SESSION[ username ]; // Connect til db $con = mysqli_connect( mysql21.unoeuro.com, henriettekl_dk, portfolio2013, henrietteklindt_dk_db );?> <div class= cssmenu-forum > <ul> <!--<div class= image group1 >--> <!--<div class= grid span_2_of_3 >--> <p class= para > <li><a href= login.php?side=logpaa ><div id= menu-item >Log ind</div></a></li> <li><a href= login.php?side=forum ><div id= menu-item >Indlà g</div></a></li> <li><a href= login.php?side=logud ><div id= menu-item >Log ud</div></a></li> </ul> </div> <!-- Her vises indholdet --> <div id= content > <?php // Hvis du trykker log ud, fjerner den session if ($_GET[ side ] == logud ) { //Stop session session_destroy(); //Redirect til login echo <script type= text/javascript >window.location.href = login.php ;</script> ; } // Her vises log in, hvis der bliver klikket på log på, eller hvis intet er klikket på. if ($_GET[ side ] == logpaa!isset($_get[ side ])) { if (isset($user)) { // Hvis der er logget på(hvis SESSION lever), vises dette: //Tjekker level: $tjek_sql = SELECT * FROM henriette_users WHERE username = $user ; $tjek_level = mysqli_fetch_array(mysqli_query($con, $tjek_sql)); if ($tjek_level[ level ] == admin ) { $level = admin ; } else { $level = bruger ; } echo Du er logget på som:.$user., klik på indlæg, eller log af.<br /><br /> ; } else { // Hvis der ikke er logget på vises dette: echo Se indlã g som gã st <a href= login.php?side=vis >HER <br /></a><br /> ; echo Eller log in.<br /> } //Viser kun login form, hvis du ikke er logget ind if (!isset($user)) {?> <div id= login > <form method= post > <table> <tr> <td>brugernavn: </td><td><input type= text name= username /></td> </td> <tr> <td>kodeord: </td><td><input type= password name= pass /></td>

Dokumentation af udvikling SEO Google analytics vi har valgt Google analytics som er lagt ind på alle sider så alt bliver talt med <script> (function(i,s,o,g,r,a,m){i[ GoogleAnalyticsObject ]=r;i[r]=i[r] function(){ (i[r].q=i[r].q []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getelementsbytagname(o)[0];a.async=1;a.src=g;m.parentnode.insertbefore(a,m) })(window,document, script, //www.google-analytics.com/analytics.js, ga ); ga( create, UA-57793181-1, auto ); ga( send, pageview ); </script> Meta tags vi har valgt at have en description og en keywords så vi kan komme på listen når der søges på søgemaskiner under disse navne. <meta name= description content= Frederikshøj Haveforening > <meta name= keywords content= forum,fællesskab, haveforening, frederikshøj >

Dokumentation af udvikling Video materiale Som et led i vores kampagne, har vi valgt at lave en introdukti- af deres nye samlings platform. Dette har vi valgt på baggrund af at vores målgruppe hører til en del af befolkningen der ikke er illustrerer hvordan beboerne logger ind på forummet, poster et indlæg og viser hvad der ellers er af muligheder. Vi vil gennem en simpel step by step guide gøre det nemt og let tilgængeligt for beboerne at anvende det nye digitale system. Plakat materiale Vores plakat er skabt ud for designprincipperne genkendelighed og enkelthed. Vi vil sikre os at skabe den røde tråd, og da plakaten er det første som beboerne i foreningen kommer til at se, da det er den vi bruger til at formidle vores informationsaften, har vi valgt at lave den i samme stil som vores website. Derfor har vi valgt at bruge de samme farver, og logo. Vores font er den samme som den vi har brugt i logoet. Flyer materiale vi har brugt på sitet. Vi har brugt samme farver som på sitet og samme font som i logoet for at skabe genkendelighed og enkelt- duelle log-in oplysninger og sidens URL. Desuden har vi skrevet informationer om de forskellige ting man kan læse om inde på siden. Vi opfordre også samtidig folk til at hente App en så de kan bruge den når de ikke er hjemme til at gå på deres computer.

Dokumentation af udvikling App udvikling Intel XDK jquery mobile Vi har valgt at vores app skal kunne vise alle indlæg, og for at det skal kunne lade sig gøre, skal der forbindes til database, for at kunne skrive en sql der virker. Man kan ikke her som på websites forbinde direkte med f.eks. dbcom.php, men man skal bruge ajax til at lave en forspørgsel til serveren. Filer i Intel XDK mappen index.html her får button en id knap det er knappen der trykkes på for at se alle indlæg. <a class= widget uib_w_2 d-margins data-uib= jquery_mobile/button data-ver= 0 data-role= - button id= knap >Se indlæg fra forum</a> og en tom div hvori indlæg bliver udskrevet. init-app.js her sættes knappen til at udføre funktionen hentinfo når der klikkes på knappen $( #knap ).click(hentinfo); function hentinfo() { $.ajax({ type: POST, url: http://henrietteklindt.dk/getdata.php, success: function(data) { $( #result ).append(data); }, error: function(data) { alert( Error @ ajax ); } }); } sen, og her man udskriver sin SQL <?php // Connnection(require dbcon.php istedet for -TODO) $con = new mysqli( mysql21.unoeuro.com, henriettekl_dk, portfolio2013, henrietteklindt_ dk_db ); // Select hvilke informationer der skal vises, og hvorfra $sql = SELECT tid, indlaeg, image, user FROM henriette_indlaeg ORDER BY id DESC ; $stmt = $con->prepare($sql); // Bind informationerne til variable $stmt->bind_result($tid, $indlaeg, $image, $user); $stmt->execute(); echo <br /> ; echo <br /> ; // Fetch informationer i div tags while($stmt->fetch()) { echo $tid; echo <br /> ; echo $indlaeg; echo <br /> ; echo <br /> ; echo Skrevet af: ; echo $user; echo <br /> ; echo <br /> ; echo <img src= http://henrietteklindt.dk/3eksamen/.$image. /> ; echo <hr /> echo <br /> ; }?> Her er QR koden der skal scannes med smartphone

Kampagneplan For at vi bedst kan komme ud med vores budskab til beboerne i haveforeningen vil vi først og fremmest hænge de informative plakter op ved fælleshuset. Derefter vil vi i deres månedelige blad skrive om informationsaftenen og breife kort om den nye hjemmeside. Alt dette sker i starten af januar. boere og samme informative plakat, som hænger ved fælleshuset dog i mindre format. Det er også den dag, at hjemmesiden går i luften (bliver lagt online). D. 17 januar holder vi vores informations event. Her vil vi vise vores guide video samt give beboerne en grundig guide om, hvordan hjemmesiden fungerer og hvad de kan bruge den til.