Clio 2: History and New Media introduced a number of new techniques and tools that enable digital historians (and others) to create and showcase historical research on the web. In particular we utilized HTML and CSS to build and style web pages, improved and modified historical images using Photoshop, and learned how to bring the various components of design (type, color, layout, images) together to enhance the presentation of historical content.
The Clio 2 portfolio captures the progression I took through the course. The homepage represents my initial foray into HTML and CSS. The major assignments of the course, typography, image and the final have not been modified or improved. In this way, these pages meaningfully represent the development of my skills over time. (Note, the design assignment was cancelled due to inclement weather in Spring 2014 and the link is nonfunctioning).
Below are the collection of blog posts that mark my progress through the Clio 2 course. Each week we were required to blog on our experiences working with web design, contending with HTML or CSS, and grappling with the readings.
Well, after a lot of hand-wringing and troubleshooting, the site is… done!
Overall, I’m impressed with what we’ve accomplished this semester – clicking through and looking at the webpages we’ve all made I’m pretty proud of us – give yourself a pat on the back and have a great summer!
Completing content when you have a collaborator definitely complicated my plans for the final project. While I’m committed to a discussion of Alice Terry and Edwin Hodgson in the future, I’m returning to my original plans for the final project and focusing my attention on the Whatcoat Mission in Baltimore.
Thankfully, I made a lot of headway over the weekend and the bare bones are in place (the site isn’t live yet, so I can’t share it here). I’ve switched over to the 960 grid. There have been some growing pains (oh, navigation bars – will you ever be simple to make?) but overall I’m pleased with the progress I’ve made.
I’m excited to see what everyone has come up with in class!
I’ve been doing a lot of thinking about the final project. My overall objective to is to present some information about two prolific deaf writers (writing between roughly 1880 and 1930).
The challenge here is to present information in a way that is clear without being boring. I’ve got a lot of text, some areas to link out to primary sources, and very few pictures. It will be easy for this to turn into blocks of text, so I’d like a design that guides the reader/visitor down the page and through the content.
I started with an organizational chart. I’m thinking that I’ll wind up with roughly seven discrete pages, though this may expand if I decide to chop the text up into several pages. The hierarchy should look something like this:
Another of my challenges is color. The content and photos are largely black and white and gray. I’d like to spruce up the muted palette but I want to use a light hand. These are the colors I’m drawn to:
My image assignment is up! Sorry for any delay – I was trapped at the Denver airport today because of a snowstorm .
This week I’m working in Dreamweaver again – creating a webpage for all my newly edited photos. I’ll admit that each time I open the program it makes me nervous – still – but I felt much more competent creating this site than I did the previous two. I’m afraid I have nothing to show the group yet. It’s not ready to go active, but I’m glad to have gotten a solid start on it.
I spent some time on this assignment.
So, he turned out a little.. intense. But in my mind the pair has a backstory and he and his cat are definitely doing some plotting in the photo.
Anyway, I cropped the image and made changes to the levels and curve. I removed the edges and borders and cleaned up the spotting and scratches. I had to do a little reconstruction on the edges to create a nice rectangular image.. and to generate a knee entirely.
Creating images and changing images and the distinction between those was the subject of the reading this week. For me, it recalled a class I took in my undergrad days called “True Fiction” – the subject of the class was the way in which film, photography, and books exist in the area between fact and fiction. In effect, these are objects are mediated- created with intent and interpreted by others with intent. We watched Errol Morris’s film “A Thin Blue Line” in an effort to draw attention to the way in which documents and photographs are mediated by their creators and their audience, and to drive home the idea that a film, like Morris’s, can be simultaneously “truth” and “fiction”.
The take away from that class, for me, was that we should be critical consumers of information and that there are always multiple interpretations. An idea that serves me well as a historian in estimating the value and meaning of my findings at an archive.
The reading today and our recent work on producing digital history has highlighted a related but distinct constellation of concerns.
When we photoshop a historical image, removing imperfections like dust, scratches and tears. Are we reducing the object’s value as a historical artifact? When it comes to editing photos I admit a level of uncertainty. Am I destroying the “truth” of an image by cleaning it up? Or giving it to an audience to be best appraised? Am I distorting some reality by cropping, orienting or reversing an image so it sits prettier on my website? Or driving my argument by making it flow cleanly across the page?
In the production of scholarship we have a responsibility in shaping the interpretation of historical objects. We critically assess what we’ve found by asking about intent and meaning and interrogating the record and seeing what shakes out. We do a great deal to frame the interpretation, we argue one thing or another and we dig up contextual information to locate what we’ve found in time and space.
But then we take all that stuff out and, in the pursuit of our argument, piece it together in a way that makes sense to us. In a way that reflects history as we understand it.
The answer to my question about photoshopping images comes in being transparent about making changes. It builds on a practice that we all already engage in. When I quote from a book I remove the author’s words from their context and in some ways distort its meaning. When I reproduce handwritten documents in neatly formed text I’ve distanced the text from the author. And when I utilize an image I have removed it from its context and reproduced it digitally. The thing is, we do it by making it expressly clear that this is a smaller piece of a larger work. We already add footnotes and citations to text, similarly, we should provide the audience with a clear idea of whether or not the image has been changed and where they can seek the original source.
I’m curious to see how others responded to the reading this week. In the meantime, I’ve already engaged in altering the historical record, as you can see below. I used the helpful tutorials to crop and make some repairs to a damaged photo. I made it a bit easier to see by cleaning up the image.
I’ll admit it: I’ve been having a lot of fun. I had a moderate amount of experience using Photoshop coming into the class, but most of that experience involved slightly editing pictures or creating images from scratch. The tutorials have been really helpful in expanding my skill set in a not-so-intimidating way. This week I played with two things extensively: first, I tackled the engraving tutorial created by Dr. Petrik, next I tried my hand at coloring an image. While I’m not entirely satisfied with any of these attempts, it was a great start.
I started with the engraving above. This image is one I collected while I was working on my MA thesis. The engraving is one of the only images we have of the church buildings that housed dual (deaf and hearing) congregations on West Eighteenth St in Manhattan for forty years. The buildings were sold (and almost immediately demolished) in 1894.
Anyway, the image above is pretty clear, but I intentionally cleaned it up as you can see below:
I heightened the contrast to emphasize the details in the engraving and created a clean black and white image. Next I cleaned up the edges of the image – removing the sky and border shading on the top, right and bottom of the image. For me, it’s a cleaner image and something I could use in the creation of a header or something. I contemplated removing the buildings to the left, the sidewalk and bush to the right- but I liked that those features gave the image some context. I could have also removed the shadow that stretches across the face of the building, but let it remain for the same reason.
Next I wanted to try editing an photo:
This is one of my favorite photos from my research. It is a rare casual photo of prominent deaf community members- in this case they seem to have been promoting a biking club they founded in the city. Given the clarity of the image and my interest in the topic, I decided to work on hand-tinting the image and I was surprised with the results. I spent some time cleaning up the image – removing some dust spots and smudges from the scanner.
But I admit, I had too much fun with this. I wanted to emphasize the men and their bikes by coloring them alone- and found myself with a new appreciation for the photo entirely. I was surprised to realize that Fox (the jaunty fellow on the right) has a cigarette perched on the corner of his lips. A minor fact but I’d missed this detail every other time I looked at the photo. The process of coloring their clothes got me thinking about fabric and color choices a great deal as well – what colors would have been popular at this time? Would Fox have color-coordinated his socks to his tie, as I did?
Because I couldn’t stop myself, I’ll also include a fully tinted image:
These images are by no means perfect – I would want to spend a significant amount more time adding shading and details. A closer inspection revealed that there may be a pattern on those socks- something I’d like to highlight if I make another pass at these images.
Overall, as with everything, a new means of presenting information can also call up a host of new questions. Still, I’m enjoying the process.
I’m having a lot of fun playing with the tools and tricks described in this week’s reading! I’ve used photoshop before but it was fun to try out some new techniques. Above I used some images from a trip to Moab – both of them took a little editing and cleaning up but transforming images into text was new for me and I like the results.
Overall, the work this week has me thinking ahead to my final project. The images I’ll be using are largely black and white images – but many might need some enhancing in order for them to display well on the web. That means that color and layout will have to play a much bigger role in capturing visitor’s attention and directing their movement through the portfolio.
I found the tips this week on color selection and use to be really helpful. In the case of my site, the subject matter doesn’t necessarily lend itself to bright colors- religious history and segregation don’t really scream “lively colors”. But I’d also like to avoid a dark and dreary sensibility. In this case, I think the integration of natural, neutral tones will probably go a long way in creating interest without disrupting the flow of the site.
This week I commented on Ben’s Blog.
I don’t know about you guys, but this project has been a difficult one. I’m still trying to get the layout of my typography assignment functioning appropriately- so rather than posting a link to a finished project, I figured I’d give you a sense of how I’ve spent my time on this.
First I turned to my source material for information. As you can tell by the VERY high quality photos below, the majority of this material was collected during a research visit to church archives in Baltimore. I hoped to use these images as both typographical and compositional inspiration.
Here I collected fonts from a number of church materials- letterheads, program books, and church registers- as well as items from the Deaf press that would be representative of this period.
I also looked at the layout and composition of these documents, collecting eight that were visually interesting.
I also began collecting some details that appeared across the texts – I’m hoping to be able to integrate these details in the final project.
Armed with some visual inspiration, I also set about developing a mock-up of the final design.
You can see a rough version of it above and a link to my page here. The challenge for the past two days has been translating all the ideas into Dreamweaver. I hope you are all having great luck with this!
This week I commented on Sara’s Blog.
The reading this week focused largely on structure and layout and it has me thinking about the page from a new perspective. Generally, I think I’ve approached print media and web pages from a functional perspective; paying more attention to content and only distracted by form when it is… distracting.
The examples in Thinking with Type, were great because they reinforced the importance of layout and design, from both an aesthetic and a functional standpoint. The examples on pages 152, 154, 158-159, and 188 got me thinking about how we use footnotes on a page and how this may be made more or less effective as well as more aesthetically pleasing. I connected this with last week’s reading by Dr. Petrik, Scholarship on the Web: Managing Footnotes. In the same way that the physical texts described in Lupton’s book disrupted or divulged information in meaningful ways, presenting information on the web requires thought.
HTML & CSS built on this line of thinking and forced me to consider the users of a webpage. Who do I want to visit my webpage and what do I want them to see when they get there?
My (potential) visitors are varied. There’s the people of this class (who are forced to look at this page), my parents (who google me for no discernible reason), and, hopefully at some point, other history scholars and prospective employers.
The first two groups, I’m sorry to say, are not my focus in constructing a website. Rather, I’d like a page that fosters discussion with scholars in my field of history, primarily deaf history. And I’d like to create something that showcases my (developing) skill-set. I’m still deciding, however, what that page would look like.
This week focused on the subject of type, something I genuinely enjoy. I’m one of those people who harbors strong feelings about comic sans and spends a little too much time selecting fonts for projects.
Still, it was interesting to circle the topic of typography from a number of perspectives: theoretically, practically, aesthetically, historically. It encouraged me to think about the use of type in new in a new way.
One of the things that drew me, was the way in which people seemed both comfortable and uncomfortable describing fonts. You could simply refer to them by name, and many did, but others still searched for ways to convey the meaning of fonts. In the film Helvetica, for instance, the subjects frequently described fonts outside of spacing, cap height or ligature. Instead, they were using adjectives generally associated with objects or sensory perception, rather than type.
“this has a kind of belt and suspenders look, it needs to be, you know, much more elegant, hand-lasted shoe.” – Jonathan Hoefler
Errol Morris’s examination of this in his study of the subject, Hear, All Ye People; Hearken, O’ Earth reinforces the idea. He suggests that fonts have the capacity to evoke “truthiness”, while David Dunning suggests that a font is “slightly tuxedo.” As Jonathan Hoefler explains in the interview, fonts are frequently described using terms that are “qualitative… and subjective”. They seem to evoke meaning outside of the content they represent.
As Lupton frames this concept succinctly as “typography as discourse” (Thinking with Type, pg 97). In effect, this is what Morris’s New York Times study strives to identify: if type is a form of discourse, what are it’s parameters? How does one convey “truthiness”? The film Helvetica, suggested a changing discourse – fonts took on new meaning in new contexts. Morris’ look at the history of Baskerville certainly demonstrates a changing understanding of one type face.
Overall, the big points I took away from this week came with the last part of the Ducket reading in HTML & CSS . Why does this font stuff matter? Because in constructing webpages, we are choosing elements not solely based on our own personal preference. We’ve got to be aware of the interests and concerns of the potential visitors to our site. In effect, as much as I love the details of a decorative font or a script font, my readers may not. Clarity should be of heightened concern in choosing fonts.
My webpage is accessible through this blog (click on Digital Portfolio at the top of the page, or click here.)
For me, this week’s readings jumpstarted my thinking about the projects we will be generating over the course of the semester. While we’ve spent some time talking about the organization and structure of webpages in other classes, I’m looking forward to taking it a step further and testing out these ideas.
There are a lot of examples of poor web design available. (My bank has a particularly terrible webpage.) However, identifying poor design depends on how users evaluate them. I complained about this last semester, but in celebration of a 150 year history my alma mater put together a very pretty and very ineffective timeline that showcases images and content. While it’s “pretty” and “showcases information” – it is also useless. Users can click on the highlighted events to view images or read content, but the experience ends there. There are few links to sources or lengthy descriptions and there’s no opportunity for additional interaction with historical content or other users. A redesign of the site would take into account the arguments in this week’s reading: form AND content matter. As Norman argued, an attractive and pleasant user interface improves the experience of users- but so does intelligent and careful design (Elish and Trettien).
What does it mean that people evaluate aesthetics rather than content or effectiveness in using web pages (Web Credibility)? It means we have to think carefully about how we put pages together- so that they are both pretty and useful.
This week I commented on Sara’s Blog and in my own comments below.
This blog is back up and running for this spring semester – hopefully it will chronicle the development of some really great technical skills. Worst case scenario: it serves as a harrowing reminder of a tech-newbie gone wrong.