Zephyrnet-logo

De-mystificerende IndieWeb op een WordPress-site

Datum:

Nou ja, shees. Ik heb een klein blikje wormen geopend toen ik Miriam's deelde "Ben ik al op IndieWeb?" met een korte post klagen over mijn eigen problemen op de IndieWeb-trein stappen. Maar het is een goed blik wormen.

Ik denk dat het zoiets was als de volgende dag na het publiceren van dat korte bericht dat David Shanske stak mijn hand uit en bood aan om mijn hoofd rond IndieWeb en de componenten ervan te wikkelen. En godverdomme als het niet belachelijk nuttig was! Zo erg zelfs dat ik zou willen link je naar een nieuw bericht dat David schreef nadat we hadden gepraat, vat dan de dingen hier zo goed mogelijk samen, want (1) het is handig om dingen op te schrijven en (2) een referentie voor later te hebben.

Ja, IndieWeb is verwarrend.

David had iemand geholpen om hun WordPress-site helemaal op te zetten met IndieWeb-krachten. Ook die persoon had moeite om te begrijpen hoe de verschillende stukken in elkaar pasten. Dus David had dit al in gedachten toen Miriam en ik aan het schrijven waren.

"IndieWeb" is voor veel mensen een nieuwe term en daar ontstaat veel verwarring. Is het een raamwerk? Een filosofie? Een set van normen? Afhankelijk van welke het is, verschuiven de verwachtingen voor zover het eruit ziet om er deel van uit te maken.

Het is een beetje van al het bovenstaande. En dat moet nog een beetje verstevigd worden. Er is niets inherent verwarrend aan IndieWeb zelf als je het eenmaal door die verschillende lenzen bekijkt. Na het lezen van de post van David begrijp ik dat IndieWeb meer een reeks protocollen is. Een beetje zoals werken met gestructureerde gegevens of OpenGraph in opmaak. Er hoeft op zich niets te worden geïnstalleerd, maar er zijn standaarden om ze in uw werk te integreren.

Uw identiteit bepaalt IndieWeb. Met andere woorden, uw site bepaalt uw identiteit en kan voor veel dingen worden gebruikt, zoals:

  • Breng andere door IndieWeb ondersteunde sites op de hoogte wanneer ze worden genoemd
  • Ontvang meldingen van andere IndieWeb-sites wanneer u wordt genoemd
  • Haal informatie op uit een vermelding en formatteer deze voor weergave
  • Authenticeer uw identiteit via uw eigen website (een inlogknop van Google maar verbonden met uw site)
  • …onder andere.

Als dat klinkt als pingbacks, nou, dat is het ook. Maar veel robuuster en onderhouden.

Het is anders (en misschien wel makkelijker) om IndieWeb-functies op WordPress te implementeren dan dat het een statische site is.

Het grote verschil is dat WordPress veel van de vereisten biedt die nodig zijn om IndieWeb-achtige dingen te doen. Ik vind het leuk hoe David het uitlegt:

De IndieWeb-implementatie op WordPress is een [reeks] bouwstenen die je wel of niet kunt gebruiken, wat het geweldig maakt, maar soms ook verwarrend. WordPress heeft een filosofie van beslissingen, geen opties. Maar bij IndieWeb draait alles om opties... om het bouwen van de functies die bij u passen.

Die bouwstenen zijn plug-ins die u installeert om IndieWeb-protocollen en -technologieën aan WordPress toe te voegen. Het is geweldig dat die direct beschikbaar zijn, want dat neemt veel werk uit de zaken. Als u echter een statische site runt, bent u vastbesloten om het meeste daarvan zelf op te zetten.

De post van David is 100% gericht op de WordPress-implementatie. Je kilometers kunnen variëren, maar je zult zeker weggaan met een beter idee van welke protocollen beschikbaar zijn en hoe ze in elkaar passen na het lezen van zijn bericht - en hopelijk ook deze.

De IndieWeb WordPress-plug-in bepaalt uw identiteit.

Ik dacht dat het zoveel dingen achter de schermen deed, maar het is veel eenvoudiger dan dat:

De plug-in zelf zorgt voor het vaststellen van uw identiteit zoals het IndieWeb het ziet. Het biedt een h-kaartsjabloon en widget. H-Card is de opmaak voor het markeren van informatie over een persoon of plaats. Dit is dus een element dat veel mensen toch op hun site plaatsen.

Het is dus echt mogelijk om hetzelfde te krijgen door een WordPress-thema correct te markeren. Het gemak hier is dat u een handig klein sjabloon krijgt dat is gemarkeerd om de h-card open formaat en een widget om het in het widgetgebied van een thema te plaatsen.

Hier is een super gedetailleerd voorbeeld van de h-card opmaak getrokken uit de documentatie voor Microformats2:

<div class="h-card">
  <img class="u-photo" alt="photo of Mitchell"
       src="https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"/>
  <a class="p-name u-url"
     href="http://blog.lizardwrangler.com/"
    >Mitchell Baker</a>
 (<a class="u-url"
     href="https://twitter.com/MitchellBaker"
    >@MitchellBaker</a>)
  <span class="p-org">Mozilla Foundation</span>
  <p class="p-note">
    Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities.
  </p>
  <span class="p-category">Strategy</span>
  <span class="p-category">Leadership</span>
</div>

Zie je die klassennamen? Klassen zoals .h-card, u-photo, p-name, etc. bieden allemaal contextuele betekenis voor de identiteit van een persoon die het vervolgens als JSON ontleedt:

{
  "items": [{
    "type": ["h-card"],
    "properties": {
      "photo": ["https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"],
      "name": ["Mitchell Baker"],
      "url": [
        "http://blog.lizardwrangler.com/",
        "https://twitter.com/MitchellBaker"
      ],
      "org": ["Mozilla Foundation"],
      "note": ["Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities."],
      "category": [
        "Strategy",
        "Leadership"
      ]
    }
  }]
}

De plug-in doet het verzenden, ontvangen of parseren niet. In plaats daarvan biedt het een WordPress-site een manier om uw identiteit in de opmaak te verifiëren.

Niet alle WordPress-thema's ondersteunen Microformats

Als je je hoofd krabde de eerste keer dat je "Microformats" zag zoals ik deed, definieert David het mooi:

[…] Microformats…een manier om HTML te markeren zodat elementen kunnen worden geïdentificeerd. Het is een van de vele manieren om dit te doen, maar het is heel eenvoudig en leesbaar, en daarom is het populair in de IndieWeb-gemeenschap.

Het probleem, zoals David vervolgt, is dat veel thema's niet op een Microformats-vriendelijke manier zijn gemarkeerd - en dat is wat de Microformats2-plug-in is ontworpen om te repareren. Dat gezegd hebbende, roept David snel op dat de plug-in extreem beperkt is in hoe het dit bereikt, en hij raadt aan om in plaats daarvan een thema met de hand te markeren.

Volgens David zal de volgende grote release van de Webmention-plug-in waarschijnlijk slimmere manieren bevatten om inhoud en afbeeldingen te detecteren die het kan gebruiken en deze te formatteren voor ondersteuning voor Microformats2.

Webmentions verzenden en ontvangen meldingen.

OK, dus als je je identiteit via je site hebt vastgesteld, zodat je vindbaar bent, en je site is gemarkeerd voor h-card ondersteuning met behulp van Microformats2. Super goed! Je hebt nog steeds iets in het midden nodig dat werkt als een operator die meldingen verzendt en ontvangt. Met andere woorden, wanneer een andere site u vermeldt (een webvermelding genoemd), heeft de site die u vermeldt een manier nodig om het verzenden van die vermelding naar u te ondersteunen, en uw site heeft een manier nodig om deze te accepteren (of vice versa).

Dat is wat de Webvermelding plug-in is voor. Het is waarschijnlijk ook de bron van het grootste deel van mijn IndieWeb-verwarring. Ik dacht dat het gegevens aan het formatteren was en een extra service nodig had om het te verzenden en te ontvangen. Nee! Het is eigenlijk het verzenden en ontvangen van de gegevens in plaats van het maken van de vermelding. Terug naar David:

Toen het werd gebouwd, handelde de plug-in alleen over het ontvangen en verzenden van webvermeldingen, en niet over weergave. Semantic Linkbacks, een aparte plug-in, regelde dat niet alleen voor webvermeldingen, maar ook voor de oudere pingback- en trackback-protocollen.

De plug-in Webmention communiceert dus meldingen. Ondertussen is een andere plug-in genaamd Semantic Linkbacks die de gegevens verwerkt. En wat zijn in godsnaam semantische linkbacks?

Semantische Linkbacks halen en verwerken gegevens.

Semantische linkbacks is een andere plug-in die een ander deel van het proces afhandelt. Ik kan het op geen enkele manier beter uitleggen dan David al doet:

Semantic Linkbacks neemt een webvermelding, wat een melding is dat een andere site naar iets op uw site heeft gelinkt, haalt de andere site op en probeert de informatie weer te geven. Hoe dat wordt gedaan, kan variëren van alleen een profielfoto (als deze die kan vinden), tot het interpreteren als een volledige opmerking.

Het doet dit met behulp van Microformats.

Ik verwachtte dat de belangrijkste IndieWeb-plug-in dit al deed, omdat deze andere opmaak afhandelt. Maar het biedt alleen de sjabloon en widget om uw identiteit op uw site te krijgen. Zodra de Semantic Linkbacks-plug-in een inkomende webvermelding ophaalt, neemt het de gegevens, formatteert het en probeert het vervolgens weer te geven.

Het klinkt alsof de plug-in enigszins zal worden samengevoegd met (of vervangen door) een aankomende versie van de Webmention-plug-in:

Omdat veel mensen niet geneigd zijn, of zich niet op hun gemak voelen bij het wijzigen van een thema, zal de nieuwe versie van Webmentions verschillende alternatieve manieren bevatten om te proberen een afbeelding of samenvatting te vinden om weer te geven... van OpenGraph (die Facebook en Twitter gebruiken om URL's weer te geven die eraan zijn verstrekt ) om de WordPress REST API-versie van een pagina te detecteren en die te gebruiken om de auteursnaam en profielafbeelding te krijgen. Geen van hen zal zoveel context bieden als Microformats, maar de ervaring zal nog steeds de moeite waard zijn om te installeren.

Dat is zeker leuk, want het maakt gebruik van de WordPress REST API voor de JSON-reactie en formatteert die voor weergave.

Brid.gy is een service om interacties weer te geven.

Een webvermelding kan een interactie zijn, bijvoorbeeld dat iemand je bericht op Twitter leuk vindt of retweet.

Het onderscheiden van een like van een repost van een opmerking van wat er ook maar moet gebeuren, en je zou de Twitter (of wat dan ook) API moeten implementeren om dat onderscheid te maken.

Dat is iets wat je zeker kunt doen! Maar als je liever plug-and-play wilt, heeft een van de IndieWeb-communityleden een service gemaakt met de naam Brid.gy. U maakt een account aan, sluit uw site aan en geeft app-machtigingen aan de service ... en u bent klaar!

Wat Brid.gy heeft gedaan, is in wezen de API's voor Twitter, Facebook, Instagram en anderen implementeren, zodat wanneer het detecteert dat een bericht in die services die interactie heeft met uw gesyndiceerde bericht, een webvermelding naar uw site wordt verzonden en door de proces van publiceren op uw eigen site.

Er is zoveel meer!

Snelle treffers:

  • IndieAuth: Dit is een protocol gebaseerd op OAuth 2. De plug-in brengt een eindpunt tot stand in de WordPress REST API dat kan worden gebruikt om uw identiteit te verifiëren via uw eigen door uzelf gehoste site - in wezen uw eigen Google-aanmeldingsknop, maar zonder dat eindpunt zelf vast te stellen of op een afzonderlijke gehoste API te hoeven vertrouwen.
  • Microcafé: Voor degenen die WordPress gebruiken maar liever een andere editor hebben, kunnen de Micropub-plug-in. Deze voegt een eindpunt toe waarmee je inhoud op je site kunt publiceren en met behulp van een door Micropub ondersteunde editor items in een Microformats2-feed kunt maken, waardoor je veel meer opties hebt voor het schrijven van inhoud buiten de WordPress Block Editor.
  • Eenvoudige locatie: David heeft deze plug-in geschreven en ik was super onder de indruk toen hij het voor mij demonstreerde. Het idee is dat het gegevens van je huidige locatie binnenhaalt die voor alles kunnen worden gebruikt, van het weergeven van het weer op het moment dat je een bericht schreef, tot het maken van een volledig archief van berichten op een ingesloten kaart op basis van de postlocatie. Ik zou eerlijk gezegd graag zien dat zoiets rechtstreeks in WordPress wordt ingebakken.

De bijgewerkte stroom

Ik heb geprobeerd een illustratie te maken die de verschillende stukken in mijn laatste bericht schetst, maar laten we het opnieuw proberen met een bijgewerkt begrip van wat er gebeurt:

Het schetsen van de stroom tussen een IndieWeb-enabled site en een site die het vermeldt.
(Full size)

Is dit allemaal logisch?

High fives voor David voor zowel het contact opnemen als de tijd nemen om me te laten zien hoe het eruit ziet om IndieWeb op WordPress te implementeren. Ik kan niet beweren dat ik alle nuances volledig begrijp, maar ik heb in ieder geval het gevoel dat ik een goed begrip heb van de stukjes - de filosofie, protocollen en technologie - die nodig zijn om het mogelijk te maken.

Ik draai het graag naar je om! Helpt dit om dingen voor u te verduidelijken? Is er iets dat je moeilijk kunt begrijpen? Denk je dat je nu een WordPress-site met IndieWeb-functies kunt configureren? Laten we naar de reacties gaan!

spot_img

Laatste intelligentie

spot_img

Chat met ons

Hallo daar! Hoe kan ik u helpen?