Behavior Research Methods, Instruments, & Computers 1997,29 (2), 182-188 CONSTRUCTION AND MAINTENANCE OF WORLD-WIDE WEB SITES Moderated by John H. Krantz, Hanover College Use ofHyperCard to create pages on the World-Wide Web RON HOFFMAN and JOHN MAcDONALD Dalhousie University, Halifax, Nova Scotia, Canada A variety of commercial and shareware programs are now available to assist in creating HTML pages for a World-WideWeb (WWW)site. However, users with some knowledge of HTMLcoding and a simple programming language, such as the HyperTalk language in HyperCard, can create custom tools that will simplify the task of creating and maintaining multiple-page WWW sites. This paperpre­ sents examples of two such tools and describes the basic steps they use to create HTMLdocuments. Psychologists are being urged to create sites of home Users of Macintosh computers often have the Hyper­ pages on the World-Wide Web (WWW) for a variety of Card program available. HyperCard has a variety ofuses purposes. These include departmental information pages in psychology labs, including hypermedia teaching pro­ (Plaud, 1996), tutorials or teaching resources (Krantz & grams (Carreras, 1993; Dougherty, 1990) to demonstrate Eagley, 1996; Trapp, Hammond, & Bray, 1996), confer­ psychological phenomena; research tools (Gonzalez, ence announcements (Mainwaring, 1996), or research 1993; Hoffman & MacDonald, 1993) for gathering data; data gathering (Schmidt, 1997). In all cases, material to and tools for statistical analysis (Meyer, 1995). Recent go on such Web pages must be appropriately designed in versions ofHyperCard can also be used to simplify repet­ order to be effective, and then must have the HTML itive tasks involved in maintaining multiple-workstation codes inserted so that the material is properly displayed laboratories (Hoffman & MacDonald, 1993). on Web browser programs. Instructions are readily avail­ HyperCard comes with its own programming lan­ able in print (Lemay, 1995) or on the Web itself (http:// guage, HyperTalk. HyperTalk is a powerful yet surpris­ www.ncsa.uiuc.edu/General/Internet/WWW/HTML ingly simple language, and most HyperCard users learn Primer.html) on the mechanics ofHTML coding. When at least some ofthe language. One useful feature ofHy­ the number ofpages to be coded is small, it is possible to perTalk, like other programming languages, is its ability insert the codes by hand or to use one of the shareware to create text files. When combined with other charac­ (e.g., Best, 1996a) or commercial programs (Best, 1996b; teristic features ofHyperCard, namely the card metaphor PageMill, 1996) available for this purpose. with background fields shared among cards, it becomes However, if your site will contain a large number of possible to write simple program scripts to create a set of pages, hand coding becomes onerous, and commercial Web pages, identical in layout, but with differing text con­ products to manage larger sites are expensive. Too often, tent on each page. With each page linked to appropriate Web-page designers resort to use oflong pages, when it index pages, this makes for very user friendly hypertext, would be more appropriate to break the information into where a click on a link takes a reader to the exact informa­ a number of separate pages that allow users more flexi­ tion desired without waiting to load and display extra in­ bility in choosing how much material to download to formation, such as occurs with long pages where all the in­ their browser.' It is possible to create custom tools to formation is on a single page. Once all pages are created simplify this task. on the local computer, the user only has to upload them to the appropriate Web server and ensure that proper privileges are set to allow the desired access via the Web. This paper presents two examples using HyperCard The authors thank Kim Passi for permission to reproduce her home page. Correspondence should be addressed to R. Hoffman, Depart­ stacks to create sets ofHTML pages. In the first, an ex­ ment of Psychology, Dalhousie University, Halifax, NS, Canada 83H isting HyperCard stack containing photographs and tex­ 411 (e-mail: [email protected]). tual information about students in a class was turned into Copyright 1997 Psychonomic Society, Inc. 182 CREATING WWW PAGES WITH HYPERCARD 183 My name JS KUUi-'1Gll ana I'm III .0 third ye<il R;)'chology, but whether = my ilegree1I1ill endup betr,~ aI, ~ advanced m'ljor or an honours 'iegxee is still unbeknownst to me, My interests ill psychologylie in the areasof perceptiOl', and speechsnd hearing and the topic ot my researchprciect is ear1\litness testimony. AlthoughI have consideredmany careers from speech-language pathologyto lalli, teaching has Kim Passt .~~:~~~ b;:.;n m:r real love at;dI ant 0 Io::[email protected] Shelley McColl Find ) Figure 1.Thef"U"St exampleHyperCard stack, with four text backgroundf"tellls-Name, E-mail. Supervisor, and Description. a suite of WWW pages within the class Web site (not instructor.The instructor then extracts the e-mailaddresses publicly accessible). 2 This was accomplished basicaIly for the students and their introductory statements, putting by the addition to the stack ofa single button containing these in a HyperCard stack on a separate card for each a HyperTalk script that took the information on each student. Each card also contains a picture ofthe student. card ofthe HyperCard stack, formatted that information (The images were coIlected on videotape during class, to appear on a Web page, and then created the appropri­ and single frames were extracted using a frame grabber.) ately labeled text file for uploading to a Web server. The In the past, the HyperCard stack was distributed to the key elements ofthe script are presented below. students, who could run the stack on any ofthe comput­ The second example illustrates a more complex ma­ ers in the laboratory or on their home computer (ifthey nipulation. In this case, a new HyperCard stack was cre­ had some model ofMacintosh). In 1996, the student in­ ated for the specific purpose ofcreating Web pages. An formation was incorporated into a class World-Wide early version of this stack created pages to display ab­ Web site, along with other course-related material. Each stracts for a conference of the Canadian Society for student had a separate page containing all the informa­ Brain, Behaviour and Cognitive Science in 1995 (http:// tion that had appeared previously on the HyperCard acs.dal.ca/csbbcs/Details95.html), and other versions of screen. Since the HyperCard stack already contained all the stack have been used to format research reports for the information elements, all that was necessary was the Dalhousie Department ofPsychology (http://acsweb. to create a script in the language (HyperTalk) used by ucis.dal.caJpsych/ResRep.html) and to produce HTML HyperCard to translate the information from the various pages for the 1996 Conference ofthe Society for Com­ fields on each card into the appropriately coded HTML puters in Psychology (http://is.dal.ca/-hoffman/SCIP96/ document. default.html ). Figure 1 iIlustrates a screen (card) from the class stack. The scripting was basicaIly similar in both example The card shows four text fields, containing the student's HyperCard stacks, but was less complex in the first. The name, e-mail address, supervisor's name, and a scroIling first stack is described in some detail below, and a gen­ field containing the introductory biographical informa­ eral description ofthe second stack is also given. tion prepared by the student. In addition, a picture (a PICT image) ofthe student is displayed on the card. Each stu­ Creating StudentPages dent in the class had a separate card. In a 2nd-year honors independent research class at Translating the HyperCard stack into a series ofHTML Dalhousie, we have for several years created a HyperCard pages was accomplished with a script attached to a sin­ stack for the students containing pictures ofeach student gle button added to the last card ofthe stack, which pro­ and brief introductions the students write about them­ duced pages such as that shown in Figure 2. (First, in order selves. In a first class, they are taught to use e-mail, and to display the images through a Web browser, the PICT their assignment is to e-mail this description to the course images were converted to GIF images, and the path to the 184 HOFFMAN AND MACDONALD folder containing the GIFs was specified in the script for the student's last name into a variable Who and then the button.) A single click on the button would result in creating a new text file with this name and the suffix creation ofa separate HTML text file containing the in­ .html, into which the HTML code was then written. The formation taken from each card of the stack, with ap­ content of the Name field on the card was used for the propriate HTML links to the GIF image, the class home title of the document, and a common header (the class page, and an index file (Figure 3), which was also created title) was written to each HTML file. The name of the by the script. The e-mail address shown on each HTML student was then written to the HTML file using the sec­ page was given a MAILTO link to permit sending e-mail ond largest heading style (H2). The student's e-mail ad­ to the student from within the Web browser. dress was extracted from the e-mail field on the card, The script for the HTML button is listed in Figure 4. placed in a variable theMail, which was then written Readers familiar with the HyperTalk scripting language below the student's name and followed by a MAILTO: will be able to follow the script easily.