Creating Web Documents: Images, files, etc.

Web graphics

Paint Shop Pro for conversions

File management, Ws-ftp demonstration

(Return to HTML next week)

Homework: Post project (may need to wait for server). Report (CourseInfo?) on viewing sites

due 1 week

Report

• Visit the same 2-3 Web pages from different platforms/access method/etc. Pick pages with images, sound, video, animation.

• Report on differences! • Post on Courseinfo Discussion Forum • Please review, use spell-check, put in a tag for

URLs and check if this works (you will need to turn on HTML under posting).

• Feel free to respond (post reply) to postings by others.

Vannevar Bush article

• Comments?

Best/Worst Sites projects

• Remember to include name as or with mailto tag

• Proofreading is appreciated– Gertrude Stein, e.e. cummings, others used all

lower case artfully, but most of the rest of us need to use conventional cases & grammar.

– Make differences from convention mean something.

Color Display: Grid x Color Depth• Grid of pixels = picture elements

– Higher resolution (more elements) means more detailed image. Typical is 72 pixels/inch

– To minimize apparent stair-casing from grid, there is antialiasing = using intermediate colors to present smoother appearing boundary

• Each pixel displays a color. Color from a palette– 2 colors (aka monotone) requires 1 bit = 1 unit of

information: ON for 1 color, OFF for 1 color– 4 colors can be distinguished by 2 bits. Think of the number

of patterns: 00, 01, 10, 11– How many bits for 8 colors? (Check by writing out the

patterns.) How many for 16? What is the pattern governing these patterns? So how many bits for 256 colors?

“True color”

• 24 bit = 8 bits for each of Red, Green, Blue• Additive model: red, green, blue add up to white

light. This is not the color wheel.• What is the 6 character color code? Answer: 6

hexadecimal characters: 0,1 to 9, A, B, C, D, E, F (0 to 15). Each hex character = 4 bits, so two of them is 8 bits (256 levels). Also 16 times 16 is 256.

• 6 hex characters = 3 times 2 times 4 = 24 bits = #RRGGBB, parameter for bgcolor and other tags.

To be “Browser-safe”• First, assume that the display can only display 256

colors• Second, assume operating systems is reserving 40

colors for its own purpose• PhotoShop and Paint Shop Pro have features to help

you decrease color depth and to view with browser.• Browser ‘dithers’(juxtaposes colors it has) to

approximate colors outside the palette.You may choose NOT to do this and, instead, assume

your audience has higher quality equipment (or will when your Web site is ready).

Differences in displays

• Screen resolution

• Color depth (what the computer is capable of AND what the current setting is)

• Gamma = degree of contrast– There are known differences between Mac and

Windows. Keep this in mind for report.

Color formats

• GIF– 256 or fewer colors– Transparency– Interlacing– Compression based on runs of same color– Animated gifs

• JPG– Lossy compression. Can specify levels. Works well for

compressing images with areas of similar saturation of color (not diagrams or line drawings)

HTML

<img src="filename.gif" width="200" height="300">

• may distort (change aspect ratio) of image. Specifying at least one size will allow the rest of the loading of the page. It does NOT mean the image will load faster even if it makes the image appear smaller.

• Consider changing size of image files in Photo Shop or PSP by combination of cropping, reducing size and reducing color depth.

Photo Shop & PSP demos

• Drawing

• Find existing images (photographs, complex drawings) and – Change color depth– Save As gif, gif interlaced, gif with

transparency, jpg with different compressions– Write simple HTML page and refer to images

ftp

• File transfer protocol

• Find ws-ftp (or equivalent) online to download.

• Need id and password.

• Demonstration

Procedure

• Make folder(s) as subfolder of public_html.– project1, project2, project3

• If you name a file index.html, this file will be opened, if (assuming your id is jdoe), you browse tonewmedia.purchase.edu/~jdoe/project1

Homework

• Experiment with Photo Shop and/or Paint Shop Pro for existing images

• Do experiment viewing same sites on different platforms

• Read in HTML book.