Roadmap Drawings

From Career Pathways Tutorial

<< return to main Tutorials page...

Due to cross-browser issues, please use the latest version of FireFox or Internet Explorer 7 when working in the Career Pathways Roadmap Web Tool: http://oregon.ctepathways.org

Contents 1 Roadmap Drawing List 1.1 Filtering Drawings 1.2 Search Bar 1.3 Drawing Versions 1.4 Drawing Properties 1.5 Version Settings 2 Adding a New Drawing 3 Renaming Drawings 4 TOOLS Orientation 4.1 Grid Settings 4.2 Add Objects 4.3 Edit Box Titles 4.4 Edit Box Content 4.4.1 Undo/Redo 4.4.2 Spell Check 4.4.3 Insert/Edit Hyperlink 4.4.4 Remove Hyperlink 4.4.5 Insert Image 4.4.6 Insert/Modify Tables 4.4.7 Edit CSS 4.4.8 Edit HTML (Source Code) 4.5 Deleting Objects 4.6 Connections 4.7 Changing Object Color 4.8 Moving Objects 4.9 Resizing Boxes 4.10 Positioning Objects 5 Video Demonstration 6 Deleting Drawings 6.1 Deleting Drawing Versions 7 Lock This Version 8 Copy This Version 8.1 Drawings at Your Organization 8.2 Drawings at Another Organization 9 Print This Version 9.1 Print To PDF 10 Publish This Version 11 Embedding Published Roadmap Drawings 11.1 Embedding Published Drawings 11.2 Embedding an Unpublished Version 11.3 Text-Only View 12 ADA/504 Accessibility Compliance 12.1 Viewing Roadmaps

Roadmap Drawing List

To access, click Roadmap Drawings from the side navigation menu.

• The drawing list interface allows you to filter Roadmap drawings by:

, and

• Upon log-in, these filters default to the logged-in user's organization and user name, with the drawing list (located beneath the filter boxes) showing only drawings associated with the logged-in user.

Filtering Drawings

• As you navigate the Web Tool the filters will remember changes to the selections that you make:

• Click [Show All] for Organizations to view all drawings for all organizations. Users and Occupations/Programs will automatically [Show All].
• Click [Show All] for Users to view all drawings by all users for your organization.
• Click on any single Organization or User name to view corresponding results.
• Select multiple Organizations, Users or Occupations/Programs by holding down the CTRL key to view corresponding results.
• Click on a specific Occupation/Program to show all users associated with that drawing.

• All drawings are listed in alphabetic order by drawing Occupation/Program title underneath the filter boxes.

• Each drawing reflects who created and last modified the drawing.

• Click the icon above the drawing list to restore default settings for the logged in user.

Search Bar

• The search bar, , located above the drawing list filters allows you to search drawing titles, keywords in drawing content, and user names. Click Search or hit Enter/Return to submit the search query.

Drawing Versions

• When a new drawing is created, the drawing title and "Version 1" is automatically added to the drawing list.
• Versions of each drawing are listed beneath the drawing title in numeric order.
• Each version has two links listed to the right of the version number:

• Version Settings, and
• Draw/Edit Version or View Version

Version Settings provides a summary of the drawing Occupation/Program, version number, who created and modified that version, a link to share that specific version with others, and the ability to delete this version. View Version Settings and Deleting Drawing Versions for more information.

Draw/Edit Version means the drawings is available to be edited, copied, and/or published. is displayed when that version has never been "Locked" or "Published". The word Draft is stamped as a watermark in the background of the drawing.

View Version means the drawings can no longer be edited, but can be viewed and copied into a new version. is displayed when that version has been or currently is "Locked" or "Published". If currently published, the drawing canvas will not have any watermark stamps in the background. If previously published, the drawing is stamped Outdated and you can either " copy this version" to edit the drawing, or re-publish the drawing by clicking " publish this version" again.

• The Published Version icon will appear directly to the right of the version number if it is the currently published version. View Publishing Drawings for more information.

Drawing Properties

• Here you have access to detailed information and properties settings about the drawing as a whole, such as:

• Edit the Occupation/Program drawing title
• Confirmation of Organization name
• Edit or assign an applicable Oregon Skill Set category from the provided drop-down menu of choices

NOTE: This will be added under the drawing title bar on the drawing canvas. Adjustments to your layout/design may be required.

• Click link to Preview Published Drawing (if a version is currently published)
• Obtain Embed Code for embedding the published version in a public website. (Available in Version Settings page as well.)
• Obtain URL hyperlinks for the published and Accessible view of the drawing - once shared these will always link to the currently "Published" version.

• and view details on each drawing version, such as:

• Version # with link to Version Settings
• Who created and modified each version, and
• Actions to

• Draw/Edit Version or View Version
• Preview Version, or
• Copy Version

• Published versions are highlighted in tan, stamped with the word (Published) in parentheses beside the version number, and marked as Published Version.
• Ability to Delete drawing and all versions. View Deleting Drawings for more information.

Version Settings

• Here you have access to version specific drawing information and settings, such as:

• View the Occupation/Program drawing title with link to Drawing Properties
• Version #, and whether or not it is (Published)
• Confirmation of Organization name
• Save a Note to help identify details about this version, e.g. Pending Approval or Needs OLMIS links. This note will appear on the drawing list next to the version #.

BLANK NOTE from Version Settings page

FILLED IN NOTE SAMPLE from Version Settings page

SAMPLE of NOTE from Drawing Properties page

SAMPLE of NOTE from Drawing list

• Who created and modified each version
• Actions to

• Draw/Edit Version or View Version
• Preview Version, or
• Copy Version

• Whether or not it is Editable as identified by Lock Version or Version Locked. Use this feature in place of publishing until your drawing is ready to go "public".
• Obtain Embed Code for embedding the published version in a public website. (Available regardless of version, and within Drawing Properties page as well.)
• Obtain URL links for specific version and Accessible view of the drawing version - once shared these will always link to this specific version, regardless if it is current or not.
• Ability to Delete this version. View Deleting Drawing Versions for more information.

Adding a New Drawing

Each drawing must have a unique Occupation/Program name. The Web Tool stores and references each drawing by organization abbreviation and drawing Occupation/Program name.

1. Click at the top of the drawing list to create a new Roadmap drawing.
2. Type a short and descriptive Occupation/Program title for your drawing, such as "EMT", "Accounting", or "Game Programming".
   • Please do not add your organization's abbreviation to the title. It is automatically added by default.
3. Your Organization name is confirmed below.
4. Select an applicable Oregon Skill Set from the drop-down list.

   

   NOTE: This will be added under the drawing title bar on the drawing canvas. Adjustments to your layout/design may be required.

5. Click
6. Your new drawing and Version 1 has now been created. You are now viewing the drawing canvas to start creating your new drawing.
   • Your organization abbreviation, the Career Pathways logo, and drawing title are automatically placed in a title bar at the top of the drawing canvas. These are fixed.

Renaming Drawings

To rename a drawing:

1. From the Roadmap drawing list or the drawing canvas TOOLS menu, click on Drawing Properties to the left of the drawing title.
2. Click edit to the right of the current drawing title
3. A text editing field will appear; change the title as desired
4. Click

Warning: changing the drawing title will break any external web pages that link to this drawing. Update external links as necessary.

• Return to the drawing list by clicking back, the back arrow on your browser, or clicking Roadmap Drawings from the side navigation.
• Return to editing the drawing by clicking Draw/Edit Version from the Version Actions menu.

TOOLS Orientation

• View the HELP menu on the drawing canvas for a complete list of features.
• Right-click an object on the drawing canvas for a menu of customizing options.
• When selected, boxes, connections, lines and arrows show a blue frame, with a green control point at the start, and a red control point at the end. The object's menu can be brought up by right-clicking anywhere within this frame.

Grid Settings

• Right-click the drawing canvas to change default grid settings.

• Changes to grid settings are not saved, and will return to default settings upon exiting the drawing.

Add Objects

• Right-click the drawing canvas for a menu to add new objects (box, line, arrow) in the same location that was right-clicked.

NOTE: Lines and arrows must be manually aligned with box objects, and are discouraged. These have been removed from the TOOLS menu to transition users into using the Connections feature. Please use Connections for ease of layout adjustments and ADA compliance. Connections can translate the relationship of box objects in text only views of these drawings.

Edit Box Titles

• Right-click box objects to Edit Title. This enables an in-place text editor for the box's title.
• The existing text is highlighted by default. Use your keyboard and/or mouse to highlight and edit text.
• Click outside of the box, or hit TAB on your keyboard, to accept changes.
• Titles default to all CAPS.
• Please do not exceed 2 lines of text for your box titles.

Edit Box Content

WARNING: DO NOT copy and paste text from MS Word. Hidden code can cause undesired formatting results, printing issues or glitches that can permanently damage drawings. Please only copy and paste from generic text editors.

• Right-click a box object and select Edit Content. The box's content editor will open in a pop-up window.
• A WYSIWYG editor will open for text entry and formatting.

Undo/Redo

• Click the undo/redo arrows to undo/redo text and formatting changes. Only able to undo changes made during the current editing session.

Spell Check

• Click the ABC check icon to spell check box content.
• Errors will be underlined in red. Right-click marked words for suggested corrections.
• Select the corrected word, or select "Ignore Word" or "Ignore All".

Insert/Edit Hyperlink

• Highlight the text a hyperlink will be created with.
• The Insert/Edit Link icon will become active.
• Click the Insert/Edit Link icon to open the "Insert/edit link" pop-up box.
• Provide the link URL. The "target" link is set to open in a new window, by default.
• Optional: Provide a link title. This will not appear in the content.
• Click "Update" to save and return to the content editor.

Remove Hyperlink

• Highlight the desired hyperlink. The Unlink icon will become active.
• Click the Unlink icon to remove the hyperlink.

Insert Image

• Click the Insert Image icon to open the "Insert/Edit Image" pop-up box.
• Provide a URL for an image located online.
• Optional: Provide an image description, and customize the alignment, dimensions, border, vertical and horizontal space.
• Click "Insert" to save and return to the content editor.

Insert/Modify Tables

• Place your cursor in the desired location for the table you wish to add.
• Click the Insert Table icon to open the "Insert/Modify table" pop-up box.
• Change the values for "Cols" and "Rows" as desired.
• Optional: Customize cellpadding, cellspacing, alignment, border, width, height, class and table caption. Explore Advanced tab options.
• Click "Insert" to save and return to the content editor.
• Click on the table to add content the table cells. Use the additional tools that are now active across the toolbar to modify table row and cell properties, merge cells, and insert and remove rows and columns.
• Or, click the Insert Table icon again to modify the table layout, make the desired changes, and click "Update" to save.

Edit CSS

For the more advanced user.

• Click the AA icon to customize inline CSS styling. An "Edit CSS Style" pop-up box will appear.
• Explore options and click "Apply" to see the changes save to your content box.

Edit HTML (Source Code)

For the more advanced user.

• Click the HTML icon to open the "HTML Source Editor" pop-up box.
• Edit HTML code with HTML and CSS as desired, and click "Update" to save changes to the content editor.

Deleting Objects

• Delete objects with the DELETE key or the object's right-click menu.

NOTE: There are no “save” or “undo” features built in to the Web Tool. Drawing changes are saved instantly. Confirmation is provided before any objects are deleted from the drawing canvas.

Connections

A dynamic connection that moves between two or more box objects as layout changes occur. Please use Connections for ease of layout adjustments and ADA compliance. Connections can translate the relationship of box objects in text only views of these drawings.

• Right-click the starting box to select Start Connection Here; right-click the ending box to select End Connection Here from the menu.

Right-click box connections to access:

• Start Point menu

Sets the side of the box the line is drawn from: Top, Bottom, Left or Right.

• End Point menu

Sets the side of the box the line is drawn to: Top, Bottom, Left or Right.

• Orientation menu

Sets the orientation (horizontal or vertical) of the connection from the start point. This option is not available if segment is set to 1 (Direct Line).

• Segments menu

Sets the number of segments in the connecting line:

• 1-Seg Line (Straight)
• 1-Seg Line (Diagonal)
• 2-Seg Line ("L")
• 3-Seg Line

The default, 1-segment line, may not be visually connected to the end point. Adjust by moving the ending box, or selecting a different segment or orientation option.

1-Seg Line (Diagonal) creates a diagonal line to the destination box regardless of box position.

• Color menu

Sets the color of the connection.

• Auto Position

Detects box location to adjoining box, and resets connection to 1-Seg Line (Straight).

• Delete

Permanently removes the connection, after confirmation.

Can also perform same action by hitting the DELETE key on your keyboard.

Changing Object Color

• To change an object's colors, select the object and click a color from TOOLS color palette, or using Color on the object's right-click menu.
• Connections are automatically assigned the color of the box they start from. If you change the color of the box, the connection is automatically updated; however you can manually override the connection color as instructed above.

Moving Objects

• Click anywhere on a box object, and drag and release your mouse at the desired location. When clicked, boxes are highlighted with a blue frame.

Resizing Boxes

• When selected, boxes are highlighted with a blue frame, with left and right blue control points. Click and drag either point to expand/retract box width.
• Box height is determined by content.

Positioning Objects

• When selected, boxes, connections, lines and arrows show a blue frame, with a green control point at the start, and a red control point at the end. The object's menu can be brought up by right-clicking anywhere within this frame.
• Click and drag the green start point or red end point to vertically or horizontally adjust the starting or ending location.
• Connection start and end points can "slide" to any desired location along the TOP, BOTTOM, LEFT and RIGHT edges of box objects.
• When dragging a box, line or arrow, hold down the ALT key (Option on Mac) to move the object without snapping to the grid.
• When dragging a start or end point for a line or arrow, hold down the Shift key to make the line snap to a vertical or horizontal layout.

Video Demonstration

View a short video demonstrating several key Web Tool drawing features here.

Deleting Drawings

There is no way to recover deleted drawings! Don't be hasty to clean-up or delete old versions of drawings. Take advantage of the version control this Web Tool provides to maintain an archival history of your Roadmaps.

• To delete an entire drawing, including all of its versions:

1. Click Drawing Properties on the drawing list or VERSIONS menu
2. Click Delete drawing and all versions at the bottom of the page, and
3. Click Yes to confirm.

CAUTION! Deleting drawings in this manner will remove all versions. Please be careful! Deleting drawings will break any links from external web pages to that drawing. There is no way to recover deleted drawings!

Deleting Drawing Versions

1. To delete a drawing version, click Version Settings next to the drawing version on the drawing list
2. Click Delete this version at the bottom of the page, and
3. Click Yes to confirm. That version number will no longer be available for future versions of that drawing.

If a drawing only has one version

1. Click Drawing Properties from the drawing list or VERSIONS menu
2. Click Delete drawing and all versions at the bottom of the page, and
3. Click Yes to confirm. A Drawing can't exist in the system without have 1 version associated with it.

If a drawing version is currently Published

• The version cannot be deleted.
• Copy the published version to a new version and click the Version Settings link on the old version to delete that version, or click Drawing Properties from the drawing list or VERSIONS menu to Delete drawing and all versions (at the bottom of the page), and click Yes to confirm.

Lock This Version

• From the TOOLS menu, or Version Settings Actions menu, click lock this version to prevent changes to a specific version.
• This is ideal when you are collaborating on a drawing, or want to compare versions without the risk of making accidental changes, and you are not ready to “publish”.
• The TOOLS and Actions menus will automatically update to show that this version is now locked.
• Copy it to a new version to make changes.
• Or, click publish this version in the TOOLS menu if no more changes are required to publish it.

Copy This Version

From the TOOLS menu, click copy this version. A pop-up window will appear.

Drawings at Your Organization

• Create a New Version to the existing drawing

• The next available version number will be added in your drawing list.

• Create a New Drawing copies the existing drawing into an identical new drawing at your organization, and Version 1 will be created.

• Edit the new drawing name (Occupation/Program) before hitting “OK”.

Drawings at Another Organization

• A New Drawing will be created in your organization.

• Edit the new drawing name (Occupation/Program) before hitting “OK”.
• The drawing will be added to your drawings list and Version 1 will be created.

• The drawing canvas will refresh with the new version or drawing to begin editing.

NOTE: If no new drawing name is provided, the original drawing name is used and the word “copy” is appended to the new drawing name by default.

Print This Version

For best results, design your Roadmap Drawing to fit to one (1) page in a portrait layout, by keeping all objects within the boundaries of the drawing title bar. The Web Tool does not currently support landscape layout or multi-page printing.

• From the TOOLS menu, print this version to render a Roadmap Drawing for printing from the browser menu.
• Set your browsers print settings to "print background images" so that titles of boxes print white over dark colored boxes.

Setup Firefox
* Click File → Page Setup...
* Make sure Options - Print Background (colors & images) is checked
* Click OK to save

Setup IE7
* If you do not see your browser toolbar at the top of your browser window, 
  hit the ALT key (for PC) to make it visible.
* Click Tools → Internet Options
* Click the Advanced tab
* Under Settings, scroll down to Printing
* Make sure Print background colors and images is checked
* Click OK to save

• Select File → Print Preview to preview your drawing prior to printing, and to ensure it will fit to one (1) page.
• Change print size/scale from "Shrink to Fit" to a fixed percentage if the preview shows an undesired layout.

Print To PDF

• Users on Mac computers are able to print direct to PDF.
• PC users are able to print to PDF if they have PDF writing software installed on their system.
• Printing direct to PDF will not keep hyperlinks in your roadmap drawings "live".

By emailing helpdesk@ctepathways.org and requesting a PDF of your Roadmap, you are guaranteed to have a PDF document with active hyperlinks, keeping your Roadmap data accessible to all viewers.

When submitting a request, please include your name, school, drawing title and version number. We will provide a high-resolution PDF document by email.

Publish This Version

• Published drawings are publicly accessible. If you are ready to embed, or link to, a drawing in a public website, follow the instructions below. This will mark the drawing as published, and prevent changes to the "published" version.
• Copy it to a new version to make changes. New versions that are published will be instantly accessible through shared published links.
• Public links to published drawings will always reference the currently published version!
• Previously published versions can no longer be edited, however, they can be re-published.

To publish a drawing:

1. Click publish this version from the TOOLS menu
2. You will be taken to the Drawing Properties page, and the version published will be highlighted and stamped as "(Published)".

NOTE: Users are able to publish drawings within their organization only.

Embedding Published Roadmap Drawings

Several examples are provided to illustrate the different possibilities for embedding Roadmap Drawings into public websites.

Embedding Published Drawings

• It is recommended that you embed a drawing by inserting an <iframe> tag into your website code. This will present the Roadmap drawing within the design of your website, maintaining your website navigation while students and advisors review the Roadmap.
• You can define the height and width of the <iframe> in your website document to best fit the Roadmap, as well as modify the frameborder and scrolling options.

Here is an example of the embed code for a published drawing:

<iframe width="800" height="600" 
src="http://oregon.ctepathways.org/c/published/lcc_drafting.html" 
frameborder="0" scrolling="no"></iframe>

• To obtain the embed code, click on the Drawing Properties icon from the drawing list or VERSIONS menu.
• The URL for the drawing will always have the word "published" within the URL, like this:

http://oregon.ctepathways.org/c/published/lcc_drafting.html

• This is the best method of embedding a drawing. When a new version of this drawing is published, this link will always reference the currently published version of the drawing - specified by the drawing code, in this case, "lcc_drafting".

NOTE: If the drawing is renamed after a drawing is embedded, the drawing code will change as well, breaking any links on external sites to this drawing. For this reason, it is a good idea never to change the names of drawings once they are used in external sites.

Embedding an Unpublished Version

• If you wish, you can also embed an unpublished version of a drawing. In this case, you provide the version number (3.html) in addition to the drawing code.
• You can find the full URL on the Version Settings page.

Here is an example of modifying embed code for a specific version of a drawing:

<iframe width="800" height="600" 
src="http://oregon.ctepathways.org/c/version/lcc_drafting/3.html" 
frameborder="0" scrolling="no"></iframe>

NOTE: When embedding a drawing this way, you will ALWAYS be linking to this specific version. If a new version is created and published, this has the disadvantage of not automatically updating when a new version is created and published. This method is not recommended except for special cases.

Text-Only View

• A URL to an Accessible (text-only/ADA Compliant) version of your drawing is available in the Drawing Properties page, accessible from the drawing list or VERSIONS menu.
• The URL for the drawing will always have the word "text" within the URL, like this:

http://oregon.ctepathways.org/c/text/lcc_drafting.html

• The "Accessible" URL will always link to the published version of that drawing.
• This view eliminates all the graphical components of the roadmaps, and is suitable for viewing in any browser or using a screen reader.
• Include a link to this URL on your web page where you have embedded the full Roadmap drawing so that visitors can access a version of your drawing that will be compatible with screen readers.

IMPORTANT NOTICE: In order for a Roadmap to function in this view, it must be created using Connections that link boxes and content together. If a drawing does not use connections, it will still be visible in this view, however it will be difficult to navigate. It is the responsibility of the Roadmap creator to assure their Roadmaps are created in a way to support this representation.

ADA/504 Accessibility Compliance

Viewing Roadmaps

• The transition to using the Canvas technology for rendering roadmaps also enables end-users and Roadmap creators with vision impairments to zoom the view of each Roadmap to a certain extent.
• Using the browser's zoom functionality a Roadmap viewer can zoom a Roadmap in or out of normal view.
• Zooming out too far will cause certain components of the Roadmap to appear broken, or missing color.