HCI 201

1
HCI 201

• Multimedia and The World Wide Web

2
Digital Photography
3
Digital Photography

• Along with creating compelling graphics,
  photography will be key to making a great looking
  site
• The snapshot is just the beginning

4
Brightness and Contrast

• Brightness
• How light or dark the picture is
• Contrast
• How big the difference is between dark ands light
  areas

5
Brightness and Contrast
6
Brightness and Contrast
7
Color Balance

• Allows you to add or subtract certain hues
• Can create very artsy effects
• For simple color correction, use small increments

8
Color Balance
9
Color Balance
10
Cropping

• Photos are compositions
• Framing is very important

11
Cropping

• Screen resolution, is 72 pixels per inch
• A good range to shoot for is somewhere around 300
  pixels wide for smaller photos and between 450
  and 600 pixels wide for larger ones.
• Keep consistent size/ratios

12
Tips for Getting Good Pictures

• Light
• Tight
• Sight
• Write
• Uptight

13
Tips for Getting Good Pictures

• Light
• A brightly lit subject will photograph better
  than one cloaked in shadows.
• Position the light source behind the camera.
• Try different angles.

14
Tips for Getting Good Pictures

• Tight
• Let the subject fill the frame.
• Crowd people together for group shots.
• Avoid groups of more than five.
• Include only heads and shoulders.

15
Tips for Getting Good Pictures

• Sight
• Shoot against a plain background.
• Keep people three feet from a wall.
• Remove distracting items before shooting.

16
Tips for Getting Good Pictures

• Write
• Words do not show up well in photos.
• Add text later.

17
Tips for Getting Good Pictures

• Uptight
• People seem more alive when they are not posing.
• Have two people face each other rather than stare
  into the camera.
• Get them to do something.

18
File Optimization

• How big?
• Too lightweight overcompressed
• No compression huge file

19
File Optimization

• A good range to shoot for is between 30K and 70K
• This ensures that your download times won't be
  massive, but also that your photos will still
  look relatively nice
• With smaller file sizes, you can fit more of them
  on your server
• If all of your photos are 50K, that's around 20
  photos per megabyte of storage space.

20
Tips

• Always resize last
• Check your work on different displays (CRT, flat
  screen, flat panel, projection)
• Natural light is usually better than flash
• Experiment

21
Image Maps

• A reference to virtual areas within the
  boundaries of a particular bitmap image.
• Internet Browsers that recognize image maps can
  respond to the cursor and mouse click.

22
Image Maps
23
Image Maps

• hrefwhatever"
• href" whatever "
• href" whatever "
• href" whatever"
• whatever "
• 141, 102, 129, 115, 130, 136, 117, 135, 120, 108,
  109, 99" href" whatever"

24
Image Maps

• Your img tag will now include a usemap attribute
• border"0" align"middle" usemap"imageMap1"

25
Image Maps

• Much easier to use a WYSIWYG editor
• Frontpage
• Dreamweaver

26
Frames
27
Frames

• Advantages
• Allows you to "freeze" parts of the screen while
  others scroll
• Can help organize navigational elements
• Can support more creative aesthetic design
• Can be used to join material from separate servers

28
Frames

• Disadvantages
• Not supported by older browsers
• May make page construction more complicated
• May be difficult to navigate for some users
• Cannot bookmark individual elements of the framed
  page and retain the identity of the page
• Can cause overly busy screen design
• Can be difficult to print
• Search engine issues

29
Frames

• Framesets
• A Web page that uses frames does not have a
  tag, it has a tag instead.
• The frameset (or framesets, they can be nested
  inside each other) describes how the page will be
  divided up into frames.
• Each frame is described by a single tag
  within the frameset.
• Example

30
Frames

• A frameset specifies
• The number of frames you want and their
  arrangement.
• The page is divided into frames by specifying
  either rows or columns.
• The size of each frame. The size of each frame
  can be define using
• absolute pixels
• percentage
• relative values (what's left)cols"66,34"...

31
Frames

• A frameset specifies
• The source file (URL) of each frame with a
  tag.
• You must have a separate HTML file to "fill" each
  frame. Frames are always described from left to
  right, and top to bottom.
  name "left"
• The appearance of each frame including the look
  of borders, scrollbars, and margins.
• noresize frameborder"0"
  src"main.html" scrolling"auto" frameborder"0"

32
Frames

• Targets
• You can use the target attribute to link to
  another Web page and have it displayed in the
  frame you choose.
• By default, any links within frames will display
  the linked page within the same frame. Using the
  TARGET attribute in the ANCHOR tag, you can
  direct the linked page to another frame.
• FRAME tag"Link text
• To load a page and break out of the frameset  
• Link text
    
• To link to a Web page that uses frames, link to
  the FRAMESET file.

33
IFrames

• Inserted into your HTML document
• Can float
• Limited browser support.

34
IFrames

• 
  
• Example

35
IFrames

• Scrollingon, off, auto
• Alignleft, right, center