Category: Web Design

Mar 16 2010

Mash-Up the OPAC


ILS user groups can be one of the greatest sources of tips, tricks and inspiration for tech-oriented library staff. There was a recent discussion on the Innovative User’s Group that has led to an interesting way to embed various media into OPAC search results.

Each of these work in Innovative’s Millennium OPAC. I have not had a chance to check whether this will work in other systems, but would greatly enjoy hearing whether or not it works for others.

The key to this is the MARC 970 field, using the subfield |t, which is used for Table of Contents display information. It was observed that the contents of the field were passed along to the browser, and that html code could be passed to the bibliographic display.

It works well, and is a perfect example of a “hack”, utilizing existing functionality in new and creative ways. To date, there are six ways to extend the OPAC.

To try out these examples, simply copy the html code, starting with the |t, and paste it into a 970 field in a bibliographic record. Each of the examples should work as is; some information about how to modify the code, as well as a screenshot of the example is provided.

Displaying an Image:
This is fairly straightforward insertion of an image stored on Flickr. Change the URLs to whatever you need, adjust the pixel height and width, and this will serve you well.

|t<center><object data="http://farm4.static.flickr.com/3433/3694927599_039309b2e6_o.jpg" type="image/jpg" width="400" height="600"><img src="http://farm4.static.flickr.com/3433/3694927599_039309b2e6_o.jpg"></img></object></center>

Screenshot of inserted image

Image Screenshot

Embedding a Search Form:
This code embeds a search form for OpenLibrary, including a selector check box and link to an advanced search page. Search forms can be tricky, and it can be very challenging to get even basic search functionality for some services.

|t<br />Search OpenLibrary:<form method="get" action="http://www.openlibrary.org/search"><input border: 1px solid #ccc; width: 100%" type="text" name="q" value="" title="type_search." /><button class="go" type="submit">Go</button><br /><input tabindex="9" type="checkbox" value="mhsncqbxgkup" name="ftokens">Scanned books only<br /><a href="http://www.openlibrary.org/advanced" style="text-decoration: underline">OpenLibrary Advanced Search Page</a></form>

OpenLibrary search box screenshot

Search Box Screenshot

Embedding a Video:
This example embeds a YouTube video, specifically the preview for the film “A Streetcar Named Desire”. Previews of videos available in the library, library instructional videos, and author interviews are examples of the types of embedded video that add can value to your OPAC.

The embedding information comes from the “Embed” information from the YouTube result page. You can also simply replace the URL information in the code below:

|t<center><embed src="http://www.youtube.com/v/ilW32IKJoM0&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="720" height="578"></embed></center>

Embedded Video Screenshot

Embedded Video Screenshot

Streaming Audio:
This example uses a third-party service called Odeo to stream the MP3 audio of Martin Luther King Jr’s “I Have a Dream” speech. The audio file lives on the Internet Archive.

|tTo listen to the speech, click the "Play" button:<br /><center><embed src= "http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars= "valid_sample_rate=true&external_url=http://www.archive.org/download/MLKDream/MLKDream_64kb.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></center>

Streaming Audio Screenshot

Streaming Audio Screenshot

Journal Table of Contents
This example utilizes two separate third-party services. First, the ticTOCs Journal Tables of Contents service is used to locate an RSS feed for a table of contents, in this case “Educational Research“.

After this, the feed URL is entered into the Feed2js service, which generates the code. To display any RSS feed, simply use the Feed2js service with a feed’s URL.

|t<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.informaworld.com%2Fampp%2Frss%7Econtent%3D0013-1881&chan=y&tz=-5&targ=y&utf=y&html=a" charset="UTF-8" type="text/javascript"></script> <noscript> <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.informaworld.com%2Fampp%2Frss%7Econtent%3D0013-1881&chan=y&tz=-5&targ=y&utf=y&html=y">View RSS feed</a> </noscript>

Journal Table of Contents Screenshot

Journal Table of Contents Screenshot

Virtual Bookplate
This example is simply a proof of concept, but I especially enjoyed putting this one together and hope to create a more polished version in the future. It uses a background image of an open book with blank pages (credit to happysweetmama via Flickr), and then applies Relative Positioning to place text on top of the image.

The text position, font, size, and content are all able to be controlled for each record. This can be a great way to honor those who add to a collection, or to highlight items from a particular collection.

|t<center><object data="http://www.libology.com/capital/OpenBook500.jpg" type="image/jpg" width="500" height="364"> <img src="http://www.libology.com/capital/OpenBook500.jpg" width="500" height="364"></img> </object><div style="position: relative; top:-225px; left:-125px"><font size="+1" font-family:"Times New Roman",Georgia,Serif;>A Gift from:</font></div><div style="position: relative; top:-260px; left:125px"><font size="+2" font-family:"Times New Roman",Georgia,Serif;>Josiah H.<br />Blackmore II</font></div></center>

Virtual Bookplate Screenshot

Virtual Bookplate Screenshot

There are, I am sure, dozens of ways that one can use this hack to enhance the OPAC… these are just a start.

  • Share/Bookmark
Mar 11 2010

Mash-Up is not a new term


From the Oxford English Dictionary, via Ron Murray at the Library of Congress, through the Disruptive Library Technology Jester, comes the news that the term “Mash-Up”, with roughly the same meaning as today, is over 150 years old!

The modern re-birth of the term appears to begin around 1994.

  • Share/Bookmark
Feb 28 2010

Accent Folding


A List Apart has been a steady source of thought-provoking inspiration over the years, not only from a website building perspective, but also because much of what they publish crosses boundaries and impacts other projects and interests in my life.

Their current article, Accent Folding, greatly impacts library data in general, and library catalogs in particular.  It deals with the issue of Unicode and pattern recognition, namely how one creates search tools that allow for variations in how words containing accents, stress marks, and other non-ascii characters.  The most succinct example:

There is no excuse for your software to play dumb when the user types “cafe” instead of “café.”

The article presents methods of “normalizing” text to allow for proper matching, and should be read by anyone who gets to deal with library data for reports and searching aids.  If you know how to use regular expressions, you will likely be in for a treat.

The other example they present, this time to demonstrate the limitations of accent folding, uses Japanese to illustrate just how differently the same data can be presented:

These four sentences all say “Children like to watch television” in Japanese:

  • Kanji: 子供はテレビを見るのが好きです。
  • Hiragana: こども は てれび を みる の が すき です 。
  • Romaji: kodomo wa terebi o miru noga suki desu.
  • Cyrillic: кодомо ва тэрэби о миру нога суки дэсу.

Even if you don’t end up applying this directly to your work, the information in this article will help your appreciation for the challenges contained within your data, and how tough it can be to make it “just work” sometimes.

  • Share/Bookmark
Dec 08 2009

Library Website Fails


I see these types of messages all the time on library-related websites, and I agree that it sends the message that those who manage those sites don’t have a good grasp of current web technology:

Time to Update? by David Lee King.

Check the web sites that your library presents to the world.  If you see messages like those highlighted by David, start talking to people about getting them up to date (or better yet, getting rid of them, since a good standards-designed site will work well across browsers and browser versions).

  • Share/Bookmark
Nov 10 2009

Springo


I have always been a fan of the idea of creating a mediated search engine – one in which the results have been reviewed in order to ensure a lean, relevant results list.

The reality of the idea is, shall we say, a different matter.  The process is time-consuming, labor-intensive, and usually falls short in the relevance category.

Springo may be the reality that falls closer to the ideal.  Focusing on topic-based searches, they provide results that reflect sites that people most use when they are seeking solutions to more generalized questions, such as e-mail software, movie reviews, or open source software.

The results aren’t perfect, but they do appear relevant.  Most of what I notice are the sites I would expect to be top-tier, but aren’t.  It is a great resource, especially for those who might otherwise find it challenging to wade through several dozen results to find what they need.

My other observation is that I almost immediately began to use the URL to form my search strings, rather than use the provided interface.  It just seems faster and easier to do so.  Plus, it would be nice to be able to right-click (Windows-centric) in order to open results in a new tab.  Minor quibbles, though, for an effective tool that has been a long time coming.

found via Library Journal (print edition, 1 November 2009)

  • Share/Bookmark
Sep 24 2009

punypng


punypng is a great service for those who work with the .png image format.  If you work on web sites, presentations, or other projects that involve image files, this is really worth adding to your toolkit.

What it does is fairly straightforward:  you upload your .png image file to their site, their algorithm examines the file and determines what can be done to make the file smaller without sacrificing image quality, and offers you the file as a download.

I tried it, and got as much as a 48% reduction in file size, without any visible loss of quality.  Even if all you get is a 10% reduction in file size, it means that your web sites, presentations, etc. will load and run faster.  For a busy web site, like Google or WorldCat, every reduction in the data needed to be sent to each user can add up to large savings in time, energy, and ultimately money.

found via SitePoint

  • Share/Bookmark
Aug 23 2009

Social Your Site


Jenny Levine makes a great case on The Shifted Librarian for adding a feature to your sites that allows users to easily share your content via social networks.  Not only will this offer a way for your users to help spread the work about services and activities that you offer, but it can help them keep track of information they find so that they can revisit it later.  This will be a benefit for users of mobile browsers, which are rapidly becoming a more significant portion of visitors to our web sites.

You may notice that I have followed her advice and have added the Add to Any service to this blog, visible at the bottom of every post (and checked to ensure it validates against XHTML and CSS standards, of course; a requirement I have for any add-on).

  • Share/Bookmark
Aug 17 2009

Center for History and New Media


I have been aware of the Center for History and New Media for quite some time (even posted a link here), but only recently did I take a look at their site beyond the work they do with Zotero.  I was surprised, in a very good way, at all of the resources they have available:

  • Zotero – One of the best Firefox add-ons available, this should be taught to every college freshman as an aid to research.
  • Omeka – Designed as a platform to create online exhibits and collections, this tool appears to be a great option for digital collection projects.
  • ScholarPress – A collection of WordPress add-ons geared towards educational use, including Courseware, which offers an array of tools for instructors to connect with their students (although it would serve well for library instruction, I suspect).
  • Syllabus Finder – Nearly two million syllabi can be searched and viewed through this site.
  • ECHO – a directory of over 5,000 websites “concerning the history of science, technology, and industry.”

These are just a portion of the resources under their Research + Tools tab.  When you consider their offerings under the Teaching + Learning and Collecting + Exhibiting tabs as well, you can see that it would take hours to properly sample the useful items in this site.  Take some time to see what they can offer to help your projects.

  • Share/Bookmark
Aug 09 2009

Virtual Bookplates


With our increasing reliance on electronic record keeping, especially online records, it makes a lot of sense to consider the use of virtual bookplates for those items which would normally have a printed label affixed within the book:

This strikes me as an especially effective way to both recognize and promote donors.  The only real technical requirements are graphics software to create and edit the bookplate design, and the web space to store the finished graphics.  Neither should be a problem for any library willing to spend the time required to get the project rolling.

The people who created the above-linked presentation are conducting a survey on library practices on bookplates.

found via AcqNet-L

  • Share/Bookmark
Jul 09 2009

Talon


Talon is a Firefox add-on that enhances the way you can grab images from your web browser.  The neatest aspect of this is the ability to create an image that contains the entire web page you are viewing.  The benefits of this for presentations and training guides are plentiful.

Talon was created to work with online image editor Aviary, which is also well worth exploring!

Want to grab that web page screenshot without installing Talon?  Simply add Aviary.com/ to the beginning of the URL you wish to copy.  Example:  Aviary.com/http://saveohiolibraries.com/

found via TechCrunch, nearly a month ago

  • Share/Bookmark
Jul 07 2009

Open Web Tools Directory


Mozilla’s Open Web Tools Directory is a site designed to quickly connect the user with a variety of online tools for a variety of projects.  The categories include Design tools, Coding tools, Debuggers, and more.  Many of the projects listed are new to me, so I expect to find at least one or two new tools for my own projects.

found via TechCrunch

  • Share/Bookmark
Jul 06 2009

Trends in the WebSphere


A couple of news items that signal trends in the way the web will evolve:

Internet Explorer has lost a significant amount of market share recently. This is good news in a couple of ways.  First, it signals growing diversity among web browsers, and the people who use them.   This strengthens the concept of web standards, and encourages design that is browser agnostic.  The other way in which this is good news is that IE6 use has dropped below 10% and IE7 is heading that way as well.  Internet Explorer 8 is superior to either one, and it is great to see people upgrading.   There are also many fantastic browsers not made by Microsoft, including Mozilla’s Firefox, Apple’s Safari, Google’s Chrome, and Opera.  Whichever you choose (and why limit yourself to just one?), make sure you are using the most current version.  Otherwise the only thing you aren’t missing out on is the security problems.

XHTML 2 will disappear at the end of this year.  That I think this is good might surprise those who know that I have been designing using versions of the XHTML standard since around 2005.  I like the separation of content from design, and some of the features of XHTML 2 look fantastic.  However, I think HTML 5 is going to take the internet by storm, and it is better to incorporate as many of the good features of XHTML 2 in HTML 5, eliminate the problematic issues, and let one standard guide the design of general web pages.  This requires that HTML 5 be as good as it looks.  I have high hopes for it.

  • Share/Bookmark
Jul 01 2009

NASA Needs A Library Solution (But So Do Libraries)


In a merging of two of my great interests, NASA has issued a Request For Information (ROI) on how best to “analyze and catalog notes from spaceflight pioneer Wernher von Braun into an electronic, searchable database or other system.

von-braun-sketch1

Sample Page from Von Braun's Notes

At first glance, this is something that would be solved by using library tools and software.  However, the list of potential ways to set this up seems to illustrate the gaps in library technology (all points are mine):

  • Users should be able to see the notes as they exist.
  • The text in the notes, as well as all labels and notations, should be fully keyword searchable.
  • All elements of the notes, including text, formulas, diagrams, etc. should be able to be targeted and described in a way that allows for keyword searching.  This includes “tagging”, but also commentary, description and critique.
  • Users should be able to define relationships (create links) between ideas within the notes, as well as documents and other resources from other collections.  For instance, someone seeking information on the Saturn V Engine Bell should find all drawings, notes, diagrams, and formulas within the notes, as well as outside resources relating to all of these.

This project begs for a combination of a traditional database (for storing and searching text) with the added functionality provided by social software products.  Nothing in the list is beyond the current means of technology… think  of a wiki combined with flickr-type functionality that can utilize PDF documents and you have a good starting point.

Why hasn’t this been done?  How many libraries and archives have document sets like this that could become a researcher’s favorite collection, with the right application of technology?  Have any been digitized with a social annotation feature?

Why do I suspect that the development of this will come from outside the library community?  We should already have projects that utilize this kind of mash-up philosophy… our collections could be so much more powerful.

There are some great things being done in the library technology realm, and many people and projects that are worth praising.  But now and then I see something like this and wonder how we missed this obvious application of existing technologies.

found via ResourceShelf and Wired Science

  • Share/Bookmark
Jun 08 2009

Web 3.0 Concepts Explained in Plain English


Web 3.0 Concepts Explained in Plain English is a collection of presentations, all striving to describe the next phase of web activity and development.  If all you look at is the single slide that sums up the differences between the three web generations, you will likely have a better grasp of what is coming than before.

found via Stephen’s Lighthouse

  • Share/Bookmark
Jun 05 2009

Why HTML 5


This has been a busy week; so much so that the previous post, HTML 5, Google Wave, and the Future of the Web was started last weekend, with some editing and additions each day, and them actually posted yesterday.  Note that it says “posted”.  I realized last night that I hadn’t actually finished it.  So, if you read it and wondered what the heck did HTML 5 have to do with the rest of the post, here is my wrap up:

You may be wondering why I started this post discussing HTML 5.  The newest version of HTML has been in development for years, and has had its share of controversy.  Many developers and users have spent years pushing for effective use of web standards, with an eye towards XHTML use and support, which emphasizes the separation of content and style.

HTML 5, according to some, muddies the content/style waters too much, and will make it harder to preserve the gains that continue to be made.

However, with the timely announcement of Google Wave, it seems clear that HTML 5 is a game changer with serious potential, and that it will make many things easily possible that currently require a great deal of work and computing power.

For the next few years, at least, we will be working with web pages that, at best, will be coded to two fairly different standards.  XHTML and HTML 5 will co-exist, and if web developers approach their task with an understanding of each, we can design sites around the standard that suits them best.

Perhaps the next iteration of HTML will be a unification of the standards, allowing everything to exist within one framework.  I don’t know if that is possible (and don’t know HTML 5 enough to have a grasp of the differences between them), but I for one will be very happy to have two powerful and well-created standards to work with, and look forward to seeing what lies in the future.

  • Share/Bookmark
Jun 04 2009

HTML 5, Google Wave, and the Future of the Web


Amidst a great many other topics, HTML 5 has been on my mind the past couple of weeks.  It started on Tuesday, May 26th, with Kevin Yank posting HTML 5 : Now or Never? on the SitePoint blog.  He was floating the question of whether or not they should look into publishing a book on HTML 5 now, or if they need to wait until it matures enough for developers to use with confidence.  If you read his post, and especially if you look over the comments, you will see that there is a full range of opinions (including that HTML 5 should never be implemented) by developers about the topic.

This remained a relatively minor, background issue until two days later, Thursday, May 28th.  On that day Google announce the existence of a new project called Google Wave.  My initial thought was that Google was simply creating their version of a FaceBook/Twitter/Blogging style platform.  The more I looked, the more I realized that this was much different, and much more important, than a differently branded service.  Wave is something that has the potential to change many, many aspects of how we use the internet.

What is Google Wave?  I have spent a good part of last week trying to distill it into a couple of paragraphs, and am not having much success.  The overall essence of it is something that I haven’t yet wrapped my head around, but here are a few aspects of it that will hopefully illustrate some of it:

It is a communication platform that allows users to send, receive, and use a variety of information (think communications like e-mails, IM, tweets, feeds, etc.) in a way that offers greater control, speed, and usability.  Messaging becomes “real-time”, with your keystrokes being sent live to the person you are communcating with (unless you select to hold the message until you are ready).  The effect of this is that it becomes possible to hold a real-time conversation with others utilizing a variety of communication forms simultaneously.  You can incorporate text, images, documents, and other digital formats into the conversation in a free-flowing manner that saves time, effort and reduces confusion.

To quote from the introduction to an interview, “Email is asynchronous conversation. Instant messaging, by contrast, is synchronous. Wave is both.“  Possibly the best general description of Wave could be that it lets users and groups easily communicate and collaborate in one interface, using whatever editing/communication/collaboration techniques fit the task at hand.  Think of it as a collaboration mash-up tool.

A few places to find further info:

Watch for the technological shift from these developments.  This will not only give us new and improved tools to perform tasks and work together (think of the possibilities for online meetings and conferencing), but will set standards for what will be expected from web presences.  Our OPACS may have some new goals to aim for.

Note added later:  I have had a busy week, and forgot to actually address the relationship between HTML 5 and Google Wave.  I do so in another post, Why HTML 5.  Apologies for not getting it right the first time!

  • Share/Bookmark
Jun 01 2009

National Library of Australia’s Search Prototype


The National Library of Australia has launched the beta of their new search interface, SBDS Prototype (SBDS stands for Single Business Discovery Service, I think), and the search experience is not only better than any other library-related search I have used, it is faster than most of them as well!

Other reactions:

This is an excellent example of what is possible today, and what we should all strive for in our search interfaces.  There is such a diversity of resources, and unifying these into a usable and fast single-search service is a credit to the developers at the National Library of Australia.

  • Share/Bookmark
May 23 2009

Open Jurist


Open Jurist is a great add-on to the free case law resources I wrote about a few days ago.  Consisting of over 600,000 opinions from the federal court system, including the United States Supreme Court and the Federal Appellate Courts.  This looks to be a great resource for research into federal court cases.

One minor negative:  one of the first searches I performed, Bush v. Gore (the Supreme Court decision regarding the 2000 presidential election) didn’t work as it should have because the case is listed as “George Bushs v. Albert Gore“.  The “s” at the end of the word kept it from the first page of results.  I initially thought it might have referred to the plurality of petitioners (“et al.”), but a Google search actually produces no results when the “s” is included.  I looked for a way to notify those who run the site, but only found an e-mail address that was to be used “if you have access to more cases or know where we can get more of them”.  Any website meant to offer a service should have (at least) a method for general contact.

(Note:  see comment regarding the “one minor negative” paragraph!)

found via ResourceShelf

  • Share/Bookmark
May 17 2009

Information Streams


Eric Shonfeld at TechCrunch writes:

“Once again, the Internet is shifting before our eyes. Information is increasingly being distributed and presented in real-time streams instead of dedicated Web pages. The shift is palpable, even if it is only in its early stages.”

Twitter.  RSS.  Facebook.  Digg.  You-Name-It-Feed.  It is becoming apparent that this is the next big shift in internet usage, and, as with the previous shifts, it is hard to guess what the effects will be, and who will be affected.

And this, like previous shifts, will not supplant previous internet use trends.  HTML, or some form of it, will still be very dominant.  Blogs and Wikis will continue to exist, and will be useful tools for certain types of communication and interaction.  Integration will continue to be the norm, with the “now” infusing itself throughout.  How will this change be considered dramatic?

“Traffic occurs in bursts, depending on what people are paying attention to at that second across a variety of services. Someone might notice an obscure blog post on Twitter, where it starts spreading, then it moves to FriendFeed and Facebook and desktop stream readers such as Tweetdeck or Seesmic desktop and before you know it, a hundred thousand people are reading that article. The stream creates a different form of syndication which cannot be licensed and cannot be controlled.”

This “cannot be licensed and cannot be controlled.”  Think about this.  How much of your web presence is based on control:  control of layout, content, contributors, and most of all, control over the rate at which change occurs?   For a library web site, how much of this control is able to be ceded before the concept of a library web site itself changes, without controls?

As with many future technology issues, now is the time to begin thinking, discussing, understanding all of this.  We cannot begin the process of deciding or planning, because none of us can predict how this will play out.  What will we have in place to deal with this, to anticipate this, to harness this?  One benefit of this process will be the inevitable inspiration that some will have about the potential of streams; a future must-have library web site technology might come from this.

Start thinking!

  • Share/Bookmark
May 14 2009

Google and Microformats


Google has made the jump into supporting Microformats as well as RDFa, calling their implementation “Rich Snippets”!

This is great news on several different levels. Semantic markup within web pages provides a way to target searches much more effectively.  TechCrunch provides an excellent example:

“If I was to write a post that mentioned “The President” without naming him, Google probably wouldn’t realize that I was talking about President Obama – it might think I was referring to another US president, or perhaps the leader of a company. But using RDFa I could tag the words “The President” with “Barack Obama”. That tag would be visible to machines spidering the page for indexing (resulting in smarter search results), but wouldn’t be shown to users reading the post. In effect, it’s a way to tell search engines about your content without exposing your visitors to extraneous text.”

In addition, sites that provide well-structured metadata have the potential to be much more usable (and useful).  Library web sites, especially OPACs and Resource pages, should include structured information that details the context of the displayed content.  Using microformats in our web sites will benefit everyone involved over time.  As David Peterson notes on the SitePoint blog:

“Now that Google is supporting structured data it is high time to learn how to use this stuff.”

  • Share/Bookmark
FireStats icon Powered by FireStats