Your SlideShare is downloading. ×
Theming moodle for integration and usability
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Theming moodle for integration and usability

1,531
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,531
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Theming Moodle forIntegration & Usability Alex Walker City of Glasgow College
  • 2. The City of Glasgow College • Colleges in Scotland merging into regional super-colleges. • City of Glasgow College formed in 2011, when three Glasgow city centre colleges merged.
  • 3. The City of Glasgow College Bb 8.0 m 1.9.8 m 1.9.8469 Courses 672 Courses 609 Courses628 Sta! Accounts 363 Sta! Accounts 157 Sta! Accounts
  • 4. The City of Glasgow College m 2.4.0 3,932 Courses 16,102 Active Users
  • 5. Our Strategy• Moodle as our main student portal.• Custom developments that add functionality to Moodle.• Other services that sit alongside Moodle.
  • 6. Our Strategy Moodle MaharaExam View Video Repository‘Print Room’ Voting System Badges Private File SharingAdvertising Enrolment Database
  • 7. Video Repository• A place to store videos we can’t put on YouTube.• Guest lectures, videos made by our TV students, etc.• Delivered in HTML 5, or Flash for older browsers. Works on iPhone.• Not yet a Moodle repository.
  • 8. Video Repository• A place to store videos we can’t put on YouTube.• Guest lectures, videos made by our TV students, etc.• Delivered in HTML 5, or Flash for older browsers. Works on iPhone.• Not yet a Moodle repository.
  • 9. Exam View• Allows students to see their results from within Moodle.• Developed in 2010 with JISC funding.• Released to the community.
  • 10. Exam View• Allows students to see their results from within Moodle.• Developed in 2010 with JISC funding.• Released to the community.
  • 11. Voting System• Students can vote in executive elections.• Clicking a link in our Moodle navigation block takes them to the voting system.• Students can only vote once, but votes are stored anonymously.
  • 12. Voting System• Students can vote in executive elections.• Clicking a link in our Moodle navigation block takes them to the voting system.• Students can only vote once, but votes are stored anonymously.
  • 13. The Challenges• Lots of systems that look di!erent and work in di!erent ways.• Di!erent URLS for sta! to remember.• Trying to raise awareness of di!erent services we o!er.
  • 14. Our Approach• Come up with a department ‘look and feel’ to apply to all our sites.• Think about the building blocks that make up the web applications.• Improve consistency by re-using blocks and layout techniques.
  • 15. Our Visual Style• Our college had a design team.• They came up with the MyCity logo, and gave us a ‘department colour’.• I built a prototype Moodle theme, and got feedback from my team.• It has slowly evolved ever since.
  • 16. Our Visual Style• Our college had a design team.• They came up with the MyCity logo, and gave us a ‘department colour’.• I built a prototype Moodle theme, and got feedback from my team.• It has slowly evolved ever since.
  • 17. Our Visual Style
  • 18. Our Visual Style
  • 19. Our Visual Style
  • 20. Our Visual Style
  • 21. Our Visual Style• Looked at the existing college Moodles.• Looked at what other colleges were doing with Moodle.• Looked at how popular websites were laying out their site.
  • 22. Our Visual Style
  • 23. Why Facebook• Facebook has about 1 billion users.• What percentage of your sta! and students are Facebook users?• Facebook employ some very talented user interface designers.• Constantly add features to their site, but keep a neat, intuitive interface.
  • 24. Our Visual Style
  • 25. Our Visual Style
  • 26. Our Visual Style
  • 27. Our Visual Style• We wanted to have the same style on all our links / buttons / tables etc.• Started writing our own re-usable CSS library.• Contained rules for buttons, multi- column page layouts with sidebars, and made tables look pretty.
  • 28. Our Visual Style
  • 29. Our Visual Style• In mid-2012, replaced our own CSS library with the Twitter Boostrap.• Provides buttons, image styles, navigation tools, noti"cations and a lot more.
  • 30. Our Visual Style
  • 31. Our Visual Style
  • 32. Our Visual Style
  • 33. Our Visual Style
  • 34. Our Visual Style
  • 35. Navigation• Two navigation devices on our sites.• Dashboard for navigation of the current site or service.• Black Bar for moving between college services.
  • 36. Dashboard• Top of dashboard contains the name and avatar of the logged-in user.• Top menu link is always ‘Home’.• Bottom menu link is always ‘Log out’.• Trying to display the user’s Moodle avatar in all our other systems.
  • 37. Navigation
  • 38. Navigation
  • 39. Navigation
  • 40. Dashboard• We don’t use Moodle’s Navigation block.• Two blocks replace it: My Courses, and Dashboard.
  • 41. Black Bar• Displayed at the top of all our services.• Links to the college website, Learning Technologies services and other departments in the college.• Old, simple menu being replaced by new drop-down ‘mega menu’
  • 42. Navigation
  • 43. Navigation
  • 44. Navigation
  • 45. Navigation
  • 46. Navigation
  • 47. Navigation
  • 48. Navigation
  • 49. The ‘Mega Menu’• A relatively new interface tool for displaying links in a well-ordered hierarchy.• Lets us put more content within easy reach of the user.• Currently on our Moodle, will be rolled out to other services soon.
  • 50. Navigation
  • 51. Navigation
  • 52. The ‘Mega Menu’• A relatively new interface tool for displaying links in a well-ordered hierarchy.• Lets us put more content within easy reach of the user.• Currently on our Moodle, will be rolled out to other services soon.
  • 53. Navigation
  • 54. Navigation
  • 55. Navigation
  • 56. ‘Smart Features’• Give the user visual feedback when something needs attention.• Dashboard and icon bar light up when you have unread messages.
  • 57. ‘Smart Features’
  • 58. ‘Smart Features’
  • 59. Custom Course Format• Moodle 2 o!ers several course formats, and you can write your own.• Examples are ‘Topics’, ‘Weeks’, ‘Social’, ‘Grid’...• We custom-wrote a modi"ed version of ‘Topics’ called ‘City’.
  • 60. Custom Course Format
  • 61. Measuring Performance• Analytics and Heatmaps are used to measure the performance of our Moodle.• Provide useful statistics for how we can improve our services.• Browser / OS / device statistics help us target future developments.
  • 62. Measuring Performance• Piwik used for analytics.• It’s on open-source alternative to Google Analytics you host in-house.• Custom variable tracking allows you to track extra things.
  • 63. Measuring Performance
  • 64. Measuring Performance
  • 65. Measuring Performance
  • 66. Measuring Performance
  • 67. Measuring Performance• ClickHeat used to track page clicks.• Lets us know which page elements are well used and which aren’t.• We can remove things that aren’t well used, to make better use of the space.
  • 68. Measuring Performance
  • 69. Measuring Performance
  • 70. Measuring Performance
  • 71. Questions Alex WalkerCity of Glasgow College