Jeanine Meyer - HTML5 and JavaScript Projects, 2nd Edition [2018, EPUB/PDF, ENG]

Примеры страниц

Оглавление

Chapter 1: Building the HTML5 Logo: Drawing on Canvas with Scaling
and Semantic Tags .................................................................................. 1
Introduction ................................................................................................................................... 1
Project History and Critical Requirements .................................................................................... 4
HTML5, CSS, and JavaScript features ........................................................................................... 6
Drawing Paths on Canvas ........................................................................................................ 6
Placing Text on Canvas and in the Body of a Document .......................................................... 9
Coordinate Transformations .................................................................................................. 10
Using the Range Input Element ............................................................................................. 12
Building the Application and Making It Your Own ....................................................................... 14
Testing and Uploading the Application ........................................................................................ 21
Summary .................................................................................................................................... 21
Chapter 2: Family Collage: Manipulating Programmer-Defined
Objects on a Canvas .............................................................................. 23
Introduction ................................................................................................................................. 23
Critical Requirements ................................................................................................................. 26
Autoplay Policy ...................................................................................................................... 26
HTML5, CSS, and JavaScript Features ........................................................................................ 27
JavaScript Objects ................................................................................................................. 27
User Interface ........................................................................................................................ 46
About the Author ..................................................................................................... xi
About the Technical Reviewer ............................................................................... xiii
Acknowledgments ...................................................................................................xv
Introduction ...........................................................................................................
Saving the Canvas to an Image ............................................................................................. 51
Building the Application and Making It Your Own ....................................................................... 52
Testing and Uploading the Application ........................................................................................ 77
Summary .................................................................................................................................... 77
Chapter 3: Bouncing Video: Animating and Masking HTML5 Video ........................ 79
Introduction ................................................................................................................................. 79
Project History and Critical Requirements .................................................................................. 86
HTML5, CSS, and JavaScript Features ........................................................................................ 87
Definition of the Body and the Window Dimensions .............................................................. 87
Animation .............................................................................................................................. 89
Video Drawing Frames on Canvas or As a Movable Element ................................................ 95
Traveling Mask ...................................................................................................................... 98
User Interface ...................................................................................................................... 101
Building the Application and Making It Your Own ..................................................................... 102
Making the Application Your Own ........................................................................................ 115
Testing and Uploading the Application ...................................................................................... 116
Summary .................................................................................................................................. 117
Chapter 4: Map Maker: Combining Google Maps and the Canvas ....................... 119
Introduction ............................................................................................................................... 119
Latitude and Longitude and Other Critical Requirements ......................................................... 131
HTML5, CSS, and JavaScript Features ...................................................................................... 137
The Google Maps API ........................................................................................................... 137
Canvas Graphics .................................................................................................................. 140
Cursor .................................................................................................................................. 144
JavaScript Events ................................................................................................................ 145
Calculating Distance and Rounding Values for Display ....................................................... 150
Building the Application and Making It Your Own ..................................................................... 152
Testing and Uploading the Application ...................................................................................... 165
Summary .................................................................................................................................. 165
Chapter 5: Map Portal: Using Google Maps to Access Your Media ....................... 167
Introduction ............................................................................................................................... 167
Project History and Critical Requirements ................................................................................ 175
HTML5, CSS, and JavaScript Features ...................................................................................... 176
Google Maps API for Map Access and Event Handling ........................................................ 176
Project Content in External File ........................................................................................... 179
Distances and Tolerances .................................................................................................... 181
Regular Expressions Used to Create the HTML ................................................................... 182
Dynamic Creation of HTML5 Markup and Positioning ......................................................... 183
Hint Button ........................................................................................................................... 186
Building the Application and Making It Your Own ..................................................................... 187
The Quiz Application ............................................................................................................ 187
Testing and Uploading the Application ...................................................................................... 201
Summary .................................................................................................................................. 201
Chapter 6: Add to 15 Game ................................................................................... 203
Introduction ............................................................................................................................... 203
General Requirements for a Game ............................................................................................ 205
HTML5, CSS, and JavaScript ..................................................................................................... 206
Styling in CSS ...................................................................................................................... 206
JavaScript Arrays ................................................................................................................ 207
Setting Up the Game ............................................................................................................ 209
Responding to a Player Move .............................................................................................. 209
Generating the Computer Move ........................................................................................... 210
Building the Application and Making It Your Own ..................................................................... 211
Testing and Uploading the Application ...................................................................................... 221
Summary .................................................................................................................................. 221
Chapter 7: Origami Directions: Using Math-Based Line Drawings,
Photographs, and Videos .................................................................... 223
Introduction ............................................................................................................................... 223
Critical Requirements ............................................................................................................... 233
HTML5, CSS, JavaScript Features, and Mathematics ............................................................... 234
Overall Mechanism for Steps .............................................................................................. 234
User Interface ...................................................................................................................... 238
Coordinate Values ................................................................................................................ 238
Utility Functions for Display ................................................................................................. 240
Utility Functions for Calculation ........................................................................................... 243
Step Line Drawing Functions ............................................................................................... 245
Displaying a Photograph ...................................................................................................... 254
Presenting and Removing a Video ....................................................................................... 254
Building the Application and Making It Your Own ..................................................................... 255
Testing and Uploading the Application ...................................................................................... 288
Summary .................................................................................................................................. 289
Chapter 8: Jigsaw Video ....................................................................................... 291
Introduction ............................................................................................................................... 291
Background and Critical Requirements .................................................................................... 297
HTML5, CSS, JavaScript, and Programming Features ............................................................... 297
Creating the Base Picture .................................................................................................... 298
Dynamically Created Elements ............................................................................................ 298
Setting Up the Game ............................................................................................................ 300
Handling Player Actions ....................................................................................................... 301
Calculating If the Puzzle Is Complete .................................................................................. 304
Preparing, Positioning, and Playing the Video and Making It Hidden or Visible ................... 305
Building the Application and Making It Your Own ..................................................................... 306
Testing and Uploading the Application ...................................................................................... 318
Summary .................................................................................................................................. 318
Chapter 9: US States Game: Building a Multiactivity Game .................................. 321
Introduction ............................................................................................................................... 321
Critical Requirements ............................................................................................................... 332
HTML5, CSS, JavaScript Features, Programming Techniques, and Image Processing ............. 333
Acquiring the Image Files for the Pieces and Determining Offsets .................................... 333
Creating Elements Dynamically ........................................................................................... 341
User Interface Overall .......................................................................................................... 342
User Interface for Asking the Player to Click a State ........................................................... 343
User Interface for Asking the Player to Name a State ......................................................... 344
Spreading Out the Pieces .................................................................................................... 346
Setting Up the Jigsaw Puzzle .............................................................................................. 347
Saving and Recreating the State of the Jigsaw Game and Restoring the Original Map ...... 349
Building the Application and Making It Your Own ..................................................................... 353
Testing and Uploading the Application ...................................................................................... 374
Summary .................................................................................................................................. 374
Chapter 10: Responsive Design and Accessibility ................................................ 375
Introduction ............................................................................................................................... 375
Critical Requirements ............................................................................................................... 380
Screen Size and Dimension ................................................................................................. 381
Touch ................................................................................................................................... 381
Screen Reader and Tabs ...................................................................................................... 381
HTML, CSS, and JavaScript Features ........................................................................................ 382
Meta Tags ............................................................................................................................ 382
HTML and CSS Use of Percentages and Auto ...................................................................... 383
CSS @media ........................................................................................................................ 384
The HTML alt Attribute and Semantic Elements .................................................................. 384
HTML tabIndex ..................................................................................................................... 385
JavaScript Use of Width and Height Properties ................................................................... 385
Creating Elements Dynamically ........................................................................................... 386
Choosing From List .............................................................................................................. 387
Mouse Events, Touch Events, and Key Events ..................................................................... 388
Building the Reveal Application and Making It Your Own .......................................................... 390
Testing and Uploading the Reveal Application ..................................................................... 404
Building the Countries/Capitals Quiz and Making It Your Own ............................................ 404
Testing and Uploading the Countries/Capitals Quiz Application ................................................ 414
Testing and Uploading the Jigsaw Turning to Video Application ............................................... 414
Summary .................................................................................................................................. 415
Index ..................................................................................................................... 417