Category Archives: JavaScript

Mar 13

On Webmasters and PluginMonkeys (reprise)

Posted on by

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

Posted on by

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

Nov 01

21st Century Cognitive Apprenticeship: 4 Ways We Make Thinking Visible

Posted on by

Back in 2005 Dorian Peters posted a summary of Mayer’s Principles for the design of Multimedia Learning I’ve visited frequently. I read it again today through the lens of cognitive apprenticeship and made some connections. Two essential components of apprenticeship models and multimedia design are narration and its timing, which is probably why software applications like Adobe Captivate, PowerPoint, or PowToons contain various ways to synchronize the appearance of objects with audio, visuals and text. The framework and principles can help form a checklist to improve the Who, What, When, Where, and How of choosing what to include in learning environments, all of which illuminate two distinct aspects of the Why — a given that someone wants to learn the stuff, and our ability to assess that including something in specific ways — or not — helps achieve that goal.

Mayer (2001, 2003, 2005) presented research-based principles for the design of multimedia messages. His fundamental principle is the multimedia principle itself: people learn better from words and pictures than from words alone. Peters has organized the principles into sets:

  • Principles for managing essential processing  more»
    • Segmenting principle: People learn better when a multimedia lesson is presented in learner-paced segments rather than as a continuous unit.
    • Pre-training principle: People learn better from a multimedia lesson when they know the names and characteristics of the main concepts.
    • Modality principle: People learn better from animation and narration than from animation and on-screen text.
  • Principles for reducing extraneous processing  more»
    • Coherence principle: People learn better when extraneous words, pictures, and sounds are excluded rather than included.
    • Redundancy principle: People learn better from animation and narration than from animation, narration, and on on-screen text.
    • Signaling principle: People learn better when the words include cues about the organization of the presentation.
    • Spatial contiguity principle: People learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.
    • Temporal contiguity principle: People learn better when corresponding words and pictures are presented simultaneously rather than successively.
  • Principles based on social cues  more»
    • Personalization principle: People learn better when the words are in conversational style rather than formal style.
    • Voice principle: People learn better when words are spoken in a standard-accented human voice than in a machine voice or foreign-accented human voice.
    • Image principle: People do not necessarily learn better from a multimedia lesson when the speaker’s image is added to the screen.
  • “One last principle,” the Individual differences principle.  more»
    Design effects are stronger for low-knowledge learners than for high-knowledge learners. Design effects are stronger for high-spatial learners than for low-spatial learners.

More about these in a moment. These principles illustrate a point of mine: that what Collins, Brown, Duguid, Newman, Holum et al. (see my posts here and here) bring with their theory of cognitive apprenticeship is a practical framework by which to apply such good principles. Conversely, the principles can guide the how, when, who, where, and why of specific situations. Consider the statement that teachers (who may often be more generally deemed “designers” of learning experiences) should show the processes of the task and make them visible to students (Collins et al.., 1991:). The common root of processes and processing reveals the relationship. The set of essential processing principles informs the design and planning stages, with a strong nod to individualization. Extraneous processing are filters and fine-tuning strategies. Both sets speak to content, method and sequence in Collins’s language. The fourth member of that set in cognitive apprenticeship lingo is sociology, and Mayer offers guidance here as well.

I’m going to apply Mayer’s fundamental principle now and try to enhance this communication with narration and pictures. Maybe you’ve never thought of footnotes as technology before, but they are a highly developed device1, designed to make an author’s thinking visible.

I use this icon to exclaim or assert something. I assert that this is one way to make thinking visible. For a web site, it’s easy to use CSS to make a set of icons. available, as I’ve done for this one. Of course the meanings of the icons must be communicated throughout the community and a common understanding shared by those who use them. Press the letter N to open this “Note” showing my growing list. The letter U opens my Audio narration in which I discuss 4 simple things we’ve done within documents to make thinking visible, and how each can be enhanced with the 3 main Web technologies, HTML, CSS, and JavaScript.

Icons Used Here

  • Assertion 
  • Argument 
  • Audio 
  • Decision 
  • Web page 
  • Idea 
  • Issue 
  • List 
  • Idea Map 
  • – Con 
  • Note 
  • + Pro 
  • Position 
  • Rubric 
  • Video 

This icon is not in the original Compendium set. I added it because I thought it filled a need.

Using icons is another thing on my list. It’s not a new idea, but applying it specifically when managing essential processing, thinking about segmenting and pre-training (prerequisite knowledge?) while imagining and planning authentic environments, or striving to reduce extraneous processing throughout demonstration and coaching phases. A consistent icon set provides coherence by signaling and providing cues about the content. For more ways, roll your mouse over the list icon, or press the L key to open my List. Press N to open a Note displaying the list. Press U to open my Audio narration for this content.

  • Icon sets
  • “More »” links  more»
    More links reduce extraneous information and communicate which points you think are important.
  • Footnotes2
  • Narration & animation

§

    Footnotes:
  1. Anthony Grafton, in The Footnote: A Curious History (1999) points to men like Pierre Bayle, who “…made the footnote a powerful tool in philosophical and historical polemics; and Edward Gibbon, who transformed it into a high form of literary artistry. Proceeding with the spirit of an intellectual mystery and peppered with intriguing and revealing remarks by those who “made” this history, The Footnote brings what is so often relegated to afterthought and marginalia to its rightful place in the center of the literary life of the mind…” (cover notes).
  2. With JavaScript the eye never has to leave the main text. It can count them for you, too!

References

Clark, R. C., & Mayer, R. E. (2003). E-learning and the Science of Instruction. San Francisco: Jossey-Bass. Mayer, R. E. (2001). Multimedia Learning New York: Cambridge University Press. Mayer, R. E. (Ed.). (2005). The Cambridge Hanbook of Multimedia Learning. New York: Cambridge University Press.

Grafton, Anthony (1999). The Footnote: A Curious History, Boston: Harvard University Press, 241 pages.

IDEO (2011). The Design Thinking Toolkit for Educators, http://www.designthinkingforeducators.com/, 94 pages.

Peters, Dorian (2005). Mayer’s Principles for the design of Multimedia Learning, blog http://designerelearning.blogspot.ca/2005/09/mayers-principles-for-design-of.html retrieved 2012-10-10.

Sep 02

Audacity files are just XML documents, sooo…

Posted on by
I know it’s unlikely this particular solution—in which I use Audacity’s Labels Track interface to help me auto-generate HTML code I find tedious to write manually—will receive many “Wow! Just what I was looking for!” comments. It’s more about connecting dots. XML is like the universal translator on StarTrek, so if you have data in XML format it means you can easily get at that data and do anything else with it your heart desires. While I have access to leading proprietary audio applications that are appropriate for recording music, I use Audacity for all elearning narrations and voice-overs—the fact that it generates a valid XML document containing all the information about a project is one of the reasons.

I think the first time I intentionally opened a binary file with a text editor was probably using Notepad on Windows 3.0. “Gibberish” or “garbage characters” are ways most people I knew described what they saw there. But my curiosity to look further had the result that later, as a help desk assistant in the computer lab, I used the technique with one plain text editor or another to identify what program a file had been created with or to recover the essential text from a document that had become corrupted. Opening files with text editors was something that started as a curiosity but occasionally yielded other fruit… it became something I just do. By the time I first opened an Audacity *.aup file to find it contains not binary “gibberish” but well-formed XML I had received a training course in XML and had used XSLT to write a library catalogue management tool that was in use at the same lab, so I knew the discovery would come in handy.

When it was decided a 53 slide module I made was to be translated into 13 additional languages I found two very helpful applications for this bit of knowledge. The first, because I keep my projects in a MySQL database and identify every item on the storyboard by module, section, subsection, and slide, is that once the translations were loaded I was able to loop through a query and create a blank, properly tagged and labelled Audacity .aup file for every slide. The second is much more fun, so I’ll get the first one out of the way… I’m best with ColdFusion (CFML = ColdFusion Markup Language), but you can do this with PHP or any other language, just include or require the right libraries for parsing XML.

Create a new project in Audacity and save it as blank_project.aup. Open the file in any plain text editor (I like EditPadLite) What you do next will vary depending on what application server you’re using and how , but in ColdFusion my first go at it was pretty lazy. I put the entire file inside a cfsavecontent block, looped through a database query to get my information, plugged it in, and write it to the server’s hard drive. Of course that’s most practical if it’s also your laptop or desktop’s hard drive—I’ve done this with both Adobe’s wonderful (and free) ColdFusion developer version, and just recently with Railo, the open source CFML engine.(for PHP I’d use XAMPP, EZPHP or similar).

Your SQL will be your own, but it probably still helps to see mine…

SELECT * FROM allslides
 WHERE module = 'thisMod' AND lang = 'th-is'
 ORDER BY module_id, section_id, subsection_id, slide_id;

Loop through the query. n.b.: in XML it’s crucial to have no characters of any kind before the <?xml version="1.0" standalone="no" ?>When I said lazy, I meant it… to avoid trimming I just put it right after the opening cfsavecontent tag without a space or hard return (but if my source formatter tries to make it prettier I have to put it back). The variable “descript,” by the way, is a short human readable description I keep in the database so I don’t have to remember what slide hr101-B30 is, it comes out hr101-B30-keyconcepts. #SPEECH# is the word for “speech” in whatever language.

<cfloop query="myQuery"><!--- create a unique name for project,
                              file and data directory --->
<cfset thisProjectId = "#module_id#-#section_id##subsection_id##slide_id#-#descript#">
<!--- store the file in a variable --->
 <cfsavecontent variable="aup_file_contents"><?xml version="1.0" standalone="no" ?>
<!DOCTYPE project PUBLIC "-//audacityproject-1.3.0//DTD//EN"
 "http://audacity.sourceforge.net/xml/audacityproject-1.3.0.dtd" >
<project xmlns="http://audacity.sourceforge.net/xml/" projname="#thisProjectId#_data"
 version="1.3.0" audacityversion="2.0.1" sel0="0.0000000000" sel1="0.0000000000"
 vpos="0" h="0.0000000000" zoom="86.1328125000" rate="44100.0">
    <tags><!--- Replace #variables# with data from database --->
      <tag name="GENRE" value="#SPEECH#"/>
      <tag name="ARTIST" value="#MY_ORG#"/>
      <tag name="TRACKNUMBER" value="#currentRow#"/>
      <tag name="TITLE" value="#SECTION_TITLE# #SUBSECTION_TITLE# #SLIDE_TITLE# "/>
      <tag name="YEAR" value="#year(now())#"/>
      <tag name="ALBUM" value="#MODULE_TITLE#"/>
      <tag name="COMMENTS" value="(C) #year(now())#"/>
    </tags>
</project>
</cfsavecontent>
<!--- to save space, try/catch error-handling not shown --->
<cffile action="write" file="#DRIVE:\path\to\#thisProjectId#.aup"
        output="#aup_file_contents#">
<cfdirectory action="create" directory="DRIVE:\path\to\#thisProjectId#_data">
</cfloop>

That writes 53 files and creates 53 directories in about 3 seconds, well under a minute for all 13 languages if I place this loop in a loop of the languages. It saves me a lot of time.

My jSyncWithMedia plugin was a learning exercise for me, and I learned a lot. With jQuery it was easy for me to attach an “event-listener” to an HTML5 audio or video element’s timeupdate event, and create callbacks to change classes or run simple css animations depending on currentTime, even to enhance the display to show 1/10ths of seconds and get my timings more precise. But I knew all along no rational human would go through the tedious job of syncing all those items. It needs an interface, and while ideally that would be in JavaScript and built into the plugin—and perhaps one day it will be—the knowledge that an .aup is really just another a .xml brings out the laziness in me. You see, Audacity already has the exact interface I need… it’s the Labels track. I figure why not just borrow it?

The image shows the narration for a guitar lesson I’m doing in my own jSyncWithMedia-Alpha-1.0 plugin just because I want to. On the track labels I supply key:value pairs, where the key is always a valid html element (the “off:” key is ignored, but serves as a visual aid).

Showing Audacity's Labels track, spanning sections of audio, with values filled in

Audacity’s Labels track, spanning sections of audio, with values filled in that declare an element and its content.

When you add a label track and labels in Audacity you add <labeltrack> and <label></label> elements to the XML structure, with attributes for title, start time t and end time t1.

    <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>

That’s all I need to create all the code to put my syncItems in a <div id=”jSWM”></div> and run my plugin on it to create a presentation.

Here’s the CFML

<cffile action="read" file="#request.pathToXml#\bust_a_solo.aup" variable="myFile">
<cfscript>
    // a debug tool
    dumpIt = request.dumpIt; // default request.dumpIt;

    // validate audacity
    scndLine = listGetAt(myFile,2,chr(10));
    isAudacityFile = REFind('^<!DOCTYPE project PUBLIC "-//audacityproject', scndLine );

    // Initialize strings to hold list and image content.
    contentSyncItemsList = '';
    contentImgDiv = '';

    // a function to display html on the page
    public string function printHTML( html ){
        var theHtml = arguments.html;
        var theHtmlFormatted = replaceList(theHtml,'<,>','&lt;,&gt;');
        return theHtmlFormatted;
    }

    // a function because I'm anal about pluralization'
    public string function pluralizeOn(required numeric n, boolean endsInY="false" ){
        var number = arguments.n;
        var y = arguments.endsInY;
        var plural = '';
        if(not number is 1) {
            plural = IIf( y, DE('ies'), DE('s') );
        } else  {
            plural = IIf( y, DE('y'), DE('') );
        }
        return plural;
    }
</cfscript>
<cfif isAudacityFile>
<cfscript>
 myXML = xmlParse(myFile);
 myLabels = xmlSearch(myXML, "//*[name()='label']");  
 myNamespace = "jswm"; // ohrc etc.
 n = arrayLen(myLabels);
 public string function getWord(required numeric index)  {
   return  myLabels[index].XmlAttributes['title'];
 };
 public string function getOnTime(required numeric index)  {
   return  numberFormat(myLabels[index].XmlAttributes['t'],'9.9');
 };
 public string function getOffTime(required numeric index)  {
   return  numberFormat(myLabels[index].XmlAttributes['t1'],'9.9');
 };
 elements = structNew();
</cfscript>
<cfoutput>
<h3>There are #n# labels in the Audacity file     .</h3>
<cfloop from="1" to="#n#" index="i">
<cfscript> // get the key:value pair that describes the item, then split into key and value
    thisItem = getWord(i);
    thisItemType = listFirst(thisItem,":");
    thisItemValue = listLast(thisItem,":");
    elements.elementType[i] = thisItemType; // FTR, I'm not yet using these 4 structures
    elements.elementContent[i] = thisItemValue; //  
    elements.elementOn[i] = getOnTime(i); //
    elements.elementOff[i] = getOffTime(i); //
    switch (thisItemType){ // format this into the HTML used by jSyncWithMedia
         case "a" : // NOTE: I BROKE VARIABLES ACROSS LINES to fit
          elements[i] = '<li data-#myNamespace#-on="#getOnTime(i)#"
           data-#myNamespace#-off="#getOffTime(i)#"><#thisItemType# 
           href="#thisItemValue#">#thisItemValue#</#thisItemType#></li>';
         break;
         case "img" :  // NOTE: I BROKE VARIABLES ACROSS LINES to fit
          elements[i] = '<#thisItemType# data-#myNamespace#-on="#getOnTime(i)#" 
          data-#myNamespace#-off="#getOffTime(i)#" 
          src="#request.pathToImgFolder##thisItemValue#" />';
         break;
         case "off" :
          elements[i] = 'offList="#thisItemValue#"';
         break;
         default: // li  // NOTE: I BROKE VARIABLES ACROSS LINES to fit
          elements[i] = '<#thisItemType# data-#myNamespace#-on="#getOnTime(i)#" 
          data-#myNamespace#-off="#getOffTime(i)#">#thisItemValue#</#thisItemType#>';
         break;
    }

</cfscript>
<cfif not thisItemType is "off">
<p><code>#thisItemType#</code> element "#thisItemValue#" shown at #getOnTime(i)#, 
           off at #getOffTime(i)# <br>
   </p><cfelseif thisItemType is "off"><!--- OFF post-processed here
                         Pass 'ALL' or comma-list of ordinal element indeces    --->
<cfif thisItemValue is 'ALL'><!--- loop through everything  
           // NOTE: I BROKE VARIABLES ACROSS LINES to fit  --->
<cfloop from="1" to="#i#" index="x">
    <cfset elements[x] = replace(elements[x],'data-#myNamespace#-off="99"',
              'data-#myNamespace#-off="#elements.elementOn[i]#"')></cfloop>
    <cfelse><cfset myArray = listToArray(thisItemValue)><!--- TODO: if keeping 
           deprecated off type must change to regexp --->
    <cfloop from="1" to ="#ArrayLen(myArray)#" index="i"><cfset thisElementNo = 
 myArray[i]><cfset elements[thisElementNo] = replace(elements[thisElementNo],
'data-#myNamespace#-off="99"',
'data-#myNamespace#-off="#getOnTime((structcount(elements) - 4))#"')></cfloop>
</cfif>
</cfif>
</cfloop>
</cfoutput>

<cfscript>
    elCount = (structcount(elements) - 4); //  <!--- Remove number of extra keys --->
    liCount = arrayLen(structFindValue(elements,'li','ALL'));
    imgCount = arrayLen(structFindValue(elements,'img','ALL'));
    aCount = arrayLen(structFindValue(elements,'a','ALL'));
</cfscript>
<cftry>
<cfsavecontent variable="contentSyncItemsList">
<cfoutput><!-- #liCount# li element#pluralizeOn(liCount)#, 
               containing #aCount# link#pluralizeOn(aCount)# -->
<ul id="syncItems">
<cfloop from="1" to="#elCount#" index="i"><cfif elements.elementType[i] is "li">
       &nbsp; &nbsp; #elements[i]#</cfif>
    </cfloop>
</ul></cfoutput>
</cfsavecontent>

<cfsavecontent variable="contentImgDiv">
<cfoutput><!-- #imgCount# img element#pluralizeOn(imgCount)# -->
<div id="syncImages">
<cfloop from="1" to="#elCount#" index="i">
    <cfif elements.elementType[i] is "img">&nbsp; &nbsp; #elements[i]#</cfif>
</cfloop>
</div></cfoutput>
</cfsavecontent>
<cfcatch>
    <cfif structKeyexists(cfcatch,"Detail")><cfset d=cfcatch.Detail>
      <cfelse><cfset d=""></cfif><cfoutput>
    <div><h3>#replace(cfcatch.Type,left(cfcatch.Type,1),ucase(left(cfcatch.Type,1)))#
              type error.</h3>
    <h4>#cfcatch.Message# #d#</h4>
    <p>Sometimes an error here means the variable 
       <code><strong>elCount</strong></code> is wrong. Did you change the number of 
        <code>elements["elementName"][i]</code> keys and not alter 
<code><strong>line 79</strong></code>?</p></div>
</cfoutput></cfcatch>
</cftry>

<!--- and here's the fruit of all that hard work --->
<cfoutput>
<div>
#printHtml(contentSyncItemsList)#

#printHtml(contentImgDiv)#
</div>
</cfoutput>

<cfif dumpIt><cfset findLIValues = structFindValue(elements.elementType,'li')>
<cfoutput>
    <p>#liCount#</p>
</cfoutput>
<cfdump var="#findLIValues#" expand="no" label="findLIValues">
    <cfdump var="#elements#" expand="no" label="ELEMENTS">    
</cfif>

<!--- DEBUGGING stuff... drag it up into the dumpIt area as needed
<cfdump var="#elements#" expand="no" label="elements">
<cfdump var="#getLabels[2]#" expand="no" label="getLabels[2]">
 <cfset myLabels = XMLSearch(myXML, "//*[name()='label']")>   
<cfoutput>#myLabels[1].XmlAttributes['t']#</cfoutput>
<cfdump var="#labels#" label="labels">  --->

<cfelse>
    <h3>Fatal error</h3>
    <h4>This does not appear to be a valid Audacity file.</h4>
</cfif>

If I add jQuery and my plugin to the page and place the CFML in a div, call jSWM() on it, I’ve got a presentation ready to go, and I can tweak the timings or add and remove events in Audacity. I only need the ColdFusion or Railo server on my own computer, copy/paste the generated code anywhere.

Image of output, jSWM generated dynamically from Audacity XML

jSWM generated dynamically from Audacity XML

For me this approach has the added benefit of forcing me to visualize my scenes more thoroughly and in advance, to organize my storyboards according to my design and vision (not just make things up as I go along) and then to stay true to the design and vision.

Aug 15

The current “state” of WAI-ARIA adoption and its “role” in accessibility

Posted on by
March 2014 UPDATE 2014: WAI-ARIA 1.0 is a completed W3C Recommendation as of March, 2014. Check current status

The WAI-ARIA project began in the fall of 2006. ARIA stands for “Accessible Rich Internet Applications,” by which it means web-based applications using CSS and JavaScript to change page elements without reloading the page. ARIA provides a means for the changes to communicate with assistive technologies.

“…I worked with a web project manager who was unfamiliar with ARIA, …and ended up interviewing half a dozen upcoming young developers, none of whom had heard of it either! Had the Web Accessibility Initiative’s initiative failed, …was ARIA D.O.A.?”

It came to my attention at that time due to my involvement with a group of teacher educators at the Faculty of Education at York U, Toronto. I admit I wasn’t able to make a great deal of sense of it until they published a Primer and a guide on Authoring Practice in 2010, and even so it remains daunting. Yet I believe in ARIA and what it’s trying to do, and I know of no other meaningful solution in the works. So I was disappointed and somewhat baffled when at my job in 2011 I worked with a web project manager who was unfamiliar with ARIA, and then, in the course of the project, ended up interviewing half a dozen upcoming young developers, none of whom had heard of it either! Had the Web Accessibility Initiative’s initiative failed, …was ARIA DOA?

Jutta Treviranus is Director and Professor at the Inclusive Design Institute at OCAD University. She’s explained at length the many challenges faced by people with differing abilities even if they’re using assistive technology, which involve availability, cost and compatibility issues far more convoluted than many of us may imagine. I recently had the chance to ask her some questions about ARIA adoption, and she’s graciously allowed me  to share her answers (and they let my colleagues off the hook!). Continue reading →

Jan 10

ARIA adoption

Posted on by
Updated Problem mentioned her was fixed Nov 2013. …but I still can’t do the Show/Hide example here because the WordPress editor strips important attributes from <button> and <a> elements when you toggle from Visual to HTML mode. I got my Help rollovers working, though!Updated: see this post.

I don’t remember the details, but I stumbled upon the WAI-ARIA? project when it was a hatchling, and almost no one I knew had heard of it. It’s been over 2 years, the bird has left the nest, but it still seems to be flying under many people’s radar. It really should be an important piece in the designer’s repertoire. I’ve written about this at much greater length while I was doing an independent reading in Web Usability and Accessibility as part of my graduate studies. AJAX? messes with a web page’s “DOM”? in ways that are hidden from the user of the page by design. ARIA is meant to talk to assistive technologies and keep track of all such changes, communicating them to the software, or responding to custom designed hardware to do things those of us with so-called normal abilities take for granted. To do this, ARIA defines and then makes use of roles—e.g., this is a toolbar, this is a menu item; states—this panel is folded or invisible, this one is displayed; and properties—this menu has a drop-down, this one a pop-up.

Continue reading →