Assignments

Project 3

This turbo website will be a "new and improved" version of the midterm website. I want you to correct any problems I may have noted on the midterm, and then add to it the various technologies we've covered this quarter, including javascript, server-side includes, and server-side authentication. If you want to include other technologies you've learned on your own, that's fine, too.

Do not modify the original files in your midterm directory; instead, copy them into a new turbo directory for this assignment.

Specifically, you must include:

JavaScript-powered Dynamic HTML feature (i.e. illustration changes on rollover) adds interest/value to the page(s) it's on; it should not be a gratuitous addition to the site. NOTE: This is to be hand-coded, by you. No external libraries are allowed.
Server-side includes or PHP includes for standardized content across multiple pages (e.g. footer, navigation, etc.). Make sure you indicate with comments where you're using an include, since what we see in the browser will be after it is parsed.
One subdirectory protected with server-side authentication. Do NOT protect your entire site, or I won't be able to grade it! Put a link to the protected directory in your site, and with the link provide the userID and password for access so I can test it.
Use media queries to have your pages render on mobile (e.g. 320x480) as well as on a normal device. Adobe's Device Central app is a great way to quickly check. You will need to customize your user's experience for a 320x480 mobile device. Do the best you can - depending on your site design you may have to go for more of a "text only" experience. Hint: the CSS property display:none will hide your really big images for you.
Add new sections to your notes.html file discussing all scripts and other additions. Don't forget to detail where you borrowed/adapted scripts, and what you had to do to implement them on the site. If you fail to add to the file, I might miss your additions and you will lose points.

Grading

Validation: Do all pages validate?

Design: Design principles (layout, use of color, etc); Organization/Navigation; Corrections from midterm

Technology: CSS; JavaScript DHTML component; media queries for mobile CSS; Server-side includes; Server-side authentication; PHP; Other technologies

Fully posted with no further edits AND linked from your iweb index page Sunday, November 13th (end of 10th week) by midnight.

Project 2

Overview

Your Portfolio! This is where you showcase your professional accomplishments. The purpose of the site is to showcase your work and allow people to contact you. The target audience is potential employers. The goal of this site is to convince them you deserve an interview. The focus of project 2 is to get as much of your portfolio content as possible online in an organized fashion. The site design should be clean and neat. The navigation system should be straightforward and intuitive to use.

Most of the "10 Steps" in the article linked below should be reflected in the content and design of your site.

Required Pages & Content

Place the site in its own directory within your iweb directory (www/iweb/midterm) with its own index.html file.
It should have a minimum of 8 pages (not including index.html, notes.html and your styles.css page).
Each page will have a consistent Global Navigation System. This should be at the same place on every page (usually the top or left side), and allow the user to directly access the most important pages on the site.
index.html is the home base of your portfolio. From here employers should be able to quickly learn about you and access the other pages on your site.
notes.html is where you will cite any images, scripts, or CSS styles you borrowed.
styles.css will contain the majority of the CSS style rules for your site. You are also allowed to add <style> tags to the top of pages for document specific styles.
The other 8 (or more) pages will each highlight a piece of your current body of work. Don't think you can talk about anything? Here are some ideas:
- Projects you built as part of a class. Be sure to give credit if you were part of a group.
- Projects you worked on for an employer
- Projects or larger HW assignments created for your courses
- Projects created in Summer Camps/Summer Seminars
- Devote a page to listing the graphic design tools with which you are comfortable
- Devote a page to listing the programming languages/tools you know
- A hobby page as long it's related to the job you are interested in (ex. ~~LARPing~~, Art, Music)
- Obviously, anything digital or otherwise you've created on your own time (posters, board games, computer games, simulations, music, videos, etc...)
Also have a link to your printable old-school resume in PDF form. (I won't be grading it, but you should have something).
Important: Your CSS and site layout should be 100% yours for this project. You are not allowed to use any site templates other than what has been provided in class.

HTML Markup

The HTML on the page will be valid, clean, and accurate:

valid means that it will meet the HTML5 standard and use the HTML5 Doctype. Run your page through the HTML validator at http://validator.w3.org to be sure that it meets the standard.
clean means that your HTML source code is hand-coded by you (no WYSIWYG editors allowed) with enough white space and indenting to make it easy to read and debug.
accurate means that you chose the proper semantic tags to mark up your content. For example, list items are represented by <li> tags, not <br />tags. Spacing should be accomplished by using CSS styles rather than empty <p> tags, and so on.

Site Organization

Divide the content up into appropriate "chunks" of information, and design the site in a way that enhances the presentation of the content. This means you need to think about how to break it up, how to label it, how to navigate through it, keeping in mind who your audience is. I will be evaluating the quality of your content, as well as your information organization and navigation.

Use CSS for text formatting and layout of elements. While you may use inline and header-based style sheets, I would also like you to create a linked style sheet that controls formatting for some aspect(s) of all of the pages in the assignment.

Include style sheet components for both text formatting and positioning using float.

You should end up with a structure like this for your .html pages:

                iweb
                  |
               midterm
                  |
    |-------|-------|-------|-------|
 index.html ...    ...     ...  notes.html

You can assume I'll be using a current browser to view your pages, but don't assume a specific browser or platform.

Helpful Reading

Grading

Content: Quality of writing/presentation; Organization ("chunking") of content; Is the content going to impress your target audience? Will it get you a job in your chosen field?

Design: Design principles (C.R.A.P. etc). "Beautiful" is best, but a "clean and conservative" look is acceptable.; Intuitive Navigation; "You are here" cues; Does the design give a good first impression?; Can a potential employer easily find what they need?

CSS: Extensive use of CSS styles to alter the layout, positioning, fonts, colors, and spacing of your page elements.; Properly linked external style sheet; Uses inline styles where appropriate; CSS text formatting; CSS positioning

Validation: Do all pages validate?

First Draft Due Date: Start fo class Week 5. Zipped and in dropbox with a link to live version on gibson. Substantial content and navigation system should be present.

Final Due Date: Fully posted with no further edits by Sunday, Oct 16th (end of 6th week) by midnight.

Grading: Reminder - 'A' -level work means doing college-level work that goes beyond what we did in class. Will your site get you an interview.

Submission: Post to gibson - be sure to test that it works in a web browser. Then zip up ALL your files and post to mycourses dropbox. Type URL into comments field of dropbox.

Project 1

Overview

To create a web presence on people.rit.edu from which you will link to the projects you will create in this course.

The site (one page) must include a picture of yourself, your name, some information about yourself, and placeholders for links to your midterm and final projects. Do your best to use the principles of design you learned in 295, 320 or elsewhere. I want to see the college level work and the best you can do (that does not mean putting in every type of bell and whistle you can imagine; keep it simple and clean).

Requirements

Location: The page will be named index.html and will be located in a separate iweb directory created by you on gibson.rit.edu. This means that the location of page on the web will be http://people.rit.edu/abc1234/iweb/index.html (where 'abc1234' is your RIT id)
Required Content:
- A recognizable picture of you. This picture should be in a web friendly image format (gif, jpg, or png) and of appropriate resolution for the web.
- Your full name
- Information about you. This could be any or all of the following: your major, home town, coursework, interests, hobbies, etc.. Write four paragraphs (minimum), and each paragraph should have a minimum of 3 sentences.
- Placeholder links for your midterm and final projects.
HTML Markup- The HTML on the page will be valid, clean, and accurate:
- valid means that it will meet the Strict XHTML 1.0 standard. Run your page through the HTML validator at http://validator.w3.org to be sure that it meets the standard.
- clean means that your HTML source code is hand-coded by you (no WYSIWYG editors allowed) with enough white space and indenting to make it easy to read and debug.
- accurate means that you chose the proper semantic tags to mark up your content. For example, list items are represented by <li> tags, not <br />tags. Spacing should be accomplished by using CSS styles rather than empty <p> tags, and so on.
CSS- Cascading Style Sheet selectors and rules will be used for formatting and positioning:
- The style rules will be located either at the top of the document in a <style> tag, or in an external style sheet. See Applying CSS if you are not sure how to do this.
- There will be at least 5 style declarations (rules) in your document.
- Here is an example of a style declaration:
  p{
  color:green;
  text-indent: 1em;
  font-family: tahoma,sans-serif;
  font-size: 90%;
  }
- At least one of your style declarations will utilize a class selector .
- At least one of your style declarations will utilize a id selector.
Design:
- College Level Work
- Design principles (e.g. C.R.A.P.) applied appropriately.
- Good choice of colors
- Text should be of sufficient size and contrast to be easily readable
Other requirements:
- HTML tables used only for tabular data, not page layout.
- No Flash content
- Site is fully accessible even without graphics enabled

Due Date: Fully posted with no further edits by Tuesday, Sept 27th by midnight.

Grading: Reminder - 'A' -level work means doing college-level work that goes beyond what we did in class.

Submission: Post to gibson - be sure to test that it works in a web browser. Then zip up ALL your files and post to mycourses dropbox. Type URL into comments field of dropbox.