[15]chap12 Dmmhypertext Edit
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View [15]chap12 Dmmhypertext Edit as PDF for free.
More details
- Words: 1,300
- Pages: 29
Hypertext and Hypermedia
Rawesak Tanawongsuwan [email protected]
12
Hypertext •
Text augmented with links
• •
Link: pointer to another piece of text in same or different document Navigational metaphor
• •
User follows a link from its source to its destination, usually by clicking on source with the mouse
Use browser to view and navigate hypertext
384
12
Cursory History •
Memex – V Bush, 1945
• •
Xanadu – Ted Nelson, late 1960s/early 1970s
• •
Intended as global system
Hypercard – Apple, 1987
• •
Concept of linked documents; photomechanical realization never implemented
Shipped with every Mac; popularized concept
World Wide Web – 1992
385–386
12
Memex • •
President Roosevelt's science advisor during World War II, Dr. Vannevar Bush, proposes Memex in an article titled As We May Think published in The Atlantic Monthly. In the article, Bush outlines the ideas for a machine that would have the capacity to store textual and graphical information in such a way that any piece of information could be arbitrarily linked to any other piece.
12
386–388
Non-linearity • •
Hypertext not usually read linearly (from start to finish) Links encourage branching off
• •
History and back button permit backtracking
Not an innovation, but the immediacy of following links by clicking creates a different experience from traditional non-linearity (e.g. cross-references in encyclopedia)
12
389
Links •
Simple unidirectional links
• •
Connect single point on one page with a point on another page (e.g. WWW)
Extended links
• • •
Regional links (ends may be regions within a page) Bidirectional links (may be followed in both directions) Multilinks (may have more than two ends)
12
Lost in Hyperspace • •
Possibility of disorientation Nodes & links become a confusing issue
Internet World Stats, www.internetworldstats.com
12
Browsing & Searching •
Browsing – retrieve information by association
• • •
Follow links, backtrack Maintain history, bookmarks
Searching – retrieve information by content
• •
Construct indexes of URLs Search by keyword/description of page
390–391
12
How search engine works
Excerpted the animation clip from http://www.learnthenet.com/ Excerpted the animation clip from http://www.learnthenet.com/
12
392–393
Web Indexes •
Manual (Yahoo!, Open Directory Project,…)
• • •
Classify sites on basis of human evaluation of their content Navigate hierarchy, or search entries by keyword
Automatic (Google, AltaVista,…)
• •
Spider/robot 'crawls' Web, collecting URLs and keywords extracted from pages Highly efficient search engine processes queries
12
393–394
Automatic Indexing •
Must extract keywords automatically from pages
• •
Apply heuristics to identify meaningful words within text Use metadata (data about data) added by page's author
• • •
<meta name="keywords" content="…"> <meta name="description" content="…">
Google applies weighting based on number of links pointing to a page
•
Pages which are referred to by links in many other sites, or in sites that are considered to be significant, should appear higher in the listing than sites which have no incoming links
12
395
URLs •
Uniform Resource Locators
• • •
Resource is something that can be accessed by a higher level Internet protocol – HTTP, FTP, SMTP Often a file, but may be dynamically generated data The way in which data can be accessed is constrained by the protocol used
• • •
e.g. a mailto resource identifies a user’s mailbox An ftp resource identifies a file A resource is like an abstract data type, identifying some data and providing a set of operations that can be performed on it
12
395–396
URL Syntax •
Protocol :// domain name / path
• • • •
N.B. This is a slight simplification, covering the most common usage
e.g. http://www.digitalmultimedia.org/Materials/keypoints.html Domain name identifies a host within a hierarchical naming scheme Path is like Unix pathname: segments separated by /s, identify resource in a hierarchy (e.g. file system)
12
URL Paths •
Complete specification of the location of a file containing HTML
• •
Implicit specification of a standard file within a directory
• •
e.g. /Materials/index.html
e.g. /Materials/
Specification of a program that generates HTML dynamically
•
In special place (cgi-bin) or identified by extension (e.g. .php)
397
12
Partial URLs • • •
URL with some of the leading components missing Missing components filled in from the base URL of the document in which the partial URL occurs Usually, base URL is the URL used to retrieve the document, but it can be set explicitly with
• • •
398
12
Fragment Identifiers •
Links can point to a location within a page
• •
URL identifies the entire page
Append a fragment identifier to a URL
• •
#name e.g. http://www.digitalmultimedia.org/index.html#top
•
Use a named anchor to identify the corresponding location in the page
399
12
403–405
HTML & Hypermedia • • •
href of an a element might not point to an HTML file Server response will include an indication of what sort of data it will return (MIME type) when resource is retrieved (deduced from extension) Browser will either
• •
Deal with data itself Call on a helper application to display the retrieved resource externally
• •
Application/pdf (PDF documents) needs Adobe Reader
Use a plug-in to display it in browser window
•
Macromedia’s Flash Player
12
405–408
Hypermedia Markup • • • •
If non-textual data is rendered within the browser, can integrate images, video, etc within Web page img element is established way of embedding bitmapped images (GIF, JPEG, PNG) object element can be used for any type of embedded data embed element not standard, but widely supported for embedding video, audio and applets
12
Links and Images •
An image may appear in the content of an a element, to serve as a clickable link
• • •
e.g. thumbnail image linked to bigger version
An image map can contain several hot spots, each linked to a URL usemap attribute of img designates map element, which contains area elements specifying shape and position of hot spots and their associated URLs
408–410
Flash text Traditionally, an alternative way to using CSS to deal with fonts is to use a GIF image for text However a GIF image is much larger in size
Another way is to use a SWF file Text in SWF files is in vector form much smaller Use the Flash text icon under “media” menu
Flash text
Flash text
Inserting image
Types of multimedia Image: Jpeg, gif, png Audio: mp3, RealAudio, WAV, MIDI, WMA, QT Movie: WMV, AVI, MOV, MPEG, RM, SWF
The Common and Media Tabs of the Insert bar
Inserting Audio Files Inserting a hyperlink to an audio file Select part of the page, then add a link to an audio file Embedding the audio file on the page Click the plugin icon in the Media menu to insert an audio object, then expand the audio icon Embedding the audio file as background Do pretty much the same as embedding an audio file, then make the icon very small and set some parameters to make it invisible and autostart and loop
Inserting video files Linking to video files Similar to linking to audio files
Embedding video files Similar to embedding audio files also
Inserting Flash movies Similar to audios and videos Select a flash icon in the Media menu
Image maps Adding links to an image meaning that clicking anywhere on the image causes the links to be followed (hot spots) Graphics programs such as Fireworks, ImageReady, Illustrator allow us to create maps easily (sometimes it is more convenient to do so using feature in graphics applications at the time of creating the image) However, we can use Dreamweaver to do this too
Rawesak Tanawongsuwan [email protected]
12
Hypertext •
Text augmented with links
• •
Link: pointer to another piece of text in same or different document Navigational metaphor
• •
User follows a link from its source to its destination, usually by clicking on source with the mouse
Use browser to view and navigate hypertext
384
12
Cursory History •
Memex – V Bush, 1945
• •
Xanadu – Ted Nelson, late 1960s/early 1970s
• •
Intended as global system
Hypercard – Apple, 1987
• •
Concept of linked documents; photomechanical realization never implemented
Shipped with every Mac; popularized concept
World Wide Web – 1992
385–386
12
Memex • •
President Roosevelt's science advisor during World War II, Dr. Vannevar Bush, proposes Memex in an article titled As We May Think published in The Atlantic Monthly. In the article, Bush outlines the ideas for a machine that would have the capacity to store textual and graphical information in such a way that any piece of information could be arbitrarily linked to any other piece.
12
386–388
Non-linearity • •
Hypertext not usually read linearly (from start to finish) Links encourage branching off
• •
History and back button permit backtracking
Not an innovation, but the immediacy of following links by clicking creates a different experience from traditional non-linearity (e.g. cross-references in encyclopedia)
12
389
Links •
Simple unidirectional links
• •
Connect single point on one page with a point on another page (e.g. WWW)
Extended links
• • •
Regional links (ends may be regions within a page) Bidirectional links (may be followed in both directions) Multilinks (may have more than two ends)
12
Lost in Hyperspace • •
Possibility of disorientation Nodes & links become a confusing issue
Internet World Stats, www.internetworldstats.com
12
Browsing & Searching •
Browsing – retrieve information by association
• • •
Follow links, backtrack Maintain history, bookmarks
Searching – retrieve information by content
• •
Construct indexes of URLs Search by keyword/description of page
390–391
12
How search engine works
Excerpted the animation clip from http://www.learnthenet.com/ Excerpted the animation clip from http://www.learnthenet.com/
12
392–393
Web Indexes •
Manual (Yahoo!, Open Directory Project,…)
• • •
Classify sites on basis of human evaluation of their content Navigate hierarchy, or search entries by keyword
Automatic (Google, AltaVista,…)
• •
Spider/robot 'crawls' Web, collecting URLs and keywords extracted from pages Highly efficient search engine processes queries
12
393–394
Automatic Indexing •
Must extract keywords automatically from pages
• •
Apply heuristics to identify meaningful words within text Use metadata (data about data) added by page's author
• • •
<meta name="keywords" content="…"> <meta name="description" content="…">
Google applies weighting based on number of links pointing to a page
•
Pages which are referred to by links in many other sites, or in sites that are considered to be significant, should appear higher in the listing than sites which have no incoming links
12
395
URLs •
Uniform Resource Locators
• • •
Resource is something that can be accessed by a higher level Internet protocol – HTTP, FTP, SMTP Often a file, but may be dynamically generated data The way in which data can be accessed is constrained by the protocol used
• • •
e.g. a mailto resource identifies a user’s mailbox An ftp resource identifies a file A resource is like an abstract data type, identifying some data and providing a set of operations that can be performed on it
12
395–396
URL Syntax •
Protocol :// domain name / path
• • • •
N.B. This is a slight simplification, covering the most common usage
e.g. http://www.digitalmultimedia.org/Materials/keypoints.html Domain name identifies a host within a hierarchical naming scheme Path is like Unix pathname: segments separated by /s, identify resource in a hierarchy (e.g. file system)
12
URL Paths •
Complete specification of the location of a file containing HTML
• •
Implicit specification of a standard file within a directory
• •
e.g. /Materials/index.html
e.g. /Materials/
Specification of a program that generates HTML dynamically
•
In special place (cgi-bin) or identified by extension (e.g. .php)
397
12
Partial URLs • • •
URL with some of the leading components missing Missing components filled in from the base URL of the document in which the partial URL occurs Usually, base URL is the URL used to retrieve the document, but it can be set explicitly with
• • •
398
12
Fragment Identifiers •
Links can point to a location within a page
• •
URL identifies the entire page
Append a fragment identifier to a URL
• •
#name e.g. http://www.digitalmultimedia.org/index.html#top
•
Use a named anchor to identify the corresponding location in the page
399
12
403–405
HTML & Hypermedia • • •
href of an a element might not point to an HTML file Server response will include an indication of what sort of data it will return (MIME type) when resource is retrieved (deduced from extension) Browser will either
• •
Deal with data itself Call on a helper application to display the retrieved resource externally
• •
Application/pdf (PDF documents) needs Adobe Reader
Use a plug-in to display it in browser window
•
Macromedia’s Flash Player
12
405–408
Hypermedia Markup • • • •
If non-textual data is rendered within the browser, can integrate images, video, etc within Web page img element is established way of embedding bitmapped images (GIF, JPEG, PNG) object element can be used for any type of embedded data embed element not standard, but widely supported for embedding video, audio and applets
12
Links and Images •
An image may appear in the content of an a element, to serve as a clickable link
• • •
e.g. thumbnail image linked to bigger version
An image map can contain several hot spots, each linked to a URL usemap attribute of img designates map element, which contains area elements specifying shape and position of hot spots and their associated URLs
408–410
Flash text Traditionally, an alternative way to using CSS to deal with fonts is to use a GIF image for text However a GIF image is much larger in size
Another way is to use a SWF file Text in SWF files is in vector form much smaller Use the Flash text icon under “media” menu
Flash text
Flash text
Inserting image
Types of multimedia Image: Jpeg, gif, png Audio: mp3, RealAudio, WAV, MIDI, WMA, QT Movie: WMV, AVI, MOV, MPEG, RM, SWF
The Common and Media Tabs of the Insert bar
Inserting Audio Files Inserting a hyperlink to an audio file Select part of the page, then add a link to an audio file Embedding the audio file on the page Click the plugin icon in the Media menu to insert an audio object, then expand the audio icon Embedding the audio file as background Do pretty much the same as embedding an audio file, then make the icon very small and set some parameters to make it invisible and autostart and loop
Inserting video files Linking to video files Similar to linking to audio files
Embedding video files Similar to embedding audio files also
Inserting Flash movies Similar to audios and videos Select a flash icon in the Media menu
Image maps Adding links to an image meaning that clicking anywhere on the image causes the links to be followed (hot spots) Graphics programs such as Fireworks, ImageReady, Illustrator allow us to create maps easily (sometimes it is more convenient to do so using feature in graphics applications at the time of creating the image) However, we can use Dreamweaver to do this too
