Web Engineering

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
  systems 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,
  PDAs, 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
RMMs 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
Nielsens 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
• 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 datanavigation
  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 PltrdftypegtacmSelectedPaintinggt
FROM PltrdftypegtcmPainting
ltcmanamegtPaname WHERE Paname IN SELECT
Faname FROM SFltformanamegtFaname,
SFltrdfIDgtFormName
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
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
• 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
49
(No Transcript)