|
|
| (20 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 4 : |
Ligne 4 : |
| | | | |
| | | | |
| − | Sainte [[Isabelle]]
| + | Saint [[Pierre-Damien]] |
| | | | |
| | + | == processus == |
| | + | ''le procès'' |
| | + | <blockquote class="h-cite">Toute réalité est unité complexe. |
| | + | <footer>(<span class="h-card p-name">[[Alfred North Whitehead]]</span>, <span class="u-url p-name">[[Procès et réalité]]</span>. <span class="u-url">[http://www.persee.fr/doc/phlou_0035-3841_1995_num_93_3_6945_t1_0447_0000_2 Essai de cosmologie]</span>, <time class="dt-published">[[1929]]</time>)</footer></blockquote> |
| | | | |
| − | > Toute réalité est une unité complexe. -- Alfred North Whitehead, [[Procès et réalité]]. [[Essai de cosmologie]], [[1929]]
| + | == incandescence == |
| | + | fouilles via [[Rock & Folk]] (mars 2017) : |
| | | | |
| | + | ''Buffalo : en avance sur leur temps'' |
| | | | |
| − | == indieweb ==
| + | > Méconnu sous nos latitudes, Buffalo fut pourtant l’un des plus grands |
| | + | groupes de hard rock seventies. On peut le citer parmi les authentiques |
| | + | inventeurs du stoner rock avec l’extraordinaire “Volcanic Rock”, |
| | + | véritable chef-d’oeuvre du genre. (...) |
| | | | |
| − | traduction blocs de construction indieweb
| + | <iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A2e2tCYGZAxae37H91Jh59f" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> |
| | | | |
| − | <blockquote ="h-cite">Indie web building blocks <cite class="u-url p-name">[https://adactio.com/journal/7698 indieweb building blocks https://adactio.com/journal/7698 indieweb building blocks]</cite>, (<span class="h-card p-author">[[Jeremy Keith]]</span>, <time class="dt-published">2014-10-21</time>)
| + | ''un Bashung encore vert qui n’a toujours pas trouvé son personnage, même si celui-ci pointe déjà sur quelques chansons'' |
| − | </blockquote>
| |
| | | | |
| − | # Blocs de construction indieweb
| + | <q>C'est la faute à [[Dylan]]</q> |
| | + | <iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A1C7xqIxD0y52CQyWRWroKN" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> |
| | | | |
| − | ## 21 octobre 2014
| + | == indieweb == |
| − | | + | * statique : install https://phenomic.io/docs/setup/ |
| − | 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"--.
| + | * [[blocs de construction indieweb]] - traduction à relire pour étude intégration [[h-entry]] |
| − | | |
| − | 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.
| |
| − | | |
| − | ### 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.
| |
| − | | |
| − | | |
| − | <a rel="me" href="https://twitter.com/adactio">Twitter</a>
| |
| − | | |
| − | <a rel="me" href="https://github.com/adactio">Github</a>
| |
| − | | |
| − | <a rel="me" href="https://www.flickr.com/people/adactio">Flickr</a>
| |
| − | | |
| − | | |
| − | 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" />
| |
| − | | |
| − | ### 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.
| |
| − | | |
| − | ### 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">
| |
| − | | |
| − | <div class="e-content">
| |
| − | | |
| − | <p>Having fun with @aaronpk, helping @border_none attendees mark up their sites with rel="me" links, h-entry classes, and webmention endpoints.</p>
| |
| − | | |
| − | </div>
| |
| − | | |
| − | <time class="dt-published" datetime="2014-10-18 08:42:37">8:42am</time>
| |
| − | | |
| − | </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.
| |
| − | | |
| − | ### 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.
| |
| − | | |
| − | ### 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, poste-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.
| |
| − | | |
| − | ### 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 un enpoint micropub ici sur mon propre site signifie que je peux publier à partir de sites tiers …ou même à partir d'apps 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. Make a GET request (I'm using cURL) back to the token endpoint I specified--sending the access token I've been sent in a header--verifying the token.
| |
| − | | |
| − | 2. Check that the "me" value that I get back corresponds to my identity, which is [https://adactio.com][33]
| |
| − | | |
| − | 3. Take the h-entry values that have been sent as POST variables and create a new post on my 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.
| |
| − | | |
| − | ### 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épendent_ ; 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
| + | <source lang="html4strict"> |
| | | | |
| − | [60]: /journal/tags/instagram
| + | <article class="h-entry"> |
| | + | <div class="e-content"> |
| | + | <p>Having fun with @aaronpk, |
| | + | helping @border_none attendees mark up their sites |
| | + | with rel="me" links, h-entry classes, and webmention |
| | + | endpoints.</p> |
| | + | </div> |
| | | | |
| − | [61]: /journal/tags/twitter
| + | <time class="dt-published" datetime="2014-10-18 08:42:37">8:42am</time> |
| | | | |
| − | [62]: /journal/tags/bono2014
| + | </article> |
| | | | |
| − | [63]: /journal/tags/indiewebcamp
| + | </source> |