TU/e technische universiteit eindhoven

TU/e
technische universiteit eindhoven
Web Engineering
Geert-Jan Houben
TU/e
technische universiteit eindhoven
Contents
• Web Information System (WIS)
• Evolution in WIS
• WIS Engineering
TU/e
technische universiteit eindhoven
Web Information System (WIS)
TU/e
technische universiteit eindhoven
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
TU/e
Web Information System
technische universiteit eindhoven
• 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
TU/e
Web Information System
technische universiteit eindhoven
• 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
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
Evolution in WIS
TU/e
technische universiteit eindhoven
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
TU/e
Evolution in hypermedia
technische universiteit eindhoven
• 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)
TU/e
Three Generations of Web
technische universiteit eindhoven
1. HTML written by author
– Easy, uniform interface
– Large effort for maintenance
– Not suited for changing information
2. Automatically generating information
– First, using templates (and databases)
– Later, using XML and XSLT transformations
3. Automatic processing of information
– Explicit metadata (RDF)
– Agreement on meaning (ontologies)
TU/e
technische universiteit eindhoven
Future developments
• Semantic Web research aims at even further
developments in Web applications
• From human-readable via machinereadable to machine-processable
TU/e
technische universiteit eindhoven
“Layer Cake”
TU/e
technische universiteit eindhoven
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)
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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”
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
WIS Engineering
TU/e
WIS Engineering Methodology
technische universiteit eindhoven
• 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
TU/e
More engineering issues
technische universiteit eindhoven
• Personalization (1-1)
• Multiple output devices
• Development and maintenance costs
– e.g. documentation
TU/e
technische universiteit eindhoven
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)
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
RMM methodology
•
•
•
•
•
•
•
Requirements analysis
E-R diagram
Application diagram (top-down)
Slice design
Application diagram (bottom-up)
User interface design
Implementation
TU/e
technische universiteit eindhoven
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)
TU/e
technische universiteit eindhoven
RMDM Schema
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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)
TU/e
technische universiteit eindhoven
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.
TU/e
technische universiteit eindhoven
Conceptual Model
• Defines the data content in terms of RDFS
(concepts, attributes, properties)
String
tname
String
Integer
aname
year
exemplifies *
Technique
Artifact
examplified_by
String
cname
creates *
Creator
created_by
biography
description
String
Image
picture
Painting
paints *
painted_by
Painter
String
TU/e
technische universiteit eindhoven
Application Model
• Navigation structure of a hypermedia
application on top of CM
• Hypermedia dynamics (navigation
structure updates and application
functionality) of a hypermedia application
TU/e
Navigation Structure in Application
Model
technische universiteit eindhoven
• 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
TU/e
technische universiteit eindhoven
Slices
• Meaningful collection of attributes of one or
more related concepts
• Represent a presentation page or its part
Reference (link)
Slice
Technique
Painting
tname
picture
description
year
Owner concept
Attributes
exemplified_by
Set
painted_by
Painting
Painter
aname
Info
Sub-slices
Main
Main
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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)
CM property
Painting
Form
SelectForm
sN aname
aname
SelectForm
aname
Form Processing
Multi-selection from
a list of painting names
String
Form Model
TU/e
technische universiteit eindhoven
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)
Integer
cm:Painting
quantity
includes
* contains
Order
SelectedPainting
included_by *
Basket
contained_by
TU/e
technische universiteit eindhoven
AM Example
initialize
Technique
SelectedPainting
Q1
tname
picture
description
aname
exemplified_by
Set
Set
year
painted_by
Painting
Basket
PaintingsForm
SelectedPainting
Main
Order
Main
Basket
quantity
includes
contains
Set
Order
SelectedPainting
aname
Main
Main
Main
quantity
quantity
aname
Q2
Painters
Main
i
cname
aname
bname
BuyForm
Painter
sN bname
TU/e
technische universiteit eindhoven
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”
SelectedPainting
type
type
Painting1
creates
...
PaintingN
TU/e
technische universiteit eindhoven
Hera Architecture
• Defines how the models are used for automatic
generation of hypermedia presentation
CM
Vocabulary
(RDFS)
AM
Vocabulary
PM
Vocabulary
CM
AM
PM
CM I
Content
AM I
Pres.
Browser
App. Context
Data
Semantic
Layer
Application
Layer
Presentation
Layer
Query/Context
M anager,
Form Processor
User
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
Device Adaptation
HTML
SMIL
WML
TU/e
technische universiteit eindhoven
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
TU/e
technische universiteit eindhoven
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
TU/e
WIS Engineering and Adaptation
technische universiteit eindhoven
• 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
TU/e
technische universiteit eindhoven
Adaptation Model
pp:ImageCapable = Yes
technique
painting
name
name
description
picture
context
independent
year
painting
picture
painted_by
exemplified_by
Set
main
painter
name
main
um:ExpertiseLevel = Medium
context
dependent
TU/e
technische universiteit eindhoven