Widgeting the web

1. widgetizing the web
the design of web on web
Prasant Sivadasan
Interaction designer | xDesign
prasant@sun.com

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

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

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 you remix?
blogs/webpages
web apis
user / author
REST / SOAP / XML-RPC
widget
web platforms
? photos / books / news
XML / JSON / PHP

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

11. web on web
a central globally accessible platform for building the web
blog/webpage
web apis
web platforms

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

13. key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services

14. key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services

15. key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services

16. key features of web on web
a browser based canvas for building and publishing custom
widgets and custom logic as REST -style web services

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

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

19. key features of web on web
a social ecosystem of contributors and consumers

20. key features of web on web
readymade configurable templates to build widgets or applications
for popular web platforms like facebook, myspace, bebo, etc

21. thank you.