Logino, The Fate of Knowledge (2002). Mentioned in A Wylie’s talk at IIT on 4/17/09.
Protonotes, Comments, and Collaboration
Commenting on student web projects is never an especially graceful task. Because I ask my students to develop literacy in XHTML, CSS, and JavaScript, I’ve begun writing my comments amidst their source code–which is fine for source matters, but insufficient and confusing for comments on the visual aspects of their pages, interfaces, etc.
One technique I have employed in the past for interface comments involved the Pearl Crescent Page Saver extension for Firefox, which generates a PNG image of an entire web page (not just the portion visible in the browser’s viewport). I would then run that PNG image through Acrobat, generating a PDF that I could then use Acrobat’s various commenting features, particularly the sticky notes, to offer comments targeted to different areas of the page.
The problem, of course, was that this method only worked in Firefox. Where I really need this kind of commenting ability is Internet Explorer, which traditionally is the place where CSS layouts and other things fall apart for weird reasons (often easily fixed, though, by passing corrective IE styles through conditional comments).
Enter Protonotes, a web-based service that allows anyone to add sticky notes to a live web page, regardless (as far as I can tell) of the browser they use. Here’s an example with Twitrhet.
All that Protonotes requires is that users register for a free account, and add a couple of JavaScript calls in the head area of their documents (xxxyyyzzz) would be their actual group number assigned by Protonotes:
<!--XHTML--> <script src="http://www.protonotes.com/js/protonotes.js" type="text/javascript"></script> <script type="text/javascript"> <!-- var groupnumber="xxxyyyzzz"; --> </script>
I have gone the extra step on Twitrhet and pushed the body area down in the CSS, so that the whole page is visible even with the Protonotes toolbar expanded:
/*CSS*/
body.protonotes {
margin-top: 50px; /*Move whole page below Protonotes toolbar*/
}
But the real fun part is throwing in a little PHP and using a variable on the query string (in Twitrhet’s case, ?notes) and only activating the Protonotes code in the presence of that variable:
<?php
/*PHP*/
/*Check to see if notes is set in the $_GET array:*/
if(isset($_GET['notes'])) {?>
<script src="http://www.protonotes.com/js/protonotes.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var groupnumber="xxxyyyzzz";
-->
</script>
<? } ?>
Then, as an added measure to make that .prototypes class appear on the <body> to make the page drop 50px when Protonotes is active, I add:
/*PHP*/
<body<?php if(isset($_GET['notes'])) { print 'class="protonotes"'; } ?>>
If someone were to use a more secretive or less guessable variable, the Protonotes code could peacefully live on the page, and only be activated when necessary–a significant advantage for students and collaborative teams who’d rather not maintain two copies of their pages, while also enjoying the benefits of commenting through Protonotes.