Blogix

Seit TYPO3 4.4 werden beim Einfügen von CSS-Dateien mittels includeCSS Zeitstempel an den Dateinamen angehängt um die Eindeutigkeit zu garantieren und Cache-Problemen vorzubeugen. Die Konfiguration für ältere TYPO3-Versionen sieht wie folgt aus:

pdf_generator = PAGE
pdf_generator {
	includeCSS.pdf = fileadmin/templates/blogix/css/pdf.css
}

Die Ausgabe im Frontend von TYPO3 4.4 mit Zeitstempel sieht dann in etwa wie folgt aus:

<link rel="stylesheet" type="text/css" href="fileadmin/templates/blogix/css/pdf.css?1282730709" media="all" />

Der PDF Generator bzw. das verwendete html2ps können damit leider nicht umgehen und das CSS wird deshalb im PDF nicht verwendet. Abhilfe schafft man, indem man die Konfiguration um zwei Zeilen erweitert und eine Ersetzung mittels regulärem Ausdruck (RegExp) durchführt:

pdf_generator = PAGE
pdf_generator {
	includeCSS.pdf = fileadmin/templates/blogix/css/pdf.css
	config.pdf_generator2 {
		regexp_search1 = /pdf\.css\?([0-9]{10})/
		regexp_replace1 = pdf.css
	}
}

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 Expires-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.

Alternativ ist es auch möglich, den Expires-Header anhand der Dateiendung zu setzen:

<FilesMatch "\.(bmp|gif|jpg|jpeg|png|ico|css|js)">
	<IfModule mod_expires.c>
		ExpiresActive On
		ExpiresDefault "access plus 7 days"
	</IfModule>
</FilesMatch>

Diese Methode zeigt allerdings nur bei statischen Dateien Wirkung, weshalb bei z.B. dynamisch generierten Bildern die Mime-Type-Lösung gewählt werden muss.

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