Versions Compared

Old Version 8

changes.mady.by.user Patricia Donohue

Saved on

compared with

New Version 9

changes.mady.by.user Patricia Donohue

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Note

Version 2.1 - Draft In-Progress - September 01, 2021

...

Use one of the anchor links below to go through the steps of configuring your college theme.

  • Updating the College Header Background/Text Colors and Nav Menu Color

  • Updating the College Portal Background Image

  • Updating the College Logo Image and Content

Updating the College Header Background/Text Colors and Nav Menu Color

...

The college portal administrator manages content by creating specific portlets and then adding or removing them for specified user groups, applying portlet expiration dates, etc. The steps to do all of this are included within the instructions for creating each of the different portlets currently available, including:

  • Static Content & Registering Portlets

  • App Launchers

  • Surveys

  • Advisor Cards 

Portlet Basics

Anything that you create or configure to display inside your college portal is considered a portlet. A portlet is basically a "container" for the thing you are creating or configuring to display.

College portal administrators determine which groups can have access to any given portlet as well as configuring active and inactive date ranges for portlets, also known as the portlet lifecycle.

[ Suggest adding a graphical element here (generic) to help visualize a “portlet” ]

Portlet Lifecycle

The lifecycle for any portlet can be defined by the college administrator by selecting the options in the Lifecycle Management and optional Automatic Expiration sections. You control the status and display of any and all portlets for your college. 

...

  1. Navigate to Tenant Admin tab-> Portal Administration panel-> Manage portlets link to display the Portlet Registry screen.

  2. When you click the Edit link for a portlet the Edit Portlet screen will be displayed.

  3. Scroll down to the Lifecycle Management section and click the Option radio button that corresponds to the portlet state of Created, Approved, Published, Expired or Maintenance as needed. 

  4. If you want to set an optional expiration date for the portlet (only available when Approved or Published is selected), scroll down to the Automatic Expiration (optional) section and click in the Setting field to display a pop-up calendar where you can choose an expiration date. 

  5. After selecting the expiration date, drop-down list will be displayed so you can select the time (hour, minutes, and period of the day (AM or PM)) the portlet will expire. 

[ add all the screen shots in this section as needed ]

Note: When the selected date and time are reached, the portlet will no longer display in the Portal and its state will automatically revert to the Option of Expired.

See:

  • Adding Static Content & Registering Portlets

  • Adding App Launchers

  • Adding Surveys

  • Adding Advisor Cards 

Adding Static Content & Registering Portlets

...

Note: The life cycle of the portlet can be modified as defined in the Portlet Lifecycle section.

18. Click Save and Configure to save your content portlet and display the Edit Portlet Configuration content Editor screen. 

19. Enter and format the content you want to display in the portlet. If you are familiar with HTML, CSS, or Javascript, you may edit the portlet's code by clicking the Source button. To embed a video in your new content portlet, see:

  • Embed a Video into a Content Portlet

  • Embed a Video with the OzPlayer Interface 

Note: CKEditor won't always keep code entered into it from Source exact, so having a local copy is important. 

...

22. To add your new content portlet to a tab, see: Adding Content to a Tab. 

Embed a Video into a Content Portlet 

Tenant Admins can embed videos hosted by other services into content portlets using the iframely proxy service which supports YouTube and over 1800 other content provides. Before you embed a YouTube video into a content portlet, you must get the code from YouTube.

  1. Go to YouTube and locate the video you want to embed into your content portlet.

  2. Click the Share link below the video. 

  3. Click the Embed link to display the HTML code for embedding the video.

  4. Click the SHOW MORE link to expand the video options.

  5. From the Video size drop-down list, select the size that will be displayed in the content portlet. 

  6. Optional Step: Unselect the Show suggested videos when the video finishes checkbox. 

  7. Copy the code from the form field and paste it in a text document. Once you have the code for you YouTube video, you can now embed the video into your content portlet.

  8. Return to MyPath, click in the editor, and position the cursor where you want the video to be positioned. 

  9. Click the iFrame icon to open the iFrame Properties dialog box. 

  10. Copy the width from the YouTube code collected in step 7 and paste it in the Width field.

  11. Copy the height from the YouTube code collected in step 7 and paste it in the Height field.

  12. Copy the URL from the YouTube code collected in step 7 and paste it in the URL field. 

  13. Click the OK button. 

[ screen shots ]

Note: If you select the Show suggested videos when the video finishes checkbox, unwanted or inappropriate suggestions may appear. 

Note: You will see a box containing a red box and IFRAME within it. It doesn't looks like a video, but this is where the video will appear in the content portlet.

14. Click the Save icon to save your configuration and return to the Portlet Registry screen with your new content portlet displayed in the list of portlets.

Note: To view the content portlet with the embedded video, type the portlet’s name in the Search field, and select the content portlet from the search results list. 

[ screen shot ]

Embed a Video with the OzPlayer Interface

The OzPlayer is an “overlay” that replaces the standard HTML5 media elements with accessible buttons and controls supporting a variety of assistive technologies as well as standard keyboard commands. The OzPlayer meets WCAG 2.0, Level AA requirements and supports the playback of local media content as well as YouTube and Vimeo Pro videos. The CCC Technology Center and CCC Accessibility Center have acquired a license for California Community Colleges to use at no cost for college and district websites and affiliated projects.

The Oz Player files can be sourced from a college’s web server or the player content-delivery network (CDN). College domains must be whitelisted before they will function with the CDN solution. 

  1. Register your college domain at: https://docs.google.com/forms/d/e/ 1FAIpQLSfne5p_YXsKc4hbpFg_58Hy-OtYfcOsf7XXCDBI2zpJWDC-_A/viewform

    1. Enter your first and last name in the Name field.

    2. Enter your email address in the Email address field.

    3. From the School/District Affiliation drop-down list, select your college.

    4. Enter your college’s website name in the Please identify the College domain names you wish to register for the Oz Player CDN field.

    5. Select the appropriate radio button for the Do you need the Oz Player source files to host on your local web server? question.

    6. Click the Submit button. 

Note: Approval can take up to 2 business days. 

  1. Once the college domain is approved, proceed to the OzPlayer Code Generator to create the appropriate code: http://www.accessibilityoz.com/ozplayer/ozplayer-code-generator-commercial/

    1. Enter the video’s URL in the Video URL (required) field. 

Note: All URLs must be complete, including the protocol (e.g., http or https). 

b. From the Video type drop-down list, select the appropriate type (i.e., YouTube or MP4).

c. Optional Step: Enter a URL to an image in the to the Poster URL field. 

Note: If using YouTube as the source, leave blank.

d. From the Player color drop-down list, select the preferred color of buttons for your version of the OzPlayer.

e. Select the Transcript open by default? checkbox to have immediately display the Video Transcript dialog box.

f. Enter the appropriate ISO language code in the Languages field. Note: If the captions are in English, leave the Language field as “en”.

g. Enter a unique value in the Video ID field (e.g., videoName_date, etc.) if there will be more than one video per page.

h. Enter the URL to the caption file in the Captions (VTT) URL field.

Note: This is often easiest to upload your caption file to the server and then determine the full URL to the file. This must be a .VTT file. 

i. Optional Step: Enter the URL to the Transcript Extras in the Transcript extras (VTT) URL field.

Note: Transcript Extras file can be used to describe visual details, such as text shown on the screen, and to transcribe the spoken text of audio descriptions. This file will also have to be a .VTT file and synchronized with the original video. 

j. Click the Submit button. A text area will appear at the top of the page with the HTML code you need to insert in your page to make the video player appear and function. 

Once the OzPlayer code has been developed, you can now add it to your content portlet.

3. Remove the following script from the OzPlayer code:

<script type="text/javascript" src=“https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-core/mediaelement.min.js"></script>

4. Verify the code is using version 3.0 and not 2.0. If needed, change the version to 3.0 for the following links and scripts in the code:

<link href="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-core/ozplayer.min.css" media="all" rel="stylesheet" type="text/css" /> <link href="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-skin/highlights-blue.css" media="all" rel="stylesheet" type="text/css" /> <link href="https://ozplayer-commercial.global.ssl.fastly.net/3.0/transcript.css" media="all" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-core/ozplayer.min.js"></script> <script type="text/javascript" src="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-lang/en.js"></script> <script type="text/javascript" src="https://ozplayer-commercial.global.ssl.fastly.net/3.0/config.js"></script>

5. Return to MyPath and click the Source icon to switch from WYSIWYG mode to Source (HTML) mode. 

Manage Content Management Image

...