1. Hypertext

2. Hypertext History (1) Many early attempts to organize human knowledge Many early attempts to organize human knowledge Thesaurus (Roget) Thesaurus (Roget) Encyclopedia Encyclopedia Memex Memex Conceived by Vannevar Bush in 1945 Conceived by Vannevar Bush in 1945 Electro-mechanical device cataloging and collecting human knowledge Electro-mechanical device cataloging and collecting human knowledge

3. Hypertext History (2) Earliest systems Earliest systems Augment (Engelbart) Augment (Engelbart) Xanadu (Ted Nelson) Xanadu (Ted Nelson) Complete, distributed, interlinked system containing all documents in the world Complete, distributed, interlinked system containing all documents in the world Not technically feasible Not technically feasible Computers/networks weren’t powerful enough Computers/networks weren’t powerful enough Ted Nelson is too disorganized Ted Nelson is too disorganized AutoDesk tried to resuscitate project in 1990s AutoDesk tried to resuscitate project in 1990s

4. Hypertext History (3) Initial production systems Initial production systems Intermedia (Brown), NoteCards (Xerox PARC), KMS (Carnegie-Mellon) Intermedia (Brown), NoteCards (Xerox PARC), KMS (Carnegie-Mellon) Local network, often built on a database Local network, often built on a database HyperCard popularized NoteCards model HyperCard popularized NoteCards model Imitators: SuperCard Imitators: SuperCard Competitors: Guide Competitors: Guide The Web The Web Less functionality, but world-wide Less functionality, but world-wide

5. Hypertext Concepts and Goals Text documents are connected by links Text documents are connected by links A browser is used to see documents and traverse/follow links A browser is used to see documents and traverse/follow links Users are encouraged to read non-linearly Users are encouraged to read non-linearly Non-linearity is overrated, convenience is key Non-linearity is overrated, convenience is key Many arty types are trying to construct radically different fictional works exploiting non-linearity Many arty types are trying to construct radically different fictional works exploiting non-linearity

6. Nodes and Links A hypertext is a graph with nodes and links A hypertext is a graph with nodes and links Links generally connect parts of documents Links generally connect parts of documents The parts are marked by anchors The parts are marked by anchors sometimes called persistent selections sometimes called persistent selections Links come in many types Links come in many types Unidirectional (source and destination) Unidirectional (source and destination) Bidirectional (two anchors, no distinction) Bidirectional (two anchors, no distinction) Multi-links (>2 anchors) Multi-links (>2 anchors)

7. Link Example (PDF) Anchors are rectangular regions of a page Anchors are rectangular regions of a page Links are unidirectional Links are unidirectional stored in the source document stored in the source document Acrobat Reader interface Acrobat Reader interface source is outlined source is outlined destination is highlighted destination is highlighted Links defined by WYSIWIG interface Links defined by WYSIWIG interface Click and drag regions Click and drag regions Normal file/page navigation to connect source/dest Normal file/page navigation to connect source/dest

8. HTML Links Unidirectional links Unidirectional links “A” elements are anchors “A” elements are anchors Source must be an anchor Source must be an anchor Destination may be an anchor Destination may be an anchor Uniform Resource Locator (URL) Uniform Resource Locator (URL) Simple language for specifying link destinations Simple language for specifying link destinations One of the three critical features of the Web One of the three critical features of the Web

9. URL has 3 parts, plus … Protocol: http, ftp, smtp, telnet, … Protocol: http, ftp, smtp, telnet, … Domain name: host providing protocol’s server Domain name: host providing protocol’s server www.cs.uwm.edu www.cs.uwm.edu Path: normally a path for file system Path: normally a path for file system e.g. http://www.cs.uwm.edu/~munson e.g. http://www.cs.uwm.edu/~munson

10. URL Details (1) CGI queries appear after question mark CGI queries appear after question mark Partial URLs provide a path relative to source document Partial URLs provide a path relative to source document Fragment identifier specifies part of a document Fragment identifier specifies part of a document “A” element with matching “name” attribute “A” element with matching “name” attribute Any element with matching “id” attribute Any element with matching “id” attribute HTML 4.0 HTML 4.0

11. URL Details (2) Link behavior is more complex with frames Link behavior is more complex with frames must specify which part of interface is changed must specify which part of interface is changed specify name of frame or use keywords specify name of frame or use keywords _self, _blank, _top, _parent _self, _blank, _top, _parent

12. Other Link Concepts Earlier hypertext systems stored links separately from the documents Earlier hypertext systems stored links separately from the documents Bidirectionality is easier to support Bidirectionality is easier to support Link validity can be tested Link validity can be tested Web can be visualized and analyzed Web can be visualized and analyzed Queries can be made efficiently Queries can be made efficiently Web is a step backwards conceptually Web is a step backwards conceptually

13. XPointer and XLink XML advocates hope to support more powerful linking services XML advocates hope to support more powerful linking services XPointer specifies link targets within documents XPointer specifies link targets within documents XLink describes complex links XLink describes complex links

14. XPointer Tree selection language Tree selection language start at root(), or id(name) start at root(), or id(name) navigate with child, descendant, ancestor, preceding, following, psibling, fsibling navigate with child, descendant, ancestor, preceding, following, psibling, fsibling four arguments: four arguments: number (ith instance found) number (ith instance found) element name sought element name sought attribute name attribute name value of attribute value of attribute id(intro).following(2, example, quality, bad) id(intro).following(2, example, quality, bad)

15. XLink Supports simple and extended links Supports simple and extended links Extended links can be multilinks Extended links can be multilinks Discussion of how to store links separately Discussion of how to store links separately Can this work on the Web? Can this work on the Web?

16. Navigation in Hypertext Easy to get disoriented Easy to get disoriented Many navigation aids have been proposed Many navigation aids have been proposed Bookmarks Bookmarks History lists History lists Site maps Site maps Web directories Web directories Search engines Search engines