Posts tagged: 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
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
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
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
Mar 31 2009

Social Backrub


This is just one of my passing thoughts, which I suspect is understood by many, but not necessarily expressed this way:

Google’s PageRank is, for all practical purposes, a form of social networking applied to the concept of a particular html tag.  The ranking system is built upon the idea that someone, somewhere, decided that something on their web page was so associated with another web page that it needed to be wrapped in <a> </a> tags with the web page’s address referenced.  Thousands (millions!) of people finding it imperative to add these tags around their text, and thereby making it possible to judge the importance of specific web sites by aggregating these millions (billions!) of tags.  Will we look back at this and call it the beginning of social networking on the web?

the thought passed through my head while reading Stefano’s Linotype

  • Share/Bookmark
Mar 19 2009

TicTOCs in the OPAC


File this as a future wish-list item for your online catalog:

There is a new and interesting way to connect an OPAC search result for a journal to the full-text journal articles, and it is called ticTOC.  The application of this shows just how effective a well thought out mashup can be.

Last December, I ran across a blog post on RSS4Lib about the TicToc project, which has been in existence for a couple of years, but had just officially launched. I never got around to posting it, but I made a point to watch for further information.

TicTOC provides, via an RSS feed, the table of contents for the current issue of whatever journal you search for.  There are currently over 12,000 journals included in their service.  Read the RSS4Lib post (above) for a more detailed description.

There is now at least one library, Wageningen UR Digital Library in the Netherlands,  that has created a mashup in their OPAC that shows just how powerfully this can enhance an OPAC search.

Locate a journal using their e-journal search, or go straight to the result screen for the Journal of zoology : proceedings of the zoological society of London.

  1. Click on “Show recent articles” on the right side of the screen.
  2. To display an article’s abstract in the OPAC, click on “Show abstract”.
  3. To get to the full text of an article, click on the title of the article, then click the full text link on the publisher’s site.

Two clicks from the journal result in the opac to the full text of an article in the current issue.  I am not sure what would need to be done to deal with proxys and journal databases, but for articles retrieved through the publisher’s web site, this is very straightforward and useful.

This appears to be a great service, and the Wageningen UR Library has done a fantastic job in creating the mashup.  I look forward to seeing how this is integrated into other collections.

found via RSS4Lib

  • Share/Bookmark
Mar 09 2009

Web Tech Guy and Angry Staff Person


Web Tech Guy and Angry Staff Person (an exaggerated tale) is a video designed to be a provocative look at the arguments for opening library/museum data to web 2.0 social uses

The video isn’t so much exaggerated as much as it packs many of the arguments one hears against social uses of data into a short time span.  It was created by Michael Edson, Director of Web and New Media Strategy for the Smithsonian Institution.

found via Stephen’s Lighthouse

  • Share/Bookmark
Mar 04 2009

Readability


Readability is quite simply one of the easiest-to-use and effective usability aids I have seen in quite a while.

Follow the link, set the controls for your most comfortable reading style, drag the “Readability” button to your bookmark toolbar, and click the the link in your toolbar whenever you want to read an article on an otherwise cluttered or problematic website.

Voila!  It even works great for generating print versions of pages.

found on MetaFilter

  • Share/Bookmark
Feb 17 2009

Library Web Site of the Future


The Library Web Site of the Future, written by Steven J. Bell, is yet another essay about what is wrong with library web sites, and yet it is not just another essay…

It is a strong critique that touches upon many aspects of our web presence, and emphasizes that users, both students and faculty, are increasingly bypassing it and seeking information elsewhere.  Read it with a critical eye towards your library’s web site, but I suggest taking some of it with a grain of salt.

Bell’s conclusion is that libraries have erred in not following the lead of marketing design experts, that we are moribund because we don’t let our sites be transformed into an “advertiser of campus wares to those who would buy into the brand.”

I suspect the answer is that our web sites tend to be moribund because we let them be.  We tend to design by committee, attempting to force what should be a easily navigated collection of resources into a click-fest labyrinth.

Try having someone unfamiliar with your website navigate it with a general purpose in mind (“I want to find a full-text magazine article.”) and see what blind alleys they encounter.  This is about the simplest usability test you can create, and it can be telling.  But it is only the start.

Bell suggests that focusing on usability is a misstep, and that it is simply “rearranging the deck chairs on this Titanic.”  I think that the problem is that usability is not a misstep, but only the first step in a different direction.

We need to make accessing our resources so straightforward, so open, and so universal that people will use them because it is the path of least resistance to the information they seek.

There are many elements to this, and Bell is right in many of his criticisms, but libraries need to be as universal as possible.  Keeping our resources in a silo, no matter how good the resources, does not generate traffic.  We need to open it up as much as we can, and continually push to open the rest.

In addition, we need to get our resources where our users are.  Do you use RSS to get information to users?  Do you use social networking to get information to users?  Your resources, if disseminated the right way, become your best marketing strategy.  Figure out where your potential users are, and then figure out how to connect your resources to wherever that is.

You don’t need to turn your site into a product to be marketed; you need to get your product to market.

found via LISNews

  • Share/Bookmark
Jan 27 2009

SitePoint Reference


SitePoint Reference is an online guide with a wealth of information on web design.  Divided into three sections, HTML, CSS, and JavaScript, it is a great place to find that bit of information you need while designing or editing a web site.  Keep it in your bookmarks.

You might recognize SitePoint from their book publishing, including the recent Everything You Know About CSS Is Wrong! which details the use of CSS tables in web design.  The title is hyperbole, in my opinion, but the book itself is excellent.  It has changed how I view the design of web pages, and I hope to put it into practice in the near future.

found via the SitePoint blog

  • Share/Bookmark
Jan 27 2009

Upgrades Big and Small


A post on the Unshelved Blog reminds me of the varying philosophies towards upgrading web sites.

In the post, Bill discusses how much easier it is to make incremental changes to their site fairly often, rather than a major overhaul less often.

I agree, but also have found that completely re-doing a site occasionally, combined with incremental and on-going changes, allows for the least amount of overall work in maintaining a web site.  This is because some changes are more easily accomplished from the ground up rather than afterwards.

Think of it in terms of one’s house: adding forced-air heating, or plumbing, or network cable is much easier in a new construction than in an existing home.  Changing windows, flooring, or updating a bathroom can all be accomplished relatively easily in an existing house.

The trick, with both the web site and the house, is to determine what is needed, what is wanted, and the resources and options you have to make it happen.  There is a great deal you can do to an existing web site / house, but at some point it makes sense to start fresh.  Figure out which is best, and plan ahead for the big changes.

  • Share/Bookmark
Jan 24 2009

Fonterrific


A recent post, and the resulting discussion, on Metafilter has put me in a Unicode font frenzy.  A few links of note from there and elsewhere:

As someone who has worked with an ILS that didn’t have Unicode support, which was then upgraded to support Unicode, and then changed jobs and is now working with an ILS with very limited Unicode support, I have a great appreciation for the benefits of Unicode.

Libraries should, in all that they do, attempt to store and present data in Unicode.  This includes our catalogs, web sites, and other data repositories.  Even if you offer very little outside of the standard Western characters, it makes your data that much more accessible and useful.

  • Share/Bookmark
Jan 19 2009

Microformats + RDF + CSS = Semantic Richness


Add Symantic Richness To Your Markup With (RDF) Ease is the title of an article on SitePoint that delves into a topic I find fascinating, yet have only dabbled in in my own website creations.

Microformats are one of the best ideas I have seen in web design since CSS.  RDF, in some form, is what the semantic web of the future will be built upon.  CSS, for all its complexity, is a powerful tool that is still growing into a transformative design language.

Read the article, even if parts of it are foreign to you.  Think about how this has the power to change the web as we know it.  Think about how it has the power to change our catalogs, our article databases, and online collections of resources (books, images, etc.).  Think about it.

  • Share/Bookmark
Jan 11 2009

New Theme


Not a huge deal, but I just changed the theme of this blog to slight, which was created by Thematology.

There are several reasons for this change, including:

  • Wanting a theme that would fit better with the Libology logo (forthcoming)
  • Wanting better support for widgets – Libology has been using tags since last summer; now you can see and use them!
  • Wanting a cleaner, simpler page layout
  • Wanting to customize the look and feel of Libology over the next few months

Hope you like it… feedback is welcome!

  • Share/Bookmark
FireStats icon Powered by FireStats