Portfolio

Here is my course work portfolio:

Document Assignment: http://mason.gmu.edu/~rrussel3/tester.htm
Text Assignment: http://mason.gmu.edu/~rrussel3/courses/type.html
Image Assignments:

• cropped - restored - before & after
• cropped - restored - tinted
• cropped - hand colored
• cropped - hand colored -vignetted
• cropped - re-matted

Design Assignment: http://mason.gmu.edu/~rrussel3/courses/civilwar.html
Final Assignment: http://mason.gmu.edu/~rrussel3/courses/civilwar/intro.html

The original document assignment didn't look quite so bad but I've fooled around with it a lot trying to learn how to do various things. Hope you enjoy my final product. It's been great having class with you all, borrowing your talents and stealing your ideas.

Browser compatibility

I've become the latest victim of the Browser Wars. Over the last week I've quite literally spent over 40 hours trying to get my website to work on all major browsers. I'm here to say I've failed on all counts.

My first quest was with footnotes. I tried to implement Prof. Petrik's pop-up footnote method which I think is brilliant. Not only brilliant but it looks gorgeous on Prof. Petrik's example site and works almost perfectly in all browsers with the exception of some color/number problems in IE6. Well, I did the coding a number of times to try to get it to work on my site in IE6 but I couldn't get the pop-ups to work though it would work in Opera, Firefox, and Safari. After hours of agony I gave up and switched to the CSS method which is also nice but not nearly as sexy. That method is pretty reliable across browser platforms and is working well but I can not for the life of me figure out what is wrong with my CSS that it won't apply the proper formatting to the footnotes at the end of the page. Perhaps another battle for another day.

Another compatibility issue I'm experiencing is unique to Safari. I've incorporated images that have the same background coloring as the background of my page to integrate them seamlessly. This works in all major browsers with the exception of Safari. I've tried changing graphic and background colors, even using colors deemed "web safe" but to no avail, the graphics are still distinguishable from the rest of the page background. I don't know what else to do at this point but hate Safari.

Other than that I think my site is coming together quite well. Prof. Petrik offered some good suggestions last week that I took, some of them begrudgingly but that's just my nature. One such suggestion was that I lose the "boxy" look of my site. I couldn't figure why anyone in their right mind would not like my boxes. I discussed this with a friend of mine who does graphic design for a living and he had some truly enlightening things to say on the subject. As it turns out I have an affinity for a very modern, very minimalistic aesthetic with clean lines and nice blank spaces. Though this is generally accepted as a perfectly legitimate aesthetic in web design I was trying to apply it to a subject matter that doesn't mesh well with a modern look. My site's subject is the Civil War which by its very nature was messy but also the look of the period was nothing like the look I was trying to apply to the site. I've since taken steps to try to downplay the modern look to the extent that I'm comfortable by removing some lines and trying to generally mess things up a little. I think it's working if only a little.

Initial Design Assignment

Here is the link to my assignment

http://mason.gmu.edu/~rrussel3/courses/civilwar.html

Coloring and Layout

I've made a mock-up of what I'm thinking in terms of design. This is at its most basic at the moment but I included the color scheme as discussed in last weeks class.

http://mason.gmu.edu/~rrussel3/images/mockup.jpg

CSS Request

I'd like to learn more about using images as backgrounds in CSS. More specifically I'd like to learn how to use buttons I've made in photoshop in CSS.

Websites

I spent some time looking through all the sites on the CSS Zen Garden website. This is a great project because you can look at the CSS for the sites whose design you like or are curious about. Here are three that I found appealing.

http://www.csszengarden.com/?cssfile=/158/158.csss&page=0 (nice graphic design and layout)
http://www.csszengarden.com/index.php?cssfile=/114/114.css&page= (I really like this layout. I haven't been able to really figure out why)
http://www.csszengarden.com/index.php?cssfile=/146/146.css&page= (nice graphic design)

Disabilites Rights Demonstration

I found the Disabilities Rights Commission's inaccessibility demonstration to be very enlightening. Since we began learning CSS I've often wondered why we spent so much time making our site fit tight specifications that'll make it more accessible for such a slim population of users. After seeing the difficulty these users have with inaccessible sites, I've reconsidered my position on the matter. I think everyone designing sites should look at this before making their designs.

Educational Discount

For anyone who may be interested in purchasing fonts from Walden Fonts they will, if asked, give an "educational discount". I e-mailed the address given on the site and was told that they would refund 50% of the purchase price after the purchase was completed. I'm not sure how public this is or if it's something they regularly do but they have great fonts and may be worth the investment particularly if they're willing to discount them for you.

Image assignment

Here are my images:

1. cropped - restored - before & after

2. cropped - restored - tinted

3. cropped - hand colored

4. cropped - hand colored -vignetted

5. cropped - re-matted

The first image was the most time consuming. The image was cropped and resized. I adjusted the levels manually. To fill in the holes in the picture I stamped the ground and sky with attention paid to texture in order to make the image seem as realistic as possible. I replaced the horses missing head on the middle right. I used the burn and dodge tools to bring out detail in the houses, people, fencing, and trees.

For the second image I colored it with a yellow fill (FFFF66) in order to give the picture an olde timey sepia tone after bringing down the opacity.

The third image I overlayed color with a mid-range opacity to distinguish these soldiers as Union artillery and give some interesting color to this Harper's Weekly lithograph of the battle of Gettysburg. These men were cropped from the tiny bottom corner of a huge image.

The fourth image is a vignetted version of the previous one.

The is the re-matted version of the men with the cannon. The scan of the image was good at the outset so the quality wasn't greatly increased. Regardless, I toyed with the Layer Blending options and used the Unsharp Mask filter.

I submit these images despite my objections to their relevancy in any historical context. Any image or photograph is of course subjective because of what is included, excluded, and manipulated in order to form the image to the desires of its creator. I believe that any undertaking that uses historical images that have content that has been further manipulated by the end user diminishes the overall integrity of the work. There is an assumption, or at least I believe there should be, that any information contained in a work of history, to include its images, should be as historically accurate. Including things that are willfully inaccurate for the sake of aesthetics is at best of little value and at worst misleading.

The only real historical information you can deduce from an image is the history of the image. For example, the picture of the house at Gettysburg that I restored doesn't tell us anything about Gettysburg per se. What we can learn is what the photographer wants to convey to us
so it is almost useless in learning about Gettysburg. It is, however, useful for telling us about the conditions under which the photograph was created and later handled. By manipulating the image to exclude things we see as flaws, we destroy the only true historical value of the photograph.

(I only partly believe what I just ranted about.)

Helpful Text

I've found a book that has helped fill in a lot of gaps when I wanted to do some things with CSS that we hadn't discussed or partially discussed in class:

Cascading Style Sheets, 2nd Edition. Owen Briggs, et al. (ISBN: 1-59059-231-X)

It's published by the same guys who did our Web Standards Solutions text that we read for this class. It explains in great detail how to do different things from the most basic CSS to some pretty cool difficult stuff.