Tan 1 CSC122 Web Site DesignFall 2014

Individual Web Site Project

PurposeYou are to design, develop, and publish a web site using recommended design practices. Your Project will demonstrate mastery of the web development skills and concepts learned in this course.

You are required to publish your website on the Internet. Your web site might be about a favorite hobby or subject, your family, an organization or club you belong to, a company that a friend owns, the company you work for, etc.

The project must be your own design and be completed by you — the use of free or purchased web site templates are not permitted (for example, those found in Dreamweaver, purchased or free, blog or social networking templates such as Drupal, WordPress, Blogger, Facebook as well as the textbook's Case Study Lab). If it is perceived that a web template has been used, the project grade will be no higher than "below average" (D). 

Students sometimes wonder about what a "page" should contain. The answer is that to count as a "page" in your web project, a web document must be designed in a manner consistent with your site and contain content of value that includes text and images. Web page documents that have little or no content of value to your intended audience or consist only of an image with minimal text contents or a PDF will NOT be counted as a "page".

Project MUST contain (at minimum) One (1) home page and at least six (6) (but no more than eight (8)) content pages; note that the splash page does

not count as one page; a page with the same page structure but in two different languages count as one page One (1) external style sheet (CSS) which contains a minimum of ten (10) style rules Each page must contain appropriate information (including text and images) that provide value to the target

audience Each page must pass the W3C Markup Validation Service located at http://validator.w3.org The external CSS file must pass the W3C CSS Validation Service located at: http://jigsaw.w3.org/css-validator Each page must contain appropriate page titles One (1) table utilizing data effectively One (1) e-mail link At least two (2) external links Use of HTML5 elements Use of CSS3 properties Use of W3C Accessibility components

Project must NOT contain Table based page < IFRAME > based page Image based page (where the page contains little or no text or content other then images) Spry Widgets (Dreamweaver) FONT tag or inline, embedded, physical or logical styles JavaScript jQuery

Milestones1. Topic Approval (must be approved before moving on to other milestones)2. Planning Analysis Sheet & Site Map & Wireframes for all pages3. Project Status Update 14. Project Status Update 25. Publish Project & Presentation

Your web site project will be evaluated on the following criteria: Accomplishment of Project Objectives Contains Required Elements

Copyright © 2012 Terry Felke-Morris

Tan 2 Application of Design Principles Visual Appeal

Project Milestones

Milestone 1: Web Site Topic Approval (Due 9/19/14)The topic of your web site must be approved by your instructor.Explain each of the following questions in short paragraphs:

What is the purpose of the site? What do you want the web site to accomplish? Who is your intended audience? What opportunity, problem, or issue is your site addressing? What type of content might be included in your site? Formally list at least two related or similar sites found on the Web

o Include name and web address of the websiteso Explain why you chose them

NOTE: Topic must be approved before you may begin to work on the next milestone.

Milestone 2: Planning Analysis Sheet (Due 10/10/14)

Explain each of the following questions in short paragraphs:

Web Site Goal

o Describe the goal of your web site in one paragraph.

What results do I want to see?

o List the working title of each page on your web.

What information do I need?

o List where you will obtain the content (facts, text, graphics, sounds, video) for the web pages you listed above.

How will your project use a form?

o Describe how you plan to use a form in your project to collect information — examples of using a form might be to offer feedback, provide a survey or poll, offer subscriptions to a newsletter, etc.

Site Map: Using a word processor or other appropriate software, draw a flowchart (storyboard) of your web site that shows the hierarchy of pages and relationships between the pages.

Wireframes: Use a computer application to create a wireframe for each page on your web site that clearly shows the logo, navigation, content, and footer areas.

NOTE: You may not change your Web project topic from this point onwards

Milestone 3: Project Status Update 1 (Due 10/31/14)Copyright © 2012 Terry Felke-Morris

Tan 3 You must have at least three (3) pages of your site completely done by this time. Submit printouts for the following:

The typed URL of your web site. Indicate which three page have been completed Updated Site Map The CSS source code of your web pages and images A computerized sketch of your page(s) that will utilize a table

Additionally, note the following: The three completed pages must already be uploaded to the (studentwebs) server. All hyperlinks must work properly There must be no broken images

HINT: If you have lots of images to show, use Adobe Bridge for this purpose.

Milestone 4: Project Status Update 2 (Due 11/21/14)

You must have at least five (5) pages of your site completely done by this time. Submit printouts for the following:

The typed URL of your web site Indicate which five page have been completed Typed explanation of three (3) Design Principles followed in the project Your external CSS page Updated Site map of your project

Additionally, before the meeting: The five completed pages must already be uploaded to the (studentwebs) server All hyperlinks must work properly

Milestone 5: Publish & Discuss Project: Finish publishing your project to your web site. Be prepared to show your web site to the class, explaining the purpose and design behind each page / group of pages. Your web pages must be uploaded onto the studentwebs server for presentation. All hyperlinks must work properly. There must be no broken images.

Guidelines for your presentation: Explain each page in your website in detail Explain who your target audience is Discuss the three (3) Design principles you followed while working on the project Explain the use of HTML5 features in your project Explain the use of CSS3 features in your project Discuss the Accessibility Guideline components of your project Show the external links in your website

Copyright © 2012 Terry Felke-Morris