Web Development & Design Foundations with XHTML Chapter 11 Key Concepts

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

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 Adobe Flash Player Adobe Reader Windows Media Player Apple Quicktime

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

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

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

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

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

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" />

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

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

XHTML <object> tag <object width="160" height="120" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <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

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.

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!

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.

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

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.

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.

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

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…

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

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.

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>

Flash Detail Sample The following code places a Flash file called flashbutton.swf on a Web page: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ 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="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147" height="34" bgcolor="#FFFFFF" /> <noembed>This is a Flash button that links to <a href=”http://macromedia.com”>Macromedia’s web site</a> </noembed> </object>

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.

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.

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 <param /> tags Stand alone tags name, value The applets developer determines what, if any <param /> tags are needed.

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.

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.

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

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

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

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

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

Common Uses of DHTML Hiding and showing text Navigation Image Effects

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.

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

Where is Ajax used? Flickr Del.icio.us Google e-mail http://www.flickr.com Del.icio.us http://del.icio.us Google e-mail http:/google.com/gmail

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

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

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.