Monthly Archives: February 2015

Feb 26

The baby in the bath water?

Posted on by

I got my start as a “webmaster” in the Crocker-ian sense. I wrote jSyncWithMedia as a project for my master’s degree in education. With it you can synchronize a slide and caption show to your speech or video using the native <audio> and <video> tags. It contains some naïve and outright bad code, but it’s based on a thesis, and I got it to work. I noted that storytelling is in many ways central to teaching, and narration is at the center of storytelling. Teachers and storytellers highlight certain phrases, create mental images and metaphors, to emphasize the specifics of what they’re telling. I knew html css sql and was trying out JavaScript using only resources available on the Internet. I tried to synchronize events to an audio and or visual timeline. If nothing else, I proved that a tenacious person with strong but basic HTML/CSS/JavaScript background and access to a search engine could, in 2010, build a working jQuery plugin.

It’s nothing like Mozilla’s Popcorn.js in scalability, but If there’s one thing about it that’s still interesting it might be the CSS animation based on WAI-ARIA attributes aria-expanded aria-hidden and their values, which I manipulated with jQuery.

Selectors $(‘[aria-expanded=”false”]’) $(‘[aria-hidden=”true”]’)

/* CSS file
 * A fade in and out that can be controlled
 * by changing aria- attribute values
 * programmatically.
 */

[aria-expanded="false"] {
    display:none; 
} 

[aria-hidden="true"] {
    visibility:invisible; 
} 

[aria-expanded="false"] {
	opacity: 0;
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
}

[aria-expanded="true"] {
	opacity: 1;
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
}

In theory this can work with other CSS animations. The big challenge for practicality is the timeline interface. I created one that works, using Audacity .aup files, which are XML documents, and the timings extracted from its label track. 

<!-- SNIPPET FROM .aup FILE CONTAINING LABELS -->
    <labeltrack name="Label Track" numlabels="11" height="253" minimized="0">
        <label t="1.69726544" t1="11.83946136" title="li:woodshed"/>
        <label t="11.92225480" t1="27.32183391" title="li:busting"/>
        <label t="20.79346939" t1="62.46764754" title="li:turntable"/>
        <label t="34.31787926" t1="43.54934739" title="li:changes the pitch"/>
        <label t="50.00723540" t1="62.46764754" title="a:audacity.soundforge.net"/>
        <label t="53.85713018" t1="62.50904425" title="img:audacity_logo.png"/>
        <label t="62.46764754" t1="62.55044097" title="off:ALL"/>
        <label t="76.70811855" t1="91.03138299" title="img:copy-paste.png"/>
        <label t="91.11417643" t1="109.90828642" title="li:copy menu item"/>
        <label t="110.15666673" t1="114.79309915" title="li:easily practice"/>
        <label t="114.79309915" t1="123.81758369"
               title="li:Choose File-&gt;Save Project As..."/>
    </labeltrack>

§

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

http://www.w3.org/2010/05/video/mediaevents.html

My Major Research Project

Aside

Reply

I came across the slide notes from a presentation that I was supposed to give, back in February 2013, about my major research project in grad school. The presentation—using designVUE as a presentation tool—didn’t go off as planned from the start, and with 2015 hindsight I see how parts of the script I found might only have made things worse!

The update below follows the same plot line, but retells the story in a way I think is more clear, and better showcases the major points I think should be up for peer-review and further debate.

About my MRP

My final “Major Research Project” (MRP) started out to be an HTML5 Media Player in a jQuery plugin, and ended up being about the ascendancy of divergent thinking, and the deprecation/impending obsolescence of the paper document and its technological metaphors (eg MSWord print layout, Notepad…). I said “documents” would have to be deeper and “thicker,” having followed Jean Lave’s ethnographic method back to Clifford Geertz. You have to be able to get a lot of meaning into a small amount of visual or perceptual real estate—multimedia and DOM/Ajax manipulation of interfaces on the Internet do that. I also proved that in 2010-13 there was already enough information on the Internet for an informal, self-guided learner to create accessible audio/visual synchronizations that run in a modern web browser.

I said the new metaphor already exists, it’s “applications.” These likely require different kinds of literacies beyond pencil/paper writing—code literacy, video literacy, design/user experience literacies… for examples.

So, MRP, take two—I designed a project where kids code stuff. At the time jQuery Mobile was pretty advanced but I got some kids (alas, a bit older than my J/I target group) to copy/paste code from the jQueryMobile demo site and make stuff that ‘looks really cool on my cell phone’ (now I know some kids doing node.js and angular.js, and they make way better stuff; they still either know or ‘totally get’ jQuery). But I didn’t have access to a classroom and the activity to this day has never received a thoroughly authentic test.

Take 3. The MRP morphed a third time. I mixed in social media. I used a mind map to link stakeholders in education and their interests. I proposed multi-aged, multi sector collaboration centered in schools. There’s a direct line from the Xerox-funded ‘cognitive apprenticeship’ school of the 80s to 2015 ‘design thinking,’ but today the recording and editing tools are becoming ubiquitous and everyday people are becoming ‘literate’ in their use.

The evidence is strongly in favor of ‘blended learning,’ which means face-to-face instruction and coaching (“scaffolding”) supported by technology. In today’s classrooms—21st Century by definition, as arguably should be understood by default—the Apprenticeship Model is emerging, renewed and refreshed by new, refreshing technology, and fresh new ways of leveraging it. “Instructional Design” of ‘modules’ gives way to holistic “Learning Design” that mixes human chemistry and plans for serendipity.

The Public Sphere is endangered; schools as community centers and education policies and practices derived from educators’ 50-year + head start in research-based and evidence-based pedagogy offer viable paths towards a democratic society of engaged citizens.