SlideShare a Scribd company logo
The big conversation
Designing for open annotation | Mark
Barratt
Annotation as conversation
About annotation
Manuscript and print
The web and e-paper: groping towards
conversations
First attempts at a design language for
open annotation
Ways forward
About annotation
Footnote: endnote, reference
Gloss: explanation, translation
Aside: sidebar, call-out, digression
Corrections and comments on drafts
Comments by readers
Study notes
Manuscript
as semi-
public
conversation:
Aristotle’s
Physics
1280-ish
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Print
narrows the
scope
From conversation to reference
The big conversation: open annotation in manuscripts and the web
New forms for new media
Proof corrections and comments
Word
Acrobat
Paper plus!
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Web-page comment streams?
Web documents copied print
annotation role and design
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Doing it well:
write an app
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Notes added by readers
Need to
Mark text while reading
Add a note
Save the note for later
Spot the note location while reading and
read it
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Open annotation adds user needs
Need to
Mark text while reading
Add a note
Save the note for later
Spot the note location while reading and
read it
Sort/search/select notes
See who wrote the note, find out about
them
Respond to it
Public or open annotation
Requires
Standards: semantics (what sort of note
is this?)
Standards: semantics (what’s this in the
note?)
Standards: who wrote this?
Standards: where is the doc for this
annotation?
Standards: where is the annotation in the
doc?
Standards: where are all the notes for this
doc?
You see the annotation
but it isn’t really there
And the stylesheet may come from
The browser itself
A browser annotation plug-in
The annotation server
The document being annotated
Oh, and the doc might be a web page, a
PDF document, or an epub
This may be a problem for the designer
And for the reader
But it’s a kind of grail so…
Annotation on screen: visual issues
Small viewport
Arbitrary viewport proportion
Low resolution consequences
(typographic articulation)
Arbitrary colour gamut (eg mono e-ink)
BUT interactivity
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Hypothes.is
looking at previous failures
open standards
no modification of source text
dealing with consequences: reputation,
identity, special needs of communities
high ambition, high risk
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
The big conversation: open annotation in manuscripts and the web
Different communities have different
needs
Hypothes.is establishing domain needs of,
e.g.
Legal profession
Journalism
Open peer review for scholarly
publications
Mathematics
…and working towards ways of uniting
them in technical standards and design
approaches.
Open annotation will change the
way we work with documents
Information designers have the skills to
contribute
So contribute
Get engaged
 W3C open annotation community group
http://www.w3.org/community/openannotation/
 Hypothes.is https://hypothes.is/
 Open Knowledge Foundation http://okfn.org/ . Annotation central to
their work, eg Open Shakespeare
(http://www.opensourceshakespeare.org/ ), Textus
(http://textusproject.org/ ). Created Annotator plug-in
http://annotatorjs.org/
 Annotation software and browser plug-in
https://github.com/hypothesis
 epub e-books in the browser, supporting open annotation
https://github.com/futurepress/epub.js
 Open Annotation ontology, a start on semantic standards. Needs
work. http://www.openannotation.org/spec/core/

More Related Content

PPT
What Is A Conference
PDF
AACL 2018 - Going Beyond Simple Word-list Creation Using CasualConc
PPT
DC-dot
PPTX
Concordancer
PPSX
Concordances
PPTX
Draftinglitreviewpart12
PPTX
Draftinglitreviewpart12
PPT
Library Resources for ECE 4416 Project
What Is A Conference
AACL 2018 - Going Beyond Simple Word-list Creation Using CasualConc
DC-dot
Concordancer
Concordances
Draftinglitreviewpart12
Draftinglitreviewpart12
Library Resources for ECE 4416 Project

Similar to The big conversation: open annotation in manuscripts and the web (20)

PPT
Anatomy Of A Paper
PPS
What Is Technical Writing And Documentation
PPT
Bibliographic Management Slides Pptxp
PPT
RDVO - Building UX Pattern Libraries
PDF
The Grammar of User Experience
DOCX
ENG 3107 Writing for the Professions—Business & Social Scienc.docx
PPT
A quick overview of the available reference managers2010
PPT
Fhbib Chronology2
PPTX
Different Level of Copy editing.pptx
PPT
Detecting Blogs Independently from the Language and Content MSM09
PPTX
Do you 2 point 0?
PPT
Wiki meeting2
PPT
Chi2006 trustworkshop
PPTX
Multimedia chapter 2
PPTX
Multimedia chapter 2
PPT
CALL & WRITING
PDF
Scale2016
PDF
Lfnw2016
PDF
Fiesole 2013: Author centric-thinking for Asian researchers
Anatomy Of A Paper
What Is Technical Writing And Documentation
Bibliographic Management Slides Pptxp
RDVO - Building UX Pattern Libraries
The Grammar of User Experience
ENG 3107 Writing for the Professions—Business & Social Scienc.docx
A quick overview of the available reference managers2010
Fhbib Chronology2
Different Level of Copy editing.pptx
Detecting Blogs Independently from the Language and Content MSM09
Do you 2 point 0?
Wiki meeting2
Chi2006 trustworkshop
Multimedia chapter 2
Multimedia chapter 2
CALL & WRITING
Scale2016
Lfnw2016
Fiesole 2013: Author centric-thinking for Asian researchers
Ad

Recently uploaded (20)

PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
areprosthodontics and orthodonticsa text.pptx
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PPTX
artificialintelligencedata driven analytics23.pptx
DOCX
The story of the first moon landing.docx
PDF
Phone away, tabs closed: No multitasking
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPT
Package Design Design Kit 20100009 PWM IC by Bee Technologies
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PDF
Urban Design Final Project-Site Analysis
PPTX
6- Architecture design complete (1).pptx
PDF
Urban Design Final Project-Context
PPTX
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
PDF
Africa 2025 - Prospects and Challenges first edition.pdf
PDF
Quality Control Management for RMG, Level- 4, Certificate
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
areprosthodontics and orthodonticsa text.pptx
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
artificialintelligencedata driven analytics23.pptx
The story of the first moon landing.docx
Phone away, tabs closed: No multitasking
DOC-20250430-WA0014._20250714_235747_0000.pptx
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Fundamental Principles of Visual Graphic Design.pptx
AD Bungalow Case studies Sem 2.pptxvwewev
Wisp Textiles: Where Comfort Meets Everyday Style
YV PROFILE PROJECTS PROFILE PRES. DESIGN
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Urban Design Final Project-Site Analysis
6- Architecture design complete (1).pptx
Urban Design Final Project-Context
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
Africa 2025 - Prospects and Challenges first edition.pdf
Quality Control Management for RMG, Level- 4, Certificate
Ad

The big conversation: open annotation in manuscripts and the web

  • 1. The big conversation Designing for open annotation | Mark Barratt
  • 2. Annotation as conversation About annotation Manuscript and print The web and e-paper: groping towards conversations First attempts at a design language for open annotation Ways forward
  • 3. About annotation Footnote: endnote, reference Gloss: explanation, translation Aside: sidebar, call-out, digression Corrections and comments on drafts Comments by readers Study notes
  • 10. New forms for new media Proof corrections and comments Word Acrobat Paper plus!
  • 14. Web documents copied print annotation role and design
  • 22. Notes added by readers Need to Mark text while reading Add a note Save the note for later Spot the note location while reading and read it
  • 28. Open annotation adds user needs Need to Mark text while reading Add a note Save the note for later Spot the note location while reading and read it Sort/search/select notes See who wrote the note, find out about them Respond to it
  • 29. Public or open annotation Requires Standards: semantics (what sort of note is this?) Standards: semantics (what’s this in the note?) Standards: who wrote this? Standards: where is the doc for this annotation? Standards: where is the annotation in the doc? Standards: where are all the notes for this doc?
  • 30. You see the annotation but it isn’t really there
  • 31. And the stylesheet may come from The browser itself A browser annotation plug-in The annotation server The document being annotated Oh, and the doc might be a web page, a PDF document, or an epub This may be a problem for the designer And for the reader
  • 32. But it’s a kind of grail so…
  • 33. Annotation on screen: visual issues Small viewport Arbitrary viewport proportion Low resolution consequences (typographic articulation) Arbitrary colour gamut (eg mono e-ink) BUT interactivity
  • 40. Hypothes.is looking at previous failures open standards no modification of source text dealing with consequences: reputation, identity, special needs of communities high ambition, high risk
  • 47. Different communities have different needs Hypothes.is establishing domain needs of, e.g. Legal profession Journalism Open peer review for scholarly publications Mathematics …and working towards ways of uniting them in technical standards and design approaches.
  • 48. Open annotation will change the way we work with documents Information designers have the skills to contribute So contribute
  • 49. Get engaged  W3C open annotation community group http://www.w3.org/community/openannotation/  Hypothes.is https://hypothes.is/  Open Knowledge Foundation http://okfn.org/ . Annotation central to their work, eg Open Shakespeare (http://www.opensourceshakespeare.org/ ), Textus (http://textusproject.org/ ). Created Annotator plug-in http://annotatorjs.org/  Annotation software and browser plug-in https://github.com/hypothesis  epub e-books in the browser, supporting open annotation https://github.com/futurepress/epub.js  Open Annotation ontology, a start on semantic standards. Needs work. http://www.openannotation.org/spec/core/

Editor's Notes

  • #2: A talk about glosses, footnotes, and how they looked before during and after the tyranny of printing.Will talk about what annotations are used for and who creates themWill look at ways annotation have been done in mediaeval times and how that changed with the introduction of the printing press.We’ll then look at new uses for annotations in computer applications in general, and in the early days of the web.Lastly, we’ll look at current developments in web annotation and how that affects designers. This last bit will likely get very confusing so there won’t be any clear conclusions, but some trends and challenges will be identified.
  • #3: Proper stories, like good presentations, need a beginning, a middle and an end.
  • #5: Harley MS 3487, Aristotle's Physics, with commentaries http://www.bl.uk/manuscripts/Viewer.aspx?ref=harley_ms_3487_f022v3rd quarter of the 13th century, The manuscript includes Aristotle, LibriNaturales (corpus vetustius), with glosses:Physica (ff. 4r-65v);De coelo et mundo (ff. 65v-121r);De generatione (ff. 121v-140v);Meteora, appended with Avicenna, De mineralibus (ff. 140v-173r);De anima (ff. 173r-197r);De memoria et reminiscentia (ff. 197r-200r);De vita et morte (ff. 200r-202r);Pseudo-Aristotle, De differentia spiritus et animae (ff. 202r-208r);De somno et vigilia (ff. 208r-216r); De sensu et sensato (ff. 216r-224r);Nicholas of Damascus, De plantis (ff. 224r-235v).Decoration:29 historiated initials in colours and gold, with animated extensions or partial bar borders, and pen-flourishing in gold, red and blue (ff. 4r, 4v, 10r, 16v, 22v, 34r, 39v, 47v, 52r, 65v, 103v, 116r, 121v, 140v, 145r, 152r, 161r, 173r, 180r, 191r, 197r, 200r, 202r, 202v, 208r, 211v, 214v, 216r, 224r).Initials in red with pen-flourishing in red, and blue. Running headers in blue, and red and sometimes gold, with penwork decoration, some in the form of heads. Paraphs in blue. Rubrics in while, red, or blue. Marginal diagrams in red, brown, and blue, with green and blue, and sometimes yellow washes (ff. 69r, 69v, 70v, 76v, 90r, 90v, 92v). Marginal drawing of an animal, in colours (f. 142v). Sketches for the illuminator (ff. 16v, 22r, 34r, 52r, 103v, 116r, 140v, 152r, 161r, 173r, 180r, 191r, 197r, 200r, 202v, 202r, 208r, 211v, 214v, 216r, 224r).The illuminations are attributed to the Glazier Bible group. Other manuscript attributed to the same workshop or artist are Organon, Cambridge, Pembroke College, MS 193; Averroes, Commentary on Aristotle, Methaphisica, Oxford, Merton College, MS 269 (see Camille 1985); and Cambridge, University Library, MS Ee. 2. 31 (see Morgan 1988).Aristotle's Physica with marginal gloses in two or three columns.Decoration:9 historiated initials in gold and colours at the beginning of books.f. 4r (book I: preface): initial Q(uoniam) of burning of books before a friar and a seated king. Below, a small miniature of a sleeping man and a fish. Marginal decoration includes two fighting men, two lions and a lion cub, and a man confronting a lion.f. 4v (book I): initial 'P'(rincipium) of a man fighting with an animal.f. 10r (book II): initial 'E'(orum) of a scholar looking at animals below him. f. 16v (book III): initial 'Q'(uoniam) of a personification of Nature: a crowned woman holding a fleur de lis. A man playing a harp in the margin. f. 22v (book IV): initial 'S'(imiliter) of a seated scholar looking at the celestial bodies above him. f. 34r (book V): initial 'T'(ransmutatur) of two wrestlers. f. 39v (book VI): initial 'S'(i) of a scholar counting four horizontal poles (spatial magnitudes). f. 47v (book VII): initial 'O'(mne) of two scholars disputing.f. 52r (book VIII): initial 'U'(trum) of Christ holding the orb of the world divided in three parts.
  • #6: Or we can use the space between the lines
  • #7: Kinds of conversation includes the undercutting, an annotation that is an image – both here, counterpointing the philosopher exploring the boundaries of knowledge with the idiot representing the rest of us.
  • #8: References rather than conversationIndustrialised broadcast communication: exclusion of the reader and the scribeGeneva Bible
  • #9: This all coalesced pretty quickly. By the end of the fifteenth century today’s way of keying matter outside the main text to the text was established, the range of annotations reduced. Margins of books became places to rest your thumbs rather than places in which conduct debate with the author.
  • #10: Michael Twyman’s book Colour Lithography, page design by RobBanham
  • #11: Pre-publication (but ‘publication’ getting very fuzzy as a concept. The ‘public peer review’)
  • #12: PDF commenting preserves the original and adds pictures of paper as overlays
  • #13: Though clearly designed by engineers, Microsoft Word’s notes functions do treat the document as an living, evolving, thing and introduces comments and discussions about comments which are actually part of the document lifecycle.
  • #14: http://www.thepoke.co.uk/2014/03/31/daily-mail-headlines-replaced-with-user-comments/
  • #15: In HTML, there’s machinery available. Very conservative Wikipedia
  • #18: epub – starting to get past refekecting print. (an Apple iBook)
  • #24: The Waste Land again, this time in an e-pub 3 ebook. Notes are private
  • #25: Kindle Mac user annotation.
  • #26: Notes made in Kindle are stored centrally so available on any device that you use and can be viewed all together. An advance on the generic e-book standard but proprietary.
  • #27: Medium now has contextual commenting. Neat (but proprietary). V quiet signal that something else there.
  • #28: Medium commenting stream. Neat. But
  • #30: What you can do with the visual behaviour of annotations depends on what ‘handles’ the behind-screen code gives you and what styling tools allow you to do with them.
  • #31: A open annotation
  • #32: Open standard for referencing: RDF AO annotation ontologyIdentifying what the reference points to: CFI eg book.epub#epubcfi(/6/4[chap01ref]!/4[body01]/10[para05]/3:10) – multiple media
  • #33: First open annotation service announced by Mozilla in 1993 with many of the features now being explored by startups and academic research.
  • #35: openphilosophy.org project of the Open Knowledge Foundation, funded by the UK’s JISC
  • #37: Startung to work on standards basis, some way to go on design interfaces
  • #38: Rap Genius has a series of site which offer annotation. This one of rap lyrics, containing most of the elements of a good annotation system. identity, disputation, reputation…
  • #39: Annotator.js from Open Knowledge Foundation
  • #40: CHARMe open annotation of climate data at University of Reading. Good open data model, visual design is closed, specific. What should an annotation look like? There is no genre for this sort of thing.