Using web widgets

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

Introduction

Learning goals

• Understand what web widgets are
• Learn how to insert web widgets into a web page or an online service such as a webtop page.

Prerequisites

• Creating websites with online services (or similar, i.e. be able to edit a page or web widget inclusion widget

Moving on

• See web technology tutorials

Level and target population

• Beginners

Remarks

• This tutorial should help you "get going", you may read the Web widget and mashup article for some information and additional links

Introduction

“A widget is...a small application that runs on your desktop or in a web page. Widgets enrich your desktop or web pages with functionality, useful information and a lot of fun!” (Widgipedia, Aug 2009).

“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 derived from the idea of code reuse. Other terms used to describe web widgets include: gadget, badge, module, webjit, capsule, snippet, mini and flake. Web widgets usually but not always use DHTML, JavaScript, or Adobe Flash. Widgets often take the form of on-screen tools (clocks, event countdowns, auction-tickers, stock market tickers, flight arrival information, daily weather etc).” (Wikipedia, Aug 2009). All these online services allow the insertion of widgets in one or another way.

Description and interest

A web widget est is a piece of software code that can be installed in simple HTML pages, webtops, social software platforms, personal learning environments, etc. Some widgets just run within these environments, but most will connect to Internet to retrieve and/or send data. Some widgets are so-called mashups of different services. As an example we should mention various web widgets/applications that use google maps, e.g. a widget creator can use the google maps service to create a widget that displays locations of pictures or events.

It is difficult to categorize web widgets since they can offer just about any kind of functionality that a rich Internet application can offer.

• Information (news feeds)
• Interfaces to other web services (Flickr, Facebook, etc.)
• Fun and games
• Personal Tools (e.g. calendar, to-do list, expenses manager, calorie calculator)
• Content publication (e.g. mini-blogs, note boxes, mind maps)

Architecture and functions

Widgets usually rely on a server that provides the data for third parties, e.g. via RSS news feeds. The clients side (i.e. what runs in your web browser) of web widgets are most often programmed in HTML or XHTML, CSS and JavaScript, but one may also use other web technologies like Flash. Desktop widgets use a wider range of technologies.

Some web widgets can be converted to desktop extensions (see for example the Yahoo Widget Converter). In other words, users have the option to use widgets in their hardware environment of choice: personal computer, mobile phone, PDA, etc.

Most widgets on the market are not "tools", but simply deliver contents. In May 2007, Google gadgets included 6000 and Widgetbox over 10000. In Aug 2009, Google gadgets offered over 200'000 widgets ...

Installing a web widget can be very easy or may require minimal technical skills.

• Installation of "internal" widgets in a Webtop or another web 2.0 application is very easy (via drag&drop or and "add button")
• Installation of "non-internal" widgets in a Webtop,a blog or another web 2.0 application requires to copy/paste widget code
• Installation of wiki code in an HTML page requires knowledge of an HTML or a text editor.

Example uses

As we said, there are several methods for using a widget.

Use of internal widgets

Some web services already include internal widgets that you may use, e.g. Webtops par exemples. Installing a widget means either clicking on a "Add" button or a drag and drop operation from a list to a content area. Most social software also include that kind of functionality.

Use of external widgets

Most web services allow to import external widgets. This is more difficult:

• You need to copy a small piece of so-called widget code (see below)
• Figure out where and how to insert this piece of code

Some wiget repositories present "add for" buttons that make widget insertion easy, e.g. for Facebook or Netvibes.

Widget repositories

There exist dozens of these. Be careful and only use widgets from web sites that do look serious. Widgets can be very dangerous, e.g. steal data from your web page.

• http://www.widgipedia.com/
• http://www.labpixies.com/
• http://www.widgetbox.com/
• http://www.widgetvalley.com/
• http://www.yourminis.com/
• http://www.widgbox.com/ (en français)
• Google gadgets

See also the list of web 2.0 applications. Some interesting applications, e.g. mind map drawing tools can be used as widgets.

Getting widget code

If you use a widget repository, look for an option that say "get source code". You then will get a few a lines of JavaScript/HTML code that you can copy to your target site.

• webtop: Firstly you need to find an internal widget that allows to enter HTML code and finding it can be difficult since there is no naming convention. In Pageflakes look for the "Anything Flake". In Netvibes, use the "HTML" ak "UWA Module" widget. You then have to edit this "internal widget" and paste the code, sometimes directly or sometimes after pressing a "code" or "embed" button in the editing interface.
• In your HTML page: Edit the page and insert the code wherever you like. If you want to position the widget, you should insert it within a "div" tag and learn about CSS positioning...

Below is an example of a calculator found on LabPixies (Attention: we inserted line breaks for readability, you always have to copy/paste code "as is"):

<script src="http://www.gmodules.com/ig/ifr
?url=http://www.labpixies.com/campaigns/calc/calc.xml
&amp;up_calc_skin=3&amp;up_skinId=70&amp;synd=open&amp;w=320&amp;h=300
&amp;title=Calculette&amp;lang=fr&amp;country=ALL
&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

'Exemple of widget import to the Netvibes desktop

We will import another calculator found on Widgipedia.

Widget Scientific Calculator found on Widgipedia

Get the the code via "Wiget embed":

<div id="wpdc_embed_12446382684" style="display: none">Scientific Calculator</div>
<head></head>
<script src=
"http://www.widgipedia.com/embed/multiutils/Scientific-Calculator_4078w-12446382684t-1244638268600i-0p.js">
</script>

The Netvibes (June 2009) screenshot shows on top the internal widget palette of Netvibes, in particular the "HTML" widget (also called UWA module). Below you can see the pasted code.

Importation d'un widget dans Netvibes (Juin 2009)

Create your own widget

Ceci est pour ceux qui ont un peu de connaissances en HTML/XML/JS/PHP/etc. Les Web Widgets utilisent souvent (mais pas toujours) les langages de programmation Adobe Flash ou JavaScript. Le code source d'un widget en soi est souvent court et connecte à une application de serveur.

There exist several widget creation kits:

• Widgetbox allows widget creation from several content types (Flash, HTML/JS, Remote, Blog/Feed or Google gadgets.
• Grazr allows created widgets from RSS feeds for various platforms, e.g. Google, Pageflakes, Facebook, Twitter, Netvibes, Windows Live or also as more general widget code (see above).

Links

• Web widget (Wikipedia)
• Web widget