Grading

Rubric Criteria

Explanation as to how it was met.

All pages validate

All code for this website validates correctly and uses standard features across all mainstream browsers.

All pages display properly in all browsers

Semantic tags and standard features are utilized so that maximum cross-combatibility can be achieved.

Design principles (CRAP, color, etc)

Proper colors and accesibility features have been used to ensure equal access and good design principles.

Organization / Navigation

A strong hierarchy has been established to easily guide the user through content, its importance, and purpose. Additionally, navigation is both prevalent in a top navigation bar and a navigation menu in the footer. The page title in the tab bar also indicates where the user is.

Corrections from the midterm project

I have increased the line height from its original value to ensure greater readability of larger blocks of text. Additionally, I have improved the functionality of the mobile navigation hamburger menu.

Original JavaScript

There are various javascript functions implemented, some from class, others specifically designed for this project. For example, form validation has been altered slightly, the functionality of showing and hiding the mobile navigation page, as well as a back-to-top scroll button.

DHTML component (this could be combined with the JS component above)

A few things satisfy this requirement, such as the animated back-to-top scroll button that fades in and smoothly scrolls the user to the top of the page. Also, the form validation inserts text into the DOM with any errors encountered. Finally, the comments are inserted into and displayed on the same page.

PHP Includes on every page (no repeated code except unique content on each page)

Each page utilizes a PHP include for the header and footer, as well as external php files to run things such as form sanitization and comment processing—inserting into the database and selecting to display on screen.

Some sort of form like trip rating or comment. INSERT and SELECT Works

The comment page serves as a forum for users of the site to share information and feedback about their trip. It takes in a name and message, as well as records and displays the timestamp it was sent. These are inserted into and selected from a database so it is the same experience for all users.

Form validation with JavaScript (not HTML 5 form validation) & PHP Sanizitzes

Javascript form validation ensures that a value is present for both name and message fields; if one is not, the field changes color and a message appears detailing the issue. PHP validation sanitizes the message to make sure no scripts are injected, and it ensures names are of proper datatype.

PHP validates data and sanitizes it before INSERT

In the event form data does not validate, the program will not insert into the database; instead, an error message is displayed and the user is prompted to try again. Once all data validates, it is then sanitized to prevent injection attacks.

These vary, will document this in feedback individually. Extras should be documented in grading page!

Rubric Criteria

Explanation as to how it was met.

Good Design Techniques - CRAP

To satisfy this requirement, each of the following was utilized. For Contrast, all text in all states was colored so that it would be readable against the background colors; additionally, different values were used to work with colorblindness. For repetition, the entire site follows the same style guide, making it all feel coherent. For alignment, the majority of content is left-aligned for readability purposes, where the only deviation is to draw attention. Finally, for proximity, appropriate gaps were left to determine what is its own content, but similar materials were grouped together.

Organization of information - text and graphics make sense, Chunked content

Each new form of content is divided with a heading to describe it. To ensure these are noticed, they are both sized and colored differently from the rest of the body text.

Content - interesting read, excellent grammar, perfect spelling, map that is relevant to content included (quality of content)

All content has been proofread multiple times to check for spelling and grammatical errors. Additionally, the map and content provided is relevant to the purpose of the section.

10 Content Pages w/ sufficient content - points deducted if pages missing (quantity of content). the references and about page are not included in these 10!

This site has a total of 11 pages, only one of which serves as an index page. As a result, each of these has quite a bit of content, meeting this criteria.

Code Design Requirements - Code indented, global CSS file, well thought out selectors, comments in CSS/html, HTML semantic tags used, hand written code), no inline styles used

Each html page has standardized indentation to follow the code easily; additionally, they each reference the same style sheet so that a change in styles affects the site globally. Moreover, each purposeful addition to the code was explained via comments.

Interaction Design & Navigation – easy to get around, global nav, unique title on each page. You are here indicator

The navigation bar is the same of every page, and is included in both the top and bottom of the site. Additionally, each page tells you where you are in both the tab title and the h1 of the page.

HTML & CSS Validates / Cross Browser Compatibility

All code for this website validates correctly and uses standard features across all mainstream browsers.

Reference Page - a separate linked page (in addition to the 10)

My reference page links all sources used for this site, and includes their date, the description of content used, and a link to where in the website it was used. Additionally, each time a source was used in content, a linked citation will bring the user to the appropriate reference in the reference page.

Grading Page Document what you have done linked from your homepage

This page serves as the grading page, and each element of the rubric is explained in detail as to how it was met.

Responsive Web Design - mobile users were considered

In this initial version of the website, mobile users will have a slightly different layout to fit better on a narrow, vertical screen. Additionally, the navigation switches to a menu versus a bar.