Teaching and Learning > DOCUMENTS

Web Support for Taught Courses: A report on the development of web sites designed to support degree level theology courses at Greenwich

Michael Alsford

Introduction

Since 1996 I have been engaged in a project which has sought to provide web based support material for students studying theology either as a named degree award or as an option within some other degree programme.

The motivation behind this ongoing project is both pedagogic and practical in that it relates to perceived student needs and also institutional resourcing issues.

The managing of large student numbers makes it increasingly difficult to ensure that all students have the necessary up to date information concerning any given course. Often a tutor may only see a particular student once a week as that student may only be taking one theology course as an option within another named award. Waiting a whole week before being able to give out information to a student is seldom very satisfactory, neither is having to devote 15 minutes from a one or even two hour teaching session to giving out general housekeeping information. Producing multiple copies of information handouts, lecture outlines, bibliographies and other support materials on a regular basis is also time consuming and resource intensive. Furthermore it is often the case that students lose hardcopy information amongst the welter of pieces of paper that they are given during any given year.

The development of our support websites is aimed at providing students with a single central location from where they can gain year and course information easily and on demand without the need to go through the course tutor. Furthermore the use of web based support provides an organic dimension to course information as the tutor can update and modify material easily and regularly adding to reading lists, providing assessment advice, posting graphic and sound support and so on.

I propose to report on the development of my web site project in two ways. Firstly I will provide a general outline of the nature of the various sites and the and the broad factors considered during their design. Secondly, I will provide a more detailed commentary on specific issues and concerns that confronted me as I constructed the sites in question.

Part 1: General overview

In designing the various web sites a number of factors were taken into consideration.

  1. What purpose should the sites serve?
  2. How should the sites be designed?
  3. How should they relate to traditional off-line resources?
  4. How should students be encouraged to engage with the sites?

What purpose should the sites serve?

The various web sites have a number of common aims as well as some site specific ones. In the first instance they have all been designed to provide information in an easily updateable form that maintains currency throughout the academic year. There is also a skills issue involved here as it is hoped that by making use of these very specific and custom built sites students would become more confident in navigating through the web in general.

There are two basic types of site: the first is a hub site, in other words a general site that serves as an access point for other more specific sites such as the course resource sites mentioned below. The second type is a course specific support site. These sites provide information on the particular course units which make up a student's overall course of study.

The Hub:

The hub serves no other purpose than to allow students easy access to a variety of web sites. As a navigation point its purpose would be compromised if it were over-burdened with information. We utilize a hub at two levels. The first central hub gives students easy access to year specific sites and the second "year" hub provides access to pages relevant to a specific year.

There are 3 year hubs corresponding to the three years of the honours degree programme. Each year hub contains links to the following information:

Students who manage to find their way to a year hub will be able to access all web information relevant to their year from this one page.

Course Specific Support Sites:

The main source of online information for students is provided via the course resource sites. These sites have been designed to provide students with general and additional information relating to either a single semester or year long course module.

These sites allow students access to a range of support information, which can be updated on a daily basis if needs be. Each support site contains links to the following:

Design:

While this has become something of a web design cliché "keep it simple" does appear to be good advice. Particularly for information sites an intuitive interface that responds quickly and as expected by the user is vital. Too many animations, special effects and sound clips tend to a) distract and confuse and b) slow down access times. The student is visiting the site for one reason - to get information and they want it as quickly as possible with as few "clicks" as possible.

The above having been said, it is equally important to give web sites a sense of identity and character. Students need to enjoy visiting the sites and have a sense of ownership of them in much the same way as they need to enjoy their lectures and seminars and recognise them as essential components of "their" degree experience. For this reason our support web sites make use of small amounts of animation and sound as well as other graphic "flourishes". It is important to note that most students access these sites from within the University and so access times are rarely an issue. It is only when students access the sites from home via a dial-up connection that download times become crucial, however with the advent of high speed domestic broadband internet connection this too will soon cease to be a problem.

Online and off-line resources:

The relationship between traditional off-line resources and new online provisions is an important one. Even with the wide proliferation of domestic PC's and internet connections it would be a mistake to assume that either a) all students have access to domestic PC and internet facilities and b) that all students are comfortable or even familiar with internet navigation.

At present all course critical information is distributed as hardcopy as well as being posted online. Until such time as it is reasonable to assume that all students have equal access to online facilities it is important not to privilege the more IT enabled.

It is interesting to note that a considerable level of "peer tutoring" takes place with respect to web literacy as students who are unfamiliar with the internet, but who wish to access the course support sites, make use of the expertise of other, more IT literate, students taking the same course. This is something that I have tried to encourage.

Student engagement:

Part of the point of developing these sites has been to demystify the net, to encourage students to make use of the web as a study tool. For this reason it is important not to make too much or too little of the web as a resource - it is a study tool just like the library, lectures and seminars. Students need to become web critical, to be able to engage with web sites selectively and intelligently. These in-house course support sites are intended to provide students both with an environment in which to develop critical web awareness and also a portal to examples of sound academic web sites hosted elsewhere.

Part of the aim of this project has been to encourage a culture where students check their email and their course web sites on a regular basis without being instructed to do so for a specific purpose. The inclusion of a "news" section within the sites is a useful incentive to regular checking as tutors can post a range of time sensitive information here - such as an alert to a relevant TV documentary being aired within a day or two of the news posting or the cancellation of the current week's class.

As well as passive information gathering via web support sites students are also encouraged to engage with the web in a more active way. So far we have kept this more active web participation to a minimum but there is plenty of room for development here. Currently students can engage actively with the sites in 3 ways.

  1. By finding the tutor information pages and clicking on the "email the tutor" link. This is the most simple and straightforward feed back method as it simply automates the sending of email to the tutor.
  2. Filling in an online student response form. This is also fairly simple as it presents the student with a multiple-choice form to complete.
  3. Submitting a written piece for inclusion in the site. Again this is not overly difficult as the student merely provides the tutor with a body of text that can be converted to HTML and included in the site at the tutor's discretion.

The Tools.

Throughout the course of this project's development an important distinction emerged which has played an important part in the selection of HTML development tools. This distinction is the one between a web page and a web site.

A web page can be any single page created as an information carrying resource. It need have no links to other pages and can - in theory - be as long as it needs to be to contain the necessary information. This report, for instance, could be converted to a web page of this type and look almost identical to its printed counterpart.

Most word-processing software, such as Microsoft's Word will take a standard document - including graphics - and save it as an HTML file that can be read by a web browser such as Netscape, Internet Explorer or Opera. For this reason anybody who can type up a document can create a web page. Indeed, this makes it very straight forward to produce both a printed handout and a web page version of the same handout as the same document is used for both purposes, they are simply saved in two different formats.

A web site is a rather more complex creation: as it includes links to a variety of pages and files, design and navigation issues become important factors.

Our course specific web sites, such as the one supporting the year 3 course "Religious Themes in Future Fiction" contain a number of pages each accessible from the main site menu. The menu page has to be both quick to load and intuitive to navigate - students must not be allowed to become frustrated because they cannot find a link to the information they need or because the menu system is too esoteric. There are some wonderfully elaborate and innovative web menu systems being produced in Macromedia's "Flash" for example which, while appropriate in some contexts, can be counter intuitive for the simple purpose of directing students to bodies of information.

For our web sites I opted for a simple structure of 3 frames:

Frame One runs across the top of the page and clearly presents the title of the course.

Frame Two runs down the left-hand side of the page and contains the menu for the whole site.

Frame Three is the main body of the page and it is here that all the information requested through the menu is displayed.

It is possible within this basic framework to convey clear information while at the same time indulging in some decorative flourishes. The title of the course in frame one can be presented as a "Flash" or GIF animation, the preliminary welcome information which greets the user in frame three, before they make a selection from the menu, can be quite informal - and in my view needs to be to put reluctant users at their ease. As long as the menu in frame two is clear and unambiguous it is possible, and desirable, to make the other frames interesting and engaging in a variety of ways.

There is a wide range of tools available for web page and site construction, some are free and easy to track down on either the internet or on magazine cover mounted CD's. Others are hidden away in applications that we might regularly use on a day to day basis such as Microsoft's "Word" and Netscape.

It is widely recognized that while there are a number of excellent professional web design packages on sale today the market leaders are Macromedia's suite of programs:

Dreamweaver - an all in one web design and maintenance package. At present the only web software you will ever really need. Dreamweaver will easily allow even a novice user to create a basic web site including frames, graphics and links to other sites and provides all the necessary functionality to upload the site from your Mac or PC to the host server.

Adobe's "Golive" has, with its most recent iteration Golive 6, has easily caught up with Dreamweaver offering similar and in some cases superior functionality.

Fireworks - a graphics package originally designed to allow the easy creation of web efficient images, this has now evolved into a complete web design solution with a strong graphic focus. I tend to create my various hubs in Fireworks.

Adobe's "Photoshop", "ImageReady" and "Illustrator" are every bit the equal to Fireworks but I tend to find that I have to use all three applications to do what Fireworks manages on its own.

Flash - a web animation package that, like Fireworks, has evolved into a total web site design solution but with an animation focus. Flash designed web sites are generally just that - flash :they look good and at their best provide an excellent example of what the web can be incorporating video and music clips along with animated and interactive menus. Unfortunately people can get rather carried away with Flash and many Flash intensive sites require considerable download time while delivering very little in terms of substance.

Once again a mention needs to be made of Adobe's equivalent application "LiveMotion" which with version 2 provides functionality so similar to Flash MX that it comes down to a matter of taste which application one chooses to use.

While the creation of simple web pages requires little more than the use of the free software mentioned above, design and maintenance of a number of actual sites soon necessitates the use of more powerful software such as Macromedia's. For the average member of staff who wants nothing more than to place a web version of their weekly handouts on the web "Word's" "save as web page" option (found in the "File" menu) is more than sufficient - trying to get everyone to use Dreamweaver is, in my view, unnecessary overkill. However, for those running and maintaining whole sites the proper tools for the job make an enormous difference in what can be achieved and in the time it takes to achieve it. Macromedia offer an educational discount for both teachers and students.

Student Response:

I have found that students of all ages respond enthusiastically to web sites designed specifically in support of their own courses of study. Canvassing 3rd year theology students in their final semester I found that all of them had made use of the web sites over their three years with us - many had found and used the sites during their first year while others had grown into their use over time. All 40 students in my year 3 "Religious Themes in Future Fiction" class - a class containing students from a variety of programme areas not just theologians - visited the support site regularly and saw it as a valuable resource.

Directing students to external web sites is of course a very valuable exercise but the psychological benefits to the student of providing a "virtual space" of their own cannot be overlooked. In my experience students are much more likely to follow up links to other sites and other forms of online information if they can be accessed via a single organizing site tailored to their particular course of study. Such a resource is by no means a difficult task to set-up - I, for example, am self-taught - and the benefits to both students and tutors are considerable. Students have easy access, from institutional and home computers, to materials that previously were either completely unavailable to them or could only be distributed via a tutor at pre-set times; the tutor has the facility to create an organic teaching and learning resource that is both flexible, accessible and potentially completely up to date. The latter point is of course dependent upon a commitment to maintain and update the sites regularly - in my view there is little that looks more out of date than an out of date web site.

My initial concern that non-IT-literate students might be disadvantaged with regard to web based learning support has not been confirmed. Students seem to quickly become aware of the importance of the resource and are prepared to put in the small amount of effort necessary to access it. While the University has trained IT support staff who are available to help students gain a familiarity with web technology, for the most part it is informal peer tutoring which appears to resolve this problem with the IT literate providing help and support to their less IT familiar peers.

Part 2: Issues & Considerations.

In the course of constructing our various web pages and sites a number of issues needed to be addressed and problems solved.

The issue of data gathering proved to be of primary importance. Trying to construct a web page "cold" without any sense of its actual content is, to my mind, a serious error. Once can spend a great deal of time creating interesting layouts and visual effects but without real content the site is simply an ornament.

Text:

Preparing text for web presentation is a fairly straight forward affair. Most of the text I wanted to display through our web sites already existed in digital form as word processed documents. Transferring a Microsoft Word document to html format for display via a web browser can be easily achieved in one of two ways, each with their own particular advantages and disadvantages. The most straight forward way to prepare a Word document for online use is to make use of Word's "Save As Web Pages" option. This approach has the advantage of actually creating a complete web page ready for use in one go - test.doc for example is resaved as test.html and this file can be loaded directly into a web browser for display in more or less the same form as it's printed counterpart. The disadvantage of this approach is that Microsoft web production tools, such as Word and Front Page, are notorious for producing bloated files - files containing unnecessary extra code which slows down access time - and utilizing proprietary html tags which only run properly under Internet Explorer. Microsoft have been severely criticised by the World Wide Wed Consortium for this latter practice. Conveniently Macromedia's Dreamweaver contains a useful function which strips out extraneous Microsoft code from html files making them more efficient and standardising the tags. The main tasks carried out by accessing this option are that Dreamweaver removes all Word specific html tags, it corrects modifications made using Cascading Style Sheets, it removes redundant text formatting, it modifies non-standard nested tags and corrects formatting commands such as indents, line breaks and upper and lower case selection. Dreamweaver also removes unnecessary Meta tags and XML tags from Microsoft generated code.

The other way of importing text into a web page is simply to save your document as plain text or ASCII - this is a standard no frills text format which just preserves alphanumeric characters and is interchangeable across all applications and computer platforms - an ASCII text file saved on a Windows PC under MS Word will be happily read by Fireworks running on an Apple Mac for example. The price one pays for this cross application/platforms flexibility is loss of formatting, in other words no underlining, emboldening, italics and fancy fonts.

For small bodies of text I found it perfectly straight forward to make use of ASCII text and add the necessary formatting once I had imported it into Dreamweaver. This is particularly useful when you already have a web page under construction and simply want to add a paragraph of text to it or if you wish to insert a body of text straight into a layer. Where I wished to convert an entire handout to html format I made use of Words "save as web page" option to create the entire page then ran Dreamweaver's clean up Word Html option. It is worth noting at this point that while I have had no cause to use this capacity to date Dreamweaver can also import tabular data from packages such as Excel, Access, 4D, Emacs and Oracle.

Images:

Placing images within a web site is not a particularly problematic issue once the basic concerns over file size, image quality and bandwidth are taken in to consideration.

The most important first factor to consider is the most appropriate file format. One can dismiss pretty well straight away any non-lossy format such as BMP - the common bitmap format favoured by Wintel PC's. As with all online resources speed of access is vital and large image files will inevitably reduce the download speed of your site. To address this problem the JPEG image format was developed. Images saved as "jpegs" undergo a compression process which dramatically reduces the size of the file with little if any noticeable difference in image quality. For example:

A 2400 X1800 image scanned at 72 X 72 ppi and using over 16 million colour can come out as a BMP of over 12megs while the same image saved in jpeg format at 50% compression comes out at just under 640k.

While I tend to use Adobe "Photoshop" and the Macintosh specific application "Graphic Converter" to do this kind of work all modern graphic and image manipulation packages will offer a "save as jpeg" option. Indeed, all Windows based PC's tend to come with some imaging software already installed - normally found under "programs" and "accessories" under the start button - and this will certainly do the job. Apple Mac owners should download "Graphic Converter" which is free to use - a £20 registration fee can be paid to the author - and which does almost everything I need an image manipulation application to do.

When saving as a jpeg you are give the option as to how compressed you want the file to be, there is, however, a trade off here. Compress the file a lot and you will get a very small file but the image quality will suffer. I have found that for most purposes a 50% compression is, as you might expect, a good middle ground. For some images where detail is not an issue 40% can also work perfectly well.

For images that don't require millions of colours - non-photographic images such as charts, cartoons, clip art and the like the GIF format is generally a good choice. This is another format developed for fast online transmission. The difference between JPEG and GIF is that while JPEG's can handle millions of colours and offers a choice of compression rates GIFS can only handle up to 256 colours and is not as flexible in its compression options. Quite often 256 colours are more than enough particularly for presenting buttons, icons and other navigation images on a site - indeed, even small photographic images can look perfectly presentable with this 256 colour palette. Macromedia's "Fireworks" application is excellent at handling GIFS and provides a host of option which allows you to optimise GIF images by, for example, reducing the number of colours contained in the file to just the ones being used - why save 256 colours worth of data when you are only using 2 of them?

It is also possible to produce basic animations using the anim-GIF format which essentially plays a series of GIF images in quick succession in the manner of an old fashioned flick book. Most animated buttons and icons found on web sites make use of this technique which is easy to implement and generally efficient on file size.

It is worth noting that most web sites still default to an 800 X 600 screen on the assumption that a lot of people are still using 15inch monitors that only really display clearly at this resolution. For this reason our example image of 2400 X 1800 is monstrously over large and can be scaled down to at least a quarter of its size thus reducing the file size further. I have found that it is currently a good idea to design ones pages around the 800 X 600 screen resolution assumption even though I work in 1280 X 1024. If I worked to my own screen resolution 800 X 600 users could be forced to do a great deal of irritating horizontal scrolling to see the both edges of the page. Also, working in higher screen resolutions encourages you to use large font sizes which look far too big under 800 X 600. All web design tool will allow you to easily lock you design area to a particular screen resolution irrespective of how large your actual screen resolution might be.

Actually gathering image data for web sites has become easier since flatbed scanners and digital cameras have come down so much in price.

Most computer monitors have a resolution of less than 100dpi so there is very little point in producing scanned images for onscreen presentation that goes above this value. 72dpi seems to be the best value to go for - indeed my Fuji digital camera defaults to producing images at this resolution. Setting you scanning hardware to go beyond 72dpi will only be valuable if you plan to produce hardcopy also from the image, as far as web site design is concerned you are simply producing an unnecessarily bloated file which will not affect the quality of the image on screen.

An increasingly popular image format is that produced by Macromedia's "Flash" application - .SWF files. Flash is an animation application which makes use of vector graphics - a far more efficient format than traditional bitmaps and thus ideal for web work. While I limited my use of Flash, in the main, to minor decorative animations of page titles it is possible to create an entire site in Flash. Such sites tend to provide a very media rich online experience but are dependent upon the right plug-in being installed into ones' web browser to work - see below under Browsers.

Audio & Video:

As previously mentioned I have not made extensive use of audio and video within our web sites due principally to issues of speed of access - although the issue of plug-ins is again relevant - see below under Browsers.

The most straight forward format for adding sound to a site is in the form of a .wav file. Wav is the most common sound format found on PC's - when a PC makes a noise at you when you open a file or do something wrong it is generally playing a wav file. Wav files are not very efficient for online delivery and so it is best to keep the files small and limit yourself to providing basic audio response to mouse clicks - pings, bleeps and bongs rather than speeches and whole music tracks. These small audio cues can be very helpful in letting the user know that they have clicked onto an interactive button. Unfortunately as our University computer facilities have a policy of shutting down PC's speakers so as to avoid noise in study areas sound on our web sites are pretty much redundant and just consume bandwidth.

There is a sound equivalent to the compressed static image JPEG and this is known as MPEG audio or MP3. MP3's are an extremely efficient way of providing high quality sound files over the internet - indeed the music industry has become very concerned over this as pirate copies of entire music CD's can be placed online and downloaded with comparative ease even over a standard 56k modem link. An average music track of between 3 to 4 minutes can take as little as 10 minutes to download and sound almost exactly like the original CD version when played back. MP3's, as with JPEG's can be compressed to a greater or lesser degree with an attendant affect upon sound quality. A song of 3.5 minutes converted to an MP3 at a bit rate of 128kbps and a sample rate of 44kHz will play back with no obvious distortion and produce a file of just over 3MB. A file this size could be downloaded fairly quickly - particularly over an intranet or LAN - but would be a burden if linked to a web site for automatic playback. However, reducing the bit and sample rates by as much as a quarter would dramatically reduce the size of the file and while distorting the sound would still allow it to be heard clearly enough. With speech the issue is less critical and it would be perfectly feasible to record a 1 or 2 minute talk and reduce it to a very small MP3 which could be activated by clicking on a button on a given site. This would be particularly useful for helping students with pronunciation of technical terms or foreign words for example. An audio plug-in such as RealPlayer or Quicktime is required for a browser to play MP3 files.

Both PC's and Mac's come with MP3 players and encoders preinstalled - as a Mac user I make use of Apples excellent "ITunes" but there are many shareware MP3 applications available for free download, the most well known PC version being WinAmp.

The video equivalet of JPEG is MPEG video. Once again this is a compressed data format which is far more efficient for web work than, for example, avi files. During the course of this current web design project I have not made use of online video but plan to experiment more fully with it in the future. The basic issue to be addressed is weather to opt for complete download or streamed access. The former approach is where one provides the user with a link to a video file in either MPEG or MOV format which has to be downloaded in its entirety before being played via a utility such as Quicktime or Media Player. The latter approach begins the download but starts playing it from a memory buffer almost immediately - RealPlayer is a popular streamed audio and video utility. The advantage of streamed media is that you get to see and hear the data very quickly, the disadvantage is that the files have to be extremely compressed, you have to have an internet connection which maintains a steady and reliable download speed to maintain data within the playback buffer and the users machine needs to be fast enough to decode the compressed data and playback without interruption.

Browsers:

While Microsoft's "Internet Explorer" appears to be the browser of choice for both Windows and Macintosh users there are a number of alternatives that need to be kept in mind when considering how a particular site might appear to the end user.

The advantage in using Internet Explorer is that it is safe to assume that it will support all current web technologies if not natively then via "plug-ins". A plug-in is an additional module installed on top of a browser adding extra functionality. The most popular and useful plug-in is one that enables a browser to play animations created in Macromedia's Flash application. Unfortunately, while there are a number of very efficient browsers currently under development - "Opera" and "ICab" being two of the most notable - it is only really Internet Explorer and Netscape - in their 5th and 6th iterations respectively - that are kept up to date with their plug-ins. All our institutional computers have IE and Netscape installed and thus there was no problem in my making use of Flash animation files (.SWF files) nor would there be any problem in the use of interactive "Shockwave" files such as produced by "Director". However, if one wished to render ones sites "browser proof" such that they would function under any browser irrespective of the presence of third party plug-ins then it is best to avoid the use of such files restricting oneself to basic elements such as JPEGS, GIFS and plain text. Indeed, a site can function perfectly well and look very professional without the use of high-end applications which require browsers to be plug-in enabled.

Netscape, currently at version 6 has lost a great deal of ground to Internet Explorer over the years but is still really the only browser that can match IE feature for feature. Up until version 6 there was an annoying bug in Netscape that prevented it from resizing layers properly. Using layers is, to my mind, the best way of producing web sites where all the elements are exactly where you want them to be as they allow for very precise positioning of bodies of text and images - layers can not only be positioned but stacked so that certain elements appear in front of our behind others. Dreamweaver offers a JavaScript fix for the Netscape bug.

Access:

Once a set of pages have been created actually making them available to students requires that they be uploaded to a publicly accessible location on an institutional server. Almost all academics working in universities today will have an account on the institutional server - if for no other reason than to send and receive email. It is a relatively simple matter for an institutions computer services department to create a folder within a member of staffs account which allows all files within it to readable by anyone without compromising the security of ones whole account. On a UNIX server the folder has to be called "public_html" and the simple command "chmod.-R.755.public-html" makes it accessible in read only form. All web design application such as Dreamweaver and Golive have built in FTP capabilities which allow you to easily login and upload data to you public folder.

The success of this project to date has only strengthened my belief in the web as another powerful and useful tool for tutors working in higher education. Over the coming years I plan to continue developing this project, expanding it into the area of online distance learning where the potential for providing CPD style material is immense. As high speed broadband internet access becomes the norm the potential for providing online virtual class room experiences becomes a real possibility with students without easy access to a local university taking part in campus based classroom activities in a fully interactive way. At present the net is still a fairly passive experience. Broadband and efficiently compressed streamed video and audio of at least television quality will change all of that and, I believe, redefine the nature, identity and function of educational institutions.

This page was originally on the website of The Subject Centre for Philosophical and Religious Studies. It was transfered here following the closure of the Subject Centre at the end of 2011.

 

-
The British Association for the Study of Religions
The Religious Studies Project