Title Details

Chapter 1: Introduction to Mobile Web Development 7

Mobile Web Examples 8

Understanding Native Versus Web Platforms 9

Pros and Cons of Native Versus Web Platforms 9

Web-to-Native Solutions 11

Devices and Operating Systems 12

Design Aesthetics 13

Dialog Boxes 14

iOS Design Patterns 14

Android Design Patterns 14

Viewports 14

Orientations 16

Fonts 16

Summary 18

Chapter 2: Overview of Mobile Technologies 19

HTML 20

Key HTML5 Features 20

CSS3 28

Key CSS3 Features 29

Javascript 34

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

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

Defi ning 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 Th rough 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

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

Defi ning 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

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

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