Frederick / Lal Beginning Smartphone Web Development

Building JavaScript, CSS, HTML and Ajax-based Applications for iPhone, Android, Palm Pre, BlackBerry, Windows Mobile and Nokia S60
1. ed
ISBN: 978-1-4302-2621-5
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 368 Seiten

Today's Web 2.0 applications (think Facebook and Twitter) go far beyond the confines of the desktop and are widely used on mobile devices. The mobile Web has become incredibly popular given the success of the iPhone and BlackBerry, the importance of Windows Mobile, and the emergence of Palm Pre (and its webOS platform). At Apress, we are fortunate to have Gail Frederick of the well-known training site Learn the Mobile Web offer her expert advice in Beginning Smartphone Web Development. In this book, Gail teaches the web standards and fundamentals specific to smartphones and other feature-driven mobile phones and devices. Shows you how to build interactive mobile web sites using web technologies optimized for browsers in smartphones Details markup fundamentals, design principles, content adaptation, usability, and interoperability Explores cross-platform standards and best practices for the mobile Web authored by the W3C, dotMobi, and similar organizations Dives deeps into the feature sets of the most popular mobile browsers, including WebKit, Chrome, Palm Pre webOS, Pocket IE, Opera Mobile, and Skyfire By the end of this book, you'll have the training, tools, and techniques for creating robust mobile web experiences on any of these platforms for your favorite smartphone or other mobile device.

Gail Rahn Frederick is an expert web developer and software architect in the mobile industry. Her products target 500+ device models and have been deployed at 10+ mobile operators in North America and Europe. She advocates standards-based mobile development techniques as a blogger and conference presenter. Gail teaches standards-based mobile web development in Portland, Oregon. Her students learn mobile markup languages, mobile design and usability, content adaptation, best practices, advanced web development for smartphones and defensive programming for the mobile ecosystem.

Autoren/Hrsg.

Frederick, Gail

Lal, Rajesh

Inhaltsverzeichnis

1;Dadication Page;4
2;Table of Contents;6
3;About the Authors;11
4;About the Technical Reviewers;12
5;Acknowledgments;13
6;Introduction;14
7;Part I: Getting Started with Mobile Web Development;15
7.1;Chapter 1: Untroduction to Mobile Web Development;16
7.1.1;Mobile Web vs. Desktop Web;17
7.1.2;Mobile Markup Languages;19
7.1.2.1;HTML and XHTML;20
7.1.2.2;XHTML Mobile Profile;20
7.1.2.3;WML;21
7.1.2.4;Other Mobile Markup Languages;22
7.1.2.4.1;HDML;22
7.1.2.4.2;CHTML;23
7.1.2.4.3;XHTML Basic;23
7.1.3;Mobile Scripting Languages;23
7.1.4;Mobile Style Sheets;24
7.1.5;Mobile Industry Groups and Standards Bodies;24
7.1.6;The Mobile Ecosystem;25
7.1.7;Code Samples;26
7.1.8;Summary;26
7.2;Chapter 2: Set Up Your Mobile Web Development Environment;27
7.2.1;Recommended IDEs;28
7.2.2;Mobile MIME Types;31
7.2.3;Web Server Configuration;33
7.2.3.1;Apache;33
7.2.3.2;Microsoft IIS;33
7.2.3.3;Nginx;34
7.2.4;Mobile Web Browsers on the Desktop;34
7.2.4.1;Firefox and Mobile Add-Ons;35
7.2.4.1.1;XHTML Mobile Profile;36
7.2.4.1.2;wmlbrowser;37
7.2.4.1.3;User Agent Switcher;37
7.2.4.1.4;Modify Headers;39
7.2.4.1.5;Live HTTP Headers;41
7.2.4.1.6;Small Screen Renderer;43
7.2.4.1.7;Firebug;45
7.2.4.2;Mobile Browser Emulators;46
7.2.4.3;Actual Mobile Devices;51
7.2.5;Other Development Tools;51
7.2.5.1;File Comparison;51
7.2.5.2;Source Code Control;52
7.2.6;Summary;55
8;Part II: The Syntax of the Mobile Web;56
8.1;Chapter 3: Mobile Markup Languages;57
8.1.1;Selecting a Mobile Markup Language;57
8.1.2;XHTML;58
8.1.2.1;Why Not HTML?;59
8.1.2.2;HTML 5;59
8.1.3;XHTML-MP;61
8.1.3.1;Example XHTML-MP Document;61
8.1.3.2;DTDs for XHTML-MP;62
8.1.3.3;XHTML Elements Not Supported in XHTML-MP;62
8.1.3.4;Updated and Mobile-Specific Features in XHTML-MP;63
8.1.3.4.1;URI Schemes;63
8.1.3.4.2;Forms;64
8.1.3.4.3;Tables;66
8.1.3.4.4;Links and Access Keys;67
8.1.3.4.5;Embedded Objects;69
8.1.3.5;Common Implementation Bugs;69
8.1.3.5.1;XHTML-MP 1.1;70
8.1.3.5.2;XHTML-MP 1.2;71
8.1.3.5.3;Best Practices for XHTML-MP Web Development;71
8.1.4;CSS for Mobile Devices;71
8.1.4.1;CSS2;72
8.1.4.2;Wireless CSS and CSS Mobile Profile;72
8.1.4.3;Determining CSS Support on a Mobile Device;78
8.1.4.4;Best Practices for Mobile CSS;78
8.1.4.5;External, Internal, and Inline Stylesheets;79
8.1.4.6;Media Selectors and Media-Dependent Style Sheets;80
8.1.5;WML;81
8.1.5.1;Tag Hierarchy;84
8.1.5.2;Special Characters;84
8.1.5.3;Header and Metadata;85
8.1.5.4;Text Formatting;86
8.1.5.5;Links;88
8.1.5.5.1; Tag;89
8.1.5.5.2; Tag;89
8.1.5.5.3; Tag;91
8.1.5.6;Images;93
8.1.5.7;Tables;94
8.1.5.8;Timers;96
8.1.5.9;Variables;97
8.1.5.10;User Input;100
8.1.5.11;Other WML Language Features;105
8.1.6;Summary;106
8.2;Chapter 4: Device Awareness and Content Adaptation;107
8.2.1;Device Awareness;108
8.2.1.1;Using HTTP Request Headers to Identify Mobile Devices;108
8.2.1.2;Using a Device Database to Obtain Device Capabilities;109
8.2.1.2.1;WURFL Device Database;110
8.2.1.2.1.1;Common WURFL Device Characteristics;115
8.2.1.2.1.2;Code Samples Using the WURFL API;117
8.2.1.2.1.3;Contributing Device Data to WURFL;120
8.2.1.2.2;DeviceAtlas Device Database;121
8.2.1.2.2.1;Common DeviceAtlas Device Characteristics;125
8.2.1.2.2.2;Code Samples Using the DeviceAtlas API;126
8.2.1.2.2.3;Contributing Device Data to DeviceAtlas;129
8.2.2;Content Adaptation;130
8.2.2.1;Creating Device Groups;132
8.2.2.2;Choosing Adaptation Points;134
8.2.2.3;Writing Content Adaptation Rules for Device Groups;135
8.2.2.4;Implementing Content Adaptation;136
8.2.2.5;Content Adaptation on the Mobile Web;139
8.2.3;Summary;144
8.3;Chapter 5: Adding Interactivity with JavaScript and AJAX;145
8.3.1;Iterative Development Approach;146
8.3.2;JavaScript in Mobile Browsers;146
8.3.2.1;ECMAScript Mobile Profile;147
8.3.2.2;Embedding JavaScript in a Markup Document;148
8.3.2.2.1;Supported JavaScript Events in XHTML-MP 1.1;149
8.3.2.3;JavaScript Fragmentation in Mobile Browser;152
8.3.2.4;Examples of Mobile JavaScript;154
8.3.3;AJAX in Mobile Browsers;158
8.3.3.1;Example of AJAX for Mobile Browsers;164
8.3.3.2;Testing AJAX Support in Mobile Browsers;168
8.3.4;Summary;169
9;Part III: Advanced Mobile Web Development Techniques;170
9.1;Chapter 6: Mobile Web Usability;171
9.1.1;Best Practices for Usable Mobile Web Sites;172
9.1.1.1;Case Study #1: Bank of America;173
9.1.1.1.1;Features of the Bank of America Mobile Web Site;173
9.1.1.2;Case Study #2: CNN;174
9.1.1.2.1;Features of CNN Mobile Web Site;175
9.1.1.3;Case Study #3: Wikipedia;176
9.1.1.3.1;Features of Wikipedia Mobile Web site;177
9.1.1.4;Case Study #4: Flickr;178
9.1.1.4.1;Features of Flickr Mobile Web site;179
9.1.2;Mobile Browser Layout Comparison;8
9.1.3;Designing Mobile Web pages;182
9.1.3.1;Flexible Reference Design;182
9.1.3.2;Standard Layout;183
9.1.3.3;News Web Site;184
9.1.3.4;Search Web site;185
9.1.3.5;Service Web Site;186
9.1.3.6;Portal Web Site;187
9.1.3.7;Media-Sharing Web Site;188
9.1.4;Design Guidelines;189
9.1.4.1;Tips for Developing Mobile Web Pages;189
9.1.4.2;Creating a Web Page for the Maximum Number of Users;191
9.1.4.3;Creating a Better Mobile User Experience;192
9.1.5;Summary;194
9.2;Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers;195
9.2.1;Common Web Techniques for Smartphone Browsers;196
9.2.1.1;Viewport Meta Tag;196
9.2.1.2;Detecting Orientation Changes in JavaScript;198
9.2.2;WebKit in Mobile Browsers;203
9.2.3;Safari Mobile for iPhone;207
9.2.4;Browser for Android Mobile Devices;208
9.2.5;webOS Browser for Palm Pre;209
9.2.6;BlackBerry Browser;210
9.2.7;Nokia Web Browser on Series 60 Smartphones;212
9.2.8;Internet Explorer Mobile for Windows Mobile;214
9.2.9;Opera Mini and Opera Mobile Browsers;215
9.2.10;Summary;218
10;Part IV: Deploying into the Mobile Ecosystem;219
10.1;Chapter 8: Optimizing Mobile Markup;220
10.1.1;Post-Processing Techniques for Mobile Markup;221
10.1.1.1;Minimize External Resources;221
10.1.1.2;Remove Whitespace, Comments and Unnecessary Markup;223
10.1.1.3;Adapt and Transcode Images;230
10.1.1.4;MIME Multipart Encoding of a Response Document;231
10.1.2;Web Server Optimizations for Mobile Browsers;236
10.1.2.1;gzip or deflate Response Compression;236
10.1.2.1.1;Apache Web Server Configuration;237
10.1.2.1.2;Microsoft IIS Web Server Configuration;238
10.1.2.2;Caching Directives in HTTP Response Heade;239
10.1.2.2.1;The Date HTTP Header;239
10.1.2.2.2;The Last-Modified HTTP Header;239
10.1.2.2.3;The Expires HTTP Header;240
10.1.2.2.4;The Cache-Control HTTP Header;240
10.1.2.2.5;The Pragma HTTP Header;242
10.1.2.2.6;The Vary HTTP Header;242
10.1.2.2.7;Examples of Caching Directives in HTTP Response Headers;243
10.1.3;Summary;245
10.2;Chapter 9: Validating Mobile Markup;246
10.2.1;Importance of Valid Markup on the Mobile Web;247
10.2.2;What Validation Does Not Test;251
10.2.3;Public Markup Validators;252
10.2.3.1;W3C Markup Validation Service;253
10.2.3.2;W3C CSS Validation Service;255
10.2.3.3;W3C mobileOK Checker;257
10.2.3.4;mobiReady;259
10.2.3.5;Validome;261
10.2.4;Summary;264
10.3;Chapter 10: Testing a Mobile Web Site;265
10.3.1;Mobile Web Testing Methodology;266
10.3.1.1;Mobile Browser Testing Considerations;268
10.3.1.2;Choosing Mobile Devices to Use in Testing;268
10.3.2;Testing on Actual Mobile Devices;269
10.3.2.1;Acquiring Mobile Devices;270
10.3.2.2;Developer Programs;271
10.3.3;Testing in Mobile Emulators;274
10.3.4;Testing in Desktop Browsers;275
10.3.5;Summary;278
10.4;Chapter 11: Deploying a Mobile Web Site;279
10.4.1;Routing Mobile Traffic to a Mobile Web Site;279
10.4.1.1;Standard Mobile Web Domain and Pathnames;280
10.4.1.2;Mobile Switching Algorithms;282
10.4.1.3;Mobile Switching Products;285
10.4.2;Mobile SEO and Traffic Acquisition;286
10.4.2.1;Mobile Search Engines and Crawlers;286
10.4.2.2;Using Link Relationships for Mobile Site Discovery;288
10.4.2.3;Mobile Sitemaps;289
10.4.2.4;SEO for the Mobile Web;290
10.4.2.5;SEO Practices to Forget;291
10.4.3;Summary;293
10.5;Chapter 12: How to Play Well in the Mobile Ecosystem;294
10.5.1;Operators, Transcoders, and Proxies, Oh My!;294
10.5.1.1;Transcoders on the Public Internet;297
10.5.1.2;Standardizing Transcoder Behavior;300
10.5.2;Defensive Programming for the Mobile Web;302
10.5.2.1;Declaring Your Markup as Mobile-Friendly;302
10.5.2.1.1;Using a Self-Referencing Link Relationship;302
10.5.2.1.2;Using META Tags;303
10.5.2.1.3;Using Response Headers and Document Size;303
10.5.2.2;Identifying Requests from Transcoders;303
10.5.3;Summary;307
10.6;Chapter 13: The Future of the Mobile Web;308
10.6.1;Mobile Web Experts on the Future of Mobility;309
10.6.2;Summary;318
11;Part V: Appendixes;319
11.1;Appendix A: Sample User-Agents from Mobile Devices;320
11.1.1;User-Agents from Mobile Devices;320
11.1.1.1;LG VX-9100;320
11.1.1.2;Nokia 5310b XpressMusic;320
11.1.1.3;SonyEricsson C905;321
11.1.1.4;Motorola Droid;321
11.1.1.5;Motorola Cliq (MB200);321
11.1.1.6;Android G1 Developer Edition;321
11.1.1.7;Palm Pre;322
11.1.1.8;Apple iPhone;322
11.1.1.9;Blackberry Curve 8310;322
11.1.2;How to Capture the User-Agent for a Mobile Device;322
11.2;Appendix B: Sample Request Headers from Mobile Devices;324
11.2.1;Request Headers from Mobile Devices;324
11.2.1.1;LG VX-9100;324
11.2.1.2;Nokia 5310b XpressMusic;325
11.2.1.3;SonyEricsson C905;325
11.2.1.4;Motorola Droid;325
11.2.1.5;Motorola Cliq (MB200);326
11.2.1.6;Android G1 Developer Edition;326
11.2.1.7;Palm Pre;326
11.2.1.8;Apple iPhone;326
11.2.1.9;Blackberry Curve 8310;327
11.2.2;How to Capture Headers from a Mobile Device;327
11.3;Appendix C: Glossary;328
11.3.1;AJAX (Asynchronous JavaScript and XML);328
11.3.2;CHTML (Compact HTML);328
11.3.3;CSS (Cascading Style Sheets);328
11.3.4;CSS Mobile Profile (or CSS MP);328
11.3.5;D-Pad (Directional Pad);329
11.3.6;Desktop Web;329
11.3.7;Device Database;329
11.3.8;Device Description Repository;329
11.3.9;Emulator;329
11.3.10;Featurephone;329
11.3.11;Hard Key;330
11.3.12;HDML;330
11.3.13;HTML;330
11.3.14;HTTP;330
11.3.15;Hybrid Application;330
11.3.16;i-mode;330
11.3.17;IDE;330
11.3.18;JavaScript;331
11.3.19;Microbrowser or Mobile Browser;331
11.3.20;MIME Type (or Media Type, Content Type);331
11.3.21;Minification;331
11.3.22;Mobile Web;331
11.3.23;Native Application;332
11.3.24;OEM;332
11.3.25;OTA;332
11.3.26;RFC;332
11.3.27;Simulator;332
11.3.28;Smartphone;332
11.3.29;Soft Key;332
11.3.30;Software Keyboard;332
11.3.31;User Agent Profile;332
11.3.32;WAP;333
11.3.33;WBMP;333
11.3.34;Web Application;333
11.3.35;Wireless CSS (or WAP CSS);333
11.3.36;WML;333
11.3.37;XHTML;334
11.3.38;XHTML Basic;334
11.3.39;XHTML Mobile Profile (XHTML-MP);334
11.4;Appendix D: Case Study: Testing Mobile Browser Caching and Performance;335
12;Index;339