enhancing your catalogue with open source
Post on 05-Jul-2015
1.848 Views
Preview:
DESCRIPTION
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
top related