Paul Hibbitts
Educator, interaction design practitioner and software developer.
Designing a
Multi-device Moodle Course Site
A case study, presented for iMoot 2014
Paul D Hibbitts
How many mobile devices do you use daily?
A)
One
B)
Two
C)
Three
D)
Four or more
E)
None
Why use Moodle in 2014?
Moodle’s Strengths (to me)
-
Learning
- Discussions (Forums)
- Networked learning (Blogs + RSS, Wikis, Twitter, etc.)
- Collaborative (Glossary)
- Mix of public and private (User Permissions)
-
Interface
- Embedding of third-party objects, via HTML
- Ability to hide/show Topics Sections
- Language Pack customizations
- The easy “hackability”of PHP
Moodle 2.5 was a
true milestone release… why?
The Bootstrap Framework
-
Grid-based layout
-
Support for responsive design
-
Interface components (e.g. tabs)
-
Javascript snippets (e.g. dialog boxes)
Does your Learning Management System (LMS)
support multi-device friendly courses?
Yes
No
Multi-device delivery is (or soon will be) easy, but doing it well is not
Creating a Multi-device
Learning Strategy Foundation
-
Why? (i.e. problem, opportunity, etc.)
-
Who? (i.e. audience, setting, etc.)
-
What? (i.e. learner goals, organization goals, etc.)?
-
Where? (i.e. context of use, devices to be supported, etc.)
-
When? (i.e. learner intent, off-line access, etc.)
-
How? (i.e. organizational support and capabilities,
existing or new content, etc.)
Redefining “Mobile Learning”
in a Multi-device World
-
Ubiquitous
-
Situational
-
Connected
- Personal
Multi-device Experience Goals
-
Conceptual and visual consistency
- Content and functionality parity
- Seamless task transferability
- Think ecosystem, not isolated devices
- Optimize physical interactions on every device
Multi-device
Learner Experience Goals
-
Engaging
-
Organized
-
Relevant
-
Appealing
Time for Questions or Comments
- What we’ve covered so far
- Why use Moodle in 2014?
- Multi-device support is now easy, but doing it well is not
- Creating a multi-device learning strategy foundation
- “Mobile Learning” in a multi-device world
- Multi-device experience goals
- Multi-device learner experience goals
- Coming up
- A guided tour of a multi-device Moodle course site
A guided tour of a
multi-device Moodle course site...
University of British Columbia (UBC) Continuing Studies,
part of the largest university in Western Canada.
part of the largest university in Western Canada.
http://iy103-w14.hibbittsdesign.com/ (built with Moodle 2.6.1)
Bootstrap (2.x) HTML Snippet
Media Thumbnail with Descriptive Text
<div class="media">
<a class="pull-left" href="#">
Media thumbnail object
</a>
<div class="main-body">
Descriptive text for media
</div>
</div>Bootstrap (2.x) HTML Snippet
Two Column Grid
<div class="row-fluid">
<div class="span6">
Column one content
</div>
<div class="span6">
Column two content
</div>
</div>Next Steps (besides getting v2.7)
- Try out the included Bootstrap theme Clean (v2.5+)
- Check out Bas Brands’ Bootstrap themes
- Learn more about the Bootstrap Framework
- getbootstrap.com/2.3.2/ (version 2.x)
- getbootstrap.com/ (version 3.x)
-
Download and install a Moodle Bootstrap add-on Theme
-
Learn more about multi-device design
Thank you! Any Questions?
-
Contact Info
- Web: paulhibbitts.com
- Email: paul@paulhibbitts.com
- Twitter: @hibbittsdesign
- LinkedIn: linkedin.com/in/paulhibbitts
-
IY103-W14 Course Companion
- iy103-w14.hibbittsdesign.com
- Google Chrome web app: bit.ly/1fPTBvw
Chrome App Launcher
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
By Paul Hibbitts
