Kalmar, 2012-03-07 7,5 hp

Webbprojekt 1/1DV411 Handledare: Tobias Ohlson, Linnéuniversitetet, Institutionen för teknik

Kund: Mattias Lindqvist, MTL Marine

Författare: Hans Bentlöv, Linus Persson, Joakim Kendelt, Klas Lundin

Slutrapport

II

Sammanfattning

MTL Marine är ett nystartat företag som specialiserar sig på att sälja marina produkter så som

båtmotorer, Jetskis och Jetboats. Företaget är för tillfället återförsäljare till Suzuki-motorer och

Hison-Jetskies och Jetboats. Man tillhandahåller även reparationer av båtar och tillbehör,

vinterförvaring, polering av båtar, upptagning och sjösättning av båtar m.m.

Kunden ville ha en webbsida för att visa upp produkter och tjänster som erbjuds. Kundens

tyngst vägande önskemål var att på ett enkelt sätt själva kunna lägga till, ändra och ta bort

innehåll på webbsidan.

I övrigt fick vi ganska fria händer och kunde komma med egna förslag på idéer och

funktionalitet för webbsidan

III

Förord

Den här rapporten beskriver hur projekt MTL Marine har fortlöpt och är en del i kursen

1DV411 – Webbprojekt 1 som ger 7,5hp under 10 veckors tid på halvfart. Kursen ingår i

programmet Webbprogrammerare 120hp vid Linnéuniversitetet 2012.

Tanken var från början att jobba med kundens befintliga sida http://www.mtlcustom.se där han ville

ha ny design, ny webbshop och bättre ordning och reda på artiklar och artikelnummer i

databasen samt att själv lätt kunna lägga till och uppdatera produkter.

Projektet visade sig vara alltför stort och omfattande, inom given tidsram, eftersom vi skulle vara

tvungna att byta databas och lägga in alla produkter på nytt igen då sidan är byggd med gammal

teknik (klassisk ASP). Dessutom hade vi varit tvungna att sätta oss in i ett för oss väldigt

avancerat 3:e-parts-system, vid namn Specter, som bland annat hanterar kundens ekonomi och

lagerhantering. Lyckligtvis visade det sig på ett tidigt stadium att projektet skulle bli

ogenomförbart. Med ordvalet lyckligtvis åsyftas att vi snabbt kunde byta projekt till ett mer inom

tidsramen rimligt projektmål.

Vi beslutade gemensamt med kunden och vår handledare att lägga ner det projektet och påbörja

ett nytt. Nämligen Projekt MTL Marine.

Vi vill tacka vår handledare Tobias Ohlsson och vår kund Mattias Lindkvist för ett gott

samarbete och en lärorik kurs.

IV

Innehållsförteckning

Sammanfattning ................................................................................................. II

Förord ............................................................................................................... III

Innehållsförteckning .......................................................................................... IV

1. Inledning ...........................................................................................................1

1.1 Bakgrund .............................................................................................................................................. 1

1.2 Syfte ...................................................................................................................................................... 1

1.3 Kundens krav ...................................................................................................................................... 1

1.4 Mål ........................................................................................................................................................ 2

1.5 Tidsplan ................................................................................................................................................ 2

1.6 Projektorganisation ............................................................................................................................ 2

2. Metod ............................................................................................................... 3

3. Genomförande ................................................................................................. 4

3.1 De fyra faserna .................................................................................................................................... 4

Inception ................................................................................................................................................. 4

Elaboration ............................................................................................................................................. 4

Construction ........................................................................................................................................... 5

Transition ................................................................................................................................................ 5

4. Resultat & Diskussion ..................................................................................... 6

4.1.1 Gruppdynamik .............................................................................................................................. 6

4.1.2 Kommentera/dokumentera........................................................................................................ 6

4.1.3 Projekthantering ........................................................................................................................... 7

4.1.4 Bättre struktur i dokumentationen ............................................................................................ 7

4.1.5 Bättre rutin överlag. Tidsplanering ............................................................................................ 7

4.2 Kundkontakt ....................................................................................................................................... 7

4.3 Utvärdering av tidsplanen ................................................................................................................. 8

4.4 Hur fungerade informationsflödet mellan projektgrupp och kund? Vad kunde vi ha gjort

annorlunda? ................................................................................................................................................ 9

4.5 Blev användarhandledningen tillräckligt bra? Kunde vi gjort annorlunda? .............................. 9

4.6 Hur fungerade samarbetet inom och utom projektet? ............................................................... 10

4.7 Var projektmöten, styrgruppsmöten med flera lagom långa? Tillräckligt effektiva? Hölls

mötena tillräckligt ofta? Kunde vi gjort på annat sätt? ..................................................................... 10

V

4.7.1 Projektmöten ............................................................................................................................... 10

4.7.2 Styrgruppsmöten ........................................................................................................................ 11

5. Förslag på vidareutveckling ............................................................................ 12

5.1 E-butik ............................................................................................................................................... 12

5.2 Betalningsalternativ .......................................................................................................................... 12

5.3 Fokus på erbjudande ........................................................................................................................ 12

5.4 Optimering för äldre webbläsare ................................................................................................... 13

6. Övertagande organisation ............................................................................... 14

7. Avvikelser ........................................................................................................ 15

8. Slutsats ............................................................................................................ 16

8.1 Kundens krav .................................................................................................................................... 16

8.2 Slutresultat ......................................................................................................................................... 16

9. Bilagor ............................................................................................................. 17

Förord ................................................................................................................ 20

Användarguide för Wordpress ............................................................................ 21

Lägga till enskild produkt ................................................................................. 23

Uppdatera produkt ............................................................................................ 30

Ta bort produkt ................................................................................................. 33

Skriva en Nyhet ................................................................................................. 34

Uppdatera och ta bort Nyhet ............................................................................. 36

Lägga till produkt i menyn ................................................................................ 37

1

1. Inledning

1.1 Bakgrund

MTL Marine är ett nystartat företag som specialiserar sig på att sälja båtmotorer, jetskis

och jetboats. Företaget är återförsäljare av Suzuki -motorer och Jetskis och JetBoats

från Hison. Verksamheten drivs och ägs av Mattias Lindkvist. Mattias kommer

framledes att benämnas i rapporten som kund eller kunden. Företaget tillhandahåller

även reparationer av båtar och tillbehör, vinterförvaring, polering av båtar, upptagning

och sjösättning av båtar m.m. För närvarande har företaget överhuvudtaget ingen

webbsida och kan inte marknadsföra sig optimalt. Företaget vill ha en webbsida där

användaren själv kan lägga till, uppdatera och ta bort en produkt. Samt även skriva och

posta en aktuell händelse, erbjudande eller en nyhet.

1.2 Syfte

Grundsyftet med projektet var att fungera och jobba ihop som grupp bland personer

med olika kunskaper och programmeringsstilar, att lära oss samarbeta och arbeta

iterativt enligt SCRUM-modellen och Unified Process. Vi har också jobbat mot en

kund ”utanför skolans väggar” (en ”skarp” kund) och deadlines. Vi har också

fördjupat våra kunskaper inom sökmotoroptimering, PHP, JavaScript och Wordpress.

Vi har även blivit skickliga på versionshanteringsprogrammet TortoiseSVN, även om

vi från början hade våra dubier om det programmet. Som grädde på moset har vi

finslipat våra kunskaper om hur dokumentationen bör skötas i en för oss större grupp.

1.3 Kundens krav

Baskraven från kunden var en webbsida där han själv kunde lägga till och uppdatera en

produkt samt att kunna skriva nyheter eller aktuella händelser. Vi utökade kraven

något och implementerade bland annat ett plugin med kundens facebook-grupp, ett

SEO-plugin samt ett RSS-flöde från Svenska Sjöräddningssällskapet.

2

1.4 Mål

Målet med projektet var att ta fram en ny sida till MTL Marine för presentation av

deras tjänster och produktsortiment. Sidan ska följa företagets grafiska profil, sidan ska

även vara lättadministrerad och lätt att uppdatera.

1.5 Tidsplan

Från början ville kunden ha ny design, ny webbshop och bättre ordning och reda på

artiklar och artikelnummer i databasen samt att själv lätt kunna lägga till och uppdatera

produkter på sin sida http://mtlcustom.se

Vi missade de två första veckorna eftersom det visade sig vara alltför stort och

omfattande att byta databas och lägga in alla produkter på nytt igen, vilket vi hade varit

tvungna att göra då sidan är byggd med gammal teknik (klassisk ASP). Det visade sig

på ett tidigt stadium att projektet skulle bli ogenomförbart. Sedermera beslutade vi

gemensamt med kunden att lägga ner det projektet och påbörja ett nytt.

Vi skulle skapa en ny webbsida för framtida försäljning av båtmotorer, Jetskis och

JetBoat http://www.mtlmarin.se (eventuellt ska adressen bytas till mtlmarine.se).

Med tanke på ovanstående har vi hållit tidsplanen bra. Det vill säga vi har inte behövt

jäkta med någon implementation utan vi har följt vår Iterationsplan och vårat Burndown

chart.

1.6 Projektorganisation

Kommunikation mellan kunden och grupp har utförts av

kundkontaktsansvarige Linus Persson, som har haft kontakt med

ägaren av MTL Marine, Mattias Lindkvist. Kontakt har skett via

telefon och e-post. Gruppen har även haft möte med Mattias för

återkoppling och utvärdering av arbetet.

Samtliga gruppmedlemmar har fått prova på att vara projektledare för

gruppen minst två gånger.

3

2. Metod

Eftersom stor vikt låg på baskravet att kunden själv skulle kunna administrera

webbsidan, d.v.s. lägga till, ta bort och ändra produkter och undersidor beslutade

gruppen att arbeta med ett CMS (Content Management System -

innehållshanteringssystem) för enklare hantering av innehåll. Valet föll på Wordpress

eftersom det är en populär plattform med en stor användarbas, därmed kan det

underlätta att hitta information och få hjälp av andra användare om man stöter på

problem. En annan anledning att Wordpress användes var också att det bygger på det

populära scriptspråket PHP (PHP: Hypertext Preprocessor) som passande var en

gemensam nämnare för gruppens programmeringskunskaper.

Wordpress använder sig av relationsdatabasen MySQL för att lagra och hämta

information.

För att strukturera samt stillägga sidor användes XHTML och CSS (Cascading style

sheets).

Utvecklingsverktyg som används är Aptana Studio 3.0 samt Sublime Text för att skriva

kod, samt Adobe Photoshop CS2 för bildredigering och grafik. Lokal webbserver

tillhandahölls av servermjukvaran EasyPHP 5.3.7.0. För versionshantering har

Subversion-klienten SVN Tortoise använts. Webbsidan har testats i de senaste

versionerna av Mozilla Firefox, Google Chrome, Opera, Safari samt Internet Explorer

8.0 och 9.0. Dokumentation har skrivits med hjälp av Microsoft Office programpaket.

4

3. Genomförande

Arbetet i projektet har följt två avskalade varianter av de iterativa

utvecklingsmetodikerna Scrum samt Unified Process. Arbetsgången har delats in i

iterationer á sju dagar. Inför varje ny iteration utsågs en ny projektledare för gruppen.

Projektledarens uppgifter var att hålla koll på vad som skulle göras och gjordes, samt

att tidsplanen följdes och fylldes i korrekt.

3.1 De fyra faserna

Arbetet delades in i fyra olika faser enligt den iterativa utvecklingsmodellen Unified

Process; inception (förberedelse), elaboration (etablering), construction (konstruktion)

samt transition (överlämning). Varje fas innehåller olika uppgifter och delmål som bör

uppfyllas innan nästa fas inleds.

Inception

Under iteration ett till tre pågick inception-fasen. Denna fas tog längre tid än förväntat

eftersom på grund av byte av projekt i drog ut på tiden i början, något som vi dock

kunde rätta till på ett bra sätt. Under denna analyserades uppdraget för att få ut så

mycket information som möjligt för att komma igång med arbetet. Efter möte med

kunden sattes ett antal baskrav upp så vi fick en bild av hur projektet ska se ut. Vi kom

också överens om tekniska metoder i denna fas. Användningsfall och risklistor

påbörjades samt ett första utkast av en design skapades till som sedan skickades till

kunden för återkoppling. Större delen av fasen gick också ut på att lära oss de tekniker

som skulle användas. Till en början satte gruppen sig in i PHP-ramverket Codeigniter,

men eftersom projektarbete tog en snäv vändning i och med att vi fick en ny uppgift

började vi läsa dokumentation om Wordpress någon vecka in i fasen.

Elaboration

Elaboration- eller -etableringsfasen som den också kallas inleddes genom att säkerställa

att projektet är tekniskt genomförbart samt försöka ta bort de flesta riskerna som

fanns på risklistan. Vi analyserade och jämförde olika tillägspaket till Wordpress som

5

kunde uppfylla våra baskrav, t.ex sökmotoroptimering samt högre användarvänlighet,

som sedan skulle implementeras i construction-fasen.

Construction

I denna fas lades största fokus på att skriva kod samt installera och konfigurera

tillägspaket till Wordpress för att uppfylla baskraven vi hade fått ut i tidigare faser.

Tillsammans med produkten tillverkades även en användarmanual som kunden kan

använda sig av för inlärning av det nya systemet.

Transition

När transition-fasen inleddes såg vi till att se över vad vi hade kvar att göra, började

avsluta och ”Knyta ihop” arbetet vi höll på med. Fokus låg på finslipningar i kod som

att ta bort onödiga kommentarer och allmänt städa upp fula kodrader, samt att se över

dokumentationen och ändra där det behövdes. Ett möte bokades in med kunden där

vi visade upp produkten i relativt färdigt utförande. Kunden var mycket nöjd.

6

4. Resultat & Diskussion

Under arbetets gång har vi stött på flera hinder. I början fick vi en uppgift vars

inlärningstid skulle ligga på långt över acceptabel längd för att kunna hinna få ut en

fungerande produkt inom projektets tidsram. Vi fick då ett nytt uppdrag från vår kund

som var mer genomförbart för denna kurs. På grund av detta kom vi igång med

projektet två till tre veckor in i kursen. Trots denna komplikation räddade vi

situationen förvånansvärt bra genom att avklara inceptionfasen så snabbt som möjligt.

Versionshanteringen var till en början lite småkrånglig men med tiden fick vi en god

rutin på det utan några speciella komplikationer. Det enda som SVN-klienten inte

gillade var när det blev konflikt i tidsrapporten som var sparad som en exceldokument.

Det var då ganska svårt att sätta ihop (merga) de tidigare revisionerna med den

senaste, det fungerade bäst på rena textfiler.

4.1.1 Gruppdynamik

Arbetet i gruppen har fungerat väl, vi har haft bra kommunikation inom gruppen. Dela

information mellan gruppmedlemmarna har fungerat bra och det har vi löst med hjälp

utav en intern blogg som sedan övergavs till förmån för en låst grupp på facebook.

Där har möten bestämts och annan viktig information meddelats till hela gruppen. Vi

har hjälpt varandra och varit generösa med att påpeka det som är bra och gett varandra

beröm genom projektets gång.

4.1.2 Kommentera/dokumentera

Något som gick mindre bra är hur vi kommenterade och dokumenterade olika

funktioner som t.ex. plugin eller hur mallar har utvecklats. All kod som vi skrev borde

dokumenteras bättre och tydligare så de andra i gruppen kan läsa och förstå vad just

den funktionen gör. Detta problem är något som hängt med under hela projektets

gång men det är mest fram mot slutet vi uppfattat det som ett problem med bristfälliga

kommentarer. Exempelvis blev det ibland problem när vi skulle gå tillbaka och ändra

kod som skrivits några veckor tidigare där man själv inte varit med och utvecklat.

Kommentera kod och hantera dokumentation bättre är något vi i gruppen kommer ta

med som en erfarenhet till framtida projekt.

7

4.1.3 Projekthantering

För alla i gruppen är det första gången vi jobbar i ett projekt av den här typen. Det är

nog ganska självklart att mycket hade kunnat göras annorlunda när man ser tillbaka på

projektet nu i efterhand. Strukturera och planera projektet vecka för vecka kunde

gjorts bättre, inte bara genom iterationsplaner och burdownchart’s. Någon form av

enkelt projektsystem hade med fördel kunnat användas för att strukturera upp

planeringen och lätt kunna få en överblick av vad som skall göras, vad som är klart och

så vidare. Projektledaren för varje vecka skulle kanske varit tydligare på att leda

gruppen mot iterationens plan på ett tydligare sätt.

4.1.4 Bättre struktur i dokumentationen

Att hålla god ordning i dokumentationsstrukturen är väldigt viktigt, och ju längre

projektet fortgår, ju mer dokumentation blir det. Att redan från början ha klart för sig

hur dokumentationsstrukturen skall byggas genom projektets gång är viktigt inser vi

och även detta är en brist i vårt projekt att det har varit lite kaos i vår

dokumentationsstruktur. Men något som vi tar med oss till kommande projekt att

strukturera dokumentationen bättre.

4.1.5 Bättre rutin överlag. Tidsplanering

Låt oss återkomma till att det är vårt första projekt av den här typen så rutinen finns

inte riktigt där ännu. Det är något vi bygger upp i kommande projekt och att vi tar

med oss det som var mindre bra till kommande projekt och undviker att göra de

misstagen igen. Angående tidsplaneringen så ligger vi en bra bit under 180-timmar per

gruppmedlem, men det har sina förklaringar som står mer beskrivet under utvärdering

av tidsplanen.

4.2 Kundkontakt

De två första veckorna träffade vi vår kund på plats men vi kom överrens om att det

var lite onödigt att träffas varje vecka då kunden har sin verksamhet i Mönsterås och vi

befinner oss i Kalmar. Sedermera blev olyckligtvis kontakten något knapphändig på

grund av en brandolycka där butikens lager blev rökskadat och vår kund av naturliga

8

skäl inte kunde vara lika aktiv som vi önskat. Via e-post med enstaka svar har vi sedan

skött kontakten. Mot slutet av projektet träffade vi vår kund och eventuellt kommer vi

att besöka honom ytterligare en gång för att demonstrera sidan och dess funktioner

lite mer grundligt.

Linus har skött vår mail-korrespondens med kunden.

4.3 Utvärdering av tidsplanen

Vår tidsplan på 180 timmar per person har vi klarat att hålla. Vi ligger till och med

under tidsplaneringen och det beror på en del olika faktorer som uppkommit under

projektets gång.

Projektet fick en oväntad vänding i vecka två som gjorde att vi fick tänka om, börja

planera om och undersöka nya utmaningar som vi ställdes inför. Eftersom projektet

med att bygga en webbshopp med ett system från Specter avblåstes på grund av att det

var alldeles för stort och det var hantering av pengar inblandat valde vi i gruppen tidigt

att avblåsa det och vi tog kontakt med kunden och förklarade att vi inte ville ha det

ansvaret att utveckla ett system som hanterar så pass mycket pengar.

Nytt projekt drog igång och vi fick uppgiften att utveckla MTL Marine´s nya

webbsida. Eftersom vi valde att använda Wordpress som publiceringssystem fick vi

väldigt mycket till skänks. Vår fokus i början var att ta fram en layout av den

kommande webbsidan.

I och med att vi valde Wordpress behövde vi ej utveckla ett administrationsgränssnitt

och det ledde till att vi sparade in många timmar. När vi hade en design klar var det

väldigt mycket finjusteringar, utvärderingar och analyser av olika plugin.

När projektet började lida mot slutet fick vi nästan leta jobb, vi har bland annat lagt till

extra funktionalitet som kunden inte alls hade nämnt, t.ex. integration med Facebook

och visning av ett RSS-flöde från Svenska sjöräddningssällskapet.

Vi var fyra personer i gruppen vilket var väldigt mycket för denna typ av projekt som

det faktiskt blev i slutändan. Vi kände oss överbemannade och det är nog den största

anledningen till att vi ligger under tidsmässigt. Det finns dock fördelar med att ligga

under budget, skulle detta vara ett projekt med pengar inblandat, betalt per timme, så

9

hade uppdragsgivaren antagligen varit nöjd med att få ett system levererat med bättre

och väl genomarbetad webbsida och att budgeten har hållits under planerat.

4.4 Hur fungerade informationsflödet mellan

projektgrupp och kund? Vad kunde vi ha gjort

annorlunda?

Informationsflödet mellan projektgruppen och kunden har fungerat bra med tanke på

allt som hänt. En brand i kundens lokaler gjorde att kontakten blev en aning bristfällig

under några veckors tid. Det är dock inget vi kunnat påverka och det är fullt

acceptabelt att kunden lägger sin energi på allt som rör branden, försäkringar med

mera. Vi fick dock bra tips från handledaren hur vi skulle agera mot vår kund i detta

läge.

Den huvudsakliga kontakten har skett via mejl, vi har även haft ett antal möten med

kunden på hans kontor i Mönsterås.

Ibland har det varit lite långa väntetider på material från kunden. Det har dock inte

varit något som försenat vårt arbete utan vi har kunnat jobba med t.ex. temporära

bilder under tiden.

4.5 Blev användarhandledningen tillräckligt bra?

Kunde vi gjort annorlunda?

I början var det långa diskussioner om hur vi skulle gå tillväga med vårt första projekt

eftersom det kändes ostrukturerat och extremt stort. När vi sedan bestämde oss för att

byta projekt, till att skapa webbsidan MTLMarine, kändes det bättre och mer rättframt.

En ”röd tråd” uppenbarade sig.

Dock var inte problemen över för ”problemgruppen”, som handledaren ironiskt nog

kallade oss. Vår kund blev ofrivilligt inaktiv på grund av olyckan i hans garage där

andra bestyr, av naturliga skäl, blev mer prioriterade.

Handledningsmötena kom framöver mer att handla om vad vi skulle ha för

extrafunktioner på webbsidan och hur vi skulle implementera dem även om diverse

andra spörsmål vädrats som t.ex. teknik, versionshantering och förfaranden med en

10

kund som ej varit önskvärt aktiv. Dessutom har det varit en trygghet att veta att vi haft

möjlighet till handledarens hjälp utöver schemalagda tider.

Vi tycker att handledningstillfällena varit bra och givande eftersom vi fått förslag och

idéer samt att vi på ett konstruktivt sätt kunnat diskutera vad som bör finnas med på

en modern webbsida av den här omfattningen, i förhållande till vad kunden önskade

sig.

4.6 Hur fungerade samarbetet inom och utom

projektet?

För att sporra gruppen inför projektet och för att lära känna varandra lite bättre hade

vi oss en så kallad ”Kick Off”. Vi träffades i en mer avslappnad miljö och resonerade

om allt mellan himmel och jord, vilket var välbehövligt eftersom det inte enbart

handlade om skolan och allt däromkring.

Som helhet vill vi påstå att gruppen har fungerat bra. Vi har haft förhållandevis

regelbundna arbetstider där vi i stort sett dagligen träffats och diskuterat olika förslag

och lösningar. Vi har även varit duktiga på att ta för oss av de arbetsuppgifter som

legat för hand och inte skjutit upp arbetsbördan. Vid de tillfällen vi har behövt samtala

om mer enskilda frågor har vi använt lokaler där vi varit ostörda.

Forum för våra spörsmål var från början en lösenordskyddad blogg men blev

sedermera en privat facebook-grupp eftersom alla av oss dagligen nyttjar facebook.

4.7 Var projektmöten, styrgruppsmöten med flera

lagom långa? Tillräckligt effektiva? Hölls mötena

tillräckligt ofta? Kunde vi gjort på annat sätt?

4.7.1 Projektmöten

Projektmöten har vi haft varje vecka på måndagar inför varje iteration där vi gått

igenom vad som gjordes föregående iteration, vad som blev klart och om allt inte blev

klart, vad det var och berodde på. På mötet bestämdes också vad som ska göras den

kommande iterationen. Längden på mötena har varit mellan 30 och 60 minuter. Vi

11

upplever att det varit bra med veckovis möten för att stämma av vad som skett i

projektet, för att snabbt kunna identifiera eventuella problem.

4.7.2 Styrgruppsmöten

Då projektet har varit relativt litet har inte behovet av en formell styrgrupp funnits,

istället har alla inom gruppen deltagit i beslutsprocessen. Vi har haft ett par, tre stycken

möten med berörda parter då vi suttit ned och resonerat oss fram till vad som har

gjorts och vad som ska prioriteras i framtiden. Vi upplever att mötena inte alltid varit

så givande då kunden inte haft tid eller inte gett tillräckligt med feedback. Här hade vi

kunnat ha tydligare frågeställningar för att få bättre feedback.

12

5. Förslag på vidareutveckling

Det finns alltid saker att vidareutveckla på en webbsida. Kundens webbplats är inget

undantag och det går att göra väldigt mycket. Wordpress som grund gör det relativt enkelt

att bygga vidare på och andra utvecklare kan enkelt sätta sig in i webbsidan och göra nya

funktioner.

5.1 E-butik

Idag är webbsidan med en informations sida som visar upp kundens produkter. För att

kunna erbjuda försäljning till sina kunder via webbsidan så kan en e-butik

implementeras. Det möjliggör ökad försäljning och målgruppen kan utökas till hela

landet och även hela världen egentligen då kunderna inte behöver besöka butiken

fysiskt för att köpa produkter. Dessutom är webbsidan förberedd för engelsktalande

besökare.

5.2 Betalningsalternativ

Om en e-butik utvecklas är det en god idé att ta fram olika betallösningar till kunderna

som använder e-butiken. Det finns många olika tjänster som erbjuder olika former av

betallösningar, t.ex. kortbetalning och även Paypal-betalningar.

5.3 Fokus på erbjudande

Att kunna visa upp på ett tydligt sätt att en speciell produkt ingår i en kampanj eller

erbjudande så kan ett system för detta utvecklas. Det kan med fördel skötas från

administrationsgränsnittet och tydligt markeras på startsidan och sin produktsida att

denna produkt ingår i en kampanj just nu.

Ett erbjudande/kampanjsystem kan öka försäljningen av den produkten och det leder

till ökad lönsamhet för MTL Marine.

13

5.4 Optimering för äldre webbläsare

Finslipa webbsidan så den fungerar i äldre webbläsare är alltid något man kan lägga ner

tid på. Vi har fått sidan att fungera bra i IE9, IE8 och hyfsat bra i IE7. Om viljan finns

att ta fram stöd för webbläsare äldre än IE7 så kan mycket göras för att ta fram kod

som fungerar även på äldre Internet Explorer versioner.

14

6. Övertagande organisation

MTL Marine kommer ta över ansvaret för webbsidan efter kursens avslutande. Det

kommer antagligen bli ett möte med MTL Marine efter kursens slut för att överlämna

och hålla en kort utbildning av hur man lägger till produkter, redigerar sidor och

grundläggande hur Wordpress fungerar. En tydlig manual lämnas över till MTL

Marine som beskriver de grundläggande funktionerna.

Eventuell support kan tänkas vara aktuell en tid efter överlämnandet till MTL Marine.

15

7. Avvikelser

De baskrav vi fick av vår kund har till fullo uppfyllts (se kundens krav). Därmed har inga

avvikelser förekommit. Däremot har vi implementerat extra funktionalitet som kunden

från början inte nämnt, men som i slutänden behagade och gladde kunden. Som

tidigare nämnts implementerade vi ett facebook-plugin, ett SEO-plugin, ett RSS-flöde

från Svenska sjöräddningssällskapet, ett plugin med ”stöd för flerspråkighet” (fritt

översatt från engelskans ”multilingual content support”).

Dessutom gjorde vi administrationsgränssnittet mer användarvänligt genom att bland

annat installera ett plugin för att visa trädstruktur för alla de sidor som webbsidan

begagnar sig av. Utöver baskraven sammanställde vi även en Wordpress-manual för

lättare administration och skötsel av webbsidan.

16

8. Slutsats

Projektet har varit lärorikt och givande ur olika aspekter men den kanske största

erfarenheten att ta med sig i framtiden är hur ett projekt kan te sig om olyckan är

framme (se Kundkontakt). Dock med undantaget att om kunden hade varit en betalande

sådan kanske projektet hade lagts på is eller tvingat kunden till ett större engagemang

(Enligt erfarenhet tenderar pengar att ha den effekten). De gånger vi mött vår kund har vi

däremot alltid blivit väl mottagna och han har alltid uppvisat ett gediget intresse och

engagemang. Kunden lyssnade och tog till sig våra förslag om olika lösningar gällande

webbsida och skaffade sig en ny domän och ett nytt webbhotell till mtlmarin.se

Det har även varit kul och nyttigt att arbeta i grupp, speciellt med tanke på att alla i

gruppen ej jobbat tillsammans tidigare. Även om vi inte alltid har haft samma

uppfattningar om saker och ting är alla av oss ganska diplomatiska och kan anpassa oss

efter varandras åsikter. Grupparbetet har sammanfattningsvis fungerat bra och vi har

växt både som grupp och individer.

Att ha tillgång till en handledare en gång i veckan har känts tryggt då vi har kunnat

vädra våra problem och få förslag på åtgärder.

8.1 Kundens krav

Baskraven från kunden var en webbsida där han själv kunde lägga till och uppdatera en

produkt samt att kunna skriva nyheter eller aktuella händelser. Vi utökade kraven

något och implementerade ett plugin med kundens facebook-grupp, ett SEO-plugin

samt ett RSS-flöde från Svenska Sjöräddningssällskapet.

8.2 Slutresultat

Kunden är väldigt nöjd med produkten, webbsidan mtlmarin.se. Endast smärre CSS-

justeringar kommer att utföras innan slutleverans. Slutleverans beräknas bli vecka 15

2012 då vår kund återvänder efter två veckors ulandsvistelse.

- Jag är jättenöjd, sa vår kund om produkten vid delleveransen den 8 mars 2012

Avslutningsvis betecknar vi det som ett gott betyg, och vi vill påstå att vi mer än väl

uppfyllt kundens krav.

17

9. Bilagor

Bilaga 1: Wordpress Användarguide

18

qwertyuiopasdfghjklzxcvbnmqwert

yuiopasdfghjklzxcvbnmqwertyuiop

asdfghjklzxcvbnmqwertyuiopasdfgh

jklzxcvbnmqwertyuiopasdfghjklzxc

vbnmqwertyuiopasdfghjklzxcvbnm

qwertyuiopasdfghjklzxcvbnmqwert

yuiopasdfghjklzxcvbnmqwertyuiop

asdfghjklzxcvbnmqwertyuiopasdfgh

jklzxcvbnmqwertyuiopasdfghjklzxc

vbnmqwertyuiopasdfghjklzxcvbnm

qwertyuiopasdfghjklzxcvbnmqwert

yuiopasdfghjklzxcvbnmqwertyuiop

asdfghjklzxcvbnmqwertyuiopasdfgh

jklzxcvbnmqwertyuiopasdfghjklzxc

Användarguide

19

Innehållsförteckning

Förord ................................................................................................................. 20

Användarguide för Wordpress ........................................................................... 21

Lägga till enskild produkt .................................................................................. 23

Uppdatera produkt ............................................................................................. 30

Ta bort produkt .................................................................................................. 33

Skriva en Nyhet .................................................................................................. 34

Uppdatera och ta bort Nyhet ............................................................................. 36

Lägga till produkt i menyn ................................................................................ 37

20

Förord

Menyn är uppbyggd enligt en trädstruktur, hierarkiskt. Exemplet ”Båtmotorer” har

”Suzuki” under sig då det kan finnas fler leverantörer än just Suzuki till en båtmotor.

Under Suzuki följer Båtmotor-modellerna från Suzuki. Exempelvis DF300.

Båtar ligger högst upp i hierarkin och under båtar finns Jetskies, Jetboat och

Gummibåtar. Under Jetskies finns modellerna för Jetskies exempelvis HS-006J5B

Limited 225.

Den här strukturen kan byggas ut hur långt som helst.

21

Användarguide för Wordpress

Det här är en manual för hantering de viktigaste funktionerna i Wordpress. Guiden tar

upp hur Ni går tillväga för att lägga till, uppdatera och ta bort en produkt från

webbsidan (exempelvis en motor från Suzuki). Samt hur Ni skriver och publicerar en

nyhet.

1. Börja med att surfa till webbadressen http://www.mtlmarin.se/wp-admin och ange

Ert användarnamn (1) och lösenord (2).

Logga sedan in (3).

2. Ni befinner er nu i ”Adminpanelen”. Det är härifrån Ni sköter allt administrativt

arbete såsom att lägga till en ny produkt.

22

23

Lägga till enskild produkt

1. Logga in om Ni inte redan är inloggad. I Adminpanelen, för muspekaren över

”Sidor” i vänstra menyn. En ny meny fälls ut.

Klicka på ”Skapa ny”.

2. Ange önskad rubrik samt önskat innehåll. Både för svenska och engelska (om så

önskas)

24

När svenskt innehåll är skrivet klicka på fliken ”English” för att skriva innehållstexten

på engelska.

2.1 (Om bild önskas) Klicka på Ladda ”Upp/Infoga”

2.2 Klicka på ”Välj filer” i Rutan som dyker upp

2.3 Leta upp bilden i datorn och klicka ”open/öppna”

25

2.4 Vald bild syns nu tillsammans med lite fakta om bilden. Fyll i fälten Titel,

Alternerande text och Rubrik

26

2.5 Klicka först på ”Använd som utvald bild” för att få en ”tummnagel”, en miniatyr

av bilden. Klicka sedan på ”Infoga i innehåll”.

2.6 Bilden har lagts till.

Observera att Ni behöver ladda upp en bild för det engelska innehållet även om Ni

redan gjort så för den svenska sidan.

3. Ändra fältet Förälder (till höger om innehållet i panelen ”Sidattribut”) till önskat

alternativ. Vill man T.ex. lägga till en ny Suzuki-båtmotor anges ”Suzuki” som

förälder.

27

4. Ändra fältet ”Mall” till ”Produktsida”

28

5. Nedanför textformuläret och fältet ”Wordpress SEO av Yoast” hittar du fältet

”Egna fält”. I dropdown-menyn, välj ”Pris” och fyll i önskat antal kronor

29

6. Nu är Ni snart klar med Er sida och klickar på ”Publicera”, nästan högst upp till

höger

7. Klart. Ni får en visuell bekräftelse att sidan har blivit

publicerad

30

Uppdatera produkt

Navigera till sidan som ska uppdateras. I exemplet utgår vi ifrån att produkten (sidan)

”kl9.9” ska uppdateras.

1. För muspekaren över Sidor så att den nya menyn fälls ut.

Klicka på ”Sidor Tree View”. Alternativt letar Ni upp aktuell sida i Adminpanelens

”Sidor Tree View” Där finns även ett fält för att söka efter sidan om så önskas.

2. I detta fall återfinns produkten kl9.9 hiarktiskt under ”Båtmotorer” -> ”Suzuki”->

kl9.9

Klicka på den lilla pilen strax till vänster om Båtmotorer, undermenyn fälls ut och

Suzuki visas. Även Suzuki har en lite pil till vänster om sig. Klicka på den. Nu syns

alla båtmotorer. Klicka på KL9.9

31

3. Sidan visas och högst upp återfinns

rubriken ”Redigera sida”

Markera det som ska redigeras, i detta fall texten under den svenska fliken

4. Byt ut texten mot önskad text. I detta exempel mot den svenska versionen av texten

32

5. När texten är till belåtenhet, klicka på ”Uppdatera”, nästan högst upp på höger sida

6. Sidan är nu uppdaterad

33

Ta bort produkt

1. Logga in (Högst upp i manualen) om ni inte

redan är inloggad. Ni befinner er nu i

Adminpanelen. Klicka på sidan som ska tas

bort, i detta exempel KL9.9

2. Nu befinner Ni er i ”Redigera

sida”.

Till höger i kolumnen ”Publicera” klickar Ni på ”Flytta till papperskorgen”

3. Ni kommer till ”Sidor” där alla sidor på webbsidan är listade.

”Posten flyttad till papperskorgen” visas som ett kvitto på att allt gått rätt till.

Alternativet ”Ångra” finns i fall ett misstag gjorts.

4. Ni har nu tagit bort en produkt från webbsidan

34

Skriva en Nyhet

1. När ni är inloggad, för muspekaren över ”inlägg” till höger i Adminpanelen. En ny

meny fälls ut. Klicka på ”Skapa nytt”.

2. Fyll i Rubrik på Svenska (1) och engelska(2), om så önskas. Fyll även i

innehållstexten (3) för nyheten. Klicka sedan på fliken ”English” (4) för att skriva

nyheten på

engelska.

3. Önskas bild i nyheten följ punkt 2.1 högre upp.

4. När Ni känner er färdig med nyheten, klicka på ”Publicera”

35

5. Inlägget publicerat. Ni är nu klar.

36

Uppdatera och ta bort Nyhet

Vid uppdatering eller radering av nyheter följ Uppdatera produkt samt Ta bort

produkt då tillvägagångssättet är likadant.

37

Lägga till produkt i menyn

Ibland vill man lägga till en produkt eller kategori i huvudmenyn. Se ”lägga till enskild

produkt”

1. Logga in (Högst upp i manualen) om ni inte redan är inloggad.

2. För muspekaren över ”Utseende”, en meny fälls ut. Klicka på ”Menyer”.

Ni befinner Er nu i Menyer.

3. Klicka på ”main” om den inte redan är

vald

4. Gå ner lite i sidan till ”Sidor”. Klicka på fliken ”visa alla” (1) om den inte är vald.

Leta upp den sida Ni vill lägga till. Klicka i den lilla fyrkantiga rutan till vänster om

sidan. När en bock syns i rutan är den vald (2). Kicka på knappen ”Lägg till i meny”

när ni är klar (3).

38

Det kan hända att texten ser lite egendomlig ut. Det händer när Sidorna har en

engelsk och en svensk översättning.

Precis till höger syns de sidor som sedan tidigare är synliga i menyn.

5. När ni klickat på ”Lägg till i meny” läggs sidan till längst ner av de sedan tidigare

befintliga sidorna

39

Skulle vi i det här stadiet klicka på knappen ”Spara meny” skulle sidan hamna högst

upp i trädstrukturen som exempelvis ”Nyheter” eller ”Om oss”.

Vi vill i detta exempel att sidan ”Smartab” hamnar under kategorin ”båttillbehör” så

att den kategorin får en undermeny, likt Begagnat.

6. För att åstadkomma det tar vi tag i nyskapade smartab-fliken med musen och drar upp

den till önskad plats. I vårt fall ska den ligga under ”Båttillbehör”.

För att skapa en undermeny till båttillbehör måste fliken ha ett litet ”avstånd” (2) från

vänstersidan, vilket betyder att sidan är underordnad ”Båttillbehör”. Fliken

”snäpper” in där den passar, en streckad ruta syns där fliken kan ligga (3). Släpp den

där.

40

Skulle sidan i stället ligga i kant med ”Båttillbehör” (1) skulle det inte skapas en

undersida, utan en ny huvudkategori med i detta fall Smartab.

7. Klicka på ”Spara meny” när ni är klar

Menyn är nu uppdaterad och klar.

41

Linnéuniversitetet

Adress 391 82 Kalmar eller 351 95 Växjö

Telefon (växel): 0772-28 80 00

info@lnu.se