Mobile Learning Summer School http://conferences.telecom-bretagne.eu/mlearning09/ Practice of course : software architecture for adaptive and mobile learning

1. Prototype your architecture for
your pedagogical activity
Antoine Beugnard and
Jean-Marie Gilliot

2. Context and Goals
Fast prototyping
M-learning context
Web Infrastructure
Think (architecture) different !
Goals
Just make a prototype
How to derive on a real architecture
page 2 Mlearning 2009 A. Beugnard & J.-M. Gilliot

3. Agenda
Components examples
How to assemble ?
A web page on a server
a blog is one easy option
A pbworks wiki is another
DIY : Do It Yourself
Try it
and your neighbour post
And others ...
page 3 Mlearning 2009 A. Beugnard & J.-M. Gilliot

4. Web Objects – Web Components
Access Object
+
Function name Data
Parameters API
display
page 4 Mlearning 2009 A. Beugnard & J.-M. Gilliot

5. Component Examples
A document (video/ slide / …) hosted on any website
RSS
Reader
Agregator/ Storyteller :
Embeddable Video
Toxkbox, DimDim …
Any web2.0 Tool :
WallWisher : http://www.wallwisher.com/wall/mlearning09
Sources
http://www.go2web20.net/
http://www.programmableweb.com/tag/mobile
page 5 Mlearning 2009 A. Beugnard & J.-M. Gilliot

6. How to make the glue ?
(another view for 3-tier architecture)
Object
Client side
Data
Combination of data
Server Side
Seed Site Object
Intermedary site Data
Object Object
+
Data Data
page 6 Mlearning 2009 A. Beugnard & J.-M. Gilliot

7. Making some glue without programming
Publish a web document (Intermedary Server Side)
Blog Post : http://molene.enstb.org/mlearning09/
Or any other …
Wiki Page : http://www.pbworks.com Copy,
Paste
Add some components &
Adapt
In my example
Collaborative Document : WallWisher
Just as an iframe
<iframe src="http://www.wallwisher.com/embed/mlearning09"
frameborder="0" width="100%" height="400px" style="border: 1px solid #999999">
loading it...</iframe>
Your datas : slide show of collected pictures
Get <embed> code from any website
That's independant components
page 7 Mlearning 2009 A. Beugnard & J.-M. Gilliot

8. More Components
Video Tokbox
Added in the post
Added as a side Widget
Twitter / other interface
Side Widget
page 8 Mlearning 2009 A. Beugnard & J.-M. Gilliot

9. Making some glue without programming
Aggregate feeds
Connecting Data in Google Docs
(Seed Server Side)
Define a Form
(or share mine !)
To collect data
Use the spreadsheet
To compute your collected data
Add a Gadget : a Map / a List / A drawing / a cell
Export it !
To use your results
page 9 Mlearning 2009 A. Beugnard & J.-M. Gilliot

10. Results
Fully accessible application
Collaborative space
Video / twitter for exchange
Form to collect data
MCQ
Location
Gadget to export results (maybe on another place)
page 10 Mlearning 2009 A. Beugnard & J.-M. Gilliot

11. Google inside ?
Easy to use
Enable connexions between components (Gadgets)
Should everything be Google hosted ?
We said we just want a prototype !
page 11 Mlearning 2009 A. Beugnard & J.-M. Gilliot

12. A collaborative page
Adding information on a collaborative workspace
Adding information on a map
Enabling additional exchanges :
Twitter
Video
Chat
page 12 Mlearning 2009 A. Beugnard & J.-M. Gilliot

13. Few tricks
Define your scenario
What will happen ?
Requirements
Define/Find appropriate components
Collect it on a page
Remind your HTML
page 13 Mlearning 2009 A. Beugnard & J.-M. Gilliot

14. HTML ?
Usually copy/paste given code
May need to include a whole page :
<iframe src="http://www.wallwisher.com/embed/mlearning09"
frameborder="0" width="100%" height="400px" style="border:
1px solid #999999">loading it...</iframe>
<embed> <object> are other options
Check what your site will accept
page 14 Mlearning 2009 A. Beugnard & J.-M. Gilliot