BEST PRACTICES IN COURSE DEVELOPMENT

Using Moodle 2.x

Overview

Use of Files in Moodle Reusing Files- Alias Shortcut Method Repositories

Using Media in Moodle Images Video

Course Layout Responsive Design

Backups Site-wide vs Individual

Use of File in Moodle

Many types of files can be used in Moodle.

Moodle uses a system that allows files to be used from many different places.

Use of Files in Moodle

You can reuse files in Moodle by choosing the add alias or shortcut method.

Alias/Shortcut Method

This is an image of the File picker.

Notice how the option to “create an alias/shortcut to file” is selected.

This links to the file and does not copy the file into Moodle.

This also allows for any changes made in the original file to show in the alias file.

Repositories

Repository access is one of the great features in Moodle 2+ versions.

This allows the Moodle Site Administrator to set up File Storage areas that users can use in and outside of Moodle.

There are multiple repositories that can be enabled.

A short list is: Google Drive, Dropbox, Picasa, Alfresco, Amazon S3, YouTube, Flickr, Merlot, and many more.

Repositories

By enabling a repository outside of your Moodle site and using the alias/shortcut method, you can use files without storing them in Moodle.

Things to consider: The backup file of a Moodle course that uses this

method will not contain a copy of that file. So if you share your course backup with someone, they will need to have access to the repository you used as well.

If the file is on a repository that allows public sharing, such as Google Drive, then those files will still be accessible in the backup/restored course.

The alias /shortcut method allows you to change a document in one place for all.

How to Set-up a Repository

To enable a repository, you must have Moodle admin rights.

Go to: Site Administration (Block) -> Plugins -> Repositories -> Manage Repositories

Some repositories also require unique settings. For example, to set-up the Google Drive repository you must have Admin access to your Google Apps account and visit the Google Apps API Console to create a web app and receive a client ID and secret.

For Google Drive, once this has been established, users can log into Google and have access to their Drive files.

Using Media in Moodle

Media is a great medium for teaching and learning. Images, video, and audio files enrich the learning experience.

It is important to remember some best practices, however, when choosing and using media in Moodle.

This will enrich the user experience as well as the resource load on your Moodle site.

Using Media in Moodle

ImagesUsing images in Moodle is a must to break up the monotony of text. Here are a few tips to decrease file size and or need of storing files in Moodle. Use a image repository like Flikr or Picasa Web Albums. If you want to use your own images, you must get them

internet ready. You can do this with any image manipulation software such as the MS bundled Paint program.

You need to reduce the file size. This can be done by making the image smaller, no larger than 600 px is usually necessary.

Some programs also help you compress the image by removing extraneous pixels and using a more compact file type. GIF, JPG and PNG are standard image file types.

Images

Raw image in MS Paint Program (3.4 MB)

Images

Same image resized to 600px wide, now 326.7 KB. This is a 90% reduction in file size!

Images

Now we will compare the size of each file type. GIF uses the least at 120

KB, but quality is poor at least for a photo.

JPG only slightly higher at 157 KB but much better quality

PNG is largest with 615KB (this type is great for illustrations or images needing a transparent background, but not needed for photos.

We have reduced the size of the original image file anywhere from 81% - 97% !

Video

Video and Audio are wonderful teaching tools; But… take up a lot of file space and can be frustrating to the user if they have to download the video/audio file first before using, or if their device is not compatible with the file type

It is important to keep these things in mind when choosing how to use video in your Moodle course.

Video

Video should ALWAYS be streamed. This means that the video is stored in a place that allows streaming through a video player.

This means DO NOT upload your recorded video to Moodle, use a service like YouTube or similar video streaming service.

Using a video streaming service ensures that the file is stored in multiple file “flavors”, and generally it will have a player that detects the device viewing it and chooses the appropriate flavor for that device.

Video

Why is this important! iPads and iPhones do not have the ability to

play Flash files. This is a common format for some types of video creator software.

You want your video accessible from any device. This requires different formats and decoders depending on the device viewing it.

You do not have time to transform and encode files and players for each device that may view your course.

Video

How to use video- When choosing a service,

Make sure that the service will transcode the original video into several formats/flavors that work on all devices.

Make sure the service supplies a option to view it using a HTML5 enabled player for device detection and streaming

Make sure it supplies an embed code (or URL) with these options for putting it into your Moodle course.

Optional but desirable, see if it is already compatible in Moodle. That way you can use videos inside Moodle without leaving.

Video

Example YouTube is an available

repository in Moodle. You can use this repository

when adding a video to any page or label in Moodle.

Video

When selecting the YouTube repository you can search YouTube by keywords

Video

After selecting a video you can see a preview before inserting into your page or label.

Video

When inserted the video will look like text with a link. This is normal. The video will not embed until saved as it needs a player to view.

Video

Saved view in resource

Video

In order for this method to work in all devices, the Moodle administrator must select the HTML5 player option in Make sure that the following are checked

Responsive Design

Responsive design simply means adjusting the layout according to the environment viewing it. Simply put the smaller the screen, the more rearranging that needs to be done.

In web design this typically means using a combination of HTML and CSS to adjust containers, images, and locations so that it adjusts to a pleasing, easy to use page. In an online learning environment there is more to consider. Things such as resource types (i.e. flash movie on and iPad) may not work at all on the device viewing it. Navigation is also a big consideration. Some of those fancy pull down menus do not always work correctly on a mobile phone, causing user frustration.

Responsive Design

When designing for an online learning environment, one must consider: navigation, resources used, and view-ability.

Responsive Design

Moodle has many tools that will help you design a course that will work on any device. Starting with version 2.x, Moodle has built in device detections to assign appropriate themes. The site administrator can choose different themes according to the device viewing it. Moodle allows different themes for default, tablet, and mobile devices.

Responsive Design

Starting with version 2.5, Moodle now offers a theme called Clean theme that uses a bootstrap base for a  responsive design. This theme is designed to de-clutter the page and to adjust navigation and content based on the size of the screen viewing it. This theme has built in style sheets that detect and adjust added content automatically, without the content creator having to know any coding.

Responsive Design

Beyond what Moodle has to offer there are things that the course designer can do as well. A course designer should also consider the content that they are using in a course. Many of these pieces have various settings and forms that are friendlier for mobile devices.

Video – Using video is a great learning tool. However, course designers should consider the user experience when choosing video content. Streaming is the preferred method of video delivery. Uploading a video to use

as content can cause user frustration because a) they have to download the entire thing before they can view it, b) some video “flavors” such as flash do not work on some devices (they have no built in tools to view it.), and c) Moodle is not designed to be a video repository (storage locker) for large files. It uses too many valuable resources and disk space, causing courses to be too large to backup and restore in some Moodle sites.

Choosing a video service is very important. At minimum the video service should be able to take most video formats (.flv, .mov, .mpeg-4, .avi) and convert it into multiple “flavors” for internet streaming via any device. The service should also have a player that adjusts the “flavor” depending on the device being used. HTML5 is becoming a common standard used for delivering content on the web to multiple devices. Look for video services that include this format in their players. YouTube is a good place to start.

Responsive Design

Files – When attaching files it is a good idea to think about the devices that may use them and make sure that the device has a built in tool to view it. For instance, a PDF is a common standard and most mobile devices have apps that will support viewing them if installed. Include links for downloading apps for android and apple that will support the file types used. This guides users to the tools they will need on their device to view your resources properly. Adobe Mobile Download Apps -

http://www.adobe.com/products/reader-mobile.html Tables, Images, and Layout – When using the built in Moodle

Editor tools, a course creator should keep in mind responsive techniques. By default, the Moodle editor will assign a width and height based on the image size or on the content placed. Using a % value instead of a fixed number in pixels or adding a max-width and min-width will help the screen layout the content according to the size of the screen. See the next pages for examples of how to use custom tools to aid in this process.

Responsive Design

A responsive image means that the size of the image will adjust with the size of the viewing screen. There is a few different ways to make an image responsive depending on the placement of the image.

The best way to make images responsive is to use a percentage based on the amount of screen space you would like it to occupy. Below is two versions of one image. The original file is the same. I have not created another image using different sizes. The only difference between the two images is different style values.

Responsive Design

• The first copy has a max-width of 100% in relation to the container it is in.

• The second is at a max-width of 50%.

• For both the height is set to auto.

Responsive Design

Moodle Settings for the Responsive Images To apply the settings to the images on the last

page, I did the following: I clicked the Image Icon in the Moodle Text

Editor

Locate the image you would like to use by selecting Find or Upload Image and locating it in the File picker.

Responsive Design

Moodle Settings for the Responsive Images

Once selected, your Image properties box will display and click the Appearance Tab

In the Appearance Tab, clear any number values from the Dimensions Boxes

Responsive Design

Moodle Settings for the Responsive Images Fill in the Style field with your max- and min-

width values and height: auto. For Example: max-width: 90%; min-width:

35%; height: auto;

Responsive Design

Using Responsive Tables

Sometimes it becomes necessary in Moodle to use a table as a container to lay things out. I see this done many times to make a course more compact. Here is an example: using a table with icons and links to different parts of the course to streamline the look of Moodle. This is a great design idea, but can give headaches when portions of the table do not show up for smaller screens or even in Moodle if the theme is changed. Here is a way to make a responsive table to adapt to any device and work with any theme.

Responsive Design

Using Responsive TablesBy default, the table will automatically fill a space in Moodle as content is added. The table becomes a problem when content is added like an image that has a specific width that is larger than the screen width. Here's what it looks like and on the following page, how to fix it.Here is a Icons Table in Moodle in a standard window.

Responsive Design

Using Responsive Tables Here it is what happens if the screen size is less

than the total accumulated value of the pictures + cell-space combined. Notice the Scroll Bar appears and an image is missing from view. This can become an issue on mobile devices. Sometimes the scroll bar will not be accessible.

Responsive Design

Making a Responsive Table with ImagesTo fix this scroll in our table we must first assign a responsive value to the table itself. To do this:1. Right Click on your table and choose table

properties, or select your table and click the table icon.

Responsive Design

Making a Responsive Table with Images2. In the Table Properties box, click Advanced tab. In the style field type the following:

table-layout: fixed; width: 100%;3. Click Update

Responsive Design

Making a Responsive Table with ImagesNow we have a responsive table. Next we have to make each image responsive as well. We will use the same method as before; clearing the number value in pixels and using max-width set to 100% and min-width set to 45% in the style field.

Responsive Design

Making a Responsive Table with ImagesNow our table and images will shrink and grow with the screen size.

Backups

Site-wide vs Individual Backing up your courses is an important

step. It can save you many agonizing hours of work.

Backing up Moodle courses can take quite a bit of room. Here is a few things to consider in creating a back-up plan for your site.

Backups

Site-wide A site-wide back-up

should be in place; however there are a few important settings that should be configured so as not to eat up valuable disk space.

Backups

When setting up automated backups, make sure to keep settings as low as possible. Keeping 10 course backups is unnecessary and eats up your disk space quickly!! Think all your courses x ten, that’s almost 10x your moodle site in storage space.

Backups

Including users should only be done in one place.

If you decide that users are going to be included in the automated backup, then teachers should not include it in their individual backups.

See Admin settings on next page of defaults

Backups

If you include users on the Automatic Backups, then go to General backup settings and uncheck the “Include users” box and click save.

This way when a teacher makes a backup, by default, (they can change it) users will not be included.

Backups

Individual Teachers should also make

backups of their courses when they have made major design changes.

They should then download these versions and keep a local copy outside of Moodle.

This can be considered a clean course to start fresh from and should be done after every major grading period.

Once downloaded the backup can be deleted from Moodle.

Backups

Individual To delete a backup file, Click restore from

the Course Administration Block to access course backup files

Then click manage backup files

Backups

Individual Click the file you

would like to delete and a pop-up box appears.

Click the delete button