CINF362-Final Project Solved

CINF 362 Final Project 

Topics 

•      Overview 

•      General Requirements 

•      Content Requirements 

•      Individual Page Checklist 

•      Where to Begin 

•      Project Submissions 

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.


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

Project Proposal Rubric – 10pts
Needs Assessment – 4pts

•      Thoroughness of explanation: 2pts

•      Quality of writeup: 2pts

Wireframes – 3pt

•      Each Wireframe: 1pt o Sufficient relevant wireframe content: .5pt

o Content is understandable: .5pt

Style Tile – 3pts

•      Colors included: .5pt

•      Fonts/adjectives included: .5pt

•      Overall website feel conveyed successfully: 2pts
 

For this part, you will be creating 3 separate pages of your website. These don’t have to be fully done pages but preliminary layouts with most of the structure built. The layouts must exhibit clean and valid HTML/CSS. In the midterm, you don’t need to use real content yet.  
 

You should use English for headlines and major links, but you can use Lorem Ipsum

(https://www.lipsum.com/) for any general text or Placeholder (https://placeholder.com/) for any placeholder images. Placeholder content is acceptable, but you should make significant progress on these pages in terms of the layouts.  

 

The three pages can be from any part of your website but each one should be different from the other ones. Some examples of pages you could build are the front page, an interior page, an about page, or a contact page. Only one CSS file should be used for all three pages.

 

Recommendations
•      Be consistent and use the same stylesheet for all three pages

•      Validate your code with the W3C Validator: https://validator.w3.org/#validate_by_input

•      Demonstrate good typography recommendations learned in class

•      Use English for headlines and major links but latin for the body text

•      Link your pages together so I can navigate through them more easily


Midterm Rubric – 15pts  

•      Links provided: 1.5pts

•      Zip folder uploaded: 1.5pts

File/Folder Organization – 3pts

•      Files are organized (separate css, js, images, etc): 1.5pts

•      All CSS is externally placed in one file: 1.5pts

Content – 9pts

•      There is enough content on each page and it looks good overall 3pts (1 for each page)

•      Content is organized and easy to follow (i.e. I can identify what page I’m on and how to navigate to other pages): 3pts (1 for each page)

•      HTML content validates: 3pts (1 for each page)

 

Final Project Review

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!)

Final Project Review Rubric – 5pts
•      Presentation is brief – 1pt  

•      Presentation covers different parts of website – 2pts

•      Presentation is engaging – 2pts

 

Final Project Submission 
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.  

Final Project Rubric – 20pts
Submission – 1pt

•      Links provided: .5pt

•      Zip folder uploaded: .5pt

File/Folder Organization – 2.5pt

•      Files are organized (separate css, js, images, etc): .5pt

•      All CSS is externally placed in one file: 2pts

Content – 12.5pts

•      Content is organized and easy to follow (i.e. I can identify what page I’m on and how to navigate to other pages): 2.5pts (.5pt for each page)

•      HTML content validates: 2.5pts (.5pt for each page)

•      Content meets accessibility standards as mentioned in class notes: 2.5pts (.5pt for each page)

•      Aesthetics (does the website look nice in general and in multiple browsers?): 2.5pts (.5pt for each page)

•      Responsiveness (does the website’s content work well on smaller screen sizes? – I will check down to 400px): 2.5pts (.5pt for each page)

Programmatic Features – 4pts  

•      JavaScript is used at least once on the website for a relevant feature: 2pts

•      PHP/MySQL is used on at least one page for a relevant feature/purpose: 2pts

 
A Note About Databases 
If you don’t want to use MySQL for your database feature, that is fine. However, you must discuss an alternate database language/structure you’d like to use in its place. Your website should either be able to insert or pull content from a database for a relevant feature.