.

.

.

.

.

.

.

.

Interface Design

• What makes a good web page?
  • Your exemplary personal web sites
  • What makes a good educational web page?
  • What makes a good personal web page?
  • What makes a good organizational web page?

  .

  .

  .

  .

  Web Page Design

  For Personal web page: * clean & simple design * purpose should drive the design * consistency across multiple pages * frequently updated * interesting topics / worthwhile content * first page should contain the most important information * first page should not overwhelm

  .

  .

  .

  .

  .

  .

  .

  Interactive Graphics

  • regular graphic
    

  • "Clickable graphic" (blue or purple line around it)
    

  • Simple whole graphic links
  • graphic "maps"

  .

  .

  .

  .

  Whole Graphic Links

  • Just link the graphic!

  Graphic: <img src="mygraphic.gif">
  
  Linked graphic:
  <A HREF="GoHere.html"><img src="mygraphic.gif"></A>
     or
  <A HREF="AnotherGraphic.gif"><img src="mygraphic.gif"></A>
  .
  .
  .
  .
  
  

  "Clickable" maps

  • you go different places depending on where in the graphic you click
  • Web66 example
  • CTER student map example

  .

  .

  .

  .

  Creating clickable maps

  • Use web editors like FrontPage or Dreamweaver

  .

  .

  .

  .

  Animation

  • strengths
    • weather.com
    • Antarctica plate tectonics
    • ASL example
  • Misuses of animation
    • Hampster dance
    • animaniacs
  • controlling animated gifs: GraphicConvertor, GIFbuilder for Macs; Gif Animator for Windows

  .

  .

  .

  .

  Bobby

  .

  .

  .

  .

  For next week

  Assignments

  .

  .

  .

  .

  What's an IPP?

  .

  .

  .

  .