tu/e technische universiteit eindhoven web engineering geert-jan houben

49
TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

Upload: aleah-nevil

Post on 31-Mar-2015

224 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Web Engineering

Geert-Jan Houben

Page 2: 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

Page 3: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Web Information System (WIS)

Page 4: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 5: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

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

Page 6: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

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

Page 7: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 8: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 9: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Evolution in WIS

Page 10: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 11: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

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)

Page 12: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Three Generations of Web

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)

Page 13: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Future developments

• Semantic Web research aims at even further developments in Web applications

• From human-readable via machine-readable to machine-processable

Page 14: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

“Layer Cake”

Page 15: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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)

Page 16: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 17: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 18: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 19: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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”

Page 20: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 21: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

WIS Engineering

Page 22: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

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

Page 23: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

More engineering issues

• Personalization (1-1)

• Multiple output devices

• Development and maintenance costs– e.g. documentation

Page 24: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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)

Page 25: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 26: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 27: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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)

Page 28: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

RMDM Schema

Page 29: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 30: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 31: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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)

Page 32: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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.

Page 33: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Conceptual Model

• Defines the data content in terms of RDFS (concepts, attributes, properties)

T e ch n iq u e Artifa ct C re a to r

Pa in tin g Pa in te r

Str in g

Str in g Ima g e

Str in g In te g e r Str in g

Str in g

tn a me

d e scr ip tio n

e xe mp lifie s *

e xa mp lifie d _ b y

a n a me ye a r

cre a te s *

cre a te d _ b y

cn a me

b io g ra p h y

p ic tu re p a in ts *

p a in te d _ b y

Page 34: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 35: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

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

Page 36: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Slices

• Meaningful collection of attributes of one or more related concepts

• Represent a presentation page or its part

T echnique P ainting

Main Main

Painter

Info

painted_by

Painting

exemplif ied_by

tname

Set

pic ture

desc ription

aname

y ear

O wner concep t

S lice

A ttribu tes

S ub-slices

Reference (link)

Page 37: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 38: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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)

Se le ctF o rm

sN a n a me

a n a me

Painting

C M p ro p e rty

F o rm Pro ce ss in g

M ulti-selectio n f ro ma list o f painting nam es

Form

Selec tForm

Str ing

aname

Fo rm M o del

Page 39: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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)

cm:Pa in ting

Se le cte d Pa in tin g O rde r Baske t

In te ge r

inc luded_ by *

inc ludes

quan tity

* con ta ins

con ta ined _by

Page 40: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

AM ExampleT echnique

Main P ainte rs

Basket

Main

tname

desc ription

Pa in ting sF o rm

sN b n a me

b n a me

Pa in tingSet

exemplif ied_by

Q 1

initialize

Se le cte d Pa in tin g

aname

Set

S e lec tedP ainting

Main

pic ture

aname

Bu yF o rm

i q u a n tity

q ua n titya n a me

Pa in te r

painted_by

c name

Q 2

O rde r

Main

quantity

Se le cte d Pa in tin g

inc ludes

aname

B aske t

Main

c ontains

y ear

Order

Main

Set

Page 41: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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”

Se le cte d Pa in tin g

Pa in ting1 Pa in tingN...

ty pe ty pe

creates

Page 42: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Hera Architecture• Defines how the models are used for automatic

generation of hypermedia presentation

Semantic Layer

Application Layer

Presentation Layer

C M A M P M

Co n te n t CM I AM I Pre s. Brow se r

App. Conte xtData

Q u e ry/Co n te xtM an age r,

F o rm Pro ce sso r

Use r

C MVo ca b u la ry

(R D F S)

AMVo ca b u la ry

PMVo ca b u la ry

Page 43: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 44: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Device Adaptation

HTML SMIL WML

Page 45: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 46: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

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

Page 47: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

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

Page 48: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven

Adaptation Model

um:ExpertiseLevel = Medium

technique

name

exemplified_by

description

Set

painting picture

painting

name

painter name

main main

painted_by

year

picture

pp:ImageCapable = Yes

context independent

context dependent

Page 49: TU/e technische universiteit eindhoven Web Engineering Geert-Jan Houben

TU/e technische universiteit eindhoven