For Your Reading Pleasure: EasyCaptions

Introducing EasyCaptions: A simple system for adding captions and an interactive transcript to online videos. EasyCaptions uses progressive enhancement to provide the best possible experience for all visitors, regardless of their browser’s JavaScript, HTML5 or Flash support.
Demonstration

Background

I don’t produce much video these days, but as a web surfer I often encounter other people’s videos, and was recently impressed by two video implementations: a TED Talks video page, and an HTML5 video demo produced by Bruce Lawson.

The TED Talks page had a great feature I’d never really seen anywhere else: an interactive transcript of the video that you can read and click. For example, you can click the third sentence of the transcript and the video will jump to that point.

Bruce Lawson’s demo illustrated a dead-simple way to add captions to an HTML5 video using just a wee bit of HTML markup and JavaScript.

Both of these pages shared a unique attribute: they stored complete transcripts of the videos in the markup of the HTML page itself, NOT in an external XML file, as is most commonly seen. What’s the big deal about inline transcripts, you ask? Well, today’s most common captioning options require placing your caption text in an external XML file that loads via ActionScript or JavaScript/AJAX. Both the TED page and Bruce’s demo eschew that approach and place the full transcript in the HTML. This means the transcript is always available to the visitor, regardless of that browser’s support for HTML5, JavaScript or Flash Player.

In both cases, the transcript had been marked up as paragraphs, with extra markup denoting phrases that align with the video’s timecode. The TED site used a tags to mark each phrase, with inline JavaScript triggering the playback of the clicked link. This is functional when JavaScript is enabled, but fails when JavaScript is disabled, leaving you with a ton of bloated markup that doesn’t work:


<p>
<a href="#" class="transcriptLink" onclick="seekVideo(0); return false;">One way to change our genes is to make new ones,</a> 
<a href="#" class="transcriptLink" onclick="seekVideo(2000); return false;">as Craig Venter has so elegantly shown.</a>
</p>

Bruce’s span tags, on the other hand, are semantically sound — a span is a neutral, unobtrusive inline element meant to be a child of a block element such as p. Perfect. But wait, there’s more! Since this was an HTML5 demo, Bruce took advantage of the new data attribute that can be used on just about any HTML element. (The short version is: you can create any custom attribute you want, so long as the name begins with data-.) Bruce decided to create two attributes for each span: data-begin, which indicates (in seconds) when the phrase starts in the video, and data-end, which indicates when that phrase has ended in the video. Simple as can be, and extremely efficient:


<p>
<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein 
and I'm a Dctor of Science at the University of Science</span>
</p>

Enter: EasyCaptions

I was incredibly inspired by these two pages and decided to combine their features, creating a new system I call EasyCaptions. The goal of EasyCaptions is to make it as simple as possible to add useful captions to your online videos. I want to eliminate the headaches of captioning as well as the excuses (too hard, confusing, etc.).

What EasyCaptions does:

  • Dynamically generates a div under your video that will display caption text (the div‘s style and positioning is completely configurable via CSS).
  • Dynamically makes each span in your transcript clickable, jumping to that point in the video. This is done via progressive enhancement and event delegation, leaving your markup clean and avoiding heavy-handed use of onclick.
  • Works out-of-the-box with HTML5.
  • Includes HTML5 video support detection, enabling you to use a Flash-based fallback if you desire.
  • Provides a hook for Flash-based fallback systems, enabling the captions and transcript to behave identically to the HTML5 version.

What you’ll need to do:

  • Type up the transcript of your video, using <span> tags to wrap each phrase, just like Bruce’s example above.
  • Place the transcript in a container element with a unique ID (such as div id="transcript").
  • Add a teeny bit of JavaScript (about 4 lines).

The final product. Successfully tested in Firefox, Safari, Opera, and Internet Explorer (IE and older versions of the other browsers all use a Flash Fallback if provided).

Peruse the test suite to get an idea of how flexible the system is.

The documentation and downloads are located on the EasyCaptions page.

Dear Apple and Adobe

 

Update: Steve Jobs Responds! Well, not to my letter directly, but it hits on the major points and is a well-written explanation of Apple’s position.

Dear Apple and Adobe

I’m a long-time customer and have spent more money on your products than I have on just about any other aspect of my life. I’ve spent more money on your products than I’ve spent on my healthcare, vacations, kitchen appliances, children’s school supplies, or home entertainment system.

In return, you’ve increasingly shown a disregard for my needs and concerns, and have acted in ways that demonstrate all you want from me is my money.

For example, both of you have constantly forced me (or at a minimum pressured me) to buy updates to products I already paid for. For years I went along with it because I bought into the sales hype and assumed these updates would somehow make my life better.  In most cases, they did not.

Adobe, your constant tinkering with the Creative Suite has brought a few nifty tools to the world, but these new tools will not get me to overlook the incredible bloat you’ve unleashed on my computers — almost 6GB of program files on my Windows PC at work, and over 7GB of app files on my Mac at home. Your applications feel more unstable with every release, and your UI feels slow and unresponsive despite the extra RAM and other hardware upgrades on my machines. Some of the biggest security holes on my computers are due to your Acrobat software — the very same Acrobat software I’ve learned to hate because of how bloated, complicated, and unfriendly it has become. It feels like it gets worse with each release.

Apple, your innovation is refreshing. Adobe could learn a thing or two by examining your software: increased productivity through reduced feature sets and cleaner UI. Simple is usually best. However, despite your continued excellence in design, your behavior is repulsive. You’ve consistently screwed your early adoptors via your pricing schemes and forced millions of Americans to use a phone network they detest. (Why? Because AT&T was willing to give you a bigger cut of the revenue?) Worst of all, the totalitarianism displayed in your latest iPhone developer agreement is breathtaking. It appears your goal is to piss off everyone, even your staunchest allies… like Adobe.

Apple and Adobe, you used to play well together. You both benefited from your long-term relationship and grew into very large, very successful companies. I sincerely doubt either of you would have survived the 1990s intact if it weren’t for your partnership. Desktop publishing was the Mac’s forte and the one thing that kept it afloat when the buzzards were circling. And who provided the most popular DTP software? Adobe (and the companies Adobe acquired, like Aldus and Macromedia).

Adobe, I know you’re mad because Apple won’t let you put your Flash technology on the new iPhone platform (iPhone, iPod, iPad). Honestly, if I were controlling a platform, I would have major concerns, too. As I mentioned earlier, your track record for software quality seems to be in a steady decline. Your products have become infamous for security holes, bloat, and crashing. It didn’t used to be that way. Somewhere along the line you dropped the ball, and now it’s coming back to bite you. The good news is that it isn’t too late for you to reign things in and regain control of your software. Stop trying to please everyone by adding every conceivable feature under the sun, and really focus on the most important elements. Drop the cruft. Clean the cupboards. Get that lint out of your bellybutton. Once your software is respectable again, you’ll be in a much stronger position to complain about Apple.

Apple, I don’t know what happened to you. You went from being a popular underdog to being the class bully. You’re in danger of becoming as popular as Microsoft in the European court system. From where I sit, your biggest mistake has been the idea that you can take over the world, one industry at a time. Of course, many companies are aggressive and set big goals for themselves, but they don’t stab their partners in the back as quickly and viciously as you seem to do. Your hubris and eagerness to expand into your partners’ markets is going to be your downfall. People have liked you because of your design sensibilities and because you were the hip underdog. You are no longer the hip underdog, and with time, other companies will create products that will be (almost) as stylish but also cheaper and with equivalent or greater capabilities.

The bottom line is that neither of you are choir boys, and I’m fed up with your bickering.

Adobe, stop playing the sympathy card. It’s a complete turn-off because I know how crappy your software can be. Granted, it’s unfortunate that so many people depend on Flash and Flash doesn’t work on the iPhone platform, but Flash is not a web standard. For all its shortcomings, the iPhone platform has one excellent quality: a top-notch HTML5 browser. Standardistas have been warning people not to go all-in with Flash for years, and now we see why. If it isn’t part of a standard, it will not be incorporated into some products. It’s the vendor’s choice. Simple as that.

Apple, stop trying to take over the world. We’ve seen what happens to other companies who try it, and it never looks pretty. Focus on your core values and let your partners do their thing without stepping on their toes.

Oh, and ditch AT&T already, will ya?

Respectfully,

Philip

HTML5 Video, minus Ogg

As you’ve probably read somewhere on the interwebs, HTML5 is bringing native video support to browsers. This will enable us to embed a video file directly in our HTML, much like a SWF or image.

Background

You may have also heard that there’s currently a big controversy over what kind of video files will be supported. The defacto standard is MP4/H.264, which is used by Adobe in their Flash video format, and by huge media sites like YouTube. Mozilla, the makers of Firefox, refuse to support the MP4/H.264 standard because it isn’t open-source and free from licensing constraints.

Turns out H.264 is not public domain. Although the company that owns the H.264 patent has temporarily agreed to waive royalty fees for the next decade or so, they reserve the right to charge fees later on. Mozilla says no way, we will only support a video format that is free from licensing issues and has no patent holders (because patent holders can decide to sue some day). Mozilla supports the completely free/open-source Ogg format.

Apple and Adobe, already knee-deep in MP4/H.264 with their Quicktime and Flash video products, vow to press on with H.264.  Google also supports H.264 because YouTube relies on it, and because Google’s new Chrome browser is based on the WebKit project, which has Apple as a main code contributor. In case you haven’t noticed, Apple, Adobe and Google have pretty much cornered the internet video market the past few years, so if they’re throwing their support behind H.264, you can count on it being around for a while. Not to mention that many mobile devices, including the iPhone and most Android phones, have hardware that is designed specifically to support H.264 video, enabling smoother playback and less battery drain than non-dedicated hardware.

(For what it’s worth, Opera is in agreement with Mozilla and supports Ogg. However, not many people seem to pay attention to Opera these days, so they don’t appear to have much influence in this race. Microsoft has endorsed H.264 with it’s upcoming IE9 browser, but it won’t be available for some time.)

The problem

Firefox and Opera are essentially forcing websites to offer two versions of each video: an Ogg version and an MP4 version. In my opinion — and the opinion of many others — this simply will not do. Providing two different video files is not realistic, Ogg’s quality is inferior to H.264, and many computers and mobile devices have direct hardware support for H.264 but not Ogg. In reality, without MP4 support, HTML5 video is rendered useless for most site developers in Firefox and Opera.

The most logical workaround is to code <video> elements to work for MP4 and have a Flash Player-based fallback for older browsers and browsers that only support Ogg. Since the <video> element is designed to allow for fallback content, just like the <object> element, we can do this:


<video id="myvideo" width="480" height="360" controls>
    <source src="/video/file.m4v" type="video/mp4"></source>
    <object data="flash-video-player.swf" type="application/x-shockwave-flash" width="480" height="360">  
        <param value="flash-video-player.swf" name="movie"/>  
        <param value="file=/video/file.m4v" name="flashvars"/>
    </object>
</video>

This works fine in Safari, Chrome, Internet Explorer and older versions of Firefox and Opera that don’t support the <video> element. However, Firefox 3.6 and Opera 10.5 do something very irritating: even though they KNOW their <video> doesn’t support “video/MP4”, they load the <video> element anyway. Which is … like … OMG so duh … because the video can’t possibly play!

If the <video> element is loaded, Firefox and Opera will never load the fallback <object> containing the Flash-based fallback.

Because this behavior cannot be fixed with markup, we’re forced find a scripted workaround (notice that we haven’t used a single bit of JavaScript yet). Thankfully, there’s a pretty straightforward solution: Delete the <video> element in Firefox and Opera.

A Solution

Here’s a simple script that will detect whether HTML 5 video is supported, and if it is, will check to see if MP4 is supported. If HTML5 video is supported but MP4 is NOT supported, the script deletes the specified <video> element but leaves the Flash fallback in its place.


var detectVideoSupport = function (){
    var detect = document.createElement('video') || false;
    this.html5 = detect && typeof detect.canPlayType !== "undefined";
    this.mp4 = this.html5 && (detect.canPlayType("video/mp4") === "maybe" || detect.canPlayType("video/mp4") === "probably");
    this.ogg = this.html5 && (detect.canPlayType("video/ogg") === "maybe" || detect.canPlayType("video/ogg") === "probably");
    return this;
};

var replaceVideoWithObject = function (video_id){    
    if(!video_id){ return false; }
    var video = document.getElementById(video_id);
    if(video){
        var obj = video.getElementsByTagName("object")[0];
        if(obj){
            var obj_copy = obj.cloneNode(true);
            video.parentNode.insertBefore(obj_copy, video);
            video.parentNode.removeChild(video);
        }
    }
};

window.onload = function (){
    var video = detectVideoSupport();
    //Both Opera and Firefox support OGG but lack MP4 support
    if(video.ogg && !video.mp4){
        replaceVideoWithObject("myvideo");
    }
};
</script>

Functioning demo.

A few notes

Tested successfully in:

  • Windows XP: Firefox 3.0, Firefox 3.5.8, Internet Explorer 6, Internet Explorer 8, Google Chrome 4.1.2
  • Windows Vista: Internet Explorer 7
  • Mac OS X (10.6): Firefox 3.6, Safari 4.01, Chrome 5 (beta), Opera 10.1, Opera 10.5b

(Note: IE6, IE7 & IE8 give an unexplained “object required” error in the demo page, but everything works fine. I will investigate as time permits.)

This demo uses the JW Media Player as the Flash fallback video player, but you can use any Flash-based video player on your page.

This demo doesn’t do any Flash Player version detection to ensure the visitor has a supported version of Flash Player. If you need to add Flash Player version detection, you can use SWFObject to embed your Flash file.

Update April 3, 2010: This post was updated to add Opera 10.5 to the list of non-behaving browsers and remove Firefox user agent sniffing.

Introducing LearnSWFObject.com

I’m happy to introduce you to my latest project, LearnSWFObject.com

It’s been many, many months in the making, and has rudely been put aside a number of times when my life left me no free time to work on it. Happily, I’ve been able to push through the last remaining barriers and get the site out the door. Hopefully someone will find it useful.

I’ve ported my most popular SWFObject tutorials and examples to the new site — updated, of course — and have added a few new tutorials, too. As part of the housecleaning effort, I’ve removed all SWFObject examples and tutorials from pipwerks.com. 301 redirects will re-route the most popular posts to their LearnSWFObject.com equivalent, but the odds and ends have been sent to the compost heap.

I’m most excited about the brand-new code generator (written from scratch) that will write your SWFObject embed code for you. Some notes about the generator:

  • It can write HTML 5, HTML 4 (transitional/strict), and XHTML 1 (transitional/strict) doctypes
  • It provides code for both types of SWFObject embeds: dynamic (JavaScript) and static (markup)
  • It includes a download link that lets you save your generated markup in an HTML file
  • The static publishing option includes an option for a nice, shorter syntax
  • The generator uses progressive enhancement techniques, meaning it’s nicer with JavaScript enabled but fully functional without it

Give it a try!

LearnSWFObject.com will remain a work in progress, as SWFObject itself continues to evolve and people find news ways to break use it in their sites. I will continue to play with the formatting and layout from time to time.

In other SWFObject news, I think I’m allowed to report that SWFObject 2.3 is in the works, and will contain mostly bug fixes and an enhancement or two. Bug reports and feature requests are always welcome at SWFObject’s Google Code site. If you have questions about how to use SWFObject that aren’t answered by the LearnSWFObject.com tutorials, please post them on the SWFObject Google Group.

Adobe E-Learning Products “Sneak Peeks”

Today’s Adobe Summit had a session named “Sneak Peeks.” It was (unofficially I think) mentioned that the Adobe E-Learning Suite is coming, and will include Captivate 4, Flash, Photoshop, Acrobat Professional, Device Central, and more.

Here’s a quick list of topics covered.

Versions of Dreamweaver and Flash in E-Learning Suite will NOT be same as those in CS4 suites, and will include e-learning specific bits.

No date for E-Learning Suite given; will only say 2009.

Captivate 4 will include:

  • Automatic panning that follow your screen actions.
  • Previewing in Device Central
    • Allows you to preview on an actual mobile device
    • Allows you to preview with fake screen reflections
  • Inline text editing for captions (no more dialog boxes)
  • Basic drawing tools (shapes)
  • Integration with Adobe Bridge
  • Import > Photoshop files (PSD)
    • Can flatten layers or choose to have them import to separate layers
    • Converts each layer to hi-res PNG
    • Allow syou to animate layers individually on a single slide
  • Support for custom variables, such as using a person’s first name throughout the course
    • Uses $$variablename$$ syntax
    • Means you can use custom static variables throughout a course
    • You can customize an external RDL file to templatize variable use; means you can instruct Captivate to automatically insert variables when recording a demo without having to manually edit the recording afterwards
  • Support for Flash widgets
    • Will work much like components in Flash Professional
    • Captivate 4 will ship with many widgets (including source FLA)
    • Widgets can be customized, and users can create own from scratch
    • Can talk to Captivate (including quizzes) and retrieve variables
    • Example: certificate widget can display person’s name, score for course, date, etc.
    • Example: “perpetual buttons” widget that customizes navigation (forward/back) for movie; hides “back” biutton when on first slide, hide “next” button when on last slide
    • Captivate Exchange on Adobe site will be available for users to post and download custom widgets
  • Support for multiple actions on a single slide
  • Support for ActionScript 3 (can publish to AS2 or AS3 depending on user settings)
  • Can create image slideshow
  • Ability to show/hide toolbar during a course without using customizations
  • Captivate 4 will be on Windows, but work will soon begin on a Mac version
  • Can publish directly to PDF (embeds SWF into new PDF file)
  • Single-SWF output (all files are embedded into single SWF, including nav and full-motion recordings)
  • Auto-generation of Table of Contents (embedded into SWF)
  • SWFs are searchable (text caption content is searchable)
  • “Aggregator” feature allows you to add external Captivate SWFs to project (package multiple SWFs together… is a SWF that loads other SWFs)
  • Supports Flash Player 7, 8, 9 & 10
  • “Reviewer” feature allows users without Captivate to comment on a Captivate SWF
    • Uses Adobe AIR
    • Synchronizes comments form multiple reviewers
  • Supports placeholders to demonstrate where content will be, such as an FLV that isn’t available yet.
    • Helpful when using Reviewer feature so others can know what you have planned
    • Placeholders make it easy to insert content when it becomes available
  • Improved Support for PowerPoint imports
    • Support for dynamic link to PowerPoint presentation — if PowerPoint file is updated, changes wil be reflected in Captivate file
    • Makes PPT file a smart object; you can open and edit PPT file via Captivate (just like how smart vector objects in Photoshop open in Illustrator)

FlashCamp and Flash CS4

I attended FlashCamp this weekend (except Sunday) at Adobe’s San Francisco offices. It was really cool of Adobe to create a free event filled with tons of goodies, great food (including free beer), free massages(!) and even free licenses for Flash CS4! I admit I think I ate too many cookies and rice krispie treats… I couldn’t resist. (FYI Gordon Biersch’s Marzen lager doesn’t go very well with rice krispie treats.)

Everyone seemed to have a great time. It was a nice mix of people; I thought I’d feel very out-of-my-league, but there were all kinds of people there, including regular Joes like me, many designer/developer industry-types, and lots of Adobe peeps, including key members of the Flash authoring and Flash Player product teams. Even ran into Geoff from SWFObject/YouTube. Kudos to Dom Sagolla for putting it all together; apparently they whipped the whole thing together in about 2 weeks, which is pretty amazing considering the turnout and number of goodies provided.

As for Flash CS4 (aka Flash Professional 10), it definitely has some major enhancements worth checking out. Most of the advancements are designer-oriented (as opposed to coder/developer-oriented), but they touch on AS3, too. I didn’t take notes and can’t tell you about every new feature (I doubt I heard about all of them), but here are my favorites based on what I saw in the live demos: the Bones tool (WAY cool), the changes to working with tweening in the timeline (also WAY cool and a huge improvement), and most importantly (and probably most controversial or overlooked): the CS4 interface itself. It takes a while to get used to, but I really like it, especially on a Mac. I wasn’t enjoying all those floating windows in earlier versions of Flash Professional… I prefer docked panels like those available in CS4. (I believe docking can be toggled off if you don’t like it.)

Flash Player 10 was also demoed, and it looks good, except for a few security changes that make great sense but may also break sites (again).

We were told Flash CS4 would be shipping very soon (a week maybe?); I assume they’ll have demo versions online around that time. I strongly suggest downloading it and trying it out, it’s pretty cool.

Oh, one thing that hasn’t changed: the ActionScript editor. Still bare-bones with no new features that I know of.

Most telling part of the experience? Dom was trying to partner up people for the hackathon projects. One particular guy was interested in working with Flash Lite (used for mobile devices) and was looking for people to work with. Dom asked the crowd — probably over 100 people — if anyone in the house had experience with Flash Lite. Not a single person raised their hands. Mind you, people raised their hands for all kinds of other stuff, ranging from writing AS3 classes to PixelBender to Subversion to graphic design, but no Flash Lite. Hmm…

In closing I think it’s safe to say this event raised my opinion on Flash and the direction(s) Adobe is heading with it. When you read blog entries or news articles about Flash, it really doesn’t give you a great sense of what’s going on, but when you hear from the employees themselves, things are much more exciting than I realized, and it sounds like some pretty interesting (and still undisclosed) features are in the works for Flash 11 (or CS5, whatever they choose to call it).

More SWFObject 2.0 examples

I just posted a few more SWFObject 2.0 examples:

  • Plain-vanilla SWF embedding using SWFObject 2.0
  • Using SWFObject 2.0 with ExternalInterface
  • Determining whether a SWF was successfully embedded (returning a boolean in JavaScript)
  • Using SWFObject with an ‘onclick’ event

Update: The SWFObject examples list is now located at http://learnswfobject.com

SCORM ActionScript 3 ZIP file fixed

A few people have contacted me to let me know the ZIP file for the SCORM ActionScript 3 example was missing the FLA file.

Whoopsies!

I’ve added the source files back to the FLA. You can download it from the downloads page.

Thanks to everyone for letting me know. I usually work on this stuff at night after I get home from work, so sometimes I get sleepy and mix my files up. 🙂

Lines in the sand

Before I get to my point, I’d like to give you some background information.

For better or for worse, I’m something of a perfectionist. I’m also something of an idealist; this combination makes life very difficult sometimes. When I embark on a project, I’m usually driven by an innate desire to do it the “right way.”

Before coming to the e-learning world, I worked with print publishing and radio production for about a decade. These are excellent fields for perfectionists! Print production allowed me to work with extreme precision, down to a pixel (actually, a point: 12 points in a pica, 6 picas to an inch!). Radio broadcasting requires precision to a second; there is no room for mistakes. I thoroughly enjoyed the challenges presented by both fields, and, though I didn’t realize it at the time, I enjoyed the constraints: things were black and white, right or wrong, no in-between. Lines were drawn in the sand, cross them at your own peril.

When I went to grad school, I majored in Education, specifically the Instructional Technologies program. In grad school, students are taught instructional design from a ‘best case’ point of view. An idealist point of view, with an emphasis on always performing a thorough analysis of the situation, followed by the implementation of a well-designed solution, followed by lots and lots of evaluation. This was the right way to do things. The line in the sand was clear: skip these steps at your own peril.

Instructional design: the right way or the realistic way?

Being an idealist, I eagerly bought into what was being covered in grad school. I believed (and still do, to a point) that every project should follow ADDIE or a similar model. C’mon, it makes sense, doesn’t it? Again, the line in the sand had been drawn: skip these principles at your own peril.

Now that I’ve spent a few years working full-time as an instructional designer-slash-e-learning developer, I’ve learned first-hand that the instructional design ideals taught in grad school are quickly thrown out the window when you get a ‘real’ job. The most common culprits are time and money, but sometimes it’s managerial ignorance or politics, too.

I’ve witnessed that most training departments don’t do any post-implementation evaluation. It’s not for lack of desire, they simply don’t have the time and/or resources. “Well, they at least do a thorough analysis of the problem, right?” Nope, not so much. An analysis is done, to be sure, but it’s usually pretty quick, and the SME has a pretty influential role in defining the problem, which conflicts with the instructional designer’s main function: define the problem by evaluating the situation and questioning all assumptions, then, if applicable, design a training solution for that problem.

However, many real-world training teams don’t even have an instructional designer, which means the SME carries much more weight. Oftentimes, due to staffing and funding issues, the SME and the trainer are the same person!

And thus the world of e-learning development software is born.

The crazy world of e-learning development

A team with an instructional designer, given the time and resources, would probably not use most of the e-learning development tools on the market because of their inferiority. A much more mature and robust e-learning course can be created by a tandem of an instructional designer, technical writer, graphic designer, and web programmer. But who in this world of downsized training budgets has the funding or time to build a team of experts to create these highly customized courses?

Hardly anyone.

So e-learning development products flood the market, and suddenly SMEs are empowered to create their own professional-looking training materials — fully LMS-compatible! — in a matter of hours. Instructional designers cringe, but the masses have spoken, and they like their newfound abilities!

e-learning development, the right way or the realistic way?

As a perfectionist who is well-versed in the world of e-learning technology, and as a trained instructional designer, I admit I have turned my nose at e-learning development software for a long time. I drew my line in the sand, as I have been taught by both experience and education, and I knew which side I belonged on.

Assuming you even need a course — job aids, podcasts, screencasts, wikis and online forums may solve the problem without even requiring a course to be built — the right way to build an e-learning course is to follow an ADDIE-style model, with an emphasis on instructional design and evaluation. Your courseware should be as interactive and engaging as possible (without falling victim to adding interactions for interaction’s sake), should incorporate the latest Web and accessibility best practices, and should be SCORM-compliant. Avoid clip art and cheesy stock art whenever possible.

However, many people will tell you the realistic way to build an e-learning course is to use a template from an off-the-shelf e-learning development tool. It will contain limited but easy-to-use interactions, allow you to insert whatever free clipart and/or images you can find on the web, and will lead to a simple, decent-looking course in no time, without hiring a contractor.

You wind up not with a Mercedes or BMW, but a with very functional Ford… it gets you from A to B and well within budget.

I admit I find it hard to argue with the ROI of this approach. Having said that, I have always been highly annoyed by the poor aesthetics and code quality of most of these e-learning development tools. But does anyone else care? No! They don’t look under the hood, they just care that the car starts when they need to drive it. I can’t fault anyone for feeling that way. I would feel that way, too, if I wasn’t the mechanic who puts these buckets of bolts together.

I’ve also had issues with how the cookie-cutter nature of the software tends to lead the user away from instructional design considerations — I wouldn’t be surprised if the trainer creates their e-learning course so quickly that they probably haven’t even done any analysis and assessment before digging into the development work.

But again, I’m finding it harder to say that this approach is wrong. Context is key, and in many of these situations, a brief, quickly built and deployed piece of training (perhaps not even a full course) may be a perfectly suitable solution. Bullet points are not always evil.

Can’t we all just get along?

Yes, I have been questioning the ferocity of my beliefs for some time, and conversations with others (and the e-learning blogosphere) have led me to eventually shift my opinion on the subject: No, lines do not have to be drawn in the sand, and the simple act of drawing them may be more harmful than helpful.

Some of my peers are also re-examining their beliefs and asking questions; I think this is great, since our field is a quickly evolving field. Just today, Aaron Silvers wrote about tactical versus strategic planning:

Lots of organizations in the last 10-20 years solve problems by looking at the immediacy of issues. The brushfires. The low-hanging fruit.

Aaron wasn’t writing specifically about what I’m writing about, but the line struck a chord with me; putting out fires and trying to grab the “low-hanging fruit” is a primary cause of the explosion of just-in-time training, a large chunk of which is e-learning courseware developed using “rapid elearning” development tools such as Articulate Presenter.

Clive Shepherd is excited about this, saying

One of the really exciting consequences of the web 2.0 revolution is the emergence of all sorts of new learning objects, designed for quick access when you need something that’s just-in-time and just enough.

  • Short videos
  • Slide sets
  • Podcasts
  • Mini e-books

Each of these media can be developed using commonly available tools and skills, something that can’t be said for interactive tutorials. They are better suited than tutorials to performance support applications, where learning is not the primary objective.

I’d like to emphasize two of his phrases: “performance support applications” and “just enough.” Most e-learning is designed to help someone do their job. The learner is a busy person and doesn’t really want to take long-winded courses; s/he just wants to know enough to get the job done. Likewise, most training developers will choose the easiest and fastest way to create these training materials, ideals and theories be damned!

Personally, I feel torn between wanting to satisfy the needs of the learner in the quickest fashion possible, and wanting to present a complete, thorough course using sound instructional design, including needs assessments and evaluations.

Warning: gestalt shift!

I think what this boils down to is that we’re in the midst of a gestalt shift from ‘courseware by professionals’ to a rapid e-learning world (and no, please don’t use the term elearning 2.0!).

If this is a rapid e-learning world where SMEs produce courses, where do the skilled e-learning developers fit in? I believe there’s room for all of us. Clive Shepherd admitted “It’s still quite hard for non-specialists to create good interactive tutorials, even of the rapid variety.”

I recently exchanged emails with Tom Kuhlmann from Articulate, and I really appreciated what he had to say about the topic:

It was just a few years ago that only a few people were able to create those horrible gray web pages with [little] more than text. Now, look at where we’re at. You need no technical skills and with some of the new 2.0 web tech, you can create some pretty impressive stuff.

I’m for anything that democratizes the process and gives people power to develop their own training and whatever else they want to do. Are you going to get perfect courses? No. But that will create a market for those that can produce better stuff.

I think there’s a place for it all, and with that a lot of opportunity for people like you who have good programming skills. You’re able to help the novice ID/SME bring their content up a notch.

Where do professional e-learning developers go from here?

I agree with Tom, but I’d like to take it one step further: rather than “helping the novice ID/SME bring their content up a notch,” I feel it’s the responsibility of professional e-learning developers to pressure the e-learning development tool industry to improve their products to meet higher standards, both in terms of web & accessibility best practices, and in terms of educating their customers on what comprises sound instructional design.

I think there’s an excellent model to follow: In the early- to mid-90s, Adobe and Aldus produced high-quality instructional booklets explaining the print production process from start to finish. These guides were distributed free with the manuals for specific software titles (PageMaker and Freehand). The guides were extremely well-written and illustrated, and taught me a lot about the preproduction and printing process before I ever stepped foot in a print shop.

Why did they supply these free books? I never really found out. My assumption is that a deeper understanding of the print process would foster more skilled use of their software, and a deeper appreciation for its power/capabilities.

The e-learning development tool industry would be wise to follow that lead; educating its customers about e-learning and related topics (ADDIE? Gagne? SCORM? Design principles? Color theory?) can only help to improve the industry as a whole. And as we all should know, if we do a good job, the learner does a better job, and the world becomes a better place.

SWFObject is officially at 2.0

Geoff Stearns and Bobby van der Sluis have finalized SWFObject 2.0. It is no longer beta, and SWFObject 1.5 is now considered deprecated.

SWFObject 2.0’s home is located at Google Code, which includes full documentation and downloads. I believe support will be handled by the SWFObject 2.0 Google Group. I’m not sure what will be happening with the SWFObject Support Forum, which has focused on the pre-2.0 versions of SWFObject.

Thank you to Geoff and Bobby (and the late Michael Williams) for all their hard work… SWFObject 2.0 will certainly have a major impact on the Web.