På senare tid har det blivit allt mer populärt med interaktiva webbapplikationer. Ett sådant exempel är interaktiva linjediagram där användaren kan manipulera den information som visas i ett diagram. Information som visas i ett sådant diagram kan till exempel vara aktiekursdata. För att rita ut diagrammen i webbläsaren kan till exempel HTML5 Canvas eller SVG användas. Eftersom renderingstider är viktigt för att få en tillfredställande produkt är det intressant att ta reda på vilken av dessa tekniker som är snabbast och därför har ett experiment med flera testfall skapats där det interaktiva momentet undersökts. Resultatet av mätningar från dessa testfall visade på att SVG är snabbare än HTML5 Canvas. Mätningar utfördes dock endast i Google Chrome och därför skulle det vara intressant att i framtida arbeten även se mätningar i andra webbläsare och med annan hårdvara samt fler optimeringar av koden eller ytterligare parametrar.

This thesis deals with the design and implementation of multi-platform web application based on HTML5, HTML5 Audio and Web Audio API, designed for elementary school students to develop their musical skills, especially musical hearing. The first part compares current educational programs designed to practise musical hearing and to educate musical notation. The following section develops design of music games and application interface, which is based on requirements, followed by analysis of web technologies for sound playback. Last part describes implementation of application in PHP (Nette Framework) with MySQL database and user testing.

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.

Submitted by Divisão de Documentação/BC Biblioteca Central (ddbc@ufam.edu.br) on 2018-05-11T15:41:27Z No. of bitstreams: 2 license_rdf: 0 bytes, checksum: d41d8cd98f00b204e9800998ecf8427e (MD5) Um Método de Web Fingerprinting baseado em Atributos relaci.pdf: 5647311 bytes, checksum: 2fa1d2fa1e9866efc5d985ca75224f14 (MD5) / Approved for entry into archive by Divisão de Documentação/BC Biblioteca Central (ddbc@ufam.edu.br) on 2018-05-11T15:41:40Z (GMT) No. of bitstreams: 2 license_rdf: 0 bytes, checksum: d41d8cd98f00b204e9800998ecf8427e (MD5) Um Método de Web Fingerprinting baseado em Atributos relaci.pdf: 5647311 bytes, checksum: 2fa1d2fa1e9866efc5d985ca75224f14 (MD5) / Made available in DSpace on 2018-05-11T15:41:40Z (GMT). No. of bitstreams: 2 license_rdf: 0 bytes, checksum: d41d8cd98f00b204e9800998ecf8427e (MD5) Um Método de Web Fingerprinting baseado em Atributos relaci.pdf: 5647311 bytes, checksum: 2fa1d2fa1e9866efc5d985ca75224f14 (MD5) Previous issue date: 2018-04-02 / CAPES - Coordenação de Aperfeiçoamento de Pessoal de Nível Superior / Web fingerprinting is the process in which a user is, with high likelihood, uniquely identified by the extracted features from his/her device, generating a fingerprint. In order to be effective, the method must generate a stable fingerprint, and therefore it is necessary to employ discriminatory attributes with low volatility, capable of providing the same characteristics over the time. There are a variety of proposed techniques, but not all of them are capable of generating a stable fingerprint. In this work it is proposed, designed and evaluated a Web Fingerprinting method that aims to employ features that provide characteristics related to the devices’ hardware. One of the ways to achieve this objective is through the use of technologies such as HTML5 and the Web Audio API. Theses are promising technologies for Web Fingerprinting methods because they provide features related to the devices’ hardware, which reduces the extracted fingerprint’s mutability and increases the number of target devices in which the method can be executed, since HTML5 is adopted by default in the most popular web browsers. As results, it was found that the HTML5 Canvas and the Web Audio API, when employed with other attributes related to the hardware characteristics of the device, converges to a web Fingerprinting method capable of uniquely identify several users (with 90,34% of accuracy). In addition, it was found that grouping weaker attributes with more relevant ones allows the Web Fingerprinting method to extract more characteristics than to use just relevant attributes. / Web Fingerprinting é o processo no qual um usuário é, com alta probabilidade, identificado de forma única a partir das características extraídas de seu dispositivo, gerando uma chave identificadora (fingerprint). Para um método que gere um fingerprint ser eficaz é necessário obter respostas estáveis, o que implica em empregar atributos discriminatórios com baixa volatilidade. Em outras palavras, atributos capazes de fornecer as mesmas características sobre os dispositivos ao longo do tempo. Há uma diversidade de técnicas propostas na literatura, mas nem todas são capazes de gerar um fingerprint estável. Nesta dissertação é proposto, projetado e avaliado um método de Web Fingerprinting que busca utilizar características relacionadas ao hardware dos dispositivos. Uma das formas de alcançar esse objetivo é empregar HTML5 Canvas e Web Audio API, tecnologias promissoras por serem capaz de fornecer características relacionadas ao hardware do dispositivo, o que reduz a mutabilidade do fingerprint extraído e aumenta o número de dispositivos-alvo em que o método pode ser aplicado. Como resultado, constatou-se que o emprego do HTML5 Canvas e da Web Audio API, em conjunto como outros atributos cujas características são relativas ao hardware do dispositivo, permite identificar, de forma única, com 90,34% de precisão, diversos usuários. Além disso, percebeu-se que agrupamento de atributos mais fracos com os mais discriminatórios permite extrair mais características do que utilizar atributos discriminatórios de forma isolada.

Det här examensarbetet utvärderar spelutveckling i HTML5. Detta innebär utveckling i JavaScript, CSS samt HTML med utnyttjande av den nya teknologin som medföljer HTML5 märkeringen. I detta fall är teknologin canvas-element som ritar ut 2-D grafik. Två implementationer av ett motorcykelspel har utvecklats med fysikmotorerna Box2D respektive Chipmunk. Målet med arbetet var att utvärdera bästa val av fysikmotor vid utveckling av ett spel i 2-D med krävande fysik i HTML5 till mobil.

HTML5 has gained a lot of interest the last couple of years from web developers. HTML5 is the new upcoming standard for HTML set to be released in the end of 2014 (W3C). In this report HTML5 is reviewed in order to determine if it has made web applications more secure. This is done with information study and the use of experimental test cases. We use the latest OWASP top ten list of security risks in web applications as a benchmark. As a result we found ve correlations between OWASP top ten list and HTML5 functionality. The results clearly indicates that HTML5 is a ecting web application security. The security risks that was successfully exploited is Cross-site scripting, Security Miscon guration, Sensitive Data Exposure, Cross-site request forgery and Unvalidated redirects and forwards. We suggest countermeasures for the tests performed and discuss how developers should have security in mind when it comes to developing with HTML5.

Vi ser en förändring i hur vi använder applikationer. Från att tidigare varit associerat till en dator och begränsat till ett par operativsystem finns de numera överallt. Fler plattformar innebär att man måste utveckla en applikation till var och en av dessa. Detta gör att utvecklingstiden och kostnaderna ökar och efterfrågan av crossplattformlösningar i form av webbapplikationer har därför ökat. Vi tittar närmare på hur det går att använda sig av HTML5, och övriga tekniker som en modern webbläsare har integrerat stöd för, för att utveckla webbaserade applikationer. Vi tar reda på om det finns några hinder eller begränsningar i detta och om det finns några fördelar i att använda webben som plattform. Resultatet indikerar att med de nya tekniker som är på ingång kan man utveckla webbbaserade applikationer med prestanda motsvarande Java eller C#. Nya tekniker är ständigt på ingång. Genom att uppdatera kunskapen om dessa, tillför vi ny kunskap om hurvida HTML5, tillsammans med dessa nya tekniker kan utveckla webbaserade applikationer som är kraftfulla nog att börja ersätta plattformsspecifik programvara.

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.

Vi lever idag i en värld där sprickan mellan vad som går att skapa med en desktopapplikation och vad som är möjligt att implementera på en webbsida har blivit mindre än någonsin. För tio år sedan var det inte möjligt att skapa avancerade affärssystem på en webbklient, men i och med att tekniker har utvecklats och nya språk har skapats har även nya möjligheter öppnats framför våra ögon. Frågan är var gränsen går? Vad kan vi egentligen skapa med de webbramverk som finns tillgängliga idag. Det är en av frågorna denna rapport ska svara på. Idag finns det en stor mängd ramverk för att utveckla så kallade Rich Internet Applications, komplexa och dynamiska program som körs direkt från webbläsaren. Dessa har alla olika styrkor och svagheter som är mycket svåra att känna till om man inte studerar ramverken noggrant. I denna rapport beskrivs ramverken Adobe Flex, JavaFX och HTML5. Läsaren kommer få en tydlig bild av hur ramverken kom till, vad de bygger på för tekniker, hur koden ser ut för dem olika samt vad de använder för tekniker för att kommunicera med applikationer skrivna i andra språk. Rapporten kommer även klargöra vilka tekniker de stödjer för att skapa ett snyggt och anpassningsbart grafiskt gränssnitt, hur komponentstödet är utformat och huruvida man kan skapa modulära program med ramverken. Detta kommer utmynna i en analys där ramverkens för- och nackdelar sammanställs vilket slutligen ligger till grund för att jämföra dem med varandra och avgöra vilket ramverk som är bäst anpassat för att skapa omfattande desktopliknande applikationer på webben.

Marknaden av smarta mobila enheter blir större och större och det kan vara ett bra sätt att nå ut med sin tjänst eller produkt till den breda massan genom att driftsätta en mobilapplikation. De applikationer som kan installeras på de mobila enheterna och som använder sig av enhetsspecifika funktioner kallas native-applikationer och är bundna till en plattform. De kan därför bara användas av de enheter som använder sig av den plattformen. De två största plattformanar är iOS(används av mobila enheter från Apple) och Android(används av en mängd olika enheter varav Samsung, LG och HTC är några av dem). Detta betyder att om målet är att nå ut till flera plattformar måste en separat applikation för varje plattform utvecklas. Det krävs också att utvecklaren/utvecklarna har en viss kunskap om de programmeringsspråk som används för varje plattform. Detta kan bli både tidskrävande och dyrt, speciellt om ett företsg ska anställa utvecklare att utveckla sin app. Syftet med denna undersökning är att ta reda på om det med hjälp utav Phongap går att utveckla en mobilapplikation som kan distribureras och installeras på flera mobila plattformar genom att använda webbtekniker som CSS, HTML och JavaScript. I denna undersökning ska en mobilapplikation skapas och utvärderas. Det kommer att undersökas om någon speciell hänsyn behöver tas till de olika enheterna med olika egenskaper och funktioner. Användartester kommer dessutom genomföras för att bestämma hur nära en native-känsla denna teknik kan ge. Resultatet visar att Phonegap är ett utmärkt verktyg för åtkomst av enhetsspecifika funktioner och tillsammans med gränsnittsbibliotek som jQuery Mobile kan större delen av de nyare mobila enheterna som finns i dag nås. Analyser om applikationens omfattning kräver ett gränssnittsbibliotek kan dock vara nödvändig att utföra då tillgängliga sådana kan prestera sämre på vissa mobila operativsystem. / The market of smart mobile devices is getting bigger and bigger and it can be a great way to reach out with your service or product to the crowed by deploying a mobile application. The installable applications on the mobile devices that uses device-specific functions is called native applications, and are tied to one platform. They can therefore only be used by those devices that make use of that platform. The two largest platforms is iOS (used by mobile devices from Apple) and Android (used by a variety of devices including Samsung, LG and HTC). This means that if you want to reach out to multiple platforms you will have to create a separate application for each platform. It also requires the developer/developers to have the proper knowledge of the programming languages in which the platform is compatible to. This can be both time consuming and expensive, especially if you as a company is hiring developers to develop your app. The purpose of this study is to determine whether the open source library known as Phonegap can be used to develop a mobile application that ultimately can be distributed and installed on multiple mobile platforms, this by using Web technologies such as CSS, HTML and JavaScript. During this study a mobile application will be created and evaluated. Studies will be done on how to go about and if there is anything one might need to take in consideration when it comes to the variety of units with different properties and functions. Usability testing will also be performed to determine whether a near native performance can achieved with this technique. The results show that Phonegap is an excellent tool for access of device-specific functions and that you together with interface frameworks such as jQuery Mobile can reach out to most of the newer mobile devices available today. However, one would do well to analyze if the scope of the application requires an interface library, as those who are available may perform poorly on certain mobile operating system.