Pünktlich zum zweiten Geburtstag meines Unternehmens gab es einen kleinen Relaunch meiner gewerblichen Website. Diese ist zeitgemäß in HTML5 verfasst und verwendet eine Reihe interessanter Techniken wie ein CSS-Grid-Framework, eine dynamsiche Stylesheetsprache sowie das neue LEPTON CMS. Hier gibt es einen kleinen technischen Einblick unter die Haube der neuen Site.
LEPTON, das neue CMS auf der Basis von WebsiteBaker
LEPTON ist ein so genannter Fork des CMS WebsiteBaker und laut dem Entwicklerteam die konsequente Weiterentwicklung. In der ersten Version wurde weniger Wert auf neue Features gelegt sondern vielmehr Codebereinigungen durchgeführt, die das System noch stabiler und sicherer machen sollen. In einem anderen Artikel habe ich bereits erklärt, warum ich mich für LEPTON und somit gegen WebsiteBaker entschieden habe. Hier sei aber der Vollständigkeit erwähnt, dass ich mir dessen momentan nicht mehr ganz so sicher bin. Nicht weil ich unzufrieden mit LEPTON bin – das bin ich nicht – sondern vielmehr weil viele der meiner Meinung nach innovationsgebenden Kernentwickler kürzlich das LEPTON-Team verlassen haben. Die Gründe hierfür waren vielfältig, haben aber ausdrücklich nichts mit LEPTON selbst zu tun. Zum jetzigen Zeitpunkt kann ich LEPTON noch mit guten Gewissen empfehlen, wohin die Reise jedoch langfristig geht bleibt abzuwarten.
HTML5-Template
HTML5 ist zwar eigentlich noch kein vom W3C verabschiedeter Standard, viele der neuen Elemente werden aber bereits in etlichen modernen Browsern unterstützt. Und um die Verbeitung dieses neuen Dokumenttyps weiter voran zu treiben, ist nun auch meine neue Site in HTML5 verfasst. Denn je verbreiteter eine Technik, desto verbreiteter deren Support durch Browserhersteller – das typsiche Henne-Ei-Problem.
Der große Unterschied von HTML5 gegenüber seiner Vorgänger ist die verwendung semantischer Elemente, also Elemnete die Aussagen über die Funktion und Wertigkeit der beiinhalteten Elemnete treffen. Wärend in alten (X)HTML-Versionen alle Bestandteile einer Website (z.B. Navigation, Sidebar, Header) in nichtssagende DIVs verpackt wurden, stehen hierfür nun spezielle Elemente bereit: Beispielweise wird in <nav>-Tags die Navigation beherbergt, in <aside> die Sidebar und in <header> … ja, richtig der Header der Seite. Die Elemente sprechen also für sich selbst. Auch wenn ich von diesen Elementen nur eine kleine Auswahl verwende (neben den oben genannten nämlich nur noch <footer> und <article>) ist das dennoch eine sehr interessante Möglichkeit, seiner Site wertvolle Meta-Informationen mit auf den Weg zu geben.
Apropos Meta-Informationen: Die Deklaration von meta-Tags im einer Seite hat sich gegenüber (X)HTML ein wenig geändert, bzw. sind einige Angaben nicht mehr valide: So z.B. die http-equiv-Angaben für die IE-Imagetoolbar oder das Charset. Wer also meta-Angaben aus einer vorhanden (X)HTML-Seite übernehmen möchte, muss dort erstmal aufräumen und die HTML5-Standard-Metatags verwenden.
Das größte Problem von HTML5: Es wird von alten Browsern nicht unterstützt. Zumindest nicht out-of-the-box. Aber es gibt Lösungen in Form von Javascripts, die auch in alten Browsern wie IE7 und IE6 eine große Auswahl an HTML5-Elementen verfügbar machen. Ich nutze hierfür html5shiv.js von Sjoerd Visscher. Urspünglich hatte ich modernizr.js von Paul Irish im Einsatz dass zusammen mit einer Menger anderer nützlicher HTML5-Tools in HTML5-Boilerplate enthalten ist. Zusammen mit einem von mir eingesetzten jQuery-Plugin gab es jedoch Komplikationen, weshalb ich diesen Teil von HTML5-Boilerplate ausgetauscht habe.
LESS CSS und less.php
Wo HTML5 auftaucht ist CSS3 nicht weit. Aber darüber möchte ich hier garnicht schreiben, sondern über die Art und Weise, wie das Stylesheet bei mir erzeugt wird. Nämlich mit LESS! LESS ist eine dynamische Stylesheetsprache, die CSS um – ihr erratet es sicher – Dynamik erweitert. Die normale CSS-Syntax ist dabei vollständig kompatibel zu LESS; einfach die .css-Datei in .less umbenennen und fertig ist das erste LESS-Projekt. Aber wozu das Alles? Wegen der angesprochenen Dynamik: Mit LESS ist es möglich, z.B. Variablen in seinem Stylesheet zu verwenden: Einmal die Akzentfarbe mit @akzentfarbe: #f00; festgelegt und schon steht sie überall per color: @akzentfarbe zur Verfügung. Cool, oder? Aber LESS kann viel mehr: Mit so genannten Mixins kann man komplette Deklarationsblöcke einmal definieren und später an belieber Stelle aufrufen, mit Parametric Mixins sogar mit Parametern anpassbar, ähnlich einem Funktionsaufruf in beispielsweise PHP.
Nun interpretieren Browser LESS-Dateien nicht nativ sondern benötigen die guten alten Stylesheets. LESS muss also geparst und in CSS gewandelt werden, was auf unterschiedliche Weise geschehen kann: Auf der LESS-Website selbst steht dafür ein Javascript bereit, dass clientseitig LESS parst und dem Browser als Standard-CSS zuführt. Dann gibt es Tool wie Codekit (danke für die Empfehlung, Jeanette ;-)), in die man die LESS-Datei lädt und CSS als Ausgabe erhält. Ich wollte aber eine Lösung, die serverseitig on-the-fly LESS in CSS wandelt und bin in less.php fündig geworden. Die .less-Datei liegt hierbei mit im Template-Ordner und wird durch zwei PHP-Zeilen im Template geparst und als CSS-Datei geschrieben. less.php überprüft bei jedem Seitenaufruf, ob die .less-Datei neuer als die .css-Datei ist und wirft nur in diesem Fall den Parser an. In Sachen Performance ist der LESS-Parser also nicht spürbar und leistet prima Arbeit. Änderungen am Stylesheet? Kein Problem, .less-Datei via FTP-Programm öffnen, Modifikationen vornehmen, speichern, Seite neu laden – tadaa.
960 Grid System CSS Framework
Generell mag man durchaus geteilter Meinung über die Verwendung von CSS-Frameworks sein, erzeugen sie doch unvermeidbar einen gewissen Überhang an Code. ABER: Die Zeitersparnis sowohl beim Layouten als auch beim späteren Umsetzen in HTML & CSS ist immens und macht aus meiner Sicht – insbesondere in Anbetracht ständig schneller werdender Internetzugänge – die paar Kilobytes an Extracode mehr als wett. Das 960 Grid System von Nathan Smith ist, wie es der Name bereits sagt, für Seiten mit einer Gesamtbreite von 960 Pixel ausgelegt. Diese 960 Pixel sind wahlweise in 12, 16 oder 24 logische Spalten unterteilt, die man nach belieben schnell kombinieren kann. Besonders Praktisch: Im Downloadpaket sind Vorlagen für diverse Layout- und Designsoftware enthalten (darunter natürlich Photoshop und Illustrator, aber auch CorelDraw, Fireworks, Pixelmator u.a.), die Hilfslinien für die einzelnen Spalten enthalten und somit ein am Raster orientiertes Gestalten ermöglichen.
LibraryAdmin für LEPTON
Auf eingen Seiten der Website kommen jQuery-Plugins zum Einsatz, deren Skript- und Stylesheetdateien in das HTML-Dokument geladen werden müssen. Damit diese Dateien wirklich nur auf den Seiten geladen werden, auf denen sie auch tatsächlich benötigt werden nutze ich LibraryAdmin von Bianca Martinovic. Mit LibraryAdmin kann man seine Javascript-Bibliotheken (nicht nur jQuery) und deren Plugins verwalten und via so genannter „Droplets” auf einzelnen Seiten verfügbar machen. „Droplets“ (bzw. „Dropleps”) heißen in WebsiteBaker bzw. LEPTON kleine, frei definierbare Schlüsselwörter in eckigen Klammern, die man im Text einfügt und an deren Stelle PHP-Code ausgeführt wird. Im Fall von LibraryAdmin bewirkt dieser PHP-Code, dass die in LibraryAdmin definierten JS- und CSS-Dateien in den der entsprechenden Seite geschrieben werden. Somit kann man ganz gezielt steuern, welche Dateien auf welcher Seite zusätzlich geladen werden sollen.
RSS-Parser
Für die Darstellung der letzten Einträge des Blogs in der Sidebar habe ich ein kleines Skript in PHP geschrieben. Dieses nutzt die SimplePie PHP-Classe zum Pollen und Cachen der RSS-Feeds. Speziell für WebsiteBaker und LEPTON hat Ralf Hertsch auch eine eigene Implemetierung von Simplepie entwickelt, nämlich libSimplePie. Diese kannte ich zum Zeitpunkt des Relaunches nicht und habe daher meine eigenes Skript im Einsatz – wer eine ähnliche Funktionalität abbilden möchte, sollte sich aber mal Ralfs Umsetzung ansehen.
Fazit
Neben den hier beschrieben Details gibt es natürlich noch einige weitere technische Neuerungen aber das sind die wesentlichen und wichtigsten, die ich gern mal mit meinen interessierten Lesern teilen möchte. HTML5 ist eine fantastische Technik, um endlich sematische (oder sematischere) Websites zu erstellen, LESS verleiht CSS die Flexibilität, die man von Skriptsprachen kennt, 960 Grid System verkürzt die Layout- und Entwicklungszeit sowie das Cross-Browser-Testing und LEPTON ist ein klasse CMS mit großer Flexibiltät und der Einfachheit von WebsiteBaker.