Blogix

Statische Dateien (z.B. CSS, JS, Bilder) verfügen in der Standardkonfiguration von diversen Webservern über keine Expires-Header. Dies führt dazu, dass Dateien i.d.R. vom Browser nicht im Cache zwischengespeichert werden und stets eine Anfrage an den Server gesendet wird. Neben einer größeren Belastung für den Server führt es außerdem zu langsameren Ladezeiten der Webseite. Mit dem Apache-Modul mod_exprires – bei Debian z.B. standardmäßig mit Apache installiert – kann der Expries-Header gesetzt und dem Browser mitgeteilt werden, wie lange sich dieses Element nicht ändern wird. Hierfür fügt man der .htaccess-Datei folgende Zeilen hinzu:

<IfModule mod_expires.c>
	ExpiresActive On
	#ExpiresDefault "access plus 7 days"
	ExpiresByType image/bmp "access plus 7 days"
	ExpiresByType image/gif "access plus 7 days"
	ExpiresByType image/jpeg "access plus 7 days"
	ExpiresByType image/jpg "access plus 7 days"
	ExpiresByType image/png "access plus 7 days"
	ExpiresByType image/x-icon "access plus 7 days"
	ExpiresByType text/css "access plus 7 days"
	ExpiresByType text/javascript "access plus 7 days"
	ExpiresByType text/x-js "access plus 7 days"
	ExpiresByType application/javascript "access plus 7 days"
	ExpiresByType application/x-javascript "access plus 7 days"
</IfModule>

Die Verwendung von ExpiresDefault (hier nicht aktiviert) würde dazu führen, dass für jede ausgelieferte Datei ein Expires-Header gesetzt werden würde. Dies sollte bei dynamisch generierten Webseiten vermieden, da diese aus dem Browser-Cache und nicht vom Server geladen werden und somit nicht den aktuellen Stand widerspiegeln würden. Header für JPG-Bilder und JavaScript werden in diesem Beispiel mehrfach gesetzt, damit unterschiedliche Mime-Types aufgrund verschiedener Konfigurationen von Servern und Ausgaben von Skripts abgedeckt sind.

Um einzelnen Inhaltselementen (Content Elements) ein unterschiedliches Aussehen verpassen zu können gibt es in TYPO3 die Eigenschaft “Rahmen” (“Border” im englischen Backend ). Diese können mit ein paar Zeilen TypoScript einfach hinzugefügt werden. Zuerst muss in der “TSconfig” (Web > Seite; “Seiteneigenschaften bearbeiten”; Registerkarte “Optionen”) der Hauptseite (Rootpage) der neue Rahmen definiert werden:

TCEFORM.tt_content.section_frame {
  removeItems = 1,5,6,10,11,12,20,21
  addItems {
    100 = Roter Teaser
    110 = Blauer Teaser
  }
}

Standardmäßig vorhandene Rahmen werden mit “removeItems” entfernt, neue mit “addItems” hinzugefügt – in diesem Fall werden ein “Roter Teaser” mit der ID 100 und ein “Blauer Teaser” mit der ID 110. Es empfiehlt sich IDs über 100 zu verwenden, damit es zu keinen Überschneidungen mit den vordefinierten Rahmen kommt, sollten diese auch verwendet/benötigt werden.

Als nächstes muss im “Setup” (Web > Template; “Setup bearbeiten”) der Hauptseite das nötige HTML mittels TypoScript hinzugefügt werden, damit das Inhaltselement mit dem ausgewählten “Rahmen” dargestellt werden kann:

tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame
  
  100 = TEXT
  100.value = <div class="teaser-red"> | </div>
 
  110 = TEXT
  110.value = <div class="teaser-blue"> | </div>
}

Im CSS, das bereits eingebunden sein sollte, kann nun das Aussehen der beiden Teaser festgelegt werden:

div.teaser-red {
  border: 1px solid #ff0000;
  color: #ff0000;
}
div.teaser-blue {
  border: 1px solid #0000ff;
  color: #0000ff;
} 

Aufgrund der bevorstehenden Nationalratswahlen am 28.09.2008 möchte ich hier die Webseiten der fünf größten Parteien SPÖ, ÖVP, Grüne, FPÖ und BZÖ  unter die Lupe nehmen. Achten möchte ich dabei auf den optischen Eindruck, Strukturierung der Inhalte, die technische Umsetzung und die Größe/Ladezeit der Startseite.

Optischer Eindruck

1. BZÖ: Modern, einladende Farben, Bilder könnten besser aufgelöst sein
2. SPÖ: Recht modern, eher einladende Farben, Bilder gut aufgelöst
3. Grüne: Recht modern, stumpfe Farben, Bilder sehr gut aufgelöst
4. ÖVP: Wenig modern, zu viele Farben, Bilder sehr gut aufgelöst
5. FPÖ: Nicht modern, zu kleine Schrift, Bilder gut aufgelöst

Strukturierung der Inhalte

1. SPÖ: Alle Seiten selbst auf Unterseiten gut erreichbar, Suchfunktion vorhanden, gesuchte Informationen einfach auffindbar, Teaser auf der Startseite
2. FPÖ: Alle Seiten selbst auf Unterseiten gut erreichbar, Suchfunktion vorhanden, gesuchte Informationen einfach auffindbar, leider keine Teaser auf der Startseite sondern sehr viele Links
3. BZÖ: Alle Seiten gut erreichbar – Unterseiten leider immer nur über die Aufklappnavigation, keine Suchfunktion, gesuchte Informationen einfach auffindbar, beste Startseite
4. ÖVP: Unterseiten nicht gut erreichbar, keine Suchfunktion, gesuchte Informationen teilweise schwierig auffindbar, Teaser auf der Startseite
5. Grüne: Unterseiten nicht gut erreichbar, Suchfunktion vorhanden, gesuchte Informationen teilweise schwierig auffindbar, Startseite zu überladen

Technische Umsetzung

1. Grüne: Recht saubere XHTML-Umsetzung, kein Tabellen-Layout, suchmaschinen- und menschenfreundliche URLs, JavaScript hätte ausgelagert werden können, Quelltext gut leserlich
2. SPÖ: Unsaubere XHTML-Umsetzung, kein Tabellen-Layout, keine suchmaschinen- und menschenfreundlichen URLs, JavaScript hätte ausgelagert werden können, Quelltext gut leserlich
3. ÖVP: Unsaubere XHTML-Umsetzung, teilweise Tabellen-Layout,  suchmaschinen- und menschenfreundliche URLs, JavaScript hätte ausgelagert werden können, Quelltext schlecht leserlich
4. BZÖ: Veraltete und unsaubere HTML-Umsetzung, Tabellen-Layout, beinahe suchmaschinen- und menschenfreundliche URLs, JavaScript und CSS hätte ausgelagert werden können, Quelltext gut leserlich
5. FPÖ: Veraltete und fehlerbehaftete HTML-Umsetzung, Tabellen-Layout, keine suchmaschinen- und menschenfreundlichen URLs, JavaScript hätte ausgelagert werden können, CSS quasi nicht vorhanden, Quelltext gut leserlich, PopUp

Größe/Ladezeit der Startseite

1. SPÖ: 70 Anfragen, Antwort nach: 0.103 s, vollständig geladen nach: 3.022 s, 96.22 KB
2. BZÖ: 72 Anfragen, Antwort nach: 0.235 s, vollständig geladen nach: 4.381 s, 511.03 KB
3. FPÖ: 224 Anfragen, Antwort nach: 0.336 s, vollständig geladen nach: 8.794 s, 119.72 KB
4. ÖVP: 59 Anfragen, Antwort nach: 0.434 s, vollständig geladen nach: 8.784 s, 207.18 KB
5. Grüne: 202 Anfragen, Antwort nach: 0.787 s, vollständig geladen nach: 40.143 s, 325,98 KB

Die Web Developer Toolbar von Chris Pederick ist unverzichtbar für jeden Webentwickler. Sie ist kostenlos erhältlich und lässt sich in die Browser Firefox, Flock und Seamonkey integrieren. Bei der Web Developer Toolbar handelt es sich um eine umfangreiche Sammlung von nützlichen Werkzeugen, für die zuvor einige Plug-Ins installiert werden mussten, um die selben Ergebnisse erreichen zu können. So ist es damit möglich einige Einstellungen (Cache, Java, JavaScript,…) auf die Schnelle zu (de-)aktivieren. Weiters nützlich bei der Verwaltung von Cookies, Entwicklung von CSS, Erstellung/Änderung von Formularen und Einbindung von Grafiken. Mit einigen Einstellungen lässt sich die Seite so darstellen, wie sie eine Suchmaschine, oder auf Text-Browser angewiesene Menschen sehen würden. Sonstige Funktionen sind die Darstellungen mit unterschiedlichen Bildschirmauflösungen, hervorheben von Elementen, Benutzung von Lupe und Lineal. Leider konnte ich nur einen kurzen Überblick geben, denn die Möglichkeiten sind praktisch unendlich.