Digital-Collections


DC-01

I continue to look at other university library digital collections to see what they are doing that we are not.  It can be informative to see what other people have decided is important enough to include on their websites.  Even if we don’t end up using these ideas on our own website, it’s good to know not only what other creators of digital collections are doing, but to find out what the users are seeing when they visit these websites and therefore the expectations that they might have when visiting digital collections such as ours.

One way of finding out what users want and expect is to ask them.  On the home page of the University of South Carolina Libraries Digital Collections, there is a link for a usability survey.   It is a brief survey that helps to find out who is using the digital collections (faculty, staff, undergraduates, grad students, or others); how easy the collections are to navigate; what kinds of things users are looking for; and whether users are able to find what they’re looking for.  This kind of information could be very useful in making decisions about the future of our digital collections.

Personally, I’m not a big user of social media, but it seems to have become a part of most people’s lives to some degree.  The home page of Duke University Libraries Digital Collections has a prominently featured area for both Twitter and Facebook.  This would encourage visitors to post comments on either of these social media outlets about what they’ve found and enjoyed in the digital collections.  Doing this would publicize the various contents of the digital collections to all the friends and followers of each user, which would in turn spread the word about the existence of the variety of things in the digital collections much more widely than any advertising the library could do otherwise.

Screen capture from the University of Washington University Libraries Digital Collections homepage: http://digitalcollections.lib.washington.edu/

Screen capture from the University of Washington University Libraries Digital Collections homepage.

There are always so many things that could be done, but there’s never enough time to do them all.  Having more staff and resources could help to do more, and having more funding would help to provide those additional staff and resources.  Every library and university, public or private, is always trying to raise money. Usually a person is more likely to donate their money if they know that it will go to something that is specifically important to them.  The home page of the University of Washington Libraries Digital Collections has a red star highlighting a link to “Support Digital Initiatives,  Make a Gift.”  The link takes you directly to the university foundation and the current needs in the library digital initiatives fund.   People who visit the digital collections and find things that interest them might be more likely to donate their money if they see that it could easily go directly to benefiting this interest of theirs and not just some general university fund.

Not every good idea for one library is necessarily a good fit for every other library.  However, noticing what others are doing and seeing what reactions they get can be a good way to start a conversation locally about what we might want to do in the future.

I’ve spent most of my last few months working on a project for the new ISU Extension Collection. The basic layout sounds simple enough: create a timeline for the important dates that this particular collection focuses on. The dates were not too far apart: 1900-1924. I’ve have seen a lot of web pages that incorporated timelines and I was excited to add this new skill to my tools. I did an online search of “timelines,” and got a whole gamut of ideas and tools.  I also started to see a basic pattern to all these timelines:

 

tl0

Basic.

 

tl2

Step up.

 

More modern.

More modern.

 

High tech.

High tech.

Google also has a timeline program. It is very similar to the High Tech version, only with a light background. But, as with most of these programs, you need to upload your information and it gets stored their servers. What happens if something happens to that program in the future? Also, all of these options take up the whole webpage to display the timeline. I wanted a timeline that was incorporated into the rest of my page, a piece of a larger puzzle on the page.

I decided to get a little more creative and put a timeline on an actual image. I had the image already in hand. I just needed a part of that image turned into a timeline, while the rest of it linked to other pages. As it turns out, there is no easy way to create a timeline on image, (I suppose if you were a hardcore programmer with mad skills, you probably could knock one out.) I don’t consider myself a complete slouch when it comes to coding, but come on, it shouldn’t be that hard to make a timeline on a relatively straight, long image. I have a hard time believing I’m the first person who wants to do such a thing. Yet, with every link clicked, none of the code and options I came across showed me how to do this. I asked myself exactly what it was I wanted to do. Well, I reasoned that the closest thing I could think of was that I was trying to create a customizable popup, or mouseover or hover-over a place on an image. Searching for that, I found several javascript codes for making pop-ups over links and/or images, which looked pretty much like tooltips on steroids. Tooltip is an alt code you can put into your html to create an effect so that when you hover your mouse over an image or link, a little yellow box pops up after a short time, giving information.

ddtooltip

Example of tooltip code in action.

I have created tooltips for our drop-down menus to indicate who certain significant people are.  I have also created tooltips to give information about certain images on pages.

imgtooltip

After discovering that it might be possible to create tooltips for a timeline, I became a little more excited.  I’m not one to toot other people’s horns, but http://www.dynamicdrive.com/ has awesome, easy-to-use, customizable code. It’s all free, as long as you include their legal notice within your code. There are two other sources that I recommend for helping in creating web pages and learning programs: http://www.lynda.com/(NOTE: not a completely free site) and http://www.w3schools.com/(the best resource for html and css, with an added bonus of sandboxing to see effects). I cannot recommend these sites enough to help get you through common webpage issues.

So, here we go. Searching on the dynamicedrive.com site opened the door to some fantastic ideas to noodle on, but how could I get a timeline actually placed on the chosen image? What I ended up doing was way old school: I made an image map. However, I didn’t do it with Adobe Photoshop. I did it online with Easy Imagemap Generator (http://imagemap-generator.dariodomi.de). (Yes, that is actually its name… and yes, it is EASY.) You do, however, need to have Flash Player for this to work. After going to the webpage, there is an option to upload the image or insert the image link URL.

imgmpgn

Upon doing this, it automagically loads your image. Just click +Add Area and start clicking on the image, making boxes, circles, or polygons around the areas you want to create into links. There are also buttons on this page that are marked X Clear All, and Change Image. Every time you want a new linked area, just click on the +Add Area button and move back into the image to create a new linked area. Once you are done with with all your linked areas, you will notice the code text is displayed at the bottom.  You can have as many linked areas as you want; I believe I had around twenty linkable areas on my image.  This is a very basic example of the code text:

<img src=”url/to/your/image.jpg” alt=”” usemap=”#Map” />

<map name=”Map” id=”Map”>

<area alt=”” title=”” href=”#” shape=”poly” coords=”134,276,150,292,122,297,111,287,119,279″ />

[...]

</map>

This is the code you will need to put into your html to make the areas you created linkable for the mouse-over pop-up box. There are many things you can do with this code to create the kind of links you want. I just selected all this code and copied and pasted it over into my html following where my image was placed on the page.

Next, I headed over to dynamicdrive.com and clicked on “Links & Tooltips.” This took me to a page with several different snippets to experiment with. Notice how after the links, it lists the browser compatibility. Remember to test your code in different browsers anyway!  The one I used was suppose to work in FF, so when it didn’t, I knew I had a code error somewhere. Once I found the code I liked, I clicked on the link, and it took me to the actual code page. From there, it goes step-by-step through the process, even allowing downloading of necessary .js and .css files. My particular code did not need separate .css or .js files, so I just coped and pasted into my document. At the end of the code, there is typically a section on modifying the settings. All in all, it was a very easy way to get the code I wanted and place it in my webpage. My html code ended up looking something like this:

html-code

If you notice, since I am using an image map, I needed to tweak a few settings here and there to make the image map display the tooltip script correctly. The code I used on dynamicdrive.com was called “Cool DTML Tooltip II,” and what is there is slightly different from what I ended up using. Using it exactly as it is on that site resulted in no text popping up, even though the boxes themselves were appearing. It took me a while to figure out that i n order for the area shape to have the desired effect, I needed to put the area shape outside the ONMOUSEOVER code. (In other words, I couldn’t place it before the closing />.) Also, notice that my first area code is different from the second, and subsequent, codes. I had to do this in order for the desired effect to work in Firefox. I believe I had to do this because I had several clickable areas on one large image, instead of several smaller images all together.  Whatever the reason, I did get the effect to work in the end by altering the code in this way. I changed the color of the pop-up background and text size and style in the css. (The ddrivetip used “dhtmltooltip.”) Also, you can make the tooltip linkable. I did not do this for my timeline, but it is possible.

This is an example of the final results:

imagemap

In conclusion, I felt this was a better approach than the other official applications. It allowed me to customize the timeline to fit the needs of the project. It may not be a timeline in the strictest capacity, but I believe it satisfies the requirements for this particular collection.

1091map1As our regular readers know, the 1091 Project is a collaboration between Iowa State University Library and our conservation colleagues at Duke University Libraries. Well, this week, thanks to Kevin Driedger of the Library of Michigan, we have been participating in the 5 Days of Preservation project, a week-long collaboration among preservation professionals and institutions across the nation.  Kevin’s idea was simple but powerful: use social media to post a photo each day for five days of whatever preservation looks like for you that day.  Kevin then collected all those posted images in one place, the 5 Days of Preservation Tumblr blog. The collected photos showcase an impressive range of preservation activities that really illustrate the rich diversity of our  field.  So, this week, I encourage you not only to pop over to Preservation Underground for their 1091 post, but also to check out #5DaysOfPreservation, via Tumblr, Facebook, and/or Twitter. And kudos to Kevin for a fun and informative project!

Here is a quick recap of our ISU Library Conservation Lab posts for the week:

 

fb-LIFE

MONDAY: Preservation looked like this humidified and flattened Depression-era letter.

 

Nicole5Days

TUESDAY: Preservation looked like our student employee, Nicole, repairing books from the General Collection.

 

Photodoc5days-01

WEDNESDAY: Preservation looked like professional photography lamps set up in front of our magnetic wall for imaging large-format architectural drawings.

 

WikiLinks-5Days

THURSDAY: Preservation looked like committee work for the AIC Sustainability Committee. Melissa and her fellow committee members are performing their annual link maintenance this month on the sustainability pages of the AIC Conservation Wiki.

 

McCoy-Budget-5Days

FRIDAY: Preservation looked like Preservation Assistant Mindy working on the departmental budget (a *very* important part of preservation indeed!)

Our Digital Collections are made available to the public through CONTENTdm in the basic ways that the software allows, without us having added any outside applications.  Up to now we’ve had very limited access to any staff with the skills and time to implement additional features to enhance the display of our digital collections.

We’ve been looking at other digital collections to see what functionality they have that we don’t but would like to have.  Here are a couple of good examples that I’ve found that I think would be good to have.

East Carolina University Digital Collections has an interactive map of their campus.  When you click on a building or area on the map, it opens up photographs of that building or area.  Or if you hover your mouse over a photograph, a symbol shows up on the map showing you where that photograph was taken.

We have many photographs of buildings and landscapes from across our campus throughout its history.  I think it would improve the presentation and discoverability of these photographs if we could connect them to geographic locations on a campus map.

A pioneer letter from the U of I "DIY History" transcription project.

A pioneer letter from the U of I “DIY History” transcription project.

The University of Iowa uses a crowd-sourcing website, DIY History, in order to gain the assistance of the public.  The library staff digitizes handwritten items, puts them online, and then allows the public to transcribe them.

There is a large amount of unique, handwritten materials in our Library Special Collections and University Archives that would be great to have digitized and put into our Digital Collections online.  However, until those items are transcribed, they cannot be full text searchable, and therefore the items and the information they contain are not as easily found by people searching online.  Since there is never enough staff or time to do everything we want to do, crowd-sourcing the time-consuming transcription work is something that we’ve been wanting to have for a long time.  Hopefully we will be able to get a web site like this developed soon, and then we can benefit from the time that the public has to transcribe our materials for us.

Our profession is obsessed with establishing priorities, and rightly so since there is always more in our collections to address than there is time and other resources.  We could make establishing priorities within preservation very simple–what is in the worst condition gets treated first.  Unfortunately, even within our own practices this is not realistic since that one item may take months of our time and all of our resources.  Add in other variables such as the monetary and intrinsic value of items or collections, availability of and demand for a book or its intellectual content, storage and use issues, and inherent vice, and we need to start having conversations with our curators.

These conversations always require some background and education including the fact that we are NOT asking them to tell us what condition their collections are in and what needs repair, or what treatment we should use, but rather what are their collection priorities.  We need them to participate in these conversations to help inform our treatment priorities and decision making, disaster salvage priorities, and digital preservation policies.  To guide the discussion we could consider using visual tools like a four-square matrix that compares impact with feasibility for preservation activities, or value with sensitivity of materials when dealing with disaster salvage.  It’s cost-benefit analysis.  Yes, these are over simplifications of the process, but are helpful tools to start the conversation.

Simple disaster salvage priority matrix comparing value to sensitivity of materials.

What about digital preservation priorities?  We obviously think about the risk of loss when considering prioritizing born digital vs. converted digital, value of content, and collection priorities, but again, how do you present this to curators?  Generally speaking, establishing digital preservation priorities is the same thought process for creating any preservation priority; the format should not drastically change the conversation.  Value and complexity of the digital object, and feasibility and impact of storing and managing objects are variables to consider.  It’s still cost-benefit analysis.  Most would agree that born digital is a higher priority than converted digital assuming the original is still available.

Last week I was at the Iowa Regents joint Library IT and Special Collections meeting where we were just beginning the conversation on collaborative digital preservation initiatives between the three Regent libraries (Iowa State, Northern Iowa, and University of Iowa).  Paul Soderdahl, Senior AUL over U Iowa Library IT and other stuff, drew a simple graph on the whiteboard comparing the deterioration of original analog materials over time to the improvements in digitizing technology and best practices.  The cost-benefit question became whether or not to put preservation resources into previously converted digital files that do not meet today’s best practices in terms of quality and file format.

Cost-benefit of preserving converted digital objects.

Or in keeping with the matrix approach:

Comparing level of deterioration of original to improved technology and standards over original scan of the original.

Comparing level of deterioration of original to improved technology and standards over the original scan.

Clearly we do not want to base our digital preservation practices on re-digitizing analog objects because of the costs involved and the wear and tear on the object, not to mention the fact that some of our collections are approaching their last possible use like magnetic media experiencing sticky shed.  But is it worth spending more resources on preserving files that do not meet our standards and could safely be re-digitized at higher specifications?  And if the answer is no, and knowing standards will evolve with technology, when is the answer yes?

How have you started conversations and educated your curators about establishing preservation priorities?  Do you have good working relationships with your curators and have you established preservation priorities with their input?

digital html

One of the things nearest and dearest to my heart in the design of web pages/sites is ADA compliance. Anyone who knows me knows that I endeavor to create our pages in a way that makes them accessible to everyone, no matter the disability. This is not an easy task to do for a website with an emphasis on images. In fact, you could almost say our website is the ultimate challenge for a web designer. Therefore, I can’t say that our webpage is the most accessible it can or should be, but I will attempt to tell you some of the things I employ to make it more manageable. There are many websites on the internet that describe these ideas better than I can, but the gist of those boils down to: alt tags for everything, and describe, describe, describe. That means every media item and plug-in needs concise alt tags which, when utilizing an assistive device, allow the user to understand what is being displayed. Also, I avoid creating blinking websites or including images and videos that contain vibrating/strobe/rapid blinking colors and/or images. (Note: any blinking light, such as a fluorescent that is about to go out in the ceiling at your work site or at home, can cause epileptic seizures.) Wave.webaim.org is a website I frequent in creating and maintaining my web pages. Put your URL into the “Web page address…” space and hit the —> key. What happens next is:

digital_wave

In the new page, you find that it defaults to a summary of the page. It breaks down into: Errors, Alerts, Features, Structural Elements, HTML5 and ARIA, and Contrast Errors. Not all the items listed here are necessarily bad, and every item is listed whether it has the specific detail or not. Also, on the page, notice the detail is color-coded and is highlighted in the display window.

digital_styles_click

For example, clicking on the yellow box with underlined u, tells you that this alert is an indication that an underline text is present. There are three other link buttons listed under the summary button on the left: Details, Documentation, and Outline. Just below the URL form line and above the enclosed Summary/Detail/etc. box are three buttons: Styles, No Styles, and Contrast.

digital_nostyles

When you click on the No Style button, what you see displayed is what an assistive device is going to see and read to the user. This is very helpful for me.

Did you notice the summary items are color-coded? Red=bad; green=good; the other colors are impartial. The Contrast button pertains to colors and text and is nice to show where issues might be for some persons. Again, you can see that the color-coding on contrast detail is red/white.

There are discrepancies between ADA guidelines about whether certain elements are needed. Notice the menu/navigation text. On some ADA sites, this would constitute an error due to the text size [e.g. small] and contrast (on wave.webaim.org, it is neither.) Most sites default to the more info the better, and bigger text. Also, I have no skip navigation link, which many ADA sites list as necessary.

This is an ongoing process. Basically, what I try to do is imagine myself with a disability and work from there. The simpler you design your website,  the more effectively you create an easily accessible web site, which makes for a more enjoyable experience for all persons viewing the pages, including non-disabled users. Therefore, using wave.webaim.org is a “win-win” for me.

Tomorrow is the last official day of National Preservation Week! If you missed the preservation webinars hosted by ALA-ALCTS this week, no need to fret: you can view the archived webinars on the ALA-ALCTS YouTube Channel, along with many other  webinars from past years.  This is a wonderful, free preservation resource available to anyone with an internet connection.  Preservation Week may be drawing to a close, but the ISU Library Preservation Department’s outreach mission continues year-round.  Contact us if you are in need of a preservation consultation.

preservationweeklogo2014

Preservation Week 2014: Free Webinars

Low-Cost Ways to Preserve Family Archives by Karen E. Brown

Preserving Historic Scrapbooks and Making New Ones That Last by Melissa Tedone

Next Page »

Follow

Get every new post delivered to your Inbox.

Join 834 other followers