Responsive web design is a popular approach to support devices with varying characteristics (viewport size, input mechanisms, media type, etc.) by conditionally style the content of a document by such criteria using CSS media queries. To reduce complexity it is also popular to develop web applications by creating reusable modules. Unfortu-nately, responsive modules require the user of a module to define the conditional styles since only the user knows the layout of the module. This implies that responsive modules cannot be encapsulated (i.e., that modules cannot perform their task by themselves), which is important for reusabil-ity and reduced complexity. This is due to the limitation of CSS media queries that elements can only be condition-ally styled by the document root and device properties. In order to create encapsulated responsive modules, elements must be able to be conditionally styled by element property criteria, which is known as element queries. Participants of the main international standards orga-nization for the web, the W3C, are interested in solving the problem and possible solutions are being discussed. How-ever, they are still at the initial planning stage so a solution will not be implemented natively in the near future. Addi-tionally, implementing element queries imposes circularity and performance problems, which need to be resolved be-fore writing a standard. This thesis presents the issues that element queries im-pose to layout engines and shows some approaches to over-come the problems. In order to enable developers to create encapsulated responsive modules, while waiting for native support, a third-party element queries JavaScript library named ELQ has been developed. As presented in this the-sis, the library provides both performance and usage advan-tages to other related libraries. An optimized subsystem for detecting resize events of elements has been developed us-ing a leveled batch processor, which is significantly faster than similar systems. As part of the empirical evaluation of the developed library the Bootstrap framework has been altered to use element queries instead of media queries by altering ~50 out of ~8500 lines of style code, which displays one of the advantages of the library. / Responsiv webbutveckling är ett populärt sätt att stödja enheter med varierande egenskaper (storlek av visninsom-rådet, inmatningsmekanismer, mediumtyper, etc.) genom att ange olika stilar för ett dokument beroende på enhetens egenskaper med hjälp av CSS media queries. Det är också populärt att utveckla webbapplikationer genom att skapa återanvändbara moduler för minskad komplexitet. Tyvärr kräver responsiva moduler att användaren av en modul de- finierar de olika responsiva stilarna eftersom endast använ-daren vet i vilket kontext modulen används. Detta implice-rar att responsiva moduler inte är enkapsulerade (alltså att de inte fungerar av sig själva), vilket är viktigt för återan-vändning och reduktion av komplexitet. Det beror på CSS media queries begränsningar att det endast går att defini-era olika stilar för element beroende på dokumentets rot och enhetens egenskaper. För att kunna skapa enkapsule-rade responsiva moduler måste olika stilar kunna definieras för ett element beroende på ett elements egenskaper, vilket är känt som element queries. Deltagare av det internationella industrikonsortiet för webbstandardisering, W3C, är intresserade av att lösa pro-blemet och möjliga lösningar diskuteras. De är dock endast i det initiala planeringsstadiet, så det kommer dröja innan en lösning blir implementerad. Dessutom är det problema-tiskt att implementera element queries eftersom de medför problem gällande cirkularitet samt prestanda, vilket måste lösas innan en standard skapas. Denna rapport presenterar de problem för webbläsares renderingsmoterer som element queries medför och visar sätt att övervinna vissa av problemen. För att möjliggöra skapandet av enkapsulerade responsiva moduler, i väntan på webbläsarstöd, har ett tredjepartsbibliotek för element queries namngett ELQ skapats i JavaScript. Biblioteket er-bjuder både prestanda- och användningsfördelar jämfört med andra relaterade bibliotek. Ett optimerat delsystem för att detektera förändringar av elements storlekar har ut-vecklats som använder en nivåuppdelad batch-processerare vilket medför att delsystemet erbjuder signifikant bättre prestanda än relaterade system. Som del av den empiriska utvärderingen har det populära ramverket Bootstrap modi- fierats att använda element queries istället för media queries genom att ändra ~50 utav ~8500 rader stilkod, vilket visar en av fördelarna med det utvecklade biblioteket.

The goal with this exam project is to take as much knowledge as possible from earlier courses I’ve taken at the webdevelopment program at Mid Sweden University and use this knowledge for a project for a company working with webdevelopment. I’ve chosen to do my exam project for David Törner Web agency who’s main goals are to work with Content Management Systems, (CMS). I’ve developed a custom theme and a webstore in the CMS WordPress with the plugin WooCommerce, a plugin that connects webstores with WordPress sites for easier administration and management of products. The webstore is selling bikes in the categories mountain bikes, enduro and downhill bikes, specially black bikes with high quality and it works as a demonstration of a webstore to show other companies what we are able to offer if they choose us to do a webstore in WordPress. The webstore also offers service on the bikes that the customer can book by themselves through the contact form. The design and foundation for the webstore have been designed and developed in the program Adobe XD in the form of moodboards, wireframes and design sketches and then coded in the program Visual Studio Code, (VSC) with the program language HyperText Preprocessor, (PHP), HyperText Markup Language, (HTML), Cascading Style Sheets, (CSS) and JavaScript. The design and the foundation of the webpages have been connected to WordPress and the webstore plugin WooCommerce and the webstore has been published online through a public webhosting service. / Syftet med detta examensarbete är att ta så mycket som möjligt utav kunskapen från tidigare kurser i webbutvecklingsprogrammet på Mittuniversitetet och applicera denna kunskap i ett arbete åt ett företag som inriktar sig inom webbutveckling. Jag har valt att göra mitt examensarbete åt David Törners Webbyrå som inriktar sig specifikt på webbsidor skapade med Content Management Systems, (CMS). Jag har utvecklat ett tema samt en webbutik i CMS:et WordPress med tillägget WooCommerce, som är ett tillägg som kopplar samman webbutiker med WordPressidor för enklare administrering samt hantering utav webbutiken och varorna. Webbutiken inriktar sig på försäljning utav cyklar inom kategorierna mountainbikes, enduro- samt downhill-cyklar, specifikt svarta och högkvalitativa cyklar samt fungerar som en demonstrations-webbutik att visa upp för företag som exempel på vad de skulle kunna få om de väljer en webbutik gjord i WordPress. Webbutiken erbjuder även service utav cyklar och att kunden via kontaktformulär kan boka sin service. Design och grund för webbutiken har utvecklats först i programmet Adobe XD i form utav moodboard, wireframes samt designskisser och sedan utvecklats och kodats i programmet Visual Studio Code, (VSC), med hjälp utav programspråket Hypertext Preprocessor, (PHP), HyperText Markup Language, (HTML), Cascading Style Sheets, (CSS) samt JavaScript. Designen och grunden på webbsidorna har sedan kopplats samman med WordPress samt webbutik-tillägget WooCommerce och publicerats på ett publikt webbhotell.

The architectural industry today struggles with how to best show their models to interested suitors opposite the construction industry which have the advantage of the fact that they can build physical models of houses which they can then show. This is where BIM comes into the picture. By extracting the graphics fromthese models and visualising them in a web browser this studyhas by creating a viewer with different navigation techniques sought to find out which techniques where most efficient for navigating models in the viewer. This was done with the help of user tests which results show that when it comes to projections, users were more efficient with perspective projection than orthogonal projections, however, user interviews show that users could still find a use for orthographic projection as it was better for displaying floor plans. Egocentric perspective were more efficient than allocentric perspective, but most users preferred egocentric perspective inside the models and allocentric projection outside of it. As for clipping objects and using clip planes, it is a closer race as users completed the task faster with clip plane but to a greater extent with culling of objects. However, most users wanted to use both technologies at the same time so that they could complement each other.

Med ökningen av mobila enheter och dess användning ökar även användningen av mobila applikationer (Fedosov et al, 2016). Ett sätt att möta denna ökning är med hjälp av designprincipen Mobile-First. Att följa Mobile-First innebär att designa med mobila enheter i åtanke först och främst. För att förenkla tillvägagångssättet finns det ramverk vilket är programvarumiljöer som ger en bra bas att bygga på. I det här arbetet ställdes Mobile-First ramverken Bootstrap och Foundation mot varandra i ett experiment om vilket ramverk som hade högst responsivitet vid inläsning av en webbsida med visualisering av data. Olika sidor med olika element sattes upp och genom olika mätserier mättes responsiviteten. Mätningen skedde med skript som mätte svarstid i ms. Resultatet för alla mätningar samt för varje mätserie var att Bootstrap hade i snitt en lägre svarstid än Foundation. Detta går att bygga vidare på genom att jämföra andra element än de som gjordes i just det här arbetet. / <p>Det finns övrigt digitalt material (t.ex. film-, bild- eller ljudfiler) eller modeller/artefakter tillhörande examensarbetet som ska skickas till arkivet.</p>

This diploma thesis deals with the development of web 2D HTML5 game, which users can play through a web browser. For the wide availability of games for various game devices (personal computers, game consoles, smartphones), the game is developed using modern web technologies. At the end of the work, the web game (application) was deployed and tested on the web.

Today there are a large number of plugins available for WordPress to manage various types of content and many of them work really well. However, one problem is that the user only gets the control that the plugin creator has allowed from the beginning. This project which uses the name JBlocks is made for the web development agency Fostira AB and is about the development of a Gutenberg block plugin for WordPress. Based on the company's requirements I have applied what I have learned from Webbutvecklingsprogrammet at Mid Sweden University. The main purpose of this project is to facilitate the company's daily production by providing full control over both the plugin and the blocks they mostly work with. This will reduce the workload and the time it takes to learn or configure possibly several different plugins. Hopefully this will also reduce the stress that may be associated with those tasks. My plugin consists of the most common blocks and it uses the same stylesheet to make it easier to customize the content for each specific customer. It is designed to be easily built upon by Fostira's developers if they need to in the future. The report describes all the different phases of the work from planning and the methods used to the construction and the final result. / Idag finns det en stor mängd plugins tillgängliga för WordPress för att hantera olika typer av innehåll och många av dem är väldigt bra. Ett problem är dock att användaren bara får den kontroll som skaparen av pluginen tillåtit från början. Detta projektarbete som går under arbetsnamnet JBlocks är utfört åt webbyrån Fostira AB och handlar om utvecklingen av en plugin för Gutenbergblock i WordPress. Utifrån företagets krav har jag tillämpat mina kunskaper från Webbutvecklingsprogrammet via Mittuniversitetet. Arbetets huvudsyfte är att underlätta företagets verksamhet genom att ge full kontroll över både pluginen och blocken som dom oftast jobbar med. Målet är att minska arbetsbördan för de anställda och reducera tiden de behöver spendera på att lära sig eller konfigurera plugins. Tanken är också att detta ska minska den stress som detta kan leda till. Mitt plugin består av de vanligaste blocken och använder en och samma stilmall för att enklare kunna anpassa innehållet åt varje specifik kund. Den är skapad för att på ett lättbegripligt sätt kunna byggas på av Fostiras utvecklare i framtiden om behovet av fler block skulle uppstå. Rapporten beskriver alla arbetets olika faser från planering och de metoder som använts till konstruktionen och det färdiga resultatet.

Dagens webbläsare uppdaterar sitt utseende mer än någonsin och att kunna utföra det på ett effektivt sätt är essentiellt. Att kompilera om en hemsida och ladda upp den på nytt är ineffektivt och framtiden hos dynamisk uppdaterade hemsidor ligger hos MQTT och websockets. Med hjälp av Invencon har jag utforskat detta område genom att få en back-end till ett systemet att bygga på. Det har framställts två användargränssnitt för två gruvrobotar som ska kunna ta ordar av ett publicerar-användargränssnitt. Meddelandena skickas som JSON-objekt som är fyllda med information som robotarna ska ta emot. Dessa ordrar kan vara att ändra robotens maximala hastighet. Robotarna uppdaterar sitt gränssnitt i realtid där de samtidigt skickar sin nuvarande hastighet till publiceraren som visar upp dem. Det finns ett fjärrkontroll-gränssnitt där man kan välja en robot som är igång, där gränssnittet presenterar all information om den valda roboten. Användar- gränssnitten skrivs i HTML och CSS där funktionaliteten görs i JavaScript med hjälp av MQTT och websockets. Flera tester har gjorts där man kollar latensen på hur lång tid det tar för ett meddelande att ta sig till en robot och tillbaka till publiceraren för att mäta hur pålitligt systemet är. Efter testerna utfördes, kom jag fram till att fler tester kommer behöva göras för att testa systemet på en högre nivå, då två robotar och en användare inte räcker för ett konkret resultat. Systemet har potential att användas i riktig verksamhet med vidareutveckling av båda tester och bättre back-end. / Today’s web browsers are updating their appearance more than ever, and being able to do so efficiently is essential. Compiling a website and uploading it again is inefficient, and the future of dynamically updated websites lies in MQTT and websockets. With the help of Invencon, I have explored this area by establishing a back-end for the system. Two user interfaces have been developed for two mining robots that can receive commands from a publisher-interface. Messages are sent as JSON-objects filled with information that the robots need to receive. These commands can include changing the robot’s maximum speed. The robots update their interfaces in real-time while si- multaneously sending their current speed to the publisher, which displays them. There is a remote control-interface where you can select a running robot, and the interface presents all information about the chosen robot. The user interfaces are written in HTML and CSS, with functionality implemented in JavaScript using MQTT and websockets. Several tests have been conducted to measure the latency of how long it takes for a message to reach a robot and back to the publisher, proving the reliability of the system. After the tests, it was concluded that more testing needs to be done to evaluate the system on a higher level, as two robots and one user are insufficient for a concrete result. The system has the potential to be used in real-world applications with further development of both testing and a better back-end.

No description available.

No description available.

Syftet med denna studie var att ta reda på om animationer kan användas för att påverka en användares förtroende för en webbplats, vid situationer där förtroende har en stor betydelse. Som till exempel registrering av prenumerationstjänster eller sociala medier. Syftet är även att ta reda på vilka animationer som ger ett förtroendeingivande intryck. För att genomföra undersökningen har litteratursökning, visuell innehållsanalys och enkätundersökning använts. Resultatet visade på att animationer kan användas för att öka en användares förtroende för en webbplats. Resultatet visade även vilka animationer som kan användas för att öka förtroendet. Slutsatserna visar att webbplatser bör innehålla någon form av animation för att öka förtroendet, användaren vill få feedback när interaktion med webbplatsen sker. Feedbacken ska ske så snabbt som möjligt och med någon form av varaktighet. Animationerna bör öka kontrasten på elementet gentemot sin omgivning, oavsett vilken sorts animering det gäller. Dock bör inte kontrasten vara för påtaglig. / The purpose of this study was to investigate if animation can be used to influence a user’s trust in a website in situations where trust is of great importance, such as registration of subscription service or social media. The purpose is also to find out which type of animations that gives a trustworthy impression. Literature studies, visual content analysis and questionnaire survey have been used to carry out the survey. The result showed that animations can be used to increase a user's trust in a website. It also showed which animations can be used to increase trust. The results show that websites should contain some form of animation to increase trust, the user wants to receive feedback when interacting with the site. The feedback should be given as quickly as possible and with some kind of duration. The animations should increase the contrast of the element to its surroundings, no matter what kind of animation it is. However, the contrast should not be too obvious.