Last summer during the Web Pac Pro. decided to try to find a create way to utilize the new Feed Reader pages.

Transcription

1 Easy as Pie Amelia Osterud, Carroll College and Katie Sanders, Carroll College Last summer during the Web Pac Pro upgrade, Carroll College librarians decided to try to find a create way to utilize the new Feed Reader pages. The result? subject guide pages with RSS feeds. Find out how to use the tools of the new RSS Feed Reader and Feed Builder to create useful pages that will provide one stop shopping place for patrons. 1

2 Student FTE of 2,970 Mostly undergraduate Master s programs in Education, Business, Computer Software Engineering, and Physical Therapy One Doctoral program in Physical Therapy Being able to use RSS feeds was one of the exciting things in WebPacPro that we were looking forward to Thought we could use them for dynamic content on our Subject Pages Also involved moving the Subject Pages into the catalog from the library website- more control over design/code Take advantage of online communication tools that students are already using. 2

3 All we did was copy the original News Feeds page and change the content, layout, and feeds 3

4 4

5 Business students Art students English students Political Science students Psychology students Biology students Provides current news in each field, most recent abstracts from journals in each field Go Pro 2006 or 2007 templates Set your feeds wwwoptions Basic News Feed Page: screens/feeds_example.html Note: the 07 templates do not use tabs and so our feeds pages are running on 06 templates. 5

6 Two wwwoptions to set 1. FEEDS_PORT=6060 Specifies the port to use for your feed. You must set this option to match the port 2. RSS_MIN_TTL=20 Specifies the minimum time for the server to cache an RSS feed that does not have a stated Time-To-Live (TTL) or which has a TTL value less than the value of this option Default setting is 10 minutes 6

7 7

8 The feeds_example.html page has basic elements that you will want to modify: 1. Create new page content 2. Right-hand menu links 3. Tabs, if you re using them 4. Feeds graphics 5. Feeds links 6. Feeds URLs 7. Subscribe option Decide what your new page content is going to be We migrated the information from our existing subject pages to the new format. Added chat windows Modified page layout Mostly visual stuff 8

9 We added a Subject Page menu, on the right-hand side of the page, below the existing right-hand menu. Copied the code and changed the content. For example <div class="mainnavlinkswrapper"> <div class="roundedcontent"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="roundedcontentinfo"> <div align="center"><img src="/screens/welcome.jpg" alt="welcome to the Carroll College Library"/></div> <div><img src="/screens/bullet.gif" alt=""/> <a href="/patroninfo">my Library Record</a></div> <div><img src="/screens/bullet.gif" alt=""/> <a href="/screens/ill.html">interlibrary Loan</a></div> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>.. <td valign="top"><div class="roundedcontent2"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="roundedcontentinfo"> <div class="maincontenthead">more subject guides...<br> </div> <div><img src="/screens/bullet.gif" alt=""/> <strong>art</strong></div> <div><img src="/screens/bullet.gif" alt=""/> <a href="/screens/subject_chem.html">chemistry</a></div> <div><img src="/screens/bullet.gif" alt=""/> <a href="/screens/subject_edu.html">education</a></div> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div></td> </div> </div> <div style="clear:both"></div> 9

10 We added extra tabs, since each Subject Page has several: You may need to add more sizes of tabs to your stylesheet Copy and paste tab coding Explore the cascading style sheets. In the 06/Pro templates there are two sheets styles.css and IE_styles.css. Remember to make the change in both styles.css and IE_Styles.css. Tabs/spacing is different between browsers. Use Firefox and IE to test your outcomes. Use existing code, duplicate, change the name, the pixel size, and the padding for IE. 10

11 Firefox is more standards compliant than IE, so try your changes first here. Download it for free at mozilla.org Also try adding the developer tool bar by Chris Pederick. Its very helpful and also at mozilla.org To few changes remember to refresh and some times you will need to clear your cache and cookies. (You only need to restart the III web servers when you change WWWoptions or edit the toplogo.html page). /*Settings for Active Tabs*/ /*Active Tab on Search Pages*/.mainActiveTab {background: transparent; float:left;margin:0 5px -1px 0;}.mainInactiveTab {background: transparent; float:left; margin:0 5px -1px 0;}.mainActiveTabMedium {background: transparent; float:left;margin:0 5px -1px 0;}.mainInactiveTabMedium {background: transparent; float:left; margin:0 5px -1px 0;}.menuTabContent {width:100px;background-color: #b1b3c1; text-align:center; padding:1px 0 5px 0; height:17px; }.menutabactive {width:100px;background-color: #e4e5ed; text-align:center; padding:1px 0 5px 0; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin: ; }.menutabcontentmedium {width:150px; background-color: #b1b3c1; text-align:center; padding:1px 0 5px 0; height:17px; }.menutabactivemedium {width:150px; background-color: #e4e5ed; text-align:center; padding:1px 0 5px 0; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin: ; } /*Active Tab on Help Pages*/.helpActiveTab {background: transparent; float:left; margin:0 5px -1px 0; }.helpactivetabmedium {background: transparent; float:left; margin:0 5px -1px 0; }.helpactivetablarge {background: transparent; float:left; margin:0 5px -1px 0; }.helpactivetabxl {background: transparent; float:left; margin:0 5px -1px 0; } /*Inactive Tabs on Help Pages*/.helpInactiveTab {background: transparent; float:left; margin:0 5px 0 0;}.helpInactiveTabMedium {background: transparent; float:left; margin:0 5px 0 0; }.helpinactivetablarge {background: transparent; float:left; margin:0 5px 0 0; }.helpinactivetabxl {background: transparent; float:left; margin:0 5px 0 0; } /*Settings for Content in Inactive Tabs*/.helpTabContent {width:100px;background-color: #b1b3c1; text-align:center; padding:1px 0 5px 0; height:17px; }.helptabactivecontent {width:100px;background-color: #e4e5ed; text-align:center; padding:1px 0 5px 0; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin: ; }.helptabcontentmedium {width:125px;background-color: #b1b3c1; text-align:center; padding:1px 0 5px 0; height:17px;}.helptabcontentlarge {width:175px;background-color: #b1b3c1; text-align:center; padding:1px 0 5px 0; height:17px;}.helptabcontentxl {width:200px;background-color: #b1b3c1; text-align:center; padding:1px 0 5px 0; height:17px;}.helptabactivecontentmedium {width:125px;background-color: #e4e5ed; text-align:center; padding:1px 0 5px 0; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin: ; }.helptabactivecontentlarge {width:175px;background-color: #e4e5ed; text-align:center; padding:1px 0 5px 0; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin: ; }.helptabactivecontentxl {width:200px;background-color: #e4e5ed; text-align:center; padding:1px 0 5px 0; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin: ; } 11

12 .mainspacer {margin: 0 1em.2em 1em;}.mainActiveTab {width:100px; background: transparent; float:left;margin:0 5px -2px 0;}.mainInactiveTab {width:100px; background: transparent; float:left; margin:0 5px -2px 0;}.mainActiveTabMedium {width:150px; background: transparent; float:left;margin:0 5px -2px 0;}.mainInactiveTabMedium {width:150px; background: transparent; float:left; margin:0 5px -2px 0;}.menuTabContent {width:100px; background-color: #b1b3c1; text-align:center; margin:0 0-2px 0; padding:1px 0 9px 0; height:18px;}.menutabcontentmedium {width:150px; background-color: #b1b3c1; text-align:center; margin:0 0-2px 0;padding:1px 0 9px 0; height:18px;}.menutabactive {width:98px; background-color: #e4e5ed; text-align:center; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin:0 0-1px 0; padding:1px 0 9px 0;}.menuTabActiveMedium {width:148px; background-color: #e4e5ed; text-align:center; border-left:1px solid #1e2667; borderright:1px solid #1e2667; height:20px; margin:0 0-1px 0; padding:1px 0 9px 0;}.helpActiveTab {background: transparent; width:100px; float:left; margin:0 5px -2px 0;}.helpActiveTabMedium {background: transparent; width:125px; float:left; margin:0 5px -2px 0;}.helpActiveTabLarge {background: transparent; width:175px; float:left; margin:0 5px -2px 0;}.helpActiveTabXL {background: transparent; width:200px; float:left; margin:0 5px -2px 0; }.helpinactivetab {background: transparent; width:100px; float:left; margin:0 5px -2px 0;}.helpInactiveTabMedium {background: transparent; width:125px; float:left; margin:0 5px -2px 0;}.helpInactiveTabLarge {background: transparent; width:175px; float:left; margin:0 5px -2px 0;}.helpInactiveTabXL {background: transparent; width:200px; float:left; margin:0 5px -2px 0;}.helpTabContent {width:100px; background-color: #b1b3c1; text-align:center; margin:0 0-2px 0; padding:1px 0 9px 0; height:18px;}.helptabcontentmedium {width:125px; background-color: color: #b1b3c1; text-align:center; margin:0 0-2px 0;padding:1px 0 9px 0; height:18px;}.helptabcontentlarge {width:175px; background-color: #b1b3c1; text-align:center; margin:0 0-2px 0;padding:1px 0 9px 0; height:18px;}.helptabcontentxl {width:200px; background-color: #b1b3c1; text-align:center; margin:0 0-2px 0;padding:1px 0 9px 0; height:18px;}.helptabactivecontent {width:98px;background-color: #e4e5ed; text-align:center; border-left:1px solid #1e2667; border-right:1px solid #1e2667; height:20px; margin:0 0-2px 0; padding:1px 0 9px 0;}.helpTabActiveContentMedium {width:123px;background-color: #e4e5ed; text-align:center; border-left:1px solid #1e2667; borderright:1px solid #1e2667; height:20px; margin:0 0-2px 0; padding:1px 0 9px 0;}.helpTabActiveContentLarge {width:173px;background-color: #e4e5ed; text-align:center; border-left:1px solid #1e2667; borderright:1px solid #1e2667; height:20px; margin:0 0-2px 0; padding:1px 0 9px 0;}.helpTabActiveContentXL {width:198px;background-color: #e4e5ed; text-align:center; border-left:1px solid #1e2667; borderright:1px solid #1e2667; height:20px; margin:0 0-2px 0; padding:1px 0 9px 0;} Configure styles.css first, then edit for IE. Remember to add all the entries. Active color while on the page should match the page background color. Inactive the other tabs other while not in use Contents actual pixel dimension added 200px as 175 did not cut it. IE notice how the pixels amount is one to two less than styles. IE_Styles.css helps keep consistency between browsers. 12

13 For example Basic coding in original feeds_example.html: <!--{toplogo}--> <div> <div class="folderwrapper"><!-- "folder" interface wrapper div--> <div class="mainspacer"><!--wrapper div that contains the selection tabs--> <div class="mainactivetabmedium"><!--active tab--> <b class="tabtop"><b class="active1"></b><b class="active2"></b><b class="active3"></b><b class="active4"></b></b> active4 <div class="displayboxcontent"><div class="menutabactivemedium">news Feeds</div></div> </div><!--close inactive tab--> </div><!--close selection tab wrapper--> <div class="mainspacer"><!-- main content wrapper div --> <div class="mainactivecontenttab"> <p /> For example Basic subject page tab coding: <div class="maininactivetabmedium"><!--inactive tab--> <b class="tabtop"><b " b class="inactive1"></b><b b class="inactive2"></b><b b class="inactive3"></b><b class="inactive4"></b></b> <div class="displayboxcontent"> <div class="menutabcontentmedium"><a href="/screens/subject_guides.html">subject Guides</a></div> </div> </div><!--close active tab--> <div class="mainactivetab"><!--active tab--> <b class="tabtop"><b class="active1"></b><b class="active2"></b><b class="active3"></b><b class="active4"></b></b> <div class="displayboxcontent"> <div class="menutabactive">art</div> </div> </div><!--close inactive tab--> <div class="helpinactivetabxl"><!--inactive tab--> <b class="tabtop"><b class="inactive1"></b><b class="inactive2"></b><b class="inactive3"></b><b class="inactive4"></b></b> <div class="displayboxcontent"> <div class="helptabcontentxl"><a href="/screens/feeds_art.html">art RSS Feeds</a></div> </div></div><!--close inactive tab--> </div><!--close selection tab wrapper--> 13

14 FROM THIS: TO THIS: See? Easy as pie. Replaced news feed graphics with a generic RSS graphic, freely available online. Might have to erase background and save as a.gif file. Save new image in Web Master screens directory. Replace image in either code or web editor. 14

15 FROM THIS: <td align="center"><a href="#" onclick="morefeed('feed1'); return false;" ><img src="/screens/bbc.gif" alt="bbc News" border="0"/></a></td> TO THIS: <td align="center"><a href="#" onclick="morefeed('feed1'); return false;" ><img src="/screens/rssicon.gif" alt="new York Times Arts News" border="0"/></a></td> Make sure to also change the image alt tag so it corresponds to the new feed or generic RSS Decide what your new feeds are going to be. 1. Change the text links, both in the main menu 2. and the right-hand menu. 15

16 Code for the main feeds menu table: <div id="feedmenu"> <table align="left" cellpadding="5" class="textfix feedtable"> <tr> <td align="center"><a href="#" onclick="morefeed('feed1'); return false;" ><img src="/screens/rssicon.gif" alt="new York Times Arts News" border="0"/></a></td> <td valign="middle"><a href="#" onclick="morefeed('feed1'); return false;" >New York Times Arts News</a></td> <td align="center"><a href="#" onclick="morefeed('feed6'); return false;" ><img src="/screens/rssicon.gif" alt="milwaukee Journal Sentinel Art News" border="0"/></a></td> <td valign="middle"><a href="#" onclick="morefeed('feed6'); return false;" >Milwaukee Journal Sentinel Art News & Reviews</a></td> </tr>. Code for the right-hand feeds menu table: <td width="23%" valign="top"><div class="roundedcontent2"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="roundedcontentinfo"> <div class="maincontenthead">to see more...</div> <div> <img src="/screens/bullet.gif" alt=""/> <a href="#" onclick="morefeed('feed1'); return false;" >New York Times Arts News</a></div> <div> <img src="/screens/bullet.gif" alt=""/> <a href="#" onclick="morefeed('feed2'); return false;" >New York Times Art & Design News</a></div> <br/><div class="maincontenthead"><img th i src="/screens/bullet.gif" /b alt=""/> <a href="#" onclick="morefeed('feedmenu'); return false;" >Back to Feed Menu</a></div> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div></td></tr></table> 16

17 Change the actual feed URL in the code. Code for the actual feeds: <div id="feed1"> <!-- {RSS: s/nyt/arts.xml: 10:t:1:3}--> </div> </td> Anatomy of a feed link: Date Display: default is t, display is 1 URL Max Items <!--{RSS: 10:t:1:3}--> Display Descriptions-controls the display of the RSS feed item description. Default is t- no description Other option is 1- displays description Display Image/Title: 0 Show neither the title nor the image. 1 Show only the title. 2 Show only the image. 3 Show both the title and the image. 17

18 LOOKS LIKE THIS: TAKES YOU HERE: Allows users to actually subscribe to feeds in their own browser or feed aggregator Find a free subscribe or rss image, save as a.gif file, and upload to Web Master 18

19 Start with basic feed code: <div id="feed2"> <!-- {RSS: --> </div> Add extra code between <div id="feed2"> and <!-- <div id="feed2"> <a href=" <img src="rss.gif" alt="subscribe" width="36" height="14" /></a> <a href=" Subscribe</a> <!-- {RSS: :1:3}--> </div> Make sure URLs match: <div id="feed2"> d2"> <a href=" xml"><img src="rss.gif" alt="subscribe" width="36" height="14" /></a> <a href=" xml">subscribe</a> <!-- {RSS: ml:10:t:1:3}--> </div> 19

20 siness.html en g.html html Many great resources for students and faculty are in our electronic journals. EBSCO, Elsevier, and many direct publishers offer Feeds options for their journals. Problem to allow off-campus access to the full-text we need to proxy the link unfortunately the Feed Reader page cannot read the feed then. (It s complicated and Innovative is aware of the problem). 20

21 Right: Harvard Business Review via EBSCO without proxy rewrite. Below: Harvard Business Review via EBSCO with proxy rewrite. EZproxy In an effort to speed up access to the databases the campus is moving to EZproxy (now owned by OCLC). Some people have been able to edit the settings in EZproxy to allow Feeds to display in the Reader Page and then prompt the user for the login information. Problem we do not yet have it up an running and therefore cannot test it. 21

22 First identify good sources of information for the subject area. Faculty are a good source. Go to the publisher s website or publication website. Blackwell s offers free table of contents feeds. New York Times Business you can link through to the full text. Most publishers now have feeds for their table of contents Note: some of these feeds are only good for 1 year. Then you have to refresh them. Users cannot access the full-text from here but need to go back through the catalog. 22

23 Have feeds readily available. Include links to full text. Podcasts are essentially RSS feeds for video or audio. They work the same way as others. You just need to download Itunes to find them. ( Could also link to course podcasts if your institution is a member of Itunes U. 23

24 Easier method is click on the file you want to edit, click put PC. Open the file in Dreamweaver, edit and then click Get PC in Web Master. Little tricky to set-up Directions are available on the IUG Clearinghouse by Leo Papa. Note III Manual is missing a few steps- see these instructions. Does not tie up a license. Saves time in the long run. 24

25 We also purchased Feed Builder, and are using it to create our own feeds from the catalog 25