HCI 201 - Multimedia and the World Wide Web

• Home
• Notes
• Homework
• Syllabus
• Resources

Lecture Summaries class 19

Prepared by: Anthony Larrain

These notes serve as an outline to the lecture, they are not intended to be complete. Attend class to get more details.

---

Project 1 Comments

• Navigation links should be one word.
• In line links can be multiple words, not too many.
• All navigation links need to be in the same place for all pages
• You should not have two navigation links with the same name
• Put some spacing between images and text
• Text should not span the whole width of the web page
• Revisit the concept of float and clear.
• Unless you changed my style sheet, all images are floating left. That means, that elements following the image will line up next to the image. If you want an element to appear underneath the image then you have to clear that element.

Without clearing, this is what the following piece of code will produce

<img src="house.gif"> <h3>My house growing up</h3> <hr>

My house growing up

---

Note: Since there is not enough text to wrap around the image, the next element, which is a horizontal rule will line up next to the image.

Most likely we want the horizontal rule to clear the image, so we write

<hr class="clear">

My house growing up

---

This will work provided there is a CSS class selector written called clear, there is and here is it's definition.

.clear{ clear:both; }

Note: you can clear any element.

---

Some Ideas for Project 2

• Make sure you read the Project2 assignment before you begin.
• Add some audio. If your audio is music from a cd. Music files, even mp3 tend to be big. You do not have to place nor should you, an entire song. Use audacity to shorten it up.
• Here is an idea, add a music or sounds page to your web site. Use a two or three column layout for the content. You can generate this table in FrontPage or just hand code it using HTML. One of the columns will be for links to all things music, favorite bands, cd stores etc.. The main content will be links to some of your songs and a brief description of the tune.
• Here is a link to a tutorial using audacity about shortening and adding fade outs to an audio clip. Audacity Tutorial
• Cut and Paste JavaScript code into your page(s).
• Javascript is a programming language.
• You are not expected to understand all of the Javacript code.
• It will be obvious looking at the code what you need to change, if any changes are needed
• Just insert all the code including the script tags at the point in your document where you want the Javascript effect to show.

Example

The following code will produce this neon light effect.

This free script provided by
JavaScript Kit

<h2> <script language="JavaScript1.2"> /* Neon Lights Text By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ var message="Welcome to JavaScript Kit!" var neonbasecolor="black" var neontextcolor="yellow" var flashspeed=100 //in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> <p align="center"><font face="arial" size="-2"> This free script provided by<br> <a href="http://javascriptkit.com">JavaScript Kit</a></font></p>
• Javascript Resources
• Javascript Kit
• Internet.com
• Dynamic Drive
• A ton more, just google javascript or javascript cut and paste.

---

Last Class

• Last class is next Monday
• More ideas for project
• Work on Project