1. Web Engineering
Geert-Jan Houben

2. Contents
Web Information System (WIS)
Evolution in WIS
WIS Engineering

3. Web Information System (WIS)

4. Information system
Exchanges information with Object System (= business process)
Stores and manages information: data-intensive
Requires careful engineering of information exchange
Requires careful engineering and modeling of object system
Traditionally database-oriented

5. Web Information System
Information System based on Web technology (Web-based, Web-aware, Web-enabled etc.)
Web technology can be used as front-end, e.g. application is available on the Web (or Intranet) via a browser
Enables easy use and maintenance of (personalized) end-user access
Web metaphor is appealing for end-users
Requires different techniques for engineering the system’s interfaces

6. Web Information System
Web technology can also be used in back-end of information system
Organize (connect) the data inside the system using Web technology
Use World Wide Web as provider of data (or Intranet)
Typically highly volatile information (distributed and heterogeneous)
Requires different techniques for engineering the implementation

7. Examples Real-estate sales Employee databases Museum databases
Digital libraries
Mail order catalogs
Reservation systems
Auctions, virtual marketplaces
EPG (Electronic TV Program Guide)
Ref: Special section on Web Information Systems in Communications of the ACM, July 1998, Vol. 41, No. 7

8. Research
In WIS how to (automatically) generate hypermedia access to the information?
Hypermedia access: navigation
Personalization, customization: adaptation
Information integration: (logistics of) information retrieval from available, heterogeneous sources
Interoperability: for e-business, business rules, service integration
Querying and transforming (data and metadata)
Ref: wwwis.win.tue.nl/~hera

9. Evolution in WIS

10. Hypermedia Hypertext + multimedia
Information objects (text, images, animations, audio, video)
Not possible to show everything at once:
Layout
Timing
Navigation
Design (generate) presentation for WWW, WAP, PDA’s, etc.
W3C expects that majority of surfers will not be using a PC

11. Evolution in hypermedia
First: standalone special-purpose systems
Now: Web-based
From authoring to designing to generating
From static to dynamic (generated from database query result)
From single site to portals (integrated access service)
From read-only to interactive and often collaborative (read-write)

12. Three Generations of Web
HTML written by author
Easy, uniform interface
Large effort for maintenance
Not suited for changing information
Automatically generating information
First, using templates (and databases)
Later, using XML and XSLT transformations
Automatic processing of information
Explicit metadata (RDF)
Agreement on meaning (ontologies)

13. Future developments
Semantic Web research aims at even further developments in Web applications
From human-readable via machine-readable to machine-processable

14. “Layer Cake”

15. Web-based IS Web-browser as front-end
Data repository (data base) as back-end
Design:
Data (content) structures: ER-modeling
Navigation
Presentation: layout
Implementation:
On-line (direct database access)
Off-line (generated from database)

16. WebML View
A Web-enabled software system whose main purpose is to publish and maintain large amounts of data
Interfaces directed to general public
exploratory
browsing-oriented
personalized (1 to 1)
Data stored by means of DBMS technology
Possibly pre-existing the Web application
Normally volatile
With severe “freshness” requirements
May be distributed and heterogeneous

17. OOHDM View (1) Object-Oriented Hypermedia Design Method
WWW brought new generation of IS:
navigation through heterogeneous information space
operations querying or affecting that information
Introduced hypertext (hypermedia) paradigm
Applications are constantly modified, enriched with new services, and new navigation and interface features are added

18. OOHDM View (2)
Web-based application, first good hypermedia applications
Traditional (SE) methodologies have no notion of linking: little is said about incorporating hypertext into interface
Size and complexity imply systematic approach for evolution and reuse of design knowledge

19. RMM’s View History: graphics designers + programmers
Experience: central information architecture and shared, common mechanisms/services helpful for coping with problems of scalability and “information anarchy”

20. Nielsen’s View
“On the Web, the only constant is change. A site that works perfectly as long as its stays the same will quickly die.”
Healthy navigation structure key to success
Building interface is also complex, connecting interface objects to rest of application

21. WIS Engineering

22. WIS Engineering Methodology
Design of WIS requires careful engineering of information exchange between IS and OS
Implies engineering of front-end (interface) and back-end (storage & retrieval)
Professional applications: “from art to engineering”
well-founded (software) engineering methodologies
model-driven

23. More engineering issues
Personalization (1-1)
Multiple output devices
Development and maintenance costs
e.g. documentation

24. Modeling Presentation level Storage level Logical level
“Network” of Web pages
Storage level
HTML pages, report and scripts, graphics, animation
Logical level
E-R diagram (for storage)
Application diagram
(M-)slices (for presentation)

25. RMM Relationship Management Methodology Entity-Relationship modeling
Transformation from data model to data+navigation model
RMDM: Relationship Management Data Model represents objects and navigational relationships (navigational design of application)
Design method for Web (hypermedia) applications
Ref: RMM: A Methodology for Structured Hypermedia Design, by Isakowitz, Stohr and Balasubramanian et al in Comm. ACM, Vol 38, No 8

26. RMM methodology Requirements analysis E-R diagram
Application diagram (top-down)
Slice design
Application diagram (bottom-up)
User interface design
Implementation

27. RMDM (Application) domain model primitives
Entities
Attributes
Relationships
Slices: from large objects (with many attributes) to smaller units (with coherent attributes, possibly from different objects)
From semantical aspect to navigational (presentation) aspect (w.r.t. complexity and size)

28. RMDM Schema

29. Hera motivation
Methodologies exist for manual hypermedia presentation design, Hera targets automated presentation
Automated presentation is important for databased content (the ‘deep web’) as opposed to manually crafted content (the ‘surface web’): most WIS are data driven
Presentations must be adaptable to different users/user platforms

30. Hera Methodology Model-driven methodology, defines design phases:
Conceptual Design that results in Conceptual Model (CM, describes data content used for generation of hypermedia presentations) construction
Application Design that results in Application Model (AM, describes the navigation structure and functionality) construction
Presentation Design that results in Presentation Model (PM, describes spatial layout and rendering of hypermedia presentations) construction

31. Hera Models
Fully specify dynamic hypermedia applications; hence, there is no need of additional programming
Are used by a generic Hera engine for generation of hypermedia application pages (by on-demand instantiations of model subsets)

32. Conceptual Model
Provides a uniform semantic view over different data sources that are integrated within a given Web application.
Consists of hierarchies of concepts relevant within the given domain, their properties, and relations.

33. Conceptual Model
Defines the data content in terms of RDFS (concepts, attributes, properties)

34. Application Model
Navigation structure of a hypermedia application on top of CM
Hypermedia dynamics (navigation structure updates and application functionality) of a hypermedia application

35. Navigation Structure in Application Model
Navigation nodes (pages) specification in terms of slices (collections of concepts’ attributes to be displayed)
Node composition in terms of slice aggregation relationships
Navigation edges (hyperlinks) in terms of slice references

36. Slices
Meaningful collection of attributes of one or more related concepts
Represent a presentation page or its part

37. Dynamics in Application Model
User input specification in terms of Input Forms
Application context (state) specification in terms of Application Context Model
Context manipulation specification in terms of queries

38. Input Forms
Specify user data entries; contain sets of input fields with:
Input method (selection from offered items, text input, etc.)
How the offered items are created (for selections)
Determine data manipulation operation associated with a form (form processing)

39. Application Context Model
Extends CM with additional data structures needed for application functionality (to store application/navigation state, user inputs, user model, etc.)
Example: storing the user selection (shopping basket)

40. AM Example

41. Data Manipulations Update application context information
Defined as SeRQL queries
Used for processing forms (handle user input)
Q1 creates instances of SelectedPainting according to the SelectForm form content
CONSTRUCT
{P}<rdf:type>{acm:SelectedPainting>}
FROM
{P}<rdf:type>{cm:Painting};
<cm:aname>{Paname}
WHERE
Paname IN SELECT Faname
FROM {SF}<form:aname>{Faname},
{SF}<rdf:ID>{FormName}
WHERE FormName = “SelectForm”
creates

42. Hera Architecture
Defines how the models are used for automatic generation of hypermedia presentation

43. Hera Implementation
HPG 2.0 (Hera Presentation Generator, dynamic version) implemented in Java as a servlet
Uses RDF API HP Jena for RDF data transformations based on RDFS models (CM, AM)
Can use XForms processor
Uses Sesame as main content repository and application context repository; uses SeRQL/RQL as query languages
Set of graphical tools for designers for CM and AM based on Visio

44. Device Adaptation
HTML
SMIL
WML

45. OOHDM Object-Oriented Hypermedia Design Method
Modeling/analysis, design, implementation, testing, and maintenance
Conceptual Design + Navigation Design + Abstract Interface Design + Implementation
navigation objects are views of conceptual objects
abstractions to organize the navigation space, e.g. navigational contexts
separation of interface issues from navigation issues
some design decisions must only be made at implementation time

46. Other Methodologies UWE: UML-based Web Engineering WSDM
Conceptual, navigation, presentation model
Storyboarding and presentation flow
WSDM
Information modeling, functional modeling and navigation design
WebML: Web Modeling Language
Structural model, derivation model (extend to adapt), hypertext model (composition and navigation), presentation model (XSL)
OO-H: Object Oriented Hypermedia
Navigational access diagram, abstract presentation diagram

47. WIS Engineering and Adaptation
adaptation (and personalization) is a design aspect that gained much more attention, but still is lightly supported in methodologies
difficult to specify
not many tools
difficult combination with other aspects
examples: My-portals, device-dependency

48. Adaptation Model