Weblogs & Websites : a symbiotic relationship

The course I teach is called Information Technology & Society and is in the Management programme at Earlham College. The course is required for the Management major and since there is a cap of 30 students (there are 30 workstations in the computer labs that we use) the course is often over subscribed. For a number of years I have created a web site for the course and in 2003 I used the Moveable Type blogging system for student input together with a course web site. In this article I outline how the web site and blogs worked together and what sort of student outcomes resulted. I conclude with a comparison of this approach with a more conventional Course Management System.

• Single focal point for all activities:
  • in-class - computer lab exercises, lectures, background material, annotated links
  • out of class- homework assignments, project work, reading.
• Flexible - you can do what you want
• Extensible - you can add at any time
• Easy to use - students need no explanation in how to use the web.
• Open - others can benefit from your expertise.

Disadvantages

1. To make a good looking site you need have expertise in web design
• learning curve for html & styles
2. Large overhead in time to design & create the site. Need to tweak as you go along.
3. Everything is public :
• posting grades is problematic since all the students can see each other's grades.
• making copyrighted articles available
• open to spam harvesting
4. Handling student input - the web is read only.

So why bother?

• Pedagogically enhancing to orient a course such as Information Technology & Society around a web site
• Teacher needs to be fluent in Info Tech in order to teach it - what better way to gain this than by creating the course web site?
• Students gain a better appreciation of the issues inherent in Information Technology - the Interweb ceases to be thought of as a 'black box'.

Major problem

• Since the web is read only, how do you manage all the student's assignments, web pages, files, etc that you want them to do?
• In an earlier version of the course I used email attachments to do this.
  However, managing all the incoming files (you need to save the attached file into another folder in order to grade) is a pain.
  • Announcements to the whole class sent out via a class mailing list.
  • Grades have to be sent individually by email
• Class becomes web & email based.
  • Time wasted on managing student submissions, responses and grades
• What was needed was a simple way for students to make submissions (inline, files, web URLs), for the teacher to be able to comment on these, and, if possible, for students to share material in a group context.

As I wrote in my "All you ever wanted to know about blogs" website the NITLE Newsletter for 2003 had an excellent article on Weblogs in Education and so, having experimented with the Moveable Type I persuaded the Unix system manager at Earlham to install it and he hacked it to make it work with Earlham's authentication system.

How it worked : pedagogy

Unlike other approaches where the instructor's blog is the main focus of the course and students make their submissions via the comments feature, for example, Elizabeth Lawley's Introduction to Multimedia class at RIT¹ I decided that each student would have their own blog site and that these would be accessed from a course web site. In addition, since Moveable Type accomodated multiple authors for a blog student groups were able to share a single group blog and post their group work in that location.

• The procedure to setup and configure a Moveable Type blog was somewhat arcane so that a whole class session was taken up early in the course to accomplish this². The student's personal weblogs were located in their own web space (Homes/www) , group blogs were located in the group leader's web space.
  Initially confusing was that the page to make a blog entry was at a separate location to the student's own blog pages, however, students soon figured it out with the help of their peers.
• Students learned how to upload files by means of a class exercise where they had to figure out the process and write a short 'how to' guide (eg Sept 11th entry in Zaqloub's blog). They were then asked to grade each other's efforts³
• Most blog entries were inline text with links to web pages they had created. Graphic images, Powerpoint presentations and Excel spreadsheets were also uploaded. There were problems with one class assignment that asked for styles to be pasted in ; here the styles disappeared in the display of the blog since the code was interpreted as html. The solution was to place the <style> declarations within <pre> ... </pre> tags .
• Classwork assignments generally involved an online exercise together with reflections on the process. The questions were interspersed through the exercise to keep them in context and they were also gathered together at the end of the page to be copied into the student's blog entry. The instructions were also printed out for the students since they found it easier to follow and make notes on printed instructions than to follow instructions on the screen. For example, see Graphics with HTML classwork and Sarah's blog entry for this.
• The Textile formatting option allowed for easy formatting of web URLs and especially tables. I was able to ask for a homework response in table format before we had covered html tables (see Marianne's blog for a good homework entry).
• Homework assignments were answered via the student's blog; each blog entry was dated and timed and although it was technically feasible to manually enter a false date no student ever did this.
  Similarly, although students could visit each other's blogs and theoretically copy another student's homework entry this would be really easy to spot and there was never any problem with plagiarism.

Group blogs

• Group blogs were used for project work. Students were allocated to different groups and one student per group hosted the group blog with all the others in the group being co-authors.
  The Confused Group (sic) blog shows entries from all the members, posting of project URLS, website stylesheet and the URL of the final website.
  The website projects were also made into presentations which were posted into the group blog.

Use of RSS to keep track of blog entries

RSS feed from Digital Music project blog showing the two latest blog entries

• As the semester progressed it became difficult to keep track of progress made on project work. Since each of the blogs automatically produced an RSS feed when I found a script to suck an RSS feed into a web page I implemented it to display the latest entries from the project blogs.
  This allowed me to monitor group projects that were not on schedule.

Functions

1. Announcements to the whole class.
   This was the main 'home page' for the course where course activities were posted. At intervals the announcement headings were 'downgraded' and archived to an archived announcements page.

2. Schedule
   This was the focus page for the course. Here the student could find the syllabus in a calendar format for the whole semester. Here are links to:

   • class assignments,
     • general instructions,
     • background resources,
   • homework assignments (when assignment set & when due)

3. Homework / Quiz
   This was a place where students could find a list of all homework assignments and when they were due.

4. Grades
   Student work posted to the blog was graded in an Excel spreadsheet. A random number was assigned to each student and was emailed to them. The assignment worksheets were condensed into a single sheet and exported into a table which was published in the grades section. Since this involved a good deal of work, I often accumulated several assignments into a single table.

5. Student blogs
   These were linked from a page in the Projects / Blogs section. Each student blog had a link on this page so that both instructor and student could view all the blog sites. Keeping track of whether homework assignments had been completed proved rather tedious and the RRS feed to html solution (above) meant that I could check the latest blog entries for the whole class through a single page. Since students could also view each other's blog sites I was reluctant to post grades and commentary into the comment field of the blog.

6. Project site & project blogs
   This was the focal point for the group work that the students engaged in. The 'latest news from project blogs' section was an RSS feed from the group blogs and this proved very useful to keep track of progress on project web sites and powerpoint presentations. Links to student blog sites wer also located on this page.
   

7. Basic instructions/help & blog entry point
   This section contained items such as setting up & using Dreamweaver, uploading a file into your blog, viewing your page on the web, screen capture and save and other sundry 'how tos'. A link to Earlham's Moveable Type login page was also located in this section.

8. Background resources
   This tended to be a dumping ground for material that didn't fit elsewhere; the syllabus, background material such as stylesheet guides and resources, and class mugshots. Links to exam questions and answers from the previous year was also provided.

Overview of design features

The course web site located at http://www.earlham.edu/~markp/mgmt_2003 was designed with the W3C standards in mind but these were not rigorously adhered to. In particular while I attempted to adhere to W3C standards for XHMTL I did not validate all the pages against the W3C validation suite ; I was more concerned to produce a fast loading site that was easy to navigate than in the minutiae of W3C validation⁵.

The site design block diagram shows 3 levels of the site (home page, level 2 & level 3), 6 functional sections (Schedule, Homework, Grades, Class Projects / Blogs, Instructions, Resources) and 3 sets of page designs. Pages were designed in a combination of styled boxes and styled tables with a view to displaying course information in a logical & attractive way on screen & in print and with a view to enabling the user to navigate from one page to any other within three clicks. Designs were grouped as follows:

1. 

   Level 2 design layout showing major <div> blocks

   Home page & level 2 - had a left column menu with the major functional sections visible and also subsections for what were expected to be the most used links. The content in the main box was often shorter than the menus⁶. The header box displayed the name of the course and the functional section in large type so that the user was always aware of where he was. The MGMT110 clickable link in the top left brought one back to the Announcements 'home'. This was present on every page. Also present was a 'breadcrumb bar' which served both as an orientation help and to navgate among related pages.

2. 

   Schedule design layout showing style labelling of table columns

   The Schedule (level 2) had it's own layout since it was basically one large styled table with columns for dates of class meeting, work due, class topic and work assigned. Alternate rows were colored in contrasting colors to assist in following the data across the table. Along the top underneath the breadcrumbs was a menu bar with links to the major functional sections. Most of the content of the course was linked to from this page.

3. 

   Level 3 design layout showing styled margin and navigation links via breadcrumb bar

   At the level of classwork or homework content (level 3) the upper heading showed the student user whether this was a classwork or homework page and what week it was for, and the lower, larger, heading displayed the topic of the content. Since each class session could have several pages associated with it (for example week 4: Lists and Links had five pages; Lists classwork, Links classwork, demo page of codes (pdf), demo page as html, and a link to Dreamweaver Basics (in Instructions)) these immediate links were placed as clickable links in the breadcrumbs bar. This meant that students go navigate straight to the supporting pages without having to go back up to the schedule. The content itself was formatted as a table with the subheadings in the margin.

Three sets of templates (in Macromedia Dreamweaver) were used to create the all the pages (home page (announcements), level 2 & level 3; since the schedule was a unique page I didn't need a separate template for that) so that changes in the fixed portion of the template (navigation menu items) could quickly and easily be replicated throughout the site. In addition, the heirarcy of directories containing the pages followed the three level visual layout of the site so that all the pages in a single functional area were located in the same directory. Under the schedule directory each individual week had it's own folder where all that week's material was collected. Graphics were pooled in a single folder with subdirectories under it as the occassion demanded.

• The Free Assessment Summary Tool was used as the online evaluation instrument. 17 questions which probed the student's views of different aspects of the course were asked, responses were downloaded into an Excel spreadsheet and charts of responses were created. Written responses were also recorded. 28 out of 30 students in the class responded.

• 

  Q8. Uploading all work into your blog was a great way of working?

  Most of the students seemed to enjoy using their blog as a focus for their creative activities. When asked if they agreed that "uploading all you work into your blog was a great way of working" over 80% somewhat or strongly agreed with the proposition.

  (Although individual responses were not tracked, it's likely that the students who did not perform well in the course were those who responded negatively).
  

• 

  Q7 The group blog was useful for working as a team?

  Moreover, the group blog was seen as useful for working as a team with a whopping 93% somewhat or strongly agreeing with the proposition. So we can see evidence of helpful pedagogy here.
  

• 

  Q10. Useful to have course material on web site?

  The effort involved in making the course material available on the course web site was vindicated by the response to the question "Was it useful for you to have all the course material available on the class web site?". 75% of the class found it very useful and 21% found it useful; a rewarding response.
  

• 

  Q9. Use of web site outside of class time?

  However, the pattern of usage outside class time suggested that students only used the web site when they were told to. Thus, when asked "How frequently do you use the course web site out of class time", 92% only used it when doing an assignment or checking for grades, that is, when the course explicitly called for the student to refer to the web site.

  Thus it seems that suggestions, exhortations, and instructions such as on this announcments page fell on stony ground since they would not be seen unless the student was starting to do an assignment or checking for grades ⁴.
  

• Pedagogic outcomes from use of blogs

  Students seemed to become comfortable very quickly with using blogs for their classwork & homework. Posting to a blog entry was convenient, uploading graphics and other files such as Powerpoint presentations and Excel spreadsheets was straightforward. URL links were also easy to implement. The only problem occurred when I asked them to upload a set of styles which were interpreted by the blog instead of being displayed - encasing the codes in <pre> tags solved that problem. It was possible for students to edit the date on their postings to cheat but in practice they didn't do this.

  Moreover blogs are intimately related to the web so that when the students posted to their blog they were in effect posting to a web site.

  The group blog as a focus for shared group work was particularly successful since each contributor was a peer in the system. It removed a lot of stumbling blocks to sharing of information (for example, not having access to network drives in the dorm room, using a Mac that only has Appleworks, living in a house that only has a dialup internet connection). And although the lowest common denominator, the web browser, was the tool used nevertheless the resulting blog site looked good and the whole blogging process had an indefinable 'cool' feel about it.

• Grading & commenting on student work

  Although it was possible to enter comments into the student's individual blogs I was reluctant to do this since students could easily view each other's blogs. However, in practice, students didn't view each other's blogs and indeed they only looked at their own blog after they had made an entry.
  Had I encouraged student groups to comment on each other's work this might have turned out differently.

• RSS to html feed

  Had I discovered this technique earlier in the semester it would have made a huge difference with keeping track of student's postings.

• Course Web Site

  The course web site was absolutely essential if only to enable students to locate the blog entry page and look at their own blogs. Creating a course web site allowed the ultimate in flexibility; when I discovered the html to RSS system it was straightforward to implement it and use it inside the site. Using Dreamweaver templates meant that the process of adding pages and maintaining links was not onerous or error ridden. Designing the site was a useful learning process and the internal navigation (side menu, top menu & breadcrumbs) was on the whole successful (but where would look to find the class mugshots? — answer: linked from the Resources page). The problems were subtle ones of how to chunk up the information to be presented and where to locate the resulting page; for example background information on styles and stylesheets was located in classwork : week 7 (under Schedule) rather than in Resources. This made it easy to find when students were doing the classwork or homework but difficult to discover when reviewing for an exam.

• Alternatives : Course Management Systems

  While I was teaching this course I was also involved in a small 1 credit course for freshmen where I used the CHEF course management system. I became acutely aware that what I was doing with my web site was effectively course management. The similarities were obvious - see overview of course management. Two major differences were evident:

  1. Since course management systems are by definition integrated with some sort of authentication mechanism one can ensure the privacy of the course. This means that activities that require privacy such as distribution of grades and posting of copyrighted resources can be easily achieved. But this does come at a price — content that might otherwise be made available to others teaching in the field is now hidden behind a login wall. Moreover, courses now become parasitic on the web rather than symbiotic - other web resources are linked to but nothing is made public in return. However, the openness of the student's blogs has had an unforseen side effect and that is the proliferation of 'comment spam'. This noxious effect is where spammers exploit open comments to fill them with spam messages.
  2. The second difference is more subtle. Course management systems are prefabricated and thus it is much easier to get started than having to design and construct a web site to support blogging activity. However, CMSes tend to be document oriented rather than web oriented, that is, the unspoken implication of 'upload a file' is that the 'file' will be a Word document (see my relevant Management 110 blog entry). A minimalist web site & blog may well be a good compromise.

http://www.earlham.edu/~markp/mgmt_2003

Information Technology and Society (MGMT 110) class website for 2003

http://www.earlham.edu/~markp/blogs/edu.htm

All you ever wanted to know about Blogs but were afraid to ask. A good general introduction to blogs and blogging albeit somewhat dated (Spring 2003).

http://newsletter.nitle.org/v2_n1_winter2003/features_weblogs.php

Weblogs in Education: Bringing the World to the Liberal Arts Classroom. NITLE Newsletter of winter 2003

http://www.it.rit.edu/%7Eell/320/320-041/

Prof Elizabeth Lawley's Introduction to Multimedia (Fall 2004) course at RIT

http://www.earlham.edu/%7Esaidza/blog/archives/2003_09.html

Zaqloub Said's blog - September entries

http://www.earlham.edu/%7Emaminal/blog/archives/2003_10.html

Ali Mamina's blog - October entries

http://www.earlham.edu/%7Eharrisa1/blog/archives/2003_10.html

Sarah Harrison's blog - October entries

http://www.earlham.edu/%7Emoussma/blog/archives/2003_09.html

Marianne Moussa's blog - September entries

http://www.earlham.edu/%7Emaminal/project/archives/2003_10.html

The Confused group's (sic) blog - October entries

http://textism.com/tools/textile/

Textile home

http://jade.mcli.dist.maricopa.edu/feed/rss2js2003.html

RSS feeds via Javascript

http://validator.w3.org/

W3C html & style validation service

http://www.getfast.ca/

Free Assessment Summary Tool for performing annonymous online surveys.

1. On the Basic Web Design Principles page you can see that there are 24 comments on this exercise.

2. The process of setting up the folders for the blog contents and configuring the M.T. system to point to these proved to be prone to user error even with explicit and detailed instructions. Particularly dangerous were mistakes made in specifying the location of the blog archives since such mistakes tended not to surface for some time after the blog had been used.

3. The process of allocating who was to grade which blog was time consuming but the major problem was that many students did not complete the classwork or the homework assignment on time. I have subsequently found that the 'workshop' module of Moodle provides a better approach.

4. This is why the "News forum" of the Moodle CMS, which is used for course announcements, is so effective; here, all the students in the course are 'subscribed' to the discussion forum so that when the teacher posts an announcement into the forum it is emailed to everyone. Thus students cannot ignore what is going on outside of class time.

5. In an effort to ensure that pages rendered the same in Internet Explorer v6 used at the college as well as Mozilla Firefox (my development browser of choice) I used a 'strict' Doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">) where perhaps an XHTML Transitional Doctype might have allowed my site to have validated with W3C more easily.

6. Collapsing submenus would have prevented the situation where the right hand menu was longer than the main content.