End-User Visual Design of Web-BasedEnd User Visual Design of Web Based Itneractive Applications making use of

geographical information: thegeographical information: the WINDMash approach

The Nhan LuongP t i k Et hPatrick Etcheverry

Thierry NodenotChristophe Marquesuzaàp q

Philippe Lopistéguy

IUT de Bayonne Pays BasqueLIUPPA laboratory – T2i team

1

Outline of my talk

1- Mashups for TEL :• Current trendsCurrent trends• Why did we go that way?

2- WindMash :S ifi ti d l li ti• Specifications and sample applications

• Principles and Technology used• Demo and current works

3- Synthesis 2

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

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

Mashups for TEL: why did we go that way (1) ?way (1) ?2001->2006 :2001 >2006 :

Focus on the design of PBL situationsStatic / Dynamic models of the learning scenario

TEL Design, Authoring

Static models

Computer scienceLearning sciences

(visual) Formalisms

Static models

Activity theory

Usability Dynamicmodels

Human-problem

Model transformation EvaluationValidationFormal models,

executabilty

Human problemsolving theory

cf. Educational Modeling Languages (IMS-LD) cf. CPM language and Tools cf. Cognitive Tutors Authoring Tools (CMU : Aleven, Koedinger)

y

5

Mashups for TEL: why did we go that p y gway (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

6

Area for the answers

Tutor areaTutor 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

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• Interactions should be designed from the geographical information

extracted from texts• The environment should provide designers with functionality to specify

hi h S ti l / T l / Th ti i f ti h ld b t ti llwhich Spatial / Temporal / Thematic information should be automatically 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

Specifications of WindMash (2)

C_ πR

C dti WindCode generation

ti

tj C GeoStream

Design… Wind Applications

Wind APIC_GeoStream Wind API

WindMash Environment

Wind Applications:-> Map viewer example

Connectors:

p p-> Viewers integration example

-> C_ πR example

Connectors: -> C_GeoStream example 8

Specifications of WindMash (3)

WindMash versus TEL Mashups current trends:• A Mashup Environment for designers particularly pedagogues (with no• A Mashup Environment for designers, particularly pedagogues (with no

computer science skills)

• WindMash combines : • Data Mashups (Semantic Mashups!)• Presentation MashupsPresentation Mashups • Integration Mashups

• WindMash is a Web tool built on top of a flexible, usable and lightweight framework: WIND API

9

WindMash: Principles and Technology p gyused (1)

10

WindMash: Principles and Technology p gyused (2)

- Web Services Technology, Ajax, JSON, Wire-It, …WIND API- WIND API

WindMash: the Data facetWindMash: the Data facet

It bl th d i t t i h i i hi hIt enables the designer to create a processing chain in whichthe input of text may be processed by dedicated modules.

Available modules can be parameterized by the designer toreach a specific goal: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 processg p12

WindMash: the Interface facet

The interface facet enables the designers (teachers) toorganize the interface (cf viewers) of the generatedg ( ) gapplication.

The interface facet takes advantage of the differentSensibleParts: 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 themap layer. A point represents a location, a place; a line represents a route, ariver, an itinerary; a polygon represents a region, a city, etc.

CalendarParts of a CalendarViewer may also be tagged and displayed.13

WindMash: the Interaction facetWindMash: the Interaction facet

The interaction facet sho ld allo the designers (teachers)The interaction facet should allow the designers (teachers)to design the interactions between the viewers (visualcomponents) displayed in the applicationcomponents) displayed in the application.

The formalism that we advocate is based on an extension ofUML di ( k i )UML sequence diagrams (work in progress).

Currently, by default, we automatically offer someinteractions between the TextViewer, the MapViewer andthe CalendarViewer.

14

WINDMash: some demos

Design of ECTEL application 15Preview of the result …Design of another application (Mupple V2) …

Synthesis (1)Synthesis (1)

WindMash is a prototype. We worked on its functionality, westill need to improve it. But we also need to assess and toi it bilitimprove its usability.

fExperiments of the WINDMash environment are conductedwith both pedagogues and learners.

16

Synthesis (2)Synthesis (2)

WindMash

17

Thank you for your attention!Thank you for your attention!

Thierry NodenotThierry Nodenot

18