This document presents WIND, an interaction model for designing geographical web applications. WIND uses an object-oriented model where an interaction consists of a sensible area, event, and reaction. Sensible areas can be text, maps, or calendars. The model is implemented as a JavaScript API and allows defining interactions through four steps. Future work includes improving the sensible area and event concepts and creating an authoring environment for non-programmers.

1. WIND: an Interaction Lightweight Programming Model
for Geographical Web Applications
The Nhan Luong
thenhan.luong@iutbayonne.univ-pau.fr
Thierry Nodenot
Patrick Etcheverry
Christophe Marquesuzaà
IUT de Bayonne Pays Basque
DESI team - LIUPPA
International Opensource Geospatial Research Symposium
(Nantes, July 8, 2009)
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 1 / 25

2. Outline
1 Introduction
2 WIND Core Concept
3 WIND Implementation
4 Future works
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 2 / 25

3. Introduction
Outline
1 Introduction
2 WIND Core Concept
3 WIND Implementation
4 Future works
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 3 / 25

4. Introduction
Introduction
Our goal
To conceive a Web environment allowing teachers to produce by them-
-selves educational applications exploiting the spatio-temporal semantics
embedded into texts.
The conception activity is driven by interaction considerations.
The environment consists of a Web 2.0 designing interface and a
specic API dedicated to interaction model.
The source code should be open source so that it can be beneted in
the educational community.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 4 / 25

5. Introduction
Starting point
3 features of geographic information embedded into travel stories:
1 Spatial feature
2 Temporal feature
3 Phenomenon feature
[Gaio, 2007]
Web Mapping Services: Google Maps, OpenLayers, IGN Geoportail.
Mashup environments enable to quickly create web-based applications.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 5 / 25

6. Introduction
Concerned application example
http://erozate.iutbayonne.univ-pau.fr/forbes2007/exp/
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 6 / 25

7. Introduction
Concerned application example
Starting point for educational activities.
This application embeds text, map and calendar components.
Management of interactions between these components.
Coded from scratch by developer (JF Boullier - Ph.D. student, 2007).
Specic to this kind of application (not reusable).
=⇒ Generic model to design this kind of application: WIND (Web
INteraction Design).
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 7 / 25

8. WIND Core Concept
Outline
1 Introduction
2 WIND Core Concept
3 WIND Implementation
4 Future works
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 8 / 25

9. WIND Core Concept
UML model
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 9 / 25

10. WIND Core Concept
Model explanation
An interaction may be simply dened as a triple area, event,
reactions.
i.e. an area (SensiblePart), under a specic user action (event),
will launch system reactions (Reaction).
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 10 / 25

11. WIND Core Concept
Model explanation
An area (SensiblePart) can be a text area (TextPart) or a map
area (MapPart) or a calendar area (CalendarPart).
Text area (TextPart): word or a set of words.
Map area (MapPart): geometry (point, line, polygon)
Calendar area (CalendarPart): date
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 11 / 25

12. WIND Core Concept
Model explanation
User action (event): attribute as String type.
For example:
left-click: (event = 'click')
double-click: (event = 'dbclick')
mouse-over: (event = 'mouseover')
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 12 / 25

13. WIND Core Concept
Model explanation
A reaction (Reaction) results in a visual eect on one area
(SensiblePart), which may be dened with dierent styles.
For example:
boldfacing a text area: (calledFunction = 'bold')
focusing a map area on the map: (calledFunction = 'focus')
highlighting a date on the calendar: (calledFunction =
'highlight')
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 13 / 25

14. WIND Core Concept
Main features of WIND
WIND is object-oriented. WIND objects are simply created by their
class constructor. Methods are disposed to implement relationships
between objects. WIND model allows programming interactions for
whatever reactive areas thanks to polymorphism of the SensiblePart
class.
WIND is integrative. It combines textual, map and calendar
components. The users may include within a web application as
many instances of each type of components.
WIND is executable thanks to its corresponding JavaScript
WIND-API. The users can simply design an interaction and
immediately execute it.
WIND is declarative. The code of a WIND-based application has a
very simple structure. The users only have to declare sensible parts,
events and reactions.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 14 / 25

15. Implementation
Outline
1 Introduction
2 WIND Core Concept
3 WIND Implementation
4 Future works
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 15 / 25

16. Implementation
http://erozate.iutbayonne.univ-pau.fr/wind/simpledemo.html
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 16 / 25

17. Implementation
Four programming steps for WIND-based application
1 Creating the application components with their characteristics.
2 Creating the sensible parts of each component dened in the
previous step.
3 Dening the possible reactions for all the sensible parts.
4 Dening the interactions upon previously dened sensible parts and
reactions.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 17 / 25

18. Implementation
JavaScript code example
Include WIND JavaScript API:
script type=text/javascript
src=http://erozate.iutbayonne.univ-pau.fr/wind/wind-api.js/
HTML code:
div id=mytext/ div id=mymap/
1 Creating the application components with their characteristics.
var t = new WIND.Text('mytext');
t.setContent(March 20th 2009: we are in Anglet today.
Anglet is located in the southwest of France.);
var m = new WIND.Map('mymap', {'type': Google_Street,
'longitude': -1.51, 'latitude': 43.49, 'zoom': 11});
2 Creating the sensible parts of each component dened previously.
var tp = t.createSensiblePart(Anglet);
var mp = m.createSensiblePart(POLYGON((-1.52 43.53,
-1.58 43.46,-1.44 43.48,-1.52 43.53)));
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 18 / 25

19. Implementation
JavaScript code example
CSS code:
style
.ville {
font-weight : bold; font-style : italic; font-size : 15pt;
color : blue; background-color: pink;}
/style
3 Dening the possible reactions for all the sensible parts.
var r1 = new WIND.Reaction(mp, 'highlight');
var r2 = new WIND.Reaction(tp, 'setStyleByClass:ville');
4 Dening the interactions upon previously dened sensible parts and
reactions.
var i1 = new WIND.Interaction(mp, 'click', null);
i1.addReaction(r1);
i1.addReaction(r2);
i1.activate();
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 19 / 25

20. Implementation
Demo
http://erozate.iutbayonne.univ-pau.fr/wind/index.html
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 20 / 25

21. Future works
Outline
1 Introduction
2 WIND Core Concept
3 WIND Implementation
4 Future works
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 21 / 25

22. Future works
Improvement of the sensible part concept
Extension of the sensible part concept (especially TextPart and
MapPart) in order to allow programmers dening sensible parts with
higher level semantics.
For example: var tp = t.createSensiblePart('city'); creates
automatically TextPart(s) having city semantics.
This work relies on space indexing processes elaborated by DESI team
(cf. PIIR, Loustau, 2008 and Geostream, Sallaberry, 2009).
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 22 / 25

23. Future works
Improvement of the user action concept
Improvement of the user action concept.
For example: the system may react after a sequence of several specic
user actions (cf. Fig. c).
(a) (b) (c)
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 23 / 25

24. Future works
Creation of authoring environment
Creation of a dedicated authoring environment allowing end-users
(teachers) to design by themselves WIND-based interaction
applications without coding.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 24 / 25

25. Thank you for your attention!
Questions?
The Nhan LUONG
thenhan.luong@iutbayonne.univ-pau.fr
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 25 / 25