Was ist eine dynamische Webseite?
Diese Art von Webseiten können eine Vielzahl von Interaktionen bieten und sogenannten User-Generated-Content (UGC) bereit stellen, darunter fallen Kommentare für einen Blog oder der Warenkorb bei einem Onlineshop.
HTML war und ist der Grundstein für das heutige Internet für die grafische Darstellung von Webseiten. Hyper-Text-Markup-Language in ausgeschriebener Form bietet eine elementare Struktur für den Inhalt einer Webseite. Es gibt die Elemente (HTML-Tags) h1-h6 für Überschriften, p für Paragrafen und ein a Tag für Verlinkungen.
Alles was man für die Ansicht innerhalb des HTML-
bodytags braucht.
Natürlich gibt es noch Meta-Angaben, welche nicht dem Seitenbesucher angezeigt werden, da wie der Name schon sagt Meta-Informationen, eine abstrakte Angabe für Browser, Suchmaschinen und andere technische Bestandteile liefert. Um sich das ganze einmal ganz abstrakt vorzustellen schaut eine sehr vereinfachte statische Webseite in HTML-Format mit zwei Überschriften und zwei Paragrafen wie folgt aus:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>statische Webseite</title>
<meta name="description" content="...">
</head>
<body>
<h1>Überschrift</h1>
<h2>Unterüberschrift</h2>
<p>Paragraph 1 ...</p>
<p>Paragraph 2 ...</p>
</body>
</html>Kopiere das obige Beispiel in einen Texteditor und speichere das Dokument mit der Endung
.htmlund öffne anschließend das Dokument. In der Regel sollte das Dokument dann automatisch in einem Browser (Mozilla Firefox, Google Chrome oder Microsoft Edge) geöffnet werden.
Alternativ können auch Online Editoren für HTML wie CodePen verwendet werden und das Ergebnis sieht dann in etwa so aus:
See the Pen Demo HTML by Manuel (@Manuel-Steinberg) on CodePen.
Natürlich beinhaltet diese “Webseite” keine Style-angaben in Form von CSS und sieht relativ unspektakulär aus. Zusätzlich gibt es noch weitaus mehr als die verwendeten HTML-Elemente. Und um die Palette zu vervollständigen fehlt auch noch JavaScript, um den Seiteninhalt nachträglich zu manipulieren.
Zusammengefasst lässt sich bis jetzt folgendes festhalten:
- HTML für die Struktur der Webseite,
- CSS für das äußere Erscheinungsbild und
- JS für die Manipulation von Inhalt oder Struktur.
Also ist das obere Beispiele nun dynamisch oder statisch?
Eindeutig statisch, da keine Manipulationen stattfinden oder der Inhalt individuell für Seitenaufrufe angepasst wird.
Somit handelt es sich bis hier um eine rein statische Webseite ohne dynamisch erzeigten Inhalt. Unter dynamisch generierter Inhalt fallen zum Beispiel Anmeldung / Abmeldung zu einem Benutzerportal, Kommentare für einen Blog oder einen Warenkorb bei einem Onlineshop. Um diese statische Webseite in eine dynamische umzuwandeln benötigt es weitere Programmiersprachen.
Und für solche dynamischen Zwecke kommt dann gerne PHP (PHP HypertextPreprocessor“, ursprünglich „Personal Home Page Tools“)
Fun Fact: PHP ist ein rekursives Akronym das auf sich selbst zur Definition verweist.
Mit PHP, lassen sich beispielsweise Datenbanken integrieren, welche dann Texte oder Benutzerinformationen speichern. Anschließend könnte beim Laden einer PHP-Webseite die entsprechenden Angaben dynamisch aus einer Datenbank geladen werden und der Besucher wird nach erfolgreicher Anmeldung mit seinem Namen begrüßt oder sieht den aktuellen Inhalt des Warenkorbes auf einer weiteren Seite.
Das ist auch das Grundprinzip von Wordpress, einem der bekanntesten dynamischen Content Management Systemen (CMS). Bei jedem Seitenaufruf werden die entsprechenden Inhalte aus der Datenbank für die jeweilige Seite geladen und in HTML-Format dynamisch generiert und anschließend im Browser ausgegeben.
Etwa 15 Jahre nach dem Erscheinungsdatum von PHP kam NodeJS hinzu, eine Server-(Skript)-Sprache ähnlich wie PHP, welche sich die Vorteile von JavaScript verspricht und die Nachteile von PHP umgeht. Doch es soll weder heißen, dass NodeJS besser oder PHP schlechter ist – viel mehr kommt es auf den genauen Anwendungsfall an, welche Technologie für ein Projekt eingesetzt werden sollte.
Vielmehr soll es in diesem Artikel auch darüber gehen, welche Technologien für dynamische Webseiten zum Einsatz kommen können und welche Auswirkungen dies mit sich bringt.
Festzuhalten ist somit, das HTML und CSS allein das Grundgerüst für statische Webseiten bilden und mit Hilfe von JavaScript, NodeJS oder PHP dynamisch generiert werden können. Das gilt auch für Style-angaben in CSS-Dateien, denn diese können ebenfalls für beliebige Seitenaufrufe in Echtzeit generiert werden.
Betrachtet man zum Beispiel eine Webseite mit einem Blog. Auf dieser Webseite befinden sich demnach dutzende Seiten mit Artikeln, welche in der Regel kaum geändert werden, wenn diese erst einmal veröffentlicht wurden. Da stellt sich doch dann die Frage, warum für diesen Zweck ein dynamisches Content Management System wie Wordpress zu verwenden?
Die Antwort ist einfach: Einfachheit!
Doch eine ausführliche Antwort findet sich in dem weiterführenden Artikel:
Warum sich statische Content-Management-Systeme nicht gegen dynamische durchsetzen können.
Doch warum wäre der Einsatz von einem statischen Content Management System zu bevorzugen für einen Blog?
Die kurze Antwort: Performance und Nachhaltigkeit.
Bei statischen Webseiten ist bereits die gesamte Seite, beziehungsweise der gesamte HTML-Code inklusive der Texte bereits in einer .html-Datei auf dem Webserver gespeichert. Das bedeutet, dass lediglich eine Datei angefragt wird, ohne jeglicher Datenbankanfragen oder rechenintensiver Manipulationen. Und das ist auch Punkt, warum diese Vorgehensweise nachhaltiger ist, denn es werden nur beim generieren der Webseite mehrere rechenintensive Systeme involviert, welche dann eine fertige Webseite erstellen, die nur darauf wartet vom Besucher abgerufen zu werden.
Allerdings ist dies je nach Umfang der Webseite nicht immer so einfach, alles mit einer statischen Seite zu lösen. Wie man eine statische Seite dynamisch werden lassen kann, kann im folgenden Artikel gelesen werden: