XML-Based Automatic Web Presentation Generation

1. XML-Based Automatic Web Presentation Generation Flavius Frasincar Geert-Jan Houben Databases & Hypermedia Group Division of Computer Science WebNet 2001

2. Contents • Motivation • Goals • Context: Hera Architecture • Design Methodology • Application Diagram • Presentation Diagram • Prototype: XML/XSL • Further Work • Conclusions WebNet 2001

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. WebNet 2001

4. Deep Web User/Platform Adaptation • Deep Web vs. Surface Web: • 500 times larger • 1000 times better quality WebNet 2001

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. WebNet 2001

6. 3. Context: Hera Architecture Relational Database Object-Oriented Database XML Database … RDB-XML Wrapper ODB-XML Wrapper Mediator/ Integrator Information Retrieval User/Platform Adaptation Hypermedia Presentation Logical Presentation Logical-HTML Presentation Logical-WML Presentation Logical-SMIL Presentation HTML Presentation WML Presentation SMIL Presentation Query … WebNet 2001

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 WebNet 2001

8. Methodology Phases Application Design Presentation Design Requirements Analysis E-R Design Implementation E-R Diagram Application Diagram Presentation Diagram Phase Artifacts: • Slice • Slice Relationship • Region • Region Relationship • Entity • Relationship (Application Model) (Conceptual Model) (Presentation Model) WebNet 2001

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. WebNet 2001

10. Application Diagram Example WebNet 2001

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 WebNet 2001

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. WebNet 2001

13. Presentation Diagram Example WebNet 2001

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

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. WebNet 2001

16. Prototype Steps WebNet 2001

17. Retrieved Data • Retrieved data is an instance of the conceptual model. DTD XML <entity-class id=“entity.painter”> <entity-instance id=“ID_0”> <attribute-instance id=“attribute.painter.name”> <![CDATA[Rembrandt Harmensz. van Rijn]]> </attribute-instance> </entity-instance> </entity-class> <!ELEMENT entity-class (entity-instance)*> <!ATTLIST entity-class id ID> <!ELEMENT entity-instance (attribute-instance)*> <!ATTLIST entity-instance id ID> <!ELEMENT attribute-instance (#PCDATA)> <!ATTLIST attribute-instance id CDATA> WebNet 2001

18. Step 1: Data Cleaning • Enriches the retrieved data with information from the application domain model (appropriate relationship names, inverse of relationship instances). XSL <xsl:when test=“@id=‘painting-technique’”> <xsl:attribute name=“id”>relationship.exemplifies</xsl:attribute> </xsl:when> WebNet 2001

19. Application Model • Describes at logical level the hypermedia aspects of the application. DTD XML <!ELEMENT slice (text | (slice-ref | hyperlink | index | guided-tour))> <!ATTLIST slice id ID> <!ATTLIST slice owner IDREF> <slice id=“slice.painting.main” owner=“entity.painting”> <slice-ref idref=“attribute.painter.name”> relationship-ref=“relationship.painted_by”/> … </slice> WebNet 2001

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). WebNet 2001

21. Step 2 (cnt’d) XSL <xsl:stylesheet xmlns:xsl=“http://www.w3.org/1999/XSL/Transform” xmlns:axsl=“http://www.w3.org/1999/XSL/TransformAlias”> <xsl:template match=”/”> <axsl:stylesheet> <axsl:template match=”/”> … <xsl:apply-templates select=“/main-slice”> <xsl:apply-templates select=“//slice-ref” mode=“ROOT”/> </axsl:template> </axsl:stylesheet> </xsl:template> … </xsl:stylesheet> WebNet 2001

22. Step 3: Logical Transformation • Packages the retrieved data into slices based on the stylesheet generated by the previous step. XSL <text> <axsl:value-of select=“attribute-instance[@id=‘attribute.painting.main’]”/> </text> WebNet 2001

23. Step 4: Presentation Transformation • Implements the presentation. • There are two code generators built for: HTML (tables) and WML (cards). WML XSL HTML XSL <xsl:template match=“slice-instance”> <TABLE> <xsl:apply-templates select=“*”/> </TABLE> </xsl:template> <xsl:template match=“slice-instance”> <CARD id=“{@id}”> <xsl:apply-templates select=“*”/> </CARD> </xsl:template> WebNet 2001

24. Implementation HTML implementation (Netscape Navigator – Web Browser) WML implementation (Nokia 7110 – WAP Phone Emulator) WebNet 2001

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. WebNet 2001

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. WebNet 2001