HTML5 and JavaScript Projects.pdf

(30326 KB) Pobierz
THE
EXPERT’S
VOICE®
IN WEB
DEVELOPMENT
fj
m
S
HTML5
and
JavaScript
Projects
Jeanine
Meyer
1
»3
SS
fsm
sgssa
Ml
m
ADVENTURES
IN
CANVAS,
VIDEO,
AUDIO, GEOLOCATION,
WEB
STORAGE,
AND
MORE
w////555ÿ///////ÿ'
'
Apress
®
For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
friendsof
Apress
Contents at a Glance
About the Author ....................................................................................................... xi
About the Technical Reviewer .................................................................................. xii
Acknowledgments ................................................................................................... xiii
Introduction ............................................................................................................. xiv
■Chapter
1: Building the HTML5 Logo – Drawing on Canvas,
with Scaling, and Semantic Tags ........................................................... 1
■Chapter
2: Family Collage: Manipulating Programmer-defined Objects
on a Canvas.......................................................................................... 19
■Chapter
3: Bouncing Video: Animating and Masking HTML5 Video ....................... 53
■Chapter
4: Map Maker: Combining Google Maps and the Canvas ......................... 89
■Chapter
5: Map Portal: Using Google Maps to Access Your Media ..................... 129
■Chapter
6: Where am I: Using Geolocation, the Google Maps API, and PHP ........ 183
■Chapter
7: Origami Directions: Using Math-Based Line Drawings,
Photographs, and Videos ................................................................... 225
■Chapter
8: Jigsaw Video: Using the Mouse and Touch to Arrange Images ......... 283
■Chapter
9: US States Game: Building a Multiactivity Game ................................. 321
■Chapter
10: Web Site Database: Using PHP and MySQL ...................................... 367
Index ....................................................................................................................... 425
iv
Introduction
This book continues my exploration of HTML5. My approach in developing the projects was to combine
features such as canvas and video; attempt more intricate drawing, making use of mathematics; and
make use of standard programming techniques such as object-oriented programming and separation of
content and logic. I was also interested in building applications combining HTML5 and JavaScript with
other technologies, including Google Maps, geolocation, and server-side programming.
Each chapter in the book is focused on an application or set of related applications. This is because
my experience as a teacher and a learner has shown that concepts and mechanics are best understood in
the context of actual use. The applications start off with drawing the HTML5 official logo. As you will find
out in Chapter 1, the way I developed this application prompted a use of coordinate transformations.
The project in Chapter 2, involving a family collage, was inspired by my growing family and the desire to
teach about object-oriented programming. It is a good application for you to use as a foundation to
create your own, with your own photos and objects of your own invention. Chapter 3, which shows how
to create a bouncing video, was built on other two-dimensional applications I have created, and features
two different ways to combine canvas and video.
Chapters 4, 5, and 6 demonstrate use of the Google Maps API (Application Programming Interface),
a powerful facility that allows you to incorporate access to Google Maps as part of your own projects.
Chapter 4 presents a user interface combining a map and canvas, and includes a custom-designed
cursor and the use of alpha (transparency) in drawing paths. The three applications discussed in
Chapter 5 all demonstrate the use of mapping as a portal to media. The sequence of applications shows
you how to separate content and logic so you can scale up to various applications (e.g., a tour of a region
or a geography quiz with many locations). Chapter 6 features geolocation, technology to determine the
location of your end-user. I combine this with server-side programming using PHP that allows you to
send an e-mail of where you are to someone the end-user chooses.
In Chapter 7, I use the production of directions for origami to show how to combine line drawings,
often using mathematical expressions, and video and photographs. You can use this as a model for your
own set of directions using drawings, video, and images, or let the reading refresh your memory for
topics in algebra and geometry. Chapter 8 was inspired by a project I produced using Adobe Flash, in
which a jigsaw puzzle is transformed into a video. In the project in this chapter, you’ll also learn how to
make this work on an iPod and iPad, including how to incorporate the handling of finger touch events.
Similarly, Chapter 9 was initially inspired by an identify-and-name-the-state game I made using Flash.
This chapter includes the challenge of mixing up the states in the form of a jigsaw puzzle, including the
feature of saving the puzzle-in-progress using localStorage. The resulting educational game presents a
user interface that must handle multiple types of player actions. Chapter 10, the last chapter,
demonstrates use of a database. In this chapter, HTML5 and JavaScript are combined with PHP and
Structured Query Language (SQL), which is the standard language for most databases. The database
featured in the chapter is MySQL. The form validation features of HTML5 along with localStorage
address common requirements of many database applications. The database application also
demonstrates one-way encryption for user passwords and the combination of client-side and server-
side form validation.
xiv
■
INTRODUCTION
Who Is This Book For?
I do believe my explanations are complete, but I am not claiming, as I did for my previous book,
The
Essential Guide to HTML5,
that this book is for the total beginner. This book is for the developer who has
some knowledge of programming and who wants to build (more) substantial applications by combining
basic features and combining JavaScript with other technologies. It also can serve as an idea book for
someone working with programmers to get an understanding of what is possible.
How Is This Book Structured?
This book consists of ten chapters, each organized around an application or type of application. You can
skip around. However, it probably makes sense to read Chapter 4 before 5 or 6. Also, the PHP server-side
language is used in a simple way in Chapter 6 and then more fully in Chapter 10. Other cross-references
are indicated in the text. Each chapter starts with an introduction to the application, with screenshots of
the applications in use. In several cases, the differences between browsers are shown. The chapters
continue with a discussion of the critical requirements, where concepts are introduced before diving
into the technical details. The next sections describe how the requirements are satisfied, with specific
constructs in HTML5, JavaScript, PHP, and/or SQL, and with standard programming techniques. I then
show the application coding line by line with comments. Each chapter ends with instructions and tips
for testing and uploading the application to a server, and a summary of what you learned.
The code (with certain exceptions noted for Chapter 10) is all included as downloads available from
the publisher. In addition, the figures are available as full-color TIFF files. Of course, you will want to use
your own media for the projects shown in Chapters 2, 3, 5, and 8. My media (video, audio, images) is
included with the code and this includes images for the 50 states for the states game in Chapter 9. You
can use the project as a model for a different part of the world or a puzzle based on an image or diagram.
Let’s get started.
xv

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin