Media and HTML Examples: A Library/Lab

G_Petruzella
Community Champion
45
9312

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

45 Comments
ahill
Community Novice

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

G_Petruzella
Community Champion

ahill​, glad you find it helpful! 🙂

nick_purdue
Community Novice

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 Smiley Wink.

Canvas Labs

Thanks for sharing!

G_Petruzella
Community Champion

 @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
Instructure Alumni
Instructure Alumni

Awesome! Bookmarked. :smileycheck:

clong
Community Champion

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:

44887_pastedImage_0.png

Stef_retired
Instructure Alumni
Instructure Alumni

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

awilliams
Instructure Alumni
Instructure Alumni

Haha, I was curious about that as well.

G_Petruzella
Community Champion

 @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
Instructure Alumni
Instructure Alumni

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
Instructure Alumni
Instructure Alumni

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
Community Champion

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
Community Novice

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
Community Novice

Thank you for sharing this!

kmeeusen
Community Champion

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
Instructure Alumni
Instructure Alumni

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
Instructure Alumni
Instructure Alumni

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
Community Champion

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
Community Contributor

This is awesome!  Thanks so much for sharing Smiley Happy

G_Petruzella
Community Champion

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

Chris_Hofer
Community Coach
Community Coach

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
Community Explorer

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
Community Coach
Community Coach

 @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
Community Coach
Community Coach

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

biray
Instructure Alumni
Instructure Alumni

 @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. Smiley Happy

How do I share a course to Commons?

How do I share a module to Commons?

How do I share a page to Commons?

Smiley Happy

robin_bartolett
Community Contributor

Gerol continuously rocks.

G_Petruzella
Community Champion

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

G_Petruzella
Community Champion

:smileyblush:

amber_hainline
Community Participant

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

jordan
Instructure Alumni
Instructure Alumni

Hey Gerol!

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

G_Petruzella
Community Champion

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

jordan
Instructure Alumni
Instructure Alumni

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
Community Champion

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
Instructure Alumni
Instructure Alumni

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
Instructure Alumni
Instructure Alumni

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

kmeeusen
Community Champion

You are awesome, Gerol!

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

Kelley

G_Petruzella
Community Champion

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

kpthomps
Community Novice

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
Community Champion

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
Community Champion

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
Community Novice

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
Instructure Alumni
Instructure Alumni

 @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
Community Novice

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
Community Champion

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
Community Champion

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. 🙂