towards collaborative portable web spaces

www.role-project.eu/mupple09

Towards Collaborative Portable Web Spaces

Stéphane Sire (speaking) Evgeny Bogdanov Matthias Palmér Denis Gillet

2 www.role-project.eu/mupple09

Mashup & Widgets progression

Source: eco.netvibes.com/universes

Source: www.programmableweb.com

What are we talking about ?

3

Mashup ?

Dashboard ?

Tab ?

Container ? Portal ?

Universe ? Space

Page ?


What is a Web Space ?

Components + Data-Flow wiring

4

Widgets + Grid Layout

Mashup

Tab, Universe, etc.

Web Space


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


Scenarios of Collaboration with Web Spaces


Portability Scenario


Cloning Scenario


Broadcasting Scenario


Co-Editing Scenario


What to share ?

11

Mashup

list of components

data-flow wiring of components

component settings

Widget Composition

list of widgets

layout

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="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

14

Copy of the Widget configuration


Our first implementation: iGoogle !

15

Broadcasting Co-Editing Widget Level

Cloning Space Level

Portability Space Level


Our first implementation (Cont’d)

16

Broadcasting scenario

Co-Editing scenario

Social Gadget


Our first implementation (Cont’d)

17

Cloning scenario


iGoogle : the most complete implementation up to date

18

Scenario Solution Widget Level

Space Level

Portability “Export / Import settings”

no yes

Cloning “Send my settings”

? yes

Broadcasting “View my content”

yes no

Co-Editing “View and edit my content”

yes no

•  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

23

<GadgetTabML version="1.0" xmlns="…/GadgetTabML/2008"> <Tab title="Accueil" skinUrl="skins/sampler.xml">

<Participants owner="alice">[email protected] [email protected] [email protected] [email protected]</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="[email protected] [email protected]"> <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 ? 25 www.role-project.eu/mupple09

towards collaborative portable web spaces

Technology

web sharing

web space4www

english web space

mashup level

broadcasting scenario

widget configuration14

w3c web apps work

space universe