Monthly Archives: January 2012

Avatar photo

Use EmbedPlus to Customize and Annotate Video Embeds

The most recent issue of Technology and Learning: Ideas and Tools for Ed Tech Leaders (January 2012) includes a wonderful list of their top one-hundred education websites for the classroom and beyond. While many of them are really intended for the K–12 audience, this list provides a few tools that could be of interest to instructors in Higher Ed. One in particular, a tool called EmbedPlus, seems particularly promising.

This free tool allows the user (with only the YouTube URL) to use the wizard to enhance the YouTube video by doing things like marking chapters, cropping videos, and providing the ability to view the video in slow motion.

A couple of the features that I see having real potential include the ability to annotate the video. See the example below:

Students or instructors can use this feature to provide commentary to videos. In the example above the annotated video could be embedded as the prompt in the discussion area of D2L and students could be asked to watch the video and respond to the questions posed in the video. Students could use this feature to annotate video examples demonstrating course concepts—for example the use of light in a film clip.

Another great feature is the ability to get “real-time reactions” on videos. For videos of current events and breaking news, these reactions can be used to stimulate conversation in classes. The “real-time reactions” currently come from Twitter feeds and YouTube comments. Take a look at an example from the Presidential primaries. To see the comments click on the Read icon in the bottom right-hand corner to see the comments.

I encourage folks to explore this site and see what applications you can think of. I believe this website fills a current void in the market allowing users to easily edit and share video. My hope is that more of these tools become available for other video sources (think TED videos) and that commercial providers of streaming content think about adding similar abilities to their own tool sets.

Avatar photo

Arm Yourself with Basic HTML Knowledge

I started working in the FITS department (then called Instructional Design and Development) at DePaul as a graduate assistant, and a large percentage of my duties at the time involved moving instructor-created content from a word-processing document into the learning management system–basically, a lot of copying and pasting. But it wasn’t as easy as it sounds. Simply copying text from Microsoft Word and pasting it into Blackboard or Desire2Learn often produces strange text formatting.

These are just a few of the text formatting problems I’ve seen:

  • huge spaces between words
  • abnormally small or large text
  • seemingly random switches between serif and sans-serif fonts
  • long strings of strange xml code that are visible to students.

Other times, of course, it copies exactly as you would expect it to. In short, when you copy from a word processor into a web form, it’s very difficult to predict, even for someone who’s been at this for as long as I have, exactly what you’re going to get.

At DePaul, we have a number of instructors who are tech literate enough to want to build content for their online courses themselves but don’t know what to do when these formatting errors occur, becoming understandably frustrated.

Almost everyone is more comfortable composing their text in a word processor rather than directly in a Web interface. And I wonder if it’s time for that to change. How much of the text we produce today is going to be consumed on paper, and how much of it is going to be consumed on a screen? Should we still be teaching our students to write in a word processor, when these compatibility issues persist with Web-based writing? Should we become just as comfortable writing in the web editor as we are in the word processor?

In a perfect world, word processors would copy perfectly clean HTML into the text boxes of whatever web form they’re pasted into. But until we have a word processor from that perfect world, the brave instructor might benefit from knowing some basic HTML.

I’m not going to go through all the HTML that goes into making a website—there are great comprehensive guides elsewhere for that already. Rather, I’m going to go through some basic HTML tags that allow you to format text when you’re working in something like a learning management system.

But before I delve in, you might ask how you access the HTML for whatever you’re working on? It varies depending on what you’re working in, but in Desire2Learn, you’ll see an “Edit HTML Source” button in the lower left corner.

HTML is made up of tags, which are recognizable because they are inside angle brackets, like this: <p>. Most tags have an opening and a closing, with the content for the tag in the middle. For example <p> is placed at the start of a block of text to identify it as a normal paragraph, and </p> is placed at the end to “close” the paragraph.

These are the basic tags your content might use:

  • <p>…</p> – Paragraph
  • <h1>…</h1> – Main (page) heading
  • <h2>…</h2> – Subheading
  • <h3>…</h3> – Sub-subheading
  • <ul>…</ul> – Unordered list (bullet points)
  • <ol>…<ol> – Ordered (numbered) list
  • <li>…</li> – List item (used for each bullet or numbered item in a list. These should be nested inside a ul or ol tag.)
  • <strong>…</strong> – Bold
  • <em>…</em> – Italics
  • <a href=”[web address of link]”>text of link</a> – a link
  • <img src=”[web address of image]” /> – Image

This is an example of what clean HTML looks like, as viewed from the “View Source” button in Desire2Learn. Beneath that is an image of what actually displays when students see it. See if you can look back and forth between them and, based on the tags above, understand how the tags in the top image are producing the formatting in the bottom.

code
Click for full size

For working in a learning management system, the tags above are really all you should need. If you see any other code in the body of your html source, that’s probably what’s causing your text formatting problems. Here are some examples of things you might see that will cause formatting problems.

  • <span> – These are often created when you copy from a word processor to a web text box as the system tries to preserve exact formatting, but usually do more harm than good. Make sure you delete both the opening and closing tag.
  • &nbsp; – This isn’t an HTML tag per se. Rather, it’s displayed as an extra space. If your text is showing extra spaces, look for some of these in the body of your HTML source.
  • <font face=”font” size=”number”> – Font tags can change the font face or font size. Make sure you delete both the opening and closing tag.

Working in HTML source isn’t for everyone and certainly not every instructor, but it is a little empowering to know exactly how your web text editor of choice—not even just in Desire2Learn— functions, and be able to go into the guts of the code and manually fix that which the system broke for you.

HTML is the language in which full websites are designed, so this is obviously just the basics. But if you want to learn more HTML, there are a lot of great resources out there, the most widely recommended for beginners being w3schools.com. Maybe this will be your entry point into the wide world of making websites.

Reliving History, 140 Characters at a Time

In her October post, Emily Stone talked about using Twitter as a way to engage with her students. It allowed her to create a conversation and foster a community of sharing. These types of interactions are really Twitter’s bread-and-butter. But I’m more of a passive Twitter user. My last tweet was January 31, 2010: “really dropped the ball on this 3-d glasses thing.” (Apparently the Super Bowl halftime show that year included a 3-D component. Unfortunately I didn’t have the glasses. I cannot tell you if the show was good or not.) So don’t follow me. I won’t tweet anything. I just don’t find that I have anything really useful to say, and I’m uncomfortable “broadcasting” my thoughts. But I do log in to Twitter every day. Instead of sharing, though, I use it as another form of information gathering. I have subscribed to several feeds related to my field of study (Human-Computer Interaction/User Experience). I find it incredibly efficient and much less daunting than the 1000+ unread articles in my Google Reader, where I used to try and read articles. I think Twitter has incredible value for others who are more like me. For teachers who may not quite be ready to tweet their assignments, they too can incorporate Twitter in a passive way. Aside from subscribing to tweets related to their field to help stay current, teachers could simply point students toward some of the more engaging Twitter feeds. I found several examples re-creating historical events through “live-tweeting” (or rather the simulation of live-tweeting), which is simply Twitter’s way of reporting on key events as they happen.

Here’s a round-up of some of the more interesting historical Twitter feeds:

World War 2. Each day they tweet about things that happened on that day in 1939. It will continue for the same duration as the war: @RealTimeWWII

Extensive Civil War tweeting curated by the Washington Post. It has some live-tweeting and some quotes from famous people: @CivilWarwp/tweeting-the-civil-war

Live-tweeting the final expedition (1911) of polar explorer Robert F. Scott: @CaptainRFScott

Live-tweeting JFK’s presidency (run by the JFK Library: @JFK1962

Another WW2 live-tweet, using documents from the British National Archive and letters and memos from the UK war cabinet. This feed isn’t very accessible, though, as it just tweets links to where you can download the document in question but it is kind of a hassle to do so, especially if you are accessing Twitter on the go: @ukwarcabinet

Live-tweeting 1948 Arab-Israeli War—it’s from the Israeli point of view: @1948War

These could easily be turned into writing assignments. TwHistory helps teachers create assignments in which their students live-tweets historical events. I’m not sure how much traction this has, but it’s definitely interesting adoption of technology into education.

And for creative-writing teachers, I think one could also make the case for tweets becoming the next haiku. The 140-character limit for tweets is perfect for providing structure much in the same way as the haiku’s 5-7-5 syllabic construction.

There are also accounts that tweet out facts or tips each day. For example, someone named John Cook maintains several Twitter accounts that tweet math- and computer-science-related facts and tips, and @writing_tips posts daily writing tips. Who doesn’t need a reminder on some basic grammar every now and again?

At best I think these Twitter feeds could enhance students understanding by incorporating a technology that they use every day into their learning. At worst, they are just entertaining. And for right now, I’m really happy to be entertained by the World War II tweets. I’ve got six years to go!