Roadmap Drawings

From Career Pathways Tutorial

Revision as of 05:41, 14 April 2009

<< Return to main Tutorials page...

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

Drawing List

• The drawing list interface allows you to view and 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.
• 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 name underneath the filter boxes.

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

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

Adding a New Drawing

• Click the icon to create a new Roadmap drawing.

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

• Each drawing is highlighted in grey, and reflects who created and modified the drawing.

• Versions of each drawing are listed beneath the drawing name in numeric order. Each version has two links listed next to the version number: info and draw/view.
  • info provides a summary of the drawing Occupation/Program, version number, who created and modified that version, a link to share that drawing with others, and the ability to delete this version - view Deleting Drawing Versions for more information.
    • From here you can add a Note to help identify details about this version, and also Publish this version.
  • draw means the drawings is available to be edited, copied, and/or published. Draw is listed when that version has never been published; Draft is stamped in the background of the drawing.
  • view means the drawings is available to be copied into a new version, and/or is Published. If currently published, you can only copy this version. If previously published, the drawing is stamped Outdated and you can publish this version and/or copy this version to edit the drawing.

• To edit the drawing Occupation/Program name, click on the (Drawing Properties icon) to the left of the title. Here user's can also view detailed information about each drawing version, such as who created and modified each version, or click links to (Draw/Edit Version), (Preview Version), or (Copy Version) for each version.

• Published versions are highlighted in tan, and stamped with the word published in parentheses beside the version number, for example Version 2 (published).

• To obtain the embed code for publishing a drawing to external websites, click the drawing title from the drawing list. See Publishing Drawings for more information.

Adding a New Drawing

1. Click the green + sign at the top of the drawing list.
2. Type a short and descriptive Title for your drawing, such as "EMT", "Accounting", or "Game Programming". Please do not add your organization's abbreviation to the title.
3. Click Create.
4. Your drawing and Version 1 has now been created.
   • Your organization abbreviation, the Career Pathways logo, and drawing title are automatically placed in a header at the top of the drawing area. These are fixed.
   • To edit the drawing title you must return to the drawing list, click the drawing title, and click edit.

Tools Orientation

The drawing window tools operate in a WYSIWYG fashion (What You See Is What You Get). View HELP on the drawing canvas, and click More Help for a complete list of features.

Adding Objects

• Right-click the drawing area for a tools menu to add new objects (box, line, arrow) on the spot clicked.
• Or, from TOOLS (left of the drawing area) click line, arrow, or box to add objects to a fixed left-hand destination on the drawing area.

Deleting Objects

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

Duplicating Objects

• Duplicate objects with CTRL+C, CTRL+V or the object's menu.

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.

Snap To Grid

• Right-click the drawing area for a tools menu to show and/or edit the grid.
• Snap to Grid is enabled by default. To disable, choose Grid → Snap to Grid from the tool's menu.
• The grid is 10 pixels by default, and can be any size. To change the grid size, choose Grid → Edit Grid Size from the tool's menu.
• Grid options are not saved.

NOTE: There are no “save” or “undo” features built in to this web tool. Drawing changes are instantaneously saved as they are made to the drawing. Confirmation is provided before any objects are deleted from the drawing area.

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

Renaming Drawings

Each drawing must have a unique title. The Web Tool stores and references each drawing by school abbreviation and drawing title.

• To rename a drawing:
  1. click the drawing title from the drawing list
  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 save

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

Return to the drawing list by clicking the "back" arrow on your browser, or clicking Drawings from the side navigation of the Web Tool.

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.