SILENT SENTINELS

Initial Thoughts

Working on this site has certainly expanded my perspective on the web in general.  How it works, what methodologies currently exist for interaction in web-based ‘communities.’  Bringing this to the field of History and an academic community with already established methods of interaction obviously poses significant difficulties, not least of which is adoption.  Despite these difficulties, it is encouraging that a university, and certain leaders within it, have taken steps towards encouraging, rather than discouraging, adoption of web-based interaction and argumentation.  While David and my site will not be left in the Web for viewing I think the lessons we have learned while struggling with the process of creative decision-making in a more visual environment will be useful for us in future projects.

Process of Teamwork

The division of labor between David and I was certainly an area of initial thought.  David came in to the arrangement with all of the content in one form or another as he is already a professional historian for the NRO, and I came in with a definite interest and fascination with the process of actually putting out a finished website.

The way it turned out could not have been more ideal.  Given the structure of the assignments, as the semester went along David and I would meet and hash out things like: what will be the architecture of the site, what colors/images to use, typography, etc.

David chose the initial theme for WordPress, Fusion, which we hacked to create our current site.  We simplified or removed alot of the blog functionality which the Fusion creators certainly intended by our theme, but I think a simple navigation fits the main goal of our site: to provide basic information and historical explication of what is currently unclassified in American reconaissance.

Site:

Well, here it is (drumroll please):

SILENT SENTINELS

Everyone feel free to leave us your thoughts!  Keep in mind while interacting with the Timeline that there are only a few dates which have content associated with them.

Thanks for a great semester and all the input!

Helvetica Film

Helvetica

A friend posted a link to this interesting looking film on their gchat.  It seems to fit very well with what we’ve been studying and would be an excellent one for historians wanting to be aware of what their type communicates.

Has anyone seen it?

HTML/CSS Mockups

These mockups are basically things we have been working on for a while.  Despite that, trying to polish the static pages to where they both have all the elements we had in our color mockups, as well as validating correctly, required some more changes.

As a reminder, here are the color mockups -

Homepage:

Color Mockup - Home Page

Gaining the High Ground -

Color Mockup for "Gaining the High Ground"

and NRO Directors:

NRO Directors - color mockup

And the static HTML/CSS pages from our site:

Home Page

A National Imperative

NRO Directors

As you can see, we simplified from the “box-within-a-box” on the static historical explication pages, to a simple one-box version.  I think it works alright that way, but comments are welcome!  We also did the footer as one box with some simple lines as dividers between the different footer elements rather than the multiple boxes.

The header element seemed to look better with a silver logo, so that is what we went with on the pages.  In order to get the CSS to validate we had to change some of the color names to RGB values  and make a couple of other small changes.  It still doesn’t officially validate because it says our style sheet doesn’t exist, I double-checked and it certainly does exist, so not sure what’s going on there.

The HTML, however, shows 619 errors and won’t validate, not sure how to rectify that!

As far as CSS goes – I used the theme’s style.css file and found certain things like background image, header image, footer style, main-content style and made the changes to what was originally there to make the file have the look/feel of or mockups.  The custom logo, header and background images were done in Photoshop Elements.

Jeremy’s suggestion to use the “clear” break in CSS to force our media and text to behave with one another was excellent and helped to “clear” up those issues.  Adding an extra one of these breaks kept the images from hanging over the edge at the bottom.

Now if only the timeline worked in Internet Explorer!

Design Rationale / Accessibility

Design Rationale

Alright, so David is working on putting together our final design rationale document for tonight, so we should see it soon.  In the meantime we have put together a tertiary page.  The first two haven’t changed in their basic elements from last week, so I won’t post those here.

Overall I think it is looking pretty good, I believe we will darken some of the greys to improve the separation of information boxes from the background.  Still have to figure out how to do alot of it though!

Accessibility Readings

While not really qualified to comment on the specifics of the writings (I know I’ve written that a few times this semester), I can clearly see the benefit or even requirement to designing your page with accessibility in mind.  Most of these articles focused on specific elements of accessible design, but as I was reading them I could clearly see why this is not just about opening up your pages to a wider audience, but also about a requirement to not act in an alienating fashion towards those with disabilities.

The aspects of this kind of design built around screen readers (which seem to be the primary tool for computer use by the reading disabled)  highlight what is hopefully a historical trend to disallow us/them dichotomies in education and keep educational systems open to non-majority groups.

Color Mockups – Preliminary

Color Mockups

Well, we have definitely made some progress on our color mockups.  One of the fortunate side-effects of working with photoshop for the mockups is a custom logo that we have uploaded the website.  Because of the themes options this was done through the WordPress dashboard, keeping us from having to plough through making it a link etc.  You can see the new logo here.

As for the mockups themselves, they turned out pretty well I think.  So far we have done one for the “Homepage” and one for another static page called “Gaining Ground”.  Here are the links for those:

Home Page

Gaining the High Ground

The background you can see there is actually the “Denied Area” which was targeted for surveillance (I believe – David would have to confirm).  The colors fall within the gray scale, which seemed appropriate as the NRO already has a site for kids and this would be aimed at an older audience, and can preserve a more “official” tone.

Leave us some comments and let us know what you think!

Eismann/Petrik Readings

Eismann

Katrin Eismann’s guide to Photoshop Restoration and Retouching is a particularly good resource for us as historical website designers/contributors.

I believe it was Susan who brought up a good point in her blog that this kind of ‘restoration’ through a digital software program like Photoshop is perhaps a bit more nuanced than the kind of ‘family photo’ or ‘glamour shot’ type of restoration.

Just like in writing a monograph, it is important for a historian to consider the amount of ‘lenses’ she is putting her evidence through.  A photograph was taken (possibly staged or set up), selected for a historical database or a family album based on criteria we may not have access to and subsequently processed digitally by the photoshop user, who enhaces the features of the picture to most closely communicate her argument.  The viewer then views that argument in whatever context the web-designer/historian chooses to place it.

Despite all of this, I don’t think that, in a general context, all of these lenses carry us that far from the original evidence.  While the potential for truly malicious alterations are possible, this is true for documentary evidence as well!  At some point we have to determine which sources we trust and analyze their evidence with a grain of salt.

As for Eismann’s text, I enjoy the layout of the work, I find it easy to use, but I believe I will employ it as a reference more than a step-by-step learning guide.  Trying to process it in the time available has not led to an in-depth knowledge of photoshop restoration.  I certainly admit that this is because of time difficulties, to go through the book, while in front of the computer and trying the steps the whole time, is only feasible to me when I am actually attempting to do to one of my pictures what is being described.

Petrik

Petrik was a simpler exercise, and I was better able to comprehend the steps (it helped that she broke things out by ps and el!).  Her exercise is something I may try to place a static background image using a matted picture.  We’ll see though!

The rest of her site seems to have good resources for historians of the web as well.  I particularly liked this article, as it answers questions I have had since the beginning of class.

The article actually includes the CSS for creating footnotes on a page and describes what the CSS is doing to create the desired effect. I’m not sure if we will need this for our project, but it will be useful if needed. As a side note, this article cites Cederholm’s book from earlier in the semester.

Sitemap/Wireframes

Sitemap

Here is our sitemap for the SILENT SENTINELS NRO history page.

We went fairly simple with this, as it represents a piece of what will be a larger puzzle when the NRO folks do it “for real” so to speak.  The sitemap was done in Word, which was very simple, but if we do it again it might be faster to use one of the free online software systems.

Wireframes

Here are a few wireframes:

NRO Directors

A National Imperative

Home Page

These were created with lovely charts.  I think we definitely are finding the exercise of working together on the project to be beneficial and it is great to see the project evolve as we go.

Still have lots of work to do with the CSS with regard to color scheme, location of our link bar and doing a major overhaul on the style of the Timeline plugin, but it will come!

CSS / Continued Site Development

So, some pretty big strides since my last post.  David and I met last week and worked on some sitemap ideas for the site, finally settling on one which we both liked.  We have some work to do to get the site to match up with the design, but I think it will be doable.

David started with a fairly basic (but not bulletproof, as the header formatting only worked in Safari!) theme for WordPress which we have since been editing.  The biggest step has been finding the SIMILE Timeline plugin which is working great so far.

I had to mess with the Timeline css to get it to look like I wanted – width to 150%, but most of the options can be altered in the admin panel. After that it was a matter of entering the dates which David provided me. Check it out on the site.

I used Adobe Elements to create the “stars” image for the header, simply matching the pixels to the header pixel count and using the Fusion theme code. I originally had a CORONA (the satellite itself) image on the right of the header, but it didn’t mesh well with the stars.

We are definitely working with the overlapping deadlines idea from Garrett, as we will continue to develop our design based on what is feasible without cutting the theme we are already using to pieces.

The plugin is definitely easy to use, and I recommend it for anyone working with dates as an easy, but I think kind of elegant, way to portray events on a timeline.

Strategy and Scope Document

Isaac Brown

David Waltrop

HIST 697 Spring 2009

March 2, 2009

SILENT SENTINELS

U.S. National Reconnaissance in Peace and War

Principal Investigators

· ISAAC BROWN, new-media specialist, George Mason University, Fairfax, VA (phone: 281-732-0470, isaac.brown@gmail.com)

· DAVID WALTROP, historian, National Reconnaissance Office, Chantilly, VA (phone: 410-245-5873, davidwaltrop@gmail.com)

Abstract

Silent Sentinels will use static images, historic and contemporary video, and custom made multi-media applications to create a dynamic, interactive, website on the history of U.S. national reconnaissance for a general audience. The Central Intelligence Agency (CIA) and National Reconnaissance Office (NRO), two principal U.S. reconnaissance organizations, receive approximately two million page views on their website and a significant amount of public inquires each month. This statistic and the recent release of nearly 80,000 NRO and CIA documents make this a timely project with high public interest and value.

We will arrange Silent Sentinels around four themes in reconnaissance history. A National Imperative will focus on the decade after World War II when the United States came to see reconnaissance as a means of gathering intelligence on the Soviet Union and other Cold War threats to prevent surprise attacks similar to the one on Pearl Harbor. Aerial reconnaissance will present the development of reconnaissance from the use of balloons, through slow, low-altitude aircraft, to sophisticated spy planes, such as the U-2, A-12 and SR-71, capable of altitudes in excess of 70,000 feet and speeds greater than Mach 3. Space reconnaissance will discuss early U.S. signals and imagery intelligence satellites and the founding of the NRO. Advanced reconnaissance will explore more recent space-based intelligence capabilities and their impact on world events. In each theme, Silent Sentinels will explore the affects of geo-political events on the development of reconnaissance capabilities and the complex relationship reconnaissance has in preventing war and maintaining peace.

Methodology (Technical Requirements)

The technical scope for Silent Sentinels is a site containing 10 to 15 pages that present a new analytic framework for understanding the history of U.S. reconnaissance. The home page will include links to pages that will provide a narrative of U.S. reconnaissance history using the four themes mentioned above and brief descriptions of the Directors of the NRO. Users will navigate an interactive timeline that will allow them to select a date or picture, which will connect them via hyperlink to additional information on the website. The timeline will operate as a gateway to the rest of the website.[1]

Silent Sentinels will utilize pre-existing WordPress themes to accomplish portions of the layout. For the timeline navigation page we currently plan on finding code within a theme that creates something similar to our intended design, which we can alter to merge the date and picture links. We think we can use JavaScript to develop the timeline, but this may be beyond our scope. For information pages we plan to use built-in WordPress functionality and add textual analysis and multimedia items. Graphics and historic videos will be courtesy of the NRO.

Work Plan

2 MAR 2009 (Strategy and Scope due): Decide on website topic and broad content themes

23 MAR 2009 (Wireframe of Structure due): Complete final conceptual website design, prototyping of timeline navigation page, and identify 70 present of graphics

6 APR 2009 (Design Rational due): Complete final design elements, selection of graphics, and draft text.

20 APR 2009 (XHTML/CSS Mockups due): Complete XHTML/CSS site mockup and final text for website, and possibility the functioning timeline

4 MAY 2009 (Final Product due): Complete final functioning on-line site incorporating timeline and all information pages.

---

[1] For an example of timeline we have in mind see, www.dia.mil/history/time/index.html.

Strategy and Scope

Garrett/Brown

I thought that doing this week’s readings while working on the “Strategy and Scope” document was helpful.  Despite the fact that the readings go to a depth that doesn’t necessarily apply to the creative process on this site, they do outline where your focus should be and what the process should look like.

As mentioned in class by Jeremy, I thought that Garrett’s overlapping timelines graph was a useful visualization of what the process should look like.  I tend to want to just “start making it.”  But I definitely see the value in following the steps.  With that method you end up with a clear idea of what you are creating when you actually begin the surface phase.  This is also helpful since David and I are working on this together, if we follow through with the assignments/steps it will ensure that we can work independently on the final product without getting way off-beat.