Roadmap Drawings

From Career Pathways Tutorial

Revision as of 07:39, 16 April 2009

<< 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

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

• Click link to Preview the 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) and (Version Locked).
• 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 #.
• 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 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.

   

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.

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

• 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.

WARNING: You are welcome to copy and paste text from any generic text editor such as NotePad, however please DO NOT copy and paste text from MS Word as undesired formatting results or drawing glitches may occur.

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.

Customizing Objects: Editing Content

• Right-click an object for a menu of customizing options.

• To add/edit box titles, right-click the desired box and click Edit - Title.
  • Use your keyboard and/or mouse to highlight and edit text.
  • Click outside of the box to accept changes.
  • Titles default to all CAPS.
  • Please do not exceed 2 lines of text for your box titles.

• To add/edit box content, right-click the desired box and click Edit - Content.
  • A WYSIWYG editor will open for text entry and text formatting. Here you can create hyperlinks and edit source code for additional formatting options.
  • NOTE: You are welcome to copy and paste text from any generic text editor such as NotePad, however please DO NOT copy and paste text from Microsoft Word as undesired formatting results may occur.

• Create dynamic connections. Connect two boxes by selecting Start Connection Here from one box's right-click menu and End Connection Here from another’s. These dynamic connections move with the connected boxes as layout changes occur.

• Customize connections by right-clicking on the connecting line and selecting options such as Start Point, End Point, Orientation, Segments (default set to “1 (Straight Line”), Color, and Delete.

• When selected, connections now show a blue box 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 box. Click and drag the start control point or end control point to adjust the starting or ending location.

• To change object colors, select the object and click a color from TOOLS, or using Color on the object's 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 stated above.

Moving and Resizing Objects

• Moving Boxes:

• Click any point of a box, and drag and release your mouse at the desired location. When clicked, boxes are highlighted with a blue box frame.

• Resizing Boxes:

• When selected, boxes are highlighted with a blue box 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, connections, lines and arrows now show a blue box 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 box. Click and drag the start control point or end control point to adjust the starting or ending location.
• 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 control point for a line or arrow, hold down the Shift key to make the line vertical or horizontal.

• Connecting lines adjust with boxes as layout changes occur. Right-click a connection to change connection Segments, and Start and End Points as necessary to obtain desired layout.

• To change the pointing direction of basic arrows, click and drag the arrow head control point in the desired direction. Hold down the Shift key while dragging to make the line vertical or horizontal.

Video Demonstration

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

Copying Drawings

Do you have a drawing that you want to use as a template for other roadmaps? Then this feature is for you!

Select copy this version from the drawing tools menu, or drawing title link from the drawing list menu. This feature operates through a pop-up window.

• Within Your School, you can create:
  • a New Version, to the existing drawing, or
  • a New Drawing, which copies the existing drawing into an identical new drawing at your organization; provide a new^[1] drawing name before hitting “OK”.
• From Another School, you can create:
  • a New Drawing at your school, and provide a new^[1] drawing name before hitting “OK”.
  • the drawing will be added to your school list and Version 1 will be created.

Note

Sharing Unpublished Drawings

These are permanent links to this specific version of the drawing. If this version is deleted, the link will break. If the version is copied and updated, this link will only ever point to this version.

1. From the Drawings list click the info link next to the drawing version you wish to share.
2. Copy and paste the link into an email message, and send it to the desired recipient to share your in-progress drawing.
   • The recipient will view the drawing as a stand-alone HTML web page and will not be able to edit the drawing.

Publishing Drawings

Once "published" a drawing can no longer be edited. From the Drawing list the link to "draw" a roadmap will be changed to read "view" in the drawing list. In order to edit the drawing, a new version must be created by copying the published version. Previously published versions can no longer be edited either, however, they can be re-published.

Links to published drawings will always point to the currently published version of a drawing. When a link to a published drawing is shared by email or embedded in a website you will not have to update that link as new versions are published. The only time a link must be updated is when the drawing title is edited.

To publish a drawing from the Drawing list:

1. Select the info link of a drawing version
2. Click the button to publish this version
3. You will be returned to the Drawing list, and the version published will be highlighted and stamped as "(published)".

To publish a drawing while viewing a drawing in draw or view mode:

1. Select publish this version from the drawing tools menu
2. You will be redirected to the version info page; click the button to publish this version.
3. You will be returned to the Drawing list, and the version published will be highlighted and stamped as "(published)".

Users are able to publish drawings within their school only, with the exception of State Admin who can publish drawings for all schools.

Embedding Published Drawings

To embed a drawing on an external website, copy the Embed Code provided through the Drawing list, drawing title or version info links. Paste this code into the section of your website where you want to include the drawing.

Here is a example of embed code:

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

• Webmaster users can follow the Embedding Instructions provided in the Web Tool site navigation for additional details.

• Adjust width and height attributes to accommodate roadmap accordingly:

width="750" height="600"

Printing Drawings

For best results, design your roadmap drawing to fit to one (1) page in a portrait layout. To do so, keep all objects within the boundaries of the blue title bar at the top of the drawing pane. NOTE: The Web Tool does not currently support landscape layout or multi-page printing.

• From the drawing list, click view or draw for the drawing you wish to print.
• Click print this version, from TOOLS on the drawing canvas, to render a roadmap drawing for printing from the browser menu.
• Select print preview to preview your drawing prior to printing, and to ensure it will fit to one (1) page.

• Change print size from "Shrink to Fit" to a fixed percentage or scale if drawing preview shows an undesired layout.
• Set your browsers print settings to "print background images" so that titles of boxes print white over dark colored boxes. Directions follow below.

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

Print To PDF

Do you need a roadmap drawing in PDF format to share with colleagues or have available to download from your institutions website? By emailing help@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.

NOTE: 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. However, printing direct to PDF will not keep hyperlinks in your roadmap drawings "live". Please email help@ctepathways.org for assistance.

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, click the drawing title from the drawing list, select the link to Delete drawing and all versions at the bottom of the page, and 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!

• Only State Admin users have the ability to delete drawings for all schools.

Deleting Drawing Versions

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 a drawing version, click info next to the drawing version on the drawing list, select the link to Delete this version at the bottom of the page, and 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, click the drawing title from the drawing list and select Delete drawing and all versions at the bottom of the page, and click Yes to confirm.
• If a drawing version is currently Published, the version cannot be deleted. Copy the published version to a new version and click the info link on the old version to delete that version, or click the drawing title from the drawing list to Delete drawing and all versions (at the bottom of the page), and click Yes to confirm.

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.

Text-Only View

A URL to an "accessible" (text-only) version of your drawing is available in the drawing's information page, accessed by clicking the drawing title from the drawing menu. This view eliminates all the graphical components of the roadmaps, and is suitable for viewing in any browser or using a screen reader.

<a href="http://oregon.ctepathways.org/c/text/cocc_emt_basic.html">Accessible version</a>

The "accessible" URL will always link to the published version of that drawing. Include a link to this URL on your web page where you have embedded the full drawing so that visitors can access a version of your drawing that will be compatible with screen readers.

NOTE: In order for a roadmap to function in this view, it must be created using "connections" to link boxes 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.