Lubbers / Albers / Salim Pro HTML5 Programming

Powerful APIs for Richer Internet Application Development
1. ed
ISBN: 978-1-4302-2791-5
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 304 Seiten

HTML5 is here, and with it, web applications take on a power, ease, scalability, and responsiveness like never before. In this book, developers will learn how to use the latest cutting-edge HTML5 web technology-available in the most recent versions of modern browsers-to build web applications with unparalleled functionality, speed, and responsiveness. Explains how to create real-time HTML5 applications that tap the full potential of modern browsers Provides practical, real-world examples of HTML5 features in action Shows which HTML5 features are supported in current browsers Covers all the new HTML5 APIs to get you up to speed quickly with HTML5

Peter Lubbers is the director of documentation and training at Kaazing Corporation and the co-founder of the San Francisco HTML5 User Group. Peter also teaches HTML5 training courses all over the world. Prior to joining Kaazing, Peter worked as an information architect at Oracle, where he wrote many books, including the award-winning Oracle Application Server Portal Configuration Guide. At Oracle, Peter also developed documentation automation solutions, and two of his inventions are patented. A native of the Netherlands, Peter served as a Special Forces commando in the Royal Dutch Green Berets. Peter lives on the edge of the Tahoe National Forest and in his spare time, he loves to run ultra marathons in the Sierra Nevada foothills and around Lake Tahoe (preferably in one go!).

Autoren/Hrsg.

Lubbers, Peter

Albers, Brian

Salim, Frank

Inhaltsverzeichnis

1;Title Page;1
2;Copyright Page;2
3;Contents at a Glance;4
4;Table of Contents;5
5;Foreword;13
6;About the Authors;14
7;About the Technical Reviewer;15
8;Acknowledgements;16
9;Introduction;17
9.1;Who This Book Is For;17
9.2;An Overview of This Book;18
9.3;Example Code and Companion Web Site;18
9.4;Contacting the Authors;18
10;Chapter 1 Overview of HTML5;19
10.1;The Story So Far—The History of HTML5;19
10.2;The Myth of 2022 and Why It Doesn’t Matter;20
10.3;Who Is Developing HTML5?;21
10.4;A New Vision;21
10.4.1;Compatibility and Paving the Cow Paths;21
10.4.2;Utility and the Priority of Constituencies;22
10.4.2.1;Secure by Design;22
10.4.2.2;Separation of Presentation and Content;22
10.4.3;Interoperability Simplification;23
10.4.4;Universal Access;23
10.5;A Plugin–Free Paradigm;23
10.5.1;What’s In and What’s Out?;24
10.6;What’s New in HTML5?;26
10.6.1;New DOCTYPE and Character Set;26
10.6.2;New and Deprecated Elements;27
10.6.3;Semantic Markup;28
10.6.4;Simplifying Selection Using the Selectors API;35
10.6.5;JavaScript Logging and Debugging;38
10.6.6;window.JSON;39
10.6.7;DOM Level 3;40
10.6.8;Monkeys, Squirrelfish, and Other Speedy Oddities;40
10.7;Summary;41
11;Chapter 2 Using the HTML5 Canvas API;42
11.1;Overview of HTML5 Canvas;42
11.1.1;History;42
11.1.2;What Is a Canvas?;43
11.1.3;Canvas Coordinates;43
11.1.4;When Not to Use Canvas;44
11.1.5;Fallback Content;44
11.1.6;CSS and Canvas;45
11.1.7;Browser Support for HTML5 Canvas;45
11.2;Using the HTML5 Canvas APIs;46
11.2.1;Checking for Browser Support;46
11.2.2;Adding a Canvas to a Page;47
11.2.3;Applying Transformations to Drawings;49
11.2.4;Working with Paths;52
11.2.5;Working with Stroke Styles;55
11.2.6;Working with Fill Styles;56
11.2.7;Filling Rectangular Content;57
11.2.8;Drawing Curves;59
11.2.9;Inserting Images into a Canvas;61
11.2.10;Using Gradients;62
11.2.11;Using Background Patterns;64
11.2.12;Scaling Canvas Objects;66
11.2.13;Using Canvas Transforms;69
11.2.14;Using Canvas Text;70
11.2.15;Applying Shadows;72
11.2.16;Working with Pixel Data;74
11.2.17;Implementing Canvas Security;75
11.3;Building an Application with HTML5 Canvas;76
11.3.1;Practical Extra: Full Page Glass Pane;80
11.4;Summary;80
12;Chapter 3 Working with HTML5 Audio and Video;81
12.1;Overview of HTML5 Audio and Video;81
12.1.1;Video Containers;81
12.1.2;Audio and Video Codecs;83
12.1.2.1;The Codec Wars and the Tentative Truce;83
12.1.3;Audio and Video Restrictions;84
12.1.4;Browser Support for HTML5 Audio and Video;84
12.2;Using the HTML5 Audio and Video APIs;85
12.2.1;Checking for Browser Support;86
12.2.2;Understanding Media Elements;87
12.2.2.1;The Basics: Declaring Your Media Element;87
12.2.2.2;Using the Source;88
12.2.2.3;Taking Control;90
12.2.3;Working with Audio;92
12.2.3.1;Audio Activation;92
12.2.4;Working with Video;93
12.2.4.1;Creating a Video Timeline Browser;94
12.2.4.2;Adding the Video and the Canvas Element;94
12.2.4.3;Adding Variables;95
12.2.4.4;Adding the updateFrame Function;96
12.2.4.5;Adding the startVideo Function;97
12.2.4.6;Handling User Input;98
12.2.4.7;Adding the stopTimeline Function;99
12.2.5;Practical Extras;100
12.2.5.1;Background Noise in a Page;100
12.2.5.2;Mouseover Video Playback;101
12.3;Summary;102
13;Chapter 4 Using the HTML5 Geolocation API;103
13.1;About Location Information;103
13.1.1;Latitude and Longitude Coordinates;104
13.1.2;Where Does Location Information Come From?;104
13.1.3;IP Address Geolocation Data;105
13.1.4;GPS Geolocation Data;105
13.1.5;Wi-Fi Geolocation Data;106
13.1.6;Cell Phone Geolocation Data;106
13.1.7;User–Defined Geolocation Data;107
13.2;Browser Support for HTML5 Geolocation;107
13.3;Privacy;108
13.3.1;Triggering the Privacy Protection Mechanism;109
13.3.2;Dealing with Location Information;111
13.4;Using the HTML5 Geolocation API;111
13.4.1;Checking for Browser Support;111
13.4.2;Position Requests;112
13.4.2.1;One-Shot Position Requests;112
13.4.2.2;Repeated Position Updates;116
13.5;Building a Real-Time Application with HTML5 Geolocation;117
13.5.1;Writing the HTML Display;120
13.5.2;Processing the Geolocation Data;120
13.5.3;The Final Code;124
13.6;Practical Extras;127
13.6.1;What’s My Status?;127
13.6.2;Show Me on a Google Map;129
13.7;Summary;130
14;Chapter 5 Using the Communication APIs;131
14.1;Cross Document Messaging;131
14.1.1;Understanding Origin Security;133
14.1.2;Browser Support for Cross Document Messaging;134
14.1.3;Using the postMessage API;135
14.1.3.1;Checking for Browser Support;135
14.1.3.2;Sending Messages;135
14.1.3.3;Listening for Message Events;135
14.1.4;Building an Application Using the postMessage API;136
14.1.4.1;Building the Portal Page;137
14.1.4.2;Building the Chat Widget Page;138
14.1.4.3;The Final Code;138
14.1.4.4;The Application in Action;141
14.2;XMLHttpRequest Level 2;142
14.2.1;Cross-Origin XMLHttpRequest;142
14.2.2;Progress Events;144
14.2.3;Browser Support for HTML5 XMLHttpRequest Level 2;145
14.2.4;Using the XMLHttpRequest API;145
14.2.4.1;Checking for Browser Support;145
14.2.4.2;Making Cross-Origin Requests;146
14.2.4.3;Using Progress Events;146
14.2.5;Building an Application Using XMLHttpRequest;147
14.2.5.1;The Final Code;148
14.2.5.2;The Application in Action;150
14.3;Practical Extras;151
14.3.1;Structured Data;151
14.3.2;Framebusting;151
14.4;Summary;152
15;Chapter 6 Using the HTML5 WebSocket API;153
15.1;Overview of HTML5 WebSockets;153
15.1.1;Real-Time and HTTP;153
15.1.2;Understanding HTML5 WebSockets;155
15.1.2.1;The WebSocket Handshake;156
15.1.2.2;The WebSocket Interface;156
15.1.2.3;A Dramatic Reduction in Unnecessary Network Traffic and Latency;157
15.2;Browser Support for HTML5 WebSockets;162
15.3;Writing a Simple Echo WebSocket Server;162
15.4;Using the HTML5 WebSocket API;170
15.4.1;Checking for Browser Support;170
15.4.2;Basic API Usage;171
15.4.2.1;Creating a WebSocket object and Connecting to a WebSocket Server;171
15.4.2.2;Adding Event Listeners;171
15.4.2.3;Sending Messages;171
15.4.2.4;Running the WebSocket Page;172
15.5;Building an Application with HTML5 WebSockets;174
15.5.1;Coding the HTML File;175
15.5.2;Adding the WebSocket Code;177
15.5.3;Adding the Geolocation Code;178
15.5.4;Putting It All Together;178
15.5.5;The Final Code;180
15.6;Summary;183
16;Chapter 7 Using the HTML5 Forms API;184
16.1;Overview of HTML5 Forms;184
16.1.1;HTML Forms vs. XForms;185
16.1.2;Functional Forms;185
16.1.3;Browser Support for HTML5 Forms;185
16.1.4;An Input Catalog;186
16.2;Using the HTML5 Forms APIs;191
16.2.1;New form attributes and functions;191
16.2.1.1;The placeholder Attribute;191
16.2.1.2;The autocomplete Attribute;192
16.2.1.3;The autofocus Attribute;192
16.2.1.4;The list Attribute and the datalist Element;193
16.2.1.5;The min and max Attributes;193
16.2.1.6;The step Attribute;194
16.2.1.7;The valueAsNumber Function;194
16.2.1.8;The required Attribute;194
16.2.2;Checking forms with validation;195
16.2.2.1;Validation Fields and Functions;198
16.2.3;Validation feedback;199
16.2.3.1;Turning Off Validation;200
16.3;Building an Application with HTML5 Forms;200
16.3.1;Practical Extras;205
16.3.1.1;The Password is: Validation!;205
16.4;Summary;206
17;Chapter 8 Using the HTML5 Web Workers API;207
17.1;Browser Support for HTML5 Web Workers;208
17.2;Using the HTML5 Web Workers API;208
17.2.1;Checking for Browser Support;208
17.2.2;Creating HTML5 Web Workers;209
17.2.3;Loading and Executing Additional JavaScript;209
17.2.4;Communicating with HTML5 Web Workers;209
17.3;Coding the Main Page;210
17.3.1;Handling Errors;211
17.3.2;Stopping HTML5 Web Workers;212
17.3.3;Using HTML5 Web Workers within HTML5 Web Workers;212
17.3.4;Using Timers;213
17.3.5;Simple Example Code;213
17.4;Building an Application with HTML5 Web Workers;214
17.4.1;Coding the blur.js Helper Script;215
17.4.2;Coding the blur.html Application Page;217
17.4.3;Coding the blurWorker.js Web Worker Script;218
17.4.4;Communicating with the Web Workers;219
17.4.5;The Application in Action;221
17.4.6;Example Code;221
17.5;Summary;226
18;Chapter 9 Using the HTML5 Web Storage API;227
18.1;Overview of HTML5 Web Storage;227
18.2;Browser Support for HTML5 Web Storage;228
18.3;Using the HTML5 Web Storage API;229
18.3.1;Checking for Browser Support;229
18.3.2;Setting and Retrieving Values;230
18.3.3;Plugging Data Leaks;231
18.3.4;Local Versus Session Storage;233
18.3.5;Other Web Storage API Attributes and Functions;233
18.3.6;Communicating Web Storage Updates;235
18.3.7;Exploring Web Storage;237
18.4;Building an Application with HTML5 Web Storage;238
18.5;The Future of Browser Database Storage;249
18.6;Practical Extras;252
18.6.1;JSON Object Storage;252
18.6.2;A Window into Sharing;253
18.7;Summary;255
19;Chapter 10 Creating HTML5 Offline Web Applications;256
19.1;Overview of HTML5 Offline Web Applications;256
19.1.1;Browser Support for HTML5 Offline Web Applications;258
19.2;Using the HTML5 Offline Web Application API;259
19.2.1;Checking for Browser Support;259
19.2.2;Creating a Simple Offline Application;259
19.2.3;Going Offline;260
19.2.4;Manifest Files;260
19.2.5;The applicationCache API;261
19.3;Building an Application with HTML5 Offline Web Applications;263
19.3.1;Creating a Manifest File for the Application Resources;264
19.3.2;Creating the HTML Structure and CSS of the UI;265
19.3.3;Creating the Offline JavaScript;265
19.3.4;Check for ApplicationCache Support;267
19.3.5;Adding the Update Button Handler;268
19.3.6;Add Geolocation Tracking Code;268
19.3.7;Adding Storage Code;269
19.3.8;Adding Offline Event Handling;269
19.4;Summary;270
20;Chapter 11 The Future of HTML5;271
20.1;Browser Support for HTML5;271
20.2;HTML Evolves;271
20.2.1;WebGL;272
20.2.1.1;HTML in Three Dimensions;272
20.2.1.2;3D Shaders;273
20.2.2;Devices;274
20.2.3;Audio Data API;275
20.2.4;Video Improvements;275
20.2.5;Touchscreen Device Events;275
20.2.5.1;Orientation;276
20.2.5.2;Gestures;276
20.2.5.3;Touches;277
20.2.6;Peer-to-Peer Networking;278
20.2.7;Ultimate Direction;279
20.3;Summary;279
21;Index;280