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.

1. Université catholique de Louvain (UCL)
Louvain Interaction Lab (LiLab)
Place des Doyens, 1
B-1348 Louvain-la-Neuve (Belgium)
Model-based Approches to
Reengineering Web Pages
by
Laurent Bouillon, Jean Vanderdonckt &
Jacob Eisenstein

2. 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

3. 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

4. Traditional approaches used
 Forward engineering
Interactive
application
Domain
model
Semantic
core code
User inter-face
code
UI Integration
Application modeling and development
Application
model
Data
model
Semantic core
component
Presentation
model
Dialog
model
Domain modeling User interface modeling and generation
Application modeling and development
Scenario Interactive
application
Task
model
Domain
model
User
model
Semantic
core code
User inter-face
code
UI Integration
Application
model
Data
model
Semantic core
component
Presentation
model
Dialog
model
User-task elicitation User interface modeling and generation

5. Example of forward engineering
 Multiple UI model-based approach
- Atomica

6. Reverse engineering
Interactive
application
Semantic
core code
UI Extraction
User inter-face
code
Presentation
model
Dialog
model
User interface reverse engineering

7. Reengineering
 Combination of reverse and forward
Interactive
application
Semantic
core code
UI Extraction
User inter-face
code
Presentation
model
Dialog
model
New UI
code
User interface reverse engineering and forward engineering
New UI Integration
New interactive
application

8. Redocumentation
 Same as re-engineering with platform
Interactive
application
Semantic
core code
UI Extraction
User inter-face
code
Presentation
model
Dialog
model
New UI
code
User interface reverse engineering and redocumentation
New UI Integration
New interactive
application
Platform
model
(1) (2)

9. Design recovery
 More « intelligence » required
Interactive
application
Semantic
core code
UI Extraction
User inter-face
code
Application reverse engineering
User interface reverse engineering
Task
model
Domain
model
User
model
Application
model
Data
model
Semantic core
component
Presentation
model
Dialog
model
User, task, and domain
reverse engineering
Log files
Predictive models
Design heuristics
Usability guidelines

10. Vaquita
VAQUITA (reVerse engineering of
Applications by Questions, Information
Selection, and Transformation
Alternatives)
http://www.isys.ucl.ac.be/
bchi/research/vaquita.htm

11. The algorithm
 Presentation
and dialog
Inclusion/exclusion of presentation elements
Initialization of the Web pages pool
Web pages pool empty?
Selection of an individual Web page
Identification of Concrete Interaction Objects
Transformation of Concrete Interaction Objects
into 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
Building
of
presentation
model
Building
of
dialog
model
yes
no

12. The RE process in Vaquita
Web page extraction
HTML Page
Tidy
Msxml3.dll
XML File
XIML Presentation
model
.RES
Resource file
Detection
Structuration
Manual modification
VAQUITA
Translation
New DOM writing User Interface Generator
WML, VoiceXML,
HTM files
Reverse
Engineering
Forward
Engineering

13. The Target : a presentation model
Presentation Unit
1-n
Logical Window
1-n
Composite AIO
1-n
Simple AIO
= can be composed
= is-a
0-n
0-n
0-n
1-n 1-n
0-n
Presentation AIO Control AIO

14. The Means : RE options
Flexible usage of mapping tables
2 types of options:
- Objects and attributes options
- Alternative heuristic options (folding,
Table mapping …)

15. XIML
* Presentation stored in XIML
(http://www.ximl.org)
* Two types of relationships:
- hierarchical relationship
- spatial relationships (layout)

16. Options

17. Presentation Model

18. 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.