The Frameless Opac


Published on

Presented at SUNYLA 2004 at SUNY Cortland.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Frameless Opac

  1. 1. 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
  2. 2. Bill Drew Systems Librarian SUNY Morrisville
  3. 3. Morrisville State College Library Goals <ul><li>Integrate the Frameless OPAC into our website. </li></ul><ul><li>Remove functions not used yet. </li></ul><ul><li>Provide access to our website from it. </li></ul><ul><li>Remove tables used for display only. </li></ul>Morrisville State College Library
  4. 4. 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.
  5. 5. Frameless Out of the Box Morrisville State College Library
  6. 6. 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
  7. 7. 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=&quot;stylesheet&quot; href=&quot;&server_httpd/aleph.css&quot; TYPE&quot;text/css&quot;> </head> <body topmargin=&quot;0&quot; marginheight=&quot;0&quot;> <include> head-1 <div style=&quot;width:750px&quot; class=&quot;search&quot;> <include> find-include-buttons <table><tr><td> <b><nobr>Basic Search</nobr>: (&f-base)</b></span>&nbsp;</td> <td> <form method=get name=&quot;form1&quot; action=&quot;&server_f&quot;> <input type=&quot;hidden&quot; name=&quot;func&quot; value=&quot;find-b&quot;> <include> base-local </td> </tr> </table> <table> <tr><td valign=&quot;top&quot;> <p> <b> Type keyword(s) or phrase</b><br> <input size=60 name=&quot;request&quot; value=&quot;$0100&quot;> <input type=&quot;image&quot; alt=&quot; Search &quot; src=&quot;&icon_path_&lng/icon/f-search.gif&quot; border=0>&nbsp;&nbsp;&nbsp; <td style=&quot;font: 12px Tahoma; color: blue;&quot; valign=&quot;bottom&quot; align=&quot;right&quot;> <b> Words As Phrase?</b> <input Type=&quot;radio&quot; name=&quot;adjacent&quot; $$1000-C&quot;N&quot; value=&quot;N&quot; checked> No <input type=&quot;radio&quot; name=&quot;adjacent&quot; $$1000-C&quot;Y&quot; value=&quot;Y&quot;> Yes </td> </tr></table> <br> <table width=&quot;100%&quot;><tr><td><b>Search in</b> <span ></td><td> <include>find-code-includeFXX200 </span>&nbsp;&nbsp;</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
  8. 8. 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
  9. 9. 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=&quot;stylesheet&quot; href=&quot;&server_httpd/aleph.css&quot; TYPE=&quot;text/css&quot;> </head> <body topmargin=&quot;0&quot; marginheight=&quot;0&quot;> <include> head-1 <form method=get name=form1 action=&quot;&server_f&quot; > <input type=&quot;hidden&quot; name=&quot;func&quot; value=&quot;short-action&quot;> <input type=&quot;hidden&quot; name=&quot;submit_action&quot; value=&quot;&quot;> <include> short-include-buttons <include> short-include-2 <!-- filename: short-a-head --> <table cellspacing=2 bordercolor=&quot;black&quot; border=&quot;1&quot;> <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=&quot;1%&quot;>$0100</td> <td class=td1 id=centered width=&quot;1%&quot;>$0200</td> <td class=td1 $2300 width=&quot;15%&quot;>&nbsp; $0300 </td> <td class=td1 $2400 width=&quot;30%&quot;> &nbsp;&nbsp;&nbsp; <script type=&quot;text/javascript&quot;> var recordLinkRaw = '$0100'; var recordLink = recordLinkRaw.substring(0, recordLinkRaw.indexOf('>')); document.write(recordLink); document.write('>'); </script> $0400 </td> <td class=td1 $2500 width=&quot;5%&quot; align=&quot;center&quot;>$0500 </td> <td class=td1 $2600 width=&quot;15%&quot;>&nbsp;$0600 </td> <td class=td1 $2700 width=&quot;10%&quot; align=&quot;center&quot;> 0700</td> Morrisville State College Library
  10. 10. 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
  11. 11. Holdings <!-- item-global-head-1-mor01 wed 12/10/03 top of item display --> <html> <head> <title>Morrisville State College :&f-base - Holdings</title> <link rel=&quot;stylesheet&quot; href=&quot;&server_httpd/aleph.css&quot; TYPE=&quot;text/css&quot;> <include>meta-tags <include>include-window </head> <body topmargin=&quot;0&quot; marginheight=&quot;0&quot;> <include>head-1 <table width=100%> <tr> <td class=title> &f-base - Holdings</td> <td align=right> <a href=&quot;&server_f?func=short&quot; title=&quot;View list of records&quot;> <img alt=&quot;Results List&quot; src=&quot;&icon_path_&lng/icon/resultslist.gif&quot; border=&quot;0&quot;></a> $0200 <img src=&quot;&icon_path_&lng/icon/f-back.gif&quot; border=0 alt=&quot;back to Full View of Record&quot;></a> </td> </tr> </table> <table style=&quot;background-color:#E2E9F0&quot; width=100%> Built from item-global files Built from full-xxx-body files Morrisville State College Library
  12. 12. Lessons Learned <ul><li>Some tables are necessary. </li></ul><ul><li>Use CSS where possible. </li></ul><ul><li>Get rid of links to parts of system not used in your library. </li></ul><ul><li>KISS! (Keep it simple, stupid!) </li></ul><ul><li>Borrow code from others and share your code with others. </li></ul><ul><li>Look at other ALEPH frameless opacs. </li></ul>Morrisville State College Library
  13. 13. The Future? Morrisville State College Library
  14. 14. Karen Coombs SUNY Cortland
  15. 15. SUNY Cortland Goals <ul><li>Make more usable and user-friendly </li></ul><ul><li>Simplify and streamline interface </li></ul><ul><li>Make more logical </li></ul><ul><li>Remove tables used for layout only and images that could be text </li></ul><ul><li>Use CSS more effectively </li></ul>
  16. 16. Basic Search Screen <ul><li>Create a initial screen that fit “above the fold” in 800x600 and contained all the desired indexes </li></ul><ul><li>Use more user intuitive labels for indexes </li></ul><ul><li>Provide Context Specific Help </li></ul>
  17. 17. 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
  18. 18. Header alterations Simple HTML Complex CSS div#logo { margin-top:.5em; background-color:#cc0000; width:100%; height:75px; background-image:url(; background-repeat:no-repeat; font-family: Garamond, Times-New Roman, sans-serif; color:#CCCCCC; } <div id=&quot;logo&quot;> <h1> <a href=&quot;; title=&quot;SUNY Cortland Homepage&quot;>Cortland</a> <br> <a href=&quot;; title=&quot;Memorial Library&quot; style=&quot;margin-left:20px;&quot;>Memorial Library</a> </h1> <h2> Searching: &nbsp; &nbsp; <span style=&quot;color:#000000;&quot;> &f-base </span> </h2> </div>
  19. 19. Brief Results <ul><li>Free up space on the brief results list screen for addition information by removing the “Availability” column which normally links to the availability screen </li></ul><ul><li>Allow the user to go directly to the electronic format of the resource without having to go to an intermediary screen </li></ul>
  20. 20. Brief Results screen
  21. 21. Brief Results screen Call Number Linked to the Availability screen URL (856) for electronic version of item Clickable link takes users to electronic version
  22. 22. Potential Pointers <ul><li>There is a lot of flexibility in what you can do you just need to be persistent </li></ul><ul><li>Ask others, both SUNY and non-SUNY for assistance </li></ul><ul><li>Remember web accessibility issues </li></ul><ul><ul><li>concerns with JavaScripts </li></ul></ul>How to code for demo at:
  23. 23. Michelle Eichelberger Finger Lakes Community College
  24. 24. Finger Lakes CC Goals <ul><li>Simplify </li></ul><ul><li>Make format match rest of library’s web pages </li></ul><ul><li>Suppress functions not currently in use </li></ul>
  25. 25. FLCC Library Homepage
  26. 26. Format Considerations <ul><li>Wanted to use banner but without the swooping parts </li></ul><ul><li>Had to work with image layers – logo was taller than banner </li></ul><ul><li>Trying to work with manual code </li></ul><ul><li>Needed to create new class in aleph.css for text (do in vi) </li></ul><ul><li>Ended up designing in Dreamweaver, then copying code in by hand </li></ul>
  27. 27. Results
  28. 28. Subject Heading Links
  29. 29. Subject Heading Links, cont. <ul><li>One of the most confusing and frustrating aspects of catalog for staff and students </li></ul><ul><li>Not intuitive </li></ul><ul><li>Used to m’lis direct link </li></ul>
  30. 30. Modifications <ul><li>Suppressed search engine and authorities options by commenting out code in service-aut and service-engine </li></ul><ul><li>Still left with two choices for find and browse: LC subject heading and Subject </li></ul><ul><li>Still confusing, code was no help </li></ul><ul><li>Knew from looking at Binghamton and Morrisville pages that this could be changed </li></ul>
  31. 31. Fields (or, Huh?) <ul><li>Code for service-find-acc </li></ul><ul><li><tr> </li></ul><ul><li><td class=td1 width=10% valign=top> </li></ul><ul><li><a href='javascript:service_go(&quot;find-acc&quot;,&quot;acc_sequence=$0100&quot;);'> </li></ul><ul><li><img src=&quot;&icon_path_&lng/icon/f-go.gif“ border=0 alt=&quot;Go&quot;></a> </li></ul><ul><li></td> </li></ul><ul><li><td class=td1 width=12% valign=top nowrap> </li></ul><ul><li>$0300 : </li></ul><ul><li></td> </li></ul><ul><li><td class=td1 valign=top> </li></ul><ul><li>$0200 </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul>
  32. 32. How to Modify Search Options <ul><li>Can’t change fields (or even tell what they stand for) </li></ul><ul><li>Get help from SUNY colleagues </li></ul><ul><li>From Karen Coombs: </li></ul><ul><li>Have to change xxx01/tab/www_f_tab_service (not in web editor) </li></ul><ul><li>Change the following two lines:  </li></ul><ul><li>6#### www_f_service_find_acc         SUL,SUB,SUM </li></ul><ul><li>6#### www_f_service_scan_acc       SUL,SUB,SUM </li></ul><ul><li>to </li></ul><ul><li>6#### www_f_service_find_acc         SUB </li></ul><ul><li>6#### www_f_service_scan_acc       SUB </li></ul>
  33. 33. Modifications, cont. <ul><li>Karen’s explanation: </li></ul><ul><li>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 </li></ul>
  34. 34. Moral of the Story <ul><li>Use the listserv to ask for help </li></ul><ul><li>Look at everyone else’s pages </li></ul><ul><li>Aleph is flexible – can be creative </li></ul><ul><li>Ask people directly if you don’t get answers from the listserv </li></ul><ul><li>We’re all learning together </li></ul>
  35. 35. Marianne Hebert SUNY Potsdam
  36. 36. Bases to Collections Making the Most of the “ Collection Pull Down Menu” Marianne Hebert SUNY Potsdam [email_address]
  37. 37. Handy Dandy Pull Down Menu Looks Good and is Really Cool! Promote your bases!
  38. 38. “ Collections Pull Down Menu” <ul><li>Collections enable pre-limiting </li></ul><ul><li>Simpler, cleaner and clearer to use </li></ul><ul><li>Saves the user several steps </li></ul><ul><li>Easy to cut/paste code into html page </li></ul><ul><ul><li>Can be added to Header </li></ul></ul><ul><ul><li>Can be added to Search screen </li></ul></ul><ul><ul><li>Can be added to Help Screens </li></ul></ul><ul><ul><li>Can be added anywhere? </li></ul></ul>
  39. 39. First you need a BASE <ul><li>Define unique collections within your catalog </li></ul><ul><li>alephe ab ab_base.eng </li></ul><ul><ul><li>BASE COLLECTION </li></ul></ul><ul><ul><li>POT01PUB “Catalog not Reserves” </li></ul></ul><ul><ul><li>POT30 “Course Reserves” </li></ul></ul><ul><ul><li>CRANE “Crane Music Library” </li></ul></ul><ul><ul><li>POT01PER “Periodicals” </li></ul></ul><ul><ul><li>VIDEO “Video Collection” </li></ul></ul>
  40. 40. Sample Bases from tab _ base.eng <ul><li>! 1 2 3 4 5 6 7 8 </li></ul><ul><li>!!!!!!!!!!!!!!!!!!!!-!-!!!!!!!!!!!!!!!!!!!!-!!!!!-!!!!!-!!!!!-!!!!!-!!!!!!!!!!!!!!!!!!!> </li></ul><ul><li>POT01PUB Catalog not Reserves POT01 SNY01 EXU01 POT01 alldocuments not (wst=suppressed or wst=acq-created) </li></ul><ul><li>POT30 Course Reserves POT30 SNY30 EXU30 POT30 </li></ul><ul><li>CRANE Crane Library POT01 SNY01 EXU01 POT01 wsl=potcr not (wst=suppressed or wst=acq-created) </li></ul><ul><li>POT01PER Periodicals POT01 SNY01 EXU01 POT01 wdt=periodical not (wst=suppressed or wst=acq-created) </li></ul><ul><li>VIDEO Video Collection POT01 SNY01 EXU01 POT01 wdt=video not (wst=suppressed or or wst=acq-created) </li></ul>Collection description is limited to 20 characters Pull down collection menu description is not limited.
  41. 41. Make your bases available <ul><li>Create a link directly to base-list </li></ul>Frameless base-list-pot01 “ out-of-the-box” with Potsdam collections added BORING!
  42. 42. Collection menu as part of header head-1-nobor
  43. 43. Collection menu appears on all pages, everywhere. Collection menu defaults back to Basic Search every time.
  44. 44. 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
  45. 45. But no pull down collections menu on any other pages.
  46. 46. <!--Pull down menu for collections--> <form name=baselist> <table border=0 cellpadding=5 cellspacing=0 width=&quot;100%&quot;> <tr> <td> <select name=&quot;dblist2&quot; onChange=&quot;window.location=document.baselist.dblist2.options[document.baselist.dblist2.selectedIndex].value&quot;> <option value=&quot;javascript:void(0)&quot;>Change Collection</option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= pot30 &quot;> Course Reserves </option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= pot01pub &quot;> Complete Catalog (not Reserves) </ option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= crumb &quot;> Crumb Library </option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= crane &quot;> Crane Library </option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= video &quot;> Video Collection </option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= pot01per &quot;> Periodicals </option> <option value=&quot;&server_f?func=file&file_name= find-b &local_base= pot01rec &quot;> Recreational Reading </option> <option value=>--------------------------- <option value=&quot;;>Library Home Page</option> <option value=&quot;;>Finding Articles</option> <option value=&quot;;>Other SUNY Libraries</option> <option value=&quot;;> 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
  47. 47. Collections Can be Confusing <ul><li>So, remind users where they are: </li></ul><ul><ul><ul><li>Textual clues </li></ul></ul></ul><ul><ul><ul><li>Error pages </li></ul></ul></ul><ul><ul><ul><li>Help </li></ul></ul></ul><ul><ul><ul><li>Color </li></ul></ul></ul>
  48. 48. <ul><li>“ Searching: &f-base” </li></ul>Headers head-1-nobor head-1-bor Search Screens find-b find-a Error screens find-b-permute-head find-b-list-head
  49. 49. find-b-permute-head “ out of the box” HUH?
  50. 50. Suggest Alternatives find-b-permute-head-pot01 Customized!
  51. 51. help-1 Customize help to explain your collections, and add the pull down menu.
  52. 52. Potsdam’s Frameless color scheme is based on Library home page
  53. 53. Complete Catalog (not Reserves) kind of like “home” School color is a harsh “brown-maroon”, but we opted for a brighter red tone.
  54. 54. Course Reserves Has very different content, very different search options Color reverses to gray to help make that obvious.
  55. 55. 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.
  56. 56. Using Color as Visual Clue <ul><li>To have your header change color as you change collections: </li></ul><ul><li>cp –p head-1-nobor-pot01 head-1-nobor-video </li></ul><ul><li>Edit bgcolor=&quot;990000“ to new color “ 996666“ </li></ul><ul><li>cp –p head-1-nobor- video head-1-nobor- pot01per </li></ul><ul><li>Visual clue for Reference staff as well as user </li></ul><ul><li>Management issue: you will need a head-1 for every base (both nobor and bor) </li></ul><ul><li>I don’t know how to do this with .css </li></ul>
  57. 57. Implement it! <ul><li>Explore other frameless catalogs to see how the collection menu works in various settings </li></ul><ul><li>Define your bases/collections to help users pre-limit their searches </li></ul><ul><li>Customize the collection pull down menu and decide where to add it </li></ul><ul><li>Provide visual clues to help remind users and staff which collection they are currently searching </li></ul>
  58. 58. Natalie Sturr Coordinator, Library Automation Penfield Library
  59. 59. Background <ul><li>Framed OPAC </li></ul><ul><ul><li>OSW created their own </li></ul></ul><ul><ul><li>No template yet existed </li></ul></ul><ul><ul><li>Lived through many Patch level changes </li></ul></ul><ul><li>Frameless OPAC </li></ul><ul><ul><li>Opportunity for others to learn </li></ul></ul><ul><ul><li>Beginning with SNY template </li></ul></ul><ul><ul><li>Review functionality </li></ul></ul>
  60. 60. Goals <ul><li>Simplify the interface </li></ul><ul><li>Retain important functionality </li></ul><ul><li>Create a finished product </li></ul><ul><li>Recognize maintenance issues </li></ul>*
  61. 64. 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
  62. 68. Codes in tab00.eng
  63. 70. Maintenance Issues <ul><li>Files do need to be customized initially </li></ul><ul><ul><li>To work with your campus </li></ul></ul><ul><ul><li>To meet the needs of your students </li></ul></ul><ul><li>Files will need to be upgraded in future </li></ul><ul><ul><li>Rep changes, hot fixes & patch upgrades </li></ul></ul>
  64. 71. Patch Upgrades <ul><li>Pilot sites / framed OPAC </li></ul><ul><ul><li>Reviewed/modified 100+ OPAC files </li></ul></ul><ul><li>From Patch 5 to Patch 7, 75+ frameless OPAC files were upgraded </li></ul><ul><li>Upgrade process will occur when we move to ver 16 </li></ul>
  65. 72. Customizing Files - Tips <ul><li>Retain original copy of file </li></ul><ul><li>When possible, comment out code rather than delete it </li></ul><ul><ul><li><!-- comments go here --> </li></ul></ul><ul><ul><li><!-- </li></ul></ul><ul><ul><li>Comments can also go here </li></ul></ul><ul><ul><li>--> </li></ul></ul>
  66. 73. Review Process <ul><li>Locate the change to be made </li></ul><ul><ul><li>Rep Change info </li></ul></ul><ul><ul><li>Comparing files (diff) </li></ul></ul><ul><ul><li>May need to compare original with new file </li></ul></ul><ul><li>Test and implement change </li></ul>
  67. 74. Design with Maintenance in Mind