Enhancing your catalogue with open source


Published on

Presentation on using Open Source tools to enhance your library's online catalogue. From Haggis and Mash.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Enhancing your catalogue with open source

  1. 1. Open Source Interface Enhancement Matt Machell Talis and The Juice Project
  2. 2. Big J, little j - What begins with J?  
  3. 3. Javascript, jQuery and Juice begin that way!  
  4. 4. Building Blocks
  5. 5. The little language that could <ul><li>Javascript for fun, profit and web 2.0! </li></ul>
  6. 6. Or not... <ul><li>&quot;The DOM is a mess&quot; - John Resig  </li></ul>
  7. 7. jQuery to the rescue! <ul><li>Fixing the bits your browser vendors didn't </li></ul>
  8. 8. We will use it here or there, we will use it anywhere!
  9. 9. 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
  10. 10. <ul><li>Easy to use </li></ul><ul><li>Solved a common problem in an elegant way </li></ul><ul><li>Built a strong community </li></ul><ul><li>Easily extensible </li></ul>Why?
  11. 11. Easy? <ul><li>$('p.alert').addClass('obvious').fadeIn(); </li></ul>
  12. 12. Plugins
  13. 13. So how can this help your catalogue?   US National Archives : http://www.flickr.com/photos/usnationalarchives/3873932255/
  14. 14. Rewrite your interface <ul><li>Help tips Demo : jQuery Tools Plugin </li></ul><ul><li>http://flowplayer.org/tools/tooltip/ </li></ul>
  15. 15. <ul><li><script src=&quot;jquery-1.4.4.js&quot; type=&quot;text/javascript&quot;> </script> </li></ul><ul><li><script src=&quot;jquery.tools.min.js&quot; type=&quot;text/javascript&quot;> </script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><ul><li>$('#s').tooltip({tip:'#searchtip', offset:[15, 90]}); </li></ul></ul><ul><ul><li>$('#login-to-request-link').tooltip({tip:'#searchtip2', offset:[15, 30]}); </li></ul></ul><ul><li></script> </li></ul><ul><li><div id=&quot;searchtip&quot; class=&quot;tooltip&quot;> </li></ul><ul><ul><li>Search for anything here, author, subject and even ISBN! </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li><div id=&quot;searchtip2&quot; class=&quot;tooltip&quot;> </li></ul><ul><ul><li>You'll need to be a member! Some items may incur a charge. </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  16. 16. You could... <ul><li>Pull in data from elsewhere </li></ul><ul><ul><ul><li>(Google Docs, Yahoo Pipes, Flickr) </li></ul></ul></ul><ul><li>Hide excess catalogue data until needed. </li></ul>
  17. 17. It's Easier to Extend Browser-side
  18. 18. With great power <ul><li>It's easy to unintentionally... </li></ul><ul><ul><li>... slow a page down </li></ul></ul><ul><ul><li>... break usability </li></ul></ul><ul><ul><li>... hinder accessibility </li></ul></ul>
  19. 19. That's great but... <ul><li>None of this is really Library specific </li></ul>
  20. 20. Juice! Photo Credit: David Hall http://www.flickr.com/photos/moonhouse/5013228330/
  21. 21. Enhancing Online Catalogues <ul><li>juice-project.org </li></ul>
  22. 22. It's Easier to Extend Browser-side
  23. 24. Juice 0.7 <ul><li>Smaller, faster, easier! </li></ul>
  24. 25.   <ul><li>$.juice.loadExtensions('') </li></ul><ul><li>9k smaller </li></ul><ul><li>Latest jQuery </li></ul><ul><li>jQuerified ~50% </li></ul>
  25. 26. Now : Fun stuff * * Friendly Web Designer May Be Required For Actual Fun
  26. 27. I wish our OPAC had previews! 
  27. 28. <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>$(function(){ </li></ul><ul><li>$.juice.loadExtensions('GBSEmbed.js'); </li></ul><ul><li>$.juice.googleApiKey=&quot;ABQIAAAAKi1cC767naAPtNw6ExDJHBSr1cLuvfmD_hPnfKXXZtPgfYowlRRaiVfGUqzawVB9RWLIPD4MTDzgdw&quot;; </li></ul><ul><li>$.juice.ready(function(){ </li></ul><ul><ul><li>talis_prism_metadef(); </li></ul></ul><ul><ul><li>var div ='<h2>Look Inside:</h2><div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>'; </li></ul></ul><ul><ul><li>var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); </li></ul></ul><ul><ul><li>new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); </li></ul></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  28. 29. What about a feed from our blog? <ul><li>  </li></ul>
  29. 30. <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>$(function(){ </li></ul><ul><ul><li>$.juice.loadExtensions('GoogleRssfeed.js'); </li></ul></ul><ul><ul><li>$.juice.googleApiKey=&quot;ABQIAAAAKi1cC767naAPtNw6ExDJHBSr1cLuvfmD_hPnfKXXZtPgfYowlRRaiVfGUqzawVB9RWLIPD4MTDzgdw&quot;; </li></ul></ul><ul><ul><li>$.juice.ready(function(){ </li></ul></ul><ul><ul><li>var insert = new $.juice.insert('<div id=&quot;feed&quot;></div>',&quot;.yui-b&quot;,&quot;append&quot;); </li></ul></ul><ul><li> insert.show(); </li></ul><ul><li> </li></ul><ul><li> new GoogleRSSFeedJuice($.juice,insert,&quot;feed&quot;, &quot;http://blogs.talis.com/panlibus/feed&quot;, {numResults : 10}); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  30. 31. Also: <ul><li>Alternate Bookjackets GeoLocation / Google Maps Facebook Like Buttons Twitter Integation Reading List Integration </li></ul><ul><li>QR Codes Delicious Bookmarks ... </li></ul>
  31. 32. Think about what's really needed
  32. 33. Open source? <ul><li>Many hands make light work </li></ul><ul><li>Sharing innovation </li></ul><ul><li>Not re-inventing the wheel </li></ul><ul><li>Re-usable components </li></ul>
  33. 34. Building Blocks
  34. 35. So... <ul><li>Javascript is a pain </li></ul><ul><li>jQuery makes Javascript less painful </li></ul><ul><li>Plugins can solve common problems </li></ul><ul><li>Juice is a plugin for libraries </li></ul>
  35. 36. Or... <ul><li>jQuery + Juice + Thought = Awesome </li></ul><ul><li>Do more with less </li></ul>
  36. 37. Fin. <ul><li>jquery.com </li></ul><ul><li>juice-project.org </li></ul><ul><li>Me : eclecticdreams.com / @shuckle </li></ul><ul><li>Work: http://blogs.talis.com/prism </li></ul>