Web Dev Blog

The law library runs four blogs on our site, including the Due Process Blog, Feedback Blog, Student Worker Blog and the Web Dev Blog where you're reading this post. They all run using a ColdFusion-based blogging platform called BlogCFC. Since much of our site is written in ColdFusion, this platform works well for us, and we've been using it since early 2007.  Recently, BlogCFC has been updated a few times, including new features for us to administer things.  Just last week, they added a mobile plugin for the system called jQTouch. What does this mean for non-technical folks?  Well, all four sites now look good on iPhones and other mobile platforms. Take a look at the current list of entries in our Due Process blog as well as one recent entry with a nice picture.  We'll look at adjusting styles and colors, but for now, it's great to know that all of our blogs include some mobile-friendly goodness.  Just because we can (or rather: just because the BlogCFC team cares enough to try).

This entry was posted on November 1, 2010 at 1:17 PM and has received 24179 views. Print this entry.

Georgetown Law Library introduced two touch screen kiosk-style devices for use in our two library locations.  We're launching the systems with no planned fanfare or press releases.  Initially, we'll rely on user feedback and local observation to plan content.  These systems have collection maps as well as digital exhibits of our library and collections. On this blog, we'll document some technical aspects of the system to share project progress.

For content, we've built a custom platform using HTML5, CSS3 and embedded fonts.  It is a simple setup running on uniform displays [32" Philips Public Signage display] with a very specific browser [Opera in Kiosk Mode]. This means we don't have to worry about browser compatability, and we can design the interface using specific pixel dimensions.

Here's what the first version looks like in Opera 10.63:

This uses HTML5 to define page content with the more semantic HTML5 markup for the page elements <header> <footer> and <nav>. It passes the W3C's HTML5 validation check as well. With simple CSS style rules, Opera renders the page structure well, but it looks pretty bad in Internet Explorer 8, as shown.

Our initial focus with the touch screens is to create content to be used while physically on campus.  Over time, we'll publish this content on our website, planning to archive all exhibits we create. Look to our WebDevBlog for technical updates on the system and underlying technologies.

This entry was posted on October 19, 2010 at 9:51 AM and has received 24015 views. Print this entry.

For many years we wrote out links’ URLs in the visible text on our pages so they would not be lost to users who printed out our pages. This made our site a lot less readable than it could have been. To remedy the situation, we tried a CSS technique that would display links’ URLs only when a page was printed out. Unfortunately, like a lot of useful CSS tricks, this didn’t work in Internet Explorer.

On the David Walsh Blog we found a solution that uses CSS and the MooTools Javascript framework to dynamically generate endnotes showing the URLs of every link on a page. It does this by collecting all of a page’s anchor tags into an array and breaking out the values of their href properties into an ordered list. Unfortunately, this solution generated several empty endnotes, since it also included the empty href values of several named anchors we use for same-page navigation on many of our pages.

My solution to the named-anchor problem was to use MooTools’ array.filter method to remove from the anchor array any anchor whose href value was null. The final, modified code looks like this:

/* when the dom is ready */
window.addEvent(’domready’,function() {
/* get the links */
var links = $$(’#print-content-area a’);
/* remove from the array named anchors lacking an “href” property */
function notNull(a) {
return(a.get(’href’) != undefined);
}
var filteredLinks = links.filter(notNull);
/* if there are any */
if(filteredLinks.length) {
/* create toc list */
var container = new Element(’ol’,{
‘class’: ‘print-only toc-list’
}).inject(document.body,’bottom’);
/* add a heading for the TOC */
var header = new Element(’h2′,{
text: ‘Links In This Document’
}).inject(container,’top’);
/* get links inside the content area */
filteredLinks.each(function(a,i) {
/* insert the span reference right after the link */
/*if(a.get(’href’) != undefined){*/
new Element(’span’,{
text: ‘[' + (i + 1) + ']‘,
‘class’: ‘print-only’
}).inject(a,’after’);

This entry was posted on November 24, 2009 at 11:45 AM and has received 25435 views. Print this entry.