Reusing and optimizing code, including inheritance techniques and performance tips
Taking advantage of the surprising graphics power of regular DOM manipulation (DHTML)
Using the Canvas element for additional graphics power
Creating video games
Using math for creative graphics and animation
Presenting your data in creative ways with the Google Visualizations API and Google Chart Tools
Using jQuery effectively and developing graphically oriented jQuery plug-ins
Creating graphically rich web applications suitable for mobile devices using jQuery Mobile
Using PhoneGap to create native Android applications from your web applications
This fast-paced book will give you a broad kick-start into various graphics techniques, hopefully whetting your appetite for further exploration of the subjects covered.
Experiment and have fun!
Audience and Assumptions
I like jQuery because it speeds up development, and many of the code samples include this library by default. In general, any external libraries and associated files are included from a reliable content delivery network such as Googleâs, thus avoiding the need for you to copy files to your own web space.
Math has been kept to a minimum, although some of the examples use basic vectors and trigonometry.
The book is fast paced, with the first graphics programming examples appearing in ChapterÂ 1.
In the subsequent chapters, I cover a variety of graphics-oriented topics, focusing primarily on subjects that can add impressive visual impact and interactivity to your web applications.
No book about interactive graphics would be complete without a discussion of video games. Weâll explore this subject in depth by developing a full video game application, as well as examining features that are useful for games projects, such as sprites and scrolling.
The topics covered in each chapter can be summarized as follows:
- ChapterÂ 1, Code Reuse and Optimization
- ChapterÂ 2
Shows how regular DOM manipulation (DHTML) can be used for fast-moving graphics. Weâll develop a sprite system (useful for games and other effects) and see how it works within the context of a jQuery plug-in.
- ChapterÂ 3, Scrolling
- ChapterÂ 4, Advanced UI
Includes coverage of the user interface libraries jQuery UI and Ext JS. Weâll explore the differing approaches of the two libraries and their respective suitabilities for various types of applications. In addition to using existing UI libraries, weâll build a 3D carousel from scratch.
Demonstrates how to build fun and playable games without resorting to external plug-ins such as Flash. Subjects covered include collision detection and object handling. Weâll also develop a full retro-style arcade game to illustrate in action the techniques weâve discussed.
- ChapterÂ 6, HTML5 Canvas
Examines the Canvas element in depth, with numerous examplesâincluding how to develop a graphical chat application using Canvas and WebSockets. Canvas topics include an introduction to basic drawing, strokes, fills, gradients, recursive drawing, bitmaps, and animation.
- ChapterÂ 7, Vectors for Games and Simulations
Covers the myriad uses for 2D vectors in graphical applications and games, proving that a little bit of math can go a long way. Code examples include cannon and rocket simulations with realistic movement.
- ChapterÂ 8, Google Visualizations
Explores Google Chart Tools, an expansive resource of data visualization tools that can put an exciting spin on most kinds of data. From bar charts to Google-O-Meter gauges, this chapter covers the implementation of both static and interactive charts and other graphical visualizations in your applications. It includes the crucial topic of formatting your data in the correct way for Chart Tools to use.
- ChapterÂ 9, Reaching the Small Screen with jQuery Mobile
Describes jQuery Mobile, a framework built on top of jQuery to provide a unified user interface to mobile-targeted web applications. jQuery Mobile turns regular HTML pages into an interactive and animated mobile experience. This chapter covers the development of a graphical sliding puzzle game specifically geared to the jQuery UI and mobile devices.
- ChapterÂ 10, Creating Android Apps with PhoneGap
Want to create a native mobile application using your usual web development skills? PhoneGap comes to the rescue. This chapter explains how to install and configure PhoneGap to create native Android applications. After we walk through installation and configuration, weâll convert the sliding puzzle game we developed in ChapterÂ 9 into a native app ready for deployment to mobile devices.
Conventions Used in This Book
The following typographical conventions are used in this book:
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Indicates computer code in a broad sense, including commands, arrays, elements, statements, options, switches, variables, attributes, keys, functions, types, classes, namespaces, methods, modules, properties, parameters, values, objects, events, event handlers, XML tags, HTML tags, macros, the contents of files, and the output from commands.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values determined by context.
This icon signifies a tip, suggestion, or general note.
This icon indicates a warning or caution.
Websites and pages are mentioned in this book to help you locate online information that might be useful. Normally I specify both the address (URL) and the name (title, heading) of a page. Some addresses are relatively complicated, so you can probably locate the pages more easily by using your favorite search engine to find a page by its name, typically by entering it inside quotation marks. This method may also help if you canât find the page by its address; it may have simply moved elsewhere, so the name could still work.
Using Code Examples
This book contains many code snippets and examples, along with several complete and substantial applications. Some of these will be laborious to enter manually, so I would recommend copying the code from the bookâs code repository. Larger portions of code may be interspersed with regular copy text. This helps provide a fluid narrative through the code, rather than requiring you to constantly cross-reference code to text in different locations.
For convenience, any CSS styles used in the examples are embedded within the HTML of the page. This is not necessarily the approach that you should take with production web applications, as external style sheets are recommended. However, within the context of a book, it makes sense to keep things together where possible. You can find the code examples here:
Internet Explorer 8+
The examples were fully tested on Windows machines using XP, Vista, and Windows 7, and partially tested on iOS. In theory, the examples should also work on Linux versions of the supported browsers.
Use of the Canvas tag is limited to browsers that support it, so for Internet Explorer, this means version 9 only (for native support without any additional plug-ins or libraries).
A handful of the examples require a specialized environment to work, such as a mobile development environment (PhoneGap), server language (PHP), or a specific browser. Where this is the case, I cover setting up and configuring the environment.
SafariÂ® Books Online
Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.
With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.
OâReilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from OâReilly and other publishers, sign up for free at http://my.safaribooksonline.com.
How to Contact Us
Please address comments and questions concerning this book to the publisher:
|OâReilly Media, Inc.|
|1005 Gravenstein Highway North|
|Sebastopol, CA 95472|
|(800) 998-9938 (in the United States or Canada)|
|(707) 829-0515 (international or local)|
|(707) 829-0104 (fax)|
To comment or ask technical questions about this book, send email to:
For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
It takes a lot more than an author to get a book to print, so Iâd like to thank the following people:
Simon St.Laurent, who was nothing but enthusiastic, encouraging, and helpful throughout the development of this book.
All those who contributed time and expertise to review the bookâespecially Shelley Powers, who provided lots of insightful comments and suggestions.
My copyeditor, Rachel Monaghan, and others in the production staff who smoothed out the last push to this bookâs completion.
The generous community of developers who freely share their work, hints, and tips to help move the Web forward.
My wife and daughter, Rebecca and Sofia, who were worried that my laptop had become a permanent appendage.