Multimedia and the World Wide Web HCI 201
Multimedia and the World Wide Web HCI 201 Lecture Notes #3 B # HCI 201 Notes #3 B
What will we learn today? n n n Add audio in your web page Add video clips in your web page Animated text n Hypertext basics Referencing documents Creating hyperlinks Effective links Mouse-sensitive images (Image maps) n Assignment 2 n n HCI 201 Notes #3 B 2
Background audio <bgsound> n src <bgsound src=“audio/welcome. wav”> - n Indicates the URL of the related sound file Play once when the web page is loaded Sound files: *. wav, *. midi, *. mid, *. au, *. snd loop <bgsound src=“…” loop=2> - Replay the soundtrack for a number of times or forever - loop=#|infinite #: integer number of times HCI 201 Notes #3 B infinite: repeat endlessly 3
Embedded audio <embed> n Function: n Embed a soundtrack in a document Attributes: src, loop, width, height, console, autostart. End tag: None in HTML n Contains: Nothing n Used in: text n HCI 201 Notes #3 B 4
<embed> n console, smallconsole, playbutton, pausebutton, stopbutton, volumelever - n Creates a display format to control the playing sound You can leave this property out and let the browser determine a default display. Or to limit the controls the visitor has on the playing sound. width and height Controls (in pixels) how wide and tall the console will be. HCI 201 Notes #3 B 5
<embed> n autostart true, false - Controls when the sound starts to play. - true: start to play automatically after loading the page false: the sound will load and wait for the visitor to click - on the play button in the console box n <embed src="File. Name. mid" width="150" height="55" autostart="true" loop=2> Interface might be different for *. midi and *. wav file HCI 201 Notes #3 B 6
Play video in <img> n dynsrc - References an AVI movie for inline display - Only available for Internet Explorer <img dynsrc=“movie. avi”> <img dynsrc=“movie. avi” src=“still. gif”> <img dynsrc=“movie. avi” controls src=“still. gif”> loop = # | infinite HCI 201 Notes #3 B 7
Animated text <marquee> n Function: - Defines the text that scrolls across the screen - Available only for Internet Explorer n Attributes: align: top, middle, bottom behavior: scroll, slide, alternate direction: left, right scrollamount: define the “step” of each movement (pix) scrolldelay: define the frequency of each movement (ms) HCI 201 Notes #3 B 8
Animated text <marquee> n Let Front. Page add a marquee for you: 1. Open your page in Front. Page and switch to the “Normal” view (see tabs in the lower left corner). 2. Leave the cursor where you want to add the marquee. 3. Menu Insert Web component Marquee. 4. Specify the text and other properties in the popup “marquee Properties” dialog box. 5. Switch to the “Preview” (see tabs in the lower left corner). 6. To adjust the properties, go back to “Normal” view and double click on the marquee, the property dialog box will pop up again. HCI 201 Notes #3 B 9
Case Study 1 cont’d Our client Lori likes the overall design of her resume. But she wants us to make the following final changes: Allow readers to jump from topic to topic within her one-page online resume. Readers should also be able to be linked to the references and other notes of recommendation from her online resume. HCI 201 Notes #3 B 10
Hypertext basics n Linear structures Act I Scene II HCI 201 Notes #3 B Act I Scene III Act II Scene II Act III Scene I 11
Hypertext basics n Hierarchical structures Act I Scene I Act II Scene III HCI 201 Notes #3 B Scene I Act III Scene II 12
Hypertext basics n Linked documents on the Internet HCI 201 Notes #3 B 13
The power of HT in HTML n Link your document to - n Another place inside the current document Inside another document in the local collection A document anywhere on the Internet The power - Let readers browse at their own interests Provide extra information “for more information, please click here. ” “Other online resources. ” - Reduce repetitive information “Contact Us”, “FAQs”, etc. HCI 201 Notes #3 B 14
Referencing document – step 1 n What is the ID of an online document ? URL – Uniform Resource Locator n Protocol: a set of rules describing how to transmit data. E. g. “http”, “ftp”, “https” n Domain name or server IP address: E. g. “www. yahoo. com” or “ 64. 58. 76. 223” n Directories: E. g. “/HCI 201/Assignments/assignment 1/” n File name: “File. Name. File. Extension” E. g. “My. First. Page. html” HCI 201 Notes #3 B 15
Referencing document – step 2 n Creating hyperlinks <a> 1. Locate the text or image you want to make as a hyperlink 2. Before the text or image, place the tag <a href=“filename”> filename is the name of the destination document. 3. After the link text or image, place the end tag </a> Never omit this end tag <a href=“http: //www. yahoo. com”>Yahoo!</a> HCI 201 Notes #3 B 16
Linking to a section of a document n Creating bookmarks - Bookmarks are specially marked texts/images in your document. <a name=“interest”>My Interest</a> - Bookmarks can be referenced by any other hyperlinks. <a href=“About. Me. htm#interest”> View Interest</a> Let’s jump around within Lori’s resume. . . HCI 201 Notes #3 B 17
Linking to local documents n Documents in the same folder - A hyperlink in Doc 2. htm, pointing to Doc 1. htm <a href=“Doc 1. htm”>Go to Doc 1</a> n Documents in other folders - Absolute pathname /Topmost. Folder/Nextlevel/. . . /filename - Relevant pathname - To avoid long absolute pathname - To make your local folder portable HCI 201 Notes #3 B 18
Linking to local documents F 1 n A. htm “/F 1/A. htm” “/F 1/F 2/B. htm” “/F 1/F 3/F 4/E. htm” n F 2 B. htm F 3 F 4 HCI 201 Notes #3 B Absolute pathnames C. htm Relevant pathnames to D. htm “E. htm” “. . /C. htm” “. . /A. htm” “. . /F 2/B. htm” D. htm E. htm Let’s link Lori’s resume, reference and comments together 19
Linking to any online documents n Typical components in a hyperlink http: //www. depaul. edu/course/info. htm#num http: the communication protocol www. depaul. edu: Internet host (domain) name course/info. htm: location/path name of the document #num: an anchor in that document n Sometimes a hyperlink looks like this http: //www. depaul. edu/course. asp? id=HCI 201 http: //www. depaul. edu/new%20 class. htm (pp 174) http: //192. 249. 1. 33/download. htm HCI 201 Notes #3 B 20
Different protocols in a hyperlink n http: Hypertext Transfer Protocol (for web pages) <a href=“http: //www. microsoft. com”>Microsoft</a> n ftp: File Transfer Protocol (for file-download from an FTP server) <a href=“ftp: //ftp. microsoft. com”>Microsoft</a> n news: To access a newsgroup (a collection of forums) <a href=“news: comp. infosys. www. announce”>World Wide Web Announcements</a> n mailto: To send emails from a local email program <a href=“mailto: lorisimpson@yahoo. com”> lorisimpson@yahoo. com</a> HCI 201 Notes #3 B 21
Other attributes in <a> n Event handlers onblur, onfocus, onclick, ondbclick, onkeydown, onkeypress, onkeyup, onmouseover, onmouseout, . . . n Example <a href=“http: //www. depaul. edu” onmouseover=“status=‘My School’; return true; ”> De. Paul University</a> HCI 201 Notes #3 B 22
Other attributes in <a> n target where to display the contents of a selected hyperlink target=“_self”: display the doc. in the same window. target=“_blank”: open a new blank window for the doc. (more values will be introduced in week #5) n title - A text string that describe the linked document - When mouse moves over, browser will display the value of title, instead of the hyperlink (default) HCI 201 Notes #3 B 23
Creating effective links n Keep the link concise Long links or big image links are visually disruptive and confusing n Separate adjacent links Use regular text or line breaks to separate two connected links, otherwise they look like one link on your page. n Be consistent Colors, location, visual presentation, and interaction styles n Use images for links carefully - Can readers easily recognize these hyperlinks? - Are readers aware of where the links are pointing to? (self-explanatory icons, culture differences, etc. ) HCI 201 Notes #3 B 24
Image maps n What is an image map? - Embeds many different links in the same image - Clicking different areas links to different target doc. (eg. , floorplan, photos, maps, etc) Example n Client-side image maps n - usemap attribute in <img> <map> <area> HCI 201 Notes #3 B 25
Image maps n How do they work together? <map name=“Image. Map”> <area shape=“rect” coords=“x 1, y 1, x 2, y 2” href=“…”> <area shape=“circ” coords=“x, y, r” href=“…”> <area shape=“poly” coords=“x 1, y 1, x 2, y 2, …” href=“…”>. . . </map> <a href=“…”> <img src=“My. Image. Map. jpg” usemap=“#Image. Map”> </a> HCI 201 Notes #3 B 26
Image maps n How to get the coordinates of those hotspots? n Most web page editors have this function Front. Page: - select the image in Normal view - menu>View>Toolbars>Pictures - define the hotspots n Programs to create image maps http: //www. concentric. net/~automata/hotspots. shtml http: //www. mediatec. com http: //www. boutell. com/mapedit n Make readers aware that different links are embedded Change colors when mouseover, add borders, drop shadows, etc. HCI 201 Notes #3 B 27
Assignment 2 n Write an HTML file that includes: - - - An image (<100 KB), specifying at least 5 out of the following attributes: src, width, height, align, border, vspace, hspace, Define a user-friendly background color or image (<10 KB). An embedded *. wav or *. mid file (<100 KB), specifying at least 3 out of the following attributes: src, loop, autostart, width, height. Hyperlinks: - - (at least) a bookmark in your page (at least) an “http” link goes outside of your document (at least) a “mailto” link Define an image map with at least 2 hotspots. HCI 201 Notes #3 B 28
- Slides: 28