COMP 4610 GUI I

What You Are To Do

A publisher has hired you to create a demo for their designers to shows them how different color-, font-, formatting-, and spacing choices impact the final readability and usability of a document. To accomplish that, they requested that you create at least three variations of the same content, but with modified style choices, as follows:

1. The demo content will be the content of this assignment’s document (yes, the document you are reading now). The only difference is that you should add at least one image (small or larger, simple or sophisticated, it doesn’t matter), and you should show some styling differences about that image.
2. You are to create at least three versions of this document; the content will be identical but the styling of the pages will be different.
3. Your CSS code must be in a separate file from your HTML file, in a subdirectory name css. This is the industry-standard way to organize websites. You might use inline CSS and/or an internal style sheet during development, but you must move all your CSS to a separate, external file before you submit your assignment. That external file should have an extension of .css.
4. Your CSS code must be documented to the same standard we have used for HTML. That is, major sections must be documented to identify what they are styling. You should *not* document each individual CSS rule. Assume that the reader of your documentation knows CSS, but that s/he is not familiar with the way you’re using it.
5. You must structure your assignment so that the three (or more) demo pages can be reached from a “landing” page, which will have clearly-identified hyperlinks to the demo pages.
6. Your demo pages must have a variety of examples of different colors (including foreground – i.e., text or content, and background), spacing, padding, borders (color, style, thickness), and any other styling differences you might want to show.
7. Test both your web page and your CSS code using the W3C Validators:
   • HTML5 Markup Validation Service: http://validator.w3.org or http://validator.nu
   • W3C CSS Validation Service: http://jigsaw.w3.org/css-validator
   
   Your code must pass both validators. When it does, add the W3C validation icons to your page.

Code Review

• You can learn an awful lot by just having someone else look at your page and try it out. If you do this assignment before the due date, there is no reason why you can’t ask someone (even a classmate) to review your work for you. I strongly suggest that you do this, and that you do so early enough to allow time to make the changes that s/he recommends (if you also agree with them).

How You Will Be Graded

This assignment will be graded on a 20-point system with points awarded as follows. Please note that the lists of features provided below are not meant to be exhaustive. They are merely representative of the types of things we are looking for in each grading category. Also note that 4 of the 20 points, or 20% of your grade, is awarded for documentation.

Again, I stress that your page need not be the most beautiful page on the Web, although it’s of course fine to strive for that! This is not an art class, and again I am very aware that some students enter this class with significantly more experience with Web programming techniques than others. I strongly encourage experienced students to do the basic assignment first and then push themselves to learn and try out new techniques. I encourage inexperienced students to look at others’ work and emulate it where appropriate, of course being sure to cite your references and give credit where credit is due. As always, all students should be able to score all 20 points on this assignment, regardless of what you knew before you took this course.