Transcript Welcome to WEB 150!

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
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
Audio
File Types
.wav
 .aiff
 .mid

.au
 .mp3
 .ogg

Wave File
Audio Interchange File Format
Musical Instrument Digital
Interface (MIDI)
Sun UNIX sound file
MPEG-1 Audio Layer-3
Ogg-Vorbis
5
Video
File Types
 .mov



.avi
.wmv
.mpg
Quicktime
Microsoft Audio Video Interleaved
Windows Media File
MPEG (Motion Picture Experts
Group)
6
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
7
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
8
 type
XHTML
<object> tag
<object data="catch.wav " height="50" width="100" type="audio/wav" >
<param name= " src " value= “catch.wav" />
 The object tag
</object>

Attributes:







data
type
width
height
classid
codebase
The param Tag

Atttributes

src
9
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" />
10
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
11
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
12
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
13
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.
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, Apple Gargeband, and so on.
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 11.1
1.
List three common web browser plugins 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
 Adobe Dreamweaver
 Swish
 Techsmith Camtasia
 And many more…
21
Common Uses of
Macromedia Flash
Navigation
 Splash Page
 Rich Media Advertising
 Entire Web Site

22
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.
23
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>
24
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-shockwaveflash" 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>
25
</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.
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:


Works together with <param /> tags


Stand alone tags
Attributes:


code, codebase, height, width, alt, id
name, value
The applets developer determines what,
if any <param /> tags are needed.
29
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.
30
Checkpoint 11.2
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.
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
Where is Ajax used?

Flickr


Del.icio.us


http://www.flickr.com
http://del.icio.us
Google e-mail

http:/google.com/gmail
Checkpoint 11.3
1.
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