multimedia and the world wide web hci 201 lecture notes #3b
Post on 22-Dec-2015
219 Views
Preview:
TRANSCRIPT
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.
HCI 201 Notes #3B 11
Hypertext basics
Linear structures
Act IScene I
Act IScene II
Act IScene III
Act IIScene I
Act IIScene II
Act IIIScene I
HCI 201 Notes #3B 12
Hypertext basics
Hierarchical structures
Act I
Scene II
Act II
Scene I Scene II
Act III
Scene I Scene I Scene IIScene III
HCI 201 Notes #3B 13
Hypertext basics
Linked documents on the Internet
HCI 201 Notes #3B 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.
HCI 201 Notes #3B 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”
HCI 201 Notes #3B 16
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>
HCI 201 Notes #3B 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...
HCI 201 Notes #3B 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
HCI 201 Notes #3B 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”
F1
F2 F3
F4
A.htm
B.htm C.htm
D.htm E.htmLet’s link Lori’s resume, reference and comments together
HCI 201 Notes #3B 20
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
HCI 201 Notes #3B 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>
HCI 201 Notes #3B 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>
HCI 201 Notes #3B 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)
HCI 201 Notes #3B 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.)
HCI 201 Notes #3B 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
- usemap attribute in <img>- <map>- <area>
HCI 201 Notes #3B 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>
HCI 201 Notes #3B 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 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.
HCI 201 Notes #3B 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.
top related