Smashing Mobile Web Development : Going Mobile with HTML5, CSS3 and JavaScript

by Avola, G.; Raasch, Jon

• ISBN13: 9781118348161
• ISBN10: 1118348168
• Edition: 1st
• Format: Paperback
• Copyright: 2012-11-28
• Publisher: Wiley
• More Book Details
• Purchase Benefits

Summary

Developers, here's what you need to migrate your skills to mobile If you're a devoted reader of Smashing Magazine, you know that all development roads now lead to mobile, so desktop-browser-based web developers need to get up to speed and soon. Start migrating your abilities to mobile with this terrific book. It first helps you make the switch to HTML5 and CSS3, before teaching you how to apply those skills to build websites that work across all mobile devices and mobile browsers. Topics include using wireframes and templates, understanding frameworks such as jQuery Mobile, getting up to speed on newer technologies such as Boilerplate, and more. Essential guide for web developers who want to build websites that work across all mobile devices and mobile browsers Explains the essential tools you'll need for web mobile, including HTML5, CSS3, and JQuery Mobile Brings you up to speed on newer tools such as Boilerplate Keeps your professional skills up to date with today's technology trends By the time you finish Smashing Mobile Web Development, you'll have built your own mobile website that incorporates geolocation, social media, and more.

Table of Contents

PART I: INTRODUCTION TO HTML5/JS/CSS 5

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