Enhancing your catalogue with open source

Open Source Interface Enhancement Matt Machell Talis and The Juice Project

Big J, little j - What begins with J?

Javascript, jQuery and Juice begin that way!

Building Blocks

The little language that could
Javascript for fun, profit and web 2.0!

Or not...
"The DOM is a mess" - John Resig

jQuery to the rescue!
Fixing the bits your browser vendors didn't

We will use it here or there, we will use it anywhere!

Bundled with Microsoft and Nokia tools. Used on estimated 41% of top 10,000 websites (source Builtwith) Used in Prism 3, Blacklight, Twitter and many others

Easy to use
Solved a common problem in an elegant way
Built a strong community
Easily extensible
Why?

Easy?
$('p.alert').addClass('obvious').fadeIn();

Plugins

So how can this help your catalogue? US National Archives : http://www.flickr.com/photos/usnationalarchives/3873932255/

Rewrite your interface
Help tips Demo : jQuery Tools Plugin
http://flowplayer.org/tools/tooltip/

You could...
Pull in data from elsewhere
(Google Docs, Yahoo Pipes, Flickr)
Hide excess catalogue data until needed.

It's Easier to Extend Browser-side

With great power
It's easy to unintentionally...
... slow a page down
... break usability
... hinder accessibility

That's great but...
None of this is really Library specific

Juice! Photo Credit: David Hall http://www.flickr.com/photos/moonhouse/5013228330/

Enhancing Online Catalogues
juice-project.org

It's Easier to Extend Browser-side

Juice 0.7
Smaller, faster, easier!

$.juice.loadExtensions('')
9k smaller
Latest jQuery
jQuerified ~50%

Now : Fun stuff * * Friendly Web Designer May Be Required For Actual Fun

I wish our OPAC had previews!

$(function(){
$.juice.loadExtensions('GBSEmbed.js');
$.juice.googleApiKey="ABQIAAAAKi1cC767naAPtNw6ExDJHBSr1cLuvfmD_hPnfKXXZtPgfYowlRRaiVfGUqzawVB9RWLIPD4MTDzgdw";
$.juice.ready(function(){
talis_prism_metadef();
var div ='<h2>Look Inside:</h2><div id="GBSViewer" style="width: 100%; height: 800px"></div>';
var insert = new JuiceInsert(div,"#details .table","after");
new GBSEmbedJuice(juice,insert,"GBSViewer");
});
});
</script>

What about a feed from our blog?

$(function(){
$.juice.loadExtensions('GoogleRssfeed.js');
$.juice.googleApiKey="ABQIAAAAKi1cC767naAPtNw6ExDJHBSr1cLuvfmD_hPnfKXXZtPgfYowlRRaiVfGUqzawVB9RWLIPD4MTDzgdw";
$.juice.ready(function(){
var insert = new $.juice.insert('<div id="feed"></div>',".yui-b","append");
insert.show();

new GoogleRSSFeedJuice($.juice,insert,"feed", "http://blogs.talis.com/panlibus/feed", {numResults : 10});
});
});
</script>

Also:
Alternate Bookjackets GeoLocation / Google Maps Facebook Like Buttons Twitter Integation Reading List Integration
QR Codes Delicious Bookmarks ...

Think about what's really needed

Open source?
Many hands make light work
Sharing innovation
Not re-inventing the wheel
Re-usable components

Building Blocks

So...
Javascript is a pain
jQuery makes Javascript less painful
Plugins can solve common problems
Juice is a plugin for libraries

Or...
jQuery + Juice + Thought = Awesome
Do more with less

Fin.
jquery.com
juice-project.org
Me : eclecticdreams.com / @shuckle
Work: http://blogs.talis.com/prism

http://juice-project.org	214
http://www.juice-project.org	8
http://lanyrd.com	5

Enhancing your catalogue with open source

by Matt Machell on Jan 25, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 227

Statistics

Enhancing your catalogue with open source — Presentation Transcript