Developing Web Widget

with HTML, CSS, JSON and AJAX

Rajesh Lal
Lakshmi Chava

A Complete Guide to Web Widget

 Developing Web Widget with HTML, CSS, JSON and AJAX

Contents at a Glance

Introduction................................................................................................................. 1

Part I Web Widget

1 Defining Web Widget.................................................................................................. 9
2 Knowing Widget Architecture...................................................................................33
3 Designing an Effective Web Widget.........................................................................53
4 Understanding the Technology behind Web Widget................................................69
5 Creating Hello World with HTML, CSS and JavaScript......................................... 109

Part II Developing a Web Widget for Prime Time

6 Developing a Rating Widget with JSON and AJAX............................................... 113
7 Understanding Customization and Layout of a Web Widget................................. 153
8 Securing the Widget at Client and Server Side..................................................... 199
9 Making a High Performance Scalable Widget....................................................... 235

Part III Advanced Web Widget

10 Creating RSS Widget with Ajax, Proxy Server and Feed APIs............................. 277
11 Developing Widget using Facebook APIs and UI Framework . ............................ 307

Appendix Understanding Business Model of Web Widget.................................................... 333

Table of Contents
 Developing Web Widget with HTML, CSS, JSON and AJAX

Table of Contents

What’s in the Book 1

Introduction 1
Section 1: Introducing Web Widget 2
Section 2: Developing Widget for Prime Time 2
Section 3: Advanced Samples 2
Appendix: Widget Business Model 2
Special Features and Notations 3
Supporting Website(s) 3
What is a Web Widget? 9

Part I 1 Defining Web Widget 9

Using a Web Widget 10
Types of Web Widget 11
Origin of Web Widget 14
Client side Technologies and Universal Data 14
Understanding Web 2.0 14
Understanding How Web Widget work 20
Early Web Widget 20
Widget reborn 24
Featuring YouTube “Feeling Lucky” Widget 25
Web Widget Present and Future 26
Success of Web Widget 26
Widget and Gadget 27
Web Widget Future 28
Summary 30

2 Knowing Widget Architecture 33

Widget Eco System 34
Understanding the Widget Data 36
Understanding Widget Host 37
Understanding Widget 39
The Widget Architecture 40
Configuring a Widget 41
Understanding Presentation 42
Data Interaction and Parameters 42
Under the hood of Widget 44
Exploring the Different types of Widget Implementation 44
Summary 50

3 Designing an Effective Web Widget 53

Design Guidelines 54
Widget Interface based on the main functionality 55
Widget Format 60
Customizing Widget with Color Palette 60
Table of Contents

Widget Dimension and fonts 63

Widget Design 63
Widget User Interface 64
Designing a Banner Widget 66

4 Understanding the Technology behind Web Widget 69

Widget Model 70
Technology Roundup 71
Widget Data and Data Formats 72
Different data formats for a Widget 73
Programming the Widget 83
JavaScript 83
Asynchronous JavaScript and XML (Ajax) 87
Programming with JavaScript Object Notation (JSON) 91
Rich Internet Application (RIA) 95
Inline Frame (IFrame) 101
Other Plug-ins 102
Presentation of the widget 102
Guideline for the User Interface 103
HTML 103
CSS 103
Document Object Model 103
Summary 104

5 Creating Hello World Widget with HTML, CSS, and JavaScript 107
Hello World Widget 108
Widget Overview 108
Developing the Hello World Widget 110
Core functionality with JavaScript 113
Summary 116

Part II 6 Developing a Rating Widget with JSON and AJAX 123

Thinking like a Widget Developer 124
Widget Architecture 125
Background: About the Rating Widget 126

-
Creating a View only Widget with JSON 127
Creating Update-able Widget 146
Using a server page to update data from a widget 147
Ajax for In-page Updates in a Widget 155
Ajax using cross site scripting 157
HTTP handler object 157
Putting it all together 160
Summary 161

7 Understanding Customization and Layout of a Widget 163

Rating Widget Design 164
Making the Rating Widget Customizable 164
Format customization 167
 Developing Web Widget with HTML, CSS, JSON and AJAX

Color Customization 168

Creating a Color Palette for Widget 169
Widget Customization Page 172
Layout and Installation 174
Widget Code 179
Distribution 182
Common Widget Platforms 182
Widget Technology versus Widget Platform 183

8 Securing the Widget at Client and Server side 187

Security Threats 188
Security of the Client in the Browser 188
Server Security 196
Security Measures 199
Validating Input 200
Securing the Widget’s Code 204
Security in the Rating Widget 207
Widget Code Security 219
Summary 219

9 Creating High Performance Scalable Widget 221

Performance and Scalability 222
How Widget differs from a Web application 222
Performance Principles 222
Tools for Measuring Performance 224
Optimizing Widget’s Performance 227
The Fast Widget 250
Widget which does not slow down user’s webpage 251
High Performance Rating Widget 253
Summary 258

Part III 10 Creating an RSS Widget with Ajax, Proxy Server and Feed APIs 265
RSS Widget 266
Online Feeds 266
Creating a Widget using HTML, RSS feed and Ajax 274
Cross Domain RSS Feed using Proxy Server 281
RSS Widget using Google AJAX Feed API 285
Widget with Adobe Flash and Microsoft Silverlight 289
Summary 292

11 Developing Widget using Facebook APIs and UI Framework 295

Facebook 296
Facebook development 297
Facebook Platform Architecture 297
Facebook APIs 298
Facebook UI Framework 299
FQL, the Facebook Query language 301
Creating a Widget which uses Facebook APIs 302
Steps to create a widget which uses Facebook APIs 303
Table of Contents

Creating a Facebook Application 309

Embedding an Application inside Facebook 309
Creating a Widget using Facebook UI Framework 311

Appendix Understanding the Business Model of Web Widget 321

The Gold Rush is On 322
Elements of the Revenue Model for widgets 322
Where is the money? 322
Facts about the customers 323
Viral Marketing, The new strategy 324
Infrastructure for Widget Development 325
The Business Model 328
The Ad Widget: Using Widgets as Marketing Tools 328
Offering Free Service Widgets 330
Offering Widgets as a subset service 332
Subset Relationships between revenue models 334
Creating a widget that Sells 335
Targeting users and customers 336
The free service widget 336
Driving the customers 337
Preparing yourself for the demand 338
Summary 339
About the Authors
Rajesh Lal is an author, designer and developer with a decade of experience in desktop, web and
mobile application development. He has authored two other books on Creating Vista Gadget and
Smartphone Web development. He likes to take a pragmatic approach to solving problems and
make extra effort to present technical details in easy to understand manner. He has a Master’s de-
gree in Computer Science from Texas and live in Mountain View, California. He can be reached at
the email address connectrajesh at hotmail.com.

Lakshmi Chava is a software engineer with eight years of experience in web design and
development.
Table of Contents
 Developing Web Widget with HTML, CSS, JSON and AJAX 11

Dedication
To Aanya, the little angel - Rajesh Lal

To my teacher Mr. Sivaramayya Ravipati- Lakshmi Chava

Acknowledgement

Writing is a fascinating journey, but it is also sometimes long and tiring. I would like to extend my
special thanks to all my friends and family who supported me during this journey. Specially my
mom and dad and my brothers Rakesh and Rajeev, for all the wonderful things I have learned from
them, and Simple, and Shilpi for just, being so wonderful, and to my inspiration and my wife Neelu
and to Aanya, the little angel the most beautiful thing happned to us in the last ten years.