SlideShare a Scribd company logo
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

More Related Content

PDF
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
PDF
Building, Collaborating and Scaling Drupal Distributions for Federated Organi...
PDF
Nouvelles méthodes de développement web avec les technologies centrées doc...
PPT
Rich User Interaction with SVG
PDF
Small Data in the large with Oppidum
PPTX
Editing XML data with XForms
PPT
ePUAP: Środowisko Budowy Aplikacji
PPT
ePUAP Zakladanie Konta
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
Building, Collaborating and Scaling Drupal Distributions for Federated Organi...
Nouvelles méthodes de développement web avec les technologies centrées doc...
Rich User Interaction with SVG
Small Data in the large with Oppidum
Editing XML data with XForms
ePUAP: Środowisko Budowy Aplikacji
ePUAP Zakladanie Konta

Similar to Towards Collaborative Portable Web Spaces (20)

PDF
Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09
PDF
Best Practices in Widget Development - Examples and Counterexamples
KEY
Google App Engine Java, Groovy and Gaelyk
PDF
Desktop apps with node webkit
PPTX
Custom Runtimes for the Cloud
PDF
MvvmCross Seminar
PDF
MvvmCross Introduction
PDF
Android - Open Source Bridge 2011
PDF
Flutter vs Java Graphical User Interface Frameworks - text
PDF
Building Mobile Websites with Joomla
PDF
Drupalcamp New York 2009
PPTX
Plone FSR
PDF
Web app and more
PDF
Web Apps and more
PDF
Transmission2 25.11.2009
PDF
Dojo (QCon 2007 Slides)
PPT
Techniques For A Modern Web UI (With Notes)
PPTX
Starting with jQuery
PDF
Apache Flex and the imperfect Web
PPTX
Transforming the web into a real application platform
Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09
Best Practices in Widget Development - Examples and Counterexamples
Google App Engine Java, Groovy and Gaelyk
Desktop apps with node webkit
Custom Runtimes for the Cloud
MvvmCross Seminar
MvvmCross Introduction
Android - Open Source Bridge 2011
Flutter vs Java Graphical User Interface Frameworks - text
Building Mobile Websites with Joomla
Drupalcamp New York 2009
Plone FSR
Web app and more
Web Apps and more
Transmission2 25.11.2009
Dojo (QCon 2007 Slides)
Techniques For A Modern Web UI (With Notes)
Starting with jQuery
Apache Flex and the imperfect Web
Transforming the web into a real application platform
Ad

Recently uploaded (20)

PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
Cloud computing and distributed systems.
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Empathic Computing: Creating Shared Understanding
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Electronic commerce courselecture one. Pdf
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPT
Teaching material agriculture food technology
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Cloud computing and distributed systems.
The Rise and Fall of 3GPP – Time for a Sabbatical?
Unlocking AI with Model Context Protocol (MCP)
Reach Out and Touch Someone: Haptics and Empathic Computing
Network Security Unit 5.pdf for BCA BBA.
Empathic Computing: Creating Shared Understanding
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Electronic commerce courselecture one. Pdf
Building Integrated photovoltaic BIPV_UPV.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Programs and apps: productivity, graphics, security and other tools
Understanding_Digital_Forensics_Presentation.pptx
Encapsulation_ Review paper, used for researhc scholars
Mobile App Security Testing_ A Comprehensive Guide.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
The AUB Centre for AI in Media Proposal.docx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Teaching material agriculture food technology
Ad

Towards Collaborative Portable Web Spaces

  • 1. Towards Collaborative Portable Web Spaces Stéphane Sire (speaking) Evgeny Bogdanov Matthias Palmér Denis Gillet www.role-project.eu/mupple09
  • 2. Mashup & Widgets progression Source: Source: www.programmableweb.com eco.netvibes.com/universes 2 www.role-project.eu/mupple09
  • 3. What are we talking about ? Page ? Mashup ? Tab ? Space Universe ? Dashboard ? Container ? Portal ? 3 www.role-project.eu/mupple09
  • 4. What is a Web Space ? Components + Data-Flow wiring Mashup Widgets + Grid Layout Tab, Universe, etc. Web Space 4 www.role-project.eu/mupple09
  • 5. 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
  • 6. Scenarios of Collaboration with Web Spaces 6 www.role-project.eu/mupple09
  • 7. Portability Scenario 7 www.role-project.eu/mupple09
  • 8. Cloning Scenario 8 www.role-project.eu/mupple09
  • 9. Broadcasting Scenario 9 www.role-project.eu/mupple09
  • 10. Co-Editing Scenario 10 www.role-project.eu/mupple09
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. Example: sharing a widget on Netvibes Copy of the Widget configuration 14 www.role-project.eu/mupple09
  • 15. Our first implementation: iGoogle ! Cloning Space Level Broadcasting Co-Editing Widget Level Portability Space Level 15 www.role-project.eu/mupple09
  • 16. Our first implementation (Cont’d) Broadcasting scenario Co-Editing scenario Social Gadget 16 www.role-project.eu/mupple09
  • 17. Our first implementation (Cont’d) Cloning scenario 17 www.role-project.eu/mupple09
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. Proposition for XML based configuration languages 22 www.role-project.eu/mupple09
  • 23. 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
  • 24. Towards an Open Architecture for sharing Web Spaces 24 www.role-project.eu/mupple09
  • 25. 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