Computer Science Capstone

Computer Science Capstone Design

Assignment: Developing an attractive and complete project website

Overview

All Capstone teams must create a website on the CEFNS archival server to professionally document your projects. Because these sites are archival, they will remain around forever, and are an excellent piece for your portfolio showcasing projects you have worked on. Information on past major projects is something that employers are very often interested in as they interview potential hires. As such, it's worth putting some effort into making it nice.

The objective of your team website is twofold: first as a communication vehicle with your sponsor and, second, to provide an archival record of your project for a broad outside audience that include faculty, future Capstone students, potential Capstone sponsors looking to find out more about the products that Capstone produces, and (your!) future employers of our graduates. It is important, therefore, that the site be designed to be informative, complete and attractive.Ideally, your website should be updated and kept up-to-date throughout the project, but of course the final (archival) version is the most important.

This assignment will have you develop a well-designed, professional website that you will update and fill with information throughout your project.

Allowable Design and Technologies

Your first task will to develop an initial skeletal website that is simple, efficient, and has *a place* to put all future elements that you will fill in. You'll want to invest some thought here; it's easier to build a complete framework (tabs, content areas, etc.) up front that you then fill in, rather than kludging it together as you go along! It's fine initially to have sections that are placeholders, to be later filled with material that is currently "in progress".

You will develop your website "in place", meaning that you have been assigned a web folder on the CEFNS archival webserver by CEFNS IT staff for your project, and will develop the website there from the start (rather than on your own server, to be moved later). This archival site (and the associated Webserver) support all the *basic* technologies...but you can't assume that any advanced languages/frameworks/etc. will be installed on the server as time goes on. Here are some design guidelines to make sure your site functions will, both now and in the future:

After creating the site you should plan to have a review with your sponsor for overall approval and incorporate any changes you believe will improve the site and its intended purpose.

Project Website: Content

Your project website should (minimally) contain the following information:

Project Intro:

A clean, attractive, professional, and confidence inspiring landing page that includes:

  1. Project name and graphics (if available)
  2. Team information: team members
  3. Project sponsor information: name, address, etc (with your sponsor's approval )
  4. A link to your sponsor's home page, if applicable
  5. Technical advisor information (if applicable)

Project Details:

  1. A "Project Team Tab/Page". Intros the team in some more detail, including project roles, picture of the team. This would be a great place to re-use the material that you already put together for your Team Inventory assignment.
  2. Project description: what is the overall problem, what is the general solution that we are creating? This should be prominently accessible from the landing page, since it is pretty important. Create a concise one-two explanation of your project in clear technical english. Include some mention of the overall motivation for the project (what's the problem that needs improving?), the way in which you see it solving the problem, how you've tackled it, and maybe a few words on outcome or time/money it will save the sponsor. Should give us a solid idea of what the sponsor's business is, what specific problems there are in the current arrangement, and what general functionality and/or solution might be needed that could solve those problems. Sets up the whole motivation for your project. Including a graphic or two (hardware you're using, screenshot of current system, diagrams) can be very helpful here.
    Note that this content should NOT be copied from the sponsor's project proposal; that was the rough vision. You need to explain YOUR project as it has become in the course of collaborative development with your sponsor. So, what you ACTUALLY designed, and what was really produced. Somewhere in this page, however, you should definitely link to the original project description, i.e., "The initial concept for this project was provided by our sponsor, in the form of a <link>Capstone project proposal</link>.
  3. High level requirements: Give a quick overview of the major requirements you developed, as well as sketching out the development process.
  4. Envisioned Solution: Describe the solution you are building (or later in Capstone: have built) that you claim will address the client's problems outlined earlier. Begin with overviewing what you're building in general (e.g., "a secure portal and matching Android app", "A web application", "a suite of unix tools", etc.) to sketch the overall shape of the solution. You then elaborate on details as your project goes along, adding: what is your system architecture and how it plays together to address the problem, then get into some implementation detail, outlining the implemented modules in high level detail. Near the end, you'll have screen shots of your product to add in, walking users through some of the key use cases for the product, to convince readers of how nicely your solution solves the original problem. Obviously, some great graphics would be part of this website section.
  5. Technologies: The focus here is on the languages, frameworks, tools, and other technologies used in developing the software. This starts with frameworks or tools you incorporated into the software itself, and ranges down to the IDEs, repos, and other software dev tools that your team used. Don't just list these out! For each one, give a short paragraph detailing why you chose that tool, and how it was used in the design, i.e., the role it plays in the final product. Give the geeks in the audience insight into the technical approach to the problem and the tools you're using.
  6. Schedule, resources, budget (if applicable): as much as you know, where you are in the schedule. Note that this is NOT the schedule for the CS476/486 class itself (that's on the instructor's website!), it is your development plan/timeline for your schedule. People should be able to easily see/gauge the progress of your project up to the current point...and be able to see how you see it unfolding in the future. By the end of Capstone, people should be able to clearly trace the progress of your project here, including major milestones and links to the deliverables you produced along the way. You could also link in the project status reports that you sent to your sponsor over the year here.
  7. Codebase. Unless your sponsor specifically stated that they'd like to keep the codebase for themselves, you should go ahead and publish your code at the end of the project. Sure it's sitting safely in a repo somewhere...but will that account exist in the future? Will you or a team member delete it in five years when on a clean-up binge. Archive your repo into a zip file, store it in your website folder, and provide a link to the code plus documentation on your website!
  8. Link to a demo? Some teams that were producing web-apps or similar web-based products have tried including a link to a running demo in their website. This is super-cool...but very fragile. The demo site usually gets abandoned or goes off line, and then you have a dead link. Much much (!!) better is to include a "screen shot walkthrough" of your final product that shows key pages along with maybe some quick explanation of what you're seeing in the image.

Other important information

  1. Archive of all delivered documents, e.g., requirements, design docs, team presentation slides, team meeting minutes, etc. But be judicious:
    don't just dump anything and everything here! Focus on things you feel would give more info or insight into your project process. Should at least include the major deliverables (documents, presentations) along with brief explanation sentence for each item. Keep the internal stuff under your repository.
  2. Information about and links to other competitive and other related sites/products, if applicable

Website Quality Standards

Remember: this is a professional website oriented toward quick, efficient access to information about your project. It is NOT a work of art or some measure of how cool, rebelious, or creative you are. So skip the dark goth themes, the death's head skulls, and bunches of flashing color and animation. Some overall tips:

Deliverable

Your website might be reviewed several times during the Capstone year, but of course it is the final version that is the most important. You should have already provided the URL for your skeletal website to the Capstone Organizer as part of project startup.