Creating Web Documents: Images, files, etc'

1
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

2
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.

3
Vannevar Bush article

• Comments?

4
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.

5
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?

6
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.

7
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).

8
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.

9
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)

10
HTML

• ltimg src"filename.gif" width"200" height"300"gt
  
• 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.

11
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

12
ftp

• File transfer protocol
• Find ws-ftp (or equivalent) online to download.
• Need id and password.
• Demonstration

13
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

14
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.