Sign up for newsletter

January 1, 1997

Student Web Pages- Putting a City on the Internet

By Han-Hua Chang, Andres Henriquez, Margaret Honey, Nancy Ross, and Kilimanjaro Robbs EDC/Center for Children and Technology

Introduction

Located in northern New Jersey's Hudson County, Union City sits atop the Lincoln Tunnel directly across the Hudson River from Manhattan. It is the most densely populated city in the United States (42,000 residents per square mile); 92% of the student population is Latino. In the 1960s, the city's ethnic make-up changed dramatically from Italian to Cuban as it became home to refugees who had fled Castro's rise to power. Union City still has the largest concentration of Cuban-Americans outside of Miami, hence its nickname, "Havana on the Hudson."

In recent years, the city's Latino population broadened to include people from the Caribbean and Central and South America. Families who make the long journey to Union City seek a better way of life for their children. Many adults arrive with limited formal education (according to the 1990 census, about half of the officially reported adult population has completed high school). Schooling is important for this community because it potentially brings a better way of life. The Board of Education serves approximately 9,000 students in 11 schools (3 elementary, 5 K through 8, 1 middle and 2 high schools).

Many of us have become familiar with the remarkable story of educational progress that has unfolded in Union City in the last few years. In February 1996, President Clinton and Vice President Gore recognized Union City for itshighly successful reform efforts, which have brought remarkable improvements in student learning and achievement. Closely tied to the Union City School District's reform initiatives has been an innovative school-business partnership with the Bell Atlantic Corporation that has pioneered the use of home-school networking technologies to provide students and teachers with in-depth access to communication and information resources.

The Center for Children and Technology (CCT) first began to work with the Union City schools in 1992. We were brought into the district by Bell Atlantic to assist with the design and implementation of the Union City Interactive Multimedia Education Trial.

More recently, in collaboration with the Union City Board of Education and Bell Atlantic, CCT received funding from the National Science Foundation's Networking Infrastructure in Education program. Union City On-line: An Architecture for Networking and Reform is building on the exciting climate of innovation in Union City by creating an extensive networking infrastructure. It will be one of the most comprehensively wired urban school districts in the country, delivering high-speed Internet connectivity to all 11 schools in the district and linking more than 2,000 PCs in classrooms, library media centers, computer labs, and teacher and student homes through a district-wide Intranet. In addition to this sophisticated technical infrastructure, we are also helping to develop a self-sustaining human infrastructure that will ensure the creative and effective use of Web resources for teaching and learning.

During the spring 1996, we worked with administrators in the district to design a summer course for high school students to develop Web sites for local community-based agencies. The course, Business, Community, and Educational Applications of Technology, was approved by the board of education and was designed to run for six weeks, five days a week, from 8:30 a.m. to 12:30 p.m. Students who successfully completed the course received five high school credits. The course met in the computer lab of the Christopher Columbus Middle School where we had enough Internet-connected Macintosh computers for each student to work on his or her own machine.

The district's curricular emphasis has been on collaborative learning through project work, independent research, and communication of findings through reports and publications. This proved an ideal framework for the community Web-authoring effort. We also had a hunch that well designed Web-authoring projects would not only support but also enrich the district's student learning agenda. We knew at the outset that this project would involve levels of complexity not often demanded in other areas of students' work. The kinds of skills and understandings that we anticipated students would need and develop included the following:

• Mastery of content knowledge
• Gathering, interpreting, and synthesizing information
• Knowledge of design principles (what counts as good design)
• Awareness of audience (Who are we making this for and in what are they interested?)
• Technical complexity
• Ability to collaborate (identifying and distributing tasks, trust, ability to reassemble) Critique and revision

In running this course, we learned a lot about the practical difficulties of conducting this kind of work with students and community organizations. We recognized that the amount of time students would need to commit to this effort would not be possible within the structure of the regular school year. The process of organizing the course, identifying and bringing the community organizations on board, and working with the students taught us much that other educators can learn from. The remainder of this article describes several factors that we think helped make this effort a success.

A Mix of Skills

Four CCT staff members led a class of 15 students. We brought a mix of skills to this effort, including knowledge of:

• Multimedia and Web design
• HTML
• Research and project management
• Teaching students
• Building effective relationships with community-based organizations.

In addition to CCT staff, the National Science Foundation supported the hiring of a college intern, Kilimanjaro Robbs, an engineering major at Northeastern University who has a background in UNIX programming and a solid working knowledge of HTML and JAVA programming. KJ, as he preferred to be called, proved a wonderful role model for students in the course.

The mix of skills that the staff brought to the project was extremely important, as was our ability to be open about what we knew and did not know. We constantly asked one another questions and encouraged the students to do the same.

Our openness in asking for help, our acknowledgment of one another's areas of expertise, and our ability to work as a team established the context in which students could do the same. During the last several weeks of the course, the classroom was full of students asking one another and the staff for advice and help.

Building Relationships with Community Agencies

With assistance from the district superintendent, arrangements were made with the Mayor's Office, the Union City Housing Authority, and the local day care center to help our students with their projects. CCT staff contacted the appropriate individuals from each organization and explained the project's goals and objectives. We explained the community section of the Union City online Web site and our need to build Web resources that would reflect important community-based efforts and explained that groups of students, accompanied by adult team members, would spend time in their offices. The students would be interviewing appropriate staff, collecting information, taking photographs, and visiting programs.

All of the individuals we worked with in these agencies were extremely generous with their time. They took the students' work seriously, took the students on tours of their facilities, assembled information that students requested, and arranged for interviews. This helped the students learn a great deal about each organization and also build successful working relationships.

Learning HTML

Many educators shy away from HTML, believing it to be a highly complex computer-programming language. In truth, HTML is a relatively simple scripting language that establishes the relationship between the elements of a document. HTML must be simple so that this relational structure can be used by many different computer platforms. Although literally dozens of HTML conversion programs are on the market, we believe that HTML was worth teaching because it would allow students versatility and flexibility in their designs. In addition, we knew that several HTML tutorials available on the Web would help us and the students master HTML (e.g., Web66).

We began by giving students basic work sheets containing key HTML commands. Students used these immediately to make their own Web pages. Such pages can be viewed immediately under a browser, students were instantly able to see the results of their programming. This cause-and-effect relationship proved enormously motivating for the students not only to learn HTML basics, but also to acquire a repertoire of increasingly sophisticated HTML techniques. Within three days, the students had exhausted our working knowledge of HTML. As a result, we purchased several HTML books, and began to supplement our own understanding with tutorials pulled from the Web.

It is interesting to note that in learning HTML, the students joined a community of World Wide Web designers. For example, when we introduced students to frames, we also introduced them to newsgroup discussions on the pros and cons of frames. After learning how to create frames, examining Web sites with and without them, and reading the frame-related newsgroups postings, one team concluded that frameless pages were more versatile in design. However, they wanted to keep the look and feel of a frame. Their creative solution was to design a dual-color background that emulated the look of frames. Thus, students developed their design skills in the context of a world wide community of Web designers. This community's support also was evident in our ability to tap into a body of knowledge on the Web. These included lessons on tables and frames from the Netscape tutorial home page, automatically generated HTML for backgrounds and text at the Color Center, and automatic HTML validators. One team's Web site used direct links to weather and map sites for the local community.

Thinking About Design

We began the course by introducing design as a concept. We asked the students to find examples of their favorite Web sites and to think about design elements that attracted them. Students loved sites that contained lots of graphics and representations of popular culture. As instructors, we wanted them to think about the effective relationship between text and graphics and recognize that the drawing power of a Web site is in its content; visitors are more likely to return to a site that contains information they want. In addition, we wanted students to begin addressing trade-offs in design; these typically are graphic-intensive sites that require long downloading time on the one hand and all-text sites that loaded quickly but were visually unappealing on the other hand.

In the process of designing their own personal home pages, students were able to experiment with different design elements. As instructors, we encouraged their initial efforts even though they were graphics intensive. In fact, when students designed their own home pages, many of them had little informational content, but a lot of graphics: buttons, animation, and animated graphics. Only as students began to work on storyboarding the sites for their agencies did they address the need for text to convey content efficiently over the Internet.

In addition to generic design questions, the CCT staff also helped students to identify and review Web sites in the same category as their agencies. For example, we showed students several other municipal home pages and asked them to think about whether those sites communicated information about the municipality effectively. What information did the Web sites convey or not convey? Could the information be understood by people who knew nothing about how that municipality worked? and Did the colors and graphics at the municipality's site draw the user to the site? All of these questions helped the kids think critically about the principles of good design.

Storyboarding

In designing the Web sites for their agencies, students first had to storyboard the site. This process consisted of creating a chart that graphically represented the relationship of the different Web pages to one another. This required that students address the following questions:

1. Who needs the information at the Web site? In other words, who is the audience?
2. What kind of information will your audience be looking for? Often the information that the agency wants to present is not what a visitor is looking for.
3. What might attract casual visitors to the site? This involved thinking about an audience beyond the site's natural constituency.
4. What information does the agency want to convey or showcase?
5. What are the roles and responsibilities of the agency itself?

Storyboarding helped students identify what they needed to accomplish by roughly sketching the structure of the site. This also helped students plan their research as well as visualize their progress toward completing the site.

Storyboarding required the students to follow these steps:

1. Think about the kind of information they wanted to put on the Web site.
2. Set goals for the site.
3. Organize the content into main topics.
4. Come up with a general structure for pages, topics, and links.

Conducting Background Research

In many respects, doing background research was the most challenging element of the course for both students and project staff. To help students develop an overview of the goals and objectives of the entire project, in the second week of the course, we took students on tours of all the agencies. This enabled them to meet the staff and develop a feel for the agencies' work. Within each agency, students noted its organizational structure, paying particular attention to key staff members who could provide needed information. In addition, the students had to learn the agencies' roles and mission.

We had students conduct mock interviews with one another to practice the research techniques that they use to interview the staff at the agencies. To help them decide on what questions to ask, we asked them to think about who they were interviewing, what information the interviewee could provide, and how the information related to the agency's overall mission. We pointed out to students that not only the staff they would be interviewing were professionals but also that they themselves would be taking on the role of professional Web designers. Among the interviewing techniques we taught the students were shaking hands firmly, making direct eye contact, and dressing properly.

Because the client-consultant relationship was established as the framework for this project, students had to visit their agencies continuously to receive feedback from the client on the design.

Local Language

Because Union City's population is mostly Latino, students decided to use Spanish and English in their pages. The Web is Anglo-centric, so students wanted to ensure that their sites could be read by their own community. Although most of the students were Spanish-speaking (and from different parts of the Caribbean and Central and South America), they had difficulty deciding on which local Spanish vernacular to use.

Some of the agencies, however, did not have all of their materials in Spanish. In other cases, this was the first time the materials would be translated. Although we fully support the need to create Web pages in the language of the local community, this was a tremendously difficult and time-consuming task. For example, students in the summer course used English-to-Spanish translation software; the translations, however, were riddled with inaccuaracies and errors. As a result, the students' Spanish teacher had to spend several days editing the Spanish translations. During the regular school year, this kind of collaboration would be a great way to foster interdepartmental work between foreign language and other departments.

Revising and Rethinking

The home pages the students developed were not academic exercises--they were designed to represent real agencies and were sanctioned by those agencies. Even though unpaid, the students were, in fact, consultants serving clients.

Students had to establish ongoing relationships with their clients. In the beginning, the mayor's office wanted to put up pages about recycling, a major but hard-to-explain sanitation effort in Union City. The students explained to the mayor's public relations office that most Union City residents did not currently have access to the World Wide Web, so they would not be able to see the city's municipal home page. Students also had to inform their clients about Web design issues and Internet capabilities. For example, the mayor's office maintained archives of photographs of the city, but because of bandwidth limitations, students had to select carefully only those pictures that were most useful--that is, pictures of historical interest, of the work of different commissioners, and so on.

Synthesizing information was one of the biggest hurdles students had to overcome. Information had to be organized into topics that would make intuitive sense to Web site visitors who knew nothing about Union City. This required constantly revisiting and revising the original storyboard. These revisions would in turn often generate gaps in information that would require revisiting the agency to gather more information.

Students experienced a constant tension between the need to collect more information and their desire to amplify the graphical components of their Web pages. When students had to pull together the final versions of their pages, they realized they had to deal with a lot more than graphics. They had to organize an enormous amount of text. This is where they needed guidance. As instructors, we played a significant role in helping the students organize and synthesize information into categories that made sense for each Web site.

Teamwork

After the students had visited all the agencies, we gave them the opportunity to choose which one they would work for. This was done to motivate them to tackle the inevitable tension and workload that the design of a complete Web site requires. At the same time, as instructors we had to ensure a balance of gender as well as different skills (such as design, research, and HTML programming). We discussed what we thought would be "ideal groups"; and fortunately, the students' choices meshed fairly closely with our ideal conceptions.

Within the teams themselves, students had to decide how to divide and distribute responsibilities. They had to understand that different team members needed to take responsibility for different pieces of work. Team roles were broken down to designers, translators, graphic artists, and programmers. Research was conducted by all team members.

As the teams approached their August 8 design deadline, tensions began to mount. As instructors we had to keep the teams focused, reminding them that these were collaborative efforts in which everyone's job was critical to the project's overall success. Negotiating relationships, being flexible in dividing tasks, and pitching in and helping one another when necessary were all strategies that helped the teams function effectively. In hindsight, we believe that team-building skills are essential components in a collaborative project such as the one we conducted, so we recommend the following:

• Conduct collaborative exercises throughout the course to strengthen the bonds and trust between team members.
• Observe successful models of team work such as basketball teams, cheerleading teams, etc.
• Include tension-release periods by creating opportunities for students to interact away from the demands of the project. In our course, students had a 15-minute break everyday, and toward the end of the project when we were all staying until 5 p.m., we bought the students lunch. Students renewed friendships and camaraderie during these times. This facilitated the collaboration with other team members in a nonstressful and relaxed environment.
• Forewarn teams about the inevitable tension that arises as deadlines approach.

Assessment

Because students were receiving credit for the course, the assessment measures needed to cover the high school proficiencies for an upper-level high school computer course. A rubric that was consistent with the New Jersey's high school proficiencies was created to assess the students' work. Students' grades were based on four components: journal writing, Web programming and design, group work, and field research.

Journal writing was an important component of the program. Students were required to write journal entries every day and were encouraged to write about their day, design or draw a graphic, and communicate difficult issues arising in their teams.

Web programming and design was assessed by examining personal home pages as well as the team project sites. We looked for progress in the design of the final project home pages by comparing their initial efforts in their personal home pages.

Group work was assessed by looking at how all students participated within the context of their team. Did they dominate the group? Were they silent? Did they try to draw in other team members to participate?

Field research was assessed by examining the field data and how the information was conveyed in the design of the Web site.

Demonstrating Success

The project's culmination was a demonstration by each team to the agencies, municipal officials, parents, relatives, local businesses, and media. This was an opportunity for students to showcase the hard work they had done all summer. Prior to this demonstration, students rehearsed their presentations in both Spanish and English. Student-made invitations were mailed to the community, and the computer lab was decorated for the event. The presentations were well received by the community. Students enjoyed having their pictures taken with the mayor and being interviewed by the local cable television station. The reception afterward allowed parents and the local officials to socialize and celebrate their children's success.

In the ensuing school year, many events have transpired as a result of the summer class:

• On their own, students from the summer course initiated an HTML training course for their classmates. The class meets once a week, and the students are planning to teach elementary students in the spring.
• A few of the students have begun to create Web pages for local businesses as afterschool jobs.
• Beginning this winter, Union City has adapted this course as part of its regular computer applications sequence. Teachers will work with several students to create additional community-based Web sites. This is known locally as Computer Applications Mentoring Project (CAMP). This is an opportunity for small-group internships with teachers in which the students will provide technical knowledge and the teachers will facilitate the synthesis of information and content.
• On November 21 this year, students from the summer course presented their Web sites as well as their own reflections on what they learned to a group of education, government, and business leaders at the New Jersey Education Summit that included Governor Christine Todd Whitman.
• In the spring, students from the course presented their Web pages to the Department of Education's Office of Bilingual Education and Minority Language Affairs (OBEMLA) as well as the National Science Foundation.

Han-Hua Chang, Andres Henriquez, Margaret Honey, Nancy Ross, and Kilimanjaro Robbs EDC/Center for Children and Technology

Bibliography

Business, Community, and Educational Applications of Technology Summer 1996

Books

Aronson, Larry. HTML 3 Manual of Style. Ziff-Davis Press, Emeryville, CA, 1995.

Castro, Elizabeth. HTML For the World Wide Web. Peachpit Press, Berkeley, CA, 1996.

Lemay, Laura. Laura Lemay's Teach Yourself Web Publishing with HTML 3.2 in 14 Days. Sams.net Publishing, Indianapolis, IN, 1996.

Musciano, Chuck, & Kennedy, Bill. HTML The Definitive Guide. O Reilly & Associate, Inc. Sebastopol, CA, 1996.

Margolis, Phillip. The Random House Personal Computer Dictionary. Random House, New York, 1991. Oliver, Dick. Web Page Wizardry. Sams.net Publishing, Indianapolis, IN, 1996.

Articles

Fisher, Alexander. "Web as theatre." Internet World, June 1996, pp. 36-38.

Lohr, Steve. "An after-school job that's not kids' stuff." New York Times business section, May 6, 1996.

El Diario, May 4, 1996, "Bergenline se alista para un verano de ventas altas."