Digital Collections


So, to recap to my previous adventure: I had just learned how to make sticky footers that worked with our pages. I maintain many pages (34, plus a home page) for our website, and they are not all the same length. We have boutique pages. We have thumbnail pages. We have boutique pages with a little image vs. big image at the top. We have thumbnail pages that are short vs. ones that are long. We have a page that has secret embedded code so if you know the super-secret key combination, an elephant will appear in a pink tutu and dance a jig. (OK, well, maybe we don’t have that last one… but wouldn’t it be fun?) The thing is, we have a lot of pages that all basically have the same wraparound: the header, the menu, the footer is all the same. It’s the “inside,” and the length of the inside that’s different from page to page.

But let me step back a moment and give you some history. Here is what our pages looked like a few months ago:

boutique_OLD

You can see we had a vertical header across the top, along with a vertical menu. Then on the left side, we had a horizontal menu, with links that go to our pages within the site. The footer followed below, with social media icons below that and to the right. The primary reason I wanted to move to templates is that updating 34+ pages individually can be overwhelming at times, even if all you’re doing is copying and pasting. I thought knowing how to create templates might make it easier to maintain the pages.

I got my first chance when I was working on re-designing the Special Collections web pages; all their pages are template-centric. I thought it should be pretty easy to figure out. It would be how I usually figure things out: a combination of Firebug and reserve engineering; but digging through code, I had an issue with wrapping my brain around how to write the thing. That was frustrating!

I went back to my old standby of research; studying; reading. Looking at a made template can be quite confusing. It doesn’t seem logical that it could work. And indeed, my first few attempts were ugly. I’m even embarrassed to say that I might have accidentally messed up the main Special Collections’ old template in trying to figure out how to get the templates to create correct layouts.

One Friday afternoon, I was so frustrated, that I decided to leave work early and have some “me” days. My son, Ian, and I just bummed around all afternoon, had take-out chinese food, (my fortune was: “Now is a good time to finish up old business,”) and I just generally acted juvenile all weekend. That made all the difference in the world. When I got to work, I pulled out the fortune, placed it right beside my monitor and wrote the code for my first template. (Just goes to show, “me” days can be worth their weight in gold.) Here are the things I learned with that first template I created:

  1. Open Dreamweaver, if not open already. I use Dreamweaver CS6.
  1. Create and design a html page: File—>New…—>Blank Template. Select HTML template. I just selected <none> for Layout style, but the choice is up to you.

blank_template

Click Create button.

This is what a blank DW template doc looks like.

BT_inside

  1. There are certain areas that you will want to leave blank in order for you to change for each page you are creating. For example the name: Don’t change that. Keep in mind, that everything “inside” the

<!– TemplateBeginEditable name=”doctitle” –>

<!– TemplateEndEditable –>

will stay editable. Everything outside of that section will be locked into the template. So, everything that you want to stay the same in every document MUST BE OUTSIDE THE GREEN <!— Template…Editable  —> sections. I cannot stress this enough. This is a very important point to remember.

  1. Add additional <!— Template…Editable —> sections as needed. Don’t be shy creating these sections, but don’t go cray cray either. I added one for additional styles and another one for my inside details, and third one for stat counter code at the bottom of the page. (I used the auto generated head section for my Google Analytics stats, but I also keep stats through StatCounter, and that requires different code for each page.) So, I created three additional <!— Template…Editable —> sections. The ones I listed are probably the most you really need to add. Remember, you only need these sections for code/html that you want to be able to change individually on pages, not universally.

From this point on, just create the page like you would create a normal html page, with css documents; javascript; and html.

When you go to name your template page, use a name that anyone can clearly understand. I named mine boutiquePage. The page will save with a .dwt. This is the page you will open up and edit when you want universal changes across all your template-based pages.

For example, if you have a menu that needs updating, open up this document and make the changes here; once you have saved the document, a dialog box will appear:

update_template

Click Update button.

Another dialog box will pop up and give you an update.

update_template_2

Click Done or Close button (which ever one applies,) to dismiss the dialog box. Old documents tied to this template (and new ones created after,) will now contain this update.

If you go into a document connected to the template, you can see (via the greyed out text,) that the information has been updated:

update_template_3

Further, you can check in Preview to see the live view:

update_template_4

Once you have made the change to the template, and saved/updated the other documents, you will need to upload all affected pages again to your server.

We’ll explore making new documents and changing certain elements with those new documents for my next blog, slated for July 21, 2015. Until then, happy coding, and may HTML forever be in your favor.

I have all these great ideas floating around in my head for our web pages at any moment in time. Some of them are hilarious, never-will-do, ideas; but sometimes, I see something and I think: that should be easy enough to create for our page(s), right? Isn’t it just code that needs to be massaged? If I can figure out how to tease it just right, it should fit nicely in with our pages.

Sticky footers were such a piece of code that looked simple enough to implement. It’s just a footer at the end of the page; it is always hanging out down there; and, no matter how long or short the page scrolls, it stays at the bottom. Basically, it is a reverse (or mirror,) of a header that run across the top all the way, with the main part centered in the page. I wanted to use sticky footers because I was moving to templates on the re-designed pages; when using templates, the height of the page can vary, but the elements on the page stay the same. Well, what sounds easy isn’t always as such, as I (again) found out when I started to re-design our web pages. When will I ever learn? Probably, maybe, hopefully never, because I’m having too much fun finding solutions to problems.

Let’s start at the beginning of my struggle, and that always begins with research. Most sticky footers that I have seen go all across the bottom of the page, like so:

example_1

Then, there are sticky footers that always show “at the bottom,” even when, technically, it isn’t the bottom of the page:

example_2

I didn’t want either of these, exactly. I wanted something that stayed at “THE” “VERY” bottom of the page, and something that didn’t go all across the bottom. Like:

example_3

Doing a Google search, brings Mr. Fait’s page up first. Here is the css code for sticky footers:

 

* {

margin: 0;

}

html, body {

height: 100%;

}

.wrapper {

min-height: 100%;

margin: 0 auto -155px; /* the bottom margin is the negative value of the footer’s height */

}

footer, .push {

height: 155px; /* ‘.push’ must be the same height as ‘footer’ */

}

 

/*

 

Sticky Footer by Ryan Fait

http://ryanfait.com/

 

*/

 

Placing this in a css document and saving it, or placing at the top of the html doc between <head></head> divs should give the effect wanted. That’s it! Everything should work…right? Not so fast, little grasshopper. I couldn’t get this code to work as easily as advertised. When this happens, one of the first things I do when I see a sample of code I like is to go into Firebug (this can either be built right in, as it is in Firefox, or it can be downloaded for most other browsers. This browser app working right in the browser to “show” the code/html/css used in the layout of the page. This little app is indispensable for web designers.) In this case, I am using Firefox, so, here it’s located on the top, left of the search box. It looks like a little bug, and might be grayed out:

Firebug

Looking at Firebug revealed that this was a very simple layout. I’m sure it works great with designers who have very simple pages. Alas, my pages are complex, and maybe, er…messy, even. Plus, I have over 35 pages I maintain. As it, luckily, turns out: there are several designers who devote pages to nothing but creating sticky footers. And after searching, and using Firebug to explore those pages, I came across this one:

 

/*

Sticky Footer Solution

by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/

 

* {margin:0;padding:0;}

 

/* must declare 0 margins on everything, also for main layout components use padding, not

vertical margins (top and bottom) to add spacing, else those margins get added to total height

and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

 

html, body {margin:0;}

 

.wrap {min-height: 100%;}

 

#main {overflow:auto;

padding-bottom: 5px;}  /* must be same height as the footer */

 

#footer {position: relative;

margin-top: -70px; /* negative value of footer height */

height: 70px;

clear:both;}

 

/*Opera Fix*/

body:before {/* thanks to Maleika (Kohoutec)*/

content:””;

margin:0;

float:left;

width:0;

margin-top:-32767px;/* thank you Erik J – negate effect of float*/

}

 

I liked this one a lot because the designer goes into explicit detail about how to incorporate this code and issues known to using it. Also, it had additional code for Opera and code for use on IE 6 and lower (although I didn’t use that part of the code, and anyone using IE 6, in my humble opinion, is a very sad potato, indeed.) However, the css document listed on this page still wasn’t enough for me. Firebug revealed that another css was also used (called finerstyle.css.) After I copied that css code and placed it in its own document, I finally made the code work exactly as I thought it would. Which, again, highlights the super power of Firebug. And why one should always investigate pages. That’s the great thing about the internet and Firebug. Working hand in hand, you can find what you need and how to use it. Having finally accomplished my perfect sticky footer, I turned my attention to building templates for the updated pages. I’ll discuss my adventures in templates next time. Until then, happy coding.

AdamsFamilyPapers

I continue to search digital collections of other university libraries to see the interesting things that they’re doing.  Each university has unique items to feature, so it doesn’t benefit every collection to be presented in the exact same way.  New and creative ways of displaying digital content at another institution might not necessarily be a good fit for our current collections, but they could help us think about possible projects to initiate in the future.

One feature I came across is only useful if you have multiple and different versions of a document.  The University of Maryland Digital Collections includes poems by the Baroness Elsa von Freytag-Loringhoven.  Each poem has between two and seven versions since she kept her original manuscripts as she worked from her first draft through to the final, finished poem.  They use a “Versioning Machine” which is an open source software that lets people view numbered line-by-line transcriptions of each version side-by-side for comparison.  http://www.lib.umd.edu/dcr/collections/EvFL-class/?pid=umd:2257

Besides being able to view digital images of the manuscripts, the transcriptions of those pages help a researcher see the step-by-step changes the author made.  It gives a person the ability to almost get inside the mind of the author from their first thoughts and throughout the creative process.  While this tool would not be useful for most collections, it’s a very good example of a creative way to provide specific viewing platforms for unique 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.

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.

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.

« Previous PageNext Page »