1. CS 22: Enhanced Web Site Design - Week 5Slide 1 (of 22) Enhanced Web Site Design Stanford University Continuing Studies CS 22 Mark Branom markb@stanford.edu http://www.stanford.edu/people/markb/ Course Web Site: http://www.stanford.edu/group/csp/cs22

2. Slide 2 of 15 CS 22: Enhanced Web Site Design - Week 5 Week 5 Using Photoshop ImageMaps Using Sound and Video

3. Slide 3 of 15 CS 22: Enhanced Web Site Design - Week 5 Graphic Manipulation See “Using Photoshop ”

4. Slide 4 of 15 CS 22: Enhanced Web Site Design - Week 5 Enhancing with sound/video Adding sound and/or video to your web site can make viewing your site an exciting and vibrant experience. However, depending on how you utilize this technology, it can also bog down the servers, and make visitor experience of your web site a real drag.

5. Slide 5 of 15 CS 22: Enhanced Web Site Design - Week 5 Creating Sound Files Software (Free): Audacity: http://audacity.sourceforge.net/ FreeCorder: http://www.freecorder.com/ GarageBand (Mac): http://www.apple.com/ilife/garageband/ Software ($$$): Cakewalk: http://cakewalk.com/ Audition: http://www.adobe.com/products/audition/ Soundbooth: http://www.adobe.com/products/soundbooth/ SoundEdit Pro: http://rmbsoft.com/sep.asp Some Common Sound File Formats –AIFF: Audio Interchange File Format | Mac/CD –AU: µlaw (mu-law) Format | Unix –MIDI: Musical Digital Interface | Synthesizers –MPEG: Moving Picture Experts Group (mp3) –Real Audio (.ram/.ra) –WAV: Windows Audio format

6. Slide 6 of 15 CS 22: Enhanced Web Site Design - Week 5 Sound Archives http://commons.wikimedia.org http://www.audible.com/ http://www.windowsmedia.com/ http://www.apple.com/itunes/store/ http://music.yahoo.com/ http://www.mp3.com/ http://www.archive.org/ http://www.ourmedia.org/

7. Slide 7 of 15 CS 22: Enhanced Web Site Design - Week 5 Creating Videos Imovie (Macintosh) –http://www.apple.com/imovie Windows Movie Maker (Windows) –http://www.microsoft.com/windowsxp/using/moviemaker/ Quicktime (Mac/Windows) –http://www.quicktime.com Director (Mac/Windows) –http://www.adobe.com/products/director/ RealProducer (Mac/Windows) –http://www.real.com –http://www.realnetworks.com/products/producer Windows Media Audio & Video (Mac/Windows) –http://www.microsoft.com/windowsmedia/ Flash (Mac/Windows) –http://www.macromedia.com/software/flash/ Captivate (Windows) –http://www.macromedia.com/software/captivate/ Camtasia (Windows) –http://www.camtasia.com

8. Slide 8 of 15 CS 22: Enhanced Web Site Design - Week 5 Things to know about video... Television - 30 frames/sec ASF: Advanced Streaming Format ASX: Advanced Streaming Format metafile (contains metadata - URL, title, author, copyright, etc.) AVI: Audio Video Interleave MPEG: Motion Picture Experts Group QuickTime (Apple) RealVideo (Real Networks)

9. Slide 9 of 15 CS 22: Enhanced Web Site Design - Week 5 Using the Anchor Tag Click here to listen Click here to view Click here to listen Advantages: –Page loads instantly. No waiting for large files to download in the background. –Works with all browsers, even version 1.1N Disadvantages: –Requires plug-ins or players –Can't adjust the height/width or location of the video/sound.

10. Slide 10 of 15 CS 22: Enhanced Web Site Design - Week 5 tag http://www.apple.com/quicktime/tutorials/embed.html http://www.apple.com/quicktime/tutorials/embed2.html SRC="URL" AUTOSTART="TRUE|FALSE" ALIGN="BOTTOM|TOP|LEFT|RIGHT" ALT="ALTERNATIVE TEXT" BORDER="XX" -- in pixels LOOP="TRUE|FALSE" HEIGHT="XX" -- in pixels WIDTH="XX" -- in pixels HIDDEN="TRUE|FALSE" VSPACE="XX" -- space above/below embedded object (in pixels)

11. Slide 11 of 15 CS 22: Enhanced Web Site Design - Week 5 examples

12. Slide 12 of 15 CS 22: Enhanced Web Site Design - Week 5 BGSOUND is not supported by Netscape. You can create a similar effect by using the EMBED tag, setting the height & width to 0 and have the clip start automatically when loaded. That said, it can create some nifty sound effects on IE browsers

13. Slide 13 of 15 CS 22: Enhanced Web Site Design - Week 5 BALANCE="XX" –defines how the volume will be divided between the 2 speakers (-10000 to +10000) LOOP="TRUE|FALSE" SRC="URL" VOLUME="XX" –Defines the volume of the background sound (-10000 to 0)

14. Slide 14 of 15 CS 22: Enhanced Web Site Design - Week 5 example Quiet: Loud:

15. Slide 15 of 15 CS 22: Enhanced Web Site Design - Week 5 Sound/video examples http://www.stanford.edu/group/csp/cs22/video –Link example –Embed example http://www.stanford.edu/group/csp/cs22/sound –Link example –Embed example –BGSOUND example