Clio 2

Clio 2, Creating History and New Media, was taught by Dr. Paula Petrik in the spring of 2015, and is a required course for history PhD students at Mason. Designed to emphasize visual communication and to explore how to adapt history to a digital environment, Clio 2 involved learning HTML, CSS, and Photoshop, in addition to understanding the nuances of design, color, and typography.

My Clio 2 portfolio provides links to the typography, image, and design assignments, as well as to my final project. A culmination of all that we learned in Clio 2, my final project examines the Capitol Disaster of 1870 in Richmond, Virginia, and the politics of Reconstruction.

Below are the blog posts I wrote for this course, which are my reflections on each week’s assigned articles, books, and tutorials, and detailed my work on various class assignments.


Web Design Assignment

For the web design assignment, I created a rough draft of my final project that includes the home page in addition to the aftermath page. The aftermath page has sections on the relief efforts and the outcome of the mayoralty case. I attempted to incorporate the things we learned in the typography and image assignments into this design project. I used grey and purple to signify the colors of mourning. I included various images: one of which I worked on for the image assignment, and I vignetted the Chahoon image. The original image of Chahoon is of very poor quality and low resolution, and I can't tell if the vignette makes it look any better. I used lorem ipsum text because I am in the process of working on and editing my paper on the Capitol Disaster, so I may or may not be able to insert actual text by Monday.

My comment on Michael's post


Interactivity

The theme of our readings this week focused on interactivity. One of our internet visits was to the Lost Museum, which we also learned about in Clio 1 (here are my thoughts on the Lost Museum and using games as a pedagogical tool). "History and the Web, From the Illustrated Newspaper to Cyberspace" noted the ways in which visual media has been made interactive over time. Of particular interest to me was the information pertaining to newspaper illustrations, as both Frank Leslie's and Harper's Weekly and their respective illustrations have been significant sources while working on my current research project.

As a digital historian, when I think about interactivity I think about the various methodologies I can employ to interact with my data. When thinking about what to say in my blog post this week, I found myself returning to Micki Kaufman's in-progress dissertation "'Everything on Paper Will be Used Against Me': Quantifying Kissinger" and her recent brown bag presentation at CHNM. I think that one of the best features of digital history is the ability of scholars to interact with their sources in new and different ways, as well as the ability of the general public to be able to do the same. This interactivity can be achieved through the use of various methodological tools: text mining, topic modeling, content management systems like Omeka, and much more.

I think that interactivity, as Josh Brown showed in his article, is something that isn't relatively new to the field of history. The aspects of interactivity that digital methodologies can bring to both scholars and their intended audiences is exciting, and something analog and digital historians should embrace.

My comment on Jordan's post


Accessibility

I want to thank Mason and the rest of my peers for providing me with feedback on my image assignment. I was really impressed with everyone's work!

The topic of accessibility is an important and often overlooked one. When I was in library school, I was required to take an introduction to information technologies course in which we were tasked with creating a website from scratch. Keep in mind that the final result was not sophisticated in nature (I had a bright pink background with purple text and an exceptionally annoying image of tulips on the front page) and the requirements were nowhere near as rigorous as those set out for the Clio 2 assignments. Students just had to demonstrate a very basic mastery of HTML, CSS, and XML. Accessibility was one of the topics that we covered in depth, and our final websites had to be run through WAVE and/or Achecker (as well as W3C validator) and all errors corrected before the project could be considered finished. The weeks discussing accessibility and how disabled people use information technology was incredibly eye-opening to me, and I'm glad that we are spending time in Clio 2 going over it as well. Dr. Petrik has already given us several helpful tips on how to make our sites more accessible and easier for screen-readers to handle.

I decided to run my portfolio, typography, and image pages through WAVE to see how many errors they would throw. For all three of my pages, my only error is that "the language of the document is not identified." This is an easy fix and the next time I'm in TextWrangler I'll be sure to add the proper HTML tag. Apart from errors, my portfolio and image pages had no alerts. My typography page did have one alert: the image of the courthouse has redundant alternate text - the alternative text for the image matches the image caption. I didn't know that having identical alt text and captions would be an issue, but, again, it's an easy fix. To compare accessibility tools, I also ran my site through AChecker. My portfolio page has two known problems, both of which stem from my unidentified document language, and 45 potential problems, and to fix those problems Achecker's suggestions range from providing "text alternatives to non-text context" and having adaptable content. My typography page has five known problems, the usual two for not identifying the document language, and three for using the <i> HTML tag rather than adding <em> to the CSS. The page also has 48 potential problems. Lastly, my image page has two known problems (document language) and 96 potential problems! It seems that AChecker is a bit more thorough than WAVE, and it lets you know what could become problems down the road. In addition, AChecker also has HTML and CSS validation, so you can check your code and accessibility all in one place.

The bottom line is that it is very easy to make simple changes to your website in order to make it more accessible. For example, you can add extra HTML or CSS as our readings have shown, or you can use various tools to alert you to problems you might not have noticed before. It is important that we make these changes in order for the information we put out on the web to be easily disseminated and read by anyone, regardless of how they use or access the internet.

My comment on Stephanie's post


Comments on Jefferson's Images

Jefferson's image page is incredibly well done, and I really can only find positive things to say about it. Both images that he chose to manipulate are interesting visually and fit in well with his topic, and I like that he decided to make his matted engraving blend well with the style and colors of his page and portfolio. Jefferson did a great job in the matted engraving using the halo effect around several of the people who are close to the stage - they "pop" and the viewer is quickly drawn to them. I originally thought that perhaps the image should've been cropped more, but there is so much going on in the original engraving that it would have been hard to chose what to take out. Jefferson also made excellent choices in decides which color swatches to use in the colorized photograph. My only critiques would be to manipulate the code so that the matted engraving can remain within the boundaries of the wrapper. The sky in the colorized photograph looks a little bit too dark to my eyes, but maybe it was cloudy and/or raining the day the photograph was taken. My last critique would be for Jefferson to use another tool to try and bring out more of the detail of the original photograph, but exactly how he would go about doing that is not something I can speak on with any authority.


Images pt. 2

So the good news first: I found several images to use for the upcoming image assignment on the Library of Congress Print and Photographs Online Catalog and the New York Public Library Digital Collections site. I think I'll mostly be using images of the Capitol building (taken before 1870), as well as some of Richmond after the Confederate evacuation. I also finally figured out my colors for the final project! I am reading This Republic of Suffering by Drew Faust (one of the best history books I have EVER read), within which she discusses women's mourning attire. My final project will incorporate grey, purple, and lavender to coincide with the half-mourning colors worn by women who lost family members during the Civil War.

Now the bad news: I am incredibly inept at using Photoshop. The man with cat that I was working on Monday ended up looking worse than he did before I started editing, so I will be working with my image editor over the weekend to try to discover what having a "light touch" actually means. The two lynda.com videos assigned this week will also be helpful for learning more about how to use Photoshop.

My biggest take-away from the Williams' chapter is that you need to go big or go home when working on contrast. The effective use of contrast is attractive to viewers. Contrast is meant to make a page more interesting, and also assists in organizing the information pertained on it. Contrast can be created by using differing type faces, line thicknesses, space, and more. The four-part series "That Wicked Worn Look" was a bit above my head. I'm having a hard enough time working on enhancing my images and cleaning them up, and I think that most of the pictures I'll be using for the image assignment and final project will require enhancement and not aging. However it was an informative series, and it was neat to see the progression of the various images from crisp and clean to aged and worn. I'll put this series in my back pocket for when I finally master the process of cleaning up an image.

My comment on Peter's post


Images

This week's readings focused on images, using Photoshop, and color. Dr. Petrik's "Managing Engravings" tutorial was a useful step-by-step set of instructions on how to use Photoshop. Since I have no experience whatsoever with it, I found the tutorial, along with the exercise we started in class on Monday, incredibly helpful (and thank you, Stephanie, for all your help!). Errol Morris's seven articles about the "Case of the Inappropriate Alarm Clock" were some of the most interesting pieces I've read this semester. Not to mention all of the FSA photographs are unsettling and, sometimes, upsetting. Yes, the FSA's purpose and intent was to take evocative photos that were to be used as propaganda for FDR's administration, but that doesn't detract at all from the way the photos induce certain emotions. The articles made me feel better about my imminent work with manipulating images in Photoshop, since even simply taking a picture crops out and selects only a specific portion of a reality.

All of the discussion of images spurred me to take stock of what images I have collected so far in my research of the Capitol Disaster. Over break I'll be visiting repositories, and I know the pictures I take of manuscripts and personal papers will be unusable for purposes other than my own personal research. So far, I have various pages of the Richmond Dispatch and the Petersburg Index saved as PDFs on my desktop. I can use headlines and select small stories to supplement the text in my final project. I also have the entire collection of the Committee on Visitation and Relief saved as PDFs, but they are copyright restricted.

So, apart from the newspapers, what will I be able to put up on my final site? From the 1915 book The Capitol Disaster: A Chapter of Reconstruction in Virginia by George Christian, there are three illustrations: the outside of the capitol after the disaster occurred, the interior of the Hall of Delegates, and a diagram of the courtroom. I also found three sketches of the capitol building from this very early online exhibit from the Library of Virginia. I would need to check their usage rights prior to putting them up online on my final project. In addition, I have a few images from this Harper's Article that's been reproduced online. There are also two broadsides held by the Virginia Historical Society that are available digitally. Once again, I'll have to check their usage policy.

My comment on Nathan's post


Color

Thank you to my colleagues who provided me with constructive feedback on my typography page! Following your comments, I created more subheads in order to fully utilize my heading font. I also put the names of the fonts used in the footer. I adjusted the line height and tightened up the body text a bit. The navigation bar is now left-justified and I attempted to make the navigation font bolder. After playing around with the CSS, I was able to make a subtle change to the font strength, and even after putting in extreme amounts (like 1000000px) there still was not a dramatic change. Perhaps the font family does not lend itself to looking especially bold? I removed the quotation marks from the pull and block quotes, and I italicized  the titles of the journals and magazines in my references section when appropriate. The image from Frank Leslie's Newspaper is now centered and larger, which I hope fixed the spacing/margin/padding issue.

If you couldn't already tell, color is not something I'm particularly comfortable with when it comes to design. I tend to favor greys, blacks, and off-whites - all the neutrals. Neutrals are always a safe choice, though they are bland and unexciting. I'm not skilled at understanding when and where bold colors are necessary, or when it's okay to have a pop of color. My idea of being "bold" with color is using that shade of green for the rulers in my typography page and on the navigation bar. Perhaps part of my problem is that I can't seem to figure out which colors to use in my project. All of the sources I've looked at so for for the Capitol Disaster are newspaper articles and microfilm, all of which are in black and white. The scarce number of documents I've been able to look at online are also, unsurprisingly, black and white. I have no sense of what a good color palette would be for my project. What colors do you think of when you think of the 1870s?

Williams' definitions of complementary colors, primary and secondary triads, split complements, analogous colors, and the differentiation between shades, hues, tints, and tones definitely made up for all of the art classes that I did not take. I especially liked her tips on steering away from using too many warm colors and her suggestion to stick with a RGB color scheme on the web.  Golombisky & Hagen's chapter was also useful in learning more about color, illustration, and images. I never understood the difference between JPGs, PNGs, GIFs, and SVGs. If I want an image to be transparent, I should save it as a GIF or PNG, but never a JPG. I found the section on photo alternatives to be particularly helpful to me, since my project focuses on 1870 and unfortunately none of my primary sources are photographs. I am a bit overwhelmed by all of the options listed by Creative Bloq. I had no idea any of those tools existed! For those of you that have tested them out, are there any that you especially like?

So I think that for the rest of this week and weekend I need to think about my project, decide what colors are suitable, and sit down with all of the color tools and determine my color palette.

My comment on Steve's post


Typography Assignment

I worked for a while on the continuation of the Columbine website, and made several changes to the css in order to have my finished product look similar to the screenshot. The "big discovery" I made is that I can change the padding of the body to ensure that text does not wrap around the navigation bar. I was unable to figure out how to make my navigation bar stand alone when working on my portfolio page, so as soon as I made this discovery, I went to my typography assignment and changed the padding of the body. I embedded two different fonts: I used the same font for h1 and h2, and a sans-serif for the body text. I also changed the line height of the body text. I floated the picture of the flower to the right of the first subheading. I was able to get the font color of the navigation bar to change when the mouse hovered over it, and once again went to my typography assignment to make similar changes. I originally had the pullquote in a pullquote tag, but found that it was disturbing the surrounding text. On Jordan's suggestion, I changed the pullquote tag to a span tag and that fixed the problem. My remaining problem is that I am unable to get the wrapper to go below the footer.

My "finished" product

My semi-finished product

For the typography assignment I used the text from a Richmond Times Dispatch article published the day after the disaster describing what happened and the scene at the Capitol. I embedded fonts for the headers and the body, included an image, a pull quote, and a block quote. Figuring out how to do the endnotes properly took quite a bit of time even though I only have three references. For some reason I cannot get the navigation bar and h2 to begin on the same "line," so it looks like the navigation bar starts above the text of h2. I've played around with the margins and padding of h1, h2, and the nav bar and nothing has worked. I'm sure I'll still be working on it up until the start of class on Monday, but until then this is my attempt at the typography assignment.

My comment on Stephanie's post


Structure

After listening to the critiques in class, I made some changes to my portfolio page. I changed the width of the container from 900px to 775px. I added a 0em bottom margin to my subheadings in order to decrease the space between the text of the headings and the text of the body paragraphs.  I moved the pull quote away from the top of the page in order to decrease all of the clutter, and put it down with my second subheading. I also changed the margins around the pull quote to 2em on all four sides, so the text of the paragraph won't be too close to the box. I increased the line height of the text. Since the font size is currently .92em, I changed the line height to 1.84em. My portfolio still needs a lot of work before it is actually finished, but I feel like it's slowly progressing in the right direction.

Structure was the theme of this week's readings. The chapters assigned this week in White Space is Not Your Enemy provided me with a crash course in design basics. Their list of 13 common mistakes made by web design newbies was insightful and I found myself grateful that I didn't commit too many grievous errors in my portfolio. The chapter on the elements and principles of design was particularly useful to me as I've never taken a design course, let alone a higher-level art class (I stopped taking art after middle school, so when I say design is a challenge for me I'm not in any way joking).

Ellen Lupton's chapter on digital publishing was my favorite of all of this week's selected reading assignments. I found myself largely agreeing with most of the statements Lupton made. The ePub format does indeed favor the linear argument, because it is difficult to flip around, browse, etc. on an ereader. This is the primary reason why I try not to use digital editions of books I have to read for school. Google Books is one of the few accessible digital reading interfaces. As Lupton notes, Google Books includes links to sellers of the books, libraries, and book reviews. Additionally, Google Books is fully searchable. Hathi Trust has a similar interface to Google's, and includes sections with bibliographic information, copyright, which libraries nearby have available copies, and is also fully searchable.

I found Nielson's "Guidelines for Visualizing Links" to be confusing, since each guideline had various exceptions. I thought I would apply his guidelines to my own portfolio page and see what I came up with. To begin with, I can remove the underlines on the navigation menu but not of the links I have within the body text. If I'm using colors like red or green (which I don't think I will) I must underline the text in order to eliminate any confusion for color-blind users. If I want my portfolio to be easily accessible for users with poor vision or poor motor skills, I should continue to use underlines for links, and I should not place links too close together. I should not underline any part of my site that is not a link, and I should stick to using color only for my links and not any other text. Different colors should exist for visited and unvisited links, although they should be variants of the same color, and visited links should be duller in color.

My comment on Ben's post


Typography Matters, Too, & The Sad State of My Portfolio

This week's readings focused on the importance of color, typography, and footnotes. I found the Errol Morris New York Times piece the most fascinating out of all of our readings this week. The idea that typography can influence how people view the credibility  of information found online closely ties in to the article about the Stanford Credibility Project as well as "Attractive Things Work Better," both of which we read last week. The latter articles revealed that appearance is a factor in determining the truthfulness of information found online, while Morris argues, rather persuasively, that typography also influences our perception of the truth. Apparently I should write all of my papers - and even my dissertation - using Baskerville. Since the article was published in August of 2012, I'm curious as to whether more scientific studies have been done on the topic.

In addition to Morris' article, Type on Screen and The Non-Designer's Design Handbook provided more in-depth analyses of typography. After reading the section on the Sans Serif font family I think Antique, Folio, or Olive would easily translate to a webpage. I also found it interesting that it is acceptable, even encouraged, to have two contrasting types of fonts. This same premise does not apply to color, however.

Alan Jacobs' The Technology of a Better Footnote highlighted a problem I have had in the past. I have a Kindle and absolutely love reading on it, and in many ways I prefer it to a physical book. But this is not the case for nonfiction, particularly history books I'm assigned to read for school. As a historian, I find it absolutely necessary to be able to easily reference foot/endnotes, but when I read a history text several years ago in an ebook format I ended up being very frustrated. Does anyone who uses a Kindle still have a problem with accessible footnotes?

I enjoyed the short section in White Space in Not Your Enemy that discussed color theory. I found the rest of the chapter helpful for me in understanding colors: what is complementary, what contrasts, and which colors to pair together to make a website stand out. I'm still not sure how much of an eye I have for design, especially color. I've found that deciding what colors to use on my portfolio as my background and in the wrapper have taken much longer than I bargained for. Nothing looks exactly right, and nothing appears on screen the way I had imagined it to be.

Speaking of my portfolio, I have chosen to make it live even though it is still under construction. It looks pitiful. In addition to fixing the background and wrapper colors, I need to add text to the body, and play with the CSS so I can figure out what is going on with the bolded words in my unordered lists. My heading and sub-headings did not come out the way I had planned, so those need some work. I've been having trouble with the XHTML validation also - has anyone else run into problems with it?

My comment on Ellen's post

My comment on Jordan's post

 


Appearance Matters

I know nothing about web design and am excited to learn more about how to make websites, including this blog, more aesthetically pleasing. This week's readings encompass a broad variety of themes: appearance, creation, and preservation.  Two of the articles solidified the fact that the appearance of a site can affect how visitors gauge the credibility of information found on that site. Appearances do matter, especially for information found on the web, but also in the analog world. How likely are you to pick up a book that has a heinous cover? I'm a librarian and I will admit that yes, I judge books by their covers. What is most important for me, as an academic and a digital historian, is that the information I put onto the web is deemed credible, reliable, authoritative, and accurate. And that is where web design comes into play. I found the guidelines established by the Stanford Web Credibility Project to be particularly helpful as a means to evaluate my own site.

Stephen Ramsay's "Who's In Who's Out" asked a question that I found myself asking quite often at the beginning of the fall semester: what is digital history, and more broadly, digital humanities? There is no unifying definition to answer this question. Everyone you ask will probably have a different answer. This is what I think makes the field so dynamic, creative, and adaptable to changing technologies. The lack of a definition is one of digital humanities' greatest assets. Ramsay pointed out the very foundation of digital humanities: the act of creating, or as he says, "building things." This is one definition to add to my own working definition of digital history that I use when I'm explaining my area of study to people unfamiliar with DH.

Jill Lepore's intriguing piece reminded me of the importance of preservation for digitally born works. It remains to be seen how digital projects will fare 25+ years from now, and that is a serious concern for scholars. My first impression of the Internet Archive's Wayback Machine is that it is overly ambitious. Yes, it is important to capture information on the internet and preserve it for future viewing and use. But why does the entire internet need to be archived? Most of what is on the internet isn't worth being seen years from now. What needs to be built, if it isn't already, is a tool similar to the Wayback Machine that captures the sites that most likely will be accessed in several years' time. Obviously criteria and guidelines would have to be established, but digital projects, academic articles, government information, popular and/or influential blogs, news websites, and much more might be some of the sites that are acceptable. I just don't see the point of attempting to archive the entire internet. Who really wants to see their MySpace page - or Facebook page - in 2050?

My comment on Stephanie's post

My comment on Jordan's post


css.php