* User interface--the part you see on the screen.
(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
* 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.
Development of the User
Interface
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 HyperCard stack is another microworld, designed to
model a stack of index cards.
Anatomy of a Stack
* Cards act as transparent overlays on their backgrounds, both visually and functionally.
Fields
* 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.
* 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
Common Exception: The "go to next card" and "go to previous
card" buttons, shown above, usually live on backgrounds. (Why?)
(5) Scripting: authoring + you can change the
* You set the user level on the card before the Home stack's
icon card (use the back arrow key):
* The added powers of the authoring level are reflected in the
menus:
* Fields are the basic containers for information in HyperCard.
* Fields are generally passive.
Buttons
* Buttons usually live on cards.
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.
scripts of objects.
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:
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.
* Select New Stack... from the File menu
Making a New Stack
* 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.
* Selecting New field brings up an informative dialog box.
You can move or resize a field by dragging in its interior or
dragging one of its corners, respectively.
Example: This is what happens when you select New Background,
followed by New Card.
* 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.
* 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
(6) Click the "This Card" button in the new box, and
‹presto!‹your button knows what to do when the user clicks
it.
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 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
(2) Buttons overlap graphics.
(3) Cards overlap backgrounds (and all background
objects).
Painting
- The regular polygon draws symmetric polygons
with either three, four, five, six or eight sides. It can
also draw circles.
* HyperCard has rules to determine what shows when
combining functional objects:
(1) Fields visually overlap buttons.
