HTML5 and JavaScript Projects (Expert's Voice in Web Development)

HTML5 and JavaScript Projects shows you how to build on your basic knowledge of HTML5 and JavaScript to create substantial HTML5 applications. Through the many interesting projects you can build in this book, you'll build your HTML5 skills for your future projects, and extend the core skills you may have learned with its companion book, The Essential Guide to HTML5. HTML5 and JavaScript Projects covers the most important areas of HTML5 that you'll want to know how to program, including: video, and audio, databases, localStorage, and geolocation. The projects have been carefully selected to help you build your HTML5 and JavaScript programming skills. You'll build games and applications, such as video jigsaws, recipe archives, paper dolls, and many more captivating examples. Each project starts out with an introduction to the basic HTML5 and JavaScript concepts covered and then includes specific, appealing examples explained step-by-step. You'll also discover line-by-line explanations for every single line of code—we'll make sure that you can fully understand what each line of code does, so that you can easily take that understanding and apply it to your own HTML5 projects. HTML5 and JavaScript Projects: Shows how to produce applications combining Canvas drawings, photos, and videos Explains how to incorporate Google Maps and geolocation into your projects Reveals how to build applications requiring persistent data, storing the information locally or on a database on the server What you’ll learn How to create line drawings using mathematical operations for defining coordinate positions How to incorporate Google Maps and geolocation to determine the location of the user How to use locations as triggers for playing videos using JavaScript How to combine the canvas with geolocation maps using HTML5 and JavaScript Use HTML5 Audio for event sounds and background music How to manipulate, store and retrieve complex information using localStorage How to build applications involving JavaScript and the HTML5 APIs Who this book is for HTML5 and JavaScript Projects is for the developer who wants and needs to move to the next level of Web development, including more sophisticated programming and the design and construction of sets of applications. This book targets people who want to go beyond the basics of HTML5 and, for example, incorporate maps using the Google Maps API into their work or build projects that require persistent data on the client computer (localStorage). The book will be helpful for people working in teams, where considerable effort is required to create, access and manage information. Table of Contents Building the HTML5 Logo—Drawing on Canvas, with Scaling, and Semantic Tags Paper Dolls—Accurately Positioning Objects on the Canvas Bouncing Video—Animating and Masking HTML5 video Map Maker—Combining Google Maps and Canvas Deep-Linking—Creating Journeys Through Video, Images and Maps Where Am I?—Building Games with the Geolocation API Accurate Origami—Using Math to Draw Precise Paper Folding on the Canvas Video Jigsaw—Moving and Checking HTML5 Elements Using JavaScript Picture Puzzle—Storing Game Scores and Choices Using the LocalStorage API Bookmark Application—Using Form Validation and Databases Cover......Page 435 Contents at a Glance......Page 3 Contents......Page 438 About the Author......Page 444 About the Technical Reviewer......Page 445 Acknowledgments......Page 446 Introduction......Page 4 How Is This Book Structured?......Page 5 Introduction......Page 6 Project History and Critical Requirements......Page 9 Drawing paths on canvas......Page 10 Placing text on canvas and in the body of a document......Page 12 Coordinate transformations......Page 13 Using the range input element......Page 14 Building the application and making it your own......Page 16 Summary......Page 23 Introduction......Page 24 Critical Requirements......Page 26 JavaScript objects......Page 27 User interface......Page 36 Saving the canvas to an image......Page 39 Building the application and making it your own......Page 40 Summary......Page 57 Introduction......Page 58 Project History and Critical Requirements......Page 63 Definition of the Body and the Window Dimensions......Page 64 Animation......Page 66 Video Drawn on Canvas and As a Movable Element......Page 69 Traveling Mask......Page 71 Building the Application and Making It Your Own......Page 73 Making the Application Your Own......Page 90 Testing and Uploading the Application......Page 91 Summary......Page 92 Introduction......Page 93 Latitude & Longitude and Other Critical Requirements......Page 102 Google Maps API......Page 108 Canvas Graphics......Page 109 Events......Page 113 Calculating Distance and Rounding Values for Display......Page 117 Building the Application and Making It Your Own......Page 118 Summary......Page 131 Introduction......Page 133 HTML5, CSS, and JavaScript Features......Page 141 Google Maps API for Map Access and Event Handling......Page 142 Project Content......Page 145 Presentation and Removal of Video, Audio and Images......Page 146 Distances and Tolerances......Page 148 Regular Expressions......Page 149 External Script File......Page 150 Dynamic Creation of HTML5 Markup and Positioning......Page 151 Shuffling......Page 153 The Mapvideos Application......Page 154 The Mapmediabase Application......Page 164 The Quiz Application......Page 174 Summary......Page 186 Introduction......Page 187 Geolocation and Other Critical Requirements......Page 198 Geolocation......Page 200 Reverse Geocoding......Page 204 Clicking the Map......Page 206 Checking E-mail Address Input and Invoking PHP to send e-mail......Page 207 A Brief Introduction to the PHP Language......Page 208 Building the Application and Making It Your Own......Page 209 Testing and Uploading the Application......Page 227 Summary......Page 228 Introduction......Page 229 Critical Requirements......Page 236 Overall Mechanism for Steps......Page 237 User Interface......Page 239 Coordinate Values......Page 240 Utility Functions for Display......Page 241 Utility Functions for Calculation......Page 243 Step Line Drawing Functions......Page 244 Presenting and Removing a Video......Page 251 Building the Application and Making It Your Own......Page 252 Summary......Page 286 Introduction......Page 287 Background and Critical Requirements......Page 297 Acquiring the Images and Data for the Pieces......Page 298 Dynamically Created Elements......Page 299 Handling Mouse and Finger Touch Events......Page 301 Calculating If the Puzzle Is Complete......Page 307 Building the Application and Making It Your Own......Page 309 Summary......Page 323 Introduction......Page 325 Acquiring the Image Files for the Pieces and Determining Offsets......Page 333 Creating Elements Dynamically......Page 339 User Interface for Asking the Player to Click a State......Page 340 User Interface for Asking the Player to Name a State......Page 341 Spreading Out the Pieces......Page 342 Setting Up the Jigsaw Puzzle......Page 343 Saving and Recreating the State of the Jigsaw Game and Restoring the Original Map......Page 344 Building the Application and Making It Your Own......Page 347 Summary......Page 368 Introduction......Page 370 Critical Requirements......Page 379 Relational Databases......Page 380 SQL......Page 382 Local Storage......Page 384 Client Side vs. Server Side for Input Validation......Page 385 Middleware: PHP......Page 386 Building the Application and Making It Your Own......Page 393 Testing and Uploading the Application......Page 425 Summary......Page 426 D......Page 427 G......Page 428 J......Page 430 M. N......Page 431 O......Page 432 S......Page 433 X, Y, Z......Page 434

HTML5and JavaScript Projectsshows you how to build on your basic knowledge of HTML5 and JavaScript to create substantial HTML5 applications. Through the many interesting projects you can build in this book, you'll build your HTML5 skills for your future projects, and extend the core skills you may have learned with its companion book, The Essential Guide to HTML5.

HTML5 and JavaScript Projects covers the most important areas of HTML5 that you'll want to know how to program, including:video, and audio, databases, localStorage, and geolocation. The projects have been carefully selected to help you build your HTML5 and JavaScript programming skills. You'll build games and applications, such as video jigsaws, recipe archives, paper dolls, and many more captivating examples.

Each project starts out with an introduction to the basic HTML5 and JavaScript concepts covered and then includes specific, appealing examples explained step-by-step. You'll also discover line-by-line explanationsfor every single line of code—we'll make sure that you can fully understand what each line of code does, so that you can easily take that understanding and apply it to your own HTML5 projects.

HTML5 and JavaScript Projects:

• Shows how to produce applications combining Canvas drawings, photos, and videos
• Explains how to incorporate Google Maps and geolocation into your projects
• Reveals how to build applications requiring persistent data, storing the information locally or on a database on the server

What you’ll learn

• How to create line drawings using mathematical operations for defining coordinate positions
• How to incorporate Google Maps and geolocation to determine the location of the user
• How to use locations as triggers for playing videos using JavaScript
• How to combine the canvas with geolocation maps using HTML5 and JavaScript
• Use HTML5 Audio for event sounds and background music
• How to manipulate, store and retrieve complex information using localStorage
• How to build applications involving JavaScript and the HTML5 APIs

Who this book is for

HTML5 and JavaScriptProjects is for the developer who wants and needs to move to the next level of Web development, including more sophisticated programming and the design and construction of sets of applications. This book targets people who want to go beyond the basics ofHTML5 and, for example, incorporate maps using the Google Maps API into their work or build projects that require persistent data on the client computer (localStorage). The book will be helpful for people working in teams, where considerable effort is required to create, access and manage information.

Table of Contents

1. Building the HTML5 Logo—Drawing on Canvas, with Scaling, and Semantic Tags
2. Paper Dolls—Accurately Positioning Objects on the Canvas
3. Bouncing Video—Animating and Masking HTML5video
4. Map Maker—Combining Google Maps and Canvas
5. Deep-Linking—Creating Journeys Through Video, Images and Maps
6. WhereAm I?—Building Games with the Geolocation API
7. Accurate Origami—Using Math to Draw Precise Paper Foldingon theCanvas
8. Video Jigsaw—Moving and Checking HTML5 Elements Using JavaScript
9. Picture Puzzle—Storing Game Scores and Choices Using the LocalStorage API
10. Bookmark Application—Using Form Validation and Databases

Annotation HTML5and JavaScript Projectsshows you how to build on your basic knowledge of HTML5 and JavaScript to create substantial HTML5 applications. Through the many interesting projects you can build in this book, you'll build your HTML5 skills for your future projects, and extend the core skills you may have learned with its companion book, The Essential Guide to HTML5. HTML5 and JavaScript Projectscovers the most important areas of HTML5 that you'll want to know how to program, including:video, and audio, databases, localStorage, and geolocation. The projects have been carefully selected to help you build your HTML5 and JavaScript programming skills. You'll build games and applications, such as video jigsaws, recipe archives, paper dolls, and many more captivating examples. Each project starts out with an introduction to the basic HTML5 and JavaScript concepts covered and then includes specific, appealing examples explained step-by-step. You'll also discover line-by-line explanationsfor every single line of codewe'll make sure that you can fully understand what each line of code does, so that you can easily take that understanding and apply it to your own HTML5 projects. HTML5 and JavaScript Projects:Shows how to produce applications combining Canvas drawings, photos, and videosExplains how to incorporate Google Maps and geolocation into your projectsReveals how to build applications requiring persistent data, storing the information locally or on a database on the serverWhat youll learnHow to create line drawings using mathematical operations for defining coordinate positionsHow to incorporate Google Maps and geolocation to determine the location of the userHow to use locations as triggers for playing videos using JavaScriptHow to combine the canvas with geolocation maps using HTML5 and JavaScriptUse HTML5 Audio for event sounds and background musicHow to manipulate, store and retrieve complex information using localStorageHow to build applications involving JavaScript and the HTML5 APIsWho this book is forHTML5 and JavaScriptProjectsis for the developer who wants and needs to move to the next level of Web development, including more sophisticated programming and the design and construction of sets of applications. This book targets people who want to go beyond the basics ofHTML5 and, for example, incorporate maps using the Google Maps API into their work or build projects that require persistent data on the client computer (localStorage). The book will be helpful for people working in teams, where considerable effort is required to create, access and manage information. Table of ContentsBuilding the HTML5 LogoDrawing on Canvas, with Scaling, and Semantic TagsPaper DollsAccurately Positioning Objects on the CanvasBouncing VideoAnimating and Masking HTML5videoMap MakerCombining Google Maps and CanvasDeep-LinkingCreating Journeys Through Video, Images and MapsWhereAm I?Building Games with the Geolocation APIAccurate OrigamiUsing Math to Draw Precise Paper Foldingon theCanvasVideo JigsawMoving and Checking HTML5 Elements Using JavaScriptPicture PuzzleStoring Game Scores and Choices Using the LocalStorage APIBookmark ApplicationUsing Form Validation and Databases