Using web widgets

<pageby nominor="false" comments="false"/>

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

Widget code is usually an HTML <script src="http://some_repository.xxx/widget_id.js> ... </script> fragment that will load JavaScript code from another server.

Using web widgets raises some security questions. For example the JavaScript code of a web widgets will have full access to the DOM (all the data in your current web page) and your cookies. Modern browsers require that this JavaScript code only can access data from the same other server. I.e. if you trust your widget code provider, using a widget should be fairly safe. However, I suggest to be careful with widgets in portals that you control, e.g. learning management systems. If you do so, try to include these within an "iframe" tag (i.e. an HTML page within an HTML page). Read more about Cross-site scripting on Wikipedia. Finally there are greater dangers: in particular desktop widgets and browser extensions can be very dangerous. Only install these from a trusted site !

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 . 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 widget 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" aka "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>

Example 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 "Widget 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 of a widget in Netvibes (June 2009)

Create your own widget

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

Then you can of course program your own from scratch. To do so, you need to learn how to create rich internet application, e.g. with AJAX.

Links

• Web widget (Wikipedia)
• Web widget