HCI 3e - Ch 21: Hypertext, multimedia, and the world wide web

chapter 21 hypertext, multimedia and the world-wide web

hypertext, multimedia and the world-wide web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],understanding hypertext finding things web technology static: dynamic:

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

Text ,[object Object],[object Object],[object Object],this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell page 1 page 2 page 3 page 4 this is text or is it hypertext only links can tell

Hypertext - not just linear ,[object Object],[object Object],[object Object],[object Object],this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell home bookmark external link this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell back link

Hypermedia – not just text ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

animation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

animation (ctd) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

video and audio ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

audio issues ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

using animation and video ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

computation, intelligence and interaction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

delivery technology ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

delivery (ctd) … on the move ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

application areas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

application areas (ctd) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

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

lost in hyperspace ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

designing structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

making navigation easier ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

history, bookmarks, etc. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

indices, directories and search ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

complex search ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

finding research literature ,[object Object],[object Object],[object Object],[object Object],bibliography backwards in time citation forwards in time 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

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

web basics … ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

web servers and clients ,[object Object],[object Object],[object Object],[object Object],[object Object],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 web client (browser) web server (stores pages)  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  browser displays it 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  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

network issues - timing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

design implications ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

feedback and feedthrough ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

WAP - web on the phone ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],errata: book says stacks of ‘notes’, cards is correct navigation within stack fast server stores ‘stacks’ of cards 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 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 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 N.B. larger screens and faster connections mean WML giving way to small HTML pages 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

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

the message and the medium ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

text ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

graphics (ctd) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],JPEG quality=20

icons ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

web colour ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

movies and sound ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],(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 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 (ii) user watches

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

the active web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

what happens where? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

user view ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

technology ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

security ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

local interaction (at client) ,[object Object],[object Object],[object Object],[object Object],[object Object],(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 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 (ii) user interacts locally

examples ,[object Object],coin race uses JavaScript dancing histograms are a Java applet

search ,[object Object],[object Object],[object Object],(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

automatic generation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Java applet & JDBC ,[object Object],[object Object],JDBC accesses database user’s machine web server Java applet

CGI script accesses database ,[object Object],[object Object],(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 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 CGI script (i) request to server

batch generation ,[object Object],[object Object],[object Object],[object Object],[object Object],Set db = openDatabase("C:est.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

batch generation of web pages ,[object Object],[object Object],(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 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 generated pages

dynamic content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

n-tier architecture ,[object Object],[object Object],[object Object],database enterprise server JEB web server JDBC XML HTML JSP

HCI 3e - Ch 21: Hypertext, multimedia, and the world wide web

Recomendados

Recomendados

Más contenido relacionado

Más de Alan Dix

Más de Alan Dix (20)

Último

Último (20)

HCI 3e - Ch 21: Hypertext, multimedia, and the world wide web