HTML5 in Action

466 Pages·2014·20.9 MB·English

by  Rob Crowther

HTML5 in Action
Rob Crowther, Joe Lennon, Ash Blue and Greg Wanish
Copyright
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in
quantity. For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 261
Shelter Island, NY 11964
Email: [email protected]
©2014 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or
transmitted, in any form or by means electronic, mechanical, photocopying, or
otherwise, without prior written permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their
products are claimed as trademarks. Where those designations appear in the book, and
Manning Publications was aware of a trademark claim, the designations have been
printed in initial caps or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s
policy to have the books we publish printed on acid-free paper, and we exert our best
efforts to that end. Recognizing also our responsibility to conserve the resources of our
planet, Manning books are printed on paper that is at least 15 percent recycled and
processed without the use of elemental chlorine.
Manning Publications Co. Development editor: Renae Gregoire
20 Baldwin Road Copyeditor: Tiffany Taylor
PO Box 261 Proofreader: Elizabeth Martin
Shelter Island, NY 11964 Typesetter: Dennis Dalinnik
Cover designer: Marija Tudor
ISBN: 9781617290497
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – MAL – 19 18 17 16 15 14
Brief Table of Contents
Copyright
Brief Table of Contents
Table of Contents
Foreword
Preface
Acknowledgments
About this Book
1. Introduction
Chapter 1. HTML5: from documents to applications
2. Browser-based apps
Chapter 2. Form creation: input widgets, data binding, and data validation
Chapter 3. File editing and management: rich formatting, file storage, drag and
drop
Chapter 4. Messaging: communicating to and from scripts in HTML5
Chapter 5. Mobile applications: client storage and offline execution
3. Interactive graphics, media, and gaming
Chapter 6. 2D Canvas: low-level, 2D graphics rendering
Chapter 7. SVG: responsive in-browser graphics
Chapter 8. Video and audio: playing media in the browser
Chapter 9. WebGL: 3D application development
Appendix A. HTML5 and related specifications
Appendix B. HTML5 API reference
Appendix C. Installing PHP and MySQL
Appendix D. Computer networking primer
Appendix E. Setting up Node.js
Appendix F. Channel messaging
Appendix G. Tools and libraries
Appendix H. Encoding with FFmpeg
Appendix I. HTML next
Appendix J. Links and references
Index
List of Figures
List of Tables
List of Listings
Table of Contents
Copyright
Brief Table of Contents
Table of Contents
Foreword
Preface
Acknowledgments
About this Book
1. Introduction
Chapter 1. HTML5: from documents to applications
1.1. Exploring the markup: a whirlwind tour of HTML5
1.1.1. Creating the basic structure of an HTML5 document
1.1.2. Using the new semantic elements
1.1.3. Enhancing accessibility using ARIA roles
1.1.4. Enabling support in Internet Explorer versions 6 to 8
1.1.5. Introducing HTML5’s new form features
1.1.6. Progress bars, meters, and collapsible content
1.2. Beyond the markup: additional web standards
1.2.1. Microdata
1.2.2. CSS3
1.2.3. JavaScript and the DOM
1.3. The HTML5 DOM APIs
1.3.1. Canvas
1.3.2. Audio and video
1.3.3. Drag and drop
1.3.4. Cross-document messaging, server-sent events, and WebSockets
1.3.5. Document editing
1.3.6. Web storage
1.3.7. Offline web applications
1.4. Additional APIs and specifications
1.4.1. Geolocation API
1.4.2. Indexed database (IndexedDB API)
1.4.3. File, File Reader, File Writer, and File System APIs
1.4.4. Scalable Vector Graphics
1.4.5. Web Graphics Library
1.5. Summary
2. Browser-based apps
Chapter 2. Form creation: input widgets, data binding, and data validation
2.1. Previewing the form and gathering prerequisites
2.1.1. Gathering the application prerequisites
2.2. Building a form’s user interface
2.2.1. Defining a form’s basic HTML document structure
2.2.2. Using the form input types email and tel and the input attributes
autofocus, required, and placeholder
2.2.3. Using the form input attribute required
2.2.4. Building a calculator-style form using the input type number,
the input attributes min/max and data-*, and the element <output>
2.2.5. Using the form input type month and input attribute pattern
2.2.6. Allowing users to choose whether to save or submit a form:
using the input attributes formnovalidate and formaction
2.3. Calculating totals and displaying form output
2.3.1. Building calculation functions
2.3.2. Accessing values from HTML5 data-* attributes
2.4. Checking form input data with the Constraint Validation API
2.4.1. Creating custom validation tests and error messages with the
setCustomValidity method and the validationMessage property
2.4.2. Detecting a failed form validation with the invalid event
2.4.3. Styling invalid elements using CSS3 pseudo-classes
2.5. Providing fallbacks for unsupported browsers
2.5.1. Detecting features and loading resources with Modernizr: an
overview
2.5.2. Using polyfills and Modernizr to plug the gaps
2.5.3. Performing validation without the Constraint Validation API
2.6. Summary
Chapter 3. File editing and management: rich formatting, file storage, drag and
drop
3.1. The Super HTML5 Editor: application overview, prerequisites, and
first steps
3.1.1. Defining the HTML document structure
3.1.2. Implementing navigation and state management in JavaScript
3.2. Rich-text editing and geolocation
3.2.1. Using designMode to make an HTML document editable
3.2.2. Providing rich-text editing controls with execCommand
3.2.3. Mapping a user’s current location with the Geolocation API
3.3. Managing files locally: the File System, Quota Management, File, and
File Writer APIs
3.3.1. Creating an application filesystem
3.3.2. Getting a list of files from the filesystem
3.3.3. Loading, viewing, editing, and deleting files
3.3.4. Creating new files
3.3.5. Saving files using the File Writer API
3.4. Adding drag-and-drop interactivity
3.4.1. Dragging files into an application for import
3.4.2. Dragging files out of an application for export
3.5. Summary
Chapter 4. Messaging: communicating to and from scripts in HTML5
4.1. Server-sent events (SSE)
4.1.1. A simple SSE chat application
4.1.2. When to use SSE
4.2. Using WebSockets to build a real-time messaging web app
4.2.1. Application overview and prerequisites
4.2.2. Creating a WebSocket with Node.js
4.2.3. Building the planner application
4.3. Messaging on the client side
4.3.1. Communicating across domains with postMessage
4.3.2. Joining the applications with cross-document messaging
4.4. Summary
Chapter 5. Mobile applications: client storage and offline execution
5.1. My Tasks: application overview, prerequisites, and first steps
5.1.1. Defining the HTML document structure
5.1.2. Controlling visibility of views using CSS
5.1.3. Implementing navigation with JavaScript
5.2. Managing data with the Web Storage API
5.2.1. Reading data from localStorage
5.2.2. Saving data to localStorage
5.2.3. Deleting data from localStorage
5.3. Managing data using IndexedDB
5.3.1. Detecting database support on a browser
5.3.2. Creating or connecting to an IndexedDB database, creating an
object store and index
5.3.3. Developing a dynamic list with HTML and JavaScript
5.3.4. Searching an IndexedDB database
5.3.5. Adding data to a database using IndexedDB or Web SQL
5.3.6. Updating and deleting data from an IndexedDB database
5.3.7. Dropping a database using IndexedDB
5.4. Creating a web application that works offline: using the application
cache manifest
5.4.1. Configuring a web server for an application cache manifest’s
MIME type
5.4.2. Creating a cache manifest file
5.4.3. Automating application updates
5.5. Summary
3. Interactive graphics, media, and gaming
Chapter 6. 2D Canvas: low-level, 2D graphics rendering
6.1. Canvas basics
6.1.1. Setting the Canvas context
6.1.2. Generating a Canvas context
6.2. Creating a Canvas game
6.2.1. Creating the main engine components
6.2.2. Creating dynamic rectangles
6.2.3. Creating arcs and circles
6.2.4. Using paths to create complex shapes
6.3. Breathing life into Canvas elements
6.3.1. Animating game elements
6.3.2. Detecting overlap
6.3.3. Creating keyboard, mouse, and touch controls
6.3.4. Control input considerations
6.4. Polishing Canvas games
6.4.1. Tracking score and levels
6.4.2. Adding opening and closing screens
6.4.3. Getting help from code libraries
6.5. Summary
Chapter 7. SVG: responsive in-browser graphics
7.1. How bitmap and vector graphics compare
Wilson, the resizable smiley
7.2. Starting SVG Aliens with XML
7.2.1. Setting up SVG inside HTML