Designing Multi-device Moodle Courses
•
1 j'aime•1,413 vues
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.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (12)
Similaire à Designing Multi-device Moodle Courses
Similaire à Designing Multi-device Moodle Courses (20)
Plus de Paul Hibbitts
Plus de Paul Hibbitts (12)
Dernier
Dernier (20)
Designing Multi-device Moodle Courses
- 1. Designing a Multi-device Moodle Course Site! Paul D Hibbitts" @hibbittsdesign #etug! A case study, presented for ETUG T.E.L.L.!
- 2. How many mobile devices! do you use daily?! ! A)!One" B) !Two" C)!Three" D)!Four or more" E) !None!
- 3. Why use Moodle in 2014?"
- 4. 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 !
- 5. Moodle 2.5 was a! true milestone release… why?"
- 6. The Bootstrap Framework! ! Grid-based layout! ! Support for responsive design! ! Interface components (e.g. tabs)! ! Javascript snippets (e.g. dialog boxes)!
- 10. Elegance Theme!
- 11. Does your Learning Management System (LMS)! support multi-device friendly courses?! ! Yes! No"
- 12. Multi-device delivery is! (or soon will be) easy,! but doing it well is not"
- 13. 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.)!
- 14. How Might “Mobile Learning” be" Re-defined in a Multi-device World?! ! Ubiquitous! ! Situational! ! Connected! ! Personal!
- 15. 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!
- 16. Multi-device" Learner Experience Goals! ! Engaging! ! Organized! ! Relevant! ! Appealing!
- 17. 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!
- 18. A guided tour of a! multi-device Moodle course site...! ! http://iy103-w14.hibbittsdesign.com/ (built with Moodle 2.6.1)"
- 28. 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
- 30. 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
- 48. 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!
- 49. Thank you! Any questions?! ! Contact Info ! – Web: paulhibbitts.com! – Email: paul@paulhibbitts.com! – Twitter: @hibbittsdesign! – LinkedIn: linkedin.com/in/paulhibbitts! ! IY103-W14 Course Companion ! – http://iy103-w14.hibbittsdesign.com! – Google Chrome web app: http://bit.ly/1fPTBvw!
Notes de l'éditeur
- Aardvark theme, by Shaun Daubneyhttps://moodle.org/plugins/view.php?plugin=theme_aardvark
- Elegance theme, by Julian Riddenhttps://moodle.org/plugins/view.php?plugin=theme_elegance
- Unmoodling the Moodle Course PageUsing hidden topic sectionsBringing content closer to learnersLeveraging Bootstrap for layoutBlending public vs. private interactionExtending the role of the GlossaryUse as a resource glossaryLocal search, external resourcesEnable student commentsAbility for students to contributeRevising field/menu text for student additionsTake things to the next level with a Database?Adding more communication channelsA better one-on-one student chatAnonymous course feedback (if you dare)Keeping your learner interface quiet
- Unmoodling the Moodle Course Page
- Using hidden topic sections
- Bringing content closer to learners
- Leveraging Bootstrap for layout
- Blending public vs. private interaction
- Extending the role of the Glossary
- Use as a resource glossary
- Local search, external resources
- Enable student comments
- Ability for students to contribute
- Revising field/menu text for student additions
- Take things to the next level with a Database?
- Adding more communication channels
- A better one-on-one student chat
- Anonymous course feedback (if you dare)
- Learner experience goals:EngagingOrganizedRelevantAppealingAnd be sure to keep your interface quiet (and clean)Effective layout (principles: alignment, contrast, repetition, proximity)Use of subdued colorsMake type easy to readShow your students that you care!