Skip to content

Markup mit HAML

Websites bestehen - hoffentlich - in der Regel aus (wenigen) Templates, die dann mit (vielen verschiedenen) Inhalten gefüllt werden. So arbeiten Blogs und CMS, so arbeitet auch ein static site generator. Die Templates können dabei HTML-Dateien sein - müssen es aber nicht, wie ich schon anno 2015 beschrieb.

"Markup mit HAML" vollständig lesen

Markup-Formate konvertieren

In meiner Reihe “Webdesign anno 2015” habe ich versucht, einen Überblick über Techniken und Tools zu geben, die letztlich jedermann die Gestaltung moderner, gut aussehender Webseiten ermöglichen. Das hatte natürlich einen konkreten Anlass: ich bin dabei, allmählich und sehr langsam - im Rahmen der mir bleibenden zeitlichen Möglichkeiten - verschiedene ältere Webpräsenzen zu überarbeiten und inhaltlich wie optisch und technisch auf den heutigen Stand zu bringen.

Eine große Erleichterung ist dabei die automatische Konvertierung von “klassischem” HTML in HAML und/oder Markdown. Ein machtvolles Werkzeug für solche Konvertierungsaufgaben ist pandoc; es geht aber oft auch eine Nummer kleiner, ganz simpel per cut & paste online:

Wenn nur eine Handvoll Seiten - oder Teile einer Seite - zu konvertieren sind, reicht (mir) das vollständig aus.

Templates und Template Engines

HTML und CSS, Frameworks wie Bootstrap, Web- und Iconfonts, LESS oder SASS bieten viele Möglichkeiten zur Gestaltung standardkonformer, gut lesbarer und auf verschiedenen Endgeräten nett anzusehender Webseiten. Eine größere Webpräsenz komplett “von Hand” zu pflegen macht allerdings wenig Spaß - und ist auch alles andere als professionell oder eine gute Idee.

Denn regelmäßig ist eine Website oder auch eine Webapplikation gekennzeichnet durch ein “Grundkorsett”, das mit wechselnden Inhalten gefüllt wird. So wird sich meist ein einheitliches Gestaltungskonzept mit Kopf- und/oder Fußzeile, mit einer oder mehreren Spalten und einer Navigation auf allen Seiten wiederfinden. Dieses Grundgerüst der ganzen Webpräsenz sollte sich dann nicht per copy & paste auf jeder Einzelseite wiederholen, sondern vielmehr in Form einer Vorlage, eines Templates, vorliegen, um dann jeweils mit spezifischen Inhalten gefüllt zu werden. Auch ist es - gerade bei Webapplikationen - sinnvoll, die “Technik” von der “Darstellung” zu trennen, damit Änderungen am Design nicht zwingend Änderungen an der Programmierung erfordern und umgekehrt. (Und, natürlich, damit verschiedene Teams an der optischen Darstellung der Seiten und der dahinterstehenden Programmlogik arbeiten können).

Auf diese Art und Weise arbeiten bspw. Blogsysteme wie Wordpress (mit eigenen Template-Funktionen) oder Serendipity (wo das Template-System Smarty genutzt wird) und natürlich auch Content Management Systeme (CMS) oder static site generators.

Das Prinzip ist immer gleich: ein Grundgerüst und mögliche Inhalte werden getrennt definiert, wobei das Grundgerüst oft aus einer HTML-Datei besteht. In dieser (HTML-) Datei können Platzhalter (Variablen) durch passenden Text ersetzt und andere Dateien eingebunden werden, Codefragmente (in einer Programmiersprache wie Perl, PHP, Python oder Ruby und/oder in einer speziellen Template-Sprache) eingebaut und/oder sogar statt HTML andere Auszeichnungssprachen verwendet werden. Das kann “dynamisch” bei jedem Aufruf der Seite erfolgen, ggf. mit Caching, oder die Webseiten können einmal aus ihren Quelltexten generiert werden und dann “statisch” online gestellt - und nur bei Änderungen aktualisiert - werden.

"Templates und Template Engines" vollständig lesen