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>                                &#160;                            </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