Firtman М. - Programming the Mobile Web [2010, PDF, ENG]

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
1. The Mobile Jungle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Myths of the Mobile Web 1
It’s Not the Mobile Web; It’s Just the Web! 1
You Don’t Need to Do Anything Special About Your Desktop Website 2
One Website Should Work for All Devices (Desktop, Mobile, TV, etc.) 2
Mobile Web Is Really Easy; Just Create a WML File 2
Just Create an HTML File with a Width of 240 Pixels, and You Have a
Mobile Website 3
Native Mobile Applications Will Kill the Mobile Web 3
People Are Not Using Their Mobile Browsers 3
The Mobile Ecosystem 4
What Is a Mobile Device? 4
Mobile Device Categories 6
Mobile Knowledge 11
Display 11
Brands, Models, and Platforms 16
Apple 16
Nokia 18
BlackBerry 22
Samsung 23
Sony Ericsson 24
Motorola 24
LG Mobile 25
HTC 26
Android 26
Windows Mobile 27
Palm 28
Symbian Foundation 30
Other Platforms 31
Technical Information 31
2. Mobile Browsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
The Mobile Browsing Experience 39
Browsing Types 40
Zoom Experience 41
Reflow Engines 42
Direct Versus Proxied Browsers 43
Multipage Experience 43
The WebKit Engine 44
Preinstalled Browsers 45
User-Installable Browsers 51
Browser Overview 53
Mobile Web Eras 54
WAP 1 54
WAP 2.0 56
Mobile Web 2.0 59
3. Architecture and Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Website Architecture 61
Navigation 61
Context 62
Progressive Enhancement 63
Different Version Approach 64
Design and Usability 65
Touch Design Patterns 70
Official UI Guidelines 73
4. Setting Up Your Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Setting Up a Development Environment 75
Working with Code 75
Emulators and Simulators 75
Production Environment 92
Web Hosting 93
Domain 93
Error Management 93
Statistics 94
5. Markups and Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
First, the Old Ones 95
WML 96
Current Standards 102
Politics of the Mobile Web 102
Delivering Markup 104
XHTML Mobile Profile and Basic 109
Available Tags 109
Official Noncompatible Features 111
Creating Our First Compatible Template 111
Markup Additions 112
CSS for Mobile 114
WCSS Extensions 114
Confusion 119
6. Coding Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Heading Structure 121
Icons for the Mobile Web 122
Hey! I’m Mobile Friendly 124
The Document Body 128
Main Structure 129
Images 131
Lists 138
Links 138
Forms 152
Tables 166
Frames 169
Plug-ins and Extensions 170
Adobe Flash 171
Microsoft Silverlight 174
SVG 174
Canvas 178
7. CSS for Mobile Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Where to Insert the CSS 179
Media Filtering 180
Selectors 183
CSS Techniques 185
Reset CSS Files 185
Box Model 187
Text Format 187
Common Patterns 197
Display Properties 197
CSS Sprites 205
Samples and Compatibility 206
CSS Sprites Alternatives 210
WebKit Extensions 211
Text Stroke and Fill 211
Border Image 212
Safari-Only Extensions 217
8. JavaScript Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Supported Technologies 220
Document Object Model 220
Ajax 221
JSON 221
HTML 5 APIs 221
Platform Extensions 222
Coding JavaScript for Mobile Browsers 222
Code Execution 223
JavaScript Mobile Compatibility 225
DOM 241
Scripting Styles 246
Event Handling 247
Touch Gestures 259
9. Ajax, RIA, and HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Ajax Support 267
XML Parsing 268
JSON Parsing 269
JSONP and Lazy Loading 270
Comet Techniques 271
JavaScript Libraries 272
Mobile Libraries 273
WebKit CSS Extensions 275
WebKit Functions 275
Gradients 276
Reflection Effects 277
Masked Images 278
Transitions 279
Animations 281
Transformations 284
Mobile Rich Internet Applications 288
JavaScript UI Libraries 289
JavaScript Mobile UI Patterns 295
HTML 5 301
The Standard 301
Editable Content 303
New Input Types 303
Data Lists 304
The canvas Element 304
Offline Operation 308
Client Storage 311
10. Server-Side Browser Detection and Content Delivery . . . . . . . . . . . . . . . . . . . . . . . . 317
Mobile Detection 317
HTTP 318
Detecting the Context 323
Transcoders 326
Device Libraries 330
Content Delivery 343
Defining MIME Types 343
File Delivery 346
Application and Games Delivery 351
Java ME 353
Flash Lite Content 356
iPhone Applications 357
Multimedia and Streaming 357
Delivering Multimedia Content 358
Embedding Audio and Video 358
Streaming 359
Content Adaptation 361
Adaptation Frameworks 362
Microsoft ASP.NET Mobile Controls 364
mobileOK Pythia 365
Yahoo! Blueprint 365
Mobilizing WordPress and Other CMSs 366
WordPress 367
11. Geolocation and Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Location Techniques 369
Accuracy 369
Indoor Location 369
Client Techniques 370
Server Techniques 371
Asking the User 373
Detecting the Location 375
W3C Geolocation API 375
Google Gears 379
BlackBerry Location API 382
Widget APIs 383
GSMA OneAPI 383
Multiplatform Geolocation API 384
IP Geolocation 386
Showing a Map 387
Google Maps API v3 388
Google Maps Static API 390
Following LBS 391
12. Widgets and Offline Webapps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Mobile Widget Platforms 394
Pros and Cons 394
Architecture 395
Standards 398
Packaging and Configuration Standards 398
Platform Access 399
Platforms 403
Symbian/Nokia 403
iPhone, iPod, and iPad 413
webOS 418
Android 420
Windows Mobile 422
BlackBerry 424
LG Mobile 426
Samsung Mobile 427
JIL 429
Opera Widgets 430
Operator-Based Widget Platforms 431
Widget Design Patterns 431
Multiple Views 432
Layout 432
Input Method 432
One-View Widget 432
Dynamic Application Engine 433
Multiplatform Widgets 433
13. Testing, Debugging, and Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Testing and Debugging 435
Remote Labs 436
Server-Side Debugging 443
Markup Debugging 445
Client-Side Debugging 448
Performance Optimization 451
Measurement 452
Best Practices 453
14. Distribution and Social Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Mobile SEO 457
Spiders and Discoverability 458
How Users Find You 459
User Fidelizing 464
Mobile Web Statistics 466
Google Analytics for Mobile 467
Yahoo! Web Analytics 467
Mobilytics 467
Motally Web Analytics 467
Pion for Mobile Web 468
Mobile Web Advertising 468
Monetizing Your Website 468
AdMob 469
Other Companies 469
Mobile Web Social Features 469
Facebook 469
Share Content 470
Appendix: MIME Types for Mobile Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477