HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 1 of 9
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit P: Testing and Improving Performance
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 a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark 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 geared towards 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 also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in 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
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
432: Assess Performance
2
434: Plan Usability Tests
2
436: Perform Browser Tests
3
438: Test Page Loading Speed
4
440: Incorporate a Spritesheet
5
442: Optimize Images
5
444: Reduce the Size of CSS Files
6
446: Customize modernizr.js
7
End of Unit Material
8
Glossary of Key Terms
9
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 2 of 9
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit P when they can:
• Assess performance
• Perform usability tests
• Incorporate a spritesheet
• Optimize images
4
4
43
3
32
2
2:
:
:
A
A
As
s
ss
s
se
e
es
s
ss
s
s
P
P
Pe
e
er
r
rf
f
fo
o
or
r
rm
m
ma
a
an
n
nc
c
ce
e
e
LECTURE NOTES
• Point out that testing a website on your computer cannot account for all the factors that may affect
a user’s experience of the site once it’s published on the web.
• Introduce the term performance, which is a measure of how quickly a published site loads and
responds to user interaction over the Internet.
• Explain that as a developer, you can perform tests that simulate a user’s experience of accessing your
site on the web, and you can make changes to your site to make it load and respond faster for users.
Use Table P-1 to review some best practices for decreasing page load time.
• Explain that reducing the size of files used in your website can make the site load faster. Introduce
the terms minified, optimized, orphaned styles, and custom build. Explain the types of code each
term applies to.
• Remind students of what an HTTP request is, and point out that browsers generally limit the
number of simultaneous HTTP requests. Use Figure P-2 to illustrate how reducing the number of
files in a website by combining some of them can reduce the number of HTTP requests and speed
the loading of the website.
• Introduce the term spritesheet and explain that using a spritesheet is a way to reduce the number of
HTTP requests required to download a website’s images.
FIGURES: P-1, P-2
TABLE: P-1
CLASSROOM ACTIVITY
1. Quick Quiz:
a. T/F Opening web pages directly from your local computer can give you a reasonable idea of
b. T/F You can reduce the sizes of some files that are part of your website to reduce the time it
4
4
43
3
34
4
4:
:
:
P
P
Pl
l
la
a
an
n
n
U
U
Us
s
sa
a
ab
b
bi
i
il
l
li
i
it
t
ty
y
y
T
T
Te
e
es
s
st
t
ts
s
s
LECTURE NOTES
• Discuss why planning and structuring a website logically is an important aspect of making it usable.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 3 of 9
• Emphasize that the best way to test the usability of a website is to collect feedback from the site’s
users.
• Remind students that to ensure that questions do not vary between testers a script should be created
and used consistently throughout the testing process.
• Walk students through the steps necessary to create a usability testing plan.
FIGURES: P-3, P-4
BOXES:
1. Performing usability tests
You can choose from several methods of performing usability tests based on your testing budget and the
equipment available to you. On the high end, some larger organizations have dedicated testing facilities
that may include rooms with two-way mirrors for observing testers unobtrusively, as well as computer
systems configured to record and play back the keystrokes and mouse movements of testers. In a more
modest testing setup, you may simply sit next to a user and write down as accurately as possible what
the user does; positioning a video camera with a clear view of the screen and recording the tester’s
CLASSROOM ACTIVITIES
1. Classroom discussion: Ask students to explain why the most important judgment for usability is that
of the site’s users themselves. How can you make sure to collect the best information possible?
2. Quick Quiz:
a. T/F To collect the best information possible from usability tests, it’s important to identify
b. T/F The person conducting a usability test is generally in another room and unable to see
LAB ACTIVITY
Ask students to imagine they are preparing a usability test for their school’s website. Have students
create test scripts with questions appropriate to the website, using Figure P-4 as a model.
4
4
43
3
36
6
6:
:
:
P
P
Pe
e
er
r
rf
f
fo
o
or
r
rm
m
m
B
B
Br
r
ro
o
ow
w
ws
s
se
e
er
r
r
T
T
Te
e
es
s
st
t
ts
s
s
LECTURE NOTES
• Explain to students that scrutinizing their web pages on different browsers an additional time is
especially important.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 4 of 9
• Point out that testing a web page exhaustively on the most common user agents among the target
audience helps ensure that you don’t publish web pages that display obvious errors or that don’t
work as expected for some of your audience members.
FIGURES: P-5, P-6
BOXES
1. Trouble: Microsoft Edge is the default Windows browser starting with Windows 10. If you are using
4. Using automated test suites
The manual testing method used in this lesson is most realistic for smaller websites with few web pages.
As a site grows in size and complexity, however, you can save time and catch more errors through
automated testing, which is a set of testing measures performed by specialized software. Some free
CLASSROOM ACTIVITY
1. Quick Quiz:
b. T/F Testing on Android and iOS phones is not important as long as you exhaustively test on
LAB ACTIVITY
4
4
43
3
38
8
8:
:
:
T
T
Te
e
es
s
st
t
t
P
P
Pa
a
ag
g
ge
e
e
L
L
Lo
o
oa
a
ad
d
di
i
in
n
ng
g
g
S
S
Sp
p
pe
e
ee
e
ed
d
d
LECTURE NOTES:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 5 of 9
• Point out that fast downloads are especially important for mobile users, but that all users benefit
from pages that load faster.
• Explain that the longer a user waits, the more likely the user will abandon your site and go
somewhere else.
FIGURES: P-7, P-8
TABLE: P-2
BOXES:
1. Quick Tip: Modeling connection speeds in Chrome does not work when you open files from your
local hard drive, so you must open them from a web server instead.
2. Quick Tip: You can get an estimate of the cost for a user to view your published web pages in
different parts of the world at whatdoesmysite cost.com.
CLASSROOM ACTIVITY
1. Quick Quiz:
a. T/F To test page loading speed, you must visit different locations with different connection
b. The maximum amount of data that a connection can carry per second is measured in
c. The maximum time from a request being sent to data being returned form the server is
4
4
44
4
40
0
0:
:
:
I
I
In
n
nc
c
co
o
or
r
rp
p
po
o
or
r
ra
a
at
t
te
e
e
a
a
a
S
S
Sp
p
pr
r
ri
i
it
t
te
e
es
s
sh
h
he
e
ee
e
et
t
t
LECTURE NOTES:
• Define the term spritesheet.
TEACHER TIP
If your students are interested in game programming, point out that spritesheets are commonly used in
game rendering to depict all the different states of a character or other part of the game being animated.
• Explain how incorporating spritesheets is one of the most commonly used methods for reducing the
time it takes for a web page to load over a mobile connection.
• Point out that a spritesheet is a single image file, so every additional image you can include in the
spritesheet reduces the number of HTTP requests that your web page requires.
FIGURES: P-9, P-10, P-11, P-12
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 6 of 9
BOXES:
1. Quick Tip: You can view the spritesheet images used on any web page by using browser developer
tools to view a site’s image files.
2. Quick Tip: Because an image from a spritesheet must be specified as a background image, you can’t
specify alt text for it. For this reason, you should use spritesheets only for decorative images and not
for images that relate directly to the content of a web page.
3. Quick Tip: By using a spritesheet, you’ve reduced the number of items a browser must request from
the server by one without changing your layout.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Classroom Discussion: Ask students to research services that are available for resizing images on the
fly. Have them share their findings with the class.
4
4
44
4
42
2
2:
:
:
O
O
Op
p
pt
t
ti
i
im
m
mi
i
iz
z
ze
e
e
I
I
Im
m
ma
a
ag
g
ge
e
es
s
s
LECTURE NOTES
• Explain that you can reduce the size of some files that are part of your website without affecting
their content, and that image files are ripe targets for this.
• Explain that optimization reduces the quality of image files in a way that humans can’t perceive.
FIGURES: P-13, P-14, P-15, P-16
BOXES
1. Trouble: If you are unable to open tinypng.com, use a search engine to search on the terms
online
4. Including appropriately sized images
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 7 of 9
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to research the process of encoding images in electronic files and
share their research with the class. Ask students to think about why it’s possible to remove information
from image files without humans being able to perceive the difference. Ask them to draw on their
research to support their ideas.
2. Quick Quiz:
a. T/F To reduce the size of an image file, you must also reduce the dimensions of the image on
4
4
44
4
44
4
4:
:
:
R
R
Re
e
ed
d
du
u
uc
c
ce
e
e
t
t
th
h
he
e
e
S
S
Si
i
iz
z
ze
e
e
o
o
of
f
f
C
C
CS
S
SS
S
S
F
F
Fi
i
il
l
le
e
es
s
s
LECTURE NOTES:
• Define the term orphaned styles.
• Explain how removing orphaned styles reduces the amount of code users have to download.
• Introduce the term minifying.
BOXES:
1. Quick Tip: You can use a browser extension such as Dust-Me Selectors (brothercake.com/
4. Working with minified files
When you maintain a website, it can be tedious to go through the process of minifying a file every
time you make a change to your site’s CSS. Fortunately, many tools are available for developers that
can automate tasks such as minifying. When it’s time to publish their files, many developers execute
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 8 of 9
2. Critical Thinking: Ask students to imagine starting a job maintaining a website that was previously
developed and maintained by a different developer. Ask them how starting the job might be different
depending on whether the previous developer regularly removed orphaned styles.
LAB ACTIVITY
Ask students to research how minifying CSS is used by developers who maintain large sites and make
daily changes. Ask them to focus on how the minifying process is automated, and how developers are
able to view CSS code they can easily read while ensuring that end users download minified code.
4
4
44
4
46
6
6:
:
:
C
C
Cu
u
us
s
st
t
to
o
om
m
mi
i
iz
z
ze
e
e
m
m
mo
o
od
d
de
e
er
r
rn
n
ni
i
iz
z
zr
r
r.
.
.j
j
js
s
s
LECTURE NOTES:
• Explain that modernizr.js includes JavaScript code to deal with many web page features, and almost
no sites use all of them.
FIGURES: P-20, P-21, P-22
BOXES:
1. Trouble: The version number on your screen may not match the version number shown in this step
(v3.7.1).
2. Trouble: Because you are downloading a JavaScript file, your browser may warn you that the file is
potentially harmful; click the option that ignores the warning and downloads the file.
CLASSROOM ACTIVITY
1. Quick Quiz:
a. T/F You should use a custom build of Modernizr while developing a website, and then
b. T/F A custom build reduces the number of HTTP requests for users to download your
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit P Page 9 of 9
LAB ACTIVITY
Ask students to create custom Modernizr builds with 1, 5, and 10 features and compare the file sizes.
Then ask students to compare their file sizes with other students’ for the same number of features.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• automated testing (437)
• custom build (432)
• dead links (437)
• minified (432)
• optimized (432)
• orphaned styles (432)
• performance (432)
• spritesheet (432)
Top of Document