Tag Archives: teachtheweb

Jun 25

Quick fix for poor screen reader support of title attribute

Posted on by

As someone who remembers when ARIA was just an idea, I’ve spent a fair amount of time adding title="something descriptive" to many of the links, images, and possibly other elements on web pages I’ve authored and edited. But as developers began relying on authentic users of assistive technology to test their work, and those with differing abilities brought their knowledge and experience into the discussion and onto the Web, we learned we were wrong. Some of us knew that early on, or part of it anyway, and in the paralysis that may sometimes grip those unsure what to do, I stopped using title for anchor tags (i.e. links; <a>) altogether.

ARIA’s all grown up now

ARIA grew up and became the specification. The bulk of screen readers put their support there, and aria-label="making this meaningful" has supplanted the title attribute, freeing it to be what it is.

There’s enough explanation about this on the Internet already, so I’m going to keep this one very short. There are a lot of links in my pages that are in various states that reflected my limited understanding at the time, and maybe in yours too—live and learn! As I’m mostly working with WordPress sites these days, and WordPress has built-in jQuery, I’m sharing this snippet of code that takes text from existing “titles” and places it in an aria-label, or takes the linked text displayed to the visitor and makes it a bit more friendly and conversational than the typical screen reader default: “Link text. Link”

Most of my WordPress sites have a js folder in the theme I’ve chosen’s main folder at …wp-content/themes/theme-name/js, and in it a file called functions.js. Below is a standalone jQuery closure that should work in any site that has jQuery installed. In practice I took the indented part, between the first and last lines, and pasted it below the existing scripts in the existing closure. In Drupal you might put it in …/sites/all/themes/theme-name/js (and load it with a preprocess.inc). If you’re not using a CMS you probably need to wrap it in <script></script> tags, and make sure you place it below the prerequisite jQuery include.

For the blog you’re reading now, which didn’t already have a functions.js file in place, rather than stuff it into another I placed the following line below wp_head(); in header.php, found in the WordPress root folder.

wp_enqueue_script( 'my-custom-functions', get_template_directory_uri() .'/js/functions.js' );

This quick fix should probably be considered a temporary one, but it sure makes my pages sound better with ChromeVox, so I’ll carry on and wait for experts like Geoff Collis and others to tell me what to do next. 

(function($) {
  // If there's a title attribute, make sure it's copied to aria-label (for screenreaders)
  // If there's no title, elaborate on the linked text.
      var
        links = $('a')
      ;
      links.each(function(i){
      	if (this.title){
      		$(this).attr({'aria-label':this.title});
      	} else {
      		this.title="Go to " + $(this).text() + ".";
      		$(this).attr({'aria-label':this.title});
      	}
      });


})(jQuery);
Nov 09

Who’s directing whom?

Posted on by

Photo. The cart is placed before the horse, who also looks confused.I’d like to tell you about the first time I taught children how to make webpages, which was in 1993, while a “teacher candidate” in the province of Ontario, Canada. There was an Education Resource Centre with a computer lab, an odd collection of Mac II, Mac Classics, and the last working Commodore 64s I saw for many years, and a few early Windows computers. I caught on quickly and soon landed 10-15 hours of gainful student employment each week. I was then, and remain today, an educator first and a technologist only so far as it supports the learners’ objectives.

Placed in a classroom within the (now defunct) Etobicoke Board, I needed the help of the school’s IT director to make sure each computer in the ambitious early 90s computer lab had access to the software they need during an in between my weekly lessons.

In their 2014 report, People for Education find that fewer than 1% of Ontario schools lack technology but it wasn’t the case in the early 90s.

Pause here to picture such a lab, and remember (as you can read on fact sheet 5 of the Census 2001 Highlights Immigration to Ontario Internet site) the Toronto census metropolitan area (CMA) had one of the highest proportions of foreign-born residents of all major urban centers in the world. Ontario’s public schools always reflect the faces of the immigration realities of the moment1.

My host school in 1993 had something else that was very new in those days—it had an IT Director. As it turned out, the relationship we developed revealed a conundrum that persists in organizations of many kinds to this day.

Naturally my lesson was being evaluated, and my course directors and adjunct professor expected the learning design to reflect my ideas and interpretations of such things as the anti-racist philosophy of education the Faculty espoused—and that I’d be the one directing the learning. So it was, in my very first adventures in electronically enhance learning design I quickly discovered that I wasn’t looking for an IT director — what I needed was a “facilitator,” and all the support and deference in executing my ideas the subtle distinction implies.

The third vision is a progressive one. The personal computer is used to amplify human potential. It is an intellectual laboratory and vehicle for self-expression that allows each child to not only learn what we’ve always taught, perhaps with greater efficacy, efficiency or comprehension. The computer makes it possible for students to learn and do in ways unimaginable just a few years ago. This vision of computing democratizes educational opportunity and supports what Papert and Turkle call epistemological pluralism. The learner is at the center of the educational experience and learns in their own way.
—Gary S. Stager, Ph.D.

Among his first questions to me was, why would I want to teach “these children” to write webpages? Maybe he mistook the early 90s fish-eye monitors for crystal balls, because he looked into the third graders’ future and told me they were mostly destined to be “end-users.”

As time passed, under further scrutiny he revealed that he considered his knowledge a territorial matter, requiring security, restricted access, and various other protections. So in my earliest attempt at widening the spread of code literacy I quickly learned that the control of information technology would become a powerful definer of access and privilege.

Quite clearly these attitudes are manifestations of deficit thinking. The relationship that unfolded and the conundrum were as follows: I could not accomplish my goals without him, yet I most emphatically could not let him direct.

More importantly, my grade 3 students could not afford to let him decide their computer science futures, or label them “end-users” with a derogatory connotation.

In the intervening years I’ve seen universities barter and leverage software, educational discounts and lab access in contexts ranging from educational to purely political, from departmental restructuring to instructional design. Technology is not neutral. Technology is political. It is a freedom issue, and an issue of democracy.

…leadership for equity needs to incorporate inclusive procedures such as discussion, transparency, and community involvement as well as an honest treatment of substantive issues that matter (e.g. racism and sexism) […] If we really believe in the ideal of leadership for equity in education, then we need to be aware of the nature of the deficit mentality, its pervasiveness and its dangers. (Portelli , Shields & Vibert, 2007; Portelli & Campbell-Stephens, 2009)

Educators do not need to be programmers to empower programmers. Just as technology support staff must facilitate and help implement the ideas of educational leaders, those leaders must discern and facilitate the educational aspirations of the learners in their charge.

§

    Notes:

  1. At 16%, China, including Hong Kong and Macau, was the leading country of birth among people who immigrated to Ontario in the 1990s. It was followed by India with 9%, the Philippines with 6%, Sri Lanka at 5.2% and Pakistan at 4.5%. At the time, European immigrants to Ontario were mostly from Poland, Yugoslavia and Russia. Jamaica was the leading country of birth among the Americas. Somalia was the leading birth country in Africa. (StatsCan)

References

Polgar, Jan Miller (2010), The Myth of Neutral Technology
in M.M.K. Oishi et al. (eds.), Design and Use of Assistive Technology: Social, 17 Technical, Ethical, and Economic Challenges [pdf]

Portelli, John P., Shields, Carolyn M. & Vibert, Ann B. (2007). Toward an Equitable Education: Poverty, Diversity, and Students at Risk. Toronto, ON: Centre for Leadership and Diversity, OISE, University of Toronto.

Portelli, John P. & Campbell-Stephens, R. (2009). Leading for Equity: The Investing in Diversity Approach. Toronto, ON: Edphil Books.

Stager, Gary (2013), Technology is not Neutral – educational computing requires a clear and consistent stance blog post

Apr 22

What would a 21st Century “Lesson Plan” look like?

Posted on by

A cartoon-like self portrait Richard did in Corel Draw 3 while in teacher educationIn teachers’ college, I was the Lesson Plans guy. I had blue-rimmed glasses, hair down to my shoulders, I wore sweater vests, and one of the first things I ever did on the Internet was to share lesson plans. One of the first collaborative projects I was ever part of—using what began as a Scarborough (Ontario) Board of Education software initiative and remains with us today as OpenText’s FirstClass—to create lessons to be tried, honed and re-shared by other teacher candidates. I quite enjoyed that activity, and I think it’s time to do it again, with the rest of the Internet.

There was collaboration on line long before words like “blog,” “wiki,” “social network were coined…”

But Intranets were closed, connections were slow, hardware was expensive and there weren’t a lot of people who owned technology—even fewer who used it well in classrooms.

We had a template, we discussed it together, tried them in our host classrooms adapted and applied it iteratively, worked lessons into integrated units, collaboratively, in practice. Master teachers contributed advice—or innovative projects to extend lessons into —but it was all entirely student-instigated, student-designed, and/or student “moderated.”

Our activities were facilitated by technology, but they were pedagogical activities.

We knew the Web had power, we wanted to be literate—we wanted to read and write the web.

A button I made from a GIF created in Corel Draw 3.0Technology was there to support an idea or activity, and when an expert was needed to make the technology work it was “facilitating a situation” and “enhancing the learning environment”, not “directing technology.” In every situation it was student-centered. But we were also teachers: of the students in our host classrooms, often of our host teachers—always of ourselves, always of each other. We call reading and writing, “literacies,” and we generally expect to acquire them in great part by a process sometimes called “schooling,” but we see that it doesn’t always work, and in fact can often be gained by “learning” in other ways, generally not called “schooling.”

Fast Forward to the 21st Century

The Internet is open, connections are fast, hardware is less expensive and there are many more people who own technology—and still, we hear, too few who use it well in classrooms. This kind of learning is messy.

Video is ubiquitous… but not very interactive… they said

Teaching the Web in the 20-teens looks different in some ways, others not so much. Popcorn.js is an exciting set of modular scripts that add interactivity and creativity to web video.

Games and Gaming

Storytelling is a primeval human activity that is quite fundamental to pedagogy. All games tell stories. Learners persevere with games; learning happens. Gamification is an immensely important trend “as a means of motivation and learner engagement” and Conole quotes Gee, 2008: “The potential of gamification, however, goes beyond promoting healthy lifestyles and marketing strategies. Gamers voluntarily invest countless hours in developing their problem-solving skills within the context of games” and says 21st century learning will reflect Gee’s ‘situated and embodied learning,’ “…meaning a student is not just being taught inert knowledge, rather using facts and information as tools for problem solving in a specific context and solving the problem (Gee 2011).”

“There’s an app for that”

Educational apps and the platforms they run on have changed. Mobile is ubiquitous and it’s not as hard as you may think to make a web-based app, even take it to the next level, make it native. The Open Educational Resource (OER) movement is founded on “The belief that everyone should have the freedom to use, customize, improve and redistribute educational resources without constraint, […] However, open education is not limited to just open educational resources. It also draws upon open technologies that facilitate collaborative, flexible learning and the open sharing of teaching practices that empower educators to benefit from the best ideas of their colleagues.” Read the Cape Town Open Education Declaration.

Learning design looks beyond instructional design

Learning design is defined as an application of a pedagogical model for a specific learning objective, target group and a specifc context or knowledge domain. The learning design specifies the teaching and learning process, along with the conditions under which it occurs and the activites performed by the teachers and learners in order to achieve the required learning objectives. LD is based on the metaphor of learning as a play instatiated through a series of acts with associated roles and resources. The core concept of LD is that a person is assigned a role in the teaching-learning process and works towards certain outcomes by performing learning activities within a given environment
—G. Conole, K. Fill (2005, pg. 5)

Learning design is an holistic praxis (Conole, 2014), the planning and executing of serendipitous situations within authentic contexts, that are controlled to enable the sought outcomes (Silver, 2011). Increasingly, the learner seeks the outcome. A learning design that includes multiple participants is increasingly expected to cater to individual learners (blogosphere, incessantly).

The Learning Design Toolkit has explored and created collaborative tools for designing active, situated learning. The short clip, (originally part of my contribution to a group presentation on cyberethics and Ursula Franklin) is meant to imply that the hard work of building shared understanding is generally worth the inevitable extra effort. Communication is a 21st century competency—why would the hard work to reform schooling be any different?

21st-century lesson plan learning design

I believe Aaron Silver, in his 2011 blog post The Fundamental design of learning activities, plotted a straight course from instructional design practices that seem overly prescriptive in the age of social networking and on-demand learning objects, to a more appropriate framework and in doing so reminded us, “learning is not a noun.” In a 21st-century learning design the activity must be at the center of everything. It appears you should start with a clear idea of what is to be achieved, and then create the situation in which that can happen, choosing participants and experiences that support the intended outcomes, and strategically placing them in order.

Graphic. Activity at the center of boundaries (conditions), content, context, and participation. 

Source—Aaron Silvers (2011)

Even documenting such activity can be much different in the 21st Century. How do video, blogs, and photo sites affect the recipe? 21st century activities might look like Heidi Siwak’s blog—like this. But if the ‘this’ is a “messy” learning activity, do a on an ‘app’ metaphor, or the bubbles of mind maps offer some helpful closets to stash our ‘mess?’

Can organizational change happen quickly enough to allow teachers such as Heidi, and students such as hers to flourish, or will she have to wait 15 years as others have?

In my post, “CompendiumLD for Learning Design,” I showed a “mind mapper” that has collaboration tools built in. In “Can (messy) mind maps enable tidy linear strategies within messy situations?” I show the danger of getting too thickly into context (top right image) and what I believe Aaron Silvers’s simple graphic becomes when you start adding real activities and participants (see images 1-6, created with another mind mapper, designVUE).

Image. mind map

§

Inspiration

Michael Faustino Deineka

The Faculty of Education at York University

Reference

Collins, Allan; Brown, John Seely; and Holum, Ann (1989a), Cognitive Apprenticeship: Making Thinking Visible, American Educator [PDF].

Conole, G.; Fill, K. (2005), A learning design toolkit to create pedagogically effective learning activities, Journal of Interactive Media in Education 2005(08). [PDF]

Conole, Gráinne (2014) Reviewing the trajectories of e-learning, blogged chapter from forthcoming publication. Or start with my shorter overview [HTML]

Silvers, A. (2011) The fundamental design of learning activities. [HTML]

Siwak, H. (2014) Creative solutions are no accident [HTML]

May 20

Visual Understanding Environment (VUE) as a presentation tool

Posted on by

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?

Posted on by

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

Posted on by

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!

Posted on by

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.

§