Model-Driven Mashup
                         Personal Learning Environments
                               Mohamed Amine C...
Agenda



                         Mashup Personal Learning Environments
                         Mashup Development
     ...
Personal Learning Environments
                                                  Pedagogical Perspective

                ...
Personal Learning Environments
                                                   Technical Perspective

                 ...
Mashups
                         A new breed of Web applications
                         Combines content from more than ...
Mashup Types


                                                                          Mashups



                      ...
Mashup APIs
                         Source: Programmableweb (Total Mashups: 4333, APIs: 1461)




Lehrstuhl Informatik 5
...
JSON vs. XML
                         JSON is less verbose than XML

                                 {"city":"Denver", "s...
Server-Side Mashups




Lehrstuhl Informatik 5
(Informationssysteme)
   Prof. Dr. M. Jarke                 http://java.sun...
Client-Side Mashups (1)




Lehrstuhl Informatik 5
(Informationssysteme)
   Prof. Dr. M. Jarke                    http://j...
Client-Side Mashups (2)

                         Benefits of Client-Side Mashups
                              Easy to im...
Mashup Development
                         Ad hoc
                              Generated manually (HTML, CSS, JavaScript...
Model-Driven Mashups
                         To automatically mashup services from a                                     ...
Model-Driven Mashups with PLEF
                         Mashup learning services with minimum effort
                     ...
Mashups with SMD in PLEF (1)
                                                            Mashup Viewer                    ...
Mashups with SMD in PLEF (2)
                                                         Mashup Viewer                       ...
Model-Driven Mashups with SMD
                         Benefits of Model-Driven Mashups
                             Inter...
Demo




Lehrstuhl Informatik 5
(Informationssysteme)
   Prof. Dr. M. Jarke
    I5-MAC-18
Thank You!




Lehrstuhl Informatik 5
(Informationssysteme)
   Prof. Dr. M. Jarke
    I5-MAC-19
Upcoming SlideShare
Loading in...5
×

Model-Driven Mashup Personal Learning Environments

1,579

Published on

Presentation at the Mupple workshop, Nice, September 29, 2009

Published in: Education, Technology

Transcript of "Model-Driven Mashup Personal Learning Environments"

  1. 1. Model-Driven Mashup Personal Learning Environments Mohamed Amine Chatti, Matthias Jarke, Zhaohui Wang RWTH Aachen University, Germany Marcus Specht Open University Heerlen, Netherlands MUPPLE Workshop Lehrstuhl Informatik 5 Nice, September 29, 2009 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-1
  2. 2. Agenda Mashup Personal Learning Environments Mashup Development Model-Driven Mashup Development Service Mapping Description (SMD) PLEF: Model-Driven Mashup PLEs with SMD Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-2
  3. 3. Personal Learning Environments Pedagogical Perspective The environment in which I learn A more natural and learner- centric model to learning Lifelong Learning Informal Learning Put the learner at the center and give her control over the learning Personal Learning Environments experience Convergence of lifelong, informal Self Organized Learning Network Learning and network learning within a learner-controlled space Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-3
  4. 4. Personal Learning Environments Technical Perspective A PLE can be viewed as a self-defined collection of services, Me tools and devices that help learners build their PKNs Theories-in-use My PLE Devices My PKN Services/Tools People Information Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-4
  5. 5. Mashups A new breed of Web applications Combines content from more than one source into a single integrated tool Content is typically sourced via an API or a RSS Feed Typical mashup process User Input to mashup Output of Web Service 1 Service 1 Data Mediation Output of mashup Input of Web Service 2 Lehrstuhl Informatik 5 Service 2 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-5
  6. 6. Mashup Types Mashups Mashups by Mashups by Aggregation Integration • simply assemble sets of information from • create more complex applications different sources side by side within a single • integrate different APIs interface • need considerable programming expertise • do not require programming skills • PSP (e.g iGoogle, Netvibes) Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-6
  7. 7. Mashup APIs Source: Programmableweb (Total Mashups: 4333, APIs: 1461) Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-7
  8. 8. JSON vs. XML JSON is less verbose than XML {"city":"Denver", "state":"CO", "country":"US"} [{"city":"Denver", "state":"CO", "country":"US"}, <result> {"city":”Chicago", "state":”IL", "country":"US"}] <city>Denver</city> <state>CO</state> <country>US</country> <result> </result> <city>Denver</city> <state>CO</state> <country>US</country> </result> <result> <city>Chicago</city> <state>IL</state> <country>US</country> </result> JSON is easy to parse and work with on the client side var json = ‘{"city":"Denver", "state":"CO", "country":"US"}’ var result = eval ( ‘(‘ + json + ‘)’ ) Lehrstuhl Informatik 5 alert (result.city) (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-8
  9. 9. Server-Side Mashups Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke http://java.sun.com/developer/technicalArticles/J2EE/mashup_1/ I5-MAC-9
  10. 10. Client-Side Mashups (1) Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke http://java.sun.com/developer/technicalArticles/J2EE/mashup_2/ I5-MAC-10
  11. 11. Client-Side Mashups (2) Benefits of Client-Side Mashups Easy to implement No need for a server-side proxy Better performance than server-side mashups Less processing load on the server Less server-side code Problem XMLHttpRequests across domains Same Origin Policy (SOP) Solution JSON with Padding (JSONP) Cross-domain Ajax via JSONP Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-11
  12. 12. Mashup Development Ad hoc Generated manually (HTML, CSS, JavaScript) Time consuming Difficulty in data mediation Mashup building tools and platforms e.g. Google Mashup Editor, Yahoo! Pipes, Microsoft Popfly GME for mashup programmers Restricted to RSS/ATOM services Integration and Mediation Limited to company’s internal services Scalability Solution Models to describe Web services and Lehrstuhl Informatik 5 mashups (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-12 Model-Driven Mashup Development
  13. 13. Model-Driven Mashups To automatically mashup services from a SA-REST - Complex microformats (RDFa or GRDDL) description of the same - Common ontology Implement mashups as configurations of services - Specification of lifting and lowering schemas defined via metadata Description of Web Services WSDL / SAWSDL (W3C recommendation 2007) WADL / SA-REST (Lathem et al., 2007) XML-based Server-side mashups Service Mapping Description (SMD) (Zyp, 2008) Annotation of RESTful and JSON-RPC services Description of service invocation, parameters, and output Lightweight (Simple JSON representation) Lehrstuhl Informatik 5 (Informationssysteme) Based on JSON Schema Prof. Dr. M. Jarke I5-MAC-13
  14. 14. Model-Driven Mashups with PLEF Mashup learning services with minimum effort Scalable model-driven client-side mashups of RESTful services based on SMD and JSONP Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-14
  15. 15. Mashups with SMD in PLEF (1) Mashup Viewer Client RESTful SMashup Editor RESTful Service Provider 8 Service Provider 1 2 Service 1 Service 2 4 6 Http Get Http Get URL URL Service URL Service URL JSONP Response 5 7 JSONP Service Selector Inputs Inputs Response SMD SMD URL Data URL Mediation Outputs Outputs GWT JSONParser XMLHttpRequest (GWT RPC or GWT Requestbuilder) 1 3 Services for mashup SMD1 + SMD2 HttpRequest HttpRequest 2 2 Server Lehrstuhl Informatik 5 (Informationssysteme) Proxy Server Prof. Dr. M. Jarke I5-MAC-15
  16. 16. Mashups with SMD in PLEF (2) Mashup Viewer Client RESTful SMashup Editor RESTful Service Provider 8 Service Provider 1 2 Service 1 Service 2 4 6 Http Get Http Get URL URL Service URL Service URL JSONP Response 5 7 JSONP Service Selector Inputs Inputs Response SMD URL Data SMD URL Mediation Outputs Outputs GWT JSONParser JSONP JSONP Request Request Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-16
  17. 17. Model-Driven Mashups with SMD Benefits of Model-Driven Mashups Interoperability Reuse and sharing Extensibility and scalability Flexibility and customization Automatic data integration and mediation Automatic service invocation User-friendliness Benefits of Model-Driven Mashups with SMD Client-side mashups Cross-domain Ajax mashups via JSONP Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-17
  18. 18. Demo Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-18
  19. 19. Thank You! Lehrstuhl Informatik 5 (Informationssysteme) Prof. Dr. M. Jarke I5-MAC-19

×