Udell Pro Web Gadgets for Mobile and Desktop

1. ed
ISBN: 978-1-4302-2552-2
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 350 Seiten

The miniature web applications known as gadgets (or widgets) are a key component of the distributed web and an ideal way to publish your content far beyond the reach of your own web site. Packaging web content and functionality into a gadget enables it to be seen anywhere from iGoogle to the iPhone-wherever the user may be, on or off the traditional web. Everyone can access your content without having to visit your web site. This book is a practical guide to building gadgets that will work everywhere, from handheld devices to any site on the web. The core methodology is to develop a single code base that will run on all platforms, multiplying the syndication opportunities for maximum return on your development investment. Extending this approach is a technique of abstracting key API calls from the various gadget platforms into a single interface layer, implemented in the book as a compact JavaScript class, allowing your gadgets full access to every platform's power without your having to rewrite your code for each. Learn the key concepts for successfully syndicating web content via gadgets. Build platform-agnostic gadgets that run on all the major web portals. Deploy your gadgets to web-enabled handheld devices.

Sterling Udell is a freelance web developer who has been programming with Google Maps since before the application programming interface was released. He is a leading Google Maps, gadget, and Mapplet developer, responsible for the software behind a number of the leading sites on the GeoWeb.

Autoren/Hrsg.

Udell, Sterling

Inhaltsverzeichnis

1;Table of contents;5
2;About the Author;16
3;About the Technical Reviewer;17
4;Introduction;18
4.1;How This Book Is Structured;18
4.2;Downloading the Code;18
4.3;Contacting the Author;19
4.4;Acknowledgments;19
5;PART 1 Web Gadget Fundamentals;20
5.1;CHAPTER 1 Introducing Web Gadgets;22
5.1.1;What Is a Web Gadget?;22
5.1.1.1;Increased Exposure;29
5.1.1.2;A Miniature Web Application…;23
5.1.1.3;…That Distributes Your Web Assets…;24
5.1.1.4;…Beyond Your Own Site;25
5.1.1.4.1;Other Web Sites;26
5.1.1.4.2;Desktops;26
5.1.1.4.3;Handheld Devices;27
5.1.1.5;The Distributed Web;28
5.1.2;Why Build Web Gadgets?;29
5.1.2.1;Increased Exposure;29
5.1.2.1.1;More Page Views;29
5.1.2.1.2;More Places;30
5.1.2.1.3;Benefits of Increased Exposure;30
5.1.2.2;Small Code Footprint;31
5.1.2.2.1;Quick to Build;31
5.1.2.2.2;Easy to Maintain;32
5.1.2.3;Cross-platform Compatibility;32
5.1.3;Cross-platform Development Strategies;33
5.1.3.1;Option 1: Self-contained;33
5.1.3.2;Option 2: A Middleware Layer;33
5.1.4;Summary;33
5.2;CHAPTER 2 Designing the Core Gadget;35
5.2.1;Creating the Concept;35
5.2.1.1;Suitable for a Small Presentation;35
5.2.1.2;A Single, Well-Defined Function;36
5.2.1.3;Dynamic Content;36
5.2.1.4;Immediate Usability;37
5.2.1.5;Mobile Considerations;37
5.2.1.6;Case Study: Hello, Moon!;38
5.2.2;Designing the User Interface;39
5.2.2.1;Look and Feel;39
5.2.2.2;Chrome;39
5.2.2.3;Size;41
5.2.2.4;Use of Space;42
5.2.2.4.1;Icons and Tooltips;43
5.2.2.4.2;Hover;43
5.2.2.5;Branding;45
5.2.2.6;Mobile Considerations;46
5.2.2.7;Case Study: Moon Phase’s User Interface;46
5.2.3;Architecting the Gadget;50
5.2.3.1;Structural Organization;50
5.2.3.2;Scripting and Functionality;51
5.2.3.2.1;Ajax;51
5.2.3.2.2;JavaScript Frameworks;51
5.2.3.2.3;JavaScript Namespacing;52
5.2.3.2.4;Plug-Ins;54
5.2.3.3;Cross-browser Compatibility;54
5.2.3.4;Security;54
5.2.3.5;Mobile Considerations;56
5.2.3.6;Case Study: Architecture on the Moon;56
5.2.4;Considering External Design Issues;62
5.2.4.1;Title;62
5.2.4.2;Description;63
5.2.4.3;Icons and Thumbnails;63
5.2.4.4;Screenshot;64
5.2.4.5;Case Study: The Face of the Moon;64
5.2.5;Deploying the Core Gadget;65
5.2.5.1;Your Gadget As a Mobile Version of Your Site;66
5.2.5.2;Embedding Your Gadget Within Another Page;67
5.2.5.3;Supplying Your Gadget to Other Webmasters;67
5.2.6;Summary;68
5.3;CHAPTER 3 Developing for Multiple Platforms;69
5.3.1;Platform Detection;69
5.3.1.1;Detecting the API;70
5.3.1.2;Using the Results;71
5.3.2;Retrieving Content;72
5.3.2.1;Cross-domain Issues;74
5.3.2.2;Caching;74
5.3.2.2.1;Server-Side Cache Control;75
5.3.2.2.2;Client-Side Cache Control;75
5.3.3;Saving State;77
5.3.3.1;User Interfaces for Configuration;77
5.3.3.2;User Interface Alternatives;81
5.3.3.3;Storage Mechanisms;83
5.3.3.4;The Storage Class;85
5.3.4;Size-Related Functions;88
5.3.5;Utility Functions;89
5.3.6;Summary;90
6;PART 2 Web Platforms;92
6.1;CHAPTER 4 Netvibes;94
6.1.1;Introducing Netvibes;94
6.1.2;Developing for Netvibes;95
6.1.2.1;Adapting the Core Gadget;96
6.1.2.1.1;HTML Namespace;97
6.1.2.1.2;Absolute URLs;97
6.1.2.1.3;Importing Style Sheets;98
6.1.2.1.4;meta Tags;98
6.1.2.1.5;title Element;99
6.1.2.1.6;Preferences;99
6.1.2.1.7;The Inline script Element;100
6.1.2.2;Adding to crossPlatform;101
6.1.2.2.1;Platform Detection;101
6.1.2.2.2;Persistent Storage;102
6.1.2.2.3;Content Retrieval;102
6.1.3;Testing and Debugging;103
6.1.4;Deploying to Netvibes;104
6.1.4.1;Listing in the Ecosystem;104
6.1.4.2;Promoting Your Netvibes Widget;107
6.1.4.3;Deploying Beyond Netvibes;108
6.1.5;Using Netvibes-Specific Extensions;108
6.1.5.1;Inline Style and Script;108
6.1.5.2;Additional Preference Types;109
6.1.6;Learning More About Netvibes;111
6.1.7;Summary;111
6.2;CHAPTER 5 iGoogle;112
6.2.1;Introducing iGoogle Gadgets;112
6.2.2;Developing an iGoogle Gadget;113
6.2.2.1;Adapting the Core Gadget;115
6.2.2.1.1;The ModulePrefs Element;116
6.2.2.1.2;The UserPref Elements;118
6.2.2.1.3;The Content Element;118
6.2.2.1.4;Completing Your XML;122
6.2.2.2;Additions to crossPlatform;123
6.2.2.2.1;Platform Detection;123
6.2.2.2.2;Persistent Storage;125
6.2.2.2.3;Content Retrieval;126
6.2.2.2.4;Resizing;126
6.2.3;Testing and Debugging;127
6.2.3.1;Adding Gadgets to iGoogle;127
6.2.3.2;Utilizing the Developer Gadgets;129
6.2.3.2.1;My Gadgets;129
6.2.3.2.2;Google Gadget Editor;130
6.2.3.2.3;Gadget Checker;131
6.2.4;Deploying iGoogle Gadgets;132
6.2.4.1;Other Gadget Containers;133
6.2.4.1.1;Branded Start Pages;133
6.2.4.1.2;MyAOL;134
6.2.4.1.3;Google Sites and Apps;134
6.2.4.1.4;Blogger;136
6.2.4.1.5;Open Syndication;136
6.2.4.1.6;Google Desktop Sidebar;137
6.2.4.1.7;Gmail;139
6.2.4.2;Specialized Gadget Containers;139
6.2.4.2.1;Google Browser Toolbar;140
6.2.4.2.2;Google Maps (Mapplets);142
6.2.4.2.3;Google Docs Spreadsheets;143
6.2.4.2.4;Google Calendar;143
6.2.4.2.5;OpenSocial;144
6.2.5;Google-Specific Optimizations;145
6.2.5.1;Specifying Style and Script Inline;145
6.2.5.2;Using Additional Preference Types;145
6.2.5.3;Leveraging the Google Cache;148
6.2.5.3.1;The Basic Cache Proxy;148
6.2.5.3.2;Caching External Code;148
6.2.5.4;Internationalization;149
6.2.6;Learning More About iGoogle Gadgets;150
6.2.7;Summary;150
7;PART 3 Desktop Platforms;152
7.1;CHAPTER 6 Windows;154
7.1.1;Introducing Windows Gadgets;154
7.1.2;Developing a Windows Gadget;154
7.1.2.1;Adding a Border;156
7.1.2.2;Adapting the Core Gadget;157
7.1.2.2.1;Creating the Gadget Manifest;157
7.1.2.2.2;Changes to the HTML;159
7.1.2.3;Additions to crossPlatform;162
7.1.2.3.1;Platform Sniffing;162
7.1.2.3.2;Persistent Storage;162
7.1.2.3.3;Resizing;163
7.1.3;Testing and Debugging;163
7.1.3.1;Packaging Gadgets;164
7.1.3.2;Installing Your Gadget;165
7.1.3.3;Tracking Down Bugs;167
7.1.4;Deploying Windows Gadgets;167
7.1.4.1;Submitting to the Gadget Gallery;167
7.1.4.2;Providing Direct Gadget Downloads;169
7.1.5;Using Windows-Specific Extensions;170
7.1.5.1;Appearance;170
7.1.5.2;Additional Content;170
7.1.5.2.1;Flyouts;170
7.1.5.2.2;Settings Dialogs;171
7.1.5.3;Localization;172
7.1.5.4;Non-Web Extensions;174
7.1.6;Learning More About Windows Gadgets;175
7.1.7;Summary;176
7.2;CHAPTER 7 Mac OS X Dashboard;177
7.2.1;Introducing Dashboard Widgets;177
7.2.2;Developing a Dashboard Widget;179
7.2.2.1;Conforming to the Mac User Interface;179
7.2.2.1.1;Backgrounds, Borders, and Shadows;179
7.2.2.1.2;Configuration;181
7.2.2.1.3;Buttons;182
7.2.2.1.4;Widget Bar Icon;183
7.2.2.2;Adapting the Core Gadget;183
7.2.2.2.1;Creating the Information Property List;184
7.2.2.2.2;Changes to the HTML;187
7.2.2.2.3;Dashboard-Specific CSS;189
7.2.2.2.4;Dashboard-Specific JavaScript;192
7.2.2.2.5;Additions to crossPlatform;195
7.2.3;Testing and Debugging;196
7.2.3.1;Exploring the Dashcode Development Environment;196
7.2.3.2;Packaging Your Widget;197
7.2.3.3;Installing in Dashboard;197
7.2.4;Deploying Dashboard Widgets;198
7.2.5;Dashboard-Specific Extensions;199
7.2.5.1;HTML 5 on Safari;200
7.2.5.2;Mac User Interface Elements;200
7.2.5.3;Localization;200
7.2.5.4;Non-Web Extensions;201
7.2.6;Learning More About Dashboard Widgets;202
7.2.7;Summary;203
7.3;CHAPTER 8 Opera;204
7.3.1;Introducing Opera Widgets;204
7.3.2;Developing for Opera;205
7.3.2.1;Defining the Appearance;206
7.3.2.2;Adapting the Core Gadget;207
7.3.2.2.1;Creating the Widget Configuration File;208
7.3.2.2.2;Changes to the HTML;211
7.3.2.2.3;Additions to crossPlatform;216
7.3.3;Testing and Debugging;217
7.3.3.1;Installing Your Widget;217
7.3.3.2;Debugging in Opera;219
7.3.4;Deploying Widgets for Opera;220
7.3.4.1;Submitting to the Directory;220
7.3.4.2;Providing Direct Widget Downloads;221
7.3.5;Learning More About Opera Widgets;222
7.3.6;Summary;223
8;PART 4 Mobile Platforms;224
8.1;CHAPTER 9 Windows Mobile;225
8.1.1;Introducing Windows Mobile;225
8.1.2;Windows Mobile Emulators;226
8.1.2.1;Setting Up the Emulator;227
8.1.2.1.1;With Visual Studio;228
8.1.2.1.2;Without Visual Studio;228
8.1.2.1.3;Emulator Images;229
8.1.2.1.4;The Windows Mobile Device Center;229
8.1.2.2;Using the Emulator;230
8.1.3;Running Web Applications;231
8.1.3.1;Web Apps in Internet Explorer Mobile 6;232
8.1.3.2;Web Apps in Opera Mobile;233
8.1.4;Windows Mobile Web Widgets;235
8.1.4.1;Built-in Widget Architecture;235
8.1.4.2;Adapting the Core Gadget;236
8.1.4.2.1;Creating the Manifest;237
8.1.4.2.2;Changes to the HTML;238
8.1.4.2.3;Additions to crossPlatform;241
8.1.4.3;Testing and Debugging;242
8.1.4.3.1;Installing Your Widget;242
8.1.4.3.2;Applying Changes;244
8.1.4.4;Deploying Windows Mobile Widgets;244
8.1.4.5;Windows Mobile–Specific Extensions;245
8.1.5;Opera Mobile Widgets;247
8.1.5.1;Taking Your Opera Widget Mobile;247
8.1.5.2;Testing and Debugging;252
8.1.5.2.1;The Opera Widget Emulator;252
8.1.5.2.2;Testing on Windows Mobile;255
8.1.5.3;Deploying Opera Mobile Widgets;255
8.1.6;T-Mobile Web’n’Walk Widgets;256
8.1.6.1;T-Mobile-Specific Extensions;256
8.1.6.2;Listing in the T-Mobile Gallery;257
8.1.7;Learning More About Windows Mobile;258
8.1.8;Summary;258
8.2;CHAPTER 10 Symbian S60;259
8.2.1;Introducing Symbian S60;259
8.2.2;Emulating Symbian Devices;260
8.2.2.1;Installing an S60 Emulator;261
8.2.2.2;Using the Emulator;261
8.2.3;Running Web Applications;262
8.2.4;Creating Web Runtime Widgets;263
8.2.4.1;Exploring the Web Runtime Architecture;264
8.2.4.2;Adapting the Core Gadget;265
8.2.4.2.1;Creating the Information Property List;265
8.2.4.2.2;Making Changes to the HTML;267
8.2.4.2.3;Additions to crossPlatform;271
8.2.4.3;Testing and Debugging;272
8.2.4.3.1;Installing Your Widget;272
8.2.4.3.2;Applying Changes;274
8.2.4.3.3;Using Remote Device Access;274
8.2.4.4;Deploying Web Runtime Widgets;276
8.2.4.5;Using WRT-Specific Extensions;276
8.2.4.5.1;Localization;276
8.2.4.5.2;Menus and Softkeys;277
8.2.4.5.3;Nokia Platform Services;277
8.2.5;Learning More About Symbian S60;278
8.2.6;Summary;279
8.3;CHAPTER 11 iPhone;280
8.3.1;Introducing iPhone;280
8.3.2;Installing the iPhone Simulator;281
8.3.3;Running Web Apps;282
8.3.3.1;Optimizing for iPhone;283
8.3.3.2;Changes to the HTML;285
8.3.3.2.1;Inline CSS;286
8.3.3.2.2;Inline JavaScript;287
8.3.3.3;Submitting to the iPhone Web App Directory;288
8.3.4;Creating Native iPhone Applications;288
8.3.4.1;Adapting the Core Gadget;289
8.3.4.1.1;Building the Framework;291
8.3.4.1.2;Adding to crossPlatform;296
8.3.4.1.3;Testing and Debugging;298
8.3.4.1.3.1;Debugging Packaged JavaScript;298
8.3.4.1.3.2;Testing on a Real iPhone;299
8.3.4.1.4;Deploying iPhone Applications;300
8.3.5;Learning More About iPhone;300
8.3.6;Summary;301
8.4;CHAPTER 12 Android;302
8.4.1;Introducing Android;302
8.4.2;Installing the Android Emulator;303
8.4.3;Running Web Applications;305
8.4.4;Creating Native Android Applications;307
8.4.4.1;Setting Up the Environment;308
8.4.4.1.1;Installing Eclipse;308
8.4.4.1.2;Installing the Android SDK Plug-In;308
8.4.4.2;Adapting the Core Gadget;309
8.4.4.2.1;Building the Framework;309
8.4.4.2.2;Changes to the HTML;313
8.4.4.2.3;Additions to crossPlatform;315
8.4.4.3;Testing and Debugging;316
8.4.4.4;Deploying Android Applications;316
8.4.4.4.1;The Android Market;316
8.4.4.4.2;Other Deployment Options;318
8.4.5;Learning More About Android;319
8.4.6;Summary;319
8.5;CHAPTER 13 The Future of Web Gadgets;320
8.5.1;Better Standards;320
8.5.1.1;HTML 5;320
8.5.1.1.1;Local Storage;321
8.5.1.1.2;Browser-Based Graphics;321
8.5.1.2;The W3C Widget Specification;325
8.5.1.3;The BONDI Initiative;325
8.5.2;Web-Based Operating Systems;326
8.5.2.1;Palm webOS;326
8.5.2.2;Chrome OS;327
8.5.3;Summary;328
9;APPENDIX A Gadget Platform Cross-Reference;329
9.1;Packaging;329
9.2;Screen Resolutions;330
9.3;Icons;331
9.4;Screenshots;332
9.5;Description Fields;333
10;APPENDIX B The crossPlatform AbstractionLayer;335
11;APPENDIX C The Moon Phase Gadget;343
11.1;Client;344
11.2;Server;353
11.2.1;XML;353
11.2.2;Imagery;354
12;Index;357