This diploma thesis describes new HTML5 standard. The aim is to show the potential uses and benefits of HTML5 compared to HTML4. Another objective is to analyze the support of HTML5 in most advanced web browsers on desktops and mobile devices. The thesis is divided into theoretical and practical parts. The theoretical part is divided into 5 chapters. The first chapter describes the introduction to the main concepts and definitions. The second chapter describes the differences between HTML4 and HTML5 elements. The third chapter describes HTML5 API. The fourth chapter analyzes the support of HTML5 featu- res in web browsers. Last chapter of the theoretical part discusses tools based on best practices which are useful for developing HTML5 applications. In the practical part, there are implemented real examples of HTML5 features. Practical examples are described as a tutorial. The contribution of this work is a demonstration of the advantages of HTML5 over the old standard. Contribution is also analysis of support of HTML5 features in web browsers. The diploma thesis is intended primarily for web developers and can be used as a reference guide. HTML5 is the standard of the future, and web developers can contribute to the overall improvement of the web by using it.

The diploma thesis deals with a new approach to create a robotic arm trajectory. The first part descibes existing methods of trajectory planning. The second part shows virtual point method, implementation of the trajectory planning into the web environment and trajectory generation. Third part descibes the virtual robot model and designed comunnication protocols. The fourth part shows grafical user interface and his posibilities. The last part presents implemention of web aplication into industrial visualization.

This thesis introduces the reader in detail with the problem of audio / video streaming overtheInternet.IntroducestechnologiesMySQL,PHP,JavaScriptandffmpegfurthermore. There is little research which examines presented similar solutions. Creating video library program shows the complexity of the problem and its possible solution. The work also finding how is compression difficult for the server.

The purpose of the thesis is to design and implement on-line reservation system, which will graphically display an interactive map of the reservation place and will enable to create and redesign these places. The system is going to serve as reservation and sale tool for tickets on cultural, social and other events.

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.

Made available in DSpace on 2016-08-03T12:30:06Z (GMT). No. of bitstreams: 1 EduardoBarboza.pdf: 2617269 bytes, checksum: d3778c765053d1147bbf80e8ae7b4f10 (MD5) Previous issue date: 2015-04-15 / Coordenação de Aperfeiçoamento de Pessoal de Nível Superior / This paper aims a comparative study of the use of multimedia infographics by the sites Clarín.com, from Argentina and Folha.com, from Brazil. The research aims to determine and analyze how these two important online media in Latin America have used new technologies like HTML5 to modernize the information that they present. Therefore, the comparative analysis will stick to the multimedia infographics, which has undergone profound technological changes, changing the format and the content of the news. Besides the theoretical conceptualization and review of literature on infographics, newsgame, transmedia storytelling, online journalism, interactivity and programming languages used to produce multimedia infographics, the paper will bring foward a comparative analysis of the section Infografia, presented by Folha.com, and Especiales Multimedia, by Clarín.com. The analysis, quantitative and qualitative, will check the narrative and informational resources, tools and Internet programming language technologies that are used by the two media, based on the analysis model proposed by Alberto Cairo in the book Infografia 2.0 visualización interactiva de información en prensa. The research has shown that although the Clarín.com has used Flash technology in most multimedia infographics analyzed, the results of comparative analysis show that the Argentine online newspaper infographics allowed higher levels of interactivity than multimedia infographics in Folha.com, mostly developed in HTML5. / Este trabalho propõe o estudo comparativo do uso de infográficos multimídia pelos sites Clarín.com, da Argentina e Folha.com, do Brasil. A pesquisa tem como objetivo verificar e analisar como esses dois importantes veículos de comunicação online da América Latina têm utilizado a tecnologia HTML5 para avançar nas possibilidades interativas do gênero jornalístico. Para tanto, a análise comparada trata da infografia multimídia, que tem passado por profundas mudanças tecnológicas, alterando o formato e o conteúdo da notícia. Além da conceituação teórica e revisão de literatura sobre infografia, newsgame, narrativa transmídia, jornalismo online, interatividade e as linguagens de programação voltadas para a produção de infografia multimídia, o trabalho realizou análise comparativa das seções Infográficos, veiculada pela Folha.com, e Especiales Multimedia, do Clarín.com. O estudo, quantitativo e qualitativo, verificou os recursos narrativos e informativos, ferramentas e tecnologias de linguagem de programação para Internet que são empregadas pelos dois meios de comunicação, com base no modelo de análise proposto por Alberto Cairo em Infografia 2.0 visualización interactiva de información en prensa. A pesquisa demonstrou que ainda que o Clarín.com tenha utilizado a tecnologia Flash na maioria dos infográficos multimídia analisados, os resultados da análise comparada mostram que os infográficos do jornal online argentino possibilitaram níveis mais elevados de interatividade do que os infográficos multimídia da Folha.com, desenvolvidos majoritariamente em HTML5.

Denna rapport vänder sig till de som har ett affärs- eller/och teknikintresse i utvecklingen av gränssnitt till affärssystem från SAP. Det har skett en omfattande förändring de senaste åren med hur vi alla dagligen använder oss av internet och mobila enheter. Vi har alla vant oss vid snygga, användarvänliga och flexibla gränssnitt. Vi gör våra bankärenden och använder sociala medier från vår smartmobil. Vi tar sedan för givet att vi också lika lätt ska kunna använda dessa gränssnitt på vår läsplatta. Denna beteendeförändring har även hänt hos användarna av gränssnitt till SAP:s affärssystem. De tar därför för givet att gränssnitten ska vara lika intuitiva, användarvänliga och visas lika lätt på sina smartmobiler och läsplattor som på deras bärbara datorer. Dock så har gränssnitt till SAP:s affärssystem begränsade möjligheter att användas på mobila enheter. Även gränssnittens utseende och användarvänlighet har haft begränsningar. SAP har insett att användarna inte kommer att acceptera gränssnittens begränsningar länge till och har därför utvecklat en ny teknologi som de kallar SAPUI5. SAP påstår att denna teknologi löser användarnas nya behov. På uppdrag av Claremont AB har jag fått i uppgift att undersöka om SAPUI5 verkligen löser användarnas nya behov och att ställa den nya teknologin mot väggen. Jag har i undersökningen byggt tre olika gränssnitt som motsvarar de viktigaste nya behoven som användarna har. Med de gränssnitt jag utvecklat har jag visat att SAPUI5 är en mycket kompetent teknologi. Den kan mycket väl användas för att utveckla framtidssäkra användarvänliga gränssnitt som både kan användas på stationära samt mobila enheter. För att kunna sätta mig in i hur SAPUI5 skiljer sig från de befintliga teknologierna så gjorde jag en kvalitativ intervju med två seniora SAP-utvecklare som använder de äldre teknologierna. Resultatet av intervjun använde jag sedan till att jämföra de äldre teknologierna med den nya. Jämförelsen bekräftade att SAPUI5 är en teknologi som löser många av de behov som de äldre teknologierna har begränsningar med. Dessutom kom jag fram till att om du står i valet och kvalet att välja en av dessa teknologier gör du rätt i att grundligt undersöka vilka behov som ställs på det nya gränssnittet. De olika teknologierna löser olika typer av användares behov och det är därför väsentligt att sätta sig in i vad användarna behöver kunna utföra med hjälp av det nya gränssnittet. / This report is aimed at those who have a business or/and technical interest in the development of interfaces to Enterprise Resource Planning (ERP) systems from SAP. There has been a substantial change in recent years with how we daily make use of the internet and mobile devices. We have all become accustomed to sleek, user-friendly and flexible interface. We make our banking and use social media on our smartphone. We then take for granted that we just as easily can use these interfaces in our tablet. This behavioral change has also happened among the users of interfaces to SAP ERP systems. The users take for granted that the interfaces should be as intuitive, user-friendly and can be used as easily on their smartphones and tablets as their laptops. However, the current interfaces to SAP ERP systems have limited possibilities to be used on mobile devices. Even the interfaces look and ease of use have had its limitations. SAP has recognized that users will not accept the limitations of the interfaces any longer and have therefore developed a new technology that they call SAPUI5. SAP claims that this technology solves the user’s new needs. On behalf Claremont AB, I have been asked to investigate whether SAPUI5 really solve the user’s emerging needs and to nail down the new technology. I have in the study built three different interfaces that correspond to the new key requirements of the users. With the interface I developed, I have shown that SAPUI5 is a highly competent technology. It can very well be used to develop future-proof user-friendly interfaces that can be used both on desktop and mobile devices. To research how SAPUI5 differs from the existing technologies I made a qualitative interview with two senior SAP developers using the older technologies. I used the result of the interview to compare the old with the new technologies. The comparison confirmed that SAPUI5 is a technology that solves many of the needs the older technologies have limitations with. Moreover, I came to the conclusion that if you are going to choose one of these technologies you do well to thoroughly research the needs imposed on the new interface. The different technologies solve different types of user needs and it is therefore essential to gain an understanding of what the users need to be able to perform using the new interface.

Målet med det här arbetet har varit att utveckla en ljudmotor skriven i JavaScript som underlättar ljuddesign för webbsidor. Ett sekundärt mål har varit att diskutera hur relevant Flash är för ljuddesign på webben och huruvida HTML5 har möjligheten att ersätta Flash i framtiden. En ljudmotor som har fått namnet Klang har utvecklats som ett JavaScriptbibliotek för integration med interaktiva webbsidor. Ljudmotorn använder Web Audio API, den nyligen föreslådda ljudstandarden för HTML5, som bas för uppspelning och processering av ljud. För att anpassa ljuddesignen för olika typer av webbsidor har Klang möjligheten att dynamiskt styra hur musik och ljud spelas upp beroende på vilken typ av webbsida den används för och hur en besökare använder denna webbsida. Klang kommer att behöva fortsatt underhåll i framtiden när Web Audio API växer men ger en god överblick av vad som är ljudmässigt möjligt med HTML5 utan externa plugin. Rapportens slutsats förespråkar utvecklingen av HTML5 och möjligheterna det har infört ur ett ljudperspektiv men medger att Flash än så länge behåller sin plats i webbutvecklarens repertoar. / The primary objective of this work has been developing a JavaScript audio engine to aid in designing audio for the web. This project also covers discussion of whether or not HTML5 may replace Flash for the purpose of sound design for the web in the future. Klang, an audio engine available as a JavaScript plugin has been developed to be integrated with interactive websites. The audio engine uses Web Audio API, the newly proposed audio standard for HTML5, for audio playback and processing. To be able to adapt the audio engine for the web site it is used for, Klang offers a way to dynamically control the behaviour of music and sounds according to the type of web site it is used for and how users interact with the web site. Klang will be in need of updates as the Web Audio API continues to develop but demonstrates the potential of the audio features of HTML5. The conclusion of the report advocates the use of pure HTML5 and the improvements it brings to the web's audio department but recognizes that Flash still has a place in the repertoire of the web developer.

Este trabalho faz parte de um projeto maior, o electronic Physician Annotation Device (ePAD). O ePAD permite a criação de uma base de conhecimento médico usando anotações semânticas sobre lesões em imagens radiológicas, usando uma plataforma Web. Essas anotações servirão para identificar, acompanhar e reason sobre lesões tumorais em pesquisas médicas (especialmente sobre câncer). A informação adquirida e persistida pelo sistema permite avaliação automática por computadores; recuperação de imagens hospitalares e outros serviços relacionados a exames médicos. O ePAD é um desenvolvimento conjunto de grupos de pesquisas do ICMC-USP e do Department of Radiology da Stanford University. O principal trabalho, apresentado neste texto, é um novo conjunto de funcionalidades na Web para adicionar a marcação de lesões em imagens radiológicas em três dimensões ao ePAD. Elas permitirão a obtenção de dados mais precisos acerca de medidas tridimensionais de lesões como volume, posição e cálculo de maior diâmetro. O objetivo é facilitar o trabalho dos profissionais de radiologia na análise de diagnósticos e acompanhamento de lesões produzindo um acompanhamento mais acurado da evolução de doenças como o câncer. Anotações podem ser conectadas a lesões e conter informações semânticas, usando termos biomédicos da ontologia RadLex. Essas novas funcionalidades são baseadas em HTML5, com o auxílio de WebGL para visualização e manipulação de objetos 3D. As maiores contribuições deste trabalho são o software para visualização de séries de imagens radiológicas em 3D usando planos ortogonais, os protótipos de vídeo mostrando as três possíveis interfaces para marcação de lesões em 3D, a pesquisa com radiologistas (usando os protótipos de vídeo) para determinar que o cursor esférico era a melhor interface para marcar lesões em 3D e o protótipo dessa interface no ePAD. Este trabalho contou com a ajuda de usuários do Department. of Radiology da Stanford University e do Hospital das Clínicas da Universidade de São Paulo em Ribeirão Preto. / This work is part of a larger project, the electronic Physician Annotation Device (ePAD) project. The ePAD allows the creation of a medical knowledge base using semantic annotation on lesions found on radiological images using the Web platform. The annotation will serve to identify, follow-up and reason about tumor lesions in medical research projects (specially about cancer). The information acquired and persisted by the system allows automatic evaluation by computers; retrieval of hospital images and other services related to medical exams. ePAD is a joint development of the ICMC-USP and the Department of Radiology of the Stanford University research groups. The main work, presented here, is a new set of functionalities on the Web to add recording of lesions on radiological images in three dimensions to ePAD. They will lead to more accurate data about three dimensional lesion measurements, such as volume, position and longest diameter calculations. The objective is to ease the work of radiology professionals doing diagnostic analysis and lesion tracking producing more accurate follow-ups of disease evolution, such as of cancer. Annotation can be attached to lesions and hold semantic information, using biomedical ontology terms from RadLex. These new functionalities are based on HTML5 with the help of WebGL for visualization and manipulation of 3D objects. The main contributions of this work are the software for visualization of radiological image series in 3D using orthogonal planes, the video prototypes showing the three possible interfaces to mark lesions in 3D, the survey with radiologists (using the video prototypes) to determine that the spherical cursor was the best interface to mark lesions in 3D and the prototype of this interface in ePAD. This work received help from users of the Department of Radiology of the Stanford University and the Clinics Hospital of Ribeirão Preto of the University of São Paulo.

Este trabalho faz parte de um projeto maior, o electronic Physician Annotation Device (ePAD). O ePAD permite a criação de uma base de conhecimento médico usando anotações semânticas sobre lesões em imagens radiológicas, usando uma plataforma Web. Essas anotações servirão para identificar, acompanhar e reason sobre lesões tumorais em pesquisas médicas (especialmente sobre câncer). A informação adquirida e persistida pelo sistema permite avaliação automática por computadores; recuperação de imagens hospitalares e outros serviços relacionados a exames médicos. O ePAD é um desenvolvimento conjunto de grupos de pesquisas do ICMC-USP e do Department of Radiology da Stanford University. O principal trabalho, apresentado neste texto, é um novo conjunto de funcionalidades na Web para adicionar a marcação de lesões em imagens radiológicas em três dimensões ao ePAD. Elas permitirão a obtenção de dados mais precisos acerca de medidas tridimensionais de lesões como volume, posição e cálculo de maior diâmetro. O objetivo é facilitar o trabalho dos profissionais de radiologia na análise de diagnósticos e acompanhamento de lesões produzindo um acompanhamento mais acurado da evolução de doenças como o câncer. Anotações podem ser conectadas a lesões e conter informações semânticas, usando termos biomédicos da ontologia RadLex. Essas novas funcionalidades são baseadas em HTML5, com o auxílio de WebGL para visualização e manipulação de objetos 3D. As maiores contribuições deste trabalho são o software para visualização de séries de imagens radiológicas em 3D usando planos ortogonais, os protótipos de vídeo mostrando as três possíveis interfaces para marcação de lesões em 3D, a pesquisa com radiologistas (usando os protótipos de vídeo) para determinar que o cursor esférico era a melhor interface para marcar lesões em 3D e o protótipo dessa interface no ePAD. Este trabalho contou com a ajuda de usuários do Department. of Radiology da Stanford University e do Hospital das Clínicas da Universidade de São Paulo em Ribeirão Preto. / This work is part of a larger project, the electronic Physician Annotation Device (ePAD) project. The ePAD allows the creation of a medical knowledge base using semantic annotation on lesions found on radiological images using the Web platform. The annotation will serve to identify, follow-up and reason about tumor lesions in medical research projects (specially about cancer). The information acquired and persisted by the system allows automatic evaluation by computers; retrieval of hospital images and other services related to medical exams. ePAD is a joint development of the ICMC-USP and the Department of Radiology of the Stanford University research groups. The main work, presented here, is a new set of functionalities on the Web to add recording of lesions on radiological images in three dimensions to ePAD. They will lead to more accurate data about three dimensional lesion measurements, such as volume, position and longest diameter calculations. The objective is to ease the work of radiology professionals doing diagnostic analysis and lesion tracking producing more accurate follow-ups of disease evolution, such as of cancer. Annotation can be attached to lesions and hold semantic information, using biomedical ontology terms from RadLex. These new functionalities are based on HTML5 with the help of WebGL for visualization and manipulation of 3D objects. The main contributions of this work are the software for visualization of radiological image series in 3D using orthogonal planes, the video prototypes showing the three possible interfaces to mark lesions in 3D, the survey with radiologists (using the video prototypes) to determine that the spherical cursor was the best interface to mark lesions in 3D and the prototype of this interface in ePAD. This work received help from users of the Department of Radiology of the Stanford University and the Clinics Hospital of Ribeirão Preto of the University of São Paulo.