Meyer HTML5 and JavaScript Projects

Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications
2. ed
ISBN: 978-1-4842-3864-6
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 432 Seiten

Build on your basic knowledge of HTML5 and JavaScript to create substantial HTML5 applications. Through the many interesting projects you can create in this book, you'll develop HTML5 skills for future projects, and extend the core skills you may have learned with its companion book, The Essential Guide to HTML5. HTML5 and JavaScript Projects is fully updated as a second edition and covers important programming techniques and HTML, CSS, and JavaScript features to help you build projects with images, animation, video, audio and line drawings. You'll learn how to build games, quizzes and other interactive projects; incorporate the use of the Google Maps API and localStorage; and address the challenges of Responsive Design and Accessibility.Each project starts out with a description of the example's operation, often with full-color illustrations.  You'll then review the HTML5 and JavaScript concepts that relate to the project followed by a step-by-step explanation of the programming used. Tables are used to show the relationship of functions and provide comments for each line of code so that you can easily apply the techniques to your own HTML5 projects.?What You'll Learn Enhance your HTML5 and JavaScript programming skills.
Poduce applications combining Canvas drawings, photos, and videos Incorporate Google Maps and geolocation into your projects Build applications requiring persistent data, storing the information locally or on a database on the server Who This Book Is ForDevelopers who have some knowledge of programming and want to build more substantial applications by combining basic features and combining JavaScript with other technologies.

Jeanine Meyer is a Professor at Purchase College/SUNY and past Coordinator of the Mathematics/Computer Science Board of Study.  Before Purchase, she taught at Pace University and worked at IBM Research and other parts of IBM and at other companies. She is the author of 4 books and co-author of 3 more on topics ranging from educational uses of multimedia, programming (two published by Apress), databases and number theory. She earned a PhD in computer science at the Courant Institute at New York University, an MA in mathematics at Columbia, and a SB (the college used the Latin form) in mathematics from the University of Chicago.  She is a member of Phi Beta Kappa, Sigma Xi, Association of Women in Science, Association of Computing Machinery, and a featured reviewer for ACM Computing Reviews. Jeanine is trying but remains a beginner at Spanish and piano.

Autoren/Hrsg.

Meyer, Jeanine

Inhaltsverzeichnis

1;Table of Contents;5
2;About the Author;11
3;About the Technical Reviewer;12
4;Acknowledgments;13
5;Introduction;14
6;Chapter 1: Building the HTML5 Logo: Drawing on Canvas with Scaling and Semantic Tags;17
6.1;Introduction;17
6.2;Project History and Critical Requirements;20
6.3;HTML5, CSS, and JavaScript features;22
6.3.1;Drawing Paths on Canvas;22
6.3.2;Placing Text on Canvas and in the Body of a Document;25
6.3.3;Coordinate Transformations;26
6.3.4;Using the Range Input Element;28
6.4;Building the Application and Making It Your Own;30
6.5;Testing and Uploading the Application;37
6.6;Summary;37
7;Chapter 2: Family Collage: Manipulating Programmer-Defined Objects on a Canvas;38
7.1;Introduction;38
7.2;Critical Requirements;41
7.2.1;Autoplay Policy;41
7.3;HTML5, CSS, and JavaScript Features;42
7.3.1;JavaScript Objects;42
7.3.1.1;External File of Specifications;44
7.3.1.2;Rect;45
7.3.1.3;Oval;46
7.3.1.4;Picture;47
7.3.1.5;Videoblock;47
7.3.1.6;Heart;48
7.3.1.7;Creating the Elements;50
7.3.1.8;Drawing;52
7.3.1.9;Checking for a Mouse Over Object;57
7.3.2;User Inter face;61
7.3.3;Saving the Canvas to an Image;66
7.4;Building the Application and Making It Your Own;67
7.5;Testing and Uploading the Application;92
7.6;Summary;92
8;Chapter 3: Bouncing Video: Animating and Masking HTML5 Video;93
8.1;Introduction;93
8.2;Project History and Critical Requirements;100
8.3;HTML5, CSS, and JavaScript Features;101
8.3.1;Definition of the Body and the Window Dimensions;101
8.3.2;Animation;103
8.3.3;Video Drawing Frames on Canvas or As a Movable Element;109
8.3.3.1;Video Drawn on Canvas;109
8.3.3.2;Movable Video Element;111
8.3.4;Traveling Mask;112
8.3.5;User Interface;115
8.4;Building the Application and Making It Your Own;116
8.4.1;Making the Application Your Own;129
8.5;Testing and Uploading the Application;130
8.6;Summary;131
9;Chapter 4: Map Maker: Combining Google Maps and the  Canvas;132
9.1;Introduction;132
9.2;Latitude and Longitude and Other Critical Requirements;144
9.3;HTML5, CSS, and JavaScript Features;150
9.3.1;The Google Maps API;150
9.3.2;Canvas Graphics;153
9.3.3;Cursor;157
9.3.4;JavaScript Events;158
9.3.5;Calculating Distance and Rounding Values for Display;163
9.4;Building the Application and Making It Your Own;165
9.5;Testing and Uploading the Application;178
9.6;Summary;178
10;Chapter 5: Map Portal: Using Google Maps to Access Your Media;179
10.1;Introduction;179
10.2;Project History and Critical Requirements;187
10.3;HTML5, CSS, and JavaScript Features;188
10.3.1;Google Maps API for Map Access and Event Handling;188
10.3.2;Project Content in External File;191
10.3.3;Distances and Tolerances;193
10.3.4;Regular Expressions Used to Create the HTML;194
10.3.5;Dynamic Creation of HTML5 Markup and Positioning;195
10.3.6;Hint Button;198
10.4;Building the Application and Making It Your Own;199
10.4.1;The Quiz Application;199
10.5;Testing and Uploading the Application;213
10.6;Summary;213
11;Chapter 6: Add to 15 Game;214
11.1;Introduction;214
11.2;General Requirements for a Game;216
11.3;HTML5, CSS, and JavaScript;217
11.3.1;Styling in CSS;217
11.3.2;JavaScript Arrays;218
11.3.3;Setting Up the Game;220
11.3.4;Responding to a Player Move;220
11.3.5;Generating the Computer Move;221
11.4;Building the Application and Making It Your Own;222
11.5;Testing and Uploading the Application;232
11.6;Summary;232
12;Chapter 7: Origami Directions: Using Math-Based Line Drawings, Photographs, and Videos;233
12.1;Introduction;233
12.2;Critical Requirements;243
12.3;HTML5, CSS, JavaScript Features, and Mathematics;244
12.3.1;Overall Mechanism for Steps;244
12.3.2;User Interface;248
12.3.3;Coordinate Values;248
12.3.4;Utility Functions for Display;250
12.3.5;Utility Functions for Calculation;253
12.3.6;Step Line Drawing Functions;255
12.3.7;Displaying a Photograph;264
12.3.8;Presenting and Removing a Video;264
12.4;Building the Application and Making It Your Own;265
12.5;Testing and Uploading the Application;298
12.6;Summary;299
13;Chapter 8: Jigsaw Video;300
13.1;Introduction;300
13.2;Background and Critical Requirements;306
13.3;HTML5, CSS, JavaScript, and Programming Features;306
13.3.1;Creating the Base Picture;307
13.3.2;Dynamically Created Elements;307
13.3.3;Setting Up the Game;309
13.3.4;Handling Player Actions;310
13.3.4.1;Using Mouse Events;311
13.3.5;Calculating If the Puzzle Is Complete;313
13.3.6;Preparing, Positioning, and Playing the Video and Making It Hidden or Visible;314
13.4;Building the Application and Making It Your Own;315
13.5;Testing and Uploading the Application;327
13.6;Summary;327
14;Chapter 9: US States Game: Building a Multiactivity Game;329
14.1;Introduction;329
14.2;Critical Requirements;340
14.3;HTML5, CSS, JavaScript Features, Programming Techniques, and Image Processing;341
14.3.1;Acquiring the Image Files for the Pieces and  Determining Offsets;341
14.3.2;Creating Elements Dynamically;349
14.3.3;User Interface Overall;350
14.3.4;User Interface for Asking the Player to Click a State;351
14.3.5;User Interface for Asking the Player to Name a State;352
14.3.6;Spreading Out the Pieces;354
14.3.7;Setting Up the Jigsaw Puzzle;355
14.3.8;Saving and Recreating the State of the Jigsaw Game and Restoring the Original Map;357
14.4;Building the Application and Making It Your Own;361
14.5;Testing and Uploading the Application;382
14.6;Summary;382
15;Chapter 10: Responsive Design and Accessibility;383
15.1;Introduction;383
15.2;Critical Requirements;388
15.2.1;Screen Size and Dimension;389
15.2.2;Touch;389
15.2.3;Screen Reader and Tabs;389
15.3;HTML, CSS, and JavaScript Features;390
15.3.1;Meta Tags;390
15.3.2;HTML and CSS Use of Percentages and Auto;391
15.3.3;CSS @media;392
15.3.4;The HTML alt Attribute and Semantic Elements;392
15.3.5;HTML tabIndex;393
15.3.6;JavaScript Use of Width and Height Properties;393
15.3.7;Creating Elements Dynamically;394
15.3.8;Choosing From List;395
15.3.9;Mouse Events, Touch Events, and Key Events;396
15.4;Building the Reveal Application and Making It Your Own;398
15.4.1;Testing and Uploading the Reveal Application;412
15.4.2;Building the Countries/Capitals Quiz and Making It Your Own;412
15.5;Testing and Uploading the Countries/Capitals Quiz Application;422
15.6;Testing and Uploading the Jigsaw Turning to Video Application;422
15.7;Summary;423
16;Index;424