Recommended
More Related Content
What's hot
What's hot (20)
Similar to An introduction to juice
Similar to An introduction to juice (20)
Recently uploaded
Recently uploaded (20)
An introduction to juice
- 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 ...
- 7. Lots of byte-sized bits of extra code to add extra functionality.
- 8. Examples
- 11. but ...
- 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
- 15. Juice
- 17. Examples
- 23. How it all fits together
- 24. How it all fits together
- 25. Really easy to add to a page: <script type="text/javascript" src="assets/-/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="assets/-/js/juice.js"></script> <script type="text/javascript" src="assets/-/js/extend.js"></script>
- 26. Metadefs function myopac_metadef(){ juice.findMeta( "isbn",".item #details .table .ISBN" ); juice.findMeta("author",".item .summary .author .author"); }
- 27. Metadefs function myopac_metadef(){ juice.findMeta( "isbn",".item #details .table .ISBN" ); juice.findMeta("author",".item .summary .author .author"); }
- 28. Metadefs function myopac_metadef(){ juice.findMeta( "isbn",".item #details .table .ISBN" ); juice.findMeta("author",".item .summary .author .author"); }
- 30. Files in the Download
- 31. Juicing a site
- 42. extend.js
- 43. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 44. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); } ); function runExtensions(){ new extendedbyJuice(juice); }
- 45. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 46. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 47. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 49. Prism 3 Example
- 59. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 60. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); } ); function runExtensions(){ new extendedbyJuice(juice); }
- 61. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 62. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 63. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 67. A Note on Demo Tenancies function prismTenancy(){ var prism = ""; var urlParts = window.location.href.split('/'); if(urlParts[2] == "prism.talis.com"){ prism = urlParts[3]; if (prism == 'demo') { prism += '/' + urlParts[4]; } } return prism; } jQuery(function () { juice.setDebug(true); var tenant=prismTenancy() juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js", tenant ); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }
- 68. A Sample Recipe
- 73. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); });
- 74. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ switch(jQuery("body").attr("id")){ case "renderitem": // add code for item page here break; } }
- 75. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ switch(jQuery("body").attr("id")){ case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break; } }
- 76. extend.js case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break;
- 77. extend.js case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break;
- 78. extend.js case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break;
- 79. extend.js case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break;
- 80. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ switch(jQuery("body").attr("id")){ case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break; } }
- 84. As Easy as That!
- 88. Questions?
Editor's Notes
- 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