WINDMash prensentation at DocEng 2011

1. A Framework with Tools for Designing Web-based Geographic Applications T. Nhˆn Luong, S´bastien Laborie, Thierry Nodenot a e DocEng 2011 in Mountain View, California, USA September 20th, 2011 thenhan.luong@iutbayonne.univ-pau.fr http://www.luongthenhan.com 1 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

2. Introduction Context Example of a Web-based geographic application A French course for discovering towns, “d´partements” and “pr´fectures”. e e 2 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

5. Introduction Problems Developing such applications is not straightforward Needs programming skills in order to create an interactive Web application (e.g., JavaScript or AJAX) Requires knowledge about several geographic databases (e.g., query and get spatial data, such as geolocations) Requires using of diﬀerent Web services (e.g., aggregate indexing service ouputs) 3 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

6. Introduction Problems Developing such applications is not straightforward Needs programming skills in order to create an interactive Web application (e.g., JavaScript or AJAX) Requires knowledge about several geographic databases (e.g., query and get spatial data, such as geolocations) Requires using of diﬀerent Web services (e.g., aggregate indexing service ouputs) Goal: Propose a framework with tools for simplifying the design of Web-based geographic applications 3 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

7. Outline Outline 1 A framework for designing Web-based geographic applications 2 A uniﬁed model for describing geographic applications The data model part The graphical interface model part The user interaction model part 3 Our WINDMash prototype The WINDMash architecture The WINDMash tools 4 Conclusion and future work 4 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

8. A framework for designing Web-based geographic applications Outline 1 A framework for designing Web-based geographic applications 2 A uniﬁed model for describing geographic applications The data model part The graphical interface model part The user interaction model part 3 Our WINDMash prototype The WINDMash architecture The WINDMash tools 4 Conclusion and future work 5 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

9. A framework for designing Web-based geographic applications A framework for designing geographic applications Three sequential phases: 1 Identifying the data handled by the geographic application. 2 Specifying the graphical layout (e.g., data displayers) of the geographic application. 3 Deﬁning user interactions on the data contained inside displayers. Data should guide the design of Web-based geographic applications. 6 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

10. A uniﬁed model for describing geographic applications Outline 1 A framework for designing Web-based geographic applications 2 A uniﬁed model for describing geographic applications The data model part The graphical interface model part The user interaction model part 3 Our WINDMash prototype The WINDMash architecture The WINDMash tools 4 Conclusion and future work 7 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

11. A unified model for describing geographic applications A unified model for describing geographic applications This model is structured into three parts: The data part: Different categories of data (e.g., contents, annotations) The graphical interface part: Different types of displayers (e.g., MapDisplayer, TextDisplayer, ListDisplayer) The user interaction part: Different kinds of user interactions (e.g., zooming, highlighting) Description of each part is encoded into RDF/XML: Aggregate, share and reuse descriptions; Describe independently each part; Link a description to another description; Execute semantic queries on descriptions. The unified model description corresponds to a merging of the descriptions of the three parts. 8 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

12. A uniﬁed model for describing geographic applications The data model part The data model part Two categories of data: Content and Annotation 9 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

13. A uniﬁed model for describing geographic applications The data model part The data model part Two categories of data: Content and Annotation To date, we have taken into account only textual contents and geographic information. 9 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

14. A uniﬁed model for describing geographic applications The data model part The data model part Two categories of data: Content and Annotation To date, we have taken into account only textual contents and geographic information. This model part may well be extended later, e.g., to take into account multimedia contents. 9 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

15. A uniﬁed model for describing geographic applications The data model part A data description example <rdf:RDF> <wm:Content rdf:about="&ex;text.txt"> <wm:annotation> <wm:GeographicInformation rdf:about="&ex;data.rdf#Annotation1"> <wm:entityName>Cannes</wm:entityName> <wm:in> <rdf:Description> <wm:start rdf:resource="&ex;text.txt#Par1-Token9"/> <wm:end rdf:resource="&ex;text.txt#Par1-Token9"/> </rdf:Description> </wm:in> <wm:spatialInfo> <wm:SpatialInformation rdf:about="&geotopia;#Cannes"> <wm:geolocation>MULTIPOLYGON(...)</wm:geolocation> <wm:geoname>Cannes</wm:geoname> <wm:geotype rdf:resource="&geotopia;#Town"/> </wm:SpatialInformation> </wm:spatialInfo> </wm:GeographicInformation> ... </wm:annotation> </wm:Content> </rdf:RDF> 10 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

20. A uniﬁed model for describing geographic applications The graphical interface model part The graphical interface model part A GUI is made up of displayers and may show annotations. 11 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

21. A uniﬁed model for describing geographic applications The graphical interface model part The graphical interface model part A GUI is made up of displayers and may show annotations. To date, we have been working with three types of displayers (MapDisplayer, TextDisplayer, ListDisplayer). 11 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

22. A uniﬁed model for describing geographic applications The graphical interface model part The graphical interface model part A GUI is made up of displayers and may show annotations. To date, we have been working with three types of displayers (MapDisplayer, TextDisplayer, ListDisplayer). This part may well be extended to manage other types of displayers: e.g., CalendarDisplayer, ImageDisplayer, VideoDisplayer. 11 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

23. A uniﬁed model for describing geographic applications The graphical interface model part A graphical interface description example <rdf:RDF> <rdf:Description rdf:about="&ex;gui.rdf"> <wm:title>French course</wm:title> <wm:displayers> <rdf:Bag> <rdf:li> <rdf:Description rdf:about="&ex;gui.rdf#Displayer1"> <rdf:type rdf:resource="&ex;MapDisplayer"/> <wm:width>300</wm:width> <wm:height>300</wm:height> <wm:left>300</wm:left> <wm:top>20</wm:top> <wm:hasData> <rdf:Seq> <rdf:li rdf:resource="&ex;data.rdf#Annotation1"/> ... </rdf:Seq> </wm:hasData> </rdf:Description> </rdf:li> ... </rdf:Bag> </wm:displayers> </rdf:Description> </rdf:RDF> 12 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

26. A uniﬁed model for describing geographic applications The user interaction model part The user interaction model part A user can interact with the geographic application We consider that an interaction involves an event and several actions An event is characterized by its type and where it occurs on screen An event may trigger several actions, e.g., highlighting, zooming Events and actions occur through annotations. 13 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

27. A uniﬁed model for describing geographic applications The user interaction model part The user interaction model part A user can interact with the geographic application We consider that an interaction involves an event and several actions An event is characterized by its type and where it occurs on screen An event may trigger several actions, e.g., highlighting, zooming Click Zooming Events and actions occur through annotations. 13 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

28. A uniﬁed model for describing geographic applications The user interaction model part A user interaction description example <rdf:RDF> <rdf:Description rdf:about="&ex;hci.rdf"> <wm:contains> <rdf:Bag><rdf:li> <rdf:Description rdf:about="&ex;hci.rdf#I1"> <wm:event> <rdf:Description rdf:about="&ex;hci.rdf#Evt1"> <rdf:type rdf:resource="&ex;Click"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:via rdf:resource="&ex;gui.rdf#Displayer2"/> <wm:triggers rdf:resource="&ex;hci.rdf#Action1"/> </rdf:Description> </wm:event> <wm:action> <rdf:Description rdf:about="&ex;hci.rdf#Action1"> <rdf:type rdf:resource="&ex;Zoom"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:in rdf:resource="&ex;gui.rdf#Displayer1"/> </rdf:Description> </wm:action> </rdf:Description> </rdf:li></rdf:Bag> </wm:contains> </rdf:Description> 14 </rdf:RDF> T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

29. A uniﬁed model for describing geographic applications The user interaction model part A user interaction description example <rdf:RDF> <rdf:Description rdf:about="&ex;hci.rdf"> <wm:contains> <rdf:Bag><rdf:li> <rdf:Description rdf:about="&ex;hci.rdf#I1"> <wm:event> <rdf:Description rdf:about="&ex;hci.rdf#Evt1"> <rdf:type rdf:resource="&ex;Click"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:via rdf:resource="&ex;gui.rdf#Displayer2"/> <wm:triggers rdf:resource="&ex;hci.rdf#Action1"/> </rdf:Description> </wm:event> <wm:action> <rdf:Description rdf:about="&ex;hci.rdf#Action1"> <rdf:type rdf:resource="&ex;Zoom"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:in rdf:resource="&ex;gui.rdf#Displayer1"/> </rdf:Description> </wm:action> </rdf:Description> </rdf:li></rdf:Bag> </wm:contains> </rdf:Description> 14 </rdf:RDF> T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

30. A uniﬁed model for describing geographic applications The user interaction model part A user interaction description example <rdf:RDF> <rdf:Description rdf:about="&ex;hci.rdf"> <wm:contains> <rdf:Bag><rdf:li> <rdf:Description rdf:about="&ex;hci.rdf#I1"> <wm:event> Click <rdf:Description rdf:about="&ex;hci.rdf#Evt1"> <rdf:type rdf:resource="&ex;Click"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:via rdf:resource="&ex;gui.rdf#Displayer2"/> <wm:triggers rdf:resource="&ex;hci.rdf#Action1"/> </rdf:Description> </wm:event> <wm:action> <rdf:Description rdf:about="&ex;hci.rdf#Action1"> <rdf:type rdf:resource="&ex;Zoom"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:in rdf:resource="&ex;gui.rdf#Displayer1"/> </rdf:Description> </wm:action> </rdf:Description> </rdf:li></rdf:Bag> </wm:contains> </rdf:Description> 14 </rdf:RDF> T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

31. A uniﬁed model for describing geographic applications The user interaction model part A user interaction description example <rdf:RDF> <rdf:Description rdf:about="&ex;hci.rdf"> <wm:contains> <rdf:Bag><rdf:li> <rdf:Description rdf:about="&ex;hci.rdf#I1"> <wm:event> <rdf:Description rdf:about="&ex;hci.rdf#Evt1"> <rdf:type rdf:resource="&ex;Click"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:via rdf:resource="&ex;gui.rdf#Displayer2"/> <wm:triggers rdf:resource="&ex;hci.rdf#Action1"/> Zooming </rdf:Description> </wm:event> <wm:action> <rdf:Description rdf:about="&ex;hci.rdf#Action1"> <rdf:type rdf:resource="&ex;Zoom"/> <wm:over rdf:resource="&ex;data.rdf#Town"/> <wm:in rdf:resource="&ex;gui.rdf#Displayer1"/> </rdf:Description> </wm:action> </rdf:Description> </rdf:li></rdf:Bag> </wm:contains> </rdf:Description> 14 </rdf:RDF> T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

32. A uniﬁed model for describing geographic applications The uniﬁed model 15 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

33. Our WINDMash prototype Outline 1 A framework for designing Web-based geographic applications 2 A uniﬁed model for describing geographic applications The data model part The graphical interface model part The user interaction model part 3 Our WINDMash prototype The WINDMash architecture The WINDMash tools 4 Conclusion and future work 16 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

34. Our WINDMash prototype The WINDMash architecture The WINDMash architecture 17 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

35. Our WINDMash prototype The WINDMash architecture The WINDMash architecture Three modules based on the phases: contain design tools; generate RDF/XML descriptions. The RDF merging of all descriptions corresponding to our uniﬁed model. Code generator written in PHP. XHTML Web pages with JavaScript instructions. 18 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

36. Our WINDMash prototype The WINDMash tools Data visual speciﬁcation Adapted from Yahoo! Pipes editor. Designers can create/save/load their ad hoc data processing chain. The button “Run” validates the pipe and executes it. 19 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

43. Our WINDMash prototype The WINDMash tools Graphical layout speciﬁcation A WYSIWYG editor where the designer decides which type of displayer he/she wants and how these displayers are organized inside the Web application. 20 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

44. Our WINDMash prototype The WINDMash tools Graphical layout speciﬁcation A WYSIWYG editor where the designer decides which type of displayer he/she wants and how these displayers are organized inside the Web application. 1 2 20 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

45. Our WINDMash prototype The WINDMash tools Graphical layout speciﬁcation A WYSIWYG editor where the designer decides which type of displayer he/she wants and how these displayers are organized inside the Web application. 1 2 4 3 20 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

50. Our WINDMash prototype The WINDMash tools Interaction visual speciﬁcation To date, this UML-like sequence diagram builder allows to create lifelines and to specify messages between them via arrows. 21 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

56. Our WINDMash prototype Prototype demonstration Available at: http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash3/ Can (Must ;-)) be seen in the Demo session! At 16:15 after Coﬀee Break. 22 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

57. Conclusion and future work Conclusion We have defined a framework for designing Web-based geographic applications Our framework addresses 3 complementary tasks: managing the data manipulated by the application; describing the graphical layout; specifying user interactions. We have shown that annotations are central in the design process: annotations used in each design phase; annotations used to specify the global unified model. We have developed the WINDMASH prototype: an online prototype (no installation needed); contains tools for instantiating easily our unified model; generates Web-based geographic applications. 23 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

58. Conclusion and future work Future work Enhancing the user interaction visual speciﬁcation. Extending the model and tools to deal with multimedia contents. Geographic information imported from other repositories, e.g., LinkedGeoData. Generating dynamic AJAX applications. Web-based geographic application export in XHTML+RDFa. 24 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

59. Questions? Thank you for your attention! thenhan.luong@iutbayonne.univ-pau.fr http://www.luongthenhan.com sebastien.laborie@iutbayonne.univ-pau.fr http://www.iutbayonne.univ-pau.fr/~slaborie/ thierry.nodenot@iutbayonne.univ-pau.fr http://www.iutbayonne.univ-pau.fr/~nodenot/ 25 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

WINDMash prensentation at DocEng 2011

Recommended

Recommended

More Related Content

Similar to WINDMash prensentation at DocEng 2011

Similar to WINDMash prensentation at DocEng 2011 (20)

Recently uploaded

Recently uploaded (20)

WINDMash prensentation at DocEng 2011