Building a Website

For our class on Creating Digital History at George Mason, we are creating a historical website for our final project. Up to this point we have constructed multiple web pages, but they have been single pages that demonstrate certain aspects that we have learned. Creating this site, I’m realizing the how complicated and tedious the process is. One must consider the entire site, and how each page fits into the whole project in order to organize content and especially links.

I have had many problems in organizing my links now that there are major pages and then sub-pages attached to the major ones. Right now I’m simply copying the html and css to the various pages adjusting the content. Keeping the organization is nevertheless a chore.

The fact that all the content is separate from one another by different pages makes the construction of the narrative much easier. One need not consider how one topic flows into another or if a certain issue is introduced too late or too early for the project. All of the content must in a way stand on its own, and the visitor navigates the project in his/her own way.  If making sure all the content is appropriately linked to each other in a navigable fashion is cumbersome, then treating each aspect of the project unto itself is liberating.

Finding Usable Images

In creating my design website, I have had a hard time finding historical images. The realization that copyright can be incredibly limiting has had an impact in my decision making. On my web page, I placed a map of the Ottoman Empire, a print of Francis I, and I wanted to add a print of Suleiman as well. Unfortunately, and almost indescribably, I could not find an image of the famous sultan on my go-to website gallica.bnf.fr, the online repository of the Bibliothéque Nationale de France. I know that there are no copyright problems on the website as long as the images were produced before the twentieth century (and that is an overly safe date).  I found this incredibly odd because I can find images of so many Ottoman sultan’s on the website produced during multiple centuries. Part of this is because Europeans remained very interested in the Ottomans throughout its existence. This interest was especially prominent for the French since they had established an alliance with them in the sixteenth century. I have, for instance, multiple woodcuts of other sultans. This all to indicate how odd this lack of images was.

Nevertheless, I am wondering how one might find historical images that one knows are in the public domain. When online libraries fail, searching google is always an option, but I find it incredibly difficult to learn who owns the image. I know that the likelihood of the owner learning of my use is small, but since this is for the Clio II class, I want to remain completely unimpeachable. Oh, the frustration of finding usable images.

Interactive History

Last semester, we played the Lost Museum game as well. I find the game very interesting. It permits players to interact with an eccentric 19th-century museum to learn who burned down it down. The game play also permits the player to investigate any questions they have about the historical milieu that produced the various artifacts in the museum through the archive.

When I played it the first time, I had reservations about what players take away from the game, and I still do. The medium of a video game is such so indirect that the player has such a role in what they take away from the game. Even with books, the reader has the greatest to do with what one learns from the book based on how one uses it. Video games are even less direct since the goal is not directly learning, but whatever goal the programmer made for the game through which process he/she hopes the gamer will learn.

The archive that the programmers added to the website certainly helps the process. As Joshua Brown suggests, it permits a greater amount of inquisition into the historical milieu of the museum and its artifacts. It is however really separate from the game, but instead it is a medium to investigate questions that the game might prompt.

Accessability on the Web

Until this week, I never considered the variety of ways that disabilities impacted website use. I knew that blind people, or people who are blind (I must agree with the latter seems clunky and unnecessary), used some sort of software that read the site allowed to them, but that was the extent of my familiarity–or consideration of the issue at all. Even in this aspect, I never considered the practical challenges that the software, or screen reader as I now know, had in reading a website. I guess I simply imagined that the software developer was a genus and created a reader that could brilliantly present the site audibly as it looked visually. Perhaps, I was a little naive.

So when reading about the challenges that websites posed for various disabilities I was surprised. But there are many simple ways to alleviate many problems. For instance, placing alt text for an image prevents the entire file name for being read by the screen ready in lieu of the image. Oh, how annoying would that be, especially on a page that has multiple images. I must admit that I am one of those inconsiderate site authors who frequently forgets the alt text.

Taking that into consideration, I found the initiative to force all site programmers to provide images to help make the site more clear for people with learning disabilities–although clearly those who will accommodate such a request will place alt images. Nevertheless, it does also impose a design element on programmers. Whatever, the solution–and I certainly don’t have it–we must be less naive and more considerate than I was just hours ago before reading on this topic. It can be the simplest thing like placing an asterisk for the alt image; or better yet, while you’re at it, use a word.

Reviewing the Image Project of Peter Jones

Peter created a solid website for his Image project. He used a similar color scheme as he had in his other projects, which makes sense. The color scheme is solid and pleasing to the eye. I have a couple minor suggestions to begin.  The font and color of the H1 text works very well on the background, but the header is much too large for the title, leaving a lot of empty space below it. This is an easy fix. He can either make the title bigger or make the header smaller. Secondly, the text in the navigation pane is rather small. Perhaps Peter could make it bigger.

Beyond these two slight suggestions, the site  is very good.  The H2s look great. The bold text and their offset alignment make them clear, and it breaks up the symmetry of the text in a good way. The font looks good and is easy to read in the body of the text.

As it relates to the image adjustments, I am very impressed with his work. The adjustments to the Past-is-Prologue statue look great. The sepia filter does provide a great historic feel to the image, which is what he was going for. I especially like the fuzzy border that he applied to it as well .

The vignette on the Christian Heurich image was the only one that I really have a suggestion for. I think by cropping the image to provide a close up of the castle-like structure on the brewery brings out the ornate details of the structure. But he might have been better off trying to replace the grey background of the image with a color that was closer to the background of his container div rather than the white one  he used. The white border does fade into the background decently, but he could have drawn greater attention to the structure if the two background colors were similar. Moreover, the vignette would have looked more natural.

The colorization of the Senate Lager Billboard looks great. I think he matched the colors incredibly well, and his work on the man in the billboard was meticulous. I especially liked how he chose to colorize the billboard alone, rather than the entire skyline. The decision draws greater attention to the billboard, which is washed out in the original.

Editing Images

Editing photos is an important aspect of any digital history project, at least that is if one studies a period in which photography exists. I do not study such a period, but I still think these editing techniques can be useful for me at least in terms of learning how to use Photoshop to adjust any images that I may want to use in my website. Photos clearly are not the only useful objects, but editing them, I think, provides a very productive way of learning the ins and outs of the software.

The wicked worn look for instance would probably be very useful for my project. In a previous post, I indicated that I am trying to use a them of old maps for my website. Using the wicked worn look on any images I use in the website will help accomplish that goal. Certainly, I wouldn’t use it on a photo since that would be destructive and disingenuous to the picture.

As it relates to the photos, since this will the the image project, I have been impressed with the lynda.com tutorials. One of the biggest mistakes I have made when working on the man with the cat photo is not placing every step that I make on a separate layer. Because of this, whenever I make a mistake and not recognize it until I am a few steps past, undoing it means redoing a bunch of work. The use of layers has definitely been the most important issue that the tutorials stressed. The other techniques have been helpful, but often the small things can be the easiest to trip you up.

Posing photos

I was struck by Errol Morris’s “The Case of the Inappropriate Alarm Clock.” In his argument that the controversies surrounding the FSA photos were perhaps at times overblown and that all photography provides an amount of posing and framing, I found myself both persuaded and skeptical at the same time. I think Morris’s perspective on the issues becomes most clear in his discussion with Bill Ganzel. Ganzel argues that even if the photograph of the family fleeing a dust storm was staged, nobody could deny that it was dusty. Ganzel stated, “it portrays reality,” and Morris agreed. This along with the logic that photographers constantly edit their work by choosing which photos to print, how to crop them, how to frame the shot, etc. makes sense to me, but at the same time it demands that we must trust the photographer to intend to “portray reality.”[1] I do not think I’m ready to take that plunge, just like I do not, and most historians do not, wish to have to trust the word of other historians, so we read the footnotes.

I was worried I was getting too worked up in my pondering the issue when I remembered a controversy that perhaps demonstrates what is actually at stake more than FSA photographs. In 1995, a German travelling exhibition opened demonstrating the atrocities of the Wermacht, the Germany army, on the eastern front during World War II. Major controversy ensued as graphic photos displayed the atrocities institutionalized by the Wermacht. Moreover, many of the photographs came under fire. As it turned out, a very few of the photographs were not of atrocities at German hands, but Russian.  Certainly this is much more drastic than anything perpetrated by the FSA photographers, and it is certainly fundamentally different than placing a clock on a mantle. Nevertheless, there were lesser offences as well that came under similar fire. Other photos were cut into portions and displayed in different areas of the exhibition, which distorted certain events.

Under official review of the exhibition it was determined that “‘1. structural mistakes, 2. inaccurate and careless handling of material and 3′”, due to the way the exhibits were presented “‘too sweeping, suggestive statements.'”[2] The review, however, could not find any “‘counterfeits in the main question and thesis, ‘” Similar to Ganzel’s statement, it portrayed a reality if not technically so. Certainly this is an exaggerated example, but it seems to me to be a difference in degree rather than fundamentals. Focusing on what the photos represent rather than what the photos actually are can lead to these exaggerations, which is why Morris’s suggestions make me uneasy.

[1]Errol Morris, “The Case of the Inappropriate Alarm Clock (part 7),” http://opinionator.blogs.nytimes.com/2009/10/24/the-case-of-the-inappropriate-alarm-clock-part-7/#more-11563

[2] “Controversial Wehrmacht Exhibition Back on Show,” http://www.dw.de/controversial-wehrmacht-exhibition-back-on-show/a-338282

Color & Design

The readings this week on color have been very helpful for me as I continue to consider revising my color scheme. I’m trying to pull out the colors consistent in aged paper. In doing this I think taking advantage of the analogous colors Robin Williams refers to will be useful. I have also been playing with the various color scheme tools provided by clagnut. So far I have found EasyRGB to be the most helpful. The ability to simply put in the html number and receive various harmonious colors is fantastic.

This leads me to another discovery that is helping me as I consider adjusting my color scheme and general design of my website. If you find an interesting design, color, or font on a website you would like to use, you can find out exactly what it is by right clicking and selecting “inspect element.” This option will pull up the HTML and CSS in window at the bottom of the screen from which you can inspect how they organized their site, the colors used in the site, and the fonts used in the site. It usually takes a little sifting through code and divs to isolate the features (especially the CSS features) that interest you.

I have been using the inspect element feature on websites whose color schemes interest me, isolating the color that I think most appropriate to my website, and then I have been placing the color in the EasyRGB color harmony system. This approach has been hit and miss. Sometimes EasyRGB spits out great colors that are simply not useful to my project; sometimes it spits out colors that I don’t think I would ever want to use; but sometimes, it provides a great idea.

Comment on Elizabeth Moore’s blog.

Interfaces and Layouts

This week’s readings focus on the basics of website design and layout. The lynda.com provided a basic introduction to using Dreamweaver cc. Much of the information was introductory as the title would indicate, but there were some parts that were especially interesting. The tutorial introduced me to a number of shortcuts that are helpful to use in dreamweaver–for instance the utility of the CSS designer. More importantly, however, was the section that discussed the creation of media queries.
Similarly, Jakob Nielson’s article provided a basic guideline of how to and how not to visualize links. His guidelines are more or less a common sense approach to links. The basic emphasis is to make links clear and do not mix formatting for links with non links.

I got much more from Ellen Lupton’s chapters on digital publishing and interfaces. Much of the descriptions were probably out of my skill level, but I think she provided some very interesting suggestions concerning the layout of websites. It makes complete sense that the sort of website determines how the designer wishes the visitor to interact with the website, and that the designer should shape that interaction through page layout. I had not thought of it as clearly as she describes it–for instance taking into account the type of reading in which one might expect the visitor to engage based on the type of content. These are sorts of suggestions that seem obvious after receiving them, but one might not consider prior to reading the chapters. Sometimes, it is the small things that we overlook.

Fonts and Notes

Before I discuss the readings for this week, I wanted to raise an issue I had with the w3c HTML validator. I used HTML5 in my website to begin with, but when I put it in the w3c validator, it returned zero errors, but it would not provide me with the validation badge. Apparently, the validation was not comprehensive enough and it explained that there may be errors that the validator had not detected. Thus, no code for the badge was produced at the bottom of the page like the CSS validator had done. To rectify this problem, I turned my website into an XHTML page, which was a little annoying because tags such as <article>, <header>, and <footer> along with others only exist in HTML5. For most of these I was able to simply delete the open tag and closed tag, and it did not affect the format of the page. For others, I had to replace tags with XHTML friendly ones. Nevertheless, I hope that this is a problem only I ran into because of some oversight I made. Or, perhaps there is another site that will provide a validation badge, and I was simply not able to find it. In the case that this problem was not isolated to my incompetence, I hope that this might be helpful to anyone who passes across my blog.

Now, to the readings.

I was very surprised that the different type of font one uses influences that way that others approach the information presented in that font. After the readings from last week, I should not be surprised. As the Stanford credibility project indicated we base much of how we perceive the credibility of something on its presentation. Why would this not be true for fonts?  Errol Morris’s article along with the lynda.com video caused me to start looking a at various fonts in Microsoft Word to analyze what are and are not more readable fonts.

I never would have thought that footnotes would be such a concern in html. I have never been irritated by bracketed numbers. They tend to be just as annoying, but not more than, end notes in a book or chapter. However, the popup notes that professor Petrik and Alan Jacob refer to in different forms are intriguing. I doubt that I would be able to remember all of the html and css code that needs to be utilized for each footnote. I guess that is why one would begin by copying and pasting the html and adjusting to fit one’s needs.