IPython-Notebooks in einem WordPress-Blog veröffentlichen

Wie in einem vorangegangen Artikel erwähnt, bieten IPython-Notebooks hervorragende Möglichkeiten Arbeiten zu publizieren. Einfügungen können als $\LaTeX$-Code oder durch MathJax vorgenommen werden, Bild- und Videomaterial kann ebenso wie Audiosequenzen in die Notebooks aufgenommen werden. Ein Thema lässt sich so auf sehr ansprechende, multimediale Weise darstellen.
Um eine Notebook-Datei für eine Veröffentlichung in ein gängiges Format zu konvertieren, ruft man auf der Kommandozeile folgendes auf:

> ipython nbconvert --to html input.ipynb

Man erhält ein statisches HTML-Dokument aus dem Notebook input.ipynb, durch Angabe von pdf, latex etc. können selbstverständlich auch andere Formate erzeugt werden.
Ein auf diese Weise erstelltes HTML-Dokument lässt sich nun ohne großen Aufwand in einem WordPress-Blog einfügen. Dazu wird lediglich ein Plugin benötigt, welches HTML-Code direkt im Editor einfügen kann. Hier wird die Vorgehensweise anhand des Plugins EmbedIt Pro beschrieben:

EmbedIt Pro:
Embed any HTML code (Youtube, UStream or whatever HTML) in a post, page or widget, deciding precisely where to embed it, either on-the-fly from custom fields OR from your saved HTML Code Snippets. Super easy for newbies but powerful for developers, since it supports not only shortcodes but PHP functions too to return or display the snippets in your templates.

Nach der Installation des Plugins findet man im Dashboard den Punkt HTML Snippets. Wählt man dort Add New kann man nun den HTML-Code auf der vorgesehenen Fläche einfügen (zum bsp. durch vorherige Selektion mit der Maus). Bestätigt man den Code durch klicken auf Veröffentlichen, erhält man einen Shortcode, der direkt im zu erstellenden Artikel eingefügt werden kann.

Ohne weitere Nachbearbeitung kann man mit dem beschriebenen Workflow seine IPython-Notebooks in einem WordPress-Blog veröffentlichen, dies spart Zeit und erhöht die gestalterische Qualität der Publikation.

Bilder für eine Veröffentlichung vorbereiten

Um Speicherplatz zu sparen, der beim Hoster oftmals kontingiert ist, sollten die Bilder vor einem Upload gut komprimiert werden. Dies kann mit einem Dienst wie bspw. jpegmini geschehen, der oft wesentlich bessere Kompressionsergebnisse erzielt, als herkömmliche Bildbearbeitungssoftware. Die Größe der mit Digitalkameras erzeugten Bilder ist für die Betrachtung am Bildschirm oftmals ungeeignet, man sollte die Bilder also auf ein geeignetes Maß verkleinern. Unter Linux bietet sich dazu die ImageMagick-Suite an. Sie stellt umfangreiche Werkzeugen zur Bildbearbeitung auf der Kommandozeilen-Ebene bereit. Die Schritte verkleinern und einen Text einfügen kann man mit der Shell und dem Werkzeug convert in wenigen Zeilen erledigen:

for f in *.jpg;
> do
> a=`basename $f .jpg`;
> convert $f -resize 25% -font Courier \
> -pointsize 25 -fill white \
> -undercolor '#00000080' -gravity SouthWest \
> -annotate -0+5 ' © Ilses Erika ' $a'_tn.jpg'
> done

Für Galeriebilder sollte man statt des Prozent-Operators besser den

@-Operator verwenden. Durch Angabe von -resize @Pixelanzahl haben alle Bilder die gleiche Pixelanzahl, was einen ruhigeren Bildlauf durch eine Galerie ermöglicht. Evtl. sollten vor dem Hochladen der Bilder noch die Meta-Informationen aus dem Bild entfernt werden. Dies kann mit dem Tool exiv2 geschehen:

exiv2 -d datei.jpg

Natürlich lassen sich mit

exiv2 aber auch Meta-Informationen setzen, z.B. die Autorenschaft eines Bildes (exiv2 -M"set Exif.Image.Copyright Ilses Erika" datei.jpg) oder ein Bildkommentar.

Formelsatz in HTML-Dokumenten

Um Formeln in HTML-Dokumenten einzubetten gibt es eine Reihe von Möglichkeiten, eine davon ist tex4ht. Über die Arbeitsweise von tex4ht ist z.B. in der Wikipedia nachzulesen. Wesentlich bleibt festzustellen, daß die Formeln in PNG-Bilder umgewandelt werden und damit jeglichen Browserbeschränkungen (wie bei Verwendung von MathML etc.) aus dem Weg gegangen wird. Diese Methode wird derzeit auch von der Wikipedia bei der Umsetzung von Formeln favorisiert. Das Latex-Dokument wird am einfachsten mit dem zu tex4ht gehörigen Skript htlatex aufgerufen, anschließend stehen die entsprechenden Bilder zum einbinden in HTML zur Verfügung. Weiterführende Angaben zu htlatex findet man unter dem Link.
Zum Schluß sei noch ein durch tex4ht erzeugtes Bild hier eingebettet (gegebenenfalls noch style="border:none;" in den Image-Tag einfügen um den Rahmen zu entfernen):

Eine gute Einführung in die Konfiguration von tex4ht bietet der Artikel tex4ht for Scientific WorkPlace von Philip A. Viton und natürlich der Beitrag TEX4ht: HTML Production des ursprünglichen Autoren Eitan M. Gurari. Ebenfalls empfehlenswert ist der Aufsatz A guide to using TEX4ht as a tool for publishing LATEX-documents on the web von Simen Kvaal.

Eine weitere interessante Möglichkeit des Formelsatzes bietet jsMath. Dieses auf JavaScript basierende Paket, ermöglicht es, den Latex-Code für die Formel direkt im HTML-Dokument einzubetten, außerdem stellt es ein komfortables Interface zur Administration bereit, z.B. um die zur Verwendung kommenden Fonts zu verwalten. Abgesehen von dem Nachteil, dass der verwendete Browser JavaScript unterstützen muß, hat jsMath den großen Vorteil, dass man den Quellcode für den Formelsatz nicht vom Dokument trennen muß und die Formeln auch mit dem Dokument skaliert werden können. jsMath unterliegt der Apache License 2.0.

Die einfachste Integration von Formelsatz in Blogs, Wikis und Webseiten ist meiner Erfahrung nach mit MathJax möglich. Auch bei MathJax handelt es sich um ein JavaScript-Framework, welches es gestattet den Latex-Code für die Formel direkt im HTML-Dokument einzubetten. Um MathJax in WordPress zu nutzen, existieren bereits einige Plugins, wie bspw. Simple-MathJax von Samuel Coskey. Hat man das Plugin im Dashboard über den Punkt Plugins installiert und aktiviert, so kann man die weiter oben als Bild eingebettete Formel durch Angabe des nativen Latex-Code im Dokument direkt vom Browser rendern lassen.
So wird der Latex-Code:
$${}_pF_q(a_1, \ldots, a_p; c_1, \ldots, c_q; z) =
\sum_{n=0}^\infty \frac{(a_1)_n \cdots (a_p)_n}{(c_1)_n \cdots (c_q)_n} \frac{z^n}{n!} \,$$

durch MathJax folgendermaßen gerendert:
$${}_pF_q(a_1, \ldots, a_p; c_1, \ldots, c_q; z) =
\sum_{n=0}^\infty \frac{(a_1)_n \cdots (a_p)_n}{(c_1)_n \cdots (c_q)_n} \frac{z^n}{n!} \,$$
Für weitere Beispiele schaue man auf die MathJax Example Pages.

WordPress installieren und Sicherungen erstellen

Eine hervorragende Einführung in WordPress bietet DokuPress – das WordPress Benutzerhandbuch.

Installation beim Hoster bplaced.net

Die Installation von WordPress auf bplaced.net ist hier ausführlich beschrieben. Prinzipiell lädt man sich die aktuelle deutsche Anpassung der WordPress-Distribution herunter, entpackt sie auf dem lokalen System und kopiert die komplette Verzeichnisstruktur anschließend mit einem geeigneten ftp-client (z.B. FileZilla) in das Wurzelverzeichnis bei bplaced.net. Dann muß noch eine MySql-Datenbank angelegt werden und die dabei vergebenen Namen und Passwörter müssen anschließend in der Datei wp-config.php bekanntgemacht werden. Ist dies geschehen, so muß im Browser noch die Datei install.php aufgerufen werden (sie befindet sich im Verzeichnis wp-admin) um die Installation abzuschließen.

Blog aus Backup neu aufsetzen

Man sollte seinen Blog in regelmäßigen Abständen sichern. Dazu steht im Dashboard unter dem Punkt Werkzeuge der Eintrag Daten exportieren zur Verfügung. Um das dabei angelegte Backup wieder einzuspielen, muß noch das Plugin WordPress Importer installiert werden. Es ist jedoch zu beachten, dass bei dieser Methode keine Dateien der Mediathek mitgesichert werden. Um diese Dateien ebenfalls zu sichern, sollte mit FileZilla das Verzeichnis /wp-content/uploads auf den lokalen Server übertragen werden. Spielt man dieses Verzeichnis nach einer Neuinstallation wieder bei seinem Hoster auf, so ist es zwar auf dem Server physisch vorhanden, allein der Mediathek sind die Dateien nicht bekannt. Dies kann durch das Plugin Add From Server geschehen, das den Import des uploads-Verzeichnisses in die Mediathek gestattet.

WordPress: Fließtext um Bilder

Um Bilder von Text umfließen zu lassen, muß in der HTML-View des betreffenden Bildes im Artikeleditor im <img>-Tag die Anweisung class="alignnone" entsprechend zu "alignright" bzw. "alignleft" geändert werden. Dies funktioniert natürlich nur, wenn im gewählten Themes überhaupt derartige Klassen definiert wurden, gegebenfalls muß im css-File des Themes die Definition nachgeholt werden (im Dashboard unter Menüpunkt “Design” Untermenü “Editor” wählen):

.alignleft { float: left; margin-right: 8px; }
.alignright { float: right; margin-left: 8px; }

Code in WordPress-Artikel einfügen

Zum Einfügen von Code muß das Plugin wp-syntax installiert und aktiviert werden. Dann kann in der HTML-View des Artikeleditors der gewünschte Code zwischen <pre lang="language" line="1"> und </pre> eingefügt werden (z.B. durch Klick mit der rechten Maustaste und der anschließenden Auswahl des Punktes “Als unformatierten Text einfügen”). Mit “language” wird die verwendete Programmiersprache angegeben, mit line kann optional die Zeilennummerierung angeschaltet werden, wobei gleichzeitig die Startzeile übergeben wird. Die Visuell-View des Artikeleditors sollte übrigens bei Verwendung des Plugins nicht benutzt werden! Das Ergebnis sieht dann für Python-Code bspw. so aus:

1
2
3
4
5
6
7
8
9
10
11
12
#!/usr/bin/python 
 
# Umbenennen eines Dateinamens in die kleingeschriebene
# Variante des Namens.
 
import os, glob 
import string
 
liste = glob.glob("*.PDF")
for line in liste:
        print "Rename: %s" % line
        os.rename(line, line.lower())

Das wars auch schon…