The Frameless Opac

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 Drew Systems Librarian SUNY Morrisville

Morrisville State College Library Goals
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 Page Use 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 Screen Added 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  <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-includeFXX200 </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 Results Part 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  <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  <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>  </tr>  <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  <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 contains both word and browse indexes Text which changes when a particular option in the <select> box is clicked

Header alterations Simple HTML Complex CSS div#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

Michelle Eichelberger Finger Lakes Community College

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,SUM
6#### www_f_service_scan_acc SUL,SUB,SUM
to
6#### www_f_service_find_acc SUB
6#### 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 Hebert SUNY Potsdam

Bases to Collections Making the Most of the “ Collection Pull Down Menu” http://westaleph.sunyconnect.suny.edu:8490/F Marianne Hebert SUNY Potsdam [email_address]

Handy Dandy Pull Down Menu Looks 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 ab ab_base.eng
BASE COLLECTION
POT01PUB “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 added BORING!

Collection menu as 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-pot01 Basic Search Menu defaults to Basic Search find-a-pot01 Advanced Search Menu defaults to Advanced Search

But no pull down collections menu on any other pages.

<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 clues
Error pages
Help
Color

“ 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-pot01 Customized!

help-1 Customize 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 Reserves Has 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 Sturr Coordinator, 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 link Link 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

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

The Frameless Opac

by Bill Drew

Accessibility

Upload Details

Usage Rights

Statistics

The Frameless Opac Presentation Transcript