Note-fr

Cette page a démarré sur iwc:note seul lien de référence. Et reste ouverte à la traduction pour étude. 📔 Une note est un post qui est généralement du plein texte court et non structuré, écrit et posté rapidement, et qui a sa propre page de permalien.

Créer, publier et posséder vos propres notes est une étape-clé vers la réduction de dépendance à Twitter.

*Though unstructured meaning without a heading/title or any other explicit structure, notes can include several lines of text or even lists using "*" or numerical markers due to common whitespace support.

Why

Most of the reasons why apply quite strongly to publishing your notes on your own website. In addition:

• Simplest post building block. All posts have a simple text component, whether name, caption, comment, or text equivalent. Build notes first, and then you have a building block you can build upon for every other post type. This is the smallest step you can take to owning the timestamped content you publish.
• Do better than Twitter, here are a few ways. Choose those that matter to you:
  • presentation: your notes permalink pages can be cleaner and have more informative presentation (e.g. a facepile of all favorites/retweets, not just a few) than tweet permalinks
  • interactivity: better auto-linking and auto-embedding than proprietary Twitter Cards, multiple embeds instead of just one. E.g. use the CASSIS auto_link function which works better than Twitter's auto-linking/embedding.
  • navigation: providing next/previous and other navigation links
  • direct linking: direct hyperlinks rather than t.co wrappers around your links
  • speed: load simpler HTML+CSS note pages rather than all of the JS that Twitter depends on.
  • editability: you can edit your own notes, you cannot edit tweets.
  • flexibility: post notes longer than 140 characters.

Comment faire

Comment publier

Here is a minimal note post:

<div class="h-entry">
 <time class="dt-published">2013-03-07</time>: 
 <p class="p-name p-content">
  <a class="u-author" href="/">I</a> ate a cheese sandwich.
 </p>
</div>

Which might be rendered like:

2013-03-07: I ate a cheese sandwich.

Comment POSSEr

The most common POSSE destination for notes is Twitter because implementing note posts on your own site is a great way to start to own your data, with posting notes only on your own site, and having it automatically POSSE to Twitter, and never ever posting directly to Twitter again.

See: 'Twitter#POSSE_to_Twitter for details on How to POSSE notes to Twitter, and replies too!

(need additional note POSSE destinations along with motivations for doing so).

Exemples IndieWeb

Here are documented examples of IndieWebCamp participants' sites that support publishing notes and do so (i.e. before POSSEing to silos). In date order (earliest first) :

Tantek

Tantek Çelik using Falcon on tantek.com since 2010-01-01.

Barnaby Walters

Barnaby Walters using Taproot on Waterpigs.co.uk since 2012-03-24 (note shows 2012-04-14 updated date, but POSSE tweet shows 2012-03-24 date). Notes previous to that one were imported/crossposted from diasp.org onto Waterpigs.co.uk (did not originate there).

Aaron Parecki

Aaron Parecki using p3k on aaronparecki.com since 2012-08-19.

Tom Morris

Tom Morris using Ferocity on tommorris.org since 2013-03-21 (note POSSE tweet same day). Earlier "notes" on tommorris.org are likely a result of imports from Twitter and Tumblr archives rather than posts originating on tommorris.org.

Ben Werdmuller

Ben Werdmüller using idno on werd.io since 2013-05-31.

Amber Case

Amber Case using p3k on caseorganic.com since 2013-09-08 (note POSSE tweet same day).

Shane Becker

Modèle:Veganstraightedge on veganstraightedge.com since 2013-10-23 (note POSSE tweet same day).

Kyle Mahan

Modèle:Kylewm on kylewm.com since 2013-11-28

Chloe Weil

Chloe Weil on Chloe Weil since 2013-12-03 (note POSSE tweet same day). See also related blog post:

• 2013-12-04: Hipster: "I built Twitter."

Jonny Barnes

Modèle:Jonnybarnes on https://jonnybarnes.uk has been posting notes since 2013-12-03

Frederic

Frédéric de Villamil using publify on t37.net since 2014-01-10 (note POSSE tweet same day)

Michael Bester

Michael Bester on michaelbester.com since 2014-01-13 (note POSSE tweet same day with permashortcitation support!). See also related blog post:

• 2014-01-16: Online Homesteading

Kartik Prabhu

Kartik Prabhu on kartikprabhu.com since 2014-03-08.

Jeremy Keith

Jeremy Keith on adactio.com since 2014-05-27 (Note POSSE copy may say 2014-05-26 presumably because of timezone differences, Jeremy's is in BST, while a PDT viewer sees datetime adjusted accordingly). See also related blog post:

• 2014-06-01 Notes from a small website

gRegor Morrill

gRegor Morrill on gregorlove.com since 2014-06-25

• POSSE via brid.gy: https://twitter.com/gRegorLove/status/481990276982919168

Shane Hudson

Shane Hudson on shanehudson.net settled on 2014-09-09, beforehand there were many test notes and notes were implemented on Wordpress but have since moved to Craft CMS and have now decided exactly how I want the notes to be. POSSE was also implemented on Wordpress, but is not yet ready on Craft.

David Shanske

Modèle:Gwg on david.shanske.com since 2014-03-17. Had imported older material as notes prior to this.

atomicules

User:atomicules.co.uk since 2015-05-18 (originally at http://atomicules.co.uk/2015/05/18/All-being-well-I-m-now-syndicating-notes-tweets--indieweb.html which 404s since at least 2018-02-17). I use Jekyll with a notes subdirectory to _posts. The note is simply stored as the title element in the yaml front matter. I use a rake task to generate and syndicate the note from the command line.

Jonathan LaCour

Jonathan LaCour has been using Known on cleverdevil.io since 2015-08-06.

Ryan Rix

Modèle:Rrix since 2016-04-15 publishes notes through Arcology and syndicates them to Twitter and Facebook using Bridgy

Glenn Jones

Glenn Jones on glennjones.net since 2016-06-16 per his notes page https://glennjones.net/notes (post permalink https://glennjones.net/notes/2016-06-06-1 is 404 as of at least 2018-02-17)

• older notes that appear to have disappeared (if restored, bump this back up)
  • http://glennjones.net/notes/2014-01-15 was since 2014-01-15
  • http://glennjones.net/notes/2014-01-14 was since 2014-01-14 but that note appears to be gone!

Martijn van der Ven

Modèle:Martijnvdven has made posts marked up as notes since 2016-09-25, when his blog was relaunched in an IndieWeb style. Most posts since then have been titleless notes, including some multi-paragraph ones.

Past Examples

Past examples of indieweb note posting, either offline or otherwise no longer working:

• Brennan Novak on brennannovak.com since 2010-07-17 (https://brennannovak.com/notes/1 - 404 since at least 2018-02-17).
• Sandeep Shetty using Converspace on sandeep.io since 2012-11-05 (http://www.sandeep.io/1 - 404 since at least 2018-02-17).

Common Aspects

There are certain UI elements which are common to most implementations. These include:

• Profile photo (often with rounded corners)
• Full Name (often emboldened)
• Auto–linked URLs, usernames and #tags
• Dates (sometimes relative, almost always the option to see real date)

Autolinking and embedding

Various sites/solutions auto-link and/or auto-embed URLs and other linkable things in notes.

recommendations:

• auto-link URLs directly
  • even better: if the URL is to a known person, use their name as the link text and perhaps include a small icon of their face before their name.
• auto-link @-names to Twitter profiles
  • even better: auto-link @-names to individual's indieweb sites and show their full name instead of Twitter handle. Obviously keep @-names in note content when POSSEing to Twitter.
• auto-embed GIF/JPG/PNG URLs with <img src>, hyperlinked to the original
• auto-embed MOV/OGV URLs with <video src>, hyperlinked to the original
• auto-embed Youtube URLs with the equivalent Youtube <iframe src> embed (algorithmically convertible)

You can use the CASSIS auto_link function to do all the above (except the "even better" enhancements) automatically to a piece of plain text.

avoid:

• auto-linking URLs through URLs shorteners (please don't break the web)
• cluttering image/video embeds with extra text (e.g. name/title from destination)

Compare for example:

• good original note: http://tantek.com/2013/054/t2/future-dystopia-beijing-blade-runner
  • with autolinked/embedded URLs/images in context of their content location
• worse Twitter handling of POSSE'd copy: https://twitter.com/t/status/305570846796312577
  • link shortener wrapping of links
  • clumsier image embed - after all tweet text content
  • smaller image embed
  • undesired extra text
  • external site name
  • user interface buttons between tweet text and image embed

Less Common Aspects

• username/nickname - as well as the full name, there’s often a silo-specific nickname/alias
• URL to their indieweb home page
• posting application/tool
• posting location - aka geo
• Link text instead of bare URLs. 1/4 of the implementations above have examples of this showing on the first page as of 2014-06-23; names here link to examples: Tom Morris and Michael Bester include the bare URL in addition to or instead of the link text in their syndicated copies. Not sure what Sandeep Shetty does because the example doesn't link to a syndicated copy; not sure what Barnaby Walters does because the links all appear after the point where the syndicated copy truncates. All of them also use bare URLs.

Lieu

Location (AKA Geo) of notes is somewhat rare and not very well done. Nonetheless, there are questions, use-cases, and examples.

Pourquoi un lieu

Why? What's the point of posting a note/tweet with location information? (one that's not a checkin)

• What does it do for me (as the user posting it)?
• And what does it do for people reading my notes/tweets?
• Why is it interesting/useful to anyone?

Related but different: checkins, events, photos with location.

Here are use-cases for why your notes should support location information:

Use-cases for posting geo / post location information with notes:

• location specific service provider help
  • https://twitter.com/aaronpk/status/320597741485051904
    • "Included there because I wanted @O2IRL to know I was in Ireland"
• meetup in non-home city - specifically expressing being in the same (non-home) city
  • https://twitter.com/aaronpk/status/311161906809421824
• explicit I'm not home - indication of being in a non-home city
  • https://twitter.com/aaronpk/status/316667682877497344 because I was out of town
• "help!" if you're in trouble - geolocating it would be useful
  • uncommon but urgent use-case.
  • though in a "help" situation it's faster to simply *type* where you are etc. than wait for geo location information to come-up, confirm, etc.
    • because geo information is so often "invisible" - it requires extra UI steps to make it work = extra time = not going to do it in an emergency
    • worse - devices get geo information wrong all the time - and having it be wrong in an emergency would be particularly bad
  • basically, lack of trust for device geo = not going to use it in a help situation
• if you don't know where you are and need help, then some (even possibly error-prone) geo information may be better than nothing
  • but now we're talking quite a bit of an edge case.

Comment ajouter un lieu

Use the p-location property to markup location information inside an h-entry.

In addition, use h-geo or h-adr to markup the details of your location information, whether lat/long coordinates or a structured address, respectively.

Exemple de lieu IndieWeb

See location#Indieweb_examples.

Exemples de lieu dans les Silos

Silo examples can be useful for research purposes and to help inform indieweb design.

Tweet avec lieu

Live example:

• https://twitter.com/aaronpk/status/276466935372341248

Problems:

• artificial precision - Twitter in particular links names of cities like "Paris, Paris" [sic] to a Google map with lat/long of 8 decimal digits precision!
  • e.g. https://twitter.com/aaronpk/status/276466935372341248

    I didn't mean "x,y" I meant "Paris" - aaronpk on IRC

Past Example when Twitter used to show a map on tweet permalinks of the location:

• http://www.flickr.com/photos/aaronpk/7771330904/

Whitespace

(this may be worth breaking out into a separate page on /note-whitespace)

Typical silo notes implementations display most whitespace written in their posting interfaces. IndieWeb implementations should preserve whitespace also.

Why Preserve Whitespace

There are some interesting use cases to preserving white space, in particular line breaks.

Besides the obvious use-cases of poetry, paragraphs, and lists, there is for example, chess games (and moves!)

• https://twitter.com/alapapa/status/312053522755641344

This leads us to the use case of indieweb spectator correspondence chess. That is, two players could play a chess game just by posting moves on their own indieweb sites as replies to each others' moves.

Perhaps chess moves (and resulting board state) could be posted as a special kind of note post type (a game-move or game-turn?) and then POSSE'd to Twitter with whitespace intact.

If the move is response to a move on another indiewebsite, then in addition to using webmention for move completion notification, the POSSE'd response move could also indicate with Twitter's in-reply-to-status-id the POSSE'd tweet of the previous move. See how to POSSE a comment/in-reply-to/u-syndication for details of how to do this.

Such public posting of moves would also allow for anyone to jump in and attempt to play a next move by posting a reply move. The player of the previous move would then receive multiple webmentions and could decided which move (or both) to reply to in turn.

Indieweb whitespace thinking

Due to the expectations set by dominant silo implementations, any note authoring/composing UI should preserve line-breaks, blank lines, and multiple space characters when writing/authoring, displaying/presenting, and ideally, when syndicating (POSSEing, e.g. whitespace preserved by POSSE via Twitter API, Twitter->FB cross-posting / downstream-POSSEing, and Bridgy Publish).

Especially now that even Twitter has set consistent expectations from its posting UI, there's a strong case that a user switching from Twitter to an indieweb note posting UI would expect whitespace and linebreaks to "just work".

Summary, two options for publishers:

1. Use p-content if you expect only the plain text of your post to be retrieved, and then (preferably, but possibly only optionally) have its white-space preserved.
2. Use e-content if you publish fully marked up links, embeds, and whitespace (e.g. with <br/>,   etc.) and expect whitespace in source to be collapsed per HTML parsing rules.

More analysis:

Obviously indieweb implementations would have to preserve white-space in posting UI to storage to display round-trips. Then in the presentation they could either:

• a. <br/> substitutions - Indieweb implementations could (are any already?) automatically insert <br> tags for linebreak whitespaces (a kind of auto-space, similarly to auto-linking URLs in notes). In addition, there would need to be an approach to handling multiple sequential space characters, and leading spaces on a line.
  • Substitute multiple sequential space characters to &nbsp; if that behavior is really desired (I've never needed/wanted to preserve multiple spaces in a note) Kylewm.com 18:14, 20 August 2015 (PDT)
  • Two more auto-space cases (pretty sure this should take care of mimicking pre-wrap behavior - Tantek)
    1. line-break then space: turn the space into an  
    2. sequence of spaces: turn every adjacent pair into _  (where _ represents a space)
  • Update: CASSIS auto_space() now implements this, and live on tantek.com
• b. white-space:pre-wrap - Alternatively indieweb implementations should use white-space:pre-wrap similar to how Twitter does.
  • As of 2015-08-24 tweet permalinks (e.g. [1]) have markup for hyperlinks, but use 
 for linebreaks, instead of <br/>.
  • -1 This is a strange divergence from expected HTML with the big disadvantage that consumers need to implement post-type detection to check if a post is a note and/or heuristics to infer whether whitespace in a post is meaningful. As an implementer of a reader that consumes lots of different posts from different sources, I would much prefer that e-content whitespace be consistent between sources and post types. Kylewm.com 18:14, 20 August 2015 (PDT)
    • e-content consistency is a good argument. perhaps white-space preservation with white-space:pre-wrap should only be applied to a plain p-content "value", and if there is any e-content, even if just via auto-linking, it should auto-space as well. - Tantek 16:41, 24 August 2015 (PDT)

History:

• b. white-space:pre-wrap seemed to be the logical choice for indieweb implementations
  • However, it became clear that doing just "some" auto-markup (e.g. autolink and autoembed but not autospace) was too (unnecessarily) hard for consuming code (e.g. readers, other sites) to have a chance at getting right.
  • After more brainstorming, autospace algorithms and code were figured out and seem to be working fine, thus the approach documented in a) made more sense.

IndieWeb Whitespace Examples

• tantek.com Falcon notes as of 2013-105 (retroactively supported in storage & styling back to 2013-001) preserve whitespace, present it, and POSSE it to Twitter which then preserves the whitespace when copying it to Facebook, e.g.:
  • Original post: http://tantek.com/2013/105/t1/thoughts-boston-finished-deadline-whitespace-falcon
    • auto-POSSE tweet with linebreaks: https://twitter.com/t/status/323994155690909699
    • Tweet copy to FB with linebreaks: https://www.facebook.com/tantek.celik/posts/10100581192582203
  • Original post: http://tantek.com/2014/210/t1/trackattack-warmup-laps-first-time-did-all
    • manual-via-Bridgy POSSE to FB with ws: https://www.facebook.com/tantek.celik/posts/10101200515439233

• kylewm.com Red Wind notes are just articles without a title. So they are processed by Markdown which converts whitespace to HTML.
  • Example post with linebreaks: https://kylewm.com/2016/05/i-think-this-is-great-feedback-for-known-and-the

• gregorlove.com notes are also just articles without a title. http://ma.tt/scripts/autop/ is used to convert 2+ new line characters to paragraphs and single new line characters to line breaks.
  • Example: http://gregorlove.com/2015/08/revisiting-imogen-heaps-speak/

• kartikprabhu.com using Bundle; notes are authored as plain-text, and white-space is preserved on display using CSS white-space: pre-wrap. Example: https://kartikprabhu.com/notes/like-wed-design-100-years
• snarfed.org uses HTML tags to represent meaningful whitespace. The HTML itself has plenty of meaningless whitespace in both note and non-note posts. This is generally true of all WordPress sites. Example. (search for the content property containing I often sign off on code reviews...)
• aaronparecki.com uses white-space:pre-wrap on notes with significant white-space, e.g.
  • http://aaronparecki.com/notes/2015/08/03/4/cocktail
  • with a hyperlink: http://aaronparecki.com/notes/2015/08/03/3/cocktail
  • review as note: http://aaronparecki.com/notes/2015/06/23/1/echo
    • POSSE copy (uses brs instead of linebreaks): http://www.amazon.com/gp/customer-reviews/R3SBOFS3P8WJC4/ref=cm_cr_pr_rvw_ttl?ie=UTF8&ASIN=B00X4WHP5E

• veganstraightedge.com Dark Matter notes have whitespace preserved using Ruby on Rails' simple_format() function which converts new lines ("\n") to <p> tags.
  • Example post with linebreaks: http://veganstraightedge.com/notes/2016/01/15/on-2016-01-10-i-launched-my-site-running-my-indie

• ...

Silo Whitespace Examples

Facebook

Facebook status updates are notes (no post title) that preserve sequential space characters and line breaks.

Google

Google+ posts are similarly just notes (no post title) that also preserve sequential space characters and line breaks.

Twitter

Twitter now has multiple implementations that preserve white space characters in presentation:

• Twitter.com (as of ~2013-03-13)[2][3][4][5][6]
  • e.g. https://twitter.com/hotdogsladies/status/4809602603
  • based on a test ( Tantek 18:13, 15 April 2013 (PDT) ), when posting to Twitter.com, Twitter's server
    • preserves simple linebreaks
    • preserves multiple spaces between words
    • preserves spaces at the start of a line
    • but collapses multiple linebreaks into a maximum of one blank line between lines.
• Twitter iOS client (previously: Tweetie)

Encoding - analysis of the above tweet:

• View Source: The linebreaks are encoded as 
 character entitites, without any visible line breaks in the code.
• View Selection Source (FF) and Inspect Element (FF, Safari): The linebreaks appear to be simple "carriage return" characters (\r, ASCII 13), showing visible line breaks in the code.
• In either case, the visual presentation of the whitespace characters is achieved using CSS:

  .js-tweet-text { white-space: pre-wrap; }

Screenshots

• Barnaby Walters has a collection of annotated screenshots here, including examples from:
  • Facebook (Web UI)
  • Twitter (Web, Mac App)

Subtypes

Since notes are such a ubiquitous content posting type (Thanks to Twitter), it's no surprise that subtypes of notes are evolving for representing additional structure or types of information. Let's document them as they emerge.

Health Fitness Tracking

Article principal : exercise

Tags: fitbit, pedometer, physical activity

Challenges:

• Too much hassle (AKA "high friction data collection") http://aaronparecki.com/articles/2012/10/28/1/low-friction-personal-data-collection

Step Tracking

Syntax: number-of-steps #steps anything-extra

Examples:

• http://waterpigs.co.uk/notes?tagged=steps

BMI Tracking

Syntax: number #bmi

Examples:

• http://evan.status.net/tag/bmi

microsyntax and picoformats

Article principal : microsyntax

microsyntax and picoformats are broader efforts to briefly and readably structure information in pure/plain text form.

See:

• microsyntax#Brainstorming in particular for thoughts on how to represent additional types of posts as text in notes.
• http://microformats.org/wiki/picoformats for more historical research and documentation.

Affichage de note

When displaying a note, it is customary to just display the note content and no explicit note title.

While this is fairly straightforward for a site itself (which often has its own post type information, perhaps even as an additional class name on the h-entry like h-as-note), for sites that display h-entrys from elsewhere it helps to have an algorithm to determining when is a note a note and should thus be displayed as such.

Note Type Algorithm

Summary: if the name of the h-entry is essentially the content of the entry, it's a note, just display the content (and no explicit name/title).

Algorithm for a parsed h-entry

• set the tname to trim(name)
• set the tcontent to trim(content)
• if the tname == tcontent, then it's a note, return.
• if the tname ends with an ellipsis ("..." or "…") then
  • drop the ellipsis character
  • if the tname is a prefix of tcontent, then it's a note, return
• otherwise it's not a note

Implementations:

• mf2util function is_name_a_title can be used for this purpose. If it returns false, then you know it's a note.

Afficher de l'espace blanc

Since there two ways indieweb sites post notes with whitespace (namely whitespace characters vs whitespace markup), when code that consumes such notes displays them, they should handle both methods.

This rough heuristic may work:

• if the note only has p-content, then auto-link it and use white-space:pre-wrap to display it
• else (if note has e-content HTML)
  • if content HTML has line-breaks AND DOES NOT have any <br> or <p> tags inside
  • then use white-space:pre-wrap to display it
• end if

Patterns en rapport

• Note Listing Display Patterns
• Note Posting UI Patterns

FAQ

Questions about notes, implementing them, publishing them.

markdown or plain text

Q: As an implementer of notes on my own website, should I store markdown or just plain text and autolink/autoembed everything?

A: Typical implementations store plain text for notes and use an autolinker/embedder to create links and embedded images. E.g.:

• Tantek on tantek.com uses Falcon which stores all notes as plain text entry-content inside an h-entry in a flat file.
• Modèle:Kylewm on kylewm.com stores all notes in Markdown. I like to include light styling (like italics) in my notes, and let lower fidelity copies go out to Twitter. I do run an autolink step to link @-names and bare URLs.
• ... add your implementation example here.

Voir aussi : storage.

how long should notes be

Q: As an implementer, what's the maximum size I should allow for notes?

A: Up to you and your own site needs! Typical implementations do not have note length limitations.

• Tantek on tantek.com uses Falcon which has no explicit lenght limitation on notes, however as part of the publishing UI shows what will be POSSEd to Twitter and how many characters are remaining to do so without having to elide the text.
• ... add your implementation example here.

how to display in a list

Q: When displaying a list of h-entry notes, e.g. in comments-presentation on a post, or in an indie reader, when should the name, or name+content, or just content be displayed?

A: See notes display for how to determine when to use a name or name+content and what to display accordingly.

Inclure un p-name dans une note

Q: Why should you put a p-name in a note? It seems uselessly redundant.

A: Some Feed Readers may have problems with title-less content because their UI assumes a title will always exist. This is in part because the RSS and Atom standards both required a title in all item/entry elements, even though many readers would still function correctly if one wasn't supplied. For instance, circa 2010-2011, Google Buzz and Google Reader cause content with no title to show up as blank entries in a list.

Voir aussi

• posts
• articles
• photos
• Semantics Of Article-Note Distinction