Developing Web Widget by wuyunqing

VIEWS: 190 PAGES: 12

									 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.

								
To top