Presenting a good image for your course
Tom Worthington FACS CP HLM
Adjunct Lecturer, Australian National University
For the Wattle Wednesday, Australian National University, Canberra, 29 June 2011
Tom Worthington was awarded a certificate in audio-visual production for training, by the then ACT TAFE in 1990. He decided it was time to apply some of those skills to teaching. Tom discusses some shortcuts to including still and moving images and sound in courses.
Tom Worthington FACS CP HLM
- 2010 Canberra ICT Educator of the Year Award for design of the ANU Green ICT Course/li>
- Expert witness on accessibility for the Sydney Olympics Website case
- Adjunct Lecturer, RSCS, ANU
- Course Designer, Australian Computer Society
- Visiting Scientist, CSIRO ICT Centre
Tom Worthington is an independent ICT consultant, an Adjunct Senior Lecturer in the Research School of Computer Science at the ANU and a Visiting Scientist at CSIRO. In 2010 Tom received the ACS Canberra ICT Award for the design of the ANU Green ICT Course. Previously he advised on IT policy at the Department of Defence.
In 1999 Tom was elected a Fellow of the ACS for his contribution to the development of public Internet policy in Australia. He is a past president, Fellow and Honorary Life Member of the ACS, a voting member of the Association for Computing Machinery and a member of the Institute of Electrical and Electronics Engineers.
E-learning Systems Use Web Standards
- ANU Wattle based onMoodle FOSS LMS: free open source education software
- Used by ANU, ACS, Department of Defence and many other organisations
- Australian developed by Martin Dougiamas
- Uses PHP to deliver web based content.
- Uses web standards: HTML, CSS, PNG, JPEG.
Images in Moodle
- Moodle Insert image tool supports common web formats: JPG, GIF and PNG.
- GIF and PNG are lossless compression, indexed color formats (for diagrams)
- JPEG is a lossy 24-bit format (for photographs)
- Don't make images larger than necessary
- Don't use more colours than necessary
- Share the one copy of an image
- Pictograms can be used.
The Moodle Insert image tool supports common web formats: JPG, GIF and PNG:
- GIF (Graphic Interchange Format)
- PNG (Portable Network Graphics)
- JPEG (Joint Photographic Experts Group)
GIF and PNG are lossless compression, indexed color formats. Gif has an 8-bit palette with a maximum of 256 colors, PNG has an 8 to 24-bit palette for "true" colour images. These suit graphics with areas of flat colour, such as logos, icons and line art.
The number of colours used can be reduced to reduce the file size. GIF and PNG are less suited for photographs. The formats allow for part of the image to be transparent, with the background colour to showing through. PNG also has a 16-bit gray-scale palette suited to images such as medical x-rays.
JPEG is a lossy 24-bit format, suited to photographic images and drawings with gradations of colour. The level of compression used for JPEG can be set to reduce the file size.
As not all devices can display images and not all users can see them, any important information conveyed by an image should also be described in an alternative format, such as text, in the web document.
Bit Mapped Images
GIF, PNG and JPEG are all bitmapped (raster) image formats. The images are made of a grid of square single colour pixels. Some technical applications, such as architectural blueprints, require vector graphics, made of lines and geometrical shapes. Scalable Vector Graphics (SVG) was created as a W3C standard to support such applicators, but is not widely implemented.
Image resolution of bit-mapped images are measured in pixels per inch (ppi). Computer monitors typically have a resolution of 72 ppi (the px lenght measure of CSS), or less. Smart phones have an effective resolution much lower than this. Low cost printers have a resolution of 300 to 1,000 ppi.
To reduce the size of files downloaded, images should be provided at the minimum resolution usable. A common mistake is to provide images to suit very high resolution printing at many thousands of pixels per inch, when few users of the web site will have such a printer.
Images can be used as pictorial representations of an objects: pictograms. Some disabilities, such as Aphasia, involve problems reading text and graphics can improve access. Pictograms also are useful for international communication.
Pictograms are commonly used for transport (United States Department of Transportation DOT pictograms) and for the Olympic Games.
Pictograms with hypertext links can be used in web pages as computer icons. For touch screen devices, such as smart-phones, the icons can be made large enough to act as press buttons.
Video and Audio
- Moodle supports a wide range of Multimedia plugins
- ANU Digital Lecture Delivery System (DLD) supports (typical file size):
- Audio: MP3 Mono 16,000Hz 0.2 Mbytes per minute
- MP4 432 x 320 Pixel 5 Frames Per second "iPod" Video 1 Mbytes per minute
- MP4 1024 x 768 Pixels 2 Frames per second "Computer" Video 3.5 Mbytes per minute
Judy-Anne Osborn's ANU StratReel: teaching mathematics and statistics with video.
Animation for smaller easier to understand video: Airport.
Moodle supports a wide range of Multimedia plugins. Audio and video files can be simply added to course web sites and Moodle will provide the player controls.The ANU Digital Lecture Delivery System (DLD) supports (typical file size): MP3 Audio and MP4 Video at "iPod" low resolution and "Computer" high resolutions.
The video provided by the DLD is intended for displaying slides with limited movement, not full motion video. Before including full motion video, consider if it is really needed and how much is needed. Videos of lectures should not be more than 10 to 20 minutes, to keep them interesting. Intersperse "talking heads" with slides.
Low resolution limited colour moving images (animation) with audio can be used to good effect for education. These are technically efficient and also easy understand, as they remove unnecessary detail from the images. An example of animation is the award winning Airport by Iain Anderson (2005), made just using the signs found at airports.
Provide Alternatives for Accessibility
- Web Accessibility helps with disabilities, mobile users and student understanding generally
- Key idea: Provide alternatives: Text captions on images, text descriptions, captions for video, audio and images as an alternative to full motion video.
- Moodle supports alternative text for images
- See the Web Content Accessibility Guidelines (WCAG) for details of accessible web design.
- Since the SOCOG 2000 Case, web accessibility has been required by Australian law.
- Universities are required to make web based course materials accessible, wherever feasible
Moodle supports alternative text for images. The key point is to provide information in alternative formats, for people who cannot see, or who have devices which cannot display some formats. In this case provide a text caption for people who can see an image, or a using a device which cannot display an image.
The Web Content Accessibility Guidelines (WCAG), produced by the World Wide Web Consortium (W3C) are a widely accepted guide to web accessibility. The guidelines help with the design and testing of web pages for people who have a disability (such as limited vision), as well as web pages for use on for mobile devices.
Since the SOCOG 2000 Case, web accessibility has been required by Australian law. Australian universities are subject to this legislation and are required to make web pages accessible, wherever possible. It is not lawful to simply wait until a blind student enrols in a course and then look at making the course website accessible: this must be done in advance.