Skip to content

Naives MVC

Seit 2014 setze ich sowohl bei neuen Websites als auch bei der “Renovierung” alter auf static site generators, also Generatoren für statische Webseiten, die aus Templates und Inhalten in verschiedenen Markups, aus Helper-Klassen und ggf. auch Datenbankinhalten HTML-Seiten generieren, die dann auf den Server hochgeladen werden. Das hat verschiedene Vorteile ggü. CMS oder selbstgeschriebenem Code: weil nur statisches HTML ausgeliefert wird, muss auf dem Server keine Scriptsprache wie PHP laufen, was die Last vermindert und vor allem auch aus Sicherheitsgründen angenehm ist, denn wo kein Code läuft, gibt es auch keine Sicherheitslücken. Außerdem bringen Generatoren wie Nanoc, mein bevorzugtes Werkzeug, ein ganzes Toolset wie Helper-Klassen für häufige Aufgaben und Filter für die verschiedensten Markup-Formate mit. So habe ich mich daran gewöhnt, dass ich das Grundgerüst einer Website in Form von Templates, meistens in HAML, erstelle, für die optische Gestaltung CSS-Frameworks wie Bootstrap nutzen kann, wobei ein LESS-Compiler automatisch mitkommt, und dass ich die eigentlichen Inhalte in Markdown (oder in einer Kombination aus HAML und Markdown) erstellen kann. Auf diese Weise habe ich mir einen gut funktionierenden Workflow geschaffen.

Das alles erfüllt seinen Zweck im Grundsatz sehr gut, auch für in begrenztem Umfang dynamische Elemtente: es genügt ja, die Webseitengenerierung in regelmäßigen Abständen neu anzustoßen, bspw. nachts, oder wenn man will auch stündlich. Nanoc kann man zudem aus Datenbanken speisen, und auch beim bloßen Umgang mit Textdateien lassen sich deren Metadaten auswerten, um bspw. die letzten Änderungen zu verlinken, Termine anzukündigen (aber nur, solange sie noch bevorstehen), Zeitangaben automatisch zu ersetzen (“Diese Seiten stehen schon seit x Jahren online”) und anderes mehr. Man kann auch mal ein PHP-Script dazwischenmixen, beispielsweise für ein Kontaktformular. Ihre Grenzen erreicht die Technik erst, wenn es um tatsächlich dynamische Seiten geht, also bspw. die Suche in Datenbanken (bei der man die Einträge nicht schlicht insgesamt vorab als statische Seiten erzeugen kann) - oder wenn ein Passwortschutz (jenseits von Basic Auth) oder ein Session-Management implementiert werden soll. Dann braucht es etwas anderes. Nur was?

"Naives MVC" vollständig lesen

Frameworks für HTML, CSS und Javascript

Vergangene Woche hatte ich einen Überblick über die vielfältigen Möglichkeiten gegeben, die in HTML 5 und CSS 3.0 enthalten sind - ohne dabei Javascript überhaupt anzusprechen. Heute möchte ich zeigen, wie man sich diese neuen Möglichkeiten zunutze machen kann, ohne zuvor monatelang Bücher zu studieren und auszuprobieren. :-) Kluge Leute haben nämlich bereits Frameworks zusammengestellt, eine Art Baukasten, aus dem man sich bedienen kann.

Im einfachsten Fall enthält dieser Baukasten CSS und Javascript, um Webseiten einigermaßen elegant und responsive zu gestalten, einschließlich der notwendigen Tricks für die Kompatibilität zu älteren Browsern. Meistens gehört dazu dann auch irgendeine Art von Grid, also einer Aufteilung, um mehrspaltige Seiten zu gestalten, deren Aufbau sich auf kleineren Bildschirmen anpasst - bspw. indem Spalten nicht nebeneinander, sondern übereinander dargestellt werden.

Umfangreichere Frameworks enthalten zusätzlich CSS-Formatierungen für Standard-Elemente wie eine Navigationsleiste, Tabellen mit wechselndem Hintergrund pro Zeile oder auch andere Gestaltungselemente.

Dazu kommen dann noch Templates oder Themes, die im einfachsten Fall Beispiele oder besser Vorlagen dafür darstellen, wie der Baukasten, das Framework, zur Anwendung gebracht werden kann. Oft enthalten sie auch weitere CSS-Definitionen über den Grundbestand des Frameworks hinaus.

Boilerplates und CSS-Frameworks

Ein “einfaches” Framework - hinter dem dennoch viel Arbeit und Erfahrung steht - ist bspw. HTML 5 Boilerplate. Es enthält - wie üblich - ein normalize.css, um die in Browsern enthaltenen Standard-CSS-Definitionen zu vereinheitlichen, Basis-Formatierungen und eine schlanke HTML-Beispielseite, dazu Modernizr, eine Javascript-Bibliothek, die austestet, welche Funktionalität der Browser unterstützt, und jQuery, quasi die Javascript-Standard-Bibliothek. Initializr ergänzt HTML 5 Boilerplate um einen Template-Generator, der eine Vorlage für ein neues Web-Projekt in drei verschiedenen Varianten erzeugen kann.

Bereits etwas umfangreicher (und aus deutschen Landen) kommt dann das “altehrwürdige” - 2005 begonnene - YAML-CSS-Framework in Version 4 daher. Sein Schwerpunkt liegt auf der Gestaltung flexibler Layouts (Stichwort responsive design), die es umfangreich unterstützt; dazu kommen - natürlich neben einer abgestimmten Typographie - Formular-Elemente und Buttons sowie Navigationselemente. Die CSS-Stylesheets werden dabei dynamisch via SASS erzeugt; YAML enthält aber auch eine fertig kompilierte, “statische” Version, die unmittelbar eingesetzt werden kann, ohne dass SASS als CSS-Präprozessor zum Einsatz gebracht werden müsste.

Ein anderer Ansatz, ein weiteres Framework ist Sassaparilla, ein massiv auf SASS und Compass aufsetzendes System, das allerdings an Dokumentation - soweit ich sehe - eher sparsam ist.

Große Frontend-Frameworks

Vertreter der Gattung sehr umfangreicher Baukästen sind bspw. (Twitter) Bootstrap, das mit Version 3 in sein fünftes Jahr geht, und das nur ein Jahr jüngere ZURB Foundation (aktuell in Version 5). Beide bieten eine weit über die “Grundzutaten” hinausgehende Auswahl an fertigen Bausteinen für Navigationselemente, Menüs mit verschiedenen Buttons und Dropdowns, farbige Hinweise und Einblendungen (sog. Modals), Fortschrittsbalken und so weiter, und so fort.

Ausgangspunkt ist natürlich auch hier ein flexibles Grid, mit dem die Webseiten responsive gestaltet werden können. Zudem ist aber auch eine reiche Auswahl an CSS-Formatierungen und Javascript enthalten, um eine Vielzahl von Gestaltungselementen einbauen zu können, die in der umfangreichen Dokumentation anhand von Beispielen dargestellt werden. Alle diese Beispiele können sofort per copy & paste in das eigene Webprojekt übernommen und angepasst werden-

Die Verwendung von CSS-Compilern wie LESS oder SASS ist nicht zwingend, weil auch Bootstrap eine fertig kompilierte CSS-Datei enthält; sie bietet aber noch umfangreichere Möglichkeiten, durch Änderungen an zentralen Variablen das ganze “look and feel” einheitlich für die gesamte Website anzupassen. Für den, der diese Compiler nicht verwenden kann oder will, bietet Bootstrap überdies einen Mittelweg: mittels Customizing kann mit allen vorhandenen Variablen experimentiert und dann eine entsprechend angepasste, statische CSS-Version erzeugt und heruntergeladen werden.

"Frameworks für HTML, CSS und Javascript" vollständig lesen