Pro HTML5 with CSS, JavaScript, and Multimedia: Complete Website Development and Best Practices 9781484224625, 9781484224632, 1484224620, 1484224639

Table of contents :
Contents at a Glance......Page 5
Contents......Page 7
About the Author......Page 24
About the Technical Reviewer......Page 25
Acknowledgments......Page 26
Introduction......Page 27
Part I:HTML5 Technologies......Page 29
HTML Document......Page 30
DOCTYPE......Page 31
Miscellaneous Structure Rules......Page 32
Title Element......Page 33
Meta Element......Page 34
Script Element......Page 35
Link Element......Page 36
Style Element......Page 38
Base Element......Page 39
Summary......Page 40
Organizing Content......Page 42
Applying Styles......Page 43
Selectors......Page 44
Declarations......Page 45
Distance Units......Page 46
Color Units......Page 47
Precedence......Page 48
Specificity Rule......Page 49
Box Model......Page 50
Vendor Prefixes......Page 51
Style Attribute......Page 52
Summary......Page 53
Objects......Page 55
Constructors......Page 56
Inheritance......Page 58
Using Prototypes......Page 59
Using Create......Page 61
Using the Class Keyword......Page 62
Properties......Page 63
Arrays......Page 64
Attributes......Page 65
Comparison Operators......Page 66
Variable Scope......Page 67
Strict Mode......Page 68
Functions......Page 69
Context......Page 71
Immediately-Invoked Functions......Page 72
Namespaces......Page 73
Exceptions......Page 74
Promises......Page 75
Accessing Elements......Page 76
Manipulating Elements......Page 77
Searching......Page 79
Creating Subsets......Page 80
Processing......Page 81
Summary......Page 82
Part II:HTML......Page 83
Content Categories......Page 84
Article......Page 85
Address......Page 86
Explicit Sections......Page 87
Document Headings......Page 89
Header and Footer......Page 90
Planning the Page Layout......Page 91
Details......Page 92
Figure......Page 93
Preformatted......Page 94
Main......Page 95
List......Page 96
Description List......Page 98
Inline Frames......Page 101
Summary......Page 102
Highlighting Text......Page 106
Relevance (mark)......Page 107
Alternative Voice (i)......Page 108
Strikethrough (s)......Page 109
Stylistically Offset (b)......Page 110
Unarticulated (u)......Page 111
Other Semantic Phrasing......Page 112
Code, Sample, Keyboard, and Variable......Page 113
Abbreviations and Definitions......Page 114
Subscripts and Superscripts......Page 115
Edits......Page 116
Quoting......Page 117
Line Break......Page 119
Word Break Opportunity......Page 120
Hyphens......Page 121
Flow Direction......Page 122
Using Isolation......Page 124
Ruby......Page 125
Summary......Page 126
Simple Table......Page 127
Column and Row Headings......Page 128
Column Groups......Page 129
Table Heading and Footer......Page 131
Spanning Cells......Page 132
Summary......Page 137
Anchor......Page 138
Images......Page 139
Pixel Ratio Selection......Page 140
Viewport Selection......Page 141
Image Map......Page 143
Audio......Page 145
Using the Native Controls......Page 146
File Formats......Page 147
Video......Page 148
Tracks......Page 150
HTML5 Plug-Ins......Page 152
Summary......Page 153
Overview......Page 154
Form Action......Page 155
Form Method......Page 156
Textual Form Data......Page 157
Textarea......Page 158
Autofill......Page 159
Review......Page 161
Selection Elements......Page 162
Radio......Page 163
Drop-Down Lists......Page 164
Multi-Select Lists......Page 165
Color......Page 166
File......Page 167
Range......Page 169
Date and Time Data......Page 171
Output Element......Page 176
Meter Element......Page 177
Button Types......Page 179
Organizing a Form......Page 180
Validation......Page 181
Summary......Page 182
Part III:CSS......Page 183
Selector Overview......Page 184
Attribute Selectors......Page 185
Pseudo-Class Selectors......Page 186
Pseudo-Elements......Page 188
Combining Element and Class Selectors......Page 189
Combinator Operators......Page 190
Group Operator......Page 191
Media Attributes......Page 192
Using Media Queries......Page 193
Summary......Page 194
Display......Page 195
Absolute Size......Page 197
Setting Maximum Values......Page 199
Content-Based......Page 200
Min-Content Example......Page 202
Box Sizing......Page 203
Float......Page 205
Clearing Floats......Page 207
Containing Floats......Page 209
Setting Overflow......Page 210
Inline Block......Page 211
Position......Page 212
Relative Positioning......Page 213
Absolute Positioning......Page 215
Z-Index......Page 216
Summary......Page 218
Web Fonts......Page 219
Custom Fonts......Page 220
Font Families......Page 221
Size......Page 222
Weight......Page 223
Kerning......Page 224
Stretch......Page 225
Variant Capitals......Page 226
Feature Settings......Page 227
Shorthand Notation......Page 228
Overflow......Page 229
Quotes......Page 230
Shadow......Page 231
Basic Spacing......Page 232
Handling Whitespace......Page 233
Vertical Alignment......Page 234
Word Wrap......Page 236
Cursor......Page 237
Summary......Page 238
Basic Styles......Page 239
Individual Edges......Page 241
Radius......Page 243
Slicing......Page 245
Allocating......Page 246
Assembling......Page 247
Linear Gradients......Page 250
Radial Gradients......Page 252
Box Shadows......Page 253
Outlines......Page 255
Image Attributes......Page 256
Repeat......Page 257
Clipping......Page 258
Examples......Page 259
Summary......Page 263
Styling Tables......Page 264
Borders......Page 266
Empty Cells......Page 268
Row Borders......Page 269
Padding and Alignment......Page 270
Additional Table Styling......Page 272
Background......Page 273
Zebra Striping......Page 274
Highlighting......Page 275
Display Attribute......Page 277
CSS Table Demonstration......Page 278
Aligning Elements......Page 280
Page Layout......Page 281
Responsive Layout......Page 285
Styling Lists......Page 287
Image......Page 288
Summary......Page 289
Flex Direction......Page 290
Flex Wrap......Page 292
Justification......Page 293
Aligning Items......Page 295
Item Configuration......Page 296
Demonstration......Page 297
Uniform Growth......Page 300
Order......Page 301
Overriding Alignment......Page 302
Vertical Example......Page 303
Summary......Page 304
Keyframes......Page 305
Configuring Animations......Page 306
Animation Attributes......Page 307
Multiple Animations......Page 308
Cubic Bézier......Page 309
Transitions......Page 311
Translation......Page 314
Scale......Page 315
Skew......Page 316
Demonstration......Page 317
3D Transforms......Page 318
Summary......Page 321
Part IV:JavaScript......Page 322
Browser Object Model......Page 323
Screen......Page 324
Location......Page 325
History......Page 326
User Agent......Page 328
Window Object......Page 329
String Substitution......Page 330
Performance......Page 331
Grouping Log Entries......Page 332
Cookies......Page 333
Storage......Page 335
Timers......Page 336
Summary......Page 337
Create a Window......Page 338
Pop-Up Blocker......Page 339
Configuration Parameter......Page 341
Chrome Features......Page 342
Properties......Page 343
Demonstration......Page 344
Modal Dialog Windows......Page 346
Standard Pop-Up Dialogs......Page 347
Custom Modal Dialogs......Page 348
Simple Example......Page 351
Accessing Frames......Page 352
Summary......Page 353
Document Object Model......Page 354
Element Inheritance......Page 355
Basic DOM Manipulation......Page 356
Creating Elements......Page 357
Moving Elements......Page 358
Modifying Elements......Page 359
Using jQuery......Page 361
Selecting Elements......Page 362
Manipulating DOM Elements......Page 363
Summary......Page 365
Enabling Style Sheets......Page 366
Choosing a Style Sheet......Page 368
Alternate Style Sheets......Page 369
Using Style Elements......Page 370
Modifying Rules......Page 372
Modifying Classes......Page 374
Using CSSStyleDeclaration......Page 375
Setting Style Properties......Page 376
Computed Style......Page 377
Summary......Page 378
Initial Example......Page 379
Event Registration......Page 380
Event Propagation......Page 381
Unregistering Events......Page 384
Common Event Properties......Page 385
Exploring Events......Page 386
Summary......Page 387
Part V:Advanced Applications......Page 388
Overview......Page 389
Custom Audio Controls......Page 390
Supporting Play and Pause......Page 391
Supporting Progress and Seek......Page 393
Controlling the Volume......Page 394
Adjusting the Style......Page 395
Changing the Audio Source......Page 396
Custom Video Controls......Page 397
Summary......Page 399
Adding Some Simple Shapes......Page 400
Adding Styles......Page 402
Creating an SVG Image......Page 403
Creating an Interactive Map......Page 404
Using Path Elements......Page 405
Implementing the Initial Map......Page 408
Using Basic Fill Colors......Page 410
Using Gradient Fills......Page 411
Using a Background Image......Page 413
Altering Styles with JavaScript......Page 414
Adding Animation......Page 416
Summary......Page 419
Creating a Chess Board......Page 420
Drawing Rectangles......Page 421
Using Gradients......Page 423
Using Images......Page 424
Adding Simple Animation......Page 431
Using Paths......Page 434
Using Transformations......Page 435
Saving the Context State......Page 437
Drawing the Solar System......Page 438
Applying Scaling......Page 443
Clipping a Canvas......Page 444
Understanding Compositing......Page 445
Summary......Page 449
Handling Events......Page 450
Using Drop Effects......Page 452
Enabling Draggable Elements......Page 453
Creating the Project......Page 454
Drawing the Checkers Board......Page 455
Allowing a Drop......Page 458
Performing the Custom Drop Action......Page 459
Providing Visual Feedback......Page 461
Verifying a Move......Page 464
Promoting to King......Page 468
Moving in Turn......Page 471
Changing the Drag Image......Page 475
Dragging Between Windows......Page 476
Summary......Page 477
Introducing Indexed DB......Page 478
Using Object Stores......Page 479
Defining the Database......Page 480
Processing Asynchronously......Page 481
Creating the Web Project......Page 482
Drawing the Canvas......Page 483
Configuring the Pieces......Page 485
Opening the Database......Page 487
Defining the Database Structure......Page 488
Specifying the Object Key......Page 489
Resetting the Board......Page 490
Drawing the Pieces......Page 491
Using a Cursor......Page 492
Retrieving a Single Object......Page 493
Testing the Application......Page 494
Defining the Moves......Page 496
Making a Move......Page 498
Performing the Update......Page 500
Starting the Animation......Page 501
Tracking the Captured Pieces......Page 502
Summary......Page 504
Surveying Geolocation Technologies......Page 506
Creating the Web Project......Page 507
Using the Geolocation Object......Page 508
Displaying the Location......Page 510
Creating a Bing Maps Account......Page 512
Adding a Map......Page 514
Adding Pushpins......Page 518
Summary......Page 522
Making a Request......Page 523
Handing the Response......Page 524
Summary......Page 525
Appendix B: Drag and Drop Source Code......Page 527
HTML Elements......Page 534
Common......Page 537
Self-Closing Tags......Page 538
Input Types......Page 539
Distance Units – Absolute......Page 541
Time Units......Page 542
CSS Property List......Page 543
Array Methods......Page 548
Window Members......Page 550
Navigator Members......Page 553
Console Methods......Page 554
Element Inheritance......Page 555
Index......Page 559