Blocs de construction indieweb

Cet article est une débauche. Vous pouvez m’aider à l'améliorer.

Erreur lors de la création de la miniature : Impossible d’enregistrer la vignette sur la destination

Un contributeur travaille en ce moment même sur cet article ou cette section. Merci de ne pas faire de modifications tant que ce message reste présent. Ce bandeau, destiné à limiter les risques de conflit de versions, ne doit pas être maintenu sur l'article lorsque le contributeur qui l'a apposé n'y travaille plus. Si la page n’a pas été modifiée depuis plusieurs heures, enlevez ce bandeau ou remplacez-le par {{en travaux}}.

traduction blocs de construction indieweb

Indie web building blocks indieweb building blocks https://adactio.com/journal/7698 indieweb building blocks, (Jeremy Keith, 2014-10-21)

1. Blocs de construction indieweb

1. 1. 21 octobre 2014

Je suis retourné la semaine dernière à Nuremberg pour la seconde édition de [border:none][1]. [Joschi][2] a essayé un format intéressant pour l'événement de cette année. Le premier jour, c’était un rassemblement de type mini-conférence avec un mélange intéressant d'intervenants, mais la deuxième journée était bien plus collaborative, avec des personnes travaillant ensemble sous forme d'ateliers et de discussions de tour de table "creator units"--.

J'ai fait équipe avec [Aaron][3] pour conduire une session [all things indieweb][4]. Elle s'est avérée très amusante. Durant toute la journée, nous avons présenté une à une les petites briques de construction. À la fin de la journée, c'était merveilleux de voir les progrès que les gens avaient réalisés en prenant cette approche couche par couche, par petites pièces, vaguement empilées.

1. 1. 1. relme

La première étape c'est : avez-vous un nom de domaine ?

Ok, étape suivante : faites-vous des liens à partir de ce domaine vers vos autres profils sur le web ? Twitter, Instagram, Github, Dribbble, tout ce que vous voudrez. Si oui, voici un peu de travail manuel : ajoutez `rel="me"` à ces liens.

   Twitter

   Github

   Flickr

Si vous n'avez pas de profils sur d'autres sites, vous pouvez toujours marquer votre numéro de téléphone ou une adresse de courrier électronique avec `rel="me"`. Vous pourriez faire ça dans un élément `link` dans le `head` de votre HTML.

   <link rel="me" href="mailto:jeremy@adactio.com" />

   <link rel="me" href="sms:+447792069292" />

1. 1. 1. IndieAuth

Dès que vous aurez fait ça, vous pouvez faire usage de [IndieAuth][5]. C'est une technique qui démontre un thème récurrent dans les blocs de construction indie web : tirer partie des forces des sites tiers existants. Dans ce cas, IndieAuth se greffe sur le haut du fait que beaucoup de sites tiers ont une forme de mécanisme d'authentification, généralement par OAuth. Le fait que vous revendiquiez un profil sur un site tiers utilisant `rel="me"`-- et le profil tiers à son tour fait un lien retour vers votre site-- veut dire que nous utilisons tout le travail intelligent produit dans leur flow d'authentification.

Vous pouvez voir IndieAuth en action en [vous connectant sur le wiki Indie Web Camp][6]. C'est vraiment chic.

Si vous avez utilisé `rel="me"` pour faire un lien vers un profil sur quelque chose comme Twitter, Github, ou Flickr, vous pouvez vous authentifier avec son flow OAuth. Si vous avez utilisé `rel="me"` pour votre adresse de courrier électronique ou numéro de téléphone, vous pouvez vous authentifier par e-mail ou SMS.

1. 1. 1. h-entry

Question suivante : vous publiez des trucs sur votre site ? Si oui, marquez ça en utilisant [h-entry][7]. Ceci sous-tend d'ajouter quelques classes à votre marquage existant.

   <article class="h-entry">

Having fun with @aaronpk, helping @border_none attendees mark up their sites with rel="me" links, h-entry classes, and webmention endpoints.

     8:42am

   </article>

Maintenant, la raison de faire ça c'est n'est pas pour quelque bénéfice théorique de moteurs de recherche, ou de navigateurs, mais simplement pour faire que le contenu que vous publiez soit analysable-par-une-machine (ce qui sera commode pour les prochaines étapes).

Aaron a publié [une note sur son site web][8], invitant quiconque à laisser un commentaire. Le truc, c'est que pour laisser un commentaire sur le site d'Aaron, vous avez besoin de le publier sur votre propre site.

1. 1. 1. Webmention

Voici [ma réponse au post d'Aaron][9]. Tout en étant publié sur mon propre site, il s'affiche aussi sur le site d'Aaron. C'est parce que j'ai envoyé une [webmention][10] à Aaron.

Webmention est basiquement une ré-implémentation du pingback, mais affranchi de toute la bêtise XML ; c'est juste une requête POST avec deux valeurs-- l'URL du post d'origine, et l'URL de la réponse.

Mon site n'envoie pas automatiquement les webmentions à tous les liens que je référence dans mes posts ; je devrais vraiment réparer ça mais ça va ; Aaron--[comme moi][11]--a un formulaire sous chacun de ses posts où vous pouvez coller l'URL de votre réponse.

C'est là où ces [classes h-entry][12] entrent en scène. Si votre post est marqué avec h-entry, alors il peut être analysé pour déterminer quel morceau de votre post est le corps du message, quel morceau est l'auteur, et ainsi de suite. Si votre réponse n'est pas marquée sous h-entry, Aaron affichera simplement un lien retour vers votre post. Mais s'il _est_ marqué avec h-entry, Aaron peut afficher la totalité du post sur son site.

Ok. À ce stade, nous avions déjà bien avancé, et tout ce que les personnes devaient faire était de modifier leur HTML pour ajouter quelques attributs `rel` et valeurs `class`.

Pour une véritable communication de site-à-site, vous devrez ajouter un endpoint webmention. C'est un peu plus délicat d'ajouter ça sur votre propre site ; cela requiert un peu de programmation. Voici ma [webmention minimum viable][13] que [j'ai écrit en PHP][14]. Mais il existe beaucoup d'implémentations existantes que vous pouvez utiliser comme [cette extension webmention pour WordPress][15].

Ou vous pourriez [demander un compte][16] sur [webmention.io][17], qui est basiquement webmention-as-a-service. Pratique !

Une fois que vous avez un endpoint webmention, vous pouvez pointer vers lui à partir du `head` de votre HTML en utilisant un élément `link` :

   <link rel="mention" href="https://adactio.com/webmention" />

Maintenant vous pouvez recevoir des réponses à vos posts.

Voici le bit vraiment cool : si vous vous enregistrez sur [Bridgy][18], vous pouvez commencer à recevoir des réponses de sites tiers comme Twitter, Facebook, etc. Bridgy a juste besoin de savoir qui vous êtes sur ces réseaux, il regarde sur votre site web, et calcule tout à partir de là. Et il transforme automatiquement les réponses provenant de ces réseaux en h-entry. C'est comme de la magie !

Voici les [réponses provenant de Twitter à mes posts][19], telles que saisies par Bridgy.

1. 1. 1. POSSE

Cela fut essentiellement ce que nous avons couvert avec Aaaron dans notre introduction en une journée à l'indie web. Je pense que cela va vraiment bien.

La prochaine étape serait d'implémenter l'idée du [POSSE][20]: Publish on your Own Site, Syndicate Elsewhere.

Vous pourriez faire ça en utilisant quelque chose d'aussi simple que [If This, Then That][21]. Par exemple chaque fois que quelque chose surgit dans votre fil RSS, postez-le sur Twitter, ou Facebook, ou les deux. Si vous n'avez pas de fil RSS, pas de panique : parce vous enrichissez déjà votre HTML avec h-entry, il peut être [converti aisément en RSS][22].

Je fais mon propre POSSE sur Twitter, point que [j'ai déjà décrit][23]. Depuis ça, j'ai aussi commencé à publier des photos ici, que je POSSE parfois sur Twitter et [POSSE toujours sur Flickr][24]. Voici [mon code pour poster sur Flickr][25].

J'aimerais POSSEr mes photos sur Instagram, mais c'est impossible. Instagram est un motel-de-data plein de cafards. [L'API][26] ne fournit pas de méthode pour poster des photos. Le seul moyen de poster une image vers Instagram c'est avec l'app Instagram.

Ma seule option est de faire l'opposé de POSSE, à savoir [PESOS][27] : Publish Elsewhere, and Syndicate to your Own Site. Pour faire ça, j'ai besoin d'avoir un endpoint sur mon propre site qui puisse recevoir des posts.

1. 1. 1. Micropub

Travailler à côté d'Aaaron à border:none m'a inspiré pour implémenter un ou plusieurs blocs de construction indie web dont j'avais besoin : [micropub][28].

Avoir ici un endpoint micropub sur mon propre site signifie que je peux publier à partir de sites tiers …ou même à partir d'applications natives. La raison pour laquelle je n'avais pas déjà fait ça était que je pensais que c'était vraiment compliqué à mettre en oeuvre. Mais il est apparu une fois de plus, que le truc est de laisser d'autres services faire le sale boulot.

Premièrement, j'ai besoin d'avoir quelque chose pour gérer l'authentification. Bon j'ai déjà ça avec IndieAuth. J'ai ça gracieusement en ajoutant simplement `rel="me"` à mes liens vers d'autres profils. Ainsi, je peux désormais déclarer [indieauth.com][29] comme mon endpoint d'autorisation dans le `head`de mon HTML :

   <link rel="authorization_endpoint" href="https://indieauth.com/auth" />

Maintenant j'ai besoin d'un moyen de créer et de résoudre les jetons d'authentification. Vous voyez ce que j'entends par ce qui ressemble à une sale besogne ? [Creating a token endpoint][30] semble compliqué.

Mais une fois de plus, quelqu'un d'autre a fait le sale boulot, donc je n'ai plus à le faire. Tokens-as-a-service :

   <link rel="token_endpoint" href="https://tokens.indieauth.com/token" />

La dernière pièce du puzzle est de pointer vers mon propre endpoint micropub :

   <link rel="micropub" href="https://adactio.com/micropub" />

[Cette URL][31] est l'endroit où je recevrai les posts provenant de sites et apps tiers (envoyés à travers une requête POST avec un jeton d'accès dans le header). Cela me revient de vérifier que le post est authentifié proprement avec un jeton d'accès valide. [Voici le code PHP que j'utilise][32].

Ce n'était pas aussi compliqué que je pouvais le penser. Au moment où un post et un jeton touche le endpoint micropub, la plupart du boulot a déjà étét fait (authentification, traiter un jeton, etc.). Mais il y encore quelques étapes que je dois faire :

 1. Produire une requête GET (j'utilise cURL) retour vers le token endpoint que j'ai spécifié --envoyer le token d'accès qui m'a été envoyé dans un header--vérifiant le token.

 2. Vérifier que la valeur "me" que je reçois correspond à mon identité, qui est [1][33]

 3. Prendre les valeurs h-entry qui ont été envoyées sous forme de variable POST et créer un nouveau post sur mon site.

J'ai testé mon endpoint micropub en utilisant [Quill][34], une petite interface pour poster construire par Aaron. Elle est accompagnée d'une [documentation géniale][35], comprenant un guide pour [crééer un endpoint micropub][36].

Cela a fonctionné.

Voici un autre exemple : [Ben Roberts][37] a [une interface pour poster][38] qui publie vers micropub, ce qui veut dire que je peux m'authentifier moi-même et [poster sur mon site à partir de son interface][39].

Pour finir, il y a [OwnYourGram][40], un service qui suit votre compte Instagram et poste vers votre endpoint micropub à chaque fois qu'il y a une nouvelle photo.

[Cela a aussi fonctionné][41]. Et je peux aussi [raccrocher Bridgy à mon compte Instagram][42] afin que toute activité sur mes photos Instagram soient aussi envoyées vers mon endpoint webmention.

1. 1. 1. Indie Web Camp

Chacun de ces blocs de construction débloque de plus en plus de puissance :

 * [`rel="me"`][43]

 * [h-entry][12]

 * [Webmention][44]

 * [Micropub][45]

Chacun de ces blocs de construction que vous implémentez débloque des outils de plus en plus puissants :

 * [IndieAuth][29]

 * [Bridgy][18]

 * [Quill][34]

 * [OwnYourGram][40]

Mais cela vaut la peine de se souvenir que ce ne sont que des détails de mise en oeuvre. Ce qui compte vraiment, c'est que vous publiez _vos_ trucs sur _votre_ site web. Si vous voulez utiliser différents formats et protocoles pour faire ça, c'est vraiment bien. L'objectif général c'est le web _indépendant_ ; vous pouvez faire tout ce qui vous plaît sur votre propre site web.

Une fois de plus, si vous décidez de démarrer en utilisant ces outils et technologies, vous bénéficierez de [toutes les autres personnes][4] qui travaillent aussi sur ce truc. Si vous avez la chance de pouvoir participer à un Indie Web Camp, vous devriez vraiment la saisir : je suis toujours émerveillé par tout ce qui peut être réalisé en un weekend.

Quelques personnes ont commencé à faire référence au [mouvement indie web][46]. Je comprends d'où elles viennent ; cela ressemble certainement à un "mouvement" vu de l'extérieur, et si vous participez à un Indie Web Camp, il y a un grand esprit de partage. Mais [mes motivations sous-jacentes sont complètement égoïstes][47]. De la même manière que je ne me soucie aucunement de quelques formats ou protocoles particuliers, je ne me soucie absolument pas de faire partie de quelque sorte de "mouvement." Je prends soin de mon site web.

En l'occurrence, mes motivations égoïstes s'alignent parfaitement avec [les principes d'un web indépendant][48].

Marqué dans [indieweb][49] [independent][50] [publishing][51] [relme][52] [h-entry][53] [webmention][54] [micropub][55] [bridgy][56] [indieauth][57] [posse][58] [pesos][59] [instagram][60] [twitter][61] [bono2014][62] [indiewebcamp][63]

  [1]: https://border-none.net/2014

  [2]: https://jkphl.is/

  [3]: http://aaronparecki.com/

  [4]: https://indiewebcamp.com/

  [5]: http://indiewebcamp.com/IndieAuth

  [6]: http://indiewebcamp.com/Special:UserLogin

  [7]: http://indiewebcamp.com/h-entry

  [8]: http://aaronparecki.com/notes/2014/10/18/1/bordernone

  [9]: https://adactio.com/notes/7678

  [10]: http://indiewebcamp.com/Webmention

  [11]: https://gist.github.com/adactio/6575229

  [12]: http://microformats.org/wiki/h-entry

  [13]: https://adactio.com/journal/6495

  [14]: https://gist.github.com/adactio/6484118

  [15]: https://wordpress.org/plugins/webmention/

  [16]: http://aaronparecki.com/notes/2014/10/18/2/bordernone

  [17]: http://webmention.io/

  [18]: https://www.brid.gy/

  [19]: https://www.brid.gy/twitter/adactio

  [20]: http://indiewebcamp.com/POSSE

  [21]: https://ifttt.com/

  [22]:

http://pipes.yahoo.com/pipes/pipe.info?_id=afc5568b4e8643bfb05436b1caaf91bc

  [23]: https://adactio.com/journal/6826/

  [24]: https://www.flickr.com/photos/adactio/

  [25]: https://gist.github.com/adactio/a9c7e419b2913f318bd1

  [26]: http://instagram.com/developer/

  [27]: http://indiewebcamp.com/PESOS

  [28]: http://indiewebcamp.com/micropub

  [29]: https://indieauth.com/

  [30]: http://indiewebcamp.com/token-endpoint

  [31]: https://adactio.com/micropub

  [32]: https://gist.github.com/adactio/8168e6b78da7b16a4644

  [33]: https://adactio.com

  [34]: https://quill.p3k.io/

  [35]: https://quill.p3k.io/docs

  [36]: https://quill.p3k.io/creating-a-micropub-endpoint

  [37]: https://ben.thatmustbe.me/

  [38]: https://ben.thatmustbe.me/new

  [39]: https://adactio.com/notes/7696

  [40]: https://ownyourgram.com/

  [41]: https://adactio.com/notes/7697

  [42]: https://www.brid.gy/instagram/adactio

  [43]: http://microformats.org/wiki/relme

  [44]: https://indiewebcamp.com/Webmention

  [45]: https://indiewebcamp.com/Micropub

  [46]: http://www.wired.com/2013/08/indie-web/

  [47]: https://adactio.com/journal/6801

  [48]: https://indiewebcamp.com/principles

  [49]: /journal/tags/indieweb

  [50]: /journal/tags/independent

  [51]: /journal/tags/publishing

  [52]: /journal/tags/relme

  [53]: /journal/tags/h-entry

  [54]: /journal/tags/webmention

  [55]: /journal/tags/micropub

  [56]: /journal/tags/bridgy

  [57]: /journal/tags/indieauth

  [58]: /journal/tags/posse

  [59]: /journal/tags/pesos

  [60]: /journal/tags/instagram

  [61]: /journal/tags/twitter

  [62]: /journal/tags/bono2014

  [63]: /journal/tags/indiewebcamp