A New Web Course —"Fundamentals of
Image Processing and Analysis"
Yu-Jin ZHANG Wei-Jin LIU
Department of Electronic Engineering, Tsinghua University,
Beijing, China
100084
E-mail: zhangyj@ee.tsinghua.edu.cn
A new Web course called "Fundamentals of Image Processing and Analysis" has been developed
recently. This Web course is suitable for continuous education and distance learning. In this paper,
the basic properties should be fulfilled by a Web course are first discussed. With respect to these
properties, different factors that should be considered in the design and implementation of Web
courses are then explained. Based on these discussions and explanations, the course structure is
determined and the implementation is carried on. The course structure is a combination of tree
structure and graph structure, which has the advantage for tractable navigation and hierarchical
configuration. The knowledge component is taken as the logical unit for study, and various content
representations are organized around each knowledge component. Different components, interface
and screen layouts, especially those related to demonstration, are illustrated to show the
characteristics of the course. Finally, with an overview of the course composition, some merits of
the general design considerations and the developed course in particular are discussed.
Key word: Distance learning Continuous education Web course Course structure
Course design
Courseware design
Learning Strategy Interactive environment
1 Introduction
The new century has been marked by the advent of information technology and the maturing of
telecommunication technology. This progress has both impacts on the contents of education and on the means of
education. In one side, multimedia, especially image （contain picture, animation, video, etc.） gets more and
more attention and application [6]. In another side, using Internet for teaching and learning is increasingly
widespread now.
As a joint "effort", many Web courses have been designed and developed to meet the requirements of continuous
education and distance learning. Web course is a somehow general and rough concept, normally, it includes the
contents of education for a course or discipline and the practice of teaching. The contents should be well
organized according to the education goals and education strategies. While for the education practice, the
appropriate supporting environment （such as software tool supporting the Web-learning as well as education
resources） is also very important [5].
This paper describes a new Web course named "Fundamentals of Image Processing and Analysis". Compared to
some existing courses in related topic （for example, [1]）, this course is targeted specially to continuous
education program for working people [5]. They have obtained their diplomas in other disciplines than computer
sciences and electronic engineering but facing the challenge of image technique. They are working different
regions with more than thousand kilometers apart from each other, and have sparse time to follow the course
lecture or contact teacher. This paper will first discuss some general factor influence the performance of Web
courses, and then will narrow the focus to the implementation of the specific Web course in counting the above
particular problems. The structure, interface, layout, functional modules, and some components of the course will
be detailed.
552
2
General Designing Considerations
As a new means of education, Web course has some own characteristics. Construction of Web courses should
take into consideration of the particularity of distance learning, satisfy the condition of running in the Internet,
and profit the advantage of network environment. To our opinion, the following properties should be fulfilled
by a Web course [5], [8]:
（1）It is advanced in the sense of reflecting the current trend in the development of discipline;
（2）It keeps the initiative in reader's own hands to prompt their motivation and consciousness in learning;
（3）It is opened so the structure and content of course could be easily extended, adjusted and replaced;
（4）It supports different users' sharing of the resources in and/or out class;
（5）It provides easy interaction between human-machine, teacher-student and teaching-learning [7];
（6）It endorses collaboration so learning task could be fulfilled by discussion and co-operation.
Web course design is an important task, and has significant influence on the course performance and education
effects. According to the above discussions, the following factors should be considered in the design and
implementation of Web courses:
（A）Information resources:
The property（1）,（2）and（3）should be considered mostly here. The course arrangement can be used to
guide the students' self-learning. To this end, various kinds of information resources need to be managed to
support learning, but not only teaching.
（B）Content organization:
The property（1）
（3）
,
and（4）should be considered mostly here. The contents are to be organized in modules.
In particular, it is better to use knowledge component （KC） as learning/studying units, and to arrange contents
around knowledge points.
（C）Course structure:
The property（3）and（5）should be considered mostly here. A dynamic and layered structure supporting
association of related KCs is important. The concepts, theorem and laws in the course should be linked to support
cross-reference.
（D）Content representation:
The property（5）and（6）should be considered mostly here. Different media, such as image/picture,
animation, audio and video should be employed to give readers some vivid and dynamic representation to
stimulate their deep thinking and active participation.
（E）Course navigation:
The property（2）and（5）should be considered mostly here. According to the education plan, the course
structure and index list should be provided. Following these structures and lists, some simple, legible and explicit
navigation functions will guide the readers pass through the whole course effectively [7].
3
Course Structure and Implementation
According to the above discussions, the course is organized in a modular manner, with each module refers to one
separate study unit. In turn, each study unit is composed of a number of components that have embedded also the
teacher's teaching experience. The set of resources available for each study unit includes text notes and examples
（ with formula, tables, drawing and pictures ） , interactive demonstrations, self-tests as well as
introduction/indication and list of references. They provide different possibilities for learning, and permit reader
using different styles of learning to enhance the study [2].
The designed structure of the Web course is sketched in Figure 1. When the course started, five lists are
accessible. The KC （Knowledge Component） title list provides a list of knowledge elements, which servers as
the content of the course. Other four lists are composed of a number of pop-up content modules, each has a
particular function. Look at Figure 1 horizontally, each KC is made of component modules from all four lists.
The course structure is a combination of tree structure and graph structure. The tree structure provides a fast and
logical way of access to different branches of the course. On the other side, the graph structure makes the
navigation quite easy and nature.
553
Introduction
KC T itle List
Kowledge
Componen
t
Kowledge
Componen
t
Kowledge
Componen
t
Course
Example List
Demo List
Self-T est List
Reference List
KE T itle
Example
Demo
Self-T est
Reference
KC T itle
Example
Demo
Self-T est
Reference
KC T itle
Example
Demo
Self-T est
Reference
Figure 1
Structure of the course
The Web course, in fact, is composed of a number of Web pages. Since the Web course is accessible from
Internet, so people could use some net browser tools （for example, IE） to get into its pages. Web page is the
physic unit of this Web course, that is, each studying unit in this Web course corresponds to an individual Web
page. The navigation among different KC, such as between former and next page can be easily accomplished
using functions provided by browser. The navigation in the courseware is an important factor of the
effectiveness. Both linear organization and explorative organization are required [3]. To facility the navigation, a
mixed data structure with four levels is used to organize the contents. It is a combination of a net structure and a
tree structure as shown in Figure 1.
Figure 2 gives the start screen layout of the course; the structure in Figure 1 has been embedded inside it. The left
column shows the KC title list, titles are gathered into several groups corresponding to different chapters in the
content. Each title is corresponded to a section. The right window is the main display window for course content.
At the top of the right Windows, the navigation bar/list access icons are displayed. They will keep there despite
the roll of contents in the window, so the readers can make the link to required module/component all the time.
In Figure 2, the table of contents on the left of the screen represents the hierarchical structure of the hypertext
document, and each entry in the table of contents is a hypertext link.
Figure 2
Screen layout of the course
The organization of each KC unit is shown in Figure 3. It can be accessed by selecting the appropriate KC
title. It is composed text for explanation, tables and formulae, as well as examples, demos and self-test. Examples
and demos are made of pop-up Windows, so the representation in the KC unit is clear and concise. Reference is
provided for each KC, however, to help the reader to concentrate on the course content first, references for
related KC are grouped together, and made accessible from the table of content. While, example, demo and
self-test are directly accessible from KC unit, of course, they can be also selected from their respective lists, as
shown by the connections in Figure 3.
554
KC T itle
Text / Table / Formula
Example
Example List
Demo List
Self-T est List
Demo
Text / Table / Formula
Demo
Reference for
KC group
Example
Text / Table / Formula
Self-Test
Figure 3
Organization of KC unit
Figure 4 gives a screen layout of a typical KC unit, it can be selected from the table of content from the left
column. In the right window, test is not only used for the explanation of basic concepts and principle, but also
served as the vehicle for conducting the course content. In fact, tables and formulae are embedded in the text
flow, as well as the hot-key for linking examples and demonstrations, i.e., the entry for examples and
demonstrations is put into text flow. Self-test is given in the bottom of unit, after test explanation. In Figure 4, a
pop-up example window is also layed on the screen to give an though idea.
Figure 4
4
A typical layout of the KC unit
Modules for Demonstration and Self-test
In Figure 1, four lists are indicated. All the components of in these four lists are structured in modules. The
reference module is made only with text, so it is implemented very straightforward. The example module is
made of text plus table and image, but still similar to a test module. In the other side, the modules for
demonstration and self-test are more complicated, they should provide interactive function and perform some
processing and/or analysis tasks. According to their functions and contents, different techniques are used, such
as Active X controller, Java Applet, Flash, etc [8].
A demonstration for image processing made by Active X Control is shown in Figure 5. It is a demonstration of
Butterworth low-pass filtering. In this module, user can read a local image, process it and store the result in
local machine. To get different result, user can interactively input the parameters for processing, as shown by
the pop-up dialog box in the right of Figure 5.
555
Figure 5
A demonstration made by Active X Control
A demonstration for image processing made by Java Applet is shown in Figure 6. It is a demonstration of
Gradient operation. In this module, user can select one of provided images （as shown in low-left of Figure 6）,
select one of gradient detectors and its direction （the configuration of the detector is in the middle）, and get
thus a processed edge map （as shown in low-right of Figure 6）.
Figure 6
A demonstration made by Java Applet
A demonstration for image processing made by Flash is shown in Figure 7. It is a demonstration of polygonal
approximation of irregular object. Given an object at the start, this object will be superimposed on a lattice net,
a polygonal resemblance is then obtained.
Figure 7 A demonstration made by Flash
Self-test module is also a module made by Flash. Each unit is composed of a question-answer pair. Excerpt
showing the exercise problem, it has the functions of selecting code for problem solution, offering hint and
providing explanatory answer. In addition, a statistic for number of solved problems is also counted.
556
Figure 8
5
A typical self-test screen layout made by Flash
Conclusions
In this paper, the general designing considerations, which are very important for the Web course development,
are first discussed, the structure and realization of a particular Web course is then presented in details. Some
components of this Web course have been partially used in the course conducted last year [9].
In a recent study about Web course structure, a hierarchical hyper concept map （HHCM） has been proposed
[4]. It consists of an aggregation of the navigation map, the concept map and hypermedia document. Though
different names are used, our proposed method and HHCM method share the same properties of combining the
concept structure and navigation tools with different content representations. They have both the advantages of
providing flexible access ability and reducing disorientation and cognitive overload.
A Web course consists of a collection of different functional modules. Using various styles of learning would
increase the study performance. Take this factor into consideration, totally 60 KC units, 91 examples, 36
demonstrations and 219 self-test units have been developed for the course of "Fundamentals of Image
Processing and Analysis". In average, there are 1.5 examples and more than 3 self-test units for each KC unit.
This has made this Web course a suitable choice for self-learning.
References
[1] Ahluwalia A K, Jonker P P, Young I T. An interactive image processing course for the Web. Proc. 1st
International Conference on Image and Graphics, Y.J. Zhang ed., 589~593, 2000.
[2] Feldman L J, Hofinger R J. Active participation by sophomore students in the design of experiments. Proc.
ASEE/IEEE Frontiers in Education Conference, 1526-1527, 1997.
[3] Hall M, Robinson D. Lost in hyperspace: linearity versus exploration in the design of multimedia for
independent learners. Proc. International Conference on Computer in Education’98, 2: 9-13, 1998
[4] Sung Y T, Chiou S K, Chang K E. Use of hierarchical hyper concept map in Web-based courses. Proc.
International Conference on Computer in Education’01, 1133-1137, 2001.
[5] Zhang Y J. A tele-teaching practice using “Tsinghua WebSchool”, Proc. of International Conference on
Computer in Education’01, 173-176, 2001.
[6] Zhang Y J, Li Q, Ge J H. A computer assisted instruction courseware for “Image Processing and Analysis”.
Proc. of International Conference on Computer in Education’99, 371-374, 1999.
[7] Zhang Y J, Xu Y. Effect investigation of the CAI software for “Image Processing and Analysis”. Proc. of
International Conference on Computer in Education’99, 858-859, 1999.
[8] Zhu X Q, Zhang Y J, Liu W J. Evaluation and comparison of Web course developmental tools and
technology: a case study. Proc. of International Conference on Computer in Education’01, 610-615, 2001.
[9] Zhu X Q, Zhang Y J, Liu W J. IP&A-Web: an online course of image processing and analysis. Proc. of
International Conference on Computer in Education’01, 729-734, 2001.
557