[SOLVED] CINF362- Final Project

Description

Overview

For the final project in this course, you will be building a 5-page website on a topic of your choice. This project will be broken up into 4 parts with separate submissions. The first part is the Project Proposal in which you tell me about the website topic you’re choosing for your project. The second part is the midterm; this is when roughly 50-75% of your website should be done. The third part is the Final Project Review where you submit a video or some other media to explain your progress on the project before it is submitted. The final part is the Final Project Submission where you submit the fully finished website.

General Requirements

1. There should be at least 5 pages of content on your website
2. Your files should be organized (folders for file types: css, js, images, etc)
3. Submission must include links to your main pages and a zip folder containing all files you used for the project
4. All CSS must be externally placed in one CSS file
5. Validated HTML in every page (green bar when I check – some yellow may be okay)
6. Your pages must be responsive down to 400px
7. You must use at least one instance of JavaScript
8. You must use PHP/MySQL in your website at least once

Content Requirements

The content present on your website must be original. This means you cannot borrow text content or images from other websites without expressed permission. You may borrow snippets of code in terms of HTML/CSS/JS but there should be attribution provided (either a link to the source or a comment in the HTML/CSS/JS).

You are also not allowed to use any website generators. All code should be created from scratch unless it meets the criteria mentioned above (just a snippet of code and appropriate attribution). Your code shouldn’t be from previous semesters as well.

Lastly, make sure your content is correct and that you have enough content on each page. Empty or bland pages will result in you losing points toward your final project grade.

Individual Page Checklist

Use the list below to ensure your pages meet best standards.

• Does the page validate?
• Is the page’s purpose clear once it loads?
• Is the main navigation easy to find?
• Do all the links on the page work? Are they easy to distinguish? Is the text meaningful?
• Do all images have alt tags?
• Is the title tag being used?
• Is there appropriate metadata included in the head?
• Is the font easy to read in terms of font size and color?
• Do I use headings and lists to break up content?
• Is there enough white space around my text?
• Do your forms have labels? (If you use forms)
• Does the website look good in multiple browsers? (IE9+, FireFox, Chrome)
• Is everything spelled correctly?
• Is the content responsive down to a screen size of 400px?
• Do I have a relevant usage of JS on my page(s)?
• Have I used PHP/MySQL on my website at least once?

Where to Begin

Start by planning how you want to structure your content. The wireframes created for the project proposal should help you or you can create new ones. From there, you should begin coding up the various items on your page with HTML. After your content is all set, you can then use CSS to style things and position your elements as you need. Also, evaluate what features you want your website to have and whether they need JavaScript, PHP, or a database. If they do, feel free to look at code from other websites or class examples to build those features.

For the proposal, you will be telling me about your project and providing visuals so I can get an idea of what you want to build. The parts for the project proposal are broken down below.

Needs Assessment: Your submission should include a description of the website you wish to build. This should be about two paragraphs describing in detail what you plan on doing with your website. Refer to the week 1 lecture notes for a refresher on what Needs Assessments are and what to include. A database must be used in your website so make sure to consider how it could be implemented. Use the list below as a short reference:

• Description – a brief overview of the website.
• Audience – who is the audience that will be visiting the website?
• Objectives – a list of the website’s objectives: What will the website or app do? What will the audience need to learn?
• Actions – Any features you may want to include in this website.
  • Think about a JavaScript feature o How will you use a database for your project?
  • What are some tougher/long term goals?
  • What features will be easier to implement?

Wireframes: Create a wireframe for 3 separate pages of your website. These don’t have to be final layouts but ones you are possibly considering. Make sure to include enough content in your wireframes so I understand your intention with each page. Provide labels as necessary to mark up the various content/features on your page. You can use the examples as listed below:

• Home/landing page
• An interior page
• A contact page
• A mobile version of a products page

Example video: https://www.albany.edu/~cv762525/cinf362/videos/Wire-Frames.mp4

Each wireframe file should be labeled or explained in the comments so I can tell them apart. You can also use text at the top of the wireframe to label it inside of the image.

Style Tile: Revisit the following link about style tiles: http://styletil.es/

You will create a style tile to help define a preliminary look and feel for the website. We covered these in the first week of class if you need a refresher. This will require an image editor such as Gimp, Paint.NET, Photoshop, etc. Your style tile should include the following items as appropriate:

• Logos
• Possible colors
• Possible patterns, if any
• Possible typography choices: a paragraph and headings example
• Examples of a button
• Examples of a link
• Visual language

Example video: https://www.albany.edu/~cv762525/cinf362/videos/style-tiles.mp4

For this part, you can use the examples provided on http://styletil.es/ or you can go to Blackboard à Final Project à Project Proposal. On Blackboard, you’ll find a template style tile file that you can use. Download it, open it up with an image editor, and edit it with your colors, fonts, patterns, etc. and then upload it with everything else for credit.

Recommendations

• Watch for grammar and spelling
• Be consistent
• Use labels and explain your ideas thoroughly
• Make use of the Hemingway Editor: http://www.hemingwayapp.com/
• Come to office hours if you get stuck

You are responsible for creating a presentation about your website. This presentation can be a video, powerpoint, word document, etc. The goal is for you to demonstrate your progress and talk about your website. These presentations may be shared with other students so make sure you put effort into them. If you’re unsure of how to create a presentation, you can come talk with me via email or visit me in office hours. I’ve listed some potential talking points below:

• What is your website about?
• Why did you choose your design/color scheme?
• What JavaScript feature do you plan on implementing?
• How will you use PHP/MySQL for your website?
• Were there any parts that you’re particularly proud of?

Recommendations

• Keep it brief, this presentation shouldn’t be more than 2-3 minutes long
• Be specific about what you have done
• Talk about any problems you experienced or next steps
• Use the points above for guidance
• Don’t talk down about your work (be proud of it!)

For the Final Project Submission, you will be following the same guidelines as the midterm except your website will be finished and submitted as a whole. In total, you should be submitting 5 links (one for each page) and a zip folder containing all the files used for this project.

At this point, the project should be polished and complete…this means there should be no more lorem ipsum or placeholder content. Each page should validate, and the CSS should be externally placed inside of one file. You should also have a relevant JavaScript feature and use

PHP/MySQL in at least one page of your website. Your pages will also be responsive down to 400px.

Recommendations

• Review the Content/General Requirements listed above
• Ensure that your page meets the Individual Page Checklist items
• Validate each page
• Use the accessibility tools mentioned in class to assess your website

Make sure all pages link to each other