the frameless opac
DESCRIPTION
Presented at SUNYLA 2004 at SUNY Cortland.TRANSCRIPT
The Frameless OPAC:
How we did it!
Bill Drew SUNY Morrisville
Karen Coombs SUNY Cortland
Michelle Eichelberger Finger Lakes CC
Marianne Hebert SUNY Potsdam
Natalie Sturr SUNY Oswego
Bill DrewSystems LibrarianSUNY Morrisville
Morrisville State College LibraryGoals
• Integrate the Frameless OPAC into our website.
• Remove functions not used yet.
• Provide access to our website from it.
• Remove tables used for display only.
Morrisville State College Library
Morrisville Home PageUse elements from library website when possible in Web OPAC
Banner
“Go To” Menu
“Talk to a Librarian”
Search Form for Web OPAC already pulls ALEPH into Library Website.
Frameless Out of the Box
Morrisville State College Library
Current Frameless - Initial ScreenAdded Image and Pull down
from webpage
Simplified Tool Bar & added “Talk to a Librarian”
Changed Buttons
Modified pulldowns
Added dynamic help text
Search Hints changed to include file
Morrisville State College Library
Initial Screen – Basic Search<!-- filename: find-b-mor01 wed 12/11003 --><html><head><title>Morrisville State College:&f-base - Basic Search</title><include>meta-tags<link rel="stylesheet" href="&server_httpd/aleph.css" TYPE"text/css"></head>
<body topmargin="0" marginheight="0">
<include>head-1<div style="width:750px" class="search"><include>find-include-buttons<table><tr><td><b><nobr>Basic Search</nobr>: (&f-base)</b></span> </td><td><form method=get name="form1" action="&server_f"><input type="hidden" name="func" value="find-b"><include>base-local</td></tr></table><table><tr><td valign="top"> <p> <b> Type keyword(s) or phrase</b><br> <input size=60 name="request" value="$0100"> <input type="image" alt=" Search " src="&icon_path_&lng/icon/f-search.gif" border=0> <td style="font: 12px Tahoma; color: blue;" valign="bottom" align="right"> <b> Words As Phrase?</b> <input Type="radio" name="adjacent" $$1000-C"N" value="N" checked> No <input type="radio" name="adjacent" $$1000-C"Y" value="Y"> Yes</td></tr></table>
<br><table width="100%"><tr><td><b>Search in</b> <span ></td><td><include>find-code-include\FXX\0200\
</span> </td><td><include>helpscript-mor01</td>
</tr></table></p></form></td></tr></table></div><br><br><include>hints-basic<include>copyrights</div></body></html>
Morrisville State College Library
Brief ResultsPart of short-2-head which calls other files via includes.
Built from various files (short-a-head-, short-a-body, etc.) based on tab settings and more.
Morrisville State College Library
Brief Results<!-- filename: short-2-head --><html><head><title>Morrisville State College:&f-base - Search Results</title>
<include>meta-tags<include>submit-form-include<include>include-window<link rel="stylesheet" href="&server_httpd/aleph.css" TYPE="text/css"></head><body topmargin="0" marginheight="0">
<include>head-1<form method=get name=form1 action="&server_f" > <input type="hidden" name="func" value="short-action"> <input type="hidden" name="submit_action" value="">
<include>short-include-buttons
<include>short-include-2
<!-- filename: short-a-head --><table cellspacing=2 bordercolor="black" border="1"> <tr class=tr1> <th class=text3>$0100</th> <th class=text3>$0200</th> <th class=text3>$0300</th> <th class=text3>$0400</th> <th class=text3>$0500</th> <th class=text3>$0600</th> <th class=text3>$0700</th>
<!-- <th class=text3>$0800</th> <th class=text3>$0900</th> --> </tr>
<!-- filename: short-a-body--> <tr valign=baseline> <td class=td1 id=centered width="1%">$0100</td> <td class=td1 id=centered width="1%">$0200</td> <td class=td1 $2300 width="15%"> $0300 </td> <td class=td1 $2400 width="30%"> <script type="text/javascript">var recordLinkRaw = '$0100';var recordLink = recordLinkRaw.substring(0, recordLinkRaw.indexOf('>'));document.write(recordLink);document.write('>');</script>
$0400 </td> <td class=td1 $2500 width="5%" align="center">$0500 </td> <td class=td1 $2600 width="15%"> $0600 </td> <td class=td1 $2700 width="10%" align="center">0700</td>
Morrisville State College Library
Full Record
Created by full-set-head
uses full-999-body; full-xxx-body
Uses full-set-tail; tail-bar-include
Morrisville State College Library
Holdings<!-- item-global-head-1-mor01 wed 12/10/03top of item display --><html><head><title>Morrisville State College:&f-base - Holdings</title><link rel="stylesheet" href="&server_httpd/aleph.css" TYPE="text/css"><include>meta-tags<include>include-window</head>
<body topmargin="0" marginheight="0"><include>head-1<table width=100%> <tr> <td class=title> &f-base - Holdings</td> <td align=right><a href="&server_f?func=short" title="View list of records"><img alt="Results List" src="&icon_path_&lng/icon/resultslist.gif" border="0"></a>
$0200 <img src="&icon_path_&lng/icon/f-back.gif" border=0 alt="back to Full View of Record"></a> </td> </tr></table><table style="background-color:#E2E9F0" width=100%>
Built from item-global files
Built from full-xxx-body files
Morrisville State College Library
Lessons Learned
• Some tables are necessary.
• Use CSS where possible.
• Get rid of links to parts of system not used in your library.
• KISS! (Keep it simple, stupid!)
• Borrow code from others and share your code with others.
• Look at other ALEPH frameless opacs.
Morrisville State College Library
The Future?
Morrisville State College Library
Karen Coombs
SUNY Cortland
SUNY Cortland Goals
• Make more usable and user-friendly
• Simplify and streamline interface
• Make more logical
• Remove tables used for layout only and images that could be text
• Use CSS more effectively
Basic Search Screen
• Create a initial screen that fit “above the fold” in 800x600 and contained all the desired indexes
• Use more user intuitive labels for indexes
• Provide Context Specific Help
Basic Search Screen
Single <select> box which containsboth word and browse indexes
Text which changes when a particularoption in the <select> box is clicked
Header alterations
Simple HTML
Complex CSSdiv#logo {
margin-top:.5em;
background-color:#cc0000;
width:100%;
height:75px;
background-image:url(http://library.cortland.edu/libpic.jpg);
background-repeat:no-repeat;
font-family: Garamond, Times-New Roman, sans-serif;
color:#CCCCCC;
}
<div id="logo">
<h1>
<a href="http://www.cortland.edu" title="SUNY Cortland Homepage">Cortland</a>
<br>
<a href="http://library.cortland.edu" title="Memorial Library" style="margin-left:20px;">Memorial Library</a>
</h1>
<h2>
Searching:
<span style="color:#000000;">
&f-base
</span>
</h2>
</div>
Brief Results
• Free up space on the brief results list screen for addition information by removing the “Availability” column which normally links to the availability screen
• Allow the user to go directly to the electronic format of the resource without having to go to an intermediary screen
Brief Results screen
Brief Results screen
Call Number Linked to the Availability screen
URL (856) for electronic version of item
Clickable link takes users to electronic version
Potential Pointers
• There is a lot of flexibility in what you can do you just need to be persistent
• Ask others, both SUNY and non-SUNY for assistance
• Remember web accessibility issues– concerns with JavaScripts
How to code for demo at:http://www.librarywebchic.net/presentations/sunyla_2004/frameless_fearless.asp
Finger Lakes CC Goals
• Simplify• Make format match rest of library’s web
pages
• Suppress functions not currently in use
FLCC Library Homepage
Format Considerations
• Wanted to use banner but without the swooping parts
• Had to work with image layers – logo was taller than banner
• Trying to work with manual code• Needed to create new class in aleph.css
for text (do in vi)• Ended up designing in Dreamweaver, then
copying code in by hand
Results
Subject Heading Links
Subject Heading Links, cont.
• One of the most confusing and frustrating aspects of catalog for staff and students
• Not intuitive• Used to m’lis direct
link
Modifications
• Suppressed search engine and authorities options by commenting out code in service-aut and service-engine
• Still left with two choices for find and browse: LC subject heading and Subject
• Still confusing, code was no help• Knew from looking at Binghamton and
Morrisville pages that this could be changed
Fields (or, Huh?)
• Code for service-find-acc<tr>
<td class=td1 width=10% valign=top>
<a href='javascript:service_go("find-acc","acc_sequence=$0100");'>
<img src="&icon_path_&lng/icon/f-go.gif“ border=0 alt="Go"></a>
</td>
<td class=td1 width=12% valign=top nowrap>
$0300 :
</td>
<td class=td1 valign=top>
$0200
</td>
</tr>
How to Modify Search Options
• Can’t change fields (or even tell what they stand for)• Get help from SUNY colleagues• From Karen Coombs: Have to change xxx01/tab/www_f_tab_service (not in web
editor)Change the following two lines: 6#### www_f_service_find_acc SUL,SUB,SUM6#### www_f_service_scan_acc SUL,SUB,SUMto6#### www_f_service_find_acc SUB6#### www_f_service_scan_acc SUB
Modifications, cont.
Karen’s explanation:The short reason why is that a line appears in the service
window for every index present. You are only seeing two lines now because the SUM index isn't defined (tab00) so it doesn't show. SUB and SUL are defined as indexes so if you have both SUB and SUL in www_f_tab_service then a link/line shows up for each
Moral of the Story
• Use the listserv to ask for help
• Look at everyone else’s pages
• Aleph is flexible – can be creative
• Ask people directly if you don’t get answers from the listserv
• We’re all learning together
Marianne HebertSUNY Potsdam
Bases to Collections
Making the Most of the
“Collection Pull Down Menu”http://westaleph.sunyconnect.suny.edu:8490/F
Marianne Hebert
SUNY Potsdam
Handy Dandy Pull Down MenuLooks Good and is Really Cool!
Promote your bases!
“Collections Pull Down Menu”
Collections enable pre-limiting Simpler, cleaner and clearer to use Saves the user several steps Easy to cut/paste code into html page
Can be added to Header Can be added to Search screen Can be added to Help Screens Can be added anywhere?
First you need a BASE
Define unique collections within your catalog
alephe\tab\tab_base.eng
BASEBASE COLLECTIONCOLLECTIONPOT01PUB “Catalog not Reserves”POT30 “Course Reserves”CRANE “Crane Music Library”POT01PER “Periodicals”VIDEO “Video Collection”
Sample Bases from tab_base.eng
! 1 2 3 4 5 6 7 8
!!!!!!!!!!!!!!!!!!!!-!-!!!!!!!!!!!!!!!!!!!!-!!!!!-!!!!!-!!!!!-!!!!!-!!!!!!!!!!!!!!!!!!!>
POT01PUB Catalog not Reserves POT01 SNY01 EXU01 POT01 alldocuments not (wst=suppressed or wst=acq-created)
POT30 Course Reserves POT30 SNY30 EXU30 POT30
CRANE Crane Library POT01 SNY01 EXU01 POT01 wsl=potcr not (wst=suppressed or wst=acq-created)
POT01PER Periodicals POT01 SNY01 EXU01 POT01 wdt=periodical not (wst=suppressed or wst=acq-created)
VIDEO Video Collection POT01 SNY01 EXU01 POT01 wdt=video not (wst=suppressed or or wst=acq-created)
Collection description is limited to 20 characters
Pull down collection menu description is not limited.
Make your bases available
Create a link directly to base-list
Frameless base-list-pot01 “out-of-the-box” with
Potsdam collections addedBORING!
Collection menuas part of header
head-1-nobor
Collection menu appears on all pages, everywhere.
Collection menu defaults back to Basic Search every time.
Collection menu on search screens
find-b-pot01Basic Search Menu
defaults to Basic Search
find-a-pot01Advanced Search Menu
defaults to Advanced Search
But no pull down collections menu
on any other pages.
<!--Pull down menu for collections-->
<form name=baselist>
<table border=0 cellpadding=5 cellspacing=0 width="100%">
<tr>
<td>
<select name="dblist2" onChange="window.location=document.baselist.dblist2.options[document.baselist.dblist2.selectedIndex].value">
<option value="javascript:void(0)">Change Collection</option>
<option value="&server_f?func=file&file_name=find-b&local_base=pot30">Course Reserves</option>
<option value="&server_f?func=file&file_name=find-b&local_base=pot01pub">Complete Catalog (not Reserves)</option>
<option value="&server_f?func=file&file_name=find-b&local_base=crumb">Crumb Library</option>
<option value="&server_f?func=file&file_name=find-b&local_base=crane">Crane Library</option>
<option value="&server_f?func=file&file_name=find-b&local_base=video">Video Collection</option>
<option value="&server_f?func=file&file_name=find-b&local_base=pot01per">Periodicals</option>
<option value="&server_f?func=file&file_name=find-b&local_base=pot01rec">Recreational Reading</option>
<option value=>---------------------------
<option value="http://www.potsdam.edu/library.html">Library Home Page</option>
<option value="http://www.potsdam.edu/library/Home/2LEVIndexes.htm">Finding Articles</option>
<option value="http://olis.sysadm.suny.edu/opacs/opacs.htm">Other SUNY Libraries</option>
<option value="http://aleph1.sunyconnect.suny.edu:4555">SUNY Union Catalog</option>
</select>
</form>
</tr>
</td>
</table>
Be careful if you “right-click” on web
pages to borrow code
You can include other web resources, not just Aleph
Collections Can be Confusing
So, remind users where they are:Textual cluesError pages HelpColor
““Searching: &f-base”Searching: &f-base”Headers
head-1-nobor head-1-bor
Search Screens find-b find-a
Error screens find-b-permute-head find-b-list-head
find-b-permute-head “out of the box”
HUH?
Suggest Alternatives
find-b-permute-head-pot01Customized!
help-1Customize help to explain
your collections, and add the pull down menu.
Potsdam’s Frameless color scheme is based on Library home page
Complete Catalog (not Reserves)kind of like “home”
School color is a harsh “brown-maroon”, but we opted for a
brighter red tone.
Course ReservesHas very different content,
very different search options
Color reverses to gray to help make that obvious.
All other Collections:
A different place, but same search options as “home”, same “maroon”
family, but more pastel.
Colors have to work with logo colors.
Using Color as Visual Clue To have your header change color as you
change collections:
cp –p head-1-nobor-pot01 head-1-nobor-video
Edit bgcolor="990000“ to new color “996666“
cp –p head-1-nobor-video head-1-nobor-pot01per
Visual clue for Reference staff as well as user Management issue: you will need a head-1 for
every base (both nobor and bor) I don’t know how to do this with .css
Implement it!
Explore other frameless catalogs to see how the collection menu works in various settings
Define your bases/collections to help users pre-limit their searches
Customize the collection pull down menu and decide where to add it
Provide visual clues to help remind users and staff which collection they are currently searching
Natalie SturrCoordinator, Library Automation
Penfield Library
Background
• Framed OPAC– OSW created their own– No template yet existed– Lived through many Patch level changes
• Frameless OPAC– Opportunity for others to learn– Beginning with SNY template– Review functionality
Goals
• Simplify the interface
• Retain important functionality
• Create a finished product
• Recognize maintenance issues
*
Single linkLink to library home page; opens in separate window
Link to separate page; opens in separate window
Links to separate resources; opens in separate window
Codes in tab00.eng
Maintenance Issues
• Files do need to be customized initially– To work with your campus– To meet the needs of your students
• Files will need to be upgraded in future– Rep changes, hot fixes & patch upgrades
Patch Upgrades
• Pilot sites / framed OPAC– Reviewed/modified 100+ OPAC files
• From Patch 5 to Patch 7, 75+ frameless OPAC files were upgraded
• Upgrade process will occur when we move to ver 16
Customizing Files - Tips
• Retain original copy of file
• When possible, comment out code rather than delete it
<!-- comments go here -->
<!--
Comments can also go here
-->
Review Process
• Locate the change to be made– Rep Change info– Comparing files (diff)– May need to compare original with new file
• Test and implement change
Design with Maintenance in Mind