|
|
Creating Learner-Centered Courses for the World
Wide Web
Sanders, William B. (2001). Creating
learning-centered courses for the world wide web.
Needham Heights, MA: Pearson.
Here,
I’ll break with my usual custom of giving you the flavor
of the book by summarizing the beginning chapters.
That’s because this book has some pretty advanced topics
near the end and I find those more interesting than the
“basic Internet and HTML” content at the beginning. By
the way, this book includes lots of useful sample code
for things like JavaScript functions.
Anyway, here are the names of the first few chapters:
1.
INTRODUCTION—TECHNOLOGY FOLLOWING LEARNING
2. BASIC PARTS OF A WEB PAGE: TEXT, GRAPHICS, AND LINKS
3. THIRD GENERATION WEB SITES AND LEARNING
4. CREATING PAGES: TOOLS AND TEMPLATES
5. ESSENTIAL HTML
I'll
pick up with chapter six.
6.
DESIGNING FOR DISCOVERY: LINKS TO FIND KNOWLEDGE
Internal Links
 |
If
you put all files for a lesson in a single folder,
linking is much easier. |
 |
If
it’s done well, linking and navigation is transparent
to the user. |
 |
Using a common template structure can aid such
transparency. |
 |
Links can be used to annotate and elaborate by
sprinkling them throughout a text. |
 |
Edward Tufte (1997) said “...the information becomes
the interface.” That is, information can be laid out
on a single page instead of stacking it in a
hierarchy. This can keep a user from having to “drill
down” too far. |
 |
Graphical icons can be used as a convention for
navigation. |
 |
Links can be used to compare things by placing them in
juxtaposition. |
 |
Your
syllabus can be used as “link central”, linking to
virtually every other tool or area for the course. |
Menus
are among the most common forms of linking:
 |
sidebar menus |
 |
engagement links |
 |
small text menus |
 |
pull-down menus |
External
Links
 |
Reminding students to bookmark pages that lead to
external sites can help them get back. You could also
use a frame set and open external links within it. If
you do this, be sure not to draw in external sites
that also use a frame set! |
 |
Links in lessons can use a combination of internal and
external links. |
 |
You
can use links set up to make readers download files
(e.g., <A HREF=’download_this.pdf”>Click Here and
Download this PDF File </a>) |
7.
INTEGRATING GRAPHICS WITH TEXT AND LINKS: GETTING THE
DESIGN RIGHT
 |
Ken
Burns’ “Civil War” series on PBS set the standard of
how to use photos to communicate. |
 |
Most
faculty web pages don’t use good design, and could
benefit from consultation with an artist. |
 |
Keep
your web pictures in GIF, JPG and PNG formats: GIFs
for charts and illustrations, compressed JPGs for
photos, and PNGs as a faster-loading, more modern
version of the GIF. |
 |
Stick to web-safe colors, even if you have to recolor
parts of images. |
 |
Confections are “an assembly of many visual elements
selected…from various Streams of Story, then brought
together and juxtaposed on the still flatland of
paper” (Tufte, 1997). |
 |
Label your images. Use words, not numbers. |
 |
Become familiar with sites offering free or “fair use”
clip art. |
 |
Just
because downloading images from the web is so easy
doesn’t mean you should do it. |
 |
Good
scanners and digital cameras have become cheap and are
a great source for non-artists to produce their own
web site graphics. |
 |
You
can use images are links---or, in the case of hot
spots, as a series of links. |
8.
DESIGNING WITH TABLES: ORGANIZING THE ELEMENTS
 |
For
designers used to page layout programs like PageMaker
or Quark, designing for the web is frustrating because
you don’t have nearly the same amount of control over
how things look. For example, images are limited to
left, right or center (unless you use tables). |
 |
To
get around these limitations, many web sites lay out
their pages using “invisible” tables (sometimes very
complex ones!). |
 |
Tables are also good for clarification of complex
data. |
 |
Tables do a good job of placing graphics and text
together. |
 |
Though it’s a bit long in the tooth, some designers
still use the “invisible GIF trick”—using the “width”
attribute of a single pixel image as an invisible
means of pushing other items precisely into position. |
 |
When
displaying quantitative information, be careful not to
“lie with statistics” by doing things like displaying
bar charts with nonzero vertical axes or using
graphical distortions. |
 |
Tables on web pages are ideal for displaying “small
multiples”. |
 |
Consider Flash, QuickTime, or Real movies to animate
processes. |
9.
FRAMES: ORCHESTRATING LEARNING
 |
Frames are groups of web pages viewed in a single
window. The frame set page is the leader that
coordinates the pages in the frame set. |
 |
Frames are good for navigation because you can keep a
table of content menu in a small frame on the left
side of the page. |
 |
Frames are also good for comparing two things (e.g.,
split the page in half with two frames) |
10.
ACTIVE LEARNING WITH LINKS AND FRAMES
 |
Whether in a face-to-face or online class, students’
attention wanders a lot. How can you focus
attention? By using active learning techniques.
Active learning is a processed of informed decision
making that involves making choices and receiving
feedback. Because web pages are so modifiable and
nonlinear, they are an excellent choice for active
learning. |
 |
Virtual laboratories in science classes are a great
example of active learning. |
 |
Consider providing opportunities for active data
gathering and analysis. |
 |
You
can create a virtual “maze” using nothing but static
graphics and links. |
11.
COMMUNICATING ON THE WEB: EMAIL AND WIRED DISCUSSIONS
 |
Online talk mirrors the fragmented nature of
face-to-face talk. However, it also lacks the
inflections and nonverbal cues of spoken language.
These two things together are a recipe for
misunderstandings. A solution can be requiring
students to learn to communicate via clear, correct
expository writing. Hence, any online class is in a
sense a writing class! |
 |
Professors can embed email links in lessons to
facilitate receiving assignments from students. |
 |
Group email links, group distribution lists or
listservs can facilitate cooperative learning. |
 |
Class discussion can be held asynchronously via
discussion boards or synchronously via chat rooms,
instant messaging or videoconferencing. |
12.
ACTIVE LEARNING WITH ALERT BOXES, PROMPTS, AND
CONTROLLED WINDOWS
 |
A
little JavaScript can be used to pop up “alert” boxes
on a user’s screen. |
 |
A
teacher might use alert boxes to provide feedback in
response to user choices. |
 |
Another use for alert boxes is to guide a process by
providing an active map for students to follow. |
 |
One
can prompt students for input, and provide feedback as
a consequence of that input. This is a useful way of
providing small but immediate feedback (as opposed to
large feedback, which is given as a whole but may take
a long time to prepare and deliver to students). |
 |
One
can evaluate user responses more flexibly by using
conditionals. |
 |
Bringing up new windows can be used educationally
(e.g., by popping up small windows that do not totally
obscurer the original lesson window). |
13.
USING FORMS: INTERACTIVE FEEDBACK
 |
Forms can use text boxes, text areas, various types of
buttons (e.g., radio, submit, reset), checkboxes, and
dropdown lists. |
 |
Data
entered into a form has to be read, then passed to
another place. |
 |
Scripts can be used to calculate responses. |
 |
Some
browsers and program allow form data to be emailed. |
 |
Forms can be used to create online quizzes. |
 |
To
make quiz forms more secure, place the JavaScript in a
separate file where it cannot be viewed. |
14.
DYNAMIC HTML: LAYERS AND INTERACTIVE LEARNING
 |
DHTML is both a blessing and curse---a blessing
because of its promise in creating interactive web
pages, a curse in that it is not standardized.
|
 |
DHTML uses an “object model” that incorporates
characteristics such as objects, properties, events,
and methods. |
 |
DHTML can be used to create multivariate (i.e.,
showing more than one dynamically-changing variable)
web pages. |
 |
DHTML allows you to “layer” objects on a page, move
the layers---you can even dynamically change the
attributes of a layer. |
15.
ROLLOVERS AND CASCADING STYLE SHEETS: CONTROLLING THE
PAGE
 |
Rollovers swap images when a use rolls a mouse over
the image. |
 |
Rollovers are good for “if/then” scenarios. |
 |
Cascading Style Sheets (CSS) allow style attributes to
be kept at a single “master” location, enabling you to
change something in one place and have the change
ripple down to other places. This greatly facilitates
the changing and updating of web pages. |
16.
ORGANIZING WEB PAGES AND THE FUTURE OF WEB TECHNOLOGY IN
HIGHER EDUCATION
 |
Is
the web just another way to “shovel the same old
stuff” (i.e., access traditional pedagogy)? Or will it
spawn new and more effective pedagogies? |
 |
We
shouldn’t “throw the baby out with the
bathwater’’---certainly, good practices from
traditional teaching can be incorporated in this new
medium. |
 |
Web
design guru Jacob Nielsen argues against the notion of
e-books”, saying that books are a linear medium and
the web is capable of much more. |
 |
Plug-ins like ShockWave, QuickTime, and RealVideo can
greatly extend your site’s capabilities. |
 |
Cookies, CGI, and ASP can be used for data storage and
retrieval. |
 |
Submit a Summary |
 |
|
Want to submit a book summary?
Email it to cogsim@cogsim.com.
If we post it, we'll credit
you.
|
|
|
|
|