Beteckning: Akademin för teknik och miljö Projekt Växbo Andreas Sundberg & Lars Kraft juni 2010 Examensarbetet, 15 högskolepoäng, B Datavetenskap Internetteknologi Handledare: Carina Pettersson Examinator: Anders Jackson
Projekt Växbo av Andreas Sundberg Lars Kraft Institutionen för matematik, natur- och datavetenskap Högskolan i Gävle S-801 76 Gävle, Sweden Email: Nit08asg@student.hig.se Nit08lkt@student.hig.se Abstrakt Växbo bygdegårdsförening var i behov av en hemsida och sökte webbdesignare. De ville ha en enkel, användarvänlig och lätthanterlig hemsida som skulle innehålla allt från information om styrelsen till de senaste nyheterna i byn. Hemsidan skapades med HTML som scriptspråk samt CSS som stilmall. Layouten utarbetades fram mellan oss och beställaren från Växbo. Kraven som ställdes från beställaren uppfylldes. Nyckelord: Webbdesign, Användarvänlighet, HTML, CSS
Innehåll 1 Inledning... 1 1.1 Bakgrund... 1 1.2 Syfte... 1 1.3 Mål... 1 2 Olika begrepp... 2 3 Förutsättningar och krav... 2 3.1 Allmänna krav på projektet... 2 3.2 Krav på användargränssnitt... 2 3.3 Krav på hemsidans innehåll... 3 3.4 Funktion om tid finns... 3 3.5 Speciella krav... 3 4 Planering och genomförande... 4 4.1 Arbetsfördelning... 5 4.2 Layout... 5 4.3 Användbarhet... 5 5 Implementering och test... 6 5.1 Hemsidans layout... 6 5.2 Webbsidan (www.vaxbobygden.se)... 6 5.3 Webbhotellet... 7 5.1 Användartest... 7 6 Diskussion... 7 6.1 Problem under utvecklingen... 8 7 Slutsatser... 8 8 Referenser... 9 9 Bilagor... 10 9.1 Bilaga 1 Projektplan... 10 9.2 Bilaga 2 Kravspecifikation... 14 9.3 Bilaga 3 Pert-schema... 16 9.4 Bilaga 4 Gantt-schema... 17 9.5 Bilaga 5 Användningstest... 18 9.6 Bilaga 6 Kodexempel... 20 9.7 Bilaga 7 Skärmdump... 21 9.8 Bilaga 8 Skärmdump... 22
1 Inledning 1.1 Bakgrund Examensarbetet går ut på att skapa en hemsida åt Växbo bygdegårdsförening. Bygdeföreningen har ingen hemsida sedan tidigare så allt kommer byggas helt från grunden. Växbo är en ort som ligger belägen cirka en mil utanför Bollnäs i Hälsingland. Orten har cirka 500-1000 invånare. Orten ligger i en naturskön dal där bland annat den stora sjön Växsjön och Ljusnan rinner. Växbo är bland annat känt för Trolldalen där Skandinaviens enda linspinneri finns. I Trolldalen ligger även den kända krogen Växbo Krog. Bakgrunden till detta beror på Internets stora utbredning de senaste åren. Eftersom fler och fler använder Internet dagligen känner Växbo att de skulle kunna nå ut till fler människor genom att ha en webbsida. 1.2 Syfte Det viktigaste var att skapa en fullt fungerade hemsida åt Växbobygden. I dagsläge när information ska spridas i Växbo sker det genom annonsering på en tavla mitt i byn samt lokalbladet Växbobladet som dock ges ut ett fåtal gånger per år. Detta har lett till att många har gått miste om information. Med hjälp av en hemsida kan man underlätta annonsering samt på ett mycket enklare och miljövänligare sätt sprida information även till folk utanför byn. 1.3 Mål Det viktigaste målet var att skapa en sådan användarvänlig och stilren hemsida som möjligt. Även en mindre van datoranvändare skall kunna använda sidan i sin helhet utan problem. Hemsidans design skulle arbetas fram utifrån växbobygdens logga. Färgerna skulle vara ljusa och vänliga mot ögonen. Ett annat huvudsakligt mål var att skapa något som hjälper bygdeföreningen att förenkla spridning av information. 1
2 Olika begrepp Eftersom vi skulle skapa en så enkel hemsida som möjligt utifrån våra kunskaper så valde vi att enbart använda HTML och CSS. Enligt de första planerna på projektet skulle även ett bokningssystem kodat i PHP ingått. Dock ansåg beställaren att ett sådant system skulle kunna innebära problem i framtiden då mycket liten kunskap om PHP och webbdesign finns inom bygdegårdsförenings styrelse. Här nedan följer några korta beskrivningar av de olika begreppen som använts under detta projekt: HTML (Hyper Text Markup Language), är ett standardspråk för webbdesign. Utseende och innehållet bestäms av koden hur det ska se ut i din webbläsare. Dock kan koden tolkas olika av olika webbläsare och då visas på ett annat sätt. HTML är tänkt att endast visa text så som på webbsidor samt e-post meddelanden. CSS (Cascading Style Sheets) fungerar som stilmall för designen. CSS-koden innehåller beskrivningar på hur texter, färger, divar/boxar m.m. ska se ut på hemsidan. Man kan använda CSS för hela hemsidan men också för delar av hemsidan. Man kan välja att skriva CSS-mallen separat och länka till HTML-koden eller skriva CSS-mallen direkt i HTML-koden. 3 Förutsättningar och krav Här nedan följer beskrivning på de krav vi och Växbo ställde på uppbyggnaden av hemsidan. 3.1 Allmänna krav på projektet Den färdiga sidan skall läggas upp på ett webbhotell. Webbhotellet ska vara befintligt och kommer användas för att Växbobygden ska slippa driva och underhålla servrar och databaser. På webbhotellet ska det även finnas ett filöverföringsprogram. Beställaren ska välja webbhotell. 3.2 Krav på användargränssnitt Systemet ska grafiskt smälta in med Växbobygdens logga. Sidan ska vara enkel, användarvänlig och lätthanterlig. Sidan ska ha enkla ljusa färger. Målgruppen för hemsidan är tänkt att främst vara riktad till bygdens invånare. 2
3.3 Krav på hemsidans innehåll Dessa funktioner skall finnas på hemsidan. Hem - En startsida med en vybild på Växbo samt en kort beskrivning av byn. Nyheter Alla nyheter rörande Växbo. Gästbok En gästbok för Växbobygden. Bokning - Bokning av lägenhet och bygdegård. Ska ligga som två undermenyer: Lägenhet och Bygdegård. Styrelsen - Sida om styrelsen med info och bilder samt tre undermenyer: möten, stadgar, verksamhetsberättelser. Boende - Kontaktinfo samt bilder till andra uthyrare i byn. Kapellet Information om kapellet. Tre undermenyer: uthyrning, bilder samt historik. Kontakt Viktigaste kontakterna angående Växbo. Övrigt Innehåller bland annat fotoalbum med bilder från händelser i Växbo, shop med bilder på artiklar som går att köpa, fiskekort med tillhörande info, pilgrim information om leden genom Växbo samt växbobladet med alla släppta nummer i pdfformat. Bli medlem - info om hur man blir medlem. Länkar de viktigaste länkarna rörande Växbo. (se bilaga 2) 3.4 Funktion om tid finns Ett mer avancerat bokningssystem där man kan boka och avboka lägenhet samt bygdegård. Skall då även finnas en almanacka där man ser vilka dagar som är lediga samt upptagna. 3.5 Speciella krav Från Växbobygden behövde projektgruppen följande: Bilder, samt all information som ska stå på hemsidan. Även det lokala bladet Växbobladet inskannade på datorn. Kontakt med kontaktperson Linda Jonsson vid frågor, funderingar och problem. (se bilaga 1 och 2) 3
4 Planering och genomförande I första stadiet av projektet satte vi oss ner och skissade på några förslag på webbsidans design som vi skulle visa upp för beställaren. Sedan så bokade vi in en tid med beställaren Linda Jonsson från Växbo där vi hade förberett ett antal frågor och funderingar rörande projektet. Kontakten har skett genom möten, telefonkontakt samt mail. När vi sedan kom överens om hur sidan på ett ungefär skulle se ut var det dags att börja med en projektplan och en kravspecifikation. Utifrån de svar vi fick vid första mötet framställde vi en kravspecifikation(se bilaga 2) som användes som grund för fortsatt arbete av den kommande hemsidan. Utifrån kravspecifikationen kunde vi enkelt fördela olika arbetsuppgifter mellan oss. Projektplanen(se bilaga 1) blev en kort och koncis beskrivning av det projekt som låg framför oss. Där tog vi bland annat upp mål för projektet samt skapade en fas- och tidsplan. Därefter skapades en detaljplan innehållande PERT- och Ganttschema (se bilaga 3 och 4) där vi la upp en rimlig tidsplan över hela projektet. Där planerades specifika dagar för enskilda moment i projektet så att vi skulle ha en bra koll på hur vi låg till under projektets gång. Nästa fas var att utveckla en CSS-mall[2][5][4] där vi på enkelt sätt kunde styra upp den huvudsakliga designen på hemsidan. Vi började även med grunden av HTMLkodningen[2][3][5]. Under denna fas gjordes väldigt många olika tester för att få fram en fungerande och stilren design. Vi gjorde även tester för att undvika framtida komplikationer. Även mindre saker som till exempel textstorlekar, färgval med mera skapades under denna fas. Efter detta började vi med den fas som skulle komma att bli en utav de svåraste och som ställde till med mycket problem under detta projekt. Under denna fas började vi med vår dropdownmeny[1]. Eftersom beställaren ville ha med många olika menyval så ansåg vi att det bästa skulle vara att göra en dropdown meny då alla dessa val inte skulle få plats på en rad. Beställaren var även bestämd att hon ville ha menyn vågrätt högt upp på sidan. Efter en hel del arbete lyckades vi tillslut få till en fungerande meny som uppfyllde våra förväntningar. Det näst sista vi gjorde var att fylla alla olika sidor på webbsidan med det material vi fått från Växbo. Sedan lade vi upp hemsidan på ett webbhotell som beställaren valt. Det sista vi gjorde var att leverera den färdiga produkten till beställaren. Samtidigt hade vi en kort och koncis genomgång med denne hur man uppdaterar de viktigaste sakerna som till exempel lägga in nya texter, lägga in nya bilder samt ändra storlekar och färger på texter och bakgrunder. Vid eventuella funderingar ska vi kunna finnas till hands för att hjälpa till. 4
4.1 Arbetsfördelning Vi började med att skriva ihop CSS-mallen samt basen av HTML-koden. När vi väl hade fått fram en mall av själva hemsidan och det blev dags att fylla på de olika sidorna med information så delade vi upp arbetet. All dokumentation har vi skrivit tillsammans. Vi lade upp arbetet på så vis att vi träffades i stort sätt varje dag i Bollnäs. Övrig tid arbetades på enskilt håll. Då skedde mest olika tester av kod som vi sedan visade upp för varandra. Vi hade åtta stycken möten med vår beställare, övrig kontakt skedde via telefon samt e-mail. Vi träffade också handledaren från högskolan på plats i Gävle där vi diskuterade projektet och dess utveckling. 4.2 Layout Då ett av de viktigaste kraven från beställarens sida var att hemsidan skulle vara användarvänlig så vi var väldigt noga när vi började på med layouten. Tillsammans med beställaren bestämde vi att vi skulle göra en smalare hemsida som skulle ligga centrerat. Till höger och vänster om själva hemsidan så ville hon ha en bakgrundsbild i form av en tapet med något slags mönster. Denna tapet fick inte bli alltför extrem utan skulle bara smälta in i bakgrunden. Hemsidan består av sju stycken olika delar. Ett sidhuvud där Växbobygdens logga ligger under den ligger en menydel som innehåller dropdown menyn. Under menyn och centralt på sidan ligger själva huvuddelen som är den del där allt uppdateras vid olika menyval. Till höger om huvuddelen ligger tre stycken siddelar. Dessa innehåller vägbeskrivning, senaste nyheterna och länkar. Längst ner på sidan under huvuddelen ligger en sidfot där det finns information om webbutvecklarna. 4.3 Användbarhet Under hela projektets gång har användarvänligheten varit det som prioriterats mest. En objektiv syn av användarvänligheten har hela tiden varit det primära målet då hemsidan skapats. Användbarhet är en kvalitetsegenskap hos interaktiva produkter. En produkt har hög användbarhet om den uppfyller beställarens och målgruppernas syften. skriver Ottersten & Berndtsson i användbarhet i praktiken[6]. Vi har försökt göra hemsidan så enkel och tydlig som möjligt så att användarna enkelt ska kunna hitta det de letar efter. Vi valde att göra alla sidor fasta och den enda sida som det ändras i när man gör ett sidbyte är i huvuddelen i mitten av sidan. På så vis har vi fått en hemsida som är ganska lättförståelig. 5
5 Implementering och test 5.1 Hemsidans layout Så här blev resultatet av vår grafiska layout. Denna layout skapades i samråd mellan beställaren och oss. Sidan bygger på sidhuvudets logga samt den mjuka tapeten i bakgrunden. Menyn spelar också en betydande roll på hemsidan då den är tydlig utsatt och vi valde den gröna färgen för att den skulle passa in med loggan. Rubrikernas färger valdes så att även de skulle passa in med loggans färger. Valet av den vita bakgrundsfärgen i delarna tyckte vi samt beställaren var den mest passande för hemsidan då kontrasterna mellan bakgrunden och texten är väldigt bra. 5.2 Webbsidan (www.vaxbobygden.se) Figur 1. Skärmdump, startsida (www.vaxbobygden.se) (2010-06-02) 6
5.3 Webbhotellet När det mesta av kodningen var klar letade beställaren upp ett webbhotell som skulle passa för denna hemsida. De valde ett webbhotell som de kände till sedan tidigare för att veta att det var tillförlitligt och uppfyllde kraven som de ställde. Sedan la vi upp alla filer tillhörande hemsidan via ftp (file transfer protocol). Nästa steg var att testa så att allt fungerade när det låg ute på webbhotellet. 5.1 Användartest När hemsidan i stort sett var klar var det tid att genomföra ett användningstest. Testet genomfördes av två personer en 17-årig kille samt en äldre kvinna för att se att sidan lämpar sig åt varierande åldrar. Vi valde att endast låta två personer göra testet eftersom vi gjort en statisk hemsida som inte är alltför avancerad och där fel nästan inte kan uppstå. Genom att dessa två testpersoner skiljde sig i både förkunskaper, livserfarenheter och ålder fick vi en ganska tydlig bild av användarvänligheten. Under dessa tester fanns vi båda med och observerade för att vi båda ville ha koll på hur testpersonerna uppfattade hemsidan. Utifrån dessa två användartester som utfördes fick vi en klar bekräftelse på att vi skapat en användarvänlig hemsida. Testpersonerna löste uppgifterna relativt snabbt och stötte inte på några större problem när de utforskade hemsidan. Båda testpersonerna tyckte det var bra att vi gjort hemsidan så pass användarvänlig och vi fick mycket positiv respons. (Se bilaga 5 för resultat av användartestet) 6 Diskussion Vi är mycket nöjda med detta projekt. Vi tog oss an detta projekt för att vi ville utveckla vår förmåga att bygga enkla och användarvänliga hemsidor. I början av projektets gång kände vi lite press då vi inte visste om våra kunskaper skulle räcka för att båda parter skulle bli nöjda. Vi har varit noga med att ta ett steg i taget och göra allt ordentligt från början. Vi har även försökt se till att inte stressa upp oss när vi stött på olika problem utan istället satt oss ner och gått igenom problemen tillsammans och testat olika lösningar tills vi löst problemen. Både vi och beställaren hade i ett tidigt skede tankar och funderingar på att göra ett bokningssystem där användaren själv skulle kunna boka bygdegård via hemsidan. Ganska snabbt kände vi att tiden inte skulle räcka till. Lika snabbt kände beställaren att det skulle bli för mycket arbete kring systemet och på så vis skulle det ta upp för mycket tid för styrelsen. Så tillsammans kom vi överens om att det bästa vore att de kör lika som de gjort tidigare, det vill säga att man bokar via telefon eller mail. Vi tycker det är lite synd att vi inte har fått mer material från beställaren att jobba med. Detta har nu resulterat i att vissa sidor på hemsidan för tillfället står tomma. Vilket känns ganska trist då man gärna vill göra klart det man påbörjat. Projektet har varit väldigt roligt och lärorikt. Vi känner att vi har utvecklat våra kunskaper inom området. Hade det funnits mer tid till förfogande hade vi kunnat utveckla sidan ännu mer med till exempel några snygga och passande effekter. Men över det stora hela så måste vi säga att vi är väldigt nöjda över vad vi åstadkommit då detta är den andra hemsidan vi skapat. Nästa gång vi ger oss på att bygga en hemsida så kan vi utveckla den ännu mer tack vare att vi lärt oss grunderna ännu bättre under detta projekt. 7
6.1 Problem under utvecklingen Problem har uppstått under hela projektets gång, både stora som små. Det första riktiga problemet vi stötte på var i början när vi skrev css-mallen. Eftersom ingen av oss hade skrivit en css-mall tidigare så var det väldigt krångligt att få alla siddelar att ligga där vi ville att de skulle ligga. Men vi testade oss fram på många olika sätt tills vi hittade en bra lösning som vi kände oss nöjda med. Bland annat letade vi lösningar på internet och jämförde css-mallar med sidor som hade en layout som liknade den vi ville ha. Genom att se hur dessa var uppbyggda kunde vi lättare bygga vår egen css-mall. Nästa problem uppstod i samband med dropdownmenyn. Vi hittade ett bra exempel på internet som vi använda oss av[1]. Men det vi inte lyckades lösa var att få menyn att fungera i alla webbläsare. Problemet var att när man höll muspekaren över ett menyval så fungerade inte dropdownmenyn på rätt sätt utan hela menyn flyttades ett steg till höger vilket gjorde det omöjligt att hantera menyn. På den sida som vi hittade mallen för dropdownmenyn fanns det även en förklaring för hur man skulle lösa internet explorer problemen. Genom att klistra in en färdig kod i en separat fil som skulle ligga i samma mapp som resterande HTML-filer lyckades vi lösa problemet så att menyn alltid visas på ett korrekt sätt. Just nu fungerar den i de senaste Internet Explorer versionerna, Google Chrome, Mozilla Firefox och Safari. Det sista problemet som uppstod var då vi lade upp hemsidan på webbhotellet. Då visades inte vissa bilder. Men vi kontaktade webbhotellet och med hjälp av dem lyckades vi lösa problemen. Det handlade om att vi i kopplingen mellan CSS-mallen och HTML-koden hade skrivit med stora bokstäver på det ena stället och små på det andra vilket gjorde att koden inte kunde tolkas. Men efter att det var fixat så fungerade allt som det skulle. 7 Slutsatser Genom att vi har byggt upp hemsidan centralt med mjuka tapeter i bakgrunden, ett stort sidhuvud med Växbobygdens logga samt en dropdownmeny som har alla de menyval som bestämdes tillsammans beställaren känner vi att vi har uppfyllt de mål som sattes i början av projektet. Tack vare de bra resultaten från användartesterna fick vi även ett tydligt svar på att sidan är användarvänlig vilket var det huvudsakliga målet med hemsidan. Vi är nöjda med att beställaren valde ett enkelt webbhotell som båda parterna enkelt kan hantera och göra ändringar i. Beställaren känner sig nöjd med att äntligen ha en hemsida där de själva kan uppdatera och sprida information till bygdens invånare på ett smidigt och miljövänligt sätt. 8
8 Referenser Webbkällor: [1] Dropdown menyn (2010-04-25) http://www.hellstroms.nu/dropdown.htm [2] HTML, CSS (2010-04-22) http://webdesignskolan.se/ Tryckta källor: [3] Ek, Jesper & Eriksson, Ulrika (2000) XHTML, Pagina Förlag AB [4] Formgren, Elsie & Sundström, Sten (2006) Enkel Webbdesign, Pagina Förlag AB [5] Matsson, Björn & Gustavsson, Eva (1999) Lär dig dynamisk HTML på en vecka, Pagina AB [6] Ottersten, Ingrid & Berndtsson, Johan (2008) Användbarhet i praktiken, Studentlitteratur 9
9 Bilagor 9.1 Bilaga 1 Projektplan Projektplan Projekt Växbo 1.Introduktion Vi är en grupp på två personer som läser kursen Examensarbete på Internetteknologiprogrammet vid Högskolan i Gävle. Vårt examensarbete går ut på att skapa en hemsida åt orten Växbo. Växbo har ingen hemsida sedan tidigare så allt kommer byggas helt från grunden. Växbo är en ort som ligger belägen cirka en mil utanför Bollnäs i Hälsingland. Orten har cirka 500-1000 invånare. Orten ligger i en naturskön dal där bland annat den stora sjön Växsjön och Ljusnan rinner. Växbo är bland annat känt för Trolldalen där Skandinaviens enda linspinneri finns. I Trolldalen ligger även den kända krogen Växbo Krog. Bakgrunden till detta arbete har att göra med Internets stora utbredning de senaste åren. Eftersom fler och fler använder internet dagligen känner Växbo att de skulle kunna nå ut till fler människor genom att ha en webbsida. 1.2 Organisation 1.3 Projektgruppen Namn E-mail Telefon Lars Kraft kraft_354@hotmail.com 070-3540101 Andreas Sundberg sumpan89@gmail.com 070-5706627 Vi kommer försöka arbeta och göra allting tillsammans för att ta så stor lärdom som möjligt av detta projekt. Eventuellt kommer arbetet att delas upp beroende på tid. Om något görs enskilt kommer även den andra ta del av det så att båda har lika stor förståelse. Vi har valt att inte utse någon projektledare utan allt ansvar fördelas lika på båda. Det gör att båda får arbeta lika mycket och ta lika stort ansvar. 2.2 Övriga personer i projektet Namn Roll E-mail Linda Jonsson Beställare Handledare lindajonsson79@hotmail.com 10
2.3 Arbetsupplägg Projektgruppens arbete görs huvudsakligen i Bollnäs, med jämn arbetsfördelning. Inför de obligatoriska mötena med handledaren skriver vi en progressrapport så att handledaren ser hur vi ligger till i projektet. 3. Projektmål Inom projektgruppen har vi satt upp följande mål: Vi vill leverera en fullt fungerande och användbar produkt till kunden. Vi ska utveckla vår förmåga att arbeta i projekt. Vi vill utveckla våra kunskaper inom HTML. Vi vill lära oss grunderna och utveckla våra kunskaper i PHP. 4. Fas- och tidsplan 4.1 Definitionsfasen 2010-04-12 Milstolpe 1 - Godkännande av projektplan och kravspecifikation. 4.2 Planeringsfasen 2010-04-12 Milstolpe 2 PERT och GANTT-schema klara. 4.3 Utförandefasen 2010-04-15 Milstolpe 4 layout klar 2010-04-25 Milstolpe 5 css-mall klar 2010-05-20 Milstolpe 6 html-kodning klar 2010-05-25 Milstolpe 7 användningstest klar 2010-06-04 Milstolpe 8 Leverans av system 4.4 Utvärderingsfasen 2010-06-04 Milstolpe 9 Projektrapport klar 2010-06-07 Milstolpe 10 Redovisning 5. Intressenter Handledare - Idéer, åsikter, möten. Webbhotell Vårt system ska upp på ett webbhotell. Övriga delaktiga växbobor - Åsikter, ev. utbildning. Medverkan för dessa personer i projektet planeras löpande. 11
6. Riskanalys R1: Sjukdom i projektgrupp R2: Beställare långtidssjuk R3: Få möten med handledare R4: Hårdvaruproblem, datorhaveri R5: Dålig kommunikation med beställaren R6: Ändrat leveransdatum R7: Projektgruppen klarar inte av uppgiften R8: Brist på mjukvara R9: Kompatibilitetsproblem 7. Förändringsplan Förändring ska ske senast den 5 maj och förändringar kan endast föreslås av projektgruppen och beställaren. Förändringar sker endast i samråd mellan projektgruppen och beställaren och det är även de som godkänner en ev. förändring. 12
8. Dokumentplan De dokument vi ska ta fram i det här projektet är: Projektplan Dokument som beskriver och planerar projektet. Kravspecifikation Dokument som preciserar och visar vad projektet ska åstadkomma. Detaljplan PERT och GANTT-schema. Användningstest Dokument med frågor till utvalda deltagare som ska testa systemet. Projektrapport Hela projektet beskrivs och sammanfattas i detta dokument. 9. Utbildningsplan Vi försöker använda de kunskaper som vi har fått genom de kurser vi tidigare läst under utbildningen. Övrig eventuell utbildning inom skriptspråket PHP sker löpande i gruppen med hjälp av Internet. 13
9.2 Bilaga 2 Kravspecifikation Kravspecifikation Projekt Växbo Introduktion och bakgrund Vi är en grupp på två personer som läser kursen Examensarbete på Internetteknologiprogrammet vid Högskolan i Gävle. Vårt examensarbete går ut på att skapa en hemsida åt orten Växbo. Växbo har ingen hemsida sedan tidigare så allt kommer byggas helt från grunden. Växbo är en ort som ligger belägen cirka en mil utanför Bollnäs i Hälsingland. Orten har cirka 500-1000 invånare. Orten ligger i en naturskön dal där bland annat den stora sjön Växsjön och Ljusnan rinner. Växbo är bland annat känt för Trolldalen där Skandinaviens enda linspinneri finns. I Trolldalen ligger även den kända krogen Växbo Krog. Bakgrunden till detta arbete har att göra med Internets stora utbredning de senaste åren. Eftersom fler och fler använder internet dagligen känner Växbo att de skulle kunna nå ut till fler människor genom att ha en webbsida. Uppdragsgivare är Linda Jonsson, ordförande i Växbo bygdeförening. Hemsidan ska främst vara riktad mot privatpersoner som är intresserad och vill lära sig mera om Växbo. Funktioner som skall ingå i den färdiga produkten Dessa funktioner kommer finnas i en meny på sidan. Hem - En startsida med de senaste nyheterna kring Växbo. Gästbok En gästbok för Växbobygden. Bokning - Bokning av lägenhet och bygdegård. Styrelsen - Sida om styrelsen med möten, stadgar, verksamhetsberättelser samt info om styrelsen. Boende - Kontaktinfo samt bilder till andra uthyrare i byn. Kapellet Information om uthyrning, bilder samt kort historik. Kontakt Viktigaste kontakterna angående Växbo. Övrigt Innehåller bland annat fotoalbum med bilder från händelser i Växbo, shop med bilder på artiklar som går att köpa, fiskekort med tillhörande info, pilgrim information om leden genom Växbo samt växbobladet med alla släppta nummer i pdfformat. Länkar de viktigaste länkarna rörande Växbo. Bli medlem! För att bli medlem i Växbo bygdegårdsförening. 14
Funktioner som är önskvärda om tid finns Ett mer avancerat bokningssystem där man kan boka och avboka lägenhet samt bygdegård. Skall då även finnas en almanacka där man ser vilka dagar som är lediga samt upptagna. Eventuellt önskas en gästbok om det finns tid. Krav på användargränssnitt Systemet ska grafiskt smälta in med Växbologgan. Sidan ska vara mycket användarvänlig samt ha enkla ljusa färger. Förändringsvillkor Eventuella förändringar kan ske senast den 21:a maj och kan endast föreslås av projektledarna och beställaren. Förändringar sker endast i samråd mellan projektledaren och beställaren och måste godkännas av båda parter. Leveransvillkor Leverans sker genom att ett färdigt system läggs upp på ett webbhotel med ett relaterande domännamn. Leveransen ska ske senast 2010-06-04. I leveransen ingår dokumentation i form av en instruerande manual för systemet samt en grundlig genomgång av systemet för berörda personer i växbos styrelse. Efter att leveransen är genomförd har växbo rätten att använda, underhålla samt vidareutveckla systemet för eget bruk. Växbo har däremot inte rätt att sälja eller på annat sätt vidareförmedla systemet till tredje part. Speciella krav Från Växbobygden behöver projektgruppen följande: Bilder, samt all information som ska stå på hemsidan. Även växbobladen inscannade på datorn. Kontakt med kontaktperson Linda Jonsson vid frågor, funderingar och problem 15
9.3 Bilaga 3 Pert-schema 16
9.4 Bilaga 4 Gantt-schema 17
9.5 Bilaga 5 Användningstest Användningstest Välkommen till användningstest av Växbobygdens hemsida Du är inbjuden att testa växbobygdens hemsida Därför testar vi hemsidan Testet genomförs i syfte att få en blick av hur användarvänlig hemsidan är och om det är något som behöver ändras. Så här går det till Du kommer med hjälp av en observatör att testa växbobygdens hemsida. Observatörerna hjälper dig under testet och kommer att ställa frågor om hur du uppfattar hemsidan. På så sätt får vi kunskap om brister på hemsidan. Det kommer att finnas två observatörer närvarande. Observatören deltar för att göra anteckningar på eventuella problem. Med vänlig hälsning Andreas & Lars 18
Uppgift användningstest Fem uppgifter: 1. Hur blir du medlem i Växbo bygdegårdsförening? Resultat 17-åringen: Resultatet var relativt snabbt och lyckat. Testpersonen tittade snabbt igenom huvudmenyn. Då personen inte hittade något i huvudmenyn gick han direkt till fliken övrigt och hittade där hur man blir medlem. Resultat äldre kvinna: Det tog lite längre tid för denna tesperson då personen var ganska försiktig när hon letade i menyerna. När hon kom fram till rätt flik hittade hon rätt direkt. 2. Vad heter sekreteraren i Växbo bygdegårdsförening? Resultat 17-åringen: Detta test tog lite längre för 17-åringen, då han inte riktigt visst vart han skulle leta. Efter lite betänketid löst han problem snabbt. Resultat äldre kvinna: Denna var mycket enkel för kvinnan. Inga problem alls. 3. Leta fram och öppna det senaste numret av Växbobladet. Resultat 17-åringen: Efter att testpersonen tidigare var inne i fliken där Växbobladet finns löstes detta test utan några som helst problem. Resultat äldre kvinna: Samma gällde kvinnan. Inga som helst problem. 4. Vart hittar du verksamhetsberättelsen för år 2008? Resultat 17-åringen: Denna fråga tog även den lite längre tid för 17-åringen. Efter lite betänketiden kom personen ihåg vart han sett verksamhetsberättelse tidigare och på så vis löste han detta test. Resultat äldre kvinna: Testpersonen gick direkt till rätt flik och hittade rätt på en gång. Sammanfattning: Testpersonerna löste uppgifterna mycket lätt. 17-åringen påpekade att han inte varit i kontakt med vissa av sakerna vi hade med i testet och det var därför han behövde lite mer betänketid på dessa frågor. I övrigt var båda personer mycket nöjda med hur vi hade skapat hemsidan. 19
9.6 Bilaga 6 Kodexempel Figur 2. Kodexempel på startsidan från (www.vaxbobygden.se) (2010-06-02) 20
9.7 Bilaga 7 Skärmdump (Skärmdump från hemsidan, 2010-06-17) 21
9.8 Bilaga 8 Skärmdump (Skärmdump från hemsidan, 2010-06-17) 22