Vor ein paar Wochen kam Marcel Weiß auf mich zu und fragte, ob ich nicht Lust hätte, mit ihm über das Thema „Open Web“ zu podcasten. Die letzte Ausgabe des OpenWeb-Podcasts ist jetzt fast 7 Jahre alt und natürlich freue ich mich wie bolle, wieder mit jemandem über mein Nischen-Thema zu sprechen 😉

Im Ernst, ich freue mich sehr, dass Marcel Interesse an dem Thema hat (und das schon seit einer ganzen Weile) und nach einem kurzen Vorgespräch haben wir auch gemerkt, dass uns der Stoff so bald nicht ausgehen wird!

Die erste Ausgabe ist eine Bestandsaufnahme der letzten 15 Jahre „Open Web“ und ein kleiner Ausblick auf zukünftige Themen.

In der ersten Ausgabe der neuen Podcastreihe zum Themenkomplex ‚Open Web‘ sprechen Matthias Pfefferle und Marcel Weiß über die Evolution von OpenID, die uns einen Hinweis auf allgemeine Herausforderungen für Protokolle in der heutigen Zeit gibt; Stichwort Extrawürste der großen Teilnehmer, welche zu Balkanisierung führen. Weitere Themen sind die DSGVO und Dataportability, Mastodon, Identi.ca und wie ActivityPub aktuell OStatus als zugrundeliegendes Protokoll für dezentrale Netzwerke ablöst. Wir ordnen die Irrungen von Diaspora ein und reden last not least über die Tragödie der Microformats.

Viel Spaß beim Hören!

‚Hier & Jetzt‘ kann man per RSS-Feed abonnieren und findet man natürlich auch bei Apple Podcasts und in jeder Podcast-App.

2018 war ein durchwachsenes Jahr!

Mein privates „Ich“ hat letztes Jahr sehr viel Raum eingenommen und auch beruflich hat sich viel verändert.

Das heißt ich hatte generell wenig Zeit für mein online „Ich“ und wenn ich doch etwas Zeit hatte, war das Ergebnis meistens eher frustrierend.

Pfefferles OpenWeb

Bilder von "Pfefferles OpenWeb" Artikeln

Ich habe für das SCREENGUIDE/Webstandards-Magazin in den letzten 10 Jahren 36 mal „Pfefferles OpenWeb“, 3 Artikel, 1 Titelthema und 1 Interview geschrieben! Letztes Jahr musste der Verlag das Magazin aus „wirtschaftlichen Gründen“ leider einstellen und ich hab es nicht einmal geschafft darüber zu schreiben!

notiz.Blog

Und zum Bloggen kam ich, trotz der gewonnenen Zeit auch nicht! Wenn ich dieses Jahr so weiter mache, muss ich mir meinen selbstvergebenen Titel als „Chronist des OpenWebs“ wieder selbst aberkennen!

IndieWeb

Das IndieWeb wächst und das ist prinzipiell auch gut so. Neben den ganzen Nerds und Geeks interessieren sich auch immer mehr Blogger und Journalisten für das Thema. In der Community spricht man von der 2. Generation.

Auch das Interesse an WordPress wächst. Das ist nicht verwunderlich, immerhin geht es um die Berufsgruppe der Schreibenden und deren Seiten werden, mit einer Wahrscheinlichkeit von 30%, mit WordPress betrieben.

Dieses Interesse beißt sich aber leider mit meinen Möglichkeiten. Von Anfang an verfolge ich folgende Grundsätze des IndieWebs:

Scratch Your Own Itches. Make tools, templates, etc. for yourself first, not for all of your friends or ”everyone“.

und:

Use what you make! Whatever you build you should actively use. If you aren’t depending on it, why should anybody else?

Ich baue (mittlerweile) ausschließlich Plugins die ich für sinnvoll erachte und ich baue sie so, dass sie für mich funktionieren. Das mag erstmal egoistisch klingen, es ist für mich aber die einzige Möglichkeit dieses „Hobby“ überhaupt zu betreiben.

Ich verstehe, dass Anwender teilweise überfordert sind, meine Plugins zu benutzen, kann sie aber nicht in dem Umfang optimieren, der nötig wäre. Ideal ist wahrscheinlich ein großes IndieWeb Plugin, welches alle Features bereit stellt und, am besten ohne viel Einstellungen, einfach funktioniert. Aktuell nutze ich 50% aller, vom IndieWeb vorgeschlagenen WordPress Plugins, eine allumfassende Plugin Suite würde dann also nicht mehr meinen Anforderungen entsprechen.

Ich habe aktuell keine Ahnung wie ich aus diesem Dilemma heraus kommen soll. Es gibt Plugins die will ich nicht aus der Hand geben und Plugins die ich an die Community übergeben habe, werden aus Mangel an Entwicklern nicht weiter gepflegt. Aktuell arbeiten maximal 3 Personen (mich inbegriffen) an über 10 unterschiedlichen Plugins.

…und wenn das noch nicht genug wäre, kommt das „Microformats Problem“ noch on top.

Microformats

Microformats2 und WordPress scheinen nicht kompatibel zu sein und das ist schade, immerhin sind Microformats DER Building-Block des IndieWebs. Mehr noch: Microformats sind die API des IndieWebs!

Ich habe in den letzten Jahren viel ausprobiert um das Problem zu lösen, aber es gibt keine generische Möglichkeit, ein WordPress Theme mit Microformats2 auszustatten.

Benutzt man ein Plugin, um über Hooks einige zentrale Elemente (wie z.B. den Titel) Semantisch auszuzeichnen, bekommt man nette Effekte, mit Themes die ihre Ausgabe „escapen“:

After activating the last version (1.1.0) of your plugin on WordPress 4.9.8 with understrap theme my meta entry become : Posted on September 12, 2018 by <span class='p-author h-card'>Author</span> instead of : Posted on September 12, 2018 by Author for fun I look into the code and I think the error is here but since I’m totally not a PHP developer I’ll pass on the potential PR

Versucht man es mit einer Art Microformats Feed, bekommt man Probleme, alle Meta-Daten zu integrieren. Schlimmer noch, man arbeitet gegen einen Grundsatz der Microformats:

Design for humans first, machines second

Zusammengefasst: Microformats gehören ins Theme, es gibt aber keine generische Lösung. Eine generische API ist möglich, widerspricht aber der Microformats-Idee.

Aktuell gibt es drei WordPress Themes die Microformats2 voll unterstützen und um sein Blog wirklich IndieWeb tauglich zu machen, muss man eines dieser drei Themes benutzen oder selber HTML bzw. ein Theme schreiben.

Das ist frustrierend! Außerdem liefen die Diskussionen (meines Erachtens) etwas aus dem Ruder, weshalb ich mich letztes Jahr entschieden habe, mich aus dem Microformats-Thema komplett heraus zu nehmen.

OStatus

OStatus ist das zentrale Protokoll, über das identi.ca, status.net, gnu.social und friendi.ca sprechen. Es ist arsch-alt, funktioniert aber immer noch prächtig!

Ich hab mich wie bolle gefreut als OStatus mit Mastodon wieder frischen Wind bekam, hab mein altes OStatus Plugin ein wenig aufpoliert und wollte gerade freudig darüber berichten, als Eugen Rochko, der Macher hinter Mastodon, einen meiner Bugs, mit folgenden Worten schloss:

Closing on the grounds that OStatus is no longer our primary mechanism and will be deprecated in the future.

Mein vorbereiteter Blogpost hatte den Titel „My Blog is my Social-Network“ und der erste Abschnitt lautete:

Ich habe in den letzte Woche an einem Update für ein WordPress Plugin gearbeitet, das ich seit 6 Jahren nicht angerührt habe… Nicht dass das Plugin an sich nicht mehr funktioniert hätte, aber PHP und WordPress haben sich weiter entwickelt.

Schade!

ActivityPub

Aber dann kam ActivityPub! ActivityPub ist der heiße Shit im Fediverse. So zu sagen OStatus in neu und besser! Was AtomPub für Atom ist, ist ActivityPub für ActivityStreams… und noch ein bisschen mehr.

Ein Schaubild des ActivitPub flows

ActivityPub ist außerdem der erste, vom W3C veröffentlicht, „Standard“ (abhängig davon wie man „Standard“ definiert), der versucht ein dezentrales, soziales Netzwerke zu definieren.

Naiv wie ich bin, dachte ich, ich geb‘ dem Ganzen eine Chance. Die Spezifikation ist relativ simpel und ein „Standard“ ist „wohl definiert“, das heißt es gibt nur einen Weg um ihn zu implementieren!

Das Ergebnis (Trommelwirbel): ein ActivityPub Plugin für WordPress!

War es so einfach wie ich gedacht habe? Natürlich nicht! Es hat natürlich doch wieder jede Plattform seine extra Wurst, aber im Gegensatz zu Microformats2, basiert ActivityPub auf einer „echten“ API und lässt sich somit relativ leicht in WordPress integrieren.

ActivityPub und das Plugin waren definitiv das Highlight des Jahres, immerhin ist WordPress jetzt offiziell ein Teil des Fediverse:

und laut dem „2018 Report“ von fediverse.network sogar auf Platz 8 von 13.

Fazit

Die Arbeit an ActivityPub hat eigentlich Spaß gemacht und ich werde mich wahrscheinlich auch 2019 hauptsächlich mit ActivityPub beschäftigen!

2018 war nicht so dolle, 2019 kann nur besser werden!

Zu Zeiten von Pingbacks, antwortete man noch mit Blog-Posts auf Blog-Posts, aber es fehlte die Technik um sie richtig zu übermitteln und darzustellen:

[…] und Wertvorstellungen entspricht und nicht von der Mehrheit meiner Freunde abhängig sein.» Dezentrale Walled Gardens Hier erscheinen von Montag bis Freitag ausgewählte Links zu lesenswerten Texten und aktuellen […]

Mit Webmentions und Microformats2 hat sich zwar die Darstellung verbessert, aber die Texte… naja… haben sich "verändert":

#100DoPP d84:
Both #AS2 & #Micropub are @W3C PRs!
Congrats @SocialWebWG @jasnell @evanpro @aaronpk!
https://www.w3.org/TR/micropub
https://www.w3.org/TR/activitystreams-core/
https://www.w3.org/TR/activitystreams-vocabulary

tantek.com/t4np2

Twitter sei Dank!

…da hätte man sich die Arbeit auch sparen können 😉

Ich durfte mal wieder einen etwas längeren Artikel für das aktuelle SCREENGUIDE Magazin (Ausgabe 34) schreiben. Thema des Artikels sind Websemantics:

Websemantics sind fast 17 Jahre alt, und es hat eine ganze Weile gedauert, bis sie sich wirklich etabliert haben. Aktuell gibt es eine Reihe von Formaten, etwa OpenGraph, Twitter Cards, Schema.org, Microformats, RDFa und Microdata. Wir sagen Ihnen, auf welche Formate Sie sich konzentrieren sollten.

Websemantiken, genauer gesagt Microformats, haben vor einer halben Ewigkeit mein Interesse für offene Standards geweckt und deshalb hab ich mich sehr gefreut, mich wieder etwas ausführlicher mit dem Thema zu beschäftigen. Außerdem habe ich vor fast genau 8 Jahren meinen ersten Artikel über ein ganz ähnliches Thema geschrieben 🙂

Microformats erfreuen sich mittlerweile einer großen Verbreitung, alleine die Yahoo! Suche hat mehr als 4 Milliarden der verschiedensten Formate indiziert und die Zahl wächst stetig. Trotz dieser scheinbar großen Verbreitung und der Unterstützung verschiedenster Browser erreicht das Thema „Semantic HTML“ noch immer nicht die breite Masse. Dieser Artikel beschreibt die Probleme bisheriger Browserunterstützungen und vorhandene Alternativen.

Neben dem Websemantics Artikel, gibt es auch wieder eine Kolumne, diesmal über Micro.blog:

Facebook ist jetzt knapp 13 Jahre alt, und so mancher hat mittlerweile sein halbes Leben auf der Plattform dokumentiert. Je länger Facebook besteht, umso mehr binden wir uns an den Dienst. Deshalb gibt es immer wieder Ideen und Plattformen, um sich unabhängiger zu machen – wie etwa das neue Micro.blog, das gerade via Crowdfunding finanziert wurde.

Falls ich noch einmal zwei Artikel für eine Ausgabe schreiben sollte, sollte ich mir die Einleitungen der beiden Texte etwas genauer ansehen 😉

App.net hat endlich alles nachgereicht was Dalton Caldwell vor fast genau einem Jahr versprochen hat. Die Liste kann sich echt sehen lassen:

Mal schauen was sich damit alles basteln lässt, immerhin hab ich im SCREENGUIDE-Magazin (Ausgabe 18) noch groß getönt:

Mit ein paar wenigen Änderungen und dem Support von z. B. Microformats, RSS/Pubsubhubbub, AtomPub oder Pingbacks, wäre App.net kompatibel zu fast allen Blogs oder IndieWeb-Systemen. Das hätte zum Vorteil, dass sich App.net ohne weitere Anpassungen über RSS-Reader konsumieren und über Blogging-Tools befüllen ließe. Außerdem könnten Posts und Kommentare zwischen App.net und z.B. WordPress ausgetauscht werden, ohne auf komplizierte, dezentrale Protokolle im Sinne von Diaspora oder Tent.io zurückgreifen zu müssen.

😉

via Carsten Pötter

Pingbacks (und Trackbacks) werden zwar immer noch von allen WordPress Blogs unterstützt aber mal ehrlich… wen interessieren sie denn noch wirklich? Das hängt hauptsächlich mit der etwas veralteten Spezifikation zusammen, in der folgendes vorgeschlagen wird:

Bob’s blog also retrieves other data required from the content of Alice’s new post, such as the page title, an extract of the page content surrounding the link to Bob’s post, any attributes indicating which language the page is in, and so forth.

Das führt bei WordPress zu Einträgen die ungefähr so aussehen:

[…] und Wertvorstellungen entspricht und nicht von der Mehrheit meiner Freunde abhängig sein.» Dezentrale Walled Gardens Hier erscheinen von Montag bis Freitag ausgewählte Links zu lesenswerten Texten und aktuellen […]

Der automatische generierte Ausschnitt lässt nicht wirklich erahnen was Markus Spath wirklich geschrieben hat und deshalb verüble ich es niemandem, wenn er die Pingbacks/Trackbacks auf seiner Seite auf eine simple Liste von Links beschränkt hat. Als die Spezifikation 2002 geschrieben wurde, war das mit dem „Ausschnitt um den Link“ sicherlich eine gute Lösung. Es gab keine andere Möglichkeit automatisch zu erkennen welcher Text genau zu dem Link gehört oder wann ein neuer Artikel, die Navigation oder sogar Werbung beginnt. Mittlerweile lassen sich Inhalte dank Websemantiken wie Microformats, RDFa oder Microdata sehr gut erkennen. Aber auch mit purem HTML5 Markup lässt sich problemlos ein <article /> und dessen Überschrift erkennen.

Pingbacks sind aktuell die einfachste und wahrscheinlich sogar die einzige Möglichkeit, Kommentare dezentral und vor allem Plattform unabhängig zu „verschicken“, deshalb verstehe ich nicht wieso es so lange gedauert hat, bis jemand (im Rahmen eines IndieWebCamps) auf die Idee kam sie den aktuellen Bedürfnissen und Möglichkeiten anzupassen anstatt sich weiter den Kopf über komplizierte dezentrale Protokolle zu zermartern. Wer sich das Salmon Protocol schon einmal angeschaut hat, weiß was ich meine…

Pingbacks haben diverse Vorzüge:

  • Sie sind leicht zu implementieren (einfacher XML-RPC Request an jedem, im Text erwähnte URL)
  • Sie bieten einen simplen Schutz (wenn auch keinen 100%igen) gegen Spam, da der Pingende zumindest für eine gewisse Zeit auf die ge-pingte Seite verlinken muss
  • DRY… Die Webseite dient als API und man muss seine Texte nicht zusätzlich in diversen XML oder JSON Formaten anbieten

Auf der IndieWebCamp Seite gibt es eine Reihe an interessanten Diskussionen wie sich mit Hilfe von Microformats und ein paar rel-Attributen auch „Likes“ oder „RSVPs“ über Pingbacks realisieren ließen.

Ein Like könnte beispielsweise folgendermaßen aussehen:

<div class="h-entry"><span class="p-autor h-card">Matthias Pfefferle</span> likes <a rel="object-of-like" href="http://hackr.de">hackr.de</a></div>

Sandeep Shetty hat das auf sandeep.io sehr schön erklärt und implementiert!

Ben Werdmuller hat außerdem nochmal alles (Comments/Likes/RSVPs) als Video zusammengefasst:

Im nächsten Blogpost geht es dann um Webmentions, einer etwas moderneren Variante von Pingbacks.

indiewebcamp-logo

IndieWeb? Schon wieder so ein hippes Buzzword-Dingens wie DataPortability, Synaptic oder Federated Social Web? Naja, irgendwie schon aber irgendwie auch nicht… 😉

Seit dem ich das Internet für mich entdeckt habe hatte ich meine eigene Webseite… Von den ersten Frontpage (das hätte ich vielleicht besser verschweigen sollen) Versuchen auf Geocities mit Kostenlos-Domain-Weiterleitung (wer kennt noch kickme.to?), zum eigenen Webspace und Homesite, zu ersten PHP Erfahrungen und phpNuke, zu diversen Webseiten und Blogs und letztendlich auch zu meinem Beruf. Darum tue ich mich besonders schwer, Inhalte auf Facebook und Co. zu teilen/schreiben, wenn ich sie doch auch auf meiner eigenen Seite veröffentlichen könnte. Außerdem scheint sich meine Generation (oder vielleicht auch nur mein Freundeskreis) nicht sonderlich für Social Networks zu interessieren und man trifft sich lieber oder telefoniert.

Damit stecke ich natürlich in einer Zwickmühle… Einerseits interessiert mich Facebook nicht sonderlich, andererseits bringen Social Networks aber eine Menge Reichweite… und so ist mein Faible für DataPortability, DiSo oder dem Federated Social Web entstanden… Ich will weiterhin der Herr meiner Ideen und Texte bleiben aber schätze die Reichweite und die höhere Dialogbereitschaft von Twitter und Co. sehr.

Bisher hatten alle Bewegungen aber ein großes Problem: Sie hätten nur funktioniert wenn Google, Twitter und Facebook sich angeschlossen und ne Menge hippe „Standards“ eingebaut hätten. Das ist wohl auch der Grund weshalb man von vielen Projekten schon lange nichts mehr gehört hat. Das IndieWeb Credo spricht mir dagegen aus der Seele:

We should all own the content we’re creating, rather than just posting to third-party content silos.
Publish on your own domain, and syndicate out to silos.

Das IndieWebCamp findet in unregelmäßigen abständen statt und beschäftigt sich ausschließlich damit, wie man der Herr seiner Artikel/Tweets bleibt. Im Gegensatz zu DiSo baut die IndieWeb Idee aber nicht auf einem zentralen Framework, CMS oder Blogsystem auf, sondern motiviert jeden selbst aktiv zu werden. Im Vordergrund stehen recht allgemein gehaltene Konzepte und der Slogan eat your own dogfood… Programmiere für deine eigene Bedürfnisse und veröffentliche deinen Code, dass auch andere davon profitieren können. Ein paar Konzepte:

  • POSSE (Publish (on your) Own Site, Syndicate Elsewhere): Veröffentliche alles auf deiner eigenen Seite und verteile es dann über die verschiedenen Kanäle.
  • Comments: Veröffentliche auch Kommentare auf deiner Webseite und setze den Autor über Pingbacks oder Webmentions darüber in Kenntnis.
  • Login: Mit einer Kombination aus rel-me und OAuth (IndieAuth oder RelMeAuth) lassen sich ironischerweise fast mehr Dienste ansprechen als mit OpenID.
  • Web Actions: Ein ähnlicher (wenn auch pragmatischerer) Ansatz wie Web Intents. Share/Like-Buttons sollen sich dem Verhalten des Nutzers anpassen und ihm die Möglichkeiten anbieten die er benötigt, sei es das Teilen über Facebook oder eben über die eigene Seite.

(weitere „Building Blocks“ findet ihr im Wiki)

Ich mag die Idee schon alleine deshalb, weil sie aktuell Funktioniert und nicht von der Fertigstellung oder Einführung von diversen Protokollen abhängig ist (naja fast). So ne Art „Dezentrales Netzwerk für Arme“ 😉

Ich selbst versuche seit ein paar Wochen das NotizBlog IndieWeb tauglich zu machen und habe dazu auch ein paar Plugins auf Github veröffentlicht. Demnächst kommt aber sicherlich noch eine kleiner Anleitung in Form von einem Blogpost dazu.

Vielleicht hat ja jetzt der ein oder andere Blut geleckt und greift mir bei meinem WordPress Projekt ein wenig unter die Arme 😉

Macht euch unabhängig!

(Im Screenguide Magazin Ausgabe 17 gibt es übrigens noch eine etwas ausführlichere Beschreibung der einzelnen IndieWeb Building Blocks)

Eigentlich wollte ich ja nur einen Toolbox Fork erstellen und das Theme um Microdata/Schema.org erweitern und dann hat es doch so viel Spaß gemacht, dass ein eigenes Theme daraus wurde… Ich präsentiere euch SemPress, das hoch semantische HTML5 Theme mit ner Prise Responsiveness und SEO 🙂

Das Theme verschönert übrigens das notizBlog und ist aus folgenden Gründen großartig:

POSH – Plain Old Semantic HTML5

HTML5 Logo

SemPress basiert, wie schon erwähnt, auf Toolbox und die HTML5 Struktur wurde auch weitestgehend beibehalten. Ich habe lediglich einige Tags in (meiner Meinung nach) semantisch passendere getauscht. Im Detail:

  • Semantische Tags – Ich habe einfach mal geschaut welche Tags Toolbox noch nicht unterstützt und sie dann, hoffentlich richtig eingebaut :).
  • HTML5 Input-Types – SemPress unterstützt einige der neuen Input-Types wie z.B. „search“, „email“ und „url“. Mehr dazu in einem älteren Artikel.

Websemantics

Eigentlich hab ich das ganze Projekt (wie schon erwähnt) ja nur gestartet, damit ich mal wieder was produktives mit Microformats machen und Schema.org lernen kann. Hier also der Semantic Overload:

  • Microformats – Toolbox selbst unterstütz Microformats ja schon von Haus aus und ich musste nur kleine hAtom fixes und die richtigen Profile Header setzen.
  • Microformats v2 – Ich bin zwar kein großer Fan von Microformats 2, aber ich wollte testen wie leicht sich das Theme um neues HTML-Classes erweitern lässt und wie viel Arbeit es bedeutet. SemPress unterstützt hCard 2 und hAtom 2.
  • Microdata/Schema.org – Ähnlich wie bei Microformats v2 wollte ich testen wie schwer es ist, Schema.org einzubauen. Das Theme unterstützt http://schema.org/Blog, http://schema.org/BlogPosting and http://schema.org/Person.

Was ich noch gerne einbauen will ist hMedia für alle möglichen Medieninhalte wie z.B. auch WordPress „Images“ und „Galleries“ und natürlich auch das Schema.org Pendant.

WordPress Features

Neben dem ganzen semantik Gedöns, hab ich natürlich auch ne Menge WordPress-Features eingebaut.

  • Post Thumbnails – SemPress unterstützt diverse Post-Thumbnail Größen (maximal 600px) und versucht sie bestmöglich darzustellen. Alle Bilder kleiner als 480px werden z.B. mit float right in den Text integriert.
  • Post Types – Im Gegensatz zu Toolbox unterstützt SemPress folgende Post-Types: „aside, status, gallery, video, audio, link, image“ und fast alle haben auch ein individuelles Layout spendiert bekommen.
  • …außerdem: Localization, Sidebar-Widgets und die WordPress‘ Navigation Menu.

Mal schauen ob ich noch ein Custom-Header-Image mit rein nehmen werde…

CSS und Design

Zuerst sollte SemPress gar kein Design bekommen, aber man muss ja auch bei CSS und Fonts auf dem Laufenden bleiben! Ich mach das ja schließlich nicht zum Spaß sondern zur Fortbildung :). Da ich aber kein wirklich großer Designer bin, hab ich mir ne Menge Ideen und CSS bei folgenden großartigen Projekten ausgeliehen:

  • Das Basis-CSS hab‘ ich von Toolbox übernommen.
  • Die Tabellen, Buttons, Input-Felder, Code-Boxen habe ich mir bei Twitters Bootstrap gemopst.
  • Die Icons, die vor einigen Artikeln erscheinen (z.B. die vom Typ Video oder Audio) sind von von Font Awesome.
  • Danke auch an HTML5 Boilerplate für einige Ideen!

Ein paar weitere Kleinigkeiten (auf die ich auch bissle Stolz bin):

  • Man kann den bei dem <code />-Tag die Programmiersprache mir data-programming-language="PHP" setzen und es wird wie folgend angezeigt: <?php echo "Hallo Welt"; ?>
  • Das Theme kommt komplett ohne Bilder aus.

Responsive Design

Das Theme sollte eigentlich und hoffentlich auf jedem Gerät gut aussehen und unterstützt drei++ Breiten:

  • Volle Breite + Sidebar rechts
  • Volle Breite + Zweispaltige Sidebar am Ende der Seite
  • Variable Breite (die, für das Gerät beste Breite mit einem) + Einspaltige Sidebar am Ende der Seite.

Außerdem passt sich das Menü automatisch an die Größen an und das ganz ohne JavaScript! …beim Drop-Down Menü gibt es zwar noch keine Möglichkeit das Menü wieder zu schließen, aber wer will das schon 😉

Was jetzt noch?

Da mir das themen ne Menge Spaß gemacht hat werde ich wohl auch weiterhin fleißig an SemPress weiter basteln und es noch semantischer und WordPressiger machen. Falls ihr irgendwelche Fehler findet oder Dinge besser könnt wie ich… bitte helft mir und forkt SemPress!

mf-white

microformats.org wird 7… Alles Gute!

Zur Feier des Tages hat sich Frances Berriman die Mühe gemacht, die letzten 7 Jahre zusammen zu fassen und einen Ausblick auf die kommenden Änderungen zu geben.

Da ich, seit ich bloggen kann, schon über Microformats berichte, will ich den Rückblick nicht weiter kommentieren und nur auf die kommende Weiterentwicklung ein wenig eingehen.

Microformats und HTML5

Seit dem ich das letzte mal über diese Kombination geschrieben habe, hat sich leider nicht viel geändert… Die Microformats Community weigert sich weiterhin auf Microdata oder RDFa "upzugraden" und hält krampfhaft an den semantischen classes fest. Nichtsdestotrotz macht HTML5 mit <time /> und <data /> dem leidigen Thema abbr-design-pattern bzw. value-class-pattern ein Ende. Statt Meta-Informationen umständlich in HTML-Attributen zu verwurschteln, können Termine und GEO Daten bald sauber dargestellt werden:

<time class="dtstart" datetime="2006-09-23">a Saturday</time>
...
<data class="geo" value="37.386013;-122.082932" >Mountain View</data>

Immerhin! Mehr dazu im microformats-wiki.

Namespaces

Die wohl größten Veränderungen sind aber die geplanten Pseudo-Namespaces welche hauptsächlich das Parsen von Microformats vereinfachen sollen. Microformats waren bisher sehr fehleranfällig, da sie sich die class-Attribute mit CSS und JavaScript zu teilen hatten. Es besteht immer die Gefahr dass rein für CSS genutzte Attribute fälschlicherweise für Microformats genutzt wurden oder dass die semantischen Class-Names einem Re-Design zum Opfer fielen. Die Prefixes 'h-', 'p-', 'u-', 'dt-' und 'e-' sollen das Zukünftig verhindern und ein generisches parsen ermöglichen.

'h-' kennzeichnet einen Microformats-Container

Bisher ist die Microformats Community etwas inkonsequent mit der Benennung ihrer Formate… Mal mit beginnendem "v", mal mit "h" und in seltenen Fällen auch ohne oder mit anderem Buchstaben:

  • hCard: class="vcard"
  • hAtom: class="hfeed"
  • adr: class="adr"
  • xFolk: class="xfolkentry"
  • XOXO: class="xoxo"

Mit den Prefixes soll das jetzt alles vereinheitlicht werden:

  • hCard: class="h-card"
  • hAtom: class="h-feed"
  • adr: class="h-adr"

'p-' zeichnet Properties aus

Die mit 'p-' gekennzeichnet Properties sollten, wenn nicht expliziert definiert, als Plain-Text interpretiert werden (kein HTML). Ein klassisches Property ist beispielsweise der Name einer Person:

<div class="h-card">
 <span class="p-fn">Tantek Çelik</span>
</div>

'e-' zeichnet Rich Text aus

Das 'e-' Prefix könnte als Abkürzung für "element tree", "embedded markup", oder "encapsulated markup" stehen und kann im Gegansatz zu den Properties auch HTML-Code beinhalten. In hAtom könnte der entry-content zu e-entry-content und bei der hReview die description zur e-description werden.

'dt-' für DateTime und 'u-' für URL

Aus dtstart wird dt-start und alle URL-Felder bekommen ein vorgestelltes 'u-':

<a class="u-url" href="...">...</a>

<img class="u-photo" src="..." />

Die URL kann in bestimmten Situtionen auch weg fallen, dazu aber im nächsten Beispiel mehr…

Simpel und unabhängig vom Format

Zukünftig soll es auch nicht mehr so umständlich sein Informationen semantisch auszuzeichnen. Will man derzeit einen simplen Link mit einer hCard versehen, muss man ihn wie folgt aufblähen:

<div class="vcard">
 <a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>

Nach der Überarbeitung soll folgendes reichen:

<a class="h-card" href="http://tantek.com/">Tantek Çelik</a>

Dabei gilt die Regel: Wenn es sich bei (z.B.) einer vCard um einen Link oder ein Bild handelt, kann man auf 'u-*' und 'p-name' verzichten… so ungefär zumindest 😉

Mehr dazu im Microformats-Wiki: implied properties

Außerdem kommt mit v2 eine Anleitung wie Microformats auf andere Formate wie JSON gemappt werden sollen. Aus…

<a class="h-card" href="http://benward.me">Ben Ward</a>

wird…

[{
  "type": ["h-card"],
  "properties": {
    "name": ["Frances Berriman"] 
  }
}]

Fazit

Ich bin mir noch nicht ganz sicher was ich von den geplanten Änderungen halten soll… die Nutzung der neuen HTML5 Tags und die Vereinfachung und Vereinheitlichung der Formate finde ich gut und notwendig… Auch eine einheitliche Regel, wie Microformats in anderen Formaten abgebildet werden sollen (z.B. JSON) macht durchaus Sinn (warum das Sinn macht, hier)… aber den Pseudo-Namespaces kann ich bisher nichts abgewinnen! Der "Namespace" sorgt zwar für mehr Qualität beim Parsen der Microformats, aber auf Kosten des semantischen HTMLs.

Microformats sollten weiterhin für schönes, semantisches HTML sorgen und mehr nicht. Geht es um maschinenlesbaren Code, sollte man mit der Zeit gehen und auf Microdata oder RDFa setzen. Ob man seinen Quelltext an Microformats v2 anpasst oder mit Schema.org auszeichnet sollte kaum mehr Aufwand sein.

…Übrigens: Wer noch mehr über die Vorteile von Microdata gegenüber Microformats lesen will, sollte sich die Ausgabe 10 des Webstandards-Magazin durchlesen oder die Reihe "Microdata – wie Microformats bloß besser…" hier im Blog!