Web Developer & Design Foundations with XHTML Chapter 11 Web Media & Interactivity Modified by Linda Kenney Dec. 2, 2007

Helper Applications & Plug-ins A program that can be designated to handle a particular file type (such as .wav or.mpg) to allow the user to view or otherwise utilize the special file. The helper application runs in a separate window from the browser. Plug-In A newer and more common method Plug-ins run right in the browser window so that media objects can be integrated directly into the web page.

Commonly Used Plug-ins Real Player Windows Media Player Apple QuickTime Adobe Reader Macromedia Flash Player Macromedia Shockwave Player

Real Player http://real.com Plays streaming audio, video, animations, and multimedia presentations.

Windows Media Player http://www.microsoft.com/windows/windowsmedia/download/ Plays streaming audio, video, animations, and multimedia presentations.

Apple QuickTime (with iTunes) http://www.apple.com/quicktime/download/win.html Displays QuickTime animation, music, MIDI, audio, video, and VR panoramas and objects directly within the Web page.

Adobe Reader http://www.adobe.com/products/acrobat/readstep2.html Used to exchange information in .pdf format, such as brochures and documents.

Macromedia Flash Player http://www.adobe.com/products/flashplayer/ Displays .swf format files. These can contain audio, video, and animation along with interactivity.

Macromedia Shockwave Player http://www.adobe.com/products/shockwaveplayer/ Displays high-performance multimedia created using Macromedia Director.

Audio File Types .wav Wave File .aiff Audio Interchange File Format .mid Musical Instrument Digital Interface (MIDI) .au Sun UNIX sound file .mp3 MPEG-1 Audio Layer-3

Obtaining Audio Files Audio files can be obtained from various sources: Record your own sounds or music Download sounds or music from a free site Download sounds or music from a site for a fee Record music from a CD A commercial CD can only be copied for personal use and not for publishing to the Web. Contact the owner of the copyright to request permission to use the music. Purchase a CD of sounds or music. There are some ethical issues related to using sounds and music created by others. Be certain to only publish sounds or music that you have either created yourself or have obtained the rights (sometimes called a license) to publish.

Downloading audio files http://office.microsoft.com/en-us/clipart/ http://www.freeaudioclips.com/ http://www.flashkit.com/soundfx/

Downloading audio files (cont.) Audio files can be quite large/ Make audio files as brief as possible

Using Sound on a Web Page (1) Link to the sound <a href="ringing.wav" title=”Hear a telephone ring.”>telephone ringing</a> If the visitor clicks on the link then the plug in for .wav files that is installed on their computer will display. They can then use the plug in to play the file.

Using Sound on a Web Page (2) Embed the sound You can embed the sound in a page and optionally display a control panel for the sound The <embed> tag Not part of the W3C standard but commonly used The <object> tag W3C standard but not well supported by browsers

XHTML <embed> tag <embed src="catch.wav" autostart="false" controls="smallconsole" height="25" width="100" /> A stand alone tag Attributes: src controls width height autostart loop align hidden

See http://pubpages.unh.edu/~ltv6/cs403/Chapter11/audio1.htm http://pubpages.unh.edu/~ltv6/cs403/Chapter11/audio3.htm

XHTML <object> tag <object data="catch.wav " autostart="false" height="50" width="100" type="audio/wav" ></object> A container tag Attributes: data type width height autostart loop hidden

See http://pubpages.unh.edu/~ltv6/cs403/Chapter11/audio2.htm

Video File Types .mov Quicktime .avi Microsoft Audio Video Interleaved .wmv Windows Media File .mpg MPEG (Motion Picture Experts Group)

Quicktime Originally created by Apple Also supported on Windows Widely used on the web Smart enough to begin to play before the entire file is loaded.

Windows Media File Streaming video technology Windows Media Player supports this file format.

MPEG (Motion Picture Experts Group) Supported on both Windows and Mac platforms

Obtaining Video Files Video files can be obtained from various sources: Record your own Digital Camcorder Webcam Copy video tapes using a video capture card Edit using Microsoft Movie Maker, Apple Quicktime, etc. Download from a free site Download from a site for a fee Purchase a DVD of stock videos Here are some ethical issues related to using videos created by others. Be certain to only publish videos that you have either created yourself or have obtained the rights (sometimes called a license) to publish.

Using Video on a Web Page (1) Link to the video <a href="sparky.mpg" title=”Video of dog barking”>Sparky! (Caution: long video download Mov 1.2MB)</a> Embed the video You can embed the video in a page and optionally display a control panel for the sound.

Using Video on a Web Page (2) Embed the video You can embed the video in a page and optionally display a control panel for the sound The <embed> tag Not part of the W3C standard but commonly used The <object> tag W3C standard but not well supported by browsers

XHTML <embed> tag <embed src="sparky.mpg" autostart="false" width="160" height="120" /> A stand alone tag Attributes: src controls width height autostart loop align hidden

See http://pubpages.unh.edu/~ltv6/cs403/Chapter11/video1.htm http://pubpages.unh.edu/~ltv6/cs403/Chapter11/ch11page4.htm

XHTML <object> tag <object data="sparky.mpg" type="video/mpeg" autostart="false" width="160" height="120" >A video displaying a cute Pekingese dog barking.</object> A container tag Attributes: data type width height autostart loop hidden

See http://pubpages.unh.edu/~ltv6/cs403/Chapter11/video2.htm

Streaming Media A disadvantage to a regular audio or video file is that the web site visitor must wait for the entire file to download before beginning to experience it. Streaming media corrects this problem -- it begins to play almost immediately and uses "buffering" to capture the next portion of the file download. Three major components: Authoring Distribution Playback

Intro to RealNetworks (1) Streaming Media Authoring To create the streaming media you need software.

Intro to RealNetworks (2) Streaming Media Distribution The web server needs software to handle the streaming media – such as checking connection speed and adjusting the stream to the available bandwidth. Real System Server 8.

Intro to RealNetworks (3) Streaming Media Playback Web page visitors whose browser is equipped with the Real Player plug-in will experience your streaming media. If the web site is using a RealNetworks server, the stream will be adjusted to the bandwidth available, otherwise a constant stream will be sent.

Examples http://www.whitehouse.gov/news/# http://www.thedailyshow.com/index.jhtml http://www.whitehouse.gov/news/#

Copyright Issues and Media Files(1) It is very easy to copy and download an image, audio, or video file from a web site. It may be very tempting to reuse a file in one of your own projects, but that may not be ethical or lawful. Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use. If another individual has created an image, sound, video, or document that you believe would be useful on your own web site, ask permission to use the material instead of simply “grabbing” it.

Copyright Issues and Media Files(2) All work (web pages, images, sounds, videos, etc.) is copyrighted – even if there is no copyright symbol and date on the material. Be aware that there are times when students and educators can use portions of other’s work and not be in violation of copyright law – this is called “fair use”. "Fair use" is use of a copyrighted work for purposes such as criticism, reporting, teaching, scholarship, or research.

Copyright Issues and Media Files(3) Criteria used to determine “fair use”: · The use must be educational and not commercial · The nature of the work · The amount copied must be as small of a portion of the work as possible. · The copy does not impede the marketability of the original work.

What is Macromedia Flash? Flash is a popular multimedia application developed by Macromedia. It is often used to create animation and multimedia effects on web pages Flash effects are saved in “.swf” files .swf files play as they download and give the perception of speedy display of complex graphic animations Flash requires a free browser plug-in, which is available for download from Macromedia

How to create Macromedia Flash? “.swf” files can be created in a number of applications including Macromedia Flash, Macromedia Fireworks, Macromedia Dreamweaver, Swish

Common Uses of Macromedia Flash Navigation Splash Screen Entire Web Site

Adding Flash to a Web Page Both the <object> tag and the <embed> tag are used to place Flash media on a page. Some versions of currently popular browsers such as Netscape support the <embed> tag and do not fully support the <object> tag. Use the <noembed> tag to contain a text description of the Flash media in order to provide for accessibility.

Example -- flash See http://pubpages.unh.edu/~ltv6/cs403/Chapter11/flash.htm

What is Java? Java is an Object Oriented Programming (OOP) language developed by Sun Microsystems. Java is not the same language as JavaScript. Java is more powerful and much more flexible than JavaScript. Java can be used to develop both stand-alone executable applications and applets that are invoked by web pages.

Common Uses of Java Applets Navigation Bars and Buttons Image Effects Text Effects Games Web and Business Applications

Adding a Java Applet to a Web Page The applet tag A container tag Attributes: code, codebase, height, width, alt, id Works together with <parameter> tags Stand alone tags name, value The <parameter> tags used by an applet are determined by the developer who writes and distributes the applet

Sample Java Applet <applet code=“myapplet.class" height=“50" width=“500“ alt=“Java applet: displays a moving logo with company name”> <param name="bgColor" value="#FFFFFF" /> <param name=“txtColor" value="#0000CC” /> This Java applet displays a moving logo with the company name </applet> The sample applet is named myapplet.class and requires two parameters, bgColor and txtColor.

Java Examples http://pubpages.unh.edu/~ltv6/cs403/Chapter11/java.htm http://www.epa.gov/epaoswer/osw/kids/games/hiddenhints/wordsear.htm Or, search on the web.

What is JavaScript? Object-oriented scripting language. Used to work with the objects associated with a web page document --the window, the document, the elements such as forms, images, links, etc JavaScript is NOT Java

Common Uses of JavaScript Display a message box Select list navigation Edit and validate form information Create a new window with a specified size and screen position Image Rollovers Status Messages Display Current Date Calculations

JavaScript http://echoecho.com/javascript.htm http://www.pageresource.com/jscript/index4.htm http://javascript.internet.com/