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