etug t.e.l.l.: designing a multi-device moodle course site: a case study

51
Designing a Multi-device Moodle Course Site Paul D Hibbitts @hibbittsdesign #etug A case study, presented for ETUG T.E.L.L.

Upload: paul-hibbitts

Post on 07-Nov-2014

900 views

Category:

Education


0 download

DESCRIPTION

Regardless of the device ― smartphone, desktop, tablet ―today’s networked learners deserve an exceptional user experience. Based on his first-hand experience of creating multi-device course companions for both his university (SFU) and continuing studies (UBC) courses, Paul will guide you through his key design considerations. During the session he will also provide an “under-the-hood” look at his most recent effort, a multi-device Moodle 2.6.1 implementation for his course on designing multi-device learning experiences at UBC.

TRANSCRIPT

Page 1: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Designing a Multi-device Moodle Course Site!

Paul D Hibbitts" @hibbittsdesign #etug!

A case study, presented for ETUG T.E.L.L.!

Page 2: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

How many mobile devices !do you use daily? !!

A) !One"B) !Two "C)!Three"D)!Four or more "E) !None!

Page 3: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Why use Moodle in 2014?"

Page 4: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Moodle’s Strengths (to me)!!  Learning!– Discussions (Forums)!– Networked learning (Blogs + RSS, 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 !

Page 5: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Moodle 2.5 was a !true milestone release… why?"

Page 6: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

The Bootstrap Framework!!  Grid-based layout!!  Support for responsive design!!  Interface components (e.g. tabs)!!  Javascript snippets (e.g. dialog boxes)!

Page 7: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Aardvark Theme!

Page 8: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Aardvark Theme!

Page 9: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Elegance Theme!

Page 10: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Elegance Theme!

Page 11: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Does your Learning Management System (LMS) !support multi-device friendly courses? !!

Yes!No"

Page 12: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Multi-device delivery is!(or soon will be) easy, !but doing it well is not"

Page 13: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Creating a Multi-device"Learning Strategy!

!  Why? (i.e. problem, opportunity, etc.)!!  Who? (i.e. audience, setting, etc.)!!  What? (i.e. learner goals, organization goals, etc.)!!  Where? (i.e. context, devices supported, etc.)!!  When? (i.e. learner intent, off-line access, etc.)!!  How? (i.e. organizational support and capabilities,

existing or new content, etc.)!

Page 14: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

How Might “Mobile Learning” be "Re-defined in a Multi-device World?!

!  Ubiquitous!!  Situational!!  Connected!!  Personal!

Page 15: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

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!

Page 16: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Multi-device"Learner Experience Goals!

!  Engaging!!  Organized!!  Relevant!!  Appealing!

Page 17: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

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!– “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 site!

Page 18: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

A guided tour of a !multi-device Moodle course site... !

!http://iy103-w14.hibbittsdesign.com/ (built with Moodle 2.6.1)"

Page 19: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 20: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 21: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 22: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 23: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 24: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 25: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 26: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 27: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 28: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Bootstrap (2.x) HTML Snippet!

<div class="media"> <a class="pull-left" href="#"> Media thumbnail object </a> <div class="main-body"> Descriptive text for media </div>

</div>

Media Thumbnail with Descriptive Text

Page 29: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 30: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Bootstrap (2.x) HTML Snippet!

<div class="row-fluid"> <div class="span6"> Column one content </div> <div class="span6"> Column two content </div>

</div>

Two Column Layout

Page 31: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 32: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 33: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 34: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 35: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 36: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 37: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 38: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 39: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 40: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 41: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 42: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 43: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 44: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 45: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 46: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 47: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 48: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Next Steps!!  Install and explore Moodle 2.6.x!–  http://download.moodle.org/!

!  Try out the included Bootstrap theme Clean!–  http://docs.moodle.org/dev/Clean_theme !

!  Learn more about the Bootstrap Framework!–  http://getbootstrap.com/2.3.2/ (version 2.x)!–  http://getbootstrap.com/ (version 3.x)!

!  Learn more about multi-device design!–  http://www.lukew.com/presos/preso.asp?28!–  http://blog.teamtreehouse.com/beginners-guide-to-

responsive-web-design!

Page 49: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Thank you! Any questions?!!  Contact Info !– Web: paulhibbitts.com!– Email: [email protected]!

– Twitter: @hibbittsdesign!– LinkedIn: linkedin.com/in/paulhibbitts!

!  IY103-W14 Course Companion !– http://iy103-w14.hibbittsdesign.com!

– Google Chrome web app: http://bit.ly/1fPTBvw!

Page 50: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study
Page 51: ETUG T.E.L.L.: Designing a Multi-device Moodle Course Site: A Case Study

Chrome App Launcher!

http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html