CSC 105

Project 1: HTML Design with Style Sheets

Due at 11:59 p.m. on Monday, November 21  [Collected automatically from Aurora]

Contents

  1. Overview
  2. Project Proposal
  3. Your Design Document
  4. Required Elements
  5. Project Details
  6. Grading
  7. Deadlines

Overview

The goal of this project is to get you started in thinking about web site design in a holistic, organized manner, using some of the design principles and interactive techniques taught in class. You will design a web site from scratch, beginning with the goals of the site and using those goals to drive the construction process. Along the way you will be expected to incorporate a number of required elements. (Although the inclusion of required elements may seem to constrain the design process somewhat, the elements you will be required to use are general enough to be applied in many ways to serve the needs of a particular project.) You must describe the structure of your site and the development process you followed in a design document that you will write and attach to the site.

Topic
You may choose any topic you wish for your site, keeping in mind that it must in some way incorporate each of the required elements. If you like, you may take a look at this list of ideas to get you started in choosing a topic. The subject matter of your site may be real or fictional, but it is best if you can justify your choice by some compelling need. If you get the motivation right, it should be easy to decide what content belongs in your site.

Some sites don't make for a good project because they are either scaled poorly or have no clear reason for existing. For example, a site about the city of Paris would have to be huge in order to comprehensively cover its subject. A small site consisting of a few small miscellaneous Paris-themed pages isn't really serving any purpose given all the other information out there about Paris. Making such a site exciting and compelling to visitors is really difficult. Try to stick to topics (real or fictional) where there are few other sources of information, or one in which you have special expertise that might interest an audience. For example, you could present one specific aspect of Paris for people with a particular interest - a guide to Paris for butterfly collectors, for example.

Partners
You are to work on this project with a partner. (In special cases the instructor may allow students to work alone.) Please consult the guidelines for pair programming, which applies equally well to web development projects. You may use any web development tool (such as Dreamweaver) that you like. Your design document should clearly state any software tools used in the creation of your web site. (For example, a typical site might use Dreamweaver and Photoshop.)

Constraints
The following should go without saying, but to be clear about it, please remember the following parameters. The content of your site must not violate any of Smith's policies on computer use, nor any local, state or federal laws. We reserve the right to remove such material if present. (Content that is removed will not count during grading.) It is further expected that you will avoid material that, while not breaking any rules or laws, are likely to be offensive to other students in the course who are required to view your site as part of the course. Use your common sense, and consult with the instructor if you are unsure.

You may use an effect you like from any source, including the projects of other students in the course. However, if you use material from such a source, you must (1) note the debt in your design document with a link to the original, and (2) adapt it as necessary so that it fits smoothly into your site and is more than a verbatim copy of the original. For example, it is very reasonable to use a published technique to achieve a two or three column liquid layout, but you would then choose your own color scheme and typography rather than taking them wholesale from a prepared design. In general, the merit of your page will be judged based upon the elements that you have added. A web site consisting entirely of unadapted content and effects taken from other sources will not receive much credit during grading.

As with any intellectual endeavor, you should properly credit your sources of inspiration. The design document should identify and make clear any content that was developed in whole or in part by others. Proper attribution is required in a range of situations, from the canned effects inserted by Dreamweaver and the like, to instances where you have made substantial modifications and additions but began with work belonging to somebody else. For more on this topic, read the guidelines on appropriation.

Setup
Before starting on this project, be sure you have read and completed the instructions for setting up your account and submitting your work. All the files for this project should go in a folder named project_1 (note the underscore) inside the public_html folder of your course account. The file permissions must be set so that your web site is visible. If you have questions about how to set up the folders in your aurora cite, please contact the course staff.

Project Proposal

The first step in designing your site is to do some planning on paper. This will form the project proposal that you will turn in. Begin by deciding on the purpose of the site you would like to build, and its intended audience. Then craft a mission statement to describe these ideas concretely.

The next planning step is to create a more complete list of objectives/requirements that begin to break down the mission statement into manageable chunks. The specific objectives you choose will depend greatly on the purpose of your proposed site. You should consider listing the pieces of information you want the web site to present, the tasks that you want a user to be able to accomplish, and any other constraints that may apply (for example, short download time, no scrolling required, etc.). The list of requirements should as a group be sufficient to ensure the fulfillment of your mission statement, and should also serve to get you started on the construction of the actual pages.

For example, if you were creating a site for a business, your requirements might look something like this:

Mission statement
Create a web site that will grow our business and establish customer loyalty.
Requirements
  • Present professional, inviting face to customers and casual surfers
  • Provide information on all products
  • Explain company philosophy and strengths
  • Provide contact information and directions to store
The requirements should suggest an organization into individual pages (or groups of pages for a larger site). In the example, the last three points might each be handled by a single page for a small business, while the first requirement will affect all pages, but most particularly the index page.

The last step is to lay out the site on a piece of paper, showing where different content blocks will appear (i.e., navigation bar, logo, main content area, etc.). Build this layout with an empty document and CSS file before you fill in any content, and then use it for each of your pages so that it remains identical across your site. When you write the final design document for the assignment (see below), you will discuss the structure you chose and why you picked it. (Note that you can change your mind about where things should go; what you turn in with the proposal is merely a first concept.)

If your pages will not all be interconnected, you may also wish to draw a diagram showing the logical relationships or anticipated flow between pages. For example, the web site for a small nonprofit organization might look like this:

This diagram shows 5 pages and the thematic relationships between pages. Such a "birds-eye" view helps you understand how users may navigate through your site.

The project proposal to hand in consists of the mission statement, list of requirements, and the page layout diagram, plus optional link sketch.

Required Elements

The main public_html folder of your aurora account must have an index.html file with your name in the title and two links related to this assignment: one to the project 1 home/welcome page and one to your project 1 design document. This landing page really belongs to the course as a whole rather than this project, but you are required to create it now in preparation. It serves a very important purpose by directing me to the proper entry point for your site. Eventually this page should include links to all your lab work, and later in the course you will also put links here to your project 2 pages. When finished it will look something like this example.

To organize your files for this and future projects, I suggest creating a folder called project_1 within public_html and putting your entire project 1 web site inside it. This will keep all the files related to this project in one place separate from your other work. The top level index file described above will contain links into your web site in this folder, so that I can find and grade your work.

The content for the project is left up to you. The site you create should have an entry page (also given the default name index.html; thus there will be one index file inside public_html and another within the project_1 subfolder) with links to at least three other pages that you designed, plus your design document page as described below. You must use relative URLs to link between the pages of your site, because the pages will be copied elsewhere for grading (and the absolute URLs would not properly point to the copied pages). Your site design must somehow incorporate the requirements below, and the design document must explain their use. Please make sure that each required element is addressed in the design document, and is easy to find in the site, preferably via a link to the area where the requirement is satisfied. A minimal web site that contains each of the required elements will receive a passing grade. However, the top grades will be awarded to sites that demonstrate more sophisticated use(s) of each element, where the additional complexity serves a legitimate design purpose as spelled out in the design document.

Design document
A page that documents all aspects of your site, described further in the section below. This portion is not graded directly, but serves as my guide for grading the rest of your work.
Style sheets
All pages in your site must use a single style sheet. You should use multiple different types of style rules: at a minimum, one example each of a standard selector, a class selector, an id selector, and a nested selector, each used appropriately. (Remember that id rules apply styles to unique elements, while class rules are for categories of elements. Think in advance about what classes of formatting will be used in your pages.)
Navigation aids
Your site must incorporate one or more navigation aids to help users find their way around the site. Typically, this is accomplished through the inclusion of a navigation bar in a consistent spot on each page, although other mechanisms are possible. Make the aids easy to use with appropriate visual feedback like rollovers.
Structured layout
Your pages should lay out its components in a manner that enhances the site's mission and feels more structured than the default single scrolling content area. You can experiment with multiple columns, fixed elements, etc., but remember to think about and document how your choices serve the design goals of the project. Typically, all pages within your site should share a consistent look and feel, and be formatted in the same manner unless there is some specific reason not to. Elements should not shift around from page to page without reason.
JavaScript
Demonstrate the use of JavaScript to create some sort of variable content. This may be based on the date, for example, or upon some form of user input, or may be some form of randomization. Try find something that fits with your site's goals. More advanced uses and those that fit well into the site design will receive the highest grades. (Note: since we will begin learning JavaScript only in the second and third week of the course, you may need to design your site so that you can add the scripted effect later. For example, an image that is supposed to be randomly chosen could be static in your initial design, and replaced with a script once you have learned to do so.)
Images
Use and incorporate images within the pages, for informative, decorative, and/or functional purposes. For example, you may wish to create a set of graphical icons to help users navigate. If you are not familiar with Photoshop or some other image manipulation tool that will help you to do so, the staff in the TLC can help you with this. (Note that having unattractive graphical elements will not necessarily hurt your grade, so long as they are legible and serve a useful function. This is not an art class.) Like the other elements of the page, your images should be carefully placed within the layout, using positioning or by floating them within the text.
Links
Incorporate hyperlinks throughout the material in addition to the standard navigational aids. This means that links are clear but not overly conspicuous, and that there are enough links that the user can find what she wants but not so many that she becomes confused. You should include internal links within text where appropriate as a cross-reference. All links should provide visual feedback to show that they are an active element by changing appearance in some way when the mouse moves over them. Links that are part of the standard navigation aids should have a consistent appearance whether visited or unvisited.

Bear in mind that this is not just a 'coding' exercise with the goal of showing off as many techniques as possible. Your attention to design (use of layout, color, shape, user feedback, etc.) is a crucial element of the whole process. Each element should fit together into an integrated whole.

Your Design Document

A key part of your assignment is the design document. This should lay out in detail the thought process that led to your design -- from initial goals to specific choices made along the way. Don't skimp on this part of the project, as your grade will be largely determined by the effectiveness of the design document in showing off your work. If you do great things, but do not describe them clearly in your design document, you are likely to be disappointed in your grade.

Your design document must include the name(s) of the site authors in the title.

Begin with your mission statement and the major design points mentioned in class -- layout, colors, whitespace, navigation, and interaction. Describe how you used each to enhance the site's effectiveness, with specific examples where possible. Point out any ideas you are particularly proud of.

Next move on to the required elements. The design document should state where in your site you used each required element (with links where possible), and should explain what effects you were trying to achieve along with the techniques you used to do so. If you adapted HTML from somewhere else, your design document should cite the source, with a link if possible, and explain what adaptations you applied. (Simply copying a design from elsewhere is not acceptable; you should instead try to identify the basic idea that you are trying to capture and then modify it to suit your own needs.) Your design document should be easily accessible from the index page of your account, and should be clearly named with the assignment number and the fact that it is the design document. For some guidance on design documents you can check out the sample sites on the course web site. Assignments without a design document will receive very low or failing grades.

Ideally, you and your partner should develop each part of your web site together. If there is any deviation from this pattern (for example, either partner developed a portion of the site alone) then the individual responsibilities must be clearly specified in the design document.

Project Details

There are many possible ways to go about developing your web site, but probably the easiest is to work with a local copy on a network drive or some removable storage medium. When you are finished developing your project, you must publish all the files to the web by putting them in the appropriate directories of your 105b-xx account. WinSCP (or Fugu on the Mac) is probably the easiest way to accomplish this. Your web sites will be automatically collected from the server on the due date. Files that are not published properly cannot be graded and will thus receive a zero.

The basic process you should follow to complete this assignment is

  1. Design your site on paper. (This is the design proposal you will turn in early.)
  2. Edit a blank page of your site using a text editor or program like Dreamweaver until you have the basic layout you want. Then make copies of the template for each of your content pages.
  3. Fill in or edit the content for each of your pages.
  4. Save the pages.
  5. View your site with a browser.
  6. Repeat steps 3-5 until you are satisfied with the result.
  7. Publish your pages by uploading them to aurora and make sure that they are visible through your course account links. If any content doesn't show up, fix problems with file permissions and capitalization.

Although you are not required to design for browser independence in this assignment, you should test your site using at least two different browsers (e.g., Chrome and Firefox, or Firefox and Internet Explorer, or Firefox and Safari, etc.) Note in your design document which two browsers you used and any differences you noted in the way your page was displayed. You should also test how your page displays in browser windows of different sizes. The layout should not break for extremely small or large windows, but should gracefully degrade.

Grading

Grades will be divided into two equal parts: a grade for technical merit, and a design grade. Each grade will be based primarily on the presence and usage of the required elements in service of the web site mission. The technical merit grade reflects mastery of the technical elements taught in the course, including innovative and/or unusual use of techniques taught in class. The design grade reflects the integration of the required elements in service of the goals of the web site, as well as their effect on the overall layout, appearance, and user experience. The design document should point out any significant technical or design elements of the page for consideration. In general, meeting the minimum requirements as described in this document without errors is sufficient effort to earn a "B" grade. Additional factors considered for higher grades include creative or fluent use of the required elements, the incorporation of additional elements or techniques beyond those required, and close attention to details of style and design.

Adding extra content that does not also introduce new design elements will generally not change your grade. So for example, if your site design calls for 20 pages that follow the same template with similar information presented in exactly the same manner, then there is no need to flesh out out more than one of the twenty pages as an example.

Deadlines

1:10 PM 02 November 2016 Project Proposal (on paper)
The proposal should consist of a mission statement (including both purpose and audience), a list of objectives/requirements, and sketches of the page layout(s).
1:10 PM 14 Novemeber 2016: Project Draft (oral presentation)
By this point you should have created enough of your web site to make a presentation in front of the class. Everyone will present their ongoing work, and receive comments and suggestions from the rest of the class. Make sure that your page is uploaded to aurora in advance so that you are ready to present without any delay. If you do not plan to be in class on the day of the presentations, you must make alternate plans with the instructor.
11:59 PM 18 Novemeber 2016: Completed Project (electronic collection)
The project is due at midnight to discourage you from staying up all night. Make sure your files are posted to aurora and fully visible through the appropriate course page web link. Check this well in advance so that you have time to get help if the pages are not showing up properly. All readable files in your public_html directory will be collected automatically from the web server at the specified due date. It is your responsibility to make sure that everything is in the proper place, properly linked, and publicly readable at the time the files are collected. Changes and/or additions to the collected work will not normally be permitted after the deadline.