hypertext multimedia and the worldwide web hypertext multimedia

hypertext, multimedia and the world-wide web

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

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

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

Hypertext - not just linear l non-linear structure l l l blocks of text (pages) links between pages create a mesh or network users follow their own path through information bookmark home this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell back link external link this is text or is it hypertext only links can tell

Hypermedia – not just text l hypertext systems + additional media l l links/hotspots may be in media l l l illustrations, photographs, video and sound areas of pictures times and locations in video also called multimedia l but term also used for simple audio/video

animation l adding motion to images l for things that change in time l digital faces – seconds tick past or warp into the next l analogue face – hands sweep around the clock face l live displays: e. g. current system load l for showing status and progress l flashing carat at text entry location l busy cursors (hour-glass, clock, spinning disc) l progress bars

animation (ctd) l for education and training l let students see things happen … as well as being interesting and entertaining images in their own right l for data visualisation l abrupt and smooth changes in multi-dimensional data visualised using animated, coloured surfaces l complex molecules and their interactions more easily understood when they are rotated and viewed on the screen l for animated characters l wizards and help

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

audio issues l formats l l raw sound samples l huge … used for mixing and editing MIDI l just which notes played and when MP 3 l uses psychoacoustics - how the ear hears issues l l annoying if unwanted even more annoying for others!

using animation and video l potentially powerful tools l l but … l l note the success of television and arcade games how to harness the full possibilities of such media different from ‘standard’ interfaces this technology when we have much more experience. so … l need to learn from film makers, dramatic theory, cartoonists, artists, writers

computation, intelligence and interaction l computers? ? don’t just show things … do things l examples: l search – the HCI book web site l not just exercises, table of contents … also search l interaction l embedded applications (e. g, puzzle square) l adaption: l e-commerce sites suggest other things to buy

interacting in hypertext Professor Alan’s puzzle square @ http: //www. hiraeth. com/alan/misc/game. html user clicks arrows to move squares icons to reset arrangement hot links to other puzzles

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

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

application areas l rapid prototyping l l l create live storyboards mock-up interaction using links help and documentation l l allows hierarchical contents, keyword search or browsing just in time learning l 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

application areas (ctd) l education l l 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 l letting education out of the classroom!! l e. g. e. Class

e. Class (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 l non-linear structure l l l two aspects of lostness l l l very powerful … but potentially confusing cognition and content l fragmentary information – no integration … confusion navigation and structure l hyperlinks move across structure – where am I? no easy solutions l but good design helps!

designing structure l ideas for structure l l l going non-linear l l l task analysis to for activities and processes existing paper or organisational structures paper and organisation single structure hypertext – multiple structures l problems with common material, inconsistencies etc. l clarity of cross structure links v. important scent l do hot spots for links make it clear where they are going to? ?

making navigation easier l maps l l l recommended routes l l l guided tour or bus tour metaphor linear path through non-linear structure levels of access l l give an overview of the structure show current location – you are here! summary then progressive depth supporting printing! l needs linearised content, links back to source

history, bookmarks, etc. l l revisiting l ‘hub and spoke’ access – click-back-click-back l lots of revisiting of pages l ‘back’ is 30% of all browser navigation l but multi-step back and history used less l bookmarks and favourites for longer term revisiting deep links l bookmarks and external links – into heart of site l are pages self explanatory? what site? where in it? l l e. g. breadcrumbs for context frames l difficult to bookmark, search and link to l but some good reasons for use (see /e 3/online/frames/)

indices, directories and search l index l l l directories l l often found ion help, documentation, … even books selective: not an exhaustive list of words used on web index would be huge! so hand chosen sites l e. g. open directory project, Yahoo! web search engines l ‘crawl’ the web following links from page to page build full word index (but ignore common ‘stop’ words) l looks up in index when you enter keywords to find pages l

complex search l l l too many pages for single word … need to be more selective: Boolean search l combine words with logic: e. g. ‘engine AND NOT car’ link structure l Google uses richness of in and out links to rank pages recommender systems l use other people’s choices to guide other people being search engine friendly l add ‘Meta’ tags, relevant title, keywords, description l hard to index generated pages … the hidden web

finding research literature l special portals and search sites: e. g. citeseer <citeseer. nj. nec. com> l searches web for papers l scans the papers for bibliography l 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 syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a citation forwards in time

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

web basics … l the ‘web’ – protocols and standard l l changing use l l l HTTP – to carry information over the internet HTML, XML and graphics formats for content browsers to view the results … plus plug-ins initially research (CERN - high energy physics) now corporate, government, commerce and entertainment, advertising, community challenges l lost in hyperspace, information overload

web servers and clients l the web is distributed l l different machines far across the world pages stored on servers browsers (the clients) ask for pages sent to and fro across the internet server finds page browser sends request user clicks link GET /e 3/authors. html HTTP/1. 1 syuhhow howgtw hsioi iert ertag agtyty ghntytywe weghty chdiqw qwoatyf syuh how gtw wetdflaght ghtaa hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a communicate with HTTP server sends page back 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 syuh how gtw chdi qw syuh oatyf how hsio ert ag ty ty wet dfla hsio ght ii ert a ag ghn ty we ghty chdi qw qw oatyf chdi syuh oatyf how gtw wet dfla ght wet hsio ght i ert aa ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a browser displays it web client (browser) web server (stores pages)

network issues - timing l Qo. S (quality of service) l l l bandwidth l how much information per second latency l how long it takes (delay) jitter l how consistent is the delay reliability l some messages are lost … need to be resent … increases jitter connection set-up l need to ‘handshake’ to start

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

design implications l bandwidth think about download time l e. g. 100 K image: 1 sec – broadband, 18 secs – 56 K modem l save graphics in appropriate format and size reuse the same graphics l in the browser cache after first load l l connection time l l one big file may be better then several small ones l beware of ‘fit on one screen’ rule – scrolling is fast! l think before breaking big graphic into bits latency think about feedback

feedback and feedthrough l l l network delays too slow! so … feedback – think: l immediate local feedback – something has happened l slower semantic feedback – what has happened feedthrough between users: l hard – cannot avoid network

WAP - web on the phone l l N. B. larger screens and faster connections mean WML giving way to small HTML pages very small screen l scrolling painful small ‘pages’ l GSM connection slow big chunks WML (wireless mark-up language) l content delivered in ‘stacks’ of ‘cards’ l cards are the ‘pages’ the user views l but navigation within the stack fast syuh how gtw hsio ii ert ag ag ty ty syuh how gtw ghn ty ty we we ghty ghn syuh how hsio i ert ag ty chdi oatyf syuh how gtw chdi qw qw oatyf hsio ii ert ghn ty we ghty wet dfla ght hsioght ert ag ty ty wet aa ag ghn ty we ghty syuh how gtw chdi qw oatyf ghn ty we ghty chdi oatyf hsioght i ert syuh how gtw a ag ty chdi qw qw oatyf syuh how gtw wet dfla ght a ghn ty we ghty hsio i ert ag ty wet dfla ghti ert a ag ty hsio chdi qw oatyf ghn ty ty we we ghty syuh how gtw ghn wet dfla ghti ert a ag ty chdi hsio chdi qw qw oatyf wet dfla ght aa ghn ty we ghty wet chdi qw oatyf wet dfla ght a server sends whole stack using WAP protocol navigation within stack fast syuh how gtw hsio i ert ag ty ghn ty we ghty syuh how gtw chdi qw oatyf hsioght i ert wet dfla a ag ty ghn ty we ghty chdi qw oatyf syuh how gtw wet dfla ghti ert a ag ty hsio ghn ty we ghty chdi qw oatyf 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 l “content is king” l the catch phrase of dot. com era … but widely ignored l the message … content should be l appropriate to the audience, timely, reliable , …. l generally worth reading ! l the medium … page and site design l good design – essential to attract readers … but won’t hide bad material! l bad design – may mean good material never seen l printable!

text l text style l generic styles universal: serif, sans, fixed, bold, italic l specific fonts too, but vary between platforms l cascading style sheets (CSS) for fine control … but beware older browsers and fixed font sizes l colour … often abused! l positioning l easy. . left, right justified or centred l precise positioning with DHTML … but beware platforms … l screen size l mathematics … needs special fonts, layout, … arghhhh

graphics l use with care … l l 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 l l caching – reuse same graphics progressive formats: l image appears in low res and gets clearer

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

icons l on the web just small images l l design … just like any interface l l l for bullets, decoration or to link to other pages lots available! need to be understood designed as collection to fit … under construction l l a sign of the inherent incompleteness of the web or just plain lazy ? ?

web colour l how many colours? l 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 … l perhaps only 16 bits or 8 bits per pixel … 256 colours l or even greyscale l l l colour palettes l l l 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 l problems l l size and download… like graphics but worse! may need special plug-ins audio not so bad, some compact formats (MIDI) streaming video l l play while downloading can be used for ‘broadcast’ radio or TV web server user’s machine movie plays (ii) user watches (i) page loads syuh how gtw syuh hsio i erthow ag tygtw syuh how i ert ag gtw ty ghnhsio ty we ghty hsio iwe ertghty ag ty ghn chdi qwtyoatyf ghnqw ty oatyf we wetchdi dfla ghty chdi oatyf wet dflaqw ght a wet dfla ght a

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

the active web l early days of the web l l l static pages … mostly text some gateways (ftp, gopher) usability … easy - one simple model (except frames break the model!) l dynamic content l l what is the model/metaphor ? ? ? l passive pages or active interface l each leads to different user understanding no easy answers!

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

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

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

security l for computation l l code and data at same place! problem l l l 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 script / Java running in client (ii) user interacts locally l l l (i) page loads once syuh how gtw syuh hsio i erthow ag tygtw syuh how i ert ag gtw ty ghnhsio ty we ghty hsio iwe ertghty ag ty ghn chdi qwtyoatyf ghnqw ty oatyf we wetchdi dfla ghty chdi oatyf wet dflaqw ght a wet dfla ght a fixed content use Java applets, Flash, Java. Script+DHTML pros: rapid feedback cons: only local, no feedthrough after interaction … what does ‘back’ do ? ?

examples l … TO DO … … coin race uses Java. Script dancing histograms are a Java applet

search user’s machine (i) user fills field in form web page with text field for search words (ii) search results returned web server CGI script looks up words in index 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 l fast lookup when needed l see http: //www. hcibook. com/e 3/search/

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

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

CGI script accesses database web server user’s machine (i) request to server (iii) server returns generated pages l l CGI script syuh how gtw hsiosyuh i erthow ag tygtw ghnhsio tysyuh we ghty i erthow ag ty gtw chdi qw ghn tyoatyf hsio iwe ertghty ag ty wetchdi dfla ghty ghnqw ty oatyf we wet dflaqw ghtoatyf a chdi wet dfla ght a (ii) CGI script generated pages accesses database using SQL/JDBC pros: up-to-date, use existing DB cons: not proxy/index friendly

batch generation l for slow varying data l l l update local database periodically generate pages and upload many technologies l C, Java, Hyper. Card, Visual Basic Set db = open. Database("C: test. mdb "); sql = "select Name, Address from Personnel; " Set query = db. Open. Recordset(sql) Open "out. html" For Output As #1 Print #1, "<h 1>Address List</h 1>" query. Move. First While Not query. EOF Print #1, "<p>" & query("Name") & " ” & query("Address") query. Move. Next Wend Close #1 query. Close

batch generation of web pages user’s machine (iii) server returns generated pages l l web server syuh how gtw hsiosyuh i erthow ag tygtw ghnhsio tysyuh we ghty i erthow ag ty gtw chdi qw ghn tyoatyf hsio iwe ertghty ag ty wetchdi dfla ghty ghnqw ty oatyf we wet dflaqw ghtoatyf a chdi wet dfla ght a generated pages third machine (ii) pages copied to web server via ftp pros: indexable, secure cons: slower turnaround (i) pages generated off-line from database

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

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