enhancing your catalogue with open source
DESCRIPTION
Presentation on using Open Source tools to enhance your library's online catalogue. From Haggis and Mash.TRANSCRIPT
Open Source Interface Enhancement
Matt Machell
Talis and The Juice Project
B ig J , l i t t le j -W h a t b e g in s
w it h J ?
Javascript, jQuery and Juice
begin that way!
Building BlocksBuilding 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 a n y w h e r e !
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 So how can this help your catalogue?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/
<script src="jquery-1.4.4.js" type="text/javascript"> </script>
<script src="jquery.tools.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$('#s').tooltip({tip:'#searchtip', offset:[15, 90]});
$('#login-to-request-link').tooltip({tip:'#searchtip2', offset:[15, 30]});
</script>
<div id="searchtip" class="tooltip">
Search for anything here, author, subject and even ISBN!
</div>
<div id="searchtip2" class="tooltip">
You'll need to be a member! Some items may incur a charge.
</div>
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 powerIt's easy to unintentionally...
... slow a page down
... break usability
... hinder accessibility
That's great but...None of this is really Library specific
Juice!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.7Smaller, 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!
<script type="text/javascript">
$(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?
<script type="text/javascript">
$(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 BookjacketsGeoLocation / Google MapsFacebook Like ButtonsTwitter IntegationReading List Integration
QR CodesDelicious 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 BlocksBuilding 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