plats och app
Oliver Färnskog
Självständigt arbete på grundnivå
MITTUNIVERSITETET
Institutionen för Informations-system och teknologi Examinator: Mattias Dahlgren, mattias.dahlgren @miun.se Handledare: Mikael Hasselmalm, mikael.hasselmalm @miun.se Författare: Oliver Färnskog, olfa1902 @student.miun.se
Utbildningsprogram: TWEUG, Webbutveckling, 120 hp Huvudområde: Datateknik
Termin, år: VT, 2021
Sammanfattning
Målet med detta arbete och projekt har varit att skapa en webbsida med ända- mål för att underlätta för en hantverkare och deras företag. Detta har gjorts med hjälp av Worksystem som hade många bra idéer och synpunkter under hela pro- jektets gång, samt kunde erbjuda ytterligare hjälp från företagets grafiker för att förbättra användarupplevelsen, både på datorer men främst på mobila enheter.
Webbplatsen har skapats genom Wordpress och via resursen Themify för att bygga sidan, samt pluginet SuperPWA som hjälpt till för att omvandla sidan till en nedladdningsbar applikation. Utöver detta har en egen CSS-kod använts för att finjustera webbsidans innehåll. I slutändan blev företaget mycket nöjda med arbetet och endast ett fåtal av de idéer och feedback som jag fick av företaget blev ej genomförda. Rapporten går igenom arbetet som dokumenterats och som slutar i den responsiva och optimerade Wordpress-sida med funktionalitet för att laddas ned som en mobil applikation.
Nyckelord: Webbutveckling, Wordpress, Themify, SuperPWA, CSS, Responsiv design, Webboptimering, Mobil applikation.
Abstract
The goal of this work and project has been to create a website with the purpose of making it easier for craftsmen and their business. This has been done with the help of Worksystem who have had many good ideas and inputs throughout the project, and was able to offer additional help from the company's graphics staff to improve the user experience, both on computers but mainly on mobile devices. The website has been created through Wordpress and via the resource Themify to build the page, as well as the plugin SuperPWA which helped to turn the page into a downloadable application. In addition, a custom CSS code has been used to fine-tune the content of the web page. In the end, the company was very satisfied with the work and only a few of the ideas and feedback I received from the company were not implemented. The report goes through the work that has been documented and which ends in the responsive and optimized Wordpress page with functionality to be downloaded as a mobile application.
Keywords: Web development, Wordpress, Themify, SuperPWA, CSS, Respon- sive design, Web optimization, Mobile application.
Innehållsförteckning
Sammanfattning...2
Abstract...3
Terminologi...6
1 Introduktion...1
1.1 Bakgrund och problemmotivering...1
1.2 Övergripande syfte...2
1.3 Konkreta och verifierbara mål...2
1.4 Översikt...3
2 Teori...4
2.1 Wordpress...4
2.2 Themify...5
2.3 Responsiv Design...6
2.4 Tillgänglighet...7
2.5 Användbarhet...8
3 Metod...10
3.1 Introduktions- och vecko-möten...10
3.2 Mockups och skisser...10
3.3 Wordpress...10
3.4 Themify...10
3.5 Yoast SEO...11
3.6 SuperPWA...12
4 Konstruktion...13
4.1 Beställarkrav...13
4.2 Webbplatsskiss...13
4.3 Wordpress-konfiguration...21
4.4 Startsidan...21
4.5 Timetracker...22
4.6 Låsstatus...24
4.7 Fordonsvikt...24
4.8 Timetracker - admin...24
4.9 Inverter-sida...25
4.10 Belysning-sida...26
4.11 Möte med Grafiker...28
5 Resultat...37
5.1 Startsidan...37
5.2 Timetracker...39
5.3 Timetracker - Admin...40
5.4 Fordonsvikt...41
5.5 Låsstatus...42
5.6 Inverter...43
5.7 Belysning...44
5.8 Färgkontrast...46
5.9 Pagespeed Test...48
6 Slutsatser...49
6.1 Etisk och social diskussion...49
Källförteckning...51
Terminologi
Akronymer/Förkortningar
IoT Internet of things, benämning på att fler av våra vardagliga föremål kopplas online.
Word of Mouth Marknadsföringsstrategi som går ut på att sprida sitt företags rykte från person till person.
SEO Förkortning för Search Engine Optimisation, eller sökmotoroptimering på svenska
Responsiv Design Design som gör en webbplats bättre lämpad och anpassad för besökare på mobila enheter
APK Filformat för applikationer tillhörande Googles Android-operativsystem
IPA Filformat för applikationer tillhörande iOS/
Apple:s-operativsystem
1 Introduktion
Företaget Worksystem är ett företag som säljer belysning, inredningar samt and- ra tillbehör för skåpbilar och övriga bilar, detta för att kunna erbjuda kunden en skåpbil med mer utrymme för verktyg samtidigt som bakutrymmet blir mer strukturerat med lådor och skåp för att snabbt hitta rätt verktyg.
Företaget har i och med den ökade digitaliseringen och introduktionen av IoT(Internet of Things)[1] planer för att skapa en applikation för den ”smarta hantverkaren” som genom olika delar Worksystem säljer kan koppla upp sig till bilen och kan svara på vart man varit under en arbetsdag, hur mycket bilen vä- ger, hur mycket batteri som finns i bilen, ifall den är låst eller ej samt andra funktioner som då erbjuds till kunden.
Mitt uppdrag i detta arbete är alltså att skapa en körbar prototyp och Wordpress- webbsida som jag sedan genom plugins och tillägg kan konvertera till en appli- kation för att kunna ladda upp till ex. Google:s Play butik och Apple:s App sto- re.
1.1 Bakgrund och problemmotivering
På senare år har digitalisering och Internet of Things(IoT) växt något enormt, detta medför både nackdelar i form av ökad risk för intrång och åtkomst till allt från din bil och dator då de sannolikt använder samma wifi-nät som din bröd- rost, men också fördelar då man kan ta nytta av internets styrka i mer och mer av de vardagliga föremålen.
Den webbsida- och applikationsprototyp jag har i uppgift att göra ska då funge- ra som en exempeldesign varifrån företaget kan visa upp till investerare och sty- relsen för att på så sätt ge en mer konkret bild av vad det är som man skulle ska- pa ifall idén skulle sjösättas och bli verklighet.
Affärsnyttan från projektet kommer ifrån att man vid en utveckling av appen kan erbjuda dessa funktioner till användaren som då underlättar deras arbete och därigenom kan erbjuda gps och andra tillägg till sin bil för att sedan sälja till de kunder som vill komma åt funktionerna i appen. Detta tillsammans med det positiva faktum att man i början erbjuder appen gratis och därmed genererar en kundkrets till appen som ger bra reklam enligt ”Word of Mouth”[2] mark- nadsföring samt förblir lojal till företaget vid andra tillägg och modifikationer av sitt fordon.
Applikationen har då i uppgift att på olika sätt via GPS på mobiltelefonen mar- kera vart hantverkaren har befunnit sig under en arbetsdag. Detta underlättar då betydligt för hantverkaren då hen enkelt kan se vart och hur länge hen har be-
mycket arbete som utförts under den arbetsdagen. Detta gynnar såklart även hantverkarföretaget då rätt fakturering ökar chansen att alla arbeten som utförts tas betalt av företaget samt minskar risken för fel- eller dubbelfakturering som värst kan leda till dålig reklam för företaget och missnöjda kunder.
En annan funktion som Worksystem skulle vara intresserade av är en viktmätare på bilen. En sådan funktion skulle underlätta för budbilar och hantverkare att se hur mycket som man kan lasta på bilen och minska övervikt. Detta skulle i praktiken tillåta ex. hantverkare att se ifall det är klokt att lasta på den sista ce- mentsäcken eller inte. En sådan funktion skulle isåfall minska antalet personer som blir bötfällda eller blir av med körkortet på grund av för stor vikt på sitt fordon, något som utan tvekan blir en stor ekonomisk belastning för hantverka- rens företag under en period då hantverkaren inte har tillgänglighet till bil.
Även funktionalitet för att se när bilen måste startas vid användning av verktyg och hur länge till man kan använda den med samma energiförbrukning skulle vara användbart för Worksystem att ha med i appen. Samt att en indikator på ifall fordonet är låst eller ej samt någon indikator om att man kan låsa bilen ifall den är olåst via appen skulle också kunna underlätta den ”smarta hantverkaren”.
Dessa funktioner skulle även kunna ge notiser till användaren som varnar när batteriet på bilen är lågt samt ifall billarmet går, för ytterligare värde till använ- darna.
1.2 Övergripande syfte
Arbetets övergripande mål och syfte ligger i att undersöka vilka funktioner som kan ge mervärde för den smarta hantverkaren genom resonemang och dialog med företaget Worksystem med erfarenhet ifrån just hantverkare och andra per- soner i vad man skulle vilja se i en applikation för den ”smarta hantverkaren”.
Resultatet av arbetet kan sedan användas av Worksystem för att presentera ett förslag om hur en verklig applikation för den smarta hantverkaren kan se ut och fungera för investerare och företagets styrelse.
1.3 Konkreta och verifierbara mål
Arbetets mål är att skapa en Wordpress-sida som sedan genom tillägg kan om- vandlas till en applikation för installering och testkörning som senare kan kom- ma att användas av företaget Worksystem.
För att nå detta mål så kommer ett antal krav och mål att behöva nås för att nå ett tillfredsställande resultat. Dessa är:
• En wordpress-sida behöver skapas som utgår ifrån den smarta hantver- karen och innehållandes de funktioner som denna ide för med sig.
• Wordpress-sidan ska ha någon form av plugin för konvertering till an- tingen Androids filssystem APK, eller Iphones filsystem IPA eller både
och för lansering av prototyp-appen till Google play samt Apple:s app store.
• Sidan ska även följa de tillgänglighetsprinciper och regler för använd- barhet i minst AA-nivå. Detta medför även färgkontraster på webbsi- dan.
• Worksystems egna grafiska profil ska följas i den mån där detta är möj- ligt med ett likadant, eller snarlikt färgschema samt företagets typsnitt och logga där detta ges möjlighet till.
• Undersidor för de olika funktionerna så som: Låsstatus på bil, Bilens vikt, Time tracking, Admin fakturering samt andra funktioner ska finnas med på sidan.
• Företagets kontaktinformation och annat relevant ska finnas bifogat längst ned för att fylla ut webbplatsens footer.
• Responsivitet ska finnas med och genomsyra webbplatsen för bästa möjliga upplevelse, oavsett vilken plattform som webbsidan nås via.
• Andra önskemål som Worksystem kan ha under arbetets veckomöten ska tas i beaktning och ses över ifall tid och kunskap finns för att möj- liggöra dessa önskemål, som kan uppkomma under arbetets gång.
Ifall inga andra önskemål finns hos företaget angående webbsidan och tid finns tillgänglig så ska även en tillgänglighetsanalys göras på företaget med fokus på den färgkontrast som finns på deras webbsida och hur dessa skulle kunna göras bättre för att öka på företagets tillgänglighet.
1.4 Översikt
Kapitel 2 i denna rapport går djupare in i bakgrunden och teorin som berör detta arbete, med fokus på just Wordpress-webbplatser. Kapitel 3 redovisar den ar- betsmetod som kommer att användas under arbetets gång. I kapitel 4 rapporte- ras om hur arbetet har genomförts och konstruerats, steg för steg under arbetets gång. Kapitel 5 handlar om slutresultatet av denna projektuppgift och kapitel 6 berör de övergripande slutsatser som dragits under arbetets förlopp som helhet.
Resterande del av denna rapport berör källhänvisningar som använts i rappor- ten.
2 Teori
Eftersom arbetet i grunden består av en Wordpress-sida, med flertalet extra funktioner och därmed använder sig av det överlägset mest populära systemet för att skapa webbsidor, så finns det gott om tidigare erfarenhet och artiklar att hänvisa till för att få en bra grund till det fortsatta läsandet av denna rapport.
2.1 Wordpress
Wordpress är vid skrivandet av denna rapport det absolut största CMS:systemet och driver 65% av alla webbsidor skapade med CMS-system och 32% av alla webbsidor totalt sett.[3]
Anledningarna till varför just Wordpress har varit den dominerande kraften inom CMS-marknaden har mycket att göra med att programmet är gratis, base- rat på öppen källkod, uppdateras regelbundet och hålls modernt samt kan an- vändas för att skapa webbsidor med allt från enkla bloggar till e-handelssidor, men används även för stora och kända företag så som[3][4]:
The Walt Disney Corporation, bild 1 - https://thewaltdisneycompany.com/ [5]
Bild 1: Bild föreställande The Walt Disney Company:s webbsida
Bloomberg Professional, bild 2 - https://www.bloomberg.com/professional/ [6]
Bild 2: Bild föreställande Bloomberg Professional:s webbsida Sveriges egna webbsida, bild 3. - https://sweden.se/ [7]
Bild 3: Bild föreställande webbsidan Sweden.se
Utöver detta så är även Wordpress användarvänligt, där även personer med för- sämrad syn kan använda det utan några större bekymmer. Wordpress är även re- sponsivt och fungerar på alla skärmstorlekar, oavsett om det är en stationär da- tor, laptop, surfplatta eller mobiltelefon som man når webbsidan via. Det finns även möjligheter att fritt ändra hur webbsidan ser ut med flertalet olika plugins och tillägg som bidrar med olika funktioner samt teman som kan helt ändra si- dans design och stil, varav många är helt gratis och lätta att ladda ned. [4]
2.2 Themify
Themify är ett Wordpress-tema som tillåter enkel uppbyggnad av en webbsida och som är både responsiv, användarvänlig och snygg. Themify använder sig främst av ett dra och släpp-system för att låta användaren skapa sin webbsida och därmed sänker trösklarna så pass att både totala nybörjare samt redan erfar- na webbutvecklare enkelt kan använda temat för att skapa snygga och stilrena webbsidor. [8]
Eftersom att temat är så pass lätt att använda så finns möjligheter att använda verktyget för att skapa webbsidor i flertalet olika kategorier och med olika syf- ten och områden. Därtill så har Themify själva skapat ett flertal mallar som man enkelt kan använda till grund för att sedan ersätta med ens egna innehåll för att ytterligare begränsa utvecklingstiden och öka på dess användbarhet till flertalet olika företag och branscher som skulle vilja ha en webbsida. [8][9]
Ett antal exempel på de mallar som redan finns är: Bröllop, Byggföretag, Per- sonlig tränare, Kyrka, Internettidning, Restaurang, Skola, Café och mycket mer likt bild 4 nedan.[9]
Bild 4: Exempel på Themify-mallar som finns tillgängliga
2.3 Responsiv Design
Responsiv design är ett arbetssätt för att se till att skapade webbsidor ser bra ut på alla enheter som användare kan tänka sig att använda när de besöker en webbsida. Detta sker genom att webbsidan automatiskt justerar sig efter skär- mens bredd och visar upp den bäst lämpade versionen av hemsidan för att mat- cha användarens enhet som ger användaren den bästa upplevelsen, oavsett en- het. [10]
De senaste åren har mobila enheter blivit en stor andel av de som besöker hem- sidor. En klar majoritet använder idag mobiltelefoner för att surfa på webben, och utvecklingen har varit snabb: På bara 10 år har siffran exploderat från 2011:s 6% till dagens 56%, en ökning med hela 833% under dessa 10 åren. I praktiken betyder detta att webbsidor som inte tillgodoser majoriteten av webb- platsbesökare kommer att få det tufft att synas bland alla andra webbsidor, och framtiden lär bli ännu dystrare för de som inte mobil-anpassar sin webbplats.
[11][12]
Responsiv design hjälper till genom att erbjuda ett alternativ till att skaparen av webbplatsen tvingas göra flera olika sidor för både dator- och mobil-användare som kostar mycket, både i form av pengar och tid. Genom responsiv design minskar man denna kostnad då skaparen av sidan endast behöver ha en sida som anpassar sig till olika skärmar och enheter och därmed fungerar för besöka- re på alla enheter. Detta underlättar även underhållningen och flexibiliteten av webbsidan eftersom att vid upptäckande av ett stavfel eller ett snabbt ändrande av webbsidans design så behöver man endast ändra den responsiva webbsidan man har istället för två olika versioner. [12][13]
Övriga fördelar med responsiv webbdesign kan vara att då man som användare slipper scrolla och zooma sig fram på webbsidan och istället ser innehållet mycket snabbare, vilket minskar användarens frustration då man snabbt når den information man är ute efter och leder till ett bättre och mer professionellt in- tryck av webbsidan. [12][13]
Även sökmotorrankingen själv påverkas ifall webbsidan är responsiv eller ej.
Detta eftersom att Google ger fördel till de webbsidor som är mobil-vänliga och är ett bra komplement till övriga SEO faktorer för att ge din webbsida en ök- ning i sökmotorranking. [12][13]
En responsiv design-filosofi kan därmed leda till en minskad kostnad för en webbsida, spara tid för underhåll och konverteringar, samt behåller besökare och kunder under en längre period än för övriga webbsidor. [12]
2.4 Tillgänglighet
Ordet tillgänglighet betyder ungefär: Förmågan för alla att ha tillgång till nå- gonting, och används främst på webben för att beskriva de åtgärder som finns för att alla personer ska kunna navigera, använda och förstå webben som helhet och webbplatsen i synnerhet. [14]
I praktiken innebär detta att potentiella hinder för funktionshinder ska så långt det bara går tas bort till förmån för att alla personer kan använda ditt verktyg, webbsida eller teknologi. Detta ska optimalt gälla alla funktionshinder och ned- sättningar så som:[15]
• Hörsel
• Kognitiva
• Neurologiska
• Fysiska
• Tal
Men det finns även andra fördelar med att använda sig av tillgänglighet för att på så sätt underlätta övriga grupper så som: [15]
• Äldre personer med försämrade förmågor
• Personer med temporära nedsättningar
• Personer med situationsberoende begränsningar
• Personer som använder deras mobiltelefoner, smartklockor, smartTV:s och andra enheter med mindre och annorlunda skärmar.
Förutom att grundläggande tillgänglighet kan krävas av lag för ägare av webb- sidor, så som”Lagen om tillgänglighet till digital offentlig service”[16], så finns det även ekonomiska incitament för att vara uppdaterad när det kommer till till- gänglighet. Detta eftersom att tillgänglighet hjälper många olika grupper och bi- drar till en överlag bättre användarupplevelse som är anpassad till flera olika enheter, skärmar och kunder, unga såväl som äldre. Alltså, kan tillgänglighet vara det som separerar en aktör från resten på marknaden och ökar ens mark- nadsandel. [15]
2.5 Användbarhet
Användbarhet är det som används inom webbdesign och UI/UX-världen för att se till att en produkt kan användas av en specifik användare för att uppnå speci- fika mål på ett effektivt och tillfredsställande sätt. [17]
I praktiken innebär detta att användare kan fokusera på sina egna uppdrag och behöver ej sätta sig in i programmet eller webbsidans struktur, då detta istället kommer naturligt på grund av igenkänningsfaktorer och andra design-metoder som även tillåter en snabb inlärning av bland annat sid-navigation och minime- rar på så sätt den potentiella frustrationen hos användaren som kan förekomma vid en mer ologisk och icke-användbar webbsida. [17]
Användbarhet är alltså bra för både användare, utvecklare och sid-ägare. Enkelt kan man beskriva fördelarna på ett liknande sätt: [17]
• Användare - Får en större chans att klara av sina uppdrag framgångsfullt och därmed en större chans att användaren är i ett bra humör istället för att känna sig dum och bli frustrerad.
• Utvecklare - Genom användbarhet så kan utvecklaren förlita sig på att den metod som används är den mest logiska och kan få inspiration i hur man ska strukturera navigationssystemet eller en undersida för maximal igenkänning av användaren.
• Sid-ägare - Då kunder är i ett bättre humör med hjälp av användbarhet så ökar även chansen att konvertera besökare till kunder.
Kopplingen mellan bra användbarhet och ekonomisk vinst innebär alltså att de aktörer med dålig hänsyn till användbarhet frustrerar sina kunder med ologisk placering samt normbrytning utan hänvisning till redan etablerade standarder.
Detta kan i sin tur leda till en större sannolikhet att användaren väljer bort alter- nativet till förmån för andra aktörer med större fokus på just användbarhet och användarupplevelse i stort. Det finns även en risk att en spridning med negativt budskap skadar det första företaget som ej användbarhetsanpassat sin webbsida i form av användarnas dåliga upplevelse via internet eller genom andra kanaler.
Samtidigt som företaget med fokus på användbarhet får positiv feedback för att ha lagt ned tid på att förenkla sidan ur kundens synvinkel.[17][18]
3 Metod
Arbetet går ut på att skapa en applikations-demo utifrån en Wordpress-sida in- stallerad på ett domännamn och webbhotell som företaget Worksystem själva ansvarar för.
3.1 Introduktions- och vecko-möten
Under arbetets gång så kommer jag att föra löpande kontakt med företaget för att rutinenligt varje vecka kunna få deras feedback och synpunkter på webbsi- dan och arbetet som helhet. Dessa möten kommer att genomföras fysiskt hos företaget för att på så sätt underlätta kommunikationen och minimera eventuella missförstånd.
3.2 Mockups och skisser
För att på bästa sätt få en blick i vad slutmålet för webbsidan kan se ut så kom- mer jag, med hjälp av de anteckningar från de möten med min handledare och andra på Worksystem att skapa skisser och mockups för att på så sätt underlätta för mig själv att få en bild av i vilken riktning som sidan ska se ut, och för före- taget att beskriva vilka delar som är viktiga och hur de vill att designen ska se ut.
Detta kommer jag främst att göra via programmet Adobe XD[19]. Detta efter- som att det är ett program som vi jobbat kontinuerligt med, främst genom kur- sen Webbanvändbarhet[20] och som jag nu känner mig mest bekväm och pro- duktiv med att använda under detta arbete.
3.3 Wordpress
Under detta arbete så kommer Wordpress att ligga till grund för webbsidan och vara det CMS-system som används. Den främsta anledningen till varför just Wordpress är det som kommer användas kommer ifrån det faktum att företaget har ett antal sidor med Wordpress förinstallerat. Därför så tyckte vi båda under vårt introduktionsmöte att detta skulle vara den smidigaste lösningen för att starta igång arbetet via. En annan stor fördel med just Wordpress är att jag tidi- gare jobbat i just Wordpress, både under kursen ”Webbdesign för CMS”[21] i detta programmet, men även tidigare under min fritid.
3.4 Themify
För att bygga själva sidan och samtidigt lösa mycket av delarna för responsiv design som kommer göra webbsidan snygg på mobila plattformar och som är en stor del när webbsidan sedan görs om till en applikation så kommer jag att an- vända mig av Wordpress-temat Themify. Detta eftersom jag sedan tidigare har ett Premium konto och därmed kan använda mig av alla de plugins och funktio-
ner som erbjuds, däribland Google Maps API som kan visas upp på sidan och som kommer att användas för att simulera det GPS-system som Worksystem säljer och vill ska kunna kopplas till applikationen.
3.5 Yoast SEO
För plugin:et så finns både en gratis-version tillsammans med en premium-del som kostar pengar om man vill köpa till. Det finns personer och bloggar som menar på både att det är värt att köpa till premium samt de som menar på att det inte är värt och att man klarar sig utmärkt. I slutändan har jag dock landat i att gratis-versionen räcker gott för det arbete som jag nu utför. [22]
Denna åsikten kom jag fram till genom att de som rekommenderades att köpa premium från en artikel var främst:[23]
• Webbsidor som ändras mycket och där 301 redirects är vanligt
Genom tjänsten ”redirect manager” kan den trafik som kan komma att söka sig in på dina gamla webbsidor hanteras automatiskt. Genom att använda sig av de- ras verktyg för 301 redirects så flyttas trafiken över från de gamla länkarna till de nya. Detta går även att göra manuellt men tar en hel del tid, på detta vis så kan det vara kostnadseffektivt att köpa Yoast SEO Premium för att använda de- ras verktyg som hjälper till att omdirigera gamla sidors trafik med 301 redirects.
[23]
• Webbsidor som konkurrerar om vanliga sökord och vill synas först Ifall det finns en hård konkurrens att vilja synas på vissa specifika sökord så kan Yoast SEO Premium vara en bra investering. Detta eftersom att möjligheten att använda och koppla flera olika nyckelord kan boosta en individuell sida långt upp i sökresultaten. Även kontext får man hjälp med i form av att välja rätt sökord i den kontext som du tänker använda med, alltså att Yoast själva lis- tar ut vilka närliggande ord som man skulle kunna använda för att öka antalet användare. I slutändan så behöver en hel del saker göras konstant för att ens webbplats ska komma först i sökresultat, men Yoast SEO Premium kan iallafall vara en del för att få din webbsida att nå toppen. [23]
• Användare som är nya till SEO och kräver stöd och expertis
Att en webbsida med många plugins kan komma att tappa i sökrankning eller att Yoast någon gång kommer att stöta på buggar är näst en garanti. Men genom Yoast SEO Premium kan det för vissa kännas skönt att ha tillgång till det sup- portteam som erbjuds och kunna få svar och hjälp på den vägen. [23]
Då ingen av dessa kategorier direkt stämmer in på mig så väljer jag att inte köpa premium-versionen och nöjer mig därmed med gratis-versionen.
3.6 SuperPWA
SuperPWA är ett Wordpress-plugin som hjälper till att skapa en webbapp base- rad på en Wordpress webbsida. Detta görs genom att låta användaren installera en applikation till sin mobiltelefon och som sedan visar upp din webbsida på applikationen, vilket drastiskt minskar laddningstiden för att se din webbsida via appen.[24]
Appen laddas enkelt ned genom en notis som visas på sidan som uppmanar en att ladda ned appen, därefter så kan man enkelt använda appen för att använda webbsidan. [24]
SuperPWA valde jag främst för att det var den överlägset populäraste applika- tionen för konvertering av en Wordpress-sida till en mobil applikation. Att den även var mycket enkelt att använda, hade en demo för att ge en bild av hur det fungerade samt en mycket bra och hjälpsam gemenskap samt support som kan svar på de vanligast frågorna kring plugin:et var endast en bonus.[24]
4 Konstruktion
I detta avsnitt så går konstruktionen av webbsidan igenom, ifrån de första skis- serna till en färdig webbplats och applikation.
4.1 Beställarkrav
Under introduktionsmötet med företaget Worksystem så diskuterades deras kravlista och hur de ville att projektet i slutändan skulle fungera samt utformas.
Det vi kunde komma fram till var ett antal punkter som de ville få uppnådda för ett användbart och tillfredsställande arbete.
Dessa punkter var främst:
• En wordpress-sida som kunde användas som, och simulera en applika- tion på styrelsens mobiltelefoner.
• Worksystems egna grafiska profil ska försöka följas för att visuellt visa på en bra integrering mellan webbsida och applikationen.
• Undersidor för de olika funktionerna så som: Låsstatus på bil, Bilens vikt, Time tracking, Admin fakturering samt andra relevanta funktioner.
• Webbsidan ska se bra ut på en mobil enhet, men inget krav på desktop- version av sidan.
4.2 Webbplatsskiss
Efter introduktionsmötet så började jag direkt på en webbplatsskiss av hur jag tänkte att webbsidan skulle kunna se ut. För att på ett bra sätt kunna konstruera en webbplatsskiss så valde jag att använda mig av Adobe XD, då vi tidigare har använt just detta verktyg för att skapa webbplatsskisser.
För att på ett mer grundläggande plan se vad som var möjligt samt inte möjligt valde jag att först bekanta mig med Themify och testa dess funktionalitet. Detta för att ge en rättvis syn i webbplatsskissen och minimera funktioner samt annat som inte går att genomföra och kommer ej finnas med på slutprodukten senare i arbetet.
Jag kollade även in hur worksystems webbsida såg ut och lade i synnerhet stor vikt vid hur deras färgschema såg ut. Där används en starkare orange färg (#FF6E00) som tillsammans med helsvart (#000000) för att skapa den större delen av sidan med en grå färg (#97999B) och vit(#FFFFFF) som komplement- färger för att bryta av med primärfärgerna orange och svart. Detta framgår tyd-
ligt både i den grafiska profilen (bild 5) och från skärmdumpar från webbsidan (bild 6).
Bild 5: Bild föreställande färgschemat i Worksystems grafiska profil
Bild 6: Bild förestälande Worksystems startsida och dess färger
Utöver detta så fanns även sidans logga på webbplatsen, något som möjliggjor- de att jag kunde ladda ned den genom att inspektera sidans källkod och sedan infoga den i min adobe xd skiss.
Efter att känna mig mer bekväm med Worksystems grafiska profil, sidbyggaren Themify och vad företaget rent konkret vill ha i form av funktioner och undersi- dor så började jag att skapa de adobe XD skisser och ge både mig själv och fö- retaget en bild av hur denna sida och applikation kan komma att se ut.
Jag började med att skapa startsidan. Eftersom sidan främst skulle konsumeras via mobila enheter så valde jag här att endast infoga länk-block som kunde visa på de funktioner och undersidor som fanns via applikationen, tillsammans med en Worksystem-logga överst (bild 7).
Bild 7: Adobe XD skiss för startsidan på desktop
Startsidan valde jag även att skapa i 2 olika designer för mobil-varianten som man kan se i bild 8 och bild 9.
Bild 8: Adobe XD skiss på startsidan i en mobil enhet
Bild 9: Adobe XD skiss föreställande alternativ layout på startsidan för mobil enhet
I form av undersidor så skapade jag 3 stycken, en för timetracker, en för for- donsvikt och en för låsstatus.
Undersidan för timetracker (bild 10) skapade jag för att simulera för använda- ren att man stämplar in i början av en arbetsdag, och att applikationen då håller koll på vart man varit och märker ut dessa ställen på en karta under en arbetsdag för att på så sätt låta hantverkare slippa tidslappar på hur länge de varit på en ar- betsplats då företaget istället kan förlita sig på applikationen för att fakturera rätt.
Bild 10: Bild föreställande skiss på Timetracker-undersida i Adobe XD Den andra undersidan (bild 11) var funktionalitet för att låta användaren se hur mycket ens fordon väger i kilogram. Detta för att på så sätt minska överlast, som är förekommande i dessa typer av arbete och branscher. Detta består då av
en illustration av en vikt tillsammans med en text som berättar fordonets vikt samt maxvikt och ger en visuell bild av detta i form av en mätare.
Bild 11: Adobe XD skiss för fordonsvikt-undersida.
Den sista undersidan skapade jag för att tillgodose den önskan om en lås-sida som möjliggör att man kan se ifall ens bil är låst eller ej. Denna sida är simpel
med antingen en grön banner som meddelar att bilen är låst, eller en röd sådan som meddelar att bilen är olåst, som man kan se i bild 12.
Bild 12: Bild föreställande skiss för Låsstatus-undersida
Under det efterföljande mötet hos Worksystem så fick jag med mig en del feed- back och tankar, bland annat förslag på en inverter-undersida som visar hur lång tid man kan använda ett verktyg med ett bilbatteri och när man bör starta bilen för att ladda bilbatteriet igen. Det fanns även tankar om man kunde bygga på ti- metrackern för att inkludera en desktop-undersida som kan söka upp en adress och klarmarkera de bilar som befunnit sig på arbetsplatsen via GPS-systemet och timetrackern.
I övrigt så var de nöjda med hur designskissen såg ut och gav mig därmed klar- tecken att börja skapa Wordpress-sidan.
4.3 Wordpress-konfiguration
Under mötet med Worksystem så kunde jag få tillgång till den sida med redan registrerat domännamn och förinstallerat Wordpress. Därefter så började jag ar- beta på webbsidan: www.bilinredab.se[25].
För att direkt bättra på säkerheten i min Wordpress-sida så tog jag bort gamla Wordpress-teman för att på så sätt minimera risken att skadlig kod tar sig in i min Wordpress-sida.[26]
Efter detta tog jag även bort standard-texten ”Just another Wordpress-site”, och valde istället att ersätta denna med Worksystems egna logga för att direkt ge webbsidan ett mer professionell utseende.
Även ”Powered by WordPress” var onödig och kunde tas bort genom att ändra footerns innehåll via customize-inställningarna på sidan.
När jag endast hade ett back-up tema i form av Wordpress egna ”Twenty TwentyOne” så valde jag att installera Themify och använda detta för att skapa mitt arbete på Wordpress-sidan.
4.4 Startsidan
Det första på sidan jag började arbeta på var startsidan. Där jag först ändrade länkarna på sidan till att vara vita emot en svart bakgrundsfärg i navigationsme- nyn, med en hover-färg i orange.
Jag valde sedan att påbörja de meny-alternativ som startsidan skulle bestå av och kunde skapa dessa med ett block bestående av en beskrivande vektor-bild till vänster samt en tillhörande text om vilken undersida man tas till på höger sida.
Under detta block satte jag dit en knapp som länkar till den undersida som man vill till med en pil som symbol och en text om att knappen tar en till undersidan.
Detta gjorde jag då för de undersidor som jag hade en ikon till.
Till sist så finjusterade jag margin och padding för att bilderna och texten skulle se snygg ut och ej krocka med varandra, oavsett enhet.
Resultatet blev likt bild 13 nedan.
Bild 13: Bild föreställande den skapade startsidan
4.5 Timetracker
Timetracker var den första undersidan som jag började skapa. Detta eftersom dess meny-alternativ var längs upp på startsidan.
Jag valde här att inkludera ett Google Maps API för att simulera att man på en karta kan se vart man befunnit sig under den tiden som man stämplat in. För att göra detta så behövde jag ladda ned ett tillägg till Themify, samtidigt som Google Maps krävde att man skapade ett Google Cloud-konto där man behöver lägga till en betalkort för att skapa ett konto. Bild 14 visar hur Google Maps API:t såg ut innan jag skapat gratis-kontot.
Bild 14: Bild föreställande Google Maps API före registrering av cloud- konto
Efter att ha skapat ett gratis-konto så behövdes en del API:er läggas till och in- stalleras för att få Google Maps att fungera. Men efter att ha laddat ned: Places, Maps, Geolocation och Geocoding API så fungerade Google Maps på webbsi- dan och jag kunde därefter välja en plats att sätta Google Maps nålen på, likt bild 15.
Bild 15: Bild föreställande Google Maps API:t efter installation av API:er och kontoregistrering
När Google Maps fungerade som det skulle skapade jag en platslista med fikti- va platser för att visa på hur en sådan platslista som listar ut vart man varit ge- nom ett gps-system skulle kunna se ut.
4.6 Låsstatus
Undersidan för att se ifall personens bil är låst skapade jag med hjälp av bilder från internet.
Dessa låsbilder hittade jag genom att google söka på bilder med rättigheter att kunna ändra och använda kommersiellt. Dessa bilder på stängda och öppna lås var i svart färg, och då jag istället ville ha ett lås i grönt och ett i rött så använda jag mig av verktyget photopea[27] för att ändra färg på dessa lås.
Efter att ha bytt färg på låsen sparade jag de som png med en transparent bak- grund och infogades som bild tillsammans med en text som beskriver ifall bilen är låst eller olåst. På det låsta alternativet valde jag en grön färg som bakgrunds- färg och en röd bakgrundsfärg till den olåsta alternativet för att ge en bra kon- trast mellan de två alternativet samt den vita bakgrundsfärgen. Tanken är då att ifall bilen är olåst så ser man det röda alternativet, men ifall bilen är låst så är det gröna alternativet som man ser om man går in i undersidan.
Bilderna var också väldigt nära kanten och hade inget mellanrum, men detta kunde enkelt lösas via photopea genom att förstora canvasstorleken och expor- tera som en png igen.
4.7 Fordonsvikt
En sida för att se fordonsvikt för bilen var också ett önskemål som Worksystem hade och en undersida jag skapade.
Denna undersida skulle egentligen endast visa upp vikten samt vilken maxvikt som gällde för bilen som man använde och körde. Alltså valde jag att endast in- kludera dessa texter samt en ”progress bar”-modul för att även ge en visuell bild av hur mycket man har lastat sin bil.
Jag valde då en fiktiv vikt om 1073KG med en maxvikt om 1850KG, vilket då visar på 58% av den tillåtna vikten i progress bar-modulen. Även här använde jag färger för kontrast då bilens vikt blev i svart text medans den högt tillåtna samt procent-etiketten blev i en mörkare svart färg för kontrast med den vita bakgrunden.
4.8 Timetracker - admin
För att underlätta för företaget som använder applikationen så fanns även ett förslag om att lägga till en administratördel för timetracker webbsidan som han- terar fakturering av en viss plats för att på så sätt försöka minska den andel fel- fakturering inom hantverkarbranschen.
Jag började med att inkludera ett sökfält som fanns med som en modul i Themi- fy för att kunna simulera att man kan söka på en adress i adressfältet.
Efter man har sökt så kommer adressen fram på en karta, där jag använder The- mifys Google Maps API och visar upp Kungliga Slottet som ett exempel.
Även en fiktiv lista som simulerar de bilar och hantverkare som varit på en plats skapar jag genom att lägga till en box med texten ”Tider” över och en text-lista med checkboxes nedanför tillsammans med en faktureringsknapp för att simu- lera att man väljer de tillfällen då hantverkare varit på en arbetsplats och skickar iväg tillfällena för fakturering, likt bild 16.
Bild 16: Bild föreställande admin-sidan för timetracker
4.9 Inverter-sida
Ett annat förslag som Worksystem kom med var funktionalitet för att hantera in- verters i bilarna som företaget säljer. På så sätt så kan man använda bilbatteriet för att använda verktyg, och genom webbsidan var förslaget att det då ska fin- nas en undersida för att se den nuvarande energiförbrukningen samt hur länge man kan använda verktyget med nuvarande förbrukning.
Denna undersida tog jag inspiration ifrån sidan med fordonsvikt då en progress- bar med hur många minuter man skulle kunna använda verktyget i samt en text
om ens nuvarande förbrukning skulle vara lämpligt i det formatet som var aktu- ellt för Fordonsvikt-undersidan.
4.10 Belysning-sida
En annan spännande tanke var en undersida för att enkelt konfigurera ljus i form av en panel som då tillåter Worksystem att enkelt ställa in en panel som hanterar de ljus som man vill tända ifrån kontrollpanelen.
Denna sida gjorde jag utifrån en skiss som jag fick ritad av min handledare på ett av våra veckomöten (bild 17) och som jag utgick ifrån när jag valde att ska- pa min undersida.
Bild 17: Bild föreställande skiss för hur en belysningsundersida kan se ut.
Sidan gjorde jag genom att då inkludera en temporär bild på en pickup, som jag planerat skulle kunna ersättas med en riktig bild gjord a Worksystems grafiker under vårat möte samt infogade knappar till höger om bilden. Jag valde också att inkludera konfigurationsknappar som man skulle kunna trycka på för att ställa in vilket ljus man vill ska lysa när man kört igång konfigurationsprogram- met.
Även en checkbox längre ned på sidan för att välja vilka funktioner som man vill ställa in och konfigurera lades till för att så långt det är möjligt efterlikna den skissen som jag fått från min handledare, med resultatet i bild 18.
Bild 18: Bild föreställande Belysning under-sidan
4.11 Möte med Grafiker
Efter att ha skapat mina undersidor och webbsidan så fick jag frågan av min handledare ifall jag ville ha ett möte med Worksystems grafiker för att höra om han hade några synpunkter angående den grafiska delen av sidan så att Word- press-sidan matchar med Worksystems egna sida och följer samma grafiska de- sign. Detta lät mycket spännande och under det mötet som vi hade fick jag med mig en hel del feedback att göra för att få sidan så optimal som möjligt, samt skisser som grafikern gjorde under vårt möte och som jag inkluderat som bild 19, 20, 21, 22 och 23.
Den feedback jag fick med är bland annat:
Hela sidan:
• Ändra font till Gilroy
• Versaler till all text på sidan
• Centrera burger-menyn på mobila enheter
• ”I” framför meny-alternativ och knappar till undersidor, med större font- size för att vara större än vanliga texten
• Font-weight heavy för h-taggar, rubriker och light för brödtext
• Burger-meny orange bakgrund, svart länk och vit hover
• Ta bort ”mer länkar”-sida
• Lägg till fav-ikon
• Se om möjlighet att minska luft mellan nav-meny och sid-innehåll Footer:
• Ändra text på footer till Gilroy
• Ändra streckfärg till orange i footer
• Minska logga i footern
• Ta bort placeholder text 1 och text 2
• Centrera länkarna i footern Startsidan:
• Pilarna till undersidor till höger istället för över text
• Mer padding och margin för bilderna i undersidor-länkarna på startsidan Timetracker:
• Stämplaknappar i sidled med varandra
• Pil i platslista visar neråt och sedan i sidled vid tryck
• Platslista orange bakgrundsfärg
• Vartannat alternativ i platslistan i orange bakgrund, opacity 10%
• Ta bort radlinjer i menyn
Bild 19: Grafikerskiss på timetracker-sida Fordonsvikt:
• Vänsterjustera fordonsvikt text
Bild 20: grafikerskiss på fordonsvikt-undersida Timetracker – admin:
• Gilroy-font kungliga slottet och sökfält
Bild 21: Grafikerskiss för timetracker-admin sida Låsstatus:
• Centrera bilikon och byt font Inverter:
• Lägg till totala antal timmar vid 100% laddning
• Svart text istället för röd i progress bar
Bild 22: Grafikerskiss för inverter-sida Belysning:
• Lägg till undersida-länk till undersidan och startsidan
• Orange knappar för starta och nästa ljus
• Bilen på bredden längst upp, med knappar under
• Ikon på kontrollpanelsknapparna
• Knappsats för välj funktioner
• Ta bort belysnings-text
Bild 23: Grafikersskiss på Belysnings undersida
En överväldigande majoritet av dessa förslag lyckades jag skapa och ändra till.
Det kunde jag göra genom att främst ersätta text och bild-kombinationer för banner-knapparna på startsidan till endast en bild bestående av en ikon och till- hörande text skapad via photopea, eller att genom ”Custom CSS”-alternativet i customize-menyn ändra de klasser och kod som finns på sidan för att minska luften mellan innehållet och menyn eller ändra färg och höjd på mina progress- bars, se bilden nedan.
Bild 24: Bild föreställande Custom CSS-alternativet i Customize-menyn för Wordpress-sidan
Andra saker som att ändra typsnitt på sidans olika delar och att lägga till en fav- ikon var också en sak som enkelt kunde fixas för att ge ett bra helhetsintryck.
En sak som jag inte fick att fungera är egna appikoner för det PWA plugin som används för att göra webbsidan till en app. Istället så visas endast Wordpress egna logga som används som standard istället för Worksystems logga som jag tänkt från början, enligt bild 24.
Bild 25: Bild föreställande nedladdningsskärmen och loggan för webbside- appen
5 Resultat
Resultatet av denna uppgift och arbete blev en Wordpress-webbsida byggd med hjälp av sidbyggaren Themify i linje med Worksystems grafiska profil, färger och typsnitt. Webbsidan är även responsiv och kan användas som en mobil-ap- plikation genom Wordpress-pluginet ”Super PWA”.
Webbsidan ändrades en hel del under arbetets gång iockmed den feedback jag fick från handledaren och senare Worksystems grafiker. Men efter all feedback och en hel del ändringar så är den webbsida och app jag nu skapat så bra den bara kunde bli under den tidsbegränsning som arbetet har varit under.
5.1 Startsidan
Startsidan på webbsidan och applikationen som visas i bild 25 nedan består av bilder gjorda med verktyget Photopea med det Gilroy typsnitt som Worksystem använder sig av i sin grafiska profil, tillsammans med en orange färg för ban- ner-bilden samt en vit bakgrundsfärg för knappen nedanför. Footern består av Worksystems logga samt samma underlänkar som finns i menyn emot en svart bakgrundsfärg.
Bild 26: Bild föreställande Startsidan på mobila enheter
5.2 Timetracker
Timetrackern består av 2 knappar i färgerna grön och röd för in- och ut-stämp- ling, en Google karta för att simulera vart man varit under tiden man stämplat in. Det finns även en platslista för att se exakt vilka adresser som registrerats av GPS-systemet och när man först kom dit (bild 26).
5.3 Timetracker - Admin
Admin-sidan för Timetracker likt bild 27 består av ett sökfält där man kan söka på en adress och som sedan med hjälp av en karta markerar ut adressen på en karta och längre ned under Tider tar alla de gånger en instämplad anställd har befunnit sig på platsen. Detta gör så att administratören enkelt kan markera de tider man vill fakturera för att på så sätt minimera antal felfaktureringar som kan ske.
Bild 28: Bild föreställande Adminsida för Timetrackern på mobil enhet
5.4 Fordonsvikt
Sidan för fordonsvikt består av en text som visar hur mycket din bil väger, en annan text som visar maxvikten av vad som är tillåtet med din bil för att minska risken för att man kör med överlast, samt en ”progress bar” för att ge en visuell bild av hur hur mycket vikt som återstår, samt en medföljande text som räknar ut och visar upp procenten av ditt fordonsvikt med den maximala vikten (bild 28).
5.5 Låsstatus
Låsstatus består av en text med innehållet ”Din bil är:” tillsammans med en bild som antingen visar att bilen är låst med en grön färg alternativt en bild som vi- sar att bilen är olåst med en röd färg, som man kan se i bild 29.
Bild 30: Bild föreställande Låsstatus-sidan på mobila enheter
5.6 Inverter
Inverter sidan består av en beskrivande text i form av ”Nuvarande förbrukning”
som beskriver ens nuvarande förbrukning från verktygen. Detta är tillsammans med en text som beskriver i hur många timmar som man kan använda verktyget i nuvarande förbrukning i antal timmar som man vid fulladdat batteri kan an- vända verktyget i. Till detta medföljer även en progress bar för att visuellt visa på hur länge man kan använda verktyget likt bild 30 nedan.
5.7 Belysning
Belysningssidan består av en bild på en bil på bredden med tända ljus för att re- presentera belysningen på den kopplade bilen. Nedanför finns två stora knappar för att starta ljuskonfigurationen samt för att gå vidare och starta nästa ljus när man har kopplat det nuvarande ljuset klart. Efter detta följer knapp-panelen som används för att koppla ljusen till och till sist några kryssrutor för att välja vilka ljus som ska slås på och konfigureras till kontrollpanelen. En bild av detta finns nedan likt bild 31.
Bild 32: Belysnings-undersida på mobila enheter
5.8 Färgkontrast
Sidan följer Worksystems grafiska profil och har därför ett fokus på att färgerna ska vara tydliga och ge en bra kontrast till varandra. Likt bilderna 32 och 33 ne- dan så används en orange färg i #FF6E00 och svart i #000000 ofta för att skapa kontrast till varandra.
Bild 33: Kontrasten mellan orange bakgrund och svart text
Bild 34: Kontrasten mellan orange text och svart bakgrund
Dessa två färger används ofta på webbsidan, bland annat i knappar, nev-menyn och länk-knapparna på startsidan, likt bild 34 och 35.
Bild 35: Länk-knapp på startsidan med orange bakgrund och svart text
Bild 36: Nav-menyn med svart bakgrund och vit/orange text
5.9 Pagespeed Test
Bild 36 och 37 visar de testresultat vid testning av webbsidan på både mobila enheter och dator-skärm.
Bild 37: Resultatet från Googles PageSpeed Insights på dator-skärm
Bild 38: Resultatet från Googles PageSpeed Insights på mobila enheter Då resultatet både på dator-skärm och mobila enheter är inom det gröna fältet om 90 till 100 så är jag väldigt nöjd med resultatet med tanke på att arbetet inte har haft varken SEO eller sidoptimering som primärfokus, utan någonting som pluginet Yoast SEO och temat Themify har lyckats åstadkomma på egen hand.
6 Slutsatser
Detta projekt har på det stora hela varit mycket spännande och lärorikt, som startade med en intressant ide och slutade i många aspekter med ett lyckat arbe- te och webbsida/app. Arbetet trodde jag från början skulle vara mer komplicerat då delar som responsivitet, appkonvertering och sidoptimering alla skulle fun- gera, men med verktyget Themify och tillägget SuperPWA så löstes många av dessa delar med minimala insatser från min sida och med sammanfattningsvis goda slutresultat. Mitt mål om att därmed skapa en körbar prototyp för Word- press-webbsida som kan uppvisas för investerare och styrelsen klarades utan större problem, men däremot så är applikationen endast nedladdningsbar via hemsidan och inte via exempelvis Google:s Play Butik med och Apple:s App store, med APK respektive IPA-filformaten som jag först planerat.
Den del av arbetet som tog längst tid var nog att i enlighet med den feedback jag fått av Worksystems grafiker, ändra css-koden på sidan. Detta eftersom The- mify har flertalet olika css-klasser, vilket gjorde det förhållandevis svårt att bredda de progess-bars som finns i undersidan fordonsvikt och inverter. Ett pro- blem som jag hade för att exemplifiera detta var när jag försökte förstora knap- parna på webbsida och där jag tvingades att lägga till separata id:s till de använ- da knapparna i form av ”#storaknappar1-4” för att kunna påverka och förstora knapparna med min egen css-kod, då jag ej kunde hitta rätt css-klass för att uppnå samma resultat.
Endast ett fåtal punkter förblev ogjorda vid arbetets slut, däribland förslag om att sidan kan ha en hamburgermeny som navigation, på både mobila enheter och desktop samt att footern kunde centreras upp med navigationslänkarna för att ge ett mer ordnat uttryck. Oavsett så blev handledaren och företaget mycket positi- va till den skapade produkt som kom ut av arbetet på den tidsram om 10 veckor som vi fått till hands.
Någonting som jag däremot tyckte var klurigt vid skrivandet av rapporten var hur jag skulle förhålla mig till mina bilder i rapporten. Jag kom fram till att det fanns tre stycken sätt att inkludera bilderna i rapporten, dessa var då att:
• Inkludera bilderna som en separat sida i rapporten, men då förlänga rap- porten från 60 till runt 80 eller 90 sidor
• Lägga bilderna i bilagor-delen av rapporten, men då förlänga rapporten samt skapa en mycket osammanhängande rapport med många referenser i texten till bilderna som bilagor
• Trycka ihop bilderna för att få med både den önskade bilden samt en tillhörande text.
Jag valde därför att i enlighet med det tredje alternativet minska bilderna för att få plats med bilden samt bildens tillhörande text, samtidigt som rapporten inte sticker iväg i sidantal.
Om jag skulle fortsätta på detta arbetet så skulle nog första prioritering att vara en förbättrad låsskärm på mobila enheter och appen, då det i dagsläget ser väl- digt avlångt ut. Jag skulle också undersöka möjligheten att kunna visa informa- tion om batterilängden via inverter-undersidan samt fordonsvikten på startsidan, för att på så sätt minska antalet undersidor och göra startsidan med användbar.
6.1 Etisk och social diskussion
Eftersom slutprodukten är en prototyp och visningsförslag för hur en
applikation som samlar in gps-data och vart en bil har befunnit sig under dagen så är den etiska frågeställningen under detta projekt extra viktigt att tänka kring.
Att skapa en produkt som samlar in gps-data och sparar för att i ett senare skede underlätta för företagsägare och administratörer att fakturera tider är extremt känsligt och för att kunna samla in gps-data om vart bilar har befunnit sig så krävs det att man gör detta på rätt sätt för att inte hamna fel, etiskt och juridiskt.
Dessa frågor är dock snarare en prioritet för de utvecklare som isåfall skulle anställas för att göra verklighet av denna prototyp, istället för att jag som skapare av prototypen skulle spekulera i huruvida man som företag bör samla in denna information och hur länge man isåfall behöver spara informationen för att kunna underlätta för faktureringen och annat.
Källförteckning
[1]
Wired. ”What is the Internet of Things? WIRED explains”. Matt Bur- gess; [skriven 2018-02-16; citerad 2021-04-16]. Hämtad från:https://www.wired.co.uk/article/internet-of-things-what-is-explained-iot
[2]
Investopedia. ”Word-of-Mouth Marketing”. Adam Hayes; 2021 [uppda- terad: 2021-03-29; citerad: 2021-03-29]. Hämtad från:https://www.investopedia.com/terms/w/word-of-mouth-marketing.asp
[3]
Themeisle. ”What Is WordPress & What Is It Used For?”- Karol K;2021 [uppdaterad: 2021-03-30; citerad 2021-03-29]. Hämtad från:
https://themeisle.com/blog/what-is-wordpress/
[4]
Wpbeginner. ”40+ Most Notable Big Name Brands that are Using WordPress”. 2019 [uppdaterad 2019-03-08; citerad 2021-03-29]. Häm- tad från: https://www.wpbeginner.com/showcase/40-most-notable-big- name-brands-that-are-using-wordpress/[5]
The Walt Disney company. [citerad 2021-04-07]. Hämtad från:https://thewaltdisneycompany.com
[6]
Bloomberg Professional Services. [citerad 2021-04-07]. Hämtad från:https://www.bloomberg.com/professional/
[7]
Sweden.se [citerad 2021-04-07]. Hämtad från: https://sweden.se/[8]
Themify. ”Premium WordPress Themes & Plugins”. 2021; [citerad 2021-04-07]. Hämtad från: https://themify.me/[9]
Themify. ”Ultra Theme”. 2021; [citerad 2021-04-07]. Hämtad från:https://themify.me/themes/ultra
[10]
W3schools. ”HTML Responsive Web Design”. 2021; [citerad 2021-04- 07]. Hämtad från:https://www.w3schools.com/html/html_responsive.asp
[11]
Broadbandsearch. ”Mobile Vs. Desktop Internet Usage”. [uppdaterad 02/2021; citerad 2021-04-08]. Hämtad från:https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage- statistics
[12]
Forbes. ”5 Essential Reasons You Should Be Using A Responsive Web- site Design Now”. [skriven 2017-06-13; citerad 2021-04-07]. Hämtad från: https://www.forbes.com/sites/brianrashid/2017/06/13/5-essential- reasons-and-benefits-why-you-should-be-using-a-responsive-website- design-now/?sh=325ce6da17c9[13]
WebFX. ”Why is Responsive Design So Important?”. [citerad 2021-04- 08]. Hämtad från: https://www.webfx.com/web-design/why-responsive- design-important.html[14]
Medium. ”Why Web Accessibility Is Important and How You Can Ac- complish It”. [skriven 2018-02-07; citerad 2021-04-11]. Hämtad från:https://medium.com/fbdevclagos/why-web-accessibility-is-important- and-how-you-can-accomplish-it-4f59fda7859c
[15]
W3C. ”Introduction to Web Accessibility”. [uppdaterad 2019-06-05; ci- terad 2021-04-11]. Hämtad från:https://www.w3.org/WAI/fundamentals/accessibility-intro/
[16]
Sveriges Riksdag. ”Lag (2018:1937) om tillgänglighet till digital offent- lig service”. [citerad 2021-04-12]. Hämtad från:https://www.riksdagen.se/sv/dokument-lagar/dokument/svensk- forfattningssamling/lag-20181937-om-tillganglighet-till-digital_sfs- 2018-1937
[17]
Uxplanet. ”Usability First – Why Usability Design Matters to UI/UX Designers”. [skriven 2017-12-07; citerad 2021-04-12]. Hämtad från:https://uxplanet.org/usability-first-why-usability-design-matters-to-ui- ux-designers-9dfb5580116a
[18]
Medium. ”The real importance of usability and user experience”. [skri- ven 2017-07-27; citerad 2021-04-12]. Hämtad från:https://medium.com/@bluehair.co/the-real-importance-of-usability-and- user-experience-c7bfd4cef11
[19]
Adobe. ”Adobe XD”. [citerad 2021-04-13]. Hämtad från:https://www.adobe.com/se/products/xd.html
[20]
Mittuniversitetet. ”Kursplan för Datateknik, Webbanvändbarhet”. [cite- rad 2021-04-13]. Hämtad från:https://www.miun.se/utbildning/kursplaner-och-utbildningsplaner/Sok- kursplan/kursplan/?kursplanid=22433
[21]
Mittuniversitet. ”Kursplan för Datateknik, Webbdesign för CMS”. [cite- rad 2021-04-13]. Hämtad från:https://www.miun.se/utbildning/kursplaner-och-utbildningsplaner/Sok- kursplan/kursplan/?kursplanid=22324
[22]
Online Media Master. ”Yoast SEO Premium Review - Is It Worth $89/Year? (Spoiler: I Wouldn’t Use It If I Didn’t Do WordPress SEO For My Full-Time Job)”. [uppdaterad 2020-07-31; citerad 2021-04-15]. Hämtad från: https://onlinemediamasters.com/yoast-seo-premium-review/
[23]
Pathfinder SEO. ”Is Yoast Premium Worth It?”. [skriven 2020-02-08; ci- terad 2021-04-15]. Hämtad från: https://pathfinderseo.com/guide/yoast- premium-worth-it/[24]
Wordpress. ”Super Progressive Web Apps”. [uppdaterad mars 2021; ci- terad 2021-04-16]. Hämtad från: https://wordpress.org/plugins/super- progressive-web-apps/[25]
Arbetets webbplats – Bilinredab.se. ”Bildinredab.se” [citerad 2021-04- 26]. Hämtad från: https://bilinredab.se/[26]
Wptavern. ”Why You Should Clean Out Your Wordpress Theme Direc- tory”. [skriven 2014-02-05; citerad 2021-04-26]. Hämtad från:https://wptavern.com/why-you-should-clean-out-your-wordpress- themes-directory
[27]
Photopea. ”Photopea”. [citerad 2021-04-27]. Hämtad från:https://www.photopea.com/
