�ݺ�ߣ

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 ?


What is a Web Space ?

Components + Data-Flow wiring Mashup

Widgets + Grid Layout Tab, Universe, etc.

Web Space


Web Spaces are the next big stuff in Web Sharing !

TODAY

•  Pages : blogs, wikis
•  Videos : YouTube
•  �ݺ�ߣs : 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


Scenarios of Collaboration with Web Spaces


Portability Scenario


Cloning Scenario


Broadcasting Scenario


Co-Editing Scenario


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


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 :


Example:
broadcasting a mashup dashboard on www.afrous.com

<script type="text/javascript"
src=/slideshow/towards-collaborative-portable-web-spaces/2109953/"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>


Example: sharing a widget on Netvibes

Copy of the
Widget
configuration


Our first implementation: iGoogle !

Cloning
Space Level

Broadcasting
Co-Editing
Widget Level

Portability
Space Level


Our first implementation (Cont’d)

Broadcasting
scenario

Co-Editing
scenario

Social Gadget


Our first implementation (Cont’d)

Cloning
scenario


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

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


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>

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


Proposition for XML based configuration languages


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


Towards an Open Architecture for sharing Web Spaces


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 ?

�ݺ�ߣ

Towards Collaborative Portable Web Spaces

More Related Content

Towards Collaborative Portable Web Spaces