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

1

Web Developer & Design Foundations with XHTML

Chapter 11Web Media & Interactivity

Modified by Linda Kenney

Dec. 2, 2007

2

© 2007 Pearson Education

Helper Applications& Plug-ins

• Helper Application– 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.

3


Commonly UsedPlug-ins

• Real Player

• Windows Media Player

• Apple QuickTime

• Adobe Reader

• Macromedia Flash Player

• Macromedia Shockwave Player

4


Real Player

• http://real.com

• Plays streaming audio, video, animations, and multimedia presentations.

5


Windows Media Player

• http://www.microsoft.com/windows/windowsmedia/download/

• Plays streaming audio, video, animations, and multimedia presentations.

6


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.

7


Adobe Reader

• http://www.adobe.com/products/acrobat/readstep2.html

• Used to exchange information in .pdf format, such as brochures and documents.

8


Macromedia Flash Player

• http://www.adobe.com/products/flashplayer/

• Displays .swf format files. These can contain audio, video, and animation along with interactivity.

9


Macromedia Shockwave Player

• http://www.adobe.com/products/shockwaveplayer/

• Displays high-performance multimedia created using Macromedia Director.

10


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

11


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.

12


Downloading audio files

• http://office.microsoft.com/en-us/clipart/

• http://www.freeaudioclips.com/

• http://www.flashkit.com/soundfx/

13


Downloading audio files (cont.)

• Audio files can be quite large/

• Make audio files as brief as possible

14


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.

15


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

16


XHTML <embed> tag

• A stand alone tag

• Attributes:– src– controls– width– height– autostart– loop– align– hidden

<embed src="catch.wav" autostart="false" controls="smallconsole" height="25" width="100" />

17


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

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

18


XHTML <object> tag

• A container tag• Attributes:

– data– type– width– height– autostart– loop– hidden

<object data="catch.wav " autostart="false" height="50" width="100" type="audio/wav" ></object>

19


• See

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

20


Video File Types

• .mov Quicktime

• .avi Microsoft Audio Video Interleaved

• .wmv Windows Media File• .mpg MPEG (Motion Picture Experts

Group)

21


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.

22


Windows Media File

• Streaming video technology

• Windows Media Player supports this file format.

23


MPEG (Motion Picture Experts Group)

• Supported on both Windows and Mac platforms

24


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.

25


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.

26


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

27


XHTML <embed> tag

• A stand alone tag

• Attributes:– src– controls– width– height– autostart– loop– align– hidden

<embed src="sparky.mpg" autostart="false" width="160" height="120" />

28


See

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

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

29


XHTML <object> tag

• A container tag• Attributes:

– data– type– width– height– autostart– loop– hidden

<object data="sparky.mpg" type="video/mpeg" autostart="false" width="160" height="120" >A video displaying a cute Pekingese dog barking.</object>

30


See

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

31


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

32


Intro to RealNetworks (1) Streaming Media

• Authoring

• To create the streaming media you need software.

33


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.

34


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.

35


Examples

• http://www.thedailyshow.com/index.jhtml

• http://www.whitehouse.gov/news/#

36


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

37



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

38



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

39


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

40


How to createMacromedia Flash?

• “.swf” files can be created in a number of applications including

• Macromedia Flash, • Macromedia Fireworks, • Macromedia Dreamweaver, • Swish

41


Common Uses ofMacromedia Flash

• Navigation

• Splash Screen

• Entire Web Site

42


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.

43


Example -- flash

See

• http://pubpages.unh.edu/~ltv6/cs403/Chapter11/flash.htm

44


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.

45


Common Usesof Java Applets

• Navigation Bars and Buttons• Image Effects• Text Effects• Games• Web and Business Applications

46


Adding a Java Appletto a Web Page

• The applet tag• A container tag• Attributes:

– code, codebase, height, width, alt, id

• Works together with <parameter> tags– Stand alone tags– Attributes:

• name, value

• The <parameter> tags used by an applet are determined by the developer who writes and distributes the applet

47


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

48


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.

49


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

50


Common Usesof 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

51


JavaScript

• http://echoecho.com/javascript.htm• http://www.pageresource.com/jscript/

index4.htm

• http://javascript.internet.com/

Documents

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