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 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 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 to newmedia.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.