Click on a topic to jump straight to it.
We’re all used to surfing the web and with search engines, we don’t even have to know the specifics of where we’re going. When you access any website, you or your search engine enters the website’s address. Each webpage has a different address, or URL. URL stands for Uniform Resource Locator.
Just like a street address, a URL is made up of parts which describe the location of this webpage.
Let’s take a look at an example:
Looking at the URL of the Homepage of Blackboard, we see the following:
|http://||‘The world’||This is a protocol. The HyperText Transfer Protocol (http) is a set of rules for how files should behave on the web.|
|bbstyling.eesysoft.com||The town||This is the Hostname. Note that your Staging environment will have a different hostname.|
|webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_1_1||The street address (house no, street name, postcode)||Known as the filename, this specifies the page within your host using a collection of identifiers. Here we see an identifier of tab_group_id=_1_1. Hovering over the tab entitled “Community”, we can see the URL connected to this tab in the footer bar of the window. Note here that the URL for this tab is the same except for the end, where the identifier is tab_group_id=_3_1. From this, we can tell that this part of the URL filename is specifying which tab is selected on the page.|
You don’t need to understand all of the strange strings included in a URL to be able to use Context Parameters. A lot can be understood just by comparison and trial and error. As you create more and more Contexts, you will become more comfortable with these parameters and making them work for you.
So, let’s take a look at how it looks when you’re actually capturing a page through the EesyProducer:
Follow along with a Course Content page in your LMS
Enter the web address of your LMS application, log in, and navigate to a Course content page.
Click on Capture to name and save the page.
In the EesyProducer, the URL is broken down for you in the Context Parameters window.
Check the Host box if you want this Context to only be available in this environment.
The Path specifies the absolute minimum criteria required to access this page and should always be checked.
The Parameters allow you to specify further identifiers where this page appears in more than one place. For example, here we see a Course_ID. By checking this box, the Context will only be valid for this course. Leaving this box unchecked would result in the Context being valid for this page in all courses.
Context Parameters do not always have to be used. Sometimes, you do not want to limit your Context by a page, but rather by an item that appears in several places. There are some HTML Elements which appear on every webpage of your LMS. It is also possible to encompass all of these in one Context. How, I hear you gasp? Simple!
If an HTML Element appears across multiple webpages and has been identified by Recognition Rules, the Context Parameters which identify the page no longer apply. Context Parameters can be updated at any time to suit your needs.
Follow the steps below to edit Context Parameters:
“I’ll be wearing a red rose”
Have you ever arranged to meet up with someone whom you’ve never seen before? Sometimes they give you a particularly useful nugget like “I’ll meet you outside the station and I’ll have a rucksack”. Do you know how many people exit a train station with rucksacks?!
The same goes for recognizing items on pages within your LMS. In order for the system to recognize it, we have to provide some criteria so that it can be recognized effectively.
When we describe people, we talk about eye and hair color, height, build, maybe they have a beard, a scar or a tattoo. When we describe items on a webpage, we talk about HTML Elements and Attributes.
So, let’s learn some of the lingo
If you haven’t worked with webpages before, you will need to understand a bit about how a webpage is structured and how certain criteria, like link addresses, are defined. So without further ado, here’s a short intro for you:
Webpage structures are created using a coding language called HTML. This is true for every webpage. So, let’s have a look at one:
Follow along with the EesySoft Solutions page
TIP! Try it out! Go to your favorite webpage, right-click on an area and select Inspect. This will open a coding window which will show you the HTML Elements and their Attributes that are responsible for what you see. Hover over an HTML element to see it highlighted on the webpage itself.
The main HTML Elements you are likely to see are:
|<div>||A Division, or section of the page|
|<h1>||Labelled 1 to 5, these are different sized Headings in a Division|
|<p>||A text entry, this is also known as Paragraph|
|<span>||A portion of another Element|
|<iframe>||A section of the screen linked to an external application. You will see these in interfaced applications like Turnitin, Collaborate Ultra and box view|
|<a>||Known as Anchor, this Element allows you to link an item from outside the webpage. For example, an anchor is used for links, and for Elements as the picture itself is sourced from an external location, or Source|
|<ul>||An unordered list|
|<li>||An item in a list|
Now, let’s see how we can do the same thing through the EesyProducer:
Follow along with the Blackboard Homepage
Clicking on the area of the page containing the Notifications Dashboard link, we can see that this is an HTML Anchor Element. This Element is highlighted in the Windows Structure panel on the left. Let’s click on the DIV Element in the Windows Structure Panel that contains this Anchor Element. We can now see that the whole Toolbar is highlighted, including the Anchor relating to My Institution. Notice that in the Details section under the Windows Structure Panel, the Anchor Element has 2 available Recognition Rules and the Division Element only has 1.
Once we’ve identified the HTML Element, we need to mark it for the system. That’s where Recognition Rules come in.
As you can imagine, there is likely to be more than one of some of these Elements on a page. After all, it is very rare to open a website which only has one area of text in it or that doesn’t contain links to other pages. If we don’t define, for example, which of the Anchor Elements we are interested in, it would be like us describing a person by saying they are a man! Not very specific.
However, most HTML Elements have an Attribute which describes further how the Element should look, where on the page it should appear, where a link should direct to, where an image is sourced from, etc. We use these Attributes in Recognition Rules. These Attributes can be very specific or more general, but all provide more recognizing features than an HTML Element alone.
Here are our top 5 HTML Attributes and an example of how specific they are likely to be:
|ID||“His name is John Smith”||Specifies a unique id for an HTML Element|
|Url||“He lives at Number 1, Diagon Alley, London, England, The World”||Specifies a unique URL|
|Href||“He can be found in the Leaky Cauldron”||Specifies the unique URL of a link|
|InnerHTML||“They call him Shirley!”||Specifies a text value, usually as a decription of an HTML Element. This may change in a multi-lingual environment|
|Class||“He has brown hair”||Specifies one or more classes for an HTML Element. Classes relate to Style Sheets which are coding in CSS relating to the style and positioning of elements.|
As you can see from the examples above, we are now starting to get a lot more specific. Let’s take a look at a real example:
Follow along with the Blackboard Homepage
From our earlier example, with the Anchor Element for the Notifications Dashboard highlighted, there are 2 Recognition Rules available. Right-click on Recognition Rules in the Details Panel and select Add Recognition Rule.
Here we can see the 2 Attributes associated with this HTML Element. Let’s weigh up the pro’s and con’s:
And the winner is…
The InnerHTML is always a good bet. Even if your users are able to view the application in a different language, you can simply create a second Recognition Rule with the InnerHTML value of the other language.
Now let’s take a look at the Division Element’s available Attributes:
As a Division Element is used as a container for other Elements, it is not surprising to see that the only Attribute associated with it is a Class. Classes are used to set styling and positioning such as the background color, font, alignment etc. This can be further seen in the Attribute’s value, it appears this Class is likely assigned to more toolbars, perhaps even in this page. If you’re interested in looking at how much your users click on toolbars, then have at it!
There are some HTML Elements which appear on every webpage of your LMS. It is also possible to encompass all of these in one Context. If an HTML Element appears across multiple webpages and has been identified by Recognition Rules, the Context Parameters which identify the page do not apply and can be removed. To see how, jump to Editing Context Parameters.
I spy…with my Scan for Context…something on this page which meets my Recognition Rules!
If you want to identify a part of a page for your Context, but want the Context to be triggered at a page level, this is the functionality for you! In this way, you can draw your users’ attention to the part of the page without having to chance that they will hover over it.
Let’s take a look at an example promoting the Student Preview Mode.
Follow along in your staging environment.
Select the folder in which you want to save your Context in the Navigation Panel and click on the icon.
Enter the web address of your LMS application and log in with a user ID enabled for CourseRole_Instructor.
Navigate to a page in the LMS where the Student Preview Mode icon is visible and Capture the page.
Because we are testing this in our Staging environment first, we will check the Host for the time-being.
As we want our Context to be valid for any page on which the Student Preview Mode appears, we will leave the Path and Parameters unchecked.
It’s worth noting the following in this example:
Give your Recognition Rule a name, check the Scan for Context box and click on Publish to save your Student Preview Context.
Now we can add a proactive message to let Instructors know all about this fantastic feature. Let’s take a look at what the user will see:
By selecting Scan for Context, our message will appear on any page where this icon appears without the user having to hover over the Student Preview icon themselves.
Widen the net and catch more users!
Not everything in your LMS covers a large area, so how can we make something small stand out? Well, we can widen the ‘catchment’ area of a Recognition Rule by connecting it to an HTML Element that covers a larger part of the page.
Or perhaps the HTML Element that you’re interested in doesn’t always appear in the same place. By connecting the Sub-Context to the page, we can make sure we find it no matter where it’s hiding.
Let’s take a look at an example:
Follow along with a Course Content page in your LMS
Earlier, we captured a page Context for the Content list page of any course. Now, let’s look at how we can capture any page within the Content section of any course.
Highlight the breadcrumb relating to Content in the Working window, right click on Recognition Rules and take a look at the options.
The Class is not very useful so we will stick with the more unique InnerHTML. As InnerHTML is defined in the code, it is important that we don’t remove any of the spaces at the front.
Give the Recognition Rule a name and click on Publish to save the Sub-Context.
Now we can connect this Sub-Context to our page.
Reopen the page Context from the Navigation Panel and click on BODY in the Windows Structure.
Right-click on Recognition Rules and select Glue Child (this is old terminology and will be renamed soon). You can now select your Sub-Context from the dropdown menu provided. Click on OK to attach it.
You will notice that there are already Recognition Rules set on this page. These are automatically created from our Context Parameters. Now that we have effectively created a Sub-Context for the content breadbrumb, we no longer want this page Context to have the Path for the content list page as a rule.
Remove this Recognition Rule by right-clicking on it and selecting Delete. Notice, the Recognition Rule below entitled CHILDSELECTOR – this is our connected Sub-Context. At this point, you may decide to rename the Context to more accurately describe what it does.
Finally, don’t forget to click on Publish to save your hard work!
With webpages often having a lot of Elements and potentially vague Attributes, how can we be sure that our Recognition Rules are specific enough?
Well, this comes down mostly to practice and trial and error.As we have had lots of practice, here are a few of the lessons that we have learnt to help you on your way:
As I’m sure you are starting to grasp, with Context Parameters and Recognition Rules, webpage content is your oyster. You really have power over how specific or how vague you want to be and with great power comes great responsibility. To that end, we really recommend that you test your Recognition Rules thoroughly to ensure that they work just right before using them in your Production environment.
Do you have a Context that’s giving you sleepless nights? Or do you have one you’re especially proud of? Please get in touch!
Message Types and how they behave The Help Item Overview User Segments Create a Hint message Create a Popup message Create a Systray message Create an HTML Help Item Create a File message Create a Link message