1. End User
End-User Visual Design of Web-Based
Web Based
Itneractive Applications making use of
geographical information: the
WINDMash approach
The Nhan Luong
Patrick Etcheverry
P t i k Et h
Thierry Nodenot
Christophe Marquesuzaà
p q
Philippe Lopistéguy
IUT de Bayonne Pays Basque
LIUPPA laboratory – T2i team
1

2. Outline of my talk
1- Mashups for TEL :
• Current trends
• Why did we go that way?
2- WindMash :
•S
Specifications and sample applications
ifi ti d l li ti
• Principles and Technology used
• Demo and current works
3- Synthesis 2

3. Mashups for TEL: Current
Trends (1)
• Mashup Environments for designers (Teachers,
Instructional Designers) : Limsee3 [Guerraz et al., 2007], …
• Mashup Environments for learners : Plef [Chatti et al. 2009],
ReMashed [Drachsler et al., 2009], …
Personal Learning Environments
3

4. Mashups for TEL: Current
Trends (2)
• Mashups by aggregation / Mashups by integration [Chatti et
al., 2009]
• Data Mashups, Logic Mashups, and Presentation Mashups
[Albinola et al., 2009]
4

5. Mashups for TEL: why did we go that
way (1) ?
2001 >2006
2001->2006 :
Focus on the design of PBL situations
Static / Dynamic models of the learning scenario
TEL Design, Authoring Computer science
Learning sciences
(visual) Static models
Formalisms
Activity theory
Usability
Dynamic
models
Human problem
Human-problem
solving theory Model transformation
Evaluation
Formal models,
Validation
executabilty
y
 cf. Educational Modeling Languages (IMS-LD) 5
 cf. CPM language and Tools
 cf. Cognitive Tutors Authoring Tools (CMU : Aleven, Koedinger)

6. Mashups for TEL: why did we g that
p y go
way (2) ?
A PBL activity dedicated to the Active Reading of a travel
narrative
Area for the instructions
Micro-world where the learner’s
cognitive activity takes place
Area for the answers
6
Tutor area
There are no tools to easily design such microworlds from an educational perspective.
We decided (2008) to focus on TEL applications making use of geographical information

7. Specifications of WindMash (1)
WindMash, a Mashup environment to design microworlds taking
advantage of the geographical information embedded in texts:
• Interactions should be designed from the geographical information
extracted from texts
• The environment should provide designers with functionality to specify
which S ti l / T
hi h Spatial Temporal / Th
l Thematic i f
ti information should b automatically
ti h ld be t ti ll
captured
• Designers should be able to decide which visual components (viewers) the
learners will be provided with (textual components, map components,
calendar components, …)
• Designers should be able to specify functionality offered by each viewer.
g p y y y
• Among these functionality, learners should be provided with annotation
facilities, if needed.
7

8. Specifications of WindMash (2)
C_ πR
ti Code
C d Wind
… Design
generation Applications
tj C_GeoStream
C GeoStream Wind API
WindMash Environment
Wind Applications:
-> Map viewer example
p p
-> Viewers integration example
Connectors:
-> C_GeoStream example 8
-> C_ πR example

9. Specifications of WindMash (3)
WindMash versus TEL Mashups current trends:
• A Mashup Environment for designers, particularly pedagogues (with no
designers
computer science skills)
• WindMash combines :
• Data Mashups (Semantic Mashups!)
• Presentation Mashups
• Integration Mashups
• WindMash is a Web tool built on top of a flexible, usable and lightweight
framework: WIND API
9

10. WindMash: Principles and Technology
p gy
used (1)
10

11. WindMash: Principles and Technology
p gy
used (2)
- Web Services Technology, Ajax, JSON, Wire-It, …
- WIND API

12. WindMash: the Data facet
It enables th d i
bl the designer t create a processing chain i which
to t i h i in hi h
the input of text may be processed by dedicated modules.
Available modules can be parameterized by the designer to
reach a specific goal:
 to normalize plain texts into the WIND format;
 to extract places (C_GeoStream), itineraries (C_ πR), etc;
 to intersect or to join previous results;
 to visualize design results with dedicated viewers to check the
design process
g p
12

13. WindMash: the Interface facet
The interface facet enables the designers (teachers) to
organize the interface (cf viewers) of the generated
g ( ) g
application.
The interface facet takes advantage of the different
SensibleParts:
 geographical information (TextPart) of a TextViewer is automatically
tagged by the Service modules of the data facet.
 MapParts of a MapViewer are automatically marked as geometries on the
map layer. A point represents a location, a place; a line represents a route, a
river, an itinerary; a polygon represents a region, a city, etc.
 CalendarParts of a CalendarViewer may also be tagged and 13
displayed.

14. WindMash: the Interaction facet
The interaction facet sho ld allo the designers (teachers)
should allow
to design the interactions between the viewers (visual
components) displayed in the application
application.
The formalism that we advocate is based on an extension of
UML sequence didiagrams (
(work i progress).
k in )
Currently, by default, we automatically offer some
interactions between the TextViewer, the MapViewer and
the CalendarViewer.
14

15. WINDMash: some demos
Design of ECTEL application Preview of the result …15
Design of another application (Mupple V2) …

16. Synthesis (1)
WindMash is a prototype. We worked on its functionality, we
still need to improve it. But we also need to assess and to
improve it usability.
i its bilit
Experiments of the WINDMash environment are conducted
f
with both pedagogues and learners.
16

17. Synthesis (2)
WindMash
17

18. Thank you for your attention!
Thierry Nodenot
18