N241 - Internet Applications - Final Project Requirements

CSCI N241: Internet Applications - Final Project

The Masterpiece Submission

Overview:

Your final project should be your masterpiece. Prove that your "apprenticeship" is over and that you are ready to continue learning about web development through advanced course work or on your own. For your final project, you will need to create a comprehensive, multi-page XHTML/CSS website that solves a "commerical" problem or need that you identify. You may create a website for a business (real or imaginary); you may develop a website for a non-profit organization; or you may create a website showcasing one of your hobbies, etc.

Requirements:

Your final project will consist of three distinct parts:
(1) a Final Project Proposal DUE: Friday, 05.11.2012
(2) a Final Project Prototype Deliverable and
(3) Final Project Documentation. You will need to post the Deliverable and the Documentation the Pegasus server no later than midnight on Sunday, 05.20.2012. You must use your hightechacademy.net webspace to house all of the files for your project; I will not grade any projects that students post elsewhere.

Final Project PROPOSAL:

Create a web page proposing your final project. The proposal should have three sections.

(1) First, answer the following questions:

What do you propose as your final project topic?
Why did you pick this topic?
What background knowledge do you bring to this topic?
Who is your intended audience?

(2) Develop a Project Timeline. Include intended dates for major project milestones such as when you intend to have certain sections of your project complete and a date for code freeze, among others.

(3) Identify preliminary resource materials. At a minimum, include

(a) Two "competitive" sites you will analyze for baseline information for your project. For example, if your sample site is going to be an online pet store, you should identify URL's to two existing pet store sites on the web.

(b) Two online User Interface Articles

(c) Two online Web Site Layout and/or Design Articles

(d) Two online Technical Articles (ie, how to create rounded corners, center a page, flow around an image, etc.)

Post your proposal to Pegasus no later than midnight on Friday, 05.11.2012. Create a link to your proposal on your class homepage (index) Page.

Final Project SITE:

Complete a comprehensive, multipage (minimum of 4 pages) XHTML/CSS website using the following guidelines, at a minimum:

Your project files should be saved in a folder named "finalProj" inside your N241 folder.
Your project should include standard XHTML and CSS.
Your project should have a consistent color scheme and style across all the pages in the website.
Your project should include header comments on each XHTML page (ie, when created, author, revision history, etc.)
Any custom style effects (ie, created through class or id tags) should be commented in your css page (ie, custom effect created for section header)
Your project should include at least one example of a table.
Your project should include at least one example of a <blockquote>.
Your project should include at least one example each of an <ol> list, an <ul> list and a <dl> list. Review list information HERE.
Your project should include at least one example of an image map. Review image map information HERE.
Your project should include multiple examples of images (PNGs, GIFs or JPGs).
Your project should include at least one example of a form.
Your project should include at least one example of a css-delivered roll-over effect. View tutorial for css roll-over effect HERE.
Your project should include an example of both an external stylesheet and an embedded stylesheet.
Your project should include examples of embedded styles that override styles described in the external stylesheet
Your project should include a "canned" (i.e., already developed) javascript script, such as a fontsizer (like the one available on this page), or a coverflow, or drop down menu, etc.) See how to include a javascript script HERE.

Other points to consider ...

Make certain that you use a clear and consistent coding style throughout the project.
Make certain that you comment your XHTML and CSS code, explaining how tags and style rules work. This means anything on your page or in your CSS needs a comment explaining why it is there.
Make certain that ALL OF YOUR XHTML code passes validation tests available from the W3C:
http://validator.w3.org/
Make certain that ALL OF YOUR STYLESHEET code passes validation tests available from the W3C:
http://jigsaw.w3.org/css-validator/
ONCE ON your web space, test all your links by traversing them. Make certain all images display. View your page in both IE and Firefox, at a minimum.

Create project documentation as a Word document, and include a link to the documentation on your Course Index Page. Your project documentation should include the following sections listed below. NOTE: To see a sample submission, download and open this one "Sample N241 Final Project Documentation"

Site Purpose
Needs Analysis
Goals
Audience Characteristics
Primary Audience
Secondary Audience
Competition
Wire Frame
Best Viewed Assumptions (the conditions under which you believe your website to be ideally viewed, including browser type and version, connection speed, screen size, etc. You can list footprint of your development platform, ie, the machine you did your development on to cover most items)
Site Map
Test Plan

Project Checklist: This is a critical part of your documentation! Note: FINAL PROJECTS SUBMITTED WITHOUT DOCUMENTATION WILL NOT BE GRADED! Include a table that lists all of the project requirements (from the guidelines listed in the section on the Final Project Deliverable) and the URL where I can find those features when I grade your project. Your table should look like this (make the URLs active links):

FEATURE	URL
External Stylesheet	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/css/main.css
Embedded Stylesheet	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage1.html
Header comment	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage1.html
CSS Style Comment	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage1.css
Example of a table	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage2.html
Example of a <blockquote>	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage1.html
Example of an <ol> list	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage2.html
Example of an <ul> list	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage3.html
Example of a <dl> list	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage2.html
Example of an image map	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage4.html
Example of a PNG or GIF image	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage1.html
Example of a JPG image	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage3.html
Example of a form	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/orderForm.html
Example of a css-delivered roll over	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage1.html
Example of a style that overrides another	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage2.html
Canned Javascript function	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage3.html
Any Other Feature(s) You Might Want Considered	http://hightechacademy.net/websites/2011_2012/Spring/LastFirstname/finalProj/mainPage2.html

Post-Project Analysis: Once you complete your project, answer the following questions:
- How did you revise your project?
- What learning did you take from the process of creating your project?
- Are there any sections that didn't work as you like? ie, you might be happy with presentation in Firefox, but not in IE; etc.
Bibliography: Add a bibliography of any resources that you used (including journal articles, images, scripts, websites, books, interviews, etc.). Be sure to include the resources you submitted in your project proposal.
Your project documentation should utilize MLA Style guidelines. (For sources, see http://www.mla.org/style or the following site from the IUPUI campus library:
http://www.ulib.iupui.edu/genref/writing.html
Add any other notes, as necessary.
NOTE: Extra credit is available for the final projects. To receive extra credit, your site must include capability or feature content beyond base requirements. Examples of possible extra credit include original graphic content, advanced navigational techniques (may be canned Javascript, such as coverflow, accordion pleats, etc.), multiple style sheets (ie, for hand held, print, large media, etc.) or multiple style sheets for distinct visual effects (ala Zen Garden). YOU MUST APPROVE EXTRA CREDIT IN ADVANCE, EVEN IF YOU DECIDE NOT TO INCLUDE IT)

Post your project files, including documentation, to your web space with a links properly labeled on your class home page no later than midnight on Sunday, 05.20.2012. Don't forget to create a link to your proposal on your class home page as well (due 5/11/12).

Here are a few Final Project examples - minus the required commenting and documentation.

_design.html"> My World

Dude