Transferring to and Maintaining Sites on the Cascade Server


You may print this page if you feel the need.  But we will be updating it as needed; so the online copy will always be most up-to-date.

These notes were made, using Hannon Hill's Cascade Server, version 5.7.2 - October 14, 2008 (r11656).
Our server will be upgraded in November 2008.

If you have questions about this lecture or topic, I am always available, via email (garrett@csusm.edu).

Activity: Please share your name, what you do for your day-job and a little about your web design experience and what you hope to learn today.

Part One:

  • Getting Access to Cascade
  • Logging into Cascade
  • Overview of the Cascade Environment
  • Creating Folders
  • Creating Pages
  • Publishing

Part Two:

  • Uploading Files
    • Uploading a single file
  • Adding and Editing Content
    • Text
    • Images
    • Hyperlinks
      • Anchor Links
      • Email Links
  • Moving Pages and Folders
  • Deleting Pages and Folders
  • File Versioning
  • Layout & Design
  • Forms
  • Navigation
  • More Cool Stuff
    • Using the Directory template
  • Time Saving Tricks
    • Copying an Existing Page
    • Colors used in Cascade Templates
  • Troubleshooting
  • Site Security/Access
    • Password protecting part (or all) of your web site

When this lecture is delivered face-to-face, I spend two hours of hands-on instruction on on each part.

Getting Access to Cascade

Before you can use Cascade, you must complete the Web Application Support team's form:
http://lynx.csusm.edu/cascade/forms/csaccess.asp
to get access to Cascade.

The last field on this form is a yes/no value, indication that you (and possibly others) want Cascade training.  I will be notified if you leave this filed set to "Yes."

Logging into Cascade

Outcome: for users to be able to log into their site in Cascade.

Firefox is the recommended browser for Cascade authors.  It is available for Macintosh and Windows systems at: http://www.mozilla.com/en-US/firefox/personal.html Along these lines, there is also a plug-in that enhances authoring in Firefox; details and download can be found at:
http://www.hannonhill.com/news/blog/2008/Cascade-Server-Firefox-Extension.html

  1. https://cascade.csusm.edu/
    • Use your campus login and password to gain access.
    • There is a system idle time-out after 60 minutes.
    • My advice is to never have a browser "Remember me"

    Note: Cascade is available anywhere you have web access and a web browser installed.  And, since it is a secure site (using HTTPS), your campus password and login are encrypted before they are sent.

Activity: Log into Cascade.

Overview of the Cascade Environment

Outcome: to highlight the most commonly used elements of the Dashboard, folder layout, and general use of the Cascade interface.

  • Folder List: On the left-hand side; this is where your folders and files can easily be found. 
    • To minimize the left-hand folder list:
      1. Click the triangle tab between your work content window and the folder list.
    • To restore/maximize the left-hand folder list:
      1. Click the triangle tab at the top left of your work content window.

    Note: On the left-hand side, you will see the folder list with the csusm folder. Within this folder, you will see your office/program/department folder(s) (e.g.: advancement, alumni, etc.).

  • Horizontal Navigation links (top right)
    • Help - This link takes you to Hannon Hill's Knowledge Base for Cascade.  Our campus has modified some aspects of the software; so not everything you see will be available for your CSU San Marcos site(s).
    • Log Out - This link logs you out of Cascade.
  • Horizontal Navigation bar (blue bar, top)
    • Home: opens a content area to the right of the Folder List that contains tabs for:
      • Dashboard - an overview of your Home resources
      • Workflows - are not implemented yet.
        If you publish content that needs approval before it is available online, you will use Workflows.
    • New
      • csusm > Folder (and the steps to creating a new folder)
        Opens the screen to create a new folder.  We will cover this in more depth in the Creating Folders section.
      • csusm > Standard
        Opens a page, for editing, based on this template.  We will cover this in more depth in the Creating Pages section.
        See also: New > csusm > Standard w sidebar
    • Tools
      • Search > Advanced
        What is an asset?  Essentially, as asset is a piece of content: a page, an image, a PDF file, etc.
      • Import > Zip Archive - allows you to upload a .zip archive of up to 10MB.
    • Search - Searches both file and folder names as well as content and metadata.
      Note: After typing your search term(s) into the field, hit the "Enter" key to search.
  • Overview of site left-hand-navigation.

Warning: If you are in the middle of creating or editing a folder or a page, and you mouse away before clicking the "Submit" button, your changes will be lost.

Creating Folders

Outcome: for users to create folders to organize files (images, documents, etc.).

  1. In the Horizontal Navigation bar (blue bar, top), select New > csusm > Folder
    Opens the screen to create a new folder.
    • In the "System" link screen (in the dark blue band, at the top of your work area):
      1. Type the "Display Name"; this is the text that will appear in your site left-hand-navigation.  It should be short and descriptive.  
        • It can contain spaces and special characters and use capitalization.
        • Troubleshooting: If you have a blank space in your site left-hand-navigation, it is likely that your folder Display Name is blank.
        • Note: For indexed folders, it is the folder Display Name that is displayed in your site left-hand-navigation, not the Display Name of the index file within the folder.
      2. Type the "System Name"; this is the file name of your folder.
        • Name your folders something descriptive and short (names affect URL lengths and users' typing time).
        • Never use spaces or non-alphanumeric characters in file names.  Alpha-numeric characters are always fine; other than that, only dash and underscore are recommended.
        • I strongly recommend using all lower-case letters.
      3. Select the "Parent Folder"; this is where your new folder will be saved.
        Note: Which ever folder you may have pre-selected in the Folder List will be the default Parent Folder.
      4. Select the "Publish"check box to include your new folder when you Publish your site.
        Note: Folders and files that are not published are not accessible online.
      5. Select the "Index" check box to include your new folder in site left-hand-navigation.
        Note: Folders and files that are not indexed do not appear in site navigation.
        Note: Folders that do not have an index file within them, will not be indexed, regardless of the folder index setting.
      6. Choose, as needed: Advanced Options (spelling)
    • Optional: in the "Metadata" link screen (in the dark blue band, at the top of your work area):
      1. Choose, as needed: Review/End dates and Expiration folders - the date and time for the content to be reviewed with a respective workflow, or which it is no longer available and where expired content goes.
  2. Click the "Submit" button.

Creating new pages, based on the Standard template

Outcome: for users to create pages of textual and pictorial content.

  1. In the Horizontal Navigation bar (blue bar, top), select New > csusm > Standard (or "Standard w sidebar").
    You will be presented with the New Page interface.
    Note: Under the Create tab, the "Content" link is selected.
    • In the "Content" link screen (in the dark blue band, at the top of your work area):
      1. In the "Content" section
        1. Type the "Display Name"; this is the text that will appear in your site left-hand-navigation.  It should be short and descriptive. 
          • It can contain spaces and special characters and use capitalization.
        2. Type the "Title"; this is the text that appears in browser history lists and in the browser title bars.
          • Note: I recommend making the Title the same as the Display Name.
      2. You may choose a "Theme Image" by clicking the Browse icon.
        1. In the "Please choose a File" window, go to the "csusm" folder, go to your folder,  and find your Theme Image.
          • Note: The "Current Selection" area (on the right) displays only the first five files in ling lists; but the left-hand Folder List area displays all files.  Use the left-hand Folder List area to select your file.
        2. Click the "Confirm" button.
          • If all has gone well, you will see the path to your selected image between the brackets, directly to the right of the Browse icon.
      3. Add and format your content in the field provided.  See also the section on Adding and Editing Content.
    • In the "System" link screen (in the dark blue band, at the top of your work area):
      1. Type the "System Name"; this is the file name of your page.
        • Your top-level (home) page (and top-level pages in your sub-folders), must have the System Name:
          index
        • Name your files something descriptive and short (names affect URL lengths and users' typing time).
        • Never use spaces or non-alphanumeric characters in file names.  Alpha-numeric characters are always fine; other than that, only dash and underscore are recommended.
          • I strongly recommend using all lower-case letters.
        • Do not include .htm or .html in your "System Name".  ".html" will be added automatically.
      2. Double check the value for "Parent Folder" is correct (you may want to specify a different location to save this file).
        • To specify a different Parent Folder:
          1. Click the browse icon or bracketed link.
          2. In the "Please choose a Folder" pop-up window, select a new parent folder from the Folder List.
          3. Click the "Confirm" button.
      3. If the "Publish" box is not checked, the file will not be displayed to web browsers (but you will still see it in your Cascade interface).
      4. If the "Index" box is not checked, the file will not be included in site left-hand-navigation.
      5. "Advanced Options" are available on any of the links we have covered, above.  Click the link now to display these options.
        • "Check Spelling" runs spell-check on the file when it is submitted.
          1. In the "Spell Check" window that will pop-up when you have unknown words:
          2. Select Modify, Suggestions (choose different suggestions from the pull-down menus), Add, or Ignore for each row/word.
          3. Click the "Submit" button
            Warning: If you click the "Cancel" button, your changes will be lost.
        • "Check Accessibility" verifies ADA compliance for the file when it is submitted. 
          Note: This does not automatically make your code ADA compliant.  Use the suggestions to make your page compliant (as detailed in the following three steps).
          If you have further questions about ADA compliance, please contact our experts at ada@csusm.edu
          1. In the "Accessibility Check" window that will pop-up when you have accessibility issues:
          2. Enter the values to make your page accessible.
          3. Click the "Submit" button
            Warning: If you click the "Cancel" button, your changes will be lost.
        • "Check Links" verifies the hyperlinks when the file is submitted.
        • "Start Workflow" will be covered in the section on Workflows.
      6. Click the "Submit" button when you are ready to save your file.
        Warning: If you navigate away from the edit screen without clicking "Submit", your changes will not be saved.
      7. Optional: in the "Metadata" link screen (in the dark blue band, at the top of your work area):
        1. Next to where you noted the "Content" link was selected by default, you may click the Metadata link.
          1. Choose, as needed: Review/End dates and Expiration folders - the date and time for the content to be reviewed with a respective workflow, or which it is no longer available and where expired content goes.
          • Note: Right now, metadata is not being used; but this section will grow in importance as we implement the uses for this data.

            Activity: Take a minute to think about how you might use the other metadata fields available; share some possibilities.

      Activity: Complete the steps above, 1-10, to properly save your file.

If all goes well, you will see your page (in "View: Layout"), with the header, left-hand navigation, and footer, along with your Theme Image and content (if any).

Note: Your page will not be available via the web until you Publish it.

Activity: Please stand and stretch.  And share a word that describes you right now.

Publishing

Outcome: for users to understand that publishing a file or folder is an integral part of making it available to the world and to learn the mechanics of doing so.

Files may be saved to the Cascade server, filled with content, linked together, etc; but until you Publish them, they will not appear via the web.

Note: Cascade will show you your pages as they will look when published, even though they have not been published.

When you submitted your file in the Creating Pages section, you were left in "View: Layout".  This can also be achieved, after the fact, by clicking on any file in your Folder List.

At the top of your content, you will note there is a series of tabs: View, Edit, Copy, Publish, Delete, and Advanced.

Publishing a single file vs. your whole site:

  • If you edit an existing file/page, you may publish just that page, after submitting it.
  • If you create a new page or folder, you must publish your site folder.
    E.g.: Base Folder > csusm > garrett (garrett is my site folder)

Activity:

To publish files and folders in Cascade:

  1. Single click any file (or folder) in your Folder List (if you just finished the Creating Pages section, you are already looking at the View: Layout, and can continue from there).
  2. Click the "Publish" tab, to the right of the "View" tab, at the top of your content.
    Note: Leave all the defaults on this screen as they are (i.e.: Destination, Publish Report and Publish Mode).
  3. Click the "Submit" button.
    • If all went well, you will see a green system message that says: Publish message sent successfully. (directly under the horizontal blue navigation bar, above your content/Folder List).

    Note: Not immediately, but within about 60 seconds, your file/updates will be available on the web.

Activity: Look at your top level page in Cascade.  It will have a URL something like:
http://www-dev.csusm.edu/cms/index.html
(Don't forget to include the index.html, or you may be redirected to your current pages on www.)

Uploading Files

Outcome: for users to understand the procedure for zipping files, and uploading them to Cascade (i.e. images, PDFs, MS Office documents, etc.).

Warning: Remember that file names (System Names, in Cascade) MUST NOT have spaces or non-alphanumeric characters.  All file names should be edited before you zip your files, to avoid time consuming renaming in Cascade.

  1. Not in Cascade but back on your computer:  Put all the file(s) that you want to upload, into a folder on your H:\ drive.
    Note: You may use a portable storage device but your H:\ is backed up; so I recommend using it.
    Note: You can make sub folders to organize your files before you zip them; sub folders will be preserved once your files are unpacked in Cascade.  This helps you organize your web files in Cascade.
  2. Zip this folder (and all its contents).
    1. In Windows, right click the folder that contains your files and select:
      1. "Send To > Compresses (zipped) Folder"
        This will make a compressed archive, copy of the folder.  We do this so that we can import a single archive file instead of each of your files separately.
        Note: Cascade has a maximum zip archive size of 100MB.  If your archive file is larger than that, once zipped, Cascade will not let you complete step 8.
    2. In Macintosh, control + click the folder that contains your files and select:
      1. "Create Archive of "[yourfoldername]"
        This will make a compressed archive, copy of the folder.  We do this so that we can import a single archive file instead of each of your files separately.
        Note: Cascade has a maximum zip archive size of 100MB.  If your archive file is larger than that, once zipped, Cascade will not let you complete step 8.
  3. Back in Cascade, in the Folder List, single click your destination folder, to select it.
  4. In the Horizontal Navigation bar (blue bar, top), select Tools > Import > Zip Archive from the Horizontal Navigation bar (blue bar, top).
  5. Click the "Browse" button to search your local machine for the archive to import.
  6. Select the .zip file.
  7. Be sure the "Placement Folder" destination, in Cascade, is correct (it should be, since you selected it in step 3).
  8. Click the "Submit" button.

Cascade will upload, and unpack the folder and its contents for you.  You can link to these files without further ado.

To upload a single file

  1. In Cascade, preselect the folder you want to upload the file to.

  2. In the Horizontal Navigation bar (blue bar, top), select New > csusm > File

  3. In the middle of the page, click the "Browse" button.

    1. Use the File Upload interface to find the file you want to upload (on your computer)

    2. Click the "Open" button.

  4. Click the "Submit" button.
    You should see the "Asset created successfully" page.

Note: If you upload an updated version of a file that already exists, Cascade will upload the updated version and add a period and a number at the end of the System Name.  So, you'll have to do some re-naming to get your existing links pointing to the newer version.

Activity: Follow the steps to zip and upload three files.  Then follow the steps to upload a single, fourth file without zipping it.

Adding and Editing Content

Outcome: for users to understand and explore the functionality of the Cascade editor to include and format text, image and link content.

Campus Style Guide: http://www.csusm.edu/redesign/styleguide/

Editing existing pages:

  1. In your Folder List, click a folder icon or name to to view its sub-folders and files.
  2. Single click any file in your Folder List to open it in View: Layout.
  3. Click the "Edit" tab, at the top of your content.

The Cascade Content Editor Tools:

Note: There is a multi-step undo/redo tool in this editing interface.

Here is the Hannon Hill knowledge base entry for the WYSIWYG editor:
http://www.hannonhill.com/new-kb/WYSIWYG/

Text

  • You can, add textual content to your page(s) by typing or by copying and pasting it in from a simple text editor.

When you copy text from any source that is not another web page in Cascade:

  1. Paste that text into TextEdit (Macintosh) or Notepad (Windows) first. 
  2. Then select the text you just pasted into TextEdit/Notepad and cut it.
  3. Then paste it into Cascade.

Note: Once you have content in Cascade, you can cut & paste it from one Cascade page to another.

Activity:

  1. Open a page, from your Cascade site, for editing.
  2. Add some text from an existing web site (via Notepad).
  3. Experiment with the editor tools for five minutes.

Accessibility and Style:

We must make all our content accessible.  It is the law.

  • Never use underlined text; it is easily confused with linked/underlined text.  Bold and italic works well.
  • Using headings (Heading 1 thru Heading 6) allows users to tab from one to the next, skilling sections that they are not interested in at this time.
  • White space helps all users scan our content more easily.
  • Try to limit lists to around four numbers or bullets.
If you have further questions about ADA compliance, please contact our experts at ada@csusm.edu

Images

Gathering, Sizing and Importing:

  • You can either create images using an image editing application, a digital camera, or you might get completed files from a graphic designer (or from the web).
  • Editing images should be done with a program designed for this purpose (Cascade is not designed to edit images).  I use Photoshop; but there are all kinds of applications that can help you accomplish this.
    Resources: http://www.picresize.com/
    (I Googled: image sizing and cropping program free)
  • To import images (and all non-web files) into your Cascade site, follow the directions in the Uploading Files section of this document.

Including Images in your pages:

  1.  Once you've uploaded your image to Cascade, place your cursor where you'd like to insert it in your page.
  2. Click the "Insert/edit image" icon.
    You will see a pop-up window that prompts you for image information.
    Note: The "Internal" and "External" tabs, at the top allow you to choose a file from your Cascade site or the Web, respectively.
    1. For Internal images:
      1. On the pop-up window, next to the word "Image," use the Browse icon to pick an image from your Cascade site.
        1. You will be presented with the Folder List in Cascade.  Use the left-hand Folder List area to select your file.
          Note: Don't forget the "History" link on your Choose: Browse navigation bar; this can save you lots of time in selecting a file you just worked with.
        2. Click the image file to select it.
          Note: It will be previewed for you, in the "Current Selection" area.
        3. Click the "Confirm" button to confirm your selection.
          Note: The "Please choose a file" window will close, returning you to the "Insert/edit Image" window and you will see the path to the image and its file name between the brackets, directly to the right of the Browse icon.
      2. Add "Alternate Text" that describes your image, fully, to individuals using screen readers.  The intention of alt text is to provide the same content to non-sighted users as your image provides to sighted users.  I recommend authoring this text in a medium that allows you to spell check it, then copy and paste it into the "Alternate Text" box.
        Note: For images that serve only the purpose of formatting (lines, etc.), Alternate Text is not added.  Just type a space in the Alternate Text field for such images.
        If you have further questions about ADA compliance, please contact our experts at ada@csusm.edu
      3. In general, you will leave all other fields as they are by default.
      4. Click the "Insert" button.
    2. For External images:
      1. On the pop-up window, next to the word "Image," type (or paste) the web address for the image out on the web.
      2. Add "Alternate Text" that will describe your image, fully, to individuals using screen readers.  The intention of alt text is to provide the same content to non-sighted users as your image provides to sighted users.  I recommend authoring this text in a medium that allows you to spell check it, then copy and paste it into the "Alternate Text" box.
        Note: For images that serve only the purpose of formatting (lines, etc.), Alternate Text is not added.  Just type a space in the Alternate Text field for such images.
        If you have further questions about ADA compliance, please contact our experts at ada@csusm.edu
      3. In general, you will leave all other fields as they are by default.
      4. Click the "Insert" button.

    Activity: Insert an image into your content, in one of your Cascade pages.

Hyperlinks

It is best to link text that describes the link destination.  This makes it easier for all users to scan page links and find what they need.  For example:

  • For our fall 2008 course catalog, click here.  (an example of a bad link)
  • Fall 2008 course catalog.  (an example of a good link)
  1. Select the text or image you want to become the link.
  2. Click the "Insert/edit link" icon.
    You will see a pop-up window that prompts you for link information.
    Note: The "Internal" and "External" tabs, at the top allow you to choose a file/page from your Cascade site or the Web, respectively.
    1. For Internal links:
      1. On the pop-up window, next to the word "Link," use the Browse icon to pick an file from your Cascade site, to link to.
        1. You will be presented with the Folder List in Cascade.  Use the left-hand Folder List area to select your file.
          Note: Don't forget the "History" link on your Choose: Browse navigation bar; this can save you lots of time in selecting a file you just worked with.
        2. Click the file to select it.
        3. Click the "Confirm" button confirm your selection.
          Note: The "Please choose a File, Page, or Symlink" window will close, returning you to the "Insert/edit Link" window and you will see the path to the file and its System Name between the brackets, directly to the right of the Browse icon.
      2. In general, you will leave all other fields as they are by default.
        Note: The "Anchor" field is for creating a link to a place in the current page, not to a separate page.  See the section on Anchor Links.
      3. Click the "Insert" button.
    2. For External links:
      1. On the pop-up window, next to the word "Link," paste the web address for the file that you want to link to, on the web.
      2. In general, you will leave all other fields as they are by default.
      3. Click the "Insert" button.

    Note: Use the "Unlink" icon to unlink hyperlinks.

Anchor Links

Anchor links (called Bookmarks in Front Page) are hyperlinks that link, not to a new file, but to a place in a file.  These notes use them in the table of contents and in the back to top links throughout.

  1. Before we create the hyperlink to a place in our web page, we must insert the anchor point (to the place that will be linked to).
    1. Place your cursor where you want the anchor point and click the "Insert/edit anchor" icon.
    2. From the "Insert/edit anchor" pop-up window, type the "Anchor name:".
      Note: Anchor names must be unique to a page, are case sensitive and should not include spaces or special characters.
    3. Click the "Insert" button.
      Note: If all goes well, you will see a small anchor icon where the anchor point was inserted.
  2. Select the content that you want to become the hyperlink to your anchor point.
  3. Click the "Insert/edit link" icon.
    You will see a pop-up window that prompts you for link information.
  4. In the "Anchor" field, type the name of your anchor point.
    Note: Anchor names are case sensitive.
    Note: Linking to an anchor in a different page is achieved by using the "External" link tab and including the URL plus the anchor name. 
    Like: http://www.csusm.edu/page.html#AnchorName
  5. Click the "Insert" button.

Email Links

Email links are hyperlinks that link, not to a new file, but to an email address.  When a user clicks an email link, it opens the email program on their computer and puts the email address in the To: line (it can also insert a designated subject in the Subject: line).

  1. Select the text or image you want to become the link.
  2. Click the "Insert/edit link" icon.
    You will see a pop-up window that prompts you for link information.
    1. Click the "External" tab:
      1. On the pop-up window, next to the word "Link," type (or paste) something like:
        mailto:email@csusm.edu
        or
        mailto:email@csusm.edu?subject=Your%20Subject
      2. In general, you will leave all other fields as they are by default.
      3. Click the "Insert" button.

Note: Where I have "email@csusm.edu" above, you should use the email address you want to email with this link.

Note: Where I have typed "Your%20Subject" above, you would use the default subject you want added to the email.  The "%20" represents a space
(so this default subject would read: Your Subject).

Any time you make changes to a page, you must click the "Submit" button to save it.  You will see a green "Edit successful" message along the top of your content, if all goes well.

Note: If you do not Publish your file after clicking "Submit," your changes will not be available via the web (though they will be viewable to you, in Cascade).

Moving pages and folders

Outcome: for users to learn how to move pages (and folders) into different folders.

  1. Click the folder icon or name that contains the file(s) and/or folder(s) you want to move.  This will display the contents of that folder.
  2. Click the check box(es) to the left of the name(s) of the file(s) and/or folder(s) that you want to move.
  3. Select "Move" from the "With Selected:" menu (at the bottom of the content list).
  4. Choose a new "Parent Folder".
    1. Specify a different Parent Folder by clicking the Browse icon or bracketed link.
      1. You will be presented with the Folder List in Cascade.
        Note: Don't forget the "History" link on your Choose: Browse navigation bar; this can save you time in selecting a folder you just worked with.
      2. Click the new parent folder to select it.
      3. Click the "Confirm" button to confirm your selection.
  5. Click the "Submit" button.
    Note: You will see the results of this move on the "Results of Move action" screen.

Note: Cascade preserves image/file links if you move files/folders in Cascade (you do not need to change hyperlinks to them, or re-insert them as images).

Activity: Move at least one file to a different folder; then move it back.

Deleting pages and folders

Outcome: for users to learn how to delete pages and folders.

  1. Click the folder icon or name that contains the file(s) and/or folder(s) you want to remove.  This will display the contents of that folder.
  2. Click the "Delete" tab.
  3. Leave all the default values, just as they are.
  4. Click the "Submit" button.
    Note: You will see a "Delete successful" message below the Horizontal Navigation bar (blue bar, top).

Note: When you delete a file, it is gone forever (you cannot retrieve versions of it via Cascade either).  So, if you think you might want to use or revise it later, simply un-publish it.

File Versioning

Outcome: for users to understand that Cascade saves multiple versions of their files and how to access these versions and "roll back" to a previous version.

Each time you click the "Submit" button, when editing a file (this is true of all files, not just web pages), Cascade saves a version of that file.

To access these previous versions:

  1. Click a folder icon or name to to view its sub-folders and files.
  2. Click any file in your Folder List, to select it.
  3. Click the "Advanced" tab, at the top of your content, and select "Versions" from the menu.
    • You will see a green checkmark to the left of the path of the current version of this file.
    • You will see a list of the file you selected in the "Path" column.
    • You will see the "Last Modified On" column and a series of dates/times.
    • You will see the "Last Modified By" column and a series of usernames.
  4. To view, click on the Path of the version you'd like to see.
  5. In the "Viewing" navigation:
    • "Newer", "Older", and "Current" will show you the appropriate version of this file, on the list (that you saw in step 3).
    • "Activate" will make the version that you are viewing the active version on the web.
      Note: No warning will be given; but your last version is second down, on the list (that you saw in step 3).
    • "Delete" removes the version that you are viewing.  I don't recommend doing this.
    • "Compare with Current" will use strikeout to denote removed text and blue text to show additions.

To "roll back" to a previous version:

  1. Click a folder icon or name to to view its sub-folders and files.
  2. Single click any file in your Folder List.
  3. Click the "Advanced" tab, at the top of your content, and select "Versions" from the menu.
    • You will see a green checkmark to the left of the path of the current version of this file.
    • You will see a list of the file you selected in the "Path" column.
    • You will see the "Last Modified On" column and a series of dates/times.
    • You will see the "Last Modified By" column and a series of usernames.
  4. To view, click on the Path of the version you'd like to see.
  5. In the "Viewing" navigation:
    • "Activate" will make the version that you are viewing the active version on the web.

Layout & Design

Outcome: for users to design pages that make best use of the template(s) and specific content so as to support end-user browsing success and satisfaction.

The golden rule of Layout & Design is: Remember what the focus of your page is and who your audience is; be sure that everything on the page supports the communication of that goal to that audience.  Your care for all your users, their varying skills and challenges, your use of color, links, layout, content, all of it is concerned primarily with your goal and your audience.

Having a universal header, footer, and consistent navigational structure can be a great asset in designing your site.

  • The navigation in the header and the contact links in the footer mean that you can focus on providing links and content that is unique to your site, without worrying if you have included general, campus resources in a consistent manner.
  • Consider your users an their needs:
    • Are they familiar with the university or are they "external" users?
    • Be careful where you use "insider" lingo.
  • Before you start typing, plan out your site.
    • How many pages do you need?  One big page or several small ones?
      • How will this impact printability, download time, scanability, maintainability? 
      • Your content and your users' needs guide you in all this.
  • Be clear, consistent and brief.
    • Design for scanability.
    • Use lists and emphasis, don't overuse them.
  • If your content uses color, choose complementary colors which will not hinder persons with challenges in differentiating colors.
    Note: You might use tools like the Well Styled Color Scheme Generator, the Color Schemer

Remember that the Website Redesign Taskforce has provided these tools for campus pages:

Activity: Please stand and stretch.  And share a word that describes you right now.

Forms

Outcome: for users to understand how to create a form using Cascade.

To use the form template in Cascade:

  1. In the Horizontal Navigation bar (blue bar, top), select New > csusm > Form.

The "Opening" section allows you to add formatted text to precede your form.

"Form Item" provides you with several "Field Types" to include in your form:

  • text - a single line text area, suitable for names, emails, addresses, etc.
  • textarea - a multi-line text area, suitable for extended comments, descriptions, etc.
  • password - a single line text area that does not display text typed in the field.
    • This field data is not secure.  It does nothing to encode user input when the form is sent.
  • dropdown - a menu field to give users the ability to choose from the dropdown
    • The "Value" fields are very important to dropdown fields.  They become, in order, the menu options.  To add "Value" fields, click the plus icon, just to the right of the word "Value."
    • And the "Default Value" field is, as you imagine, the first and default menu option.
  • checkbox - a field to give users the ability to choose from a series of checkboxes
    • As with the dropdown menu, the "Value" fields become, in order, the checkboxes.  To add "Value" fields, click the plus icon, just to the right of the word "Value."
    • The "Default Value" field is, as you imagine, the first checkbox and is selected by default.
  • radio - a field that works exactly like the checkbox EXCEPT that only one radio field may be selected, where any number of checkboxes may be selected.
  • hidden - a field that allows you to insert form data that the users never see, but which is included with each form submission.
  • info - a field that displays your "Value" text in the web form but which contains no fields for the users to interact with.
    • The "Default Value" field is unused in this case.
  • line - not a field at all.  It inserts a horizontal line in your form.
    • The "Value" and "Default Value" fields are unused in this case.

"Data Type" is, well, it's the type of data you expect: text or numeric.

"Label" is the text that precedes the form field in your form; this is what the users sees.

  • If you label a form field "Email" and you chose to receive form results via email, what the user types in the form item labeled "Email" will appear in the From: line, when the form results are emailed.

"More Info" is a field where you may type explanatory information that will appear in italicized light gray text, below the field in your form.

"Required Field" box allows you to make this field required.  Required fields will show a red asterisk to users, denoting this requirement.

Adding, reordering and removing field values:

  • To add a "Value" field, click the plus icon [link to screen shot], just to the right of the word "Value."
  • To reorder the "Value" fields, click the appropriate "up" and "down" arrows [link to screen shot], to the right of the word "Value," to move that value up or down.
  • To remove a "Value" field, click the appropriate minus icon [link to screen shot], to the right of the word "Value."

Adding, reordering and removing form fields:

  • To add a form field, click the plus icon [link to screen shot], just below the words "Form Item."
    • Form Items that are added will inherit the number of "Value" fields that their parent Form Item have.
  • To reorder the Form Items, click the appropriate "up" and "down" arrows [link to screen shot], just below the words "Form Item," to move that item up or down.
  • To remove a "Form Item, click the appropriate minus icon [link to screen shot], just below the words "Form Item."

"Submit Button Text" is the text that will appear on your submit button.

"How would you like the results?" allows you to choose to receive form submissions via Email, File or Both.

  • If you select "File" or "Both" the "Recipient" will receive an email with a link to the location of the file.

"Recipient" is a required field, where you type the email address of the person(s) who will receive the form data, via email.

  • If you want more than one recipient, simply type all the email addresses, separated by commas.

"Subject" is a field where you could type the default subject for the data, emailed to the recipient(s).

"Return URL" allows you to set a destination page to be displayed after the users click the submit button.  It is a page that lets the users know that their form was submitted successfully and where you can give them additional information and/or thank them for filling out your form.

  • It is a good idea to create this "return URL" page before you create your form, so you can easily link to it when making your form.
  • If you do not create a page for this purpose, your form users will be sent to a generic "thanks for your submission page."

"Require reCAPTCHA" allows you to include CAPTCHA in your form, to protect against its being used by spam-bots.

The Web Application Support team has made a very helpful introductory video for forms:
http://www.csusm.edu/iits/support/web/demos/form_demo.htm

Activity: Build a form.

Navigation

Outcome: for users to understand how and what Cascade indexes and adds to the left-hand navigation of their site.

Indexing or not:

Cascade will build your left-hand navigation based on the "Index" settings you identify for folders and files; we touched on this when we talked about their creation.  Each file and folder you create can be indexed or not.

  • Folders: Overview of the Cascade Environment
    • Horizontal Navigation bar (blue bar, top)
      • New
        • csusm > Folder (and the steps to creating a new folder)
          • System link:
            • Index - check this box to include your new folder in site navigation.
              Note: Folders and files that are not indexed do not appear in site navigation.
              Note: Folders that do not have an index file within them, will not be indexed, regardless of the folder index setting.
  • Files: Importing Pages Into Cascade
    • Important system data:
      1. Next to where you noted the "Content" link was selected by default, click the System link.
      2. If the "Index" box is not checked, the file will not be included in navigation bars.

External Links and your left-hand navigation:

You know how to index files and folders so that they appear in your left-hand navigation.

There may be times when you'd also like a navigation link to a web page that is outside your site to appear.

  1. Select the folder within which you want the External Link to appear.
  2. From the Horizontal Navigation bar (blue bar, top), select: New > csusm > External Link.
  3. Under the "Create" tab, the "Content" link is selected by default.
    1. Paste the URL (web address) into the "Link" field.
  4. Click the "Metadata" link (under the "Create" tab).
    1. Add the "Display Name" that will appear in your left-hand navigation.
  5. Click the "System" link (under the "Create" tab).
    1. Add the "System Name" (that is your file name for the External Link).
      • Name your files something descriptive and short (names affect URL lengths and users' typing time).
      • Never use spaces or non-alphanumeric characters in file names.  Alpha-numeric characters are always fine; other than that, only dash and underscore are recommended.
        • I strongly recommend using all lower-case letters.
    2. Double check the value for "Parent Folder" is correct (you may want to specify a different location to save this file).
  6. Click the "Submit" button.

Reordering your left-hand navigation:

The order of the left-hand navigation is reverse chronological, as you created each resource, but it can be reordered.

  1. Click a folder icon or name to to view its sub-folders and files.
  2. From the "View: Contents" table that displays the contents of the folder you selected:
    1. Click the column header "Order" to display the item order.
      Note: There are numbers that correspond to navigation order, in the "Order" column.
    2. Click and drag, anywhere in the light-blue or white of the row, for the asset you'd like to change the order of.
      Note: You may also follow the directions, below, for Macintosh users; they work for Windows users too.

For Macintosh users, using Safari:

  1. Click a folder icon or name to to view its sub-folders and files.
  2. From the "View: Contents" table that displays the contents of the folder you selected:
    1. There are numbers that correspond to navigation order, in the "Order" column.
    2. Click the move icons to:
      • Move to Top Icon Move to Top
      • Move Up (one position) Icon Move Up (one position)
      • Move Down (one position) Icon Move Down (one position)
      • Move to Bottom Icon Move to Bottom
        Note: There are also icons to "Edit" and "Delete" on this screen.

Reorganizing your current site navigation into Cascade:

If your old site uses left-hand navigation, it will be straight forward to move it into Cascade's left-hand navigation.

Special consideration should be taken if your site uses horizontal navigation or has navigation along the right or bottom edges of your pages. 

The new header and footer are part of the template in Cascade; and may incorporate aspects of your current navigation.

Cascade's left-hand navigation is efficient in its universality.  Because of the way Cascade generates this navigation, based on your folder/file settings (for indexing), when you make changes to your left-hand navigation these changes are propagated out to all the pages in your Cascade site.

Of course you will still likely rely on navigation embedded in your content.

You can use the "Standard w sidebar" template (as described in the Creating Pages section) to extend the functionality of your embedded navigation.

Activity: Look at your current site and think how you'll organize things in Cascade to translate your navigation as you transfer your site.

Troubleshooting:

Remember: Every folder that you index, must have an index file within it.

"An error occurred during publish: The folder hierarchy does not allow this asset to be published"  This error indicates:

  • Your folder/file settings are set not to publish the resource.
    • To view these settings:
      1. Click any folder/file in your Folder List.
      2. Click the "Edit" tab, at the top of your content.
      3. Under the "System" link, you will see the boxes to select "Include when publishing/indexing."

Folders and their contents can be indexed (and included in the left-hand navigation) if they are your top level, or one folder level below that.

So,

/csusm/yourdirectory
and
/csusm/yourdirectory/subfolder/

will be indexed (if you set the settings to do so).  But

/csusm/yourdirectory/subfolder/sub-subfolder/

will not be indexed (and will give the error above, if you set the settings to do so, and try to publish it).

More Cool Stuff:

Creating a staff directory

  1. In the Horizontal Navigation select New > csusm > Directory and follow the rest of the directions in the Creating Pages section (for Inline Metadata, Metadata, and System information).
  2. Note the differences in the Directory template:
    • "Page Title" is the text that will display at the top of your directory.
    • The "+"  icon will add rows for additional people in the directory.
    • "Image" is the location for the image associated with that person in the directory.
      Note: Directory images should be 75 pixels wide by 100 pixels tall.
    • "Category" organizes your directory. 
      Note: Regardless of whether or not you "Alphabetize" your directory (at the bottom of the edit screen), Executive precedes Faculty precedes Staff.
  3. Click the "Submit" button.

Time Saving Tricks

Outcome: for users to save time.

Copying an Existing Page

We have seen how using the standard templates helps us save time and improve consistency.  We can take this one step further.

When you have created a page of your own, using the template, you can copy that page to use it as a template. For instance, a page that uses the Standard w sidebar template, and has navigation in the right-hand sidebar, that you want to use over in another page.

  1. In your Folder List, click the page that you want to copy, to select it.
  2. Click the "Copy" tab, at the top of your content.
  3. Give your new file a new "system Name."
  4. If desired, choose a new "Parent Folder."
  5. Click the "Submit" button.
    If all goes well, you will see your new page (in "View: Layout"), a duplicate of the page you just copied.
  6. Click the "Edit" tab, at the top of the content of this new page and make the needed changes.

Colors used in Cascade Templates

Though we cannot change text color in cascade, when making graphics, you may find it handy to know the exact color codes (in hexadecimal) used.

Dark Blue: #010044  
Light Blue (Header Underline): #889Ec7  
   
Maroon (Horizontal Bars): #580000  
Light Maroon #833227  
Lighter Maroon #C6675C  
   
Dark Gray (Dividing Lines): #53556A  
Light Gray (Footer Background): #C0C0C0  
   
Sand Color (Content Background): #F3F2ED  
Sand Color darker (Content Background): #E7E4D9  
   
Orange (Link-list Hover Color): #FF9900  

Troubleshooting

Outcome: for users to be better able to identify and implement solutions for common challenges.

Challenge: A portion of page text is bold or italic or header-style and I can't get it to be plain paragraph text.

Solution:

  1. Edit the page in Cascade.
  2. Click on the "HTML" icon on the editing tool-bar.
  3. In the HTML source, find the section where the problem begins (Cost Sharing, in this case).
    This may be challenging since you have to sort through the content and the style code.
  4. Look for "empty" tags.  (in this case: <h4></h4>).
    See how there is nothing in between the start tag (<h4>) and the ending tag (</h4>)?
  5. Remove (only) the "empty" tags.
    There may be a series of tags, like: <h4><b></b></h4>.  Remove them all.

Site Security/Access

Outcome: for users to understand their role and the role of the Web Application Support (WAS) team to provide access to sites.

We rely on the WAS staff to set access for users.  You may contact them at was@csusm.edu to request changes to your site access.

Password protecting part (or all) of your web site

Please contact the Web Application Support (WAS) team was@csusm.edu to request help in password protecting a part or all of your web site.

Please fill out the evaluation for this course.

This page http://www.csusm.edu/iits/training/garrett-lectures/cascade.html
maintained by Garrett Collins (garrett@csusm.edu)
for IITS, User Support Services

Last updated: June 19, 2009 10:32 AM