Apress HTML5 and JavaScript Projects (2011).pdf

(8009 KB) Pobierz
HTML5 and JavaScript
Projects
■ ■ ■
Jeanine Meyer
825447264.005.png 825447264.006.png 825447264.007.png 825447264.008.png 825447264.001.png 825447264.002.png 825447264.003.png
HTML5 and JavaScript Projects
Copyright © 2011 by Jeanine Meyer
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-4302-4032-7
ISBN-13 (electronic): 978-1-4302-4033-4
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only
in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of
the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject
to proprietary rights.
President and Publisher: Paul Manning
Lead Editor: Jonathan Gennick
Technical Reviewer: Andrew Zack
Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick,
Jonathan Hassell, Michelle Lowman, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Frank
Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh
Coordinating Editor: Adam Heath
Copy Editor: Damon Larson
Production Support: Patrick Cunningham
Indexer: SPi Global
Artist: SPi Global
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
orders-ny@springer-sbm.com , or visit www.springeronline.com .
For information on translations, please e-mail rights@apress.com , or visit www.apress.com .
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use.
eBook versions and licenses are also available for most titles. For more information, reference our
Special Bulk Sales–eBook Licensing web page at www.apress.com/info/bulksales .
The information in this book is distributed on an “as is” basis, without warranty. Although every
precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have
any liability to any person or entity with respect to any loss or damage caused or alleged to be caused
directly or indirectly by the information contained in this work.
The source code for this book is available to readers at www.apress.com . You will need to answer
questions pertaining to this book in order to successfully download the code.
Contents
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
Introduction ....................................................................................................................... 1
Project History and Critical Requirements .........................................................................4
HTML5, CSS, and JavaScript features ...............................................................................5
Drawing paths on canvas ......................................................................................................................... 5
Placing text on canvas and in the body of a document ............................................................................ 7
Coordinate transformations ...................................................................................................................... 8
Using the range input element ................................................................................................................. 9
Building the application and making it your own ............................................................11
Testing and uploading the application.............................................................................18
Summary ......................................................................................................................... 18
■ Chapter 2: Family Collage: Manipulating Programmer-defined Objects
on a Canvas..........................................................................................19
Introduction ..................................................................................................................... 19
Critical Requirements ......................................................................................................21
v
825447264.004.png
■ CONTENTS
HTML5, CSS, and JavaScript features .............................................................................22
JavaScript objects .................................................................................................................................. 22
User interface ......................................................................................................................................... 31
Saving the canvas to an image .............................................................................................................. 34
Building the application and making it your own ............................................................35
Testing and uploading the application.............................................................................52
Summary ......................................................................................................................... 52
■
Chapter 3: Bouncing Video: Animating and Masking HTML5 Video.......................53
Introduction ..................................................................................................................... 53
Project History and Critical Requirements .......................................................................58
HTML5, CSS, and JavaScript Features ............................................................................59
Definition of the Body and the Window Dimensions............................................................................... 59
Animation ............................................................................................................................................... 61
Video Drawn on Canvas and As a Movable Element .............................................................................. 64
Traveling Mask ....................................................................................................................................... 66
User Interface ......................................................................................................................................... 68
Building the Application and Making It Your Own ...........................................................68
Making the Application Your Own .......................................................................................................... 85
Testing and Uploading the Application ............................................................................86
Summary ......................................................................................................................... 87
■ Chapter 4: Map Maker: Combining Google Maps and the Canvas .........................89
Introduction ..................................................................................................................... 89
Latitude & Longitude and Other Critical Requirements ...................................................98
HTML5, CSS, and JavaScript Features ..........................................................................104
Google Maps API................................................................................................................................... 104
Canvas Graphics ................................................................................................................................... 105
Cursor ................................................................................................................................................... 109
vi
■ CONTENTS
Events ................................................................................................................................................... 109
Calculating Distance and Rounding Values for Display ........................................................................ 113
Building the Application and Making It Your Own .........................................................114
Testing and Uploading the Application ..........................................................................127
Summary ....................................................................................................................... 127
■
Chapter 5: Map Portal: Using Google Maps to Access Your Media .....................129
Introduction ................................................................................................................... 129
Project History and Critical Requirements .....................................................................137
HTML5, CSS, and JavaScript Features ..........................................................................137
Google Maps API for Map Access and Event Handling ......................................................................... 138
Project Content ..................................................................................................................................... 141
Presentation and Removal of Video, Audio and Images ....................................................................... 142
Distances and Tolerances .................................................................................................................... 144
Regular Expressions ............................................................................................................................. 145
External Script File ............................................................................................................................... 146
Dynamic Creation of HTML5 Markup and Positioning .......................................................................... 147
Hint Button............................................................................................................................................ 149
Shuffling ............................................................................................................................................... 149
Building the Application and Making It Your Own .........................................................150
The Mapvideos Application................................................................................................................... 150
The Mapmediabase Application ........................................................................................................... 160
The Quiz Application ............................................................................................................................. 170
Testing and Uploading the Application ..........................................................................182
Summary ....................................................................................................................... 182
■
Chapter 6: Where am I: Using Geolocation, the Google Maps API, and PHP ........183
Introduction ................................................................................................................... 183
Geolocation and Other Critical Requirements................................................................194
vii

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin