Cæcilie Rasmussen [email protected] www.caecilierasmussen.com Eksamen 2014-2015 Site community - Haveforeningen Frederikshøj MUL B - Gruppe 13 Vejledere: Jesper Hinchely Tue Becher Ivan Rosenvinge Henriette Solveig Klindt [email protected] www.henrietteklindt.dk Camilla Bigum [email protected] www.camillabigum.dk Website url: www.henrietteklindt.dk/3eksamen/index.php Video url: http://vimeo.com/115163630 Christina Juulmann [email protected] www.chrissycreations.dk Sunna Natasia Mittet [email protected] 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? 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. 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? 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. 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. 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. Log-in til app så det er muligt at oprette indlæg. Sprint planning Sprint planning Analyse - Interessent Interessenter Frederikshøj beboere Sydhavns området Fremtidige beboere Fordele Internet side til debat/ indlæg og fælles forum Ulemper Hvis der på siden, ikke bliver debatteret nok og hvis folk ikke læser sitet Vurdering Dette er ”vores” vigtigeste interessanter. De er beboere i haveforeningen og derfor vores primære målgruppe 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 At personer, som ønsker et hus i haveforeningen 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 nyttig viden på sitet 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. 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å. 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. 1 = Lille Analyse - Risikoanalyse Hvad kan gå galt? At sitet ikke vækker interesse nok At Admin ikke er tilstede At sitet går ned At sitet ikke bliver brugt Sandsynlighed (1, 3 eller 5?) 3 3 3 = Middel 5 = Stor Hvis sandlynlighed x konsekvens er lig med eller over 9 = indsatsområde!!! Konsekvens (1, 3 eller 5?) 5 1 Sandsynlighed X Konsekvens 15 3 Hvad skal der gøres for at undgå denne risiko? 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! Dette er ikke særlig sandsynligt, men en løsning kunne være, hvis man havde en ekstra-admin. Det er også en lav risiko. Vi har selv1 1 5 5 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. 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. 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. Kommunikationsplan Formål Formålet med vores kampagne er, at få beboerne I haveforeningen til at samles på deres fælles platform. Budskab Vi vælger budskabet ”Gør det lettere at kommunikere med dine naboer på det fælles sociale forum” Afsendere Der er en afsender I kampagnen og det er os, som producere produktet til haveforeningen. Der skal fokuseres på, at fællesforummet kan være med til, at bibeholde og evt. Forstærke foreningens kommunikation imellem hinanden. 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. 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. 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. 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. 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. 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. 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 kommunikatil 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. Afsender Indkodning Budskab/ medier Afkodning Modtager 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. Budskab/medier - I hvilken kanal? De medier vi som afsender mener er reel for at budskabet når bedst muligt ud, er; Online medier - Website - App - Video - Plakat ved fælleshuset - Brochure (folder) 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. 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. cbook computer og opdateret med den sidste nye viden indenfor teknologi. 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. 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. 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. 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. Der er dog i højere grad dele af denne målgruppe der er begyndt 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. Derudover har vi også de unge forældre, som begge har en ma- 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. Online medier Website App Video Plakat til fronten på haveforeningens forsamlingshus Informations brochure (Beboernes postkasse) 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 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å budValg af farver Vi har valgt at bruge lyse, neutrale og rolige farver, da det giver et rent og naturligt website. #AECCB2 #6F8B80 #707070 #C5C5C5 #FFFFFF 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 ER-diagram CRUD 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 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å. Beskrivelse: Denne use case beskriver hvordan aktører logger ind på forummet UC05: Oprette indlæg 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 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’ Eftertilstand: Databasen er updateret med ny data i tabellen ’indlaeg’ UC06: Redigere alle indlæg Aktører: Admin 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 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=”image group1”>--> <!--<div class=”grid span_2_of_3”>--> <p class=”para”> <div class=”cssmenu-forum”> <ul> <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 introduktiaf 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 enkeltduelle 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. - 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); 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”); } }); ?> // 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. Designmanual Vores ambition har været at skabe et udtryk, der indikerer fællesskab og sammenhold. Designet skal fremstå simpelt/enkelt for at gøre det så overskueligt som muligt for haveforeningens beboere. 01.Logo 02.Farver 04.Billedstil 05.Layout Eksempler og Inspiration 01. Logo Logoet består af 2 elementer, navn og billede/varemærke. Ingen af elementerne må vises separat, da de hører sammen. Logoet bør til hver en tid i de anvendte medier fremstå lodret. Det er ikke tilladt at rotere logoet. Logoet skal til hver en tid anvendes på en hvid baggrund, eller i en hvid boks. Farvet baggrund eller boks er ikke tilladt! Logo Minimums størrelser: Logoet må minimum have en bredde på 250px. Logoet må minimum være 60 mm Designmanual Logo på baggrund Logoet skal til hver en tid anvendes på en hvid baggrund, eller i en hvid boks. Farvet baggrund eller boks er ikke tilladt! Designmanual Logo på billede Logoet skal på billeder have hvid boks, med opacity. Dette er for at skabe kontrast, så logoet ikke forsvinder i billedet og mister gennemslagskraft. Designmanual 02. Farver Hvid er som udgangspunkt den primære farve i den visuelle identitet. Og de grønne kan bruges til kontrast elementer. Designmanual Designmanual 04. Billedestil Det er vigtigt at når der anvendes billeder at de er autentiske, billederne skal være fra Haveforeningen Frederikshøj. Designmanual 05.Layout eksempler og inspiration Konklusion Vi har taget udgangspunkt I udviklingsmetoden HOME, som består af 4 trin; Foranalyse, undersøgelses trinnet, design trinnet og sidst, realiserings trinnet. Haveforeningen Frederikshøj er et helårs “sommerhus”-beboelses kvarter med beliggenhed I Sydhavnen. Det er et forholdsvis lille område med selvbyggede huse med hver sin charme og historie. Lokalområdet har et fælles forsamlingshus, hvor der er et fælleshus, hvor kontoret også er. Efter vi havde besøgt området samt talt med både beboere og dem som sad på foreningens kontor var vi ikke I tvivl om, at det var dette område vi ville optimere kommunikationen. Udfra vores interessent analyse kan vi konkludere at, vores vigtigeste interessent er foreningens nuværende beboere. Det er dette segment, som er vores primære målgruppe og dem, som hele vores kompagne er bygget op omkring. Vi kan samtidig konkludere, at det vigtigeste I denne kampagne er, at skræddersy en hjemmeside som dækker beboernes behov. Udfra analysen kom vi frem til, at vi ville opretholde beboernes interesse ved at etablere et online forum, hvor der kan skrives indlæg samt uploades billeder. Derudover kom vi frem til, at det ville være nyttigt for beboerne, at de kunne tilmelde sig lokalområdets aktiviteter over nettet istedet for, at skulle møde op på et bestemt tidspunkt I fælleshuset. Samtidig fandt vi også ud af, ud fra vores risikoanalyse, at den største risiko ved projektet var, at bibeholde målgruppens interesse, men vi må konkludere, at det først og fremmest handler om beboernes individuelle holdning til sitet. Mener de, at det er brugbart, så vil interessen helt sikkert holde stik. For bedst muligt, at markedsføre kampagnen og gøre den synlig for vores brede målgruppe har vi valgt at producer forskellige medier. Vi mener, at det er altafgørende for kampagnen, at designe en informativ plakat, som skal hænge ved det fælleshus, som alle kommer forbi, lave en folder omkring event-aftenen og samtidig give hver enkelt beboere sit eget log-in og kodeord til hjemmesiden. Derudover har vi lavet en video til informationsmødet, som viser hvordan man navigere rundt på sitet og hvordan det virker. Konklusion Sidst har vi også designet en app. Appen kan bruges til, at uploade billeder og skrive indlæg. Det gør det mere tilgængeligt for folk, at se indlæg fra telefonen. Vores website er visuelt neutral og æstetisk, uden forstyrrende elemener der kunne tage fokus fra det, som er vigtigt, at få formidlet, nemlig at denne side er 100% nyttig for dig, hvis du er beboere I haveforeningen Frederiksghøj. Vores intention med resultatet af hjemmesiden er, at skulle få beboerne til, at skabe samme fællesskabs følelse online såvel som I virkeligheden. Vi er tilfredse med vores endelige produkt og mener, at vi har fårmået at formidle budskabet korrekt og præcist ud. Der er selvfølgelig plads til forbedringer og fornyelser såfrem det ønsket af foreningen. Litteraturliste Fischer, Louise Harder og Marie Oosterbaan: Digital Media Management. 3. udg. Nyt Teknisk Forlag, 2013. (Bog) 4. Litteratur ApS, 2012. (Bog) http://www.webdeveloper.com/forum/showthread.php?271481Uploading-image-and-storing-it-in-MySQL-Database License URL: http://creativecommons.org/licenses/by/3.0/ (website template) https://www.conzoom.eu/conzoom/Type/G2_Lærkevej.aspx (målgruppe) http://www.tns-gallup.dk/services/gallup-kompas (målgruppe) http://google.com https://www.youtube.com/watch?v=o1h97XYUByo Upbeat Ukulele Background Music - Sunny Side Up By Alumo Mp3: http://www.stafaband.info/download/mp3/lagu_ukulele_happy_ background_music/ Bilag - Moodboard Bilag - Projektplan 1. Sprint Bilag - Projektplan 2. Sprint Bilag - Screendumbs website Bilag - Projektplan
© Copyright 2024