Creating Learning-centered Courses for the World Wide Web

sponsors

Places

Creating Learning-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.