Web Services & Widgets for the WebOPAC IUG 2009 Annette Bailey Virginia Tech.

Web Services & Widgets for the WebOPAC

IUG 2009Annette BaileyVirginia Tech

Motivation

• Enhancing the WebOPAC display with information from outside web services– Dynamic integration even without WebBridge

• Integrating real-time bibliographic and circulation information into web pages– Turning Millennium into a web service

2IUG 2009 - Annette Bailey

Overview

1. Google Book Classes– integrate data from Google Book Search

Dynamic Links into web pages

2. tictoclookup– enhance web pages with links to journal RSS

feeds

3. MAJAX 2– use real-time information from the library’s

catalog in web pages3IUG 2009 - Annette Bailey

Challenges

• Ease of Integration– should require little or no programming

• Customizability– should allow for flexible layouts and styling

• Setup and Hosting – should require minimum effort, exploit either free

or already available resources


What’s a web service?

Definitions: "a software system designed to support interoperable

machine-to-machine interaction over a network." [1] "a computational resource that can be accessed via

the world wide web" [2]

[1] http://www.w3.org/TR/ws-gloss/

[2] http://primekinetics.org/glossary


Web Service

Web Service

Request:http://some.domain/some/path?some=arg

Response:Data encoded in XML or JSON

JSON: JavaScript Object NotationData interchange format that uses JavaScript syntax


GOOGLE BOOK CLASSESWeb Services & Widgets

IUG 2009 - Annette Bailey 7

Google Book Search Dynamic Links 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 2008IUG 2009 - Annette Bailey 8

Google Book Search Dynamic Links API

• Keypoints: – can access it by typing a URL in the browser and see what comes

back – response uses JSON


http://books.google.com/books?bibkeys=ISBN:0451526538&jscmd=viewapi&callback=process

process({ "ISBN:0451526538":{ "bib_key": "ISBN:0451526538", "info_url": "http://books.google.com/books?id=j391D4vlFfAC\x26source=gbs_ViewAPI", "preview_url": "http://books.google.com/books?id=j391D4vlFfAC\x26printsec=frontcover \x26source=gbs_ViewAPI", "thumbnail_url": "http://bks8.books.google.com/books?id=j391D4vlFfAC\x26printsec=frontcover \x26img=1\x26zoom=5\x26sig=ACfU3U33uGv6VuVsNAOfq-40BmmP64zdXQ", "preview": "partial", "embeddable": true } });

Widgets

• Data returned by web services can not be used directly in web pages– Need JavaScript to post-process it

• Enter Widgets– A snippet of HTML/CSS that controls the post-

processing and display of data obtained from a web service

– JavaScript remains “under the hood”


Google Book Classes Widget

• A widget to access Google Book Search Dynamic Links API and integrate results into web pages.

DemoDemo


http://laurel.lib.vt.edu/record=b2595018~S1


Using Google Book Classes in bib_display.html


<script type="text/javascript“ src="http://yourserver/yourpath/gbsclasses.js"></script> <table style="display: none" class="bibDetail"> <tbody> <tr class="bibInfoEntry"> <td class="bibInfoLabel">Preview with Google</td> <td class="bibInfoData"> <span title="ISBN:millennium.record" class="gbs-link-to-preview gbs-if-partial-or-full"> <img src="http://www.google.com/intl/en/googlebooks/images/gbs_preview_button1.gif"> </span> </td> </tr> </tbody> </table>

Google Book Classes• Use <span> or <div>• Wrap span in a hyperlink

– gbs-link-to-preview– gbs-link-to-info– gbs-link-to-thumbnail

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

• Thumbnails Image– gbs-thumbnail

• Embedded viewer– gbs-embed-viewer

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

• Multiple classes can be combined


More info at:http://libx.lib.vt.edu/services/googlebooks/

Using Google Book Classes in WebBridge

• Create a new resource in WebBridge


<span style="display:none" title="OCLC:#@OCLC#" class="gbs-link-to-preview gbs-if-partial-or-full"> <img src="http://www.google.com/intl/en/googlebooks/images/gbs_preview_button1.gif"></span>

ISBN ISBN:006073132X OCLC OCLC:57207630LCCN LCCN:2004022563

GBS Identifiers

• Alternate syntax: use * as IDENTIFIER• <span title=“*” class=“GBS-CLASSES”>

ISBN:006073132X </span>

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


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

Google Book Classes Summary


Google Book Classes

Web Service Google Book Search Dynamic Link APIbooks.google.com

Hosted By Google, Inc.

Data Provenance Google

Additional Cost Free, but subject to Google Terms of Service

Same Domain Restriction No

Widgetization gbsclasses.js: class-based: gbs-

Requires JavaScript programming No

Requires Additional Server No

Suitable for inclusion on III Bibrecord Display

Yes

Suitable for WebBridge Integration Yes

TICTOCLOOKUP SERVICEWeb Services & Widgets


JISC’s Journal Table of Contents Service

• JISC released data set for Table of Contents for journals– (ISSN, Journal Title) → RSS Feed URL

• ticTOC lookup service– Based on JISC data set

• Lives in Google App Engine (“cloud”)– http://tictoclookup.appspot.com


tictoclookup Service

• Keypoints: – supports ISSN and optional title– runs on Google servers– stand-alone version available


http://tictoclookup.appspot.com/0028-0836

{"lastmod": "Wed Apr 29 05:42:36 2009", "records": [ {"title": "Nature AOP", "rssfeed": "http://www.nature.com/nature/journal/vaop/ncurrent/rss.rdf"}, {"title": "Nature", "rssfeed": "http://www.nature.com/nature/current_issue/rss"} ], "issn": "00280836"}

Tictoclookup Widget

• A widget to access the tictoclookup service and integrate those results into web pages.

DemoDemo


http://laurel.lib.vt.edu/record=b1251610~S1


Using tictoclookup in bib_display.html


<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript“src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type="text/javascript“ src="http://yourserver/yourpath/tictoc.js"></script><script type="text/javascript" src="http://libx.lib.vt.edu/services/jquery-plugins/cluetip/jquery.cluetip.js"></script>

 <table style="display: none" class="bibDetail"> <tbody> <tr class="bibInfoEntry"> <td class="bibInfoLabel">ticTOC</td> <td class="bibInfoData"> <span title="ISSN:millennium.issnandtitle" class="tictoc-link tictoc-preview"> <img src="/screens/16px-Feed-icon.svg.png"> Click to subscribe to the Table of Contents for this journal. </span> </td> </tr> </tbody> </table>

tictoclookup Classes

• Use <span>• Wrap span in link to RSS

Feed– tictoc-link

• Show tooltip with Table of Contents– tictoc-preview– Uses Google Feeds API– Cluetip JQuery plugin

• Implemented using JQuery


• Append journal title to end of span– tictoc-append-title


More info at:http://libx.lib.vt.edu/services/tictoclookup/

Using tictoclookup Classes in WebBridge

• Create a new resource in WebBridge


<span style="display:none“ class="tictoc-link tictoc-preview tictoc-append-title" title="ISSN:#@ISSN#:#@TITLE#"> <img align="right" src="/screens/16px-Feed-icon.svg.png" /> Subscribe to Table of Contents for </span>

Summary


ticTOC

Web Service ticTOC Cloud Applicationtictoclookup.appspot.com

Hosted By Google, Inc. via Google App Engine

Data Provenance JISC (www.tictocs.ac.uk)

Additional Cost Generous free quota, pay per use beyond that

Same Domain Restriction No

Widgetization tictoc.js:class-based: tictoc-

Requires JavaScript programming No

Requires Additional Server No (if using GAE), else need Apache+mod_wsgi

Suitable for inclusion on III Bibrecord Display Yes

Suitable for WebBridge Integration Yes

MAJAX 2Web Services & Widgets


MAJAX 2 Web Service

Millennium Server

Request:http://libx.lib.vt.edu/services/majax2/isbn/1412936381

Response:MARC record in JSON


MAJAX Web

ServiceResponse:MARC record in HTML

Request:http://addison.vt.edu/search/i1412936381/i1412936381/1,1,1,E/marc&FF=i1412936381

MAJAX 2 Web Service

• MAJAX 2 is a proxy that connects to the Millennium server– retrieves MARC and up-to-the-minute circulation

information and converts it to JSON– written in Python– requires Apache/mod_wsgi– Source code available at:

http://code.google.com/p/majax2/


MAJAX 2 Service


http://libx.lib.vt.edu/services/majax2/isbn/1412936381

{"searchterm": "i1412936381", "recordurl": "http://addison.vt.edu/search/i1412936381/i1412936381/1,1,1,E/marc&FF=i1412936381", "results": [ {"holdings": ["DUE 05-22-09"], "locations": ["Newman 2nd Floor"], "marc": … "650": [{"i1": " ", "i2": "0", "sf": {"a": ["African American families."]}}, {"i1": " ", "i2": "0“, "sf": {"a": ["African Americans"], "x": ["Social conditions."]}}, {"i1": " ", "i2": "0", "sf": {"a“: ["Family"], "z": ["United States."]}}] … "245": [{"i1": "0", "i2": "0", "sf": {"a": ["Black families /"], "c": ["Harriette Pipes McAdoo [editor].“]}}]}

MAJAX 2 Widget

• A widget to access the MAJAX 2 web service and integrate results into web pages.

DemoDemo


http://www.lib.vt.edu/services/newbooks/new-materials.php?subject=lnl_englit


Using MAJAX 2


<script type="text/javascript"> /* adjust these variables */ var majax2ServiceUrl = "http://libx.lib.vt.edu/services/majax2/"; var majax2OpacBase = "http://yourcatalog/search"; </script> <script type="text/javascript" src="majax2.js"></script>

<table width="340"> <tr> <td><span class="majax-syndetics-vtech" title="i1843341662"> </span> </td> <td><span class="majax-harvard-reference" title="i1843341662"> </span> <br /> ISBN: <span class="majax-marc-020" title="i1843341662"> </span> <br /> <span class="majax-linktocatalog majax-showholdings" title="i1843341662"> </span> </td> </tr></table>

MAJAX 2 Classes• Use <span>• Holdings-related

– majax-showholdings– majax-showholdings-brief– majax-showholdings-div– majax-ebook – majax-showholdingslocations

• Bibliographic Information– majax-marc-???-?– majax-harvard-reference– majax-endnote– majax-endnote-switch– majax-endnote-import

• Miscellaneous– majax-linktocatalog– majax-space– majax-newline– majax-reportfailure– majax-syndetics-yourclientid



More info at:http://libx.lib.vt.edu/services/majax2/

MAJAX 1 vs. MAJAX 2Majax 1 Majax 2

Web Service Screen Scraping III Record Display JSON Proxy for III Record Display

Hosted By Existing Millennium Installation /screens

WSGI/Python Script on libx.lib.vt.edu

Data Provenance Your OPAC

Additional Cost N/A Can use libx.lib.vt.edu for testing, must run WSGI-enabled web server in production

Same Domain Restriction Yes No

Widgetization majax.js:class-based: majax- classes

Requires JavaScript programming

No No

Requires Additional Server No Yes (Apache+mod_wsgi)

Suitable for inclusion on III Bibrecord Display

N/A N/A

Suitable for WebBridge Integration

Yes Yes


Conclusion

• Presented 3 Web Services and 3 Widgets– Easy to integrate

• Include <script> tags • Place <span> tags where you want the data to display

– Customizable• Control over where and how data displays through

classes

– Require minimal resources to setup and host• Can use /screens directory, Google or own server


Acknowledgments

• Assistant Professor, Dr. Godmar Back• ticTOC is a service from JISC• MAJAX user community for inspiration!



Majax 1 Majax 2 Google Book Classes ticTOC

Web Service Screen Scraping III Record Display

JSON Proxy for III Record Display

Google Book Search Dynamic Link APIbooks.google.com

ticTOC Cloud Applicationtictoclookup.appspot.com

Hosted By Existing Millennium Installation /screens

WSGI/Python Script on libx.lib.vt.edu

Google, Inc. Google, Inc. via Google App Engine

Data Provenance Your OPAC Your OPAC Google JISC (www.tictocs.ac.uk)

Additional Cost N/A Can use libx.lib.vt.edu for testing, must run WSGI-enabled web server in production

Free, but subject to Google Terms of Service

Generous free quota, pay per use beyond that

Same DomainRestriction

Yes No No No

Widgetization majax.js: class-based: majax- classes gbsclasses.js:class-based: gbs-

tictoc.js:class-based: tictoc-

Requires JavaScript programming

No No No No

Requires Additional Server

No Yes (Apache+mod_wsgi)

No No (if using GAE), else need Apache+mod_wsgi

III Bibrecord Display N/A N/A Yes Yes

WebBridge Integration

Yes Yes Yes Yes

Web Services & Widgets for the WebOPAC IUG 2009 Annette Bailey Virginia Tech.

Documents

Transcript of Web Services & Widgets for the WebOPAC IUG 2009 Annette Bailey Virginia Tech.