Enhancing your Moodle pages by jeff stanford

Formatting and Enhancing Your Moodle Materials You can use Moodle as it comes without having major design problems, but it's well worth paying attention to a few design principles that will enhance your users' language-learning Moodle experience. Before you begin, why not take a look at other Moodle sites and see what you like or don't like. Look at things such as layout, ease of navigation, use of color, and images. You'll find a list of thousands of registered Moodle sites at http://moodle.org/sites/. There are three main types of Moodle pages to consider when it comes to design: •

Moodle front pages

•

Moodle course pages

•

Moodle activities

Before we go into detail about design considerations, let's look at examples of each of these to see how we can improve them with a few basic steps. Moodle front page If we take Moodle straight out of the box, set up some blocks for the main menu, provide some useful links, and set the front page settings to show a list of courses, we could have something like this:

Formatting and Enhancing Your Moodle Materials

BEFORE

It's functional enough, but not very engaging. Just by making a few changes, we can make the front page much more interesting and readable: AFTER

[ ]

Chapter 11

What's changed? •

There's a new theme (Moodle speak for the color scheme and automatic font choices). There's a section on how to change your site's theme in Chapter 2, Getting Started with Moodle. As we'll see in a bit, some themes also include tabs and drop-down menus.

•

There's an appropriate image in the top-center of the screen to draw users in.

•

The About this site block has a photo of the administrator, which provides a personal touch.

•

There's an easily-identifiable "start here icon"—another helpful feature that guides your users in the right direction.

Moodle course page Like the Moodle front page, a standard course page automatically creates three columns for us to fill with text. If we choose a topics format from the Settings menu and write out a list of activities and links for our course, it could look something like this: BEFORE

[ ]

Formatting and Enhancing Your Moodle Materials

The problem here is that it's difficult to distinguish important information from unimportant information. There's a lot of scrolling to be done, and there are no visual clues as to what the course page is about. Here's one way of transforming the page: AFTER

What's changed? •

There's a new theme.

•

The theme includes tabs with links to key parts of the site.

•

There's an image related to the course topic (teaching) at the top of the course page.

•

The long list in the previous version has been reduced to a more manageable size.

•

Important information is at the top of the page, and is in a larger font size. It contrasts with less important information, which has a smaller font size.

[ ]

Chapter 11

•

Lines are used to separate different sorts of information.

•

There is more color harmony—at attempt to get the colors to blend.

•

There's an avatar introduction in the left block for new users.

Moodle activity When we're pushed for time, it's all too tempting just to set out a list of references without paying due attention to instructions and a helpful hierarchy of information, as in the following example: BEFORE

[ ]

Formatting and Enhancing Your Moodle Materials

There's a lot of information here. We can use the Book module to organize the information, and make the page more readable, as in the following transformation: AFTER

What's changed? •

The previous list has been divided into sections in the Book module

•

There's a "how-to" section at the beginning of the Table of Contents

•

Graphics from the target websites have been included as visual clues

•

The Tool labels such as Audacity and Findsounds are in a larger font size to make them stand out

•

An action girl icon indicates task instructions

•

Task instructions are in bold blue to make them stand out

•

A grid is used to separate sections

As we can see, by enhancing the visual design of our sites we can make our materials more engaging and effective. We can also make them more attractive by improving the quality of the audio, images, and video that we use. Here are some principles we could take on board: [ ]

Chapter 11

Contrast Consider hierarchies of importance in your materials. The default font size on HTML pages is 12 points, similar to what you're reading now. Vary the size to make more important information stand out. You can also use images, buttons, and navigation signs to help users see the function of pages and content more quickly and remember it. Consistency Being consistent in your use of fonts for certain sorts of information, font sizes for ranking information, and navigation links will make it easier for users to understand the site and will make it more aesthetically pleasing. It's also better not to use too many different fonts or make your site too fancy or you will end up with a dog's breakfast. As a rule, it'll look better if you use different sizes of a limited number of fonts, rather than including lots of different fonts. To promote design consistency on your Moodle site, consider setting up a style guide so that all teachers use the same design framework. Alignment A basic principle of graphic design is to make sure that the objects on your page are aligned with each other. Imagine a grid that they stick to. Aligned objects look more professional and enhance contrast within pages. Moodle organizes that automatically for us with front pages and course pages, but when we set up instruction pages for activities, we need to keep alignment principles in mind, as we have more design freedom. Quality Aim for the best quality audio recordings and images. It is likely to make a big difference to language learners if they can listen to clear recordings and easily identify the content of images. This chapter Each of the following sections in this chapter contributes to the above principles by demonstrating some of the tools available in Moodle that help you with your design. You'll find a consideration of these and other website design issues at http://www.asktog.com/basics/firstPrinciples.html.

[ ]

Formatting and Enhancing Your Moodle Materials

Here are the main topics covered in this chapter: • • • • • • • • •

Text Images Videos Sound Navigation Blocks Layout Style guide Accessibility

•

Feedback

Text

There are two main ways of entering text in Moodle: •

Adding text pages

•

Adding web pages using the HTML editor

The most common way is by using the HTML editor. Most of this section on text will look at formatting options using that.

Adding text pages

When you select Add a resource... and then Compose a text page, you get a choice of formatting options for your page.

You might find it useful to use the Moodle auto-format, as it automatically creates emoticons, paragraphs, and hyperlinks for you if you write in web addresses. Creating hyperlinks is a little more time-consuming if you choose the HTML format, as you have to create all hyperlinks manually. Markdown format is also useful if you want to create a structured document with lists and emphasis. You can, of course, produce all these in the HTML format, using the editing menu. The following options are available when you select Add a resource... and then Compose a text page. [ ]

Chapter 11

Formatting options

Details

Moodle auto-format

This has limited formatting options, but will automatically turn URLs like http://moodle.org into hyperlinks and will include emoticons like J when you type :). It keeps line breaks and converts blank lines into new paragraphs.

HTML format

This does not automatically format text, but gives you a wide range of possibilities for editing your text. It allows you to change font faces, font sizes, and color, as well as embed graphic images, sound, and video. Note that if you select Compose a text page and then the HTML format option, you will need to enter pure HTMLâ&#x20AC;&#x201D;that's the code that produces web pages. If you are not familiar with HTML, you'll be better off choosing Compose a web page and then using the HTML graphic editor. On the other hand, if you want to learn HTML, there are some references for beginners' sites in Chapter 2, Getting Started with Moodle.

Plain text format

This format keeps spaces and new lines, but no other formatting is available.

Markdown format

Markdown allows you to easily add emphasis (bold, italics), structure (bullet points and headings), and links (to images or other web resources). You can use Markdown in many places in Moodle. Simply select it from the formatting drop-down list, which is found below the text entry area, wherever you have the choice.

Adding HTML pages

Most summary pages, introduction texts, and the web pages in Moodle present you with an HTML editor for editing. Let's look at some of its features. You'll find the HTML editor, for example, when you select Add a resource... and then Compose a web page.

HTML editor shortcuts Below the HTML editor, you'll notice a shortcut icon: . It's also present when we add web pages, which automatically use HTML formatting. Clicking on that shortcut icon will open a pop-up window with a long list of keyboard shortcuts that you might find useful for formatting your page. For example Ctrl + O = Change the font. The Ctrl shortcuts work on both Windows and Mac systems.

[ ]

Formatting and Enhancing Your Moodle Materials

Common features of the HTML editor

Since most Moodle users use the default HTML editor, let's look at the features, which might be useful. This is what the HTML editor looks like:

Font faces

The top-left drop-down menu is for font facesâ&#x20AC;&#x201D;the term for typefaces when we use them on web pages. The following are available:

Trebuchet is the default font face, but you might find that a different one suits your site more. If you do change the font face, make sure you use it consistently and with a specific goal. Otherwise, your pages could look messy. Sometimes, for example, it is appropriate to use a different font face to provide an example of text you want students to write. That way the model text will stand out better. Here's an example which uses the font face Arial for the main text and another font face called Georgia for the model letter.

[ 10 ]

Chapter 11

You can also add new fonts to the HTML editor. To do that, go to Site Administration | Appearance | HTML editor. Then write the name of the font face that you want to appear in the HTML menu in the left-hand column and the name of the actual font in the right-hand column. In the following example, I've added the popular font face called Comic Sans, which you're reading now. If you want a font face other than Trebuchet to be the default font, put it at the top of the list.

A font face must be available on the user's browser and installed on each user's machine in order to work. You can find the name of the fonts in the font folder on your computer. Ask your administrator if in doubt. Here's a list of so-called "browser-safe" font faces—in other words, font faces that work on most browsers and which you can therefore add to your HTML editor, knowing your students will be able to use them. You can find a list of names and font families at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html. •

Comic Sans MS

•

Impact

•

Lucida Console

•

Lucida Sans Unicode

•

Palatino

•

Symbol

•

Webdings

•

MS Sans Serif4

•

MS Serif4

[ 11 ]

Formatting and Enhancing Your Moodle Materials

Font size

The next button marked 1 (8pt) lets you change the font size.

Default is 3 (12 pt), but the following sizes are also available:

Varying the size of your font helps differentiate between headings which vary in importance and so contributes positively to the design of your information. For example, we could use 24 pt for main titles and then 14 pt for subheadings. The letter task example earlier uses the following sizes:

24 pt main title

Letter task

12 pt for the instructions text

Dear Tom

14 pt subheadings

Instructions, read the letter

Styles

The third drop-down menu provides a range of styles which help you format your text.

[ 12 ]

Chapter 11

Normal is the default. The different heading styles relate to pre-set sizes and are useful for dividing headings into main and subcategories. Address creates an italic style and is used to mark up contact information. Preformatted text is displayed in a fixed-width font, and it preserves both spaces and line breaks. That can be very useful if you find the gaps you create on the page keep disappearing. In general, using the headings will help you organize your material in a more attractive and consistent way. Here's an example of the styles.

Color

The HTML editor allows you to change the font color (using the T icon) and the background color (using the bucket icon): . In general, it's best to have either a light color on a dark background or a dark color on a light background. The letter example earlier has a blue font on a yellow background. If in doubt about the degree of contrast on your page, check the site http://snook.ca/technical/colour_contrast/colour.html, which will provide an analysis of and verdict on your color choices. Consider color as part of your general design. It helps with both contrast and consistency, making navigation easier. For example, if the general color scheme of your site is light blue, consider using dark blue for headings in the topic sections of your pages. This helps create color harmony and reconfirms the importance of the headings. You might find this website useful for experimenting with color combinations: http://www.colorcombos.com/.

[ 13 ]

Formatting and Enhancing Your Moodle Materials

Images

If you've taken digital images, or scanned images onto your computer, it's likely that they'll be high resolution images, ready for printing. We don't need high resolution images on our computer screens for two good reasons: screen resolutions can't show so much detail and they take up a lot of storage space. There's a process called optimization which you can use to make your images more usable for your language learning activities. You can either use a program like Photoshop Elements (commercial), or Google's Picasa, which is free from http://picasa.google.com. These will enable you to edit your pictures and get the best quality with the smallest storage size. Let's look at a few things you can do to enhance your images using Picasa.

Cropping

Imagine we've taken this picture, but we're only interested in using the picture of the mug for a vocabulary exercise. 1. Open up Picasa. Click on the photo we want to edit.

[ 14 ]

Chapter 11

2. Click on Basic Fixes and then on Crop.

3. Click on Manual in the drop-down menu, then select the bit of the image we want to crop (cut out).

[ 15 ]

Formatting and Enhancing Your Moodle Materials

4. Then click on Apply. The result will be:

Color balance

As it stands, the picture is too dark. There is too little contrast. Picasa will also allow us to create a stronger contrast, just by clicking on Tuning and Fill light and then moving the button across to brighten up the picture.

[ 16 ]

Chapter 11

The final picture looks like this:

It's smaller and brighter than the original and more appropriate for our Moodle page.

Optimization and image size

The picture above is 340 kb in storage size, which is pretty big. The reason it's so big in storage size is that its real size is 837 px in width and 960 px in height. In case you're new to image measurement, px stands for pixels, which are the dots on your screen. So we have an unnecessarily large image. We can reduce the image size when we insert an image, but it's a much better idea to reduce the dimensions to what we actually need before we import the image into Moodle. That will reduce the storage size at the same time. Another reason for resizing images is that if you're using several photos on the same page, you'll achieve a much greater sense of balance and therefore effectiveness if all your images are the same size. If we reduce the mug to 100 px in width, the final version is only 92 kb in size. We can resize images in Picasa by exporting, emailing, or uploading our photos to Picasa Web Albums. When we select File | Export, we can select what size we want.

[ 17 ]

Formatting and Enhancing Your Moodle Materials

Videos

One exciting way of enhancing your web pages in Moodle is to use video. You can either upload videos to your own Moodle site or upload them to a site like YouTube, or TeacherTube. Mashable at http://mashable.com/category/video is an excellent source of ideas and resources for editing, uploading, and sharing your videos. Chapter 2, Getting Started with Moodle explains how to use video on your Moodle pages. If you decide to upload your videos onto your Moodle site, you'll need to check their size and the upload limits on your Moodle site. The default limits are usually quite low, but you can get your administrator to change them. You can also get round this problem by uploading your videos direct to the server using an FTP program. You will need to ask your Moodle administrator for help with that. Embedding videos will save your server's storage space and traffic. There is more information about it in Chapter 2, Getting Started with Moodle.

Adding subtitles to your videos

One way of making video content more accessible for language learners is to add same-language subtitles. This would work well as an extension to the read and listen activity (Activity 2) in Chapter 6, Reading Activities. Alternatively, you could get students to produce the subtitles, a rather glamorous type of dictation. If you want to add subtitles to your own videos, this is quite straightforward in free programs like Movie Maker (for Windows) or iMovie (for Macs). Look up "subtitles" in the help files. If you want to add subtitles to a YouTube video, http://www.overstream. net/ allows you to do just that. You can then embed the final product in your website. Here's what a video with added subtitles could look like:

[ 18 ]

Chapter 11

Sound

A selection of audio players that can be used with Moodle is given in Chapter 8, Listening Activities. If you're not happy with the quality of sound, there are various things you can do to improve it. The six examples below are created with the audio program called Audacity, but most audio editing programs will offer the same tools. Audacity is described in Chapter 2, Getting Started with Moodle. The first four edits are in the Effect menu.

Remove noise

Effect | Noise removal If there is an unwelcome background noise on your recording, Audacity has a tool for reducing it. Open Audacity. Open your recording. Select the whole sound track or part of the track that has too much noise by highlighting it with your mouse cursor. Select click on Effect | Noise removal to get to the noise removal tool. On-screen instructions will guide you through the rest of the process. Be careful not to reduce the noise too much, as this sometimes creates distortion.

[ 19 ]

Formatting and Enhancing Your Moodle Materials

Fade in and fade out Effect | Fade in/out

If you want the sound to fade in and out, use your mouse to select the part of the sound track where you want the effect. Then select Effect | Fade in/out to create the effect. This could be useful for a presentation to avoid having a burst of sound at the beginning of the recording.

Change tempo without changing pitch Effect | Change tempo

This can be very useful, particularly for lower-level learners. It's useful to create two versions of your recordings: one fast and one slow. You can upload both and give students the choice of which one they listen to. The great thing about this tool is that the pitch doesn't change.

Change pitch without changing tempo Effect | Change pitch

Sometimes you might want to lower or raise the pitch of a voice to make it more audible. This tool lets you do that without the speed changing. It can even be used to simulate a dialog, with you speaking both parts, keeping one at your normal pitch and the other one at a higher or lower pitch. You'll find the next two settings in the Preferences menu.

Sample rate

This helps determine the quality of your recording. You can think of it as the number of times per second you capture a snapshot of sound while you're recording. Higher sample rates give you more detail. In other words, it's a fuller sound. 8 KHz is the lowest sampling rate you should select for voice recordings. 16 KHz is more likely to produce an acceptable sound. If you have music as well, you'll need a higher sample rate, like 44 KHz.

Bit rate

This is the number of bits (digital 1s and 0s) that are used each second to represent the sound signal. The bit-rate for digital audio is represented in thousands of bits per second (kbps). The higher the bit-rate is, the larger the file size and the better the sound quality. Lower bit rates result in smaller files but poorer sound quality. A good bit rate for recording in Audacity is 32. [ 20 ]

Chapter 11

Audacity offers many more possibilities, and it's well worth exploring it in detail. Go to http://audacity.sourceforge.net/help/ for more help.

Navigation

Most of the navigation work—that is, menus and links—is done for you in Moodle. However, there are things you can do to improve it. Here's a list of tips:

Font size and color

Make consistent use of font size and color with headings so that users recognize the relative importance of different sections. For example, make topics big and bold so that they stand out. Remember that the default font and color is the same as for all other text. You have to make the difference yourself. For example:

User control

Allow users to move ahead if necessary, so that they feel in control. You can do this by providing explicit headings in your course topics. Don't call an activity "activity". Give it a more specific name, like "Second prepositions grammar exercise". Here are some options for navigation maps: •

Use the Topics view on your course pages (see Chapter 2, Getting Started with Moodle for more information).

•

Use Book to organize a syllabus. There's an example of this in the introduction to this chapter. Chapter 6, Reading Activities, Activity 2 demonstrates how to set up the Book module.

[ 21 ]

Formatting and Enhancing Your Moodle Materials

â&#x20AC;˘

Use a flowchart program to create a plan. Then import it into your Moodle web page. For example: Week 4 Activities - English Activity 1 - read text on bagels Optional - blog about your favorite food

Quiz 1 - reading comprehension Glossary activity add new words Forum discussion what we eat and whether it matters

Many flowchart programs allow you to include hyperlinks to the actual activities. To do that, first copy and paste the target web page address from the address bar.

Then paste that address into the hyperlink in your flowchart program. Here's an example using gliffy:

[ 22 ]

Chapter 11

See Chapter 2, Getting Started with Moodle for a list of flowchart programs. â&#x20AC;˘

Create a web page with a menu on it, as in the following screenshots. To make your new web page appear with blocks to the left and right, click on Show the course blocks on the set-up pageâ&#x20AC;&#x201D;it's at the bottom of the next screenshot.

[ 23 ]

Formatting and Enhancing Your Moodle Materials

The final page would look like this. Students will see all the other navigation blocks in the left and right-hand columns.

Graphic navigation links

Consider using clip art or pictures as navigation links to help users. This is both attractive and speeds up user recognition of signposts. There are links to libraries of copyright-free images in Chapter 2, Getting Started with Moodle.

[ 24 ]

Chapter 11

It also helps students if we keep the number of visible topics on course pages to a minimum. If you have a large number of topics, you can hide them by clicking on the square in the right-hand corner of the page section.

Blocks

KISS (Keep It Short and Simple) applies here, too. A page with too much information and too many blocks open is likely to be overwhelming. Whenever possible, resist the temptation and limit the number of blocks. Once you've selected the blocks you want for your course page, think about making the organization logical. For example, put the most useful ones at the top, put blocks which are related to communication in the left column, put blocks for research in the right column, as in the screenshot below.

The above screenshot is an example of My Moodle, which allows students to decide what blocks they have themselves. Once My Moodle is turned on, students will see an Edit this page button which allows them to add and delete blocks. They can also add blocks with their own texts, images, and recordings. It's well worth passing on the principles we've just discussed to students so that they can enjoy some logical organization. See Chapter 2, Getting Started with Moodle for help with My Moodle.

[ 25 ]

Formatting and Enhancing Your Moodle Materials

Layout

Layout is all about spacing and proportion. Achieving a balanced, harmonious page is not only pleasing to the eye, but, more importantly, also avoids ugly distractions and guides the user towards the information they need. Take this example of an uncomfortable layout:

The gradation of font sizes is fine, but there are several things the author can do to improve it: •

Avoid the overlap of text by including breaks in the HTML editing box

•

Include padding around the text

•

Create a space between the top heading (for example, Grammar) and the next heading Easy

•

Create style harmony by removing the background color

•

Use the same font face for the Welcome heading as for the other headings

[ 26 ]

Chapter 11

The next illustration shows an improved version of this page. The layout "breathes" a bit more because there's more space. It's simpler, and there is no distracting "noise".

Making a pointâ&#x20AC;&#x201D;or giving an example using nested inlines We can use space to make examples stand out. Take the following text: The preposition "at" in English is used to express time or place. Example using time: She was here at 3 o'clock We could further enhance the important information by creating a nested inline. Nested means there's an indent from the left margin. Inline means it comes between the other lines. The easiest way to do that is to insert a table. Books on web design might tell you not to use tables for positioning text elements, but for non-experts, it's a simple, effective solution. To make the example really stand out, we could even add a background color. You'll have more editing tools, and can achieve a better layout if you expand the HTML editing menu. To do that, click on the enlarge editor. That's last icon on the bottom row:

[ 27 ]

Formatting and Enhancing Your Moodle Materials

This is what the enlarged editor looks like:

Hovering mice If you hover the mouse cursor over each of the icons, you'll see what the icon's function is.

Here's how to do it 1. Write the first line of text ("The preposition 'at' in English", etc.). 2. Press return twice to position the cursor below that line. 3. Insert a table by clicking on the table icon:

4. Complete as below.

Settings

Details

Rows

Write 1.

Cols

Write 1.

Width

Use 80 Percent. This means that the table will not occupy the whole width.

Alignment

Use Middle. This will create margins on either side of the table.

Border thickness

Write 1. This refers to the thickness of the line around the table.

Cellspacing

Write 1. This is the distance between each cell of the table. As we only have one cell, that doesn't concern us here.

Cellpadding

Write 1. This is the distance between the inside of the line around the cell and the text. Leave it on 1 for now. We'll increase it in the next step. [ 28 ]

Chapter 11

5. Now write in your example text. Select the whole text and make sure it is aligned to the center. Make sure the cursor is inside the table cell, then click on the table properties icon (the first icon on the bottom row) to get the following box:

Settings

Details

Caption and Summary

Leave these blank unless you want your table to be labeled in the text.

Layout

Leave this blank. We've already set the alignment to Middle.

Padding

Write: 5 pixels. This will create a cushion between the text and the edge of the table.

Frames

Use All four sides.

Background

Select a light background color by clicking on the color square.

FG Color

Here we can change the font color by clicking on the square.

Border

Here we can change the table border color by clicking on the square.

Image URL

We could also include an image as a background if appropriate. [ 29 ]

Formatting and Enhancing Your Moodle Materials

6. Click on OK to save the changes. 7. Then click on the minimize editor icon to get back to the normal editing screen. 8. Finally, click on Save changes. You should now have something like this:

Style guide

Once you've worked out how you want to achieve contrast, consistency, alignment, and control layout, it's a good idea to summarize this in a style guide document, which you should then give to all course creators and teachers on your Moodle site. Of course, it's possible that your Moodle courses are living along side other Moodle courses in your organization, in which case you'll need to make sure you follow your organization's style guide.

Accessibility

Don't forget that some users are visually impaired. Here are a few tips you can follow to make life easier. In fact they're good practice even for users who aren't visually impaired.

Alt tags

Alt stands for Alternative text. If you use images, use the Alt tag to provide a clear text alternative. An alternative text should let the user know what an image is and the purpose of that image; in this example, we have This is a picture of our dog, Rover, when he was 6 months old..

[ 30 ]

Chapter 11

Computer users with visual impairment can obtain programs that read aloud Alt tags, like the one in the screenshot below.

There's more on Alt tags at http://www.seomanagement.com/index.php/ALT-TagOptimization.html. If you're interested in programs that read aloud computer text, do an Internet search for "text to speech software".