slægtsforskningsforening odense - gruppearbejde af rmmt

Multimedieteknologi og interaktionsdesign Hold 1012—Odense Underviser—Per Rasmussen, 2012

Maja - Rikke - Mikael - Torben

Side 2

M u l t i m e d i e t e k n o l o g i o g i n t e r a k t i o n s d e s i g n

H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Praktisk information

Kontakt til gruppen:

Maja Boesen

[email protected]

Rikke Maria Nielsen

[email protected]

Mikael Olsson

[email protected]

Torben Rasmussen

[email protected]

Link til hjemmesiden:

http://phpkursus.tietgen.dk/1012/maja/wordpress/

Side 3


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Indhold 4 Indledning

4 Problemstillng

4 Afgrænsning

6 Arbejdsmetode

7 Foranalyse

7 Kundemøde

7 Informationsindsamling

8 Projektbeskrivelse

9 Undersøgelse

9 Ideudvikling

10 Kommunikationsplan

11 Afsender

11 Budskab

12 Modtager

13 Projektplan

14 Design

14 Præsentation for kunden

14 Revurdering af planer

15 Informationsdesign

15 Sprog

15 Slogan

16 Overskrifter

16 Brødtekst

17 Præsentationsdesign

18 De 6 designparametre

18 Form

18 Typografi

19 Illustration

20 Farver

21 Animation

22 Lyd

22 Komposition

23 Attention

23 Interest

23 Desire

23 Action

24 Storyboard

26 Interaktionsdesign

27 Flowchart

28 Interaktive elementer

29 Realisering

29 Finpudsning og færdiggørelse af produktionen

29 Præsentation og godkendelse fra kunden

30 Evaluering

31 Teamwork

32 Perspektivering

33 Konklusion

34 Bilag

Side 4


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Indledning

Projektopgaven er lavet på baggrund af et 6-ugers kursus i

Multimedieteknologi og Interaktionsdesign. Opgaven består af to dele;

en hjemmeside og en rapport.

Formålet med projektopgaven er at udvikle en ny hjemmeside for en

kunde. Kunden er Slægtshistorisk Forening Odense.

Afgrænsning

Projektets omfang består i at producere en hjemmeside baseret på

WordPress. Der er lagt vægt på, at kunden skal have en oplevelse af

at se en fuldt funktionsdygtig hjemmeside. Siden skal således opfylde

følgende punkter:

Forside med færdigt layout

Udvalgte eksempelsider, f.eks. kalender, galleri, bestyrelse,

kontaktformular

Fuld menu navigation

Fungerende links

Teori og metode

Problemstilling

Hvordan skaber man en hjemmeside for Slægtshistorisk Forening

Odense, som både kan fastholde de eksisterende brugere, samt

tiltrække nye brugere?

Side 5


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Det første skridt i processen er at vælge, hvilken udviklingsmetode man

vil bruge. Vi har brugt HOME-modellen, som er en åben og

helhedsorienteret metode.

Modellen består af fire trin, som indeholder forskellige aktiviteter i

relation til både proces og produkt, så man let kan organisere arbejdet.

Foranalysen har til formål at fastlægge rammerne om projektet,

kundemøder, informationsindsamling og projektbeskrivelse.

I undersøgelsestrinnet bliver arbejdsteamene etableret og de første

idéer kommer på bordet. En kommunikationsplan, der beskriver

afsender, budskab og målgruppe, bliver udarbejdet. Endvidere bliver

der fastlagt en endelig projektplan og konkrete samarbejdsaftaler.

Designtrinnet er koncentreret omkring opbygningen af produktet. Men

på dette trin foretages der stadig en vurdering, evaluering og følgende

regulering af projektplanen.

På realiseringstrinnet foretager man en endelig vurdering af planerne

og gør produktet færdigt. Til sidst evaluerer man hele projektet.

Side 6


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Arbejdsmetode

I projektplanlægningsfasen var vores udgangspunkt at bruge

vandfaldsmetoden. Vi startede med at definere vores udgangspunkt og

lavede derefter en plan for, hvordan vi skulle realisere den. Vi havde

planlagt en lineær og faseopdelt proces, hvor vi fulgte punkterne i

vores tidsplan.

Undervejs i arbejdet med at skabe hjemmesiden, fik vores

udviklingsmetode dog mere præg af den udforskende udvikling, som

lægger vægt på en afprøvende og brugerstyret udvikling. Dette skyldes

den måde, som WordPress er opbygget på og mulighederne for

individuelle justeringer, som findes i de forskellige temaer. Temaerne

tilbyder forskellige funktioner og de plugins, der kan installeres,

fungerer ikke for alle temaer. Derfor må man prøve sig frem og

konsekvensen er, at slutresultatet kan variere fra udgangspunktet.

En informationsindsamling, som er foregået i undersøgelsesfasen og et

yderligere kundebesøg, mens arbejdet med hjemmesiden var i fuld

gang, understøtter den udforskende udviklingsmetode.

Side 7


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Foranalyse

Kundemøder

Ved første kundemøde forklarede kunden sine ønsker og behov for en

ny hjemmeside. Vi fik defineret afsender, modtager, budskab og mål, så

en kommunikationsplan kunne opstilles i undersøgelsesfasen.

Kunden udleverede materiale fra den gamle hjemmeside. Hensigten

var, at vi kunne bruge materialet til den nye hjemmeside, men det viste

sig at være i uoverskuelige og usorterede mængder. Endvidere viste det

sig, at materialet ikke kunne uploades til skolens webserver for

videredistribution til hele holdet. Derfor blev kunden bedt om at

foretage en sortering og kun uploade udvalgte billeder.

Informationsindsamling

Vi foretog informationsindsamling blandt foreningens medlemmer ved

andet kundemøde, som foregik under et møde i foreningen. Her talte

vi med nogle af foreningens medlemmer for at høre, hvad deres

ønsker til en ny hjemmeside var og hvad de eventuelt mente var godt

ved den gamle hjemmeside. Vi fik desuden feedback på vores første

idéer. Ved at deltage i mødet kunne vi lave observationer på livet i

foreningen og fik et bedre indtryk af medlemmernes kunnen samt

brug af computer og digitale medier.

Side 8


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Projektbeskrivelse

Den nuværende hjemmeside for slægtsforskerne i Odense

www.odenseslaegt.dk er lavet i slutningen af 1990’erne i FrontPage og

er ikke tidssvarende. Der er ca. 300 medlemmer i foreningen, men kun

30 % bruger hjemmesiden.

Kunden ønsker en moderne hjemmeside, der opfylder de nuværende

medlemmers behov og gerne samtidig kan tiltrække nye medlemmer.

De mest brugte sider er siden med møder og foredrag samt siden med

links til eksterne hjemmesider.

Side 9


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Undersøgelse

Idéudvikling

Den nuværende hjemmeside mangler overskuelighed for brugeren.

Der er mange lag og underafsnit, som ikke er blevet inddelt i logiske

og sammenhængende grupper.

Siden vil give meget information, men allerede fra forsiden bliver

brugeren bombarderet med information og mange valg skal træffes.

Den gamle hjemmeside giver et indtryk af, at emnet slægtsforskning

er tørt og kedeligt.

Derfor mente vi, allerede fra vores første brainstorming, at vi ville

give den nye hjemmeside et moderne, let og indbydende udtryk

med flotte billeder og letforståelige emner i hovedmenuen.

Den skal være brugerrelevant, let at navigere rundt på og emnerne i

hovedmenuen skal præcist beskrive, hvilke underemner de

indeholder.

Forsiden skal fange interessen og give brugerne et hurtigt overblik

over de valgmuligheder, de stilles over for.

Som sagt er ønsket, at hjemmesiden ikke kun skal bruges af

slægtsforskningsforeningens nuværende medlemmer, men også

kunne tiltrække nye og måske også yngre medlemmer.

Side 10


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Kommunikationsplan

Der er udarbejdet en kommunikationsplan, hvor der er set nærmere

på hjemmesidens afsender, budskab og modtagere. Dette er gjort for

at skabe et overblik over, hvilken kommunikationssituation vi skal

håndtere og som vi således kan støtte os til i arbejdet med

udviklingen af hjemmesiden.

Side 11


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Afsender

Hjemmesidens afsender er Slægtshistorisk Forening Odense, som har

eksisteret siden 1971. Foreningen er en lokal forening og har et nært

samarbejde, med en anden lokal forening, DIS-Odense, som er en del

af DIS-Danmark. Foreningerne afholder faste workshops i Odense

Kommunes Uddannelsescenter. Disse møder er ofte fælles.

Formålet med foreningen er at give folk, der interesserer sig for

slægtsforskning, et sted, hvor de kan få støtte i deres arbejde med

slægtsforskning. Arbejdet med at søge kilder er meget omfattende og

kræver, at man sætter sig grundigt ind i mange ting, som både

involverer brug at digitale medier og manuelt opslag i gamle arkiver.

Foreningen tilbyder også medlemmerne et vist fællesskab, hvor de kan

være sammen om deres hobby. Foreningen laver også udflugter til

andre lokaliteter, i forbindelse med slægtsforskning.

Budskab

Budskabet for hjemmesiden er at præsentere foreningen visuelt

gennem digitale medier. Forsiden er det første indtryk, der møder

brugeren, når han klikker ind på hjemmesiden. Derfor er der lagt

stor vægt på designet.

Brugeren skal ved første øjekast på siden få et indtryk af, at

afsenderen er en moderne, tidssvarende og dermed interesant

kommunikationspartner, som der er værd at bruge sin tid på.

Sagt med andre ord, budskabet er at få besøgende til at gå videre på

siden og læse om foreningen, aktiviteterne og bruge deres

ressourcer.

Side 12


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Modtagere

Folk der slægtsforsker er ofte pensionister med en gennemsnitsalder

på 60 år for kvinder og 65 år for mænd. Flere kan ikke engelsk, hvilket

gør det nødvendigt, at alt tekst på hjemmesiden er på dansk. Det er

vigtigt at siden er let overskuelig og brugervenligheden er i højsædet,

da gennemsnitsalderen er forholdsvis høj. Der er stadig en stor del

mennesker i denne aldersgruppe, der mangler erfaring i brug af

computer og internettet. Problemer med hjemmesiden må ikke være

en hindring for slægtsforskerne.

Vi har opdelt modtagerne i tre grupper:

De primære modtagere er først og fremmest de af foreningernes

medlemmer, som ikke gør brug af hjemmesiden, på grund af

manglerne brugervenlighed. Hjemmesiden skal fange

opmærksomheden fra de besøgende, få dem ind og læse om

slægtsforskning, blive interesseret i emnet og forhåbentlig blive

medlem af foreningen.

De sekundære modtagere er de foreningsmedlemmer, som bruger

siden i forvejen. De skal have oplevelsen af en hjemmeside, der ikke

kun har fået et nyt design, men også er blevet betydeligt mere

brugerrelevant.

De tertiære modtagere er andre slægtsforskningsforeninger, som kan

henvise deres medlemmer til siden.

Side 13


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Projektplan

Vores projektplan har været dynamisk og åben for ændringer gennem

hele projektet. Første dag lavede vi en optimistisk ugeplan, hvor der

blev indlagt to ’buffer’-dage i tilfælde af, at projektet trak ud (se bilag

1a).

For at kunne styre arbejdsprocessen, blev alle arbejdsopgaver skrevet

op på whiteboard. Det gav et stort overblik over arbejdsforløbet og

skabte motivation i gruppen, når vi kunne sætte hak ud for udførte

opgaver.

Whiteboardet blev også anvendt til at overskueliggøre opgaver, der

viste sig at kræve længere tid end forventet. Hver dag blev startet

med fastlæggelse af, hvad der skulle laves og dagene blev afsluttet

med en opsummering af, hvad vi havde nået.

Det blev indført i en dagbog (se bilag 1b). Hver dag var det

nødvendigt, at der også blev foretaget problemløsninger hver for sig

hjemmefra, da nogle af de planlagte aktiviteter tog længere tid end

forventet. Under arbejdet hjemmefra holdt vi kontakt via mail og

telefon.

Side 14


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Design

Præsentation for kunden

Det tredje kundemøde foregik i vores arbejdslokaler, hvor

kunderepræsentanten så vores første udkast til hjemmesiden samt

skitser, idéer og valg af WordPress-tema. Vi havde en god dialog med

kunden om vores idéer og hans forestillinger til videreudvikling af

hjemmesiden. Herfra kunne vi gå i gang med arbejdet med at realisere

hjemmesiden.

Revurdering af planer

I vores planer for hjemmesiden indgik, at vi ville fjerne breadcrumbs-

stien, da vi mente den var unødvendig og blev til et forstyrrende

element på siden. Men under vores tredje møde med kunden viste

det sig, at disse planer måtte revurderes, da kunden mente det var en

vigtig del og derfor indgav ønske om, at den skulle beholdes.

Side 15


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Informationsdesign

I hjemmesidens informationsdesign har vi lagt vægt på flere forskellige

aspekter:

Sprog

Da en stor del af foreningens medlemmer ikke kan engelsk, var det en

vigtig del af hjemmesidens design, at alle tekster inkl. søgefelt,

kontaktformular, kalender osv. blev oversat fra engelsk til dansk.

Selvom vi havde valgt at installere en dansk version af WordPress, er

de fleste tilgængelige plugins på engelsk.

Denne ændring har vi foretaget i core-koderne ved hjælp af

Notepad++.

Slogan

Da forsiden skal fange de besøgendes opmærksomhed, har vi valgt at

indsætte et slogan - ”Er du i familie med kongen af Bali?” - der med

humor skal vække brugerens interesse.

Sloganet er indsat som ’quote’, der viser, at foreningen taler direkte til

brugeren. Dette er en del af den oprindelige blog-funktion, der er

indbygget i WordPress. Vi synes den fungerer godt til sloganet og har

derfor valgt at beholde den.

For at se forslag til andre slogans se bilag 2.

Side 16


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Overskrifter

For at give kunden et indtryk af hjemmesidens fulde opfang har vi

givet alle sider en sigende overskrift, som samler sidens indhold på en

nem og overskuelig måde.

Det er gjort for at give en umiddelbar forståelse for hjemmesidens

opbygning og navigation.

Et af kundens ønsker var netop, at siden skal være simpel.

Brødtekst

Kundens ønske var at se et forslag på design og struktur til en ny

hjemmeside til foreningen, hvor han selv kunne indsætte tekst.

Men da vi mener, at det er en vigtig del af vores design, at

hjemmesiden fremstår som en færdig side, har vi valgt at

brødteksten er fyldt med Lorem ipsum, for at give kunden en

fornemmelse af indhold.

Side 17


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Vi vægtede de æstetiske og funktionelle parametre højt. Derfor valgte vi

at investere i Elegantthemes, som dermed blev en overvejelse i det

økonomiske parameter.

Præsentationsdesign

I vores overvejelser omkring forholdet mellem æstetik, funktion og

teknik/økonomi, valgte vi at kigge på nogle temaer i Elegantthemes,

som er en udbyder af premium temaer.

Disse temaer har nogle ekstra funktioner, som man ikke får med i de

gratis temaer. Vi fandt et tema, der levede op til de æstetiske krav, vi

havde opsat i foranalysen om en moderne, let og luftig hjemmeside.

Side 18


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

De 6 designparametre

I gennem hele forløbet med udviklingen af hjemmesiden, har

punkterne i ’de 6 designparametre’ fungeret som basis, for de valg vi

har truffet undervejs i vores arbejdsproces. De 6 designparametre er:

Form - Typografi - llustration - Farver - Animation - Lyd

Form

Der er blevet lagt stor vægt på, at vores hjemmeside har et let og

luftigt udtryk og samtidig er let at navigere rundt på for brugeren. Den

generelle opbygning af siderne er, at øverst findes en header, hvor

logoet er placeret til venstre, her under en menulinje med otte emner

inkl. link til forsiden (Hjem) og sitemap, nederst findes footer med

kontaktinformationer og link til Facebook-gruppe. Hjemmesiden har

en fast form med en baggrund, der tilpasser sig skærmens størrelse.

Typografi

Ved valg af skrifttype gennemgik vi alle fonts, der er indlagt i vores

WordPress-tema. Ved hver font lavede vi en afstemning udfra, hvor

læsbar hvert gruppemedlem mente teksten blev og om den passede

til det udtryk, vi ønsker, vores hjemmeside skal have (bilag 3). Vi

valgte, at både head og body skal være i skrifttypen Ubuntu. Vi lagde

vægt på, at skrifttypen er let læselig, uden fødder men med runde

kanter, der bløder den op og giver den mere personlighed i forhold til

fx fonten Droid Sans. Da det er en skrifttype, der følger med temaet

er vi sikret, at den er websikker.

Side 19


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Illustration

Ifølge eye-tracking-modellen er det første en bruger ser på en

hjemmeside øverste venstre hjørne, hvilket er årsag til, at vi har

placeret vores logo netop her.

Logoet har vi valgt at forny. Foreningens gamle logo var meget

detaljeret og utydeligt, vi ønskede derfor at udvikle et nyt og moderne

logo, der var tidsvarende og passede til udtrykket på vores

hjemmeside.

I logoet indgår foreningens navn og en lup. Valget af luppen faldt på

baggrund af, at det skulle symbolisere det foreningen står for, men

samtidig skille sig ud fra det typiske stamtræ, som andre foreninger

bruger og derved skabe et unikt udtryk.

Endvidere har det været muligt at integrere luppen i navnet på

foreningen idet det danner O’et i Odense (se udviklingen af opbyggelse

af logo i bilag 4a og 4b). Luppen står for den undersøgende adfærd.

Ved vores besøg hos foreningen fik vi indblik i det nærmest

detektivagtige arbejde, slægsforskerne udfører for at finde deres aner.

Vi har valgt, at forsiden er domineret af et stort billede (billedserie) i

panoramaformat, der skal skabe blikfang og fastholde brugerens

interesse. Der er tre billeder i billedserien, der repræsenterer og

fungerer som link til særligt interessante undersider på hjemmesiden.

Side 20


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Farver

Body- og footer-tekst var som udgangspunkt i temaets indstillinger lys

grå og kunne være svære at læse. Derfor valgte vi at gøre teksten

mørkere grå.

Den er ikke fuldt sort, for at det ikke er for hård for øjnene at læse.

Farven i header samt i head-teksten er uforandrede i forhold til

temaets indstillinger.

For at synliggøre hvad der er links og bulletpoints, men undgå den

klassiske blå farve til links, valgte vi en mørk rød nuance, der matchede

vores overordnede farvetema.

Til background texture overlay er blev der valgt ’stone’. Den har

struktur uden at være dominerende og valg af farve giver et roligt og

behageligt udtryk.

Side 21


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Animation

Den eneste animation, vi har valgt at bruge på vores hjemmeside, er

billedserien på tre billeder, der skifter i slides på forsiden under

menulinjen.

WordPress-temaet har tre valgmuligheder for fremvisning af billeder i

headeren, statisk billede, billedrotation med visning af tre billeder, og

slideshow.

Vi har valgt at bruge et slideshow, da den giver liv og bevægelse, men

stadig med det rolige og harmoniske udtryk understøttet af valg af

billeder.

Side 22


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Lyd

Vi har valgt ikke at bruge lyd som en del af vores hjemmeside. Det

eneste mulighed for lyd er ’alt-funktionen’, når man hover over

billederne, som synshæmmede kan gøre brug af.

Komposition

Vi har valgt at opbygge vores hjemmeside efter AIDA-modellen, som

er det kommunikationsredskab der er mest anvendt i

reklamebranchen, når man skal fange modtagerens opmærksomhed,

så virksomheden kan få afleveret sit budskab.

Opmærksomhed

Interesse

Lyst og ønske

Handling

Side 23


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Attention

Vi har valgt at placere vores logo øverst i venstre hjørne. Ifølge

eyetracking-modellen er det der, at øjet først falder, når man går ind

på en hjemmeside. Det moderne, men sigende logo med det

integrerede forstørrelsesglas, appellerer til den brede målgruppe.

Interest

Det næste sted blikket falder, er på det store billede nedenunder.

Billederne der er valgt har alle en symbolik til emnet slægtsforskning.

De er visuelt flotte og tiltalende og skal fastholde de besøgendes

interesse. Det humoristiske slogan i kommantarboksen under billedet

er også med til at vække interesse.

Desire

Billederne i headeren har en infoboks, der giver en forsmag på, hvad

man kan læse om på siden. Infoboksen fungerer desuden som et link

til bestemte undersider, som afsenderen mener, at der kan være

særlig interessant. Endvidere er der billeder og tekst i de tre kolonner

under billedet, som fungerer på samme måde.

Action

Det sidste skridt er den aktive handling, hvor den besøgende for lysten

til at se mere, trykker på de aktive links og læser mere om

slægtsforskning.

Side 24


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Storyboard

I vores oprindelige planer omkring hjemmesidens opbygning havde vi

bestemt os for, at headeren skulle indeholde et logo øverst i venstre

hjørne, et søgefelt i højre hjørne og et stort billede nedenunder, der

kunne tiltrække opmærksomhed (se oprindelig idé til storyboard i bilag

5).

Nogle udvalgte sider skulle have tre kolonner. Der var planer om en

left-sidebar, hvor der skulle være en submenu på linkssiden og widgets

på andre sider. Det viste sig, at temaet ikke understøttede en left-

sidebar, men kun en right-sidebar. Endvidere understøttede vores

tema kun én menu.

Der var overvejelser om at finde et nyt tema, der understøttede en left

-sidebar. Der blev dog fundet en løsning med en widget til en submenu

i right-sidebar. Efter mange overvejelser blev det besluttet at beholde

temaet, da vi vægtede æstetikken i temaets design meget højt.

I takt med vi fik opbygget siden og indsat de ønskede elementer, var vi

enige om, at vi havde truffet den rigtige beslutning. Det æstetiske

udryk med placeringen af submenuen i højre side fungerer godt og

virker mere moderne. Endvidere mener vi at placeringen i right-sidebar

øger brugervenligheden. Vores færdige storyboard ser derfor således

ud:

Forside

Søgefelt

Slideshow

Header

Contens Contens Contens

Logo Menuer f

Øvrige

Om os

Side 25


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Galleri

Galleri

Bille

Bille

Bille

Bille

Tekst Tekst

Tekst Tekst

Kontakt

Kontakt os

Kontakt formular

Kalender

Aktiviteter

Kalender Link

Ekste

rne lin

k

Ekste

rne lin

k

Subme

nu

For link siden

Link

Side 26


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Interaktionsdesign

Den nye hjemmeside skal være overskuelig og let at navigere rundt på.

Derfor var det meget vigtigt, at vi lavede en menubar, hvor man kan

nå alle sider uanset, hvor på siden man befinder sig.

Desuden har linksiden en submenu, som er statisk når man bladrer

rundt i links-undersiderne. Samme submenu-funktion findes på

kontaktsiden. Dette er illustreret i vores flowchart (for at se første

flowchart-udkast se bilag 6).

Side 27


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Links

Hjem

Galleri Kontakt Sitemap

Statistik

Vedtægter

Arrangementer

Gravsten

Bygninger

Portrætter

Video

Kontakt os

Bliv medlem

Aktiviteter Om os Kilder

Formål

Historie

Bestyrelsen

Medlemmer

Kirkebøger

Folketælling

Arkiver

Bøger

Efterlysninger

Foreninger

Fynske sider

Kort

Lande — Tyskland

Lande — Øvrige

Ordbøger m.v.

Portaler

Efterlysninger

Foreninger

Fynske sider

Kort

Flowchart

Side 28


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Interaktive elementer

For at imødekomme kundens ønske om, at hjemmesiden også skal

kunne tiltrække nye medlemmer i alle aldre til foreningen, har vi

oprettet en Facebook-gruppe, hvor folk kan blive medlem.

Ligeledes har vi oprettet en Youtube-kanal til upload af video optaget

ved møder, foredrag, udflugter osv.

Det var ikke et specifikt ønske fra kunden, at der skulle oprettes og

tilføjes en Facebook-gruppe eller Youtube-kanal til hjemmesiden, men

det er vores vurdering, at det vil være med til at tiltrække nye

medlemmer især de yngre.

Side 29


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Realisering

Finpudsning og færdiggørelse af produktion

I den sidste fase af projektet blev der lavet en status over, hvor langt

produktionen var kommet og hvilke elementer, der stadig manglede at

blive integrerede. De blev implementeret, hvorefter vi lavede

hjemmesiden færdig, så den var fuldt funktionsdygtig.

Herfra lod vi udenforstående personer teste hjemmesiden for at få

deres uafhængige feedback. Her viste der sig nogle enkelte ting, der

skulle justeres.

Præsentation og godkendelse fra kunden

Den sidste del af projektet består i overdragelsen af hjemmesiden til

kunden. Projektet er blevet afsendt til kunden og vi venter

godkendelse samt accept.

Side 30


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Evaluering

Vi har valgt at lave vores hjemmeside i WordPress frem for at kode

html og css i Notepad++. Dette har haft givet os både muligheder og

begrænsninger i arbejdet med hjemmesiden.

WordPress er et cms-system, som kommer i en færdig udgave med

bestemte indbyggede funktioner, der er forskellige fra tema til tema.

Dette giver mange muligheder i forhold til de interaktive elementer på

en hjemmeside.

Der findes et stort udvalg af forskellige plugins, der giver ekstra

funktioner, som fx interaktiv kalender og brugerdefinerede menuer

(se bilag 7 for fuld liste af installerede plugins).

Derudover har vores valg af et premium tema fra Elegantthemes stor

betydning for kundens mulighed for vedligeholdelse af hjemmesiden

efter overdragelse, idet det indeholder et epanel.

WordPress har dog nogle begrænsninger. Det er bygget op til brug i

blogsites, hvilket mange af funktionerne bærer præg af. De forskellige

temaer har desuden nogle begrænsninger i forhold til mulighederne

for at lave om i de præfabrikerede indstillinger.

Hvis man vil ændre i de indstillinger, som ikke kan tilpasses med

plugins, skal man ændre i core-coderne. Dette kræver et stort

arbejde og forsigtighed, da man kan risikere at ubrugeliggøre hele

WordPress-installationen. Hvis man ændrer i core-coderne er det

meget vigtigt, at man laver en backup.

Desuden er det en god idé at kopiere php-filerne over i Notepad++

og teste ændringerne inden implementering i WordPress.

Derfor er det vigtigt at gøre sig nogle grundige overvejelser om,

hvilke funktioner man ønsker at gøre brug af, inden man vælger

tema.

Side 31


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Teamwork

Fra start var gruppens medlemmer enige om, at vi alle skulle have ’en

finger med’ i alle dele af projektets processer. Dog viste det sig også

hurtigt, at vi med hver vores meget forskellige baggrunde,

uddannelses-, erfarings- personlighedsmæssigt, indgik i gruppen med

forskellige spidskompetencer, hvor vi havde vores stærke og svage

sider og kunne lære af hinanden.

Vores forskelligheder har i stor udstrækning været en styrke, men

vores forskellige personligheder har til tider ført til mindre

frustrationer, fordi vi arbejder meget forskelligt.

Men gruppens åbenhed og ligefremhed har gjort, at opståede

problemer er blevet konfronteret med det samme og er blevet løst.

Alle gruppemedlemmer føler, det har været en sund og lærerig proces,

at der er blevet stillet spørgsmålstegn ved vores roller i gruppen og

forskellige måder at arbejde på.

Derfor kan vi afslutte vores arbejde med en følelse af, ikke blot at være

tilfredse med resultatet af vores hjemmeside, men også selve

projektets forløb.

Side 32


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Perspektivering

Vi har lavet en færdig hjemmeside, der er klar til at kunden kan bruge.

Udgangspunktet har været, at opfylde kundens ønske om en ny og

moderne hjemmeside, der var let at navigere rundt på.

Hjemmesiden er opbygget så kunden kan tilføje nye funktioner og

sider og udvide brugermulighederne i forhold til foreningens måde at

arbejde på.

Vi forestiller os fx, at hjemmesiden kan udbygges med en funktion,

hvor eksempelvis foredragsholdere kan uploade materiale fra afholdte

foredrag, så foreningenes medlemmer efterfølgende kan hente.

Der kunne ligeledes oprettes et forum, hvor medlemmerne kan skabe

en åben dialog omkring problemer og erfaringer med slægtsforskning.

Da vi har set, hvor meget slægtsforskerne benytter sig af andre

slægtsforskningssider, her iblandt mange udenlandske, vil vi anbefale,

at hjemmesiden laves i en engelsk udgave, så udenlandske

slægtsforskere kan bruge siden og ikke mindst deres links.

Side 33


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Konklusion

Vores udgangspunkt var at lave en ny hjemmeside for Slægtshistorisk

Forening Odense, som ønskede en ny og moderne hjemmeside, der

kunne tiltrække opmærksomhed og som var brugerrelevant.

Forsiden er opbygget i henhold til AIDA-modellen og opfylder ønsket

om at tiltrække potentielt nye brugere. Siden er nem at navigere rundt

på og brugeren bliver kun mødt af relevant information.

Derfor mener vi også, at hjemmesiden lever op til kravet om

brugerrelevans. Hjemmesiden er lavet i WordPress, hvilket betyder at

kunden nemt kan ændre i forskellige funktioner, uden at skulle kode

selv. Valget af et premium tema gør,at kunden kan få adgang til ekstra

services, som ikke følger med de gratis temaer.

Konklusionen er hermed, at vi har lavet en hjemmeside, der opfylder

kundens umiddelbare ønsker og samtidig giver mulighed for at udvide

brugerfunktionerne i fremtiden, som nemt kan klares af kunden selv.

Side 34


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Bilag

Indhold

35 Bilag 1a: Oprindelig tidsplan

36 Bilag 1b: Dagbog

39 Bilag 2: Slogans

40 Bilag 3: Afstemning om fonttype

41 Bilag 4a: Logo, 1. fase

42 Bilag 4b: Logo, 2. fase

43 Bilag 5: Storyboard

44 Bilag 6: Første udkast af flowchart

45 Bilag 7: Plugins

Side 36


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Bilag 1b

Mandag d. 9. april 2012 Afgjort sitets struktur/skelet.

Diskussion af indhold og placering af menu-bar med undersites

Lavet tidsplan for ugen med planlægning af tidsforbrug dag for dag

Tid brugt i dag:

2 timer på site-struktur

30 minutter af widgets

1,5 time på tema

30 minutter skrivning af dagbog

Planlægning af hvad vi skal nå tirsdag foruden kundebesøg og eksamensgennemgang

Installation af WordPress

Installation af tema

Site struktur

Evt. farver og banner

Arbejdet fra kl. 10.00-16.00

Tirsdag d. 10. apri l 2012 Besøg hos foreningens, til slægtsforsknings café

Rundspørge blandt medlemmerne vedrørende deres syn på ondenseslaegt.dk,

samt deres evt. ønsker til funktioner og design på det nye site.

Download, upload og installation af WordPress

Download og installation af valgte tema

Opdatering af plugins

Opbygning af sidestruktur

Tilføjelse af ønskede sider

Tilføjelse af menu

Tilføjelse og inddeling af undersider

Installation af widget til en submenu i leftsidebar

Dette punkt skabte problemer. Først en konstatering af at denne widget ikke

virkede med valgte tema.

Problemløsning. Forsøg på at lave submenu ved hjælp af ’tabbed content’. Efter

nogle overvejelser omkring omfanget af arbejdet med at tilføje en tab til

alle undersider, tog vi en beslutning om at droppe tabben. For omfangsrigt,

samt ikke funktionelt, da den ikke fungere som link mellem siderne.

Herefter en overvejelser om at finde en anden widget til submenu. Vi kiggede

nærmere på temaet og konstaterede at det ikke understøtter en left

sidebar og sandsynligvis heller ikke en submenu.

Beslutning taget om at finde et nyt tema, som understøtter leftsidebar og submenu.

Tid brugt i dag:

1 time på besøg

30 min på download og installation af WP og tema

45 min på tilføjelse af sider og oprettelse af menu

45 min på undersider

1 time og 30 min på problemet med submenu i left sidebar

Planlægning for onsdag afløst af en beslutning om at søge efter et nyt tema foretages

hjemme fra, så der kan vælges nyt tema hurtigst muligt. Derefter må gøres status for

hvad der skal laves resten af dagen.


Side 37


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Bilag 1b - fortsat

Onsdag d. 11. april 2012 Kundemøde. Kunde umiddelbart tilfreds med vores forslag

Problem fra i går løst (submenu i sidebar, egnet widget fundet)

Lavet oversigt over delmål vi skal nå før projektet er færdig

Installeret sidebar-menu widget for at skabe overskuelig navigation

i ”Links”-hovedmenu

Lavet kontaktformular (skal dog ændres til dansk)

Dannet galleri

Lavet eksemplarer på linksundersider

Afprøvet forskellige plugins og widgets

Generel god problemløsning i dag

Skabt en Youtube-kanal til upload af videoer

Installeret plugin til Youtube (Artiss Youtube Embed)

Installeret breadcrumb-plugin til at lette navigation efter ønske fra

kunde. Pluginet giver mulighed for at Home kan hedde Hjem

(Breadcrumb NavXT)

Skal laves de kommende dage:

Eksempel på bestyrelsesside(r)

Aml. Tekst + billede

Kalender

Forside

Løse ender:

Home-sti (skal væk)

Ændr til dansk

Home (hvis den ikke bliver fjernet)

Kontaktformular

(I kontaktformular) Captcha


Torsdag d. 12. april 2012 Arbejde med bestyrelsessiden. For at finde en fremvisningsmåde af

bestyrelsesmedlemmerne. Vi kiggede på forskellige plugins til at

håndtere fremvisningen, men det viste sig ikke egnede, da de mest

henvendte sig til blogs. Vi endte at bruge biobox

Fyldte tomme sider med 1-2 billeder samt Lorem Ipsum-tekst

Satte links på alle links sider, så der er noget på alle sider man navigerer

rundt til

Kontaktformularen blev ændret til dansk. Vi måtte ændre i core-koderne for

at ændre fra engelsk til dansk. Captcha blev også ændret til dansk

Oprettede gruppe på Facebook (Slægtsforskningsvennerne), som

slægtsforskerne kan blive medlem af og som vi kan linke til på vores

hjemmeside

Lavet sitemap

Formede forsiden (Hjem) som vi gerne vil have den til at se ud mht. indhold. I

de tre kolonner findes nu links til ’Om os’, ’Formål’ og ’Historie’

Løse ender:

Ændres til dansk i galleri:

Show as slideshow

Show picture list

Ændres til dansk i kontaktformular:

Submit og reset


Side 38


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Bilag 1b - fortsat

Fredag d. 13. april 2012 Indsat favicon

Lavet footer med adresseoplysninger

Facebooklink til gruppe indsat i footer

Farve på body tekst er ændret i css stylesheet (9c9c9c)

Valgt farve og struktur til background texture (stone og c6bea6)

Valgt skrifttype til både head og body (Ubuntu). Farve til body er

4a4a4a. Vi har valgt en let læselig skrifttype, der dog ikke er

for kold og kedelig

Skabt logo vi er helt vilde med - alle sammen!

Ændret billeder på de tre sider, der vises på forsiden


Lørdag d. 14. april 2012 Linksfarve ændret i css stylesheet

Opsætning af layout til rapport

Rapportskrivning

Endeligt flowchart

Redigering og finpudsning

Evaluering


Søndag d. 15. april 2012 Færdiggørelse af rapport


Generelt: Hver dag, efter gruppens mødetidspunkt, har vi foretaget

problemløsninger hver for sig, når vi er kommet hjem.

Side 45


H o l d 1 0 1 2 — O d e n s e , © 2 0 1 2

Bilag 7

WordPress Database Backup gør det lettere at lave in back-up af

sin WP-installation. Kan sættes til at lave automatisk back-up,

dagligt, ugeligt etc.

Display Widgets giver mulighed for at lave flere forskellige

submenuer, selv når det valgte tema kun understøtter én menu.

Kan også styre på hvilke sider menuen skal vises. Derfor muligt

at forskellige sider har en individuel menu i samme sidebar.

NextGEN All-inOne Gallery blev installeret da det er mere

brugervenligt end det indbyggede WP-Gallery. Fremvisningen af

billedeserierne kan arrangeres i forskellige fotoalbums.

Med Breadcrumb Nav-XT kan man ændre teksten i breadcrumb

til dansk uden at ændre i core-koderne.

Artiss YouTube Embed gør at brugerne nemt kan linke til en

video på YouTube

WordPress Facebook Like Plugin er installeret på siden, så

budskabet og aktiver om siden kan blive spredt på Facebook.

Fix Facebook Like er der for at undgå fejlmeldinger når man

trykker på ’like’ knappen

Med WP Realtime Sitemap kan man lave en mere overskuelig

plan over siden, så brugerne bedre kan danne sig et overblik

slægtsforskningsforening odense - gruppearbejde af rmmt

Documents