How To Integrate Websites Into Canvas

I wanted to walkthrough one of my favorite Canvas integrations. Originally, I discovered this integration and used it in one of the early professional development courses I led for faculty transitioning (from D2L) to Canvas back in May 2016, which you can view here. My discovery of this integration was driven by the desire to replicate what Adam Croom had done with his PRPubs.us course website in D2L.

Anyways, this is the type of website integration into Canvas I’m referencing:

Mobile Blogging & Scholarship Canvas course shown with a Domain of One's Own website integrated inside the Canvas Course.
View from Canvas of an integrated website.
Canvas app on an android phone displaying the redirect tool+website integration.
View from Canvas App of the same integrated website.

What You Need

1. Website you control – If you have a DIY website through a web hosting company or use website companies like WordPress.com, then you are off to a great start. I use Reclaim Hosting for my website needs as Reclaim specializes in education. (Technically, any website can be used, but the one’s I’ve tried using have been hit or miss. Thus, I believe a website you control is ideal and should work perfectly.)

2. An encryption SSL certificate for your website – Your website will only be displayed within Canvas if the site is encrypted. In other words, your site needs to function using a https:// address (instead of http://). There are many ways to obtain an encryption certificate. I use Let’s Encrypt SSL which is offered for free by several web hosting companies (including Reclaim Hosting). Alternatively, you can use a service like Cloudflare to acquire a SSL certificate for your website.

Please note that many website companies like WordPress.com furnish https:// versions of websites to their users by default. In such case, you don’t need to acquire a SSL certificate for your website as it’s already present. If you’re unsure about whether your site meets this requirement, try visiting your website with https:// at the front of the URL (like so: https://example.com) and see if it loads normally.

3. Canvas Course – Use your institutions page to login to Canvas and create a new course or use an existing one. If you do not currently have access to Canvas, you can acquire a free account by selecting “Build It” on this page.

4. Redirect Tool – In your Canvas course, under “Settings>Apps” is the Redirect Tool (the best app!)—make sure it is available for your course. Refer to the screenshot below, under Step 1, as a guide.

Setup Steps

Step 1 – Navigate to Canvas course settings and find the Redirect Tool in the Apps Tab:

Image showing how to access the redirect tool in a Canvas course.

Step 2 – Click “Add App” to add the Redirect Tool:

Image showing how to add the redirect tool in a Canvas course.

Step 3 – Configure the Redirect Tool with your Website Name (will appear in Course Navigation), the https:// URL, and check “Show in Course Navigation:”

Image showing my configuration settings of the redirect tool in a Canvas course.

Zoomed into my configuration settings for the Redirect Tool:

Zoomed in image showing my configuration settings of the redirect tool in a Canvas course.

Step 4 – Refresh the course by clicking “Home” to see the fruits of your labor:

Image showing successful integration of the redirect tool in a Canvas course.

Image showing successful integration of the redirect tool in a Canvas course.

Step 5 – Enjoy:

Image showing successful integration of the redirect tool in a Canvas course.

Troubleshooting

If you’re experiencing any issues, they are typically caused by one of these two problems:

Problem 1 - Redirect Tool Configuration
Problem 2 - Don't have https:// URL for the Website

Integration Examples

I recently submitted proposals that included this website integration to the #Domains17 conference. As I shared then, I believe the best examples of this integration involve a course blog or research/course website.

Course Blog – The course blog in Canvas is a fantastic use case of the Redirect tool combined with the FeedWordPress plugin to bring all of the students’ posts from their own websites into Canvas. This setup is inline with the POSSE publishing model and can be utilized to bring students’ course reflections into Canvas for easier access and to promote peer-peer scholarship.

Cours Blog inside of a Canvas Course using the Redirect Tool

Research/Course Website – If you have course contents published on websites outside Canvas, you can use this trick to bring those materials into your courses. I’ve used this to bring my Canvas Camp curriculum into Canvas courses, but you could use it for course wikis, Drupal or Omeka research websites, and beyond.

Canvas Camp website displaying a lit campfire inside of a Canvas Course

Anonymous Blogging Inside of Canvas – When I ran the Mobile Blogging and Scholarship Canvas training back in May 2016, I used all of these tool in addition to the AccessPress Anonymous Post plugin to allow instructors to blog directly within Canvas. Here’s some more information of the tools I used to accomplish this course design.

Canvas course with AccessPress Plugin configured to let students blog directly within Canvas.

There are many more use cases beyond what I’ve presented here, but I hope this post gives you the guidance and inspiration to integrate websites directly into Canvas.

The featured image is provided CC0 by Corinne Kutz via Unsplash.

Changing Domain For A WordPress Website in 3 Steps

Today, John and I moved the eXperiencePlay website from xp.keeganslw.com to experienceplay.education. I was worried this process would be cumbersome but I was pleasantly surprise when we succeeded after a few minutes of research and work.

Prerequisites

Before initiating the domain change process, I registered experienceplay.education on Namecheap, pointed the Name Servers at my Reclaim Hosting (OU Create) account, and used the “Addon Domains” section of the Reclaim Hosting cPanel to add the experienceplay.education domain and directory to my account. Let me know if you need some guidance with these preliminary steps.

Step 1 – Change the WordPress Address & Site Address

Screenshot of General Settings highlighting WordPress Address and Site Address fields

Under the Settings>General tab of your WordPress website are the WordPress Address (URL) and Site Address (URL) fields. You will need to change those fields from your old domain to your new domain. From our research, we referenced the “Via WordPress Dashboard” section from this website and the “Method II” section from this website.

Step 2 – Move All WordPress Site Files On Server

Folder view of my web server showing the eXperience Play Website files.

Next we moved all of the folders and files located in the xp.keeganslw.com directory over to the experienceplay.education directory including all of the .php files.

Notably, we didn’t have to alter the WordPress MySQL database. In fact, we never touched the database! 🙂

Step 3 – Disconnect & Reconnect Jetpack (& Other Cleanup)

eXperience Play website with new experienceplay.education domain.

To finalize our site transfer, we followed Jeremy Herve’s recommendation from this forum, allowing us to transfer our Jetpack site statistics from xp.keeganslw.com to experienceplay.education. Otherwise, the only remaining cleanup required was updating a few URLs to point to experienceplay.education and establish a redirect from the old domain to the new domain.

To upload additional images to your website, you’ll need to change the Media directory under Settings>Media. The field is titled “Store uploads in this folder” and needs to be replaced with file path for your new domain and directory. Here’s what that setting should look like:

Screenshot of Media Settings highlighting the directory where uploaded files go on a WordPress website.

Final Thoughts

This process was much simpler than I anticipated and I’m excited to maintain the eXperience Play website visitor statistics. Originally, we set out on this process to separate my domain from the eXperience Play program in preparation for OLCInnovate and to encourage other individuals to use our curriculum (similar to GOBLIN). Now, I’m trilled to have learned how effortless it is to change a WordPress website domain!

The featured image is provided CC0 by Денис Евстратов via Unsplash


Edit: Another paragraph and screenshot were added to step 3 to describe changing the media directory before you can upload additional photos to the website. This issue was discovered after this post was originally published.

Hacking My Apple TV

Sometimes I have way too much fun. I recently acquired a 1st gen. Apple TV and wanted to breath some new life into it. So, I decided to remove its extremely outdated operating system (version 3.0.2) and replace it with something that actually allows media streaming. I decided to start with OSMC and followed this excellent video guide:

The installation process was smooth for the most part—I only had one snag during setup. The most updated version of OSMC from November was not installing properly, so I repeated the steps outlined in the video using the October build of OSMC and succeed. (I tried to update the October version to the November one later, but that update failed so I’ll stick with the older version for now.)

November built of OSMC failing to install properly on Gen 1 Apple TV displays a white sad face on blue background
OSMC Installation Failing 1st Time
OSMC linux operating system installing on Gen 1 Apple TV
OSMC Installation Succeeding 2nd Time

At this point, most people stop with an awesome Kodi enabled Apple TV but I wanted much more from this Debian 8.6 Linux computer! In accordance with the recommendations from the aforementioned video guide, I installed LXDE as the desktop interface. It was at this point that I started dreaming of all the things I could do with my new linux computer!

Apple TV As A Computer

First, I installed a web browser. Learning to use the “apt-get” command from forums, I installed Firefox ESR and explored my first text-based web browser, Lynx. It was a spectacular experience to see what the web looks like when images, videos, and advertisements are stripped away and words are all that remain.

OU Create loaded in Lynx text-based web browser shows only words of the website
OU Create in the Lynx text-based web browser

Next, I built a Twine game from my Apple TV and used the notes from eXperience Play to add some style to my simple game. Once it was built I decided to upload and host the HTML game on my OU Create domain.

ATV game built in Twine and hosted at atv.keeganslw.com
Twine game made on Apple TV now available at atv.keeganslw.com

Eventually, I decided to load office software onto my Apple TV to create some documents. To install LibreOffice, I had to learn how to setup backports by creating text files in the command line using:

nano /etc/apt/sources.list.d/filename.list

But after some tinkering and patience, I was able to install LibreOffice onto the Apple TV. With this software, I composed my first document from the Apple TV.

LibreOffice running on Apple TV.
LibreOffice running on my Apple TV

After playing around with Debian Linux for a few hours, I started to push my goals even further. I wanted to see what it would take to turn my Apple TV into a web server. 🙂

Apple TV As A Web Server

There was a phenomenal guide on setting up a LAMP environment in Debian that I followed to transform my Apple TV into a server. However, I had trouble getting MariaDB MySQL to install properly. Since I wasn’t determined to install any web apps that used MySQL, I didn’t sweat this problem and turned my attention towards the more crucial Apache2 and PHP5 and started getting more ambitious.

First, I discovered I could host the Apple TV-made Twine game on the Apple TV itself by placing the HTML file in the web root directory that Apache had generated (in my case /var/www/html). THIS WORKED PERFECTLY. In other words, files located in the computer folder “html” (that is located in the folder “www” that is located in the folder “var”) on the Apple TV were now accessible to other computers on my home network. This meant I was able to navigate to the IP address of my Apple TV using my iPad to access the Twine game.

ATV game built in Twine and hosted on the Apple TV
Same Twine game now hosted on the Apple TV

In fact, any device on my home network can navigate to http://10.0.1.30/twine.html and access the html file that was being hosted by my new LAP (Linux, Apache, PHP) server. Yet this game was only simple HTML and I wanted to take the Apple TV even further.

So, I started exploring web apps since some flat-file CMS like Grav don’t require MySQL to operate, I started exploring what it would take to run a Grav website from my Apple TV. I spent a while reading and researching the requirements like editing the apache2.conf file to allow .htaccess to function and installing different PHP components. However, after I looked at my watch and saw 8 hours had past since I started this adventure, I decided it was time to take a break… 🙂

What’s Next For The Apple TV?

I want to finish getting Grav running on my new web server, but I’ll need to do a bit more research before another Apple TV journey. Also, I’m exploring a firewall exception and mapping port 80 in my router to grant users access to my Apple TV web server outside of my home.

Finally, I’m considering installing node.js and trying to get a copy of Ghost running. This may be feasible as opposed to running something like Sandstorm.io or Gitlab, with the measly 256MB of RAM on an Apple TV.

WHY? Why Not?

If you played the Twine game I keep referencing, you’ve already witnessed me questioning my intentions. Why the heck did I spend all day turning a media player into a computer and then into a server? I may sarcastically reply with “why not?” but the real reason is for the fun of learning. Today, I taught myself loads of awesome stuff! From heavy usage of the Debian command line to Apache2 as a web server to how the web works at a file and IP address level—these days of experimentation, building, and re-building help me understand technology and its role in our lives. For me this was more than an exercise in learning, this was an opportunity to discover how and why I’d bring the web into my own classroom.

The featured image is provided CC0 by Ilya Pavlov via Unsplash.

Gamifying The Writing Process With Habitica

One of the (many) side-projects that John and I have been working on is gamifying the writing process. In particular, we’re interested in gamification that seeks to reinforce and build good habits that yield efficient writing, research, and revision.

This semester, the Writing Center on our campus engaged us in brainstorming the logistics, pedagogical implications, etc. of such a writing program. From conversations with them, John and I have pursued various tools and solutions. At the moment, we’re prototyping two different applications of gamifying the writing process. John has already written about one of these ideas—using automated word-counts to engage individuals in competing against themselves to encourage writing. Now I want to address the other prototype we’re developing.

We’ve been researching and using Habitica as a platform to facilitate a gamified writing program (learn more about Habitica here and here). In fact, writing this blog post fulfills a “daily” task for me in the very Habitica system we are prototyping!

Keegan's Habitca website daily todo list that highlights "writing for 10 minutes" and "write a blog post"
Keegan’s Habitica Writing Tasks

Anyways, yesterday I met with Annemarie Mulkey, an instructor in the english department who has participated in both GOBLIN and eXperience Play. I reached out to Annemarie because she has experience with Habitca, a background in English, and is a blast to work with! Since Annemarie uses Habitica to motivate her own productivity (even more broadly than writing), her perspective was phenomenal.

Eventually, we wound up brainstorming how to setup Habitica to gamify writing an undergraduate research paper. We decided the research paper was only going to be ~5 pages and be completed over 7 days. With these parameters set, here’s what we developed using Habitica in half an hour:

Whiteboard Brainstorming

Research Paper Challenge outlined on whiteboard

Resultant Habitica Challenge

Research Paper Challenge in Habitica includes many tasks to complete

Since Habitica possesses a feature called Challenges that allows users to add custom sets of tasks to their account, we used this mechanism as the means to facilitate the gamification of writing a research paper. The Habitica To-Do list we envisioned includes tasks like outlining, researching, and drafting the paper to serve as a set of goals for students working on their research paper.

Taking this a step further to encourage the practices that produce good writing and researching, Annemarie and I used the Habits and Dailies of Habitica to reward students for tasks like 30 minutes of uninterrupted reading/writing, exploring the citations of sources, and writing 1 page for the paper everyday. Together, these three components of our Habitica Challenge (To-Dos, Habits, and Dailies) divide up the process of writing a research paper into manageable pieces for undergraduate students, and award students who complete these tasks regularly with experience points and gold in Habitica.

If you want to dive deeper into the specifics of Habitica or our Challenge, either reach out to me with questions or signup for Habitica, send me your Habitica UserID so I can invite you to Annemarie and I’s party, and then join the custom Challenge we built.

Finally, we recognize that at face value, this prototype appears very systematic and would yield standardized writing. Therefore, using this in the classroom would require more explanation and emphasizing to students the flexibility of their writing process in conjunction with the framework we developed using a Habitica Challenge.

The featured image is provided CC0 by Olu Eletu via Unsplash.

My Last Apple Computer Upgrade

I just finished upgrading my last Mac. My wife’s early 2011 MacBook Pro was really starting to show its age. The full 320GB hard drive was making this computer inoperable and needed to be replaced.

The Upgrade

To breathe new life into her MacBook Pro, I added a massive 960GB SSD. I wanted to kill two birds with one stone here: triple her total storage and increase her computer’s performance.

Before I started the upgrade, I used this USB 3.0 to SATA cable to setup the SSD. Unfortunately, this cable was not backwards compatible with the USB 2.0 ports on the 2011 MacBook Pro (which was weird). That meant I had to use another Mac to go through the following setup process:

  1. Download the El Capitan installer from the Mac App Store.
  2. Install El Capitan to the SSD (using the mentioned cable to mount the SSD).
  3. After the installation is completed, setup OS X on the SSD. I used the Migration Assistant to move all of the data from the original hard drive to the new SSD.
  4. Replace the old hard drive with the new (now identical) SSD.

To replace the hard drive on the 2011 MacBook Pro I followed the guide from iFixit since it was straightforward and provided a video demonstration:

Anyways, here are the photos to commemorate this upgrade:

After the new SSD was installed into the 2011 MacBook Pro, I booted up the machine to make sure everything was working properly, then immediately enabled TRIM for the new SSD since I wanted this hard drive to perform optimally for the next few years. The guide from OSXDaily provided me with clear instructions on how to do this.

At this point, I was finished with her 2011 MacBook Pro, my last Mac to upgrade.

Why is this my last Mac upgrade?

Mac upgrades have always been a big part of my life. Lots of Macs have seen RAM upgrades (more appropriately: maximizations) by my hands over the years.

But, we are at a turning point. We are coming to the end of the era of (easily) upgradable Macs. Many of the newer Macs do not allow access to internal components like they once did. In most cases RAM and SSDs are soldered directly onto a Mac’s mother board. Combine this with several Apple computers that are difficult to upgrade, and there are now very few Macs that are upgradable by non-professionals.

As the few remaining serviceable Macs are aging, I wonder how much longer these computers will be supported by Apple. Very soon, the components of most Macs (possibly excluding the Mac Pro) will have to last for the entire life of the device.

There is a tradeoff in this new era of non-serviceable Apple computers. No longer will I have to worry about upgrading computers, but at the same time, I will lose the valuable learning experience of servicing a Mac. Not to mention having to pay a premium for the permanent parts of any Apple computers I purchase upfront—I hate to imagine the price of a 960GB laptop SSD in 2011….

This moment is rather melancholy. Although I am excited to bump my wife’s spinning hard drive to a newer solid state drive, I am saddened by the fact that I may have just finished my last Mac upgrade.