Template Release Notes

v-2019-05: What’s New in this Version?

  • New version number
  • Mobile release
  • New Panopto templates
  • New Pre-flight Technology Check template
  • Updated SPS Icons page
  • Updated Discussions CSS
  • New Canvas Logo

New version number

The version number has been incremented to so that the current template can be identified by Helix and its structure compared to previous versions.

Mobile Release

The mobile stylesheet has been deployed for all templates version v-2019-04 and up.

New Panopto templates

The following new templates specifically related to the use of Panopto have been deployed:

  • Individual Presentation (Panopto)
  • Presentation Tech Check (Panopto)
  • Subject Matter Topic for Discussion (Panopto)
  • Video Discussion Tech Check (Panopto)

The submission language in these templates has been rewritten to reflect the implementation of individual-specific folder (i.e., "My Folder") in fall 2019. 

New Pre-flight Technology Check template

A new Pre-flight Technology Check page template has been added to the Getting Started module. For courses pushed from Helix, this page provides students with a series of automated system checks, based on the technology currently implemented in their course. This page can check if students' computers meet a series of requirements for the following technology:

  • Anaconda
  • BigBlueButton
  • Canvas
  • Codio
  • Idera
  • Panopto
  • Proctorio
  • R
  • Turnitin
  • Voicethread
  • Zoom

Updated SPS Icons page

Redundant icons have been removed from the SPS icons page and icon names have been updated to reflect the current icon set. Older icon names continue to be supported.

Updated Discussions CSS

The desktop stylesheet has been updated to obscure the name and avatar of discussion authors. This was done to mitigate confusion previously caused when an Instructional Designer created a discussion. The Instructional Designer's name and Canvas avatar are associated with all discussions they create, and were visible to students prior to this update.

Please note that names and avatars are still visible on the mobile Canvas Student app.

New Canvas Logo

The most current Canvas logo is now reflected on the Technology and Support page.

v-2019-04: What’s New in this Version?

  • New version number
  • Mobile beta release
  • New icon set
  • New placeholder images/Desktop image replacement
  • Adobe Connect phase out
  • Syllabus update
  • Adjustment to editable/non-editable regions

New version number

The version number has been incremented to so that the current template can be identified by Helix and its structure compared to previous versions.

Mobile Beta Release

A new stylesheet has been developed and deployed to support the mobile student experience. This stylesheet closely adheres to the Columbia University School of Professional Studies Identity Guidelines (Winter/Spring 2019), in an effort to maintain brand consistency throughout the student lifecycle.

New Icon Set

New icons have been designed, developed, and deployed in an effort to maintain brand consistency. Per the updated identity guidelines, icon design has universally moved away from filled shapes to line art.

The "reading guy" block icon has been removed from the resources page in lieu of a books icon inline with the Required-Readings header and a camera icon inline with the Required-Videos header.

New Placeholder Images/Desktop Image Replacement

In response to the trend for placeholder images to go unchanged in published course content, a student-appropriate placeholder icon has been deployed, using the SPS crown vertical mark on About-the-Faculty pages and readings icons on the syllabus.

To reduce bandwidth requirements, placeholder images on Module-Overview pages have been changed to the SPS crown vertical mark in the mobile stylesheet.

When users open the Canvas editor, that placeholder will display the legacy image, with the text, "Drag and Drop Image Here," encouraging editors to update images that are intended to be replaced with final images.

Drag-and-drop image replacement on the About-the-Faculty page and the syllabus has been refined for more consistent behavior.

Adobe Connect Phase Out

On the Technology-and-Support page and the Class-Session-Information-and-Resources page, references to Adobe Connect have been removed.

Syllabus Update

Added class-recording policy to syllabus, per SPS Academic Excellence Committee.

Adjustment to Editable/Non-editable Regions

The mceNonEditable class has been applied at the top-most parent element of each template, making templates globally non-editable in the Helix rich editor (tinyMCE). Only the elements specified by the mceEditable class can be edited in the rich editor. This is to accommodate significant issues with cursor placement when multiple non-editable elements are on the page.

The style indicating editable regions has been assigned to mceEditable class, rather than to its parent element with the cu-editzone class. This encourages users to click in the appropriate region, avoiding some of the confusion caused by clicking in the padding between these classes.

In Helix, styles associated with cu-donotmodify and mceEditable now only render when tinyMCE is  present, presenting a more consistent representation of how pages will look in Canvas. The green, dashed border around mceEditable also renders in the Canvas editor.

v-2019-03: What’s New in this Version?

  • New version number
  • New cu-zone class

Both of the additions to the templates serve the version updating feature in Helix.

New version number

The version number has been incremented to so that the current template can be identified by Helix and its structure compared to previous versions.

New cu-zone classes

This release of the templates includes a new cu-zone class. Those new classes will be used by Helix to identify sections of user-generated content that should be preserved as pages are updated to current templates. When a new element is added to templates, the number appended to the cu-zone classes will iterate up, regardless of that new element's order in the HTML structure.

v-2019-01: What’s New in this Version?

  • New SPS Icons
  • Module Overview: Consistent Image Drag-and-Drop
  • Syllabus: Corrected Edit-Zone Numbering
  • Getting Acquainted: Added Submission Instructions
  • Class Session Information and Resources: Updated External Link to Recommended Headsets
  • Removed: FACULTY INSTRUCTIONS: Final Grade Submission
  • New Lecture Template

New SPS Icons

SPS icons have been re-drawn and base-64 encoded as SVG data in the custom Canvas stylesheet, replacing previous PNG-encoded images. This has a three-fold benefit of smaller CSS file size, shorter load times, and sharp images at any screen resolution.

Module Overview: Consistent Image Drag-and-Drop

In previous versions of the Module Overview template, dragging and dropping an image into the module-overview page would render inconsistently, dependent on which area of the image the cursor was placed when releasing the mouse button. This has been fixed.

Syllabus: Corrected Edit-Zone Numbering

In previous versions of the syllabus template, the regions used for designating editable zones in Helix were incorrectly numbered 0, 0, 1, 2, 3. The sequence has been corrected to 0, 1, 2, 3, 4.

Getting Acquainted: Added Submission Instructions

Discussion-submission instructions have been added to the Getting Acquainted discussion forum template to be consistent with other discussions, assignments, and quizzes with submission instructions.

Class Session Information and Resources: Updated External Link to Recommended Headsets

In early iterations of the Class Session Information and Resources template, SPS Online Support recommended the affordable and effective Logitech USB Headset H390, and linked to the headset's Amazon listing page. That particular headset was removed from Amazon, several years ago, and was replaced with the Logitech USB Headset H570e on the template page.

The H390 has become available once more on Amazon, and is less than half the price of the H570e, so it is back on the Class Session Information and Resources template.

Removed: FACULTY INSTRUCTIONS: Final Grade Submission

CUIT includes and maintains a page, Submit Grades To SSOL, in the left navigation. This page includes instructions for final grade submissions to Student Services Online, making the template page maintained by SPS redundant and outdated. As such, the template page has been removed.

New Lecture Template

A new lecture template page has been created. This template is a winnowed-down version of the resources page, and is intended to complement the 'Lecture' learning-activity type in Helix. It features two placeholder videos: one for a required lecture and one for recommended.

Since asynchronous lectures are not commonly used in SPS courses, only one instance of this page has been included in the template site, in HIDDEN MODULE: Designer Resources.

v-2018-03: What’s New in this Version?

  • Version Identifier
  • Edit Zones
  • Module Overview Image Drag-and-Drop
  • SPS Icons
  • Syllabus Update
  • Content Boxes

Version Identifier

A version identifier will be used to indicate the academic term in which a template is deployed to users (students).

Template updates occur with each of SPS Curriculum and Instruction's design cycles, which coincide with academic terms. All template versions will be identified by a class attribute in the top-most div element, using the format class="v-yyyy-xx", wherein xx numerically represents the academic term in which the course using the template will be deployed. The following identifier is used in the templates that will be deployed in fall 2018 courses:

<div class="v-2018-03">

Templates for spring 2019 courses will be identified as follows:

<div class="v-2019-01">

Templates for summer 2019 courses will be identified as follows:

<div class="v-2019-02">

Templates for fall 2019 courses will be identified as follows:

<div class="v-2019-03">

Please note that the version numbers indicate the term in which courses are deployed, not the term in which they are designed and developed. There are three design cycles in the calendar year, and courses are typically designed in the academic term prior to their deployment. I.e., spring courses are designed in the fall academic term, summer courses are designed in the spring academic term, and fall courses are designed in the summer academic term.

Edit Zones

Templated activities in Helix now include visible edit zones. These zones are indicated with a green, dashed border. They have been included to explicitly define the areas of templated activities where the user is editing text. Activities that include edit zones also include a class in the parent element, indicating the number of edit zones on the page, e.g. cu-zonecount-3.

Edit zones are defined in the following way:

  • Parent div element with the following classes:
    • cu-edit (universal indicator of an element that is expected to change. This class is styled with a dashed, green border.)
    • cu-editzone-0 (base-zero number iterates up with each new editable zone)
    • mceNonEditable (tinyMCE-specific class. This class prevents the user from unintentionally removing the edit zone.)
  • Child div element containing placeholder text with the following class:
    • mceEditable (tinyMCE-specific class. This class allows content inside a mceNonEditable element to be edited.)

Finally, the edit zones serve future reuse purposes of Helix, by identifying elements of an activity that might be stored as data.

Sample HTML

<div class="cu-edit cu-editzone-0 mceNonEditable">
    <div class="mceEditable">
        <p>Lorem ipsum dolor…</p>

Module Overview Image Drag-and-Drop

The placeholder images on Module Overview pages were picked to be generic representations of Columbia’s campus. As such, they can be used universally in any SPS Canvas course to maintain brand awareness. However, images that are specific to a module’s subject matter can enhance the storytelling experience of a module.

The placeholder images are now significantly easier to replace with subject-specific images. After the user has uploaded an image to a course’s files, he/she can use a simple drag-and-drop action to place an image into the circular container on the overview page. 

The image’s proportions will automatically be constrained to the circular container, and will fade in from an image of Columbia’s Alma Mater statue. Users can also choose to remove the placeholder image altogether, which will then be substituted with a static image of Alma Mater.

SPS Icons

In anticipation of a review and update of the icons that have been in use at SPS for years, the way images are defined has been changed. In prior versions, each icon was defined by a single class with three syntactical parts—defining an element as an icon, specifying the image, and specifying the background color (e.g., class="sps-icon-write-green;").

Now, icons are defined by three different classes (e.g., class="sps-icon write green;"). This will make updating icons significantly easier, since the image is defined in the stylesheet. If an icon of a specific shape is changed, we now can simply change that shape to rollout the update across all courses using the new classes.

Legacy compatibility is being supported, but all icons using older classes will have the same standard background color (#003a63).

Sample HTLM

New Method

<i class="sps-icon write green"></i>

Old Method (do not use)

<i class="sps-icon-write-green"></i>

Syllabus Update

The SPS Academic Excellence Committee (AEC) approved minor changes to the syllabus in May 2018, which are reflected in the most recent template.

Content Boxes

In previous versions of the templates, there were instances of text contained in light-grey boxes. The intention of these boxes was unclear, and inconsistent. Pending review, the majority of these content boxes no longer have the light-grey styling.