Smashing Mobile Web Development
1st Edition
Published on 28. November 2012
Book
Paperback/Softback
312 pages
978-1-118-34816-1 (ISBN)
Description
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.
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.
More details
Content
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
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