a project-based approach to interactive web site design

9VOL. 11 NO. 3 TESOL JOURNAL

A s computers and software applications becomemore widely used in the classroom, it is no longerenough for educators to simply know how to use

computers for the purposes of word-processing. Standardsdeveloped by accreditation agencies such as the NationalCouncil for Accreditation of Teacher Education (NCATE),of which TESOL is a member (Wong, 1998), and theInternational Society for Technology in Education (ISTE)require that teachers be prepared to integrate technologyinto their instruction. This requirement is further reflectedin the job market. Specifically, applicants to teachingpositions at various levels (K–12 through communitycollege) are asked to demonstrate experience in the use ofinstructional technology, including, but not limited to,computer-assisted learning and the Internet.

Current practices in teacher education programs favortwo approaches to technology instruction. The first in-volves introducing the use of computers across the entirecurriculum of teacher preparation programs so that futureteachers learn how to use technology for the purposes ofmeeting their own instructional goals (Thompson, Bull, &Willis, 1998). The second approach involves offering astand-alone course, in which technology instruction isrestricted to a course that is a part of the curriculum ofteacher preparation programs.

This article describes a stand-alone course, entitledUsing Computers in the Language Classroom, that isoffered in an MA TESOL program in an urban universityin Southern California. The article, coauthored by thecourse instructor and six graduate students who wereenrolled in the class in the Spring of 2001, describes thecourse, placing emphasis on the learning processes andproducts used.

Using Computers in theLanguage Classroom:Overall Course DescriptionUsing Computers in the Language Classroom is a 10-week,40-hour course taught in a networked electronic classroomwith 24 IBM-compatible computer stations and aninstructor’s station; the maximum number of studentsallowed to enroll in the course is 20. All of the stations areequipped with standard Microsoft® Office 2000 software.Additionally, the instructor’s station and another fourstations in the lab are equipped with capture cards and

A Project-Based Approach toInteractive Web Site DesignLía D. Kamhi-Stein, Nora Bezdikian, Everett Gillis, Seoyoung Lee,Blanche Lemes, Melissa Michelson, and Donn Tamaki

Adobe® Premiere® 6.0 (2000) software. Capture cards aredesigned to allow video clips stored on VHS or 8 mmtapes to be transferred to a computer. Adobe Premiereallows the clips stored on the computer (e.g., video, audio,scanned images) to be edited and assembled into movies sothat they can be viewed on a Web site, CD-ROM, orVCR. The computer lab is also equipped with a liquidcrystal display (LCD) projector system that allows theinstructor’s and students’ computer screens to be displayedon a large screen for the entire class to view simultaneously.

The course is taught by one instructor; a graduateteaching assistant (GTA) is also available to assist studentsduring and outside of class time. Additionally, two instruc-tional technical consultants (ITCs) are responsible forinstalling and maintaining hardware and software in theelectronic classroom where the class is taught. The ITCs arealso responsible for installing and maintaining software infour other electronic classrooms as well as in the offices ofmore than 90 faculty in the Charter College of Education,where the MA TESOL program is housed. The assistanceoffered by the two ITCs in the Using Computers in theLanguage Classroom class involves weekly 1-hour meetingswith the course instructor to determine that all of thecomputer stations and related software are in properworking order.

The course relies on the premise that an optimallearning environment is one that allows for self-pacedinteractions. Interactive Web sites seem to provide languagelearners with such an environment. This is the case whenWeb sites allow for learner-teacher interactions (e.g., whenlanguage learners complete an exercise, submit theiranswers by e-mail, and receive instructor feedback) orlanguage learner-computer interactions (e.g., when lan-guage learners complete an exercise and check their answersagainst the answers available on the Web site).

With this premise in mind, the course is developedaround a project designed to allow pairs of students toapply the knowledge and skills learned throughout theterm. The project involves the design of an interactive Website that includes four main pages:

1. a Web site reviews page, including the reviews ofWeb sites for language learners and Web sites forlanguage teaching professionals

2. a video-based page, including a video segmentand a set of interactive activities developedaround the segment

10 TESOL JOURNAL VOL. 11 NO. 3

3. a second interactive activities page, developedaround the use of Hot Potatoes™ (2001), asoftware program designed to develop interactiveexercises for the Web

4. a personal information page, designed to provideinformation on the Web site designers

The class has two other important features. First, atthe end of the term, the pairs present their projects to theirpeers using slides created with Microsoft® PowerPoint®2000 (2000). Therefore, as part of the course, students aretaught how to use this software program. Second, thestudents and the course instructor document and reflect ontheir experiences in the course by keeping a weekly diary.The diary entries are kept confidential in that the originalentries are not shared by the authors. At the end of theterm, the students and the instructor work independently,review their entries, and summarize their reflections in apaper that is presented in class.1

The course is taught as a hands-on workshop in whichstudents are provided with scaffolding tasks involvingbreaking the Web site design project into manageablesteps. In each workshop session, students begin by access-ing a set of handouts available on WebCT (1999), acommercial software program that facilitates the creationof Web-based educational environments that offer a varietyof tools (e.g., syllabus pages, asynchronous bulletin boardsystems, e-mail, group presentation areas). Then, theinstructor leads students in a hands-on demonstration ofthe day’s tasks (e.g., how to create an index page by usingframes). In the hands-on demonstration, the instructorslowly walks students through step-by-step procedures,allowing them time to follow each step on handouts whileworking at their computer terminals. After the hands-ondemonstration, students collaborate with their peers tocomplete the day’s tasks, receiving assistance as needed(e.g., from their peers, the instructor, or the GTA).

Peer collaboration, in the form of students working inpairs, plays an important role in the course in that studentsare given an opportunity to naturally implement Vygotsky’sconcept of assisted performance, understood as what thestudent can do “with help, with the support of the envi-ronment, of others, and of the self” (Tharp & Gallimore,1988, p. 30). Working in pairs on the completion of theWeb site design project also decreases students’ tension andanxiety levels by allowing them to share the responsibilityof accomplishing a task with someone else.

The following section describes the different steps thatthe students followed in completing the interactive Website design project and the PowerPoint 2000 presentationsduring the Spring 2001 quarter.

Interactive Web Page Design

Web Site Reviews Page

The design of the Web site reviews page involved foursteps. First, students learned how to locate Web sites for

language teaching professionals and Web sites for ESL/EFLstudents by using search engines (e.g., Google) (see Barker,2001), subject directories (e.g., Infomine, Academic Info),and metasearch engines (e.g., Chubba, Dogpile).2 Specifi-cally, students learned how to locate sites by applyingBoolean operators (symbols that represent relationshipsbetween key words) used by various Web search engines.For example, students learned that a plus sign (+) is used torepresent the word and (e.g., EFL +lesson plans); a minussign (-) is used to represent the word not (e.g., EFL -ESL);quotation marks (“ ”) enclosing a phrase means to searchfor a phrase exactly as it has been entered (e.g., “English foracademic purposes”); and the word or, typed in uppercaseletters, is used to search for synonyms (e.g., “MexicanAmericans OR Hispanic Americans”).

Second, after identifying a variety of Web sites, stu-dents used a rubric to evaluate the sites. The sites wereevaluated based on their relevance for their intendedaudience, accessibility, and interactivity.

Next, students wrote reviews of the sites. They savedtheir reviews as Web pages using Microsoft® FrontPage®2000.

Finally, students personalized the pages using featuresthat allowed them to add textured backgrounds, selectdifferent fonts, and insert moving or still clipart images.Such images could be downloaded for free from Web sites(e.g., from http://www.clipart.com).3

Video-Based Page

The next step in the Web site design project includedfilming, digitizing, and editing a 30-second video segment;inserting the segment into a Web page; and developinginteractive activities designed to exploit the segment.Because of the number of tasks involved in designing thevideo-based page, students worked in groups of four (withtwo pairs of students sharing one video segment). The taskswere carried out in three main stages: before, during, andafter filming.

The tasks carried out before filming included (a) decid-ing on the objectives of their video lesson (e.g., recognizingvocabulary related to articles of clothing), (b) selecting theteaching situation (e.g., shopping for clothes at a neighbor-hood store), and (c) writing a short script for the videotape.

During filming, students (a) followed a set of instruc-tions on how to film segments (Figure 1) and (b) filmedthe video segments, with an emphasis on two types ofscenes: scenes that involved acting and filler scenes (i.e.,silent images that could be used to provide transitionbetween scenes or to emphasize a vocabulary term)(Hickok, 2001).

After filming the video segments, students transferredthe segments to the four computer stations equipped withcapture cards so that the video clips could be viewed on thecomputers. However, at this stage, the video clips still neededto be edited (e.g., students needed to decide the sequence ofthe scenes and which scenes to delete). Therefore, the


students began to edit their video segments using three mainfeatures of the Adobe Premiere software (Figure 2):

1. a timeline containing tracks for video and audiothat allow the video producer to build the videosegment

2. a monitor that allows the video producer towatch the video segment

3. transitions designed to allow the video producerto create effects in order to change scenes

Editing the video segments involved using the timelineto reduce the length of the segments by cutting them,adding transitions between scenes (e.g., using a dissolvingtechnique to gradually superimpose one camera shot uponanother as if fading from one scene to the next, using apeeling technique where one scene turns into another as if

turning the pages of a book), viewing the edited segmentson the monitor to decide whether they needed to befurther edited, and saving the video segment in movieformat to be played on the Web.

The last step after filming involved saving the segmentsin movie format and inserting them into the page titled“Video-Based Page.” In this way, language learners wouldbe able to view the video while it was playing on the Web.Table 1 summarizes the different steps students followed tocreate PC-compatible video segments for the Web.

After the video segments were ready, students pro-ceeded to develop interactive activities using the “forms”feature available on FrontPage 2000. For example, theydeveloped multiple-choice answers in the form of drop-down menus and questions that required short and longanswers in the form of text boxes. These activities wouldprompt language learners to use the language input fromthe video or to demonstrate their comprehension. Figure 3presents a sample Web page containing multiple-choiceanswers in the form of drop-down menus.

Interactive Activities PageUsing Hot PotatoesThe following step in the Web site design project involveddeveloping interactive activities using Hot Potatoes, one ofmany software programs available for free to individualsand nonprofit educational institutions. (For a comprehen-sive list of software programs, see Healey & Johnson,2001.) Hot Potatoes provides templates for six types ofinteractive exercises for the Web: multiple-choice, short-answer, jumbled-sentence, crossword, matching/ordering,

Filming Instructions

Consider the following factors when filming:1. The visual elements in the video should aid in the

comprehension of verbal messages.2. The quality of the picture must be clear.3. The sound quality must be clear.4. The speech delivery must be clear.5. The video segment must be interesting.6. The video segment must be relevant to the needs

of your audience.

Figure 2. Screen shot depictingthe timeline, monitor, andtransitions. (Created usingAdobe® Premiere®, 2000.Copyright © 2000 Adobe SystemsIncorporated. Used with permis-sion. All rights reserved. Adobeand Premiere are registeredtrademarks of Adobe SystemsIncorporated.)

Figure 1. Instructional handout on how to film a videosegment. (Adapted from Arcario, n.d.)


and gap-fill. Therefore, the software is more useful forteachers than FrontPage 2000. Students used Hot Potatoesto create multiple-choice comprehension questions andcloze exercises. Figure 4 presents a sample multiple-choiceexercise, with the texts inserted alongside the questions.

Unlike the answers to the activities designed using the“forms” feature available on FrontPage 2000, the answers to

Hot Potatoes activities cannot be e-mailed to users; how-ever, users can check an answer key, which also includesfeedback for correct and incorrect answers. In the UsingComputers in the Language Classroom course, some pairsof students personalized the feedback. For example, in anactivity entitled “California Dining,” positive feedback fora correct response included messages such as “Well done,

Figure 4. Sample multiple-choiceexercise. (Created using HotPotatoes 2001. Copyright © 2001.Reprinted with permission fromHalf-Baked Software. Netscapebrowser window © 2001 NetscapeCommunications Corporation.Used with permission.)

Figure 3. Sample Web pageshowcasing drop-down menus.(Created using FrontPage 2000.Copyright © 2000. Screen shotreprinted with permission fromMicrosoft Corporation. Netscapebrowser window © 2001 NetscapeCommunications Corporation.Used with permission. NetscapeCommunications has not autho-rized, sponsored, endorsed, orapproved this publication and isnot responsible for its content.)


dude!” and negative feedback for an incorrect responseincluded messages such as “You’ve been surfing out in thesun too much. Try again.”

Students were very positive about learning how to useHot Potatoes. Some explained that they usually requiredtheir ESL/EFL learners to complete reading assignments andthat the integration of reading and computers wouldmotivate the learners to read. As one course participantreflected: “I look forward to using the ‘Hot Potatoes’ readingprogram with my children [students]. I know they will enjoythis type of activity, since it entails the use of a computer.”

Personal Information Page

Much like the other Web pages created for the project, thepersonal information page was designed using FrontPage

2000. In this page, students included their teaching philoso-phy and biographical information on the Web site designers.They also personalized the page by inserting still or movingimages, adding textured backgrounds, and using various fonttypes available on Web sites that allow the free and unre-stricted downloading of images, backgrounds, and fonts.

Preparing the Web Sitesfor PresentationAfter the four pages were completed, students linked themby creating frames (window panes) that allow for easynavigation of Web sites. Then, students determinedwhether the Web sites were ready for publication by usinga rubric (focusing on whether or not the pages were

Stage Steps Equipment Needed

Before filming 1. write the objectives of the video • Nonelesson (e.g., recognize vocabularyrelated to articles of clothing)

2. select the situation that will allow thegroup to meet its objectives (e.g.,shopping for clothes at aneighborhood store)

3. write a short script for thevideo segment

During filming 1. make sure that the video segment’s • Camcorder (analog or digital)elements (visual, sound) are good • VHS tapes or 8 mm tapes (depending on the

2. film scenes that involve acting and filler camcorder’s specifications)scenes (silent images that can be usedto provide transition between scenes orto emphasize a vocabulary term)

After filming 1. transfer the video segment onto the • If the segment is taped using VHS tapes orcomputer using a capture card 8 mm tapes, the VCR or the camcorder must

2. edit the segment using digital editing be plugged into the computer containing thesoftware (by cutting scenes, adding capture card. To capture the video segment,transitions between scenes) the VHS or the 8 mm tape must be played on

3. save the video segment in movie format the VCR or the camcorder respectively.so that it can be played on the Web • A capture card

• Editing software. Prices range from relativelyinexpensive (e.g., Dazzle) to expensive (e.g.,Adobe Premiere).

• An Intel Pentium II processor or higher• Windows 95, 98, NT, or XP• 128 MB RAM (the memory on the computer’s

operating system)• 200 to 300 MB hard disk space (if the video

segment is to be saved on the hard drive) OR100 MB Zip® disk or CD-ROM disk (if the videosegments are not to be saved on thecomputer’s hard drive)

• Real Player or Media Player (to view the videosegment on the computer)

Table 1. Steps for Creating PC-Compatible Video Segments for the Web


complete and whether they included the different compo-nents of the interactive Web site project).

Finally, each pair scheduled a conference with thecourse instructor. During the conference, the students andthe instructor reviewed the Web site projects and uploadedthe Web sites by moving the files from the host computerson which they were created to the school’s Web server.4

PowerPoint 2000 Slide PresentationsAt the end of the term, students presented their Web siteprojects to the class using PowerPoint 2000 slides. Thepresentations included a narrative describing the interactiveWeb sites and seven slides. In creating the slides, students

• experimented with font styles and sizes to make theslides easy to use as well as interesting to read

• chose different colors from the color palette to givethe slides great visual impact

• inserted scanned pictures and objects (e.g., one pairdownloaded and inserted a picture of a succulentbaked potato) to enhance the information beingconveyed

After creating their slides, students reviewed andevaluated their own work by looking at the slides inminiature using the PowerPoint “Slides Sorter View”feature. This feature allowed them to undo, redo, anddelete slides. Then they added sound effects and transitionsbetween slides. They found that many of thepreprogrammed sound effects available in PowerPoint 2000(e.g., bullet sounds, breaking glass) were distracting orinappropriate in conveying a desired emotion in an aca-demic setting. Therefore, several pairs chose to record anarration that was synchronized with the slides. Finally,some pairs programmed their slide presentations to runautomatically at different speeds, and others used themouse to manually change slides.

ConclusionProject-based learning, as implemented in the UsingComputers in the Language Classroom course, proved tobe a valuable experience for the students and the instructor.Students learned how to use a variety of computer softwareapplications and how to learn from one another throughcollaboration.

Even students who felt insecure in their technologicalknow-how quickly became more skilled in using computersto aid their classroom learning. At the end of the course,students noted that the information introduced was soextensive that they felt more confident using computersand exploring new technologies. One student described theexperience as a “roller coaster ride from start to finish.” Thelows of the ride were the frustrations experienced and thefear that a project or program could not be mastered.These were offset by the highs of accomplishing tasks andcompleting the project successfully, which, we believe, will

lead students to continue investigating technology chal-lenges beyond this course.

Notes1 For information on the students’ and the instructor’s reflections

on the course, please go to http://instructional1.calstatela.edu/lkamhis/tesl565/ and click on“Diary Study.”

2 For a comprehensive description of the different search engines,go to http://lib.berkeley.edu/TeachingLib/Guides/Internet/SearchEngines.html.

3 The students and the course instructor discussed copyrightprotections that govern the fair use of Web materials (e.g.,audio, video, images, and text).

4 To view projects designed in the Spring 2001 course, go tohttp://instructional1.calstatela.edu/lkamhis/tesl565/. To viewprojects designed in the Spring 2002 course, go to http://instructional1.calstatela.edu/lkamhis/tesl565_sp02/.

References

Adobe Premiere for Windows (Version 6.0). [Computer soft-ware]. (2000). San Jose, CA: Adobe Systems.

Arcario, P. (n.d.). Criteria for selecting video materials. In S.Stempleski & P. Arcario (Eds.), Video in second languageteaching: Using, selecting, and producing video for the classroom(pp. 109–121). Alexandria, VA: TESOL.

Barker, J. (2001). The best search engines. Retrieved January 3,2002, from http://lib.berkeley.edu/TeachingLib/Guides/Internet/SearchEngines.html

FrontPage 2000 [Computer software]. (2000). Redmond, WA:Microsoft.

Healey, D., & Johnson, N. (2001). TESOL CALL interest sectionsoftware list. Retrieved January 3, 2002, from http://osu.orst.edu/dept/eli/softlist/index.html

Hickok, J. (2001). Using streaming video and interactive websitesto assist in library/information literacy instruction for English asa second language students. Unpublished master’s thesis,California State University, Los Angeles, CA.

Hot Potatoes (Version 5.0.2.0). [Computer software]. (2001).Victoria, British Columbia, Canada: Half-Baked Software.

PowerPoint 2000 [Computer software]. (2000). Redmond, WA:Microsoft.

Tharp, R. G., & Gallimore, R. (1988). Rousing minds to life:Teaching, learning, and schooling in social context. Cambridge:Cambridge University Press.

Thompson, A., Bull, G., & Willis, J. (1998). Statement of basicprinciples and suggested actions: Ames white paper. RetrievedJanuary 3, 2002, from http://www.aace.org/site/SITEstatement.htm

WebCT (Version 1.3.1) [Computer software]. (1999). Vancouver,British Columbia, Canada: WebCT.

Wong, S. (1998, August/September). TESOL joins NCATE.TESOL Matters, 8(4), 1.

Authors

Lía D. Kamhi-Stein is associate professor at California StateUniversity, Los Angeles, in the United States, where she teaches inthe MA TESOL program. Her teaching interests are ESL/EFLmethodology and the teaching practicum. Her research interests areacademic literacy, the integration of computer-mediated communica-


tion in TESOL teacher education, and nonnative English-speakingprofessionals.

Nora Bezdikian majored in French language and literature at theUniversity of California, Los Angeles, in the United States, andreceived her MA in TESOL from California State University, LosAngeles. She teaches at Balboa Elementary School in the GlendaleUnified School District in California.

Everett Gillis has an MA in TESOL from California State Univer-sity, Los Angeles, in the United States. He is interested in teachingadult EFL students.

Seoyoung Lee majored in Korean language and literature at EwhaWomen’s University in Seoul, Korea. She is a student in the MATESOL program at California State University, Los Angeles, in theUnited States. She is interested in teaching adult EFL students.

Blanche Lemes has an MA in TESOL from California StateUniversity, Los Angeles. Previously, she was an EFL instructor at theInstituto Cultural Brasil-Estados Unidos (ICBEU) in São Paulo,Brazil, and now works in the ESL department at Santa MonicaCollege, in California.

Melissa Michelson has an MA in TESOL from California StateUniversity, Los Angeles (CSULA), in the United States. She hastaught EFL in Spain and Germany, and currently teaches ESL atSanta Monica College and the University of California, Los Angeles(UCLA) Extension, American Language Center.

Donn Tamaki has an MA in TESOL from California StateUniversity, Los Angeles, in the United States, where he is an ESLinstructor in the American Language and Culture Program.

a project-based approach to interactive web site design

Documents