Tuesday 29 March 2011

Clever embedding with Opensocial gadgets

A bunch of very cool features is about to appear in Opensocial 2.0. I will point out now two of them related to embedding content into html pages.

Everybody is used to embed youtube videos, slideshare presentations into there web pages, blogs, etc. But how about embedding an Opensocial gadget into an html page?
This is one of the features on todo list in opensocial. Sounds cooool, right?

Second thing is related but more for service providers. It is called Embedded Experiences. Let's see one of the usecases. Let's say I am a service provider - Youtube. I already have a way to embed my videos in another applications,
but all people can do is to watch videos (actually no interaction). If I want to allow people to comment it or rate, they have to go to youtube to do so by loosing the context. With Embedded Experiences it is now solved. I (as a service provider) supply my embed code with an Opensocial gadget and a url to embed. Then the gadget will render the youtube video on customers page and allow users to directly like/dislike video from the embed code (or some other functionality I want to support).

There are still some things to be done to fully implement it, but you got the idea!

Tuesday 8 March 2011

Functional skins in action

The idea about functional skins was discussed here

Let's see real life example now. All the actions are done based on Graaasp: http://graaasp.epfl.ch

We have a space that contains four gadgets: Google map search, Quick Latex, Todo list and English resource browser. Graaasp provides us with the following default view for this space:

You can see every gadget one by one, but you can't see few gadgets on the page at the same time (similar to iGoogle view). In Graaasp you can attach a functional skin to a space which could change the representation of this space. Let's do that. Let's add the following gadget as a functional skin: http://graaasp.epfl.ch/gadget/rolespace/rolespace.xml

Now we can click on the button "View space with skin" and we see the following view, where all widgets are displayed on the page as a grid:

We can go further and add another skin to a space that contains youtube videos.
I have few videos in my space and default view for it is as follows:

Now I add the next functional skin to this space: http://graaasp.epfl.ch/gadget/viewer/viewer.xml
And I see the space differently, all youtube videos are open and can be played:

You can easily write your own functional skin and use Graaasp's space as you wish.

Few points on implementation. Graaasp implements Opensocial APIs via Shindig. Plus it uses Space extension to Opensocial. Gadget finds out the space to which it belongs and then retrieves gadgets for this space as in the example below.



Once list of gadgets is received, they are built in a standard Apache Shindig way.
You have to only require a feature


In the second functional skin you retrieve list of assets for a space in a similar way.