Mar 09

Movie Studio Platinum 13 with HitFilm gets an A

Posted on March 9, 2014 by Richard

Of all the UI updates we’ve endured this year, I figured SONY Movie Studio Platinum 13 was …another one. But it was long overdue and they did a great job. You need the HitFilm 2 Express bundle to get the mask tools you’ll need for chroma key and green screen work, filters and some snazzy effects you probably didn’t expect to be this easy to achieve in this price range. Together they make a great starter package for young people and people who work with them.

Other than Jahshaka, a project I’ve seen at various times and places on the Internet promising to make a comeback since 2006, I haven’t seen any great open source video editing software. Skills are in high demand, and they should be. I recorded the screen video with CamStudio, and I did some stills with The Gimp.

Classroom technology and access to it aren’t anywhere near consistent, and there are reasons to be found on several levels. Economic ones are high on the list …even cellphones and webcams, software and lights and green screen set-ups in the $500 and slightly under range will still be out of reach for some. In some areas schools must use specific tools prescribed by others, and everywhere there’s inconsistent buy-in. YouTube viewership attests to the power and popularity of the medium, the ease with which one can now produce video with impact, and the pure fun make it an irresistible medium for educators.

By 2010, 19% of Americans had tried video calls, video chat or teleconferencing online and on cell phones. There are definitely equity issues apparent in video calling patterns, making calls on line is appealing to “upscale” users. “A third of internet users (34%) living in households earning $75,000 or above have participated in such calls or chats, compared with 18% of those earning less than $75,000. […] Urban internet users (27%) and suburban users (23%) are significantly more likely than rural users (12%) to have participated in video calls, chats, or teleconferences […] Cell-owning blacks are more likely than whites to participate in video calls, chats, or teleconferences (10% vs. 5%).” (Pew, 2010). But this says nothing about aspirations to tell stories using video.

The corporate take is that video storytelling is not quite ready for prime time. But it was the $10 transistor radio in the hands of teens in the 50s, who didn’t need audiophile fidelity as long as they could take their music with them, that disrupted the vacuum tube.

What’s been missing from video is interactivity. But now there are free mashup tools like Popcorn.js and Webmaker, HTML5 timeline tools that let you pause, mix, overlay your own ideas in text and imagery, or branch off in another direction based on a user input. And video is not something that’s easy to do alone. Can a project incorporating video in a classroom setting meet all the 4Cs, the so-called 21st Century Competencies—Critical Thinking, Communication, Collaboration, and Creativity?

With tools like MSP and HitFilm, or any of the products on this list young people aren’t likely to wait to hear the marketers at SXSW are finally catching up.

Nov 24

JavaScript the least of (my) hurdles with MIDI.js

Posted on November 24, 2013 by Richard

On #musedchat Monday Nov 18 I saw an opportunity to mention an open source Scoring/Engraving tool and was soon encouraged to send more links to open source resources. I’ve been collecting such links in the bookmarks of various browsers for years, and I’ve followed through on my initial interest to various degrees, so in some cases I found myself checking links along with my memory. In one case—MIDI.js—I said a big “Oh yeah! I was gonna try installing that, wasn’t I?”

How easy it is to try out any of the hundreds of thousands of interesting and potentially useful JavaScript offerings one can find on the Internet depends a lot on how much documentation the developer and interested community have provided and good examples of the code in (ahem) “authentic situations.” No matter how good it is, if you want it you’ll soon have to view source and dig in. The code behind MIDI.js looked to me daunting, but on closer inspection it turned out the biggest hurdle was recognizing the playlist of MIDI files is an array of Base64-encoded strings hard-coded in the file. If you know what that is, and if you can encode your MIDI file as a Base-64 string then copy/paste it over the ones in the original example—and if you set up the folder structure identically to the original (clone the Git repository straight into /xampp/htdocs if you work with a LAMP setup like mine)—it just works! But it looks just like the author’s.

The design is not responsive1 and doesn’t fit my blog or mobile device. The colours are very cool but I don’t need them. The note display has so many pedagogical applications my brain is exploding—but it doesn’t fit on my pages, same goes for the player and buttons. The JavaScript knowledge I need is “just enough” to identify where to safely slice and dice the code and recognize the very few places I might change something. It was more important I knew Base-64 encoding is something I’d likely find a web site to do. The highest-level skill needed here is actually CSS. I need to restyle the player so it fits my pages in the contexts I expect it to be viewed. And I want those notes to play along exactly as they do now, just in a completely different layout.

Here’s what it looks like today. (It’s not worth listening to in anything but Chrome).

An undefined error originally came from this line, but I haven’t found where MIDI.lang is supposed to be defined, and the sentence really doesn’t tell me anything I care to know if I define it as “English.” I made sure the page has a title and I even gave it a language attribute but no luck only by hard-coding it as shown below could I stop it so far. Will dig in [to the MIDI object, its properties and methods] later.

// I added...
// Quick suppression of undefined
MIDI.lang = MIDI.lang || 'en-ca';
/// above...
// this is the language we are running in
var title = document.getElementById("title");
title.innerHTML = "Sound being generated with &quot; + MIDI.lang + ".";
// I also added at line 108
pausePlayStop(true);  // Sorry Gasman. Autoplay is just wrong!
// Just above that I see <code>song[songid++%3]</code>, the '%3' implies something hard-coded that applied to the fact there used to be 3 midi files. To be continued...

Jun 18

Bookmarklets for fun and practice

Posted on June 18, 2013 by Richard

Bookmarklets are JavaScript links that can be stored in your browser’s Bookmarks or Favorites folder, or attached to a bookmarks toolbar, and then used to do something relative to that page. I think bookmarklets have a lot of value for teaching and self-teaching JavaScript.

What can I learn playing with bookmarklets?

You need to create and use a fundamental unit of HTML: a link (also known as “anchor”; <a href="somewhere">Link</a> ). You can start with the most basic javascript:alert('Hello world');. You can learn how to use a closure javascript:(function(){ alert('Hello world'); })();. You’ll be forced from the start to pay close attention to syntax. If you haven’t yet, you’ll quickly figure out how to use Firebug (and/or any modern browser’s “F12 Developer Tools”) to inspect DOM elements to get their id and other properties. Ultimately you’re limited only by your skill, which will improve quickly, and imagination. What would you change about the blog page you’re reading now, if you could?

Where to start?

I started with a pet peeve about a page I visit regularly. My first bookmarklet ever hides the right column in Facebook, so I don’t have to see the ads. Take that, Mark! If you click the link below while on this page nothing will happen. But if you drag the link to your Bookmarks Toolbar (in Firefox, “Bookmarks Bar” in Chrome, etc…) do that while viewing your Facebook page (or any page that coincidentally has a right column div with id="pagelet_side_ads") you will toggle its visibility.

Bookmarklet¹: Toggle FB ads Drag the link to your bookmarks bar to try it.

To embed a bookmarklet so it can be dragged to the toolbar you just place a link on your Web page:

<strong>Bookmarklet: <a href="javascript:(function(){var adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}})();">Toggle FB ads</a></strong>

The imagination runs wild

Still milking my own pet peeves, I wanted to collect lyrics of several songs I needed to learn for the weekend warrior band I play in. A recurring pattern is, we find a song by an artist that is a good fit for our sound, and due to that we later add 3 or 4 more by the same artist. Besides, I just like having lyrics handy… why not just get all the lyrics for that artist at once? But that would mean a lot of clicks and copy/paste! With some intermediate JavaScript you can collect all the links and titles, visit each page in a queue, get just the lyrics you want, and display them in one place in a fraction of the time. To engage students and make meaning of any learning situation requires context and relevance. Do you know any young people who like music, and might be engaged by collecting lyrics of their favourite artists?

I may explain this code in another post, but for now it’s about bookmarklets and an example of what one might do with one. If you don’t understand this paragraph you’ll need to do some vocabulary homework. This script only works at www.lyrics.com. That page has a version of jQuery installed so I used it. To write the script I used Firebug to identify IDs and classes of elements on the page that I use as “selectors” to have access. I fiddled in the console until I had a working script. Meticulous syntax is important… your script goes on one line, so semi-colons are in, comments are out.

Bookmarklet: Get Lyrics This works on Artist pages at www.lyrics.com

This script is quite a bit more involved than the first. I did succeed in making it work in the link code like the first one, but there’s an easier way. In order to make more complicated scripts work you should use the bookmarklet to load your script from a file on your server. I created rcf-get_lyrics.js and placed it on this server. You can copy/paste the script below and just change the path to point to your own file.

javascript:(function(){var url="http://www.rcfouchaux.ca/rcf-get_lyrics.js",n=document.createElement("script");n.setAttribute("language","JavaScript");n.setAttribute("src",url+"?rand="+new Date().getTime());document.body.appendChild(n)})();

I’ll discuss the code in more detail in a future post, but quickly, you create a script element and set the source to the file, then append this new element. There’s a unique identifier, which I’m not using for anything right now, created from the time and appended to the url.

Few limits

The most impressive bookmarklet I’ve ever seen, one that immediately became essential to all my JavaScript learning and development, is Alan Jardine’s Visual Event. Visual Event is an open source JavaScript bookmarklet which provides debugging information about events that have been attached to the DOM (Document Object Model; it means the entire web application represented by the “web page” loaded in the browser’s window).

Alan’s script demonstrates how to load a complex script off a server using only a small manageable amount of code in the bookmarklet itself. As you see, I borrowed it but removed his protocol check for simplicity. I think the aforementioned date/time “query string” he adds prevents the browser from caching the script indefinitely, but I didn’t research that—it’s a guess.

Another impressive project that’s available as a bookmarklet is pjscrape. If I wanted to turn my lyrics scraper into a real utility I’d probably start with pjscrape.

Update 2: I’ve placed both the bookmarklets on their own page. I expect I’ll add to the list.

Update 3: I’ve added a variation on the Facebook ad hider, using display:none and targeting only the ads—compare the two and try to figure out what’s different. I’ll add all future updates on the bookmarklets page.

When the Diddlies overstay their welcome

Posted on March 31, 2013 by Richard

or… staving off Pull-off Syndrome

I created this article using My VexFlow, and it appears here in an embedded iFrame. “My VexFlow lets you publish content with beautiful music notation, guitar tablature, and chord diagrams, without the need for special tools. Just type away! ”

Further discovery

My VexFlow lets you publish content with beautiful music notation, guitar tablature, and chord diagrams, without the need for special tools. Just type away!

Mar 13

On Webmasters and PluginMonkeys (reprise)

Posted on March 13, 2013 by Richard

I’m very fond of saying I first learned web design—HTML, JavaScript and CSS—the same way I learned guitar: by “stealing” other people’s best licks. When I took music in Pennsylvania public schools in the 60s we had an itinerant music teacher once or twice each week, and classroom teacher-led music once or twice more. We learned every good boy deserves fudge and we sang songs “by note,” and songs “by rote.” We were taught musicianship. But there was never any suggestion the goal was for any of us to become professional musicians. I’ve been thinking about that ever since I learned “entrepreneurship” is receiving top billing local curriculum as a universal 21st Century competency (e.g., C21, P21). Not that there’s anything wrong with that!

Informal learning is valid and important

Graphic, reads I learned html same way as guitar, by stealing other people's licks

Part 1 of this series was written over a year ago when I first heard the man I considered my Jimmy Page of the JavaScript world, Douglas Crocker, refer to my kind dismissively as “Webmasters…Generally they weren’t very smart.” Dion Almaer suggested the term “jQuery Plugin Monkeys,” to much laughter. To summarize, I’ve embraced the term in much the way U.S. Democrats embraced “Obamacare.” To continue, then as now I’ve always approached the WWW as an educator asking, “How can this help me share what I know?” I learned, informally, what I needed to know, when I needed to know it. Dedicated CompSci folks always did much more, and way cooler stuff in much less time (and their stuff scales!). Yet I think knowing their language gives my ideas a better chance of being realized. Continue reading →

Jan 08

Learn to play more, play to learn more (and may your learning be serendipitous)

Posted on January 8, 2012 by Richard

On my other secret blog I barely mentioned attending a talk back in November on Planned Serendipity, but in terms of impact the session has turned out to be a bit of a “creeper.” At the time it reminded me how big a role serendipity, albeit usually of the unplanned variety, has played in my own life. Now, the more I notice it, well.., the more I notice it happening all the time. This past week—still reeling perhaps from the realization I’m descended from webmasters and plugin monkeys, even as I plan how to design a “Web 2.0” project involving things computer scientists inevitably do much better—three different sources contributed three new resources to the rebuilding of my self esteem by reinforcing my complete belief in the importance of play to learning*. Continue reading →

“Thick” Learning Situations

…enriched by technology

Tag Archives: play