Enhancing your catalogue with open source
-
Upload
matt-machell -
Category
Education
-
view
1.846 -
download
3
description
Transcript of Enhancing your catalogue with open source
![Page 1: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/1.jpg)
Open Source Interface Enhancement
Matt Machell
Talis and The Juice Project
![Page 2: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/2.jpg)
B ig J , l i t t le j -W h a t b e g in s
w it h J ?
![Page 3: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/3.jpg)
Javascript, jQuery and Juice
begin that way!
![Page 4: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/4.jpg)
Building BlocksBuilding Blocks
![Page 5: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/5.jpg)
The little language that could
Javascript for fun, profit and web 2.0!
![Page 6: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/6.jpg)
Or not..."The DOM is a mess" - John Resig
![Page 7: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/7.jpg)
jQuery to the rescue!
Fixing the bits your browser vendors didn't
![Page 8: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/8.jpg)
We will use it here or there, we will use it a n y w h e r e !
![Page 9: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/9.jpg)
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
![Page 10: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/10.jpg)
Easy to use
Solved a common problem in an elegant way
Built a strong community
Easily extensible
Why?
![Page 11: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/11.jpg)
Easy?$('p.alert').addClass('obvious').fadeIn();
![Page 12: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/12.jpg)
Plugins
![Page 13: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/13.jpg)
So how can this help So how can this help your catalogue?your catalogue?
US National Archives : http://www.flickr.com/photos/usnationalarchives/3873932255/
![Page 14: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/14.jpg)
Rewrite your interface
Help tips Demo : jQuery Tools Plugin
http://flowplayer.org/tools/tooltip/
![Page 15: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/15.jpg)
<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>
![Page 16: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/16.jpg)
You could...
Pull in data from elsewhere (Google Docs, Yahoo Pipes, Flickr)
Hide excess catalogue data until needed.
![Page 17: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/17.jpg)
It's Easier to Extend Browser-side
![Page 18: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/18.jpg)
With great powerIt's easy to unintentionally...
... slow a page down
... break usability
... hinder accessibility
![Page 19: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/19.jpg)
That's great but...None of this is really Library specific
![Page 20: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/20.jpg)
Juice!Juice!
Photo Credit: David Hall http://www.flickr.com/photos/moonhouse/5013228330/
![Page 21: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/21.jpg)
Enhancing Online Catalogues
juice-project.org
![Page 22: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/22.jpg)
It's Easier to Extend Browser-side
![Page 23: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/23.jpg)
![Page 24: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/24.jpg)
Juice 0.7Smaller, faster, easier!
![Page 25: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/25.jpg)
$.juice.loadExtensions('')
9k smaller
Latest jQuery
jQuerified ~50%
![Page 26: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/26.jpg)
Now : Fun stuff ** Friendly Web Designer May Be Required For Actual Fun
![Page 27: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/27.jpg)
I wish our OPAC had previews!
![Page 28: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/28.jpg)
<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>
![Page 29: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/29.jpg)
What about a feed from our blog?
![Page 30: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/30.jpg)
<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>
![Page 31: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/31.jpg)
Also:Alternate BookjacketsGeoLocation / Google MapsFacebook Like ButtonsTwitter IntegationReading List Integration
QR CodesDelicious Bookmarks ...
![Page 32: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/32.jpg)
Think about what's really needed
![Page 33: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/33.jpg)
Open source?Many hands make light work
Sharing innovation
Not re-inventing the wheel
Re-usable components
![Page 34: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/34.jpg)
Building BlocksBuilding Blocks
![Page 35: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/35.jpg)
So...Javascript is a pain
jQuery makes Javascript less painful
Plugins can solve common problems
Juice is a plugin for libraries
![Page 36: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/36.jpg)
Or...jQuery + Juice + Thought = Awesome
Do more with less
![Page 37: Enhancing your catalogue with open source](https://reader034.fdocuments.us/reader034/viewer/2022042607/5598180d1a28ab6e1d8b485a/html5/thumbnails/37.jpg)
Fin.jquery.com
juice-project.org
Me : eclecticdreams.com / @shuckle
Work: http://blogs.talis.com/prism