Load Time

Please note: Since the /college-catalog-full page pull in so much info and makes so many different HTTP requests, it can take a long time to load; I just got it to come up but it took over two minutes. So, patience is key!

The “Dynamic College Catalog” Versus the “Full College Catalog”

The “Dynamic College Catalog”

The Purchase College Catalog is a dynamic section of our website. When a class, program name, school is edited, added, or removed the catalog is automatically updated based on the data in Banner. Once a year we must update and freeze this information so students can refer to this information in the future for that year as form of a contract that these are the requirements of the student.

The “Full College Catalog”

The “Full” Purchase College Catalog was created to show all this data in one place. It will need to be updated annually if page links change, but it is a page built by using LiveWhale widgets to pull in college catalog pages, office pages from the website, and also a few blurbs made just for this page.

Use the HTML page, do not save this page into a PDF and link it

If you need a paper copy and don’t mind losing a ream of paper feel free to print it.

This page prints into 916 pages, this would be daunting for most people to read and download.

If you save this as a PDF it must be made accessible:

• The PDF will need to be “optical character optimized” meaning the text must be turned into real select-able text.
• Links will need to be added again wherever there are links in the page.
• The PDF will need to be audited in Acrobat Pro for accessibility
• HTML tags will need to be added to all headings, links, lists, images, tables and paragraphs etc. to be fully accessible for all users including people on screen readers
• You will need to host a very large file on the website  (457,808 KB)

Not recommended for accessibility

From the SUNY Website Accessibility and the United States Department of Health and Human Services Section 508 Accessibility Checklists 

“Documents:

HTML is the most accessible and preferred document type”

Editing the Full College Catalog page

Login first 

Make sure you are logged into the website before editing this page first. The footer and header of the website is being hidden by CSS, so you cannot click on the “EDITOR LOGIN” link in the footer.

If you are not logged in yet

Open another page on the website and log in there. When you refresh the page you should see the editor “toolbar” at the top of the page. Now you can make your edits.

“Source Code” button

When editing the page, you must use the “Source Code” < > button from the CMS toolbar ontop. This is the only way to edit the LiveWhale “page widgets” on the full college catalog page.

Example of a page content widget

The following example is pulling in page content from the presidents page “intro” and “main” content regions:

<widget type=”file”>
    <arg id=”path”>https://www.purchase.edu/about/presidents-welcome/index.php</arg>
    <arg id=”extract”>intro</arg>
</widget>

<widget type=”file”>
    <arg id=”path”>https://www.purchase.edu/about/presidents-welcome/index.php</arg>
    <arg id=”extract”>main</arg>
</widget>

You must use a new widget for every section of a page you wish to pull in. 

Example of a blurb widget

All blurb widgets have a unique ID number. When editing the blurb you can see the blurb ID number in the URL parameters of the page.

Blurb IDs in URLs

We can see in the URL examples below that the Blurb ID number for the “Nondiscrimination Policy” is 984.

When viewing the blurb

https://www.purchase.edu/live/blurbs/984-nondiscrimination-policy

When editing the blurb

https://www.purchase.edu/livewhale/?blurbs_edit&tid=22&id=984

Blurb Code

<widget type=”blurbs”>
    <arg id=”id”>984</arg>
</widget>

Tags around the page content to make it accessible

Headings must be in proper order

Headings on a web page are used as a method for both visual and screen reader users to navigate a web page. If the headings are out of order, they present accessibility issues for screen reader users. Each of the pages that we pull into the website come with their own heading structure that would not fit into the order of this page on their own as they normally start with a heading level 2 <h2>.

Using the <article> and <h1> tags  

In order to preserve this structure we use the <article> tag (now available in HTML5) to surround the heading and content of each page. By adding the article tag around everything we can use a heading level one at the top of the <article> content and it would be okay. All the headings pulled into the content below, which normally start with a heading level 2 <h2>  are now in the proper order as long as they are inside the article.

In page anchors help everyone

Adding anchor links to get to all the sections make it much easier for all users to navigate this very long page.

If you add or remove a section, please be aware: there should be an anchor link to each section at the top of the page that links to an anchor right before each section heading.

Back to top link

There is also a “back to top” link at the end of each section so people can easily go back to the list of anchor links to navigate to the next section they want, without having to scan through all the page content to find it.

A full page section code example

<article>
    <h1><a id=”admissions”></a>Admissions</h1>
    <widget type=”file”>
        <arg id=”path”>https://www.purchase.edu/admissions/index.php</arg>
       <arg id=”extract”>main</arg>
   </widget>
   <p><a href=”#top”>Back to top ↑</a></p>
</article>

A full page section output example:

“

Admissions

Back to top ↑

Page Styles (CSS) and Scripts (JavaScript)

Styles and scripts are being pulled into the top of the College Catalog Full page via two widgets (please do not remove) them.

The widgets:

<widget type=”file”>
    <arg id=”path”>/_ingredients/templates/includes/college-catalog/catalog-full-styles-include.php</arg>
</widget>
<widget type=”file”>
    <arg id=”path”>/_ingredients/templates/includes/college-catalog/catalog-full-scripts-include.php</arg>
</widget>

Editing the Styles and Scripts

Use SFTP to edit these files here on beta.purchase and www.purchase.edu /mnt/PurchaseWeb/PurchaseWeb/www/public_html/_ingredients/templates/includes/college-catalog

catalog-full-scripts-include.php

All of your all of your JavaScript for this page should be added and edited here. The scripts that have currently been added to make the page more accessible. 

catalog-full-styles-include.php

All of your all of your CSS for this page should be added and edited here. The Styles that have been aded here are to help make the page more accessible for all and make the page print better if someone wanted to print this page out on paper (all 916 pages…).

Freezing or Saving the page for the year

1. Use Ctrl + S on your keyboard or right click on a mouse to save as the page files locally as an html file and some linked files
2. Check the file to see if you need to re-link anything. Links like “/admissions/index.php” should be full links “https://www.purchase.edu/admissions/index.php”
3. Clean up any accessible issues if they are not being fixed by Javascript
4. Put the files on the testing server (beta.purchase.edu) in the following folder:
   /mnt/PurchaseWeb/PurchaseWeb/www/public_html/academics/college-catalog/college-catalog-full/
   using an SFTP program like Filezilla
5. Link to the file on the Dynamic Purchase College Catalog page on beta.purchase.edu
6. If the page works upload the files to production (www.purchase.edu) via SFTP