Digital-Collections


So, lately, I have been working on a new page/site for Digital Initiatives that will eventually become the start page/site for a variety of digital sites under our department. Currently, as you may remember, this is our start page: http://digitalcollections.lib.iastate.edu/. I cannot reveal the new start page, because we are still in the process of creating it. However, I thought I’d focus on one component of the page/site that we have not previously used before: forms.

Now, before Drupal, forms were a pain in keister to create. But now, with a great support staff on hand, forms are super easy to build. Let me show you how.

Forms are a part of Drupal that needs to be “turned on,” in order to work. In our set-up they are turned off to avoid confusion. Also, keep in mind, that once it is turned on, it is available on all pages you create within your site. When it does get turn it on, the magic begins.

I created a Test page to show you how to create a form and how forms work.

It’s very similar to a non-form Drupal edit page, except for the tab just to the right of Edit says Webform.
Lori7-26-16pic
Let’s click on that.
Lori7-26-16pica
There are five different sections under the Webform. The first one, form component, is where you add the important parts of the form being created, such as a person’s name, email, address, connection, and comments.

Let’s create a super simple form, which includes person’s name, email, an additional textfield for funnsies, and a comment box.

First, we’ll click inside the “New component name” box, and type Name. The type is Textfield, so we’ll leave that. Now, click on the “Add” button.
Lori7-26-16pic1

Note: this is only a partial screenshot of the page that comes up. Scroll down the age to look over the other boxes you can use to manipulate this info, including making this box a required value. A required value is a value that is needed to proceed. A red star will show up next to the label. Also, on these required fields, I place in parenthesis (required). [I have recently learned that some colorblind users cannot make the distinction between red and black, so adding this helps.] Other fields that are worth looking at: Display. Here you can set the width of the component, add a placeholder in the box (like: myname@abc.com). Also check out the label display. Under this, you can change the label to be displayed above, inline, below the box; description can be displayed above the field; disable the field completely, or make it private, so only users with access can view the results. These preferences can be found on most of the component pages. For now, nothing else is needed, so scroll all the way down and click “Save component” at the bottom.

Let’s add Email now. Label it, “Email,” and change the type to “E-mail,” then tick the “Required” box. Click “Add.”
Lori7-26-16pic2

Oops. I made a mistake. I forgot to label email “Email (required)”. No sweat. Just click on “Edit” beside the Email label, and on the next page, change the title in the label name. Scroll down and click “Save component”.

In the next window, make sure short form is checked for email format, and that “Required” is ticked. You might want to tick “Unique,” under “Validations.” Scroll down to click on “Save component.”

Now, let’s add another textfield.

Here, I’m going to get goofy to show you different things you can do with the form. In this window, check to make sure “Required” is ticked.
Lori7-26-16pic3

I made the Display width 75; I added a Placeholder (to be shown inside field until user starts typing); I Prefixed the textbook with craziness, and Postfixed it with more craziness. Finally, I placed the Label Display to None.

Let’s add the comment box now. Name it “More comments (required)”; choose textarea; make it “Required”; in the next window: make Validation “Required”; and make sure Resizable is ticked under Display; scroll down and click “Save component”.

Here’s what the final super simple form looks like:
Lori7-26-16pic4

Notice that there is no red star anywhere near the “I’m glad” text field. This is something to be aware of, if you decided to hide the label. If any one of those red star areas is left blank, the user will not be able to move forward. OK? OK!

But WAIT! We’re not done yet.

Back under Webform, you can see there is a few more section to the right of Form components: Conditionals, Form validation, E-mails, Form settings. The ones to be most concerned with are E-mails, and Form settings.

Under E-Mails, add the address where you want the comments from the form to be sent to, then click “Add”. In the next page:
Lori7-26-16pic5
Make sure all the email addresses are correct. Custom email/names should be used where you what the emails to go/or what you want the emails to be from called, when the Default email/name is incorrect; E-mail from name should be that address as well. Also check to make sure E-mail header is the right page from where the email are originating. OK. Scroll to bottom, click “Save e-mail setting.”

Let’s move over to Form setting. This page is a doozy, with many options to choose from; my advice: choose wisely, little grasshopper.
Lori7-26-16pic6
First one, most important: I recommend you place a confirmation message in the first box; you have the option of using Full HTML, Filtered HTML, and Plain text. Also, you can add a re-direct page for the confirmation page. Keep the Total submissions at unlimited; make sure Status of this form is ticked for Open. (Closing prohibits further submissions by other users.)

2nd half of page:
Lori7-26-16pic7
These are all self-explanatory. Notice on the bottom under Next submission order. This number should be 1 if you have just created the form; otherwise the number will be whatever number is currently submitted for the form.

One last note: To the right of the Webform tab is a Results tab. This tab shows the results from the form on the page.
Lori7-26-16pic8
Of course, there isn’t much on here right now, but this page will list every form submitted by users, default setting is recently to oldest. Under Operations, will be additional links: View Edit Delete. You can either click on the number under #, or View under Operations corresponding to the number to see the actual submitted form.

Drupal makes it so easy to create and maintain forms. I hope they are as helpful to you as they are for us.

I’ve reached a point where I realize I need some (technology) help.

An image showing a routing form versus project management software charts

Choices….

Balancing the needs of at least eight people, 5 units, and three divisions is hard! We all need to share a workflow for building digital projects from primarily paper-based archival materials. New projects entail, at a minimum, the digital collections team: the entire Digital Initiatives staff, and at least one person from Special Collections and University Archives, Preservation, Metadata and Cataloging, and the Research and Instruction Division, currently represented on the team by the Science & Technology department. Library IT and Central IT may also play a role, depending on the project.

In order to work efficiently and at capacity, we run more than one project at a time. Additionally, I manage the queue – there are always requests for new projects waiting in the wings or projects we’ve thought of that would provide new kinds of access to some of the Library’s collections. It’s my job to assess priorities and fit these into the existing work when I can.

Everyone has their own way of working that makes the most sense for them. My flavor of managing my work is very analytical and visual heavy. I love diagrams and charts, spreadsheets, and estimations. I am soothed by massive spreadsheets and complicated business process modeling!

Our needs are varied, as are our schedules. We’ve been managing the work through team communication and a routing sheet, but we need more. Our project scopes have expanded, we’ve added new people to the digital collections team, and the various units have new procedures that need to be incorporated into our shared work. So, I am on the hunt for a comfortable project management solution. If it’s not comfortable for all of us, it won’t get used and it won’t work. I want it to be something that eases my hunger for charts and analysis, while also being streamlined enough that someone could else just see the tasks they need to get done that week. We’re testing some options and will hopefully come up with something that eases burden rather than adding to it.

Do you also have project management challenges? If so, please share!

 

 

Our Digital Collections include a variety of different things.  The digital collection management system that we use is CONTENTdm hosted by OCLC.  We try to come up with the best way to present our various materials online so that they not only look good but are as useful as possible to people that want to access them.  Sometimes they are individual images but often they are large multipage items so we combine the digitized images together into a PDF.  One interesting difference between a single image and a PDF is that while an image will look the same to all the people who view our collections online, a PDF can look different depending on the web browser a person uses.

Different browsers include their own PDF plug-ins for viewing a PDF online.  Below are three images of the exact same item in our digital collections.

The first one is viewed in Internet Explorer
InternetExplorer

The second one is viewed in Firefox
Firefox

And the third one is viewed in Google Chrome
GoogleChrome

While the images look similar, all the tools or buttons for using the PDF look different and are located in different places along the top and sides of the image.  I’ve found out from first-hand experience that this can be a little confusing if two people are viewing the same thing but on different browsers and they’re conversing on the phone or through email about how to use the various tools.  While this isn’t really a big deal, it’s good to be aware that even though we strive for consistency in the look and usability of our digital items, we can’t control the differences that show up when using different web browsers.

 

I spend a lot of my time on the internet. It’s a part of my job; usually I’m creating pages, updating, or creating new collections. But lately, I’ve been spending even more time on the web doing research. Our department, Digital Initiatives, has gone through some transitional changes since the first of the year. The biggest one being that we have a new (or, rather: permanent), director: Kim Anderson. She has some cool ideas of how she wants our webpages set up. One idea, that she would like to see incorporated ASAP, is that she wants to have a layer over the top of our current page (http://digitalcollections.lib.iastate.edu/), that directs researchers to either our CONTENTdm boutiques/pages, or to other new pages/collections yet to be implemented. In addition, this main page will have, perhaps, the department’s pertinent information, (or links), as well: staff, tools used, mission statement. That sort of thing.

So, here I have been: looking through and finding similar pages that we may find inspiring for the eventual page layout that we create. I broke it down into two sections, both real-life examples: a “tools” page (which we’d like to create that shows our researchers what we used, both applications wise and equipment wise): and a new “Digital Initiatives” page. Sounds easy enough, right? Well, you know nothing is easy in Lori’s world. Nut .’N. Honey. No, it’s not. I can now understand why Kim wanted to sicced this little gem of a project on me. Not only isn’t there much out there, but as I have been doing this, I have found that, by and large, there really isn’t a “standard” when it comes to describing what we do, and how it’s managed.

It is hard to find separate pages within other academic libraries that demonstrate the importance of this distinction. Since our school is in the Big 12, I’ve looked at all those library sites in search of other Digital Initiatives departments. (Sadly, only schools that made my list where two schools no longer in our league.) I’ve looked at hundreds of “Digital Initiatives” links. In addition, I’ve looked at hundreds of additional general academic library sites. There are only about a good two handful of links that I care to share with our director. Fifteen to be exact. The rest either consolidate it in with another departments, (Digital Repositories; Special Collections; IT;) or don’t even get mentioned at all. And of the ones I have listed, even some of those are a part of these other departments. One university listed their digital collections as a part of their “slides” collections. Sometimes, they have a link to Digital Initiatives and that link sends the researcher to a CONTENTdm collections page. It was just like they were setting these pages up to be a regular library web page. Digital Collections are like exhibit pages. (We call our main collection pages, like: http://digitalcollections.lib.iastate.edu/charles-christopher-parry, boutiques.) I honestly believe that the most innovative digital exhibits are the ones that are easy to navigate; merge well with the items they are showcasing; and make learning fun and informative.

This reminds me of a true work event that I was involved in back in my Tribune days. The paper there had the foresight to see “digital” papers were the coming thing. However, they didn’t have the foresight to involve enough knowledgable persons about the layout of such a site. They didn’t go to one of the composition designers to ask advice. Goodness knows, a designer would have a better understanding of layout. But no…they went to one of their coders who had a general idea of what webpages should look like, and had happened to take one class on web coding at college several years previous. In hindsight, if they noticed this at all, they would have been wiser to have had a collaboration between the coder and a designer. The web pages turned out to look very basic and were very un-intuitive about navigation. Long story short: yeah, email could take you to the webpage for the Tribune, but navigating to pages off the “cover” was a nightmare. The sections navigation made no sense and sometimes one had to jump through several pages to get to the article. I felt sorry for the coder. Person was doing the best they could. But that’s what I thought about when I was researching other library’s Digital Collection pages. I’m starting to see a pattern in my research. It boils down to this: academic libraries seem unsure, themselves, of exactly what Digital Initiatives entail. I’m not talking about the “in the trenches workers” (though there might be some of that too). I’m talking about Administration.

Mostly, this pattern shows a lacking in understanding, and also how poorly forward thinking libraries have become in watching and implementing trends. Our department has been in place for well over eight years. We are modest in development, but the future looks bright for more robust collection developments. I believe we have a very passionate staff that understands digital collections, (although there is always room for growth and enlightenment)!

I know that Digital Initiatives is a merging department. I’m lucky we have a Dean that understand this, and have a passionate director who has cool ideas for not only collections, but our department’s future. I am hopeful that with this new direction that we will not only exhibit digital collections, but that we will innovate and lead the way for Digital Collections departments in other libraries in the future.

Until recently, I had never really given much thought to copyright.  There have been a wide variety of materials that I have been given to digitize and put online in our Digital Collections, however, somebody else had always decided before it came to me that we were allowed to put it online.  I was given whatever copyright statement was necessary for that material, I included it in the metadata for that digital collection, and that was all I needed to know.

Recently I have been asked to help out with our Digital Repository for a while.  Part of the work I’m doing includes checking some articles written by our faculty that have been published, to see if we are allowed to put them online in our Digital Repository.  Sometimes It’s easy to figure out and other times it takes some searching.  If it’s not obvious from looking at the published article online, I use the SHERPA/RoMEO website which shows if and how a publisher allows use of articles from their publications.  Sometimes they allow the original work to be put in an institutional repository like ours but they don’t allow us to use the published PDF version of the article from their web site.  Sometimes they allow us to use the article but they have an embargo period of anywhere from 6 to 48 months.  If so, we wait the specified amount of time after the original publication date before we put it online.

Some articles are published under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.  Works produced by employees of the U. S. Government as part of their official duties are not copyrighted within the U. S.  So if there is an article with a co-author who is an employee of the U.S. federal government, then we can use that as well.  I’m certainly no expert on the subject, but it has been an interesting introduction into the world of copyright.

So, remember back to May 19 of this year when I began talking about creating templates in Dreamweaver, and again on July 21, when I blogged part two of that series? And also remember how I drone on about technology always changing?

Well…. Throw those two blogs out the window and digest this: I am no longer using Dreamweaver to make our webpages. Our library has moved to Drupal for content-based webpages. And in doing so, I needed to learn it quick. Now, granted, I was given a great deal of leeway as to when to implement this for our pages. I could wait a year. But I had my own agenda. Not only did I need to move Digital Collection pages over, but also Special Collection pages. And I set my timeline to be the end of 2015. Well…why not?

Let me take this blog space to begin talking about Drupal, and my first impressions.

First, the benefit for the library is that more departments are allowed to contribute their own content, instead of having someone from IT doing it, thereby causing a delay in getting the information up to researchers. Because Digital Collections and Special Collections has been creating their own pages for several years now, we were made the testing team to see if we could get this done, and how long it would take. (We meaning: me. I have all but taken over maintaining the Special Collection pages. Brad Kuennen has taken on more responsibilities, leaving most of the fun work to me. Yea ME!)

But back to self-authoring. This is a good thing for a large portion of library departments. Allowing each department to design and implement their pages grants those departments to update their information on the fly and this pretty awesome too.

Plus, to have “templates” in place helps to maintain the overall layout theme of the university. In having a consistent design, every page of the university appears more uniform. Then there is the concept of responsive design. I myself have had issues with this very thing in the past. This is where Drupal comes in and does the heavy lifting. Once you’ve created a page, it automatically makes it responsive. In other words, whether displayed on desktop or mobile device, or tablet, the page will be displayed in the best possible manner. The image(s) will shrink down to the appropriate size and what is called a hamburger will appear (typically in the upper left or right hand corner of the page,) for the drop-down menu.

Home_hbgr

(This is what a “hamburger” looks like on a sized-down, (read: mobile) responsive page. It squishes a menu down into the three horizontal line icon; when you tap on it, it drops the menu down; again, it usually appears on mobile-designed pages.)

So, what does that mean for designing pages going forward then? Well, a lot of things. First of all, because our library has a great library-external, but on-campus, support from the ITUIS department, I don’t have to worry about consistency across web browsers as I had to in the past. The ITUIS department has worked those issues out with Drupal already. We don’t have to re-invent the wheel here; they follow ISU template guidelines and work from there. Thankfully, because Digital Collections and Special Collections are on a separate server, this allows us to maintain our sites separately, which in turn gives us even greater control over the design and layout of our pages. But what does that really mean? There are differences; let’s take a look.

Here’s our old page on desktop, created in Dreamweaver:

Home_old2

And here’s the new, created in Drupal:

Home_new

The first obvious difference is the spacing in the vertical menu on the left. Drupal doesn’t allow close spacing (at least on the theme that ISU maintains.) The slider image is wider, but height is narrower; and the dark boxes are no longer as clearly separated (no white line between them.) These images are both pretty similar on tablets; the only difference being that for Drupal, the menu runs a little longer down the side, and the boxes on bottom are clearly separated:

Home_tab_ls

BUT, take a look at the portrait view layout on a tablet.

Old Home (Dreamweaver) on mobile and tablet, portrait view:

Home_mobile_old

(In portrait, you just get a piece of the image, as it is a fixed layout. This is a desktop view of mobile device. An actually mobile device would cut off the top of the second box; but the layout is identical.)

New Home (Drupal) on tablet, portrait view:

Home_tab_port

(A lot better separation here, plus no cut-off of images.

And New Home (Drupal) on mobile:

Home_mobile

The point is Drupal makes designing responsive pages pretty easy. The most intensive part was copy and pasting the pages over from Dreamweaver, and constantly contacting the ITUIS department to get the styles displaying correctly. I’m glad I started with the smaller Digital Collection site however, because when we attempted to make the new pages go live, everything was defaulting to a wrong URL link. First, we thought we were going to need to manually re-mapped all the pages to the new pages, so that old URLs would bounce to the new page URL. Now, ITUIS has stepped in and indicated they will be able to solve this issue using another tool. We will have to monitor this unfolding drama and we will have to think it through for the larger Special Collection pages.

This post is a follow-up to Adventures in Making Templates: Part I.

In previous posts, I’ve discussed the history of our digital webpages, and the issues I had creating my first templates. I also discussed how to create an initial template page. Now, let’s turn to creating a new page using a template and additional points to keep in mind. To create a new page using a template:

  1. Open Dreamweaver, if not already opened. [I use Dreamweaver CS6.]
  1. To create a page from a template: File—>New… —>Select Page From Template, then navigate to the template page you created.

boutiquePage

Click Create button.

You will notice all your “locked in” code — code that will stay consistent on all pages — is grayed out. You will not be able to edit this area at all on this page. Go on. Try it. Select a section and try to delete it. Can’t. Be. Done. You can select it; but you can’t edit it in any way. However, the areas that are shown in blue or black text are editable areas. So, at the top, you see where I can change my meta content and name, plus page title.

boutiquePage_1

You also have to be aware that not all areas are obvious as being editable. This is where you need to be aware of your code.

This whole area marked in gray (highlighted here, with text below image) is actually editable space:

boutiquePage_2

<!– InstanceBeginEditable name=”additional styles go here” –>

 

<!–<link rel=”stylesheet” type=”text/css” href=”../cdm/css/reset.css”>–>

 

<!–additional style types go here–>

 

<!–additional css links go here–>

 

<!– InstanceEndEditable –>

 

Below is an example of code that I placed inside one of these areas:

boutiquePage_3

Notice that you can put css code, javascript; and css links within this area. This is nice to have, because some pages need additional coding that allows for variances on theme. (As I mentioned in Part I: some of our pages have elements that are unique to each page.)

Further on down the page is the space for the inside content, followed by the non-editable footer.

boutiquePage_4

It’s pretty easy to go from there. Once you have the page created, save with the actual name you plan to use and you’re set!

Here’s a comparison between our old (non-template) page on the left, and new page (created with template) on the right:

boutique_OLD-FINAL-Comparison

As you can see, there are subtle differences between the old and new pages. Here’s another example of a longer page:

boutique_bottom_1-2_comparison

One of my main issues without using a template was the variety of space between the end of text and the footer. This was a browser issues: some browsers played nice, and others didn’t. Using a template took this issue away. Our pages are now consistent whatever browser one chooses.  Having the template also made it easier for me to add elements that were lacking on every page, like the social media icons.

Templates are great when you have several pages to maintain that all have the same basic layout. They are not for all sites/layouts, but work well for web masters who have many pages with certain elements that need regular updates. I’ve had templates on my radar since I first started working on my pages. I am glad I finally learned how to create them. You may find them useful too.

Next Page »