1. hypertext, multimedia and the world-wide web

2. hypertext, multimedia and the world-wide web
understanding hypertext
text escapes linearity, words and the page
finding things
navigating hyperspace
web technology
how it all works
web content
static: unchanging pictures and text
dynamic: interaction and applications on the web
understanding hypertext
finding things
web technology
static:
dynamic:

3. understanding hypertext
what is the hyper?
rich content: graphics, audio, video, computation and interaction

4. Text imposes strict linear progression on the reader
the author’s ideas of what is best
often good :-) … but not always!
this is text
or is it
hypertext
only links
can tell
page 1
page 2
page 3
page 4

5. 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
this is text
or is it
hypertext
only links
can tell
home
bookmark
external link
back link

6. 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

7. 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

8. animation (ctd) for education and training for data visualisation
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

9. video and audio now easy to author easy to embed in web pages
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

10. audio issues formats issues raw sound samples MIDI MP3
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!

11. 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

12. 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

13. interacting in hypertext Professor Alan’s puzzle square@
user clicks arrows to move squares
icons to reset
arrangement
hot links to other puzzles

14. delivery technology on the computer on the web … and on the move …
help systems installed on hard disk with applications
CD-ROM or DVD based hypermedia
on the web
really ubiquitous!
in many countries, near universal internet access
not just web pages!
e.g. many applications have web-base documentation
… and on the move …

15. delivery (ctd) … on the move
platforms
mobile phones, PDAs, laptop computers
delivery
CD-ROM or DVD (like desktop)
cached content (e.g. AvantGo)
WiFi access points or mobile phone networks
WAP – for mobile phone, tiny web-like pages
context – who and where
tourist guides, directed advertising

16. application areas rapid prototyping help and documentation
create live storyboards
mock-up interaction using links
help and documentation
allows hierarchical contents, keyword search or browsing
just in time learning
what you want when you want it
(e.g. technical manual for a photocopier)
technical words linked to their definition in a glossary
links between similar photocopiers

17. application areas (ctd)
education
animation and graphics allow students to see things happen
sound adds atmosphere and means diagrams can be looked at while hearing explanation
non-linear structure allows students to explore at their own pace
e-learning
letting education out of the classroom!!
e.g. eClass

18. eClass (formerly Classroom 2000)
... available later through web interface
an ordinary lecture?
slides, pen marks, video are ‘captured’

19. finding things
lost in hyperspace structure and navigation history and bookmarks indices, directories and search

20. lost in hyperspace non-linear structure two aspects of lostness
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!

21. designing structure ideas for structure going non-linear scent
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??

22. 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

23. history, bookmarks, etc. revisiting deep links frames
‘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/)

24. 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

25. 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

26. 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
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
bibliography backwards in time
citation forwards in time

27. web technology and issues
protocols and browsers
web servers and clients
networking

28. web basics … the ‘web’ – protocols and standard changing use
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

29. 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
communicate with HTTP
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
 server finds page
 user clicks link
GET /e3/authors.html HTTP/1.1
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
 server sends page back
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
 browser displays it
web client (browser)
web server (stores pages)

30. 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

31. bandwidth, latency and jitter
bandwidth how much
latency how long
send
receive
time
jitter how variable

32. 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

33. 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

34. server sends whole stack using WAP protocol
WAP - web on the phone
N.B. larger screens and faster connections mean WML giving way to small HTML pages
very small screen
scrolling painful  small ‘pages’
GSM connection slow  big chunks
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
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
server sends whole stack using WAP protocol
navigation within stack fast
server stores ‘stacks’ of cards
errata: book says stacks of ‘notes’, cards is correct

35. medium and message text, graphics, movies and sound
static web content
medium and message
text, graphics, movies and sound

36. 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!

37. text text style positioning
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

38. graphics use with care … speeding it up
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

39. graphics (ctd) formats and action JPEG – for photos
higher compression but ‘lossy’
get ‘artefacts’
GIF for sharp edges
lossless compression
PNG supported by current web browsers
and action
animated gifs for simple animations
image maps for images you can click on
JPEG quality=20

40. icons on the web just small images design … just like any interface
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 ??

41. web colour how many colours? colour palettes
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

42. movies and sound problems streaming video
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
(i) page
loads
user’s machine
web server
movie plays
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
(ii) user
watches

43. dynamic web content what happens where technology and security
local interaction, search
remote & batch generation
dynamic content

44. the active web early days of the web dynamic content
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!

45. what happens where? architectural design is about what happens where
this affects:
feedback
seeing results of one’s own actions
feedthrough
seeing effects of other people’s actions
also affects complexity of implementation and hence maintenance

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

47. technology where does it happen client server another machine people
applets , Flash, JavaScript & DHTML
server
CGI scripts, Java servlets , JSP, ASP, PHP, etc,
another machine
author’s machine, database server, proxy
people
socio-techncal solutions

48. security for computation problem code and data at same place!
data - needs to be secure
web-server - least secure machine
client machine even worse
… and networks!

49. local interaction (at client)
(i) page
loads once
user’s machine
web server
script / Java
running in client
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
(ii) user
interacts
locally
fixed content
use Java applets, Flash, JavaScript+DHTML
pros: rapid feedback
cons: only local, no feedthrough
after interaction … what does ‘back’ do ??

50. examples … TO DO … … dancing histograms are a Java applet
coin race uses
JavaScript

51. search create indices off-line fast lookup when needed
(ii) search
results returned
user’s machine
web server
web page with
text field for
search words
CGI script
looks up
words in
index
(i) user fills
field in form
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
index file
pre-computed
create indices off-line
fast lookup when needed
see

52. automatic generation dilemma; early days ad hoc, now many tools
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!

53. JDBC accesses database
Java applet & JDBC
JDBC accesses database
user’s machine
web server
Java applet
pros: interactive DB access
cons: bandwidth, security

54. CGI script accesses database
(iii) server returns
generated
pages
(ii) CGI script accesses database using SQL/JDBC
user’s machine
web server
generated pages
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
CGI script
(i) request
to server
pros: up-to-date, use existing DB
cons: not proxy/index friendly

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

56. batch generation of web pages
(iii) server returns
generated
pages
(ii) pages copied to web server via ftp
(i) pages generated off-line from database
user’s machine
web server
third machine
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
generated pages
pros: indexable, secure
cons: slower turnaround

57. dynamic content really ‘active’ web pages … presentation update issues
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?

58. n-tier architecture one or more intermediate layers
database
enterprise
server
JEB
web
JDBC
XML
HTML
JSP
one or more intermediate layers
‘business logic’ in layers
web standard components and protocols