1. Web Development & Design Foundations with XHTML
Chapter 11 Key Concepts

2. Learning Outcomes In this chapter, you will learn about:
Helper Applications and Plug-ins
Audio file types
Adding sound to a web page
Video file types
Adding video to a web page
The features and common uses of JavaScript, Java Applets, Flash, DHTML, and Ajax
Adding a Java Applet to a web page
Adding a Flash Animation to a web page
Find free JavaScript, Java Applets, DHTML, and Flash resources on the Web
Describe other technologies that can be used to add web page interactivity

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

4. Commonly Used Plug-ins
Adobe Flash Player
Adobe Reader
Windows Media Player
Apple Quicktime

5. 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
.ogg Ogg-Vorbis

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

7. Using Sound on a Web Page
Link to the sound
<a href="ringing.wav" title=”Hear a telephone ring.”>telephone ringing</a>
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

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

9. XHTML <object> tag
<object data="catch.wav " height="50" width="100" type="audio/wav" >
<param name= " src " value= “catch.wav" />
</object>
The object tag
Attributes:
data
type
width
height
classid
codebase
The param Tag
Atttributes
src

10. XHTML Background Sound
<bgsound>
Only supported by Internet Explorer
Note supported by other browsers
Not part of the W3C
Do not use
Suggestion: Use the <embed> tag to configure a background sound on a web page: <embed src="catch.wav" autostart="true" hidden="true" loop="true" />

11. Using Video on a Web Page
Link to the video
<a href="sparky.mpg" title= " Video of dog barking " >Sparky! (Caution: long video download)</a>
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

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

13. XHTML <object> tag
<object width="160" height="120"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="
<param name="src" value="sparky.mov" />
<param name="autoplay" value="false" />
<param name="controller" value="true" />
A video of a cute Pekingese dog barking.
</object>
The object element
The param element

14. XHTML <img /> tag dynsrc attribute
<img dynsrc="sparky.mpg" autostart="true" width="160“ height="120" alt=”Sparky Video” />
Internet Explorer Only
<img /> tag dynsrc attribute is used to integrated the video with the web page.

15. Obtaining Media Files
Media files can be obtained from various sources:
Record your own sounds, music, or movies
Download media from a free site
Download royalty free media from a site for a fee
Record your own audio or video
Edit using Audacity, Microsoft Movie Maker, Apple Quicktime, Apple Gargeband, and so on.
Copyright Issues!

16. Copyright Issues and Media Files(1)
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.

17. 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.
Fair Use Clause of the Copyright Act
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"
Use of a copyrighted work for purposes such as criticism, reporting, teaching, scholarship, or research.
Use a SMALL portion and cite the source

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

19. Checkpoint 11.1
List three common web browser plug-ins and describe what they are used for.
Describe issues involved with adding media such as audio or video to a web page.

20. What is Adobe Flash? A popular multimedia application
Used to create animation and multimedia effects on Web pages
Flash movies are saved in “.swf” files
Perception of speedy display
.swf files play as they download
Flash Player
Free browser plug-in
Widely installed on browsers

21. How to create Flash?
“.swf” files can be created in a number of applications including
Adobe Flash
Adobe Fireworks
Adobe Dreamweaver
Swish
Techsmith Camtasia
And many more…

22. Common Uses of Macromedia Flash
Navigation
Splash Page
Rich Media Advertising
Entire Web Site

23. Adding Flash to a Web Page
Traditionally both the <object> tag and the <embed> tag are used to place Flash media on a page.
Use the <noembed> tag to contain a text description of the Flash media in order to provide for accessibility.
Issue: This method does not pass W3C XHTML validation but it displays the Flash reliably cross-platform and cross-browser.

24. Flash General Sample <object … object attributes go here….
<param name="movie" …value attribute goes here… />
<param name="quality" …value attribute goes here… />
<param name="bgcolor" …value attribute goes here… />
<embed … object attributes go here…. />
<noembed> … a brief description of the Flash media can go here along with a link to alternate text content if appropriate… </noembed>
</object>

25. Flash Detail Sample
The following code places a Flash file called flashbutton.swf on a Web page:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" swflash.cab#version=5,0,0,0 " width="147" height="34">
<param name="movie" value="flashbutton.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="flashbutton.swf" quality="high" pluginspage=" type="application/x-shockwave-flash" width="147" height="34" bgcolor="#FFFFFF" />
<noembed>This is a Flash button that links to <a href=” web site</a>
</noembed>
</object>

26. What is Java? Object Oriented Programming (OOP)
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 stand-alone executable applications
applets that are invoked by Web pages.

27. Java Applets
Compiled -- translated from the English-like Java statements to an encoded form called Byte Code.
Use the “.class” file extension
Java Virtual Machine (JVM)
interprets the byte code into the proper machine language for the operating system
After translation, the applet is executed and appears on the Web page.

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

29. Adding a Java Applet to a Web Page
The applet tag
A container tag
Attributes:
code, codebase, height, width, alt, id
Works together with <param /> tags
Stand alone tags
name, value
The applets developer determines what, if any <param /> tags are needed.

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

31. Checkpoint 11.2 Describe two uses of Flash on web pages.
Describe two uses of Java applets on web pages.
Describe two disadvantages of using interactive technologies such as Flash and Java applets on web pages.

32. What is JavaScript? Object-based scripting language
Manipulates the objects associated with a Web page document:
the window
the document
the elements such as forms, images, hyperlinks, and so on

33. What is JavaScript? (2)
Originally developed by Netscape and called LiveScript
Renamed JavaScript after Netscape collaborated with Sun Microsystems on modifications to the language
JavaScript is NOT Java

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

35. What is DHTML (Dynamic HTML)?
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.
Technologies used in DHTML:
Document Object Model (DOM)
Cascading Style Sheets (CSS)
Client-side Scripting

36. Document Object Model (DOM)
A portion of the DOM is shown at the left.
Defines every object and element on a Web page
Hierarchical structure
Accesses page elements and apply styles to page elements

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

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

39. What is Ajax? Asynchronous JavaScript and XML
“Ajax” – Jesse James Garrett at Adaptive Path
Existing technologies used in a new way
Standards-based XHTML and CSS
Document Object Model
XML (and the related XSLT technology)
Asynchronous data retrieval using XMLHttpRequest
JavaScript

40. Where is Ajax used? Flickr Del.icio.us Google e-mail
Del.icio.us
Google

41. Checkpoint 11.3 Describe two uses of JavaScript.
Describe two uses of DHTML.
Describe two uses of Ajax.

42. Multimedia & Accessibility
Provide links to plug-ins
Provide text descriptions and captions
Verify keyboard access
Check for screen flickering
Verify functionality if JavaScript is disabled
If media is used for main navigation, provide plain text links

43. Summary
This chapter introduced the XHTML techniques and technologies used to place sound, video, and interactivity on Web pages.
It also discussed accessibility, usability, and copyright as they relate to media use on the Web.
As you continue your studies, you may choose to specialize in one or more of these technologies.