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, Ajax, and Flash resources on the Web 2

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

Common 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.oggOgg-Vorbis. m4a MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods. 5

Common Video File Types. movQuicktime.avi Microsoft Audio Video Interleaved.wmvWindows Media File.flv Flash Video File.mpgMPEG (Motion Picture Experts Group).m4v.mp4 (MPEG-4) 6

Using Sound on a Web Page Hyperlink Web Design Podcast Embed the sound ◦ You can embed the sound in a page and optionally display a control panel for the sound ◦ The tag  W3C standard and supported by modern browsers 7

XHTML & tags 8 <object data= "soundloop.mp3" height="50" width= "50“ type="audio/mpeg" title= "Music Sound Loop" > This code is valid but does not work for IE

Cross-browser & tags Described by Elizabeth Castro at mbed mbed Internet Explorer expects the classid and codebase attributes but other browsers do not correctly render the object when they are included The IE Issue

Cross-browser & tags Configure TWO tags One for Internet Explorer One for other browsers Use Conditional Comments to “direct” IE to the appropriate tag Tell IE to skip the code between the tags: --> Recall that browsers render XHTML top- down Solution

Cross-browser & tags <object data="soundloop.mp3" height="50" width="100" type="audio/mpeg" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=" -->

Using Video on a Web Page Hyperlink Sparky Video (1.2 MB) Embed the video ◦ You can embed the video in a page and optionally display a control panel for the sound ◦ The tag  W3C standard and supported by modern browsers 12

Cross-browser & tags <object data=“lighthouse.mov" height=“260" width=“340" type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=" title=“Door County Lighthouse Tour"> --> <object data=“lighthouse.mov" height=“260" width=“340" type="video/quicktime" title=“Door County Lighthouse Tour" > Video showing photos of a boat tour showing lighthouses in Door County.

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

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 Pro  Apple iMovie  Apple Gargeband  Etc…. ◦ Copyright Issues! 15

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

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 17

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

Checkpoint 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. 19

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 20

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

Common Uses of Adobe Flash Navigation Engaging visual content Splash Page Rich Media Advertising Entire Web Site Delivery of audio or video 22

Flash Delivery of Media Media-centric sites such as and use FLASH to deliver their video and audio. ◦ Why? ◦ The Flash Player is widely installed ◦ Avoid media plug-in issues. 23

Adding Flash to a Web Page & tags <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… 24

Flash Detail Sample The following code places a Flash file called flashbutton.swf on a Web page: This is a Flash buttonthat links to the Adobe Web site. 25

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

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

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

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

Sample Code for a 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 The sample applet is named myapplet.class and requires two parameters, bgColor and txtColor. 30

Checkpoint 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. 31

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 32

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 33

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 34

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 35

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 36

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

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

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 Very Basic Example: ◦

Where is Ajax used? Flickr ◦ Del.icio.us ◦ Google ◦

Checkpoint Describe two uses of JavaScript. 2. Describe two uses of DHTML. 3. Describe two uses of Ajax. 41

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