Kategorien
Design HTML/CSS

HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser

Das SVG-Format hat zahlreiche Vorteile: Vor allem, dass es vektorbasiert ist, macht es zu einer Besonderheit unter den gängigen Bildformaten für Browser. Auch wenn alle modernen Browser das Format mittlerweile unterstützen, gibt es gerade beim Internet Explorer noch Probleme. Denn dieser unterstützt SVG erst ab Version 9. Da auch ältere Versionen noch stark verbreitet sind, bietet sich ein Fallback an. Mit PHP und ImageMagick kann ein solches PNG-Fallback automatisch generiert werden.

svg-php-imagemagick

SVG-Dateien an ein PHP-Script schicken

Das Prinzip unserer Fallback-Lösung ist einfach: Per „.htaccess“ wird zunächst dafür gesorgt, dass beim Aufruf von Dateien mit der Endung „.svg“ ein PHP-Script aufgerufen wird. Dieses Script prüft, welcher Browser in welcher Version verwendet wird. Beim Internet Explorer kleiner 9 wird das PHP-Script die SVG-Grafik per ImageMagick ins PNG-Format konvertieren und als solches ausgeben, bei allen anderen als SVG-Format.

Folgende zwei Zeilen in der „.htaccess“ genügen, um per „RewriteRule“ bei entsprechenden Anfragen ein PHP-Script aufzurufen:

RewriteEngine On
RewriteRule \.svg$ /svg.php [L]

Im nächsten Schritt wird die Weiterverarbeitung innerhalb des PHP-Scriptes definiert.

Grafik per ImageMagick in PNG konvertieren

Das PHP-Script muss zunächst wissen, welche Datei wiedergegeben werden soll. Hierzu wird der Pfad zur angeforderten SVG-Datei ausgelesen.

$datei = $_SERVER["DOCUMENT_ROOT"].$_SERVER["REQUEST_URI"];

Die Variable „$datei“ enthält den absoluten Pfad zur SVG-Datei, welche vom Browser angefragt wird. Anschließend wird der Inhalt dieser Datei ausgelesen:

$grafik = file_get_contents($datei);

Die Variable „$grafik“ enthält nun den SVG-Quelltext. Im nächsten Schritt werden Name und Version des verwendeten Browsers ermittelt. Dies kann auf zwei Arten geschehen. Per „$_SERVER["HTTP_USER_AGENT"]“ wird der User-Agent-Header des Browsers ausgelesen. Daraus können Name und Version des Browsers abgeleitet werden.

Alternativ können die Informationen über „get_browser()“ ermittelt werden. Bei Verwendung dieser Methode müssen die Werte aus dem User-Agent-Header nicht selbst extrahiert werden, sondern werden aus der Datei „browscap.ini“ bezogen, die serverseitig zur Verfügung steht. Allerdings stellen nicht alle Provider aktuelle Browserinformationen über diese Datei bereit, sodass man sich im Einzelfall für die etwas aufwändigere Methode entscheiden muss.

$browser = get_browser();

Im Beispiel wird die Variante per „get_browser()“ verwendet. Über eine „if“-Abfrage wird nun die Ausgabe der Grafik gesteuert. Bei allen Versionen des Internet Explorers kleiner 9 wird per ImageMagick die SVG-Grafik konvertiert:

if ($browser["browser"] == "IE" && $browser["majorver"] < 9) {
  $png = new Imagick();
  $png->setBackgroundColor(new ImagickPixel("transparent"));
  $png->readImageBlob($svg);
  $png->setImageFormat("png32");
  header("Content-Type: image/png");
  echo $png;
} else {
  header("Content-Type: image/svg+xml");
  echo $svg;
}

Dazu wird per „new Imagick()“ eine neues Bildobjekt von ImageMagick erstellt. ImageMagick ist bei vielen Providern installiert und wird unter anderem von TYPO3 zur internen Bildbearbeitung verwendet. Das Bildobjekt erhält einen transparenten Hintergrund, um Transparenzen der SVG-Grafik zu erhalten. Anschließend wird die SVG-Grafik ausgelesen und ins PNG-Format konvertiert.

Da die im Browser aufgerufene Datei die Endung „.svg“ besitzt, muss dem Browser per Header explizit mitgeteilt werden, dass etwas im PNG-Format ausgegeben wird. Ansonsten wird gegebenenfalls nur der Quelltext der PNG-Datei im Browser dargestellt. Im letzten Schritt wird der Inhalt der PNG-Grafik per „echo“ ausgegeben.

Während beim Internet Explorer kleiner 9 also eine PNG-Grafik wiedergegeben wird, wird bei allen anderen Browsern die SVG-Grafik einfach nur per „echo“ an den Browser geschickt.

Einschränkungen beachten

Damit ImageMagick SVG-Grafiken korrekt und vollständig auslesen kann, müssen einige Einschränkungen beachtet werden. So kann ImageMagick ausschließlich Inline-Stylesheets auslesen. Alles, was über einen Style-Block definiert wird, wird ignoriert. Auch Schriften, die per CSS definiert sind, kann ImageMagick nicht auslesen.

SVG-Animationen gehen bei der Konvertierung natürlich verloren. Auch dies sollte berücksichtigt werden.

Das Fallback per PHP und ImageMagick hat den Vorteil, dass der HTML-Quelltext nicht angefasst werden muss und auf JavaScript verzichtet werden kann. Außerdem muss die Fallback-Grafik nicht manuell bereitgestellt werden.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

DevDocs: Zentrales Nachschlagewerk für Webentwickler

Thibaut Courouble ist wieder da. Der französische Frontend-Entwickler, den wir im Sommer 2012 erstmalig bei Dr. Web vorstellten, meldet sich mit seinem jüngsten Projekt DevDocs zurück. DevDocs will nicht weniger, als das zentrale Nachschlagewerk für Webentwickler sein. Und in der Tat ist die themenübergreifende Bündelung verschiedener Dokumentationen mit einer ebenso übergreifenden Suchfunktion gar keine schlechte Idee.

devdocs

Courouble: Kein Unbekannter in der Entwicklergemeinde

Thibaut Courouble kennen regelmäßige Dr. Web-Leserinnen und Leser schon seit längerem. Auffällig an ihm ist insbesondere seine philosophische Art, den Menschen und Themen des Netzes zu begegnen. Das mag nicht jedermann Sache sein. Darüber hinaus jedoch ist er ein äußerst talentierter Entwickler mit interessanten Ideen.

Im August 2012 stellten wir sein damals neues Projekt WebInterfaceLab vor, das er zwischenzeitlich in CSSFlow umbenannte. Am Konzept, CSS Snippets kostenfrei und ganze Interface Kits kostenpflichtig anzubieten änderte sich indes nichts. Einzig die Zahl der angebotenen Elemente ist seither gestiegen. Nach wie vor sollte die Website in keinem Designer-Werkzeugkasten fehlen.

DevDocs: HTML5, CSS, JavaScript, DOM, HTTP und vieles mehr

Mit seinem neuesten Projekt DevDocs geht Courouble ein Problem an, das selbst erfahrene Webentwickler immer mal wieder ereilen wird. Man muss eine Funktion, ein Feature, eine Schreibweise nachschlagen. Dazu gibt es im besten Falle eine schnell auffindbare Dokumentation. Nicht immer ist zumindest das schnelle Auffinden gewährleistet. Ich jedenfalls suchte mir schon mehr als oft einen Wolf in den Weiten des Netzes.

DevDocs ist auf Wachstum ausgerichtet. Courouble bittet um aktive Vorschläge zur Integration weiterer Dokumentationen in seinen Service. Dabei ist die Zahl der verfügbaren Referenzen schon jetzt ganz beachtlich und beinhaltet neben den unabdingbaren Basics, wie CSS, DOM, HTML, HTTP und JavaScript auch Frameworks und Tools wie jQuery, Node.js, Ruby, Sass, Less und weitere.

devdocs-css-snap
Links die Übersicht eines Teils der Themen, rechts die Inhalte

Interessant ist einiges am Konzept der DevDocs. Zunächst können Sie diejenigen Dokumentationen aktiv markieren, die für Sie von Relevanz sind. So schließen Sie irrelevante Informationen von vornherein aus. Eine nun durchgeführte Freitextsuche erstreckt sich über alle Themenbereiche, die Sie zuvor markiert haben. Dabei bietet DevDocs in begrenztem Umfang sogar eine Fuzzy Logic und erkennt ähnliche Ergebnisse. Will man gezielt nur in einer bestimmten Doku suchen, stellt man dem Suchbegriff den Namen nebst einem Tab voran. Die Web-App unterstützt Keyboard-Shortcuts. Auch die Suche über die Adressleiste des Browsers ist vorgesehen. Wer es noch bequemer will, installiert die Chrome App.

devdocs-chromeapp

DevDocs ist kostenfrei unter Open Source Lizenz verfügbar. Man muss allerdings der englischen Sprache mächtig sein, um es sinnvoll zu nutzen. Inwieweit es künftig mehrsprachig zugehen wird, ist nicht klar, aber meines Erachtens nicht zu erwarten, wenn man bedenkt, dass Courouble nicht mal seine eigene Muttersprache berücksichtigt.

Im Ergebnis ist DevDocs eines dieser Projekte, die Webentwickler ihrer Bookmark-Sammlung hinzufügen sollten. Nicht unwichtig ist noch, dass DevDocs ebenfalls für die Anzeige auf mobilen Geräten optimiert ist.

Links zum Beitrag

Kategorien
Programmierung Sonstige Programmiersprachen

Customize Images: PHP-Script erlaubt die Manipulation von Bilddateien per URL-String

Es ist schon über ein Jahr her, dass wir Ihnen das PHP-Projekt Adaptive Images von Matt Wilcox vorgestellt haben. Mit Adaptive Images wird die automatische Anpassung der in eine Website eingebundenen Bilddateien auf den Viewport des Besucherbrowsers gewährleistet. Dario D. Müller ließ sich von Adaptive Images inspirieren, entwickelte aber mit Customize Images dennoch etwas völlig anderes. Customize Images erlaubt die gezielte Bildmanipulation per URL-String…

customize-images

Customize Images: Gezielte Eingriffsmöglichkeiten statt automatischer Auflösungsanpassung

Während der Anwendungsfall von Adaptive Images in Zeiten von responsivem Webdesign nahezu selbsterklärend ist, muss man dem Nutzen von Customize Images schon etwas nachspüren. Interessant an der Herangehensweise ist sicherlich die Bildanpassung über Parameter im Dateiaufruf.

So kann so ein Aufruf aussehen: http:://www.ihredomain.tld/files/bildname_w640_s.jpg

Was hier passiert ist folgendes. Die Datei bildname.jpg wird aufgerufen, jedoch über den Parameter _w640 auf 640 Pixel Breite geändert, wobei der zusätzliche Parameter _s sicherstellt, dass das Seitenverhältnis des Bildes gewahrt bleibt. Ähnlich funktionieren die Parameter _h250 oder _w640_h250. Ich denke, die Funktionsweise wird klar.

Die eigentlichen Funktionsdateien .htaccess, index.php, class.customize-images.php werden zweckmäßigerweise direkt mit im Ordner files abgelegt. Weitere Installationsschritte sind nicht erforderlich. Die .htaccess sorgt für die erforderlichen Umleitungen.

Neben dem Parameter _s für die Beibehaltung des Seitenverhältnis, bietet sich der Parameter _c an, der bei einem Bild, bei dem sowohl Breite wie Höhe definiert ist, dafür sorgt, dass das Seitenverhältnis durch Weglassen von Bildinhalten, also durch Cropping, Schneiden, gewahrt bleibt. Weniger sinnvoll erscheint allerdings der ebenfalls verfügbare Parameter _d, der das Bild anhand der übergebenen Breite und Höhe entsprechend verzerrt (_d = distort).

Die einmal behandelten – mit Ausnahme der verzerrt dargestellten – Bilder werden gecacht und stehen so für weitere Aufrufe ohne neuerliche Vorbehandlung zur Verfügung. Das Caching kann über den Parameter ?dev abgeschaltet werden.

Customize Images ist ein ganz frisches Projekt und erst am 15. August auf Github ins Leben gerufen worden. Es kann unter GNU GPL-Lizenz frei verwendet werden.

Links zum Beitrag:

  • Customize Images | Github
  • PHP-Projekt: Adaptive-Image als “Customize-Images” | Dario D. Müller
  • Adaptive Images: PHP-Script skaliert Bilder passend in responsiven Layouts | Dr. Web Magazin
Kategorien
Apps Programmierung

MonstaFTP: FTP-Client als Cloud-App zum Selberhosten

Wer noch eine Ecke seines Webspace ungenutzt sieht und vielleicht noch eine Subdomain entbehren kann, sollte sich das kostenlose PHP-Script MonstaFTP auf jeden Fall einmal anschauen. Veröffentlicht unter Open Source-Lizenz erlaubt MonstaFTP komfortablen Zugriff auf beliebige FTP-Server. Unter Chrome unterstützt das Script sogar das Drag & Drop ganzer Ordner, generell ist die Verwendung in allen modernen Browsern möglich.

monstaftp

MonstaFTP: Schnell und unkompliziert, sowohl bei Installation, wie auch im Alltagseinsatz

MonstaFTP lief mir bereits vor gut zwei Wochen über den Weg. Seitdem begleitet es mich als FTP-Client auf Schritt und Tritt und ist überall dabei, wo ich eine Internetverbindung habe. MonstaFTP ist nämlich ein unter GPL-Lizenz veröffentlichtes PHP-Script, neuerdings auch Cloud-App genannt, das im Browser einen FTP-Client mit allen wichtigen Funktionen, inklusive Chmod zur Verfügung stellt.

monstaftp-chmod

Sowohl die Installation, wie der tägliche Einsatz laufen fast schon intuitiv ab. Letzteres gilt jedenfalls dann, wenn man bereits Erfahrungen mit FTP-Clients besitzt. Zur Installation ist es lediglich erforderlich, die entpackte Ordnerstruktur aus dem Download-Zip in ein Verzeichnis auf dem eigenen Webspace hochzuladen.

Ich installierte MonstaFTP unter einer Subdomain, was indes nicht zwingend erforderlich ist. Das Script läuft in jedem beliebigen, per URL erreichbaren Unterverzeichnis. Sämtliche Einstellungen von MonstaFTP werden über entsprechende Konfigurationseinträge direkt in der index.php erledigt. In meinem Falle waren keine Änderungen erforderlich.

Im Auslieferungszustand spricht die App nur englisch. Im Unterverzeichnis languages findet sich die Datei en_US.php, die die entsprechenden Texte enthält. Übersetzen Sie die paar Texte in die gewünschte Sprache, benennen die Datei z.B. in de_DE.php um und laden sie an entsprechender Stelle wieder hoch.

Wollen Sie von Ihrer Cloud-Installation aus auf außerhalb des gleichen Servers gelegene FTP-Lokationen zugreifen, stellen Sie sicher, dass Ihr Server externe FTP-Verbindungen zulässt. Ihr Hoster kann Ihnen da helfen. MonstaFTP kann zwar auf Windows-Server zugreifen, muss selbst jedoch zwingend unter Linux installiert sein. Da das mittlerweile bei rund 99 % aller Spaces der Fall sein dürfte, beeinträchtigt diese Voraussetzung wohl praktisch niemanden.

monstaftp-monsta

monstaftp-ocean

MonstaFTP kann sichere Verbindungen via SSL nutzen. Derzeit zwei Skins sind wählbar, eines in einem eleganten Grau, das andere in einem Windows-ähnlichen Blau. Die eigentlichen Credentials für den Zugriff auf die FTP-Server werden nicht in MonstaFTP hinterlegt, sondern müssen bei jedem Connect neu eingegeben werden.

monstaftp-login

MonstaFTP läuft am besten im Chrome. Hier können zusätzlich komplette Ordner per Drag and Drop hochgeladen werden. Der Upload einzelner Datei per Drag and Drop funktioniert indes auch mit Firefox, Safari und Internet Explorer. MonstaFTP folgt dem Trend zum Flat Design und sieht in der Metro-Umgebung des neuen Windows ausgesprochen gut aus.

Vor allem für Datennomaden ist MonstaFTP eine valide Alternative, denn der reine Internetzugang reicht von nun an aus, um Zugriff auf seine FTP-Sites zu nehmen. Das ist zum Beispiel ideal für den Noteinsatz von unterwegs. Ich persönlich verwende unter Windows aktuell nur noch MonstaFTP, unter Mac OS bleibe ich vorerst meinem Transmit treu.

Der Download des Scripts kann über die einschlägigen Directories, wie Hot Scripts, oder direkt über die MonstaApps-Website erfolgen. Nach einer E-Mail-Adresse wird zwar im Rahmen des Downloads gefragt, diese kann jedoch auch verweigert werden. Gibt man sie ein, wird man über neue Produkte des Hauses auf dem laufenden gehalten.

Von mir erhält MonstaFTP eine klare Empfehlung. Jetzt sind Sie an der Reihe…

Kategorien
JavaScript & jQuery Programmierung

Einmal hin, alles drin: Munee verwaltet und optimiert Website-Assets auf Basis von PHP

Cody Lundquist, Australier mit schwedisch klingendem Namen, stellt mit Munee ein kostenlos verwendbares Asset-Management auf der Basis von PHP 5.3 vor. Der Funktionsumfang des Tools ist durchaus beachtlich, verlangt aber eine entsprechende Anpassung der eigenen Web-Projekte. Mit Munee kann nahezu jedwede Form von denkbarem Asset, seien es Bilder und andere Dateien, JavaScript, CSS, LESS, SCSS oder CoffeeScript verwaltet werden.

munee

Munee: Caching als Herzstück

Munee ist in der Lage, viele SEO-relevante Fragestellungen zufriedenstellend zu bearbeiten. So kombiniert es auf Wunsch etwa sämtliche JS- und CSS-Dateien in jeweils eine einzelne Datei und stellt diese minified und gzipped zur Verfügung. Ebenso ist es möglich, LESS und SCSS ohne vorherige Kompilierung bereitzustellen und die Erstellung des CSS Munee zu überlassen. Gleiches erlaubt Munee mit Blick auf CoffeeScript. Dieses kann zur Laufzeit nach JavaScript übersetzt werden.

Alle Dateien werden auf Client- und auf Server-Seite gecacht. Im Falle des Aufrufes checkt Munee die Aktualität der Caches und liefert nur im Veränderungsfalle neue Versionen aus.

Mit Blick auf Bilddateien liefert Munee noch mehr Möglichkeiten. Bilder können zur Laufzeit nach verschiedenen Kriterien in der Größe verändert werden. Die so veränderten Bilddateien werden wiederum im Cache gehalten. Neben der Größenveränderung ist zusätzlich die Verwendung gängiger Fotofilter vorgesehen. Möchte man seine Designs zunächst nicht mit echten Bildern, sondern lediglich mit Platzhaltern versehen, so kann man ebenfalls zu Munee greifen, welches verschiedene Platzhalter-Services zu integrieren imstande ist.

Munee: So funktioniert’s

Einmal installiert und per Rewrite-Rule verfügbar gemacht, steht Munee serverweit zur Verfügung. Die Funktionalität wird über entsprechende Parameter angesprochen. So würde man etwa folgendes schreiben, wollte man ein SCSS zu CSS machen und minifiziert ausliefern:

Parameter lassen sich kombinieren, wie dieses Beispiel eines größenreduzierten und mit einem Fotofilter bearbeiteten Bildes zeigt:


Die Kombination mehrerer CSS oder auch LESS/SCSS oder gemixt in ein auszulieferndes CSS-File erledigt man, indem man alle Dateien in eine einzige Script-Source-Angabe schreibt und dabei mit Komma trennt:

Entsprechendes gilt für den Einsatz von mehreren JavaScript-Dateien.

Munee sollte am sinnvollsten via Rewerite in der .htaccess getriggert werden. Alternativ ist es ebenso möglich, bei jedem Aufruf den Pfad zu Munee beizugeben. Das sähe dann beispielsweise so aus:

Munee steht unter MIT-Lizenz auf Github zur freien Verwendung in privaten, wie kommerziellen Projekten bereit.

Munee: die Zielgruppe

Schön und gut. Das Featureset von Lundquists PHP-Tool ist nicht schlecht. Aber es ist natürlich nicht alternativlos.

Fangen wir beim CSS an und nehmen JavaScript auf dem Weg gleich mit. Sicherlich, Munee nimmt CSS, LESS und SCSS, kompiliert wo erforderlich, schreibt in eine Datei und liefert minifiziert aus. Das klingt nicht schlecht. Wie oft jedoch ändern wir was an unseren CSS-Dateien und was hindert uns daran, LESS und SCSS vorab zu kompilieren. Wieso sollten wir die Ergebnisse dann nicht in einer Datei zusammenführen und auch noch einen Minifier drüber jagen?

Ebenso verhält es sich mit JavaScript und CoffeeScript. Warum soll mein CoffeeScript erst zur Laufzeit nach JavaScript kompiliert werden, wenn ich das genauso gut vorab manuell erledigen kann?

Das sind im Normalfall einer kleinen Website Tätigkeiten, die man ein einziges Mal zu leisten hat und die dann Bestand haben. Gut, Munee verspricht, im Zweifel serverseitig zu cachen und den Cache auszuliefern. Man kann also vermuten, wenn alles funktioniert, dass auch Munee weitgehend einmalig kompilieren wird.In überschaubaren Projekten würde ich jedoch vom Gefühl her stets die manuelle Methode vorziehen.

Zum Thema Resizing von Bildern im responsiven Webdesign gibt es ebenfalls Alternativen, noch dazu standardkonforme. Munee kann da schon deshalb nicht mithalten, weil es gar nicht vollresponsiv arbeiten kann. Hier sehe ich außer dem Caching im Grunde keine Vorteile auf Seiten des PHP-Tools.

Was bleibt? Es bleiben größere Websites, die von verschiedenen Personen bearbeitet werden, aber dennoch weitgehend optimiert erscheinen sollen. Ich betreue selbst ein entsprechend passendes Projekt. Dort werden fünf verschiedene Bereiche unter einer gemeinsamen Oberfläche von Designern und Developern verantwortet, die sich teils nicht einmal kennen.

Wenn hier eine Zusammenführung der unterschiedlichen Bemühungen via Munee erfolgte, wäre allen damit geholfen, denn hier wäre sonst der zentrale Projektverantwortliche immer wieder gefragt, die beschriebenen Tätigkeiten manuell zu erledigen, vor allem deren Erfordernis zu überwachen. Munee kann hier dafür sorgen, dass etwaige Veränderungen zur Laufzeit berücksichtigt werden, ohne dass man sich untereinander verständigen würde müssen.

Wie sehen Sie das? Können Sie sich Munee im Einsatz in einem Ihrer Projekte vorstellen?

Links zum Beitrag

Kategorien
CMS Programmierung

Pico: Freies, dateibasiertes Content Management System für PHP-Entwickler

Pico ist der Name eines recht neuen CMS, welches komplett ohne Datenbank daherkommt. Der Entwickler Gilbert Pellegrom bezeichnet es zwar als “stupidly simple”. Das gilt aber nur für die Zielgruppe der Entwickler. Wer also mit PHP keine Probleme hat und seine Texte gern mit Markdown schreibt, der sollte sich Pico in jedem Fall mal ansehen.

filebased-folder

Pico: keine Datenbank, Seiten als einzelne Dateien

Pico ist ein CMS, das wie kaum ein anderes für Personen geeignet ist, für die hierarchische Ordnerstrukturen die beste Ordnungsform darstellen, sich mit PHP gut auskennen und Markdown für die beste Form der Textauszeichnung überhaupt halten. Alle anderen, insbesondere der durchschnittliche Kleinseitenbetreiber, sollte eher auf eine der etablierteren Plattformen, allen voran WordPress setzen.

pico-website

Dabei ist Pico keine schlechte Idee; nicht, dass das so rüberkommt. Pico setzt PHP 5.2.4 und einen Apache-Server mit mod_rewrite voraus. Das Anlegen einer Website mit Pico ist in der Tat sehr simpel. Installiert werden muss gar nichts. Lediglich der Download des CMS mit nachfolgendem Entpacken und Uploaden der entstandenen Ordnerstrukturen auf den eigenen Webserver ist erforderlich. Das System ist bereit.

Die eigenen Inhalte werden nun als Markdown-Dateien mit der Endung .md in den dafür vorgesehenen Ordner namens content abgelegt. Eine Datei mit der Bezeichnung index.md funktioniert wie das entsprechende HTML-Pendant und bietet den Standardeinsprungpunkt, wenn die Website mit dem Browser aufgerufen wird. Ebenso lassen sich Unterordner mit entsprechenden Index-Dateien ausstatten, um die URL, etwa www.testseite.de/content/unterordner/index.md als www.testseite.de/unterordner/ aufrufen zu können.

Wie in Markdown üblich, können die entsprechenden Dateien auch HTML-Befehle enthalten. Diese werden beim Parsing so übernommen und entsprechend als solche angezeigt. Eine kleine Besonderheit ist die als Option empfohlene, aber im Grunde zwingend sinnvolle Erweiterung des Kopfes einer jeden Markdown-Datei um Meta-Informationen, die man später im Theme wieder auslesen kann. Das sieht beispielsweise so aus:

/*
Title: Welcome
Description: This description will go in the meta description tag
Author: Joe Bloggs
Date: 2013/01/01
Robots: noindex,nofollow
*/

Hat man seine Website nun aus einzelnen MD-Dateien und eventuellen Unterverzeichnissen per FTP-Upload verfügbar gemacht, stehen sämtliche Seiten per Einzelaufruf der entsprechenden URL zur Ansicht bereit. Vernetzungen untereinander oder gar eine Navigation beinhalten sie indes nur, wenn man das in jeder einzelnen Datei manuell so vorgesehen hat. An dieser Stelle kommt Picos Theming ins Spiel.

Pico: Themes auf Basis der Twig-Engine

Theming-Engines für PHP gibt es etliche. Der Pico-Entwickler entschied sich für den recht frischen Ansatz aus der Feder von Fabien Potencier, seines Zeichens Entwickler des Symfony-Frameworks, mit dem interessanten Namen Twig. Symfony setzt seit Version 2 ebenfalls auf Twig.

twig

Twig wird in ähnlicher Weise an den Start gebracht wie Pico selbst: Download, Entpacken, Upload. Im Falle von Twig kommt noch die Einbindung hinzu. Themes auf Twig-Basis können in Dateien mit HTML-Endung geschrieben werden, auch XML ist gut. Grundsätzlich ist ein Twig-Template eine reine Textdatei.

WordPress-Theme-Anpassern wird Twig nicht völlig unbekannt vorkommen. Ähnlich wie in Automattics Marktführer werden auch in Twig innerhalb des eigentlichen HTML-Codes Funktionslogik untergebracht. Twig kennt Variablen, Expressions und Tags. Ein minimaler Ansatz für ein Twig-Theme wäre folgender:



    
        My Webpage
    
    
        

        

My Webpage

{{ a_variable }}

Verschiedene beliebte IDEs, etwa Sublime Text, Notepad++, Coda, Eclipse und etliche mehr unterstützen das Syntax-Highlighting und die Autovervollständigung der Twig-Syntax. Theming mit Twig wird PHP-Kenner nicht vor Probleme stellen, ist aber für Otto Durchschnittsseitenbetreiber keine schmerzfreie Alternative.

Sowohl Pico, wie auch Twig sind kostenfrei verwendbar. Pico steht unter MIT-, Twig unter BSD-Lizenz

Fazit: Ist das Templating erledigt, kann Pico auch von weniger erfahrenen Usern verwendet werden, sofern diese Markdown schreiben und einen FTP-Client bedienen können. Das wird allerdings eher eine Minderheit ansprechen. Richtig gut geeignet ist Pico für die Dokumentation von Projekten. Überall da, wo ohnehin mit Markdown gearbeitet wird, ist Pico eine valide Option, diese Dateien strukturiert per Web zugänglich zu machen. Insofern würde ich den Einsatzzweck eher von dieser Seite her betrachten. Haben Sie einen Sack voll Markdown, den Sie per Website präsentieren wollen, dann schauen Sie Pico näher an. Ansonsten müsste man schon expliziter Fan sein…

Übrigens: Pico ist nicht zu verwechseln mit picoCMS.

Links zum Beitrag

  • Pico | Projekt-Website
  • Pico | Github Repository
  • The flexible, fast, and secure template engine for PHP | Twig