Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
143023864X_HT5.pdf
Скачиваний:
8
Добавлен:
21.02.2016
Размер:
7.98 Mб
Скачать

Contents

Foreword...............................................................................................................

xv

About the Authors................................................................................................

xvi

About the Technical Reviewer ............................................................................

xvii

Acknowledgments .............................................................................................

xviii

Introduction .........................................................................................................

xix

Chapter 1: Overview of HTML5................................................................................

1

The Story So Far—The History of HTML5..........................................................................

1

The Myth of 2022 and Why It Doesn’t Matter ....................................................................

2

Who Is Developing HTML5? ...............................................................................................

3

A New Vision......................................................................................................................

3

Compatibility and Paving the Cow Paths ..................................................................................................

3

Utility and the Priority of Constituencies ..................................................................................................

3

Interoperability Simplification ..................................................................................................................

4

Universal Access ......................................................................................................................................

5

A Plugin–Free Paradigm ....................................................................................................

5

What’s In and What’s Out? .......................................................................................................................

6

What’s New in HTML5?......................................................................................................

8

New DOCTYPE and Character Set.............................................................................................................

8

New and Deprecated Elements ................................................................................................................

9

Semantic Markup ...................................................................................................................................

10

Simplifying Selection Using the Selectors API........................................................................................

17

JavaScript Logging and Debugging........................................................................................................

19

v

CONTENTS

window.JSON .........................................................................................................................................

20

DOM Level 3 ...........................................................................................................................................

21

Monkeys, Squirrelfish, and Other Speedy Oddities ................................................................................

21

Summary .........................................................................................................................

22

Chapter 2: Using the Canvas API ..........................................................................

23

Overview of HTML5 Canvas .............................................................................................

23

History ....................................................................................................................................................

23

What Is a Canvas? ..................................................................................................................................

24

Canvas Coordinates................................................................................................................................

24

When Not to Use Canvas ........................................................................................................................

25

Fallback Content.....................................................................................................................................

25

CSS and Canvas......................................................................................................................................

26

Browser Support for HTML5 Canvas.......................................................................................................

26

Using the HTML5 Canvas APIs .........................................................................................

26

Checking for Browser Support ...............................................................................................................

27

Adding a Canvas to a Page .....................................................................................................................

27

Applying Transformations to Drawings ..................................................................................................

30

Working with Paths ................................................................................................................................

32

Working with Stroke Styles ....................................................................................................................

34

Working with Fill Styles ..........................................................................................................................

35

Filling Rectangular Content ....................................................................................................................

36

Drawing Curves ......................................................................................................................................

37

Inserting Images into a Canvas ..............................................................................................................

39

Using Gradients ......................................................................................................................................

41

Using Background Patterns ....................................................................................................................

43

Scaling Canvas Objects ..........................................................................................................................

44

Using Canvas Transforms.......................................................................................................................

46

Using Canvas Text ..................................................................................................................................

48

vi

CONTENTS

Applying Shadows . ................................................................................................................................

50

Working with Pixel Data . .......................................................................................................................

52

Implementing Canvas Security. .............................................................................................................

54

Building an Application with HTML5 Canvas ...................................................................

55

Practical Extra: Full Page Glass Pane . ...................................................................................................

58

Practical Extra: Timing Your Canvas Animation. ....................................................................................

58

Summary .........................................................................................................................

61

Chapter 3: Working with Scalable Vector Graphics..............................................

63

Overview of SVG ..............................................................................................................

63

History . ..................................................................................................................................................

63

Understanding SVG. ...............................................................................................................................

64

Scalable Graphics. .................................................................................................................................

66

Creating 2D Graphics with SVG . ............................................................................................................

66

Adding SVG to a Page . ...........................................................................................................................

67

Simple Shapes. ......................................................................................................................................

67

Transforming SVG Elements . .................................................................................................................

68

Reusing Content . ...................................................................................................................................

69

Patterns and Gradients . .........................................................................................................................

70

SVG Paths . .............................................................................................................................................

71

Using SVG Text . .....................................................................................................................................

72

Putting the Scene Together . ..................................................................................................................

73

Building an Interactive Application with SVG...................................................................

74

Adding Trees. .........................................................................................................................................

75

Adding the updateTrees Function. .........................................................................................................

75

Adding the removeTree Function . .........................................................................................................

76

Adding the CSS Styles . ..........................................................................................................................

76

The Final Code. ......................................................................................................................................

77

Summary .........................................................................................................................

81

vii

CONTENTS

Chapter 4: Working with Audio and Video

............................................................83

Overview of Audio and Video ...........................................................................................

83

Video Containers.....................................................................................................................................

83

Audio and Video Codecs .........................................................................................................................

84

Audio and Video Restrictions..................................................................................................................

85

Browser Support for Audio and Video ....................................................................................................

86

Using the Audio and Video API.........................................................................................

86

Checking for Browser Support ...............................................................................................................

87

Accessibility............................................................................................................................................

88

Understanding Media Elements..............................................................................................................

89

Working with Audio ................................................................................................................................

94

Working with Video.................................................................................................................................

95

Practical Extras.....................................................................................................................................

103

Summary .......................................................................................................................

106

Chapter 5: Using the Geolocation API .................................................................

107

About Location Information ...........................................................................................

107

Latitude and Longitude Coordinates.....................................................................................................

107

Where Does Location Information Come From? ...................................................................................

108

IP Address Geolocation Data ................................................................................................................

109

GPS Geolocation Data ...........................................................................................................................

109

Wi-Fi Geolocation Data .........................................................................................................................

110

Cell Phone Geolocation Data.................................................................................................................

110

User–Defined Geolocation Data............................................................................................................

111

Browser Support for Geolocation...................................................................................

111

Privacy ...........................................................................................................................

112

Triggering the Privacy Protection Mechanism......................................................................................

113

Dealing with Location Information........................................................................................................

114

viii

CONTENTS

Using the Geolocation API..............................................................................................

114

Checking for Browser Support .............................................................................................................

114

Position Requests .................................................................................................................................

115

Building an Application with Geolocation ......................................................................

120

Writing the HTML Display .....................................................................................................................

122

Processing the Geolocation Data..........................................................................................................

123

The Final Code......................................................................................................................................

126

Practical Extras..............................................................................................................

129

What’s My Status?................................................................................................................................

130

Show Me on a Google Map...................................................................................................................

131

Summary .......................................................................................................................

133

Chapter 6: Using the Communication APIs .........................................................

135

Cross Document Messaging ..........................................................................................

135

Understanding Origin Security..............................................................................................................

138

Browser Support for Cross Document Messaging................................................................................

139

Using the postMessage API ..................................................................................................................

139

Building an Application Using the postMessage API ............................................................................

140

XMLHttpRequest Level 2................................................................................................

146

Cross-Origin XMLHttpRequest ..............................................................................................................

147

Progress Events....................................................................................................................................

149

Browser Support for HTML5 XMLHttpRequest Level 2 .........................................................................

150

Using the XMLHttpRequest API.............................................................................................................

150

Building an Application Using XMLHttpRequest ...................................................................................

152

Practical Extras..............................................................................................................

156

Structured Data ....................................................................................................................................

156

Framebusting .......................................................................................................................................

157

Summary .......................................................................................................................

157

ix

CONTENTS

Chapter 7: Using the WebSocket API ..................................................................

159

Overview of WebSocket.................................................................................................

159

Real-Time and HTTP .............................................................................................................................

159

Understanding WebSocket ...................................................................................................................

161

Writing a Simple Echo WebSocket Server .....................................................................

167

Using the WebSocket API ..............................................................................................

176

Checking for Browser Support .............................................................................................................

176

Basic API Usage....................................................................................................................................

177

Building a WebSocket Application.................................................................................

182

Coding the HTML File............................................................................................................................

183

Adding the WebSocket Code ................................................................................................................

185

Adding the Geolocation Code................................................................................................................

185

Putting It All Together...........................................................................................................................

186

The Final Code......................................................................................................................................

188

Summary .......................................................................................................................

191

Chapter 8: Using the Forms API..........................................................................

193

Overview of HTML5 Forms.............................................................................................

193

HTML Forms Versus XForms ................................................................................................................

194

Functional Forms..................................................................................................................................

194

Browser Support for HTML5 Forms ......................................................................................................

194

An Input Catalog ...................................................................................................................................

195

Using the HTML5 Forms APIs.........................................................................................

200

New Form Attributes and Functions .....................................................................................................

200

Checking Forms with Validation ...........................................................................................................

204

Validation Feedback .............................................................................................................................

207

Building an Application with HTML5 Forms...................................................................

209

Practical Extras.....................................................................................................................................

213

x

CONTENTS

Summary .......................................................................................................................

215

Chapter 9: Working with Drag-and-Drop ............................................................

217

Web Drag-and-Drop: The Story So Far ..........................................................................

217

Overview of HTML5 Drag-and-Drop...............................................................................

218

The Big Picture .....................................................................................................................................

218

Events to Remember ............................................................................................................................

221

Drag Participation.................................................................................................................................

224

Transfer and Control.............................................................................................................................

224

Building an Application with Drag-and-Drop .................................................................

225

Getting Into the dropzone .....................................................................................................................

234

Handling Drag-and-Drop for Files..................................................................................

235

Practical Extras..............................................................................................................

239

Customizing the Drag Display...............................................................................................................

239

Summary .......................................................................................................................

240

Chapter 10: Using the Web Workers API.............................................................

241

Browser Support for Web Workers ................................................................................

242

Using the Web Workers API ...........................................................................................

242

Checking for Browser Support .............................................................................................................

242

Creating Web Workers..........................................................................................................................

243

Loading and Executing Additional JavaScript ......................................................................................

244

Communicating with Web Workers ......................................................................................................

244

Coding the Main Page....................................................................................................

245

Handling Errors.....................................................................................................................................

246

Stopping Web Workers .........................................................................................................................

247

Using Web Workers within Web Workers .............................................................................................

247

Using Timers.........................................................................................................................................

248

Example Code.......................................................................................................................................

248

xi

CONTENTS

Building an Application with Web Workers....................................................................

250

Coding the blur.js Helper Script............................................................................................................

252

Coding the blur.html Application Page .................................................................................................

253

Coding the blurWorker.js Web Worker Script .......................................................................................

254

Communicating with the Web Workers ................................................................................................

254

The Application in Action......................................................................................................................

256

Example Code.......................................................................................................................................

257

Summary .......................................................................................................................

261

Chapter 11: Using the Storage APIs....................................................................

263

Overview of Web Storage ..............................................................................................

263

Browser Support for Web Storage.................................................................................

264

Using the Web Storage API ............................................................................................

264

Checking for Browser Support .............................................................................................................

264

Setting and Retrieving Values ..............................................................................................................

266

Plugging Data Leaks.............................................................................................................................

267

Local Versus Session Storage ..............................................................................................................

269

Other Web Storage API Attributes and Functions .................................................................................

269

Communicating Web Storage Updates .................................................................................................

272

Exploring Web Storage .........................................................................................................................

273

Building an Application with Web Storage.....................................................................

275

The Future of Browser Database Storage......................................................................

286

The Web SQL Database ........................................................................................................................

286

The Indexed Database API ....................................................................................................................

289

Practical Extras..............................................................................................................

291

JSON Object Storage ............................................................................................................................

291

A Window into Sharing .........................................................................................................................

292

Summary .......................................................................................................................

293

xii

CONTENTS

Chapter 12: Creating Offline Web Applications..................................................

295

Overview of HTML5 Offline Web Applications................................................................

295

Browser Support for HTML5 Offline Web Applications .........................................................................

297

Using the HTML5 Application Cache API........................................................................

297

Checking for Browser Support .............................................................................................................

297

Creating a Simple Offline Application...................................................................................................

298

Going Offline .........................................................................................................................................

298

Manifest Files .......................................................................................................................................

299

The ApplicationCache API.....................................................................................................................

300

Application Cache in Action..................................................................................................................

301

Building an Application with HTML5 Offline Web Applications......................................

303

Creating a Manifest File for the Application Resources........................................................................

306

Creating the HTML Structure and CSS for the UI ..................................................................................

306

Creating the Offline JavaScript.............................................................................................................

307

Check for ApplicationCache Support ....................................................................................................

309

Adding the Update Button Handler .......................................................................................................

309

Add Geolocation Tracking Code............................................................................................................

310

Adding Storage Code ............................................................................................................................

310

Adding Offline Event Handling ..............................................................................................................

311

Summary .......................................................................................................................

311

Chapter 13: The Future of HTML5 .......................................................................

313

Browser Support for HTML5 ..........................................................................................

313

HTML Evolves ................................................................................................................

313

WebGL ..................................................................................................................................................

314

Devices .................................................................................................................................................

316

Audio Data API ......................................................................................................................................

316

Touchscreen Device Events..................................................................................................................

317

Peer-to-Peer Networking......................................................................................................................

320

xiii

CONTENTS

Ultimate Direction

................................................................................................................................. 320

Summary .......................................................................................................................

320

Index ...................................................................................................................

323

xiv