Das Ende des XML-Experiments
Vor etwas über einem Jahr habe ich meinen Blog gestartet. Zugegeben, allzu viel ist seitdem nicht passiert. Das liegt weniger daran, dass es nichts zu berichten gäbe, als viel mehr an meiner knappen Zeit. Es gibt allerdings noch viele Dinge, zu denen ich hier kleine Tutorials schreiben möchte (zum einen für die Leser, zum anderen aber auch für mich als Gedächtnisstütze), doch zuvor musste etwas an meinem Blog selbst erledigt werden.
Warum XML?
Wie man (hoffentlich nicht allzu sehr) merken konnte, hatte ich die vorige Version meines Blogs mit XML und XSLT realisiert. Doch warum das ganze? Ich kam im ersten Semester meines Informatikstudiums zum ersten Mal mit XSLT in Kontakt. Obwohl ich XML schon lange kannte, offenbarte dieser neue Ansatz einige interessante Möglichkeiten, insbesondere, da ich immer auf der Suche nach möglich minimalen Lösungen für meine Probleme bin.
Jekyll kannte ich zu dieser Zeit noch nicht und dynamische Blogs mit PHP und Konsorten kamen für meine kleinen Vorhaben nicht in Frage. Also entschloss ich mich, meine Blogposts als XML-Dateien zu verfassen und diese dann mit XSLT durch den Browser in HTML umformen zu lassen. Bis hierhin auch durchaus ein machbarer Plan, der zu guten und sauberen Ergebnissen führt. Die Postings bilden eine Textdatenbank, die mit .dtds validiert werden kann, mit etwas penibler Arbeit sieht das erzeugte HTML aus wie von Hand geschrieben und wenn noch CSS ins Spiel kommt, sind Inhalt, Markup und Style wirklich so perfekt voneinander getrennt, wie man sich das nur wünschen kann. Doch wehe man will mehr!
Probleme
Die ersten Probleme traten auf, als ich die Seite mit Chrome unter Android getestet habe. Scheinbar zufällig schien der Browser (zumindest in der damals aktuellen Version) sich nicht mehr sicher zu sein, ob er für das Öffnen von .xml-Dateien auch wirklich zuständig ist, und zeigte den Android-typischen ‘Öffnen mit’-Dialog. Wenn das auch nur ein kleineres Problem ist, macht es auf einen eventuellen Besucher doch einen recht zwilichtigen Eindruck. Mit Firefox auf Android oder Desktop-Browsern habe ich dieses Problem im Übrigen nie erlebt.
Wirklich interessant wird es aber erst, wenn man es wagt, XML und XSLT in Verbindung mit SEO und Social-Media zu bringen. Es ist völlig unergründlich, nach welchen Kriterien Google & Co. entscheiden, welche Meta-Informationen einer Webseite sie aus XML, XSLT oder dem generierten HTML ziehen. So fängt man an, die eigentlich schöne Trennung von Inhalt und Markup Stück für Stück aufzugeben und da sich selbst die Tools eines Herstellers teilweise unterschiedlich verhalten, müssen manche Informationen so gar doppelt angegeben werden:
- Alle OpenGraph-Elemente für Facebook müssen in die XML-Datei, ebenso die schema.org Informationen für Google.
icon,apple-touch-iconund die Icons für Windows-Live-Kacheln müssen sowohl in die XML- als auch in die XSLT-Datei, da sich die Browser nicht so ganz einig sind, woher sie diese Information beziehen.
Hat man diese beiden Klippen umschifft, ist aber noch nicht alles in trockenen Tüchern, da Facebook seine Snippets für die Darstellung in der Timeline aus dem XML ausliest und Google meistens (!) auch. Also müssen die in der selbst erstellten DTD definierten XML-Tags die gleichen Namen tragen wie die entsprechenden HTML-Tags. Man hat nun also HTML-Tags in einer XML-Datei, die mit einer XSLT-Datei (die HTML enthält) zu einer HTML-Datei umgewandelt wird. Eine wirkliche Trennung findet nun eigentlich schon nicht mehr statt. Als kleines Beispiel hier mal mein MenuLibre-Post als XML:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../xsl/article.xsl"?>
<!DOCTYPE article SYSTEM "http://philipp.feige-trommler.de/dtd/article.dtd">
<article itemscope="" itemtype="http://schema.org/BlogPosting" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="Desktop-Verknüpfungen einfach gemacht mit MenuLibre - Philipp Trommler - Blog"/>
<meta itemprop="description" property="og:description" content="Wer außer mir auch denkt, dass es jedes Mal eine Qual ist, 'Desktop-Entries' zu schreiben - einfach weil man es so selten macht und deswegen die benötigten Teile jedes Mal aufs neue vergessen hat und ergoogeln muss - der sollte sich MenuLibre von Sean Davis genauer ansehen. Es ist kostenlos, über sein PPA erhältlich und macht die Menü-Bearbeitung zu einer wahren Freude."/>
<meta property="og:type" content="article"/>
<meta itemprop="datePublished" property="article:published_time" content="2013-05-08T07:08:00+02"/>
<meta property="article:author" content="philipp.trommler"/>
<meta property="article:section" content="Technology"/>
<meta property="article:tag" content="Tutorial"/>
<meta property="article:publisher" content="philipp.trommler"/>
<meta property="fb:admins" content="philipp.trommler"/>
<meta property="fb:profile_id" content="philipp.trommler"/>
<meta itemprop="thumbnailUrl" property="og:image" content="http://philipp.feige-trommler.de/images/articles/menulibre1.png"/>
<meta itemprop="url" property="og:url" content="http://philipp.feige-trommler.de/articles/desktop_verknupfungen_einfach_menulibre.xml"/>
<meta itemprop="inLanguage" property="og:locale" content="de_DE"/>
<meta property="og:site_name" content="Philipp Trommler - Blog"/>
<time datetime="2013-05-08T07:08:00+02">Wed, 08 May 2013 07:08 +0200</time>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://philipp.feige-trommler.de/rss.xml"/>
<link rel="apple-touch-icon" sizes="57x57" href="../apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="../apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="../apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="../apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="../apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="../apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon-precomposed" href="http://philipp.feige-trommler.de/../apple-touch-icon-152x152.png"/>
<link rel="icon" type="image/png" href="../ico32.png"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
<!--[if IE]><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../favicon.ico"/><![endif]-->
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#cddc39"/>
<meta name="msapplication-square70x70logo" content="../tiny.png"/>
<meta name="msapplication-square150x150logo" content="../square.png"/>
<meta name="msapplication-wide310x150logo" content="../wide.png"/>
<meta name="msapplication-square310x310logo" content="../large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=5; cycle=1"/>
<link rel="canonical" href="http://philipp.feige-trommler.de/articles/desktop_verknupfungen_einfach_menulibre.xml"/>
<author>Philipp Trommler<a href="https://plus.google.com/+PhilippTrommler" rel="author"/></author>
<title>Desktop-Verknüpfungen einfach gemacht mit MenuLibre - Philipp Trommler - Blog</title>
<h3 itemprop="headline">Desktop-Verknüpfungen einfach gemacht mit MenuLibre</h3>
<text itemprop="articleBody">
<p>Wer außer mir auch denkt, dass es jedes Mal eine Qual ist, 'Desktop-Entries' zu schreiben - einfach weil man es so selten macht und deswegen die benötigten Teile jedes Mal aufs neue vergessen hat und ergoogeln muss - der sollte sich <a href="https://launchpad.net/menulibre" target="_blank">MenuLibre</a> von Sean Davis genauer ansehen. Es ist kostenlos, über sein PPA erhältlich und macht die Menü-Bearbeitung zu einer wahren Freude.</p>
<img src="../images/articles/menulibre1.png" alt="MenuLibre in Lubuntu 13.04" height="800" width="1280">
<caption>MenuLibre in Lubuntu 13.04</caption>
</img>
<p>Die Benutzung ist genauso einfach wie sie auf den ersten Blick scheint, alle wichtigen Einstellungen einer 'DesktopEntry' sind über die grafische Benutzeroberfläche erreichbar, inklusive der Quicklists für Unity. Wer volle Kontrolle über die erzeugte Datei benötigt, kann über den eingebauten Editor der Verknüpfung den letzten Schliff verpassen.</p>
<p>Die Installation ist wie gewohnt einfach, der Autor stellt ein regelmäßig mit Updates versorgtes PPA bereit:</p>
<p class="warning">Achtung: PPAs können ein potentielles Sicherheitsrisiko darstellen! Fügen Sie sie deswegen nur hinzu, wenn Sie dem Besitzer vertrauen.</p>
<code lang="bash"><![CDATA[sudo add-apt-repository ppa:menulibre-dev/devel
sudo apt-get update
sudo apt-get install menulibre]]></code>
</text>
</article>Auffällig ist vor allem, wie klein nur der Anteil des eigentlichen Texts ist (auch wenn es zugegebenermaßen ein kurzer Post ist). Auch hässliche Krücken wie <![CDATA[…]]> muss man immer wieder bemühen. Schaut man sich außerdem nur den Textteil an, sieht man eigentlich schon reines HTML. Trotzdem hier noch das passende XSLT:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-system="about:legacy-compat" />
<xsl:template match="article">
<!--[if lt IE 7 ]><html class="ie ie6" lang="de"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="de"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="de"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="de"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<title><xsl:value-of select="title"/></title>
<meta name="description"><xsl:attribute name="content"><xsl:value-of select="text/p"/></xsl:attribute></meta>
<meta name="author" content="Philipp Trommler"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="../stylesheets/base.css"/>
<link rel="stylesheet" href="../stylesheets/skeleton.css"/>
<link rel="stylesheet" href="../stylesheets/layout.css"/>
<link rel="stylesheet" href="../stylesheets/custom.css"/>
<link rel="stylesheet" href="../stylesheets/jquery.lazyloadxt.spinner.min.css"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/github.min.css"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://philipp.feige-trommler.de/rss.xml"/>
<link rel="apple-touch-icon" sizes="57x57" href="../apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="../apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="../apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="../apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="../apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="../apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon-precomposed" href="http://philipp.feige-trommler.de/../apple-touch-icon-152x152.png"/>
<link rel="icon" type="image/png" href="../ico32.png"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
<!--[if IE]><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../favicon.ico"/><![endif]-->
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#cddc39"/>
<meta name="msapplication-square70x70logo" content="../tiny.png"/>
<meta name="msapplication-square150x150logo" content="../square.png"/>
<meta name="msapplication-wide310x150logo" content="../wide.png"/>
<meta name="msapplication-square310x310logo" content="../large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://philipp.feige-trommler.de/rss.xml&id=5; cycle=1"/>
<link rel="canonical"><xsl:attribute name="href"><xsl:value-of select="link/@href"/></xsl:attribute></link>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.lazyloadxt.extra.min.js"></script>
<script type="text/javascript" src="../js/highlight.pack.js"></script>
<script type="text/javascript" src="../js/jquery.socialshareprivacy.js"></script>
<script type="text/javascript">
function showDisqus () {
var disqus_shortname = 'phtrommlerblog';
var disqus_identifier = '<xsl:value-of select="h3"/>';
var disqus_title = '<xsl:value-of select="h3"/>';
var disqus_url = '<xsl:value-of select="link/@href"/>';
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName ('head')[0] || document.getElementsByTagName ('body')[0]).appendChild (dsq);
}
jQuery(document).ready(function($){
var d = new Date('<xsl:value-of select="time"/>');
document.getElementById ('date').innerHTML = d.toLocaleString ();
$('.block').each(function(i, e) {hljs.highlightBlock(e)});
if($('#socialshareprivacy').length > 0){
$('#socialshareprivacy').socialSharePrivacy({
'services' : {
facebook: {
'dummy_img' : '../images/socialshareprivacy/dummy_facebook.png',
'sharer' : {
'status' : 'on',
'dummy_img' : '../images/socialshareprivacy/dummy_facebook_share_de.png',
'img' : '../images/socialshareprivacy/facebook_share_de.png'
}
},
twitter : {
'dummy_img' : '../images/socialshareprivacy/dummy_twitter.png'
},
gplus : {
'dummy_img' : '../images/socialshareprivacy/dummy_gplus.png'
}
},
'uri' : '<xsl:value-of select="link/@href"/>',
'css_path' : '../stylesheets/socialshareprivacy.css',
'lang_path' : '../js/lang/',
'language' : 'de',
'alignment' : 'vertical'
});
}
});
</script>
</head>
<body>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="container">
<header>
<div class="two-thirds column">
<h1 class="remove-bottom" style="margin-top: 40px">Philipp Trommler</h1>
</div>
<nav class="one-third column"><a href="../index.html">Home</a> · <a href="../projects.html">Projekte</a> · <a href="../blog.xml"><h2>Blog</h2></a> · <a href="../about.html">Über mich</a></nav>
</header>
<main>
<h3><xsl:value-of select="h3"/></h3>
<xsl:apply-templates select="text"/>
<span class="date-author">Verfasst: <span id="date"></span><span> von <xsl:value-of select="author"/></span></span>
<hr />
<div class="one-third column">
<h5>Social Media</h5>
<p class="warning">Wenn Sie diese Felder durch einen Klick aktivieren, werden Informationen an Facebook, Twitter oder Google in die USA übertragen und unter Umständen auch dort gespeichert. Näheres erfahren Sie durch einen Klick auf das i.</p>
<div id="socialshareprivacy"></div>
</div>
<div class="two-thirds column" id="disqus">
<h5>Kommentare</h5>
<p class="warning">Durch das Aktivieren der Kommentarfunktion werden Daten an Dritte (Disqus) weitergegeben. Aktivieren Sie die Kommentarfunktion nur, wenn Sie sich darüber im Klaren und damit einverstanden sind!</p>
<label class="switch switch-green" onClick="showDisqus ()">
<input id="disqus_switch" type="checkbox" class="switch-input"/>
<span class="switch-label" data-on="An" data-off="Aus"></span>
<span class="switch-handle"></span>
</label><span class="switch-text">Kommentarfunktion von Disqus</span>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</main>
<footer>
<div class="one-third column">
<ul>
<li><a href="http://philipp.feige-trommler.de/rss.xml" class="rss"></a></li>
<li><a href="https://www.facebook.com/philipp.trommler" target="_blank" class="facebook"></a></li>
<li><a href="https://plus.google.com/+PhilippTrommler" target="_blank" class="googleplus"></a></li>
<li><a href="http://www.youtube.com/channel/UCGG3f6yZH4gndb1HXRCqipw" target="_blank" class="youtube"></a></li>
</ul>
</div>
<div class="one-third column">
Webseite erstellt mit <a href="http://www.getskeleton.com/" target="_blank">Skeleton</a>, <a href="https://jquery.org/" target="_blank">jQuery</a>, <a href="http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html" target="_blank">2 Klicks für mehr Datenschutz</a>, <a href="http://highlightjs.org/" target="_blank">highlight.js</a> und <a href="http://www.graphicsfuel.com/2012/09/15-free-social-media-icons-psd-png/" target="_blank">Icons von Rafi</a> sowie Switches von <a href="http://www.cssflow.com/" target="_blank">Thibaut Courouble</a>.<br />
Die Schriftarten <a href="http://www.fontsquirrel.com/license/ubuntu-mono" rel="license" target="_blank">'Ubuntu Mono'</a> und <a href="http://www.fontsquirrel.com/license/fira-sans" rel="license" target="_blank">'Fira Sans'</a> stehen unter der SIL Open Font License, die <a href="http://socicon.com/" target="_blank">'Socicon'</a>-Social-Media-Icons ebenfalls.
</div>
<div class="one-third column">
Alle Bilder und auf dieser Website stehen, soweit nicht anders angegeben, unter <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/deed.de" target="_blank">CC-BY-SA 4.0 International Lizenz</a>. Dies gilt nicht für die Social-Media-Icons.<br/><br/>
© 2014 Philipp Trommler, zum <a href="../impressum.html">Impressum</a> und der <a href="../daten.html">Datenschutzerklärung</a>.
</div>
</footer>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="h4">
<h4><xsl:value-of select="."/></h4>
</xsl:template>
<xsl:template match="p">
<p><xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute><xsl:apply-templates/></p>
</xsl:template>
<xsl:template match="inlinecode">
<pre class="inline"><xsl:value-of select="."/></pre>
</xsl:template>
<xsl:template match="a">
<a><xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute><xsl:attribute name="target"><xsl:value-of select="@target"/></xsl:attribute><xsl:value-of select="."/></a>
</xsl:template>
<xsl:template match="b">
<b><xsl:apply-templates/></b>
</xsl:template>
<xsl:template match="ol">
<ol><xsl:apply-templates/></ol>
</xsl:template>
<xsl:template match="li">
<li><xsl:apply-templates/></li>
</xsl:template>
<xsl:template match="code">
<pre><xsl:attribute name="class"><xsl:value-of select="@lang"/> block</xsl:attribute><xsl:value-of select="."/></pre>
</xsl:template>
<xsl:template match="img">
<figure>
<img class="lazy scale-with-grid"><xsl:attribute name="data-src"><xsl:value-of select="@src"/></xsl:attribute><xsl:attribute name="alt"><xsl:value-of select="@alt"/></xsl:attribute><xsl:attribute name="height"><xsl:value-of select="@height"/></xsl:attribute><xsl:attribute name="width"><xsl:value-of select="@width"/></xsl:attribute></img>
<noscript><img class="scale-width-grid"><xsl:attribute name="src"><xsl:value-of select="@src"/></xsl:attribute><xsl:attribute name="alt"><xsl:value-of select="@alt"/></xsl:attribute><xsl:attribute name="height"><xsl:value-of select="@height"/></xsl:attribute><xsl:attribute name="width"><xsl:value-of select="@width"/></xsl:attribute></img></noscript>
<figcaption><xsl:value-of select="caption"/></figcaption>
</figure>
</xsl:template>
</xsl:stylesheet>Wie man sieht, ist diese Methode also alles in allem wenig effizient und meiner eigentlichen Suche nach einer möglichst minimalen Lösung wohl kaum gerecht.
Vorteile?
Kaum.
Aber trotzdem habe ich das Verfahren zu schätzen gelernt. Es nutzt offene, altbewährte und gut unterstützte Standards und man hat jederzeit volle Kontrolle über das was passiert. Es gibt keine Blackbox, keine Magie (@Autowired bei Spring hust) und nur ein leicht zu überschauendes Set an Möglichkeiten. Und für spezielle Einsatzmöglichkeiten reicht das auch vollkommen aus. So habe ich beruflich bereits einen in XML vorliegenden Bibliotheksbestand in eine einfache, durchsuchbare und übersichtliche Webseite umgewandelt, ohne dass bei jeder Änderung am Bestand auch die Seite geändert werden müsste. Für genau solche Szenarien eignet sich XSLT auch heute noch sehr gut, für die von mir gedachte Realisierung eines Blogs rückwirkend betrachtet weniger.
Jekyll
Genau deswegen habe ich jetzt (solange ich noch so wenige Posts habe) meinen Blog auf Jekyll umgestellt und ich muss sagen, es gefällt mir sehr gut. Auch wenn mir als nicht Ruby-Nutzer die Einarbeitung in die Gems (Builder, Bundler, Gems?) und das Installieren von Plugins ein paar Kopfschmerzen bereitet haben, fällt die Bedienung insgesamt doch recht einfach aus und auch das Standard-Theme ist durchaus als Grundlage brauchbar.
Im Gegenzug habe ich mir mit Jekyll eine Blackbox eingefangen, die allerdings so gut und einfach zu bedienen ist, dass ich diesmal damit Leben werde.