Week 3 Exercise Part 2: CSS Zen Garden

For this exercise, we had to get into groups of 2-3 and look through different CSS designs at CSS Zen Garden and choose 1 that was our favorite and 1 that was our least favorite. The group I was in consisted of myself, Bill Dollinger, and Tom Ryan. We all agreed on the one we least liked, but we each had different ones we most liked. Here are is the least liked one that we all agreed on and the one that I liked the most.

Least Liked:

Retro Theater

There were many reasons why I least liked this one. First, the content uses only a very small portion of the screen. Secondly, the layout of the content is very bad and not consistent. Some parts have two columns while another part has 4 columns and yet another only has 1 column. Especially with the 4 column part, the text is extremely hard to read as each column only has 1-2 words per line and you aren't sure exactly how you need to read the sections. In addition the text styling is bad and not consistent as well. Some of the sections have all caps for the entire text which makes it harder to read. Another section has triple space lines and this section is next to a section that only has single spaced lines making it confusing as to exactly how those sections should be read. Also the "Benefits" or "Requirements" sections have a mixture of all caps text and normal non-caps text, making it even more difficult to discern the order in which to read things. Also, the section that has the 4 columns has some overlay of the columns so some of the words get overlayed on top of other words making them indiscernible. Another thing I didn't like about it is a cosmetic aspect; The content section has a .gif file used as the background and this file causes the background to look like it has static on it and it gets quite annoying after a looking at it for a little bit.


Most Liked:

Pseudo Sahara

The first thing that caught my attention on this page was the Desert image at the top. I like deserts and so that was a plus to begin with. Secondly, I liked how the background colors of the sand and sky blend in with the actual image picture making it seem like the image spans the entire screen. This is much better than when an image is cut off abruptly by another color. This design was also very easy to read. The section with links is apparent in the left column and each section of links has an appropriately named header in a "scroll" style header bar which partitions the sections nicely. Also, the header text styles go along with the theme of the design and gives it a nicer feel. Overall, I think the entire page flows very well is very consistent with the text and design. There was only one thing that I didn't care for too much with the page and that is the scroll bar in the upper portion of the left column. This could very easily be removed by a minor modification to the size of that section and it will make the page look that much nicer. This scrollbar is most likely the result of designing the page in IE as when this page is viewed in IE the scrollbars are not there. They are only there when viewed in Firefox.

Week 3 Excerise: FormMail

Here is the link to my FormMail:
http://people.rit.edu/~jxw0533/409/mail_form.html

This was a relatively easy exercise as it was more of a refresher for me sine I have done some coding with forms and we were provided the FormMail.cgi file. I then formatted the formmail page so that everything is centered and the Name and Email are in a table so that the text boxes line up properly.

Week 2 Exercise: Index Page

The in class exercise for this week had us create an index page with some basic information such as a pic of ourself, our name, links to our blog, in class exercises, and projects. Also, all the formatting for the page had to be done with CSS.

For this exercise, I chose CSS Layout 37 (Fixed Width) from Code-Sucks.com.

I used the right column to hold my information about myself and my picture. The left column, I used as my links. I plan to improve these as the course continues as I feel they could look a little better. I used the navigation bar to contain the drop-down menu of links. This is somewhat repetitive with the link in the left column but I also wanted to give the user the option of using whichever one they feel more comfortable with. The content section will house more information as the course moves along but for right now it just contains the Under Construction image. The Footer at the bottom of the page contains the date the page was last modified, a quick copyright with my name, and the XHTML and CSS Validation image links.

In general, I like the look and feel of the page but I do want to improve it throughout the course.

Here is the link to my index page: Index

Group Project - Looking for Partner

As everyone knows we have a group project for this course and since I don't know anyone in the course yet, I'm making a post that I'm looking for a partner for the group project.

I'm looking for a good web designer to be my partner. Someone who has done some decent work making a web page look pretty; with graphics, placement of things, colors, etc. Seeing as I'm more of a programmer and I would like someone that will be able to complement me for our project.

Let me give a brief background of myself. I'm currently a 5th year CS Major who has become more interested in the IT side of things than the hardcore CS side. As such I've been taking some IT courses as my electives (Namely; IDM, Prog. for Dig. Media, Foundations in 2D Graphics Programming, and now this course). I'm a good programmer and have gone through some particularly programming intensive courses so I believe I will be able to handle any of the programming aspects of the project. One such course for anyone who is familiar with it is Foundations of 2D Graphics Programming. I also worked Part-Time for about 6 months at the University of Rochester in their ITS Department helping to build a web application for them and as such I have a decent understanding of the programming side of Web Development.

You can contact me either by replying here or shoot me an email at jxw0533@rit.edu.

Week 1 Exercise: Recipe Cont'd.

After Wednesday's class, I went back and modified my css, html, and xhtml files to have more formatting in them. Initially, I had just modified the text in the webpages. Now, it includes the HTML/XHTML and CSS Validation Links at the bottom, a border around the page, and a picture.

I'm finding it much easier to do my xhtml coding first as this is stricter than html and so usually the only thing I need to do when converting the page over to html is to just remember to remove the "/" at the end of the empty elements. This doesn't cause the validation to not pass but when using the W3C validation it comes back with warnings if there are any of the "/"'s in the empty elements.

A note as to the warning stated in the previous post. I'm not sure the full reason or implications of it but since the professor used "iso-8859-1" as the charset, I changed the charset used in my pages from "UTF-8" to "iso-8859-1". This gets rid of the warning and so I will be using "iso-8859-1" from now on.

I'm still currently waiting on the book to arrive so I haven't gotten any of the reading done. The book should arrive by the weekend so I will be doing the reading then.

Here are the links to my HTML and XHTML versions again if you don't feel like scrolling down to the previous post.
HTML Version
XHTML Version

Week 1 Exercise: Recipe

Here begins my first blog ever. Let's hope I'm able to keep it interesting.

This exercise was helpful in getting me back into the swing of things with html. I've had some experience working with html on my own but not too much and the IDM course that took didn't touch very heavily on html. Therefore, I found myself using the W3Schools website which has a decent amount of information to learn the basics and which helped to refresh my memory.

Professor Habermas said that Textpad is a good tool to do the coding in and while I do like Textpad, I find it much easier to do all my coding in Visual Studio. I really like the intellisense that it provides and it also does its own validation against the type of DOCTYPE you wish to validate against. In addition to this it also allows you to view your html code in design view which basically shows how it will look on the web. This makes it much easier to check how your webpage is going to look without having to put it onto the gibson server and going to it in your webrowser.

With Visual Studio catching all the minor syntax errors I had, when I went to validate the web pages they both passed but they both also had 1 warning (same for both the XHTML and HTML pages). This warning dealt with the UTF-8 encoding and specifically stated:

Warning Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

I am not too sure as to what problems this might cause (if any) as the Validations did pass. If anyone could shed light on this issue for me that would be great.

The CSS on the otherhand, I have had very minimal experience with and really have only seen CSS files and have not created my own. Once again, I spent my time at the W3Schools site learning about CSS. There is quite a bit to learn, so I feel I will be using this site for a while.

Here are the links to my HTML and XHTML versions of the webpage that I created.
HTML Version
XHTML Version