Transcript Web Services & HTML Widgets for WebOPAC

Web Services & Widgets for the
WebOPAC
IUG 2009
Annette Bailey
Virginia 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
IUG 2009 - Annette Bailey
2
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 pages
IUG 2009 - Annette Bailey
3
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
IUG 2009 - Annette Bailey
4
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
IUG 2009 - Annette Bailey
5
Web Service
Request:
http://some.domain/some/path?some=arg
Web Service
Response:
Data encoded in XML or JSON
JSON: JavaScript Object Notation
Data interchange format that uses JavaScript syntax
IUG 2009 - Annette Bailey
6
Web Services & Widgets
GOOGLE BOOK CLASSES
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 2008
IUG 2009 - Annette Bailey
8
Google Book Search Dynamic Links API
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
} });
• Keypoints:
– can access it by typing a URL in the browser and see what
comes back
– response uses JSON
IUG 2009 - Annette Bailey
9
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 postprocessing and display of data obtained from a
web service
– JavaScript remains “under the hood”
IUG 2009 - Annette Bailey
10
Google Book Classes Widget
• A widget to access Google Book Search
Dynamic Links API and integrate results into
web pages.
Demo
IUG 2009 - Annette Bailey
11
http://laurel.lib.vt.edu/record=b2595018~S1
IUG 2009 - Annette Bailey
12
Using Google Book Classes in
bib_display.html
<script type="text/javascript“ src="http://yourserver/yourpath/gbsclasses.js">
</script>
<!--{recordinfo:duswxzbrnjig}-->
<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>
IUG 2009 - Annette Bailey
13
Google Book Classes
• Use <span> or <div>
• Wrap span in a hyperlink
– gbs-link-to-preview
– gbs-link-to-info
– gbs-link-to-thumbnail
gbs-if-noview
gbs-if-partial-or-full
gbs-if-partial
gbs-if-full
– gbs-thumbnail
• Embedded viewer
– gbs-embed-viewer
• Conditionals: only keep
span/div if …
–
–
–
–
• Thumbnails Image
• 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/
IUG 2009 - Annette Bailey
14
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
OCLC
LCCN
ISBN:006073132X
OCLC:57207630
LCCN:2004022563
IUG 2009 - Annette Bailey
15
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%">
<!--{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>
IUG 2009 - Annette Bailey
16
Google Book Classes Summary
Google Book Classes
Web Service
Google Book Search Dynamic Link API
books.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
IUG 2009 - Annette Bailey
17
Web Services & Widgets
TICTOCLOOKUP SERVICE
IUG 2009 - Annette Bailey
18
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
IUG 2009 - Annette Bailey
19
tictoclookup Service
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"}
• Keypoints:
– supports ISSN and optional title
– runs on Google servers
– stand-alone version available
IUG 2009 - Annette Bailey
20
Tictoclookup Widget
• A widget to access the tictoclookup service
and integrate those results into web pages.
Demo
IUG 2009 - Annette Bailey
21
http://laurel.lib.vt.edu/record=b1251610~S1
IUG 2009 - Annette Bailey
22
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>
<!--{recordinfo:duswxzbrnjig}-->
<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>
IUG 2009 - Annette Bailey
23
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
• Multiple classes can be
combined
• Append journal title to
end of span
– tictoc-append-title
More info at:
http://libx.lib.vt.edu/services/tictoclookup/
IUG 2009 - Annette Bailey
24
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>
IUG 2009 - Annette Bailey
25
Summary
ticTOC
Web Service
ticTOC Cloud Application
tictoclookup.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
IUG 2009 - Annette Bailey
26
Web Services & Widgets
MAJAX 2
IUG 2009 - Annette Bailey
27
MAJAX 2 Web Service
Request:
http://addison.vt.edu/search/i1412936381
/i1412936381/1,1,1,E/marc&FF=i1412936381
Request:
http://libx.lib.vt.edu/services/majax2
/isbn/1412936381
MAJAX
Web
Service
Response:
MARC record in JSON
Millennium
Server
Response:
MARC record in HTML
IUG 2009 - Annette Bailey
28
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/
IUG 2009 - Annette Bailey
29
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].“]}}]
}
IUG 2009 - Annette Bailey
30
MAJAX 2 Widget
• A widget to access the MAJAX 2 web service
and integrate results into web pages.
Demo
IUG 2009 - Annette Bailey
31
http://www.lib.vt.edu/services/newbooks/newmaterials.php?subject=lnl_englit
IUG 2009 - Annette Bailey
32
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>
IUG 2009 - Annette Bailey
</table>
33
MAJAX 2 Classes
• Use <span>
• Holdings-related
–
–
–
–
–
• Miscellaneous
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
–
–
–
–
–
majax-linktocatalog
majax-space
majax-newline
majax-reportfailure
majax-syndetics-yourclientid
• Multiple classes can be
combined
More info at:
http://libx.lib.vt.edu/services/majax2/
IUG 2009 - Annette Bailey
34
MAJAX 1 vs. MAJAX 2
Majax 1
Majax 2
Web Service
Screen Scraping III Record Display JSON Proxy for III Record Display
Hosted By
Existing Millennium Installation
/screens
Data Provenance
WSGI/Python Script on
libx.lib.vt.edu
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
IUG 2009 - Annette Bailey
35
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
IUG 2009 - Annette Bailey
36
Acknowledgments
• Assistant Professor, Dr. Godmar Back
• ticTOC is a service from JISC
• MAJAX user community for inspiration!
IUG 2009 - Annette Bailey
37
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 API
books.google.com
ticTOC Cloud
Application
tictoclookup.appspot.c
om
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 Domain
Restriction
Yes
No
No
No
gbsclasses.js:class-based:
gbs-
tictoc.js:class-based:
tictoc-
Widgetization
majax.js: class-based: majax- classes
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 IUG 2009 - Annette Bailey
Yes
Yes
38