Learn HTML5 by Creating Fun Games

Total Page:16

File Type:pdf, Size:1020Kb

Learn HTML5 by Creating Fun Games Learn HTML5 by Creating Fun Games Learn one of the most popular markup languages by creating simple yet fun games Rodrigo Silveira BIRMINGHAM - MUMBAI Learn HTML5 by Creating Fun Games Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: June 2013 Production Reference: 1190613 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-602-9 www.packtpub.com Cover Image by Duraid Fatouhi ([email protected]) Credits Author Project Coordinator Rodrigo Silveira Apeksha Chitnis Reviewer Proofreaders Thomas Mak Aaron Nash Bernadette Watkins Acquisition Editor Andrew Duckworth Indexer Hemangini Bari Commissioning Editor Shreerang Deshpande Graphics Ronak Dhruv Lead Technical Editor Valentina Dsilva Madhuja Chaudhari Production Coordinator Technical Editors Nilesh R. Mohite Veena Pagare Priya Singh Cover Work Sampreshita Maheshwari Nilesh R. Mohite About the Author Rodrigo Silveira is a web engineer at Deseret Digital Media. His responsibilities include back-end system development, tools, and maintenance, front-end application development and design, and more recently, he's been involved in mobile development of various products on the Android platform. He received his Bachelor's of Science in Computer Science from Brigham Young University, Idaho, as well as an Associate's Degree in Business Management from LDS Business College in Salt Lake City, Utah. His fascination for web development began in his early teenage years, and his skills grew as he discovered the power of a library subscription, a curious and willing mind, and supportive parents and friends. Today Rodrigo balances his time between the three great passions of his life—his family, software development, and video games (with the last two usually being mingled together). About the Reviewer Thomas Mak, also known as Makzan, is a developer with a specialty in web development and game design. He has over ten years of experience building digital products, including real-time multiplayer interaction games and iOS applications. He is currently a founder of game development learning company, 42games (http://42games.net), where he makes game development tutorials and online learning resources. He has written two books with Packt publishing and one screencast series for building Flash Virtual World and making games with HTML5 and related web standards. I would like to thank my family and my wife, Candy Wong, for supporting all my writings. www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: An Overview of HTML5 7 What is HTML? 7 A brief history of HTML 8 The evolution of the World Wide Web 8 What is HTML5? 9 HTML5 – the next step in the evolution 9 HTML5 is not a single feature 10 More semantic document structure 10 A warning about performance 15 Native features of the browser 16 Automatic form validation 18 New input types 19 Telephone-friendly hyperlinks 19 CSS-based DOM selectors 19 Text-to-speech 20 CSS3 20 Separation of concerns 20 Reusability of visual design 21 Ease of maintenance 22 Scalability 22 The evolution of CSS 22 Experimental features and vendor prefixes 23 CSS preprocessors 24 CSS3 modules 25 Style attributes 26 Selectors 26 Colors 27 Media queries 28 Table of Contents JavaScript APIs 31 New JavaScript APIs 31 The Web as a platform 32 The Open Web 33 HTML5 – a game changer 34 Learning HTML5 through game development 35 Summary 36 Chapter 2: HTML5 Typography 39 The game 39 Game elements 42 The options widget 43 The game title 43 Boat 44 Sky 44 Waves 44 Tracks 44 Players 44 The main container 45 Words to write 45 Words written 45 The message container 45 The message title 45 The new champion form 46 Leaderboard 46 Game controls 47 HTML 48 The web form 48 Data attributes 51 CSS 51 Web fonts 51 Transitions 52 Animations 53 The text shadows 56 The box shadows 57 The border radius 58 JavaScript 59 Query selectors 60 API usage 60 Web forms 60 New input types 60 Form validation 75 Used in the game 77 Data attributes 78 [ ii ] Table of Contents Used in the game 80 Query selectors 82 Used in the game 85 Web fonts 85 Transitions 86 Animations 89 The text shadow 91 The box shadow 92 The border radius 93 The code 94 The HTML structure 94 JavaScript and logic 95 Summary 100 Chapter 3: Understanding the Gravity of HTML5 101 Browser compatibility 101 Supporting different browsers 102 HTML5 libraries and frameworks 103 jQuery 103 Google Web Toolkit 105 Supporting browsers with limited HTML5 features 106 Gracefully degrade 106 Polyfills 109 Modernizr 109 The game 110 Code structure 111 API usage 113 Web audio 113 Scalable Vector Graphics (SVG) 115 Drag-and-drop 117 Web audio 119 How to use it 120 SVG 122 How to use it 126 Drag-and-drop 136 How to use it 137 Summary 139 Chapter 4: Using HTML5 to Catch a Snake 141 The game 142 API usage 143 How to use it 143 Typed arrays 147 How to use it 149 [ iii ] Table of Contents ArrayBuffer and ArrayBufferView 150 Typed array view types 153 Canvas 154 How to use it 155 clearRect 157 Fill and stroke 158 Lines 159 Shapes 161 Text 162 Transformations 162 Drawing images 163 Manipulating pixels 166 Web workers 169 How to use it 169 Offline application cache 173 How to use it 173 The code 176 Summary 182 Chapter 5: Improving the Snake Game 183 The game 184 API usage 185 Web messaging 185 How to use it 185 Web storage 192 Local storage 194 Session storage 196 IndexedDB 197 IDBFactory 199 IDBOpenDBRequest 200 IDBTransaction 202 readwrite 203 readonly 203 versionchange 203 Getting elements 204 Deleting elements 209 The code 211 Saving the high score 212 Taking screenshots of the game 213 Summary 216 Chapter 6: Adding Features to Your Game 219 Advanced HTML5 APIs 220 WebGL 221 Hello, World! 221 [ iv ] Table of Contents Web sockets 231 The connection 233 The server-side code 234 The client-side code 234 Video 235 Attributes 238 Events 238 Geolocation 243 A Google Maps example 247 Upcoming CSS features 249 Programming in the bleeding edge 249 CSS shaders 251 Using custom filters 253 CSS columns 259 The column rule 261 Column breaks 262 CSS regions and exclusions 264 Exclusions 268 Defining shapes 274 Summary 274 Chapter 7: HTML5 and Mobile Game Development 275 Desktop versus mobile 276 Major implementation considerations 277 Screen size and orientation 277 Computing power 278 Battery life 279 Browser differences 279 Best practices 280 Degrade gracefully and enhance progressively 280 Finger-friendly design 283 Save battery life 284 Plan for offline 285 Offering a desktop version 285 Understanding media queries 285 width 288 height 290 device-width 291 device-height 292 orientation 292 aspect-ratio 293 device-aspect-ratio 295 color 298 color-index 299 monochrome 299 [ v ] Table of Contents resolution 300 scan 301 grid 301 Understanding touch events 302 touchstart 303 touches 303 changedTouches 303 targetTouches 303 touchend 304 touchmove 304 The touch object 305 identifier 305 screenX 307 screenY 307 clientX 307 clientY 308 pageX 308 pageY 308 radiusX 309 radiusY 310 rotationAngle 313 force 313 target 314 The game 314 Code structure 316 /css 316 /img 318 /js 319 /components 319 /entities 328 /widgets 331 Canvas.js 332 EnemyManager.js 335 GameLoop.js 338 PhysicsManager.js 339 Vec2.js 340 main.js 340 index.html 343 Mobile optimizations 343 Combine resources 344 Track touches by IDs 344 Use CSS animations with caution 345 Use separate canvases for each game layer 346 Use image atlases 347 Summary 348 Index 349 [ vi ] Preface If you would like to write a software that can reach billions of people world- wide, then this book will help you get started on that journey.
Recommended publications
  • 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]
  • Lucas Edi Cordeiro De Brito
    UNIVERSIDADE FEDERAL DE CAMPINA GRANDE CENTRO DE ENGENHARIA ELÉTRICA E INFORMÁTICA UNIDADE ACADÊMICA DE SISTEMAS E COMPUTAÇÃO CURSO DE BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO LUCAS EDI CORDEIRO DE BRITO ANÁLISE COMPARATIVA ENTRE WEBASSEMBLY E JAVASCRIPT COMO ALVOS DE COMPILAÇÃO CAMPINA GRANDE ­ PB 2019 LUCAS EDI CORDEIRO DE BRITO ANÁLISE COMPARATIVA ENTRE WEBASSEMBLY E JAVASCRIPT COMO ALVOS DE COMPILAÇÃO Trabalho de Conclusão Curso apresentado ao Curso Bacharelado em Ciência da Computação do Centro de Engenharia Elétrica e Informática da Universidade Federal de Campina Grande, como requisito parcial para obtenção do título de Bacharel em Ciência da Computação. Orientador: Professor Dr. Matheus Gaudencio do Rêgo. CAMPINA GRANDE ­ PB 2019 B862a Brito, Lucas Edi Cordeiro de. Análise comparativa entre WebAssembly e JavaScript como alvos de compilação. / Lucas Edi Cordeiro de Brito. – 2019. 11 f. Orientador: Prof. Dr. Matheus Gaudencio do Rêgo Trabalho de Conclusão de Curso - Artigo (Curso de Bacharelado em Ciência da Computação) - Universidade Federal de Campina Grande; Centro de Engenharia Elétrica e Informática. 1. WebAssembly. 2. JavaScript. 3. Emscripten. 4. Asm.js - Mozila. 5. Navegadores web. 6. Linguagem de programação - web. 7. Aplicativos web – linguagem de programação. I. Rêgo, Matheus Gaudencio do. II. Título. CDU:004(045) Elaboração da Ficha Catalográfica: Johnny Rodrigues Barbosa Bibliotecário-Documentalista CRB-15/626 LUCAS EDI CORDEIRO DE BRITO ANÁLISE COMPARATIVA ENTRE WEBASSEMBLY E JAVASCRIPT COMO ALVOS DE COMPILAÇÃO Trabalho de Conclusão Curso apresentado ao Curso Bacharelado em Ciência da Computação do Centro de Engenharia Elétrica e Informática da Universidade Federal de Campina Grande, como requisito parcial para obtenção do título de Bacharel em Ciência da Computação.
    [Show full text]
  • Security Considerations Around the Usage of Client-Side Storage Apis
    Security considerations around the usage of client-side storage APIs Stefano Belloro (BBC) Alexios Mylonas (Bournemouth University) Technical Report No. BUCSR-2018-01 January 12 2018 ABSTRACT Web Storage, Indexed Database API and Web SQL Database are primitives that allow web browsers to store information in the client in a much more advanced way compared to other techniques such as HTTP Cookies. They were originally introduced with the goal of enhancing the capabilities of websites, however, they are often exploited as a way of tracking users across multiple sessions and websites. This work is divided in two parts. First, it quantifies the usage of these three primitives in the context of user tracking. This is done by performing a large-scale analysis on the usage of these techniques in the wild. The results highlight that code snippets belonging to those primitives can be found in tracking scripts at a surprising high rate, suggesting that user tracking is a major use case of these technologies. The second part reviews of the effectiveness of the removal of client-side storage data in modern browsers. A web application, built for specifically for this study, is used to highlight that it is often extremely hard, if not impossible, for users to remove personal data stored using the three primitives considered. This finding has significant implications, because those techniques are often uses as vector for cookie resurrection. CONTENTS Abstract ........................................................................................................................
    [Show full text]
  • CTA Specification, CTA-5000) and W3C (As a Final Community Group Report), by Agreement Between the Two Organizations
    CCTTAA SSppeecciiffiiccaattiioonn Web Application Video Ecosystem – Web Media API Snapshot 2017 CTA-5000 December 2017 NOTICE Consumer Technology Association (CTA)™ Standards, Bulletins and other technical publications are designed to serve the public interest through eliminating misunderstandings between manufacturers and purchasers, facilitating interchangeability and improvement of products, and assisting the purchaser in selecting and obtaining with minimum delay the proper product for his particular need. Existence of such Standards, Bulletins and other technical publications shall not in any respect preclude any member or nonmember of the Consumer Technology Association from manufacturing or selling products not conforming to such Standards, Bulletins or other technical publications, nor shall the existence of such Standards, Bulletins and other technical publications preclude their voluntary use by those other than Consumer Technology Association members, whether the document is to be used either domestically or internationally. WAVE Specifications are developed under the WAVE Rules of Procedure, which can be accessed at the WAVE public home page (https://cta.tech/Research-Standards/Standards- Documents/WAVE-Project/WAVE-Project.aspx) WAVE Specifications are adopted by the Consumer Technology Association in accordance with clause 5.4 of the WAVE Rules of Procedures regarding patent policy. By such action, the Consumer Technology Association does not assume any liability to any patent owner, nor does it assume any obligation whatever to parties adopting the Standard, Bulletin or other technical publication. This document does not purport to address all safety problems associated with its use or all applicable regulatory requirements. It is the responsibility of the user of this document to establish appropriate safety and health practices and to determine the applicability of regulatory limitations before its use.
    [Show full text]
  • Insights Into Webassembly: Compilation Performance and Shared Code Caching in Node.Js
    Insights into WebAssembly: Compilation Performance and Shared Code Caching in Node.js Tobias Nießen Michael Dawson Faculty of Computer Science IBM Runtime Technologies University of New Brunswick IBM Canada [email protected] [email protected] Panos Patros Kenneth B. Kent Software Engineering Faculty of Computer Science University of Waikato University of New Brunswick [email protected] [email protected] ABSTRACT high-level languages, the WebAssembly instruction set is closely re- Alongside JavaScript, V8 and Node.js have become essential com- lated to actual instruction sets of modern processors, since the initial ponents of contemporary web and cloud applications. With the WebAssembly specification does not contain high-level concepts addition of WebAssembly to the web, developers finally have a fast such as objects or garbage collection [8]. Because of the similarity of platform for performance-critical code. However, this addition also the WebAssembly instruction set to physical processor instruction introduces new challenges to client and server applications. New sets, many existing “low-level” languages can already be compiled application architectures, such as serverless computing, require to WebAssembly, including C, C++, and Rust. instantaneous performance without long startup times. In this pa- WebAssembly also features an interesting combination of secu- per, we investigate the performance of WebAssembly compilation rity properties. By design, WebAssembly can only interact with its in V8 and Node.js, and present the design and implementation of host environment through an application-specific interface. There a multi-process shared code cache for Node.js applications. We is no built-in concept of system calls, but they can be implemented demonstrate how such a cache can significantly increase applica- through explicitly imported functions.
    [Show full text]
  • Universal High-Performance Applications with Webassembly
    ISSN:0975-9646 Jebreel Alamari et al, / (IJCSIT) International Journal of Computer Science and Information Technologies, Vol. 11 (6) , 2020, 102-106 Universal High-Performance Applications with WebAssembly Jebreel Alamari C.Edward Chow Computer Science Department Computer Science Department University of Colorado at University of Colorado at Colorado Springs Colorado Springs [email protected] [email protected] Abstract— Building and maintaining applications is an Browsers do not stop at that point. They try to run that code expensive operation. According to Kinvey report, building an efficiently and at a high speed. Since JavaScript is the main enterprise level mobile application costs about $270k. programming language for computation in the browsers, Supporting multiple platforms and operating systems is the after the failure of Java Applets [6], it became feasible to driving cost of the development process. In this paper we optimize browser engines to run JavaScript code faster. investigate the possibility of using web browsers as computation containers that allow code to run independently from the One of inaccurate ideas about JavaScript is that it is slow, underlying operating system. Progressive Web Applications and it is only good to do form processing with some fun became popular in the recent years, however their performance animation in the web page. Sure, JavaScript can do all that, still worries developers. Therefore, in this paper we concentrate but nowadays it can do much more. on the performance aspect of web applications. Even though it is still considered a loosely typed language Keywords— (web applications, universal applications, web with an interpreter, its performance has dramatically browsers, web assembly, JavaScript, WebAssembly) improved [7].
    [Show full text]
  • Using Indexeddb with a Spatial Database
    Linköpings Universitet | Institutionen för Datavetenskap Examenarbete, 16 hp | Innovativ Programmering Vårterminen 2018 | LIU-IDA/LITH-EX-G--18/049--SE Using IndexedDB with a spatial database Ludvig Eriksson Handledare: Erik Berglund Examinator: Anders Fröberg Linköping University SE-581 83 Linköping 013-28 10 00, www.liu.se Using IndexedDB with a spatial database Ludvig Eriksson Linköping University Norrköping, Sweden [email protected] ABSTRACT In addition to having the advantage for the user of requiring Web technologies are becoming increasingly useful with a lower effort to visit, PWAs also have other advantages new features and the gap to native apps is narrowing. over mobile apps for the developers. With them you don’t Recently, IndexedDB was added to the web standard to have to maintain separate code bases for different device provide large scale storage solutions directly in the types, screen sizes or operating systems. This can be both browser. Is it performant enough to be used with a spatial economically more desirable and require fewer resources database? In this study, such a system is developed for for companies that are building systems for mobile Foran Sverige AB and we learn that IndexedDB indeed can platforms. be used for this purpose. Even storage demanding Motivation geospatial applications can be developed as a multi- Foran Sverige AB develops systems for gathering, platform system with a single codebase, all while analyzing and presentation of forestry and nature data3. broadening the possible audience reach by avoiding an app When clients are out in the field, often the mobile reception installation process. isn’t optimal and load times can be unreasonably slow, if Author Keywords present at all.
    [Show full text]
  • Aplicação Web Para Dispositivos Móveis Com Inputs De Nova Geração
    Aplicação web para dispositivos móveis com inputs de nova geração Protótipo de aplicação web, na área da cultura, que fornece pontos de interesse baseados na localização do utilizador, simpli!cando a sua utilização em movimento VÍTOR ÂNGELO MAGALHÃES MARINHO Licenciado em Artes Plásticas - Escultura - pela Faculdade de Belas Artes da Universidade do Porto DISSERTAÇÃO SUBMETIDA PARA SATISFAÇÃO PARCIAL DOS REQUISITOS DO GRAU DE MESTRE EM MULTIMÉDIA Realizada sob orientação do Professor Doutor José Miguel Santos Araújo Carvalhais Fonseca, Faculdade de Belas Artes da Universidade do Porto Porto, setembro de 2011 II Em memória do Fidalgo “Life is what happens to you While you're busy making other plans” (John Lennon) III IV Agradecimentos Quero agradecer primeiro de tudo aos meus pais por estarem sempre ao meu lado e desta vez não foi exceção, o seu incentivo, apoio, carinho, amizade, energia e paciência foram incríveis. À minha irmã por ouvir os meus desabafos, pela paciência, pelos conselhos e por todo o seu apoio. Sem eles, tudo teria sido muito mais difícil. Ao Prof. Dr. Miguel Carvalhais, por ter aceite participar neste desa!o tendo em conta todas as particularidades que envolviam este projeto. Agradeço a sua orientação, aconselhamento, disponibilidade, respostas céleres, sugestões, críticas construtivas e partilha dos seus conhecimentos nas diversas áreas. Não poderia deixar de referir ainda, o Prof. Dr. Carlos Oliveira pelos seus conselhos e ajuda numa fase inicial. Gostaria igualmente de agradecer, à Filipa Almeida, ao João Angélico e à Maria Van Zeller pelos seus conselhos iniciais. Ao Carlos Fernandes e Fernando Mesquita pela ajuda em dois momentos.
    [Show full text]
  • 03-Html5-Bostonweb.Pdf
    Introduction to HTML5 Michael(tm) Smith [email protected] http://people.w3.org/mike sideshowbarker on Twitter, etc. I work for the W3C in Japan, based at Keio University near Tokyo My official W3C title is: Special Missions Subsection Junior Interim Floor Manager Where to start learning about HTML5? HTML5 differences from HTML4 http://w3.org/TR/html5-diff/ Tutorials and how-to guidance Dive into HTML5 http://diveintohtml5.org/ The HTML5 Doctors http://html5doctor.com/ Alternative authoring references HTML5 (Author Edition) http://dev.w3.org/html5/ spec-author-view HTML5: The Markup Language http://dev.w3.org/html5/ markup HTML5 differences • Syntax simplifications • MathML and SVG integration • New elements/attributes added • Removed old elements/attributes • Added new APIs for scripting Syntax simplifications <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <!doctype html> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta charset="Shift_JIS"> New elements • <video> & <audio> (no plugins) • <canvas> (scriptable image) • <ruby> (annotations) • <article>, <section>, <header> • <details>, <progress>, more... New attributes • draggable (drag-and-drop) • contenteditable (editable pages) • spellcheck (catch spelling errors) • new form attributes (for client- side validation, plus new form controls such as date picker, etc.) Elements and attributes removed or obsoleted • <frame>, <frameset> • <a name> • more... New APIs for scripting • API for <video> & <audio> • 2D drawing API for <canvas> • getElementsByClassName() • innerHTML • more... HTML design principles http://w3.org/TR/html-design-principles/ HTML design principles • Support existing content • Ensure interoperability • Precisely define UA behavior • Handle errors (non-draconian) • Evolution not revolution Important point: HTML5 includes XHTML Frequently Asked Questions (FAQ) about the future of XHTML http://w3.org/2009/06/xhtml-faq.html About error handling..
    [Show full text]
  • Amazon Silk User Guide Amazon Silk User Guide
    Amazon Silk User Guide Amazon Silk User Guide Amazon Silk: User Guide Copyright © Amazon Web Services, Inc. and/or its affiliates. All rights reserved. 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. Amazon Silk User Guide Table of Contents What is Amazon Silk? ......................................................................................................................... 1 Silk on Fire Tablet ...................................................................................................................... 1 Silk on Fire TV ........................................................................................................................... 1 Silk on Echo Show ..................................................................................................................... 2 Getting Started with Amazon Silk ........................................................................................................ 5 Are You an Amazon Silk User? ..................................................................................................... 5 Are You a Site Owner? ...............................................................................................................
    [Show full text]
  • Most Websites Don't Need to Vibrate: a Cost–Benefit Approach To
    Most Websites Don’t Need to Vibrate: A Cost–Benefit Approach to Improving Browser Security Peter Snyder Cynthia Taylor Chris Kanich University Of Illinois at Chicago University Of Illinois at Chicago University Of Illinois at Chicago [email protected] [email protected] [email protected] ABSTRACT Firefox OS, have expanded the Web API tremendously. Modern Modern web browsers have accrued an incredibly broad set of browsers have, for example, gained the ability to detect changes features since being invented for hypermedia dissemination in in ambient light levels [58], perform complex audio synthesis [14], 1990. Many of these features benefit users by enabling new types enforce digital rights management systems [25], cause vibrations of web applications. However, some features also bring risk to in enabled devices [36], and create peer to peer networks [11]. users’ privacy and security, whether through implementation error, While the web has picked up new capabilities, the security model unexpected composition, or unintended use. Currently there is underlying the Web API has remained largely unchanged. All web- no general methodology for weighing these costs and benefits. sites have access to nearly all browser capabilities. Unintended in- Restricting access to only the features which are necessary for formation leaks caused by these capabilities have been leveraged by delivering desired functionality on a given website would allow attackers in several ways: for instance, WebGL and Canvas allowed users to enforce the principle of lease privilege on use of the myriad Cao et al. to construct resilient cross-browser fingerprints [21], and APIs present in the modern web browser. Gras et al.
    [Show full text]
  • The Current Status of HTML5 Technology and Standard The
    The current status of HTML5 technology and standard HTML5 관련 최근 주요업계 동향은 ? 22 HTML5 vs (Flash vs Silverlight) 33 44 <Source: http://www.apple.com/ipad/ready-for-ipad/ > <Source: http://www.apple.com/html5/ > 55 66 <Source: http://mashable.com/2010/05/07/google-reader- adds-html5-support/> 77 <Source: http://www.computerworld.com/s/article/print/9178558/Google_to_use_HTML5_i n_Gmail?taxonomyName=App+Development&taxonomyId=11 > 88 Google to use HTML5 in Gmail Speed is a feature Goal is to get Gmail to load in under a second Offline support HTML5's database standards New features downloadurl: a new data transfer protocol HTML6 ??? Code size 443,000 lines of JavaScript 978,000 lines with comments 99 Google I/O Conference Chrome Web Store an existing web app a serverless app 1010 Google I/O Conference HTML5 Tweetdeck App 11 11 Google I/O Conference WebM Project 12 12 <Source: http://www.html5rocks.com/> 13 13 < Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-c ompatible-microsoft-joining-antiflash-movement/ > 1414 IE9 : HTML5와 GPU <Source: IE9 : HTML5와 GPU 발표자료 (황리건) > 15 15 MS IE9 Preview #3까지 출시 HTML5 비디오/오디오와 SVG 지원 예정 GPU 활용한 랜더링 기능 지원 IE9 공식 버전은 언제 출시 ??? HTML5를 지원하는 모바일 브라우저 로드맵은 ??? 1616 17 17 H.264: 31% ( Q2/09 ) 66% ( Q1/10 ) Flash : 69% ( Q2/09 ) 26% ( Q1/10 ) <Source: Encoding.com via TechCrunch> 1818 HTML5 표준 개요 및 특징은? 19 19 HTML Timeline 20 20 [ Source : Appleinsider ] What is HTML5 ? Structure and Semantic APIs 2121 HTML Design Principles <Source: http://www.w3.org/TR/html-design-principles/ > 22 22 Document Representations (문서 표현) HTML 5 XHTML 5 Document application/xhtml+xml text/html DOM The DOCTYPE <!DOCTYPE html> Just 15 character HTML5 doc !!! Case-insensitive Backwards compatibility How about Google page ? Is it based on the HTML5 ? 2424 HTML5 Basic Structure Common structures Differentiation & Style.
    [Show full text]