PCC Art 198, Spring Semester 2009

Design for the Internet

Week 2

 

Topic

Assignments/Reading:

In Class

Tuesday

Tuesday
Web Basics and Web Standards (cont.)

Design

Reading:

Project:

Resume Project - purpose: to explore semantic markup and typography in web page with css. Due Week 4, Tuesday (3/17)

Optional:

CSS tutorial: CSS Bootcamp for Beginners

More CSS work:

Need your surveys and email me at
p_rees @ yahoo.com
to give you access to Yahoo and access to sign up for Lynda.com ($35).

Finish Getting Started tutorials if necessary
Xtreme Resume Tutorial
In-class work on Xtreme Resume

Typography slides, video - Jon Hicks

Introduce accessibility, Section 508, WAI

Thursday

Images for use on the web

 

Assignment:

Post by this weekend 3/7, and respond by Tuesday, Week 3 (3/9): Find three well designed Web sites & note why you think so. Look for (X)HTML not Flash sites. Post your sites by Sunday so that everyone has time to review and respond before class.
Post to Yahoo http://groups.yahoo.com/group/pcc_ART198/ (see nav link above).

On your own or in class:

Background tiles tutorial
projectseven_pixel_tiles

Watch colors movie:
mariaclaudiacortes_Colors

 

Images for web:
Image text - fonts, anti-aliasing, small fonts

projectseven.com_fw_optimize

  • jpg
  • transparency, png, gifs
  • web colors
  • compression
  • background tile, buttons, logo, rounded corners
  • rollovers,
  • animated gifs

Be a sponge (pdf) Jon Hicks and mood boards

Glossary of Terms (primarily created from wikipedia):

GIF
(Graphics Interchange Format) The format uses a palette of up to 256 distinct colours from the 24-bit RGB colour space. It also supports animations and allows a separate palette of 256 colours for each frame. GIF images are compressed using the LZW lossless data compression technique. GIFs are suitable used for sharp-edged line art (such as logos) with a limited number of colours. Pronounced like the peanut butter brand, Jif.
PNG
Pronounced "ping" ((Portable Network Graphics) is a bitmap image format that employs lossless data compression. PNG was created to improve and replace the GIF format, as an image-file format not requiring a patent license. Can be spoken "P-N-G" to avoid confusion with network tool ping. PNG supports palette-based (palettes of 24-bit RGB colors) or greyscale or RGB images. Transparency - either a single pixel value can be declared as transparent or an alpha channel can be added (IE6 does not support alpha transparency)
JPEG
(pronounced JAY-peg) is a commonly used standard method of compression for photographic images. The name JPEG stands for Joint Photographic Experts Group, the name of the committee who created the standard. Provides for lossy compression of images.
Lossy compression
A lossy data compression method is one where compressing data and then decompressing it retrieves data that may well be different from the original, but is "close enough" to be useful in some way. Lossy data compression is most commonly used to compress multimedia data (audio, video, still images)
Lossless Compression
Lossless data compression is a class of data compression algorithms that allows the exact original data to be reconstructed from the compressed data. Some image file formats, like PNG or GIF, use only lossless compression, while others like TIFF and MNG may use either lossless or lossy methods.
  • GIF - (lossless, but contains a very limited number color range)
  • PNG - Portable Network Graphics
  • JPEG-LS - (lossless/near-lossless compression standard)
  • TIFF
  • WMPhoto - (includes lossless compression method)
Rollover
refers to a button as created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself.
GIF Animation
The GIF89a feature of storing multiple images in one file, accompanied by control data, is used extensively on the web to produce simple animations.
Web colors
are colors used in designing web pages. Colors may be specified as an RGB RGB#24-bit_representation triplet (255, 0, 0) in hexadecimal format (a hex triplet) (FF 00 00); they may also be specified according to their common English names HTML_color_names in some cases. Web Safe Colors are a set of 216 color values is commonly considered to be the "web-safe" color palette, developed at a time when many computer displays were only capable of displaying 256 colors.
JPEG artifacts
are a type of digital artifact caused by high compression levels of compression of JPEG files, usually causing the image to look blocky and blurry.
About Us | Site Map | Privacy Policy | Contact Us