.

.

.

.

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

.

.

.

.

Creating clickable maps

• Use web editors like FrontPage, HomePage or PageMill

.

.

.

.

Interface Design

• What makes a good web page?
  • Nan Goggin's Design Guide
  • Yale style guide
• What makes a good personal web page?
• What makes a good organizational web page?

Reasons

.

.

.

.

.

.

.

Design features

• Consistency/simplicity/aesthetically attractive
  ........however
  
• Match of interface to audience goals
  Lin & Levin paper

.

.

.

.

Animated graphics

• strengths
  • weather.com
  • Antarctica plate tectonics
  • ASL example
• weaknesses
• controlling animated gifs: GifBuilder for Macs; similar tools for Windows

.

.

.

.

For next week

• Read Lin & Levin paper, be prepared to discuss the strengths and weaknesses of consistency in web interface design
• Look briefly at the Levin, Stuve & Jacobson paper on mental models of the Web and the Internet
• Major Project Proposals due in two weeks:
  • what question or issue related to technology and learning?
  • what set of learners?