Metaphor: The Hippogryph (horse + lion + eagle)

€ Designing a system by constructing it from functioning parts.

We'll make the innards of the black box more visible:

Gray box = black box1 + black box2 + . . . + black boxn

(Put together carefully!)

€ User interface‹the part you see on the screen.

Development of the User Interface

(1) ENIAC was programmed by being rewired

(2) Programming by setting switches on the front panel

(3) Punched cards for input: batch mode was very inefficient.

(4) Time-sharing computer: everyone has the illusion of being the sole user.

No screen, no mouse, and unpleasant editing:

p 125:450
i 220
d 245:350
stotal$sum$340:#

(5) Video terminals in the 1970s made life much easier for the user.

Guidelines for Good Systems

€ A system should be transparent

€ A system should be forgiving

€ A system should be visually oriented

Anatomy of a Stack

€ A HyperCard stack is another microworld, designed to model a stack of
index cards.

€ Visually and functionally, a stack is a collection of cards.

Each card may contain:

- Fields, where information may be stored

- Buttons, which control the actions of the stack

- Graphic images, to make the stack look better and be easier to use.

€ Each object in a stack, including the stack itself, can have a program,
called a script, associated with it.

Cards and Backgrounds

€ Each card has a background, but many cards may share the same background.

€ Cards act as transparent overlays on their backgrounds, both visually and
functionally.

Fields

€ Fields are the basic containers for information in HyperCard.

€ Fields commonly live on backgrounds, but they can be associated with
cards as well.

€ A background field is shared by all cards using that background. It acts
like a template for storage.

€ Fields are generally passive.

Buttons

€ Buttons are active, in that clicking on one usually causes something to
happen.

Example: The arrows you have seen that take you to other cards

€ Buttons usually live on cards.

Common Exception: The "go to next card" and "go to previous card"
buttons, shown above, usually live on backgrounds. (Why?)

HyperCard's User Levels

(1) Browsing: you can only click on buttons.
(2) Typing: browsing + you can type into fields.
(3) Painting: typing + you can change the graphics.
(4) Authoring: painting + you can edit and move
fields and buttons.
(5) Scripting: authoring + you can change the
scripts of objects.

€ You set the user level on the card before the Home stack's icon card (use
the back arrow key):

Menus

€ The added powers of the authoring level are reflected in the menus:

The left menu is what you see at the browsing level, the right is what
you see at the authoring level.

You also have access to the Tools menu:

This can be "torn off" the menu bar and moved around.

The browse tool is used to click buttons and
fields as a browsing or typing user would.

The button tool is used to manipulate buttons
while authoring.

The field tool is used to inspect and modify fields.

The rest are painting tools.

Making a New Stack

€ Select New Stack... from the File menu

The new stack will contain one card and one background.

€ You can then add cards to the new stack by selecting New Card from the
Edit menu.

€ The Edit menu can be used to cut, copy, and paste cards, buttons, and
fields.

€ The Objects menu is used to get information about a stack and its
components, and to make new buttons, fields, and backgrounds.

€ Selecting New button from the Objects menu also brings up a dialog box.

Using this box, you can set the properties of the button.

You can move or resize a button by dragging in its interior or dragging
one of its corners, respectively.

€ Selecting New field brings up an informative dialog box.

Using this box, you can set the properties of the field.

You can move or resize a field by dragging in its interior or dragging
one of its corners, respectively.

€ Selecting New Background from the Objects menu places a new background
and a new card in front of the current card, without changing the
background of any existing card.

Example: This is what happens when you select New Background, followed
by New Card.

Linking Cards

€ To make a button move to another card

(1) Select the button, using the button tool

(2) Double-click on the button, or select "Button info..." from the
Objects menu to get the button dialog box.

(3) Click on the "Link to..." button in the dialog box.

(4) A new box will appear

(5) Navigate through the stack (using the Go menu) until you come to
the card where the button is to send the user.

(6) Click the "This Card" button in the new box, and ‹presto!‹your
button knows what to do when the user clicks it.

Painting

You can paint on cards or backgrounds using the painting tools on the
Tools menu. (The Options and the Paint menus have some features you
might wish to explore, too.)

- The pencil draws a thin line.

- The paintbrush acts much like the pencil.

- The line tool draws straight lines.

- The spraypaint tool "spatters" the currently selected pattern.

- The paint can is used to fill areas with the currently selected
pattern.

- The eraser erases everything under it as long as the mouse button
is held down.

- The rectangle and rounded rectangle draw rectangles of the indicated
type.

- The oval acts almost exactly like the rectangle tool, except that
it draws ovals.

- The regular polygon draws symmetric polygons with either three,
four, five, six or eight sides. It can also draw circles.

- The irregular polygon acts almost like a number of line tools
strung together.

- To use the curve tool, begin drawing by clicking on the screen
and holding the mouse to draw a curve. When you release the mouse,
the curve is completed.

- The text tool allows you to paint text on the screen by typing.

- When using the selection rectangle, clicking and dragging the
mouse creates a rectangular region on the screen. You can then
drag, cut, or copy the picture within the rectangle.

- The lasso also selects an object, but includes as little of the
exterior as possible.

Visual Order of Objects

€ HyperCard has rules to determine what shows when combining functional
objects:

(1) Fields visually overlap buttons.

(2) Buttons overlap graphics.

(3) Cards overlap backgrounds (and all background objects).

€ Even if a card's graphics obscure a background button completely, the
button is still "active."