Jun 18

Bookmarklets for fun and practice

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

What can I learn playing with bookmarklets?

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

Where to start?

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

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

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

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

The imagination runs wild

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

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

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

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

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

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

Few limits

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

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

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

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

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

§

  1. This was updated since original publication and now uses id="pagelet_side_ads" and display:none;
May 28

Make Captivate HTML5 Work in Firefox

screen shot of error dialogWith the slow but steady demise of Flash, SWF-based elearning software makers, like Adobe, have been “cramming” (a word from disruptive innovation) HTML5 into their products, like Captivate (I’m using v6.1), to keep up. Because the HTML5 spec itself is still growing in inconsistent and at times uncertain directions there are bound to be holes and gaps in the implementations. For Captivate 6.1 the first one I encountered was the “This browser does not support some of the content…” error I got when I attempted to view my HTML5 output in my browser of choice—Firefox. It was version 20, and I know Firefox has supported HTML5 audio and video tags since version 3.5 so it had to be something silly. In the proprietary software world that may mean license issues, and so it does with Firefox (Free, Open, Libre software) and the MP3 (not so much). Captivate exports only MP3s, Firefox (and Opera) play only OGGs. So until Adobe offers a checkbox on the Publishing page you can do the following, or hope your visitors use only IE, Safari or Chrome—as the majority probably do… but we’re big on inclusion around here so let’s not leave anyone out!

I quickly ascertained it’s the MP3-only audio export preventing Firefox from doing Captivate sound. As you probably know, some browsers do MP3, others do OGG. You may even remember why. Fortunately that’s the only reason Firefox won’t play Captivate HTML5. All you have to do are

  1. create OGG versions of each MP3 and
  2. edit two JavaScript files to
    1. detect Firefox
    2. provide the appropriate file extension and
    3. suppress the error message.

Simple enough you say, but I figured I may as well google it and see what others have done. I did, and found all the hints I needed in hermit9911’s answer to this post (scroll down a few). hermit just needs OGG. I want both to work depending on browser, so I had to improvise on hermit9911’s theme. Here are the steps I ended up following.

1. Create OGG versions of each MP3

There are many programs that convert audio formats. I used Audacity’s “Chains” feature (macros). Since I’ve met many more people who know of Audacity than know of its Chains feature, I’ve done a separate screencast of that process:

Made using Camstudio (screen video), iPhone (narration),
Audacity (mix/process audio) & Sony Vegas (mix/render video)
Can you suggest a good open source video editor? Please use the comments with my thanks!

2. Edit two JavaScript files

detect Firefox

Project.js is found in the root export folder. It’s “minified,” which means line breaks and extra spaces are removed and it’s pretty hard to read, but we can add our tiny bit of code right at the beginning. I don’t see any need for feature detection in this case, so I settled for user agent:

var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 
// converts the string to lowercase then creates Boolean, 
// true if it finds 'firefox' anywhere in the name. Otherwise : false 

provide the appropriate file extension

Once you have a question that can be answered yes or no the best syntax is usually as follows:

myExtension = is_firefox ? '.ogg' : 'mp3'; <br>// Yes? Send '.ogg' No : send '.mp3

Then just search & replace existing .mp3' with '+myExtension Everything between ”s is literal, myExtension is variable depending on the answer to is_firefox?yes:no;

UPDATED: If you have Administrator rights and access to the Adobe Captivate install folder you can add these changes to the template Captivate creates the file from. Otherwise both files are overwritten every time you publish, and you have to repeat all these steps. If you can access and edit
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js
use that file instead (path to install folder will differ depending on operating system and installation) otherwise follow the instructions as written:
Next, open [PublishFolder]/assets/CPHTML5Warnings.js and make the two additions suggested by hermit9911. (I looked up the earliest version of Firefox that supported the audio tag and replaced hermit9911’s xx with 3.5).

this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5; // sets minimum version, used in code below

suppress the error message

Finally at the very bottom of the file you will find a series of IF and IF ELSE statements… add the following after the closing semicolon of the last one:

else if((this.browser == this.BrowserEnum.FIREFOX) <br>  &amp;&amp;<br> (this.browserVersion &gt;= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION )) <br> lSupported = true;

Browse to index.html in Firefox, press Play and watch your movie. With a bit of practice this will add all of about 5-10 minutes to your publishing routine. Alas, you’ll have to redo Project.js—and convert all your audio files— every time you publish.

As an extension activity, make this work for Opera (yes, you can use find/replace but watch case-sensitivity. Do each separately… firefox/opera and FIREFOX/OPERA). Use flow control instead? (Hint: yes) Look back at the code above and explain why you need to do that. Would you change the variable name? To what?

My entire solution instructions and code snippets
(including my answers to the extension questions)

/* ADD TO TOP OF Project.js */
var wantsOggsOverEasy = ((navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (navigator.userAgent.toLowerCase().indexOf('opera') > -1)), myEXT=wantsOggsOverEasy?'.ogg':'.mp3'; 
/* nb comma/semi-colon usage - I declared 2 local vars in 1 dec */

/* This is the text to search for
   .mp3' and change it to '+myEXT
  EXAMPLE
  FROM: src:'ar/Mouse.mp3',du:182
       TO: src:'ar/Mouse'+myEXT,du:182

IF you have Admin privileges find the Captivate install folder and edit the warnings file found in
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js. Otherwise you can save these changes in a safe place and you'll need to replace [PublishFolder]/ar/CPHTML5Warnings.js in the published location every time you publish. (Project.js is generated programmatically by the publishing engine, so to the best of my knowledge it must be fixed after each publish, also protect your OGG files.)  */

/* In CPHTML5Warnings.js 
(somewhere between lines 19 and 20) non-destructively ADD:  */

        this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5;
        this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION = 10;

(approximately line 112) AFTER final 
          lSupported = true; AND BEFORE

          return lSupported; non-destructively ADD 

		else if((this.browser == this.BrowserEnum.FIREFOX) && (this.browserVersion >= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION))

            lSupported = true;	
		else if((this.browser == this.BrowserEnum.OPERA) && (this.browserVersion >= this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION))
            lSupported = true;

§

N.B. Post was edited for clarity since first publishing.

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.

§

Apr 06

Situating the “WebApp Maker”

My project within a project within a project was accepted. I’ve got some final edits to make and constructive criticisms to apply, and I’ll receive my M.Ed. in June. But the best news is, I’ve got a friend with a class who are up to the challenge, we’re working out details to actually build mobile-friendly web apps. But wait! There’s more! I’ve just been tweeting with PLN interested in this and/or similar ideas. I’m quickly going to summarize some of the constructive criticisms I’m talking about, and in so doing reveal what I think comes next, at least for me.

The nature of this thing is you can pick and choose what parts might be useful to your own endeavors, or join in and help set the course of this one, branch off on your own at any time, or lurk and watch what happens to the rest of us.

It does not require Internet, only computers. The experience will be better if computers can share a network; Internet makes it all much easier, especially such rewards as viewing your work on smart phones and sharing with family/friends.

Framing the activity

The project needs a goal—context and boundaries. A simple instant gratification version of this activity can be done if each participant has an image of themselves and 2 or 3 documents of some kind, for example assignments… poetry, written work. It might take the shape of About Me, or My Work in Grade x. In my imaginings, participants have something with their picture and things they’ve created inside it, and they have just grasped a sense of how to control those things using buttons and links. I believe if I do that correctly, they want to go further and do more, and they tell me so. I prepare for that.

Each student needs a USB stick, even a 1GB will do. If you have limited computers you need to set up timesharing; the USB travels with the participant. The only premise I have so far for a group version is whatever the students do individually, the teacher compiles as a class page. Teacher should do the individual activity up front, but you’ll be learning with the class, too. You should hunt down things you need and people who can help—the class’s PLN. A “thicker” (rife with teachable moments, methods, strategies) scope might be My Community, and an extension Project-Based learning situation could have reporters, videographers, copy editors… the class decides the organization’s structure and “business model,” create jobs and hires each other to fill them.

I used mind-mapping software to chart this out, my first maps are very clear to me, but to few others. I’ve been given a newer version of the easier one and I’ve already made cleaner better maps. I’ll be replacing and rearranging things here for a week or two. designVUE is good at collecting resources and showing how dots connect—try it you might like it

I’ll respond to comments on this blog, on this or any other post, but I’ll also welcome and incorporate ideas of others. I may add to this post, and I’ll write Updated at the top if/when I do.

§


Footnotes

  1. Entrepreneurship is a 21st century competency in both C21 (Canada) and P21 (US).

 

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

Dec 09

Educators see Twitter at the hub

Twitter infographic

Authenticity in learning can be understood as the extent to which the learning is situated within a practising community of people who share some united interest in the knowledge being sought or produced, and a common idea of its meaning and value, “…who share a concern or a passion for something they do and learn how to do it better as they interact regularly” (Wenger, 2006) Sociology is an integral element of the authentic learning environment.

  On Twitter’s 140-character limit…

Several authors have argued that rather than this being a drawback, this characteristic offers benefits for learning. Educause (2007) suggests this helps develop skills “in thinking clearly and communicating effectively”. Rankin (2009a & 2009b) notes that this forces students to focus on a central point. Dunlap & Lowenthal (2009) argue that communicating in this style is a “professionally useful skill for students to develop”.
…However this aspect of Twitter, …has also been blamed by academics for contributing to declining English writing skills (Kelley 2010).

There is now plentiful evidence that a growing number of educators, and many more who think of themselves as stakeholders in education generally, are using social networks, and more than a few sites and software applications have emerged to compete for parents’, students’, teachers’ and administrators’ attention, everywhere, all at once. There are powerful new ways to create, manage, and share your own resources and an overwhelming number of great resources available from others. While a site like Pinterest may drive a great deal of traffic to blogs the micro-blogging tool Twitter’s unique feature set has helped establish its role at the hub.

3 Ways Social networking impacts and supports learning

Social networking platforms and tools are already impacting and supporting learning in at least three ways. First, social networking itself is a tool with a skill set for learning. Second, social networking can be used to deliver and enhance curriculum. And third, social networking can be utilized to create learning experiences in collaboration with others. Teachers find individual articles such as 30 Twitter Hashtags For Science Lovers and 50 Ways to Use Twitter in the Classroom immensely helpful, but if my own timeline is an indication, they do add up! Most of probably hundreds of such no-doubt wonderful ideas often get swept away in the “digital noise.” A classroom teacher’s bookmarks can include Edmodo, YouTube, and Facebook, Teachhub, PBL-Online and Edudemic, but it’s increasingly clear that Twitter is the choice to join these spokes at the centre.

New Twitter users commonly describe an experience curve that travels from scepticism, trial participation, conversion (getting it), dramatically increasing usage and connections (Levine 2007, Stevens 2008, Seimens 2008, Shepherd 2009) through to potential overload (Sierra 2007).

Teachers use Twitter to plan field trips, chat with industry professionals, connect classrooms, facilitate research, post supplementary materials, to engage students in the classroom, parents outside the school, and colleagues and administrators in networks they can design according to need and interest.

It’s not surprising to learn that “design of teaching strategies and practices related to virtual engagement and collaboration is instrumental to achieving positive educational outcomes,” but some early research suggests not all are equally ready, that students may need “…to improve their capacity to initiate self-directed, collaborative practices as a means to more effectively take ownership of their learning” through incorporating new technology. (Junco, Elavsky, and Heiberger, 2012). Similarly for teachers, learning to use Twitter to grow an effective Personal Learning Network (PLN, a.k.a. Community or PLC) is not the same as learning to use it as a tool in a learning situation, in or out of the classroom.

What you Tweet, when you Tweet it, the length of your Tweets, whom you retweet and who retweets you are all factors in getting established on Twitter. You can over-use hashtags or under-use them, and good use of images in tweets can make your tweets up to twice as engaging.

TweetStats is a service that reveals a great deal of information about how people actually use Twitter. One tab shows how many Tweets happened, when, in reply to whom, from what kind of device, and top retweets for a particular user. On another you can visualize the data as a word cloud1 (called a TweetCloud, naturally) of top mentions and topics, and once you’ve done so for an account you can track follow and unfollow stats from that point forward. If you have an idea of a rubric2 demonstrating engagement and on-task behaviour, or other standards you wish to establish, either for your personal learning community or a learning experience you design, TweetStats can already report some enlightening information. It seems to me this is a direction in which educators can push for development, or show initiative by launching their own open source projects.

As a stakeholder in on line education, what other sets of data would you like to see in statistical reports? Must diagnostic, formative and summative assessments be built in? How would you do that? What would it look like?

§


Notes

  1. From visual design, a word cloud is a form of weighted list, a visual representation for text data. Usually the importance of each tag, word or phrase being highlighted is represented by variations in font size or color.
  2. A rubric is a measuring tool that experience designers can use to assess participant learning and engagement. Using a set of criteria and standards directly tied to the stated learning outcomes, educators can assess each student’s actual performance. When a rubric is agreed-upon and communicated prior to the student’s work being completed, it serves as a model or exemplar, and makes the grading process clear and transparent.

Reference

Brown, J.S., Collins, A., and Duguid, P. (1989). “Situated Cognition and the Culture of Learning.” Educational Researcher, 18(l), 32-42.

Davis, Gordon B., Editor (1986) Understanding The Effectiveness of Computer Graphics for Decision Support-A Cumulative Experimental Approach, Communications of the ACM, Vol 29 (1) 40-47.

Dugan, Lauren (2012) How Frequently Should You Tweet? [STATS] posted October 30, 2012 on AllTwitter The Unofficial Twitter Resource http://www.mediabistro.com/alltwitter/how-frequently-should-you-tweet-stats_b30568.

Ferriter, William M. (2010), Why Teachers Should Try Twitter (Meeting Students Where They Are), Educational Leadership, 67(5) February 2010, pp 73-74;
[Available on line http://www.ascd.org/publications/educational-leadership/feb10/vol67/num05/Why-Teachers-Should-Try-Twitter.aspx, retrieved 2012-11-30].

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 [Early View, Article first published online: 1 MAR 2012 available from author’s site: http://reyjunco.com/wordpress/pdf/JuncoElavskyHeibergerTwitterCollaboration.pdf, retrived 2012-11-30]

Lave, Jean and Wenger, Etienne (1991). Situated Learning: Legitimate Peripheral Participation. Cambridge: Cambridge University Press.

Lave, Jean (1996). Teaching, as Learning, in Practice, Mind, Culture, and Activity (3:3) pp149-164.

Webducate [‘webducate.net’ website/blog] (2012), Twitter in learning and teaching – literature review http://webducate.net/2012/08/twitter-in-learning-and-teaching-literature-review/, retrieved 2012-12-03

Wenger, E. (2006) Communities of practice, a brief introduction, http://www.ewenger.com/theory/, HTML retrieved 2011-11-03 or http://wenger-trayner.com/wp-content/uploads/2012/01/06-Brief-introduction-to-communities-of-practice.pdf, PDF retrieved 2011-10-03.

Dec 02

Some best practices for posting infographics?

As often happens when we go searching the web for something, I ended up with something else, and learned something different than I started out to learn. I was searching for statistics about social media. I soon discovered how pervasive infographics have become, even compared to six months ago. When done well they are clearly very good at presenting data quickly and coherently. But there are some other things I expect when I go searching for data, and they seem to be as easily overlooked as they could be to include, if only we take the extra couple minutes to consider. I believe I’ve also seen some hints that with infographics it may even be easier to misrepresent and distort data than with such well-known devices as bar graphs, and well understood yet often repeated practices such as moving the origin to influence scale.Infographic

UPDATE: Accessible Image Maps (below, under Presentation)

From Wikipedia:
Information graphics
or infographics are graphic visual representations of information, data or knowledge intended to present complex information quickly and clearly.[1][2] They can improve cognition by utilizing graphics to enhance the human visual system’s ability to see patterns and trends.[3][4] The process of creating infographics can be referred to as data visualization, information design, or information architecture.[2]

Infographics aren’t new. The article above links their origin to cave paintings. I remember posters in my doctor’s office in the 60s that fit the description. Neither myself nor most of the adults in the waiting room would have been likely to pick up a peer-reviewed journal or seek out the study that uncovered the data being presented. There would likely be some fine print in the corner that indicated who prepared it, and you could track it down if you were interested. In the information age and on the World Wide Web that would be both lazy and unacceptable. For end users with sight, graphic presentation of data on the Web may be even more effective in some cases.
Whether graphs are actually superior to tables—in business decision-making, for example—has been a bone of contention for some time (e.g., Davis, 1986:46-7). I would suggest that on the World Wide Web the ability to select, copy and paste the text in a tabular display would in many cases be more satisfactory to many end users than an attractive display that was perhaps not as portable.

File Format

One “solution,” or perhaps just a happy accident, is that many infographics are posted as PDF files1. These can support embedded links, can be downloaded and printed maintaining the integrity of the original (and its copyright notices, etc.) and in many cases support copy/paste. PDF files can be made accessible; that becomes a process that must be included in the development cycle. As I’m writing this, it should be noted, only certain WebKit browsers—Chrome, Konqueror (Linux) and Safari  (Mac only)—display PDF files without additional software. Native and open formats like PNG are more universal. In my opinion SVG is the one to watch. It’s a “vector” graphic format, which means it maintains quality at any size. Most newer browsers will display SVG, and the spec contains some very exciting abilities of the “coming soon” variety, such as zooming, timecode and animation, that should greatly enhance our ability to organize and communicate the meaning of data. In either case you should put references, links, and anything else your visitor may want to know that isn’t in the data itself in plain text in a caption underneath. If you’re on WordPress there’s a caption box in its standard image upload form you can use. Regardless of platform this should be relatively easy and may go a long way to advance the usability and usefulness of your data.

Data Obfuscation

Infographics may contain mixtures of several types of data display, including graphs and tables. All of the abilities to distort and misrepresent data, whether intentionally or not, are therefor multiplied. A prime example is this infographic released by the US Republican Party to convince their constituency why they believed the Affordable Care Act was a bad idea. A combination of  illogical colour use, bad layout, poor choice of fonts and font-size, meaningless relative proportions and little white space make the system it claims to represent look overly complex, and to many perhaps, even ugly.

Republicans Party version of a graphic purported to represent ACA flowchartOn the site where this lives commenter Nick Dobbing, founder and principal designer at Wovenland Systems in Vancouver points out, “Notice all the bright primary colours in the chart, all the many different shapes, with no sense or order in the way they’re used. No help to anyone sincerely trying to comprehend the diagram… but boy howdy, it sure makes it look more complicated! And that’s all that this diagram is about.” When other designers redid the graphic with a commitment to display the information with integrity  it looks quite different.
Citizen designer Robert Palmer's graphic representing ACA flowchart

I encourage you to read Robert Palmer’s

Open letter to Speaker John Boehner from citizen designer Robert Palmer of California infosthetics.com

I’ve included only the portions relevant to my discussion.

  • I have removed the label referring to “federal website guidelines” as those are not a specific requirement of the Health and Human Services department. They are part of the U.S. Code. I should know: I have to follow them.
  • I have relabeled the “Veterans Administration” to the “Department of Veterans’ Affairs.” The name change took effect in 1989.
  • In the one change I made specifically for clarity, I omitted the line connecting the IRS and Health and Human Services department labeled “Individual Tax Return Information.”

Robert Palmer
Resident,
California 53rd District

Presentation

Many sets of data may form lovely graphics that are nonetheless too large and complex to fit a single browser window. In my experience a popular solution is to make the graphic longer, not wider. This is in keeping with a standard web mantra that vertical scrolling is okay, horizontal scrolling is bad. I’ve read recent reports that scrolling is less a big deal to those who’ve grown up on the mobile web, and it’s easy to find designers who agree. I’m a centrist in this case, I much prefer to get what I came for front and centre, but I’ll adapt and go with the flow—if it’s clearly a flow, not an eddy.

Accessible image maps are also worth considering. At minimum you must use ALT tag in the main image, and later in each hot spot. (Penn State, 2012)

The future

Designers are still discovering new abilities within HTML5. A feature with many yet-to-be-tapped applications is the new data attribute that can be applied to any element. Source code for a legacy tag that displays an infographic image might look like (press letter M to widen)
<img src="path/to/infographic.png" alt="Description of image">;
we call img the element, src and alt are its attributes. We can now add custom attributes that begin with data- and retrieve them easily with JavaScript (and even more easily with jQuery). For example,
<img id="myInfographicWithDataAttributes"
  data-mySource="Fouchaux (unpublished manuscript), Answer to the Ultimate Question of Life, The Universe, and Everything"
  data-mySourceURL="http://not-in-our-lifetime.com" src="path/to/infographic.png" alt="Description of image">

You can create a new object and retrieve the value
myData = $('#myInfographicWithDataAttributes').data();
What you called data-mySource and data-mySourceURL are now available as myData.mySource; and myData.mySourceURL

 

Conclusion

I think I’m getting some ideas about possible best practices for posting infographics. Please use the comment section to critique my suggestions and to offer your own.

  1. The most useful format when the graphic contains links, references end users may want to paste into a Google search, or the document is to be printed or downloaded is PDF1. However, currently only WebKit-based browsers: Chrome, Konqueror (Linux) and Safari for Macintosh can display PDF without additional plugins, PDF files can be large, and they require extra care to assure accessibility.
  2. Unless I absolutely need my audience to download and print I’d be inclined to post a PNG (all browsers) or SVG (all newest browsers) image and include links, references and citations in a plain text caption underneath.
  3. Mayer’s principles of multimedia design, especially concerning coherence and spatial contiguity, apply. Good use of whitespace, a sensible colour scheme are key, but these are indicators of good design in any medium. Illogical colour use, bad layout, poor choice of fonts and font-size, can obscure, distort, and render meaningless any set of data.
  4. I’m personally not a fan of long, skinny and scrolling. Unless the data demands otherwise I’d try to keep all the information visible at once. If scrolling is necessary there’s still general agreement that it should be vertical.

Further reading

The United Nations Statistics Division Knowledgebase on Economic Statistics offers these Making Data Meaningful guides that are “…intended as a practical tool to help managers, statisticians and media relations officers in statistical organizations use text, tables, charts, maps and other devices to bring statistics to life for non-statisticians. […] The first guide provides guidelines and examples on the use of effective writing techniques to make data meaningful. The second guide provides guidelines and examples on preparing effective tables, charts and maps, and using other forms of visualizations to make data meaningful. It also offers advice on how to avoid bad or misleading visual presentations. The third guide aims to help producers of statistics find the best way to get their message across and to communicate effectively with the media. It contains suggestions, guidelines and examples.”

PENN State’s Image Maps in HTML explains image maps and how to make them accessible.

§


Notes

  1. Note that PDF (in strictly speaking) is not an image format, but a scriptable rich text document format that can contain different types of multimedia content, including vector and bitmap graphics, audio, video, forms, intra- and inter-document hypertext links and a hierarchical contents listing. You should handle accessibility outside the web browser before attaching your PDF.

Reference

Davis, Gordon B., Editor (1986) Understanding The Effectiveness of Computer Graphics for Decision Support-A Cumulative Experimental Approach, Communications of the ACM, Vol 29 (1) 40-47. [PDF]
Dugan, Lauren (2012) How Frequently Should You Tweet? [STATS] posted October 30, 2012 on AllTwitter The Unofficial Twitter Resource http://www.mediabistro.com/alltwitter/how-frequently-should-you-tweet-stats_b30568

Penn State (2012) Image Maps in HTML, http://accessibility.psu.edu/imagemaps, accessed 2012-12-02

Educase Learning Initiative (2012) http://net.educause.edu/ir/library/pdf/ELI7052.pdf

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

Nov 01

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

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.