New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual

New Perspectives HTML5 and CSS3
Comprehensive 7th Edition Carey

Solutions Manual
Visit to download the full and correct content document: https://testbankdeal.com/dow
nload/new-perspectives-html5-and-css3-comprehensive-7th-edition-carey-solutions-
manual/
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 1 of 12
New Perspectives on HTML5 and CSS3

Tutorial Eight: Enhancing a Website with Multimedia
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching
experience through classroom activities and through a cohesive chapter summary.
This document is organized chronologically and uses the same headings in blue that you see
in the textbook. Under each heading, you will find (in order): Lecture Notes that summarize
the section, Figures and Boxes found in the section (if any), Teacher Tips, Classroom
Activities, and Lab Activities. Pay special attention to teaching tips and activities, which are
geared toward quizzing your students, enhancing their critical thinking skills, and
encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD contains PowerPoint

Presentations, Test Banks, and other supplements to aid your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up-to-date with the latest in technology news. Direct your students to
http://coursecasts.course.com, from where they can download the most recent CourseCasts
onto their mp3 player. Ken Baldauf, the host of CourseCasts, is a faculty member of the
Florida State University Computer Science Department. He is responsible for taking
technology classes to thousands of FSU students each year. Ken is an expert in the latest
technology and sorts through and aggregates the most pertinent news and information for
CourseCasts so your students can spend time enjoying technology rather than trying to
figure it out. Open or close your lecture with a discussion based on the latest CourseCasts.
Table of Contents
Tutorial Objectives 2
Introducing Multimedia on the Web 2
Working with the audio Element 3
Exploring Embedded Objects 4
Exploring Digital Video 4
Using the HTML5 video Element 5
Adding a Text Track to Video 6
Using Third-Party Video Players 7
Creating Transitions with CSS 8
Animating Objects with CSS 9
End of Tutorial Material 11
Glossary 12
Tutorial Objectives
Students will have mastered the material in Tutorial Eight when they can:
Session 8.1 Session 8.3

• Understand audio and video formats • Create a CSS transition
• Insert an HTML audio clip • Explore transition attributes
• Support multiple audio formats • Create a CSS key frame animation
• Apply a CSS animation
Session 8.2
• Insert an HTML video clip
• Write a video caption track
• Format video captions
Introducing Multimedia on the Web

LECTURE NOTES
• Discuss the purpose of introducing multimedia on the web.
• Explain the concept of a codec.
• Explain lossy compression.
• Discuss lossless compression.
• Point out the disadvantage of lossless compression.
• Discuss the role of a container with respect to codecs.
• Point out the usage of a media player.
• Explain the usage of a plug-in.
• Point out that a plug-in can run within the web page as an embedded object.
• List the problems associated with the plug-in approach.
BOXES
• None
FIGURES
• Figure 8-1
TEACHER TIP
Prepare a few examples of lossy and lossless compression. Mention to the students the disadvantage of
lossless compression.
CLASSROOM ACTIVITIES
• Internet Activity: Ask the students to research the advantages and disadvantages of
multimedia.
• Quick Quiz:
o True/False: In lossless compression, data is compressed by removing redundant
information. (Answer: True)
o Fill in the blank: _____ is a computer program that encodes and decodes streams of
data. (Answer: Codec)
LAB ACTIVITY
• None
Working with the audio Element

LECTURE NOTES
• Discuss the syntax to embed an audio element within a web page.
• Using figure 8-2, discuss the different attributes associated with HTML audio and video
elements.
• Using figure 8-3, discuss the most popular audio formats in HTML.
• Using figure 8-4, discuss the different browser support audio formats.
• Discuss the syntax to nest several source elements within a single audio element.
• Explain the process of applying styles to a native media player.
• Using figure 8-6, show the default audio player for different browsers.
• Explain the concept of a fallback option.
BOXES
• Tip: Because XHTML requires values for every attribute, enter the controls attribute as
controls="controls" to display media player controls on a page written in XHTML
(HTML 591).
• Tip: If no type attribute is provided, the browser will download a section of the file to
determine whether it corresponds to a recognized format (HTML 593).
• Insight: Exploring MIME Types (HTML 593)
• Tip: By default, audio and video elements are displayed in-line with the surrounding page
content (HTML 595).
• Proskills: Verbal Communication: Tips for Effective Web Audio (HTML 598)
FIGURES
• Figure 8-2, Figure 8-3, Figure 8-4, Figure 8-5, Figure 8-6, Figure 8-7, Figure 8-8, Figure 8-9,
Figure 8-10
TEACHER TIP
Remind the students that CSS can be applied to modify the media player’s appearance. Use figure 8-10
to show how a fallback text is displayed within a web page. Gather a few images to show the latest
audio players for different browsers.
• Class Discussion:
Ask the students to make a list of any four attributes of the HTML audio element.
• Quick Quiz:
o True/False: The mobile version of the Firefox browser supports the AAC audio format.
(Answer: False)
o True/False: Apple devices support all audio formats except AAC. (Answer: False)
LAB ACTIVITY
• Have the students open an editor of their choice and create a new file with the extension
.html or take up any file from their previous lab activities. Follow the instructions from the
following section:
o HTML 593 “To add an audio clip”
o HTML 595 “To apply styles to the Media Player”
o HTML 595 “To play the audio clip”
o HTML 597 “To provide alternate text to the audio clip”
Exploring Embedded Objects

LECTURE NOTES
• Define the syntax of several plug-in attributes applied to an embed element.
• Point out the challenges faced in installing plug-ins.
• Explain how to use plug-ins as fallback options.
BOXES
• Tip: Browsers that don’t support HTML5 ignore the audio and source elements but apply
the embed element to insert the media player via a plug-in (HTML 599).
FIGURES
• None
TEACHER TIP
Have a discussion with the students on the challenges faced with plug-ins. Remind students that plug-
ins use the attributes designed for them and ignore the others. Also, tell them that plug-ins can act as
fallback options for browsers that do not support HTML5.
• Quick Quiz:
o True/False: Older browsers relied on plug-ins to play audio and video files. (Answer:
True)
o True/False: Plug-ins cannot act as a fallback option for browsers that do not support
the HTML5 multimedia elements. (Answer: False)
LAB ACTIVITY
• None
Exploring Digital Video

LECTURE NOTES
• Point out the codecs for a video file.
• Using figure 8-11, discuss the most commonly used video codecs on the web.
• Using figure 8-12, discuss the several video formats used on the web.
• Using figure 8-13, list the browser support for several video formats.
BOXES
• None
FIGURES
• Figure 8-11, Figure 8-12, Figure 8-13
TEACHER TIP
Remind the students to supply multiple versions of the same video to achieve widest cross-browser
support.
Have a discussion with the students on the advantages of embedding a video in a web page.
• Quick Quiz
o True/False: The most popular video codec is H.264. (Answer: True)
o True/False: The desktop version of Internet Explorer only supports MPEG-4 video
format. (Answer: True)
LAB ACTIVITY
• None
Using the HTML5 video Element

LECTURE NOTES
• Define the syntax to embed videos into a web page using the video element.
• Discuss the fallback option with respect to videos in HTML5.
• Explain the attribute and syntax used to define the video’s preview image.
BOXES
• None
FIGURES
• Figure 8-14, Figure 8-15, Figure 8-16, Figure 8-17, Figure 8-18
TEACHER TIP
Mention to the students that a browser uses the first source it finds in a format it supports.
Remind the students that by default, media players show the first video frame as a preview of the
video’s content when the player initially loads a video file.
Quick Quiz:
• True/False: The poster attribute is used to define the video’s preview image. (Answer: True)
• True/ False: The media player shows the last video frames as a preview of the video’s content
when the player initially loads a video file. (Answer: False)
LAB ACTIVITY
• Have the students use an editor of their choice to modify the file they created in the last lab.
Follow the instructions from the following section:
o HTML 604 “To embed a video file into the web page”
o HTML 606 “To set the video’s poster image”
Adding a Text Track to Video

LECTURE NOTES
• Discuss the syntax to add text tracks to an audio or video clip using the track element.
• Use Figure 8-19 to list the different kinds of tracks that can be associated with an audio or a
video file.
• Explain the format of a WebVTT file.
• Discuss the general form of a cue in a WebVTT file.
• Using Figure 8-23, explain the different cue attributes that are used to set the size and
position of the cue text.
• Define the syntax of the cue pseudo-element to format the appearance of the cues.
• Discuss the different styles for the cue pseudo-element.
• Discuss the several markup tags used to identify sections of the cue text.
BOXES
• Tip: A WebVTT file has the file extension .vtt (HTML 608).
• Tip: Cue text entered on multiple lines in the WebVTT file will also be displayed on multiple
lines when played back (HTML 608).
• Tip: To center the cue in the video window, set the line and position values to 50% and the
align value to middle (HTML 611).
• Tip: Ruby text refers to annotative characters placed above or to the right of other characters
and is often used with Chinese or Japanese symbols (HTML 613).
FIGURES
• Figure 8-19, Figure 8-20, Figure 8-21, Figure 8-22, Figure 8-23, Figure 8-13, Figure 8-24,
Figure 8-25, Figure 8-26, Figure 8-27, Figure 8-28
TEACHER TIP
Remind the students that the default attribute is required even if the track list contains only one
track. Also, stress that the list of cues is separated by a single blank line after the cue text.
Inform the students that the cue pseudo-element formats all of the cue text in the media clip by
default.
Ask the students to express their views on the necessity of adding a text track to a
video/image.
• Quick Quiz:
o Fill in the blank: Tracks are stored as simple text files written in the _____ language.
(Answer: Web Video Text Tracks or WebVTT)
o True/False: By default, a cue is placed at the top-right corner of a video window.
(Answer: False)
LAB ACTIVITY
o HTML 608 “To create a track file”
o HTML 609 “To add captions to a video clip”
o HTML 611 “To position the track cues”
o HTML 613 “To format the cue text”
o HTML 614 “To apply styles to the cue text”
Using Third-Party Video Players

LECTURE NOTES
• Discuss the object element with reference to the earlier browsers.
• Explain the syntax used to embed the Adobe Flash player using the object element.
• Discuss the process of embedding videos from YouTube.
• Discuss the use of an iframe element.
• Define inline frames.
• Discuss the various HTML5 video players.
BOXES
• Tip: To hide the Flash player, set the width and height values to 0 (HTML 618).
• Proskills: Problem Solving: Tips for Effective Web Video (HTML 620)
FIGURES
• Figure 8-29, Figure 8-30
TEACHER TIP
Inform the students that the most-used plug-in for video playback is the Adobe Flash player. Use
figure 8-29 to discuss about the various parameters recognized by the Adobe Flash player.
Ask the students to list and describe any three parameters recognized by the Adobe Flash
player.
• Quick Quiz:
o True/False: The most-used plug-in for video playback was the Adobe Flash player.
(Answer: True)
o True/False: The inline-frame element is used to mark iframes. (Answer:
False)
LAB ACTIVITY
• None
Creating Transitions with CSS

LECTURE NOTES
• Define the term transition.
• Use figure 8-31 to discuss the difference between the hover and transition properties.
• Explain the syntax of the transition style.
• Discuss the syntax to apply transition to more than one property.
• Discuss the syntax to define the varying speed of a transition.
• Discuss the several keywords used for timing-function.
• Using figure 8-35, compare the transition results of background color with different timing-
functions.
• Discuss the syntax of the cubic-bezier function.
• Explain the advantage of Cubic Bezier curves.
• Explain the syntax to delay the start of a transition.
• Discuss the effect of a hover transition.
• Discuss the limitations of transitions.
BOXES
• Tip: To specify a time in milliseconds, use the “ms” unit (HTML 624).
• Insight: Properties Affected by Transitions (HTML 626).
• Tip: You can also set the properties affected by the transition and their duration using the
transition-property and transition-duration styles (HTML 626).
• Tip: You can also define the timing-function using the transition-timing-
function property (HTML 626).
• Tip: You can also define the timing-function using the transition-delay property
(HTML 629).
• Insight: Creating an Asymmetric Transition (HTML 634)
FIGURES
Figure 8-38, Figure 8-39, Figure 8-40, Figure 8-41, Figure 8-42
TEACHER TIP
Inform the students that two transitions can involve totally different effects and durations. Remind
the students that another way to visualize a timing function is as a graph.
Have a discussion with students on hover transition.
Ask the students to differentiate between ease-in and ease-in-out keywords.
• Quick Quiz:
o True/False: A transition can be run in a loop for an infinite number of times. (Answer:
False)
o True/False: The hover effect is instantaneous with no intermediate steps. (Answer:
True)
LAB ACTIVITY
o HTML 629 “To define the initial and end state for the navigation links”
o HTML 631 “To define styles for the navigation links”
Animating Objects with CSS

LECTURE NOTES
• Define animation.
• Point out the role of key frames in animation.
• Explain the syntax to define a sequence of key frames in CSS.
• Using figure 8-43, show the students how path animation takes place over a ten-second
duration.
• Discuss the properties used to apply a key frames animation to an object.
• Using figure 8-46, discuss the various animation properties used to control the behavior and
style of the animation.
• Point out that there are two states of operation in an animation.
• Explain the process of controlling an animation using a check box.
BOXES
• Insight: Stepping between Key Frames (HTML 640)
• Proskills: Problem Solving: Safe Animation and Motion Sensitivity (HTML 650)
FIGURES
Figure 8-50, Figure 8-51, Figure 8-52, Figure 8-53, Figure 8-54, Figure 8-55, Figure 8-56,
Figure 8-57, Figure 8-58
TEACHER TIP
Have a discussion with the students about animation and its usage. Remind students that once an
animation has been defined and applied to an object, it will run automatically when the page is
loaded. Have a discussion with the students on how to control an animation using the check box or
playback icons.
Remind the students that any timing value entered for the last key frame is ignored because there are
no key frames to transition to.
• Quick Quiz:
o Fill in the blank: The sequence of changing images is known as _____. (Answer: key
frames)
o True/False: An animation can contain only two styles defined at the initial and end
states. (Answer: False)
LAB ACTIVITY
o HTML 636 “To create the spin animation”
o HTML 639 “To apply the spin animation”
o HTML 641 “To create the animation check box”
o HTML 643 “To create styles for animation playback”
o HTML 644 “To format the play and pause icons”
o HTML 646 “To revise the spin sequence”
End of Tutorial Material

• Review Assignments: Review Assignments provide the students with additional practice for
the skills they learned in the tutorial using the same tutorial case with which they are already
familiar.
• Case Problems: A typical NP tutorial has four Case Problems following the Review
Assignments. Short tutorials can have fewer Case Problems (or none at all); other tutorials
may have five Case Problems. The Case Problems provide further hands-on assessment of the
skills and topics presented in the tutorial, but with new case scenarios. There are three types
of Case Problems:
• Apply. In this type of Case Problem, students apply the skills that they have
learned in the tutorial to solve a problem.
• Challenge. A Challenge Case Problem involves three or more Explore steps. These
steps challenge students by having them go beyond what was covered in the
tutorial, either with guidance in the step or by using online Help as directed.
• Create. In a Create Case Problem, students are either shown the end result, such
as a finished website, and asked to create the document based on the figure
provided or asked to create something from scratch in a more free-form manner.
• ProSkills Exercises: This feature is new for Office 2010 and Windows 7. ProSkills exercises
integrate the technology skills students learn with one or more of the following soft skills:
decision making, problem solving, teamwork, verbal communication, and written
communication. The goal of these exercises is to enhance students’ understanding of the soft
skills and how to apply them appropriately in real-world, professional situations that also
involve software application skills. ProSkills exercises are offered at various points throughout
a text, encompassing the concepts and skills presented in a standalone tutorial or a group of
related tutorials.
Glossary
• Advanced Audio Coding or AAC (HTML • MPEG-4 or MP4 (HTML 602)

592) • Multipurpose Internet Mail Extension or
• asymmetric transition (HTML 634) MIME type (HTML 593)
• codec (HTML 588) • Ogg (HTML 592)
• container (HTML 588) • plug-in (HTML 589)
• embedded object (HTML 589) • sprites (HTML 640)
• H.264 (HTML 602) • symmetric transition (HTML 634)
• iframe element (HTML 619) • Theora (HTML 602)
• inline frames (HTML 619) • transition (HTML 624)
• key frames (HTML 634) • VP8 (HTML 602)
• lossless compression (HTML 588) • VP9 (HTML 602)
• lossy compression (HTML 588) • WAV (HTML 592)
• media player (HTML 589) • Web Video Text Tracks or WebVTT
• MPEG-1 Audio Layer 3 or MP3 (HTML (HTML 608)
592) • WebM (HTML 602)
Top of document

New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual

Uploaded by

Copyright:

Available Formats

New Perspectives HTML5 and CSS3

Comprehensive 7th Edition Carey

New Perspectives on HTML5 and CSS3

In addition to this Instructor’s Manual, our Instructor’s Resources CD contains PowerPoint

For your students:

Session 8.1 Session 8.3

Introducing Multimedia on the Web

Working with the audio Element

Exploring Embedded Objects

Exploring Digital Video

Using the HTML5 video Element

Adding a Text Track to Video

Using Third-Party Video Players

Creating Transitions with CSS

Have a discussion with students on hover transition.

Animating Objects with CSS

End of Tutorial Material

• Advanced Audio Coding or AAC (HTML • MPEG-4 or MP4 (HTML 602)

You might also like