new england institute of technology customizing canvas through javascript and css oshean member...
TRANSCRIPT
New England Institute of Technology
Customizing Canvas through Javascript and CSS
OSHEAN Member ForumJune 12, 2015
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
New England Institute of Technology
Canvas Customization
New England Institute of Technology
Custom Home Page
New England Institute of Technology
Custom Home Page
New England Institute of Technology
Help Page
New England Institute of Technology
Customization of the Modules Page
Before
After
New England Institute of Technology
Tabs
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
New England Institute of Technology
Plugging In Your Own Code
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"
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
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 CSS2) Style settings go into your local CSS file
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/9ghxPMkJ
New England Institute of Technology
Some CSS Is Built-InCanvas Styleguide: https://[your_canvas_url]/styleguide
New England Institute of Technology
Some JS Features Are Built-In (with a little help from you)Canvas Styleguide: https://[your_canvas_url]/styleguide
New England Institute of Technology
Canvas HTML Whitelisthttps://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf
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!)
New England Institute of Technology
Thank You
Denise [email protected]
Larry [email protected]
URL for Announcement Count:http://pastebin.com/
9ghxPMkJ