Your SlideShare is downloading. ×
0
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
An introduction to juice
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

An introduction to juice

2,571

Published on

A broad introduction to the OPAC extension framework Juice.

A broad introduction to the OPAC extension framework Juice.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,571
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Hello, I’m Matt.... |(check who’s here) Can hear us. Raise hands. Opportunity for questions at the end, but raise hands as we go along if anything crops up... This is a fairly broad intro, we’ll cover reasons, architecture and a bit of practical. There will be code!
  • New systems. More web native in approach. Bookmarkable. Improved faceted search. Better User Experience.
  • People have come to expect these extra little bits from the websites they frequent. Services like Google Maps have made these services pervasive.
  • And people are doing this. Lots of mashups and hackery going on out there. See the code4Lib mailing list and the various mashed library events... People are waking up to the fact that the OPAC doesn’t exists in a bubble, it’s a web app like any other... So what are people doing?
  • National Library of Australia
  • Seattle Public Library
  • So there’s lots of cool stuff going on. But its pockets of work, by enthusiastic individuals with the right skills.
  • Which is a bit of a mouthful. But what if we could reuse all these ideas and share them and make them easy for everybody else.
  • Easy to use - we do the hard stuff so you don’t have to, you can just copy and paste Reuse and share innovation – we don’t have to work in isolation Extensible – it’s easy to build new options on top of it Product-independent – you could use it on any website that needs extensions, not just OPACs, we already have people using it on Aspire. Open Source – which means you can take it and modify it, improve it, rework it and contribute back
  • Enough talk, show me some example already?
  • Show some live demos if available: http://prism.talis.com/sandbox-gov/
  • Go to http://prism.talis.com/northampton-ac/items/501787
  • Created by richard Wallis to help make his life easier Easy for non-techies.
  • Mention client side only (protects the server side code from problems...) How easy?
  • Getting back to
  • Metadefs are a key concept. It’s telling Juice where to look for information on a page. Finding metadata.
  • Knows how to parse out particular types of text and so on. Hey it’s a 13 digit ISBN!
  • Easy – download it from the Juice Project download page. Show the process! Show the files you get! Warning over Windows build in zip... More advanced – check out the SVN version
  • Show unzipped folder, show what’s in each folder. Mention the key bits
  • Break this down in next few slides. What does each bit do!
  • This says, when the document has finished loading, run this bit of code.
  • Set debug true, so we can see any errors
  • Load an extension. Loading can take some time...
  • We wait for all those extra scripts to load and then run this code.
  • Remind them to use the sandbox tenancy which is there as a playground to try out themes and so on before going live.
  • Go to preloaded admin window and show this. Mentioned about askign support for admin access if you don’t yet have it.
  • Show the unzipped folder, add a new juice folder and add the files
  • Show opening the footer.html in notepad. At the base of the file is best!
  • There’s jquery. This tells the browse to look for a JavaScript file in this location. Prism has a base url set, so it assumes its beneath that.
  • There’s juice itself.
  • There’s our extend file. We need to write one specifically for our OPAC, just like we did with vufind. There’s an exampel to base it off if you want.
  • Create this in the juice folder. It’s the file that tells the browser what to do. Show creating the file in notepad. Mention that other editors are available!
  • Create this in the juice folder. It’s the file that tells the browser what to do.
  • Zip up the folder, check the zip and then upload over the top of the existing theme
  • Go to the tenancy and check the powered by juice works
  • We run a parallel install at /demo/ to
  • http://code.google.com/apis/books/branding.html
  • Have juice working – we did this already!
  • (not needed if you got the full Juice). Show going to the website anyway to show them what it looks like.
  • We want to only add it to the right page and need the new extension file.
  • Same as earlier process in Prism or Vufind
  • http://prism.talis.com/sandbox-ac/items/1833592 for example
  • http://prism.talis.com/sandbox-ac/items/1833592
  • Show website Show videos Show documentation Show mailing list
  • Conflicts with the jQuery of the app. – If you add in jquery and it’s already there, there may be issues. (We sandbox Prism’s jquery for exactly this reason) Mixed content - https/http – be careful could make people distrust your OPAC! Particularly an issue with plugins loading Google apis. Plugins firing on pages they shouldn’t – Add scripts to only load a
  • Transcript

    • 1. An Introduction to Juice Matt Machell , Juice Project & Talis , June 2010 talis.com juice-project.org
    • 2. In the beginning... Photo: National Media Museum, http://www.flickr.com/photos/nationalmediamuseum/3588906094
    • 3. Next Generation OPACs
    • 4. Lots of nice functionality, great user experience improvements
    • 5. but ...
    • 6.
      • Wouldn’t it be nice to have a preview like Google Books?
      • Or a twitter feed?
      • Or a map to the library?
    • 7. Lots of byte-sized bits of extra code to add extra functionality.
    • 8. Examples
    • 9.  
    • 10.  
    • 11. but ...
    • 12. But...
      • No re-use
      • Isolated innovation
      • You really need to be a web developer to do this
    • 13. What if we could make it easy for everybody to do this? Photo: National Library of New Zealand, http://www.flickr.com/photos/nationallibrarynz_commons
    • 14.
      • Javascript
      • User Interface
      • Componentised
      • Extensions
      What if?
    • 15. Juice
    • 16. Juice
      • Easy to use
      • Reuse and share innovation
      • Extensible
      • Product-independent
      • Open Source
    • 17. Examples
    • 18.  
    • 19.  
    • 20. Why?
      • Created to make life easier!
      • Easier for non-techies
      • Easy to improve
      • Share OPAC-based knowledge around – let’s not repeat ourselves!
    • 21. Key things
      • Based on Javascript
      • Uses the jQuery framework
      • Really easy to add to a page
    • 22. Aside - The Web Stack
      • HTML – For content
      • CSS – For presentation
      • Javascript – For behaviour
    • 23. How it all fits together
    • 24. How it all fits together
    • 25. Really easy to add to a page: <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    • 26. Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.findMeta(&quot;author&quot;,&quot;.item .summary .author .author&quot;); }
    • 27. Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.findMeta(&quot;author&quot;,&quot;.item .summary .author .author&quot;); }
    • 28. Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.findMeta(&quot;author&quot;,&quot;.item .summary .author .author&quot;); }
    • 29. Getting Juice
      • http://juice-project.org/GetJuice
      • Get the full download
      More advanced – checkout SVN at http://juice-project.googlecode.com/svn/trunk/
    • 30. Files in the Download
    • 31. Juicing a site
    • 32. Vufind example
      • Warning – use a test instance
      • not your live server!
    • 33.  
    • 34. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/ default /
    • 35. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/default/
      • Add scripts in the layout.tpl template
    • 36. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/default/
      • Add scripts in the layout.tpl template
      <script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/default/juice/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/default/juice/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=“{$url}/interface/themes/default/juice/extend.js&quot;></script>
    • 37. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/default/
      • Add scripts in the layout.tpl template
      <script type=&quot;text/javascript&quot; src=&quot; {$url} / interface/themes/default/juice/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot; {$url} /interface/themes/default/juice/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=“ {$url} /interface/themes/default/juice/extend.js&quot;></script>
    • 38. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/default/
      • Add scripts in the layout.tpl template
      <script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/ default / juice/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/ default /juice/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=“{$url}/interface/themes/ default / juice/extend.js&quot;></script>
    • 39. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/default/
      • Add scripts in the layout.tpl template
      • Add .htaccess permissions
    • 40. Vufind example
      • Add .htaccess permissions in juice folder at a file called .htaccess with the content:
      <IfModule mod_rewrite.c> RewriteEngine Off </IfModule>
    • 41. Vufind example
      • Copy juice folder into vufind/vufind/web/interface/themes/default/
      • Add script in the layout.tpl template
      • Add .htaccess permissions
      • Write extend.js
    • 42. extend.js
    • 43. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 44. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); } );   function runExtensions(){ new extendedbyJuice(juice); }
    • 45. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 46. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 47. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 48.  
    • 49. Prism 3 Example
    • 50. Prism 3 Example
      • Warning!
      • Use your sandbox and backup your themes!
    • 51.  
    • 52. Prism 3 Example
      • Download your theme via admin.talis.com
    • 53.  
    • 54. Prism 3 Example
      • Download your theme via admin.talis.com
      • Add juice to downloaded copy
    • 55. Adding the files
        • Extract the zip file
        • Add juice files in the a /js subfolder
        • Open footer.html
        • Add the snippet below
      <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    • 56. Adding the files
        • Extract the zip file
        • Add juice files in the a /js subfolder
        • Open footer.html
        • Add the snippet below
      <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    • 57. Adding the files
        • Extract the zip file
        • Add juice files in the a /js subfolder
        • Open footer.html
        • Add the snippet below
      <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    • 58. Adding the files
        • Extract the zip file
        • Add juice files in the a /js subfolder
        • Open footer.html
        • Add the snippet below
      <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    • 59. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 60. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); } );   function runExtensions(){ new extendedbyJuice(juice); }
    • 61. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 62. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 63. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 64. Prism 3 Example
      • Download your theme via admin.talis.com
      • Add juice to downloaded copy
      • Zip and upload new copy
    • 65. Prism 3 Example
      • Download your theme via admin.talis.com
      • Add juice to downloaded copy
      • Zip and upload new copy
      • Check at all works!
    • 66.  
    • 67. A Note on Demo Tenancies function prismTenancy(){ var prism = &quot;&quot;; var urlParts = window.location.href.split('/'); if(urlParts[2] == &quot;prism.talis.com&quot;){ prism = urlParts[3]; if (prism == 'demo') { prism += '/' + urlParts[4]; } } return prism; } jQuery(function () { juice.setDebug(true); var tenant=prismTenancy() juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;, tenant ); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    • 68. A Sample Recipe
    • 69. Google Books Preview
      • Easy addition
      • Useful feature
      • Shows external sources
    • 70. Google Books Preview
      • Have Juice working
    • 71. Google Books Preview
      • Have Juice working
      • Download extension and add to extensions folder:
        • http://juice-project.org/node/28
    • 72. Google Books Preview
      • Have Juice working
      • Download extension and add to extensions folder
      • Update extend.js
    • 73. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });
    • 74. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ switch(jQuery(&quot;body&quot;).attr(&quot;id&quot;)){ case &quot;renderitem&quot;: // add code for item page here break; } }
    • 75. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ switch(jQuery(&quot;body&quot;).attr(&quot;id&quot;)){ case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break; } }
    • 76. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    • 77. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    • 78. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    • 79. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    • 80. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ switch(jQuery(&quot;body&quot;).attr(&quot;id&quot;)){ case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break; } }
    • 81. Google Books Preview
      • Have Juice working
      • Download extension and add to extensions folder
      • Update extend.js
      • Upload extend.js
    • 82. Google Books Preview
      • Have Juice working
      • Download extension and add to extensions folder
      • Update extend.js
      • Upload extend.js
      • Check it all still works
    • 83.  
    • 84. As Easy as That!
    • 85. juice-project.org
      • Documentation – inc. Screencasts
      • Downloads
      • Mailing List
      • Extension Bazaar
    • 86. http://juice-project.org
    • 87. Common Issues
      • Conflicts with jQuery
      • Mixed content / Security alerts
      • Plugins running on pages they shouldn’t
    • 88. Questions?

    ×