Computer Science 103:

Web Development

Gregory M. Kapfhammer

flickr photo by SaurabhChatterjee shared under a Creative Commons (BY-NC-ND) license

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

flickr photo by SaurabhChatterjee shared under a Creative Commons (BY-NC-ND) license

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

Web Media

File Extensions

File Formats

GIF

PNG

SVG

TIF

What are the two ways to represent images?

Raster image

Vector image

What are the trade-offs?

Pixels versus objects

Find file extensions of both types

Scalable vector graphics!

Recently supported by all browsers

Color models

RGB: Red-Green-Blue model

CMYK: Cyan-Magenta-Yellow-BlacK

HSB: Hue-Saturation-Brightness

Let's try these in `gimp`!

Opacity is the degree of transparency in color

Gradients involve the transitions between colors

Specify CSS gradients for background images!

See Figure 6.13 for examples

Color relationships

See Section 6.2.6 for details

See Figure 6.16 for the color wheel

Try `http://paletton.com/`

Image Concepts

Color Depth

Image Size

Color Interpolation

Image Resizing

Display Resolution

Image Compression

Lossy Compression

Lossless Compression

Any questions about web media?