Netvibes was created as a way to gather all your digital life in one handy place, providing in-house for your most important digital needs: search, e-mail, to-do list, feed-reader, bookmarks & links, weather, calendar…

It quickly turned out that our users needed access to more digital content than we where able to provide widgets for. Hence the launch of the MiniAPI in March 2006, merely 6 months after our initial launch, allowing developers to build Netvibes modules using well-known technologies, such as XHTML, CSS and JavaScript/Ajax. The Universal Widget API (UWA), launched one year later, was the next step in the evolution of this API, offering portability for the major widget platforms.

But that might still not be enough. For starters, there are still a lot of useful and frequently-update data out there that is not available through a feed or an API – and thus, hardly easy to implement into a widget, even through an iFrame. For these data, users are pretty much left to themselves, or to the cleverness of widget developers.

The Automatic Parser widget is one of these extremely clever widgets. Built by Netvibes user Tristan “Twisterss” Groléat, it features a state-of-the-art HTML parser that allows users to pull just about anything out of any web-page, as long as it can be found using the DOM.

The instructions are sparse, and the usage is quick to grok:

1. Enter the URL of the webpage
2. Select the information you are interested in on the preview of the page: one block or many blocks of the same type
3. Check that the widget really selects what you want
4. Confirm your selection
5. The widget displays the information you want, and refreshs it automatically every 20 minutes.

Let’s say you want a widget that always displays the latest “Hawt post” from the WordPress.com home page. Just paste the http://wordpress.com/ URL into the widget:

It loads the page – removing a few styling rules for readability. Scroll to the section you are interested in, and put the cursor over it: it highlights with a red background. Click when the want data is highlighted: the highlighting turns to blue.

Click the “Parse the information” button. If only what you wanted is selected, then click the “Validate” button.

There you go: you know have a full-working UWA widget which displays a regularly-updated portion of an external website. Since the widget takes the external content as-is, you might need to resize your Netvibes page’s column, so as to display it all. You can also change the widget’s title in the preferences.

Get inspired! What kind of widget do you see being built with this nifty new tool? What can you learn from its code?

UPDATE

Tristan has done it again with a new tool based on his Automatic Parser widget: “Build your own parsing UWA widget in 3 minutes“. Simply put, it starts with the Automatic Parser widget, and adds tools to customize and share it easily with the community. Excellent thinking!

Share this post:

These widget rely on data from AOL News, which has built a dedicated Elections page. They cleverly mix AOL’s Flash applications with a UWA drop-down menu – which selection is saved in Netvibes. Best of both world: ease of Flash integration, usability of UWA widgets.

The most visually informative one, 2008 Election Primary Results Map, presents the Primary results in one handy map:

The three other widget are just as informative, in a time when numbers keep changing, and results get to their final state: this one will give you the primary leaders for any chosen state, that one gives the Primaries delegate tally for one of the two parties, and the final one combines overall leaders and tally.

So get informed as soon as updates are given! Put these widgets on your Netvibes page – or your Netvibes Universe

Note: sadly, the “See Republican Results/See Democratic Results” doesn’t work. Use the Edit section to change settings…

Share this post:

This is nice, since easy+useful is nice. Yet, it has one pesky downside: it takes the user to a new page, rather than displaying the search result(s) in the widget. This is the whole point of Ajax: making the user experience seamless, by bringing the content into the page he is already in.

One recent widget manages to bring Ajax to its search in an elegant way: Maplin Catalog Search, by Tim Surtell. The way it works for the user is pretty straightforward:

Behind the curtains, it’s still straightforward: being a Maplin affiliate for his Electronis in Meccano website, M. Sutrell had access to a data-feed of Maplin’s database. He only had to adapt that feed to output in JSON (thanks to an ASP script), and the hardest part was done. From there, the widget simply calls the ASP script with the getJson method:

var searchTerm = widget.body
  .getElementsByClassName("searchTerm")[0].value;
UWA.Data.getJson('http://www.surtella.com/maplin.asp?'
  + searchTerm, Maplin.display); 

The “Searching” animation has CSS display (visibility: visible;) and hide it (visibility: hidden;), and the JSON results are parsed through a loop into a table of results. The widget even uses the Pager control, for a more user-friendly parsing.

While it could be enhanced by replacing its hard-coded tables and cells by div-tags mixed with UWA’s Thumbnailed List template, the simple fact that M. Surtell told us he is more accustomed to coding in VB.Net than JavaScript, and is still able to build a widget this nice, is to us a testament of the ease-of-use of both JavaScript and our UWA methods.

Share this post:

You might not be aware of this, but Netvibes is not one start-page, but many start-pages: each locale presents its users with set of global widgets, along with a selection of local feeds and even widgets – which selection is made by local Netvibes users.

For instance:
– Italian locale will present you with the feeds from Corriere della Sera, among others.
– Canadian locale: TSN’s feed with pictures.
– Danish locale: Jyllands-Posten’s.
– Japan locale: Yahoo! Japan Daily News and other feeds.

What I mean to say with this list is that local content is as important to us as is global content – and it’s even the primary reason behind UWA and Ecosystem: to let developers build widget for local services, to let users submit local feeds and data, and have all these local items be available to all Netvibes users.

“Local items” can mean anything from one country’s little known service, to its most celebrated newspaper, with the corner-shop’s RSS feed in between! Simply put, items that you, yourself, find interesting to have in your page, could most probably also be of much use to a hosts of other users.

Our belief in local widget is no smoke and mirrors: we actually do build widgets in order to scratch an itch or to fill a need. The Twitter widget, for instance, started-out as side-project from one of our developers, and is now featured on most locales as a global widget. This is true for many other Netvibes widgets.

But we do push a bit further down the “local widget” road ourselves. See, our dev team works in Paris, and one of our favorite takeaway places is DeMets, which has the double advantage of changing their menu every day, and to publish it online, in good ol’ HTML.
That’s a widget opportunity not to be missed, and once again Maurice took upon himself to build the DeMets widget. We don’t have to visit the website anymore to know if the menu looks yummy or not: it’s right there on our own Netvibes page – or, speaking for myself, on my Dashboard screen. And, because I’m nice like that, here it is live:

Just so you know, it’s marked as having been installed more than 200 times already, which is more than developers we have in Paris. This goes to prove that local widgets are useful not only for yourself: build it and they will come! So don’t hesitate in front of the local website of your video-games reseller: if it can be useful it you, it will probably be to someone else in your city!

So build locale widgets and submit them to Ecosystem: local items are just as important as global ones, and everyone wants local informations coming directly to their desktop! That’s what UWA is for, and we hope to some cool widgets land on future updates of Netvibes’ local start-pages.

Let’s build the long tail of widgets!

Share this post:

This is especially the case with today’s find. Let me present you 4 widgets from FXstreet.com. Here they are, with their accompanying descriptions:
– Euro Forex Rates: Euro crosses real-time forex rates
– U.S. Dollar Forex Rates: U.S. Dollar crosses real-time forex rates
– Interest Rates: Main world interest rates table
– Economic Calendar: Economic calendar main events

Most of you, dear readers of this UWA developers blog, probably went ZzzZZzzZz upon reading those widgets descriptions or seeing that Windows Vista screencap, but keep in mind that not all Netvibes users are techno-geeks. Some are, simply addicted to finance, or plain simply using their Netvibes private page as a dashboard of all financial activities out there.

Simple proof: the number of results you get from Ecosystem when looking for “finance”: 566, among which 44 are applications (which means: MiniAPI modules, UWA widgets, or Flash apps). Indeed, Ecosystem’s Economy category has a hefty load of items. If you dive a little bit into these results, you might even stumble upon a real treasure chest: a whole lot of widgets from InfoNgen.com, a Netvibes-like website dedicated to financial news, who where kind enough to replicate most of the own widgets in UWA for general consumption…

As you know now, there’s a lot of options for those wanting to keep up-to-date with financial news. That’s because there’s a need out there for more than Flash games and YouTube best-ofs: real-life useful apps that let’s the user combine many feeds of data into one easily update screen.

Finances might one application of that, but there are surely more. If as a UWA developer you are looking for new widget ideas to fulful someone’s need, you simply have to think out of your own “box of needs” and brainstorm what someone else, working in a completely different field, might want to get updates on on a hourly/daily/weekly basis. If you can think of one, it might just be what another Netvibes user is in dire need of right now. Go ahead, make his day – and don’t forget to submit on Ecosystem, the best way to get your widgets to be available on all the UWA-supported platforms!

If really you feel stuck, don’t forget the Widget wishlist forum. Likewise, if you have an idea but don’t know how to build it, the UWA developer request forum is here for you.

Share this post:

One such example is a project which aims at being useful to people worldwide, even it’s developers are French: the excellent i-Métro widget, which was recently submitted to Ecosystem. Created by Patrice Bernard and Frank van Caenegem, it lets you pick among a host of cities with public transportation systems on any continent, and once that’s done, find the best route between two spots.

The widget touches a few sweet-spots: clever (many various web services packed into one), multilingual (10 languages), potentially useful to anyone in the world (more than 250 cities in its database)… The i-Métro UWA widget is part of the extension tools offered by Patrice and Franck’s website, i-Métro.

Many things can be learnt from looking at this widget’s code. For starters, it makes use of some complex display while entirely relying on JavaScript/DOM methods to build it, and using a handful of Ajax requests for sending and fetching data. This makes for some hefty code (1634 lines…), but it gets two major benefits: not only does this self-containedness relieve the server from some heavy code-lifting, but it also makes for a more portable widget.

Indeed, what’s more useful when using a best-route widget: checking it from home before leaving to that party, or being able to check it all along the way, both as a reminder or in dire need of update? Obviously, the second case is best, and that’s exactly what the portability of UWA allows: i-Métro will work on many platforms, and among those is the iPhone/iPod Touch version. What best to prove the daily usefulness of widgets than to have them available at hand?

Recently, our French users saw a flurry of Vélib’-related services, thanks to the incredible openness of this system ; and accordingly, within a few days of the launch of the official Vélib’ website, a handful of widgets were gracing the pages of Ecosystem – and let’s not forget the Vélo’v ones. Some were really advanced, with ties to a third-party web service and use of Google Maps, while others where built for a single purpose – but those widgets proved invaluable for Vélib’ users, hence our post on our French blog at the time.

Oh, and train users are not left alone, since they also have access to UWA widgets for Canada’s VIA Rail (in both English and French), and for France’s Voyages-SNCF service. Who said UWA developers where not aware of users needs?

Share this post:

The latest example of a passion turning into useful widgets came right today, when UWA developer Landry Schmitt published a very complete post about the set of Nabaztag-dedicated widgets (he calls them “nabgets”) that he developed as wrappers around his own web applications/games from NabZone.com. With his five “nabgets” – and probably more to come – Landry is helping bridge the gap between two geeky must-haves: Nabaztag and Netvibes.

Let’s quote Landry himself:

Biorhythm: Widget generating a textual message and ‘choreography’ according to you current biorhythm.

Wake up your Rabbit: Send your Nabaztag to sleep each time you want.

Nabaztag Love Test: Ask your Nabaztag if your dream partner loves you.

Magic 8 Ball: Ask the Nabaztag a question, give it a shake and then wait for the ‘Spirit Slate’ voice to give the answer… A divination tool that mysticaly answers your questions.

Fortune Cookies: Your Rabbit breaks the cookie, reads the paper included in it and eats it.

You can find all these widgets on Landry’s Ecosystem page.

What is interesting here is that Landry created widgets that can work both ways: you can use them to control your own Nabaztag(s), or to send messages to your friends’ own. This might not seem much, but this means that these widgets will be as useful on your own, private Netvibes page (or iGoogle, Live.com, Apple Dashboard, Windows Vista, Opera… you know the drill) to make contact with your Nab’ or your friends, but also on your forthcoming Netvibes Universe, where these widgets will let your visitors contact your Nab’

Furthermore, these widgets are proofs of how easy it is to build a widget if you already have a working service on the Web: they mostly use a simple combination of UWA’s tried-and-true Preferences form with a single IFrame to wrap a minimized version of the original service, and voilà! A good-looking, portable and entertaining widget!

For those who never thought of using an iFrame to circumvent some of UWA constraints, rejoice! As these widgets showcase, setting-up an IFrame couldn’t be easier with UWA. Here’s a simple code that would do it, inspired by what Landry used, and which you are welcomed to build upon:

widget.onLoad = function() {
  var myID = widget.getValue('myID');
  var theURL = "http://example.com/widgetscript.php";
  theURL += "?theID=" + escape(myID);

  widget.setBody("<iframe src='" + theURL + "' height='140'
    width='100%' frameborder='0' align='middle' scrolling='no'
    allowtransparency='false'></iframe>");
 }

Thanks Landry for this nice set of widgets! Hope to see some more leveraging the Nabaztag platform!

Update: well, it couldn’t get any sooner While we were finishing this post, half-a-dozen more Nabaztag widgets were submitted to Ecosystem by user Comezo. Built using the very same IFrame technique (and code) that Landry used, those are built for registered users of the NabZap site.

Share this post: