Moodle Theme Development: Build customized themes to make your Moodle courses engaging and interactive

E-learning is electronic learning, meaning that it is not traditional learning in a classroom with a teacher and students, plus the board. e-learning involves using a computer to deliver classes or a course.

When delivering classes or a course, there is an online interaction between the student and the teacher. There might also be some offline activities when a student is asked to create a piece of writing or something else. Another option is that there are collaboration activities involving the interaction of several students and the teacher.

When creating course content, there is the option of video conferencing as well. So there is virtual face-to-face interaction within the e-learning process. The time and the date should be set beforehand. In this way, e-learning is trying to imitate traditional learning to not lose human contact or social interaction.

The course may be full distance or not. If the course is full distance, there is online interaction only. All the resources and activities are delivered online and there might be some interaction through messages, chats, or e-mails between the student and the teacher.

If the course is not full distance and is delivered face to face but involving the use of computers, we are referring to blended learning. Blended learning means using e-learning within the classroom, and is a mixture of traditional learning and computers.

The use of blended learning with little children is very important because they get the social element, which is essential at a very young age. Apart from that, they also come into contact with technology while they are learning. It is advisable to use Interactive Whiteboards (IWBs) at an early stage.

IWBs are the right tool to choose when dealing with blended learning. IWBs are motivational gadgets, which are prominent in integrating technology into the classroom. IWBs are considered a symbol of innovation and a key element of teaching students.

IWBs offer interactive projections for class demonstrations; we can usually project resources from computer software as well as from our Moodle platform. Students can interact with them by touching or writing on them, that is to say, through blended learning. Apart from that, teachers can make presentations on different topics within a subject and these topics become much more interesting and captivating for students, since IWBs allow changes to be made in the interactive elements and we can insert those into the presentation of any subject. There are several types of technology used in IWBs, such as touch technology, laser scanning, and electromagnetic writing tools. Therefore, we have to bear in mind which to choose when we get an IWB.

On the other hand, the widespread use of mobile devices nowadays has turned e-learning into mobile learning. Smartphones and tablets allow students to learn anywhere at any time. Therefore, it is important to design course material that is usable by students on such devices.

Moodle is a learning platform through which we can design, build, and create e-learning environments. It is possible to create online interaction and have video conferencing sessions with students. Distance learning is another option if blended learning cannot be carried out.

We can also choose Moodle mobile. We can download the app from the App Store, Google Play, Windows Store, or Windows Phone Store. We can browse the content of courses, receive messages, contact people from the courses, upload different types of file, and view course grades, among other actions.

A Virtual Learning Environment (VLE) is a type of virtual environment that supports both resources and learning activities; therefore, students can have both passive and active roles. There is also social interaction, which can take place through collaborative work as well as video conferencing. Students can also be actors since they can also construct the VLE.

VLEs can be used for both distance and blended learning since they can enrich courses. Mobile learning is also possible because mobile devices have access to the Internet, allowing teachers and students to log in to their courses.

VLEs are designed in such a way that they can carry out the following functions or activities:

We are going to deal with each of these functions and activities and see how useful they might be when designing our VLE for our class. When using Moodle, we can perform all the functions and activities mentioned here, because Moodle is a VLE.

Designing, creating, storing, accessing, and using course content

If we use the Moodle platform to create the course, we have to deal with course content. Therefore, when we add a course, we have to add its content. We can choose the weekly outline section or the topic under which we want to add the content. We click on Add an activity or resource and two options appear, resources and activities; therefore, the content can be passive or active for the student. When we create or design activities in Moodle, the options are shown in the following screenshot:

Another option for creating course content is to reuse content that has already been created and used before in another VLE. In other words, we can import or export course materials, since most VLEs have specific tools designed for such purposes. This is very useful and saves time.

There are a variety of ways for teachers to create course materials, due to the fact that the teacher thinks of the methodology, as well as how to meet the student's needs when creating the course. Moodle is designed in such a way that it offers a variety of combinations that can fit any course content.

Delivering or sharing course content

Before using VLEs, we have to log in, because all the content is protected and is not open to the general public. In this way, we can protect property rights, as well as the course itself. All participants must be enrolled in the course unless it has been opened to the public.

Teachers can gain remote access in order to create and design their courses. This is quite profitable since they can build the content at home, rather than in their workplace. They need login access and they need to switch roles to course creator in order to create the content. Follow this to switch roles to course creator:

Under Administration, click on Switch role to... | Course creator, as shown in the following screenshot:

When the role has been changed, the teacher can create content that students can access. Once logged in, students have access to the already created content, either activities or resources. The content is available over the Internet or the institution's intranet connection. Students can access the content anywhere if any of these connections are available.

If MoodleCloud is being used, there must be an Internet connection, otherwise it is impossible for both students and teachers to log in.

Communicating, interacting, and collaborating with students and teachers

Communication, interaction, and collaborative working are the key factors to social interaction and learning through interchanging ideas. VLEs let us create course content activities, because these actions give our class a social element. There is no need to be an isolated learner, because learners have the ability to communicate between themselves and with the teachers.

Moodle offers the possibility of video conferencing through the Big Blue Button. In order to install the Big Blue Button plugin in Moodle, visit the following link: https://moodle.org/plugins/browse.php?list=set&id=2 . This is shown in the following screenshot:

If you are using MoodleCloud, the Big Blue Button is enabled by default, so when we click on Add an activity or resource, it appears in the list of activities, as shown in the following screenshot:

Modularizing both activities and resources

Moodle offers the ability to build personalized activities and resources. There are several ways to present both, with all the options Moodle offers. Activities can be molded according to the methodology the teacher uses.

In Moodle 3, there are new question types within the Quiz activity. The question types are as follows:

• Select missing words

• Drag and drop into text

• Drag and drop onto image

• Drag and drop markers

The question types are shown after we choose Quiz in the Add an activity or resource menu, in the weekly outline section or topic that we have chosen. The types of question are shown in the following screenshot:

Modular Object-Oriented Dynamic Learning Environment (Moodle) is a learning platform designed in such a way that we can create VLEs. Moodle can be downloaded, installed and run on any web server software using Hypertext Preprocessor (PHP). It can support a SQL database and can run on several operating systems. We can download Moodle 3.0.3 (the latest version at the time of writing this book) from the following URL: https://download.moodle.org/ . This URL is shown in the following screenshot:

MoodleCloud, on the other hand, does not need to be downloaded since, as its name suggests, is in the cloud. Therefore, we can get our own Moodle site with MoodleCloud within minutes and for free. It is Moodle's hosting platform, designed and run by the people who make Moodle. In order to get a MoodleCloud site, we need to go to the following URL: https://moodle.com/cloud/ . This is shown in the following screenshot:

MoodleCloud was created in order to cater for users with fewer requirements and small budgets. In order to create an account, you need to add your cell phone number to receive an SMS which we must be input when creating your site.

As it is free, there are some limitations to MoodleCloud, unless we contact Moodle Partners and pay for an expanded version of it. The limitations are as follows:

There is another option for MoodleCloud which is paid and grants more benefits, but throughout the book, we will deal with the free version of MoodleCloud.

When creating a Moodle site, we want to change the look and functionality of the site or individual course. We may also need to customize themes for Moodle, in order to give the course the desired look.

Therefore, this chapter will explain the basic concepts that we have to bear in mind when dealing with themes, due to the fact that themes are shown in different devices. In the past, Moodle ran only on desktops or laptops, but nowadays Moodle can run on many different devices, such as smartphones, tablets, iPads, and smart TVs, and the list goes on.

Moodle can be used on different devices, at different times, in different places. Therefore, there are factors that we need to be aware of when designing courses and themes.

Therefore, hereafter in this chapter, there are several aspects and concepts that we need to look into in more detail in order to understand what we need to take into account when we design our courses and build our themes.

Devices change in many ways, not only in size but also in the way they display our Moodle course. Moodle courses can be used on anything from a tiny device that fits into the palm of a hand to a huge IWB or smart TV, and plenty of other devices in between. Therefore, such differences have to be taken into account when choosing images, text, and other components of our course.

We are going to deal with sizing screen resolution, calculating the aspect ratio, types of images such as sharp and soft, and crisp and sharp text. Finally, but importantly, the anti-aliasing method is explained.

A number of pixels the display of device has, horizontally and vertically, and the color depth measuring the number of bits representing the color of each pixel makes up the screen resolution. The higher the screen resolution, the higher the productivity we get.

In the past, the screen resolution of a display was important since it determined the amount of information displayed on the screen. The lower the resolution, the fewer items would fit on the screen; the higher the resolution, the more items would fit on the screen. The resolution varies according to the hardware in each device.

Nowadays, the screen resolution is considered a pleasant visual experience, since we would rather see more quality than more stuff on the screen. That is the reason why the screen resolution matters. There might be different display sizes where the screen resolutions are the same, that is to say, the total number of pixels is the same. If we compare a laptop (13'' screen with a resolution of 1280 x 800) and a desktop (with a 17'' monitor with the same 1280 x 800 resolution), although the monitor is larger, the number of pixels is the same; the only difference is that we will be able to see everything bigger on the monitor. Therefore, instead of seeing more stuff, we see higher quality.

Images can be either sharp or soft. Sharp is the opposite of soft. A soft image has less pronounced details, while a sharp image has more contrast between pixels. The more pixels the image has, the sharper it is. We can soften the image, in which case it loses information, but we cannot sharpen one; in other words, we can't add more information to an image.

In order to compare sharp and soft images, we can visit the following website, where we can convert bitmaps to vector graphics. We can convert a bitmap images such as .png, .jpeg, or .gif into a .svg in order to get an anti-aliased image. We can do this with a simple step. We work with an online tool to vectorize the bitmap using http://vectormagic.com/home . There are plenty of features to take into account when vectorizing.

We can design a bitmap using an image editor and upload the bitmap image from the clipboard, or upload the file from our computer. Once the image is uploaded to the application, we can start working. Another possibility is to use the sample images on the website, which we are going to use in order to see that anti-aliasing effect.

We convert bitmap images, which are made up of pixels, into vector images, which are made up of shapes. The shapes are mathematical descriptions of images and do not become pixelated when scaling up. Vector graphics can handle scaling without any problems. Vector images are the preferred type to work with in graphic design on paper or clothes.

Go to http://vectormagic.com/home   and click on Examples, as shown in the following screenshot:

After clicking on Examples, the bitmap appears on the left and the vectorized image on the right. The bitmap is blurred and soft; the SVG has an anti-aliasing effect, therefore the image is sharp. The result is shown in the following screenshot:

There are sharp and soft images, and there is also crisp and sharp text, so it is now time to look at text. What is the main difference between these two? When we say that the text is crisp, we mean that there is more anti-aliasing, in other words it has more grey pixels around the black text. The difference is shown when we zoom in to 400%. On the other hand, sharp mode is superior for small fonts because it makes each letter stronger.

There are four options in Photoshop to deal with text: sharp, crisp, strong, and smooth. Sharp and crisp have already been mentioned in the previous paragraphs. Strong is notorious for adding unnecessary weight to letter forms, and smooth looks closest to the untinted anti-aliasing, and it remains similar to the original.

The following screenshot displays crisp text:

Windows 10, high-dpi screen, 3200 x 1800 resolution, also known as WQXGA+, landscape view.

Another example of crisp text is the following:

High-dpi retina display on OS X, Safari, 2560 x 1600.

The word anti-aliasing means the technique used in order to minimize the distortion artifacts. It applies intermediate colors in order to eliminate pixels, that is to say the saw-tooth or pixelated lines. Therefore, we need to look at a lower resolution so that the saw-tooth effect does not appear when we make the graphic bigger.

Before we delve deeper into more content, let's test your knowledge about all the information that we have dealt with in this chapter:

A. Moodle is a learning platform with which ...

B. BigBlueButtonBN ...

C. MoodleCloud ...

D. The number of pixels the display of the device has horizontally and vertically, and the color depth measuring the number of bits representing the color of each pixel, make up ...

E. Anti-aliasing can be applied to ...

In summary, in this first chapter, we have covered most of what needs to be known about e-learning, VLEs, and Moodle and MoodleCloud. There is a slight difference between Moodle and MoodleCloud especially if you don't have access to a Moodle course in the institution where you are working and want to design a Moodle course. Moodle is used in different devices and there are several aspects to take into account when designing a course and building a Moodle theme, which will be covered in the following chapters.

We have dealt with screen resolution, aspect ratio, types of images and text, and anti-aliasing effects.

In the next chapter, we will cover the basics of Moodle theming, including theme types, priority, the location of the theme directory, and the concept of parent themes. We will also cover browsing and changing a theme within Moodle and MoodleCloud, and search for, downloading, and installing custom themes. We will cover how to do these in different OSes, including Mac, Windows, and Android. We will then finish off by changing the theme settings in the Moodle theme settings page, both in Moodle and MoodleCloud.