Web widget and mashup: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 5: Line 5:


{{quotation | 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.}} ([http://en.wikipedia.org/wiki/Web_widget Web widget], Wikipedia, retrieved 19:58, 14 May 2007 (MEST)).
{{quotation | 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.}} ([http://en.wikipedia.org/wiki/Web_widget Web widget], Wikipedia, retrieved 19:58, 14 May 2007 (MEST)).
Notice: This article also deals a bit with ''desktop widget''s 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
; Usages
Line 10: Line 12:
(1) Web widgets are used to build '''mashup'''s, 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.
(1) Web widgets are used to build '''mashup'''s, 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 combine web widgets on [[webtop]]s and similar software, webbrowsers or "dock" them to an OS (such as Vista or MacOSX).
(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 [[webtop]]s (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.
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 ? ==
== What are web widgets ? ==


'''Web widgets''' or '''web gadgets''' allow to insert  [[web 2.0]] information feeds or applications into a webpage. 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.
'''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.


=== Mashups ===
=== Mashups ===
Line 29: Line 37:


== Technical information ==
== Technical information ==
(just some ...)
(just some for now ...)


=== Implementation ===
=== Implementation ===
Line 50: Line 58:


; Use browser, application or OS-dependent widgets
; 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:
* [http://en.wikipedia.org/wiki/Yahoo%21_Widget_Engine Yahoo! Widget Engine]
* [http://en.wikipedia.org/wiki/Google_Desktop Google Desktop]
* [http://en.wikipedia.org/wiki/KlipFolio KlipFolio]


Modern desktop applications like web browsers or desktops themself also allow users to insert some kinds of web 2.0 widgets.
=== How to create widgets easily ===


=== How to create widgets ===
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...
* 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...
Line 73: Line 85:


* [http://www.programmableweb.com/ programmableweb]  
* [http://www.programmableweb.com/ programmableweb]  
* [http://www.widgetoko.com/ Widgetoko]


* [http://www.google.com/ig/directory?synd=open Google Gadgets]  
* [http://www.google.com/ig/directory?synd=open Google Gadgets]  
Line 81: Line 95:


* [http://www.tagworld.com/guest/widgets/ TagWorld Widgets] (free registration required)
* [http://www.tagworld.com/guest/widgets/ TagWorld Widgets] (free registration required)
* [http://www.widgetslab.com/ widgetlabs.com]


; Desktop
; Desktop


* [http://office.microsoft.com/en-us/officelive/default.aspx Microsoft Live] [http://get.live.com/ http://get.live.com/]
* [http://office.microsoft.com/en-us/officelive/default.aspx Microsoft Live] [http://get.live.com/ http://get.live.com/]


* [http://widgets.yahoo.com/ Yahoo widgets] (works with widgets 4 application, Win/MacOS)
* [http://widgets.yahoo.com/ Yahoo widgets] (works with widgets 4 application, Win/MacOS)
Line 114: Line 132:


* Khasanshyn, Renat (2007). [http://apatar.com/blogs/renat/2007/03/21/three-trends-influencing-enterprise-20 Three Trends Influencing Enterprise 2.0], Blog Entry.
* Khasanshyn, Renat (2007). [http://apatar.com/blogs/renat/2007/03/21/three-trends-influencing-enterprise-20 Three Trends Influencing Enterprise 2.0], Blog Entry.
* [http://en.wikipedia.org/wiki/Widget_engine Widget engine] (Wikipedia), desktop widgets.
* [http://en.wikipedia.org/wiki/Comparison_of_widget_engines Comparison of widget engines] (Wikipedia) desktop widgets.


=== Mashup Examples ===
=== Mashup Examples ===

Revision as of 11:13, 16 May 2007

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.

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

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"

Use browser, application or OS-dependent widgets

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 dapper that allow you grab "any content from the web".

Mashup APIs for programmers

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

To program widgets is another issue ....

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


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 sort of equivalent to webtops. The difference is that you create a webtop for the others. 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 !
  • Data Mashups. Create personalized portals in minutes for your customers or staff (Beta, minimal service is free).

General

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


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

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. [1]