Demos of different gadget and web technologies that can be used for learning and education. Focus on OpenSocial and its Space extension. Note: Some APIs are not currently supported by OpenSocial and will be available in OpenSocial 2.1. All APIs work in Graaasp.

1. OpenSocial in Education and Learning
Evgeny Bogdanov
May 30, 2011
1/26

2. Content
Educational scenario: now
Educational scenario: better
Space concept
Graaasp as a platform supporting spaces
Opensocial gadgets (why and how)
Demos
Ideas gathering
2/26

3. Intro: Educational scenario
Now: Remote experimentation (Automatic control at EPFL)
People
Professor
Assistants
Students
Resources
Description of experimental setting
Instructions
Theory book
Apps
Device in the lab
Remote access to device
3/26

4. Intro: Educational scenario (extended)
Extension: Remote experimentation (Automatic control at EPFL)
People - social platform → more interaction
Professor
Assistants
Students
Resources
Description of experimental setting
Instructions
Theory book
External info - Wikipedia, Youtube videos, Slideshare
Apps
Device in the lab
Remote access to device
Chat, Visualizations, Recommendations
4/26

5. Space concept
Definition
Space is an abstract concept that shapes the context in which user
is currently placed. It normally consists of:
People
Applications
Resources
Sub-spaces
Example
A space can represent a group of people, a university course, a
company division, a folder, a forum, a blog, etc.
Definition
Widget or Gadget is a [small] application that can be installed and
executed within a web page by an end user (Wikipedia)
5/26

6. Educational scenario in Graaasp
6/26

7. OpenSocial gadgets understanding
7/26

8. Demo: Gadgets and OpenSocial
Widgets container (functional skin)
Resources viewer widget (youtube, etc.)
Recommendations widget (recommendations from Graaasp)
Remote lab (functional skin)
Remote experimentation widget (gyroscope example)
3D widget (3D pad)
2D widget (graph based on data from assets)
OpenApp interwidget communication
Chat widget
Graaasp’s 3D pad in iGoogle
Remote lab in iGoogle
8/26

9. Functional skin / Bundle: Widget container
This functional skin takes all widgets from a space and shows them
in a grid layout: two column view.
9/26

10. Functional skin: Resources player
This functional skin, when added to a space, allows to view
content of all documents from a space. For example, youtube
videos, slideshare presentations, wikipedia, etc.
10/26

11. Widget: Recommender
This is a recommender gadget. When added to a space, it allows
to get recommendations for this space.
11/26

12. Functional skin / Bundle: Remote lab
This is an example how functional skin “Widget container” is used.
Four widgets are integrated together within a functional skin to
provide user with remote lab experience.
12/26

13. Widget: Remote experimentation (Gyroscope)
This gadget shows a rotating gyroscope model. When it is added
to a space, it displays people in the space that can collaborate over
this gyroscope.
13/26

14. Functional skin: 3D pad
This is a functional skin gadget. When added to a space, it allows
to view all items from a space in 3D space.
14/26

15. Widget: 2D Graph
Gadget to display data as graphs. Takes data from assets in a
space and shows it on the graph.
15/26

16. Widget: OpenApp interwidget communication
One gadget sends data, another receives it.
16/26

17. Widget: Chat
Chat gadgets allows people to talk to each other.
17/26

18. Portability: Graaasp’s frozen 3D pad in iGoogle
This is a frozen gadget. It is generated in Graaasp and taken to
other containers (iGoogle for example).
18/26

19. Portability: Remote lab functional skin in iGoogle
This is a Remote lab widget running in iGoogle.
19/26

20. REST API
http://graaasp.epfl.ch/rest/spaces/4/@person
http://graaasp.epfl.ch/rest/applications/4/@space
http://graaasp.epfl.ch/rest/documents/4/@person
http://graaasp.epfl.ch/rest/people/4/@self/@space
http://graaasp.epfl.ch/rest/recommender/4/@person
20/26

21. RPC API
osapi.spaces.get({contextId: “4”, contextType: “@person”})
osapi.applications.get({contextId: “4”, contextType:
“@space”})
osapi.documents.get({contextId: “4”, contextType:
“@person”})
osapi.recommendations.get({contextId: “4”, contextType:
“@space”})
People are a bit different (shindig hack)
osapi.people.get({userId: “4”, personId: “@person”, groupId:
“@self”})
21/26

22. Useful RPC request
Get current context (Space or Person)
osapi.context.get().execute(function(context){
// context.contextId = "1"
// context.contextType = "@space"
});
Get current viewer
osapi.people.getViewer().execute(function(viewer){
// viewer.id
// viewer.displayName
});
22/26

23. Reminder!
Widgets can exchange data with each other
Widgets can get data about space containing it
Widgets have access to container information:
spaces/people/applications/documents
Widgets have access to Realtime aspects (collaboration)
All other Web stuff is available (2D,3D,calculation,etc.)
23/26

24. Ideas gathering!
Geography
scenario: on word selection in w1 show location in w2
widget1: view Geography resource
widget2: google map with location
History
scenario: on word selection in w1 show location in w2 and
wikipedia entry in w3
widget1: content viewer (history book)
widget2: on word selection show google map with location
widget3: wikipedia entry
Chemistry
widget1: Formula editing widget
widget2: 3D view of a molecule
Math course
widget1: Formula editing widget
Remote lab at LA gadget
widget1: Formula editing
widget2: notes taking tool
24/26

25. References 1
OpenSocial gadgets
Templating
http://opensocial-resources.googlecode.com/svn/
spec/2.0/OpenSocial-Templating.xml
Gadget
http://opensocial-resources.googlecode.com/svn/
spec/2.0/Core-Gadget.xml
OSAPI
http://opensocial-resources.googlecode.com/svn/
spec/2.0/Social-Gadget.xml
OpenSocial Space extension
http:
//docs.opensocial.org/display/OSD/Space+Proposal
25/26

26. References 2
3D graphics - WebGL + C3DL
2D graphics (scalar) - RGraph
2D graphics (vector) - Raphael (JavaScript library)
Interwidget communication: OpenApp
Websocket and HTML5
XMPP
26/26