Web Design
Lean and Mean Web Graphics
1.
Smaller graphic files means shorter download and display times. Every second
counts toward creating a favorable
user experience of your site.
2.
Dithering introduces a speckle pattern that interrupts strings of identical
pixels, and therefore the GIF compression
scheme can’t compress areas with dithering as
efficiently as flat colors.
3.
The fewer pixel colors in the image, the smaller the resulting GIF, both
because the image can be stored at a
lower bit depth and because there are more areas of
similar color for the GIF to compress.
4.
The Quality (compression) setting is the most effective tool for controlling
the size of a JPEG.
5.
JPEG compression works effectively on smooth or blurred areas, so introducing a
slight blur allows the JPEG
compression to work more efficiently, resulting in
smaller files.
6.
Just as you would do for an indexed GIF, optimize a PNG-8 by designing with
flat colors, reducing the number
of colors, and avoiding dithering. There
are no strategies for optimizing a PNG-24 because they are designed to
store images with lossless compression.
Web Graphics Basics
1. You can get a license to have exclusive rights to an image so
that your competitor doesn’t use the same photo
on their site.
2. ppi stands for “pixels per inch” and is a measure of
resolution.
3. Indexed color is a mode for storing color information in an
image that stores each pixel color in a color table.
GIF and 8-bit PNG formats are indexed color images.
4. There are 256 colors in an 8-bit graphic and 32 colors in a
5-bit graphic.
5. GIF can contain animation and transparency. JPEG cannot.
6. GIF can contain animation. PNGs cannot.
7. PNGs can have multiple levels of transparency. GIF has only
binary (on/off) transparency.
8. Lossy compression is cumulative, which means you lose image
data every time you save an image as a JPEG. If
you open a JPEG and save it as a JPEG
again, even more image information is thrown out than the first time you
saved it. Be sure to keep your full-quality original and save JPEG
copies as needed.
9. In binary transparency, a pixel is either entirely transparent
or entirely opaque. Alpha transparency allows up
to 256 levels of transparency.
10. A GIF or PNG-8 because it is text, flat colors, and hard edges. B JPEG because it is a
photograph. C GIF or
PNG-8 because although it has some photographic areas, most of the
image is flat colors with hard edges. D
GIF
or PNG-8 because it is a flat graphical image. E JPEG because it is a photograph.
Using JavaScript
1.
Ajax is a combination of HTML, CSS, and JavaScript (with the XMLHttpRequest
JavaScript method used to get
data
in the background).
2.
It accesses the element that has the id value “main”.
3.
It creates a nodeList of all the section elements in the element with the id of
“main”.
4.
It sets the background color of the page (body element) to “papayawhip”.
5.
It creates a new text node that says, “Hey, I’m walking here!”, inserts it in a
newly created p element, and puts
the new p element in the element with the id “main”.
6.
a. 3; b. 2; c. 4; d. 1
7. All of the
above.
JavaScript
1.
When you link to an external .js file, you can reuse the same scripts for
multiple documents. The downside is
that it requires an additional HTTP request.
2.
a) 1; b) 1two; c) 34; d) 2
3. a) 10; b) 6;
c) “2 remaining”; d) “Jennifer is longer.”; e) false
CSS Techniques
1. d) All of the above
2. d) a and c
3. The differences between LESS and Sass include:
• LESS lacks some of the
functionality of Sass.
• They use a slightly
different syntax ($variable versus @variable).
• Sass is compiled into
standard CSS by a Ruby program on the server; LESS uses JavaScript.
4. e) b and d
5. Give the label elements the same width and float them to the
left, then align the text right so it appears next to
the
control it describes.
Transitions, Transforms, and
Animation
1.
Tweening is the process in animation in which frames are generated between two
end point states.
2. A
transition would have two keyframes, one for the beginning state and one for
the end.
3.
a) transition-delay: 0.5s; b) transition-timing-function: linear; c)
transition-duration: .5s; d) transition-
property:
line-height;
4.
c) text-transform is not an animatable property.
5.
Ease is the default timing function. It starts out slowly, speeds up quickly,
and then slows down again at the
very
end.
6.
.2s is the transition-duration value.
7.
Trick question! They will arrive at the same time, 300ms after the transition
begins. The timing function has no
effect on the total amount of time it takes.
8. a) transform: rotate(7deg); b) translate(-25px,
-50px); c) transform-origin: bottom right; d) transform:
scale(1.2);
9.
The 3 value indicates that the element should be resized three times larger
than its original height.
10.
a) perspective: 250; because lower number values are more dramatic.
11.
The border is 3 pixels wide at 50% through the animation;
12.
a) animation-direction: reverse; b) animation-duration: 5s; c)
animation-duration: 2s; d) animationiteration-
count: 3;
Page Layout with CSS
1.
Fixed, c.; Fluid, a.; Elastic, b.
2.
Fixed, b.; Fluid, c.; Elastic, a.
3.
Fixed, c.; Fluid, b.; Elastic, a.
4. Fixed, c.; Fluid,
a.; Elastic, b.
Floating and Positioning
1. b
is not true. Floats are positioned against the content edge, not the padding
edge.
2. c
is incorrect. Floats do not use offset properties, so there is no reason to
include right.
3. Clear the footer div to make it start below a
floated sidebar: div#footer { clear: both; }.
4.
a) absolute; b) absolute, fixed; c) fixed; d) relative, absolute, fixed; e)
static; f) relative; g) absolute, fixed; h)
relative,
absolute, fixed; i) relative
Thinking Inside the Box
a.
border: double black medium;
b.
overflow: scroll;
c.
padding: 2em;
d.
padding: 2em; border: 4px solid red;
e.
margin: 2em; border: 4px solid red;
f. padding: 1em
1em 1em 6em; border: 4px dashed; margin: 1em 6em;
Where Do I Start?
1.
B, D, A, C
2.
The W3C guides the development of web-related technologies.
3.
C, D, A, E, B
4.
Frontend design is concerned with aspects of a site that appear in or are
related to the browser. Backend development
involves the programming required on the server for
site functionality.
5. A
web authoring tool provides a visual interface for creating entire web pages,
including the necessary HTML,
CSS, and
scripts. HTML editors provide only shortcuts to writing HTML documents manually.
