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

2. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 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

3. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 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...

4. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 4 Web Objects – Web Components Data Object Acces s AP I + Function name Parameters displa y

5. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 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

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

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

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

9. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 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

10. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 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)

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

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

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

14. Mlearning 2009 A. Beugnard & J.-M. Gilliotpage 14 HTML ? Usually copy/paste given code May need to include a whole page : - loading it... are other options Check what your site will accept