Successfully reported this slideshow.

WIND presentation

1,638 views

Published on

This is the slides presented at the International Opensource Geospatial Research Symposium (OGRS 2009).

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

WIND presentation

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. WIND Core Concept UML model Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 9 / 25
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×