multimedia and the world wide web hci 201 lecture notes #3b

Multimedia and the World Wide Web

HCI 201 Lecture Notes #3B

HCI 201 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

HCI 201 Notes #3B 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

HCI 201 Notes #3B 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

HCI 201 Notes #3B 5

<embed>

consoleconsole, 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 heightControls (in pixels) how wide and tall the console will be.

HCI 201 Notes #3B 6

<embed>

autostarttrue, 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

HCI 201 Notes #3B 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

HCI 201 Notes #3B 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, rightscrollamount: define the “step” of each movement (pix)

scrolldelay: define the frequency of each movement (ms)

HCI 201 Notes #3B 9

Animated text <marquee>

Let FrontPage add a marquee for you:1. Open your page in FrontPage 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. MenuInsertWeb componentMarquee.

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 #3B 10

Case Study 1 cont’dOur 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.


Hypertext basics

Linear structures

Act IScene I

Act IScene II

Act IScene III

Act IIScene I

Act IIScene II

Act IIIScene I


Hypertext basics

Hierarchical structures

Act I

Scene II

Act II

Scene I Scene II

Act III

Scene I Scene I Scene IIScene III


Hypertext basics

Linked documents on the Internet


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.


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”


Referencing document – step 2

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>


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


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


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”

F1

F2 F3

F4

A.htm

B.htm C.htm

D.htm E.htmLet’s link Lori’s resume, reference and comments together


Linking to any online documents

Typical components in a hyperlinkhttp://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 thishttp://www.depaul.edu/course.asp?id=HCI201

http://www.depaul.edu/new%20class.htm (pp174) http://192.249.1.33/download.htm


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:[email protected]”> [email protected]</a>


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>


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)


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


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

- usemap attribute in <img>- <map>- <area>


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>


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 mapshttp://www.concentric.net/~automata/hotspots.shtmlhttp://www.mediatec.com http://www.boutell.com/mapedit

Make readers aware that different links are embeddedChange colors when mouseover, add borders, drop shadows, etc.


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.