Blog-as-Homepage CanvasLIVE Slides

Here’s the Blog-as-Homepage Slidedeck for the upcoming CanvasLIVE, with notes and links below. After the CanvasLIVE event on April 6, I’ll add the YouTube video here too.

And here’s the video 🙂

Slide 1: CanvasLIVE opening slide.

Slide 2: Blog-as-Homepage title slide.

Slide 3: Connected Learning with Cats slide. This is the second in a series of Connected Learning with Cats demos for CanvasLIVE. Check out #CLCats at the Community, and you can find more information at the Connected Learning Cats posts here at my blog.

Slide 4: More Canvas Projects. This slide provides links to some other Canvas projects I am working on. You can find all of those links here on the About Me page which I’ve put inside the Canvas: Growth Mindset course, my newest project!

PART A. Blog Tour. I’ll start off by showing you around the blog that I use for my class announcements.

Slide 5. Announcements as Exploration. I see announcements as a way to get important information to students, but also as a way to encourage them to explore, learning things to satisfy their curiosity and grow as learners. It’s not about “class content” in the sense that everybody in the class needs to read it and learn it. Instead, it’s more open-ended, trying to find ways to connect to the students one by one, across that wide range of individual interests. So, even if blog-based smorgasbord announcements aren’t a good fit for your class, you might still get some ideas here about open-ended, wide-ranging content “extras” that you can include in your classes.

Slide 6. Examples of Blog-as-Homepage. You can see how I do this in my two classes: Myth.MythFolklore.net and India.MythFolklore.net. How you might choose to organize your announcements blog would totally depend on your class, your students, their needs. My announcements blog has evolved over the past 10+ years, so I can assure you that it is a strategy that works for me. I was really glad to learn how to embed my announcements blog in Canvas just as I did for many years in D2L (the LMS we used for 10 years prior to Canvas at my school). I cannot answer people’s questions about the standard ways of doing announcements in Canvas because when we moved this year from D2L to Canvas, I just carried on with my embedded blog, just as I had done in D2L.

Slide 7. Class Business Section. There’s always a paragraph at the top with a reference to the day and week (there are new announcements every day, including Saturday and Sunday). I put the most important information that people might need in that top paragraph. Below that is a section called “Class Procedures and Reminders” which I try to keep to at most three items per day. These are paragraphs specifically related to class activities, especially any assignments that are due. I don’t have any images here, just text and links.

Slide 8. Fun Section. The rest of the body of the blog post contains stuff that is for fun and exploration. Each item has some kind of image or video that goes with it, and I’ll say more about that in the next part of this presentation.

Slide 9. More Fun in the Sidebar. The sidebar contains more fun stuff, all of which is dynamically generated. The sidebar is not something I have to edit; instead, the content creates itself. There are javascript randomizers from my Canvas Widget Warehouse, and I also have a Twitter stream there (find out more at Twitter4Canvas). More about the sidebar here: The Sidebar Never Sleeps.

Slide 10. What about Mobile? I use Blogger which has great support for mobile. It automatically detects when the browser is being used over mobile, and it defaults to a mobile view, suppressing the sidebar. You can simulate Blogger mobile view by adding ?m=1 to any Blogger blog or blog post address just to see what that looks like. That way I can be sure that the blog is useful to students whether they are watching it in the mobile view or in the laptop view with the sidebar. (My students mostly use laptops for their classwork since both classes are writing-intensive, but I know they use Canvas to check in on the calendar and announcements using their phones.)

Slide 11. Every Day Announcements. Blogging really lends itself to an “every day” approach, and that’s the approach I take with announcements. It’s also my philosophy of education in general, where I try to encourage my students to learn a little bit every day as opposed to the binge-and-purge learning that is so common, especially in higher education where classes don’t even meet every day. I don’t expect my students will actually read the announcements every day, but if they do, I have something to offer them!

PART B. Examples of Fun Stuff. I’ll show some examples here of the kinds of fun stuff I share with my students, focusing on the content that I’m also sharing through my Canvas Widget Warehouse, which means the content is all shared with you as well, ready to be deployed in your Canvas course Pages if you want.

Slide 12. Growth Mindset Cats. These are so popular with the students that I include them both in the sidebar and in the daily posts. You can find out more here: Growth Mindset Cats Widget. I’ll be doing a presentation on the Growth Mindset Cats for CanvasLIVE on April 20.

Slide 13. Free Books. I have a huge Library of Free Online Books for my students, and it is one of the main ways I hope to inspire them to keep on reading and learning after the class is over. You can find out more about the Freebookapalooza here. I’ll be doing a Freebookapalooza presentation for CanvasLIVE on June 15.

Slide 14. Student Projects. I love featuring student work in the daily announcements, both in the post and in the sidebar. Students can get ideas and inspiration from seeing other students’ work, and it also shows them that their work is important too, something that will live on in future classes. You can find out more about my Student Project Archive here.

Slide 15. Motivation. I’m a big believer in motivational graphics along with inspirational proverbs and memes.  I’ve got lots of different collections of graphics and memes which you can explore at the Widget Warehouse.

Slide 16. Videos. I really like including videos, and you can read more about my approach to YouTube videos and playlists here. I’ll be talking about YouTube Playlists at a CanvasLIVE on June 1.

Slide 17. Ask Your Students. Especially as you are developing the content to use in your announcements, ask your students! My students can choose an extra credit option each week to tell me what their favorite item was from the announcements (which is also a good way to get them to go back and review the announcements!), and that way I learn which kinds of content they are really connecting with. As a general rule, asking your students is pretty much the best way to improve your classes IMO.

PART C. Advantages of Blogging. These are the advantages of blogging, both for class announcements and also as a general practice.

Slide 18. Blogging and Co-Blogging. My classes consist of student blog networks, and so it is very important to me that I show the students how blogs can be a great space for writing and sharing online. I’m blogging, my students are blogging: we are co-bloggers.

Slide 19. Content Curation. Another thing I really like about blogs for content development is that they help you build content over time, post by post, and you can use the labels and search features of the blog to keep track of your editorial process, when you last used a piece of content in the blog, etc. etc. In my announcements, I am able to draw on a vast quantity of content that I have accumulated over the years; the blog helps me keep it all organized and ready for easy re-use.

Slide 20. Sharing and Syndication. By publishing content in a blog, I am able to connect and share with many people, not just my students. I’m also able to publish the content in one place and syndicate that content to other places: the announcements appear in my Canvas class spaces, it gets distributed by email, and people can also subscribe by RSS if they want. Students sometimes choose to remain on the class announcements blog email list, which always makes me happy, thinking about past students who might be out there reading the announcements too! If you are teaching in a K-12 environment and communication with parents is important to you, this type of approach to the announcements might be very helpful, since parents could also sign up to get the announcements by email.

PART D. Key Tips.

Slide 21. Use IFRAME. To use your blog as a Homepage, you’ll need to embed it in a Canvas Page using iframe, and it will need to have an HTTPS address. If you just want to include your blog as a navigation item, you can use the Redirect Tool to embed the blog in Canvas. That works great to get your blog inside Canvas, but for a Homepage, you need the iframe. Details here. My iframe looks like this; don’t forget that the address must be HTTPS!

<p><iframe src="https://ouclassannouncements.blogspot.com/" width="100%" height="1000"></iframe></p>

Slide 22. Be HTTP / HTTPS Aware. One potential problem you run into when you embed content in Canvas is that http links will not function. Your blog needs to be HTTPS, and so do the links in that blog. If the link is HTTP, then it must open in a new tab; otherwise, nothing will happen. Canvas will not open an HTTP link inside a Canvas page, but there will also be no error message; the link just won’t work. So, if there is any possibility that you will have HTTP links in your blog, you need to make sure that the links open in a new tab. I do that by having all links in the blog open in a new tab by including this in the <head> section of the blog; I’m sure there are other methods, but this is the easiest one for me:

<base target='_blank'/>

Slide 23. Include Navigation Links. This is a good rule for any kind of embedding: make sure you provide a link to the embedded object so that students can click on that link to access the content directly. That way, if anything goes wrong with the embedding, they can still access the content. You can also do your students a favor by letting them control the right-hand navigation panel. I configure my blog as the Front Page of the Pages area, and I make that Page the Homepage for the course. That means I can link to the Homepage URL (which displays the right-hand navigation panel) or I can link to the Front Page URL (which does not display the navigation). As a result, the students can toggle between the two views as they prefer. Details here.

And that’s all….!

Slide 24: Let’s connect!
I’m eager to brainstorm any time. You can ping me at Twitter whree I’m @OnlineCrsLady or leave a comment here, or we can connect at the Canvas Community.

Slide 25: CanvasLIVE closing slide.

The Sidebar Never Sleeps: Live Content 24/7

I teach General Education courses in the Humanities, and that means I welcome any opportunity to share with my students the wealth of literature, art, and music that is online. I can never be sure just what will click with each student, so I’m try to expose them to a steady stream of ever-changing items. Ideally, they might see something that makes them want to click and learn more, but even if that does not happen, by the constant parade of content, I am showing them what a world of culture they can find online … if they go looking.

The main way I do this is with my Class Announcements blog: every day there are new announcements, and then in the sidebar of the blog things are ever-changing, not just day to day but every time the page reloads. My goal is that every time they log on to Canvas, they will see something new… automatically. I’m busy doing other things (commenting on their projects), but while I am working, the power of the dynamic content in the blog is working too!

I’ve written elsewhere about how I configure Canvas so make my blog the homepage, and in this post, I want to provide a quick tour of my sidebar. If you go to my class Myth.MythFolklore.net (fully open, just click and go!), you can follow along by looking at the sidebar there for yourself; there is information about each sidebar item below.

Text Box: On top is a text box which is static and does not change; it contains the single most important link for students who are in a rush to get to what they need for class: the Class Calendar. While I want the blog to be a fun, exploratory space, I also want students in a hurry to be able to find what they need to get to work on the class.

Email Subscription: Some students subscribe to the announcements by email, which I think is great. Blogger’s Feedburner service provides really nice email presentation of the blog, so I am glad when students do choose to get the announcements by email. I’m subscribed too, so I can see the same email the students receive.

Random Cats: This is a randomizing widget of Growth Mindset Cats; the cats have turned out to be incredibly helpful in promoting a spirit of learning and also fun in my classes. If you’re interested, you can snag this widget and use it too, either in a blog like this or directly in a Canvas page: Widget Warehouse: Growth Mindset Cats.

Class Twitter: I try to update the class Twitter at least twice a day; it only takes a few minutes to add new items (I just retweet), and it’s always fun for me to see what’s new. Here’s how that works: Twitter for Class Content: My Top 5 Strategies.

Reading, Writing, Learning. This is a combination widget that randomly draws on several different widgets: Writing Inspiration, Reading Inspiration, and H.E.A.R.T. (each of those links goes to the Widget Warehouse page; these are also available for anyone else to use). Thanks to the power of random, new things appear each time the page loads!

Random Storybook. These are student projects from my class archives. I really like reminding students all the time how the projects they create will become part of future classes too. Their work matters! You can see the archive here: eStorybook Central.

Free Books Online. This is my favorite widget: it displays free books of stories and legends (I teach Mythology-Folklore and Indian Epics), drawing on the 900+ free books in my Freebookapalooza Library. I’ve broken that widget down by region, too, hoping that might make it more useful for others if you might also want to share free books with your students: Widget Warehouse: Freebookapalooza.

Videos. This is the playlist that I create with the videos from past class announcements; every day there is a new video in the daily announcements, and this playlist gives the students access to all the videos so far this semester. It’s like a second chance in case the students didn’t notice the video in yesterday’s announcement. You can see the playlist directly with this link: Announcements Videos.

RSS Links. I’ve never been able to get my students excited about RSS (alas!), but I do include the RSS links here in my sidebar.

Suggestion Box. Finally, there is a link to a Google Form where students can provide anonymous suggestions. Since there are lots of other opportunities for feedback in the class via their blogs, the students rarely use this, but I want to make sure they know that anonymous feedback is also welcome!

Every semester I tinker with the sidebar, and it’s hard to restrain myself from putting even more in there. I’m happy with the selection that I have now… but when I get some time to make more widgets this summer, I’ll probably be redecorating the sidebar for classes this Fall.

 

Crossposted at Canvas Community: Instructional Designers.

Blissfully Blogging Announcements in Canvas

I’m making good progress on the Twitter4Canvas materials (I may have a complete rough draft of it all this weekend!), and what I wanted to do today was show how I share Twitter in my Canvas classes via the Blogger blog I use for my class announcements. I wrote about this last year, and I’m now updating that post with a focus on Twitter and Canvas.

This post has three parts: description of the blog that I use as my homepage, advantages of using a blog for the homepage, and then some nitty-gritty about how I embed the blog inside Canvas.

But first, a screenshot: here’s what my Canvas homepage looks like. You can see the latest version by visiting Myth.MythFolklore.net or India.Mythfolklore.net; both courses are open, and both show the same blog as the homepage. You can also visit the Announcements blog directly, separate from Canvas. Scroll on down to see the whole thing. 🙂


DESCRIPTION. The blog has basically four components:

Top Paragraph. There’s always a paragraph at the top with a reference to the day and week (there are new announcements every day, including Saturday and Sunday). I put the most important information that people might need in that top paragraph.

Procedures Section. Below that is a section called “Class Procedures and Reminders” which I try to keep to at most three items per day. These are paragraphs specifically related to class activities, especially any assignments that are due. I don’t have any images here, just text and links.

Fun Section. The rest of the body of the blog post contains stuff that is for fun and exploration. Each item has some kind of image or video that goes with it. There are three items at the top that are about reading, writing, creativity or just something for fun; then a featured student project (Storybook) from a previous class; next is a free book online related to the class; a proverb poster; a video of some kind; a Growth Mindset Cat; an event taking place on campus that day; and, finally, an “on this day” event at the bottom.

Sidebar. The sidebar contains the key class link at the top of the page, an email subscription form, a random Growth Mindset Cat, the class Twitter feed, a random graphic, a random Storybook, a random free book online, a video playlist of all the announcement videos, plus an anonymous suggestion box.

ADVANTAGES. Here are the top 5 reasons why I prefer to use a blog for my homepage:

1. I model blogging. My classes consist of student blog networks, and so it is very important to me that I show the students how blogs can be a great space for writing and sharing online. In all my blogs, I try to use good strategies that my students can likewise use in their own blogs.

2. Blogs have sidebars. It drives me crazy that Canvas gives me no opportunity to develop the sidebar for my class in useful ways. There is nothing I can do with that Canvas sidebar. I cannot add dynamic widgets, I cannot add graphics. I cannot even add links to it: if you add a non-Canvas link to the sidebar students are “warned” before clicking on it, which means Canvas doesn’t even trust me to add links to my own sidebar! I need a sidebar that is going to be display cool, useful, new content every time the students log on. The blog gives me that sidebar design space.

3. The blog makes Twitter and javascripts easy. Of course, it is also possible to build a Twitter widget, which is what I will be demonstrating in the Twitter4Canvas course, but that requires an extra step, sneaking Twitter into Canvas by way of a separate https webpage. By embedding the blog into Canvas, I can use Twitter and other javascripts without going through that extra step. The javascript runs at the Blogger server, which means that Canvas is not running the javascript; it is just displaying the results. The Canvas security police are okay with that.

4. Blogs offer mobile view without an app. I often include links to the daily announcements in communication with students, and those links are mobile-responsive automatically; if students are checking their email on their phone, for example, they will see the mobile view when they click on the announcements link, automatically, no app required.

5. One blog for two classes. Since I use the same announcements, I need to be able to edit once and display twice. If I did the announcements using the LMS tool inside the course space, I would have to edit the announcements twice. Not good. I also like that the blog has continuity. Canvas doesn’t understand that I am teaching the same classes every semester, but Blogger does; I’ve been using this exact same Blogger blog for my classes since 2008… which means I am coming up on my ten-year blogiversary.

NITTY-GRITTY. Here is a detailed step-by-step of the options I use to configure my blog inside Canvas.

Canvas URLs. The key thing to understand is that I am using a wiki page AND I am telling Canvas to make my wiki page the default homepage of the course, so both of those addresses show my blog:
https://canvas.ou.edu/courses/31878
https://canvas.ou.edu/courses/31878/wiki
That 5-digit number refers to a specific semester course instance; it changes from semester to semester, course to course. So, make sure you notice the difference: the course homepage has the right-hand sidebar, but the wiki front page does not have the right sidebar (but it does have the very annoying “view all pages” across the top which Canvas will not let me suppress). That difference will be important in the set-up described below.

Okay, here goes:

Blogger. I use Blogger because, until recently, that was the best option I could recommend to my students. Blogger is ad-free and it is javascript-friendly, while the free hosted version of WordPress has ads and does not like javascripts. Now my students can use DoOO (Create.ou.edu) and set up their own WordPress but I’ve had students blogging for years… and I couldn’t wait for DoOO. Most of my students use Blogger too, although some use WordPress, which is great. I provide detailed tech support for Blogger since I know it best.

HTTPS. Blogger now has https. By default, it displays http, but you can use https too. That’s what you need to display the blog in Canvas. All the sidebar content also needs to be https to display in Canvas.

Blogger templates. All the standard templates (but NOT the “dynamic view” template) would work; I use the “Simple” template, and I set the blog width at 840 pixels and the sidebar width at 260 pixels. I put the page font at 15 pixels Arial with post titles at 18 pixels. I suppress the top navigation bar (the one with the search box).

Open links in new tabs. Because the mixed-content rules in Canvas mean http links will fail unless they open in a new tab, I edited my template’s HTML to open all links in new tabs automatically. To do that, just add this big of code right after the <head> tag so it looks like this:

<head>
<base target='_blank'/>

Canvas “Daily Announcements” page. I start by creating a Page in the course wiki; I called it “Daily Announcements.” Then I made that the “front page” of the wiki:
https://canvas.ou.edu/courses/31878/wiki
I then chose that as the “Home Page” for my Canvas course:
https://canvas.ou.edu/courses/31878
But, as noted above, the “Home Page” for the course shows the right sidebar but the “Front Page” of the wiki does not; that’s just an automatic Canvas thing beyond your control.

Blogger in wiki page. I use a simple iframe to put the Blogger into the wiki, making sure I use the https address of the blog; I set the width at 100%, and I have a height of 1000 (my blog posts are usually longer than that, so there’s a scroll bar in the frame).

<p><iframe src="https://ouclassannouncements.blogspot.com/" width="100%" height="1000"></iframe></p>

Then I do something tricky. Remember how the course homepage has the right sidebar and the course wiki front page does not? Well, for many reasons, I prefer to have a homepage without the right sidebar. So here’s what I do:

Create Homepage link in left sidebar. I use the Redirect Tool to create a “Homepage” link which I display in the left sidebar (how ridiculous is that… having to install an app just to add a link to class navigation? whatever…). That link goes to the wiki front page address (which means the right-hand sidebar does not appear):
https://canvas.ou.edu/courses/31878/wiki

Remove “Home” from left sidebar. After I create my Homepage link in the sidebar, I then remove the Canvas Home link from the left sidebar, putting the Homepage link I made with the Redirect tool up at the top.

Fix up “Daily Announcements” page. Above the embedded blog, I add some text to help people navigation: I want students to realize they can turn the right sidebar on or off, and I also want to tell them how to suppress the left sidebar. Most of all, I just wish they would open the announcements in a new tab entirely!

* Hide or show the right menu.
To do that I use these addresses to make the links:
hide: https://canvas.ou.edu/courses/31878/wiki
    show: https://canvas.ou.edu/courses/31878
* Reminder about how to suppress the left menu.
* A link to open the Announcements in a new tab.\

And that’s it! I think those are all my tricks, but if I forgot something, please ask. I really am a big fan of this approach, and I am glad to help if anyone wants to give it a try. 🙂

Do not go where the path may lead;
go instead where there is no path,
and leave a trail.

(Growth Mindset Cat)

Crossposted at OU Canvas Community.

Maati Baani in my Canvas Homepage

As a follow-up to the post this morning testing the new YouTube embedding in WordPress, I wanted to say something about the power of YouTube embedding in general, especially embedding a video as part of a playlist. I include one video each day in my class announcements, and today’s announcements contain an AMAZING new video by Maati Baani:

Here’s how it looks inside my Canvas homepage; you can also visit the class directly yourself (no log-in required) by going to India.MythFolklore.net:

jammin

I also include the entire video playlist of the Announcements in the sidebar of the announcements blog, as you can see here (that’s especially handy for students who might not always scroll down to see the whole blog post each day):

jammin2

Using playlists like this is great because it means if a student plays the current day’s video, the video will carry on to the next video and the next, and so on. At this point, the Announcements playlist has 74 videos in it as of right now (new video every day of the semester), so potentially all kinds of items of interest to the students.

I can also embed the playlist in the other blogs I use as part of the class, like this blog dedicated to the readings for the Myth-Folklore class; this week, it’s British and Celtic readings, and the video playlist is in the sidebar. It’s a teeny-tiny video, but you can see the Maati Baani video playing there:

screen-shot-2016-11-01-at-11-54-49-am

I really enjoy using embedded videos in this way: in blog posts, in sidebars, and therefore in Canvas too. My students feel the same way, and some of the most popular Tech Tips that I offer in class are for learning how to embed YouTube videos, create a playlist, etc. Embedding and linking: they are the superpowers of the Internet, opening up paths for creative students to explore.

Curiosity: the will to explore.

will

Crossposted at OU Canvas Community.

The Power of Random Cats

I really liked Maha Bali’s post at ProfHacker today: Tips for Effective Online Learning – Community Edition.

I immediately chimed in with a comment about the importance of meta-learning resources for students, both the content that I share with them through the Growth Mindset, Writing Lab, and Learning by H.E.A.R.T. blogs AND the “challenges” that go with them if students want to actively engage with that content.

For this post, I want to write about a Canvas tie-in, which is this: one of the ways I weave the content from those blogs into my classes is through the daily announcements, and I use my announcements blog as my Canvas homepage (details here: About My Canvas Homepage).

So, for example, there is a growth-mindset-cat-of-the-day in each day’s announcements, plus there is a widget in the sidebar of the blog so that there is a new cat at random every time a student passes through the Canvas homepage on their way to record an assignment grade (which is the only thing I use Canvas for).

So, that is the message for today’s “Teaching with Canvas” post: I like being able to have random growth mindset cats to greet my students whenever they arrive. Here’s a screenshot from India.MythFolklore.net — and that course is 100% open (no log-in of any kind), so just click and see what cat you get! 🙂

screen-shot-2016-10-25-at-12-06-40-pm

And here’s that particular cat at home in the Growth Mindset blog:

lotsofrest

Crossposted at OU Canvas Community.

css.php