CONTENTS

PART I: INTRODUCTION TO HTML5/JS/CSS 5

AL
Chapter 1: Introduction to Mobile Web Development 7

RI
Mobile Web Examples 8
Understanding Native Versus Web Platforms 9

TE
Pros and Cons of Native Versus Web Platforms 9
Web-to-Native Solutions 11
Devices and Operating Systems 12
Design Aesthetics
Dialog Boxes MA
iOS Design Patterns
13
14
14
D
Android Design Patterns 14
Viewports 14
TE

Orientations 16
Fonts 16
GH

Summary 18
Chapter 2: Overview of Mobile Technologies 19
HTML 20
RI

Key HTML5 Features 20

CSS3 28
PY

Key CSS3 Features 29

Javascript 34
CO

jQuery 34
XUI 34
Zepto 35
jQTouch 35
UI Frameworks/Utilities 35
Sencha Touch 35
jQuery Mobile 35
Modernizr 36
iScroll 36
Mustache/JavaScript Templates 37
Summary 38
XII CONTENTS

PART II: APPLICATION SETUP AND INFRASTRUCTURE 39

Chapter 3: Development and Production Setup 41

Development Setup 42
Implementing Local Hosting 43
Setting Up MAMP (For Mac OS X) 43
XAMPP for Windows 45
Using IDEs to Write Your Web App 48
Testing Your Code 51
Setting Up the Production Environment 57
Hosting 57
Infrastructure Setup 58
Managing Bandwidth 59
Summary 59
Chapter 4: Creating the Prototype 61
Using HTML5 to Aid in Structure and Design 62
Using the HTML5 Mobile Boilerplate 62
Application Design 63
Mocking Up Your Pages 64
Settings/About 65
Defining Hash Navigation 73
Pushstate Navigation 75
Summary 76
Chapter 5: Mobile Web Structure 77
Elements to Build 78
Centering Your Content with Viewports 78
Using Full App Mode (iOS Only) 79
Adding Header and Navigation Elements 87
Adding Hash Change Events 89
Transitions 90
Letting Users Scroll Through App Pages 92
Allowing Your Application to Adapt to
Orientation Changes 95
Summary 99
Chapter 6: Creating a Mobile Web Database 101
Elements to Build 102
Databases in HTML5 102
Summary 112
 CONTENTS XIII

PART III: DEVELOPMENT 113

Chapter 7: Interacting with Web SQL 115

Elements to Build 116
Creating the Database and Its Tables 116
Adding Values to the Color Table 118
Building the Manage Wine Page 119
Summary 134
Chapter 8: Geolocation and AJAX 135
Elements to Build 136
Creating the Find Tab 136
Creating the Callback 139
Handling Location with Google Maps 140
Using the Foursquare API to Find Venues 143
Creating the Info Window 147
Building the Refresh Button 150
Summary 152
Chapter 9: Running Queries and Connecting with Social Media 153
Elements to Build 154
Creating the Activity Tab 154
Writing the Query 154
Working with Templates 156
Using Templates to Build the Activity Feed 158
Running Your Script and Displaying
the Results Correctly 161
Creating the Wine Detail Page 162
Creating the Wine Detail Page Structure 162
Building the Wine Detail Page Logic 163
Showing Detail on the Page 166
Connecting to External Sites 167
Building the Template 167
Creating the List View 170
Building the Template for Your Tweets 172
Defining a Custom Function for Relative Timestamps 174
Tweaking the Timestamp 175
Changing the Tweet in the List View 177
Sharing on Twitter and Facebook 178
Summary 179
XIV C O N T E N T S

Chapter 10: Location Storage and Search 181

Elements to Build 182
Creating the Mystorage Function 182
Caching Geolocation and Venues 184
Caching Tweets 188
Saving Details in the Settings Tab 189
Searching Your History 191
Summary 195

PART IV: PERFORMANCE AND PRODUCTION 197

Chapter 11: Testing and Organizing Your code 199

Organizing Your JavaScript Files 200
Setting Up Global.js 201
Creating Database.js 202
Creating Util.js 202
Creating Social.js 203
Creating Geo.js 203
Creating Helper.js 203
Putting It All Together 204
Loading Your JavaScript Files 204
Head.js 205
Manifest Cache 205
Decrease Your Javascript Footprint 206
Mobile Testing Techniques 207
Testing For Corks 207
Summary 209
Chapter 12: Preparing for Launch 211
Debugging Tips 212
Testing Environments 212
Development Tools 215
Touch Vs. Mouse Events 221
Performance Tips 221
Mobile Bandwidth 222
JavaScript Optimizations 224
CSS Optimizations 229
Summary 233
 CONTENTS XV

Appendix A: HTML5, CSS3, and JavaScript Concepts 235

HTML5 236
Markup 236
Geolocation 238
DOM Storage 240
Cache Manifest 242
CSS3 245
Box Shadow 245
Gradients 249
CSS Animation 257
JavaScript 265
Basic Events 265
Touch Events 267
jQuery 271
Summary 277
Index 279