Per Anthony: I Tried to Hit Everything That Seemed Important in the Slides

Per Anthony: I tried to hit everything that seemed important in the slides. The only thing I would recommend that students study separately are the color mixing lectures because I mainly put terms in the document.

What is W3C?
World Wide Web Consortium and provides current specifications for HTML
What is ARPANET?
Advanced Research Project Agency Network
constructed a network of computers that could withstand the loss of several machines without compromising the ability of the remaining ones to communicate.
What is TCP/IP
Transmission Control Protocol/Internet Protocol
Whati s NSFNET
National Science Foundation network.
What is LAN and WAN?
Local and wide area networks.
Where was WWW developed?
Out of CERN. Tim Berners-Lee invented HTML
What was the first web browser?
Mosaic developed at the NationalCenter for Supercomputing Applications
How does TCP work?
message is broken down into packets and sent by the most efficient means to the destination.
It verifies the correct delivery of data between client and server and uses CHECK DIGITS for this.
How does IP work?
packets are moved from one network node to another.
What is DNS?
Domain Name System: easy to remember domain names that remain the same even if the IP changes.
provides URI’s (uniform resource identifiers)
What is a host?
A fully qualified domain name.
Break down the parts of a domain name
http: protocol
www: server name
domainname: host
com: domain type
Give examples of geographically-based domain types
.us, .uk, .jp, .in
What do search engines use to index pages?
search engine spiders
What is used to translate a host into an ip?
the InterNIC
What is a client?
Users browser and computer. also called “view layer”
What is the DOM?
Document object model: object interface to dynamically update the content, structure, and style of HTML docs.
What is Dynamic HTML?
integration of HTML, the DOM, CSS, and scripting languages.
What delivers the requested page to the browser?
web server (HTTP server)
What is FTP?
File Transfer Protocol: transfer files between an FTP server and a client
What is HTTP?
Hypertext transfer protocol: a stateless, connectionless protocol
neither the client nor server maintains info about what is happening during the connection
a new connection is initiated every time a request is made.
Give an example of electronic mail
SMTP, simple mail transfer protocol and POP3, post office protocol version 3
What is a MIME?
multipurpose internet mail extension
allows attaching of files to email. tells the mail client software and browser which programs to use to open various file types.
What is intranet?
internet communication technologies over a private network
What is extranet?
private network that has been expanded to allow vendors or customers to have expanded access to the private network.
What are the 4 basic purposes of web sites?
make money
disseminate info
front end for a business app
ego
What are informational site visitors?
they are either internal visitors or external visitors.
internal: (intranet) mostly employees
external: those accessing a public website.
What is the hierarchy of most web sites?
home page
main topic pages
subsidiary pages
What are 5 attributes of a website with appeal?
functional
unique
emotional
look good
marketed
Users determine the creditability of a site by their first impression of the visual design.
Sites that keep visitors browsing for a long period of time and that visitors return to again and again.
sticky site
What is a use case?
A set of possible sequences of interactions between systems and visitors in a particular environment and related to a particular goal.
According to traditional user interface design rules, what is the maximum amount of choices for a menu?
7
What is it called when visitors enjoy and become engaged in the site?
appeal
What is resolution?
the number of pixels that fit in an inch on the screen or the number of pixels that can display on the entire screen.
What is solid design?
Content is hardcoded to fit the smallest screen size and the rest fills the background.
What is liquid design?
the page automatically adjusts to fill all available screen area, using divs or tables that expand and contract to fill the available space.
What is elastic design?
the page automatically expands and contracts by increments keyed to the visitors default font size
What are the 3 unifying factors?
alignment
repetition
similarity
How do you avoid composition center?
Use the rule of thirds. divide the page into thirds horizontally and vertically. composition focus should be on areas of intersection
How do you break up the page?
Pull quote. make a quote within a paragraph larger than the rest
Drop Cap. make the first letter larger and drop into the rest of the paragraph.
What is Information architecture?
the organization of the information within the site.
the process we use to get what we want
wayfinding
What is an affordance?
indicators like underlined text or “buttonness” which identify a link
What are Breadcrumbs?
a hot linked trail that shows where the visitor is in the hierarchy.
What is the looker to buyer conversion rate?
2%
What is salience?
importance
When a visitor gets dropped in the middle of your site.
deep linking.
What are links to the main pages called?
persistent global navigation
What are the browser and menus and bars called?
chrome
What are the 5 navigation models?
hierarchic: following links up and down the hierarchy
sequential: such as articles
random access: picking individual, unrelated topics?
internal links: links that stay within our own site
external links: links that leave our site.
know about target=”myWindowname” which opens a link in a new window.
What is the web equivalent of a footnote?
note link
What are the 3 navigational graphics?
buttons
image maps
icons
What is a hotspot?
a link
What is a favicon?
The icon that appears on some sites, next to the name in the url line of the browser.
A terminal web design with the presenting symptom of dead ilnks.
Linkrot
What is the page not found page called?
404
What are the three primary colors on the color wheel?
red, yellow, blue, white, black any color can be made by mixing the primary colors.
What are the three secondary colors and how are they made?
red and yellow make orange
red and blue make purple
yellow and blue make green
Mixing 2 opposite colors on the color wheel results in what color?
grey
Mixing all colors together on the color wheel results in what color?
blackish-brown
What are the 4 attributes of color?
hue: the true color like red or blue
value: the lightness or darkness of a color
value is the single most important attribute in determining the readability of a site.
tint: hue mixed with white
shade: hue mixed with black
saturation: the intensity of pure color
tints and shades have reduced saturation because they are mixed with white or black. a tone also has reduced saturation.
temperature
What is a tone?
a hue mixed with gray.
Tone is also created by mixing with the opposite color.
What is color temperature?
whether the color is warm. (red, orange, and yellow)
or cool. (blues, purples and greens)
What is contrast?
the separation between the values of a color attribute.
hue – complementary colors have the greatest contrast.
Tints and shades of a single hue.
monochromatic color scheme
What is a complementary color scheme?
two colors opposing each other on the color wheel.
What is split complementary color scheme?
One of 2 complementary colors is replaced by its 2 adjacent colors.
What is three evenly spaced colors around the color wheel called?
triad color scheme
What is 2 or 3 colors or more next to each other on the color wheel?
analogous color scheme
What are the print color space colors?
CMYK, cyan, magenta, yellow, black
What are the 5 HTML special characters?
< > & ©  
What is color based on reflected light?
subtractive color mode
What is it called when light shines through a prism?
projected light.
What are the primary colors in additive color mixing?
Red, Green, Blue
Which palette has fewer warm colors?
additive
What is maximum saturation?
FF
How many colors can a 6 digit hex color code make?
16.8 million
What is “simulating more colors and shades than the current palette actually permits?
dithering
How many websafe colors are there?
216
What hex digits are used in the 216 colors?
pairs of…
00
33
66
99
CC
FF
What are the 3 methods to mix web colors?
mix the math
use a gradient
use a semi-transparent color overlay
What are neutral colors?
grey, black and white. All 3 colors in equal amounts
What is red’s complement in web color mixing?
cyan
What refers to the lightness or darkness of a system’s display?
gamma
macs have lighter gamma. 1.8
windows have darker. 2.2-2.8
What are small versions of images that link to larger ones?
thumbnails
What is a pixel?
a single dot of color on the screen, made up of some combination of RGB.
What are content graphics?
graphs, charts, maps, pictures of products, screen prints, etc.
What are Thematic graphics:
logos, decorative photos, borders
What are navigational graphics?
clickable buttons, thumbnails, etc.
Explain color depth
the number of colors in an image
the more colors the more bits per pixel required
3 bit image = 2^3 = up to 8 colors
8 bit image = 2^8 = up to 256 colors
What is it called when you smooth the jagged appearance of the diagonal lines in a bitmapped image?
anti-aliasing.
What is another word for background color?
matte
What is index transparency?
binary transparency. either all the way on or all the way off. supported by all browsers.
What is alpha channel transparency?
256 levels of transparency, from fully opaque to fully transparent. only in .png files.
What is it called when visitors see a complete but low-resolution, version of a picture?
interlacing
What is aspect ratio?
ratio of width to height
What are the 2 types of images?
bitmap – raster graphics
made of individual pixels mapped to 2D grids.
vector graphics.
What is the process of adding or subtracting pixels to resize an image?
resampling/interpolation
How do you restore sharpness after reducing the size of a bitmapped image?
unsharp mask
What is the most accurate method for resampling/interpolation?
bicubic interpolation
Which are the Bitmap formats?
bmp, tiff, psd, jpg, gif, webfriendly png
Which image formats should be used on the web?
only jpg, gif, and png
What are vector graphics?
graphics based on mathematical equations.
Will the file size increase with the image size in vector graphics?
NO!!!
What is another word for outline?
stroke
What is it called when data is lost each time you save a file?
lossy compression
Which format is best for photos?
jpg, however no transparency, animation, or interlacing
When to use gif?
line based images with solid flat colors like cartoons.
supports 256 colors, transparency, animation and interlacing
How does GIF compress best?
fewer colors
flat color
no anti-aliasing
no dithering
horizontal bands of color
Which format is intended to replace gif?
.png
What are the 3 color depths for png
256 for small files
true color (16.8 million)
true greyscale
When to use .png?
if you must have more than 256 colors or alpha transparency.

GIF image / JPG image / PNG image
Good for: / line art & cartoons / photos / line art & cartoons
File format: / bitmap/raster / bitmap/raster / bitmap/raster
# of colors per image / 256 / 16.8 million / Variable, but up to 16.8 mill
Supports transparency? / yes, index transparency / no / yes, alpha transparency
Supports interlacing? / Yes / Not cross-browser / yes
Compresses efficiently for:
Horizontal lines? / Yes / no / n/a
Textures? / No / yes / n/a
Anti-aliasing? / No / yes / n/a
Gradients? / No / yes / n/a
Alters colors upon save? / No / yes / no
Adds artifacts/noise upon save? / no / yes / no

Capturing an image from the real world by scanning an image or taking a photo with a digital camera.
digitizing
How well scanners can pick out detail in areas of shadow.
luminosity
targetWidth/originalWidth = DPI
When exporting to a jpg, gif, or png what is it called?
flattening the file
cut off for exam is slide 28.

know slide 23 of gif slides talking about how they work best without dithering, gradients, etc.

KNOW THE TABLE ON SLIDE 33

tag-along graphic: in a list, something to the left changes on mouseover

unsharp mask

which of these are bitmaps? (see vector notes, jpg, something, something)

no transparency in jpgs

no animation in jpgs

gif supports 256 colors

dithering