Feb 26

The baby in the bath water?

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

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.

§

Mar 29

Instant gratification as intrinsic motivation.

“I learned HTML CSS and JavaScript exactly the same way I learned guitar—by stealing other people licks.” chord diagram, E major, first position.
I’ve said this a few times, but I’m coming to believe my point is largely being missed. I think if the point’s worth anything at all it’s incumbent on me—the communicator—to give it another try.

Continue reading

Mar 13

On Webmasters and PluginMonkeys (reprise)

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

Nov 04

Cognitive Apprenticeship and the 21st Century Web Application

In my previous post I (literally) talked about a long historical need to provide more information than a written document can physically hold. I pointed out how footnotes have accomplished this, how these and such familiar devices as front-page headlines and teasers have evolved, and continue to evolve in the modern web-browser. I’m doing this to demonstrate how Web browsers and the three main (and open) technologies—HTML, CSS and JavaScript—can support Cognitive Apprenticeship’s goal of “making thinking visible.” Ultimately I hope to encourage classroom teachers to leverage this generation’s immersion in technology in new ways that lead not only to their own empowerment but that of all who become involved in 21st century learning environments that can stretch past boundaries of space and time.

I began to show some actual code1 [to see my “footnotes,” press the number; to close them, click or press Esc] which creates a style that can be applied at the paragraph or section level to assign an icon signalling its content or relevance to the document. I used narration, in the form of recorded audio, with pictures timed to coincide with words—a concept that is the basis of almost all elearning software, TV advertising, documentary film, even political propaganda—to explain and demonstrate what I was thinking about the topic and the technology. If you’ve followed this Cognitive Apprenticeship from the beginning I hope you can start to see now how I’ve intentionally set out to contrast a traditional academic style with an increasingly Web-enhanced one.

In so doing I used technology to solve some problems—and predictably introduced several more, demonstrating another potential technology holds, one I suspect we all have experienced. Software often contains bugs; preparing a lesson plan using pen and paper, or presenting using a comfortable and familiar paradigm such as a slide show with handouts one often feels more in control. It’s often too easy for the technology to become the focus, and not in a good way. But while many classroom teachers tell me anecdotes that conclude with a student fixing something, far fewer tell me they’ve learned to embrace that as a strategy, and are willing to jump in the deep end head first, with ample faith that together they’ll tackle whatever obstacles arise. It’s my personal goal to foster that confidence and empower educators to create such environments. Indeed, I feel there’s a certain urgency, not just for individual teachers or the profession, but for the future of public education itself.

Ursula Franklin, in her famous 1989 Massey Series lecture, noted the changing role of technology and important ways it was changing the role of technologists, distribution of labour, and the balance of power, while in her view shrinking the public sphere.

The situation in the classroom at the interface between the biosphere and the bitsphere is but one facet of the situation in the workplace within the same realm. In fact, often even the designation of workplace is no longer appropriate. Not only do new technologies, new ways of doing things, eliminate specific tasks and workplaces… but the remaining work is frequently done asynchronously in terms of both time and space.
— Ursula Franklin (1992:172)

Her distinction between what she identified as prescriptive approaches2 versus holistic3 ones led to a concern that not working together in the same space causes “opportunities for social interactions, for social learning and community building [to] disappear.” (Franklin, 1992:172). A neoliberal market model of education is paired with a neoconservative social model that work together to “change people’s understanding of themselves as members of collective groups” (Apple, 2009), a course at odds with public education’s heritage of citizenship-, character-, and democracy-building. An aggressive and well-funded movement is under way that “supports marketisation through its clear preference for incentive systems in which people are motivated by personal, not collective, gain rather than by the encouragement of social altruism. Yet, the tradition of social altruism and collective sensibilities has roots just as deep in our nations, and its expression needs to be expanded, not contracted.” (Apple, 2004; Apple, 2009).

Neither of the above authors in the works cited alludes to what I believe can only be described as a new literacy for the 21st century: fluency in coding and code. At Occupy Wall St. the techies “[built] websites, put out messages, manage[d] the ebb and flow of information about the occupation on the Internet.” (Judd, 2011) A year later “TechOps,” as the New York contingent of web-developing occupiers call themselves, built and maintained the website for the Sept. 17 anniversary events. They put together a whole host of other underlying technical infrastructure… TechOps-built database software sits behind a system to match people who needed a place to stay during the demonstrations with people who had space to offer […and built…] what has become a broad suite of web tools built specifically for Occupy activists. Using their own flavor of WordPress’ multi-site functionality, TechOps can facilitate sites like S17NYC.org and allow individual movement groups to maintain their own web presences themselves.” Those who code may have a special understanding of the saying “free as in beer, but not free as in speech” (Judd, 2012).

Franklin, in 1989, was perhaps just a bit too early to fully anticipate the complex socio-politico-economic forces that would result in Twitter, a commercial start-up, empowering the Arab Spring. But Apple’s 2009 essay describes in full the motives and methods we see manifesting in high-stakes testing and redistribution of public resources to private concerns that are part of many ed “reform” efforts. I believe there’s a need for further research into the roles of social networking within emerging communities of practice, but also its influence on communities of practices’ emerging. In the meantime, code literacy is something that’s fun and beneficial to pursue, which you can leverage within many learning environments to help create the kinds of authentic, situated opportunities for discovery and knowledge construction project- and inquiry-based learning models are touted for. And while you probably don’t have the next Dimitri Gaskin in your class, you almost certainly have more expertise available than you’ve imagine or tapped.

All of the jQuery JavaScript scripts I’ve used so far are my own—and all of them contain flaws that were part of my learning process. Currently my Footnotes script works with this WordPress theme (or any theme that uses <article> elements for posts), I simply hit the HTML tab on my WordPress editor and create a <sup> element of class=”footnote” and down below a numbered (“organized”) list of class <ol class=”footnotes”></ol> and it automatically creates a rollover/keypress on the number. In this version I have to hard code the numbers in the <sup> tags… so if I move a list item or add one in between I have to manually renumber. One of the first tasks for a group could be to improve on that. If a classroom or school has a blog or web page, and they use it for student writing, and they encourage using such common conventions as footnotes, then it might be an intrinsically motivating project to design and implement something that facilitates and modernizes the process in a way students can own.

My footnotes script is part-way to becoming a jQuery plugin. You may or may not know what that is, but I’ll wager you know someone who does. It’s only part-way done because I’m  trying to think more like a programmer so I’m learning about design patterns and building in stages. The Smashing Magazine article in that link contains links to all the information one needs to finish it. In my next and hopefully final instalment I’ll talk about a project I have in mind that I think holds benefits for classroom teachers who are still tentative about technology and/or looking for creative ways to include it, one that demystifies programming and the coding culture, and hopefully creates space in the classroom for activities and knowledge that may already be taking place informally outside, extending access and creating new opportunities.

§


    Notes:

  1. For example, if you provide the path to a 36×36 pixel image representing a rubric or video:
    .bg-rubric {
    background: transparent url(“..path_to/rubric.png”) no-repeat 3px 3px; padding:3px 9px 3px 36px;
    }
    .bg-video {
    background: transparent url(“..path_to/video.png”) no-repeat 3px 3px; padding:3px 9px 3px 36px; }
  2. See for example, Harvard Business School’s aggressively disruptive, top down, market-model for education reform in Christensen et al., 2009
  3. See for example, Harvard Graduate School of Education’s “Beyond the Bake Sale: A Community- Based Relational Approach to Parent Engagement in Schools,” (Warren et al., 2009), PDF available from The Logan Square Neighborhood Association http://bit.ly/nYwbjK accessed 2012-11-03

References

Apple, Michael W. (2004). Ideology and curriculum (3rd ed.). New York: Routledge.

Apple, Michael W. (2006), Understanding and Interrupting Neoliberalism and Neoconservatism in Education, Pedagogies: An International
Journal
, 1:1, 21-26

Christensen, Clayton; Johnson, Curtis W.; Horn, Michael B. (2008), Disrupting Class: How disruptive innovation will change the way the world learns. New York: McGraw Hill, 288 pages.

Judd, Nick (2011). #OWS: Tech-Savvy Occupiers Hope to Open-Source a Movement, http://techpresident.com/blog-entry/ows-tech-savvy-occupiers-hope-open-source-movement, accessed 2012-11-03

Judd, Nick (2012). How Free Software Activists are Hacking Occupy’s Source Code, accessed at http://techpresident.com/news/22867/how-free-software-activists-are-hacking-occupys-source-code 2012-10-23

Osmani, Addy (2011). Essential jQuery Plugin Patterns, http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/, accessed 2012-11-03

Franklin, Ursula. (1992, rev ed. 1999) The Real World of Technology. (CBC Massey lectures series.) Concord, ON: House of Anansi Press Limited, 206 pages.

Kreiss, Daniel and Tufekci, Zeynep (2012). Occupying the Political: Occupy Wall Street, Collective Action, and the Rediscovery of Pragmatic Politics (September 17, 2012). Cultural Studies – Critical Methodologies, 13:3 (Forthcoming). Available at SSRN: http://ssrn.com/abstract=2147711

Warren, Mark R.; Hong, Soo; Rubin Leung, Carolyn; Uy, Phitsamay Sychitkokhong (2009). Beyond the Bake Sale: A Community- Based Relational Approach to Parent Engagement in Schools, Teachers College Record Volume 111, Number 9, September 2009, pp. 2209–2254