LS Web Design: 2011

04 October 2011

QR Codes in the Library Catalog

After a little investigation, I learned that the Library Anywhere QR codes function is available without charge to Library Anywhere subscribers and one does not need a Library Thing account to embed the code in the bibliographic record display.

This is done by a widget so does not reside in the record itself but is generated on the fly when the bib record is displayed. It involves adding some simple code to the bib_display.html file and enabling the QR code function in our Library Anywhere settings.

I've done this successfully in the Staging (test) directory of the catalog. I have discovered one quirk that I don't see a reason for and will continue to try to determine why the instructions below the QR code disappear if the item does not have a book cover.

You see see what it looks like by searching the staging catalog on campus only. The staging url is http://alicat.austincc.edu:2082/

One of the other iii libraries included a link to information about QR codes and I thought that was a good idea so I created a new FAQ about QR codes and linked to it from the bibliographic record.

22 September 2011

Simmons mobile stylesheet

In this morning's IUG list, Simmons shared their mobile style sheet and some hints. Since it looked fairly straight-forward, I played around with it for about 30 minutes in the staging directory. However, since it is in staging, I am unable to see the results on my cell phone because the student wireless network cannot get past that firewall.

I did test with the Opera mobile launcher software I have loaded and it did sort of work in that it took all the content and put it in a narrow column. However, it didn't get rid of the sidebar and what I was seeing was the full-catalog looking really tiny and in a narrow column.

Part of this is probably that Simmons is on rel 2009b and thus does not have the advance search toolbar token that we have in the skyline version.

Nonetheless, it may be worth pursuing at some point if we can get a mobile device that can VPN into ACCNet to test with. I will keep all the files (actually, there are only 2 stylesheets and one javascript file) and information in a folder with my backups of the live and staging catalogs.

11 August 2011

Update: Changing Style Sheets per ACC Web

See this blog entry for previous information:
http://lswebdesign.blogspot.com/2011_04_01_archive.html

In order to test LS web pages for potential issues with the 960 styling, I needed a way to identify all the pages that were linked on the site, i.e., pages that were viewable by the public.

I used a freeware site map generator (wonderwebware.com) to generate a list

I converted the list into an Excel spreadsheet.
I then broke apart the urls into

domain
folder and/or subfolder
file

I sorted by folder/subfolder/file to group things into recognizable units.
I color-coded to more easily identify potential problem pages to test.

After picking those files I thought might break using a new style sheet, I edited each file to change the linked stylesheet to MetaStyleScript-sub960.php and then saved each files as filename960.php

All files passed the test and I do not see any potential problems with applying the new stylesheets to the LS Web Site as per the process outlined earlier. (http://lswebdesign.blogspot.com/2011_04_01_archive.html)

The files tested:

14 June 2011

New Look Library Guides June 2011

===================================
New Look Library Guides June 2011
===================================
---------------
1 Styling (CSS)
---------------
1.1 Styling is applied by

1.1.1 custom coding
1.1.2 guide layout and colors edit option
1.1.3 page tab graphics

---------
2 Color
---------
2.1 Rounded page tabs

2.1.1 tabrightl-xxx.gif
2.1.2 tableftl-xxx.gif
2.1.3 text color (#24618e)
2.1.4 Base color
2.1.4.1 rgb(34, 147, 75)
2.1.4.2 #22934B

2.2 Graphics

2.2.1 Recreate graphics pixel by pixel to different color
2.2.2 tabrightI-greenshadelt4.gif
2.2.3 tableftI-greenshade50.gif

2.3 Content box

2.3.1 Header Color {rgb(98, 193, 115) #62C173}
2.3.2 Text Color (#183E59)

----------------------
3 Content/Layout
---------------------
3.1 Change first page

3.1.1 Nothing invites you
3.1.2 Make content what they are looking for.
3.1.3 Add eye-catching graphic
3.1.4 Add owner profile
3.1.5 Move Guides list to Get Help

3.2 Get Help

3.2.1 Use /genericSG/Get Help as linked page
3.2.2 Add Guides list to page

-------------------------
4 Create Test Group
-------------------------
4.1 Test custom header code

<style type="text/css">
#tabsI a { background:transparent url(http://library.austincc.edu/graphics/tableftI-greenshade50.gif) no-repeat scroll left top; }
#tabsI a span { color:#24618e; background:transparent url(http://library.austincc.edu/graphics/tabrightI-greenshadelt4.gif) no-repeat scroll right top; }
#tabsI a:hover span { color:#ffffff;}
.dropmenudiv a { color:#000000; background-color:#E1F2E4; }
.dropmenudiv a:hover { color:#000080; background-color:#C0E8C7; }
</style>

4.2 Test colors
4.3 Test graphics

-----------------
5 Deployment
-----------------
5.1 Get author permission
5.2 Find suitable graphics
5.3 Create copies to work on initially
5.4 Copy Get Help

5.4.1 from Examples to /genericSG
5.4.2 Make sure the boxes are linked to the Get Help on /createguide

5.5 Apply content changes to guides
5.6 Apply colors and codes to Library Guides group

12 May 2011

Preparing and deploying pages for Intersessions

Intersession Hours & Spring Break

When to post

Put tickler on calendar for 15-16 days prior to intersession
Post hours 10-14 days prior to intersession

What to create

Create (or modify existing) intersssion hours calendar
Create a What's New Blog entry

What to update

LIBRARY HOME PAGE

Link to intersession hours in What's New
Nullify Live Chat link

The topmenu bar on the home page includes a file which has the LiveChat linking script. You will need to rename two files.

(1) FROM topmenubar-home-chat.php
TO topmenubar-home-[HOLD]chat.php
(2) FROM topmenubar-home-SansChat.php
TO topmenubar-home-chat.php

CHAT LINK ON ALL OTHER PAGES

The top banner on all other pages is controlled by a php include topsection4.php

Rename topsection4.php to topsection4[HOLD].php
Rename topsection4[sansChat].php to topsection4.php

HOURS & LOCATIONS PAGE

Uncomment hidden code for link to intersession hours on /loc/index[intersess].php

Update link to correct intersession hours calendar

Place link to intersession hours in What's New section of LS homepage
When appropriate, make a link at the top of the LS homepage.
Leave a copy of the existing locations and hours page in their folders for after the break.

Rename /loc/index.php to /loc/index[HOLD].php
Rename /loc/index[intersess].php to /loc/index.php

ASK A LIBRARIAN PAGE

Update /help/ask-winter/spring.php

Rename ask.php to ask[HOLD].php
Rename ask[winter, etc.].php to ask.php

GET HELP! TAB ON CAMPUSGUIDE

Add a box with "ask.php" text for whichever break.

MOBILE WEB (http://library.austincc.edu/m/)

Create /m/index[Intersess].php with a DIV="Interess" which has the intersession hours. {Update as appropriate.}

Rename index.php to index[HOLD].php
Rename index[Intersess].php to index.php

Pages to load on LS web server

Revised home page
Revised /loc/index.php page
intersession hours page
Revised ask.htm
Revised /m/index.php

First day after the break

Replace pages loaded on server with original pages
Or, rename pages back to original names.
Reverse the instructions for "Nullify Chat Link" on Library Home Page
Remove intersession hours links on Library Home page
Remove the box on the Get Help! tab for CampusGuides

26 April 2011

Changing Style Sheets per ACC Web

Changing the LS Web Site style sheets
to dovetail with the ACC Web Site style sheets

ACC Webmaster has finally conceded that we can forgo designing for the 800x600 resolution monitors. Hooray !!!

In a couple of weeks, he will be publishing the ACC web site using 960px width style sheet.
Correction: He will be publishing the Faculty/Staff page soon using 960px width style sheet. Other pages will be changed during the summer. (4/26/11mp)

Note: We've been using 900px on all but the Library Home Page to accommodate our kind of content. (The library home page has been using a variation of the ACC stylesheet with its 768px width.)

I will be working on converting the home page to the new style sheet (csslayout-home.css). Then I can easily change the style sheet (csslayout-page4.css) for the other library web pages after that.

New note: There are some Spanish Language pages that we may have to look at separately. At least, we need to double-check these. mp 2/22/11

See the attached document on wiki page (http://acclswiki.austincc.edu/cm/wiki/?id=78591) which outlines and describes major division widths for the new library home page style sheet.

Major Divisions LS Home

container = 960px (whole page)
topsection = 958px (contains the banner)
main-content1 = 242px (contains the left sidebar with menu and rotating read poster thumbnails)
main-content3 = 575px (center of page with changing content [midinfo = margin-left=10px] and quick search boxes)
main-content4 = 239px (contains the right sidebar with What's New, Quick Links, ACC Online Services, Feedback)
footer = 958px (contains the standard footer information and links)

Notes as of 4/26/11:

Home page changes were made and are successful. Changes made:

csslayout-libhome-960.css created for the home page.
MetaStyleScript-home960.php created to link to the new css file. (Will be renamed MetaStyleScript-home.php when ACC deploys this summer.)

Changes for the rest of the pages on the LS web site:

csslayout-page960.css created for the rest of the pages
MetaStyleScript-sub960.php created to link to the new css file. (Will be renamed MetaStyleScript-sub.php when ACC deploys this summer.)

Review will need to be conducted to see what breaks when we changeover during the summer.

Some test pages to see what this looks like now:

23 March 2011

Using CSS gradients in HTML5

I've been exploring some elements of HTML5 and was happy to see a new tool in one of the add-ons (extensions) of Firefox that helps me understand the use of CSS gradients.

Colorzilla has a tool called CSS Gradient Generator which generates the CSS style(s) for whichever colors you choose, etc. I say styles because it uses the style elements for different browsers. Here is an example:

---------------------------

<style type="text/css">

</style>

---------------------------
Note: Just in case you are unfamiliar with what "webkit" is: WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari.

You can see this work in a sample file that I created and loaded on the LS Web Site:
http://library.austincc.edu/gradient-demo.htm

22 February 2011

Faculty librarian

The dean has asked me to revise the LS web pages to say "faculty librarian" instead of "librarian" or "reference librarian." A quick check for "reference librarian" by doing a google search of the library web site produced 95 results. A similar search for just "librarian" produced 145 results. I'll need to analyze the 234 guides and 1828 pages as well.

Proposed outline of Project:

====================================
LS Web Change "librarian" > "faculty librarian"
====================================

---------------------------------------------------------------
1 Objective:
To emphasize that librarians are faculty members.
---------------------------------------------------------------

1.1 Replace instances of "librarian" on LS web pages with "faculty librarian"

1.2 Replace any pictures of librarians with pictures of librarians with students

-------------------------------------------------------------
2 Methods:
-------------------------------------------------------------

2.1 Identify instances on LS Web Pages

2.1.1 Full and Mobile LS web site
2.1.2 CampusGuides
2.1.3 LS Catalog

2.2 Make a second backup copy of all pertinent folders on the LS Web Site

2.3 Use global text replacement software to find and replace instances of "librarian" with "faculty librarian."

2.4 Have HLs and Web Cmte alert librarians to replace their pictures on LS Web pages to include students.

-------------------------------------------------------------
3 Issues
-------------------------------------------------------------

3.1 Not all instances are appropriate to replace

3.1.1 Ask a Librarian
3.1.2 Head Librarian
3.1.3 Official title: Reference Librarian

3.2 Some tutorial formats may be problematic for global replacement

3.3 CampusGuides do not have a global replace option.

-------------------------------------------------------------
4 Solutions
-------------------------------------------------------------

4.1 Disguise phrases we don't want altered.

4.1.1 First alter "Head Librarian" and Ask a Librarian with global replacement to something like "Head XXLIbrarian", etc.
4.1.2 Then replace "librarian" with "faculty librarian."
4.1.3 Go back and replace the altered phrases to their original wording.
Note: I ran into many variations and case sensitive instances of "librarian" using my text-replacer program (TextCrawler). By approaching this folder by folder, I am easily able to identify like instances of variations, etc., and replace appropriately. It is slower, but fairly easy to do.

4.2 Identify pages with official titles and don't use global replacement there.

4.3 Work with tutorial authors to identify and alter appropriately

4.4 Web Cmte will need to work with Springshare (CampusGuides) to determine if there is a global solution.

Note: I've changed the wording on the Get Help! page that most campusguides are linked to so that should take care of the most apparent instances. We'll have to closely examine other possibilities before asking individuals to edit their guides for this phrase.

20 February 2011

Documenting library@austincc.edu account uses

I am documenting the ways we use the library@austincc.edu email account.

This account is used for others (from outside of Library Services) to communicate comments, questions, requests to us.

There are automatic subject lines generated by our own email forms as well as by our LivePerson Chat service:

1-- (Ask a Librarian)
Many links on multiple web pages solicit user interaction, e.g., Get Help. These use the email form that generates the subject line, "Ask a Librarian Email."

2-- (Feedback)
The library home page has a feedback on the bottom which uses an email form that generates the subject line, "Website Feedback Email."

3-- (LivePerson )
When no one answers the chat invitation inititated by our LivePerson Chat subscription (or an Ask Academic bypass), an option is given to email a question; that subject line is "When you were offline (via LivePerson)."

4-- (ILL)
ACC employees and students can submit an interlibrary loan request online; that subject line is "Interlibrary Loan Request: username."

5-- (No specific subject line)
Other legitimate requests come directly to that email with no subject line. [Note: The library web manager has tried to minimize spam by utilizing an email form, with Captcha, linked to all instances of the character phrase "library@austincc.edu" on the library website. Periodically, she checks to see if other web authors have used mailto with that email address.]

OTHER LS DEPARTMENTAL ACCOUNTS REPORTED:

III-related accounts:

tsalrsad - used for listservs [ma]
-- no one sends email to it
-- no standard subject line
-- can probably go away when departmental emails will expire in the summer
other campus ones - rgclrsad, rvslrsad, etc. [ma]
-- no one sends email to them
-- can go away when departmental emails will expire in the summer
lsnotice - used for notices and responses [mg]
-- no standard subject line (But...When it is sent out to others there is a standard subject line: ACC Library Notice. So, if a recipient uses the reply feature, it will show "Re: ACC Library Notice" However, sometimes people just use the email address to send back some explanation, etc., and then there is no standard subject line.)
-- important - needs to remain in some form

E-Resources Librarian

ereslib - used to register admin access to vendor platforms primarily [aw]
-- receive vendor email
-- no standard subject line
-- will need to continue in some form

Other????

16 February 2011

Printer Friendly Pages in Skyline Webpac

I've begun to experiment in the Staging directory using the example mentioned in the Webpac wiki for this topic. It seems to work well.

The page I used was the recommended bib_display.html which is the page which governs the display of a bibliographic record.

To see how this works,

search anything in the catalog and click on title to display the record;
click on Print Preview to see how that record will look when printed.

WHAT I DID:

Created a style sheet called printX.css which sets certain iii existing classes to display:none. For example: .topLogoDiv {display:none;} eliminates the top banner from printing.
Created a new class -- .nonprinting {display:none} to apply to specific divisions or spans in different pages when we don't want those divisions or spans to be affected globally.
In the case of bib_display.html, I added class="nonprinting" to three page elements:
- The non-named division surrounding the token [!--{navrow}-->
- The non-named division surrounding the ResourceTable and Cover image.
- The table cell containing the token [!--{recordlink}-->.
Added a line to the wwwoptions INSERTTAG_INHEAD option to call the new style sheet. --- [link rel="stylesheet" media="print" type="text/css" href="/screens/printX.css">

TO BE DONE:
-- Decide which other pages need modification and which elements to modify.

12 February 2011

Improvements to the Catalog

We've never applied different style sheets for printing. This is an area we should explore. Information can be found on the Tips for Example Sets.
(http://csdirect.iii.com/lswiki/WebPAC/ExampleSetTips)

Need to review other tips before migrating to the 2009 example set -- maybe next year.

LS Web Structure and Content repeat of 2/8/11 email

Because we have new people around who were not here during the major redesigns of the library web site, perhaps we need to think about the history of the library web site and why we try to not vary too much from the templates we currently have. The library web site tries to follow the basic guidelines of the ACC Web Advisory Cmte and the best practices of web design.

Originally, we were supposed to use the ACC Web templates only (through Contribute) and I had to engage in the battle of how the library website delivers different content from the ACC Web site which is mostly a PR mechanism and information "about" different college departments and how students should interact with them. Since there were people in the Public Information and College Marketing (the department who was given the charge to oversee ACC web sites) who were familiar with and respected what the library had done in the past, they were able to convince the ACC Webmaster that we really do know what we are doing and they could trust us as a second tier site (one click from the ACC home page) to blend in with the ACC web site and stick to the CSS styles that the college wants. We also received the approval of Richard Smith to have a look different from the other IRT web sites.

So, that is why we have the kinds of templates we use and why we don't vary too much from them. Consistency in appearance is what ACC wants and will let us do what we need to as long as we look like the rest of the ACC Web site and follow standard best practices.

There is another chapter to this story. The IRT Sys Admin for Web and Streaming Media, Maria Youngman, is in charge of the redesign and standardization of IRT Web sites. She worked with me during the library website redesign and her intention was that we create real templates to be used with Contribute so that library authors wouldn't be able to change anything but content.

In reality, in the beginning, ACC stylesheets and templates weren't really workable for us and I had to recreate them to accommodate our needs and continue to look like ACC. It was agreed that since the library does not have very many page authors, we didn't really have to go through the arduous creation of Contribute templates as long as we didn't have too many different looks to our pages. This is why we pretty much stick to the basic types of model pages, i.e., faux templates, that we currently have. And, why as the Library Web Manager, I sometimes appear to be too controlling about the format of our web pages.

It's also one of the reasons we sought out and choose LibGuides (now CampusGuides) for our help and subject guides. Our authors have more flexibility that way within certain parameters and they don't have to know and use the stylesheets governing the library web pages.

25 January 2011

Mobile web coding for phone numbers

The LibraryAnywhere group email had useful information today which may resolve an issue I have noticed on phones other than iPhones.

On iPhones, when a text string which look like a phone number is listed, tapping that number will allow the user to call it on the phone. I do know that if you highlight the number on an Android, it will recognize it as a phone number and let you call the number. The method below is said to make automatic calls of the number on phones in addition to iPhones.

By using link coding similar to this, we should be able to make our numbers callable:

href=tel:+11234567890 = (123) 456-7890

The number code includes information to alert any phone anywhere that the number is for a call to the United States.

We need to test this on available types of phones.

14 January 2011

Mobile Initiatives Summary (January 2011)

MOBILE INITIATIVES FOR LIBRARY RESOURCES

Currently we have three mobile initiatives (January 2011)
>>>> Note: Mobile devices are automatically redirected to each of these.

Simple mobile website (LibraryMobile@ACC)

In-house development using UI

Mobile devices automatically redirected to http://library.austincc.edu/m

Links Available

Locations and Hours (All campuses and centers)

Ask a Librarian

Articles and More

Subject Guides (links to CampusGuides)
Ebsco Host Mobile
Pubmed Mobile and others like this

Borrowing @ ACC Libraries

Library Catalog (links to LibraryAnywhere catalog)

Full Library Web Site

Full ACC Web Site

Mobile catalog

Subscribe to LibraryAnywhere (LibraryThing) service who scrape our iii database information continually so no need for our staff to provide downloads.

The service provides two interfaces:

Smartphones like iPhone, Android, Blackberry (https://www.libanywhere.com/m/210)
Other web-capable mobile devices use what is called the universal interface (https://www.libanywhere.com/la/210).

This interface is also fully compliant with Section 508 and other accessibility standards so we can provide a link for text-readers in our regular catalog.

Services offered through the mobile catalog:

Searching by keyword

Advance limit by scopes, e.g., campus, media, etc.

Request and Renew

My Account information

Hours and Locations

Ask a Librarian information

Mobile research guides

(http://researchguides.austincc.edu)

Service provided by our CampusGuides vendor Springshare.

Subject and Library guides listed by subject, group, authors, featured.

Most guides are easily viewable in the mobile format but some pages/tabs should be reviewed for readability, especially information in tables.