theming moodle for integration and usability
DESCRIPTION
TRANSCRIPT
![Page 1: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/1.jpg)
Theming Moodle for Integration & Usability
Alex WalkerCity of Glasgow College
![Page 2: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/2.jpg)
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.
![Page 3: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/3.jpg)
The City of Glasgow College
Bb8.0
m1.9.8
m1.9.8
469628
CoursesSta! Accounts
672363
CoursesSta! Accounts
609157
CoursesSta! Accounts
![Page 4: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/4.jpg)
The City of Glasgow College
m2.4.0
3,93216,102
CoursesActive Users
![Page 5: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/5.jpg)
Our Strategy
• Moodle as our main student portal.
• Custom developments that add functionality to Moodle.
• Other services that sit alongside Moodle.
![Page 6: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/6.jpg)
Our Strategy
Moodle Mahara
Video Repository
Voting System
Private File Sharing
Enrolment Database
Exam View
‘Print Room’
Badges
Advertising
![Page 7: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/7.jpg)
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.
![Page 8: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/8.jpg)
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.
![Page 9: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/9.jpg)
Exam View
• Allows students to see their results from within Moodle.
• Developed in 2010 with JISC funding.
• Released to the community.
![Page 10: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/10.jpg)
Exam View
• Allows students to see their results from within Moodle.
• Developed in 2010 with JISC funding.
• Released to the community.
![Page 11: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/11.jpg)
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.
![Page 12: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/12.jpg)
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.
![Page 13: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/13.jpg)
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.
![Page 14: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/14.jpg)
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.
![Page 15: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/15.jpg)
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.
![Page 16: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/16.jpg)
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.
![Page 17: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/17.jpg)
Our Visual Style
![Page 18: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/18.jpg)
Our Visual Style
![Page 19: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/19.jpg)
Our Visual Style
![Page 20: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/20.jpg)
Our Visual Style
![Page 21: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/21.jpg)
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.
![Page 22: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/22.jpg)
Our Visual Style
![Page 23: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/23.jpg)
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.
![Page 24: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/24.jpg)
Our Visual Style
![Page 25: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/25.jpg)
Our Visual Style
![Page 26: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/26.jpg)
Our Visual Style
![Page 27: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/27.jpg)
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.
![Page 28: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/28.jpg)
Our Visual Style
![Page 29: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/29.jpg)
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.
![Page 30: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/30.jpg)
Our Visual Style
![Page 31: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/31.jpg)
Our Visual Style
![Page 32: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/32.jpg)
Our Visual Style
![Page 33: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/33.jpg)
Our Visual Style
![Page 34: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/34.jpg)
Our Visual Style
![Page 35: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/35.jpg)
Navigation
• Two navigation devices on our sites.
• Dashboard for navigation of the current site or service.
• Black Bar for moving between college services.
![Page 36: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/36.jpg)
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.
![Page 37: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/37.jpg)
Navigation
![Page 38: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/38.jpg)
Navigation
![Page 39: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/39.jpg)
Navigation
![Page 40: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/40.jpg)
Dashboard
• We don’t use Moodle’s Navigation block.
• Two blocks replace it: My Courses, and Dashboard.
![Page 41: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/41.jpg)
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’
![Page 42: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/42.jpg)
Navigation
![Page 43: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/43.jpg)
Navigation
![Page 44: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/44.jpg)
Navigation
![Page 45: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/45.jpg)
Navigation
![Page 46: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/46.jpg)
Navigation
![Page 47: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/47.jpg)
Navigation
![Page 48: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/48.jpg)
Navigation
![Page 49: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/49.jpg)
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.
![Page 50: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/50.jpg)
Navigation
![Page 51: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/51.jpg)
Navigation
![Page 52: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/52.jpg)
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.
![Page 53: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/53.jpg)
Navigation
![Page 54: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/54.jpg)
Navigation
![Page 55: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/55.jpg)
Navigation
![Page 56: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/56.jpg)
‘Smart Features’
• Give the user visual feedback when something needs attention.
• Dashboard and icon bar light up when you have unread messages.
![Page 57: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/57.jpg)
‘Smart Features’
![Page 58: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/58.jpg)
‘Smart Features’
![Page 59: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/59.jpg)
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’.
![Page 60: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/60.jpg)
Custom Course Format
![Page 61: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/61.jpg)
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.
![Page 62: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/62.jpg)
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.
![Page 63: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/63.jpg)
Measuring Performance
![Page 64: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/64.jpg)
Measuring Performance
![Page 65: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/65.jpg)
Measuring Performance
![Page 66: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/66.jpg)
Measuring Performance
![Page 67: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/67.jpg)
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.
![Page 68: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/68.jpg)
Measuring Performance
![Page 69: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/69.jpg)
Measuring Performance
![Page 70: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/70.jpg)
Measuring Performance
![Page 71: Theming moodle for integration and usability](https://reader033.vdocument.in/reader033/viewer/2022061207/548400b85806b5cc588b4590/html5/thumbnails/71.jpg)
Questions
Alex WalkerCity of Glasgow College