Website Project

Learning goals

For this assignment, you will build a realistic-size sample web. You will build and revise this website in stages so it expands and improves throughout the middle of the term. The assignment's goal is to give you practice with a variety of web-construction and editorial techniques in a structured, efficient manner.

This assignment is open-ended, and a substantial part of your grade will be based on how much creativity and originality your website contains.

Learning goals about setting up a website:

• Learn to create pages, link them together appropriately, and modify the website's organization by renaming pages, adding new pages, and deleting pages.
• Learn various ways to build links in web pages.
• Discuss formatting methods to improve the appearance of your website.
• Explore how to link pages in your website with navigation bars.
• Know the difference between relative and absolute addresses in building web links. Choose the right kind of link for the task at hand.
• Learn how to make an interactive website by using a feedback form to allow the reader to easily send you an email message filled with date lifted from the form.
• Learn how to edit a website at one location (a development site) and publish the website at another location (the publicly viewable site).

Videos about Nvu

I decided to record some videos showing how to get started with the process of building and publishing a website with Nvu.

	Getting started: Building pages, link bars, adjusting file names and page titles. (13 minutes)
	Basic versus Final website; publishing your website. (8 minutes)
	Using tables to hold things in position, putting in an OSU Disclaimer (7 minutes)

Using Graphics

As part of your website project, you should become comfortable editing graphic images with an image editing program like Paint Shop Pro. I recommend looking at the ideas about Paint, Draw, and Image Editors in this Graphics area.

You may also want to listen to these videos in which I talk with Donna Herron, another BA271 instructor.

	Using Paint and Image Editing Programs Donna Herron and Dave Sullivan discuss how to perform image magic with paint and image editing programs. (8 minutes) Windows Media
	Creating and Using Animated GIFs Donna Herron and Dave Sullivan provide tips for recording good videoclips of yourself ... and they mention bloopers they have seen students make in prior terms. (5 minutes) Windows Media

If you would like to make an animated GIF as part of your website project, I recommend using PaintShopPro's Animation Shop. This program is not particularly well designed, and lots of other programs exist to create animated GIFs. Nonetheless, because this program is conveniently located on the College of Business network, as long as you are located in Bexell Hall, I recommend giving this program a quick try. With reasonable guesses, you should be able to create an animated GIF with relatively little fuss, particularly if you use its built-in animation wizard.

Choosing a website editor

Some website development tools are incredibly powerful and take all the guesswork and fuss out of constructing a business or e-commerce website. This sort of "online store in a box" development tool might use a wizard to ask about items to be sold and will automatically create an online catalog complete with shopping baskets, credit card validation, and a host of other handy features. As long as you know that this sort of powerful tool exists, then if you decide to set up actual business website, you will know to choose a powerful website editor.

In this class, I want you to create your website without using such powerful tools to automatically generate an entire website or link all pages together. Instead, I want you to learn how to create web pages and link them by hand. By way of an analogy, consider a wood working class that focuses on the basics of using hand tools well. In this sort of class, it would be considered unethical to build and submit a wood working project that was constructed with power tools and nail guns.

One advantage of using a fairly simple website editor is it will focus your attention on the most important issues: organizing ideas into a relatively simple and understandable collection of web pages, writing well, and illustrating your web pages with appropriate images.

We will use Nvu at the in-class example of how to build and link web pages for this assignment. You do not have to use Nvu as your website editor -- feel free to use other web construction tools, such as Microsoft FrontPage or Macromedia DreamWeaver. The choice is entirely up to you. But if you choose to use another tool, then you should not use its features to automatically create web pages or navigation bars to link the pages together. Also, since we need an example program to use in BA271, the midterm exam will ask you to be able to perform basic website construction and maintenance tasks with Nvu.

Selecting a topic

Your first task is to choose the content to put in the web pages. One possibility would be to build a set of web pages that would function as the web site for a small local business. Caution: If you build your website about a commercial business, you must disguise its name (such as building a site for "Goto's Sandwiches" rather than "Togo's Sandwiches"). I don't want anyone to confuse your class project with a real business web site. Alternatively, you could build a set of web pages about nearly any professional business-related topic that you want to research or document. Do not build your website about personal or hobby interests, such as "places I like to hike" or "my favorite pubs."

My first choice is to have you build a website about an actual business or organization. To help you think of possible topics, here are some ideas that have worked well in the past:

• Build a website about a business owned by a relative, such as a brother, uncle, or your mother.
• Build a website describing the family farm or vacation cabin.
• Build a website about a nonprofit organization, such as a club, sorority, religious group, athletic team, or theatre.
• Build a website about a business where you work.
• Build a website that describes the educational background and research interests of a faculty member at OSU.

All these options have a huge advantage over trying to invent a project out of your imagination: few people have an imagination as creative as the lively facts that are readily available in the real world. You will find it far easier to collect information and organize your website if you base it on an actual entity.

Also, it is against the law to use university computing facilities for commercial gain, so you should not build a commercial website directly as this class project. However, you can easily sidestep this restriction if you build your class project using an alias name (like "Goto's Sandwiches") that can easily be replaced later with the actual business name. Still in doubt about what to do? Talk with me ... after asking some questions to collect information about your interests and life, I often can suggest suitable topics for your website project.

Decide on the website's goals

The most important step in any development project is to carefully define what the project should accomplish. So you should begin by thinking through what your website's goals will be.

• How will it add value to the organization?
• Who is the target audience (such as employees, suppliers, advertisers, managers, or athletes)?
• What methods will be used to attract attention to the site, keep it lively and interactive, collect information from users, or provide useful information?
• Will the site change any current business practices?

By answering this sort of question, you focus attention on creating a site that can make substantive improvements.

Publishing your website

Nearly all development projects in the Information Systems field go through various phases. For example, projects typically go through a system life cycle with problem recognition, feasibility study, development, training, implementation, revision, and abandonment phases. The exact procedure for moving from one phase to another varies from firm to firm, and larger firms typically have rigidly defined milestones that separate each phase. The construction, maintenance, and publication of a corporate website usually involves a similar development cycle.

To model this process, I want you to develop your website in a relatively private part of the college's Cob-Storage file server and then publish your website to a more publicly available location on the college's web server.  This will duplicate the process of writing and developing off-line, followed by rolling out a finished product. It will also have the advantage of storing your work in two locations. Thus, you will be forced into creating a back-up copy of your work.

Creating a development website on Cob-Storage

After deciding on content for your website, you will use Nvu or another website editor to construct your website.  You will build a collection of web pages in your p:\classwork\ba271 area inside a folder named "website". This area will hold the developmental copy of your website. You should use this area when you are writing, creating, editing, and revising your website. The home page of your website should be named "index.html". Thus, your website's home page for development purposes should be located at p:\classwork\ba271\website\index.html. If your Username is STUJ123, then this means your website's home page will be located at \\cob-storage\studentpdata\stuj123\classwork\ba271\website\index.html. 

Files placed in your Classwork folder on the college's file server are quite private -- other students cannot read or view these files. To make your website publicly available, you will need to move the entire website to

Publishing your website

The university has given you two different locations where you can publish a website:

• You can publish a website by moving the entire folder containing the website to a specific location on the College of Business file://cob-storage.bus.oregonstate.edu/studentwebdata  area. All files in this area automatically become web pages. For example, if a page has a name similar to file://cob-storage.bus.oregonstate.edu/studentwebdata/sullivan/website/index.html, it will immediately be available at http://students.bus.oregonstate.edu/sullivan/website/index.html. Because index.html is a reserved name for the default web page in a folder, the website's home page would also be available at http://students.bus.oregonstate.edu/sullivan/website. 
• You can also publish websites with your ONID file storage area. Since I haven't discovered a reliable, easy-to-explain method of publishing websites to your ONID area (it isn't hard to do -- I just haven't found a method I trust will always work from written instructions), for this assignment, I will have you publish your website to the college's cob-storage web area.

To publish your website to the college's web server:

• Use Nvu or another website editor to construct web pages and links between the pages in your initial website area at P:\classwork\ba271\website.
• Continue to create pages, write, edit, and revise the website in your classwork folder.
• When you want to publish a copy of your website where others can see it (or when you want to make a back-up copy of your website), then make a copy of your entire p:\classwork\ba271\website folder at \\cob-storage\studentwebdata\name123\website, where you replace the "name123" with your Username. 
• Verify that you placed the published version of your website in the right location by checking to see whether your web pages can be accessed from the Student Pages portion of this BA271 website. In particular, click on your name in this Student Website listing to make sure we will be able to find your work.

If for some reason your web pages cannot be accessed from the Student Pages: Website Project page and you cannot figure out how to fix the problem yourself, then send a message describing the situation to Dave Sullivan via e-mail, or drop by my office, or ask for help during one of the help sessions.

What is the "Basic Website" versus the "Final Website"

The Graded Activities page lists both "basic website" and "final website" due dates.

• The Basic Website should include your first-best effort to complete the assignment. Thus, your basic website should contain everything you think should go into the final website. It needs to be at the correct location of our network, which you can check by clicking on the appropriate Student Pages link.
• The Final Website will contain a finished version of the entire website project. It also needs to be at the correct location on our network, so you should make sure all your revisions have been correctly published by clicking on the appropriate Student Pages link.
• Why have two due dates?
  • I want you to complete this project by the Basic Website due date, but I also want to give you some time to let the site mature before beginning the final grading process. So you will be able to extend or revise your website before the bulk of grading occurs. I view this sort of like letting wine age in a barrel before drinking -- good things take some time to mature fully.
  • Your basic website will be looked at by your peers in a Peer Review process. This is likely to give you useful ideas about what to extend or revise for your website's final appearance and content.

General guidelines about what to put in your website

When thinking about what to put in your project, you should consider both technical and content issues.

Relevant technical questions will include:

• Do your web pages have links to other relevant web areas? Do all the links work?
• Do they make good use of headings, lists, and graphics?
• Have you included images that were scanned on a scanner? Here are instructions for using the college's scanners.
• Did you build an appropriate feedback form that sends email to your personal mailbox?
• Are the pages in your website organized in a logical way, and are they linked appropriately?

Relevant content questions include:

• If you chose to build a website for a local business, did you adapt the site appropriately to that business' needs?
• How closely did you stick to the initial structure created by the Corporate Presence Wizard? In general, the more changes you make to the site's structure and the names of pages, the better. For example, few business have generic "Products" and "Services", so you should consider creating pages for "Location", "Staffing Needs", "Power Tools", or other site-specific purposes.
• Are your thoughts clearly expressed?
• Did you build interesting facts and descriptive material in your web pages?

Specific Requirements

The overall goal of this project is to create a useful, original website in support of an organization or professional activity. Items listed below represent specific minimum requirements, but they will not result in an "A" project. This project will be graded subjectively based on writing quality, originality, usefulness, and other factors that require the use of wisdom and experience. It will not be graded based on "how many pages" you have in the website. Copy-and-paste commands make it easy to add more pages to the site. Adding value to a site is harder.

1. Your website must be published at two locations: a development site and a published site.
   • The home page of your development site must be file:///P:/classwork/ba271/website/index.html.
   • The home page of your published site must be stored at \\cob-storage\studentwebdata\name123\website\index.html, where name123 is replaced with your College of Business Username.
   • Make sure both copies are stored at the correct location by clicking on your Username in both the [Development Site] and [Published Site] columns of this BA271 -- Student Pages -- Website Project page.
2. Check that your website looks correct to other people. Sometimes a web page will look correct to the developer -- but its images won't appear when anyone else views the page. This can happen if any of the image-source links buried in the web page point to absolute addresses that are only available to the developer. To find out whether your website has this sort of hidden problem, log on a computer with your ONID name rather than your College of Business name. Then look at the published copy of your website. Do all of the pictures appear as expected? Also check that the page will continue to look reasonable when you resize the window to be wider or narrower.
3. Word Count. I dislike the idea of telling you how much to write because quality is a lot more important than quantity. Nonetheless, you should write at least 750 words of original content in the pages of website. Please consider this a minimum, not a recommendation.
   Caution: Anything that you copy from another location needs to be flagged in an easily understandable manner. "For example, you might put it in quotes, like this sentence." Alternatively, your Sources page might explain that any text in dark blue was copied from another location. That way we will know that dark blue text came from elsewhere, and black text was written by you.
   Suggestion: One way to know how much to write is to copy a block of text and paste it into Microsoft Word. Then give a Tools-Word Count command. Another way is to compare what you have written to this page which as about 1250 words. I just tried that operation on this page and found it has around 3,900 words.
4. All pages in your website should include a link to OSU's standard disclaimer. As an example, you might look at the disclaimer at the bottom of this page. A simple way to meet this requirement would be to copy the footer from the bottom of this page, paste it into the pages of your website, and replace my name and email address with your name and email address.
5. Your website must have a Goals page. After looking at the home page, this will be the next page for us to read when we begin evaluating your site. Make it easy for us to find this page by building a [Goals] link into an obvious spot of your home page.Your goals page should describe what you want the site to accomplish overall. Explain why you picked this project's topic. Explain who will be the site's target audience. Tell how the site will add value to the organization. In large part, we will evaluate your site based on whether it meets the objectives that you describe in this section.
6. Your website must have a Sources page. This page will describe where you obtained the material for the site. A formal bibliography style is not as important as accurately identifying which parts of your website you constructed and which parts were copied from elsewhere. Thus, if you copied a bunch of photographs from another website, and you can no longer remember where — that is OK as long as you explain the situation. Take enough time to clearly explain the sources of information for all parts of your site. As a counter example, you should not simply list a bunch of websites as "sources of information" and expect us to guess at what material you used from them.
   Caution: Anything that you copy from another location needs to be flagged in an easily understandable manner. "For example, you might put it in quotes, like this sentence." Alternatively, your Sources page might explain that any text in dark blue was copied from another location. That way we will know that dark blue text came from elsewhere, and black text was written by you.
   Note: Accurately disclosing your sources of information is critical. We need to know what you created versus what you have copied from elsewhere. Your Sources page must make this clear. If you fail to credit others for material you copied from other locations, I am likely to file a formal complaint with the university based on your violation of academic honesty (plagiarism). If you would like to know more about how this works, I recommend reading more about the University's Office of Student Conduct.
7. Your website must have "content" or "body" pages. A content page might show a map, describe employees, list upcoming events, or provide contact information, so they might have names like "Directions", "Upcoming Events", or "About Us". Build content pages that make sense for your target business or website's topic. The content pages do not necessarily need to be complete. For example, if you are building a website to support a realtor's office, and you thought the finished website should have several hundred pages that show each home offered for sale, then you might prepare a sample page showing what a typical listing would look like. If your website is this sort of prototype, then please place explanatory text that describes the unfinished portions of your site in italic type like this sentence. If your website should have interactive features that would require programming or more advanced development methods than are taught in BA271, then explain those features in paragraphs of italic type.
8. Your website must have a "feedback" form. This form should be part of a page in your website that will collect information. For example, your website's form might be embedded in a page named Product Orders, Reservations, or Join Our Club. Feedback forms are one of the most popular ways to make a website interactive because they gather information from those who visit the site. Forms make a website interactive and can collect customer orders, customer inquiries, gather feedback, and so on. For the website you will create, when someone fills out the form, it should send an email message to your College of Business mailbox. 
   Adapt the form to ask appropriate questions given the rest of the content in your website. For example, you might collect information from prospective clients about the price range of homes that they want to buy. This page explains how to get forms to send you email.
9. Your website must have a Photos page. This page must contain at least one photograph that you captured yourself with a digital camera or scanned with a scanner. This requirement is generally unrelated to the content of your website: I want to make sure everyone has converted images into photos in a web page. You can meet this requirement by using your own equipment, or you can use the college's scanners. The college doesn't have digital cameras for students to use.

   To explain this requirement better, assume that you have numerous photographs that you took with a digital camera scattered throughout your website. You still would need to have a Photos page, but it might contain some or all of the same images found elsewhere. Thus, your Photos page acts like your personal pledge that its images are ones you created yourself.

   • Use Nvu (or some other web-page editor) to create a page in your website named photo.html. Make sure your photo.html page is stored in the same folder as your index.html home page.
   • Your photo essay (photo.html) page should have a similar page background, headings, title, and borders as the rest of the website's pages. Include your picture or pictures and write appropriate captions for the pictures. You need to include only one photo in the page, but more photographs are welcome.
10. Your website's home page must have easily identifiable links to your Goals, Sources, and Photos pages. You can use either of two ways to meet this requirement: build these links into your website's "Link Bar", or place these links in a clearly identified section of text in the home page.

This website was created and is maintained by Dave Sullivan.
[College of Business Home Page] [OSU Home Page] [OSU Disclaimer]