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.
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:
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.
In einem anderen Artikel habe ich bereits beschrieben, wie man mit Hilfe der Opensource JavaScript-Bibliothek OpenLayers GPX-Tracks einer OSM-Karte überlagern kann um diese auf einer Webseite einzubetten. In Form des OSM-Plugins bietet sich für Nutzer eines WordPress-Blogs eine sehr vereinfachte Integration von OSM-Karten mit verschiedenen Layern, sowie Markern durch die Angabe von Shortcodes an.
Das erwähnte Plugin wird mit einem ftp-Client (z.B. FileZilla) in das Verzeichnis /wp-content/plugins der WordPress-Installation übertragen und anschließend im Plugin-Menu aktiviert.
Die Funktionen des Plugins stehen nun zur Verfügung und können im Text durch die Platzierung von Shortcodes der Form [osm_map ...] eingefügt werden. Argumente des [osm_map]-Präfix sind z.B.:
Für allgemeine Angaben zur Karte:
width…die Breite der Karte [osm_map … width=”450″]
height…die Höhe der Karte [osm_map … height=”600″]
lat…Breitengrad des Kartenzentrums [osm_map … lat=23.6565]
long…Längengrad des Kartenzentrums [osm_map … long=”32″]
zoom…Zoomstufe der Karte [osm_map … zoom=”13″]
type…Kartentyp (Osmarender, Mapnik, CycleMap, GoogleStreet, GooglePhysical,
GoogleSatellite, GoogleHybrid, All, AllOsm, AllGoogle, Ext) [osm_map … type=”All”] if it is set to all, LayerSchwith is enabled
gpx_file…Absolute url des gpx-files [osm_map … gpx_file=”http://www.Domain.com/blog/sample.gpx”]
gpx_colour…Farbe der gpx-Route [osm_map … gpx_colour=”black”]
gpx_file_list…Entsprechende Angabe für mehrere Routen [osm_map … gpx_file=”http://www.Domain.com/blog/sample01.gpx,http://www.Domain.com/blog/sample02.gpx”]
gpx_colour_list…Entsprechende Angabe für mehrere Routen [osm_map … gpx_colour_list=”black,green”]
kml_colour…Farbe der Route [osm_map … kml_colour=”black”]
Für das Hinzufügen eines einzelnen Markers:
marker…Hinzufügen eines Markers [osm_map … marker=”33.54,85.333,Customfieldname”]
marker_name…Definiert ein Bildchen für den Marker. [osm_map … marker_name=”../../../uploads/BikeLogo.png”]
m_txt_n…Definiert einen zeilenweisen Text, der beim Klicken auf den Marker erscheint. [osm_map … m_txt_01=”Waldquelle” m_txt_02=<”a href=’www.domain.de’>Bild</a>”]
marker_file…Alternativ zur direkten Texteingabe mit m_txt kann hier die url eines Textfiles angegeben werden: [osm_map … marker_file=”http://cyberleaf.bplaced.net/wp-content/uploads/textfile.txt”]
marker_height…Definiert die Höhe des Markers. [osm_map … marker_height=”23″]
marker_width…Definiert die Breite des Markers. [osm_map … marker_width=”23″]
marker_focus…Definiert die Orientierung des Markers (0…center, 1…left bottom, 2…left top, 3…right
top, 4…right bottom). [osm_map … marker_focus=”1″]
Geht man im Dashboard von WordPress auf Einstellungen und wählt den Punkt OSM an, gelangt man zu einem Dialog und kann sich den Shortcode sogar interaktiv generieren lassen.
Um Probleme bei der Angabe von Pfaden besser auf die Spur zu kommen, sollte im Browser die Javascript-Konsole angeschaltet werden. Relative Pfadangaben beziehen sich auf den Installationsort des osm-plugins (also /wp-content/plugins/osm, bzw. /wp-content/plugins/osm/icons für marker_name)
Am Ende noch ein Beispiel:
Hat man die nötigen Dateien im Dashboard über den Punkt Mediathek->Datei hinzufügen hochgeladen, kann das folgende Stück Code auf der Seite eingebunden werden:
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 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.
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.
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):
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.importos,globimportstring
liste =glob.glob("*.PDF")for line in liste:
print"Rename: %s" % line
os.rename(line, line.lower())