Pro Web Gadgets for Mobile and Desktop (eBook)

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.

Table of contents 5
About the Author 16
About the Technical Reviewer 17
Introduction 18
How This Book Is Structured 18
Downloading the Code 18
Contacting the Author 19
Acknowledgments 19
PART 1 Web Gadget Fundamentals 20
CHAPTER 1 Introducing Web Gadgets 22
What Is a Web Gadget? 22
Increased Exposure 29
A Miniature Web Application… 23
…That Distributes Your Web Assets… 24
…Beyond Your Own Site 25
Other Web Sites 26
Desktops 26
Handheld Devices 27
The Distributed Web 28
Why Build Web Gadgets? 29
Increased Exposure 29
More Page Views 29
More Places 30
Benefits of Increased Exposure 30
Small Code Footprint 31
Quick to Build 31
Easy to Maintain 32
Cross-platform Compatibility 32
Cross-platform Development Strategies 33
Option 1: Self-contained 33
Option 2: A Middleware Layer 33
Summary 33
CHAPTER 2 Designing the Core Gadget 35
Creating the Concept 35
Suitable for a Small Presentation 35
A Single, Well-Defined Function 36
Dynamic Content 36
Immediate Usability 37
Mobile Considerations 37
Case Study: Hello, Moon! 38
Designing the User Interface 39
Look and Feel 39
Chrome 39
Size 41
Use of Space 42
Icons and Tooltips 43
Hover 43
Branding 45
Mobile Considerations 46
Case Study: Moon Phase’s User Interface 46
Architecting the Gadget 50
Structural Organization 50
Scripting and Functionality 51
Ajax 51
JavaScript Frameworks 51
JavaScript Namespacing 52
Plug-Ins 54
Cross-browser Compatibility 54
Security 54
Mobile Considerations 56
Case Study: Architecture on the Moon 56
Considering External Design Issues 62
Title 62
Description 63
Icons and Thumbnails 63
Screenshot 64
Case Study: The Face of the Moon 64
Deploying the Core Gadget 65
Your Gadget As a Mobile Version of Your Site 66
Embedding Your Gadget Within Another Page 67
Supplying Your Gadget to Other Webmasters 67
Summary 68
CHAPTER 3 Developing for Multiple Platforms 69
Platform Detection 69
Detecting the API 70
Using the Results 71
Retrieving Content 72
Cross-domain Issues 74
Caching 74
Server-Side Cache Control 75
Client-Side Cache Control 75
Saving State 77
User Interfaces for Configuration 77
User Interface Alternatives 81
Storage Mechanisms 83
The Storage Class 85
Size-Related Functions 88
Utility Functions 89
Summary 90
PART 2 Web Platforms 92
CHAPTER 4 Netvibes 94
Introducing Netvibes 94
Developing for Netvibes 95
Adapting the Core Gadget 96
HTML Namespace 97
Absolute URLs 97
Importing Style Sheets 98
meta Tags 98
title Element 99
Preferences 99
The Inline script Element 100
Adding to crossPlatform 101
Platform Detection 101
Persistent Storage 102
Content Retrieval 102
Testing and Debugging 103
Deploying to Netvibes 104
Listing in the Ecosystem 104
Promoting Your Netvibes Widget 107
Deploying Beyond Netvibes 108
Using Netvibes-Specific Extensions 108
Inline Style and Script 108
Additional Preference Types 109
Learning More About Netvibes 111
Summary 111
CHAPTER 5 iGoogle 112
Introducing iGoogle Gadgets 112
Developing an iGoogle Gadget 113
Adapting the Core Gadget 115
The ModulePrefs Element 116
The UserPref Elements 118
The Content Element 118
Completing Your XML 122
Additions to crossPlatform 123
Platform Detection 123
Persistent Storage 125
Content Retrieval 126
Resizing 126
Testing and Debugging 127
Adding Gadgets to iGoogle 127
Utilizing the Developer Gadgets 129
My Gadgets 129
Google Gadget Editor 130
Gadget Checker 131
Deploying iGoogle Gadgets 132
Other Gadget Containers 133
Branded Start Pages 133
MyAOL 134
Google Sites and Apps 134
Blogger 136
Open Syndication 136
Google Desktop Sidebar 137
Gmail 139
Specialized Gadget Containers 139
Google Browser Toolbar 140
Google Maps (Mapplets) 142
Google Docs Spreadsheets 143
Google Calendar 143
OpenSocial 144
Google-Specific Optimizations 145
Specifying Style and Script Inline 145
Using Additional Preference Types 145
Leveraging the Google Cache 148
The Basic Cache Proxy 148
Caching External Code 148
Internationalization 149
Learning More About iGoogle Gadgets 150
Summary 150
PART 3 Desktop Platforms 152
CHAPTER 6 Windows 154
Introducing Windows Gadgets 154
Developing a Windows Gadget 154
Adding a Border 156
Adapting the Core Gadget 157
Creating the Gadget Manifest 157
Changes to the HTML 159
Additions to crossPlatform 162
Platform Sniffing 162
Persistent Storage 162
Resizing 163
Testing and Debugging 163
Packaging Gadgets 164
Installing Your Gadget 165
Tracking Down Bugs 167
Deploying Windows Gadgets 167
Submitting to the Gadget Gallery 167
Providing Direct Gadget Downloads 169
Using Windows-Specific Extensions 170
Appearance 170
Additional Content 170
Flyouts 170
Settings Dialogs 171
Localization 172
Non-Web Extensions 174
Learning More About Windows Gadgets 175
Summary 176
CHAPTER 7 Mac OS X Dashboard 177
Introducing Dashboard Widgets 177
Developing a Dashboard Widget 179
Conforming to the Mac User Interface 179
Backgrounds, Borders, and Shadows 179
Configuration 181
Buttons 182
Widget Bar Icon 183
Adapting the Core Gadget 183
Creating the Information Property List 184
Changes to the HTML 187
Dashboard-Specific CSS 189
Dashboard-Specific JavaScript 192
Additions to crossPlatform 195
Testing and Debugging 196
Exploring the Dashcode Development Environment 196
Packaging Your Widget 197
Installing in Dashboard 197
Deploying Dashboard Widgets 198
Dashboard-Specific Extensions 199
HTML 5 on Safari 200
Mac User Interface Elements 200
Localization 200
Non-Web Extensions 201
Learning More About Dashboard Widgets 202
Summary 203
CHAPTER 8 Opera 204
Introducing Opera Widgets 204
Developing for Opera 205
Defining the Appearance 206
Adapting the Core Gadget 207
Creating the Widget Configuration File 208
Changes to the HTML 211
Additions to crossPlatform 216
Testing and Debugging 217
Installing Your Widget 217
Debugging in Opera 219
Deploying Widgets for Opera 220
Submitting to the Directory 220
Providing Direct Widget Downloads 221
Learning More About Opera Widgets 222
Summary 223
PART 4 Mobile Platforms 224
CHAPTER 9 Windows Mobile 225
Introducing Windows Mobile 225
Windows Mobile Emulators 226
Setting Up the Emulator 227
With Visual Studio 228
Without Visual Studio 228
Emulator Images 229
The Windows Mobile Device Center 229
Using the Emulator 230
Running Web Applications 231
Web Apps in Internet Explorer Mobile 6 232
Web Apps in Opera Mobile 233
Windows Mobile Web Widgets 235
Built-in Widget Architecture 235
Adapting the Core Gadget 236
Creating the Manifest 237
Changes to the HTML 238
Additions to crossPlatform 241
Testing and Debugging 242
Installing Your Widget 242
Applying Changes 244
Deploying Windows Mobile Widgets 244
Windows Mobile–Specific Extensions 245
Opera Mobile Widgets 247
Taking Your Opera Widget Mobile 247
Testing and Debugging 252
The Opera Widget Emulator 252
Testing on Windows Mobile 255
Deploying Opera Mobile Widgets 255
T-Mobile Web’n’Walk Widgets 256
T-Mobile-Specific Extensions 256
Listing in the T-Mobile Gallery 257
Learning More About Windows Mobile 258
Summary 258
CHAPTER 10 Symbian S60 259
Introducing Symbian S60 259
Emulating Symbian Devices 260
Installing an S60 Emulator 261
Using the Emulator 261
Running Web Applications 262
Creating Web Runtime Widgets 263
Exploring the Web Runtime Architecture 264
Adapting the Core Gadget 265
Creating the Information Property List 265
Making Changes to the HTML 267
Additions to crossPlatform 271
Testing and Debugging 272
Installing Your Widget 272
Applying Changes 274
Using Remote Device Access 274
Deploying Web Runtime Widgets 276
Using WRT-Specific Extensions 276
Localization 276
Menus and Softkeys 277
Nokia Platform Services 277
Learning More About Symbian S60 278
Summary 279
CHAPTER 11 iPhone 280
Introducing iPhone 280
Installing the iPhone Simulator 281
Running Web Apps 282
Optimizing for iPhone 283
Changes to the HTML 285
Inline CSS 286
Inline JavaScript 287
Submitting to the iPhone Web App Directory 288
Creating Native iPhone Applications 288
Adapting the Core Gadget 289
Building the Framework 291
Adding to crossPlatform 296
Testing and Debugging 298
Debugging Packaged JavaScript 298
Testing on a Real iPhone 299
Deploying iPhone Applications 300
Learning More About iPhone 300
Summary 301
CHAPTER 12 Android 302
Introducing Android 302
Installing the Android Emulator 303
Running Web Applications 305
Creating Native Android Applications 307
Setting Up the Environment 308
Installing Eclipse 308
Installing the Android SDK Plug-In 308
Adapting the Core Gadget 309
Building the Framework 309
Changes to the HTML 313
Additions to crossPlatform 315
Testing and Debugging 316
Deploying Android Applications 316
The Android Market 316
Other Deployment Options 318
Learning More About Android 319
Summary 319
CHAPTER 13 The Future of Web Gadgets 320
Better Standards 320
HTML 5 320
Local Storage 321
Browser-Based Graphics 321
The W3C Widget Specification 325
The BONDI Initiative 325
Web-Based Operating Systems 326
Palm webOS 326
Chrome OS 327
Summary 328
APPENDIX A Gadget Platform Cross-Reference 329
Packaging 329
Screen Resolutions 330
Icons 331
Screenshots 332
Description Fields 333
APPENDIX B The crossPlatform AbstractionLayer 335
APPENDIX C The Moon Phase Gadget 343
Client 344
Server 353
XML 353
Imagery 354
Index 357