Creating Web Documents: A case study on teaching a technical course at a Liberal Arts college

Jeanine Meyer & Peter Ohring

Math/Computer Science & New Media

Purchase College/SUNY

Abstract: This paper describes an introductory course on web site design, including HTML, JavaScript and other topics, taught at Purchase College/SUNY. The course is a requirement for the New Media major, can fulfill a requirement for math/computer science studies and is available as a general elective for students across the college. The classroom instruction is a hybrid format: twice a week in a computer lab with mandatory postings to an on-line discussion board forums plus supplemental content supplied using a commercial instructional tool (CourseInfo). The paper gives the background, course structure and content for the course. Findings from pre- and post course surveys are described as well as observations made on student work (accessible using http://newmedia.purchase.edu/~mconry/studentpages). Lastly, we reflect on several critical issues, including comparing our experience with this course and others we have taught, use of special editors versus NotePad for HTML and JavaScript, the benefits and problems of the on-line support tool, handling policy concerns, and, finally, the advantages of the mixed or hybrid model of classroom and on-line instruction.

Background

Purchase College is a State University of New York school that is both a liberal arts college and a collection of conservatories (Music, Dance, Art and Design, and Theatre Arts and Film). The conservatories are somewhat more selective than the Liberal Arts and Sciences College, which is made up of Humanities, Social Science and Natural Science Divisions. The College also has a Continuing Education division, serving adult, part-time students.

The College offers a math/computer science major in the Natural Sciences division. In addition, the Music, Art and Design and the Theatre Arts and Film conservatories each offer courses involving computer technology. Two years ago, the college initiated an interdisciplinary major named New Media. Creating Web Documents, is one of a set of required courses for the first two years of this major:

·  Computer Science I or MAT 1420/Programming Games in Visual Basic

·  Creating Web Documents

·  Studio Composition I and Studio Composition II

·  Shooting and Editing Digital Video

·  Basic Mac for Visual Artists

·  Photography I

·  Introduction to Media, Society, and the Arts and Performing Arts in Cross-Cultural Perspective

The general objective of the Creating Web Documents course is to provide students the background to create web pages using basic HTML and simple JavaScript and to use tools such as Photo Shop and/or Paint Shop Pro to produce and modify images, image maps, image slices and animated gifs. The subject matter is not exclusively technical. We include discussion of purpose, organization and aesthetics of Web sites.

Two other courses have been designed to follow this first course: Creating Dynamic Web Documents, with more JavaScript as well as Flash and Creating Data Bases for Web Applications, focusing on the use of middleware such as Active Server Pages and PHP. In addition, the New Media students are required to prepare a portfolio of work, primarily in the form of a Web site (lengthy video and music pieces are presented on tape or CD) for review to determine if they can continue, ‘get advanced standing’ in the major. In their sophomore year, they register and get credit for the Advanced Standing workshop for this purpose.

The authors have taught other courses with similar content. These include courses aimed at majors in computing (Multimedia Systems) and literature courses in which students create web pages in place of standard essays (for example, Beowulf to Lear: Text, Image and Hypertext). The background of the students and the context of the course together make a difference in how the course is taught and the outcomes, which we will indicate below.

The Creating Web Documents course has proved popular. In addition to the New Media majors, students in math/computer science, continuing education students, students from the conservatories, and an assortment of students from the rest of the college have all enrolled in the course. We cap enrollment at 25 in order to fit in the designated computer classroom with five slots reserved for continuing education students. It appears that two sections need to be offered each semester. This paper will focus on one section, taught by the first author in Spring 2001, with some discussion on all course offerings.

Course Content

Course requirements & grade allocation

The course objectives are for students to gain technical skills in the creation of Web pages, with attention to aesthetic, psychological and ethical issues concerning the Web as a communication medium. The course is primarily project based. The first project is to produce a Web page exposition on a “best” and a “worst” site. It must have links to these sites, a paragraph of exposition on each, and an image from each. The second and third projects are on topics of the students’ choice. Projects need to have a purpose and a defined target audience. The choice must be described in an on-line posting to which the teacher replies with approval and comments. The second project must contain the following technical features: at least one use of frames and/or tables; image map or image slicing; animated gif; mailto tag. The third project must also contain frames and/or tables, if these were not used in the second project; use of JavaScript; a form (submission action e-mail to oneself); Meta keyword tag; at least one cascading style rule.

Students are permitted to continue building on the second project for the third project. This seemed especially appropriate in cases in which students had definite goals for their work independent of the class. Students were also permitted to work in teams. Only two pairs took up this offer and the results were problematic in both cases. In one situation, the two students simply did not put in much effort. In the other, each student produced a considerable amount of work but then had difficulties putting it all together.

The students are also required to post to an on-line discussion forum on the following topics:

1.  report on experiences using different computers and different browsers viewing the same sites

2.  identify, report and give reasoned opinion on an ethical or legal issue involving the Web (for example, Napster)

3.  report on good and bad uses of multimedia (that is, sound, animation and/or video)

4.  compare the use of a special tool (for example, Homesite) with hand coding of HTML using NotePad

5.  compare two or more search engines

6.  repeat exercise on identifying good and bad sites. Indicate if your attitudes have changed.

We give two closed book quizzes. The grade allocation is the following:

Project I / 10
Project II / 20
Project III / 25
Midterm quiz / 10
Final quiz / 20
Postings / 15

Form of instruction

The two authors have employed different forms of instruction:

The first author’s approach is mainly lecture/demonstration generally using PowerPoint charts followed by work sessions. The class takes place in a computer classroom where, typically, students each have their own computer. The faculty instructor and a student teaching assistant circulate to help individual students. The screen of the teacher’s workstation can be projected on the wall.

Use is also made of an on-line instructional system called CourseInfo. The announcement feature of CourseInfo is used regularly to inform and remind students of the schedule and assignments. The Course Information section holds a detailed schedule, which is modified as necessary. The schedule contains hyperlinks to the HTML version of PowerPoint charts for the lecture/demonstrations.

Several students put these up on their own computer during class because the charts were easier to read than on the big screen, the students could go back and forth between examples and explanations, the teacher had written comments in the notes section, and the students could copy and paste the examples.

We use the Course Document section to upload notes on topics as needed (for example, more JavaScript examples, how to use ws-ftp). The e-mail utility makes it easy to e-mail the whole class or selected students. It is the responsibility of the student to make sure the e-mail address ‘in’ CourseInfo is correct and a couple of students failed to do this, missing out on the communication.

As indicated above, students were required to make postings to defined Discussion Forums on CourseInfo. The teacher usually responded to postings. There were some responses student to student, mainly on the legal/ethical issue topics such as Napster, but we would like to have more.

The second author divided the class time into a relatively short lecture/discussion in a classroom equipped with a computer/projector and a long self-paced lab in a computer classroom. The lecture is accompanied by Power Point like web pages that incorporate topics being presented. These pages are accessible to students outside of class from the class web site (http://zephyr.ns.purchase.edu/math/faculty/ohring/courses/web-docs/lectures.html.) The self-paced labs are guided by worksheets that are accessible from the course web site (http://zephyr.ns.purchase.edu/math/faculty/ohring/courses/web-docs/labs.html.) (The instructor or teaching assistant checks off completed sections.) Communication among students and instructor is enhanced using a listserv mailing list that the students subscribe to early in the semester.

A requirement of the course was for students to upload their projects on the class server or any other server to which they had access. After uploading, they e-mailed the student teaching assistant with the address so that he could update a page linking to all projects (http://newmedia.purchase.edu/~mconry/studentpages).

The textbooks for the course were HTML for the World Wide Web by Elizabeth Castro, Peachpit Press, 2000 and Web Style Guide: Basic Design Principles for Creating Web Sites by Patrick Lynch and Sarah Horton, Yale University Press, 1999

The second text was chosen as a relatively inexpensive book addressing design and production issues. Works by Jakob Nielsen and Edward Tufte were mentioned as recommended reading, along with various web sites.

Student attitudes

A survey given using the CourseInfo facility indicated that students were well motivated about the course. There were no prerequisites other than familiarity with computers and so there was considerable diversity in experience. Students wanted to learn how to create their own Web pages, some because they had no experience, but several stating that they had used packages and now wanted to exert more control. Several had specific goals: create or enhance a web site for their band or produce a web site to showcase their own work in design.

We used the survey to stimulate students to think about critical features of Web sites. The questions could be characterized as open-ended (Please describe the features that make you like a Web site.) or ordering a list of factors in terms of importance (e.g., organization, information, images). We also asked students to describe the features that made them dislike a Web site and what features make them want to come back to a Web site. Our intentions were not purely to get information from the students. Taking the survey was a way to involve them in the use of CourseInfo. In addition, as we indicated, we wanted to stimulate the students to reflect on the Web and articulate their views. We also wanted to steer students towards the importance of content, organization and performance and away from technical wizardry. We hoped that the survey would support this and, in fact, it did. For the open-ended question, 13 out of 18 students used one or more of the following terms: easy, simplicity, clarity, clear organization, designed for a purpose. The next most common set of terms (9 out of 18) was information, accuracy, and content. Terms such as animation, multimedia, graphics and interaction received one or two responses. The question involving putting factors in order did not have as clear a result. Still, organization and information fared well. The ‘customization of response to my interactions’ was not ranked highly, but this could have been due to the awkwardness of wording, or perhaps customization is over-rated. The most common responses to the question on negative features cited difficult of navigation and slowness in loading. Such phrases were featured in 5 responses. The most common response to the question “what features make you want to come back to a Web site” involved one or more of the terms ‘information’, ‘update’, and ‘useful’. The students’ selection and discussion of best & worst sites for the first project were consistent with the survey results. That is, they were positive about clear, clean design, substantial information, ease of use; they were negative about slow loading of sites and overly busy graphics.

Assessment of student effort, performance & attitudes

The student effort can be sorted into their performance on the quizzes; their postings to the on-line discussion board, and their project work.

The quizzes included HTML and JavaScript problems in ‘both directions’, that is, “produce the HTML/JavaScript to do X” and “what does this fragment of HTML/JavaScript do.” Each quiz also had questions on technical terms and also a choice of discussion section taken from the on-line postings. Though we were disappointed that the quiz results were not better, given that we provided a preparation guide the first time and a practice quiz the second time, the results were satisfactory. Some students complained about having to “memorize the code”. We made an argument that it is important to be proficient in the basics even if it is acceptable to look things up in manuals, but this may have not been accepted by all the students.