Towards Collaborative Portable Web
Spaces
Stéphane Sire (speaking)
Evgeny Bogdanov
Matthias Palmér
Denis Gillet
www.role-project.eu/mupple09

Mashup & Widgets progression
Source: Source:
www.programmableweb.com eco.netvibes.com/universes
2 www.role-project.eu/mupple09

What are we talking about ?
Page ?
Mashup ?
Tab ?
Space
Universe ?
Dashboard ?
Container ?
Portal ?
3 www.role-project.eu/mupple09

What is a Web Space ?
Components + Data-Flow wiring Mashup
Widgets + Grid Layout Tab, Universe, etc.
Web Space
4 www.role-project.eu/mupple09

Web Spaces are the next big stuff in Web Sharing !
TODAY
• Pages : blogs, wikis
• Videos : YouTube
• Slides : slideshare
• Widgets : widgetbox (embed with cut & paste)
• Mashups : Yahoo pipes (embed with cut & paste)
TOMORROW
• Full Web Spaces Sharing
• enabler for collaboration
• especially for learning
• e.g. “learn english” web space
5 www.role-project.eu/mupple09

Scenarios of Collaboration with Web Spaces
6 www.role-project.eu/mupple09

Portability Scenario
7 www.role-project.eu/mupple09

Cloning Scenario
8 www.role-project.eu/mupple09

Broadcasting Scenario
9 www.role-project.eu/mupple09

Co-Editing Scenario
10 www.role-project.eu/mupple09

What to share ?
Mashup Widget Composition
list of components list of widgets
data-flow wiring of layout
components
component settings widget preferences
widget states
third party user’s data on external services
11 www.role-project.eu/mupple09

Current State of the Art
• Some scenarios already possible at the widget or mashup level
• most of the time limited to cloning or broadcasting
• most of the time with knowledge of Javascript required
• Yahoo Pipes example :
12 www.role-project.eu/mupple09

Example:
broadcasting a mashup dashboard on www.afrous.com
<script type="text/javascript"
src="http://resource.afrous.net/release/2.1/js/afrous-dashboard-include.js">
</script>
<script type="text/javascript">
afrous.config = { SITE_KEY : '7e0cd16c11ff3ffe8ad75dfc981b37ee'};
window.onload=function() {
afrous.dashboard.showDashboard(
{ el : 'dashboard',
id : '4bf13a9aef4428fe235ed090d3cf112d',
hideDrawer : true });
}
</script>
13 www.role-project.eu/mupple09

Example: sharing a widget on Netvibes
Copy of the
Widget
configuration
14 www.role-project.eu/mupple09

Our first implementation: iGoogle !
Cloning
Space Level
Broadcasting
Co-Editing
Widget Level
Portability
Space Level
15 www.role-project.eu/mupple09

Our first implementation (Cont’d)
Broadcasting
scenario
Co-Editing
scenario
Social Gadget
16 www.role-project.eu/mupple09

Our first implementation (Cont’d)
Cloning
scenario
17 www.role-project.eu/mupple09

iGoogle : the most complete implementation up to date
Scenario Solution Widget Space Level
Level
Portability “Export / no yes
Import
settings”
Cloning “Send my ? yes
settings”
Broadcasting “View my yes no
content”
Co-Editing “View and yes no
edit my
content”
• But all these features are not cross-platform
• No fine grain control other what is shared and when and
by Who
18 www.role-project.eu/mupple09

Portable Collaborative Web Spaces Roadmap
1. Common agreement on a Web Space configuration language
• e.g. extension of OPML from news feeds to Web Spaces
• e.g. Widget gallery format on W3C mailing list
• e.g. GadgetTabML from Google
2. Extension of the language to support collaboration
• what to share
• when to share
• who to share with
• how to share it
3. Agreement on architecture for achieving runtime independence
19 www.role-project.eu/mupple09

Example of a Web Space configuration language
<GadgetTabML version="1.0" xmlns="…/GadgetTabML/2008">
<Tab title="Accueil" skinUrl="skins/sampler.xml">
<Layout iGoogle:spec="THREE_COL_LAYOUT_1" />
<Section>
<Module type="RSS">
<UserPref name="numItems" value="3"/>
<ModulePrefs xmlUrl="http://…"/>
</Module>
<Module type="REMOTE">
<ModulePrefs url="http://gocomics/…/gc.xml"/>
<UserPref name="defaultIdx" value="1" />
<UserPref name="selectedTab" value="comments" />
<UserPref name="mycomics" value="9|32"/>
<UserPref name="favoritesIdx" value="0" />
</Module>
<Module type="RSS">
<ModulePrefs xmlUrl="http://…" />
</Module>
<Module type="WEATHER">
<UserPref name="temperatureUnit" value="F"/>
<Location name="New Orleans" country="US" language="en" />
<Location name="San Diego" country="US" language="en"/>
</Module>
</Section>
...
</Tab>
</GadgetTabML>
20 www.role-project.eu/mupple09

Extension of the configuration language for collaboration
• What ?
• unit of sharing: whole space, widget, individual setting (or state)
• maybe layout and stuff like that
• When ?
• refresh rate
• page reload
• COMET
• With Who ?
• participant lists
• How (scenario) ?
• update rule:
• Broadcasting
• Co-Editing
• No sharing
21 www.role-project.eu/mupple09

Proposition for XML based configuration languages
22 www.role-project.eu/mupple09

Example
<GadgetTabML version="1.0" xmlns="…/GadgetTabML/2008">
<Tab title="Accueil" skinUrl="skins/sampler.xml">
<Participants owner="alice">alice@kth.se bob@epfl.ch charlie@epfl.ch dave@kth.se</Participants>
<Layout iGoogle:spec="THREE_COL_LAYOUT_1" />
<Section>
<Module type="RSS">
<UserPref name="numItems" value="3"/>
<ModulePrefs xmlUrl="http://…" sharing="BROADCAST" refresh="ASYNC"/>
</Module>
<Module type="REMOTE" participants="alice@kth.se bob@epfl.ch">
<ModulePrefs url="http://gocomics/…/gc.xml"/>
<UserPref name="defaultIdx" value="1" />
<UserPref name="selectedTab" value="comments" />
<UserPref name="mycomics" value="9|32" sharing="BROADCAST"/>
<UserPref name="favoritesIdx" value="0" />
</Module>
<Module type="RSS">
<ModulePrefs xmlUrl="http://…" />
</Module>
<Module type="WEATHER" sharing="EDIT" refresh="SYNC">
<UserPref name="temperatureUnit" value="F" sharing="NO"/>
<Location name="New Orleans" country="US" language="en" />
<Location name="San Diego" country="US" language="en"/>
</Module>
</Section>
...
23 www.role-project.eu/mupple09

Towards an Open Architecture for sharing Web Spaces
24 www.role-project.eu/mupple09

Conclusion
• The vision is here
• one mainstream software editor seems to have embraced it…
• how to convince others to join in ?
• how to avoid multiple non-compatible formats to emerge ?
• W3C Web Apps work stops at Widget Level
• Enabling technologies are appearing
• Google Wave Federation Protocol & Client-Server Protocol
• DOM Server-side Event (HTML 5 ?)
• OpenSocial (participant lists : towards an OpenGroup) ?
• Lot of Opened Issues
• usability (esp. how to design widgets for collaboration ?)
• How to share the vision from now ?
25 www.role-project.eu/mupple09