Using MAJAX and Google Book Classes in

Mashups

Annette BaileyUniversity Libraries Virginia Tech

April 29, 2008

Userreviews

Facetedbrowsing

RSS feeds

Mashups

Wikis

Blogs

Tagging

LibX

Library 2.0

Mashups

• Are hybrid web applications that combine information drawn from various web sources

• Simple example:• A library web page that

includes a news feed

Mashup Example

Library Homepage

LatestLibraryNewsItems

Mashup Sources

• RSS Feeds• Web services, e.g. Google API,

Amazon API• StrikeIron is a market place that

matches providers and users

• How can the III Millennium system become an information source for mashups?• That’s where MAJAX comes in

MAJAX Overview

• Millennium AJAX is software that allows mixing catalog data into web pages• Freely available from VT• Simple to install & use• No III support required• No plug-in for users to install

New Books List

• Library publishes a list of newly acquired books every month

• We would like to include up-to-the-minute circulation information in this list

New Books List Demo

New Books List

MAJAX

• Millennium AJAX• Asynchronous

• Query the catalog without the user having to wait

• JavaScript • Run in client’s browser to construct page

content • And • XML

• (Really HTML) – comes from a web service: here, Millennium’s MARC display

Screen Scraping MARC

Course Page Demo

A professor wants to offer a list of books on his course page, along with full bibliographic and up-to-the-minute holdings information

about each book

Course Page Demo

• Screen Shot

The Pyramid of Web Skills

PhP,Ruby, …

JavaScript

HTMLLibrarians

Programmers

Installing & Using MAJAX

• To install MAJAX at your institution, upload two files to your catalog’s /screens directory:• majax.js• majax.html

• To use MAJAX in web pages• include <script> tag once• include <span> tags wherever library

catalog information should be inserted

Course Page HTML

<script type="text/javascript" src="http://yourlibrarycatalog/screens/majax.js"></script>

<script type="text/javascript" src="http://yourlibrarycatalog/screens/majax.js"></script>

<span title="i0596002556" class="majax-harvard-reference majax-newline majax-ebook"></span><span title="i0596002556" class="majax-showholdings majax-linktocatalog"></span>

<span title="i0596002556" class="majax-harvard-reference majax-newline majax-ebook"></span><span title="i0596002556" class="majax-showholdings majax-linktocatalog"></span>

MAJAX Identifiers• <span title=“IDENTIFIER”

class=“MAJAX-CLASSES”></span>

• IDENTIFIER can refer to ISBN, Bibrecord #, OCLC #, or Book Title

ISBN ‘i’ i006073132X

Bibrecord ‘.b’ .b2275560

OCLC # ‘o’ o57207630

Title ‘t’ tfreakonomics

MAJAX Alternative Syntax

• <span title=“T*” class=“MAJAX-CLASSES”>IDENTIFIER

</span>• T can be ‘i’, ‘o’, ‘t’, or ‘.b’• IDENTIFIER as defined on previous slide

without leading character

<span title=“i*" class="majax-showholdings">0596002556</span>

<span title=“i*" class="majax-showholdings">0596002556</span>

MAJAXClasses

Holdings Relatedmajax-showholdingsmajax-showholdings-briefmajax-showholdings-divmajax-ebookmajax-showholdings locations

Bibliographic Informationmajax-marc-???majax-marc-???-?majax-harvard-referencemajax-endnotemajax-endnote-switchmajax-endnote-import

Miscellaneousmajax-syndetics-*majax-linktocatalogmajax-reportfailuremajax-newlinemajax-space

MAJAX Examples (1)

MAJAX class MAJAX outputmajax-harvard-reference Levitt, Steven D., Dubner, Stephen J.,

2005, Freakonomics : a rogue economist explores the hidden side of everything / 1st ed., New York, William Morrow, xii, 242 p. ;

majax-showholdings-div Copy 1: availableCopy 2: due 05-10-07Copy 3: due 07-22-07

majax-marc-050 HB74.P8 L479 2005

MAJAX Examples (2)

MAJAX class MAJAX outputmajax-ebook [Electronic Book]

majax-marc-050 majax-linktocatalog

HB74.P8 L479 2005

majax-syndetics-vtech

• Create a new file: majaxcustomize.js• Include the file using a <script> tag on the

page where you want to use MAJAX

MAJAX Customization

• Define your customized variables

<script type="text/javascript" src="http://yourlibrarycatalog/screens/majaxcustomize.js"></script>

<script type="text/javascript" src="http://yourlibrarycatalog/screens/majaxcustomize.js"></script>

var singleCopyStatus = “Un exemplaire est %s”; var singleCopyStatus = “Un exemplaire est %s”;

Load Considerations• MAJAX uses caching and sends

exactly 1 request per unique item per page to the server• Regardless of the number of span tags

referencing an item• MAJAX imposes additional load on

your III system• Currently self-limiting to 100 requests per

second per page, which can be changed.• To turn MAJAX capabilities off, simply

remove majax.html & majax.js from the /screens directory.

Limitations

• MAJAX works only on web pages from within the same domain as your Millennium system

• If Millennium runs on addison.vt.edu, MAJAX can be used on all pages in *.vt.edu• www.lib.vt.edu Ok • courses.cs.vt.edu Ok • livejournal.com Not Ok (needs a proxy)

• MAJAX works in Internet Explorer 6.x and up, Firefox, and Safari browsers• Will fail silently on other browsers

MAJAX Summary

• MAJAX provides the ability to include live catalog information in any webpage on your domain• Without special server support, access or

programming• Without requiring end users to install any plug-

ins• It is easy to use, requiring only HTML skills• Free!• Has been adopted by a number of III

libraries• Users have contributed suggestions, bug fixes,

and help test it

Part 2

Google Book Classes

Mashing a Service into the III Catalog Display

• MAJAX mashes catalog data into other web pages

• Now we’ll mash data from another service into the library catalog

Google Book Search Book Viewability API

• Programmatic client-side access to small set of Google Book Search information• Provides thumbnails of book covers• Provides link to Google’s book

information, preview, or full text pages• Provides information on whether Google

has full text, partial preview, or no preview

• Indexed by ISBN#, OCLC#, LCCN#• Released March 2008

Goals

• We want to incorporate information from Google Book Search into our catalog• E.g., allow users to see a preview of

a book if one is available from Google

• Or use Google’s book covers• Without JavaScript coding• (even though Google’s API requires

JavaScript coding as it is)

Google Book Classes

Demo

Google Books Demo

Buttons appear if Google Book Search has a partial preview of book

Google Books Demo (2)

Buttons appears if Google has a partial preview of book

Google Book Classes

• A JavaScript library and set of classes that simplify using the Google Book Search Book Viewability API• Can be used on any web page,

including inside the Millennium system

• Usage is much like MAJAX• Available from libx.org/gbs

Using Google Book Classes(on general web server)• Upload a copy of gbsclasses.js to your server• Include gbsclasses.js in a <script> tag in the

target page

• Include the class(es) in <span> tags

<script type="text/javascript" src="http://yourserver/yourpath/gbsclasses.js"></script>

<script type="text/javascript" src="http://yourserver/yourpath/gbsclasses.js"></script>

<span title=“ISBN:0596002556” class=“gbs-thumbnail”></span>

<span title=“ISBN:0596002556” class=“gbs-thumbnail”></span>

GBS Identifiers• <span title=“IDENTIFIER”

class=“GBS-CLASSES”></span>

• IDENTIFIER can refer to ISBN #, OCLC #, or LCCN#

• Alternate syntax: use * as IDENTIFIER

ISBN ISBN:006073132X

OCLC OCLC:57207630

LCCN LCCN:2004022563

Using Google Book Classes in Millennium1. Include gbsclasses.js in HTML

template file via <script> tag• E.g. toplogo.html

2. Use III fieldspec token to insert HTML that includes the Google Book Classes into the briefcit.html file

briefcit.html

briefCitPub <div>

A Google Preview Button

<div class="briefCitPub"><table><tr><td style="text-align:left" width="65%"><!--{fieldspec:Vbp260}--></td><td width="35%"><span style="display:none" title="*" class="gbs-link-to-info gbs-if-partial gbs-remove-on-failure"><!--{fieldspec:Vbi020}--> <img src="http://code.google.com/apis/books/images/api-example2.png"></span></td></tr></table></div>

<div class="briefCitPub"><table><tr><td style="text-align:left" width="65%"><!--{fieldspec:Vbp260}--></td><td width="35%"><span style="display:none" title="*" class="gbs-link-to-info gbs-if-partial gbs-remove-on-failure"><!--{fieldspec:Vbi020}--> <img src="http://code.google.com/apis/books/images/api-example2.png"></span></td></tr></table></div>

Inside “Publisher” box

Insert 1x2 HTML table

260 Field goes in left column

hide span initially Link to info page – but only ifGoogle has a partial view

Remove span if Google does not index this ISBN

III will put first 020 Field here

briefcit.html

Currently Supported Google Book Classes• Thumbnails Image

• gbs-thumbnail• Wrap span in a hyperlink

• gbs-link-to-preview• gbs-link-to-info• gbs-link-to-thumbnail

• Conditionals: only keep span if …• gbs-if-noview• gbs-if-partial-or-full• gbs-if-partial• gbs-if-full

• Remove if Google does not index book• gbs-remove-on-failure

• Multiple classes can be combined

Google Book Classes: Summary

• Google Book Classes allows the use of the Google Book Viewability API in mashups• Without requiring any

JavaScript or AJAX knowledge• Allows integration in places

(such as III briefcit.html) where control of a page is limited

Acknowledgements

• Dr. Godmar Back• Assistant Professor

Computer Science

Questions?

Thank you!

http://libx.org/majax

http://libx.org/gbs

Contact us:

libx.org@gmail.com

WebBridge Example (1)

majaxresource 1

majaxresource 2

majaxresource 3

WebBridge Example (2)

majaxresource 1

majaxresource 2

majaxresource 3

Setting Up MAJAX for WebBridge • Add <script> tag to resserv_panel.html• WebBridge Management interface• Create 1 or more resources• Associate hasISBN or hasTitle data tests• Embed <span> tags in Link Display

field