Alles in einer Seite
Ich bin ein Fan von PHP. Vor kurzem habe ich jedoch einen Blogbeitrag gelesen, dem ich an dieser Stelle widersprechen muss. Der Autor zeigt in seinem Beispiel, die Wiederwendung des Dokumentenkopfes und -fusses per include, welche mich früher auch überzeugt hat.
Heute bin ich aber der Meinung, dass man PHP nur benutzen sollte, wenn
- eine hohe Frequenz in der Veröffentlichung hat (z.B. bei einem Blog)
- dynamische Inhalte benötigt werden
- eine serverseitige Prüfung wünschenswert ist (z.B bei einem Formular)
Für Portfolios, Visitenkarten im Web, die im Wesentlichen nur Angebot, Öffnungszeiten u.ä. anbieten, genügen statischen Seiten oder eine statische Seite. Wenn die Fleischerei Müller nicht Wurstwaren über das Internet verkaufen will, ist der Inhalt der Webpräsenz überschaubar. Typischerweise würden Ladengeschäft sowie das Wurstangebot beschrieben und wie Herr Müller erreichbar ist.
Gerade dafür scheint doch der Blogbeitrag geradezu geschaffen zu sein.Er ist aber nur dann, wenn der Kopf und Fussbereich des Dokuments wirklich mehrfach gebraucht wird.
Spätestens seit Eric Meyer's sein Präsentationssystem S5 vorgestellt hat, ist es klar, dass man auch alle Inhalte in eine Seite packen und mit Javascript den Eindruck mehrerer Seiten erzeugen kann.
Als Beispiel, mag der Relaunch meiner kleinen Portfolioseite dienen. Eigentlich komme ich selten dazu, nebenberuflich etwas von meiner Zeit anbieten zu können. Es ist mehr eine Referenz von meinem (momentanen) Können und nie richtig fertig. Der Inhalt der Seiten hat länger Bestand. Ich hatte die Seite zuletzt vor 2 Jahren geringfügig verbessert. Insgesamt war das Design schon etwas angestaubt. Zudem wollte ich auch mein Wissen über SVG integrieren.
Die Struktur der Seite ist sehr einfach (HTML):
...
<ul id="nav">
<li><a href="#webdesign" title="Was gehört dazu?">Webdesign</a></li>
<li><a href="#grafik" title="Vektorgrafik heute nutzen!">Grafik</a></li>
<li><a href="#contact" title="Fragen und Impulse direkt an mich schicken!">Kontakt</a></li>
</ul>
...
<div id="webdesign">...</div>
<div id="grafik">...</div>
<div id="contact">...</div>
...
Mit ein bisschen CSS lassen sich die drei Inhaltsbereiche und die Navigation so stylen, dass auch ohne Javascript eine ansehnliche Webseite entsteht. Bei verfügbaren Javascript werden die einzelnen Contentberecihe, wie eigenständige Seiten präsentiert und der optische Eindruck einer mehrseitigen Präsenz entsteht.
Es gibt dort verschiedene Plugins für jquery, die mir alle ein wenig überdimensioniert erschienen. Hier der relevante Code (Javascript/ jquery):
//Alle Contentbereiche
var alldivs = '#grafik, #contact,#webdesign';
//Alle Inhaltsbereiche unsichtbar
$(alldivs).css('display', 'none');
//erster Inhaltsbereich sichtbar
$('#webdesign').css('display','block');
//erstes Navielement um Klasse erweitert
$('#nav a:first').addClass('active');
//für alle Link Klickfunktion
$('#nav a').click(function(){
//auslesen des Sprungziels
var active = $(this).attr("href");
//Entfernen der Klasse
$('#nav a').removeClass('active');
//dem aktuellen Link Klasse hinzufügen
$(this).addClass('active');
$(alldivs).css('display', 'none');
//Ausgewählter Content sichtbar
$(active).css('display','block');
//Focus vom Link nehmen
this.blur();
//Ausführen des Links verhindern
return false;
});
Möglicherweise geht es kompakter. Unter Umständen gibt es ein kurzes Aufblitzen der Gesamtseite.
geschrieben von Pawel