CIS86 Student Projects

This page describes the projects and assignments for the Spring 2009 semester. This is still tentative.

Weekly Assignments

I would like to have all student submissions in electronic form: whether it’s an image, a screenshot, Word files, HTML files, Photoshop files, whatever. If you create diagrams on paper, I will accept them if you can’t scan them in. I appreciate your efforts here!

1. Exercise #1 (due 1/28/09):
   • Tell Me About You:
     • Experience Level: Please describe your level of Web experience, the principal ways you use the Web, and how often you use the Web. If you have some experience with HTML or Web page creation, tell me about it. Mac, PC, or Linux? Have you ever done any computer programming?
     • Why are you taking the class?
     • Objective/subject of your Web site. Begin thinking about the objective or topic or subject of your proposed Web site. You don’t have to write this up yet, but it is a good idea to get started figuring out what you would like to create. If you do have ideas already, tell me.
   • Write a profile of Liked/Disliked Sites. Describe (at least) 2 sites you like, and 2 sites you don’t. Profile the CIS86 Student Web site, as well (that makes 5).
     • Describe what you like or dislike about each site (appearance, style, visual effects, animation, color, completeness, cuteness, content, whatever).
     • Describe or sketch the grid layout of each page.
     • Is it centered or left-justified? Is it fixed-width or fluid? What happens when you resize the browser window?
     • What are the different sections of the pages, and how big are they?
     • Is the Home Page navigation different from the interior pages of the site?
     • Who do you think is the intended audience for each site?
     • What are the site objectives? Do you think the site achieves its objectives?
   • Suggested Reading: skim both textbooks to see what they cover, especially making note of the reference charts at the back of the textbooks (they will be very helpful). Look over the class Web site.
   • Install Firefox and the recommended extensions on the computer where you will work when you aren’t in class.
2. Exercise #2 (due 2/04/09): Write up your Project ideas. Demonstrate basic proficiency with FTP and files.
   • Copy the Canonical HTML template (or the Short Form), and give it an illustrative name. If you’re using the Long Form, then also grab the default CSS style sheet and default Javascript files that are referenced by it.
   • Remove the Hexadecimal Converter code from the BODY. If you’re using the Short Form, it’s already gone.
   • Describe the objective of your final project, the Web site that you intend to build for this class. Use paragraph tags, header tags, and anything else you care to add. Use <strong> and <em> for emphasis.
   • Upload your HTML file to your student Web site. Make sure you verify that things work first! Email the link for viewing the page to DFF.
3. Exercise #3 (due 2/11/09): Demonstrate basic proficiency with HTML.
   • Copy the Canonical HTML template (or the Short Form), and give it an illustrative name.
   • Remove the Hexadecimal Converter code from the BODY. If you’re using the Short Form, it’s already gone.
   • Add your own examples of the common HTML tags (as defined here), and save the resulting HTML file.
   • Upload your HTML file to your student Web site. Make sure you verify that things work first! Email the link for viewing the page to DFF.
4. Exercise #4 (due 2/25/09): Demonstrate basic proficiency with CSS, part 1.
   • For this exercise, you can either start with the HTML file from the previous assignment, or you can start afresh using the Canonical HTML template (or the Short Form).
   • Remove the Hexadecimal Converter code from the BODY. If you’re using the Short Form, it’s already gone.
   • Add CSS styling to the existing (or new) code using the most common properties (as defined here), and save the resulting HTML and CSS files. Use all 3 techniques for applying CSS: external file, embedded in the HEAD section, and inline with the HTML tag.
   • Upload your files to your student Web site. Make sure you verify that things work first! Email the link for viewing the page to DFF.
5. Exercise #5 (due 3/04/09): Demonstrate basic proficiency with CSS, part 2.
   • For this exercise, you can either start with the HTML file from the previous assignment, or you can start afresh using the Canonical HTML template (or the Short Form).
   • Remove the Hexadecimal Converter code from the BODY. If you’re using the Short Form, it’s already gone.
   • Add CSS styling to the existing (or new) code using the most common properties (as defined here), and save the resulting HTML and CSS files. Use all 3 techniques for applying CSS: external file, embedded in the HEAD section, and inline with the HTML tag.
   • Upload your files to your student Web site. Make sure you verify that things work first! Email the link for viewing the page to DFF.
6. Exercise #6 (due 3/25/09): Demonstrate basic proficiency with CSS-based layouts.
   • For this exercise, you can either start with the HTML file from the previous assignment, or you can start afresh using the Canonical HTML template (or the Short Form).
   • Remove the Hexadecimal Converter code from the BODY. If you’re using the Short Form, it’s already gone.
   • Use the CSS attributes position and float to give examples of layouts, including:
     • 2-column layout
     • 3-column layout
     • fixed-width, centered layout
     • a multi-column layout using floats.
     • Make sure your layouts have headers and footers, and feel free to wave hands (such as put a colored box or strip to show where tabs or a menu might be placed) about where navigation elements might appear in such a layout.
   • Upload your files to your student Web site. Make sure you verify that things work first! Email the link for viewing the page to DFF.

Final Project: Build a Web Site

Your task is to either build a new site (at least 6 pages) or do substantial revision to an existing site. The content or site topic is entirely up to you. It is OK to build a Wordpress theme, but you must have administrative access to a Wordpress installation somewhere. If you want to create a blog, you will have to arrange to add database support to your own account at MCN ($10 per month plus setup fee). The only service available to you on the student Web sites beyond serving up plain-old HTML is PHP.

1. Exercise #7 (due 4/01/09): Create and document the Functional Requirements for your site. Specify the minimum info.
2. Exercise #8 (due 4/08/09): Design your site, and document the design. Your design document should cover (at a miniumum): color palettes; fonts; content sources and samples. Include either a storyboard, block diagrams, or on-screen mockups to show the overall layout.
3. Actually build the site. The final project is due on 5/13/09, and the weeks after 3/11/09 will be spent constructing your site.

Evaluation Criteria for the Final Project

• The biggest question is: does the end result achieve your design goals?
• There should be at least 6 pages in your site. Talk to me in advance if you want to work on a dynamically-generated site like a blog.
• The page design should be visually pleasing, consistently applied to pages, and should support the page content. The page design should be appropriate for its intended audience. The page design should be controlled with CSS. The structure of the page should be developed with XHTML (transitional or strict).
• The images (including backgrounds) should be well designed and complement the overall site design. They should not be distorted. The images should be optimized and should download quickly. All images should have ALT, TITLE, and height and width tags. The images should be resized using an image editor; do not resize using the image height and width tags. Images from the Web can be used as long as you have obtained appropriate permission.
• The pages should use an effective layout for the chosen topic. Avoid inappropriate clutter. The background and text colors should be readable; pay attention to contrast. Font sizes and colors should be appropriate for the audience. The page layout and content should be controlled with CSS. The content on the site should be well written, avoiding grammatical, punctuation, and spelling errors.
• Everything on the site should work. There should not be any missing graphics, broken links, misaligned blocks, etc. The layout and design should work on both a PC (Internet Explorer and Firefox) and a Mac (Safari), although the look does not have to be pixel-perfect between browsers.
• The site should download in a reasonable amount of time for your audience.
• The site should include the author's name (copyright statement) and some form of contact information (a contact form or email address). There should be no copyright infringement on the site. Obtain permission for all images and content that was obtained from another source, and credit them when you use their material.
• The site should contain keywords and description meta tags, and these should be unique for each page. Do not abuse the keyword meta tag.
• The site should be XHTML compliant (strict or transitional) and you should validate all HTML and CSS prior to submitting it.
• Minus Credit: I will assess a 10% penalty on your final project for skipping out on the last night. People learn from seeing what others do, and you are expected to show your work. It’s not a big formal presentation (5 minutes at most), but I expect you to be there.
• Extra Credit: arrange for a domain name and ISP, and go live with your site.