Ian, thanks for putting together all of these examples. I think my preference is for option three
which provides the most context and seems easiest to read and understand. I like the way you’ve incorporated the blue arrow, which makes semantic sense as well.
I’m sure I’ve seen other versions, but Jon Udell has at least one example of some annotations on his own website like yours too.
When it comes to the “conversation” side of what you’re looking for, I think the biggest piece you’re really missing and which some on the Hypothes.is side (except perhaps for Nate who may have a stronger grasp of their value after the recent IndiewWeb Summit) are apt to miss is that Hypothes.is doesn’t support sending webmentions. Presently you’re putting your data out there in a one-sided manner and Hypothes.is isn’t pushing the other side or any of the follow up back to you. As a result it’s operating as a social silo the same way that sites like Facebook and Twitter do. Based on their GitHub repository, I know that they’ve considered webmentions in the past, but apparently it got put on a back burner and hasn’t been revisited.
Ideally they’d want to have webmentions work in two places. It would be great if they could send webmentions of annotations/highlights to the original page itself, so that the site owner is aware that their content is being marked up or used in this manner. This also means that Hypothes.is could be used as a full-blown and simple commenting system as well so that those who aren’t using their own sites to write replies could use Hypothes.is as an alternative. The second thing it might want to do is to send webmentions, particularly for replies, to the original page as well as to any URLs that are mentioned in the comment thread which appears on Hypothes.is. This would mean that you’d want to add the permalink to your post back to the copy you put on Hypothes.is so that you and your website stay in the loop on the entirety of the conversation. In many senses, this is just mirroring what is going on in threaded Twitter conversations that get mirrored back to your WordPress website. [I’ll note that I think I’ve got the last of the moving pieces for this Twitter/WordPress workflow properly linked up in the past week.] Since Twitter doesn’t support webmentions itself, Brid.gy is handling that part for you, but in Hypothes.is’ case you don’t have any of the details coming back for allowing you to display the discussion on your site except by doing so manually. Doing it manually for extended conversations is going to become painful over time.
From an IndieWeb perspective, you’re primarily implementing a PESOS workflow in which you post first on Hypothes.is and then send a copy of it to your own website. Naturally it would be better if you were posting all the details on your own website and using the Hypothes.is API to syndicate your copy there for additional public conversation outside of the readership of your website. Unfortunately building the infrastructure to do this is obviously quite daunting. Since they’ve got an API, you might be able to bootstrap something webmention-like onto it, but for your purposes it would obviously be easier if they had direct webmention support.
It would also be wonderful if Hypothes.is supported the micropub specification as well. Then you could ideally log into the system as your website and any annotations you made could be automatically be published to your website for later storage, display, or other use. In some sense, this is what I’m anticipating by making explicit standalone annotation and highlight post kinds on my website. In practice, however, like you, I’d prefer to have a read, like, or bookmark-type of post that aggregates all of my highlights, annotations, and marginalia of a particular piece for easier future use as well as the additional context this provides. I suspect that if I had the additional tag within the Hypothesis Aggregator plugin for WordPress that would let me specify the particular URL of an individual article, I would have most of the front side PESOS functionality we’re all looking for. The rest will require either webmention or a lot more work.
I may have mentioned it before, but in case you hadn’t found it I’ve got a handful of posts on annotations, many of which include some Hypothes.is functionality.
Not itemized in that list (yet?) are some experiments I’d done with the Rory Rosenzweig Center’s PressForward plugin for WordPress. It allowed me to use a simple browser bookmarklet to save a webpage’s content to my personal website with a rel=”canonical” tag for the page pointing at the original page. (Here’s a good example.) Because of the way the canonical set up works within Hypothes.is, I noticed that annotations I (and others) made on the original were also mirrored and available on my website as well. In my case, because PressForward was copying the entirety of the article for me, I used the <mark> HTML tag to make the highlights on my page, but with Hypothes.is enabled, it also shows the other public annotations as well. (Use of the title attribute adds some additional functionality when the mark tagged text is hovered over in most browsers.)
In another example, I annotated a copy of one of Audrey Watters’ articles (after she’d disabled the ability for Hypothesis to work on her site, but before she changed the Creative Commons licensing on her website). But here I added my annotations essentially as pull-quotes off to the side and syndicated copies to Hypothes.is by annotating the copy on my website. If you visit Audrey’s original, you’ll see that you cannot enable Hypothesis on it, but if you’re using the Chrome extension it will correctly indicate that there are five annotations on the page (from my alternate copy which indicates hers is the rel=”canonical”).
In any case, thanks again for your examples and documenting your explorations. I suspect as time goes by we’ll find a more IndieWeb-centric method for doing exactly what you’ve got in mind in an even easier fashion. Often doing things manually for a while will help you better define what you want and that will also make automating it later a lot easier.