Table of Contents
Chapter 1 HTML5 Semantic Markup 1
What is HTML5? 1
Browser Support for HTML5 2
HTML5 and Various Working Groups 3
HTML5 Specifications: W3C or WHATWG? 4
What Technologies Are Included in HTML5? 5
Differences between HTML4 Tags and HTML5 Tags 6
Useful Online Tools for HTML5 Development 6
Modernizr 7
Caniuse 7
Designing HTML5 Web Pages 8
Graceful Degradation 8
Progressive Enhancement 8
Responsive Design 9
A Simple HTML5 Web Page 9
New HTML5 Elements 10
Semantic Markup HTML5 Elements 10
Article Versus Section: How Are They Used? 11
Why Use Semantic Markup? 11
A Simple Web Page with Semantic Markup 12
The HTML5 <hgroup> Element 13
Custom Data Attributes in HTML5 14
Summary 15
Chapter 2 Introduction to CSS3 17
CSS3 Support and Browser-Specific Prefixes for CSS3 Properties 18
Quick Overview of CSS3 Features 19
CSS3 Pseudo Classes and Attribute Selection 19
CSS3 Pseudo Classes 20
CSS3 Attribute Selection 20
CSS3 Shadow Effects and Rounded Corners 21
Specifying Colors with RGB and HSL 21
CSS3 and Text Shadow Effects 22
CSS3 and Box Shadow Effects 24
CSS3 and Rounded Corners 25
CSS3 Gradients 26
Linear Gradients 27
Radial Gradients 30
CSS3 2D Transforms 32
Rotate Transforms 35
CSS3 Media Queries 37
Additional Code Samples 39
Summary 39
Chapter 3 SVG Essentials 41
Overview of SVG 41
Basic 2D Shapes in SVG 42
SVG Gradients and the <path> Element 43
SVG <polygon> Element 46
Bezier Curves and Transforms 47
SVG Filters, Shadow Effects, and Text Paths 49
SVG Transforms 52
Other SVG Features 55
SVG Animation 55
Creating 3D Effects in SVG 56
Embedding JavaScript in SVG Documents 56
CSS3 and SVG 57
CSS3 and SVG Bar Charts 57
Similarities and Differences Between SVG and CSS3 57
Toolkits for SVG 58
Summary 59
Chapter 4 Introduction to HTML5 Canvas 61
What is HTML5 Canvas? 61
The HTML5 Canvas Coordinate System 62
Line Segments, Rectangles, Circles, and Shadow Effects 64
HTML5 Canvas Linear Gradients 66
Horizontal, Vertical, and Diagonal Linear Gradients 67
Radial Color Gradients 69
Bezier Curves 71
Rendering Images on Canvas with CSS3 Selectors 71
HTML5 Canvas Transforms 74
Additional Code Samples 76
Odier HTML5 Canvas Toolkits 77
Summary 77
Chapter 5 Media and Hardware Support HTML5 79
The HTML5 <Audio> Element 79
The HTML5 <Video> Element 81
Popcorn.js: HTML5 Media Framework 85
HTML5 <Video> and Web Camera Support 86
Battery API 87
Vibration API (DAP) 88
HTML5 APIs in W3C Working Draft Status (WD) 89
Audio Processing 89
Summary 93
Chapter 6 Storage, Databases, Geolocation, and Offline Apps 95
Using HTML5 Web Storage 95
HTML5 Web Storage versus Indexed DB 96
HTML5 Web Storage versus Cookies 96
HTML5 Web Storage and Security 97
An Example of HTML5 LocalStorage 97
HTML5 Web Databases 103
Using an HTML5 IndexedDB Database 104
Web Database and Mobile Devices 106
Geolocation 106
Obtain a User's Position with getCurrentPosition() 107
Track a User's Position with watchPosition() 108
HTML5 Offline Web Applications 109
The Manifest File 109
Detecting Online and Offline Status 110
Summary 111
Chapter 7 Browser-Server Communication 113
HTML5 Cross-Origin Resource Sharing (CORS) 113
XMLHttpRequest Level 2 (XHR2) 114
Making AJAX Calls Widiout jQuery 114
Making AJAX Calls Widi jQuery 115
AJAX Requests Using XMLHttpRequest Level 2 (XHR2) 117
HTML5 WebSockets 118
A Simple WebSocket Web Page 120
Migrating to HTML5 WebSockets 122
Available WebSockets Servers 123
Using HTML5 Server-Sent Events (SSE) 124
A Comparison of AJAX and SSE 126
What is SPDY? 127
HTML5 Web Intents 128
HTML5 Web Messaging 129
HTML5 Web Notifications 130
Summary 131
Chapter 8 Miscellaneous HTML5 APIs 133
Using HTML5 Microdata 133
HTML5 Drag and Drop (DnD) 134
jQuery and HTML5 Drag and Drop 135
jQuery and HTML5 File APIs 137
HTML5 History APIs 139
Introduction to WebGL 139
Three.js 140
Rendering a Sphere and a Cylinder using a WebGL Renderer 141
The tQuery jQuery Plugin for Three.js 143
Other Graphics Toolkits 144
Performance, Debugging, and Testing Tools 144
Blaze 145
Google PageSpeed 146
Chrome Speed Tracer 146
PageSpeed Insights 146
WEINRE 146
Firebug for Firefox 147
jsconsole 147
Socketbug 147
Adobe Edge Inspect 147
WebKit Remote Debugging 148
Summary 148
Chapter 9 HTML5 Mobile Apps on Android and IOS 149
HTML5/CSS3 and Android Applications 150
SVG and Android Applications 153
HTML5 Canvas and Android Applications 155
Android and HTML5 Canvas Multi-Line Graphs 156
Other Code Samples 160
What is PhoneGap? 160
How Does PhoneGap Work? 160
Creating Android Apps with the PhoneGap Plugin 161
Other Code Samples 164
Working with HTML5, PhoneGap, and iOS 164
Other Code Samples 166
Summary 166
Chapter 10 jQuery Concepts 167
Using jQuery to Find Elements in Web Pages 167
A "Hello World" Web Page with jQuery 168
Querying and Modifying the DOM with jQuery 170
Find and Modify Elements with :first and :last Qualifiers 170
Finding Elements with :eq, :lt, and :gt Qualifiers 171
Finding and Setting Element Attributes 172
Using jQuery to Remove Elements 173
Creating DOM Elements 174
Useful jQuery Code Blocks 176
Handling Click Events in jQuery 177
Chaining jQuery Functions 180
Accelerometer Values with jQuery 180
Summary 183
Appendix A jQuery Concepts (On the companion DVD) A1
What is jQuery? A1
Referencing jQuery Files in HTML5 Web Pages A2
Using jQuery to Find Elements in Web Pages A2
A "Hello World" Web Page with jQuery A3
jQuery Qualifiers versus jQuery Methods A4
Using Web Storage with jQuery A5
Querying and Modifying the DOM with jQuery A7
Find and Modify Elements with :first and :last Qualifiers A7
Finding Elements with :even and :odd Qualifiers A9
Finding Elements with :eq, :lt, and :gt Qualifiers A10
Finding HTML Elements by class or id A11
Finding and Setting Element Attributes A13
Finding Form Elements and Their Attributes A14
Using nth-child() for Finding Elements A14
Using jQuery to Remove Elements A16
Creating DOM Elements A18
Other jQuery Mediods for Inserting DOM Elements A20
Useful jQuery Code Blocks A22
jQuery Element Navigation Methods A22
The next()/prev()/closest()/parent() Methods A23
Other jQuery Navigational Selection Methods A26
Caching Results of jQuery Invocations A28
What about this, $this, and $(this)? A28
Handling Click Events in jQuery A29
jQuery APIs for Traversing Elements A31
Chaining jQuery Functions A34
HTML5 Geolocation with jQuery A37
Accelerometer Values with jQuery A41
Using jQuery Plugins A44
Summary A45
Appendix B Introduction to Android (On the companion DVD) B1
Working with Android Applications B1
Major Features of Android 4.X B1
Download/Installation of Android B3
Creating an Android Virtual Device B3
Key Concepts in Android B4
Android Activities B5
Android Intents B7
Types of Android Intents B7
Android Services B9
Android Broadcast Receivers B10
Android Life Cycle B10
Creating Android Applications B11
The Structure of an Android Application B11
The Main Files in an Android Application B12
On the DVD 185
Index 187
