Canvas-Friendly Javascripts

Here’s the Canvas-Friendly Javascripts Slidedeck for the CanvasLIVE presentation with the video of the session and notes on the slides below:

This is the video:

Slide 1. Welcome.

Slide 2. Title slide.

Slide 3. Connected Learning… with Cats.
You can see all the Connected Learning with Cats events here.

Slide 4. Connected Learning and Chance Encounters.
The theme I want to emphasize here is content serendipity, as opposed to content mastery. Especially in Gen. Ed. Humanities courses, like the ones I teach, mastery and coverage are not really the goals. Instead, for me, the goal is to get each student connected to something in the realm of reading and writing that they really care about, something that excites them, something that inspires them. That might be different for each student, and it might require sifting through massive quantities of content. By using the power of daily content and random content, you can expose students to a lot of content, and maximize the chances that something will click.

Slide 5. Javascript Randomizers.
I use javascript randomizers in all my class blogs (especially the sidebars) and at my class wiki. It means students see new content each time they return to a page, and the randomness is fun and unpredictable. Most importantly, randomness is a way to surface lots of content. If you have lots of links or images you want to share with students, displaying them all at once is not effective, but displaying something at random means that, over time, students will see all the content, a little bit at a time.

Slide 6. The Fates Say…
The first javascript I ever used was a little randomizer that I wrote myself by hand way back in 2002. This was the first semester I taught online, and my students were choosing between two units to read each week. I offered them a link that say “Let the Fates decide…” and then a message popped up at random with “The Fates say…” (and then a 50-50 chance of one unit or the other). Students loved it! They sometimes would write in their blog, “I chose Ovid because the Fates said Ovid three times in a row.”

Slide 7. Creating Your Own Javascripts.
Because of the success of that randomizer, I knew I wanted to use lots of randomizers, but I did not know any programming and did not have time to learn. So, I hired a genius student, Randy Hoyt, to build a tool for me that would take the content I supplied and turn it into a javascript, either date-based (“___ of the Day” for example) or at random. He created that tool back in 2003, and he is still hosting it online for free at his website: RotateContent.com. Thank you, Randy! (And in addition to being a genius programmer, he also designs board games: Foxtrot Games.) You can show Randy some love at Twitter.

Slide 8. Javascripts and Canvas. 
Using javascripts in blogs and webpages is easy, but Canvas does not let you just paste a javascript into a Page. There is a workaround, though: you just need to create an HTML page in an https webspace which contains the javascript, and then you can use an iframe to display the HTML page in a Canvas Page, in the Syllabus, in a Discussion Board, etc. etc. This technique works for Rotate Content scripts and also for Twitter javascripts widgets; see my Twitter4Canvas Workshop for details. You can also do this with javascript widgets from Flickr and from Pinterest.

Slide 9. Laura’s Widget Warehouse.
But don’t let all of that scare you: I’ve already created some ready-to-use Canvas widgets where you can just copy-and-paste the iframe from my Canvas space into yours. They are all in the Widget Warehouse, and you can also just browse the raw content and use that too if you want.

Slide 10. Agenda for this Presentation.
So, I’ll be covering those three topics in more detail: in Part 1 I’ll discuss the different types of javascripts you can create with Rotate Content, then in Part 2 I’ll show some of the ready-to-use Canvas scripts in my Widget Warehouse, and finally in Part 3 I’ll walk through the steps you can follow to create your own scripts with Rotate Content and use them in Canvas.

Slide 11. Part 1: Rotate Content Scripts.
The Rotate Content tool takes an HTML table that you prepare and converts it to a javascript. I’ll discuss the types of content that you can put into the table and then the types of scripts that it will generate.

Slide 12. Types of HTML Content.
You can basically put ANY kind of HTML content in the table. That can be simple text and links (example), images (example), embedded video (example), or even other scripts (example: this page calls a script at random from among all the scripts in the Warehouse). The key thing to remember is that everything must be https, and that includes images you might be using.

Slide 13. Rotate Perpetual Date.
In addition to displaying a range of content, you can configure the script in different ways. There are two kinds of date-based scripts: perpetual and specific. You use a perpetual calendar to create content that will recur year to year based solely on the date. For example, the Latin LOLCat Calendar has 366 items (Leap Year!), with a new cat for each date.

Slide 14. Rotate Specific Date.
You can also create content that you use for a specific range of dates in a specific year. That is how my semester countdown widget works; I change the dates for this one every semester.

Slide 15. Rotate Random.
This is what I use most often: the totally random javascript. In this HTML table, there is no date column; just the word “random” in the cell for each row. You can make randomizers with just two items or with hundreds of items. My Freebookapalooza widget has hundreds of items for example.

Slide 16. Rotate Date-Based AND Random.
Randy also built in a very nice feature so that if you do have a date-based widget, you can use that same content randomly. To do that, you just change a variable in the script call; the script itself is the same. You can compare the two different ways of displaying the Elizabethan Proverbs widget here: date-based and random.

Slide 17. Part 2: Laura’s Widget Warehouse.
Each page in the Widget Warehouse contains a link where you can find the script and the iframe version you need in Canvas, along with a link to the raw HTML table so that you can browse and re-use the source material directly if you want.
Slide 18. Random Motivation.
Slide 19. Random Humor.
Slide 20. Random Resources.
Slide 21. Random Art Images.
Slide 22. Random Student Work.

Slide 23. Part 3: Creating Your Own Scripts.
To create your own scripts you need to feel comfortable editing HTML, either with an HTML editor or editing by hand (I usually create my tables using a Google Sheet; it’s faster than editing a table). You also need your own https space. I am very lucky that my school has a Domain of One’s Own project with Reclaim Hosting, and I cannot say enough good things about the people at Reclaim. Even if your school does not offer web hosting, you can get excellent individual hosting. They really know how to work with and support educators!

Slide 24. 6-Step Canvas Widgets.
This is just a quick overview of the process of creating javascripts using the Rotate Content tool. You will find detailed instructions at the Rotate Content site for Steps 1-2-3-4. The two additional steps are required to get the javascript to work in Canvas. Please feel free to contact me with any questions you have about this, and based on people’s feedback I can create some more specific tutorials if you want.
Slide 25. Generate HTML table.
Slide 26. Enter content in table.
Slide 27. Convert table to script.
Slide 28. Publish the javascript.
Slide 29. Create and publish HTML script page.
Slide 30. Use iframe in Canvas.

Slide 31. Presentation Recap.
Please go browse the Widget Warehouse and see what you think. Maybe you will find some scripts there you want to use, or even just some content that is useful to you. And if you get some ideas for scripts of your own, you can use Rotate Content to create your own scripts. Maybe you will want to build a Widget Warehouse of your own to share your scripts with others too!

Slide 32. Let’s connect! Please feel free to contact me with any questions, ideas, or suggestions. 🙂

css.php