Description
Introduction
Project 1 is your chance to demonstrate your knowledge of HTML, CSS, PHP, and to give us a
chance to get to know you as well. Your first project for the course is to build a small 4-5 page
website about something about which you are interested or passionate. This is a chance to dive
into more detail about something (or several related things) that you want to promote. It can be
something that you do as a hobby, something related to your academic career, or something
you just find enjoyable. Or it can be just plain silly as long as you meet the requirements. Your
site should include some basic information about what you are promoting (why you’re promoting
it), and images to describe the item or thing that you are promoting. Examples include (but are
not limited to) a sports team, clubs, organizations, individuals, items (technology,
fashion/clothing, book), photography, music, yourself as a person, etc.
While this course is mostly about using server-side technologies, we’re still interested in your
ability to create visually interesting and user-friendly websites. You are expected to apply basic
web design theory, such as the C.R.A.P (contrast, repetition, alignment, and proximity) principle,
that were covered in INFO 1300 and that you’ve experienced through everyday web browsing.
Additionally, we will be testing PHP, so your site must include most of the PHP elements we’ve
covered in class. It’s up to you to determine how these elements will be incorporated.
Required Elements
Your finished site must meet the following criteria:
1. The site must demonstrate the PHP we’ve been using in lecture through Wednesday
February 1st.
2. The site must be stored on the 2300 server in the p1 folder. The main file should be
either index.html or index.php. If the folder p1 does not exist, make one. Put all your
ready-for-grading files in p1. Remember, don’t make any change to the files in the p1
folder after the deadline, otherwise it looks like you were late. You can create other
folders, such as p1test, for development if you want.
3. The site should have 4-5 pages (at least 4 pages). You can have more than this, but we
won’t necessarily look at more than 5.
4. Every page that a user can access must be validated. This means that files that you
include in the user-accessible pages with PHP, such as header.php, do not need to
validate on their own.
5. The site should have at least 3 images. If you took the photograph or created the
illustration, it must be noted in a comment in the HTML. If you acquired the image from
any other source, a credit must appear near the image. When the scale of the image
makes this impractical, a credit at the bottom of the page is acceptable.
6. Your site should include at least one non-trivial user defined PHP function that accepts
input, then displays the output in a user-readable way (table, HTML formatting tags h1,
h2, etc.) or returns a result for use by the code that called it. Examples include the
output of repeating elements in HTML forms or lists or making a particular calculation.
7. The site should be well-designed, have a consistent “look and feel,” and have clear
navigation.
8. Your site should display reasonably well (not necessarily identically) across Firefox,
Chrome, and Safari browsers. We will check your website on any one of these browsers.
9. Your code should be well formatted and readable. Use indentation to keep nested
content clear. Keep your code efficient, neat, and organized so that the TAs can easily
read it and understand it. The usage of explanatory comments in code is encouraged
and expected.
10. You should write a 2 paragraph design rationale (approximately 200 words) explaining
your target audience, design choices, and PHP functionality.
● The first paragraph should tell us who the site is intended for and how various
design decisions (e.g. color scheme, navigation layout, and overall look-and-feel)
were made to address your intended audience.
● The second paragraph should describe the PHP elements you incorporated and
how they improve the user (or development) experience on your site.
● Additionally, please include a sentence stating the WOW elements you
implemented (no justification required). WOW elements (10 points) are your
opportunity to go above and beyond the basic requirements in the rubric and are
necessary to get full credit on the project. Some WOW elements to think about
(not limited to the following options):
o Styling of the website is particularly impressive
o Creative, entertaining content theme
o Use of regular expressions (PHP or JavaScript)
o Use of advanced, originally-written JavaScript or jQuery (if you know
some)
o Extensive use of PHP
o A responsive website that works well on mobile as well as desktops
● The rationale should be well written with strong and convincing explanations of
your decisions to receive the full credit. Please approach this part of the
assignment thoughtfully; in order to have a well-designed site, it is necessary to
think through who the site is for and how it has been designed for them. The
rationale shows us your care in designing a site for your audience — or it can
show us your lack thereof.
● This file should be called “rationale.pdf” and uploaded to both CMS and the p1
folder on the server.
Grading
Your grading will be based on a weighted average of the following components:
● 10% Design and Theme
● 10% Content
● 45% PHP Interactivity
● 10% Design Rationale
● 15% Code Clarity
● 10% WOW
We’ll be looking for the elements below as we look at your rationale and site; you can use this
checklist to see how you’re doing.
Rubric
1. Design and Theme (10%) – You will be graded on how your site meets each of these
criteria:
● Pleasant to use and look at
● Creative and interesting
● Site is easy to use e.g. navigation shouldn’t require the browser’s back button.
● Color and design support the content of your site in your delivering the site’s
message
2. Content (10%)
● Does the site have at least 4 pages of content?
● Are there a reasonable number of images on your site? (At least 3 across your
site, you can have more if you wish. Not all pages need 3 images, but you must
have 3 images divided among your pages. No credit if the images are not
properly credited.)
o If you took or created the image yourself, you can cite yourself as the
creator as a comment in your code.
o If you did not take or create the image, you must visibly cite the source
somewhere on the page where the image is.
● Is there a clear navigation structure?
3. PHP Interactivity (45%)
Tip: Make sure to upload and check your files onto the server to avoid differences
between your local server and the course server. Don’t just assume that because it worked
locally that it will work on the server.
● Does the site make use of the following PHP elements? (At least one of each)
o PHP Variable
o Array
o Loop
o Conditional Clause
o A non-trivial user defined function (you cannot simply wrap standard PHP
functions in a method declaration or implement a method that increments
a variable; it should do something more than that.)
● Does the website make use of a form with at least 3 unique types of inputs
o The form data needs to be used in some way.
● How well does the PHP work? Are there any PHP errors or warnings?
● Does the PHP functionality fit with the site?
● Is PHP used to appropriately reduce repeated code?
4. Design Rationale (10%)
● Does the design rationale identify the target audience?
● Is there thoughtful justification of design choices based on concepts, cases, and
arguments?
● Does the design rationale effectively explain the design choices made for the
target audience?
● Clear discussion of structuring and choices around PHP code
● Does the design rationale contain information about which of the WOW elements
were attempted
5. Code Clarity (10%)
● Does the code validate?
● Are the HTML, CSS, PHP, and JavaScript (if any) well-formatted, commented,
and readable?
● Are the files well organized? (CSS/styles folder, img/images/assets folder, no
redundant code) Is the correct DOCTYPE used? (HTML5 or XHTML)?
6. WOW Elements (10%) (Must be strong in [at least] one of these areas to receive
credit)
● Styling of the website is particularly impressive
● Creative, interesting content theme
● Use of Regular Expression
● Use of advanced, originally-written JavaScript or jQuery (if you know some)
● Extensive use of PHP (more than is required in previous sections)
● A responsive website that works on mobile devices as well as desktops
7. Remember
● Make sure your site works properly on the server
● Upload your rationale.pdf to CMS