Thông tin tài liệu
www.it-ebooks.info
www.it-ebooks.info
Programming the Mobile Web
Maximiliano Firtman
Beijing
•
Cambridge
•
Farnham
•
Köln
•
Sebastopol
•
Taipei
•
Tokyo
www.it-ebooks.info
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: (800) 998-9938 or corporate@oreilly.com.
Editor: Simon St.Laurent
Production Editor: Loranah Dimant
Copyeditor: Rachel Head
Proofreader: Jennifer Knight
Production Services: Newgen, Inc.
Indexer: Jay Marchand
Cover Designer: Karen Montgomery
Interior Designer: David Futato
Illustrator: Robert Romano
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
www.it-ebooks.info
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
www.it-ebooks.info
www.it-ebooks.info
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
www.it-ebooks.info
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
www.it-ebooks.info
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
www.it-ebooks.info
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
www.it-ebooks.info
[...]... that can trip up even the most experienced desktop web developer Myths of the Mobile Web As the Web has moved onto mobile devices, developers have told themselves a lot of stories about what this means for their work While some of those stories are true, others are misleading, confusing, or even dangerous It’s Not the Mobile Web; It’s Just the Web! I’ve heard this quote many times in the last few years,... later, the mobile web and installable applications are not enemies In fact, they work together very well All of that sounds great: billions of devices, web technologies, multiplatform solutions…where’s the problem? More than half of your desktop web skills and the tips, hacks, and best practices you already know simply do not apply on the mobile web The mobile web demands new usability patterns, new programming. .. devices on the market today The worst part of this story is that these developers think that this is the markup language 2 | Chapter 1: The Mobile Jungle www.it-ebooks.info for the mobile web Wrong! WML development was called mobile web (or WAP) development a couple of years ago, when the first attempt at building a mobile web was made (We will talk more about history in the Mobile Web Eras” on page 54 section... 451 452 453 14 Distribution and Social Web 2.0 457 Mobile SEO Spiders and Discoverability How Users Find You User Fidelizing Mobile Web Statistics Google Analytics for Mobile Yahoo! Web Analytics Mobilytics Motally Web Analytics Pion for Mobile Web Mobile Web Advertising Monetizing Your Website AdMob Other Companies Mobile Web Social Features Facebook Share Content... Creating a book about the mobile web was really a challenge, but it was worth it Enjoy! xx | Preface www.it-ebooks.info CHAPTER 1 The Mobile Jungle Isn’t the mobile web the same web as the desktop one? It does use the same basic architecture and many of the same technologies, though mobile device screens are smaller and bandwidth and processing resources are more constrained There’s a lot more to it... separate them by version number) Creating one HTML file as your mobile website will be a very unsuccessful project In addition, doing so contributes to the belief that mobile web browsing is not useful Native Mobile Applications Will Kill the Mobile Web Every solution has advantages and disadvantages The mobile web has much to offer native applications, as Chapter 12 of this book will demonstrate The mobile. .. too, like the notebooks Where do tablets, like the iPad, fit in? They are not so personal (will you have one tablet per member of the family?), and they may not be so portable But, as they generally use mobile instead of desktop operating systems, they are more mobile than notebooks or netbooks So, I don’t have the answer They are in the middle The Mobile Ecosystem | 5 www.it-ebooks.info Mobile Device... Eras” on page 54 section of Chapter 2.) There are still a small proportion of WML-only devices available in some markets, but WML is definitely not the mobile web today Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile Website This is the other fast-food way to think about the mobile web Today, there are more than 3,000 mobile devices on the market, with almost 30 different browsers... ambitious claim, but it is the truth This book draws upon a mix of experience and very detailed research and testing not available in other books, websites, or research papers about the mobile web Programming the Mobile Web will teach you how to create effective and rich experiences for mobile web browsers, and also how to create offline applications or widgets that will be installed in the devices’ applications... people have mobile devices? 4,600,000,000 (68% of the population) at the beginning of 2010 (U.N Telecommunications Agency, http://www.itu.int) So, one of the reasons why people are not using their mobile browsers may be because of us, the web producers We are not offering them what they need There are other factors, but let’s talk about what we can do from our point of view Opera Mini is a mobile browser . 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. research and testing not
available in other books, websites, or research papers about the mobile web.
Programming the Mobile Web will teach you how to create
Ngày đăng: 22/03/2014, 21:21
Xem thêm: Programming the Mobile Web pptx, Programming the Mobile Web pptx, One Website Should Work for All Devices (Desktop, Mobile, TV, etc.), Chapter 4. Setting Up Your Environment, Chapter 7. CSS for Mobile Browsers, Chapter 9. Ajax, RIA, and HTML 5, Chapter 10. Server-Side Browser Detection and Content Delivery, Chapter 12. Widgets and Offline Webapps, Chapter 13. Testing, Debugging, and Performance, Appendix. MIME Types for Mobile Content