Media and HTML Examples: A Library/Lab

[G_Petruzella]

I maintain a "Lab" course to demo various tools and other cool things as I encounter them. (And to remind myself too. 🙂 I find it's a pretty good place for faculty to browse - and potentially discover something they'll want to try out. The course has two Modules - "Embedded Media" and "Styling Tweaks". Each Page in the Modules has a bit of a description of the topic, the link to the resource (if applicable), and a demo. Feel free to check it out!

Gerol's Lab

[ahill]

This is awesome! Thank you for sharing such a great resource,  @G_Petruzella ​!

[G_Petruzella]

ahill​, glad you find it helpful! 🙂

[nick_purdue]

Thank you for FANTASTIC idea! I hope you don't mind but I made my own version of this form my faculty. I might of borrow some of your ideas .

Canvas Labs

Thanks for sharing!

[G_Petruzella]

 @nick_purdue ​ - glad you found it useful! I don't mind at all - I shared my stuff here with the full intention of letting the community use as they see fit. 🙂

[Stef_retired]

Awesome! Bookmarked. :smileycheck:

[clong]

Great practice  @G_Petruzella ​ there is something there for everyone!

Note: it looks like you may need to adjust your Global CSS for cases when viewers who are not logged in to your instance go to your public courses.  Specifically defining #header.no-user #header-logo attributes should do the trick -- What I see is below:

[Stef_retired]

Silly me, I thought that was intentional supercool design. :smileysilly:

[awilliams]

Haha, I was curious about that as well.

[G_Petruzella]

 @clong ​, haha, thanks! That issue's been spinning around for months at the bottom of my to-do list, which never seems to get quite short enough to do something about it. Now that I'm pointing people at some of our courses, it may have to become a priority! 🙂

[awilliams]

Thanks a lot for that Deactivated user​. This explains a lot and helps those of us who do Instructional Design or assist faculty with course design.

[awilliams]

Hrm, looks like the person and post I responded to got deleted. Odd... Apparently if you tag something and it disappears it gets replaced with "The specified item was not found."

[stephanie_pope]

What great ideas! It's great to have every integration all in one place. Really ideal for a teacher to look through and gain ideas!

[mdevaney]

I haven't had the chance to comment before now, but I love this idea Gerol! Planning to make something similar for our teachers next school year. Thank you for sharing! 

[Wes_Kriesel]

Thank you for sharing this!

[kmeeusen]

Gerol:

I do the same thing, but currently limit it to HTML codes that modify or take advantage of the Canvas Style Guide - like dividing a Canvas page into two or more columns, or adding an editable "Announcements"  box on the right side of a page.

I also council my faculty to not fear the HTML editor. I tell them that I also am not a coder, but I know how to steal other peoples code and make it work - albeit in minimal ways. A few simple examples can go a long ways towards making a Canvas course your own.

[awilliams]

Be wary, the elements from the Canvas style guide do not always transition nicely to mobile. I've been having quite the time creating a nice home page template that scales well for desktop and mobile. I've started transitioning my thinking to designing for mobile first, and then working on making that scale to the desktop. The rationale being that something that looks good on mobile is more likely to also look good on the desktop than vice versa. It's difficult though with the limited HTML we are able to use.

[dlyons]

I love that people are thinking about design and appearance of their content but I want to point out that the Canvas Style Guide is actually for the Canvas interface itself, not content. I'm happy to go into technical details if anyone is interested but the short version is: most of the items in the Canvas Style Guide will not work in the rich-content editor, and the parts that do work aren't guaranteed to continue working because that's not what the Style Guide is actually for.

The other recommendations are rock solid though, so keep up the great work there!

[kmeeusen]

Adam:

You are so right!

My office partner (she is our mobile guru) and I always view content from a variety of mobile devices to test is appropriateness. We have tried a lot of things that look so good on the PC, but that we have to abandon because it is hideous on a cell phone and only slightly better on a tablet.

[hvaughn]

This is awesome!  Thanks so much for sharing

[G_Petruzella]

 @hvaughn ​, my pleasure. Glad you like it!

[Chris_Hofer]

Pretty cool,  @G_Petruzella ​!  I've been working on a "Canvas Resources" course for our faculty (kind of based on this discussion: Adding courses for instructor and student resources in Canvas), and I may have to start another resource course similar to what you've got.  Great stuff you've got in there!

[d18089h]

Thanks for the clarification on the style guide.  It would be great if Instructure would give us the tools in the rich-content editor to easily make content look a bit more modern and dynamic.

[Chris_Hofer]

 @G_Petruzella ​...  for your Timeline JS item in that course, I was able to embed a timeline from that site by adding an "s" to the end of "http", and then I just used <iframe> code.  I had to re-size the area after I saved the page for the first time, but it does embed in a Canvas page, and it looks pretty nice!  (I just used an example timeline provided on their site.)

EDIT: Well, I take that back...sort of.  It works on some sites, but not others.

[Chris_Hofer]

Needed to modify my response.  The steps I outlined work for this example, but not for others: Revolutionary User Interfaces

[biray]

 @G_Petruzella ​ what a great resource! Have you considered sharing this to Commons public? It will make it very easy for others to import these example pages into their courses without having to cut/paste.

How do I share a course to Commons?​

How do I share a module to Commons?​

How do I share a page to Commons?​

[robin_bartolett]

Gerol continuously rocks.

[G_Petruzella]

 @biray ​, I will absolutely be adding this to be part of the #Commons1000 🙂 .

[G_Petruzella]

:smileyblush:

[amber_hainline]

This. is. fabulous! Thank you for sharing it!

[jordan]

Hey Gerol!

I was searching Commons, but could not find this course.  Have you had a chance to share it publicly, yet?

[G_Petruzella]

Hi Deactivated user​ - Done! It's called "Media and HTML Library/Lab". 🙂

[jordan]

Hey Gerol, I just found the course! If only we could link to it 😉 hehe  It looks awesome!

A couple other thoughts I had for you Gerol,

1. You should make a note in your OP stating how your course can be found on Commons!
2. You should also add your this discussion/your course to this Course Design Resource Index (Collaboration).​ Feel free to break them down individually, and in the description, you could reference the tool, something like this Example.

[G_Petruzella]

Thanks Deactivated user​! I'll keep pecking at this. Also, now that you've pointed me at the Collaboration, I think I can come up with some more neat stuff to add there. 😄

[jordan]

I knew you would, Gerol! I think you bring extra value to that collaboration b/c you can point to an examples of what these tools actually look like in Canvas! Brilliant work!

[awilliams]

Sweet, now we just need Canvas Commons pull requests so I can add stuff and let Gerol merge it into the original.

[kmeeusen]

You are awesome, Gerol!

This is the second classroom you have provided access to, and we sure appreciate it.

Kelley

[G_Petruzella]

 @kmeeusen ​, my pleasure! I know that sharing it to this community means it'll get used in a ton of different ways. 🙂

[kpthomps]

David, thanks for your clarification on the intent of the style guide​. It would be helpful if Instructure would clarify that as well. You offered to go into some technical details... could you share your thoughts on how you would create a grid structure (i.e. for laying out a more graphical table of contents for the home page of a course?) 

While tables can create a basic grid structure they don't have the same responsive qualities that a good grid framework would (like FlexBox or Bootstrap).  Thank you!

[G_Petruzella]

HI  @kpthomps ​ - a couple of people have shared thoughts on responsive design... you might check out  @clong ​'s Home Sweet Homepages Without Tables​ to see if it's got something helpful. My own approach to avoiding tables mostly rests on using floating <div>s with % widths (Columns Without Tables) - not as robust as a Bootstrap framework, but accessible for many faculty users.

[kmeeusen]

Gerol:

While not yet as talented as you (if ever), I am also finding that floating <div> set to a percentage of space is much more effective, and scalable to monitor size.

KLM

[khurma_1]

Thanks for sharing all the great examples of HTML widgets and tools being embedded in Canvas. I have found this post and the Course Design Resource Index (Collaboration). very helpful.

On a related note, a colleague shared with me this visually engaging course: Course Home Page: [SMPL-019] American History​ from Mizzou Online K-12 and we are curious to know what tools if any are being used to develop the HTML and add the extra navigation elements like the ones on this page: Getting Started: [SMPL-019] American History. I'm going to follow-up with Mizzou directly but was curious if anyone had any ideas.

Thanks,

Anand

[Stef_retired]

 @khurma_1 , I remember evaluating that sample course, and IIRC, MIzzou created that piece of content outside of Canvas and hosts it on their own server; they then embed it in the course by harvesting the URL from the server and dropping it into an iframe That way, they can update the content in a single place and have it populate every course home page that uses it. In fact, that little piece of verbiage at the top is my addition:

[...Changes to any embedded content must be done externally to Canvas, from where the original source resides. If you plan on using this course as a template, you must delete the iFrame and add your own information below.]

[khurma_1]

Thanks Stefanie! That probably explains some of the scary server side code that shows up in the source. So most likely the pages are designed using some code snippets. I know now to use "code snippets" in my searches for neat things to embed in Canvas. Reading this resources was also helpful: Home Sweet Homepages without Tables

[GideonWilliams]

This is a superb idea and should be getting even more attention that it does. Really important that a VLE enables and embeds the use of other (Web2) resources. Fantastic work, thanks for sharing and inspiring.

[G_Petruzella]

Thanks  @GideonWilliams ​! By the way, there's an updated version of this resource in the works at the moment, so in case you're thinking about using it for faculty development purposes, if you can wait a month or so, it might be worthwhile. 🙂