widgetizing the web
  the design of web on web

              Prasant Sivadasan
       Interaction designer | xDesign
              prasant@sun.com
what is a widget?
mean different things in different contexts
desktop widgets, mobile phone widgets, web widgets

In the Web on Web world...

“ Widgets are single function mini-web applications
that can be hosted in HTML pages. ”
widgets are also sometimes referred to as a gadget, badge, module, capsule,
snippet, blidget, mini, flake, etc
newsweek called 2007 the “Year of the Widget” because of the huge
increase in popularity of these applications
the remixable web
historically, the web was about what and where.
What you were looking for and where to find it. Data locked away at websites/databases.

today, web apis free up that data
you no longer need to be at those websites but instead access the data via web apis
examples are amazon, flickr, delicious

combining data from disparate sources via web apis and the read-
write web, remixing or representing web data in new and innovative
ways has become easier

increased participation, lowered barriers to publish content or
augment websites, blogs and social networks with user-authored
content or functionality
the web generation
the remixable web has not only increased participation, but
empowered a new generation of developers.
not familiar of a world without the internet
most are in the early to mid 20’s - 48% of developers world-wide are less than 30 years old
interested in creating their own unique viewpoint and publishing it
characterized by casual and constant use of technology
use small apps and more of them to assemble their own view of the world

these are not “developers” as we define them at Sun
a more accurate term may be “user-author”
the DIY web enthusiast

are likely to look for the path of least resistance to build something

participate in building the web by editing templates, hacking existing
artifacts and delivering small applications that are virally distributed
across blogs, websites and social networks.
examples of widgets
                   content widgets




         Digg Friends Scroller
         Show digg news on your website, blog, or
         myspace.


         APIs Digg
         Installs on Facebook, MySpace, Blogger,
         Typepad, LiveJournal, FreeWebs, Netvibes,
         Pageflakes
         Widget developer widgetnest
examples of widgets
                   content widgets




         Flickr Photo Map
         Allows you to add a map of your geotagged
         flickr photos to your blog! Simply enter your
         flickr username and the map will magically
         display the photos you have geocoded on
         the flickr site.


         APIs Flickr, Google
         Installs on Blogger, Typepad, Wordpress,
         Netvibes, Pageflakes, Hi5, Ning
         Widget developer Worldreviewer
examples of widgets
                   platform widgets




         Friends For Sale
         Buy and sell your friends as pets! You can
         make your pets poke others, send gifts, or
         just show off for you. Make money as a
         shrewd pets investor or as a hot
         commodity! Friends for Sale is the bees
         knees!

         APIs Facebook
         Installs on Facebook
         Widget developers
         Alexander Le (UC Irvine Alum ’06)
         Siqi Chen (UCSD Alum ’05)
the remixable web
   blogs and websites that lend
themselves to be augmented with
    user defined functionality




                                  a mass market of technically                           a growing supply of
                                    savvy do-it-your-selfers                             interesting web apis


                                     user / author

                                                                 REST / SOAP / XML-RPC
                                          widget

                                     HTML CSS JavaScript
     web platforms that lend              ---------              photos / books / news
themselves to be augmented with         FBML, etc
    user defined functionality
                                                                    XML / JSON / PHP
how do you remix?

 blogs/webpages




                                                          web apis
                  user / author
                                  REST / SOAP / XML-RPC
                     widget




 web platforms
                       ?          photos / books / news

                                    XML / JSON / PHP
building a widget
setup development environment
download and configure IDE, etc
web space, ftp access, ssh accounts

download client libraries (PHP, JRuby, etc) to work with the
APIs and the platform
understand how to work with libraries

code the application, push into the hosting server, check it
into the repository - over and over again

find a place to deploy the widget, write documentation and
find a place to publish it

talk about the widget in blogs, articles, email, etc.
web on web
a central globally accessible platform for building the web




     blog/webpage




                                                              web apis




     web platforms
a widget on web on web
                                             what are service adaptors?

 blog/webpage


                 1


                                         2



                        web on web                                            web apis


                     widget       adapters           REST / SOAP / XML-RPC

                       HTML        WADL
                        CSS
                     JavaScript
                       -------
                       FBML                           photos / books / news
                         etc      services               XML / JSON / PHP
 web platforms




                                     3
key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services
key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services
key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services
key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services
key features of web on web
provides a library of widgets and code snippets to quickly
assemble mini web applications

          details about a widget from the widget properties page




  library of widget available to the web on web community
key features of web on web
a catalogue of services or service adaptors to connect to the
growing list of external web apis

       details about a service from the service properties page



 library of services available to the web on web community
key features of web on web
a social ecosystem of contributors and consumers
key features of web on web
readymade configurable templates to build widgets or applications
for popular web platforms like facebook, myspace, bebo, etc
thank you.

Summit Preso Final

  • 1.
    widgetizing the web the design of web on web Prasant Sivadasan Interaction designer | xDesign prasant@sun.com
  • 2.
    what is awidget? mean different things in different contexts desktop widgets, mobile phone widgets, web widgets In the Web on Web world... “ Widgets are single function mini-web applications that can be hosted in HTML pages. ” widgets are also sometimes referred to as a gadget, badge, module, capsule, snippet, blidget, mini, flake, etc newsweek called 2007 the “Year of the Widget” because of the huge increase in popularity of these applications
  • 3.
    the remixable web historically,the web was about what and where. What you were looking for and where to find it. Data locked away at websites/databases. today, web apis free up that data you no longer need to be at those websites but instead access the data via web apis examples are amazon, flickr, delicious combining data from disparate sources via web apis and the read- write web, remixing or representing web data in new and innovative ways has become easier increased participation, lowered barriers to publish content or augment websites, blogs and social networks with user-authored content or functionality
  • 4.
    the web generation theremixable web has not only increased participation, but empowered a new generation of developers. not familiar of a world without the internet most are in the early to mid 20’s - 48% of developers world-wide are less than 30 years old interested in creating their own unique viewpoint and publishing it characterized by casual and constant use of technology use small apps and more of them to assemble their own view of the world these are not “developers” as we define them at Sun a more accurate term may be “user-author” the DIY web enthusiast are likely to look for the path of least resistance to build something participate in building the web by editing templates, hacking existing artifacts and delivering small applications that are virally distributed across blogs, websites and social networks.
  • 5.
    examples of widgets content widgets Digg Friends Scroller Show digg news on your website, blog, or myspace. APIs Digg Installs on Facebook, MySpace, Blogger, Typepad, LiveJournal, FreeWebs, Netvibes, Pageflakes Widget developer widgetnest
  • 6.
    examples of widgets content widgets Flickr Photo Map Allows you to add a map of your geotagged flickr photos to your blog! Simply enter your flickr username and the map will magically display the photos you have geocoded on the flickr site. APIs Flickr, Google Installs on Blogger, Typepad, Wordpress, Netvibes, Pageflakes, Hi5, Ning Widget developer Worldreviewer
  • 7.
    examples of widgets platform widgets Friends For Sale Buy and sell your friends as pets! You can make your pets poke others, send gifts, or just show off for you. Make money as a shrewd pets investor or as a hot commodity! Friends for Sale is the bees knees! APIs Facebook Installs on Facebook Widget developers Alexander Le (UC Irvine Alum ’06) Siqi Chen (UCSD Alum ’05)
  • 8.
    the remixable web blogs and websites that lend themselves to be augmented with user defined functionality a mass market of technically a growing supply of savvy do-it-your-selfers interesting web apis user / author REST / SOAP / XML-RPC widget HTML CSS JavaScript web platforms that lend --------- photos / books / news themselves to be augmented with FBML, etc user defined functionality XML / JSON / PHP
  • 9.
    how do youremix? blogs/webpages web apis user / author REST / SOAP / XML-RPC widget web platforms ? photos / books / news XML / JSON / PHP
  • 10.
    building a widget setupdevelopment environment download and configure IDE, etc web space, ftp access, ssh accounts download client libraries (PHP, JRuby, etc) to work with the APIs and the platform understand how to work with libraries code the application, push into the hosting server, check it into the repository - over and over again find a place to deploy the widget, write documentation and find a place to publish it talk about the widget in blogs, articles, email, etc.
  • 11.
    web on web acentral globally accessible platform for building the web blog/webpage web apis web platforms
  • 12.
    a widget onweb on web what are service adaptors? blog/webpage 1 2 web on web web apis widget adapters REST / SOAP / XML-RPC HTML WADL CSS JavaScript ------- FBML photos / books / news etc services XML / JSON / PHP web platforms 3
  • 13.
    key features ofweb on web a browser based canvas for building and publishing custom widgets and custom logic as REST -style web services
  • 14.
    key features ofweb on web a browser based canvas for building and publishing custom widgets and custom logic as REST -style web services
  • 15.
    key features ofweb on web a browser based canvas for building and publishing custom widgets and custom logic as REST -style web services
  • 16.
    key features ofweb on web a browser based canvas for building and publishing custom widgets and custom logic as REST -style web services
  • 17.
    key features ofweb on web provides a library of widgets and code snippets to quickly assemble mini web applications details about a widget from the widget properties page library of widget available to the web on web community
  • 18.
    key features ofweb on web a catalogue of services or service adaptors to connect to the growing list of external web apis details about a service from the service properties page library of services available to the web on web community
  • 19.
    key features ofweb on web a social ecosystem of contributors and consumers
  • 20.
    key features ofweb on web readymade configurable templates to build widgets or applications for popular web platforms like facebook, myspace, bebo, etc
  • 21.