Instructions for LS Web Intersession files

From LS Wiki 

(https://acclswiki-webpagesandpolicies.pbworks.com/w/page/83656444/Web Pages - Intersession)

Web Pages - Intersession

These are the pages to change:

1 Hours & Locations

1.1 Create an intersession "includes file" appropriate to the particular intersession.

Example: /loc/intersession/Aug2014.txt

1.2 Amend /loc/intersession.php to reflect the correct includes file.

Example: <?php include("intersession/Aug2014.txt"); ?>

1.3 Rename (reverse after the break) /loc/index.php to /loc/index[HOLD].php

1.4 Rename (reverse after the break) a copy of /loc/intersession.php to /loc/index.php

2 Ask a Librarian

2.1 Create or revise a page to substitute for the regular /help/ask.php

Example: /help/ask-Aug.php

2.2 At the appropriate time

2.2.1 Rename (reverse after the break) /help/ask.php to /help/ask[HOLD].php

2.2.2 Rename (reverse after the break) substitute file to ask.php

3 Home Page

3.1 Rename (reverse after the break) the home page (index.php) to index[HOLD].php.

3.2 Rename (reverse after the break) index-LSHome-Intersess.php to index.php

3.2.1 Note: has the Limited Hours announcement in top left column

4 HeaderNav-Intersession.php

          4.1 Changes the NavBar code to point to the correct pages.

                    4.1.1 /includes/navbar-interess.php

                    4.1.2 /includes/nav-minimal-intersession.php

          4.2 Rename (reverse after the break) HeaderNav.php to HeaderNav[HOLD].php

          4.3 Rename (reverse after the break) HeaderNav-Intersession.php to HeaderNav.php.

5 Campus Guides "Get Help!" tab

5.1 Correct intersession hours info on the "Ask examples for breaks" tab on the AAA Storage Info Campus guide

5.2 To deploy to all guides with a Get Help! tab, add and reuse this box on the Get Help! tab of these pages:  (reverse after the break)

5.2.1 Creating Research Guides (http://researchguides.austincc.edu/createguide)

5.2.2 Help for Library Guides (http://researchguides.austincc.edu/genericSG)

Update on Small Screen Banner/Nav Bar

 Get rid of any navbar.htm

 Use Textcrawler to replace "navbar.htm" with "navbar.php"

 Finish pages for nav-minimal.htm

About Us

 /gen-info/about-Nav.php

Locations & Hours

 /loc/LocHours-Nav.php

Services & Programs

 /gen-info/Services/SvcProg-Nav.php

Books, Articles, Videos

 /eresources/searchall.php

Get Help / Chat

 /help/getHelp-Nav.php

Your Library Record

 /eresources/YourRecord-Nav.php

Quick Links

 /eresources/Qlinks-Nav.php

 Explore sample files for exact lines of code

Note any groups of exact code.

   

   

    

 Use Textcrawler to replace exact lines of code with HeaderNav php include.

Small Screens Banner & Navigation Bar Fix

Banner & Nav Bar For Small Screens

Minimal Nav Bar

• Parse navbar.php
• Create individual files ( in includes/NavPages)
• AboutUs
• LocHours
• SvcProg
• BksArt
• GetHelp
• YrRecord
• QLinks
•  Create sub Includes (includes/NavPages)
• Create pages in appropriate folders
• example page: About-Nav.php in /Gen-Info/ folder
• Use only minimal info
• Include appropriate includes/NavPages file
• Create nav-minimal.php
• no drop menu
• link to new minimal pages
• may need to reduces font size
• See also: Script that works

Banner: header-minimal.php

• =    Smaller ACC Logo
• =    Reduce space over LS logo
• =    Modify ACC Links
• =    Delete ACC Links
• =    See also: Script that works

Script that works

    <header2 class="show-for-small">
<!-- This next section contains header for small screens. -->
<?php include("http://library.austincc.edu/includes/header-minimal.php"); ?>
    </header2> <!-- end of minimal header -->

    <header class="show-for-medium-up">
<!-- This next section contains header for medium up screens. -->
<?php include("http://library.austincc.edu/includes/header.php"); ?>
    </header>
 
 <topnav2 class="show-for-small">
<!-- This next section contains top navigation bar for small screens. -->
<?php include("http://library.austincc.edu/includes/nav-minimal.htm"); ?>
</topnav2> <!-- end of minimal nav -->

 <topnav class="show-for-medium-up">
<!-- This next section contains top navigation bar for small screens. -->
<?php include("http://library.austincc.edu/includes/navbar.php"); ?>
</topnav> <!-- end of drop menu nav -->

• Gather into one file (HeaderNav.php)
• Replace current separate lines of code with HeaderNav php include

Minimal Nav Bar Menus

Things that would  make the smaller screens look and work better, maybe:

• Use the same mechanism as with hiding the left side bar on 2nd tier pages to hide the navbar.php and show the minimal nav bar file.  (http://foundation.zurb.com/docs/v/4.3.2/components/visibility.html)
• To be created nav-minimal.php
• each entry 
• no drop menu
• link to a page with nothing but links that would be on the drop menu
• make all equal size so will display neatly
• note: they are already of equal size
• maybe need fewer?? or smaller font
• Think also about making the banner smaller by hiding and showing
• smaller ACC logo
• reduce space over LS logo
• leave ACC home off ACC links??
• See mind map (http://irtstaff.austincc.edu/peloquin/a-web/SmallScreensNavBanner.pdf)

Banner for Campus Guides

I've been working on banners for Campus Guides.  Here are examples of two different banners using the different guide groups:

http://irtstaff.austincc.edu/peloquin/CampusGuides/NewBannerEG.htm

I am now able to add the navigation bar and have an example here:
http://researchguides.austincc.edu/BestEBN
Some things to note:

• This is an abridged nav bar because the original construct is too wide for the Campus Guides platform.
• I had to create a separate style sheet to link to called CG-nav.css
• This nav bar can be used with whatever banner we decide on.
• I'd like to reduce the vertical space the bar occupies.  I'll work on this.
• I'd also like to do the same with the banner so will work on that as well.

Amendment to entry:

• I did add the nav bar to all of the test groups 
• I did reduce the vertical space on both the nav bar and the banner.
• Reduces the cell height to 35 and then reduced all instances of 50px to 35px on nav bar.
• Resized the graphics height to 88px and reduced padding to align properly in banner.

Website Launch set for 20 July 2014

EVENTS:

• Student testing of the home page was done the second week in July. 
• Information gotten from the survey was incorporated into the home page.

• Launch is planned for 20 July 2014.  
• A sneak peek slideshow is available for Library Users and posted on the home page.  See below.

---

Coming Soon -- 20 July!
Take a SNEAK PEEK at the new look of the Library Web Site.

Very soon, Library Services will be moving to a new look to match the new design of ACC Web Site. All the usual features and services are still there.

---

• The structure, folders, files, reviewers, editors are being compiled to maintain the redesigned site.
• Training sessions for editors will be held

•   The time before classes begin for the fall will be used to tweak and correct the new site.

Logo, icons, directories

Directories subsume Campus Pages

What's on the page:

• campus library address
• link to map
• hours of operation
• checkout and ref desk phone numbers
• list of staff -- email, etc.
• photos of both library staff and facilities added to the slider on the page 
• links to other directories

Note:  Links to campus pages on other pages (like hours/loc) have been changed to directory pages

Info Lit Logo
The IL Team has a new logo.
The nature of the new logo makes creation of an icon problematic. This is my latest attempt.  I have asked Paula Ribeiro for advice.
Hmmm... another attempt Blue too close in color to the Question mark.

Progress as of 17 June 2014

Done since last post:

• All FAQs (Thanks to Steve and Ashley for their help)
• Almost E-Resources pages
• All Circulation Pages (under review by the Circ Facilitator and Web Team)

A meeting is scheduled on Thursday, 6/19/2014 with pertinent parties to discuss the Community Outreach pages.

Campus Library Pages

• will be subsumed into the Campus Library Directory Pages.
• HL have been asked for additional facilities photos for the slider on each Directory page.

Check on What's Left

Just a check on what is left to convert ...

Out of 420 pages, we have only 103 left to convert.
 [Note:  Not all of these needed conversion but it's a good general number to use.]

Finished:

• pages for the IL team 
• Those are in review to tweak as necessary.
• pages for the Ref team

Almost finished:

• All FAQs
• Steve and Ashley are finishing those soonest.

Next:

• Meeting with the Circ Facilitator this week
• Some of those pages are already done.
• Have info from most other responsible parties
• Will begin work on E-Res pages next
• Need to meet with:
• Melinda re: Accessibility Pages
• Julie re: About us pages and Community Outreach pages
• Toyya and Leigh re: EXT (just a general not accurate designation)

Progress 5/29/14

•  As I create draft pages, I contact those responsible for review (if they are on contract).

•  I edit this web page on a regular basis -- sometimes a day behind -- to easily get to the completed drafts.
• Caveat: As I learn new tricks, I try to go back and update earlier drafts so that all will be consistent but I must admit that I haven't fixed all of them yet.  The newer ones, of course, are up-to-date.

• I am currently working on a project with Steve and Ashley to produce the includes files for all the FAQs.

• As I worked on the prototypes for the LS Staff Directories, I wondered if we could combine the Directory and Campus pages somehow.  What do you think?  Any ideas?
• Keep in mind that we are designing for all screen sizes.

Review and updates for Ref Team pages mostly complete

• A grid showing the completion or progress on pages for which the Ref Team is responsible was sent to the Ref Team Leader so that they can review the relevant draft pages.
• Corrections or other changes can be made at any time.
• The page on plagiarism for faculty will need input from the author: Red Wassenich.
• Changes to Ask a Librarian email form can wait until later since this form isn't dependent upon the responsive template.

Working on these pages gave us an opportunity to refine some general concepts as to page layout and how "includes" files best work.

Progress 5/2/14 templates

Progress has been made on some types of pages. Templates are saved in the /templates/ folder.
So far, these templates have been completed:

• Dir-template-2cols.php
• FAQ-Template.php
• GenInfo-template.php
• ls-accordion-base.txt

In general, the template is comprised of the code for the general structure of the page with example php includes where page specific data is to be pulled in.  Example {Gen-Info Template}:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>General Information Template</title>
    <link rel="stylesheet" href="http://library.austincc.edu/css/app-LS.css" />
        <link rel="stylesheet" href="http://library.austincc.edu/css/extra-LS.css">
    <script src="http://library.austincc.edu/bower_components/modernizr/modernizr.js"></script>
  <script language="javascript" type="text/javascript"
 src="http://library.austincc.edu/scripts/dynacrumbs-love.js">
  </script>
  </head>
  <body>
    <header>
<!-- This next section contains header for next tier pages. -->
<?php include("http://library.austincc.edu/includes/header-next.php"); ?>
    </header>
   
<!-- This next section contains top navigation bar. -->
<?php include("http://library.austincc.edu/includes/navBar.htm"); ?>

    <section class="content"  id="LScontent">
    <!-- two columns -->
<div class="row">
<div class="large-12 columns"><span class="crumbs"><script type="text/javascript">createBreadcrumbs()</script></span></div> <!-- end of crumbs -->
</div> <!-- end of row -->

    <!-- two columns -->
    <div class="row">
        <div class="large-3 columns">
            <h2 style="font-size: 100%;">See Additional Resources:</h2>
<!-- This section includes the specific see additional resources file. Use the "base" as a template to save with specific name.-->
<?php include("includes-GenInfo/SeeAddResources-base.txt"); ?>

<!-- This section includes the Read Thumbs file. -->
<?php include("http://library.austincc.edu/includes/ReadThumbs.php"); ?>
        </div>
        <div class="large-9 columns">
<!-- This section includes the file for this particular page. -->
<?php include("includes-GenInfo/whateverGenInfo.php"); ?>
        </div> <!-- end of big column -->
   
    </div> <!-- end of row -->
    </section>

    <!-- This section includes the LS footer -->
    <?php include("http://library.austincc.edu/includes/footer-LS.php"); ?>

Folder and includes subfolder design

Folder and includes sub-folder design

Using the Services folder as the inaugural example:
... /gen-info/services/includes-svc

So, any page in the services folder would contain scripts pulling page content from the /includes-svc/ folder.  Example:  Reference Librarians by Campus page
http://irtstaff.austincc.edu/peloquin/AY14-Redesign/gen-info/services/RefLib-byCampus.php
                      <?php include("includes-svc/ref-libs-campus.htm"); ?>

Thoughts on the InfoLit pages:

• Information on Information Literacy has been in two different folders within the HELP folder:
• InfoLit
• KnowHow
• This happened because the Know How initiative was conceived and implemented without consulting the web master or the web team.
• Some elements of the original Know How initiative are no longer active.
• Conclusions:
• KnowHow pages should be subsumed into the InfoLit folder.
• Inactive elements should be archived and not linked on the redesigned pages.
• Any related broken links from outside the LS Web Site reported to us will be resolved by redirects.
• Structure of the /help/InfoLit/ folder:
  ... /help/InfoLit/includes-InfoLit

Summary of meetings with LS Web Content providers 4/4/14

Summary of meetings with LS Web Content providers 4 March 2014 {10am-noon HBC 301.7 and 2-4pm HBC 215}

There were two separate meetings where most of the web content providers met to see the structure of the redesigned site and some first drafts of page possibilities.  In addition, the Circulation Facilitator, the Reference Team, the E-Resources Librarian, and the Information Literacy Team discussed their ideas of what would happen in the future in their areas.  Note:  Some participants attended both meetings.

Content providers have been looking at the pages for which they are responsible.  Some of them have already submitted changes and desires.  Some have chosen not to review at this time and told the Web Team to simply move all pages over.  Some will be submitting changes before the end of the session and/or asking to meet with Margaret.

Meeting agenda:

• Website Structure
• Where you fit in
• Responsive Design - row/columns
• Content Folder Structure
• Page Structure
• Demo Draft Pages
• Draft Home Page
• Simple info page in Help folder
• Use of Library logo icons to brand a page:
• Same info lit page with info in two columns
• Simple info lit Know How logo page in Help folder
• Example FAQ page
• Long info page in Services folder with printable brochure
• Hours pages to test accordion display and tables
• Directory pages
• Search the site
• What's next?
• Margaret and Ashley test pages with students/faculty
• Pages revised using comments from our tests
• LS staff review and offer additional idea
• Questions
• Plans for the future discussion
• Circulation
• Reference
• IL
• E-Resources

Next Tier Pages Template

Included in the basic page template:

• common styles (css), scripts, includes files (header, navigation bar, footer)
• simple row/column structure which can be altered to best display the content.

---

How rows and columns work in responsive design is illustrated by this web page:

Next Tier Template with Rows

Content providers should review this and other draft pages before consulting with the web manager about the pages for which they are responsible.

Update 3/25/14 People Responsible for Web Content

Preparations for a meeting of those responsible for LS web content is underway.

Email sent to participants 3/24/14:

Caveat:  This is a large group of people who are responsible for the content on LS Web pages.  This doesn't necessarily mean that you do the actual page input.  Think big picture.  What is said.  How it appears.  How it fits in with other content.

I'd love to have everyone in the same room to express ideas but with a group this large it may not be possible.  So, I've created a Doodle scheduling poll with some possible meeting times the beginning of April.  We may have to have one or two different meetings that can accommodate people's schedule.  You are expected to meet with only one of those.  If you cannot meet, please talk with your team/group to make sure that at least one person with appropriate knowledge can attend.  I would like for a member of the IL team to be at both meetings.

For those of you representing services -- Reference, Circulation, Info Lit, eResources -- who have lots of content on the LS Web Presence, no matter where, please be prepared to talk about what you think will be happening in the next 3 years so we can make our site flexible enough to include those plans.

Email sent to participants 3/25/14:

After consulting the doodle, I've determined that the best times are on Friday, 4 April.  Choose your meeting time and send me an email so that I'll know who is attending what.
Group One:  10am-noon HBC 301.7
Group Two:    2pm-4pm  HBC 215.0

I'll give an outline of how the site will be generally organized and show the draft pages for an idea of what to expect.  You should

• Be prepared to talk about your plans (vis-a-vis web content) for the next 3 years.
• Be prepared to listen to other content planners and discuss possibilities.

The Web Team will take all information into consideration when planning the LS Web Presence and new site redesign and organization.

Update: 3/17/14 -- Instructions for the first review of draft pages

Web Team First Exploration of the Draft Pages:

Caveat: 
The LS Web Site redesign is based upon a responsive design template created by Robert Ferguson, IRT Multimedia Developer.  All elements are meant to be responsive to the size of the screen you are using so that we do not have to have a separate mobile website.  (Note: The catalog will not be part of this redesign.) DEADLINE: 3/31/14

Please test on a PAC, on your iPad or other tablet, on your phone.

This exploration is for the purpose of determining content and arrangement on the home page and to illustrate what the next tier of pages might look like, there are examples:

• A simple information page
• A simple information pages to explore branding with logos like Know How
• A page to replace very long information pages with a printable more info brochure. (Note: We will use either this format or break the long pages into multiple pages.)

DRAFT HOME PAGE - WHAT TO LOOK FOR ...
What should be there and what we might change.  Before deciding, look at all the elements on the page:

• The Navigation Bar which will be on every page of the web site.
• Note: the Services menu cannot be any longer and display correctly but what is there is up for grabs.
• The body of the page.  Notes:
• The only element that isn’t up for review is the upper right column with the heading Overview.  This short section will be used to toggle changing information like alerts and announcements.  If there is nothing to announce, etc., then the overview info will occupy that place.
• I’ve consulted Adrian on the Find Books, Articles, Videos box.  I’ve tested some elements on whomever was handy as I was working on the section.
• The Footer which will also be on every page.

Consolidate your comments into two emails to the whole Web Team –

• one email about the Home Page; 
• another about your thoughts regarding next tier pages. 

We will take these comments and come up with a draft to use when testing with students.  Ashley and I will come up with a common testing method.

Progress as of 7 March 2014

Finished:

• Draft of home page design
• Drafts of next tier pages:
• Simple info page can be used for many current pages, e.g., gen-info or faqs
• Simple info page for Know How / Information Literacy
• Using the Know How logo on the left sidebar
• Longer page information
• Multiple columns looks too busy.
• If not multi-columned, pages are too long for new look.
• Longer pages like DL and other sites (ECS, Centers, etc.) often repeat information that already exists.
• Suggest linking to the info rather than repeating.
• Can create a print-friendly page with all the linked info on it.
• Created a footer to be used on every page.
• Created pertinent CSS to make everything work.
• Created standard "includes" files:
• header-home (for home page only)
• header-next (for all next tier pages)
• navbar (to be included on all pages)
• footer-LS (to be included on all pages)

To Do Next:

For week after Spring Break

• Create a draft print-friendly page example for long pages.
• Make all draft example pages comply with includes, etc.
• Pull into a directory for test groups to look at (LS Web Team right now)
• Create a launch page explaining Responsive design and what we should look for.
• Gather suggestion for links to add or delete
• navbar / footer (exception Services which has reached its workable length)
• content for different sections on the home page (exceptions Overview which is a section that will toggle with alerts, announcements, etc.)

For People Responsible for Page Content by end of March

• Create  a document template to illustrate where their input might go.
• Create directory/folder structure for them to see.
• Create a  pathway/process for input to be given to Web Team.

Progress as of 2/27/14

• Working with the IRT responsive template is proving to be good.  I am able to modify it to work for us fairly well.
• Used information from the HomePage links survey to determine what might go on the Navigation Bar.
• Finally figured out how to make the bar wider to accommodate 7 items instead of 6.
• Temporary drafts can be seen on http://library.austincc.edu/designtest.php
• NOTE: testing different things on different drafts so none really represent what the page will look like yet.
• Worked with a subgroup of the Banner subteam (Dave Wilson & Ashley Carr) to determine if a use the library icons might work for both IL and all LS web stuff.
• They like the idea so will work that into a draft for others to view.
• Ashley and Dave also gave me ideas about the place of elements on the home page and maybe subsequent pages.
• NOTE: will develop a subpage idea template to find out how subpage authors might like their information to look.  Need meeting with page authors.
• Currently working on an image slider for the Read Thumbnails. {See UPDATE}
• The IRT template has some slide code which I will test.
• I've also found a javascript slider code that provides randomness of display that I think might be a better solution. (http://www.javascriptkit.com/script/script2/randomslide.shtml)
• I've massaged it and it works in a separate html page.  
• Need to put into a responsive draft to test
• The issue of updating the code files when we add new images is a minor problem
• {UPDATE} Because of the testing we did with several people, Read Poster thumbnails will not reside on the home page but will reside in the left side bar on some next tier pages. The current php rotate script works just fine for this purpose.  Reason: Every person said that the thumbnails were too distracting and did not contribute anything in particular to the page.  See link to Read Poster gallery in the Nav Bar - About Us.

Adding Spotlight on ... and What's New Feeds to What's new area

Added the following Feed scripts to the What's New area of the library web site so that the text updates as new entries are added to the blog.  Note:  When needed, one can add the static blog url for a particular posting such as the reminder to watch your belongings. (http://lswhatsnew.blogspot.com/2013_06_01_archive.html) above the feed scripts.


<div id="feed-wrapper" style="margin-top: -15px;">
<!-- listing for what's new -->

<script language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Flswhatsnew.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y"  charset="UTF-8" type="text/javascript"></script>

<noscript>
<li><a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Flswhatsnew.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y&html=y">View RSS feed</a></li>
</noscript>

<!-- listing for Spotlight on -->
<div style="line-height: 0.9em;padding-left:10px;margin-top: -10px;">
<p style="margin-bottom:-8px;font-weight: bold;">Spotlight on ...</p>
<script language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fspotlightaccls.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y"  charset="UTF-8" type="text/javascript"></script>

<noscript>
<a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fspotlightaccls.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y&html=y">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;View RSS feed</a>
</noscript> </div></div> <!-- end of spotlight style end of feed-wrapper-->

Ay14 Redesign - Screen resolution

I'm working on page widths, etc. and decided to check for the most common screen resolution for web-designing.  So, I'll be designing for 1366x768 as a maximum size.

I found a very good site with comparisons for this year:

Best Screen Resolution to Design Websites
Last Updated: January 7th, 2014 |By Shaun Anderson
http://www.hobo-web.co.uk/best-screen-size/

This is supported by earlier web articles:

 W3 Schools - Screen Resolution Statistics
http://www.w3schools.com/browsers/browsers_display.asp

Statcounter Finds 1366 X 768 To Be Most Popular Screen Resolution For The First Time
By Donald Melanson  April 11th, 2012
http://www.engadget.com/2012/04/11/statcounter-finds-1366-x-768-to-be-most-popular-screen-resolutio/