Html5 packages are becoming an increasingly important element of material delivery in learning environments like Brightspace. There are many commercial tools - and at UHI we have our own: Forge.
Html5, amongst other things, is multi-platform, mobile-friendly and responsive to screen size.
This resource illustrates two main processes:
- How to add a zipped html package to a unit/module in Brightspace; and
- How to create a link to that package (which can be opened in a new window)
To add a zipped html package to a unit/module in Brightspace, follow these steps:
Go to Course tools > Course Admin
Next, click on Manage Files
To keep things as neat and tidy as possible, create a folder to house your html package in. To do this, click New folder
Name the folder, then click Save
Go into your new folder
And click on Upload to add your html content
After clicking Upload you will be given a window to select your files, then click Save
Now that your zip package is in Brightspace you need to unzip it, to do this, use the dropdown list to navigate to Unzip
Creating an item from Manage Files
The first step is to navigate to the content module (e.g. Learning resources > Week 1) that you want to place your link in. From within that content module, select Add from Manage Files from the Upload/Create menu (opposite).
Clicking on Add from Manage Files brings up the Add a File screen. Navigate to the right folder.
Within that folder, locate your unzipped html resource.
And finally, within the unzipped folder locate the index.html file. Put a check in the box to the left of the index file and click Add.
Back in Contents (e.g. Learning resources > week 1) you will see an item has been added to you list of materials; however, this item is a rather blank looking 'Index' (opposite).
There are several things you can do to increase the visibility of your link (many of which are covered in the final section of this RLO: 'The completed link'). At a minimum, let's change the title. To do this, click on the word Index.
Next, type alternative text e.g. 'Ring of Brodgar tour', then hit enter.
The process for uploading html resources created with Forge to Brightspace is exactly the same as the process outlined above; however, when it comes to opening resources in new windows Forge outputs have an additional 'Open in tab' button at the top right of the screen (opposite).
Import Forge HTML5 resources into Brightspace
Alternative method: Add Content Topic
Another way to add a link to an html package in your unit/module is to use the Add Content Topic option from within Manage Files.
Go to Course Admin > Manage Files
Either navigate to existing unzipped html content or upload* an html zip package.
Locate the index.html file
From the dropdown list select Add Content Topic
You are now looking at the Add Multiple Topics window. Use this screen to decide where in your module you want the link to be placed, e.g. Week 1, Topic 2, etc. At this point the link will be given a name automatically; however, you can change the name the title of the link if you wish.
When you are finished, click Add.
Return to Content to check your link (in my case I created a new folder called Topic 2 to differentiate it from my previous uploads).
Simply click on the hyperlinked title to open your package (opposite).
The completed link
After clicking Create in the previous step, the result is a simple textual link (opposite).
Because, at this point, you only have a clickable heading with no other information, our advice would be to take the opportunity to:
- change the title to something more meaningful;
- add some descriptive text, and;
- consider adding an image to draw attention/brighten up the page.
To do this, follow these steps:
Using the dropdown list to the right of the clickable Ness of Brodgar heading select Edit Properties In-place
From the Edit Properties In-Place screen you can edit various areas (click on an area to edit)
Here’s an example of what could be added (click Update to save changes)
As before, double-check how it will look for your students. To do this, click on your username at the top right of the screen and Select View as Student:
Clicking on the heading opens the resource in its own window (with only one set of navigation).