A Project-based Model for an Advanced Web Site Design and E-Commerce Course Paul Kovacs Computer Information Systems, Robert Morris University Moon Township, PA 15108-1189, USA Abstract This paper outlines a model for the teaching of a project-based undergraduate course in Advanced Web Site Design. This model combines the major principles of systems analysis and design with the tools, techniques, and procedures necessary to guide students through a hands-on, systematic process of creating a well-designed, interactive Website. Also delineated is the identification of the fundamental skills the students should possess, appropriate Web development tools and pedagogy as well as whether or not to utilize a simulated project or a real-world project. Keywords: Advanced Web Site Design, Web design course model, Project-based Web course 1. INTRODUCTION The Internet and Web technologies have essentially changed the manner in which business is conducted, how services are delivered, how software applications are designed, and the way individuals live. Lehnert (2001) writes that the new millennium is a crossroads for the Internet and that over 50 percent of all Americans homes and more than 90 percent of all college students have internet access. This expansion of Internet technology has challenged information technology educators to develop courses related to the teaching of Web site design and development. These courses can be introductory in nature with a focus on a web authoring tool and possibly a graphics package to create an informational Web site. These courses can also be more complex and focus on the building of a dynamic Web site requiring interactive, data-driven Web technology. In either case, Lynch and Horton (1999) indicate that the Web site development process should follow a systematic approach that involves site definition and planning, information architecture, site design, site construction, site marketing, and maintenance. The course Advanced Web Design and E-Commerce as developed at Robert Morris University attempts to combine the major principles of systems analysis and design with the tools, techniques, and procedures that make every attempt to parallel those used by Web designers. The course is required for Computer Information Systems majors who have completed course work in introductory Web design, computer programming, and database design. This paper describes the features of this course. 2. COURSE PREREQUISITES Necessary prerequisites. Introductory web design course: Students should have previous experience in creating and publishing a Web site that includes text, hyperlinks, images, tables, frames, forms and possibility sound, and video. However, many introductory Web design courses rely solely on WYSIWYG (what you see is what you get) web authoring software such as Microsoft FrontPage or Macromedia Dreamweaver. Although this software allows for Rapid Application Development (RAD), it also hides the HTML from the Web designer. It has been the author’s experience that students with knowledge of only a Web authoring software package have difficulty when required to embed JavaScript, Visual Basic Script, PERL or PHP code into HTML. Conversely, those students with a working knowledge of HTML have far less difficulty and can easily learn a Web authoring package. For example, the primary emphasis of the introductory Web course at Robert Morris University is on the teaching of HTML and a secondary emphasis on web authoring software. The course utilizes the textbook/lecture approach and includes coverage of HTML, Cascading Style Sheets, JavaScript, XML, Graphics and other web media. This consists of two/thirds or roughly 10 weeks of a 14-week semester. The remaining time is devoted to coverage of the FrontPage and the management functions related to the Windows IIS Web server software. The students are required to design a personal web site and then publish the completed site to a Web Page link on the authors Web site. Object-Oriented Programming: HTML is a markup language and alone will not allow interactivity to a Web site. To request special processing on a Web server such as database queries, handling form data, or subscribing to a newsletter, a program running a Web server must accept and process data. Several common programming languages that accomplish this are Java, C++, Perl, PHP, ColdFusion, and Visual Basic including ASP and ASP.NET. Therefore, student exposure to a course that that focuses on object-oriented programming and design is necessary. At Robert Morris University, Visual Basic.Net is required for the Advanced Web Design Course. The author suggests that this course not only cover language elements, object-oriented design, and database access with ADO.NET in relation to Windows applications but also Web applications with ASP.NET. Database Systems: When the author initially designed the advanced web design course, only the Introductory Web Design and Visual Basic.Net courses were required. However, after teaching the advanced Web course for the first time and building two real-world, interactive Web sites, the use of relational database technology was crucial. Students who only had a limited exposure to database systems as commonly taught in an introductory information technology course were not as prepared as those students who had taken a database course and learned to create data models of user's needs, gain foundation skills in database design, and use standard Structured Query Language (SQL) to interact with databases. Optional prerequisites. Systems Analysis and Design: Those students who had an understanding of the system development and modification process were better able to evaluate and choose a system development methodology then those that did not. However, the degree of discrepancy between the students was not as severe as was the case with the database. Students can learn the design process in the Advanced Web course. Zhao (2003) presents a well-structured model that involves the following three major phases: front-and-back-end analysis, design and development, and web testing. Web Server Administration: This course should provide technical information and hands-on lab activities involved with administering a Web Server on the Internet or intranet. Topics may include web server overview, internet protocols and ISP connections, HTTP and FTP protocols, web server planning and O/S platforms, server configuration, client/server and GCI security. Graphics Design: This course covers the principles of design and layout centering on graphics, basic typography, and compositional principles. Many such courses work with Adobe Photoshop or the industry standard page layout program InDesign. 3. COURSE ORGANIZATION Researchers have investigated project-based learning in a wide variety of disciplines and settings and have generally found it to be effective in increasing student motivation and improving student problem solving and higher order thinking skills, addressing different learning styles, and providing students with an integrated learning situation. (Hutchings and Wutzdorff, 1998; Albanese and Mitchell, 1992; Buck Institute, 1999; Tretten, and Zachariou, 1995). Project-based learning, unlike the traditional textbook/lecture approach, motivate the students to do additional work, illustrate to the students the value of the material covered, and most importantly, provide practical experiences that enrich the student’s academic experiences. The following model illustrates the course steps, followed by a detailed discussion of specific issues regarding each step. 3.1. Student Self-Assessment Although this model applies to an advanced course and specific prerequisites are enforced, it is helpful to address the diversity of the student’s backgrounds entering the course. To assist the instructor in gauging the class before any instruction is undertaken as well as to later aid in establishing project work groups, the students complete a self-assessment at the beginning of the course. This self assessment asks students to rate their skill level as novice, intermediate, or advanced on criteria such as HTML, scripting languages, Web programming languages, system design and development, database design, graphics software, and operating system/Web server software. Although students can over-estimate or under-estimate their technical skills and a formal pre-test may be a better measurement instrument, the author has found that the student self-assessment is adequate if the students are made award that they are to be held accountable for their responses. If a student indicates an advanced skill level with graphics software, that student must know that during the web design process their expertise in graphics is expected. 3.2. Review Web Design Concepts Although this course model uses a project-based methodology, the textbook/lecture approach is followed over a three-to-four week period. The basis for the depth and scope of the coverage relies upon the Student Assessment in step 1. The relevant topics addressed can include the follows: HTML, Cascading Style Sheets, JavaScript, Web graphic design and Topology, Web Servers and operating system software, Types of Web Sites, Tools for developing Web sites, and Web design principles, and Web access of database systems. Students complete a number of assignments/exercises/quizzes. 3.3. Projection Selection The selection of an appropriate project is extremely important. This project can be simulated or real-world. The instructor creates simulated projects and acts as the user. The instructor, the student, the university, or a business can initiate a real-world project and the students work with an end-user. A simulated project allows for a great deal of control over the system requirements. However, the main thing to avoid is the selection of a project whose subject material is beyond the scope and interest of the students. Subject matter that is of interest to all students and that can be readily compartmentalized will permit a focus on the objectives that are most important for this class. Uncompleted simulated projects only result in lowering the grade of individuals within the group or the group as a whole. Conversely, because the requirements come from an actual end-user with a real-world project, particular attention must be given to scope and time management issues because the students have only a semester to complete the system. It is extremely important to note that another group, the instructor, or another student must finish uncompleted real-world projects later. A summary of the advantages and disadvantages of real-word and simulated projects are as follows: Real-World Project Advantages * Working with an actual end-user * Improves communications skills: interviewing, problem solving, conflict resolution, and oral and written communication * Projects have “real” meaning, not artificially invented * Promotes industry/university relationships * Potential employee source Disadvantages * Time consuming * Risk taking in a non controlled environment * Possible conflict with user * Incomplete project can be a major issue * Group conflicts Simulated Project Advantages * Working with a knowledgeable end-user (instructor) * Limited community involvement * Perceived “equity” among project groups * Incomplete projects not an issue Disadvantages * Minimal decision making and problem solving experiences * Lack of risk taking practice * Lacks external resources and contacts * Perception that end-user (instructor) has all of the answers This course has made use of both simulated and real-world projects. Each project has had no more then six components. Below is the scope of an initial handout of a real-world project with three components and a relational database completed during the spring 2004 semester. The initiation of the project was by a faculty member in the Robert Morris University business school who had his class develop a business model for an end-user and then had that end-user contact the author. A group of seven students worked on the project. The address of the completed site is http://www.petfoodindustryjobs.com I. Purpose of Project Develop a web-based careers site. Companies and Candidates can post their new job opportunities and profiles and process the payment by credit card. II. Web site Content (components) A. HOME PAGE 1. JOB POSTINGS – users searching for a new job. 2. POST YOUR PROFILE – users posting a profile. 3. COMPANY – companies posting new job opportunities. B. JOB POSTINGS (users searching for a new job) 1. Categories a. Sales/Management (Search job listings/ Post a Profile) b. Advertising, Marketing, Research & Development (Search job listings/Post a Profile) c. Manufacturing (Search job listings/Post a Profile) d. Pet Retail (Search job listings/Post a Profile) C. POST YOUR PROFILE (users posting a profile) 1. Costs to Post a profile 2. Profile information a. experience (limited to 75 words) b. position c. education background 3. Contact information (first name, phone number and e-mail address) 4. Information to process an application to post a profile. (Name, Address, City, State, Zip, Telephone, E-Mail, Credit Card Information) D. COMPANY (companies posting new job opportunities) 1. Cost to post new job opportunity 2. Company Profile information 3. Job Category 4. Job Responsibilities (limited to 50 words): 5. Required education 6. Geographic location of job 7. Information to process an application to post a new job opportunity. (Company Name, Name, Address, City, State, Zip, Telephone, E-Mail, Credit Card Information) E. Considerations 1. Anyone can view Job Postings. 2. Only companies who pay can view profiles. 3. Only companies who pay can post jobs. 4. Only candidates who pay can post their profile. 5. Joining the mailing list is optional. 3.4. Establish Project Workgroups The construction of a Web site is accomplished as a group as part of a Web development team. According to Mohler (1997) the team roles include technical designer, media designer, information design specialist, Internet specialist, and technical manager. Shelly, Cashman, & Rosenblatt (2003) list six diverse roles as Writer/Editor, Multimedia Developer, Artist/Graphic Designer, Web Page Designer, Web Programmer and Webmaster. The National Workforce Center for Emerging technologies (1999) list eight roles as Web Administrator, Web Architect, Web Designer, Web Page developer, Web producer, Wed Site Developer, Web Specialist, and WebMaster. Stein (1997) lists four diverse roles as Web Administrator, Web author, Web Script developer, and Webmaster. To assist the instructor in establishing work groups the Student Self Assessment administrated in step 1 as well as the instructor’s knowledge of the class gained from step 2 Review of Web Design Concepts can determine the experience each student has on a number of important criteria. Group size is determined by the class size and the number of project components of the Web site. However, a recommendation is to avoid groups that are too small or too large. Experience suggests that no more than eight per work group is an ideal number. For example, a breakdown of the roles of the group of the seven students who developed the Pet Food Industry web-based careers site previously outlined in Project Selection Step were: Graphics designer– one student Web page designer – one student Web programmer – two students Database design – two students Web author – one student 3.5. Establish Time Management Constraints The instructor and each project team must decide on time management issues. There are two ways to approach this: (1) by requiring that a specific component of the Web site be completed throughout the semester or (2) having the students manage their own time with a final due date. The first approach gives the instructor control and the second approach gives the students the responsibility for completion of the project. The author’s experience suggests that the first approach works best. The time constraints related to the aforementioned Pet Food Industry web-based careers site based on a ten weeks schedule was three weeks for analysis, five weeks for design and development, and two weeks for site testing and documentation. 3.6. Analyze Requirements Following the formation of work groups and the establishment of time management constraints, each project team conducts a needs assessment. This needs assessment closely follows the Analysis step in the traditional systems development life cycle (Shelly, Cashman, & Rosenblatt, 2003, Kendall and Kendall, 2003, Whitten, Bentley and Dittman, 2004). Data is collected from the end-user (real or instructor) pertaining to the scope of the Web site, which includes the purpose and target customers as well as the Web server needs in relation to expected site traffic and growth, database requirements, and graphics. During this step, the instructor’s role is that of a project leader and each group expresses the system requirements as objectives delivered to the instructor. The entire process should not take more than four weeks. 3.7. Design/Develop Web Site Once each group has gathered and analyzed content and the instructor approves that content, the process of designing and developing the Web site can begin. This step follows the systems design step in the traditional systems development life cycle (SDLC) and the instructor role is that of a project leader. How the design and development is accomplished is up to each group. For example, since each site will need to have a home page, often all group members will be responsible for its development. For content pages, graphics, and database design, members of each group may want to work individually or collaborate with another person. This development should take place locally whether that is selected machines in the schools’ computer lab, a test web server in the computer lab or on an individual team member’s personal computer. This is directly related the schools resources as well as the web hosting requirements. It is necessary for the instructor to consider several important issues relating to the design and development of the Web site pages. For example, to what extent will the instructor permit individual or team creativity? Generally, good Web design requires consistency. One negative side to consistency is the elimination of techniques from the learning process. One way to manage this is to promote consistency via the home page that will carry common elements on all pages created by using frames or tables. Beyond this each group could be permitted to be creative but maintaining consistency within their group as long as the creativity meets the requirements of the system. Each group is required to provide deliverables to the instructor marking progress and the design and development process should not take more than three weeks. The following is an example of a deliverable submitted to the instructor in relation to the Pet Food Industry web-based careers site previously outlined in the Project Selection step: Pet Food Industry Jobs.com Advanced Web Design/E-Commerce March 25, 2004 • Developed schema of entire website including database interactions • Created database with 3 tables to represent Candidates, Companies and Job Postings. • Design header and footer html files with links to pages on the website. Used a server side include statement to have them on all pages. • Modified forms and wrote all ASP code so far to write data to and retrieve data from tables in database • Created sign in form and wrote username/password validation code for members to sign in. • Created mailing list form on home page. Need to work on by group: • Method of payment • Search Form • Place style sheet on site with logo • Make sure DB is functional w/ insert, update, and deletes • Session variables for login 3.8. Test/Document the Web Site A deadline should be set for the completion of all pages approximately two weeks before the end of the semester. At this time, all groups post their respective Web sites to the Web server. In the case of a simulated project, the Web server may be the schools or the instructors. Conversely, with the Real-World project, the Web server may be the end-user’s own server or a commercial hosting service. Each group then will have approximately two weeks to "test" and document the web site. This testing should be on both the client-side as well as the server-side. 3.9. Evaluate Site/Student Groups The completed project, the contribution of individuals to each group, and the student’s knowledge on Web site design is the bases for grading of this course. The author has found the following breakdown to be most practical: Student knowledge of Web design: During Step 2 - Review of Web Design Concepts, the traditional textbook/lecture approach is used and the students complete a number of assignments/exercises/quizzes. These activities can comprise 30 percent of the final grade. Individual contributions to the group: Each student’s individual contribution to the group is the basis for another 20 percent of the final grade. Rather than having the instructor make this determination, individual group members will evaluate each other as per an anonymous evaluation sheet constructed by the instructor. Completed Project: The completed project will be 50 percent of the final grade. The deliverables the instructor has collected during the analysis when acting a project leader comprises one part. Another part is the degree of completion of the project based upon the overall requirements. 4. CONCLUSION One purpose of the project based model for an advanced web site design and e-commerce course is to offer Information Technology students advanced design principles that they can use to publish interactive, dynamic, durable content on the Internet. However, the course is more involved than just teaching students how to create pages and posting them to the Internet. It is a practical guide to enable students to experience Web site development in a realistic environment. If one of the objectives of an academic technology program is to develop systems, then it is necessary that at some point in their studies a student must experience this concept first hand. The described course model delivers a system related to a technology in high demand, strengthens student confidence, provides an excellent focus for discussions in interviews with prospective employers, demonstrates the difficulty and importance of working with a demanding time schedule, and enables students to participate in an actual group project. Such a course is never complete, and each semester revisions are necessary. The course is quite time consuming for both the faculty and the student, but the positive rewards are evident by feedback from students who have taken the course as well as the waiting list of students wishing to enroll. 5. REFERENCES Albanese, M. & Mitchell, S. (1993). Problem-based learning: A review of literature on its outcomes and implementation issues. Academic Medicine, 68(1), 52-81. Buck Institute (1999). Project based learning. [Online]. http://www.bie.org/pbl [8 May 2000]. Haggard, M., 1998, Survival guide to Web site development. Microsoft Press, Redmond, WA. . Hutchings, P. and A. Wutzdorff, 1988, “Experimental learning across the curriculum: Assumptions and principals.” New Directions for teaching and Learning, 35, 5-19. Kendall, Kenneth E, and Julie Kendall, 2003, Systems Analysis and Design Sixth Edition. Pearson Prentice Hall, Upper Saddle River, NJ Lehnert, W., 2001. Web 101: Making the ‘Net Work for You. Addison Wesley University Press, Reading, MA Lynch P. J. and S. Horton, 1999, Web Style Guide: Basic Design Principles for Creating Web Sites. Yale University Press, New Haven, CN Mohler, J., 1997, How to become a Webmaster in 14 days. Sams.net, Indianapolis, IN Shelly, Gary. B, Thomas J. Cashman, and Harry J. Rosenblatt, 2003, Systems Analysis and Design Fifth Edition. : Course Technology, Cambridge, MA. Stein, L., 1997, How to set up and maintain a Web site. Addison Wesley University Press, Reading, MA. Tretten, R. & P., Zachariou, 1995, “Learning about project based learning.” Paper prepared for the Autodesk Foundation, San Rafael, CA. Whitten, Jeffery L, Lonnie D. Bentley, and Kevin C. Dittman, 2004, Systems Analysis and Design Methods Sixth Edition. McGraw Hill/Irwin, New York, NY. APPENDIX A Name HTML System Design Script Lang. (Java/ VB) Web Prog. (ASP, (PHP, PERL) Database Software (Access/ MSSQL) Web Authoring software (FrontPage/ Dreamweaver Graphics Software OS (Win, Linux, Unix) Web Servers (IIS/ Apache) APPENDIX B Advanced Web Site Design and E-Commerce: Peer Evaluation The purpose of this evaluation is to give credit to those students who did their fair share of the work in the group. Conversely, if any team member did not do their fair share (for whatever reason) then that student should not get full credit for the group work. Be assured that all data on this form will be held in confidence. Include yourself in the ratings. Use the following to guide your selection of numerical ratings: ATTENDANCE AND COOPERATION: 5 = Was a real leader; always attended, cooperation was superior 4 = Attended regularly; good cooperation; a team player 3 = Attended fairly regularly; did what was required but no more 2 = Missed several classes and did the minimum amount of work 1 = Poor attendance and/or poor cooperation. ACADEMIC CONTRIBUTION: 5 = Enthusiastic; a lot of good ideas 4 = Contributed greatly to the team; did more than his/her share 3 = Had good ideas from time to time; an average performance 2 = Probably was either too quiet or slightly disinterested to be an effective academic contributor to the team 1 = Contributed little to the team. Names of Group Members Attendance & Academic Total Put your name on top line Cooperation Contribution Points (5,4,3,2,1) (5,4,3,2,1) _________________ _________ + ________ = _______ ___________________ _________ + _________ = _______ ___________________ _________ + _________ = _______ ___________________ _________ + _________ = _______ ___________________ _________ + _________ = _______ ___________________ _________ + _________ = _______ ___________________ _________ + _________ = _______ ??