Practice mashups. Mlearning 2009
Download as ODP, PDF0 likes637 views
The document discusses prototyping architecture for pedagogical activities in m-learning, focusing on fast prototyping through various web components and tools. It emphasizes the use of accessible web objects, the integration of data sources, and the assembly of these elements into a collaborative educational environment. Additionally, it provides practical examples and tips for creating interactive components without extensive programming knowledge.
Practice mashups. Mlearning 2009
- 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