WINDMash prensentation at DocEng 2011

A Framework with Tools for Designing Web-basedGeographic Applications

T. Nhan Luong, Sebastien Laborie, Thierry Nodenot

DocEng 2011 in Mountain View, California, USASeptember 20th, 2011

[email protected]://www.luongthenhan.com

1 T. N. Luong, S. Laborie, T. Nodenot A Framework with Tools for Designing Web-based Geographic Applications

Introduction Context

Example of a Web-based geographic application

A French course for discovering towns, “departements” and “prefectures”.

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 different Web services(e.g., aggregate indexing service ouputs)

Propose a framework with tools for simplifying the design ofWeb-based geographic applications

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 different Web services(e.g., aggregate indexing service ouputs)

Propose a framework with tools for simplifying the design ofWeb-based geographic applications

Outline

1 A framework for designing Web-based geographic applications

2 A unified model for describing geographic applicationsThe data model partThe graphical interface model partThe user interaction model part

3 Our WINDMash prototypeThe WINDMash architectureThe WINDMash tools

4 Conclusion and future work

A framework for designing Web-based geographic applications

Outline

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 Defining user interactions on the data contained inside displayers.

Data should guide the design of Web-based geographic applications.

A unified model for describing geographic applications

Outline

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 ofthe three parts.

A unified 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 geographicinformation.

This model part may well be extended later, e.g., to take into accountmultimedia contents.

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>

<rdf:RDF>

<wm:annotation>

<wm:in>

<rdf:Description>

</rdf:Description>

</wm:in>

<wm:spatialInfo>

</wm:spatialInfo>

</wm:annotation>

</wm:Content>

</rdf:RDF>

<rdf:RDF>

<wm:annotation>

<wm:in>

<rdf:Description>

</rdf:Description>

</wm:in>

<wm:spatialInfo>

</wm:spatialInfo>

</wm:annotation>

</wm:Content>

</rdf:RDF>

<rdf:RDF>

<wm:annotation>

<wm:in>

<rdf:Description>

</rdf:Description>

</wm:in>

<wm:spatialInfo>

</wm:spatialInfo>

</wm:annotation>

</wm:Content>

</rdf:RDF>

<rdf:RDF>

<wm:annotation>

<wm:in>

<rdf:Description>

</rdf:Description>

</wm:in>

<wm:spatialInfo>

</wm:spatialInfo>

</wm:annotation>

</wm:Content>

</rdf:RDF>

A unified 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.

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

<rdf:RDF>

<wm:displayers>

<rdf:Bag>

<rdf:li>

<wm:top>20</wm:top>

<wm:hasData>

<rdf:Seq>

</rdf:Seq>

</wm:hasData>

</rdf:Description>

</rdf:li>

</rdf:Bag>

</wm:displayers>

</rdf:Description>

<rdf:RDF>

<wm:displayers>

<rdf:Bag>

<rdf:li>

<wm:top>20</wm:top>

<wm:hasData>

<rdf:Seq>

</rdf:Seq>

</wm:hasData>

</rdf:Description>

</rdf:li>

</rdf:Bag>

</wm:displayers>

</rdf:Description>

A unified 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 screenAn event may trigger several actions, e.g., highlighting, zooming

Events and actions occur through annotations.

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 screenAn event may trigger several actions, e.g., highlighting, zooming

Zooming

Events and actions occur through annotations.

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:in rdf:resource="&ex;gui.rdf#Displayer1"/>

</rdf:Description>

</wm:action>

</rdf:Description>

</rdf:li></rdf:Bag>

</wm:contains>

</rdf:Description>

<rdf:RDF>

<wm:contains>

<rdf:Bag><rdf:li>

<wm:event>

</rdf:Description>

</wm:event>

<wm:action>

</rdf:Description>

</wm:action>

</rdf:Description>

</rdf:li></rdf:Bag>

</wm:contains>

</rdf:Description>

<rdf:RDF>

<wm:contains>

<rdf:Bag><rdf:li>

<wm:event>

</rdf:Description>

</wm:event>

<wm:action>

</rdf:Description>

</wm:action>

</rdf:Description>

</rdf:li></rdf:Bag>

</wm:contains>

</rdf:Description>

</rdf:RDF>

<rdf:RDF>

<wm:contains>

<rdf:Bag><rdf:li>

<wm:event>

</rdf:Description>

</wm:event>

<wm:action>

</rdf:Description>

</wm:action>

</rdf:Description>

</rdf:li></rdf:Bag>

</wm:contains>

</rdf:Description>

</rdf:RDF>

Zooming

The unified model

Our WINDMash prototype

Outline

Our WINDMash prototype The WINDMash architecture

The WINDMash architecture

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 descriptionscorresponding to our unified model.

Code generator written in PHP.

XHTML Web pages with JavaScriptinstructions.

Our WINDMash prototype The WINDMash tools

Data visual specification

Adapted from Yahoo! Pipes editor.

Designers can create/save/loadtheir ad hoc data processing chain.

The button “Run” validates thepipe and executes it.

Graphical layout specification

A WYSIWYG editor where the designer decides which type of displayer he/shewants and how these displayers are organized inside the Web application.

Interaction visual specification

To date, this UML-like sequence diagram builder allows to create lifelines and tospecify messages between them via arrows.

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 Coffee Break.

Conclusion and future work

Conclusion

We have defined a framework for designing Web-basedgeographic 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.

Conclusion and future work

Future work

Enhancing the user interaction visual specification.

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.

Questions?

Thank you for your attention!

[email protected]

http://www.luongthenhan.com

[email protected]

http://www.iutbayonne.univ-pau.fr/~slaborie/

[email protected]

http://www.iutbayonne.univ-pau.fr/~nodenot/

WINDMash prensentation at DocEng 2011

Technology

Transcript of WINDMash prensentation at DocEng 2011