developer meets developer march 2011 chicago, illinois, usa mobile catalog interfaces at university...
TRANSCRIPT
Developer Meets Developer
March 2011Chicago, Illinois, USA
Mobile Catalog Interfaces at University of Rochester
Denise DunhamUniversity of Rochester
Voyager @ University of Rochester
One database serving multiple campuses2.7 Million bibs
Multiple interfaces to Voyager Catalog3 Classic & 3 Tomcat skins & 2 Tomcat mobile
skins
Multiple interfaces reduce the need for compromise
Increases expectations for customizationBranding and Integration with website is high
priority
2
3
4
http://www.library.rochester.edu/m
5
6
Voyager 7 Upgrade
7
Goals for Mobile Catalog
Assumption: users would use the mobile catalog to locate a known item and retrieve it
Match the mobile website designKeep it simpleAdd features later as needed – usability testing
8
Make a new skin called mobile/m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/
cp -r en_US mobile
9
Hide the css Directory/m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/mobile :
mobile/ => mv css css.bak
mobile/ => mkdir css
10
Indispensible tools
Firebug web development tools for Firefox browserhttp://getfirebug.com/
Unix find command mobile/ => find . -exec grep "headerTabs" '{}' \; -print
<div id="headerTabs" title="{$headerText/headerTabs}"><h2 class="nav"><xsl:value-of
./xsl/pageFacets/header.xsl
<!-- <headerTabs>Main Navigation Bar</headerTabs> -->
./xsl/userTextConfigs/pageProperties.xml
11
12
header.xsl
searchFacets.xsl plus
footer.xsl
13
searchFacets.xsl
<div id="searchForm"> <form action="search" method="GET" accept-charset="UTF-8" id="searchBasic"> …
14
header
15
<div id="breadcrumbs"><a class="breadcrumbs" href="http://library.rochester.edu/m">Home</a> |<a class="breadcrumbs" href="searchBasic">Search</a><span id="results"> > Results</span><span id="holding"> > Holding Info</span><span id="account"> | My Account</span><span id="loginh"> > Login</span><xsl:call-template name="loginLogout"/><!-- </div> --><span id="myaccount"> | <a class="breadcrumbs" href="myAccount">My Account</a></span></div>
displayCommon.cssframeWork.cssloginPage.cssmyAccount.csspageProperties.cssprintBriefRecord.cssresultsFacets.cssresultsTitles.css
Change library name
/xsl/pageFacets/header.xsl
Change logo/images/logo.jpg
Change background-color/css/frameWork.css
16
17
Navigating between skins
18
Include skin name if you use persistent links or link to different skin
http://catalog.lib.rochester.edu/vwebv/searchAdvanced
webvoyage.properties :
option.exitURL=/index.html
rcl skin to http://catalog.lib.rochester.edu/searchBasic.htm mobile to http://library.rochester.edu/m
19
Timeout destination
Track searching in each skin
20
webvoyage.propertiessearch.status.id=VWEBV mobile
STAT_STRING in OPAC_SEARCH_LOG
Usability Testing led to version 2
Email recordsView due dates (My Account)Renew charged items (My
Account)Search tips (Omit initial
articles)Full record view (Print)
Version 3 will include request forms
21
Full Record
Bypass print dialog to print results
$(document).ready(function() { var x = $('a[href*="printDialog"]').attr("href"); var y = x.replace(/printDialog/i, "printResults"); $('a[href*="printDialog"]').attr("href", y);});
Courtesy of Southern Methodist University
22
Text call number to cell phone
23
<div class="fieldLabel"> <span class="fieldLabelSpan"> <div id="labelTitle:">Title: </div> </span> </div> <div class="fieldData" id="Title:" name="Title:"> <span class="subfieldData">What to eat / Marion Nestle.<br> </span> </div>
display.xs
24
<xsl:when test="string-length($displayData)"> <div class="fieldLabel"> <span class="fieldLabelSpan"> <xsl:choose> <xsl:when test="string-length(@label)"> <div>
<xsl:attribute name='id'>label<xsl:value-of select="@label"/></xsl:attribute> <xsl:value-of select="@label"/>
</div> </xsl:when> <xsl:otherwise>   </xsl:otherwise> </xsl:choose> </span> </div> <div class="fieldData">
<xsl:attribute name="id"> <xsl:value-of select="@label"/> </xsl:attribute> <xsl:attribute name="name"> <xsl:value-of select="@label"/> </xsl:attribute> <span class="subfieldData"><xsl:copy-of select="$displayData"/></span> </div> </xsl:when>
textme.js snippet
function textme() {
//Get the title text
var title = $("[name='Title\\:']").text();
//Get all the Call Number labels on the page, for each one do this
$("[name='Call Number:']").each(function() {
//Get the location text
var loc = $("[name='Location:']").text();
…
25