WIND presentation
-
Upload
luong-the-nhan -
Category
Technology
-
view
1.478 -
download
2
Transcript of WIND presentation
WIND: an Interaction Lightweight Programming Model
for Geographical Web Applications
The Nhan [email protected]
Thierry NodenotPatrick 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
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
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
Introduction
Introduction
Our goal
To conceive a Web environment allowing teachers to produce by them--selves educational applications exploiting the spatio-temporal semanticsembedded into texts.
The conception activity is driven by interaction considerations.
The environment consists of a Web 2.0 designing interface and aspeci�c API dedicated to interaction model.
The source code should be open source so that it can be bene�ted inthe educational community.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 4 / 25
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
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
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).
Speci�c to this kind of application (not reusable).
=⇒ Generic model to design this kind of application: WIND (WebINteraction Design).
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 7 / 25
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
WIND Core Concept
UML model
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 9 / 25
WIND Core Concept
Model explanation
An interaction may be simply de�ned as a triple <area, event,
reactions>.i.e. an area (SensiblePart), under a speci�c user action (event),will launch system reactions (Reaction).
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 10 / 25
WIND Core Concept
Model explanation
An area (SensiblePart) can be a text area (TextPart) or a maparea (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
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
WIND Core Concept
Model explanation
A reaction (Reaction) results in a visual e�ect on one area(SensiblePart), which may be de�ned with di�erent 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
WIND Core Concept
Main features of WIND
WIND is object-oriented. WIND objects are simply created by theirclass constructor. Methods are disposed to implement relationshipsbetween objects. WIND model allows programming interactions forwhatever reactive areas thanks to polymorphism of the SensiblePartclass.
WIND is integrative. It combines textual, map and calendar�components�. The users may include within a web application asmany instances of each type of �components�.
WIND is executable thanks to its corresponding JavaScriptWIND-API. The users can simply design an interaction andimmediately execute it.
WIND is declarative. The code of a WIND-based application has avery 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
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
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
Implementation
Four programming steps for WIND-based application
1 Creating the application �components� with their characteristics.
2 Creating the sensible parts of each �component� de�ned in theprevious step.
3 De�ning the possible reactions for all the sensible parts.
4 De�ning the interactions upon previously de�ned sensible parts andreactions.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 17 / 25
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� de�ned 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
Implementation
JavaScript code example
CSS code:
<style>
.ville {
font-weight : bold; font-style : italic; font-size : 15pt;
color : blue; background-color: pink;}
</style>
3 De�ning the possible reactions for all the sensible parts.
var r1 = new WIND.Reaction(mp, 'highlight');
var r2 = new WIND.Reaction(tp, 'setStyleByClass:ville');4 De�ning the interactions upon previously de�ned 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
Implementation
Demo
http://erozate.iutbayonne.univ-pau.fr/wind/index.htmlLuong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 20 / 25
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
Future works
Improvement of the sensible part concept
Extension of the sensible part concept (especially TextPart andMapPart) in order to allow programmers de�ning sensible parts withhigher level semantics.For example: var tp = t.createSensiblePart('city'); createsautomatically 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
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 speci�cuser actions (cf. Fig. c).
(a) (b) (c)
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 23 / 25
Future works
Creation of authoring environment
Creation of a dedicated authoring environment allowing end-users(teachers) to design by themselves WIND-based interactionapplications without coding.
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 24 / 25
Thank you for your attention!
Questions?
The Nhan LUONG
Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 25 / 25