Creating Web Documents: A case study on teaching a ...



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

jeanine.meyer@purchase.edu peter.ohring@purchase.edu

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 ). 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 (.) The self-paced labs are guided by worksheets that are accessible from the course web site (.) (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 ().

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.

The postings proved very positive to those that participated, with some extended conversations. This included a discussion on Napster. However, some students needed to be reminded that the postings were required and a few did several only at the end of the course. This was less satisfactory to the process.

The project work was more impressive than the quizzes and postings and can be viewed by going to . Many students learned and incorporated features beyond what was taught formally in the course. Similarly, many students worked on their projects with professional and artistic zeal, especially with respect to layout, fonts and performance.

The post-survey results indicated satisfaction with the course. We asked the following questions, with a sampling of responses:

• What did you like most about the course?

• I liked the way the class was conducted in terms that it was fun to learn HTML. I did not feel intimidated by what could be a very complex subject. Most of all I had fun!

• I liked learning a new language that at times was very frustrating yet when I finally got it to work, was extremely gratifying. My favorite was creating a web page and tweaking it at the end. I felt empowered by this course.

• Learning web design was like learning to do magic tricks—it was fun.

• Nothing (Note: this was the one non-positive response out of 15)

• What would you change about the course?

• I really enjoyed the class…the only negative comment I have is that I wish we had more class time for the instructor to help us with our questions.

• I would not change anything.

• I would say that a little less Java Script should be put in to the amount of time presented. HTML was covered very well at a great pace; Java Script on the other hand I felt rushed through!

• No tests—I don’t think that the tests show anything but memorization of information. I can’t remember code well off the top of my head and don’t think I need to.

• How would you describe the course to others?

• As a fun course that will help you learn HTML and Java Script without all the pressure.

• Easy and fun, if you actually want to learn web skills…otherwise pretty hellish.

• Really fun and really difficult. I would recommend this course with a stern warning that you better be prepared to work hard. I think the class should be 6 credits instead of 4.

• Please comment on the use of CourseInfo.

• These documents were very helpful and it was easy for us to communicate. I found it to be organized as well as helpful in helping me to answer a lot of my own questions.

• Blackboard (the name for the CourseInfo product) was the best addition and aid for students in any class that I have taken at Purchase.

• Now this was truly awesome. Notes online, posting of grades, it was all very cool. I have to say it was my most frequently visited page besides my own site.

• I did not find any use of it. I found it bothersome that it was a must to post things on the discussion board (One negative response out of 15).

Feedback on the textbooks was mixed. The HTML text received more positive responses. Two typical responses were: I hardly even opened the Web Style Guide. Everything in it seems so logical, I think the text is too dumbed-down for this course. I liked the HTML book a lot. If I was confused about a topic from the lecture, I knew I could just read up on my own because the HTML book was so clear and concise. And I liked the HTML book and I found it to be very helpful when needing more references to help me find the answers to many of my questions. At times the book was not clear in certain areas. Especially when it came to the chapter on style sheets. The web Style Guide book was not very helpful when it came to building my site, but it did provide for some interesting theories about web-sites and the internet.

Discussion

The main factor distinguishing this course from others taught by the authors is the diversity of students. The Visual Arts, Theatre/Film, Music and New Media students have, as would be expected, a refined sense of design and presentation. This can sometimes seem obsessive to less refined tastes (for example, insistence on specific fonts and colors) but it does lead to more impressive Web pages than we have seen produced by computer science/information systems students or business students (at another institution). However, it is also true that many of these students have less technical backgrounds and some were less willing to learn and cope with technical details. Many students seem surprised when details matter. In a related point, the requirement to use ws-ftp to post working versions of the projects was seen as not essential. The teachers viewed this as part of course. We do ask ourselves: are we asking too much of the Arts students in terms of technical operations? One strategy may be to match the Arts students with computer science students to form production teams. A complementary question is: are we asking too little of all students in terms of project purpose and effectiveness. These are topics of class discussion but not significant factors in grading.

In addition to the presence of real design talent, we believe that the authentic purpose of many of the projects was critical. When students prepare Web sites for real purposes (for example, the Web site for a band), the work tends to be better. The first author has noted this in the Beowulf to Lear: Text, Image and Hypertext classes. In that case, the projects were still class assignments, but they involved a definite purpose: exposition on specific literary works. The student projects were better than those produced by computing or business majors directed to make up topics. This phenomenon of the authentic assignment was even more pronounced in the Creating Web Documents course.

As was indicated above, one author taught entirely in the computer classroom and the other also spent time in a regular classroom with one computer and a projector. The computer classroom would be enhanced considerably by the addition of facilities for ‘taking screens away’ to focus students on the lecture/demonstration and for showing one student’s computer to everyone. The first author may adopt the practice of going to another room as long as these facilities are not available.

We received inconsistent feedback involving our insistence, at least initially, on using NotePad to produce HTML. The pre- and post-course survey results indicated many appreciated learning how to use a real tool. However, some students still complained about having to program. Some students did use WYSIWYG tools for their projects and, in some cases, had difficulties. We need to re-visit this issue as the tools evolve.

Comparing the use of CourseInfo with a listserv, a listserv does not require students to actively visit and login to a secure web site in order to participate in class discussions. The downside is the loss of the organizational features of a typical web bulletin board. Using a tool like CourseInfo for communication also encourages the students to make use of other web resources that are accessible through the course page. It is the second author’s experience that students, even students enrolled in web related courses like this, are more likely to generate, read, and reply to postings that involve only email. Our hope is that this will change as CourseInfo becomes pervasive on campus (it was only introduced this past year). A student who is enrolled in 2-3 courses that make use of CourseInfo is more likely to use this resource than one who is enrolled in only one. Similarly, a student who has become accustomed to CourseInfo in their Freshman year will be ready to use to use it during their Sophomore year. The hybrid model (classroom and on-line instruction) is especially appropriate for this course.

The college director of instructional design has determined that the use of CourseInfo requires students to sign a waiver indicating that they are aware of a potential loss of privacy. We also had students sign a statement agreeing to not misuse the server. We may combine these statements and, possibly, add some language relating to the requirements of the course. However, we do wonder if these statements are meaningless legalese.

In all, our experiences teaching this course have been positive. As a critical course in the New Media major as well as a popular elective for other students, we must continue to refine our methods. Using the web to teach skills for creating Web documents appears both necessary and beneficial. The exact requirements for the course and the exact form forms of instruction will remain the subject of discussion. We welcome feedback and comments.

References

Anstendig, L., J. Meyer, and M. Driver, (1999). Web Research and Hypermedia: Tools for Engaged Learning. Journal of Excellence in College Teaching, 9 (2), 69-91.

Clear, T., et al (2001) Dimensions of Distance Learning for Computer Education. Working Group of ITICSE, 2000, ACM, Helsinki.

Driver, M. and J. Meyer (1999). Beowulf to Lear: Text, Image and Hypertext, Literary and Linguistic Computing, 14 (2), 223-235.

Nielsen, J. (2000). Designing Web Usability. Indianapolis, Indiana, New Riders Publishing.

Pullen, M. (2000). The Internet-based lecture: Converging teaching and technology, Proceedings of ITICSE, 2000, Helsinki, 101-104.

Reeves, T., (1992). Effective Dimensions of Interactive Learning Systems. Keynote address to Information Technology for Training and Education, 1992, Brisbane, Australia.

Tufte, E. (1997). Visual Explanations. Cheshire, CT, Graphics Press.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download