May 28

Make Captivate HTML5 Work in Firefox

screen shot of error dialogWith the slow but steady demise of Flash, SWF-based elearning software makers, like Adobe, have been “cramming” (a word from disruptive innovation) HTML5 into their products, like Captivate (I’m using v6.1), to keep up. Because the HTML5 spec itself is still growing in inconsistent and at times uncertain directions there are bound to be holes and gaps in the implementations. For Captivate 6.1 the first one I encountered was the “This browser does not support some of the content…” error I got when I attempted to view my HTML5 output in my browser of choice—Firefox. It was version 20, and I know Firefox has supported HTML5 audio and video tags since version 3.5 so it had to be something silly. In the proprietary software world that may mean license issues, and so it does with Firefox (Free, Open, Libre software) and the MP3 (not so much). Captivate exports only MP3s, Firefox (and Opera) play only OGGs. So until Adobe offers a checkbox on the Publishing page you can do the following, or hope your visitors use only IE, Safari or Chrome—as the majority probably do… but we’re big on inclusion around here so let’s not leave anyone out!

I quickly ascertained it’s the MP3-only audio export preventing Firefox from doing Captivate sound. As you probably know, some browsers do MP3, others do OGG. You may even remember why. Fortunately that’s the only reason Firefox won’t play Captivate HTML5. All you have to do are

  1. create OGG versions of each MP3 and
  2. edit two JavaScript files to
    1. detect Firefox
    2. provide the appropriate file extension and
    3. suppress the error message.

Simple enough you say, but I figured I may as well google it and see what others have done. I did, and found all the hints I needed in hermit9911’s answer to this post (scroll down a few). hermit just needs OGG. I want both to work depending on browser, so I had to improvise on hermit9911’s theme. Here are the steps I ended up following.

1. Create OGG versions of each MP3

There are many programs that convert audio formats. I used Audacity’s “Chains” feature (macros). Since I’ve met many more people who know of Audacity than know of its Chains feature, I’ve done a separate screencast of that process:

Made using Camstudio (screen video), iPhone (narration),
Audacity (mix/process audio) & Sony Vegas (mix/render video)
Can you suggest a good open source video editor? Please use the comments with my thanks!

2. Edit two JavaScript files

detect Firefox

Project.js is found in the root export folder. It’s “minified,” which means line breaks and extra spaces are removed and it’s pretty hard to read, but we can add our tiny bit of code right at the beginning. I don’t see any need for feature detection in this case, so I settled for user agent:

var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 
// converts the string to lowercase then creates Boolean, 
// true if it finds 'firefox' anywhere in the name. Otherwise : false 

provide the appropriate file extension

Once you have a question that can be answered yes or no the best syntax is usually as follows:

myExtension = is_firefox ? '.ogg' : 'mp3'; <br>// Yes? Send '.ogg' No : send '.mp3

Then just search & replace existing .mp3' with '+myExtension Everything between ”s is literal, myExtension is variable depending on the answer to is_firefox?yes:no;

UPDATED: If you have Administrator rights and access to the Adobe Captivate install folder you can add these changes to the template Captivate creates the file from. Otherwise both files are overwritten every time you publish, and you have to repeat all these steps. If you can access and edit
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js
use that file instead (path to install folder will differ depending on operating system and installation) otherwise follow the instructions as written:
Next, open [PublishFolder]/assets/CPHTML5Warnings.js and make the two additions suggested by hermit9911. (I looked up the earliest version of Firefox that supported the audio tag and replaced hermit9911’s xx with 3.5).

this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5; // sets minimum version, used in code below

suppress the error message

Finally at the very bottom of the file you will find a series of IF and IF ELSE statements… add the following after the closing semicolon of the last one:

else if((this.browser == this.BrowserEnum.FIREFOX) <br>  &amp;&amp;<br> (this.browserVersion &gt;= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION )) <br> lSupported = true;

Browse to index.html in Firefox, press Play and watch your movie. With a bit of practice this will add all of about 5-10 minutes to your publishing routine. Alas, you’ll have to redo Project.js—and convert all your audio files— every time you publish.

As an extension activity, make this work for Opera (yes, you can use find/replace but watch case-sensitivity. Do each separately… firefox/opera and FIREFOX/OPERA). Use flow control instead? (Hint: yes) Look back at the code above and explain why you need to do that. Would you change the variable name? To what?

My entire solution instructions and code snippets
(including my answers to the extension questions)

/* ADD TO TOP OF Project.js */
var wantsOggsOverEasy = ((navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (navigator.userAgent.toLowerCase().indexOf('opera') > -1)), myEXT=wantsOggsOverEasy?'.ogg':'.mp3'; 
/* nb comma/semi-colon usage - I declared 2 local vars in 1 dec */

/* This is the text to search for
   .mp3' and change it to '+myEXT
  EXAMPLE
  FROM: src:'ar/Mouse.mp3',du:182
       TO: src:'ar/Mouse'+myEXT,du:182

IF you have Admin privileges find the Captivate install folder and edit the warnings file found in
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js. Otherwise you can save these changes in a safe place and you'll need to replace [PublishFolder]/ar/CPHTML5Warnings.js in the published location every time you publish. (Project.js is generated programmatically by the publishing engine, so to the best of my knowledge it must be fixed after each publish, also protect your OGG files.)  */

/* In CPHTML5Warnings.js 
(somewhere between lines 19 and 20) non-destructively ADD:  */

        this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5;
        this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION = 10;

(approximately line 112) AFTER final 
          lSupported = true; AND BEFORE

          return lSupported; non-destructively ADD 

		else if((this.browser == this.BrowserEnum.FIREFOX) && (this.browserVersion >= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION))

            lSupported = true;	
		else if((this.browser == this.BrowserEnum.OPERA) && (this.browserVersion >= this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION))
            lSupported = true;

§

N.B. Post was edited for clarity since first publishing.

May 20

Visual Understanding Environment (VUE) as a presentation tool

VUE, and its design-centric extension, designVUE, are concept-mapping tools with rather extraordinary superpowers. In fact if you think they look like simple tools for making mind-maps I’m here to nudge you to take a closer look. Mind map being created in VUE.

Metadata

Does quickly and invisibly making your content “more accessible, interoperable and valuable” sound good? Have you heard of “…Web 3.0, the Semantic Web or the Giant Global Graph…?” These two well-connected apps support OpenCalais and other meta-data helpers.

While the VUE site is essential for resources and documentation, I recommend installing and using designVUE. Even if you don’t use IBIS argumentation, what they refer to as “bi-directional hyperlinking between files,” known elsewhere in designVUE as “wormholes” (and in Compendium as “transclusion,”) or the ability to place one map within another, is a powerful ability that separates tools like VUE and Compendium from the plethora of mind mapping tools available.

Presentation tool

That’s what I’m learning first—the built-in presentation tool. There’s not much more I can add about it at this point than what’s in this rather comprehensive overview/tutorial (more overview than tutorial, maybe?), so with no further ado…

Next

I seem to be able to screen record these presentations with another open source program, so if that pans out I’ll share it then. I think it’ll definitely take some practice thinking about presenting in a different way, but there’s a great deal of evidence that idea maps, visually connecting the dots, and the activities such as argument mapping that are associated with them a) may have a natural fit with social networks and social learning, and b) organize data in ways consistent with the human brain (see for example Conole & Fill, 2005 and its extensive reference list).

§

More

The Visual Understanding Environment (VUE) is an Open Source project based at Tufts University

designVUE is a branch of VUE. It is an open source project based in the Design Engineering Group of the Mechanical Engineering Department at Imperial College London.

Conole, G. and Fill, K. (2005). A learning design toolkit to create pedagogically effective learning activities Journal of Interactive Media in Education 2005(08). [PDF: jime.open.ac.uk/2005/08]. Gráinne Conole and Karen Fill, University of Southampton. Page 1 Published 26 September 2005 ISSN: 1365-893X

Calais Marmoset is a simple yet powerful tool that makes it easy for you to generate and embed metadata in your content in preparation for Yahoo! Search’s new open developer platform, SearchMonkey, as well as other metacrawlers and semantic applications.

May 17

CompendiumNG, the Next Generation?

CompendiumNG splash screenCompendium is an open source concept mapping tool I discovered when I was exploring design, looking into conflict resolution and complex problem solving in general, and I learned of Horst Rittel’s “Wicked Problems.” Compendium contains an icon set and database support for its “Issue-Based Information System (IBIS)”

IBIS employs argument mapping that is designed to find solutions to wicked problems.

CompendiumNG's updated desktop.

The new Compendium has an attractive background and new icons.

In argument mapping you simply pose a question and list the pros      and cons     , but you also connect dots and from there, in theory, the discussion takes off, aided by the visualization, which evolves in real time to reflect the process. Paul Culmsee has demonstrated how framing “powerful questions” can expedite this.

Mind mapping seems to tap our brain’s need for visual cues. Compendium makes it quick and easy to create maps, link and rearrange the bubbles, but that’s just the tip of the iceberg—you can add your own icons and icon (“stencil”) sets. It has tags, categories, a powerful database and metadata abilities behind it that could be accessed by other programs. It supports a high level of collaboration. You can attach files and external links to the bubbles, even create an interactive Web page that retains those links and attachments so you can share them on the Web. One version of Compendium, “CompendiumLD,” has been adapted to Learning Design. In my readings I’ve seen Compendium and other mind mapping tools used to design units, deliver lessons, as the focus, outcome or product of a lesson, and as a record of program implementation or student achievement used to assess the program or give the learner a grade. Compendium is also free and open source.

CompendiumNG appears to be more than just a facelift. But in a world where increasingly we expect to open a Web browser and go straight to engaging content, is a modernized interface and potential limited only by the imagination enough to motivate busy educators to adopt and learn, deeply, a complex new program? I have my doubts, and I believe a browser-based HTML5 mind mapping tool is not too far down the road. But when it comes to making thinking visible, I for one can’t wait. CompendiumNG is a “show and tell” tool, and that was always one of my favorite things to do at school.

§

Further reading, information

Culmsee, Paul (2013) A video about “powerful questions”, live mapping with Compendium.

Kirschner, Paul A. , Buckingham Shum, Simon J., and Carr, Chad S. (Eds.) (2003), Visualizing Argumentation: Software Tools for Collaborative and Educational Sense-Making, London: Springer-Verlag.

Ortiz, Claudia María Álvarez (2007) Does Philosophy Improve Critical Thinking Skills?, Master’s thesis, Department of Philosophy—Faculty of Arts
The University of Melbourne, images.austhink.com/pdf/Claudia-Alvarez-thesis.pdf retrieved 2013-04-30.

— Critical thinking on the web, Argument Mapping

May 10

Are you “informer,” or “meformer?”

Twitter infographicMor Naaman, Jeffrey Boase, and Chih-Hui Lai of Rutgers are on the list of researchers who’ve published early about Twitter. Naaman, Boase and Lai (2010) bring interesting new terminology to the table, casting Twitter as a member of a class of software described as “social awareness streams” Three things distinguish a social awareness stream from other communication: “…a) the public (or personal-public) nature of the communication and conversation; b) the brevity of posted content; and, c) a highly connected social space, where most of the information consumption is enabled and driven by articulated online contact networks.” (pg. 189). Does property “c” include “Personal Learning Networks (PLNs)?”

Research questions

…we use Ward’s linkage cluster analysis to categorize users based on the types of messages that they typically post. … The analysis resulted in two clusters, which we labeled “Informers” (20% of users) and – to suggest a new term – “Meformers” (80%).
Naaman, Boase and Lai (2010, pgs. 191-2), emph. mine

The researchers asked, 1) What types of messages are commonly posted and how does message type relate to other variables? 2) What are the differences between users in terms of the types and diversity of messages that they usually post? 3) How are these differences between users’ content practices related to other user characteristics? The entire study is worth a look (link below), but a summary here might be a good influence on the types of Personal Learning Networks we create.

Messages fit into 4 categories: “information sharing (IS; 22% of messages were coded in that category), opinions/complaints (OC), statements (RT) and “me now” (ME), with the latter dominating the dataset (showing that, indeed, “it’s all about me” for much of the time). Overall messaging divided into 2 types, “Informers” (20% of users) and then Naaman, Boase and Lai suggest a new term: “Meformers,” into which fall the Tweets of 80% of the users in the study. [The Figure] shows the mean of the average proportion of messages in the top four categories for each user” (pg. 191).

graph, informers vs meformers

Mean user message proportions for the four main categories, breakdown by cluster.
Source: Naaman, Boase and Lai (2010, pg. 191)

What else do we know?

Tony & Rachael Lowe have done a Twitter in learning and teaching – literature review collecting what we’re learning about Twitter in one place. They highlight in particular one by Reynol Junco, C. Michael Elavsky, and Greg Heiberger (2012), Putting twitter to the test: Assessing outcomes for student collaboration, engagement and success in which they show that faculty participation on the platform, integration of Twitter into the course based on good theory-driven pedagogy, and requiring students to use Twitter are key to improving outcomes that I intend to review on its own soon.

Further questions

Here are some of mine:

Are these numbers still true in 2013?
Are we informers sometimes and meformers the rest of the time?
Are there other “clusters” to be discovered?

Please use the comments and ask some of your own questions here!

§

Reference

Junco, Reynol; Elavsky, C. Michael and Heiberger, Greg (2012), Putting twitter to the test: Assessing outcomes for student collaboration, engagement and success, British Journal of Educational Technology (2012) 1-15. (Wiley Online Library)

Lowe, Tony & Lowe, Rachael (2012) Twitter in learning and teaching – literature review (webducate.net)

Naaman, M., Boase, J. & Lai, C. (2010) Is it really about me? Message Content in Social Awareness Streams. Proceedings of the ACM Conference on Computer Supported Cooperative Work, February 6-10, 2010 in Savannah GA (PDF).

May 06

Multimedia in eLearning? Bring Popcorn and Butter!

Popcorn WebMaker is a Mozilla project. The video you see in the frame below is actually 3 YouTube videos, linked and enhanced using Popcorn (popcorn.js) and Butter (butter.js). Popcorn uses JavaScript to synchronize events you plan and implement with the audio or video that’s playing. Butter is an HTML5 timeline interface that lets you set it all up, it works much as Adobe Captivate, although not nearly as advanced—yet. Open source technologies tend to be less refined until they find a niche market, and eventually interest and a community attach a commitment to their further development. A classic example is the transistor radio. While audiophiles built ever more expensive high-fidelity vacuum tube amplifiers and receivers, with special speakers and advanced crossovers, a cheap, portable unit, sometimes with a 1.5 inch paper speaker sounding like a telephone, caught on with teenagers, with the eventual result that transistors and miniature speakers created a new market, marginalizing the status quo in the process; vacuum tubes now inhabit niche markets (rock guitarists in particular have helped keep the industry from disappearing altogether). JavaScript supplies interaction that was impossible within the video file itself.

Very Basic Web App 101

I’ve already noted an irony… I was unable to watch these videos on my iPhone, and yet I uploaded HTML5-friendly .webm files. That seems to be about YouTube, though, not Popcorn.

Will Popcorn and Butter disrupt Adobe? You won’t see it on corporate training sites any time soon, but you can rest assured the number of people who know what it is and try to use it will surpass Captivate’s in a short time — and they’ll have lots of fun at https://popcorn.webmaker.org/ exploring ideas and re-mixing the ideas of others. I’ve only just begun exploring this exciting new resource. I hope you will join me.

Try Mozilla’s Popcorn Maker for yourself. https://popcorn.webmaker.org/

I’ve already encountered some PopcornMaker gotchas, including an inability to reliably hold HTML code in Text or Popup events, making it difficult to do some of the lessons I had in mind. I expect to write a few more blog entries on Popcorn, and though I got a late start I’m taking part in Teach the Web: a Mozilla Open Online Collaboration for Webmaker mentors. I’ll have much more to say, and I’ll tackle the gotchas, when I see and hear how others have approached this fledgling resource in the 21st-Century-Educator’s repertoire.

§