July 1997 (Draft)
Also see:
|
The guidelines were originally developed by a working group led by Prescott Klassen of the Open Learning Agency, Maureen Stanley of the Alberta Distance Learning Centre, Don Whitty of the New Brunswick Community College, Miramichi, Roger Doucet, TeleEducation NB, Rory McGreal, TeleEducation NB, and Leon Cooper of the Ministry of Education of Newfoundland. They were further developed for the TeleCampus by Michaell Elliott, Normand Brunel and others. |
The NBCC Miramichi production coordinator responsible for the additional work is Scott Douglas. This is part of the development of procedures for the NB TeleCampus and the Distributed Learning Centre (DLC) of NBCC Miramichi. The guide has been originally drafted, compiled and developed by Judy Breau and Joan Kane (Project Leaders for the DLC), and by Paul Muncaster (TeleEducation NB).
For additional information or updates to the Guide contact: |
The Web page is the common element of all courses developed. It will
link all the elements of the course and direct the learner to specific
media (Web-based, computer-based, paper-based, audio and/or video
materials) or activities. The design model is learning-centred. All
courses are asynchronous with the Web environment facilitating the
interaction between:
|
The learners will interact through:
|
PoliciesDevelopers should have access to designated areas of the server that houses the course being developed with the following restrictions:
|
Ethical Use of Web Resources
|
|
Course development projects should be led by a Project Manager. The Project Manager is responsible for the coordination and organization of the job and for the ultimate completion of the project. Contact with people outside of the course development team is the responsibility of the Project Manager. |
The Project Leader will:
|
| Courses developed according to EastWest standards follow a learning-centred model. The course will have four levels. The structure is outlined below. This model will provide consistency for the delivery of these courses via the Web. |
|
Course Introduction (Introduction, Overview, Goal and Objectives)
Module #: Title (Overview & Objectives) Section #: Title (Overview & Objectives) Lesson # (Objectives)
At each level, there must be a content-related title with the label. For
example: |
More lessons within a section are preferable to long lessons. Short pages of no more than one or two screens are preferable, but longer pages are preferred if the alternative is to split up a topic.
The EastWest Information Technology course template can be
used as an example.
|
| Each course should have the following pages: | |
|
Using hypertext, links can be duplicated where needed. For example, a link to the glossary and introduction could be provided from the student and instructor pages. |
|
Home Page (bilingual) (home.html) The bilingual main home page should contain a logo and links to the English and French versions of the course.
Course or Module Index (index.html)
Help (or Navigational Tools) (help.html)
Introduction (intro.html)
Credits(credit.html)
Resources (resources.html)
|
Information
This page should provide the following links:
Glossary
|
HTML StandardsThe approved HTML 3.2 standards may be used for development, including tables, nested tables, and frames. As much as possible, backward compatibility to less well-featured browsers should be attempted.Minimum browser requirements should be clearly posted on all top pages. Links to appropriate software (Web Browsers, plug-ins) should be implemented Low-bandwidth alternatives or low-bandwidth entry pages should be employed in order to channel visitors to the appropriate areas. |
Bilingual DesignAll top level pages should have links to an English and French sub-page.A site's HTML structure should be built to mirror the Bilingual design Images should be created without text unless absolutely necessary to ease translation. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
File SizeCourse pages, especially the top page, should load as quickly as possible. Therefore, it is important to limit file sizes. The size of individual pages within a module or course should not exceed 100k. Multimedia resources such as Shockwave files and programming scripts such as Java and ActiveX should not exceed 500k. Any links to these resources should state the file size explicitly.Image File Sizes should follow these guidelines:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
File FormatsAll files created as content pages should be ASCII text files, marked up in HTML.HTML-generating applications may be used if the resulting documents are saved as HTML. Images should be in .gif or jpeg format. Any other peripheral file type, if you MUST use it, should be clearly marked and the tool or application required to view this tool should be referenced at that point. Headings & TitlesHeadings should follow the physical typesetting conventions of <H2> for Module/section/lesson and <H3> for subheadings.Headings may be delimited by colour, assuming that the colour is palette-friendly (see below, Colours), and does not conflict with any existing color scheme and graphics set. TextEach content page should show users exactly how far they are into the material. Recommended format at the top right of each page: "page 3 of 7"Long scrolling pages should be avoided. Limit scrolling to two screens unless dictated by the content. The WWW is a hypermedia environment, pages should use hyperlinks and take advantage of both internal and external resources. |
ColoursAll graphics designed for the Telecampus and any associated courses and certificates should be designed using the browser-safe 216 colour palette with the exception of scanned art and photographs. Any image designed in a more complex colour scheme should be indicated as such.GraphicsAll graphics should employ the <ALT> tagAll graphics over 30 K in size should indicate the total size in the <ALT> tag Icons and Bullets should have a simple, representative <ALT> tag. The asterisk "*" is recommended. Images should be designed to fit on a 640 x 480 pixel screen resolution. Animated images should have a descriptive <ALT> tag IconsOn any arrangement of icons or on a toolbar, the most often-used icons should be the furthest to the right close to the scroll bar.The icon(s) must serve a purpose, and not be simply decorative. The user must know what the icon or button represents before clicking on it. Avoid ambiguous icons. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
DocumentationEdit and Author comments should be in the form of hidden text the in the header of the document, and follow a pattern similar to this:<!--
All new pages should be time-stamped with the author's name and the creation date All edited pages should at the least indicate the "Last edited date" in the header information |
Meta TagsTo make Web sites easier to find by Search engines and indexing robots and to facilitate the se of new classification systems (General, Adult, etc), general <META> tags MUST be employed on top pages.Here is an example:.
Information contained in quotation marks is the variable
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Page SignatureIndex pages, or pages with frequent updates, should be "signed" in the text of the page. The Signature can contain any of these variables: the author's name, the sponsoring organization's name, the creation date, the date of the last edit, the holder of the copyright < |
Print-CapableMain pages, summary pages, syllabi, and all other documents which could be required on a regular basis by the student should be available in a printable format. If possible a word processing format (pdf, .doc or .wpd) as well as simple ASCII document should be made available for downloading. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
File Structure and Naming ConventionsIn order to maintain the structural hierarchy of course content, courses should use the file system itself to organize the levels of instructional material. Names of directories can function as top level locators and the individual files will be named to reflect the numbering strategies of the design team. Index files will provide the table of contents and fully named file extensions of the next level of course content. Here is a skeletal look at how the file system would work:
-- Module2: index.html --- Section2: index.html ---- Lesson3: index.html one.html two.html Address: http://course/module2/section2/lesson3/two.html The file naming convention is designed to keep the file names simple, easy to understand and unique in each directory.
|
Filenames should be descriptive of their contents, so as their purpose is evident to an outsider. Avoid cryptic designations. Course content pages can be numbered e. g. page1.html (Note that .html cannot be used on Windows 3.x systems. In which case it is reduced to .htm) Directories should contain the following file names:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Page SpecificationsThe web pages must be developed for viewing on a 640 X 480 pixel resolution monitor which has a usable space of 600 X 350 pixels. For forms that must be printed, the usable space is 535 X 670 pixels for a US Letter size page.The pages should contain no more than 1 - 2 screens of content. This reduces scrolling. Graphic Specifications
|
Typographic Specifications
|
ButtonsEach page must allow students to escape and access other parts of the course. The following buttons should be accessible from every page:
|
|
All the buttons should have the title of the target page in the ALT option of the IMG tag and in a onMouseOver JavaScript in the A tag. See example below:
<A HREF="../u1.html" TARGET=_parent onMouseOver="window.status='Unit 1: Introduction to the Internet'; return true"><IMG SRC="graphics/up.gif" ALT="Unit 1: Introduction to the Internet" BORDER=0></A> This allows the name of the target page to appear as a pop-up label in Netscape Navigator 4.01 or later and Microsoft Internet Explorer 3.0 or later. For browsers older than these, the name of the target page appears in the status bar at the bottom of the page. |
In order to improve our Web Developer's Guide , we would appreciate your comments.
Date:
Please rate the following:
|
|
Excellent |
Good |
Fair |
Poor |
| Presentation of Information | ||||
| Organization of the Document | ||||
| Helpfulness | ||||
| Clarity | ||||
| Functionality | ||||
| Covers All the Necessary Elements |
What do you like best about the document?
What suggestions do you have for improvement?
Additional comments
Email response to
tenb@teleeducation.nb.ca
