Digital-Collections


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.

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.

It’s that time of year again, when warm spring weather signals the end of classes and brings on graduations.  This week is finals week here at Iowa State University and it will end with commencement ceremonies.  We scanned many of the earliest commencement programs from our archives and made them available online in our Digital Collections. http://cdm16001.contentdm.oclc.org/cdm/search/collection/p16001coll27

Over the years, there are a variety of styles of printing and constructing the programs, with one even being held together with yarn.  Besides the programs, some include a list of commencement week activities.  It can be interesting to look back and see how things were done long ago compared to today.  You can see what kinds of music was played, the guest speakers and what they spoke about, and names of graduates and their areas of study.  One program from 1880, shown below, has an entry which reads “Shall We Encourage Irish Immigration” which is an interesting look at how some topics of popular concern have evolved over time.

Here is the front cover of a program from 140 years ago and a page of another program from 1880 tied with yarn.

cover

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.

I work in a department that has very little IT support, and as web development is constantly in a state of change, I need to do my own research to stay ahead of the curve. One of the best free* sites to learn about all things related to web development is www.w3schools.com. Our department also has unlimited access to www.lynda.com, but that’s not available for some. Plus, www.lynda.com gets bogged down in lessons and tutorials which can go on for hours, when sometimes a quick brush-up or how-to is all that’s needed. This allows me to get right back into my web page and implement my new idea. The site w3schools has quick, clear, easily defined answers which allow me to explore within each development tool. It has both tutorials and reference lists for HTML, CSS, JavaScript, SQL, PHP, and JQuery. The site also includes a section on web certificates, and contains an interactive color picker. What am I talking about? This site is very interactive! Not only can you read about each tool/technique, but also with its sandboxing of examples, you can try out the tools for yourself and see live results. If that’s not enough to get you started, there are over a thousand examples to peruse in your own time. This website makes it so easy that a very beginner to an advanced web designer can utilize it to its greatest potential. Best of all, it is constantly being updated. A very active and knowledgeable forum rounds out the website, so when you are still confused about actions and code writing, answers are just a click away.

* to obtain Web Certificates from this site, there is a fee involved. All other resources are free.

w3s

As you can see, the site is very well laid-out and easy to navigate. Going into the HTML section:

w3s_html1

It’s kind of hard to see in this example, but on the left side menu, you have a step-by-step html guide (starting at the very basic and moving progressively to more advanced techniques,) to HTML. In the middle of the page, is examples, and a “Try It Yourself” button. When you click on the “Try It Yourself” button, it opens to the sandbox:

w3s_sb1

Entering new code in between the <h1></h1> tag, and clicking on See Results box:

w3s_sb2b

This makes learning intuitive and fun. Each sandbox page opens in it’s own window, so going back to where you were is as simple as closing the window. Let’s go back to the HTML page. Further down the HTML page, you can see:

w3s_html2

There are links to HTML examples, or take a HTML Quiz (more than likely to help one prepare for the Web Certification that the site provides.) Clicking on the HTML Tag Reference link takes you to:

w3s_html_tagref (2)

This is very handy, as it shows all the HTML tags and also which are new or not supported in HTML5. I find the references pages very helpful when I’m updating my pages, especially as I move over to HTML5. Again, you can then use the left vertical menu to go to the specific page your interested in (this one being HTML; the other reference pages match the tool you are exploring.)

I have only dipped into the very basics of the website. The thing with this particular website is that it can get overwhelming and/or addictive. There is so much useful information here that I find myself spending way too much time on it, getting distracted from my own work. In that way, it is like www.lynda.com, but then I do not have to sigh my way through parts of a tutorial that I don’t need. Here, I can jump around and fiddle on code until I feel I understand it completely. It’s not the only site available that offers tutorials and sandboxing, but www.w3schools.com is about as thorough a website on learning these tools that I have discovered.

Image-01

In the Iowa State University Library Digital Collections, we mainly have collections of things that we have digitized here at the library, including photographs, letters, diaries and various documents.  However, born digital content, such as web pages, have also been brought together in other library digital collections.  We continue to look at these other opportunities for possible growth of our own.

The Library of Congress Digital Collections has web archiving.  Keeping old versions of web pages can be an often overlooked task.  When a web site is updated, how the old one looked could be lost forever unless there’s a policy and process in place to save the old one for historical reasons.  Sometimes there might be a temporary web page up for an anniversary or special event and when it’s over, if it’s not saved, that information could be lost.  Sometimes the content might not be that important, but someday people might want to see what the first web page of a university or department looked like to compare how things have changed.  The decisions of what to save, how to save it and make it available can be difficult and could impact every department on campus now that everybody seems to have their own web pages.

Columbia University Libraries Digital Collections includes a Human Rights Web Archive. None of the content of these web sites comes from the university.  Instead, they bring together web sites from all over the world to create a searchable collection available for research.  This extends the mission of the library to provide information by going beyond simply providing the information that exists at the institution. They search the online world instead, in order to provide various resources together in one place.

Preserving an historical record of web content could seem like a monumental task with the creation and changing of web content increasing exponentially all the time.  The sooner that policy and procedures everywhere are implemented to deal with this, the better.

Next Page »

Follow

Get every new post delivered to your Inbox.

Join 875 other followers