HTML5 : Your Visual Blueprint for Designing Rich Web Pages and Applications

by McDaniel, Adam

• ISBN13: 9780470952221
• ISBN10: 0470952229
• Format: Paperback
• Copyright: 2011-11-08
• Publisher: Visual

Summary

With support from Youtube, CNN, Flickr, Vimeo, the New York Times, and many other major online presences, HTML5 has become the new major standard for designing Web pages. Using a visual approach to demonstrate the HTML5 programming language, HTML5: Your visual blueprint for designing Web pages offers visual learners a solid reference that employs straight forward examples to teach developers to create and design Web pages featuring the latest and best in rich media content. Step-by-step, two-page lessons break topics into bite-sized modules that are easy to digest and the associated Web site contains all the needed code to learn HTML5. This book covers all the necessary topics to get up and running with HTML5 while offering readers a guide to the new possibilities of this new, popular standard.

Author Biography

Adam McDaniel has been designing, developing, modifying, and maintaining computer programs of one language or another since 1993, and he has been an active proponent of HTML since being introduced to the language in 1994.
Since that time, Adam has led a team of developers implementing an eCommerce fulfillment engine for a virtual shopping mall, designed hundreds of corporate websites, and developed front-end HTML and back-end CGI infrastructure for CADVision, at the time one of the largest ISPs in Western Canada. In 2001, Adam moved into the software security sector, working for Hitachi ID Systems for over eight years, designing and implementing software security recommendations for various Fortune 500 companies across the United States and Europe. Soon afterwards, based on his past CGI experience, Adam wrote his first book, Perl and Apache: Your visual blueprint to developing dynamic Web content. Most recently, Adam rejoined the HTML world as the lead OS architect for Jolicloud, a Paris-based company, contributing to its HTML5 Linux operating system.
As Adam is always interested in new technologies and architectures, his other development credits include an open-source offline HTML reader for the Palm OS platform, contributions to the Linux Kernel, and other utility and specialty programs. In 2006, Adam produced the Array.org Netbook Kernel software download and website, allowing users to download an optimized build of the Linux kernel, specific for the Ubuntu Linux distribution.

Table of Contents

Introducing HTML5
Introducing HTML5	p. 2
Understanding HTML5 Web Browsers	p. 6
Understanding Backward Compatibility	p. 8
Understanding the History of Markup Languages	p. 10
Introducing the New and Changed HTML5 Tags and Attributes	p. 12
Understanding Obsolete HTML Tags and Attributes	p. 16
Validate a Website for HTML5 Compliance	p. 18
Validate a Web Browser for HTML5 Support	p. 20
Support HTML5 in Internet Explorer with a Plug-in	p. 22
Getting Started with HTML5 Page Layout
Create an HTML5 Web Page	p. 24
Understanding the Semantic Layout in HTML5	p. 26
Declare Header and Footer Layout Elements	p. 30
Declare a Navigation Layout Element	p. 32
Declare Section and Article Layout Elements	p. 34
Declare Heading and Paragraph Layout Elements	p. 36
Declare Figure and Aside Layout Elements	p. 38
Assign CSS Styles to Layout Elements	p. 40
Provide a Fallback for Outdated Web Browsers	p. 42
Announce HTML5 Support	p. 44
Resize Your Website for Mobile Web Browsers	p. 46
Using New HTML5 User Interface Tags and Attributes
Display a Fixed-Meter Bar	p. 48
Display a Moving Progress Meter	p. 50
Add a Caption to a Figure	p. 52
Highlight Text	p. 54
Specify Safe Line Breaks in Long Words	p. 55
Allow the User to Edit Content	p. 56
Spell-Check User Content	p. 57
Declare an Interactive Summary and Details Layout Element	p. 58
Styling with CSS3
Introducing CSS3	p. 60
Validate a Web Browser for CSS3 Support	p. 62
Select an HTML Element Using Its Class or ID	p. 64
Select an HTML Element Using an Attribute	p. 65
Select an HTML Element Using a Specific Attribute Value	p. 66
Select an HTML Element Using a Partial Attribute Value	p. 68
Select an HTML Element Using the Structural type Pseudo-Class	p. 70
Select an HTML Element Using the Structural child Pseudo-Class	p. 72
Select an HTML Element by Its Sibling Element	p. 74
Select HTML Elements Using a Negating Pseudo-Class	p. 76
Select HTML Elements by User Selection	p. 77
Change an Element's Background Image	p. 78
Customize an Element's Font	p. 80
Format Text Overflow inside an Element	p. 82
Enhancing Your Web Page Visually with CSS3
Round Border Corners	p. 84
Add a Shadow Effect	p. 86
Change an Element's Opacity	p. 88
Apply an Image As an Element Border	p. 90
Customize a Scroll Bar with Images	p. 92
Apply a Color Gradient	p. 96
Transform Object Dimensions	p. 98
Transition between Styles	p. 100
Create Simple Animations	p. 102
Creating Boxes and Columns with CSS3
Introducing the Flexible Box Model	p. 106
Create a Horizontal Flexible Box Model	p. 108
Create a Vertical Flexible Box Model	p. 110
Stretch and Shrink Objects in a Flexible Box	p. 112
Horizontally Pack Objects within a Flexible Box	p. 114
Vertically Align Objects within a Flexible Box	p. 115
Reorder Objects in a Flexible Box	p. 116
Introducing Multi-Column Layouts	p. 118
Create a Multi-Column Layout	p. 120
Add a Ruler and Gap in between Columns	p. 122
Span Objects Horizontally across Columns	p. 124
Creating HTML5 Form Inputs
Create a Number Input Type	p. 126
Create a Telephone Input Type	p. 127
Create an Email Input Type	p. 128
Create a URL Input Type	p. 129
Create a Search Input Type	p. 130
Require a Value in an Input Field	p. 131
Set a Placeholder for an Input Field	p. 132
Auto-Focus on an Input Field	p. 133
Disable Auto-Completion of Input Text	p. 134
Using Speech Input	p. 135
Create a Drop-Down List for Text Input Suggestions	p. 136
Restrict Input Values Using Pattern Matching	p. 138
Create a Date Input Type	p. 140
Create a Range Input Type	p. 142
Create a Color Input Type	p. 144
Link an Input Field to a Specific Form	p. 146
Using jQuery with HTML5
Introducing jQuery	p. 148
Download jQuery	p. 150
Load jQuery	p. 151
Execute jQuery Methods on Elements	p. 152
Manipulate HTML Elements via the DOM	p. 154
Customize Browser Events with jQuery	p. 156
Hide and Show Content with jQuery	p. 158
Add and Remove CSS Classes on Elements with jQuery	p. 160
Send Custom HTML Attribute Data into jQuery	p. 162
Using Scrolling Transitions with jQuery	p. 164
Inspecting and Debugging Your Website
Launch the Chrome Inspector	p. 166
Examine Elements' Structure and Layout	p. 168
Modify HTML and CSS Code in Real Time	p. 170
Examine JavaScript Code	p. 172
Add a JavaScript Breakpoint	p. 174
Step through JavaScript Code	p. 176
Add a Watch Expression	p. 178
Drawing with the HTML5 Canvas
Introducing the HTML5 Canvas	p. 180
Declare a canvas Element	p. 186
Draw Basic Rectangles on the Canvas	p. 188
Draw Paths on the Canvas	p. 190
Draw Text on the Canvas	p. 192
Using Solid Color on the Canvas	p. 194
Using Linear Gradient Colors on the Canvas	p. 196
Using Radial Gradient Colors on the Canvas	p. 198
Draw an Image on the Canvas	p. 200
Scale a Canvas Image	p. 202
Crop a Canvas Image	p. 203
Query Individual Canvas Pixels	p. 204
Track Mouse Activity on the Canvas	p. 206
Translate the X- and Y-Axes	p. 210
Rotate the X- and Y-Axes	p. 212
Create Animations on the Canvas	p. 214
Adding HTML5 Multimedia
Introducing HTML5 Audio and Video	p. 218
Understanding Audio and Video Formats	p. 220
Install a Movie Encoder	p. 222
Reencode Movies with the Miro Video Converter	p. 224
Play Movies with the HTML5 video Element	p. 226
Play Sound with the HTML5 audio Element	p. 228
Control Audio and Video Playback with JavaScript	p. 230
Embed a Movie Player with VideoJS	p. 232
Using Drag and Drop in HTML5
Introducing Drag and Drop in HTML5	p. 234
Specify Objects to Drag	p. 238
Specify a Drop Zone	p. 240
Handle the Drag-and-Drop Events	p. 242
Visually Enhance the Drag-and-Drop Experience	p. 248
Storing Data Using a Client-Side Database
Introducing Client-Side Storage in HTML5	p. 250
Store Data Using the Web Storage API	p. 252
Retrieve Data from the Web Storage API	p. 254
Using the Correct IndexedDB API	p. 256
Open an IndexedDB Database	p. 257
Create a New IndexedDB Object Store	p. 258
Store an Object Using the IndexedDB API	p. 260
Retrieve Objects Using the IndexedDB API	p. 262
Delete an Object Using the IndexedDB API	p. 264
Delete an IndexedDB Object Store	p. 265
Providing Offline Access to Web Applications
Identify Whether the Browser Is Online	p. 266
Identify Whether the Network Is Online	p. 268
Listen for Online and Offline Events	p. 272
Introducing the Application Cache	p. 274
Create an Application Cache Manifest	p. 276
Update the Application Cache	p. 278
Create a "Website Offline" Fallback Page	p. 280
Using Geolocation
Display a Specific Location with Google Maps	p. 282
Understanding Geolocation and GPS Services	p. 284
Request the User's Current Location	p. 286
Display the User's Current Location with Google Maps	p. 288
Running Secondary JavaScript Threads Using Web Workers
Introducing Web Workers	p. 290
Create a Web Worker JavaScript File	p. 294
Link a Web Worker to Your Web Application	p. 296
Launch a Web Worker Event from Your Web Application	p. 298
Falling Back for NonâÇôWeb Worker Browsers	p. 300
Communicating with WebSockets
Introducing WebSockets	p. 302
Create a WebSocket Client	p. 304
Send WebSocket Messages	p. 306
Display WebSocket Messages	p. 308
Interact with a WebSocket Service	p. 310
Displaying Desktop Notifications
Introducing Desktop Notifications for Chrome	p. 312
Request User Permission to Display Desktop Notifications	p. 316
Launch a Desktop Notification Message	p. 318
Customize the Desktop Notification UI	p. 320
Listen for Desktop Notification Events	p. 322
HTML5 Reference
HTML5 Reference	p. 324
HTML Global Attributes	p. 327
HTML Metadata Tags	p. 330
HTML Sectioning Tags	p. 336
HTML Grouping Tags	p. 339
HTML Phrasing Tags	p. 342
HTML Embedding Tags	p. 349
HTML Table Tags	p. 355
HTML Form Tags	p. 358
Index	p. 363
Table of Contents provided by Publisher. All Rights Reserved.