Model-Based Approaches to Reengineering Web Pages
18
Université catholique de Louvain (UCL) Louvain Interaction Lab (LiLab) Place des Doyens, 1 B-1348 Louvain-la-Neuve (Belgium) by Model-based Approches to Reengineering Web Pages Laurent Bouillon, Jean Vanderdonckt & Jacob Eisenstein
-
Upload
jean-vanderdonckt -
Category
Software
-
view
259 -
download
2
description
Today's web sites are increasingly being accessed through a wide variety of computing platforms ranging from the workstation to a laptop and through multiple access devices such as Internet Screen Phone, TV Set Top box, PDA, and cellular phones. Web sites are rarely de-signed and developed to fit such a large variety of contexts of use as each context (e.g., each computing platform, each device) has its own set of constraints. This pa-per describes a model-based approach for reengineering web pages into a presentation and a dialog model stored with XIML, a model-based user-interface specification language. These models are then further exploited to reengineer other user interfaces either for the same context of use (by changing presentation design options) or for different contexts of use (by changing properties of computing platform model). For this purpose, three key elements of the presentation model (i.e. presentation units, logical windows, and abstract interaction objects) and two key elements of the dialog model (i.e., navigational structure and transition) were defined.
Transcript of Model-Based Approaches to Reengineering Web Pages
Université catholique de Louvain (UCL)Louvain Interaction Lab (LiLab)Place des Doyens, 1B-1348 Louvain-la-Neuve (Belgium)
by
Model-based Approches to Reengineering Web Pages
Laurent Bouillon, Jean Vanderdonckt &Jacob Eisenstein
Introduction: the needs (1/2)
Need to access the same web site from different HTML access devices
=> other presentations A presentation model
of a web page can be reverse engineered to migrate it to another environment
Introduction: the needs (2/2)
Need to adapt Web contents to different appliances– Tag-based language: WML, cHTML, VoiceXML– Programming language: C, C++, Java– Design time vs Run-time
Need to migrate legacy systems from old platforms to new platforms without loosing effort
Wish to support context-sensitivity
Traditional approaches used
Forward engineering
Interactiveapplication
Domainmodel
Semanticcore code
User inter-face code
UI
Inte
grat
ion
Applicationmodel
Datamodel
Semantic corecomponent
Presentationmodel
Dialogmodel
Domain modeling User interface modeling and generation
Application modeling and development
Scenario Interactiveapplication
Taskmodel
Domainmodel
Usermodel
Semanticcore code
User inter-face code
UI
Inte
grat
ion
Applicationmodel
Datamodel
Semantic corecomponent
Presentationmodel
Dialogmodel
User-task elicitation User interface modeling and generation
Application modeling and development
Example of forward engineering
Multiple UI model-based approach
- Atomica
Reverse engineering
Interactiveapplication
Semanticcore code
UI
Ext
ract
ion
User inter-face code
Presentationmodel
Dialogmodel
User interface reverse engineering
Reengineering
Combination of reverse and forward
Interactiveapplication
Semanticcore code
UI
Ext
ract
ion
User inter-face code
Presentationmodel
Dialogmodel
User interface reverse engineering and forward engineering
New UIcode N
ew U
I In
tegr
atio
n
New interactiveapplication
Redocumentation
Same as re-engineering with platform
Interactiveapplication
Semanticcore code
UI
Ext
ract
ion
User inter-face code
Presentationmodel
Dialogmodel
User interface reverse engineering and redocumentation
New UIcode N
ew U
I In
tegr
atio
n
New interactiveapplication
Platformmodel
(1) (2)
Design recovery
More « intelligence » required
Interactiveapplication
Semanticcore code
UI
Ext
ract
ion
User inter-face code
User interface reverse engineering
Taskmodel
Domainmodel
Usermodel
Applicationmodel
Datamodel
Semantic corecomponent
Presentationmodel
Dialogmodel
Application reverse engineering
Use
r, ta
sk, a
nd d
omai
nre
vers
e en
gine
erin
g
Log filesPredictive modelsDesign heuristics
Usability guidelines
Vaquita
VAQUITA (reVerse engineering of Applications by Questions, Information Selection, and Transformation Alternatives)
http://www.isys.ucl.ac.be/ bchi/research/vaquita.htm
The algorithm
Presentationand dialog
Inclusion/exclusion of presentation elementsInitialization of the Web pages pool
Web pages pool empty?
Selection of an individual Web page
Identification of Concrete Interaction Objects
Transformation of Concrete Interaction Objectsinto Abstract Interaction Objects
Selection of Logical Window
Hierarchy building for LWs and PUs
Update vectors of links and Web pages pool
Identification of links
Abstraction of links into Windows Transitions
Identification of Navigation Structures
Buildingofpresentationmodel
Buildingofdialogmodel
yes
no
The RE process in Vaquita
Web page extraction
HTML Page
Tidy
Msxml3.dll
XML File
XIML Presentationmodel
.RESResource file
Detection
Structuration
Manual modification
VAQUITA
Translation
New DOM writing User Interface Generator
WML, VoiceXML,HTM files
ReverseEngineering
ForwardEngineering
The Target : a presentation model
Presentation Unit
Logical Window
Composite AIO
Simple AIO
Control AIOPresentation AIO
= can be composed
= is-a
0-n
0-n
1-n
1-n1-n
1-n
1-n
0-n
0-n
The Means : RE options
Flexible usage of mapping tables
2 types of options:
- Objects and attributes options- Alternative heuristic options (folding,
Table mapping …)
XIML
* Presentation stored in XIML (http://www.ximl.org)
* Two types of relationships:
- hierarchical relationship
- spatial relationships (layout)
Options
Presentation Model
Conclusion
Vaquita allows flexible reverse engineering and so permits multiple presentation models.
Part of a larger migration process, results will be used with other tools.
Can be used for iterative redesigning of a web page.
The reverse engineering is limited to a static analysis. A dynamic analysis may improve the redesign of a web page for another context of use.
