Programming the Mobile Web

512 Pages·2010·11.03 MB·English

by  Maximiliano Firtman

Programming the Mobile Web
Maximiliano Firtman
Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo
Download from Wow! eBook <www.wowebook.com>
Programming the Mobile Web
by Maximiliano Firtman
Copyright © 2010 Maximiliano Firtman. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions
are also available for most titles (http://my.safaribooksonline.com). For more information, contact our
corporate/institutional sales department: [phone] or [email protected].
Editor: Simon St.Laurent Indexer: Jay Marchand
Production Editor: Loranah Dimant Cover Designer: Karen Montgomery
Copyeditor: Rachel Head Interior Designer: David Futato
Proofreader: Jennifer Knight Illustrator: Robert Romano
Production Services: Newgen, Inc.
Printing History:
July 2010: First Edition.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’Reilly Media, Inc. Programming the Mobile Web, the image of a jerboa, and related trade dress are
trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a
trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume
no responsibility for errors or omissions, or for damages resulting from the use of the information con-
tained herein.
TM
This book uses RepKover™, a durable and flexible lay-flat binding.
ISBN: 978-0-596-80778-8
[M]
1279131278
Download from Wow! eBook <www.wowebook.com>
For my parents, Stella Maris and Edgardo, my
brother, Sebastián, and my lovely wife, Ani, who
have supported me during all of my projects
Download from Wow! eBook <www.wowebook.com>
Download from Wow! eBook <www.wowebook.com>
Table of Contents
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
v
Download from Wow! eBook <www.wowebook.com>
Market Statistics 32
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
vi | Table of Contents
Download from Wow! eBook <www.wowebook.com>
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
Table of Contents | vii
Download from Wow! eBook <www.wowebook.com>
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
viii | Table of Contents
Download from Wow! eBook <www.wowebook.com>