websemantics – notizBlog

SCREENGUIDE 34

Matthias Pfefferle — Thu, 16 Mar 2017 22:05:35 +0000

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 😉

Hey there, RSS reader! You’re cool. Keep being awesome! 😎

Schema.org – what I’ve learned so far

Matthias Pfefferle — Fri, 21 Sep 2012 10:00:46 +0000

Beim „basteln“ an SemPress, meinem ersten WordPress Theme, habe ich das erste Mal praktische Erfahrungen mit Schema.org gesammelt und mir sind vor allem zwei Dinge klar geworden: 1. Warum Schema.org nach einer Art „Vererbungs“-Prinzip aufgebaut ist und 2. Wie Google mit Schema.org umgeht.

The http://schema.org/Thing

Das „einfachste“ Schema ist ein „Thing“ und hat folgende Attribute:

`description`	TEXT	A short description of the item.
`image`	URL	URL of an image of the item.
`name`	TEXT	The name of the item.
`url`	URL	URL of the item.

Da alle anderen Objekte auf dem „Thing“ aufbauen, kann man davon ausgehen dass man mind. auf diese vier Eigenschaften zugreifen kann und genau das ist der ganze Sinn hinter dieser Struktur.

Vor allem Google setzt massiv auf Schema.org, sei es beim Einsatz in der Suche (über die sogenannten Rich-Snippets)…

…oder beim Anreichern der, über Google+ oder den +1 Button geteilten Links.

Um das Parsen der Webseiten (zumindest für diese eher einfachen Ausgaben) auf ein Minimum zu reduzieren, ist die Grundstruktur immer gleich und alles darüber hinaus ist reine Kür. Wahrscheinlich werden aber 90% aller Anwendungen mit Titel (name), Beschreibung, Bild und URL auskommen.

Googles Umgang mit Schema.org

Wer seine Seite mit Schema.org auszeichnen möchte, sollte vor allem eines Beachten: Google+ (wahrscheinlich aber auch alle anderen Google Produkte) interpretiert immer das erste im Quellcode verwendete Schema!

Bei meiner ersten Implementierung von Schema.org habe ich mich etwas zu sehr an RSS bzw. Atom orientiert und folgenden Aufbau gewählt: Ein umschließendes Objekt um den Blog zu beschreiben und ein oder mehrere referenzierte Artikel.

<body itemscope itemtype="http://schema.org/Blog">
...
  <header id="branding" role="banner">
    <hgroup>
      <h1 id="site-title" itemprop="name"> bloginfo( 'name' ); ?>h1>
      <h2 id="site-description" itemprop="description"> bloginfo( 'description' ); ?>h2>
    hgroup>
  header>
...
  <article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
  ...
  article>
  <article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
  ...
  article>
...
body>

Egal ob es jetzt um mehrere Artikel (Startseite) oder nur einen Artikel (Post oder Page) gehandelt hat.

Das hat bei Google+ dazu geführt, dass die notizBlog-Links immer mit dem Titel, der Beschreibung und dem Bild des Blogs und nicht mit denen des Artikels verknüpft wurden. Es ist also gerade für Blogs wichtig, dass das Blog-Schema nur auf den Übersichtsseiten benutzt wird und die Einzelansichten lediglich mit „http://schema.org/BlogPosting“ bzw. „http://schema.org/WebPage“ ausgezeichnet werden.

You are a master of efficiency! By using RSS, you save time and avoid distractions. 👏

I’ve made a WordPress Theme… kind of…

Matthias Pfefferle — Thu, 06 Sep 2012 20:54:53 +0000

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

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 -Tag die Programmiersprache mir data-programming-language="PHP" setzen und es wird wie folgend angezeigt:
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!
RSS readers like you are the unsung heroes of the internet. Keep up the good work!



Twitter Cards
Matthias Pfefferle — Fri, 22 Jun 2012 13:49:55 +0000

Anfang der Woche hat Martin Weigert schon über Twitters Pläne, die eigenen Tweets mit noch mehr Medieninhalten zu erweitern, geschrieben:



Immer mehr Partnerseiten können zusätzliche multimediale Inhalte im Kontext von Tweets darstellen. Ganz eindeutig ist bisher nicht, wohin diese Reise für Twitter geht.



Aber ich habe mir nichts weiter dabei gedacht… Immerhin macht das Twitter ja schon seit einer ganzen Weile und ich meine mich zu erinnern, irgendwo gelesen zu haben, dass sie dazu oEmbed einsetzen… Also alles in bester „OpenWeb“-Ordnung 🙂



Aber, Geek der ich bin, hab ich mir gestern zufällig einen Quelltext angeschaut in dem ich auf folgendes entdeckt habe:


<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="...">
<meta name="twitter:title" content="...">


…und nach kurzem googlen bin ich auf die Twitter Cards gestoßen, Twitters eigenes, kleines Open Graph Protocol. Mit den Twitter Cards bekommen Seitenbetreiber ein Set an Meta-Tags an die Hand, und Twitter kann diese Informationen nutzen um die tweets mit den oben erwähnten Mediendaten anzureichern.







…und ich wollte mich gerade darüber aufregen, warum Twitter dazu eine eigene Meta-Sprache erfindet, da bin ich in der Doku ironischerweise auf folgendes gestoßen:



You’ll notice that Twitter card tags look similar to OpenGraph tags, and that’s because they are based on the same conventions as the Open Graph protocol. If you’re already using OpenGraph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience.



„Ok“, dachte ich… vielleicht reichen die Open Graph Properties ja nicht aus um alle Informationen, die Twitter braucht, abzubilden. Also hab ich mir mal die Mühe gemacht sie zu vergleichen:



Twitter Cards Open Graph Protocol
twitter:card og:type
twitter:site og:site_name
twitter:url og:url
twitter:description og:description
twitter:title og:title
twitter:image og:image
twitter:image:width og:image:width
twitter:image:height og:image:height
twitter:player oder twitter:player:stream og:video oder og:audio
twitter:player:width og:video:width
twitter:player:height og:video:height



Es lässt sich also prinzipiell alles mit dem Open Graph Protocol abbilden, es fehlen lediglich die Felder twitter:site:id und twitter:creator:id. Aber wegen diesen zwei Feldern muss man doch nicht das ganze Format „kopieren“. Es reicht doch ein kleiner Absatz, wie man den Open Graph mit den proprietären Werten erweitert… So wie das auch Facebook praktiziert:


<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
      xmlns:twitter="https://dev.twitter.com/docs/cards">
  <head>
    <title>The Rock (1996)title>
    <meta property="og:title" content="The Rock"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="twitter:site:id" content="@USER_ID"/>
    ...
  head>
  ...
html>



Hoffentlich überlegt sich das Twitter noch einmal… Wenn nicht, wird dank dieser (und folgender) Redundanzen der  einer Webseite in ein paar Jahren mehr Informationen beinhalten wie der .



…welch ein Over- 🙂
RSS readers like you are the unsung heroes of the internet. Keep up the good work!

Twitter Cards	Open Graph Protocol
`twitter:card`	`og:type`
`twitter:site`	`og:site_name`
`twitter:url`	`og:url`
`twitter:description`	`og:description`
`twitter:title`	`og:title`
`twitter:image`	`og:image`
`twitter:image:width`	`og:image:width`
`twitter:image:height`	`og:image:height`
`twitter:player` oder `twitter:player:stream`	`og:video` oder `og:audio`
`twitter:player:width`	`og:video:width`
`twitter:player:height`	`og:video:height`