UNIT III

MODELS AND THEORIES

C.SURYA,
Assistant Professor
Department of Computer Science & Engineering
Sri Ramakrishna College of Engineering
Perambalur.
 Cognitive Models
The presentation of the cognitive models divided into the
following categories:

• hierarchical representation of the user‘s task and goal structure

• deals directly with the issue of formulation of goals and tasks
• linguistic and grammatical models
• deals with the grammar of the articulation translation and how it is
understood by the user
• physical and device-level models.
• deals with articulation, but at the human motor level instead of at a
higher level of human understanding
socio-organizational issues and
stakeholder requirements
• Organizational issues affect acceptance
– conflict & power, who benefits, encouraging use
• Stakeholders
– identify their requirements in organizational context
• Socio-technical models
– human and technical requirements
• Soft systems methodology
– broader view of human and organizational issues
• Participatory design
– includes the user directly in the design process
• Ethnographic methods
– study users in context, unbiased perspective
capturing requirements

• need to identify requirements within context of

use
• need to take account of
– stakeholders
– work groups and practices
– organisational context
• many approaches including
– socio-technical modelling
– soft system modelling
– participatory design
– contextual inquiry
who are the stakeholders?

• system will have many stakeholders

with potentially conflicting interests
• stakeholder is anyone effected by
success or failure of system
– primary - actually use system
– secondary - receive output or
provide input
– tertiary - no direct involvement but effected
by success or failure
– facilitating - involved in development or
deployment of system
who are the stakeholders?
Example: Classifying stakeholders – an airline booking
system
An international airline is considering introducing a new
booking system for use by associated travel agents to sell
flights directly to the public.
Primary stakeholders: travel agency staff, airline booking
staff
Secondary stakeholders: customers, airline management
Tertiary stakeholders: competitors, civil aviation
authorities, customers’ travelling companions, airline
shareholders
Facilitating stakeholders: design team, IT department
staff
socio-technical modelling

• response to technological determinism

• concerned with technical, social, organizational
and human aspects of design
• describes impact of specific technology on
organization
• information gathering: interviews,
observation, focus groups, document analysis
• several approaches e.g.
– CUSTOM
– OSTA
CUSTOM
• Six stage process - focus on stakeholders
– describe organizational context, including primary goals,
physical characteristics, political and economic background
– identify and describe stakeholders including personal
issues, role in the organization and job
– identify and describe work-groups whether formally
constituted or not
– identify and describe task–object pairs i.e. tasks to be
performed and objects used
– identify stakeholder needs: stages 2–4 described in
terms of both current and proposed system - stakeholder
needs are identified from the differences between the two
– consolidate and check stakeholder requirements against
earlier criteria
OSTA
• Eight stage model - focus on task
– primary task identified in terms of users’ goals
– task inputs to system identified
– external environment into which the system will be
introduced is described, including physical, economic and
political aspects
– transformation processes within the system are described
in terms of actions performed on or with objects
– social system is analyzed, considering existing internal and
external work-groups and relationships
– technical system is described in terms of configuration and
integration with other systems
– performance satisfaction criteria are established, indicating
social and technical requirements of system
– new technical system is specified
soft systems methodology
• no assumption of technological solution -
emphasis on understanding situation fully
• developed by Checkland
• seven stages
– recognition of problem and initiation of analysis
– detailed description of problem situation
• rich picture
– generate root definitions of system
• CATWOE
– conceptual model - identifying transformations
– compare real world to conceptual model
– identify necessary changes
– determine actions to effect changes
CATWOE

• Clients: those who receive output or benefit from the system

• Actors: those who perform activities within the system
• Transformations: the changes that are affected by the system
• Weltanschauung: (from the German) or World View - how the
system is perceived in a particular root definition
• Owner: those to whom the system belongs, to whom it is
answerable and who can authorize changes to it
• Environment: the world in which the system operates and by
which it is influenced
Participatory design

In participatory design:
workers enter into design context

In ethnography (as used for design):

designer enters into work context

Both make workers feel valued in

design

… encourage workers to ‘own’ the

products
Participatory Design
• User is an active member of the design team.

• Characteristics
– context and work oriented rather than system oriented
– collaborative
– iterative
• Methods
– brain-storming
– storyboarding
– workshops
– pencil and paper exercises
ETHICS

• participatory socio-technical approach devised

by Mumford
– system development is about managing change
– non-participants more likely to be dissatisfied
• three levels of participation
– consultative, representative, consensus
• design groups including stakeholder
representatives make design decisions
• job satisfaction is key to solution
Ethnography

very influential in CSCW

a form of anthropological study with special

focus on social relationships

does not enter actively into situation

seeks to understand social culture

unbiased and open ended

contextual inquiry
• Approach developed by Holtzblatt
– in ethnographic tradition but acknowledges and
challenges investigator focus
– model of investigator being apprenticed to user to learn
about work
– investigation takes place in workplace - detailed
interviews, observation, analysis of communications,
physical workplace, artefacts
– number of models created:
• sequence, physical, flow, cultural, artefact
• models consolidated across users
– output indicates task sequences, artefacts and
communication channels needed and physical and cultural
constraints
 chapter 14

communication and
collaboration models
CSCW (Computer Supported Co-
operative Work) Issues and Theory
All computer systems have group impact
– not just groupware

Ignoring this leads to the failure of systems

Look at several levels – minutiae to large scale

context:
– face-to-face communication
– conversation
– text based communication
– group working
Face-to-face communication

• Most primitive and most subtle form of

communication

• Often seen as the paradigm for computer

mediated communication?
Transfer effects

• carry expectations into electronic media …

… sometimes with disastrous results

• may interpret failure as rudeness of colleague

e.g. personal space

– video may destroy mutual impression of distance
– happily the `glass wall' effect helps
Eye contact

• to convey interest and establish social

presence

• video may spoil direct eye contact

(see video tunnel, chap 19)

• but poor quality video better than

audio only
Gestures and body language

• much of our communication is through our

bodies
• gesture (and eye gaze) used for deictic
reference
• head and shoulders video loses this

So … close focus for eye contact …

… or wide focus for body language?
Patterns of acts & Coordinator

• Generic patterns of acts can be identified

• Conversation for action (CfA) regarded as

central

• Basis for groupware tool Coordinator

– structured email system
– users must fit within CfA structure
– not liked by users!
Conversations for action (CfA)

Circles represent ‘states’ in the conversation

Arcs represent utterances (speech acts)
Text-based communication

Most common media for asynchronous groupware

exceptions: voice mail, answer-phones

Familiar medium, similar to paper letters

but, electronic text may act as speech substitute!

Types of electronic text:

– discrete directed messages, no structure
– linear messages added (in temporal order)
– non-linear hypertext linkages
– spatial two dimensional arrangement

In addition, linkages may exist to other artefacts

Problems with text

No facial expression or body language

 weak back channels

So, difficult to convey:

affective state – happy, sad, …
illocutionary force – urgent,
important, …

Participants compensate:
‘flaming’ and smilies
;-) :-(
:-)
hypertext, multimedia
and the world-wide web

• understanding
understanding hypertext
hypertext
– text escapes linearity, words and the page
• finding
finding things
things
– navigating hyperspace
• web
web technology
technology
– how it all works
• web content
– static
static: unchanging pictures and text
– :dynamic
dynamic: interaction and applications on the web
:
understanding hypertext

what is the hyper?

rich content: graphics, audio, video,
computation and interaction
Text

• imposes strict linear progression on the

reader page 1 page 2 page 3 page 4
this is text this is text this is text this is text
or is it or is it or is it or is it
hypertext hypertext hypertext hypertext
only links only links only links only links
can tell can tell can tell can tell

• the author’s ideas of what is best

• often good :-)

… but not always!
Hypertext - not just linear

• non-linear structure
– blocks of text (pages)
– links between pages create a mesh or network
– users follow their own path through information

bookmark

home this is text this is text

this is text this is text this is text or is it or is it
or is it or is it or is it hypertext hypertext
hypertext hypertext hypertext only links only links
only links only links only links can tell can tell
can tell can tell can tell

back link

this is text this is text this is text

or is it or is it or is it
hypertext hypertext hypertext
only links
external can tell
link
Hypermedia – not just text

• hypertext systems + additional media

– illustrations, photographs, video and sound

• links/hotspots may be in media

– areas of pictures
– times and locations in video

• also called multimedia

– but term also used for simple audio/video
animation

• adding motion to images

– for things that change in time

• digital faces – seconds tick past or warp into the next
• analogue face – hands sweep around the clock face
• live displays: e.g. current system load

– for showing status and progress

• flashing carat at text entry location
• busy cursors (hour-glass, clock, spinning disc)
• progress bars
animation (ctd)

– for education and training

• let students see things happen … as well as being
interesting and entertaining images in their own right

– for data visualisation

• abrupt and smooth changes in multi-dimensional data
visualised using animated, coloured surfaces
• complex molecules and their interactions more easily
understood when they are rotated and viewed on
the screen

– for animated characters

• wizards and help
video and audio

• now easy to author

– tools to edit sound & video and burn CDs & DVDs
• easy to embed in web pages
– standard formats (QuickTime, MP3)
• still big … but getting manageable
– memory OK … hand held MP3 players, TiVo etc.
– but download time needs care – tell users how big!
• very linear
– hard to add ‘links’ often best as small clips or
background
audio issues

• formats
– raw sound samples
• huge … used for mixing and editing
– MIDI
• just which notes played and when
– MP3
• uses psychoacoustics - how the ear hears
• issues
– annoying if unwanted
– even more annoying for others!
using animation and video
• potentially powerful tools
– note the success of television and arcade games

• but …
– how to harness the full possibilities of such media
– different from ‘standard’ interfaces
– this technology when we have much more
experience.

• so …
– need to learn from film makers, dramatic theory,
cartoonists, artists, writers
computation, intelligence
and interaction
• computers??
don’t just show things … do things

• examples:
– search – the HCI book web site
• not just exercises, table of contents … also search

– interaction
• embedded applications (e.g, puzzle square)

– adaption:
• e-commerce sites suggest other things to buy
 eClass (formerly Classroom 2000)

an ordinary lecture?

... available later

through web interface

slides, pen marks,

video are ‘captured’
 finding things

lost in hyperspace
structure and navigation
history and bookmarks
indices, directories and
search
lost in hyperspace
• non-linear structure
– very powerful …
– but potentially confusing

• two aspects of lostness

– cognition and content
• fragmentary information – no integration … confusion
– navigation and structure
• hyperlinks move across structure – where am I?

• no easy solutions
– but good design helps!
designing structure
• ideas for structure
– task analysis to for activities and processes
– existing paper or organisational structures
• going non-linear
– paper and organisation single structure
– hypertext – multiple structures
• problems with common material, inconsistencies etc.
• clarity of cross structure links v. important
• scent
– do hot spots for links make it clear where they are
going to??
making navigation easier

• maps
– give an overview of the structure
– show current location – you are here!
• recommended routes
– guided tour or bus tour metaphor
– linear path through non-linear structure
• levels of access
– summary then progressive depth
• supporting printing!
– needs linearised content, links back to
source
history, bookmarks, etc.
• revisiting
– ‘hub and spoke’ access – click-back-click-back
– lots of revisiting of pages
– ‘back’ is 30% of all browser navigation
– but multi-step back and history used less
– bookmarks and favourites for longer term revisiting
• deep links
– bookmarks and external links – into heart of site
– are pages self explanatory? what site? where in
it?
• e.g. breadcrumbs for context
• frames
– difficult to bookmark, search and link to
– but some good reasons for use (see /e3/online/frames/)
indices, directories and search

• index
– often found ion help, documentation, … even books
– selective: not an exhaustive list of words used
• directories
– on web index would be huge! so hand chosen sites
• e.g. open directory project, Yahoo!
• web search engines
– ‘crawl’ the web following links from page to page
– build full word index (but ignore common ‘stop’ words)
– looks up in index when you enter keywords to find pages
complex search
• too many pages for single word …
need to be more selective:
• Boolean search
– combine words with logic:
e.g. ‘engine AND NOT car’
• link structure
– Google uses richness of in and out links to rank
pages
• recommender systems
– use other people’s choices to guide other people
• being search engine friendly
– add ‘Meta’ tags, relevant title, keywords,
description
– hard to index generated pages … the hidden web
finding research literature
• special portals and search sites:
e.g. citeseer <citeseer.nj.nec.com>
– searches web for papers
– scans the papers for bibliography
– uses this to build up citation index

syuh how gtw

hsio i ert ag ty
syuh how gtw ghn ty we ghty
hsio i ert ag ty chdi qw oatyf
ghn ty we ghty wet dfla ght a
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty syuh how gtw
ghn ty we ghty hsio i ert ag ty syuh how gtw
chdi qw oatyf ghn ty we ghty hsio i ert ag ty
wet dfla ght a chdi qw oatyf ghn ty we ghty
wet dfla ght a chdi qw oatyf
syuh how gtw
hsio i ert ag ty wet dfla ght a
ghn ty we ghty
chdi qw oatyf
wet dfla ght a

syuh how gtw

syuh how gtw hsio i ert ag ty
hsio i ert ag ty ghn ty we ghty
ghn ty we ghty chdi qw oatyf
chdi qw oatyf wet dfla ght a
wet dfla ght a
web technology and issues

protocols and browsers

web servers and
clients networking
web basics …
• the ‘web’ – protocols and standard
– HTTP – to carry information over the internet
– HTML, XML and graphics formats for content
– browsers to view the results … plus plug-ins

• changing use
– initially research (CERN - high energy physics)
– now corporate, government, commerce
and entertainment, advertising, community

• challenges
– lost in hyperspace, information overload
web servers and clients

• the web is distributed

– different machines far across the world
– pages stored on servers
– browsers (the clients) ask for pages
– sent to and fro across the internet

 browser sends request  server finds page

 user clicks
nilk GET /e3/authors.html HTTP/1.1
syuh how gtw

communicate with HTTP

ssyyuuhhhhoowwggtwtw hsio i ert ag ty
hhssioioiieerrttaaggtyty ghn ty we ghty
gghhnntytywweegghhtyty chdi
cchhddiqqwwooaatytyff syuh how gtw syuh how gtw qsswyyuuohhahthy
wweettddfflalagghhttaa hsio i ert ag ty hsio i ert ag ty oofwwggttww
ghn ty we
ghty  server sends page back ghn ty we ghty
chdi qw oatyf
wet
dfhhlsasiiogohiiteea
chdi qw oatyf wet dfla ght a
wet dfla ght rrttaaggttyy
a gghhnn
ttyywwee

 browser displays it gghhttyy

cchhddii
qqswwyuoohaathtyyoffw
gtw wweett

web server (stores pages)

ddffhllasaigoghhitteaart

web client (browser) ag ty ghn ty we

chdi qw oatyf wet

ghty

dfla ght a
network issues - timing
• QoS (quality of service)
– bandwidth
• how much information per second
– latency
• how long it takes (delay)
– jitter
• how consistent is the delay
– reliability
• some messages are lost
… need to be resent … increases jitter
– connection set-up
• need to ‘handshake’ to start
bandwidth, latency and jitter

bandwidth latency
how how long
much

send

receive

time jitter
how variable
design implications

• bandwidth  think about download time

– e.g. 100K image: 1 sec – broadband, 18 secs – 56K modem
– save graphics in appropriate format and size
– reuse the same graphics
• in the browser cache after first load
• connection time
– one big file may be better then several small ones
• beware of ‘fit on one screen’ rule – scrolling is fast!
• think before breaking big graphic into bits
• latency  think about feedback
feedback and feedthrough
• network delays too slow! so …
• feedback – think:
– immediate local feedback – something has
happened
– slower semantic feedback – what has happened
• feedthrough between users:
– hard – cannot avoid network
interface environment
user
immediate
feedback
semantic

feedback
WAP - web on the phone
N.B. larger screens
• very small screen and faster
– scrolling painful  small ‘pages’ connections mean
WML giving way to
– GSM connection slow  big chunks
small HTML pages
• WML (wireless mark-up language)
– content delivered in ‘stacks’ of ‘cards’
– cards are the ‘pages’ the user views
– but navigation within the stack fast

syuh how gtw syuh how gtw

syuh how gtw
syuh how
how gtw
gtw syuh how gtw hsio i ert ag ty hsio i ert ag ty
hsio
hsio ii ert
ert agag ty ty hsio i ert ag ty ghn ty we ghty ghn ty we ghty
ghn ty we ghty h how gtw ghn ty we ghty chdi qswyuohahtyofw gtw chdi qswyuohahtyofw gtw
ghn syu
chdity
chdi qswwe
qwsyu haghty
yuohoahtyofw
htyofw gtw
qwsyuhoahtyofw gtw
gtw o i ert ag ty chdi qswyuohahtyofw gtw syuh how gtw wet dfhlsaioghi teart ag ty wet dfhlsaioghi teart ag ty
wet
wetwet
chdi dfhlsaioghi
qwdfhlsaioghi
dfhlsaioghi teart
syuohahty teart
teart
ofw ag
ag ag
gtwty hsi n ty we ghty wet dfhlsaioghi teart ag ty hsio i ert ag ty ghn ty we ghty ghn ty we ghty
ty ty ghn ty we ghty i qswyuohahtyofw gtw ghn ty we ghty ghn ty we ghty chdi qswyuohathyofw gtw chdi qswyuohathyofw gtw
wet dfhlsaioghi
chdityqteart
ghn swweyuohag
ath
chdityw gtw gh dfhlsaioghi teart ag ty
yof chdi qswyuohathyofw gtw chdi qswyuohahtyofw gtw wet dfhlasigohit eart ag ty wet dfhlasigohit eart ag ty
ghty
wetqwsyuhoathyofw
ghn
qswyu
dfhlasigohit
ty we ghty
ghn
gtwchdi
hoathyofw
eart ag
tywet
chdtychdi ghn ty we
we ghty
gtw wet
ghty
server sends whole stack wet dfhlasigohit eart ag ty
ghn ty we ghty
wet dfhlsaioghi teart ag ty
ghn ty we ghty
ghn ty we ghty
chdi qw oatyf
ghn ty we ghty
chdi qw oatyf
dfhlasigho
qwsyuhoathyofw
chdiitqw eart oatyf wet chdi qswyuohathyofw gtw chdi qswyuohathyofw gtw wet dfla ght wet dfla ght
using WAP protocol
chdi qw oatyf
dfhlasigho
ag ty gtwitwet
eartwet
ghn ag
ty tyght
dfla wet dfhlasigohit eart ag ty wet dfla ght wet dfhlasigohit eart ag ty a a
ghnwe ty
dfhlasigho ghtywe ghty
iteart a ghn ty we ghty a ghn ty we ghty
chdi
ag tychdi ghnqwqw oatyf
ty oatyf chdi qw oatyf chdi qw oatyf
wet
we wetdfla
ghty
dflaghtght
a wet dfla ght a wet dfla ght
chdi qw oatyfa a
wet dfla ght
a

server stores ‘stacks’ of cards

errata: book says stacks of ‘notes’, cards is correct
 static web content

medium and message

text, graphics, movies and sound
the message and the medium
• “content is king”
– the catch phrase of dot.com era … but widely ignored

• the message … content should be

– appropriate to the audience, timely, reliable , ….
– generally worth reading !

• the medium … page and site design

– good design – essential to attract readers
… but won’t hide bad material!
– bad design – may mean good material never seen
– printable!
text
• text style
– generic styles universal: serif, sans, fixed, bold, italic
– specific fonts too, but vary between platforms
– cascading style sheets (CSS) for fine control
… but beware older browsers and fixed font sizes
– colour … often abused!

• positioning
– easy .. left, right justified or centred
– precise positioning with DHTML … but beware platforms …
– screen size

• mathematics … needs special fonts, layout, … arghhhh

graphics

• use with care …

– N.B. file size and download time
… this image = 1000 words of
text
– affected by size, number of
colours, file format
– backgrounds … often add little,
hard to read text

• speeding it up
– caching – reuse same graphics
– progressive formats:
• image appears in low res and gets
clearer
graphics (ctd)

• formats
– JPEG – for photos
• higher compression but ‘lossy’
• get ‘artefacts’
– GIF for sharp edges JPEG quality=20
• lossless compression
– PNG supported by current web browsers
• and action
– animated gifs for simple animations
– image maps for images you can click on
icons
• on the web just small images
– for bullets, decoration
– or to link to other pages
– lots available!

• design … just like any interface

– need to be understood
– designed as collection to fit …

• under construction
– a sign of the inherent incompleteness of the web
– or just plain lazy ??
web colour

• how many colours?

– PC monitors – millions – 24 bits per pixel
… but the ‘same’ colour may look very different
• N.B. usually only 72–96 dpi
– older computers, PDAs, phones …
• perhaps only 16 bits or 8 bits per pixel … 256 colours
• or even greyscale
• colour palettes
– choose useful 256 colours
– different choices, but Netscape ‘web safe’ 216 are common
– each GIF image has its own palette – use for fast download
movies and sound

• problems
– size and download… like graphics but worse!
– may need special plug-ins
– audio not so bad, some compact formats (MIDI)
• streaming video
– play while downloading
– can be used for ‘broadcast’ radio or TV
web server
user’s machine
syuh how gtw
hsisoyiuherht oawg
movie plays tgytw

(i) page ghnhstsiyoyuwiherhgtoh

awtgygtytw

(ii) user loads chdgihhqnswitoyoiwa

eteyrftgahgtytywect

hdgdfhlianqgwthytow
yt
aetygfh

watches
wecthddfilaqwg
hotaatyf wet
dfla ght a
dynamic web content

what happens where

technology and security
local interaction, search
remote & batch generation
dynamic content
the active web

• early days of the web

– static pages … mostly text
– some gateways (ftp, gopher)
– usability … easy - one simple model
(except frames break the model!)

• dynamic content
– what is the model/metaphor ???
• passive pages or active interface
• each leads to different user understanding
– no easy answers!
what happens where?

• architectural design is about what happens

where
• this affects:
– feedback
• seeing
results
of
one’s
own
actions
– feedthro
ugh
• seeing
user view

• what changes?
– media stream, presentation, content
• by whom?
– automatic, site author, user
– other users - feedthrough
• how often?
– pace of change: days, months, seconds
technology

where does it happen

client
• applets , Flash,
JavaScript & DHTML
server
• CGI scripts, Java
servlets , JSP, ASP,
PHP, etc,
another machine
• author’s machine,
database server,
proxy
people
• socio-techncal
security

• for computation
– code and data at same place!

• problem
– data - needs to be secure
– web-server - least secure machine
– client machine even worse

… and networks!
local interaction (at client)
web server
user’s machine
syuh how gtw
hsisoyiuherht oawg
script / Java tgytw

running in client (i) page ghnhstsiyoyuwiherhgtoh

awtgygtytw

(ii) user loads once chdgihhqnswitoyoiwa

eteyrftgahgtytywect

interacts hdgdfhlianqgwthytow
yt
aetygfh

locally
wecthddfilaqwg
hotaatyf wet
dfla ght a

• fixed content
• use Java applets, Flash, JavaScript+DHTML
• pros: rapid feedback
• cons: only local, no feedthrough
• after interaction … what does ‘back’ do ??
 examples

dancing histograms
are a Java
applet
• … TO DO … …

coin race uses

JavaScript
search
web server
user’s machine
syuh how gtw
CGI script hsio i ert ag ty
web page with ghn ty we ghty
looks up chdi qw oatyf
text field for wet dfla ght a

words in
(i) user fills search words (ii) search index
field in results returned
form index file
pre-computed

• create indices off-line

• fast lookup when needed
see
http://www.hcibook.com/e3/search/
automatic generation

• dilemma;
– hand crafting … leads to web stasis!!
– so need database driven sites
• early days ad hoc, now many tools
• options:
– client-end applet or Flash access remote DB
– server-end CGI driven by web forms (limited UI)
• hybrid solutions
– CGI generated pages can contain JavaScript etc.
– JavaScript can ‘write’ web pages on the fly!
Java applet & JDBC

web server
user’s machine
Java applet
JDBC
accesses

database

• pros: interactive DB
access
• cons: bandwidth,
security
CGI script accesses database

web server
user’s machine
CGI
script
(i) request (ii) CGI script
to server
syuh how gtw
hsiosyiuehrthaogwtygtw
ghnhstyisoywuieherghhtoaw
t gy tgytw
chdgihqhnwstiyoawiteyerftgahgtyty accesses database
wetchdgdflhianqgwthytowa
teygfhty generated using
(iii) server returns wecthddfilaqwghotaatyf
wet dfla ght a
pages SQL/JDBC
generated
pages

• pros: up-to-date, use existing DB

• cons: not proxy/index friendly
batch generation

• for slow varying data

– update local database
– periodically generate pages and upload
• many technologies
– C, Java,
HyperCard, Set db = openDatabase("C:\test.mdb");
sql = "select Name, Address from Personnel;"
Visual Set query = db.OpenRecordset(sql)
Open "out.html" For Output As #1
Basic
Print #1, "<h1>Address List</h1>"
query.MoveFirst
While Not query.EOF
Print #1, "<p>" & query("Name") & " ” & query("Address")
query.MoveNext
Wend

Close #1
batch generation of web pages

user’s machine web server third machine

syuh how gtw
hsiosyiuehrthaogwtygtw
ghnhstyisoywuieherghhtoaw
t gy tgytw
chdgihqhnwstiyoawiteyerftgahgtyty
wetchdgdflhianqgwthytowa
teygfhty

(iii) server returns wecthddfilaqwghotaatyf

wet dfla ght a (ii) pages copied (i) pages generated
generated generated to web server off-line from
pages pages database
via ftp

• pros: indexable,
secure
• cons: slower
turnaround
dynamic content
• really ‘active’ web pages …
– data updated as well as presented on the web
• presentation
– any of the previous means: CGI, applet-JDBC
• update
– web form/interface -> server script -> update db
• e.g. book theatre seats
• issues
– authentication and security
– multiple transactions due to ‘back’ button
– right pace/control – do we want human in the loop?
n-tier architecture

HTML JEB
XML JDBC
JSP

web enterprise database

server server

• one or more intermediate layers

• ‘business logic’ in layers
• web standard components and protocols