widgetizing the webthe design of web on web

Prasant SivadasanInteraction designer | xDesign

prasant@sun.com

what is a widget?

mean different things in different contextsdesktop 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 webhistorically, 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 apisexamples 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 generationthe remixable web has not only increased participation, but empowered a new generation of developers. not familiar of a world without the internetmost are in the early to mid 20’s - 48% of developers world-wide are less than 30 years oldinterested in creating their own unique viewpoint and publishing itcharacterized by casual and constant use of technologyuse 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 widgetscontent widgets

Digg Friends ScrollerShow 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 widgetscontent widgets

Flickr Photo MapAllows 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 widgetsplatform widgets

Friends For SaleBuy 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

photos / books / news

REST / SOAP / XML-RPCwidget

HTML CSS JavaScript---------

FBML, etc

blogs and websites that lend themselves to be augmented with

user defined functionality

a growing supply of interesting web apis

user / author

XML / JSON / PHP

a mass market of technically savvy do-it-your-selfers

web platforms that lend themselves to be augmented with

user defined functionality

how do you remix?

photos / books / news

REST / SOAP / XML-RPCwidget

?web platforms

blogs/webpages

user / author

XML / JSON / PHP

web apis

building a widgetsetup development environmentdownload and configure IDE, etcweb space, ftp access, ssh accounts

download client libraries (PHP, JRuby, etc) to work with the APIs and the platformunderstand 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

web platforms

blog/webpage

a central globally accessible platform for building the web

web apis

a widget on web on web

photos / books / newsXML / JSON / PHP

REST / SOAP / XML-RPC

web platforms

blog/webpage

web on web

services

adapters

WADL

widget

HTMLCSS

JavaScript-------FBMLetc

what are service adaptors?

1

2

3

web apis

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

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

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

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

key features of web on webprovides a library of widgets and code snippets to quickly assemble mini web applications

library of widget available to the web on web community

details about a widget from the widget properties page

key features of web on weba catalogue of services or service adaptors to connect to the growing list of external web apis

library of services available to the web on web community

details about a service from the service properties page

key features of web on weba social ecosystem of contributors and consumers

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

thank you.