P. 1
Table of Contents: Developing Web Widget with HTML, CSS, JSON and AJAX

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

|Views: 39,006|Likes:
Published by rajeshlal
Table of Contents for the Book: Developing Web Widget with HTML, CSS, JSON and AJAX.

Visit http://widgets-gadgets.com
Table of Contents for the Book: Developing Web Widget with HTML, CSS, JSON and AJAX.

Visit http://widgets-gadgets.com

More info:

Published by: rajeshlal on May 12, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/10/2013

pdf

text

original

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 1 2 3 4 5 Part II 6 7 8 9 Part III 10 11 Appendix Web Widget Defining Web Widget ................................................................................................. 9 Knowing Widget Architecture ..................................................................................33 Designing an Effective Web Widget ........................................................................53 Understanding the Technology behind Web Widget ...............................................69 Creating Hello World with HTML, CSS and JavaScript ........................................ 109 Developing a Web Widget for Prime Time Developing a Rating Widget with JSON and AJAX .............................................. 113 Understanding Customization and Layout of a Web Widget ................................ 153 Securing the Widget at Client and Server Side .................................................... 199 Making a High Performance Scalable Widget ...................................................... 235 Advanced Web Widget Creating RSS Widget with Ajax, Proxy Server and Feed APIs ............................ 277 Developing Widget using Facebook APIs and UI Framework ............................. 307 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 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 Understanding Web 2.0 14 Understanding How Web Widget work 20 Early Web Widget 20 Widget reborn 24 Featuring YouTube “Feeling Lucky” Widget Web Widget Present and Future 26 Success of Web Widget 26 Widget and Gadget 27 Web Widget Future 28 Summary 30

2

14

25

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 Summary 50 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

44

3

Table of Contents

Widget Dimension and fonts Widget Design 63 Widget User Interface 64 Designing a Banner Widget

63 66 69

4 Understanding the Technology behind Web Widget 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) 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

91

Creating Hello World Widget with HTML, CSS, and JavaScript Hello World Widget 108 Widget Overview 108 Developing the Hello World Widget 110 Core functionality with JavaScript 113 Summary 116 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 Rating Widget Design 164 Making the Rating Widget Customizable 164 Format customization 167 163

107

Part II

6

-

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 8 Securing the Widget at Client and Server side 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

183 187

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 High Performance Rating Widget 253 Summary 258

251

Part III

10

Creating an RSS Widget with Ajax, Proxy Server and Feed APIs 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 Developing Widget using Facebook APIs and UI Framework 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

265

11

295

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 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

328

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 degree 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.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->