But first...

• Resources
• relative vs. absolute links
  • Relative link: myfile.html
    • one level deeper: directory/myfile.html
    • one level higher: ../myfile.html
  • Absolute link: http://lrs.ed.uiuc.edu/students/j-test/myfile.html
  • advantages of relative links to your own file
    • shorter
    • more portable
• Your five favorite technologies and the Bruce/Levin taxonomy

.

.

.

.

Interactive Graphics & Interface Design

.

.

.

.

.

.

.

.

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, 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

• single screen
• inverted "L" layout
• strategic use of motion

Gestalt Psychology perceptual organization principles

• proximity
• similarity
• good figure
• common fate

Proximity

                          X                  X
                          X                  X

                          X  X
                          
                          
                          
                          
                          
                          
                          X  X

Similarity

                             X     O
                             
   
                             X     O

                             X  X
                             
   
                              O       O

Good figure

Common fate

• 
• Coherence illusion applet: http://www.ed.uiuc.edu/courses/edpsy387/fa98/java-illusion/

Implications for interface design

• what to do
• what not to do

Animated graphics

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

.

.

.

.

For next week

• Read Lin & Levin paper
• Describe your "vision" for education in 2020 - post it in WebBoard
  • Come the Millennium, Where the University? by Gerhard Casper, President, Stanford University
  • Oakley, Manning, & Ward: UI-OnLine: The Realization of the 21st Century Land-Grant University
  • Learning Spaces in the Networld of Tomorrow: Future Learning Spaces: A VIP Experience at MBARI by Margaret Riel
  • Levin & Waugh's Teleapprenticeships
• Major Project Proposals due in three weeks (Feb 24): see Major Project Timeline
  • what question or issue related to technology and learning?
  • what set of learners?