1. 1 Video, Animation and Programs Helper Applications and Plug-insHelper Applications and Plug-ins Audio file types and how to obtain themAudio file types and how to obtain them Adding sound to a web pageAdding sound to a web page Video file types and how to obtain themVideo file types and how to obtain them Adding video to a web pageAdding video to a web page Streaming MediaStreaming Media The features and common uses of JavaScript, Java Applets, Flash, and DHTMLThe features and common uses of JavaScript, Java Applets, Flash, and DHTML Adding a Java Applet to a web pageAdding a Java Applet to a web page Adding a Flash Animation to a web pageAdding a Flash Animation to a web page Find free JavaScript, Java Applets, DHTML, and Flash resources on the WebFind free JavaScript, Java Applets, DHTML, and Flash resources on the Web Describe other technologies that can be used to add web page interactivityDescribe other technologies that can be used to add web page interactivity

2. 2 Helper Applications & Plug-ins Helper Application 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.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.The helper application runs in a separate window from the browser. Plug-In Plug-In A newer and more common methodA 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.Plug-ins run right in the browser window so that media objects can be integrated directly into the web page.

3. 3 Commonly Used Plug-ins Real Player Real Player Windows Media Player Windows Media Player Apple Quicktime Apple Quicktime Macromedia Flash Player Macromedia Flash Player

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

5. 5 Obtaining Audio Files Audio files can be obtained from various sources: Audio files can be obtained from various sources: Record your own sounds or musicRecord your own sounds or music Download sounds or music from a free siteDownload sounds or music from a free site Download sounds or music from a site for a feeDownload sounds or music from a site for a fee Record music from a CDRecord 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. 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.Purchase a CD of sounds or music. There are some ethical issues related to using sounds and music created by others.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. 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.

6. 6 Using Sound on a Web Page Link to the sound Link to the sound telephone ringing telephone ringing Embed the sound Embed the sound You can embed the sound in a page and optionally display a control panel for the soundYou can embed the sound in a page and optionally display a control panel for the sound The tagThe tag Not part of the W3C standard but commonly used Not part of the W3C standard but commonly used The tagThe tag W3C standard but not well supported by browsers W3C standard but not well supported by browsers

7. 7 XHTML tag The embed tag The embed tag A stand alone tag A stand alone tag Attributes: Attributes: srcsrc controlscontrols widthwidth heightheight autostartautostart looploop alignalign hiddenhidden

8. 8 XHTML tag The object tag The object tag A container tag A container tag Attributes: Attributes: datadata typetype widthwidth heightheight autostartautostart looploop hiddenhidden

9. 9 XHTML Background Sound Internet Explorer supports the tag. This tag is not supported by other browsers and should be avoided Internet Explorer supports the tag. This tag is not supported by other browsers and should be avoided Using the tag to configure a background sound on a web page: Using the tag to configure a background sound on a web page:

10. 10 Video File Types. movQuicktime. movQuicktime.avi Microsoft Audio Video Interleaved.avi Microsoft Audio Video Interleaved.wmvWindows Media File.wmvWindows Media File.mpgMPEG (Motion Picture Experts Group).mpgMPEG (Motion Picture Experts Group)

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

12. 12 Using Video on a Web Page Link to the video Link to the video Sparky! (Caution: long video download) Sparky! (Caution: long video download) Embed the video Embed the video You can embed the video in a page and optionally display a control panel for the soundYou can embed the video in a page and optionally display a control panel for the sound The tagThe tag Not part of the W3C standard but commonly used Not part of the W3C standard but commonly used The tagThe tag W3C standard but not well supported by browsers W3C standard but not well supported by browsers

13. 13 XHTML tag The embed tag The embed tag A stand alone tag A stand alone tag Attributes: Attributes: srcsrc controlscontrols widthwidth heightheight autostartautostart looploop alignalign hiddenhidden

14. 14 XHTML tag The object tag The object tag A container tag A container tag Attributes: Attributes: datadata typetype widthwidth heightheight autostartautostart looploop hiddenhidden A video displaying a cute Pekingese dog barking.

15. 15 XHTML tag dynsrc attribute Internet Explorer Only Internet Explorer Only tag dynsrc attribute is used to integrated the video with the web page. tag dynsrc attribute is used to integrated the video with the web page.

16. 16 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. 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. 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: Three major components: AuthoringAuthoring DistributionDistribution PlaybackPlayback

17. 17 Intro to RealNetworks Streaming Media (1) There are two components to every streaming media production: There are two components to every streaming media production: the media file itself (.rm file extension)the media file itself (.rm file extension) the metafile (.ram file extension).the metafile (.ram file extension). The metafile (which means “file about a file”) is a text file that contains a link to the streaming media file. The metafile (which means “file about a file”) is a text file that contains a link to the streaming media file. Web developers that want to use streaming media code a link to the metafile (not the media file). Web developers that want to use streaming media code a link to the metafile (not the media file).

18. 18 Intro to RealNetworks Streaming Media Distribution(1) The web server needs software to handle the streaming media – such as checking connection speed and adjusting the stream to the available bandwidth. 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.Real System Server 8. To use a streaming media file with a web page, three files must be uploaded to the web server: To use a streaming media file with a web page, three files must be uploaded to the web server: the media file (.rm extension),the media file (.rm extension), the metafile (.ram extension)the metafile (.ram extension) and the web page.and the web page.

19. 19 Intro to RealNetworks Streaming Media Distribution(2) There are two ways to distribute RealNetworks streaming media. There are two ways to distribute RealNetworks streaming media. Web host provider purchases and installs a RealServer from RealNetworks.Web host provider purchases and installs a RealServer from RealNetworks. This will handle multiple users and monitor streaming rates with the client computers. This will handle multiple users and monitor streaming rates with the client computers. This is needed for a commercial, heavy traffic site. This is needed for a commercial, heavy traffic site. A second option (which is free) is to stream the content using HTTP (the protocol that web browsers and web servers use to communicate).A second option (which is free) is to stream the content using HTTP (the protocol that web browsers and web servers use to communicate). The media is transmitted at a preset, constant speed and the stream is not monitored. The media is transmitted at a preset, constant speed and the stream is not monitored.

20. 20 Intro to RealNetworks Streaming Media Playback Web page visitors whose browser is equipped with the Real Player plug-in will experience your streaming media. 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. 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.

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

22. 22 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. 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”. 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. "Fair use" is use of a copyrighted work for purposes such as criticism, reporting, teaching, scholarship, or research.

23. 23 Copyright Issues and Media Files(3) Criteria used to determine “fair use”: 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.

24. 24 Questions 1. List three common web browser plug- ins and describe what they are used for. 2. Describe issues involved with adding media such as audio or video to a web page. 3. True or False. Visit the plug-in or player’s web site for the most current information on the XHTML needed to successfully invoke a plug-in.

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

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

27. 27 Common Uses of Macromedia Flash Navigation Navigation Splash Screen Splash Screen Entire Web Site Entire Web Site

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

29. 29 Flash General Sample <object … object attributes go here…. … a brief description of the Flash media can go here along with a link to alternate text content if appropriate… … a brief description of the Flash media can go here along with a link to alternate text content if appropriate… </object>

30. 30 Flash Detail Sample The following code places a Flash file called flashbutton.swf on a web page: This is a Flash button that links to Macromedia’s web site This is a Flash button that links to Macromedia’s web site

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

32. 32 Java Applets Java applets are compiled (translated from the English-like Java statements to an encoded form) and saved as “.class” files which contain byte code. Java applets are compiled (translated from the English-like Java statements to an encoded form) and saved as “.class” files which contain byte code. The byte code is interpreted by the Java Virtual Machine (JVM) in the web browser. The JVM interprets the byte code into the proper machine language for the operating system. The byte code is interpreted by the Java Virtual Machine (JVM) in the web browser. The JVM interprets the byte code into the proper machine language for the operating system. The applet is then executed and appears on the web page. The applet is then executed and appears on the web page.

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

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

35. 35 Sample Java Applet <applet code=“myapplet.class" height=“50" width=“500“ alt=“Java applet: displays a moving logo with company name”> 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. The sample applet is named myapplet.class and requires two parameters, bgColor and txtColor.

36. 36 Questions 1. Describe two uses of Flash on web pages. 2. Describe two uses of Java applets on web pages. 3. Describe two disadvantages of using interactive technologies such as Flash and Java applets on web pages.

37. 37 What is JavaScript? Object-oriented scripting language. 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 Used to work with the objects associated with a web page document --the window, the document, the elements such as forms, images, links, etc Originally developed by Netscape and called LiveScript Originally developed by Netscape and called LiveScript Netscape collaborated with Sun Microsystems on modifications to the language and it was renamed JavaScript Netscape collaborated with Sun Microsystems on modifications to the language and it was renamed JavaScript JavaScript is NOT Java JavaScript is NOT Java

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

39. 39 What is DHTML (Dynamic HTML)? A group of technologies work together to change a web page after it has been downloaded. A group of technologies work together to change a web page after it has been downloaded. These technologies allow the web page to respond to user actions. These technologies allow the web page to respond to user actions. Technologies used in DHTML: Technologies used in DHTML: Document Object Model (DOM)Document Object Model (DOM) Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) Client-side ScriptingClient-side Scripting

40. 40 Document Object Model (DOM) The DOM defines every object and element on a web page. The DOM defines every object and element on a web page. Its hierarchical structure can be used to access page elements and apply styles to page elements. Its hierarchical structure can be used to access page elements and apply styles to page elements. A portion of the DOM is shown at the right. A portion of the DOM is shown at the right.

41. 41 More on DHTML Has a long learning curve because of the extent of the knowledge needed to successfully combine the three technologies. Has a long learning curve because of the extent of the knowledge needed to successfully combine the three technologies. Implemented differently by major versions of the major browsers, Internet Explorer and Netscape. Implemented differently by major versions of the major browsers, Internet Explorer and Netscape. DHTML coded to work in Internet Explorer will often not work in Netscape.DHTML coded to work in Internet Explorer will often not work in Netscape. DHTML coded to work in Netscape 4.x will not work in Netscape 6.DHTML coded to work in Netscape 4.x will not work in Netscape 6. Convergence between the DHTML implementations of Internet Explorer 5, Mozilla Firefox, and Netscape 7 is better. Convergence between the DHTML implementations of Internet Explorer 5, Mozilla Firefox, and Netscape 7 is better. It should become easier to write cross-browser DHTML in the future. It should become easier to write cross-browser DHTML in the future.

42. 42 Common Uses of DHTML Hiding and showing text Hiding and showing text Navigation Navigation Image Effects Image Effects

43. 43 Adding DHTML to a Web Page The code needed to add a DHTML effect to a web page will vary based on the desired effect – usually using a combination of CSS and JavaScript. The code needed to add a DHTML effect to a web page will vary based on the desired effect – usually using a combination of CSS and JavaScript. The JavaScript tends to get complex because of the differences in the syntax required for different browser and browser versions. The JavaScript tends to get complex because of the differences in the syntax required for different browser and browser versions. It is a good idea to become comfortable with CSS and JavaScript before tackling DHTML. It is a good idea to become comfortable with CSS and JavaScript before tackling DHTML.

44. 44 Questions 1. Describe two uses of JavaScript. 2. Describe two uses of DHTML 3. List the technologies used when coding DHTML.