SÖRAB is a waste disposal firm that is operative in nine of the municipalities in Stockholm County, Sweden. Each municipality has their own separate management of information and services. SÖRAB aspires to facilitate the process of finding and placing orders on waste disposal services for the residents in these municipalities. This thesis examines what should be done in order to centralize the municipalities’ waste disposal information into a shared portal. The main difficulties, concerning centralization, are that the municipalities use different underlying customer systems and have different practices in regulating waste disposal rates. After proposals for solutions for the identified problems are presented, an investigation into the most suited application type for the portal is conducted. This investigation focuses on a comparison between the two application types native mobile applications and mobile web applications. The usability of the portal is considered important. Hence different techniques, aiming to increase the usability of the graphical interface, are researched and presented. The identified problem areas, the application study and the usability aspects are the foundation for the development of a functional prototype of the portal. The result of the thesis is a prototype of a responsive web application. The prototype is implemented with the framework Angular. In order to facilitate potential future development, an architectural document describing the prototype is written. The thesis can be usable for future implementation projects. It presents a functioning methodology, gives insight in usability principles and compares pros and cons with different application types. / SÖRAB är ett avfallsbolag som är verksamt i nio av Stockholm läns kommuner. Varje kommun har separat hantering av information och tjänster. SÖRAB vill underlätta för kommuninvånarna att hitta och beställa tillgängliga avfallstjänster. Detta examensarbete undersöker vad som krävs för att centralisera kommunernas avfallsinformation i en gemensam portal. De stora svårigheterna kring centraliseringen ligger i att kommunerna använder olika bakomliggande kundsystem och tillämpar olika sätt att styra sina avfallstaxor. Efter att lösningsförslag för problemområdena presenteras, undersöks vilken typ av plattform som passar bäst för portalen. Denna undersökning jämför de två applikationstyperna nativa mobilapplikationer och mobila webbapplikationer. En viktig del för portalen anses vara dess användarvänlighet. I rapporten undersöks och presenteras därför olika tekniker som kan höja användarvänligheten i grafiska gränsnitt. De identifierade problemområdena, applikationsstudien och användarvänlighetaspekterna, blir underlag för att utveckla en funktionell prototyp av portalen. Examensarbetets resultat är en prototyp av en responsiv webbapplikation. Implementeringen sker med ramverket Angular. För att underlätta eventuellt fortsatt arbete, skrivs ett dokument som beskriver prototypens arkitektur. Rapporten kan vara till nytta för framtida implementeringsprojekt. Den uppvisar en fungerande metodik, ger insikt i användarvänlighetsprinciper och jämför föroch nackdelar med olika applikationstyper.

Att göra webbsidor tillgängliga för olika sorters enheter är ett område som har uppstått i och med smartphonens utveckling. Mängden enheter har under de senaste åren ökat stort och det är inte längre endast laptops och datorer som används. Då enheternas skärmupplösning skiljer sig krävs en anpassning beroende på enhet för att ge en bra användarupplevelse. För att identifiera tillgängliga tekniker har en kvalitativ undersökning genomförts. Undersökningen består av en genomgång av utvald litteratur samt intervjuer med utvecklare på företagen Nethouse och Laget.se utförts. Detta för att inhämta information om användandet av tekniker, undersöka om det finns något framträdande tankesätt samt undersöka för- och nackdelar med teknikerna. Slutsatsen är att alla tekniker har sina användningsområden eftersom de har olika styrkor och svagheter. Resultatet från denna studie presenteras som en genomgång av de befintliga teknikerna och deras potentiella användningsområden för att vägleda valet av teknik. / Making web pages available for different types of devices is an area that has arisen with the development of smartphones. In recent years it has become a major increase in units and there are no longer only laptops and computers that are being used. Since there is a size difference between the different devices there is need for adjustment depending on the device to provide a good user experience. The study was carried out as a qualitative study to identify available technologies. A review of available literature and interviews with developers at the companies Nethouse and Laget.se was conducted to obtain information on the performance of the techniques, if there is any way of thinking and if there is advantages and disadvantages of the techniques. The conclusion is that all technologies have their uses as they have different strengths and weaknesses. The results from this study are presented as a review of the existing technologies and their potential uses to guide the choice of technology.

Denna rapport beskriver ett examensarbete som gått ut på att skapa en ny hemsida till den tryckta tidningen Maskinentreprenören. Projektet resulterade i detaljerade skisser för en webbtidning anpassad för desktop, surfplattor och mobiler. Teoretiska ingångar till projektet är begreppen användbarhet, användarupplevelse, designprinciper, teorier om flerkanalspublicering samt normkritisk design. Stor vikt har lagts på en process enligt modellen Design Thinking, där metoder som enkät, intervju, användartest och personas använts för att skapa förståelse för användarna och tjänsten som skall utformas. Dessa metoder har även kopplats till en normkreativ praktik. Syftet med detta har varit att förstå de nuvarande användarna, men även förstå de potentiella användare som tidigare eventuellt uteslutits. / This report describes a practical exam work on creating a new website for the printed magazine Maskinentreprenören. The project resulted in detailed sketches for an online magazine designed for desktop, tablet and mobile. Theoretical frame work in the project are the concepts of usability, User Experience, design principles, theories of multi-channel publishing and norm critical design. A Design Thinking process has been applied during the project, where methods such as survey, interview, user test and personas were used to create an understanding of the users and the service to be developed. These methods have also been linked to a ”norm creative” practice. The purpose of this has been to understand the current users, but also understand the potential users that previously might have been excluded.

The aim of this thesis is the analysis of selected frameworks for the development of modern web applications on the Java platform focusing on the front-end. The work is complemented by well-chosen source code examples that help the reader to create one's own view of the frameworks and it can also server as a tutorial. Introductory section focuses on the trends of modern web applications, especially on the front-end. It affects themes such as support for mobile devices, AJAX or responsive design of user interface. There are also introduced the latest technology on the front-end including HTML5, CSS3, jQuery library and dynamic language LESS whose main objective is the simplification, shortening and making cascading style sheets more dynamic. The output of this section: General LESS template is freely available and it can be applied to emerging projects. For the analysis there has been created static registration form on which there are applied frameworks Apache Wicket and Spring MVC with template engine Freemarker. In terms of analysis were chosen following points: the basic structure of the project, the application of static templates, external JavaScript / jQuery library, internalization, application of the form, submitting the form and validation of the input fields. The points were discussed in detail, especially in terms of implementation of both analysed frameworks. The outputs of the analysis are freely available structures of the projects and both of the resulting applications.

Στόχος της παρούσης διπλωματικής είναι η δημιουργία μιας διαδικτυακής εφαρμογής όπου θα υποστηρίζει τη δημιουργία, τη διαχείριση και την εκτέλεση μιας μελέτης αξιολόγησης γραφικού σχεδιασμού διεπιφανειών χρήστη, με τη μέθοδο της χαρτογράφησης προτίμησης, καθώς επίσης και τη συλλογή και αποθήκευση των αποτελεσμάτων. Μετά από βιβλιογραφική έρευνα κρίθηκε σκόπιμο να υλοποιηθεί η μέθοδος της χαρτογράφησης προτίμησης για τη διεξαγωγή της μελέτης. Στη συνέχεια προσδιορίστηκαν οι αρχές πάνω στις οποίες βασίστηκε η σχεδίαση και η ανάπτυξη της εφαρμογής. Η παρούσα εφαρμογή είναι πλούσιας διαδραστικότητας, μπορεί να υλοποιήσει αξιολόγηση από απόσταση και να ικανοποιεί τις απαιτήσεις του ανταποκρινόμενου σχεδιασμού, ενώ ταυτόχρονα παρέχεται η δυνατότητα προσθήκης νέων μεθόδων. Για την υλοποίηση της εφαρμογής χρησιμοποιήθηκαν οι νέες τεχνολογίες διαδικτύου HTML5, CSS3, jQuery καθώς και οι PHP, MySQL, JavaScript, AJAX. Η τελική αξιολόγηση από ειδικούς ευχρηστίας του εργαστηρίου αλληλεπίδρασης ανθρώπου υπολογιστή, έκρινε την εφαρμογή ικανή να εκπληρώσει το στόχο της και έδωσε θετική ανάδραση για περεταίρω βελτίωση. / The aim of the present diploma thesis is the development of a web application which supports the creation, management and execution of a graphic design evaluation study by implementing the method of preference mapping, as well as the collection and storage of results. After extended literature research the method of preference mapping was found to be the most suitable for conducting the study. Subsequently, the main principles were identified upon which the design and development of the application was based on. This rich internet application is able to conduct remote evaluation, while achieving the purpose of responsive design which was a fundamental requirement. It also provides the ability for new evaluation methods to be added. For the implementation of the application new internet technologies as HTML5, CSS3, jQuery were used, as well as PHP, MySQL, JavaScript and AJAX. The usability evaluation of this application was conducted by usability experts of the human computer interaction laboratory. The conclusion of the experts was that the application is highly usable and their recommendations provided effective feedback.