Web widget and mashup

Draft

Definition

Warning: Contents are not to be trusted yet - Daniel K. Schneider 19:31, 15 May 2007 (MEST)

“A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are akin to plugins or extensions in desktop applications. Other terms used to describe a Web Widget include Gadget, Badge, Module, Capsule, Snippet, Mini and Flake.” (Web widget, Wikipedia, retrieved 19:58, 14 May 2007 (MEST)).

Notice: This article also deals a bit with desktop widgets because they have a similar purpose, i.e. they typically provide easy access to frequently used functions (e.g. the clock) and increasingly pull information from the Internet and provide some visual information.

Usages

(1) Web widgets are used to build mashups, a website, a rich internet application (RIA), desktop applications or combined desktop/RIA that combines content and services from more than one source into an integrated experience.

(2) End users can run this kind of widgets on several "platforms", i.e. various kinds of web widgets are available in several ways:

• on webtops (easy),
• insert widget code into HTML pages.

The same kind of widgets also can be installed on a client computer. However we wouldn't call them web widgets anymore, but desktop widgets.

• load as extensions to web browsers
• be "docked" to a desktop of an OS (Windows, MacOSX, Linux).

So web widgets can be of different kinds. They work within a kind of environment (a HTML page, a webtop, etc.) and they use different technologies to talk to a server. A web widget that runs on one "platform" does not run on an other (unless there are appropriate versions).

What are web widgets ?

Web widgets or web gadgets allow to insert web 2.0 information feeds or applications into a "platform". Widgets are largely combinations of HTML or XHTML, CSS, and Javascript. This technology is increasingly popular, e.g. on 19:58, 14 May 2007 (MEST) Google lists over 6000 and Widgetbox over 10000. Most widgets are probably based on RSS feeds. Some widgets also exist as Desktop widgets or can be converted from a web widget to a desktop widget.

There is a strong relation with so-called rich internet applications. Some of these can be included as widgets, or more precisely the web service behind these can be accessed through widgets.

Mashups

Web widgets can be combined into a web mashup according to the following formula:

Web Mashup = API [1] + API [2] + API [N]

A web mashup is a website or web application that uses content from more than one source to create a completely new service. Content used in mashups typically comes from a third party via a public interface (API), an RSS feed or sometimes screen scraping. webtop are an example of sophisticated mashups, i.e. individual users can configure a "start page"

“We know we don't have a corner on creativity. There are creative people all around the world, hundreds of millions of them, and they are going to think of things to do with our basic platform that we didn't think of. So the mashup stuff is a wonderful way of allowing people to find new ways of applying the basic infrastructures we're propagating. This will turn out to be a major source of ideas for applying Google-based technology to a variety of applications.” (Vint Cerf interview with J.C. Perez, retrieved 19:58, 14 May 2007 (MEST))

Technical information

(just some for now ...)

Implementation

Web Widgets often but not always use Adobe Flash or JavaScript programming languages. The widget code itself is usually very small and connects to some server application.

How to use widgets

Basically, an enduser has several choices (depending on the technology)

Get a widget insertion code from a widget site

• Usually there is "get the code" button that will display some short javascript code which you then can insert into a web page, a blog etc. Unfortunately it's not so easy to find widgets of interest to educators, since the most popular widgets focus on specific information or games ...

• To build quickly a home page, use a generator, then insert javascript. E.g. web 2.0 generator (note: this site was meant to be a bit of a joke, but it does generate nice looking pages ...)

Use a service that supports widgets

Webtops and similar software provide users with a larger set of widgets from which they then can compose an "ajax start page". See:

• webtop
• An increasing amount of social software services

Also read about personal learning environments that includes a story on how to build such a thing with a webtop.

Use browser, application or OS-dependent widgets

• Modern desktop applications like web browsers or desktops themself also allow users to insert widgets that interact with the Internet. Typical examples are:
• Yahoo! Widget Engine
• Google Desktop
• KlipFolio

How to create widgets easily

This is for people with a little HTML/XML/JS knowledge.

• Some services have widget creation kits for a certain number of widgets. E.g. iGoogle allows you to create photos, "daily me", you tube channel, personal list...

• Services like [1] dapper that allow you grab "any content from the web". Requires some technical skills.

Mashup APIs for programmers

Programmers may use published APIs (see for example the list in Webmasup.com)

To program webservices plus associated widgets is another issue. Often, developpers use a so-called AJAX development kit.

Links

Widget management sites

(widgets to download, needs to be sorted out at some point ...)

• Widgetbox. s a directory and syndication platform for web widgets for blogs and other web pages. Claim to work with TypePad, WordPress, Blogger, MySpace as well as most other blogs, sidebars or websites.

• programmableweb

• Widgetoko

• Google Gadgets

• Snipperoo (free registration required).

• WidSets (for your mobile phone)

• TagWorld Widgets (free registration required)

• widgetlabs.com

Desktop

• Microsoft Live http://get.live.com/

• Yahoo widgets (works with widgets 4 application, Win/MacOS)

• Bubbles

Mashup software

• Dapper. Dapper make it easy to extract and reuse content from any website. It can create various kinds of formats (XML, RSS, Google maps, HTML, Netvibes.) etc. from various kinds of input formats (Dapp XML, RSS, Google Gadget, ...). A certain number of prebuilt Dapp's are also available.

• Schmapplets to share places on the web with maps, photos, articles and reviews. (This is just an example of a tool that allows to create mashups for a given domain). (Windows/MacOSX).

Web 2.0 (mashup) APIs

Mashups are aggregations of services and contents. Some of the more sophisticated mashups are webtops, applications that let end-users configure a "web 2.0" start page.

Web 2.0 API's are not standardized and require various programming knowledge. Some organizations also provide client libraries to make things easier. E.g. for the Google APIs there is a Zend Google Data Client Library (PHP). Other libraries exist for Java, .NET, Python, JavaScript (via JSON).

• programmableweb APIs Keeping you up to date with the latest on mashups and the new Web 2.0 APIs. Good directory !

• Webmashup.com The open directory of mashups & web 2.0 APIs

• Data Mashups. Create personalized portals in minutes for your customers or staff (Beta, minimal service is free).

General

• Build Your Own Web 2.0 Application Using Fluff and Hot Air

• Hacking Web 2.0 applications with firefox (some good information about security).

• programmableweb. ProgrammableWeb is where you can keep-up with what's new and interesting with mashups, Web 2.0 APIs, and the new Web as Platform.

• MashupCamp.com

• Khasanshyn, Renat (2007). Three Trends Influencing Enterprise 2.0, Blog Entry.

• Widget engine (Wikipedia), desktop widgets.
• Comparison of widget engines (Wikipedia) desktop widgets.

Mashup Examples

• Saga Earth An interactive game that challenges users to find countries on a map of the world, then displays videos from that country.
  • Saga Earth page on Programmable web.

• Skillsfeed a microlearning platform for course authors and students. It provides fast access to small chunks of learning content composed of Wiki text, multiple choice tests, movies from YouTube, GoogleVideo, Grouper, etc. and Slideshare presentations.
  • SkillsFeed / Programmable Web

• YouTorials Find tutorials on YouTub]
  • YouTorials / Programmable Web

References

Vision / Overviews

• MacManus, Richard (2006). Widgets are the new black, Read/Write Web. HTML

• Kirkpatrick, Marshall (2006), PostApp launches WidgetBox, a marketplace for widgets, TechCrunch. [2]

• Mix, Match, And Mutate, BusinessWeek article.