Download - 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

http://www.flcc.edu/


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


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


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-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>

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.


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>

Full Record

Created by full-set-head

uses full-999-body; full-xxx-body

Uses full-set-tail; tail-bar-include


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

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.


The Future?


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

http://westaleph.sunyconnect.suny.edu:8490/F

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

Michelle EichelbergerFinger 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,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

[email protected]

http://westaleph.sunyconnect.suny.edu:8490/F

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.

<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

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

Download - The Frameless Opac

Top Related