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

thenhan.luong@iutbayonne.univ-pau.frhttp://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!

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/

WINDMash prensentation at DocEng 2011

Technology

Transcript of WINDMash prensentation at DocEng 2011

Currency Futures- Ppt Prensentation

Automatically generated PDF from existing images.cpwd.gov.in/WriteReadData/deptexams_cir/16123.pdf · abineesh c s chandan kumar 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011

Iprovement prensentation

Enhanced Document Retrieval and Discovery Based on a ... · DocEng’19,September23–26,2019,Berlin,Germany AhmedA.O.Tayeh,NgocTran,andBeatSigner anddiscovery,we exploit the combination

dubai prensentation

hyponatremia -my prensentation

Dell U2410 Monitor Setup Diagram · 2009-2011 2009-2011 2009-2011 2009-2011 2009-2011 2009-2011 2009-2011 April 2011 April 2011 Avril 2011 Abril 2011 Abril 2011 Aprile 2011 Апрель2011

Prensentation Noise Prevention

Fourth Quarter 2012 In thisrepoht:FeuhutQapu2€¦ · Jan-2011 Feb-2011 Mar-2011 Apr-2011 May-2011 Jun-2011 Jul-2011 Aug-2011 Sept-2011 Oct-2011 Nov-2011 Dec-2011 Jan-2012 Feb-2012

Sheet 1 DocEng’03, Grenoble, November 2003 Model Driven Architecture based XML Processing Ivan Kurtev, Klaas van den Berg University of Twente, the Netherlands.

Curt's Cafe Prensentation

Si582 prensentation

Ppp prensentation david pope

UserDirectedAnalysis of Scanned Images (DOCENG 03 talk)

Prensentation mesopotamia y egipto christiam moreno

ELECO 2011 Prensentation

Jane Lelean, Healthy and Wealthy Members Prensentation at The Oxford Business Wealth Club 08-06-10

· ano_eje 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011 2011

DSM in DocEng · Representation of DSL concepts DVMEx IDE DSM Tools, RTS and client applications 9/27 Representation of language concept is specified on the meta-model level, but

Media prensentation power point