The Absolute Basics of Visual Design

1

Web Based Course Development

• Issues and Process
• Calgary Board of Educations Annual Teachers
  Convention
• February 1999

Norm Vaughan Instructional Design
Coordinator nvaughan_at_mtroyal.ab.ca
2
Overview

• This presentation will
• Provide an overview to the MRC Web based course
  development process
• Facilitate a discussion of Why the Web?
• Suggest design principles for course construction
• Demonstrate potential development tools for
  constructing Web based courses
• Discuss implementation issues

3
Development Process

• The five stages of Web based course development
  are as follows
• Analysis - Establishing the course rationale and
  design criteria
• Design - Developing the course framework
• Development - Production of the course material
• Implementation - Delivery of the course
• Evaluation - An on-going process at each stage

4
Development Model
5
Analysis Stage

• Establish the course rationale and design
  criteria by conducting the following analysis
• Needs Analysis - identify the need to integrate
  Web based
• technology into a specific
  course or program
• Learner Analysis - define the target audience for
  the project
• Setting Analysis - establish where and how the
  project will
• be used

6
Analysis Stage

• Content Analysis - produce a course outline and
  define major curriculum goals and learning
  outcomes, break the content into modules
  (estimate type amount of multimedia required)
• Goal Analysis - define major goals and timelines
  for the
• project
• Cost/Benefit Analysis - identify financial
  requirements and constraints (remember time
  cost)

7
Analysis Stage - Needs

• Needs Analysis - Why the Web?
• Scenario 1 - Imagine yourself in Fifth Century BC
  Athens. Teaching is all talk and thought
  (Socrates and his students in the Grove of
  Academe). Along comes a technophile who points
  out that there is a great workplace technology
  that ought to be integrated into teaching, that
  education could be revolutionized if students
  also employed reading and writing as well as
  speaking and listening. (Wishes and Worries?)
• Scenario 2 - Consider a revolutionary technology
  on the horizon some 1500 years later. Teaching
  now takes place when a student hires a tutor.
  Imagine a techie tutor-scholar suggesting the
  idea of a formal school or campus. The idea of
  students coming together to share common
  resources (e.g. library) studying in one building
  (e.g. lecture rooms, teacher offices). (Wishes
  and Worries?)

8
Analysis Stage - Learner

• Learner Analysis - Knowing Your Audience
• demographics
• educational background
• computer literacy
• personal background
• Note Refer to the separate handout - Audience
  Analysis

9
Analysis Stage - Setting

• Setting Analysis - Where, When, How?
• Educational Models for the WWW
• a) Information Based Models - the WWW is used for
  retrieving information, as in virtual museums or
  digital libraries
• b) Teaching Media Based Models - the WWW is used
  only for dissemination of educational material to
  distance students, such as course descriptions,
  educational software
• c) Enriched Classroom Models - the WWW is used to
  complement traditional classroom based teaching
  (e.g., on-line communication tools, activities,
  lecture notes, assessment features)
• d) Virtual Classroom Models - the WWW is used
  with emphasis on collaboration and computer
  mediated human interaction

10
Analysis Stage - Content

• Content Analysis - What?
• Learning Outcomes
• Alberta Education - Technology Outcomes Project
  http//ednet.edc.gov.ab.ca/techoutcomes/
• -foundational operations, knowledge and concepts
• -processes for productivity
• -communicating, inquiring, decision making and
  problem solving
• MRC - Proposed College-Wide Learning Outcomes
• -thinking skills -ethical reasoning
• -communication -group effectiveness
• -information retrieval evaluation -computer
  literacy

11
Analysis Stage - Goal

• Goal Analysis - What?
• Defining the vision - What result/product/proce
  ss do I want from creating a web site?
• Creating milestones and timelines to achieve this
  vision
• Note Refer to the separate handout - Goal
  Analysis

12
Analysis Stage - Cost/Benefit

• Cost/Benefit Analysis - (time cost)
• hardware/software issues
• technological skills
• access

13
Design Stage

• Develop a solid frame of reference for the actual
  construction or development of the course by
• Creating a student assessment framework and
  activities which support the learning outcomes of
  the course
• Establishing a course layout or design strategy
  for presenting this content

14
Design Stage

• REAL (Realistic Environments for Active Learning)
• 1. Extend students responsibility for their own
  learning,
• allowing students to determine what they need to
  learn
• enabling students to manage their own learning
  activities
• enabling students to contribute to each others
  learning
• creating a non-threatening setting for learning
• helping students develop metacognitive awareness

15
Design Stage

• REAL (Realistic Environments for Active Learning)
• 2. Make learning meaningful by,
• making maximum use of existing knowledge
• anchoring instruction in realistic settings
• providing multiple ways to learn content

16
Design Stage

• REAL (Realistic Environments for Active Learning)
• 3. Promote active knowledge construction by,
• using activities to promote higher level thinking
• encouraging creative and flexible problem solving
• providing a mechanism for students to present
  their learning.
• Grabinger, R.S., Dunlap, J.C. Heath, S. (1993).
  Learning environment design guidelines. Paper
  presented at the Association for Educational
  Communications and Technology, New Orleans.

17
Design Stage

• Principles of Design
• CONSISTENT
• Contrast
• Repetition
• Alignment
• Proximity

18
Design Stage

• Principles of Design - Web Page Design Sites
• http//usableweb.com/
• http//www.webpagesthatsuck.com
• http//www.useit.com/alertbox/9605.html
• http//www.zdnet.com/anchordesk/story/story_1716.h
  tml
• http//www.webreview.com/97/04/25/webtech/index.ht
  ml
• http//www.usableweb.com/
• http//www.sun.com/styleguide/
• http//info.med.yale.edu/caim/manual/contents.html
  
• http//www.typo.com/websense/websense.html

19
Design Stage

• Principles of Design - Writing for the Web
• non-linear medium - no guarantee that the user
  will read every page
• writing on a screen not paper - landscape vs
  portrait orientation
• users scan rather than read web page
• chunk information - avoid long scrolling
  documents
• motivate students by activating your words
• Note Refer to the separate handout - Writing for
  the Web

20
Design Stage

• Course
• Layout
• Examples

21
Design Stage

• Course
• Layout
• Examples

22
Design Stage

• Course
• Layout
• Examples

23
Design Stage

• Course
• Content
• Examples

24
Design Stage

• Course
• Content
• Examples

25
Design Stage

• Course
• Activity
• Examples
• On-line
• Writing
• Workshops

26
Design Stage

• Course
• Activity
• Examples
• Case Based
• Class Discussion
• Forum

27
Design Stage

• Course
• Activity
• Examples
• Student
• Interactions
• with Video
• Clips

28
Design Stage

• Course
• Activity
• Examples
• E-mail
• Interaction
• with
• International
• Experts

29
Design Stage

• Course
• Assessment
• Examples
• Student
• Self
• Assessment
• Quizzes

30
Design Stage

• Course
• Assessment
• Examples
• Solving
• Real-life
• Case
• Studies

31
Development Stage

• This phase involves the construction of a
  prototype or beta version of the course based on
  the model created during the design phase
• This construction process in a Web environment is
  very dynamic as
• the development tools
• the user environment
• and the WWW itself are constantly changing
• Thus, it is important to construct the Web site
  in a flexible manner so that these on-going
  changes can be accommodated

32
Development Stage

• Development Tools
• HTML Export Tools
• HTML Editors
• Web Based Course Development Tools
• Commercially Developed Web Based Courses

33
Development Stage

• HTML Export Tools
• Microsoft Word 97
• http//www.microsoft.com/
• Corel WordPerfect Suite 8.0
• http//www.corel.com/products/wordperfect/index.ht
  m

34
Development Stage

• HTML Editors
• Adobe PageMill 3.0
• http//www.adobe.com/prodindex/pagemill/main.html
• Allaire Homesite
• http//www.allaire.com/Products/homesite/
• BB Edit 5.02
• http//www.bbedit.com/
• Claris Home-Page 3.0
• http//www.claris.com/products/homepage3.html

35
Development Stage

• HTML Editors (cont.)
• Macromedia Dreamweaver 2.0
• http//www.macromedia.com/software/dreamweaver/
• Microsoft FrontPage 98
• http//www.microsoft.com/
• Reference Site http//www.atl.ualberta.ca/article
  s/web/editorsummary.cfm

36
Development Stage

• Web Based Course Development Tools
• CourseInfo (free trial)
• http//www.blackboard.net/
• Learning Space
• http//www.lotus.com/home.nsf/welcome/learnspace
• TopClass (free trial)
• http//www.wbtsystems.com/
• WebCT (free trial)
• http//homebrew.cs.ubc.ca/webct/
• Reference Site http//www.pitt.edu/washburn/ccs.
  htm

37
Development Stage

• Commercially Developed Web Based Courses
• Allyn and Bacon
• http//www.abacon.com/gallery/index.html
• Harcourt Brace US
• http//www.harbrace.com/
• ITP Nelson Publishers
• http//nelson.com/
• McGraw-Hill Ryerson Canada
• http//www.mcgrawhill.ca/
• Prentice Hall Canada
• http//www.phcanada.com/

38
Development Stage

• General Reference
• The World Lecture Hall
• http//www.utexas.edu/world/lecture/
• The World Lecture Hall (WLH) contains links to
  pages created by faculty worldwide who are using
  the Web to deliver class materials. For example,
  you will find course syllabi, assignments,
  lecture notes, exams, class calendars, multimedia
  textbooks, etc.
• World Wide Web Courseware Developers Listserv Web
  Site
• http//www.unb.ca/web/wwwdev/c3.html
• This Web site contains links to a series of
  post-secondary Web based courses that have been
  developed by members of the WWW Courseware
  Developers Group

39
Development Stage

• General Reference (cont.)
• TeleCampus Online Course database
• http//database.telecampus.com/home/
• Thousands of courses from around the world,
  available over the
• Internet.

40
Implementation Stage

• Key Concepts
• Student access to the Web based course
• Instructor maintenance of the course site
• Student evaluation issues
• Student fees and accreditation
• Web server requirements and access

41
Implementation Stage

• Delivery issues
• Student Access - providing students with an
  introduction and overview of how to access and
  properly utilize the course site
• - password protection of site
• - trouble shooting student computer hardware
  software
• questions and issues

42
Implementation Stage

• Delivery issues (cont.)
• Maintenance - updating and revising course pages
• -checking and adding internal and external
  hypertext links
• -responding to student e-mail
• -facilitating and seeding on-line class
  discussions
• Student Evaluation - security issues of on-line
  testing

43
Implementation Stage

• Delivery issues (cont.)
• Student Fees and Accreditation
• Fees - domestic versus international students
• -technology or development fee
• Accreditation - inter-institutional credit system
• -virtual colleges and universities

44
Implementation Stage

• Delivery issues (cont.)
• Web server requirements and access
• File Management - ability to upload course pages
  to a Web server (ftp - file transfer protocol)
• Interactive scripting - support for server cgi
  scripts
• Multimedia plug-ins - support for hosting various
  types of plug-in applications

45
Evaluation

• On-going process at each stage of the course
  development process
• have colleagues and students constantly
  reviewing the development of your Web site
• develop an evaluation checklist or form
• ensure that each module is piloted
• make the necessary revisions based on informal
  and formal feedback mechanisms

46

• Technology is the campfire around which we will
  tell our stories.
• Laurie Anderson