1. New England Institute of Technology Customizing Canvas through Javascript and CSS OSHEAN Member Forum June 12, 2015

2. New England Institute of Technology Canvas Customization NEIT Switched to Canvas last April Consistent “Customized” user experience Brand our courses and departments “Manage” course development process 350 full and part time faculty Short amount of time Streamline and manage course setup “Policy” decisions regarding the setup and use of the system

3. New England Institute of Technology Canvas Customization

4. New England Institute of Technology Custom Home Page

5. New England Institute of Technology Custom Home Page

6. New England Institute of Technology Help Page

7. New England Institute of Technology Customization of the Modules Page

8. New England Institute of Technology Tabs

9. New England Institute of Technology How Does This Work? Separation of Powers From Canvas: HTML – Page Content & Structure From Canvas and Customer: CSS – Appearance Javascript – Behaviors – (can include changing page content and structure) Multiple CSS and Javascript components can be loaded separately, from entirely different locations

10. New England Institute of Technology Plugging In Your Own Code

11. New England Institute of Technology CSS vs. JS Appearance (CSS) – Hide the Conclude Course button – Branding and term/week banner graphic – Improve Modules page aesthetics – Hide Syllabus Tool Behavior (JS) – Hide the Delete Course button except for admins – Add/change links and other structure to the page Nav links in banner Rename left-hand navigation items Add Twitter feeds to Dashboard page – Make requests for supplemental information Feature Week section Announcements box and "unread" indicator – Activate "tabs"

12. New England Institute of Technology A CSS example: Hide Delete Course Button 1) Chrome Developer Tools helps identify the structure you'll select for in CSS

13. New England Institute of Technology A CSS example: Hide Delete Course Button 1)Chrome Developer Tools helps identify the structure you'll select for in CSS 2)Style settings go into your local CSS file

14. New England Institute of Technology A JS example: Show # Unread Announcements Use Canvas API to: 1)Retrieve all announcements for a user 2)Count unread 3)Add a new element to page This code is available at: http://pastebin.com/9 ghxPMkJ

15. New England Institute of Technology Some CSS Is Built-In Canvas Styleguide: https://[your_canvas_url]/styleguide

16. New England Institute of Technology Some JS Features Are Built-In (with a little help from you) Canvas Styleguide: https://[your_canvas_url]/styleguide

17. New England Institute of Technology Canvas HTML Whitelist https://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf

18. New England Institute of Technology Gotchas and Maintenance Canvas changes frequently – BUT…things break infrequently (once in eight months we've been in production) – Quick-check beta release site every ~2 weeks when you get the Beta Release Notes Change only as much as you must, and don't get too clever! Use good error-handling practices in your JS code (try/catch, etc) Controlling load order is non-trivial The browser wars are not over (test in several!)

19. New England Institute of Technology Thank You Tom Thibodeau tthibodeau@neit.edu Denise Gautreau dgautreau@neit.edu Larry Bouthillier lbouthillier@neit.edu URL for Announcement Count: http://pastebin.com/9ghxPMkJ