NØDEBO KRO. Web site-projekt. Lavet af: Anders Hanberg Sara Vang Michael Dalgaard Stefan Skjerning

Transkript

1 Forsamlingshuset NØDEBO KRO Web site-projekt Lavet af: Anders Hanberg Sara Vang Michael Dalgaard Stefan Skjerning 4/ tr08mul01

2 Forsamlingshuset NØDEBO KRO Indholdsfortegnelse Indledning...3 Problemformulering...4 Analyse Kommunikationsmodel Brugeranalyse Designbrief...15 Designvalg Funktionalitet og informationsarkitektur Use case Navigationsdiagram Brugertest Procesbeskrivelse og -evaluering...24 Appendiks: Tidsplan... bilag 1 Statistik fra det gamle web site... bilag 2 HTML- og CSS-kode... bilag 3

3 Side 3 Indledning Vi har valgt at lave et projekt med udgangspunkt i Forsamlingshuset Nødebo kro, hvor vores formål er at producere et web site for kroen. Vi har som et vigtigt led udarbejdet en analyse af kroens værdier, som primært er blevet lagt fast ud fra et besøg på Nødebo Kro og et interview med kroens driftskoordinator, Jens Lassen. Ud fra værdierne har vi kunnet analysere os frem til typen af indhold og design, vi vil have, at Nødebo Kros web site skal præsentere. Det er dermed vores mål at lave et web site, der afspejler og kendetegner kroen. Relevante facts vedr. opgaven om Forsamlingshuset Nødebo Kro Forsamlingshuset Nødebo kro er et forsamlingshus for en række aktiviteter og foreninger, hvor man kan melde sig ind og komme så tit man lyster. Ydermere fungerer kroen som et udlejningssted, hvor man kan leje lokaler til arrangementer som bryllupper, fødselsdage, konfirmationer eller andet. Der er eksempelvis mulighed for at lave mad sammen, deltage i et stort udbud af arrangementer eller foreninger, eller bare hygge sig. Dermed er navnet Kro en smule misvisende, da stedet ikke fungerer som en kro i normal forstand. Ejerne har dog valgt at beholde navnet fra gammel tid, hvor den fungerede som kro. (Vi har i denne rapport valgt kun at bruge benævnelsen Nødebo Kro - eller bare kro - i stedet for det fulde navn, Forsamlingshuset Nødebo Kro.)

4 Side 4 Problemformulering Hvordan udarbejder vi et web site for Nødebo Kro, som gør den mere attraktiv at besøge? Og samtidig mere funktionel at bruge? Hvordan finder vi målgruppen for Nødebo Kro. Hvordan får vi skabt et web site der afspejler Nødebo kro og henvender sig til målgruppen, hvor den ønskede kommunikation mellem afsender og modtager udgiver sig bedst muligt. Hvordan viser vi, hvad kroen kan tilbyde af aktiviteter mv. på en måde, så besøgende får interesse for netop denne kros produkt? Hvordan opnår vi en struktur, som er forståelig og let at navigere i? Hvordan vil vi lave vores design brief, så vi får lagt et fundament for vores design og hvilke begrundelser har vi for vores valg af design??

5 Side 5 Analyse Målguppe og værdier Som ansvarlig for Forsamlingshuset Nødebo Kros web site, som vi har valgt at redesigne, har vi gjort os overvejelser om, hvad web sitet skal indeholde og signalere. Vi har derfor foretaget en analyse af brugerne af det oprindelige web site baseret på statistikker, besøg og en undersøgelse af kroen, med hvad det indebar af spørgsmål, vi ville have svar på. Efter dette står vi tilbage med en klar indikation af, at brugere af Nødebo Kros web site, også i fremtiden, primært er voksne og pensionister eller dem, der i forvejen kender til området, har vi valgt at gøre de tilbud, som denne målgruppe er mest interesseret i, mest tydelig. Designmæssigt skal web sitet udstråle værdier, som kendetegner kroen. Det være sig farve, udformning og kroens særpræg. Derudover har kroens særpræg, der går igen på web sitet, den effekt, at de besøgende vil huske kroen bedre - især efter at have besøgt kroen og vendt tilbage til web sitet.

6 Side 6 Analyse Formål og baggrund Formålet med web sitet er at skabe opmærksomhed omkring kroen, så flere vil benyttet den og oprette sig som medlem. Der er her tale om at promovere medlemmer, at udleje lokaler og på denne måde opnå et solidt økonomisk fundament, til gavn for såvel dens ejere samt medlemmer. Vi studerer her er en slags restaurations og hotelvirksomhed, der kører som forening. Den benytter timeshare, hvor medlemskabet årlige gebyr giver fortrinsrettigheder til leje af lokaler på bestemte tider af året. Budskab Budskabet er det, som web sitet udstråler. Budskabet for sitet kan sammenfattes til, at det for kroen er vigtigt at signalere hygge, samvær og aktiviteter under en rolig og stemningsfuldt atmosfære. For især dem, der gennem web sitet lejer sig ind, skal web sitets budskab om en hyggelig og dejlig kro også gå igen i det virkelige produkt, så kroens visuelle budskab virker troværdigt.

7 Side 7 Kommunikationsmodel Faktisk afsender (afsenders intention) Afsenderen er selve Nødebo Kro og dens ejere, idet det er herfra Nødebo Kros værdier og hensigt udspringer. Det, denne afsender vil fortælle den besøgende på kroens web site, er basale informationer om kroens (i prioriteret rækkefølge) - arrangementer - medlemsmuligheder - udlejningsmuligheder - priser - historie - kontaktoplysninger På længere sigt er det også hensigten at gøre besøgende til brugere af web sitet og kroen ved at give dem interesse for tilbudene. Implicit afsender (gennem produktet) Den gule farve, som pryder selve Nødebo Kro, indgår også i bestemte elementer på web sitet. Et særpræg ved kroen er lysstjernerne i et af lokalerne, hvilket ved brug på web sitet vil give et autentisk udtryk. Designet skal udtrykke fest/glad stemning, udtrykke professionalisme og seriøsitet. Produkt Æstetisk funktion: Stilrent design, hyggestemning og grafiske elementer, der refererer til karakteristiske steder på kroen, kendetegner produktet. Dertil indgår billeder fra kroens forskellige arrangementer i galleriet og bannerne.

8 Side 8 Kommunikationsmodel Implicit modtager (gennem produktet) Nødebo Kros implicitte modtager er vores tiltænkte modtager, dvs. dem der oplever web sitets produkt, som det fremstår rent visuelt på web sitet. Vores primære målgruppe er familier og pensionister, da Nødebo Kro tilbyder udlejning af lokaler og afholder arrangementer, der henvender sig til denne gruppe. Den konative funktion og interaktive funktioner Nødebo kros web site appellerer primært til modtageren gennem pathos, da vi ønsker at ramme modtageren på deres følelser og stemningen. Sekundært appellerer vi til modtageren gennem ethos, da vi ønsker at virke troværdige og tillidsvækkende. Grundlæggende kan det siges, at kroen kun benytter sig af to kommunikationsformer; konversation og transmission. Transmissionen er den gennemgående informationsform sitet igennem. Den bliver brugt til at beskrive kroens virke, arrangementer og priser, hvilke tilbud der tilbydes, kroens fysiske placering, historie om kroen osv. Den eneste anden information-form, der findes på sitet, er konversation i form af deres kontaktoplysninger som og tlf. nummer. Her er der tale om gensidig interaktion. Faktisk modtager (ubestemt modtager) Den faktiske modtager er de personer, der oplever vores site. Her er det vigtigt, at distributionen af sitets formål er klart og tydelig samt attraktiv for interesserede. De skal tydelig kunne se kvaliteten af produktet, og hvad vi tilbyder. Fornemmelsen af det æstetiske aspekt skal ved hjælp af billeder, farvesammensætning mv. få de observerende til at danne sig et uusigeligt billede af kroens æstetik og dens smukke omgivelser. Kognitivt skal kroen med dens priser og dens muligheder appellere til interesserede - og besøgende der bare er inde for at kigge - på en sådan måde, at de husker kroen.

9 Side 9 Kommunikationsmodel Kontekst Referentielle funktion: Sammenhæng mellem billeder og tekst. Søgefunktion der gør det muligt at finde de ønskede oplysninger. Symboler og ikoner skal stilles op, så der er en klar reference til den tilknyttede tekst. Intertekstuelle funktion: Reference til kort over området, naturen, tidligere ejere (historie). Medie Fatiske funktion: Det, der også gør, at vi som afsendere kan opnå en kontakt og vedligeholde kommunikationen med vores modtagere, er at vi gennem mediet fastholder en visuel rød tråd. Det vil sige, at vores valgte tema går igen i alle web sitets elementer (menupunkter, farvevalg, grafikelementer) Navigative funktion: Navigationen på web sitet er mest baseret på navigation mellem web sitet interne sider. Ved aktivering af et link åbnes indholdet i indholdsvinduet, mens linkene forbliver uændret, så man kan fastholde overblikket. Selve linkstrukturen er baseret på en gitterstruktur, så man ikke mister overblikket over kroens tilbud. Konklusion på kommunikationsmodellen Den ovenstående kommunikationsmodel er udarbejdet med det formål at holde struktur og at skabe et klart overblik i kommunikationen mellem afsender og modtager i mediet. Det er altså her meningen at modellen skal fungere som grundsten for web sitet, og danne udgangspunktet for kommunikationen.

10 Side 10 Brugeranalyse Analysen af Nødebo Kros brugere er baseret på statestik fra den oprindelige web site, som vi kan takke dennes webmaster for at have givet os adgang til. (Statistikken findes som bilag.) Nedenstående fakta og konklusioner er frembragt ud fra en analyse baseret på forskellige statistikker fra oktober 2008 omkring brugere af Nødebo Kros web site. Antal besøgende og hyppighed Det daglige gennemsnitlige antal besøgende på Nødebo Kros web site i oktober 2008 er 57. Mens der ikke tegner sig et klart billede af, hvilken periode i måneden, der er flest besøgende, er antallet af besøgende i forhold til de forrige år stigende. Hyppigheden af antal besøgende i alle døgnets timer fordeler sig med flest besøgende til formiddagstimerne og timerne over frokost. Men nattens timer kaster dog heller ikke helt få besøgende af sig. Selv om disse timer stadig er dårligst repræsenteret, har kun dobbelt så mange valgt at besøge web sitet i aftentimerne! Konklusion: Med over 50 besøgende om dagen er Nødebo Kros web site fint besøgt, også selv om medlemmerne af Nødebo Kro sikkert tegner sig for en god del af de besøgende. At antallet af besøgende er stigende i forhold til tidligere år kan selvfølgelig betyde, at kroen er blevet mere populær og/eller er blevet markedsført bedre. Det kan dog også betyde, at flere og flere får Internet og dermed får bedre mulighed for at besøge web sitet. Her styrkes vores forestilling om, at det også er ældre, der bruger kroen og web sitet, da det højst sandsynligt er i den aldersgruppe, fremgangen i brugen af Internettet i disse år er størst. Når formiddags- og middagstimerne bliver favoriseret blandt de

11 Side 11 Brugeranalyse besøgende, vil den mest nærliggende konklusion være, at disse besøgende er pensionister tilknyttet Nødebo Kro, fordi de modsat andre aldersgrupper har tid til at besøge web sitet i det tidsrum. En pensionist, som ikke kender til kroen, vil normalt ikke finde på at søge efter nogle tilbud fra Nødebo Kro eller andre kroer. Det kan være svært at forklare, hvorfor der trods alt er så mange besøgende om natten, da natteravnene typisk ikke hører til blandt den primære aldersgruppe, der besøger web sitet. En forklaring kan evt. findes i en anden statistik, der fortæller os, at der også er besøgende fra andre lande (med andre tidszoner, især USA), som dermed kan spille en stor rolle i registreringen af besøgende i nattetimerne (dansk tid). Besøgende på de forskellige sider Hovedsiden er mest besøgt, skarp forfulgt af Kalender og arrangementer med hhv. 10,3 og 8 % af de besøgende på alle sider. Herefter følger Udlejningsoversigt af selskabslokaler samt andre sider med praktisk information om selskabslokaler og udlejning med kun nogle få procent. Under 1 procent benytter sig af informationssiderne Historie, Generelle oplysninger og Banko. Konklusion: Denne statistik er blandt de vigtigste statistikker, fordi vi her kan konstatere, at rigtig mange af de besøgende klikker sig videre til undersiden om kroens arrangementer. Knap så interessant blandt web sitets besøgende er informationer om udlejning og almindelige oplysninger, hvilket kan betyde, at en del af de besøgende har et godt kendskab til kroen i forvejen og mest er interesseret i at vide, hvad der er på programmet den kommende tid. Mange af disse kunne sagtens være medlemmer af kroen.

12 Side 12 Brugeranalyse Operativsystemer, browser og søgemaskiner I brugen af operativsystemer hos web sitets besøgende er Windows klart det mest foretrukne. Heraf er Windows 98 og Windows 2000 og især Windows NT også repræsenteret. Forsvindende få benytter sig af Mac og Linux. Bemærkelsesværdigt er det også, at der slet ikke er nogen af de besøgende, der benytter sig af den nyeste version af Windows, Windows Vista. Lige så populær Windows er hos brugerne af Nødebo Kros web site, lige så populær er browseren Internet Explorer og søgemaskinen Google. Internet Explorer 6 er repræsenteret med godt 23 %. At Firefox popularitet landet over er steget betydeligt de senere år, afspejles ikke blandt brugerne af Nødebo Kros web site. Konklusion: Vi har gjort os nogle tilnærmelser omkring web sitets besøgende, og her gives ny næring til indikationen af, at de fleste besøgende er blandt den voksne eller ældre generation. Det er typisk den aldersgruppe, der trækker brugen af standard-programmer op og ikke kaster sig ud i et nyt styresystem og browser som Vista og Firefox. Da nogle af web sitets brugere lidt overraskende gør brug af ældre versioner af Windows (98, 2000 og NT) samt den efterhånden lidt forældede browser Internet Explorer 6, må det også give en indikation af, at der pga. manglende interesse/viden for nye programmer er ældre og/eller konservativtmindede personer blandt de besøgende. Ord, folk har søgt på for at finde web sitet Et klart billede tegner sig i de ord, folk vælger at søge på for at finde frem til Nødebo Kros web site. Langt størstedelen benytter sig af ordkonstellationer, hvor Nødebo indgår. Vi skal ned omkring eller under 1 % af alle søgninger for at finde ord som selskabslokale eller kirke og kro, som er navnet på det lokale tidsskrift.

13 Side 13 Brugeranalyse Konklusion: Når langt størstedelen af søgningerne indeholder ordet Nødebo, giver det et klart signal om, at Nødebo Kro i forvejen er en del af de flestes bevidsthed, inden de søger. I dette tilfælde underbygger det påstanden om, at mange af web sitets besøgende er vante brugere af kroen eller tilmed medlemmer af kroen. De besøgendes nationaliteter Størstedelen af de besøgende er fra Danmark. Alligevel er knap 13 % af de besøgende ikke fra Danmark, hvoraf ca. 3,5 % er fra USA. Denne statistik er baseret på besøgende på samtlige sider. Ser man på unikke besøgende er antallet af besøgende fra USA langt mere dominerende med næsten lige så mange besøgende som besøgende fra Danmark og mere end 36 % af samtlige unikke besøgende. Det er tilsyneladende ikke en fejl, da billedet ikke ændrer sig væsentligt i statistikker fra andre måneder. (I juli 2008 var der rent faktisk næsten dobbelt så mange unikke amerikanske besøgende som danske.) Konklusion: Det er ikke overraskende, at der er flest danskere, der besøger siderne på kroens web site. Men det er nok ikke helt så stor en part som forventet. At så mange andre nationer tilsammen tager så relativ stor en bid af kagen kan måske tilskrives de bekendte af Nødebo Kro, som kan have en interesse i også at følge med i livet omkring kroen, mens de er ude og rejse. En helt anden grund må nok findes, når man kan konstatere, at der er næsten lige så mange unikke besøgende fra USA som fra Danmark og over 1/3 af de unikke besøgende er amerikanske. Ud fra oplysningerne om hhv. amerikanske besøg på samtlige sider og unikke amerikanske besøg kan vi konstatere, at amerikanerne ikke klikker sig videre til ret mange sider og derfor ikke kan være ret interesseret i web sitet. Ifølge Nødebo Kros driftskoordinator, Jens Lassen, er langt de fleste brugere af kroen dog lokale eller bekendt med kroen, ligesom udefrakommende ikke kan være interesserede i at få informationer om overnatning på

14 Side 14 Brugeranalyse kroen, da det ikke bliver tilbudt. En af de eneste tilbageværende forklaringer må derfor være, at der på nogle amerikanske web sites af en eller anden mærkelig grund henvises til Nødebo Kro. At der skulle være ord på web sitet, som indgår i noget af det, amerikanere indimellem søger på, kan vi udelukke på baggrund af statistikken om ord, folk har søgt på. Samlet konklusion på brugeranalysen: Interesse: Web sitet er fint besøgt, selv om mange af de besøgende muligvis er medlemmer af kroen. Der er flest danskere blandt de besøgende, mens besøgende fra andre europæiske lande dog ikke er langt fra at repræsentere hver tiende besøgende. Alt tyder på, at de danske besøgende - og også mange af de øvrige europæiske besøgende (pga. udgangspunkt i besøg pr. unikke besøgende) - har en eller anden form for interesse eller kendskab til kroen eller området i forvejen. Der er registreret mange unikke besøgende fra USA, men disse kan ikke have nogen særlig stor interesse for Nødebo Kro, da størstedelen af dem ikke har besøgt særlig mange undersider. Mange af de besøgende klikker sig videre til Kalender og arrangementer, mens få er interesserede i informationer om udleje, historie og generelle oplysninger. En stor del af de besøgende kan derfor være medlemmer af kroen eller på anden måde have et forhold til kroen, da fremtidige arrangementer har deres interesse. Folks søgninger for at finde frem til Nødebo Kros web site afslører, at rigtig mange må være bekendt med web sitet eller i det mindste området i forvejen pga. det hyppigt forekomne søgeord Nødebo. Aldersgruppe: Mulige grunde til at Nødebo Kros web site primært må være besøgt af: Voksne - Brug af standard-browser og -styresystem Pensionister - Besøgende i formiddags- og middagstimerne forekommer med relativ stor hyppighed i forhold til andre tidspunkter på dagen. - Brug af standard-browser og -styresystem og især ældre udgaver. - Fremgang i brugen af Internet de senere år

15 Side 15 Design brief Man skal kunne se lige fra starten, at siden repræsenterer et forsamlingshus og samtidig tilbyder udlejningslokaler. Siden skal udtrykke en vis organisation, og man skal få følelsen af, at der er styr på tingene. Der skal vækkes følelser, der leder tankerne hen på fest, hygge og familiesamvær. Man skal hurtigt kunne få overblik over kontakt til udlejer. Der skal være en nem og overskuelig måde at se billeder på. Det skal være nemt at finde ud af hvilke arrangementer, der bliver afholdt. Sidens design skal passe til målgruppen, som vi har defineret i brugeranalysen.

16 Side 16 Designvalg Typografi Vi har valgt at bruge Verdana på Nødebo Kros web site, da der er en række æstetiske og praktiske grunde hertil. Verdana er kendetegnet ved den gode læsbarhed på skærmen. Blandet andet pga. den gode afstand mellem ordene, dens struktur og form som er meget enkel. Verdana findes på alle nyere pc er, Mac-computere m.m. Skrifttypeoversigt, Verdana: Abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Farver De gennemgående farver er: Gul: RGB 247,216,122 Farven på kroen er gul. Farven gul har kroen bibeholdt siden den blev bygget. Den gule farve på kroen er blevet kroens varemærke for de lokale i Nødebo og omegn. Derfor har vi valgt at holde denne farve som et gennemgående tema på web sitet. Gul kan symbolisere evigheden og forklarelsen, herlighed og hellighed. Brun: RGB 161,133,109 Brun er en jordbundet farve, som er afslappet, naturlig og afdæmpet. Den skal symbolisere ro og hygge. Brun og gul smelter godt sammen og udgør teamet og kendetegnet for web sitet. Sammen har de en god dynamik, læsemæssigt og æstetisk. Kontrasten mellem dem fremkommer meget naturligt og behageligt.

17 Side 17 Logo Vi har sammensat et logo, der samler de æstetiske og farvemæssige kvaliteter, Nødebo Kro står for. Mens skriften Forsamlingshuset er skrevet med en skrifttype, som minder meget om skrifttypen på Nødebo Kro, er skriften Nødebo Kro skrevet med en skrifttype, der med sin karakteristiske runde pencilform både refererer til en æstetisk og hyggelig stemning. Den gule og brune temafarve deler teksten op på en blød og rund måde, der igen refererer til en afslappet stemning og samtidig forbinder udtrykket i brugen af den på web sitet brugte kunst og elegante runde stil. Da logoet kun benyttes på web sitet, er den brune logofarve integreret i web sitets farve. Billeder Vi har udvalgt en række billeder fra kroen, som vi enten selv har taget, eller som er blevet taget under det daglige trummerum og ved festlige lejligheder. Heraf kan nævnes den unikke værkstøjsudstilling, lyspanoramaet i festsalen og kroen set ude fra med den tydelige gule farve. Vi har valgt billeder fra kroen, der er flotte og autentisk funktionelle. Billedernes formål er dermed at få skabt et stemningsfuldt og æstetisk billede af kroen og dens hyggelige omgivelser, som er med til at give det hele et præg af genkendelighed. Ved de mest populære og relevante undersider har vi valgt at udskifte banneret med et, der er lavet til den pågældende underside. Da billederne på disse bannere er nøje udvalgt, får den besøgende også her en oplevelse af de virkelige produkt, som de senere (forhåbentlig) kan referere til.

18 Side 18 Funktionalitet og informationsarkitektur Interface-design Web sitet skal fungere som et informationssite, hvor informationerne for brugeren er let tilgængelige. Informationsarkitekturen er bygget op på en sådan måde, at kontaktoplysninger altid er ved hånden. Samtidig er afsenderens intentioner angående budskabet (jf. kommunikations-modellen), tydeligt afstemt, så det klart fremgår af web sitet. Med hensyn til den funktionelle stil på sitet er der blevet lagt vægt på, at den skal være klar, forståelig og nem at finde rundt i. At indsamle oplysninger om priser, arrangementer og udlejningsmuligheder mv. under menuen er ligetil. Hierarkistruktur Hvis man har store mængder af information, er opbygning i hierarkistrukturer at foretrække ifølge Thorlacius. Denne type struktur er nem at navigere i uden at fare vild, idet den kan deles op i forskellige kategorier. For brugernes skyld er det vigtigt at systematisere sit materiale og her har vi valgt hierarkistruktur (jf. navigationsdiagrammet).

19 Side 19 Usecase Use case for forsamlingshuset Nødebo Kro Updater web site Opret arrangement Admistrator Vis priser og tilbud Vis udlejningsmuligheder Vis medlemsmuligheder Bruger Vis information om historie Vis galleri Kontakt administrator Søg

20 Side 20 Navigationsdiagram for forsamlingshuset Nødebo Kro Forside Forside Galleri Medlemskab Udlejning Historie Kalender Kontakt Øverige Bridgeklub Arrangementer Lokaleoversigt Lokaler Musik Højtider Foredrag Loppemarket Afspændingsundervisning Spiseklub Nimbusklubben Modeljernbaneklubben Billardhold Billardklubben Petanqueturnering Vævergruppen Banko Byvandring

21 Side 21 Brugertest For at se om vores udviklede web site for Nødebo Kro er til at finde rundt i for en udefrakommende, har vi udpeget en tilfældig, der ikke har kendskab til web sitet i forvejen. Den udpegede testperson, Mandana, har fået stillet en række spørgsmål, der dækker behovet for den information, en almindelig bruger har behov for at få. Udover udspørgeren har vi i gruppen haft en person til at fremsige Mandanas adfærd og fremgangsmåde i forsøget på at finde svaret på det pågældende spørgsmål, samt en person til at notere. Spørgsmålene herunder er opdelt i emner, der er dækkende for indholdet på web sitet. De i svarene nedskrevne stikord fortæller, hvor Mandana har ledt henne for at finde frem til svaret. Spørgsmål og svar Generelle spørgsmål Spørgsmål: Hvad sker der en 24. december kl. 18 på nødebo kro.? Svar: Kalender, december, 24. Spørgsmål: Hvilken farve har lamperne i nødebos køkken? Svar: Medlemskab, galleri, kigger på billeder i galleriet, bladrer frem og tilbage og finder billede af køkkenet. Spørgsmål: Hvordan og hvornår kan man kontakte nødebo kro? Svar: Kontakt Spørgsmål: Kan man købe mad på kroen? Svar: Forside, kigger alle linkene i menuen igennem, kan ikke finde oplysninger

22 Side 22 Brugertest Lejer-spørgsmål Spørgsmål: Hvor ligger Nødebo Kro? Svar: Kontakt, adresse, kort Spørgsmål: Hvilke lokaler er der? Svar: Kigger menuen igennem, finder udlejning, lokale Spørgsmål: Hvad er priserne? Svar: Udlejning, medlemskab, arrangementer, udlejning, priser Spørgsmål: Hvilke faciliteter er med? Rum, borde, klaver? Svar: Udlejning, Lejebetingelser, udlejning, lokaler, Spørgsmål: Kan jeg se nogle billeder derfra? Svar: Galleri, arrangementer, udlejning, lokaler, banner, Udlejning, lokaleoversigt Medlems-spørgsmål Spørgsmål: Hvor kan jeg se arrangementer for medlemmer? Svar: Kigger menuen igennem, kalender, menuen, medlemmer Spørgsmål: Hvornår foregår Bridge? Svar: Arrangementer, Kalender, Medlem, Bridge Spørgsmål: Er der nogen fordel ved at være medlem, når man skal leje Hestelængen. Svar: Udlejning, Lokaleoversigt, Lokaler, Hestelængen

23 Side 23 Brugertest Konklusion på brugertest Vores testperson, Mandana, har efterfølgende kommet med ris og ros, hvilket vi har konkluderet på. Ris Mandana, der selv pointerede, at hun ikke er rigtig dansker, mente, at det var svært at finde rundt første gang, hvilket vi også kunne konstatere ud fra de gange, hun ikke ledte de helt rigtige steder. Derudover syntes hun, at web sitets firkantede ramme er lidt for lille, hvilket vi dog vil forsvare ud fra vores valg af design, der skal være mere visuelt attraktivt og dermed gøre vante brugere stolte og give nye brugere interesse for web sitet. Den sidste ønskede forbedring gik på, at menuerne ikke behøvede at folde sig sammen, når man klikker på et link. Vi er klar over problemet, men med den måde, vi på nuværende tidspunkt har haft evne til at lave web site på, har det ikke været muligt at lave det anderledes. Ros Vi har til gengæld fået ros for vores valg af farver samt de forskellige bannere, vi har valgt at bruge. Derudover var Mandana også glad for muligheden for at bruge en kalender samt det galleri, vi har valgt at gøre tilgængeligt på web sitet. Alt i alt kan vi konkludere, at vores web site fungerer, så man kan finde de ønskede oplysninger. De besværligheder vores testperson har haft, kan måske forklares ved, at hun ikke er rigtig dansker og dermed har haft vanskeligheder ved noget af web sitets indhold.

24 Side 24 Procesbeskrivelse og -evaluering Vores arbejdsproces har forløbet fint. Vi har nået vores mål og fulgt vores tidsplan. Når vi kigger på vores problemformulering synes vi også, vi på en tilfredsstillende måde, har fået svaret på alle spørgsmålene. Vores gruppe har fungeret godt, og alle har bidraget til opgaven. Læringsmål for gruppen Vores mål var at lære diverse programmer og få en god forståelse for udviklingen af et web site, både hvad der angår analyse, arbejdsproces og samarbejde. Opfølgning af læringsmål for gruppen Vi føler alle, vi har fået en større forståelse for produktionen af et web site og det forarbejde, der går forud. Vores arbejde med programmerne er også blevet bedre, nu da vi alle har beskæftiget os med dem.

25 Tidsplan Bilag 1 I Microsoft Project har vi udarbejdet en tidsplan for at kunne danne os et overblik over hvilke opgaver, der skal udføres, hvor meget tid vi har til rådighed, og ikke mindst hvordan de forskellige opgaver skal fordeles for at kunne nå det hele til den afsatte tid.

26 Statistik fra det gamle web site Bilag 2

27 HTML-kode Bilag 3 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > <html xmlns= > Start på html <head> Start på head-delen <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>nødebo Kro</title> Titlen som bliver vist øverst I vinduet <link href= style.css rel= stylesheet type= text/css /> Link til stylesheet <!-- Start på switch menu script --> Tekst indeni denne ramme <!-- abc --> er beskrivende kode i teksten der ikke har betydning for sidens udseende <script type= text/javascript > Javascript-kode til switch-menuen /*********************************************** * Switch Menu script- by Martial B of * Modified by Dynamic Drive for format & NS4/IE4 compatibility * Visit for full source code ***********************************************/ var persistmenu= yes // yes or no. Make sure each SPAN content contains an incrementing ID starting at 1 (id= sub1, id= sub2, etc) var persisttype= sitewide //enter sitewide for menu to persist across site, local for this page only if (document.getelementbyid){ //DynamicDrive.com change document.write( <style type= text/css >\n ) document.write(.submenu{display: none;}\n ) document.write( </style>\n ) } if(el.style.display!= block ){ //DynamicDrive.com chan- function SwitchMenu(obj){ getelementsbytagname( span ); //DynamicDrive.com change ge DynamicDrive.com change } if(document.getelementbyid){ var el = document.getelementbyid(obj); var ar = document.getelementbyid( masterdiv ). } }else{ } for (var i=0; i<ar.length; i++){ if (ar[i].classname== submenu ) // ar[i].style.display = none ; } el.style.display = block ; el.style.display = none ; function get_cookie(name) { var search = Name + = var returnvalue = ; if (document.cookie.length > 0) { offset = document.cookie.indexof(search) if (offset!= -1) { offset += search.length end = document.cookie.indexof( ;, offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu== yes ){ var cookiename=(persisttype== sitewide )? switchmenu : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!= ) document.getelementbyid(cookievalue).style.display= block } }

28 HTML-kode Bilag 3 function savemenustate(){ var inc=1, blockid= while (document.getelementbyid( sub +inc)){ if (document.getelementbyid( sub +inc).style.display== block ){ blockid= sub +inc break } inc++ } var cookiename=(persisttype== sitewide )? switchmenu : window.location.pathname var cookievalue=(persisttype== sitewide )? blockid+ ;path=/ : blockid document.cookie=cookiename+ = +cookievalue } if (window.addeventlistener) window.addeventlistener( load, onloadfunction, false) else if (window.attachevent) window.attachevent( onload, onloadfunction) else if (document.getelementbyid) window.onload=onloadfunction if (persistmenu== yes && document.getelementbyid) window.onunload=savemenustate function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theurl,winname,features); } </script> <!-- Slut på switch menu script --> </head> <body> <div class= soeg2 > <div class= soeg > Slut på scripten til switch-menuen Slut på head-delen Start på body-delen Div til at placer søge-funktionen Div til at placer søge-funktionen <!-- start of freefind search box html --> Kode til søge-funktionen <table cellpadding=0 cellspacing=0 border=0 > Starter en table <tr> Start på første række (row) <td colspan=2 style= font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; > Start på første kolonne (column) Colspan gør, at cellen kan dække over andre Celler. I stylen bestemmes teksttypen og -størrelsen <form style= margin:0px; margin-top:4px; action= method= get accept-charset= utf-8 target= _ blank > Form markerer en formular i dette tilfælde selve søgefunktionen. Åbner i et nyt vindue <input type= hidden name= si value= > <input type= hidden name= pid value= r > <input type= hidden name= n value= 0 > <input type= hidden name= _charset_ value= > <input type= hidden name= bcd value= > <input type= text name= query size= 9 > Sætter tekstboksens størrelse <input type= submit value= søg > Bestemmer hvad der skal stå på knappen </form> Slut på form </td> Slut på kolonne </tr> Slut på række </table> Slut på table <!-- end of freefind search box html --> </div> Slut på div class soeg </div> Slut på div class soeg2 <div class= banner > <img src= images/bannere/fors.jpg /></div> <center> <div class= content > <div class= left > Div til at placer banneret Link til banner Centrerer indholdet Div til at placere indholdet Div der holder sig i venstre side

29 HTML-kode Bilag 3 <div id= masterdiv > Switch-menuens masterdiv <!-- start på menu--> <a href= index.html >Forside</a><br /> Almindelig link i menuen. <br /> skifter til ny linie. <a href= kal.html >Kalender</a><br /> <div class= menutitle onclick= SwitchMenu( sub2 ) >Udlejning</div> <span class= submenu id= sub2 > <li><a href= lok.html >Lokaler</a></li><br /> </span> Punkt med undermenu Betegnelsen til undermenuen Link i undermenuen Afslutning på undermenu <div class= menutitle onclick= SwitchMenu( sub3 ) >Arrangementer</div> <span class= submenu id= sub3 > <li><a href= mus.html >Musik</a></li><br /> <li><a href= hoj.html >Højtider</a></li><br /> <li><a href= for.html >Foredrag</a></li><br /> <li><a href= lop.html >Loppemarked</a></li><br /> <li><a href= ban.html >Banko</a></li><br /> <li><a href= byv.html >Byvandring</a></li><br /> </span> <div class= menutitle onclick= SwitchMenu( sub4 ) >Medlemskab</div> <span class= submenu id= sub4 > <li><a href= spi.html >Spiseklub</a></li><br /> <li><a href= bri.html >Bridgeklub</a></li><br /> <li><a href= afs.html >Afspænding </a></li><br /> <li><a href= nim.html >Nimbusklubben</a></li><br /> <li><a href= bil.html >Billardklubben</a></li><br /> <li><a href= pet.html >Petanqueturnering</a></li><br /> <li><a href= vav.html >Væverklubben</a></li><br /> <li><a href= mod.html >Modeljernbane- klubben</a></li> </span> <a href= gallery/gallery.swf target= _blank >Galleri</a><br /> Link til et flash-galleri <a href= his.html >Historie</a><br /> <a href= ovr.html >Øvrige</a><br /> <a href= kon.html >Kontakt</a><br /> <!-- slut på menu--> </div> Slut på master div class </div> Slut på left class div <div class= right > Div der placerer selve indholdet på siden <!-- start på indhold --> <h3>velkommen</h3> Overskrift <p> Forsamlingshuset Nødebo Kro er centralt beliggende i Nødebo med en smuk udsigt over Esrum sø. <br /> Nødebo Kro fungerer i dag primært som forsamlingshus, men har mange arrangementer for alle interesserede samt klubber for medlemmer. Der er også mulighed for at leje en eller flere lokaler med gode faciliteter. Udover information om udlejningspriser, arrangementer, medlemskab kan du også læse om Nødebo Kros historie og gå på opdagelse i galleriet.</p> <p>hvis du har et spørgsmål er du også altid velkommen til at <a href= kon.html class= a2 >kontakte os.</a></p> Tekst på siden <p></p> markerer et afsnit på en Side. <a href= # class= a2 ></a> er et link til kontakt med class style a2 <!-- slut på indhold --> </div> Slut på right class div </div> Slut på content class div <div class= bund > Div der placerer bundtekst <!-- start på bund tekst --> <p>nødebo Kro, Nødebovej 26, 3480 Fredensborg</p> <!-- slut på bundtekst --> </div> </center> Slut på indholds-centrering </body> Slut på body-delen </html> Slut på html

30 CSS-kode Bilag utf-8 ; /* CSS Document */ body { Markerer at det er body-delen background-color:#000000; Sætter baggrundsfarven for body-delen background-image:url(images/hjemmesidedesign8.jpg); Sætter baggrundsbillede I body-delen background-position:top center; Bestemmer billedets position til at være i toppen og centreret background-repeat:no-repeat; Billedet bliver ikke gentaget med no-repeat color:#625246; Sætter tekstfarven font-family:verdana, Arial, Helvetica, sans-serif; Sætter teksttypen font-size:12px; Sætter tekststørrelsen } Markerer afslutning af style for body-delen a { Style for links font-weight: bold; Skrift typen er sat til fed med bold color: #ffffff; font-size:12px; } Afslutning af link style delen.a2 { Style for en class kaldet a2 font-size: 12px; font-weight: bold; color: #949577; } Afslutning af a2 style-delen h3 { Style for h3 font-size:14px; text-align:center; Sætter teksten til at være centreret } Afslutning af h3 style-delen.banner { Style for en class kaldet banner margin-top:10px; Angiver margen i toppen margin-left:1px; Angiver margen i venstre side text-align:center; } Afslutning på banner.content { Style for en class kaldet content width:564px; Sætter bredden padding:18px; Bestemmer grænsen mellem indhold og kant } Afslutning på content.bund { top:470px; position:absolute; Style for en class kaldet bund } Afslutning på bund Absolute gør, at der ikke optages plads i dokumentet.right { float:right; width:360px; height:200px; overflow:auto; Style for en class kaldet right Får den til at holde sig til højre Sætter højden Hvis der er mere indhold, end højde og bredde tillader, kommer der en scrollbar

31 CSS-kode Bilag 3 margin: 11px auto; Sætter margen i toppen først og derefter resten på auto margin-right: 10px; Margen til højre padding:15px; text-align:left; Placerer teksten til venstre } Afslutning på right.left { Style for en class kaldet left float:left; Får den til at holde sig til venstre width:160px; text-align:left; } Afslutning på left.soeg2 { Style for en class kaldet soeg2 width:588px; height:68px; margin:auto; } Afslutning på soeg2.soeg { Style for en class kaldet soeg float:right; margin-top:39px; } Afslutning på soeg.menutitle{ Style for en class kaldet menutitle cursor:pointer; Bestemmer musetype color:#ffffff; width:160px; text-decoration:underline; Giver en linie under teksten font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; } Afslutning på menutitle.submenu{ Style for en class kaldet submenu margin-bottom: 0.5em; margin-left:10px; } Afslutning på submenu