Embedding Roadmaps & POST Views
From Career Pathways Tutorial
| Line 5: | Line 5: | ||
== Introduction == | == Introduction == | ||
| - | There are several reasons you would want to embed | + | There are several reasons you would want to embed Roadmap Drawings in your organization's web pages rather than simply linking to them. |
* Embedded roadmaps keep your visitors on your site and maintain visual coherence with your branding | * Embedded roadmaps keep your visitors on your site and maintain visual coherence with your branding | ||
* Visitors won't feel like they've come to a dead end, and will always have a way to return to your home page | * Visitors won't feel like they've come to a dead end, and will always have a way to return to your home page | ||
| Line 12: | Line 12: | ||
== Basic Embedding == | == Basic Embedding == | ||
| - | The standard way to embed roadmaps in your webpages is by using the "embed code" provided in a roadmap's | + | The standard way to embed roadmaps in your webpages is by using the "embed code" provided in a roadmap's http://oregon.ctepathways.org/common/silk/cog.png Drawing Properties page. This code looks something like this: |
<pre> | <pre> | ||
<div id="pathwaysContainer" style="width:100%; height:600px"></div> | <div id="pathwaysContainer" style="width:100%; height:600px"></div> | ||
<script type="text/javascript" src="http://oregon.ctepathways.org/c/published/386/embed.js"></script> | <script type="text/javascript" src="http://oregon.ctepathways.org/c/published/386/embed.js"></script> | ||
</pre> | </pre> | ||
| - | This gives you the flexibility to easily adjust the width and height of the roadmap on your web page. | + | This gives you the flexibility to easily adjust the width and height of the roadmap on your web page. |
| + | |||
| + | <b>NOTE</b>: to avoid scroll bars appearing on the page, you should adjust the width and height for each drawing. | ||
== Basic Embedding without Javascript == | == Basic Embedding without Javascript == | ||
| - | If you don't want to use a <script> tag to embed the drawings, you can alternatively use an iframe. This iframe code is actually written by the javascript method above. | + | If you don't want to use a <script> tag to embed the drawings, you can alternatively use an ''iframe''. This iframe code is actually written by the javascript method above. |
<pre> | <pre> | ||
<iframe width="800" height="600" src="http://oregon.ctepathways.org/c/published/386/embed.html" | <iframe width="800" height="600" src="http://oregon.ctepathways.org/c/published/386/embed.html" | ||
frameborder="0" scrolling="auto"></iframe> | frameborder="0" scrolling="auto"></iframe> | ||
</pre> | </pre> | ||
| - | + | With this method you lose the URL-tracking functionality of the system. The code provided with the [[#Basic Embedding|Basic Embedding]] feature includes a snippet of Javascript which reports back to the server the URL of the page embedding the drawing. | |
| + | |||
| + | If you choose to embed drawings by using an iframe, we request that you also include this bit of Javascript which will report the page URLs back to our system. Please be sure to insert the unique drawing id (e.g. 386 or 850) in the appropriate place. | ||
<pre> | <pre> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Line 37: | Line 41: | ||
If you want to get away from having to specify the width/height of the container for each drawing, there is a way to dynamically resize the iframe after the content has loaded. | If you want to get away from having to specify the width/height of the container for each drawing, there is a way to dynamically resize the iframe after the content has loaded. | ||
| - | In order for this to work, you need to be able to access an element inside the iframe from your containing document. Cross-site restrictions prevent this from being possible, since your containing document is on a different domain than the contents of the iframe. You need to get the contents of the iframe into a document on your domain. This is done via a proxy script that you will need to host on your domain. Note the change in the URL of the iframe: | + | In order for this to work, you need to be able to access an element inside the iframe from your containing document. Cross-site restrictions prevent this from being possible, since your containing document is on a different domain than the contents of the iframe. You need to get the contents of the iframe into a document on your domain. This is done via a proxy script that you will need to host on your domain. Note the change in the "src" URL of the iframe: |
<pre> | <pre> | ||
| Line 43: | Line 47: | ||
</pre> | </pre> | ||
| - | You | + | You will also need [http://jquery.com jQuery] for this to work, so go ahead and download this and include it in your <head> tag. |
Include this script somewhere on the page. It will wait until the iframe has loaded, then go look inside it to find the size of the canvas and resize the iframe appropriately. | Include this script somewhere on the page. It will wait until the iframe has loaded, then go look inside it to find the size of the canvas and resize the iframe appropriately. | ||
| Line 69: | Line 73: | ||
== Dynamic Embedding == | == Dynamic Embedding == | ||
| - | If you use a CMS which does not allow users to include <script> | + | If you use a CMS (Content Management System) which does not allow users to include <script> or <iframe> tags, you will need a different way to embed drawings. |
PCC came up with a dynamic wrapper for their drawings which matches their site's colors and navigation. You can see an example [http://www.pcc.edu/pathway/?map=pcc_manufacturing_technician261 here]. They are also using the Advanced Embedding technique to dynamically resize the container. People wanting to link to a roadmap only have to put the drawing code in the url, and the page automatically points the iframe to the new content. | PCC came up with a dynamic wrapper for their drawings which matches their site's colors and navigation. You can see an example [http://www.pcc.edu/pathway/?map=pcc_manufacturing_technician261 here]. They are also using the Advanced Embedding technique to dynamically resize the container. People wanting to link to a roadmap only have to put the drawing code in the url, and the page automatically points the iframe to the new content. | ||
| Line 94: | Line 98: | ||
== Link Tracking == | == Link Tracking == | ||
We keep a list of all published roadmaps in the system, which is used in a couple places: | We keep a list of all published roadmaps in the system, which is used in a couple places: | ||
| - | * The front-end website (link TBD) | + | * The front-end, public website (link TBD) provides as a way for visitors (e.g. job seekers) to find a community college that offers an occupation/program they want to study. |
| - | * [http://www.qualityinfo.org OLMIS] provides detailed reports on occupations, and they (will) include links to your | + | * [http://www.qualityinfo.org OLMIS] provides detailed reports on occupations, and they (will) include links to your published roadmap drawings on an [http://www.qualityinfo.org/olmisj/OIC?areacode=4101000000&rpttype=full&action=report&occ=132011&go=Continue occupational report] page. This allows us to provide links to <b>your</b> web pages when we report programs to the OLMIS database, so that visitors end up on your website. |
| - | If we have the URL of the page on your website that is embedding a roadmap, we can use this link instead of the default oregon.ctepathways.org | + | If we have the URL of the web page on your website that is embedding a roadmap drawing, we can use this link instead of the default link to that roadmap on our [http://oregon.ctepathways.org oregon.ctepathways.org] server. |
Revision as of 15:06, 7 May 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
Contents |
Introduction
There are several reasons you would want to embed Roadmap Drawings in your organization's web pages rather than simply linking to them.
- Embedded roadmaps keep your visitors on your site and maintain visual coherence with your branding
- Visitors won't feel like they've come to a dead end, and will always have a way to return to your home page
- You can track visitors using your standard analytics software, since visitors will still be visiting pages on your website
Basic Embedding
The standard way to embed roadmaps in your webpages is by using the "embed code" provided in a roadmap's 
Drawing Properties page. This code looks something like this:
<div id="pathwaysContainer" style="width:100%; height:600px"></div> <script type="text/javascript" src="http://oregon.ctepathways.org/c/published/386/embed.js"></script>
This gives you the flexibility to easily adjust the width and height of the roadmap on your web page.
NOTE: to avoid scroll bars appearing on the page, you should adjust the width and height for each drawing.
Basic Embedding without Javascript
If you don't want to use a <script> tag to embed the drawings, you can alternatively use an iframe. This iframe code is actually written by the javascript method above.
<iframe width="800" height="600" src="http://oregon.ctepathways.org/c/published/386/embed.html" frameborder="0" scrolling="auto"></iframe>
With this method you lose the URL-tracking functionality of the system. The code provided with the Basic Embedding feature includes a snippet of Javascript which reports back to the server the URL of the page embedding the drawing.
If you choose to embed drawings by using an iframe, we request that you also include this bit of Javascript which will report the page URLs back to our system. Please be sure to insert the unique drawing id (e.g. 386 or 850) in the appropriate place.
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/pathways/INSERT_DRAWING_ID?url='+window.location);
document.getElementsByTagName('body')[0].appendChild(s);
</script>
Advanced Embedding
If you want to get away from having to specify the width/height of the container for each drawing, there is a way to dynamically resize the iframe after the content has loaded.
In order for this to work, you need to be able to access an element inside the iframe from your containing document. Cross-site restrictions prevent this from being possible, since your containing document is on a different domain than the contents of the iframe. You need to get the contents of the iframe into a document on your domain. This is done via a proxy script that you will need to host on your domain. Note the change in the "src" URL of the iframe:
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?id=386" frameborder="0" scrolling="auto"></iframe>
You will also need jQuery for this to work, so go ahead and download this and include it in your <head> tag.
Include this script somewhere on the page. It will wait until the iframe has loaded, then go look inside it to find the size of the canvas and resize the iframe appropriately.
$(document).ready(function() {
$("#mapframe").load( function(){
// access frame content (must be on same domain)
var iContent = $(this.contentDocument);
// resize the iframe to match the canvas' dimensions
$("#mapframe").height(iContent.find("canvas").height());
$("#mapframe").width(iContent.find("canvas").width());
});
});
The proxy script can be written in any language. All it needs to do is echo the contents of the normal .html URL on oregon.ctepathways.org. A sample script in PHP follows:
<?php
$id = intval($_GET['id']); // ensure only numbers are passed in the query string
echo file_get_contents("http://oregon.ctepathways.org/c/published/" . $id . "/view.html");
?>
If your PHP settings restrict you from using file_get_contents to read a remote file, you will need to use CURL or something similar.
Dynamic Embedding
If you use a CMS (Content Management System) which does not allow users to include <script> or <iframe> tags, you will need a different way to embed drawings.
PCC came up with a dynamic wrapper for their drawings which matches their site's colors and navigation. You can see an example here. They are also using the Advanced Embedding technique to dynamically resize the container. People wanting to link to a roadmap only have to put the drawing code in the url, and the page automatically points the iframe to the new content.
The script to something like this might look like the following:
<?php
include('header.htm');
?>
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/pathways/<?=$_GET['id']?>?url='+window.location);
document.getElementsByTagName('body')[0].appendChild(s);
</script>
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?id=<?= $_GET['id'] ?>" frameborder="0" scrolling="auto"></iframe>
<?php
include('footer.htm');
?>
Link Tracking
We keep a list of all published roadmaps in the system, which is used in a couple places:
- The front-end, public website (link TBD) provides as a way for visitors (e.g. job seekers) to find a community college that offers an occupation/program they want to study.
- OLMIS provides detailed reports on occupations, and they (will) include links to your published roadmap drawings on an occupational report page. This allows us to provide links to your web pages when we report programs to the OLMIS database, so that visitors end up on your website.
If we have the URL of the web page on your website that is embedding a roadmap drawing, we can use this link instead of the default link to that roadmap on our oregon.ctepathways.org server.
Page Tools
Personal tools
