Multimedia and the World Wide Web

1. Multimedia and the World Wide Web HCI 201 Lecture Notes #3B

2. What will we learn today? • Add audio in your web page • Add video clips in your web page • Animated text • Hypertext basics • Referencing documents • Creating hyperlinks • Effective links • Mouse-sensitive images (Image maps) • Assignment 2 2

3. Background audio <bgsound> • src <bgsound src=“audio/welcome.wav”> • 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 infinite: repeat endlessly 3

4. Embedded audio <embed> • Function: Embed a soundtrack in a document • Attributes: src, loop, width, height, console, autostart. • End tag:None in HTML • Contains: Nothing • Used in: text 4

5. <embed> • console console, smallconsole, playbutton, pausebutton, stopbutton, volumelever • 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. 5

6. <embed> • 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 • <embed src="FileName.mid" width="150" height="55" autostart="true" loop=2> Interface might be different for *.midi and *.wav file 6

7. Play video in <img> • 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 7

8. Animated text <marquee> • Function: - Defines the text that scrolls across the screen - Available only for Internet Explorer • 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) 8

9. Animated text <marquee> • Let FrontPage add a marquee for you: • Open your page in FrontPage and switch to the “Normal” view (see tabs in the lower left corner). • Leave the cursor where you want to add the marquee. • MenuInsertWeb componentMarquee. • Specify the text and other properties in the popup “marquee Properties” dialog box. • Switch to the “Preview” (see tabs in the lower left corner). • To adjust the properties, go back to “Normal” view and double click on the marquee, the property dialog box will pop up again. 9

10. 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. 10

11. Hypertext basics • Linear structures Act I Scene I Act I Scene II Act I Scene III Act II Scene I Act II Scene II Act III Scene I 11

12. Hypertext basics • Hierarchical structures Act I Act II Act III Scene I Scene II Scene III Scene I Scene II Scene I Scene II 12

13. Hypertext basics • Linked documents on the Internet 13

14. The power of HT in HTML • Link your document to • 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. 14

15. Referencing document – step 1 • What is the ID of an online document ? URL – Uniform Resource Locator • Protocol: a set of rules describing how to transmit data. E.g. “http”, “ftp”, “https” • Domain name or server IP address:E.g. “www.yahoo.com” or “64.58.76.223” • Directories:E.g. “/HCI201/Assignments/assignment1/” • File name: “FileName.FileExtension” E.g. “MyFirstPage.html” 15

16. Referencing document – step 2 • Creating hyperlinks<a> • Locate the text or image you want to make as a hyperlink • Before the text or image, place the tag<a href=“filename”>filename is the name of the destination document. • After the link text or image, place the end tag</a> Never omit this end tag <a href=“http://www.yahoo.com”>Yahoo!</a> 16

17. Linking to a section of a document • 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=“AboutMe.htm#interest”>View Interest</a> Let’s jump around within Lori’s resume... 17

18. Linking to local documents • Documents in the same folder • A hyperlink in Doc2.htm, pointing to Doc1.htm<a href=“Doc1.htm”>Go to Doc1</a> • Documents in other folders • Absolute pathname/TopmostFolder/Nextlevel/.../filename • Relevant pathname- To avoid long absolute pathname- To make your local folder portable 18

19. Linking to local documents • Absolute pathnames “/F1/A.htm”“/F1/F2/B.htm”“/F1/F3/F4/E.htm” • Relevant pathnames to D.htm “E.htm”“../C.htm” “../../A.htm”“../../F2/B.htm” A.htm F1 B.htm C.htm F2 F3 D.htm E.htm F4 Let’s link Lori’s resume, reference and comments together 19

20. Linking to any online documents • 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 • Sometimes a hyperlink looks like this http://www.depaul.edu/course.asp?id=HCI201 http://www.depaul.edu/new%20class.htm (pp174) http://192.249.1.33/download.htm 20

21. Different protocols in a hyperlink • http: Hypertext Transfer Protocol (for web pages)<a href=“http://www.microsoft.com”>Microsoft</a> • ftp: File Transfer Protocol (for file-download from an FTP server)<a href=“ftp://ftp.microsoft.com”>Microsoft</a> • news: To access a newsgroup (a collection of forums) <a href=“news:comp.infosys.www.announce”>World Wide Web Announcements</a> • mailto: To send emails from a local email program<a href=“mailto:lorisimpson@yahoo.com”> lorisimpson@yahoo.com</a> 21

22. Other attributes in <a> • Event handlersonblur, onfocus, onclick, ondbclick,onkeydown, onkeypress, onkeyup,onmouseover, onmouseout, ... • Example<a href=“http://www.depaul.edu”onmouseover=“status=‘My School’; return true;”>DePaul University</a> 22

23. Other attributes in <a> • targetwhere to display the contents of a selected hyperlinktarget=“_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) • 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) 23

24. Creating effective links • Keep the link conciseLong links or big image links are visually disruptive and confusing • Separate adjacent linksUse regular text or line breaks to separate two connected links, otherwise they look like one link on your page. • Be consistentColors, location, visual presentation, and interaction styles • 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.) 24

25. Image maps • 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 • Client-side image maps • usemapattribute in <img> • <map> • <area> 25

26. Image maps • How do they work together? <map name=“ImageMap”> <area shape=“rect” coords=“x1,y1,x2,y2” href=“…”> <area shape=“circ” coords=“x,y,r” href=“…”><area shape=“poly” coords=“x1,y1,x2,y2,…” href=“…”> ... </map> <a href=“…”> <img src=“MyImageMap.jpg” usemap=“#ImageMap”> </a> 26

27. Image maps • How to get the coordinates of those hotspots? • Most web page editors have this functionFrontPage: - select the image in Normal view- menu>View>Toolbars>Pictures- define the hotspots • Programs to create image maps http://www.concentric.net/~automata/hotspots.shtmlhttp://www.mediatec.comhttp://www.boutell.com/mapedit • Make readers aware that different links are embedded Change colors when mouseover, add borders, drop shadows, etc. 27

28. Assignment 2 • Write an HTML file that includes: • An image (<100KB), specifying at least 5 out of the following attributes: src, width, height, alt, align, border, vspace, hspace, • Define a user-friendly background color or image (<10KB). • An embedded *.wav or *.mid file (<100KB), 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. 28