der Uninformat

Vielleicht ist es nur meine »Filterblase«, aber in den letzten Monaten hat die Bewegung raus aus den Trümmern des Web 2.0 zurück zur eigenen Domain (Stichwort »Indieweb«) ein wenig Fahrt aufgenommen.

Facebook ist sowieso ein hoffnungsloser Fall, und Dinge wie die neuerdings gehäuft auftretenden Sperrungen von Twitteraccounts ohne erkennbaren Grund lassen die Leute über »meine digitale Identität ist in fremden Händen und die können sie mir einfach wegnehmen« nachdenken. Nicht nur der »New Yorker« fragt sich: »Can ›Indie‹ Social Media Save Us?«

Diese Frage beantworten immer mehr mit »Ja« und springen als Konsequenz auf den »Indieweb-Zug« auf. Ich jetzt auch, deshalb »kann« dieses kleine familiäre Weblog nun Webmentions!

(Photo by sergio souza on Unsplash, thanx!)

»Into the Personal-Website-Verse«

Mittlerweile erreicht die Indieweb-Diskussion auch Leute außerhalb der Nerd-Blase (Bsp.: »Haben wir Peak Social Media Exploitation erreicht?«). Als richtiger Weg heraus aus dieser Abhängigkeit (neben »alles löschen und Offline-Eremit werden«…) erscheint der Rückweg »Into the Personal-Website-Verse«:

»What started out as the most promising development in the history of the Web – the participation of users in the creation of content and online dialogue at scale – has turned into a swamp of sensation, lies, hate speech, harassment, and noise. (…) There is one alternative to social media sites and publishing platforms that has been around since the early, innocent days of the web. It is an alternative that provides immense freedom and control: The personal website.«

Das Indieweb-Thema finde ich schon immer recht interessant, und einige sind in der Sache bereits Jahre aktiv. Ich hatte das Thema, zusammen mit diversen anderen Dingen, in der Schublade mit der Aufschrift »Könnte man mal machen…« abgelegt. Dieser jüngste kleine »Hype« hat es mich aber aus der Schublade rausholen und den Editor anwerfen lassen. Frisch ans Werk!

Der Weg ins Indieweb

Im »Getting Started« auf indieweb.org findet man eine Handreichung für den Weg ins Indieweb. Die grundlegende Dinge (eigene Domain etc.) hatte ich sowieso schon und damit einen eigenen digitalen Ort.

Das ist schon mal gut! Was zusätzlich zu tun ist, ist das Einbauen von Funktionen zur Kommunikation nach außen. Denn das hat, neben einfachen Funktionen zum Publizieren, den Social-Media-Silos den Reiz gegeben und »damals« die Massenbewegung vom eigenen Blog hin zu Twitter und Co. ausgelöst.

Wir brauchen also eine »Roadmap« ins Indieweb:

Schritt 0: Eigene Domain und ein Blog

Das ist die Grundlage und hat erst einmal nichts mit Indieweb zu tun. Es gibt viele Wege das zu realisieren, hier gibt es das schon seit vielen vielen Jahren.

Schritt 1: Identitäten zusammenfassen

Das liest sich komplizierter als es ist. Man muss lediglich die Links zur eigenen Domain sowie den diversen Profilen »da draußen« mit »rel=me« ausstatten, Bsp:

  <a href="https://uninform.at/" title="Home" rel="me">Home</a>
  <a href="https://twitter.com/TWNAME" rel="me" 
  title="Twitter">Twitter</a>

Ob das erfolgreich war, kann man im Validator überprüfen. Klappt! Damit kann man per IndieAuth die verknüpften Profile der Social-Media-Sites zum Authentifizieren auf ganz anderen Websites nutzen, die ID ist aber die eigene Domain. Wenn man z.B. Twitter nicht mehr will, dann entfernt man das »rel=me« und nutzt etwas anderes.

Schritt 2: Visitenkarte

Damit die Informationen bezüglich der Identität der Hausherrin oder des Hausherrns bei der Interaktion zwischen Indieweb-Sites maschinenlesbar verfügbar sind, sollte man diese mit Microformats als h-card ablegen. Auch das liest sich komplizierter als es ist. Man muss nur dem Code für die persönlichen Infos, die man normalerweise eh auf der Website hat, ein paar Klassen hinzufügen. Bei mir steckt das im Footer und implementiert die h-card-Basisinfos, hier ist ein Auszug aus meinem Code als Beispiel:

  <footer role="contentinfo" id="footer" class="h-card">
    <h2><i class="fa fa-star"></i> der Uninformat</h2>
    <p class="p-note">
      <img src="https://uninform.at/img/rg-uninformat.jpg" 
      alt="[Bild: Ralf G.]" class="ava u-photo" /> 
      <i>der Uninformat</i> ist das Wald- und Wiesenblog 
      von <span rel="author" class="p-name p-author">Ralf G.</span> 
      in seiner V. Inkarnation seit 2002.
    </p>
    <ul>
      <li>
        <a class="u-url" href="https://uninform.at/" rel="me">
          Home
        </a>
        <a href="mailto:irgendwo@im.internetz" class="u-email">
          irgendwo@im.internetz
        </a>
      </li>
    </ul>
  </footer>

Dazu wird der HTML-Code mit ein paar Klassen angereichert:

• h-card ist die Klasse für den Container, der die »Visitenkarte« definiert.
• p-name definiert den Namen.
• u-photo kommt in ein img-Tag und legt das Avatar-Foto fest.
• u-url bestimmt den Link, den man als sein »Home« bezeichnet.
• u-email ist, wie der Name schon sagt, der Link zu einer E-Mail-Adresse.
• p-note schließlich definiert einen kurzen(!) Text.

Das reicht als Basisinfo. Auch für die h-card gibt es einen Validator. Funktioniert!

Schritt 3: Inhalt maschinenlesbar machen

Ähnlich wie die persönlichen Informationen in Schritt 2 muss man auch seine Inhalte mit dem Microformat h-entry kennzeichnen. Auch das wird mit der Anreicherung der HTML-Struktur mit den Klassen aus der h-entry-Spezifikation erreicht (vereinfachtes Beispiel von mir):

<article class="h-entry">
  <h2 class="p-name">No Medium!</h2>
  <p class="subline">
    <time datetime="2019-05-22T13:11:00.000+0200" class="dt-published">
      <a href="/2019/05/22/no-medium/" class="u-url" title="Permalink">
      22.05.2019 13:11 Uhr
      </a>
    </time>
  </p>
  <span class="e-content">DER INHALT</span>
  <p class="tagslist"> 
    <a href="/tags/weblogs" class="p-category">weblogs</a>
    <a href="/tags/medium" class="p-category">medium</a>
  </p>
  <p class="subline authorline">
    Autor: 
    <a rel="author" class="p-author h-card" href="/">
      <img class="u-photo" src="/favicon-96x96.png"> 
      Ralf G.
    </a>
  </p>
</article>

Die Klassen werden ins Template des CMS/Static-Site-Generators hinzugefügt:

• h-entry definiert den Bereich als Beitrag.
• p-name definiert die Überschrift.
• dt-published definiert das Erscheinungsdatum. Das ist ein wenig kompliziert, weil das im ISO-8601-Format angegeben werden muss. Ein typischer strftime-kompatibler String dafür sieht so aus:
  "%Y-%m-%dT%H:%M:%S.%L%z"
• u-url definiert den Permalink.
• e-content ist der eigentliche Inhalt des Beitrags.
• p-category definiert Tags und/oder Kategorien.
• p-author h-card kann einen Autor des Artikels festlegen. Baut man in diesen Bereich noch in img mit u-photo ein wird auch ein Bild des Autors definiert.

Auch dafür gibt es einen Validator. Funktioniert auch!

Schritt 4: Webmentions

Damit sind die Voraussetzungen geschaffen um Webmentions empfangen und senden zu können. Webmentions ähneln dem guten alten Pingback. Wenn man in seinem Blogbeitrag auf einen anderen Blogbeitrag eingeht, so »pingt« man diese Website über ihren Webmention-Endpunkt an. Vorausgesetzt, sie ist auch im Indieweb auf Empfang.

Der Link, ein Textauszug und/oder andere mit den oben aufgeführten Microformats automatisch auslesbare Elemente werden dann wie Kommentare unter dem angepingten Blogbeitrag angezeigt. Bei Aaron Parecki oder bei Jeremy Keith‘s »Adactio« kann man Webmentions in Action sehen. Am Datum des letzten Artikels (September 2013) sieht man übrigens, wie lange es diese Technologie schon gibt…

Da dieses kleine Blog hier mit Jekyll statisch gerendert wird, kann man für die Webmentions nicht einfach wie bei Wordpress ein Plugin installieren. Hinter den Kulissen werkelt hier eine kleine API-only Rails-App, die u.a. die Webmentions entgegennimmt und diese als JSON zur Verfügung steht. Was dann mit einer kleinen Vue.js-Komponente hier im Blog ausgelesen und angezeigt wird. Mehr dazu gibt es demnächst drüben im devblog »nil?«.

Wer Lust hat kann ja mal einen kurzen Test-Eintrag verfassen und eine Webmention senden. Ich habe schon ein wenig rumprobiert, in dem ich selbst Webmentions zu allen möglichen Blogs ausgelöst habe. Das Ganze ist ein wenig wackelig, da fast jedes indiewebifizierte Blog die Microformats anders auffasst. Bei webmention.rocks kann man seine eigene Implementierung testen.

Schritt 5 – ToDo: POSSE

Damit sind schon ein paar grundlegende Dinge eingerichtet, um die Fahrkarte für den Indieweb-Zug zu lösen. Als nächstes wird POSSE angegangen. Wir erinnern uns, wir wollen uns und unsere schönen Inhalte aus den Datensilos befreien, damit sie nicht verschwinden wenn Twitter den Hahn abdreht.

Verzichten muss man deshalb auf die Interaktions- und Vernetzungs-Schleuder Social Media aber nicht. POSSE – »Publish (on your) Own Site, Syndicate Elsewhere« (»Publiziere auf deiner eigenen Seite und syndiziere woanders«) ermöglicht das. Die Inhalte werden auf dem eigenen Blog erstellt und dann automatisiert nach eigenen Vorlieben zu Twitter, Mastodon und wer-weiß-noch-wo hinübersyndiziert.

Auf dem Indieweb-Zug Platz genommen!

Das Aufspringen auf den langsam losfahrenden Indieweb-Zug ist damit gelungen. Vielleicht gibt es ja tatsächlich eine Renaissance der persönlichen Websites und Blogs, wenn die Social-Media-Giganten so weitermachen. Wie Matthias Ott in seinem anfangs zitierten Beitrag schrieb:

»Use Webmentions and Microformats – and join the IndieWeb.«

Genau!