Denna rapport beskriver skapandeprocessen av webbsidan aiducate.se, vars syfte är att stötta, motivera och vägleda gymnasieelever i sin utbildning. Projektet genomfördes självständigt utan någon uppdragsgivare och pågick under en tidsperiod om tio veckor. Till grund låg en förundersökning som visade på bristande motivation hos gymnasieelever. I en kompletterande enkätundersökning fastställdes det att eleverna önskade en modernisering av utbildningen med utrymme för nutida undervisningsmetoder. Som ett komplement till gymnasieutbildningen framställdes därför innovationen Aiducate som i framtiden ska omfatta olika verktyg för studierna. Allt från hur man skriver en rapport till hur man får inspiration. Inom ramen för detta examensarbete presenterades en enklare betaversion av webbsidan. Detta omfattade en fullständig grafisk profil, responsiv design och vissa funktioner såsom exempelvis forum och användarkonto. Rapporten följer även utvecklingen av webbsidan i det populära CMS-verktyget WordPress. Teoretisk bakgrund har förankrat alla slutgiltiga beslut för webbsidans design och funktion, vilket även återkopplats genom användartester. / This report describes the creative process of the website aiducate.se, which purpose is to support, motivate and guide high school students in their education. The project was conducted independently without any employers and lasted for a period of ten weeks. The basis of the project was a prior study that showed a lack of motivation among high school students. A supplementary survey showed that the students wanted to modernize the education with contemporary teaching methods. As a complement to high school education, the innovation Aiducate was made which in the future will include various tools for the studies. Everything from how to write a report to how to get inspiration. Within the framework of this thesis a simpler beta version of the website was presented. This included a complete graphic profile, responsive design and some features such as a forum and user account. The report also follows the development of the website in the popular CMS tool WordPress. Theoretical background has anchored all final decisions for the website’s design and function, which also reconnects through user testing.

Denna rapport redovisar utvecklingen av en tjänst för att lättare kunna söka praktikplats och praktikanter. Tjänsten utvecklades som ett eget projekt att senare kunna visas upp som ett förslag för intressenter av verktyg som detta. Utvecklingen har följt dagens principer för användbarhetsdesign och upplevelsedesign. Målet har under hela utvecklingsperioden varit att skapa något som speglar denna tids trender och applikationer för möten. Resultatet av detta projekt har landat i en hifi prototyp, grafisk profil samt konceptbeskrivning för hur tjänsten ska fungera och användas. Denna prototyp kommer senare att utvecklas och skapas som en webbapplikation. / This report accounts the development of a service to make it easier for students to get an internship. The web application is a self-developed project meant to be later be presented for companies interested in similar areas as this. The development follows the principles of usability and experience design. The goal during the process has the hole time been to create a something that follow this eras trends for meeting applications. The result ended in a wellstructured hifi prototype, a graphic profile guide as well as a concept for further development of the service. The prototype will in the next step be developed into a real web application.

Denna rapport redovisar för design- och utvecklingsprocessen i byggandet av en responsiv webbsida. Webbsidan skapades för användning av den blivande spelstudion Rocket Luncher Studios. Wordpress som CMS (Content Management System) har används som innehålls-hanteringssystem för att förenkla uppdatering av webbsidan av uppdragsgivaren själva. Webbsidan är kodad utifrån Luke Wroblewskis ”mobile-first”-tänk, vilket börjar med att fokusera designen på mindre skärmar för att sedan anpassa innehållet mot större skärmstorlekar. För att göra designen responsiv har de tre beståndsdelarna flexible grid, flexible images/media och media queries använts, utöver kodning i HTML, CSS, PHP och JavaScript. Resultatet av denna rapport blev en undersökning av design- och utvecklingsprocessen vid byggandet av en responsiv webbsida. Det praktiska i examensarbetet resulterade i en responsiv prototyp till en webbsida för en spelstudio. / This report describes the design and development process in building a responsive website. The website was created for the use of the intended game studio Rocket Lunches Studios. Wordpress has been used as a CMS (Content Management System) to simplify the updating of the website by the client themselves. The website is coded by thinking "mobile-first", which begins with the design focusing on smaller screens and then adapt the content on larger screen sizes. To make the design responsive the three components flexible grids, a flexible images / media and media query has been used, in addition to coding in HTML, CSS, PHP and JavaScript. The result of this report is a survey of the design and development process when building a responsive website. The practicality of the thesis resulted in a responsive prototype of a web page for a game studio.

För att särskiljas från konkurrenter och vara förtroendeingivande är en konsekvent grafisk identitet av stor vikt. Därför syftar föreliggande undersökning till att modernisera den grafiska identiteten hos Falu Glastjänst för att denna ska förmedla hållbarhet, kvalité och service. Vidare är målet att leverera en webbsida där den grafiska identiteten tillämpas och en rekommenderad grafisk manual till Falu Glastjänst. Semi-strukturerade intervjuer genomfördes med Falu Glastjänst och en kund till företaget. Två webbaserade enkätundersökningar utfördes där den första syftade till att ta reda på målgruppens tillvägagångssätt vid behov av ett glasmästeri, medan den andra enkäten utfördes för att testa det framtagna materialet på potentiella kunder. Vidare genomfördes Card Sortings med fyra potentiella kunder och tre personer inom IT-branschen för att bygga en maximal hierarki och således en användarvänlig webbsida. Undersökningen resulterade i en logotyp och grafisk identitet som enligt Falu Glastjänst samt tidigare- och potentiella kunder förmedlar hållbarhet, kvalité och service. Från undersökningen har även en webbsida kunnat tas fram, där hierarkin är baserad på respondenternas och således målgruppens önskemål och vanor. / Graphical identity is important for a company to distinguish itself from the competition and to give it a reliable business image. The present study aims therefore to modernize the graphical identity of Falu Glastjänst in order to communicate sustainability, quality and service. A further goal is to develop a website in which the modernized graphical identity is applied as well as a recommended graphical manual for Falu Glastjänst. Semi-structured interviews were conducted with Falu Glastjänst and one of its customers. Two web-based surveys were carried out. The first survey aimed at studying the behavior of a target group in need of glazing service. The second survey was carried out to test the results of the first survey on a new group of potential customers. In order to build a user-friendly website with best hierarchy, Card Sortings was carried out with four potential customers and three IT professionals. Results of the study include a new logotype and graphic identity which communicate sustainability, quality and service. This has been confirmed by Falu Glastjänst as well as their former and potential customers. A further result of the study is a new website for Falu Glastjänst with a hierarchy based on participants of the study and thereby the target group’s wishes and habits.

På webbplatsen arbetsliv.org finns webbsidorna branschkunskap och ämneskunskap innehållandes länkar till andra webbsidor, med fakta kring arbetsmiljö. Webbsidorna riktar sig främst till arbetsmiljöingenjörer och medlemmarna inom organisationerna FTF (Föreningen Teknisk Företagshälsovård) Arbetsmiljö och EHSS, Ergonomi och Human Factors Sällskapet Sverige. Arbetsmiljöingenjörer arbetar med frågor relaterade till branscher inom många olika områden. Därför anses det underlätta deras arbete genom att ha en samlad plats för branschspecifik information. Syftet med uppsatsen är att utveckla webbsidor till en egen domän, arbetsmiljowiki.se, och att utifrån organisationsmedlemmarnas åsikter skapa en wiki med bransch- och ämneskunskap inom arbetsmiljö. För att ta reda på användarnas åsikter genomfördes åtta stycken kvalitativa telefonintervjuer med intervjupersoner från olika åldersgrupper. Litteraturstudier skedde kring val och utveckling av teknisk lösning för att få en bild av de möjligheter som finns. Jämförelsen av tekniska lösningar, analysen av telefonintervjuerna och de uppställda kraven utgör tillsammans ett delresultat. Delresultatet ledde fram till en integration av Facebookinloggning, YouTubelänkar, kommentarsfält och att resultatet arbetsmiljowiki.se utformades enligt organisationsmedlemmarnas åsikter. / Located on the website arbetsliv.org is the webpages branschkunskap and ämneskunskap, containing links to other websites with facts about occupational health and safety. The webpages mainly target themselves towards occupational health engineers and members of the two organization’s FTF (Föreningen Teknisk Företagshälsovård) Arbetsmiljö and EHSS, Ergonomi och Human Factors Sällskapet Sverige. Occupational health engineers work with questions related to industries of many different fields. Therefore, it is considered to facilitate their work by providing a collaborative collection of industry-specific information. The purpose of this thesis is to develop the webpages into an independent domain, arbetsmiljowiki.se, and based on the organization members’ opinions create a wiki about industry and subject knowledge related to occupational health and safety. To collect the users’ opinions, eight qualitative telephone interviews were carried out with interviewees from different age-groups. Literature studies regarding choice of and development of technical solutions were performed in order to obtain a greater picture of the available possibilities. The comparison of technical solutions, analysis of the telephone interviews and the specified requirements together make up a part of the result. One part of the result resulted in an integration of Facebook login, embedded YouTube videos, comment fields and that the final result arbetsmiljowiki.se was shaped as per the organization members’ requests.

[pt] Uma estratégia comum de linha de produtos de software envolve sistemas da Web baseados em plug-ins que suportam a incorporação simples e rápida de comportamentos personalizados, sendo amplamente adotados para criar aplicativos baseados na web. A popularidade dos ecossistemas que suportam o desenvolvimento baseado em plug-ins (como o WordPress) é, em grande parte, devido ao número de opções de personalização disponíveis como plug-ins contribuídos pela comunidade. Entretanto, as vulnerabilidades relacionadas a plug-ins tendem a ser recorrentes, exploráveis e difíceis de serem detectadas e podem levar a graves conseqüências para o produto personalizado. Portanto, é necessário entender essas vulnerabilidades para permitir a prevenção de ameaças de segurança relevantes. Neste trabalho, realizamos um estudo exploratório para caracterizar vulnerabilidades causadas por plug-ins em sistemas baseados na web, examinando os boletins de vulnerabilidade do WordPress catalogados pelo National Vulnerability Database e os patches associados, mantidos pelo repositório de plugins do WordPress. Identificamos os principais tipos de vulnerabilidades, o seu impacto e o tamanho do patch para corrigir a vulnerabilidade. Identificamos, também, os tópicos mais comuns relacionados à segurança discutidos entre os desenvolvedores do WordPress. Observamos que, embora as vulnerabilidades possam ter consequências graves e permanecerem despercebidas por muito tempo, elas geralmente podem ser atenuadas com pequenas alterações no código-fonte. A caracterização ajuda a fornecer uma compreensão de como tais vulnerabilidades se manifestam na prática e contribui com as novas gerações de ferramentas de teste de vulnerabilidades capazes de antecipar sua possível ocorrência. Esta pesquisa propõe uma ferramenta de suporte para mitigar a ocorrência de vulnerabilidades em sistemas baseados em plugins web, facilitando a descoberta e antecipação da possível ocorrência de vulnerabilidades. / [en] A common software product line strategy involves plug-in-based web systems that support the simple and rapid incorporation of custom behaviors and are widely adopted for building web-based applications. The popularity of ecosystems that support plug-in-based development (such as WordPress) is largely due to the number of customization options available as community-contributed plugins. However, plug-in related vulnerabilities tend to be recurring, exploitable and difficult to detect and can lead to serious consequences for the custom product. Therefore, these vulnerabilities must be understood to enable the prevention of relevant security threats. In this paper, we conduct an exploratory study to characterize plug-in vulnerabilities in web-based systems by examining the WordPress vulnerability bulletins cataloged by the National Vulnerability Database and the associated patches maintained by the WordPress plugin repository. We identify the main types of vulnerabilities, their impact, and the size of the patch to address the vulnerability. We have also identified the most common securityrelated topics discussed among WordPress developers. We note that while vulnerabilities can have serious consequences and remain unnoticed for a long time, they can often be mitigated with minor changes to source code. Characterization helps provide an understanding of how such vulnerabilities manifest themselves in practice and contributes to new generations of vulnerability testing tools that can anticipate their potential occurrence. This research proposes a support tool to mitigate the occurrence of vulnerabilities in web plugin based systems, facilitating the discovery and anticipation of the possible occurrence of vulnerabilities.

The following degree report includes the theoretical information needed to understand the retelling of a project where this report's author had the goal of building a CMS-system in the form of a block editor using the framework Laravel. This was done on-site for the company Mina Bästa Polare AB, who found a need for a CMS-system to use within their Laravel projects. This need was found through their customers' administrators needing to contact the developers for changes that otherwise could be made by the administrators if they had a CMSsystem available. The work done that is retold in this report was done in the framework Laravel, a block editor was built to be used as a CMS-system for the developers at Mina Bästa Polare to implement within their Laravel-projects. Before the development of the block editor could start the work needed to be planned, with a Gantt scheme-alike document a time estimate was made for every step in the process. The block editor was visually designed with wireframes and the database architecture was designed with an ER-diagram. The development of this block editor was done within the frameworks Laravel, Inertia, Vue and Tailwind. These techniques were used to create a full stack website that can be shown as a first example of how this CMS-system can be used within Laravel-projects. With this system available to them both the developers and customers of Mina Bästa Polare will experience a smoother running workday / Föreliggande rapport presenterar den teoretiska information som behövs för att förstå efterkommande återberättande av ett projektarbete där målet var att rapportens författare skulle bygga ett CMS-system i form av en blockeditor inom ramverket Laravel. Projektarbetet utfördes på plats hos företaget Mina Bästa Polare AB, en webbyrå baserad i Östersund som upptäckt ett behov av ett CMS-system i form av en blockeditor till sina Laravel-projekt. tillgång till ett sådant CMS-system. Ett mål är att editorn skall bli så “decoupled“ som möjligt, vilket betyder att i högsta möjliga mån skall kunna implementeras i vilket Laravel-projekt som helst. Innan utvecklingen av blockeditorn påbörjades så strukturerades arbetet upp genom att det tidsplanerades med hjälp av en tidplan som liknar ett Gantt-schema vilket estimerar en tidsaspekt för varje steg i processen. Sedan påbörjades blockeditorns visuella design vilket gjordes med wireframes följt av att databasen arkitektur designades genom ett ER-diagram. Utvecklingen utfördes i ramverken Laravel, Inertia, Vue och Tailwind. Dessa tekniker användes för att i slutändan resultera i en fullstack webbplats som kan visas upp som ett första exempel på hur denna CMS-system kan användas inom Laravel-projekt. Med detta system tillgängligt kan nu inte bara Mina Bästa Polares utvecklare utan även deras kunder få en smidigare vardag när de använder detta system.

The subject of this thesis is content management systems (CMS) with a focus on an open source CMS Wordpress, which is designed for creating and managing content of the web sites. Also there are explained advantages and disadvantages of using CMS in commercial and non-commercial environment on two specific projects. Based on the analysis, some recommendations have been proposed for both projects.

This thesis is concerned with mapping websites environment by comparison selected open-source Content Management Systems (CMS), also deals with possibility to use these systems by natural persons and different-sized legal persons operating in commercial or non-commercial sectors. An objective of the thesis is a proof that Content Management Systems satisfy all needs of legal personalities and mostly are suitable solution for them.

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.