XMLBased Automatic Web Presentation Generation

1
XML-Based Automatic Web Presentation Generation

• Flavius Frasincar
• Geert-Jan Houben

Databases Hypermedia Group Division of Computer
Science
2
Contents

• Motivation
• Goals
• Context Hera Architecture
• Design Methodology
• Application Diagram
• Presentation Diagram
• Prototype XML/XSL
• Further Work
• Conclusions

3
1. Motivation

• There are a lot of methodologies for manual
  hypermedia presentation design but not for an
  automatic one.
• The need for presentation automation is justified
  by the fact that a lot of data is nowadays
  residing in the heterogeneous deep web
  (searchable databases) as opposed to the surface
  web.
• There is an increasing need for presentation
  adaptation for different users/user platforms.

4
Deep Web
User/Platform Adaptation

• Deep Web vs. Surface Web
• 500 times larger
• 1000 times better quality

5
2. Goals

• Develop a methodology that supports automated
  hypermedia presentation design for Web-based
  Information Systems (WIS) that
• Integrates heterogeneous data sources.
• Facilitates presentation (server/client-side)
  adaptation
• Network (T1, 128K, 56K etc.)
• Display (PC, PDA, WAP Phone, WebTV etc.)
• User (preferences, interaction history etc.)
• Enables semi-structured data queries.

6
3. Context Hera Architecture
Relational Database
Object-Oriented Database
XML Database

ODB-XML Wrapper
RDB-XML Wrapper
Mediator/ Integrator
Information Retrieval
User/Platform Adaptation
Hypermedia Presentation
Logical Presentation
Logical-WML Presentation
Logical-SMIL Presentation
Logical-HTML Presentation
HTML Presentation
SMIL Presentation
WML Presentation
Query

7
4. Design Methodology

• Based on RMM (Relationship Management
  Methodology).
• It distinguishes two levels
• Logical level groups data into meaningful
  content units, called Slices.
• Artifact Application Diagram
• Presentation level translates slices to
  presentation units, called Regions.
• Artifact Presentation Diagram

8
Methodology Phases
Requirements Analysis
E-R Design
Application Design
Presentation Design
Implementation
E-R Diagram
Application Diagram
Presentation Diagram
Phase Artifacts

• Entity
• Relationship

• Slice
• Slice Relationship

• Region
• Region Relationship

(Application Model)
(Conceptual Model)
(Presentation Model)
9
5. Application Diagram

• Based on the concept of slice which groups
  together attributes (having specific media types)
  and possibly other slices.
• Extends the E-R Diagram, each slice belongs to an
  entity.
• Slices are linked together with slice
  relationships
• Aggregation relationships index, tour, indexed
  guided tour etc.
• Reference relationships link with an anchor
  specified.

10
Application Diagram Example
11
6. Presentation Diagram

• Based on the concept of region which contains
  attributes and possibly other regions.
• Each region has a rectangular area associated.
• Slices are translated to regions, one slice can
  be mapped to several regions.
• Slice relationships are materialized with
• Navigational relationships
• Spatial relationships
• Temporal relationships

12
Region Relationships

• All region relationships can be guarded by a
  condition and/or an event.
• Navigational relationships represent the
  classical hyperlinks. Possible events are
  mouse-click, mouse-over etc.
• Temporal relationships have associated a timeout
  event (e.g. time based on a media play duration).
• Spatial relationships specify a relative
  position (qualitative or quantitative) between
  two regions.

13
Presentation Diagram Example
14
Synchronization

• Petri-net like notation for expressing
  synchronization (typical for multimedia data).
• Temporal
• Multidimensional

15
7. Prototype XML/XSL

• Implements the logical level of the design
  methodology.
• Based on transformation steps encoded in XSLT
  stylesheets that describe to an XSLT processor
  how to convert the input XML file to the desired
  output XML file.
• Tool XSLT processor from Apache XML Project.

16
Prototype Steps
17
Retrieved Data

• Retrieved data is an instance of the conceptual
  model.

DTD
XML
ltentity-class identity.paintergt
ltentity-instance idID_0gt
ltattribute-instance idattribute.painter.namegt
lt!CDATARembrandt Harmensz. van
Rijngt lt/attribute-instancegt
lt/entity-instancegt lt/entity-classgt
lt!ELEMENT entity-class (entity-instance)gt lt!ATTLI
ST entity-class id IDgt lt!ELEMENT entity-instance
(attribute-instance)gt lt!ATTLIST entity-instance
id IDgt lt!ELEMENT attribute-instance
(PCDATA)gt lt!ATTLIST attribute-instance id CDATAgt
18
Step 1 Data Cleaning

• Enriches the retrieved data with information from
  the application domain model (appropriate
  relationship names, inverse of relationship
  instances).

XSL
ltxslwhen test_at_idpainting-techniquegt
ltxslattribute nameidgtrelationship.exemplifieslt
/xslattributegt lt/xslwhengt
19
Application Model

• Describes at logical level the hypermedia aspects
  of the application.

DTD
XML
lt!ELEMENT slice (text (slice-ref
hyperlink
index

guided-tour))gt lt!ATTLIST slice id IDgt lt!ATTLIST
slice owner IDREFgt
ltslice idslice.painting.main
ownerentity.paintinggt ltslice-ref
idrefattribute.painter.namegt
relationship-refrelationship.painted_by/gt lt
/slicegt
20
Step 2 Logical Transformation Generation

• Builds the main transformation engine that
  packages the retrieved data into slices using the
  application model.
• This step is applied only once for one
  application (model), the output stylesheet is
  reused for each retrieved data instance.
• XSLT automatic numbering (slice ID) and template
  modes (root/reference slice).

21
Step 2 (cntd)
XSL
ltxslstylesheet xmlnsxslhttp//www.w3.org/1999/
XSL/Transform
xmlnsaxslhttp//www.w3.org/1999/XSL/TransformAl
iasgt ltxsltemplate match/gt
ltaxslstylesheetgt ltaxsltemplate
match/gt
ltxslapply-templates select/main-slicegt
ltxslapply-templates select//slice-ref
modeROOT/gt lt/axsltemplategt
lt/axslstylesheetgt lt/xsltemplategt lt/xslstylesh
eetgt
22
Step 3 Logical Transformation

• Packages the retrieved data into slices based on
  the stylesheet generated by the previous step.

XSL
lttextgt ltaxslvalue-of selectattribute-insta
nce_at_idattribute.painting.main/gt lt/textgt
23
Step 4 Presentation Transformation

• Implements the presentation.
• There are two code generators built for HTML
  (tables) and WML (cards).

WML
XSL
HTML
XSL
ltxsltemplate matchslice-instancegt
ltTABLEgt ltxslapply-templates
select/gt lt/TABLEgt lt/xsltemplategt
ltxsltemplate matchslice-instancegt ltCARD
id_at_idgt ltxslapply-templates
select/gt lt/CARDgt lt/xsltemplategt
24
Implementation
HTML implementation (Netscape Navigator Web
Browser)
WML implementation (Nokia 7110 WAP Phone
Emulator)
25
8. Further Work

• Add media types to the model (now strings and
  URLs).
• Build slices-on-demand on a servlet (now
  precomputed).
• Set up user adaptation module based on a UM (User
  Model).
• Implement the presentation level of the proposed
  methodology.
• Make use of query technologies for XML and RDF
  XQuery and RQL (now SQL).
• Experiment with different kinds of applications
  (e.g. Electronic TV-Program Guide).
• Use Semantic Web model descriptions in RDF(S).
• Taxonomies of classes/properties based on
  inheritance.

26
9. Conclusions

• Methodology for automatic hypermedia presentation
  generation for the Deep Web (searchable
  databases)
• Logical level (presentation semantics).
• Presentation level (presentation implementation).
• Prototype based on XML/XSLT
• Platform adaptation (Web browser, WAP phone).
• Fosters UWA (Ubiquitous Web Applications)
• web applications accessible anywhere at any time
  PC, Laptop, PDA, WAP Phone, Watch Phone, WebTV
  etc.