Modern handheld devices such as smart phones and tablets have become popular for capturing and viewing panoramic images, but navigation in these devices is a challenging task due to small screen size. In this thesis work, investigation is done for similarities and differences between two user interaction techniques of one-dimensional cubical panorama images. This work is carried out on a fourth generation Apple iPod Touch. The first user interaction technique swipe (drag-based panning) is developed using touch-gestures, while the second technique look-around (device-orientation panning) is developed using motion-sensors such as gyroscope and accelerometer for device-orientation. Both these techniques were implemented for touch-screen devices for an angle of 360 degrees.     In the swipe technique, the navigation is done by using finger movements on the screen, while in the look-around based panning technique the navigation is done by moving the device direction physically in space through an angle of 360 degrees. The experiments were conducted on 20 participants for the two panning techniques. The results have shown that the look-around based panning technique offers a better user interaction compared to swipe based panning technique. Look-around based panning technique is natural and more free to move physically in space. Swipe based panning technique is easy to use in some situations and it does not require any physical space to move around the system.

This thesis contains present trends in frontend web development. On the basis of this, there is made web application which is responsive a it is usable on mobile devices. In the theoretical part, there are described news and present trends of frontend web development and in the practical part, there is described whole process, which contains design, development, testing and deployment. This thesis could be very useful for beginners in the subject.

Den här rapporten är ett resultat av ett examensarbete som är utfört på institutionen för teknik- och naturvetenskap vid Linköpings universitet inom civilingenjörsutbildningen medieteknik i Norrköping. Rapporten är på teknisk kandidatnivå. Examensarbetet utfördes på det uppmärksammade spelföretaget Proactive Gaming i Norrköping där uppdraget var att skapa ett webbaserat spel med modern teknik till papperstillverkaren Holmen. Holmen ville använda sig av spelet i marknadsföringssyfte för deras nya papper Holmen View. Rapporten tar upp hur det webbaserade spelet utformas rent tekniskt med HTML5, Canvas-element och KineticJS. Inspiration till spellogiken hämtades från X-COM: Enemy Unkown, Civilization-serien, Tiny Towers och Game Dev Story. Spelet är ett realtidsstrategispel inom spelifiering och handlar om att användaren är chef över ett tidningsförlag och ska försöka tjäna pengar genom att sälja sin tidning till så många läsare som möjligt genom en balans mellan att investera i journalister, forskning och de anställdas gladhet. Under utvecklingen av spelet så användes utvecklingsmetodiker som vattenfallsmetoden och agila metodiker. Ett mindre användbarhetstest gjordes för att försäkra sig om produktens kvalité. Slutprodukten blev ett roligt spel som Holmen kan visa upp på mässor för att skapa intresse för företaget och pappersindustrin.

Technologies for how a rich user interaction can be delivered have changed a lot during the last 10 years. From a world where these types of user interfaces predominately was built as desktop applications like Windows Applications over to web technologies using Java Applets, Flash, Silverlight, Android, iOS etc. The problem though has been the vast amount of different technologies with no or limited connections between them. This has so far been a problem for application developers since essentially no code can be reused between the different platforms but also that some of them are not native – some kind of runtime platform needs to be installed (Flash, Silverlight, Java…). With the introduction of the emerging standard of HTML5 it seems that there is finally a technology that is getting more widely used by most of the platform suppliers.  This Master Thesis aims to prove the HTML5 can be used to build clients for MediusFlow. The point is to investigate if it’s possible to implement all the pages of frontend on different platforms by using idea like Responsive Web Design with HTML5.The showcase will be to build a complete app for MediusFlow on the iPad platform based on HTML5. In addition the interface must be verified on at least one additional platform, most probably Internet Explorer 10.

This research aims to investigate different solutions when creating the mostsuitable tool-set for implementation of outdoor attractions Web GISapplication using Web 2.0 technologies. The project has been set incooperation with a local Nedre Dalälven region Leader development teamfor their purposes and needs. Theoretical study has been taken in order todefine a software tool-set which would fit implementation process the best.The research approach includes collection of information about Web 2.0technologies, using available sources (databases which access was providedby University of Gävle), as well as discussion of differences between them.Analysed technologies were compared against applications' requirements.As the results of mentioned research, during development process three-tierarchitecture is going to be considered. The data tier and logical tier are goingto be located on the same server. For the mapping service Google Mapsserver is going to be employed. As an exchange format JSON is going to beused because it is much lighter then XML. On the client side JavaScriptwould suit well for the implementation because of Google Maps JavaScriptAPI and JSON exchange format that are going to be used. The PHP scriptinglanguage is going to implement business logic.The conclusion have been made that three-tier architecture suits thisapplication the best. The information about paths, which should be presentedon the map, is going to be stored in .gpx files rather than database, while filepath on the server side is going to be stored together with other details aboutit.This paper recommends the implementation of such an application and studyof further changes with a purpose of improving performance characteristics.

This report describes a website that will be created for alsunnah. Alsunnah is a private non-profit organization that helps the Muslims living in Sweden especially the Muslims living in the Östergötland region with the help of knowledgeable young who have different knowledge to teach people their culture in the right way. The task of this report is to create a responsive website that presents their work in different ways. The working environment and tools that will be used are HTML5, CSS3, Javascript, Jquery, PHP with mysqli server as database which will build all types of tables that belong to the site and with the help of various literature books and lectures that were during the web development learning. / Den här rapporten beskriver en webbplats som kommer skapas åt alsunnah. Alsunnah är ett privat ideella organisation som hjälper de muslimerna som bor i Sverige framför allt de muslimerna som bor Östergötland region med hjälp av kunniga ungar som har olika kunskaper för att lära folk deras kultur på rätt sätt. Uppgiften i den här rapporten är att skapa ett responsiv webbplats som presenterar deras arbete på olika sätt. De arbetsmiljö och verktyg som kommer användas är HTML5, CSS3, Javascript, Jquery, PHP med mysqli server som databas som kommer byggas alla typer av tabeller som kommer tillhöra webbplatsen samt med hjälp av olika litteratur böcker och föreläsningar som var under utbildningen.

This thesis focuses on the issue of rendering web pages using vector graphics. The experimental CSSBox display engine and existing libraries for rendering vector graphics in PDF and SVG will be described here. The goal of the thesis is design a common structure for these two libraries and unify the process of rendering web pages in vector graphics as much as possible. Analysis of incorrectly implemented parts of existing solutions will be performed here and shortcomings, which will be necessary to implement to the resulting vector graphic meet the standard CSS3, will be describe. Furthermore, the implementation process, including the repair of all non-functioning original solutions, and the principle of unification of individual parts for the generation of both vector formats will be described. The conclusion is dedicated the results of self testing and outputs from generating real websites.

This diploma thesis deals with the topic of rendering HTML/CSS documents using the Scalable Vector Graphics (SVG) language. The goal of this thesis is to design and implement an extension for the CSSBox library, which will be able to generate a vector output. First, we provide a description of the SVG language and some Java libraries that can be used for creating SVG documents. After that, there is description of the CSSBox library. Then, we perform an analysys of selected CSS3 features. The main part of this thesis is the design of a solution for rendering various CSS3 attributes such as rounded corners, gradients or transformations using SVG. After the design, there is a description of the implementation and evaluation of the achieved results using various tests. The conclusion offers some possibilities of extending this thesis.

Examensarbetet har utförts på Lawson, som idag gör en satsning mot de mobila användarna. Då det idag finns många olika typer av enheter, webbläsare och operativsystem utvecklas det mobila applikationer till varje plattform vilket medför stora kostnader och längre utvecklingstider. Den här rapporten är skriven i syfte att se över vad det finns för möjligheter att använda ny teknik som HTML5 och CSS3 tillsammans med ramverket jQuery for mobile för att utveckla webbapplikationer. För att visa på funktionaliteten och vad man kan göra så har två exempelapplikationer tagits fram och testas på flera olika plattformar/enheter, bland annat en iPad och en Samsung Galaxy Tab 8.9. Koden för dessa applikationer finns som bilaga i rapporten. Målet var att se över vad det fanns för stöd för swipes, enhetlig native-design/känsla, kunna använda enhetens kamera och GPS. En hel del, bland annat swipes, GPS och lokal lagring, går att lösa med HTML5 och jQuery for mobile. Men vill man komma åt ännu mer hårdvarunära funktionalitet, så som kamera, så behöver man lägga på ett ramverk, i mitt fall valde jag att utöka arbetet och även se över ramverket Cordova. Det ramverket gjorde att man kunde komma åt kameran i mobilen. Slutsatsen av undersökningen är att det går att göra mycket med jQuery for mobile som bygger på webbtekniker som JavaScript, HTML5 och CSS3. Men för att få hårdvarunära funktionalitet behövs det användas en annan typ av ramverk, t.ex. Cordova, som erbjuder ett API mot själva hårdvarufunktionaliteten. För att den funktionaliteten sedan ska fungera måste applikationen kompileras, på samma sätt som en native-applikation. Dock så använder Cordova samma teknik som ramverket jQuery for mobile, så kostnader och utvecklingstid kan hållas nere. Vid små applikationer fungerar det utmärkt att använda denna teknik men vid större kan man behöva göra lite fler prestandatester innan man säkert kan avgöra om tekniken är lämplig.

Mobile e-commerce is an increasing trend. Still, many sales sites are not adapted to mobile interfaces. Important factors in the design of successful e-commerce applications are trust, high quality graphics, and easy navigation. However, a typical design approach is to strip down functionality and this can have a negative impact on the user experience. The goal of this thesis was to create a style guide that can be used to develop responsive e-commerce sites through a mobile first implementation strategy. A style guide was created by applying modern design theory and by investigating existing e-commerce solutions. Moreover, a prototype of an e- commerce solution was developed using the style guide. This prototype was evaluated by an expert group of usability professionals. The study indicates that the style guide is a useful and effective tool in the design and development of e-commerce systems. We conclude that a mobile first strategy needs to be combined with subsequent traditional desktop design.