In this project, a web application called Digi-Vites is developed. It consists of an API created with the framework Laravel, as well as a website created with the framework Angular. The goal of the project was to create a website where users can create digital invitations easily and securely. The result was an API that handles data in a secure way before it is stored in a database. It also resulted in a website where users can log in and create invitations, as well as manage their existing invitations by being able to edit or delete them. / I detta projekt utvecklas en webbapplikation vid namn Digi-Vites. Den består av ett API som skapats med ramverket Laravel, samt en webbplats som skapats med ramverket Angular. Målet med projektet var att skapa en webbplats där användare kan skapa digitala inbjudningar på ett enkelt och säkert sätt. Resultatet blev ett API som hanterar data på ett säkert sätt innan det lagras i en databas. Det blev även en webbplats där användare kan logga in och skapa inbjudningar, samt hantera sina befintliga inbjudningar genom att kunna ändra eller ta bort dem.

The goal with this assignment has been to study the product Spotalike and develop a new version to make the product more attractive. The studying of the product was done with the help of user data, such as how Spotalike is being used, what target audience it has, why it's being used, etc. The new version of Spotalike was planned by making design sketches and prototypes which were created as a first step in order to get a better picture of what the result would be. The new version is not available to the public, but it is fully functional and works locally. The solution that was concluded was to develop a music player which is built on the founding principles of the old Spotalike. The music player is developed with React and is powered by Spotify. Besides the old functions there are also new functions that has been implemented, and the interface has been redesigned. There is currently no new user data available to determine the result of the development, since the new version of Spotalike hasn't been made public yet. / Målet med detta projektarbete har varit att granska produkten Spotalike och utveckla en ny version som gör produkten mer eftertraktad. Problemgranskning har gjorts med analysering av användardata – hur Spotalike används, av vem, varför den används, osv. Den nya versionen av Spotalike planerades med hjälp av designskisser och prototyper som togs fram som första steg för att få en bättre bild av slutresultatet. Den nya versionen är inte tillgänglig publikt, men är fullt funktionell lokalt. Lösningen som togs fram var att skapa en musikspelare som bygger på de grundprinciper gamla Spotalike har. Musikspelaren är bygd med React och använder Spotify i bakgrunden som motor. Utöver de redan befintliga funktionerna så har även nya funktioner tagits fram och gränssnittet har redesignats. Någon ny användarstatistik för att se om lösningen har gynnat bra resultat i form av användarupplevelse finns inte tillgänglig då tjänsten ännu inte har hunnit bli tillgängligt publikt.

Sidladdningar på webbplatser har visat sig ha stor påverkan på hur användare beter sig på webbplatser. Redan efter 1 sekunds fördröjning börjar användarens beteende ändras. Laddningsindikatorer kan användas för att minska den upplevda hastigheten av sidladdningar. Det finns olika varianter av laddningsindikatorer som fungerar på olika sätt. En traditionell laddningsindikator är spinner och en nyare, mindre undersökt, heter skeleton screen.  Syftet med denna kandidatuppsats har varit att undersöka effektiviteten hos skeleton screen att påverka den upplevda hastigheten av sidladdningar. Dessutom var syftet att utforma och demonstrera ett test för att förse webbutvecklare med vägledning om hur liknande test kan genomföras i syfte att avgöra vilken laddningsindikator de bör välja att använda vid utveckling. En prototypisk webbsida skapades i två olika versioner, en med 2 sekunders fördröjning och en med 4 sekunders fördröjning vid sidladdning. För att ladda sidorna användes spinner eller skeleton screen. För att samla in användares upplevda hastighet av webbplatsen utfördes användartester där deltagarna för varje sida fick uppskatta hur lång tid nedladdningen tog. Totalt deltog 14 testpersoner i åldrarna 13–47 år. Resultatet visade på att skeleton screen påverkade testpersonernas upplevda hastighet som kortast i både versionerna. Medelvärdet av alla resultatet från testpersonerna visade på att vid 2 sekunders fördröjning upplevdes sidladdningar som 0.89 sekunder med skeleton screen och 1,95 sekunder med spinner. Vid 4 sekunders fördröjning upplevdes skeleton screen som 1,38 sekunder och spinner 3,81 sekunder. Trots att skeleton screen var den laddningsindikator som minskade upplevd hastighet mest, fanns det delade åsikter om vilken laddningsindikator testpersonerna föredrog baserat på design och tidigare erfarenheter. Skeleton screen verkar inte vara meningsfulla på sidor med enstaka produkter, utan effektiviteten av skeleton screen visades främst vid laddning av flera produkter.

<p>Denna rapport återspeglar framtagandet av ett företags webbplats. Då själva utvecklandet av webbplatsen har varit en praktisk tillämpning så tar rapporten snarare upp utvecklingen på ett mer teoretiskt plan i form av en fallstudie.</p><p>Vilka tekniker och metoder som har använts i det praktiska arbetet, såsom användbarhet, semantisk uppmärkning och agila utvecklingsmetoder, har förklarats samtidigt som dess funktionalitet vävts in i arbetets olika implementeringsfaser. Då också ett specialanpassat CMS (innehållshanteringssystem för redigering av webbplatsens innehåll) har utvecklats för webbplatsen så beskriver rapporten också arbetet kring detta.</p>

<p>This thesis will show you how to build and construct a interactive website with a web shop and a web based administration system. The website is developed for a company called Varett. Varett will use the website to reach out for a larger group of customers and also for promoting new products. I have develop this site mainly using ASP, MS Access and HTML. </p><p>I have also developed a graphic profile for the company to use at the homepage and at other commercial products. You can find the current version of the website at http://www.varett.se.</p> / <p>Detta examensarbete visar hur man bygger upp och konstruerar en interaktiv hemsida med en webbshop och ett webbaserat administrationssystem. Hemsidan är utvecklad åt ett företag som heter Varett. Varett var i behov av en hemsida för att kunna nå ut till en större kundgrupp och för att kunna göra reklam för nya produkter de själva utvecklat. </p><p>Jag har utvecklat hemsidan mestadels med hjälp av ASP, MS Access och HTML. Jaghar också tagit fram en grafisk profil åt företaget. Den grafiska profilen används inte bara på hemsidan utan också för reklamblad produktbroschyrer mm. Hemsidan finns just nu tillgänglig på http://www.varett.se.</p>

<p>Projektarbeten har med tiden blivit allt vanligare både i arbetsliv och i utbildningar. Under de senaste åren har ett flertal av de utbildningsprogram som ges vid Linköpings Universitet omarbetats för att från start göra studenter vana vid denna arbetsform. I dessa lärobaserade projekt följer man en projektmodell som kallas LIPS, lätt interaktiv projektstyrning. I projektarbeten krävs en bra samordning av all den information som arbetet genererar. Detta har vi försökt att underlätta genom att utveckla en webbportal för studiebaserade projektarbeten som samlar informationen centralt, åtkomlig för både studenter och lärare.</p><p>I detta examensarbete beskrivs hur en användarcentrerad systemutvecklingsprocess har bedrivits för att framställa webbportalen. Utvecklingen har bedrivits enligt en egendefinierad modell som bygger på iterativ och inkrementell utveckling. Systemet har testats tillsammans med användare med hjälp av olika utvärderingsmetoder.</p><p>I rapporten beskrivs hur vi har lärt känna användare och deras krav på det system vi har utvecklat. Vi berättar hur vi har löst tekniska delar av systemet samt hur användbarheten i systemet har maximerats.</p><p>Resultatet av examensarbetet har blivit ett användarvänligt webbaserat system som kan användas för att underlätta informationshanteringen i lärobaserade projektarbeten.</p> / <p>Project-based work has become more and more common in both work-life and education. During the last couple of years several programs at Linköping University has been reworked so that students will get used to this work form early. These education-based projects runs according to a project model called LIPS, this abbreviation can be translated as: easy interactive project guide. In these project-works it is necessary to coordinate the flows of information in an organized way. We have tried to simplify this feature by developing a web portal for education based project works. This portal gathers information centrally, reachable by both students and teachers.</p><p>In this degree project we describe how a user-centered system-development-process has been practised to produce the web portal. The development has been persued according to a, by us, definied model built on iterative and incremental development. The system has been tested with users according to several evaluation methods.</p><p>In this report we describe how we have got to know the users of the system and what demands they have on it. We describe how we have managed to solve technical issues in the system and how usabillity has been maximized.</p><p>The result of this degree project has become a user friendly web based system that can be used to simplify information management in education based project works.</p>

Ett företags webbplats är en av de viktigaste kommunikationskanalerna i dagens digitala värld. Det ärett virtuellt skyltfönster mot konsumenter, partners och anställda där företaget kan visa upp sina produkter och tjänster, men också kommunicera sin vision och sitt varumärke. Vissa företag använder också webbplatsen som marknadsplats och erbjuder sina kunder att handla online. Till sist kan en webbplats liknas med ett forum för dialog som något som sociala medier exempelvis bjuder in till. Likväl som det är viktigt att ta hänsyn till exempelvis användarvänlighet, tillgänglighet, designprinciper och målgrupper är det av största vikt att utgå från ett företags varumärkesstrategi vid formgivning och utveckling av en webbplats. Men hur ser utvecklingsprocessen ut när uppdragsgivaren inte finns någon varumärkesstrategi? Detta problem ställs jag inför i mitt praktiska examensarbete där uppdraget är utveckla en gemensam webbsida till två varumärken som saknar varumärkesstrategi. En annan problemställning som en webbutvecklare behöver ta hänsyn till är hur kod kan göras användarvänlig och användbar så att mottagaren kan ta över utvecklingen av webbplatsen efter överlämning av produkten. Även detta scenario ställdes jag inför under arbetet. Denna rapport beskriver bakgrund och genomförande av Tehå:s och BeHagfullts gemensamma webbplats. Tehå:s och BeHagfullt är två butiker belägna i en stad med 13 300 invånare, med en målgrupp som är över 50 år och en ägare som själv ogillar många nya digitala medier.Rapporten har för avsikt att guida läsaren genom projektets alla faser och skapa en förståelse för utvecklingsprocessen i ett projekt där företaget saknar varumärkesstrategi.Resultatet blev en webbplats med tydliga knappar och många bilder anpassad efter målgruppens och företagets behov. / A business website is one of the most important channels of communication in today's digital world. It is a virtual showcase for consumers, partners and employees where the company can showcase their products and services, but also communicate their vision and their brand. Some companies also use the website as a marketplace and offers its customers to shop online. Finally, a website can be likened to a forum for dialogue as something that social media such as invites to. Therefor it is important to take into account not only usability, accessibility, design principles and target groups but it´s also essential to start from a company's brand strategy in the design and development of a website. But what does the development process looks like when the client has branding strategy? This is a problem I face in my practical thesis in which the mission is to develop a joint website for two brands that lack branding strategy. Another problem that a web developer needs to consider is how the code can be user-friendly and useful for the client to be able to continue develop the site after the handover of the product. Also this scenario I faced during the project. This report describes the background and implementation of Tehå's and BeHagfullts common website. Tehå's and BeHagfullt are two stores located in a city with 13 300 inhabitants, with an targetgroup that is over 50 years and an owner who dislikes a lot of new digital media. The report intends to guide the reader through all phases of the project and create an understanding of the development process of a project where the company has no brand strategy. The result was a website with clear buttons and a lot of images designed to satisfy both the targetgroup and the clients needs.

<p>Detta examensarbete har inriktat sig mot webbutveckling och avsikten med rapporten var att undersöka hur några webbyråer uppfattar de programmeringsspråk, märkspråk och standarder som finns nu och som kommer utvecklas framöver, främst med avseende på webbutveckling. Jag ville även ta reda på vad webbyråerna anser om märkspråket XML och vad som kommer ske i framtiden inom området Internetutveckling, samt vilka fördelar och nackdelar webbyråerna anser att införandet av ny teknik/nya standarder har medfört.</p><p>För att besvara denna problemställning intervjuade jag sju stycken webbyråer i Skövde. Resultatet blev sammanfattat detta:</p><p>- De språk som används på webbsidor är främst HTML och olika script-språk.</p><p>- Standardisering av märkspråk är viktigt för företagen.</p><p>- Märkspråket XML kommer att användas först då det blivit en pålitlig standard.</p><p>- Internet upplevs av företagen fortfarande som relativt outvecklat, men kommer enligt företagen att utvecklas och växa, bli mer interaktivt samt integreras med annan teknisk utrustning såsom TV-n.</p><p>- De flesta problem som uppstår vid utvecklingen av ny teknik är främst mjukvaruproblem, exempelvis inkompatibilitet mellan olika webbläsare.</p>

Målet med detta projekt har varit att migrera och förnya webbplatsen visitfjallen.se. Sidan innehåller ett brett register av olika företag inom områden som upplevelser, boende och restauranger i Sveriges fjällkedjor. Den tidigare webbplatsen var omodern och byggd på ett kostsamt system som saknade flexibilitet. I detta arbete har webbplatsen flyttats till det flexiblare och mer lättskötta systemet WordPress. Sidan har också moderniserats ordentligt och fått en hel del förbättringar och nya funktioner. I stället för en par enkla textrader med information har varje företag nu fått en egen profilsida med plats för stora mängder av information. Bland de helt nya funktionerna finns exempelvis egna kontaktformulär och möjligheten för besökare att lämna recensioner för bolagen. Företagen har också fått en integrering av sociala medier med egna knappar för Facebook och Twitter. Flera företag som finns listade på Tripadvisor har även fått detta integrerat på sin sida. Inloggade besökare kan nu spara sina favoritföretag genom att markera dem som sin favorit. Eller lämna en recension för bolag de har åsikter om. De flesta av de nya funktionerna har erhållits med hjälp av tillägget Geodirectory till WordPress, vilket är ett utmärkt och heltäckande verktyg som specialiserat sig på webbplatser med omfattande företagsregister. En betydande del av arbetet bestod av att flytta den stora mängden bolag med tillhörande information till den nya webbplatsen. Registret var möjligt att överföra via en kalkylfil, men informationen i den den exporterade filen var rörig och innehöll 900 rader med data som behövde sorteras och struktureras upp rad för rad. För att dela upp arbetet gjordes därför filen i episoder om ungefär 200 bolag åt gången. En stor del av webbplatsen har byggts upp med hjälp av sidbyggar-verktyget Beaver Builder. Verktyget har varit användbart och påskyndade processen med att konstruera det stora antalet sidor som var nödvändigt för att bygga upp den nya Visitfjällen.se. Den färdiga webbplatsen uppfyllde de flesta av beställarens önskemål och det nya utseendet för visitfjällen blev i slutändan mycket uppskattat.

Rapporten beskriver planering samt konstruktion av en ”modern webbapplikation” för serie- och omslagstecknaren Anders Ferm. Arbetet utfördes i syfte att erbjuda Anders en lättanvänd plattform för sin konst, där han själv kan publicera samt hantera media och information utan kunskap inom webbutveckling. Rapporten syftar till att ge inblick i hur några av de mer nya och populära webbutvecklingsramverken på marknaden kan arbetas med, samt besvara frågan om mindre traditionella ramverk och databaser faktiskt kan utföra de inom webben vanligaste typen av uppgifter och, om så är fallet, de faktiskt erbjuder fördelar över sina föregångare.