Web Design and Technologies (4004-737)


Personal Midterm Site (posted 14 January 2004)

Create a web based “academic portfolio” for yourself, showcasing your academic interests and technical skills. Place the site in its own directory within your 737 directory (e.g. www/737/midterm/ ), with its own index.html file. It should have a minimum of five pages. You can use Movable Type to create the site, or you can hand-code it.

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. While you may use inline and document-based styles, 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 a link to an annotated version of your external CSS (not just a link to the CSS itself, but to an HTML document that has the contents of the CSS along with annotations explaining what the various rules accomplish).

You can assume I’ll be using a current generation browser to view your pages, but don’t assume that it will be IE, or that it will be a specific hardware platform.

Grading will be based on the following components:

  • Content (quality of writing/ presentation, depth of content, organization of content)
  • Design (visual design principles, navigation)
  • CSS (external CSS, inline only where appropriate, text formatting, positioning) * Clean, standards-compliant XHTML and CSS
  • Documentation (annotated CSS, appropriately commented code)

The site must be online by noon on Wednesday, January 14th.

Comments & Trackbacks
Trackback Link: http://www.it.rit.edu/~ell/mt/mt-tb.cgi/605

Hello Prof. Lawley,

Should this portfolio start from our elementary school experience? I guess I'm asking what exactly is an "academic portfolio", or what kind of information should/shouldn't it include? Should it be more like and extended resume or an academic history, or both (it's flexible)?

Thanks,
Christian

Posted by: Christian Crews on December 17, 2003 05:18 PM | Permalink to Comment

Good questions, Christian.

It should focus on academics relevant to your graduate program. That may end up being only your graduate work at RIT, or it may include undergrad or grad classes elsewhere.

The idea is that you're creating a site that will serve as a kind of introduction to faculty members you want to work with for your thesis or project. It should showcase your skills and interests.

Posted by: Liz Lawley on December 17, 2003 07:26 PM | Permalink to Comment

Do you have an example of an annotated CSS? I usually comment my Style sheets, but this sounds like you want something more indepth than what would be in the comments.

Posted by: cher on December 20, 2003 07:02 AM | Permalink to Comment

Professor Lawley,

When would it be possible to obtain some feedback about our first project so we don't make the same mistakes this time?

Are you concerned about whether or not we use the web safe color palette? I know there are still some users who need it but given the audience I'm hoping it's not required for this project.

Could you direct me to a site that provides sufficient information about optimizing images for the web?

Posted by: Vince Falbo on December 20, 2003 06:37 PM | Permalink to Comment

Cher, here's an example of what I mean. I'd like an actual HTML page that includes the content of your linked CSS, and provides explanations of what you're doing with it.

Vince, yes, as I said in class, I'll be providing you with gradesheets on the first projects, even though they won't count towards your grade. I had hoped to have those done this weekend, but have come down with the flu; you should expect to see them Tuesday or Wednesday of this week (via email).

No, you don't have to use a web safe color palette.

There are a number of online tutorials on image optimization; this one seems fairly generic. But the program you use will also be a major factor--Fireworks MX (which we use in 320/741) is very effective at optimizing images.

Posted by: Liz Lawley on December 20, 2003 06:55 PM | Permalink to Comment

Since a web safe color palette is mentioned (though it's not required for the assignment), I just post a link for those who are interested.

Posted by: Fuyuko Takegawa on December 21, 2003 01:53 AM | Permalink to Comment

Professor Lawley,

What do you consider "appropriately commented code?"

I'm sure you discussed this in the prerequisite course and I would love to hear your ideas about appropriate documentation. For programming languages it seems appropriate to document much of the code since the comments are removed when the code is compiled and the code often is not as self-documenting as possible. Since commenting html increases the weight of the page when the language is straight-forward I'm not sure how much documentation is appropriate. Please share any conventions you are aware of in addition to your feelings about the issue. I have often wondered about this.

Posted by: Vince Falbo on January 10, 2004 11:27 PM | Permalink to Comment

Prof. Lawley,
So far, my pages validate with the html validator using 4.01 transitional. When I validate the css using the style 2 profile they validate also. Using the style 1 profile I get one error: "Unknown pseudo-element or pseudo-class hover ". Is it okay if the pages pass with style 2 css and not style 1?

Posted by: Joe Carino on January 11, 2004 10:50 AM | Permalink to Comment

As we head into the final stretch of our midterm project, it occurs to me that I should validate a few assumptions.

I’ve been focusing my work in three areas simultaneously:
- Style and formatting
- Features/functions
- Content

Now that time is running short, I have to decide carefully where to focus my effort.

My assumption is that Style and Formatting would have the most impact on my grade. After all, that’s what the class is about, isn’t it?

Next, comes Features and Functions which is closely related to style. However, because this is dependent on coding skills, I’m assuming you we won’t lose too many points if we have limitations in this area. (Some of us, more than others based on where we are in the program.)

And finally, the content, which I assume you want to be clean and spell-checked, but, if our work doesn’t end up on the New York Times best seller list, well…, you’re okay with that.

That’s roughly right, isn’t it? If not, please let me know. Although I’d like ALL areas to be perfect, time being what it is, I’d like to put my best effort where it counts.

Posted by: Robert on January 11, 2004 05:15 PM | Permalink to Comment

Vince, because these are assignments rather than production sites, I'd prefer to have you err on the side of over-commenting rather than under-commenting. In particular, anything that you spent a lot of time and/or effort getting right should be pointed out to me in the code, so that I'm aware of what you've done.

Joe, CSS2 validation is fine.

Robert, the class is not just about "style and formatting." The first half of the class is focused on design, but that includes both the technical aspects of designing with CSS, and the information architecture aspects of design.

I tried to be clear in the list of grading criteria what aspects I'd be focusing on in this project, and all of it is based on the material we've covered in class up to this point.

As I did with the ungraded assignment, I will look at all of the areas that I list above. I give A's when the work is consistently excellent. There may be some aspects that are not excellent, but everything has to be at least competently done.

Posted by: Liz Lawley on January 11, 2004 06:19 PM | Permalink to Comment

Sorry -- I misspoke when I referred to "style and formatting." Regardless of what I typed, in my mind I was referring to "design".

Still and all, I have an inferiority complex regarding my writing. I'll try to get over it.

Posted by: Robert on January 11, 2004 07:52 PM | Permalink to Comment

I am unable to upload my portfolio or the content of one link on my page (the CI button, in case you noticed it being a broken link). I will keep trying and hopefully i ll have it up by class time (provided grace stops giving me a bad time sometimes today!!! (thank goodness its not due til wed - ill most definately have everything up and working by then!!)

Steph

(by the way, the doctypes are causing me problems in the use of other browsers - the same issue one of the classmates was having a short while ago with mozilla.....though I am reading various materials on standard html usages in hopes of finding a solution to the problem.

Posted by: Stephanie Chester on January 12, 2004 11:56 AM | Permalink to Comment

Professor Lawley,

I understand your reason for why we should use many comments in our code since these are not production sites.

One of my goals for this project was to keep the page weight to a minimum; therefore, I removed the comments from only one page (the home page) so there would be one page with the minimum weight. This file does not have all of the commenting that is provided in the others but I am hopeful you will accept this since it is only one page and it was purposely left out.

Posted by: Vince Falbo on January 13, 2004 02:55 PM | Permalink to Comment
Trackback from rit.takegawa.net

Excerpt: This is a web based “academic portfolio” for Fuyuko Takegawa, showcasing the academic interests and technical skills. The site should have a minimum of five pages. Divide the content up into appropriate “chunks” of information, and design the site in...
Read More: Project Specifications

Posted Jan 13, 2004 8:04 PM

As I said to you in the previous class, my midterm site won't be on RIT server but will be at http://rit.takegawa.net

Posted by: Fuyuko Takegawa on January 13, 2004 09:03 PM | Permalink to Comment

In my portfolio I included links to some multimedia projects that are in another directory. The html for these projects was generated in Macromedia Director. I'm sure they won't validate since Director doesn't include a doctype when it generates the code.

Also, I used just one looooooong css file for the whole website. Is it a good idea to make multiple css files for a website?

Posted by: Joe Carino on January 13, 2004 10:39 PM | Permalink to Comment

I did also if nothing else it made creating the anooted style sheet easier... But I used SSI so I only had one style sheet.

** Anyone know how to validate pages created with Server Side includes?? **

Posted by: cher on January 15, 2004 11:35 AM | Permalink to Comment

Fuyuko, as long as you've linked to it from your personal site, that's fine. (Although, as we discussed, for the final project it will need to be on the RIT server so I can look at backend code.)

Joe, the validation problems for the pages with shockwave won't affect your grade. And yes, one loooong CSS file is fine, and often preferable (although it can be helpful to break the long page up with comments indicating what's doing what, as they do here, on A List Apart.

Cher- If you validate the pages on the server, the validator will run through the outputted HTML, which should give you appropriate validation results.

Posted by: Liz Lawley on January 15, 2004 12:16 PM | Permalink to Comment

I am having serious problems getting the styles. formats, etc etc to be viewed the same in both IE and Mozilla browsers. Mozilla tends to display things kind of out of place and it is frustrating. I would hate to lose points over mozilla's stuborness but what can i do.... :-

Steph

Posted by: Stephanie R. Chester on January 19, 2004 08:17 AM | Permalink to Comment

Prof. Lawley,
Can you give us some idea about what our final individual project will involve? I haven't found any info about it here on the class web site. Maybe just enough so we can begin to think about it?

Posted by: joe carino on January 20, 2004 12:13 PM | Permalink to Comment