The following guide details best practices for implementing the New Fully Accessible and Responsive Web Pages released with ILLiad v9.1.
To ensure any changes made to the default web pages adhere to accessibility standards, please review the W3C Web Content Accessibility Guidelines and the Section 508 Accessibility Program.
To maintain responsive web design best practices, please review the Bootstrap 4 documentation before making changes. For example, logo images can be made accessible in both the PC and mobile view by adding the bootstrap class "img-fluid" as mentioned in the Bootstrap image documentation.
Table of Contents
Step One: Download the New Pages and Upload to Testweb
Follow the steps below to download the new v9.1 ILLiad web pages and add them to your Testweb directory. Please note that ILLiad must be updated to v9.1 in order to use the v9.1 web pages.
- Download the latest version of the v9.1 default web pages from the ILLiad Downloads page.
- Make a backup of the current files in your Testweb directory.
- Move the v9.1 pages into your Testweb directory via FTP or, if you have direct access to your server, by copying the files into the Testweb folder (c:\inetpub\wwwroot\illiad\testweb). Your local ILLiad administrator or Atlas can also assist you with this process, if necessary.
- View the new pages and decide which edits you would like to make using the information in step two of this article as a guide by logging into the test web pages via the Testweb URL: http://yourILLiadWebAddress/testweb/logon.html
- Keep a copy of the v9.1 pages on your local machine, and use these to make your edits with an application such as Notepad++ or Visual Studio Code.
- After making changes to the files on your local machine, re-upload the new files to your Testweb directory to view and test your changes.
Step Two: Make Customizations and Test
Simple Customizations | Testing the New Web Pages with OpenURL
Before You Begin: Best Practices for Editing the Web Pages
- Make changes on a copy of the web page files saved to your local machine rather than directly to the files hosted on your server within the Testweb directory.
- Limit the number of changes made at once, and test after each change. Make sure to:
- Verify that all required fields are working properly.
- Make test requests through the new web pages, then check the ILLiad Client to verify that the information was transferred correctly.
- Add comments to the code each time you make a change, explaining what you have changed and why.
- For CSS files, use the format /* Comment Text */
- For HTML files, use the format <!-- Comment Text -->
- Hidden fields for username, sessionid, and formstate
- The <#FORMSTATE> DLL tag
- Illiad.dll or any other DLL files in your web directory
Simple Customizations
Add a Logo | Edit the Navigation Bar Options | Edit Font and Color | Add or Change Fields on Forms
The following list contains a few easy changes you can make to the web pages in order to customize them to your needs. Please make sure to ask your marketing department if you will need to use any specific fonts, colors, or logos for branding.
Add a Logo
To add a logo to your web pages, follow these steps:
- Obtain a copy of the image file for the logo from your marketing department.
- Place a copy of this file in the images folder located within the Testweb directory: "testweb\css\images".
- Add the code for the logo to Logon.html (default line 28) and Include_header.html (default line 5):
|
Change this: |
|
To this: |
Edit the Navigation Bar Menu Options
You can edit the options that appear on the dropdown menus in the navigation bar by making the following changes to the Include_nav.html file.
Changing the Name of a Menu Option
To change the name of an option that appears on a dropdown menu, you will need to edit the display text for that option in the HTML. For example, to change the "Article" option on the "New Request" dropdown menu to display "PDF" instead, you would make the following change:
|
Change this (default line 20): |
|
To this: |
If you change the name of a page in the dropdown menu, you should also make that change on the corresponding web page to which it links, and on any other affected pages.
In the previous example, because the name of the link to the Article Request form has been changed from "Article" to "PDF," ArticleRequest.html and EditArticleRequest.html should be edited to display "PDF Request" to the user instead of "Article Request."
Removing a Menu Option
You can remove an option from a dropdown menu by commenting out the code for that option. For example, to remove the "Multimedia" option in the "New Request" dropdown menu, you would make the following change:
|
Change this (default line 28): |
|
To this: |
Edit Font and Color
The colors and fonts used to style the ILLiad web pages can be edited in the illiad.css file. By default, ILLiad uses the Google Fonts library. Your marketing department may require you to point to a specific font for branding purposes. If so, you can edit the font library that ILLiad points to here:
illiad.css (default line 7)
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');Using Developer Tools to Test Changes
Many browsers have built-in "Developer Tools," which allow you to click on any part of a web page to see which part of the code controls the styling for that part of the page, and also to test changes to the color and font directly in the browser.
In the example below, the color of the "ILLiad" and "Update Profile" headers has been changed to red using the browser's Developer Tools. The Developer Tools window also contains information specifying that the code to control this setting is located in illiad.css line 23:
Accessing Developer Tools
The following list contains information on how to access the Developer Tools on a few popular web browsers. Please see your web browser's documentation for information on accessing Developer Tools if it is not listed below:
- Google Chrome: Right-click on the part of the page you want to change and click "Inspect."
- Firefox: Right-click on the part of the page you want to change and click "Inspect Element."
- Safari: Right-click on the part of the page you want to change and click "Inspect Element."
Add or Change Fields on Forms
Changing Field Names
You can change the name of a field as it appears on a form by editing its display text. Remember that if you make a change to a field on a request form, you must also make the same change on its corresponding edit page.
For example, to change the name of the "Title" field on LoanRequest.html to display "Item Title" instead, you would make the following change:
|
Change this (default lines 29-32): |
|
To this: |
You would then also need to update that field on EditLoanRequest.html:
|
Change this (default lines 30-33): |
|
To this: |
Adding Fields
You can customize the request form to add additional available fields such as PMID or DOI, or configure one of the blank item info (e.g., ItemInfo1) fields to add a custom field for any other desired information. The following example shows how to use ItemInfo1 to collect information for a required "Arranger" field on a web request form:
<div class="form-group col-md-9">
<label for="ItemInfo1">
<span class="field">
<span class="<#ERROR name='ERRORItemInfo1'>">
Arranger
<span class="req">(required)</span>
</span>
<br/>
<span class="small-notes">
Please write out the full name
</span>
</span>
</label>
<input type="text" class="form-control" name="ItemInfo1"
id="ItemInfo1" value="<#PARAM name='ItemInfo1'>">
</div>Testing the New Web Pages with OpenURL
After customizing your new web pages, you should test them with your OpenURL link resolver to ensure that there are no issues. To test OpenURL with the new pages, use the following steps:
- Find an item to request via OpenURL.
- Click to request the item. Your ILLiad logon page should appear.
- Copy the URL for this page and paste it into a text editor such as Notepad.
- Edit the URL to point to your Testweb server (see the example below).
- Copy and paste the new Testweb URL into your web browser and navigate to this page.
- Log in and review the information on the request form to confirm that the OpenURL link is working properly.
Adding Testweb to the URL
To point your URL to Testweb, just add "testweb" to the beginning of the link address. Please note that your URL may be slightly different than the examples below depending on how your web pages are configured.
Single Server
|
Change this:
|
|
To this:
|
Shared Server
|
Change this:
|
|
To this:
|
Step Three: Go Live
When you have made all the necessary customizations to the new web pages and have tested them thoroughly using Testweb, the next step is to go live by moving the new pages from the Testweb directory to the Production directory (default location: c:\inetpub\wwwroot\illiad or c:\inetpub\wwwroot\illiad\site for shared server locations).
