Neben den verschiedenen Content Managment Systemen gibt es weitere Methoden und Techniken, die man einsetzen kann, um die Arbeit bei großen und häufig aktualisierten Websites zu reduzieren. Auch wenn sie für den einen oder anderen nicht so elegant sind wie z. B. diverse Template-Engines möchte ich sie in diesem Bericht trotzdem vorstellen.
Ob dies jetzt sauberes (X)HTML und der Einsatz von CSS sei, Einsatz von SSI und PHP oder einfach nur die Erweiterungen diverser HTML-Editoren sei, alle haben Potenzial dem Webmaster das Leben zu erleichtern. Einige der Techniken, mit denen ich bereits Erfahrungen gemacht habe, werde ich hier kurz vorstellen.
- Worum geht es und was wird benötigt?
- Einsatz von CSS
- Frame-Technik
- Software-Includes
- SSI
- PHP
- Nachteil von Includes allgemein
- Fazit
- Weiterführende Links
- Fußnoten
Worum geht es und was wird benötigt?
Jeder Webmaster, oder zumindest die meisten, steht früher oder später vor dem Problem, daß die Seite immer größer wird und somit auch die Zeit steigt, die man investieren muß um die Seite zu pflegen, neue Elemente einzufügen, die Navigation zu erweitern etc.
Benötigt werden ein Browser und ein Code-Editor (Notepad, Phase 5, Scribe, Weaverslave & Co), von dem Einsatz von einem Textverarbeitungsprogramm würde ich abraten.
CSS – Cascading Style Sheets
Zwar paßt CSS beim ersten Betrachten nicht so unbedingt in die oben aufgezählte Liste, aber du wirst bald erkennen, daß CSS viel Arbeit spart und gleichzeitig hältst du dich bei dem Einsatz von CSS an die Webstandards und Empfehlungen von W3C. [2]
Du kannst alle! Formatierungen (Farbe, Größe, Positionierung etc.) von den Elementen in deinen (X)HTML-Dokumenten in eine zentrale CSS-Datei auslagern. Denn eigentlich ist (X)HTML eine Sprache zur Strukturierung des Textes und nicht für Formatierungen. [3]
Und wenn du dann mal auf die Idee kommen solltest z. B. die Hintergrundfarbe und die Schrifteigenschaften für deine 75 Seiten zu ändern, dann mußt du nur zwei kleine Änderung in der CSS-Datei vornehmen. Und wenn du das Layout bzw. das Grundgerüst deiner Seite in den sog. CSS-Layern [4] realisiert hast, dann kannst du mit kleinen Änderungen in der CSS-Datei sogar die ganze Anordnung und das Design deiner Seite ändern.
Wenn es aber darum geht z. B. oft vorkommende Dokumentabschnitte (z. B. Navigationselemente) einzufügen und zu ändern dann muß man diese auslagern und eine der folgenden Techniken einsetzen. Welche der Techniken du einsetzt hängt maßgeblich von deinem Wissensstand und den Eigenschaften des Servers ab auf dem deine Homepage ist. [5]
Der Nachteil an dem Einsatz von CSS ist, daß die alten Browser (NN4, IE4 etc.) Probleme damit haben. Aber wenn man diese von CSS “aussperrt” bekommen diese Seiten zwar kein Design, aber dafür den Inhalt. Bei den modernen Browsern ist die CSS-Unterstützung in großen Teilen sehr gut. Den einen oder anderen Fehler gibt es immer noch. Aber der Trend der Browserhersteller geht zu einer immer besseren Unterstützung für CSS.
Frames
Frames sind eine sehr einfache Möglichkeit um z. B. die gleiche Navigation auf allen Seiten zu erlauben. Die Frames waren und sind immer noch relativ beliebt, weil sie auf jedem Webspace [6] funktionieren und weil auch die Technik an sich sehr einfach ist, allerdings bringen sie auch einige Probleme, weiter unten gehe ich darauf ein.
Nehmen wir mal ein typisches Beispiel unter die Lupe. Es handelt sich dabei um eine Konstruktion aus drei Frames: ein Frame oben für das Logo bzw. Banner, ein linker Frame darunter für die Navigation und der Rest für den Inhalt. Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frame-set.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset rows="100,*">
<frame src="http://oben.html" name="oben" scrolling="no"
noresize="noresize" />
<frameset cols="175,*">
<frame src="http://linke-seite.html" name="linke-seite"
noresize="noresize" />
<frame src="http://inhalt.html" name="inhalt" />
</frameset>
<noframes>
Auf jeden Fall die wichtigsten Punkte der Seite hier unterbringen
</noframes>
</frameset>
</html>
Hiermit hast du das Grundgerüst eines Framesets. Oben hast du einen Bereich der 100 Pixel hoch ist und der sich über die ganze Seite ausbreitet. Hier kannst du dein Banner oder Logo unterbringen. Dieser Bereich ist in seiner Größe nicht veränderbar (noresize="noresize") und die Scrollbalken werden unterdrückt(scrolling="no"). Darunter auf der linken Seite ist ein Bereich von 175 Pixel Breite, der sich über die restliche Höhe ausstreckt. Auch dieser Bereich ist in seiner Größe nicht änderbar, aber die Scrollbalken tauchen je nach Bedarf auf. Der restliche Bereich ist für den Inhalt vorhergesehen. Jeder einzelne Bereich muß einen Namen bekommen. Das hat einen bestimmten Grund und zwar damit der Browser weiß in welchem der Fenster er den angeklickten Link aufmachen soll.
In dem Navigationsbereich würde ein Link, der sich in dem Inhalt-Fenster öffnen soll, folgendermaßen aussehen:
<a href="irgendeine-seite.html" target="inhalt">Punkt 1</a>
Soweit so gut, drei verschiedene HTML-Seiten fungieren als eine HTML-Seite. Man hat trotz verschiedener Inhalte immer die Navigation und das Logo im Blickfeld. Aber das war es auch schon mit den Vorteilen. Denn jetzt kommen die Nachteile und die haben es in sich.
Zwar sieht das oben genannte Konstrukt auf den ersten Blick wie eine Seite aus, aber es ist nicht eine einzelne Seite sondern ein Konstrukt aus drei von einander unabhängigen Seiten, die nichts von einander wissen. Das wirst du spätestens dann merken, wenn du mal versuchen solltest diese Seite als ein Lesezeichen abzulegen. Denn ein Frameset zeigt nicht die richtige URL [7] einzelner Unterseiten sondern nur die URL der Startseite. Somit gestaltet sich die Verlinkung auf die Unterseiten als sehr schwierig. Denn ich müßte ja erstmal herausfinden wie die Unterseite heißt, denn die Adreßzeile des Browser verrät dies nicht. Wenn ich dann die URL der Unterseite herausgefunden habe, diese verlinkt habe, werde ich feststellen, daß ich zwar auf die Unterseite gelangen kann, aber diese Unterseite steht da ohne die Navigation und ohne Logo.
Somit hat man nicht nur Probleme eine Unterseite direkt zu verlinken, sondern wenn man es geschafft hat, hat man Probleme weiterzukommen.
Es bestehen diverse Javascripte, die so was auffangen sollen. Nur das Problem von Javascript kennen wir. Javascript kann man ausschalten und es gibt leider noch zu viele Javascripte, die bei dem einen oder anderen Browser ihren Dienst verweigern.
Daher am besten auf jeder einzelnen Unterseite einen statischen Link zu der Startseite einfügen um zumindest wieder navigieren zu können.
Denn auch die Suchmaschinen haben Probleme mit einem Frameset. Es wird nur der NOFRAMES-Bereich und evtl. die aus dem Zusammenhang genommenen Unterseiten indiziert. Daher ist es sehr wichtig, daß der NOFRAMES-Bereich ordentlich gestaltet wird. Damit meine ich, daß Links zu den wichtigen Unterseiten dort untergebracht werden sollen.
Es besteht noch ein zusätzlicher und sehr wichtiger Nachteil für den Einsatz von Frametechnik. Denn in den Spezifikationen von XHTML 1.1 ist kein target="" Attribut für die Links vorhergesehen. Das heißt, jeder Link öffnet sich im gleichen Fenster, somit ist das Ende (aus der Sicht von XHTML 1.1) von Frames besiegelt.
Software-Includes
Hierbei handelt es sich um die Include-Technik der Freeware-HTML-Editoren. Include bedeutet auf deutsch einfügen. Einige der Editoren (Phase 5, Scribe, Weaverslave) haben die Möglichkeit bestimmte Abschnitte automatisch zu aktualisieren [8]. Nehmen wir mal an, du hast das Grundgerüst deines Layouts fertig mit allem drum und dran, mit allen CSS-Formatierungen etc, aber ohne Inhalt. Dann teilst du einfach in einem Texteditor in der Mitte das Template auf. Den oberen Teil speicherst du in einem separaten Ordner als oben.inc ab. Den unteren Teil speicherst du in dem gleichen Ordner als unten.inc [9]. Phase 5 bietet dir beim Abspeichern [10] automatisch das .inc Format an.
Jetzt gehst du her und fügst jeder Unterseite die Includes zu. Wichtig ist, daß die Unterseiten im “Rohformat” [11] sind. Also, über dem eigentlichen Inhalt fügst du die oben.inc und unter dem Inhalt die unten.inc ein. Das machst du, indem du auf “Einfügen” –> “Includedatei” gehst und die jeweilige Datei auswählst. Der jeweilige eingefügte Bereich wird vollständig eingefügt und ist von folgenden Zeilen eingeschlossen:
<!--INC:"oben.inc"-->
... der eingefügte Bereich ...
<!--/INC:"oben.inc"-->
Du wirst dich jetzt zu recht fragen: “Und was habe ich jetzt davon?”. Zuerst nicht viel, denn der ausgelagerte Bereich ist wieder da und zwar in voller Länge und hinzukommen noch jeweils zwei zusätzliche Zeilen.
Aber, durch die zwei zusätzlichen Zeilen weiß der Editor in welchem Dokument die Includes eingefügt worden sind, wo sie anfangen und wo sie enden.
Wenn du jetzt z. B. in der ausgelagerten oben.inc Datei eine Änderung vornimmst, sie abspeicherst und dann auf “Projekt” –> “Includes aktualisieren” gehst, kannst du die zu aktualisierten Dateien auswählen. Nach der Bestätigung werden die Includes auf den neuesten Stand gebracht.
Somit hast du eine kostenlose Möglichkeit deine Seite relativ einfach zu pflegen. Auch diese Technik funktioniert auf jedem Webserver. Der Nachteil an dieser Technik ist, daß du an bestimmte Editoren gebunden bist und daß man nicht vergessen darf 🙂 die Includes auch zu aktualisieren.
SSI – Server Side Includes
“Schon wieder Includes?”. Ja, aber hierbei handelt es sich um Includes, die auf dem Server und nicht von einem Programm eingefügt werden. Hinzukommen auch noch weitere Funktionen.
Zuerst verfährst du wie im obigen Beispiel (Beispiel mit Phase 5 Includes). Du teilst deinen Rohentwurf in zwei Teile und benennst sie oben.html und unten.html.
Und so könnte eine Unterseite aussehen:
<!--#include virtual="../inc/oben.html"-->
Inhalt, Inhalt, Inhalt
<!--#include virtual="../inc/unten.html"-->
Diese Datei mußt man als eine .shtml-Datei (z. B. index.shtml) abspeichern, damit der Server auch versteht, daß er diese Datei verarbeiten (parsen) soll.
Vom Prinzip her ist es sehr ähnlich wie das was die Freeware-Editoren auch können. Nur man muß die geänderten Includes nicht in jeder einzelnen Datei aktualisieren, da dies automatisch der Server übernimmt.
Der Vorteil an dieser Technik ist, daß nicht der ganze Quelltext einer Datei vorliegt, was zur Übersichtlichkeit beiträgt. Und auch beim Upload der geänderten Dateien entsteht weniger Verkehr, da die Unterseiten nur den Inhalt und nicht noch den Kopfbereich und die Navigation mithaben.
Ein weiterer Vorteil an SSI ist, daß auch ein Satz an verschiedenen Befehlen existiert. So ist es möglich das Datum der letzten Änderung des Dokuments auszugeben, den Dateinamen, die aktuelle Uhrzeit samt Datum etc. Hier ein paar Beispiele:
Letzte Änderung
- Letzte Änderung
<!--#flastmod file="beispiel.html"--> - Dateigröße anzeigen
<!--#fsize file="/unterordner/beispiel.html"--> - Dateiname und Pfad der aktuellen Datei
<!--#echo var="DOCUMENT_URI"-->
Der Nachteil an dieser Technik ist, daß man auch einen Webserver braucht, der SSI unterstützt. Ob dein Anbieter SSI unterstützt erfährst du entweder auf seiner Webseite oder mittels “Jugend forscht” *g*. Also einfach <!--#echo var="DOCUMENT_NAME"--> in eine Datei einfügen und sie als test.shtml abspeichern. Anschließend auf den Server hoch laden und im Browser aufrufen. Wenn im Browserfenster “test.shtml” auftaucht, dann unterstützt der Server SSI.
Ein weiterer Nachteil ist es, daß man die Änderungen nur online austesten kann, da eben ein SSI-fähiger Server benötigt wird, um die Dateien auszuführen. Es soll angeblich ein Programm geben welches u. a. einen SSI-fähigen Server simuliert, aber leider habe ich diesbezüglich noch nix gefunden.
PHP – Hypertext Preprocessor
Bei PHP [12] handelt es sich um eine sehr beliebte und erfolgreiche serverseitige Scriptsprache. Mit PHP kann man sehr viel machen, Gästebücher und Formmailer realisieren und in der Verbindung mit einer Datenbank [13] kann man auch Online-Shops realisieren. PHP eignet sich hervorragend für die Erstellung von Dynamische Webseiten.
Der Ausgangspunkt ist der gleiche wie in den zwei Beispielen vorher (“Includes” und SSI). Du teilst dein Grundgerüst wieder in zwei Teile auf und benennst sie oben.php und unten.php und speicherst sie in einem Unterordner z. B. inc ab.
Und jetzt fangen wir mit der einfacheren Möglichkeit, unser Vorhaben mittels PHP zu realisieren, an. Jeder Unterseite fügst du oben.php und unten.php in folgender Weise zu:
<?php include("unterordner/kopf.php"); ?>
Inhalt, Inhalt, Inhalt
<?php include("unterordner/fuss.php"); ?>
Und speicherst sie als Dateiname.php ab (Datei –> Speichern unter).
Richtig! Auch hier gibt es “Includes” ;-). Die werden dich nicht mehr loslassen *g*. OK, Spaß beiseite. Wie du siehst ist dieses Prinzip dem Prinzip von SSI und den Software-Includes sehr ähnlich.
Der Vorteil an dieser Technik ist der gleiche wie bei dem Einsatz von SSI: weniger Code in den einzelnen Dateien, weil das Grundgerüst ausgelagert ist. Dadurch sind die Dateien übersichtlicher und es entsteht weniger Datenverkehr beim Hochladen aktualisierter Dateien. Zudem lassen sich diverse PHP-Scripte viel einfacher aus einer schon bestehenden PHP-Datei aufrufen.
Es gibt aber noch eine weitere Möglichkeit wie man dies realisieren kann:
<?php
include("inc/oben.php");
?>
<?php
switch($variable){
case "seite1": include("seite1.php"); break;
case "seite2": include("seite2.php"); break;
case "seite2": include("seite3.html"); break;
....
default: include("index.php"); break;
}
?>
<?php
include("inc/unten.php");
?>
Es sieht komplizierter aus als es ist. Oben und unten erkennst du unsere alten Bekannten, die oben.php und unten.php. In der Mitte ist ein Konstrukt, welches auf einer Abfrage basiert.
Das Konstrukt fängt mit einem “Schalter” (switch) an. Diesem Schalter ist eine Variable ($variable) zugewiesen. Du kannst diese Variable auch umbenennen in z. B. $zeige. Und dann kommt die Abfrage mit case. Aber vorher mußt du alle deine Unterseiten (nur den Inhalt) in dieser Liste aufführen, damit das Script auch weiß welche Dateien existieren. Wenn die Abfrage als richtig bzw. als wahr eingestuft wurde, dann wird die jeweilige Datei eingefügt (includet). Mit break stoppt man die Anweisung, denn sonst würde das Script evtl. seine Arbeit fortführen.
Mit default richtest du die Standardeinstellung ein, also welche Unterseite als die Startseite angezeigt wird und welche Unterseite angezeigt wird, wenn man innerhalb dieses Konstruktes eine nicht existierende Unterseite aufrufen will [14].
Ein Link auf z. B. die seite1.php und seite2.php würde folgendermaßen aussehen:
www.deinedomain.de/index.php?zeige=seite1
www.deinedomain.de/index.php?zeige=seite2
Der Vorteil dieses Beispiels gegenüber dem obigen PHP-Beispiel ist, daß alles wirklich zentral verwaltet wird und es daher etwas weniger Arbeit gibt.
Aber ein Problem gibt es – und zwar sind es die Suchmaschinen. Denn außer Google indiziert (soweit ich weiß) keine andere Suchmaschine solche Seiten in denen Variablen auftauchen. Es gibt die Möglichkeit mittels Servereinstellungen (.htaccess) solche Links als “normale” Links zu maskieren.
Daher ist mein eindeutiger Favorit das erste PHP-Beispiel. Es ist nicht so kompliziert und dadurch, daß man den richtigen Pfad sehen kann (inkl. Den Unterordnern), hilft es bei der Orientierung (Stichwort: “sprechende URLs”). Denn ein Link www.deinedomain.de/thema1/seite.php ist viel aussagekräftiger als www.deinedomain.de/index?zeige=seite. Und bei www.deinedomain.de/themenbereich1/seite.php und www.deinedomain.de/thema1/seite2.php weiß man, daß sie in einem Zusammenhang stehen.
Nachteille von Includes allgemein
Mit dem Stichwort “sprechende URLs” sind wir schon bei dem ersten Nachteil der PHP-Includes aus dem 2. PHP Beispiel. Die Zuordnung einer Unterseite zum Thema und die Zuordnung der Unterseiten untereinander ist anhand der URL nicht mehr gegeben. Mittels der Einstellungen in der .htacces-Datei kann man solche URLs masskieren und als “normale” URLs ausgeben. Sowas macht auch diese Weblog-Software.
Der zweite große Nachteil bei allen Includes ist, wenn man wie in oberen Beispielen verfährt, daß auf allen Unterseiten der gleiche Seitentitel und die gleichen Metatags (Beschreibung, Keywords etc.) auftauchen. Dies ist für den Besucher, ob er schon auf der Website ist oder gerade über die Suchmaschine kommt, verwirrend. Zudem auch in puncto Suchmaschinenoptimierung auch nicht ideal.
Fazit bzw. meine Empfehlung
Auf jeden Fall lohnt es sich ein sauberes (X)HTML zu schreiben und Inhalt und Layout zu trennen (CSS-Layouts). Somit hält man sich an die Webstandards und man spart viel Arbeit und Zeit.
Wenn du nur einen Webspace zu Verfügung hast, der weder PHP noch SSI unterstützt, dann würde ich zu dem Einsatz von den sog. Includes der Freeware-Editoren greifen. Sonst würde ich SSI oder das erste PHP-Beispiel empfehlen. Wenn es dir nur darum geht auf allen Seiten die Navigation, Fußzeilen, Datum und/oder Zeit einzufügen würde ich zum Einsatz von SSI raten. Weil die Technik an sich ausgereift und leicht zu erlernen ist. PHP kann viel mehr als nur die Include-Technik u. a. auch Anbindungen zu Datenbanken herstellen, ist dafür aber auch schwerer zu erlernen.
Weiterführende Links
- Warum Frames out sind?
- Phase 5 Tutorial
- SSI -Bereich von DrWeb
- Eine kurze Einführung in SSI
- PHP-Einstieg auf DrWeb
- Einige anfängergerechte PHP-Tutorials
Fußnoten
- [1] Mit Includes werden in diesem Bericht die Eigenschaften von Phase 5, Scribe etc. gemeint.
- [2] Bericht zu CSS mit weiterführenden Links.
- [3] (X)HTML
- [4] Mit CSS hast du die Möglichkeit ein tabellenloses Design zu realisieren, indem du diese Bereiche mittels CSS positionierst.
- [5] oder Inhalt von anderen Dateien und Seiten einzufügen
- [6] Mit Webspace ist der Platz gemeint auf dem deine Homepage liegt.
- [7] URL = Unified Resource Identifier oder auch bekannt als Internet-Adresse
- [8] In diesem Bericht beziehe ich mich auf die Includes von Phase 5. Aber die Includes von anderen Editoren arbeiten nach einem ähnlichen Prinzip.
- [9] Die Namen oben.inc und unten.inc sind variabel. Die Endung .inc ist wichtig.
- [10] (“;Datei”; → “Speichern unter”)
- [11] Mit “Rohformat” meine ich hier, daß die einzelnen Unterseiten keinen üblichen Head- und Body-Bereich mehr brauchen, da die beiden Bereiche schon in den Includes vorhanden sind.
- [12] Bericht zu PHP mit weiterführenden Links.
- [13] Am häufigsten trifft man PHP und MySQL zusammen. Obwohl PHP die Unterstützung für viele Datenbanksysteme bietet.
- [14] Nehmen wir mal an du hast so ein PHP-Konstrukt fertig und jemand vertippt sich und tippt statt z. B. index.php index2.php ein. Dann kommt man automatisch auf die Startseite bzw. zu der default-Einstellung.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
[…] ein Styleswitcher ist, wie die Codes aussehen etc. wird im Rest des Berichtes erklärt 3) Große Websites verwalten Neben den verschiedenen Content Managment Systemen gibt […]