Download document

Web Developer & Design
Foundations with XHTML
Chapter 11
Web Media & Interactivity
Modified by Linda Kenney
Dec. 2, 2007
1
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.
© 2007 Pearson Education
2
Commonly Used
Plug-ins
•
•
•
•
•
•
Real Player
Windows Media Player
Apple QuickTime
Adobe Reader
Macromedia Flash Player
Macromedia Shockwave
Player
© 2007 Pearson Education
3
Real Player
• http://real.com
• Plays streaming audio, video,
animations, and multimedia
presentations.
© 2007 Pearson Education
4
Windows Media
Player
• http://www.microsoft.com/windo
ws/windowsmedia/download/
• Plays streaming audio, video,
animations, and multimedia
presentations.
© 2007 Pearson Education
5
Apple QuickTime
(with iTunes)
• http://www.apple.com/quicktime/
download/win.html
• Displays QuickTime animation,
music, MIDI, audio, video, and
VR panoramas and objects
directly within the Web page.
© 2007 Pearson Education
6
Adobe Reader
• http://www.adobe.com/products/
acrobat/readstep2.html
• Used to exchange information in
.pdf format, such as brochures
and documents.
© 2007 Pearson Education
7
Macromedia Flash
Player
• http://www.adobe.com/products/
flashplayer/
• Displays .swf format files.
These can contain audio, video,
and animation along with
interactivity.
© 2007 Pearson Education
8
Macromedia Shockwave
Player
• http://www.adobe.com/products/
shockwaveplayer/
• Displays high-performance
multimedia created using
Macromedia Director.
© 2007 Pearson Education
9
Audio File Types
• .wav
• .aiff
• .mid
• .au
• .mp3
Wave File
Audio Interchange File Format
Musical Instrument Digital
Interface (MIDI)
Sun UNIX sound file
MPEG-1 Audio Layer-3
© 2007 Pearson Education
10
Obtaining Audio Files
• Audio files can be obtained from various sources:
–
–
–
–
Record your own sounds or music
Download sounds or music from a free site
Download sounds or music from a site for a fee
Record 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.
– Purchase a CD of sounds or music.
– 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.
© 2007 Pearson Education
11
Downloading audio
files
• http://office.microsoft.com/enus/clipart/
• http://www.freeaudioclips.com/
• http://www.flashkit.com/soundfx/
© 2007 Pearson Education
12
Downloading audio
files (cont.)
• Audio files can be quite large/
• Make audio files as brief as
possible
© 2007 Pearson Education
13
Using Sound on a Web
Page (1)
• Link to the sound
<a href="ringing.wav" title=”Hear a
telephone ring.”>telephone ringing</a>
• If the visitor clicks on the link then
the plug in for .wav files that is
installed on their computer will
display. They can then use the plug
in to play the file.
© 2007 Pearson Education
14
Using Sound on a Web
Page (2)
• 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
© 2007 Pearson Education
15
XHTML <embed> tag
<embed src="catch.wav" autostart="false"
controls="smallconsole" height="25" width="100" />
• A stand alone
tag
• Attributes:
© 2007 Pearson Education
–
–
–
–
–
–
–
–
src
controls
width
height
autostart
loop
align
hidden
16
• See
http://pubpages.unh.edu/~ltv6/cs403/
Chapter11/audio1.htm
• http://pubpages.unh.edu/~ltv6/cs403/
Chapter11/audio3.htm
© 2007 Pearson Education
17
XHTML <object> tag
<object data="catch.wav " autostart="false" height="50"
width="100" type="audio/wav" ></object>
• A container tag
• Attributes:
© 2007 Pearson Education
–
–
–
–
–
–
–
data
type
width
height
autostart
loop
hidden
18
• See
http://pubpages.unh.edu/~ltv6/cs403/
Chapter11/audio2.htm
© 2007 Pearson Education
19
Video File Types
• .mov
• .avi
• .wmv
• .mpg
Quicktime
Microsoft Audio Video Interleaved
Windows Media File
MPEG (Motion Picture Experts
Group)
© 2007 Pearson Education
20
Quicktime
•
•
•
•
Originally created by Apple
Also supported on Windows
Widely used on the web
Smart enough to begin to play
before the entire file is loaded.
© 2007 Pearson Education
21
Windows Media File
• Streaming video technology
• Windows Media Player supports
this file format.
© 2007 Pearson Education
22
MPEG (Motion Picture
Experts Group)
• Supported on both Windows
and Mac platforms
© 2007 Pearson Education
23
Obtaining Video Files
• Video files can be obtained from various
sources:
– Record your own
• Digital Camcorder
• Webcam
• Copy video tapes using a video capture card
– Edit using Microsoft Movie Maker, Apple Quicktime,
etc.
– Download from a free site
– Download from a site for a fee
– Purchase a DVD of stock videos
– 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.
© 2007 Pearson Education
24
Using Video
on a Web Page (1)
• Link to the video
<a href="sparky.mpg" title=”Video of dog
barking”>Sparky! (Caution: long video
download Mov 1.2MB)</a>
• Embed the video
– You can embed the video in a page and
optionally display a control panel for the
sound.
© 2007 Pearson Education
25
Using Video
on a Web Page (2)
• 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
© 2007 Pearson Education
26
XHTML <embed> tag
<embed src="sparky.mpg" autostart="false" width="160"
height="120" />
• A stand alone
tag
• Attributes:
© 2007 Pearson Education
–
–
–
–
–
–
–
–
src
controls
width
height
autostart
loop
align
hidden
27
See
• http://pubpages.unh.edu/~ltv6/cs403
/Chapter11/video1.htm
• http://pubpages.unh.edu/~ltv6/cs403
/Chapter11/ch11page4.htm
© 2007 Pearson Education
28
XHTML <object> tag
<object data="sparky.mpg" type="video/mpeg" autostart="false"
width="160" height="120" >A video displaying a cute Pekingese
dog barking.</object>
• A container tag
• Attributes:
© 2007 Pearson Education
–
–
–
–
–
–
–
data
type
width
height
autostart
loop
hidden
29
See
• http://pubpages.unh.edu/~ltv6/cs403/
Chapter11/video2.htm
© 2007 Pearson Education
30
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.
• 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:
– Authoring
– Distribution
– Playback
© 2007 Pearson Education
31
Intro to RealNetworks (1)
Streaming Media
• Authoring
• To create the streaming media you
need software.
© 2007 Pearson Education
32
Intro to RealNetworks (2)
Streaming Media Distribution
• 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.
© 2007 Pearson Education
33
Intro to RealNetworks (3)
Streaming Media Playback
• 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.
© 2007 Pearson Education
34
Examples
• http://www.thedailyshow.com/index.jhtml
• http://www.whitehouse.gov/news/#
© 2007 Pearson Education
35
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 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.
• 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.
© 2007 Pearson Education
36
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.
• 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.
© 2007 Pearson Education
37
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.
© 2007 Pearson Education
38
What is
Macromedia Flash?
• Flash is a popular multimedia application
developed by Macromedia.
• It is often used to create animation and
multimedia effects on web pages
• Flash effects are saved in “.swf” files
• .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
© 2007 Pearson Education
39
How to create
Macromedia Flash?
• “.swf” files can be created in a
number of applications including
•
•
•
•
Macromedia Flash,
Macromedia Fireworks,
Macromedia Dreamweaver,
Swish
© 2007 Pearson Education
40
Common Uses of
Macromedia Flash
• Navigation
• Splash Screen
• Entire Web Site
© 2007 Pearson Education
41
Adding Flash to
a Web Page
• Both the <object> tag and the
<embed> tag are used to place Flash
media on a page.
• Some versions of currently popular
browsers such as Netscape support
the <embed> tag and do not fully
support the <object> tag.
• Use the <noembed> tag to contain a
text description of the Flash media in
order to provide for accessibility.
© 2007 Pearson Education
42
Example -- flash
See
• http://pubpages.unh.edu/~ltv6/cs403/
Chapter11/flash.htm
© 2007 Pearson Education
43
What is Java?
• Java is an Object Oriented
Programming (OOP) language
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 both
stand-alone executable applications
and applets that are invoked by web
pages.
© 2007 Pearson Education
44
Common Uses
of Java Applets
•
•
•
•
•
Navigation Bars and Buttons
Image Effects
Text Effects
Games
Web and Business Applications
© 2007 Pearson Education
45
Adding a Java Applet
to a Web Page
• The applet tag
• A container tag
• Attributes:
– code, codebase, height, width, alt, id
• Works together with <parameter> tags
– Stand alone tags
– Attributes:
• name, value
• The <parameter> tags used by an applet
are determined by the developer who
writes and distributes the applet
© 2007 Pearson Education
46
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.
© 2007 Pearson Education
47
Java Examples
• http://pubpages.unh.edu/~ltv6/cs403/
Chapter11/java.htm
• http://www.epa.gov/epaoswer/osw/kid
s/games/hiddenhints/wordsear.htm
• Or, search on the web.
© 2007 Pearson Education
48
What is JavaScript?
• 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
• JavaScript is NOT Java
© 2007 Pearson Education
49
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
© 2007 Pearson Education
50
JavaScript
• http://echoecho.com/javascript.htm
• http://www.pageresource.com/jscript/index4.
htm
• http://javascript.internet.com/
© 2007 Pearson Education
51