This chapter will essentially focus on creating and editing pictures for the course Music for everyday life, which includes finding free pictures online, making photo collages, and comic strips, or just simple screenshots and slideshows. We will also have a look at some basic photography concepts so that we can start creating and enhancing some nice photos for our course.
By the end of this chapter you will be able to do the following:
- Finding free pictures in online repositories
- Integrating images in Moodle
- Selecting appropriate image formats according to your needs
- Using a set of free software tools for common procedures in picture editing
- Creating and editing photos for the course
- Creating screenshots with comments
- Creating comic strips
- Exporting presentations' slides as images and include these in Moodle lessons
- Publishing presentations in an online service and embedding these in Moodle resources or activities
- Creating photo slideshows
Reinventing the wheel, especially for teachers, is a great path to burnout. Creating pictures for our courses (photos, drawings, and icons), if we are working from scratch, is extremely time-consuming, adding to the course design effort, the interaction with students, or worse, assessment. Fortunately, we are not working alone anymore, as there are many places on the Web where, with the help of millions, we can get ready-made pictures, for free (well, sometimes searching for a nice picture can take a while, but it can be worth the effort!). But first, let's take a look at the basic image formats before we go on to see the places where we can find free online pictures.
There are some things that we should know about image formats, particularly how to choose the best formats for our Moodle courses. There are many formats around, but the good news is that we will just need to use three of these in our daily life:
- GIF: It's an old format that only uses 256 colors, so it can be useful for storing simple images with few colors, such as logos or diagrams. This format also supports animation (animated GIFs). Avoid it while storing more complex pictures such as photos of landscapes.
- PNG: It's an enhancement to the GIF format, supporting 16 million colors, and was created as an open source alternative to GIF. It's a good format for storing images that are being edited.
- JPEG: A very common format on the Web and for digital cameras. It has a good quality/file size balance, so if we need to save on space this can be a good format to choose, as it uses image compression. However, if we use this format while editing images (repeatedly saving each time we make any changes to it), we will lose image quality. So to avoid this, while editing, use other formats such as PNG. When you want to publish it on the Web or just send it by e-mail, go for JPEG. The file extension is JPG.
Sometimes it's not just about image formats. For example, we can have huge JPEG files captured in digital cameras with 12 megapixels. In this case, scaling the image to smaller sizes (that will fit well in a screen, if we are talking about using them in Moodle) is the way to go. We will see how to scale images and convert them in any of these three image formats in this chapter.
Flickr (http://www.flickr.com) is a great online service for organizing, publishing, and sharing photos (or screenshots) and for meeting people with the same interests. It has millions and millions of photos, including Creative Commons licensed photos, as we saw earlier. Among many other things, it allows you to organize photos in sets, edit them, create slideshows, and even overlay photos in an online map. In the Creative Commons section of Flickr (http://flickr.com/creativecommons), we can get millions of pictures licensed under Creative Commons licenses, meaning that we can use them in general for educational purposes without major limitations (especially with the Attribution-only licenses). To learn more about these licenses, check Chapter 8, Common Multimedia Issues in Moodle, in this book or read the brief explanations in Flickr about them, shown on the right in the following screenshot. We will talk a lot about these licenses as we move ahead with the book.
To search for pictures, we must first click on the See more link for the type of licensed photos that we want to use (there is a brief description of the available licenses on the right-hand side of the screen, and also in Chapter 8, Common Multimedia Issues in Moodle).
Then, we just need to use the search form available at the top of the page, typing the keywords that we are looking for.
Once we are on the results page, we can click on one of the search results. We will just need to perform the following steps:
Just a reminder on how to save a picture from the Web to our computer, here is the basic procedure:
Every time we save a picture, we must not forget to register some details about it, to properly reference it later in our Moodle course (author, date, page title, picture title, link). Refer to Chapter 8, Common Multimedia Issues in Moodle, for more details on referencing sources.
Because the Web is not just about taking but also about giving, next we will see how to upload our own photos to this service, so that others can build on our work too.
The approach we will mainly use in this chapter with regard to pictures in Moodle is to upload images to our course, either to the course's files or as an attachment in several activities. However, if we want to participate in a broader community of sharing (not just in our small course), a solution would be to post the pictures on Flickr, where they will be available to many people, and will constitute a kind of repository of images that we can use in several Moodle courses. But it's not just about sharing or making management easy. It's also about getting feedback from others, contacting the real world, and engaging in conversations about our work. This is a huge opportunity (with risks, if we are talking about students posting their photos, refer to Chapter 8, Common Multimedia Issues in Moodle, for a discussion about these concerns on safety) for learning, and a way of participating in the community.
In addition to the web interface, there is also an official picture uploader, the Flickr Uploadr (go to http://www.flickr.com/tools/). We will use the web interface though, to create our first picture set.
- After creating an account, sign in to Flickr.
- Click on the Upload link on the top bar.
- Drag-and-drop pictures from our computer to the active area inside our browser (we can upload 1 TB of data for free!).
- Select the pictures you want to add to a set. Use the Ctrl key (or the command key on a Mac) to select different pictures.
- Click on Add to sets on the left menu and fill in the Set title: and Set description: fields.
- Click on the Create set button and we're done!
After we have the pictures online, we can insert them into our course by using the HTML editor, in this case, adding the URL to the photo in Flickr instead of uploading the image to Moodle. However, the photo has to link back to the photo page as this is required by the terms of service of Flickr. We can do this easily by adding the link to that page below the picture, again using the HTML editor.
In the account preferences, concerning the license of the photos that we put online on Flickr (http://www.flickr.com/account/prefs/license), we can associate them automatically (with the possibility of changing it at any time) to a Creative Commons license of our choice. This can also be done by using a batch edit. This batch editing (http://www.flickr.com/photos/organize) allows the control of permissions and even editing (for example, making some photos private, others all rights reserved, rotating, and so on).
Wikimedia Commons (http://commons.wikimedia.org) is a project by the Wikimedia foundation, the same one that is responsible for Wikipedia. Wikimedia Commons hosts all the pictures and other multimedia elements (audio, video, and vectors) included in the well-known Wikipedia online encyclopedia articles. We can find interesting pictures on a variety of topics (using the search form on the left-most side of the screen), mainly under GNU free documentation and Creative Commons licenses, so we can use these without many limitations in our courses.
In addition to these two services, we can find many other online services where we can obtain pictures, such as:
- Stock.XCHNG (http://www.sxc.hu) – an online service where we can download as many pictures as we want, for free
- Openclipart (http://openclipart.org) – an online community where we can download and upload cliparts for free
- Picasa (http://picasa.google.com) – an online service from Google that allows us to organize our photos
In the course, I have used several pictures from these sources to create course content; for example, in Module 7, Music and the commons, I have used the image shown in the following screenshot:
Inserting images in Moodle is really easy. Now that we have a source of free pictures for our course, there are several ways to insert them, depending on the type of resource or activity that we are using. We will have a look at the following three ways in this book:
- Uploading images as attachments (for example, in forums, glossaries, or databases).
- Using the built-in HTML editor and the course file picker to store the images.
- Embedding HTML code (specific for images) on web forms (don't be scared, it is easy and can be helpful on some occasions, just as we saw with YouTube videos). We will use it later in Chapter 5, Understanding Web-based Applications and Other Multimedia Forms, for adding pictures to Google Maps, for example.
For now, let's' just look at the first two ways of inserting images.
Using attachments is the easiest way to add a picture to Moodle. This possibility is available for some activities in Moodle, such as the forum, glossary, and database, and it's the easiest way for students to submit their pictures to a course. We saw in Chapter 1, Getting Ready for Multimedia in Moodle, how we could do this in a forum. Basically, this is the same process of adding an attachment to an e-mail, but in this case, Moodle does the rest to display the image on the forum post (it generates the HTML code needed for this). There is just one thing to keep in mind; when we add a picture as an attachment, it will be displayed in its original size at the end of the text. This means that if our image is too large for the screen size we are using, we will have a problem in visualizing it. In a moment we will see how to resize a picture to make it fit well for our course.
In the glossaries in the encyclopedia display format, images added as attachments are shown inline. In Module 1, Music evolves, students are required to add a course glossary about an artist their parents like, with one photo and a music track. While adding an entry, we have a field to insert an attachment.
When we save the entry, we will have a glossary entry something like this:
Using Moodle's built-in text editor and the file picker is a simple way of inserting images in Moodle, in side blocks, or in any kind of resource or activity. The basic procedure for doing this is as follows:
When we create content in Moodle, by default, we have access to a word processor-like toolbar that helps us format text in what is called a WYSIWYG (What You See Is What You Get) interface. In this kind of interface, we can see how the content will look as we make the changes (refer to the following screenshot).
Many of the buttons of this toolbar are fairly standard, but there are some that are not so familiar. However, all software toolbars show hints about the buttons if we hover the mouse over the buttons. This will help us know their functions and will be very useful during the course of this book. In the preceding screenshot, the little button representing a framed landscape in the toolbar's second row shows its function when the mouse is over it (no need to click!), that is, Insert/edit Image.
After we click on this button, the following window appears:
This is the general tab for the standard window for uploading images to Moodle. We can see the image URL, the image description, and a preview of the image. But these fields will be empty because we haven't uploaded anything yet.
So now, after clicking on the Find or upload an image… button, we can pick files from several sources, in this case our Private files section, the place where we will upload our images. We will upload a photo of a paleolithic flute to the book From caves to concert halls in Module 1, Music evolves, to a folder corresponding to this module, in a subfolder just for pictures. For this, perform the following steps:
- Click on the Manage link on the top menu of the File picker. A new window will open.
- Click on the destination folder in the file picker box (in this case, the previously created images folder where all of the modules' images will be stored).
- Drag-and-drop the picture from our computer onto the active area.
- The file will be uploaded to our Private files area.
Source: José-Manuel Benito (2007). Bone flute dated in the Upper Paleolithic from Geissenklösterle, a German cave on the Swabian region. Replica. Retrieved April 30, 2013 from http://commons.wikimedia.org/wiki/File:Flauta_paleol%C3%ADtica_blanco.jpg
After we click on the Save changes button, a thumbnail of the picture will show up.
We can now close this window, click on the Refresh icon on top menu of the File picker and finally on the picture thumbnail. After this, we get a new window, something like this:
We can now make a copy of the file from our Private files area to the course. This is safer as we create an alias and delete this file from our private files, and then we'll end up with a missing image in the course. We can also define the filename, insert the author, and the picture license. Now, we just have to select this file by clicking on Select this file and the Insert/edit Image window will show up, this time with the image URL and preview of the picture.
Now, something important. In the Insert/edit Image window, in the Appearance tab, we can resize the picture by changing the width or height dimensions while constraining its proportions. I wouldn't recommend this, as the image may lose quality. The best thing to do is to resize the image in an image editing software application and then upload it to our course, as we will see later in this chapter. You can see some reference values for image sizes in Moodle in this chapter when we talk about resizing procedures.
Finally, in the General tab, we can add Image description (a matter of accessibility, useful for screen readers), click on the Insert button, and then our book will look something like the following:
Now that we are ready to insert images in Moodle, let's have a look at how to capture and enhance pictures.