Jan 24

In der Standardkonfiguration von TYPO3 werden externe Links mit target=”_blank” versehen, entsprechen somit nicht mehr dem XHTML 1.0 Strict-Standard und überschreiben die Browser-Voreinstellungen des Benutzers. Anstelle von XHTML 1.0 Strict könnte man den DOCTYPE wechseln, z.B. XHTML 1.0 Transitional verwenden. Meine Meinung ist allerdings, dass man als Webentwickler nicht in die bevorzugten Einstellungen der Benutzer eingreifen sollte und deshalb sollte man unter anderem target=”_blank” nicht verwenden. In TYPO3 sind zahlreiche Einstellungen mittels TypoScript vorzunehmen, um (alle) target=”_blank” aus den Links zu entfernen. Folgende Einstellungen sind hierfür erforderlich und müssen in das “CONSTANTS”-Feld des Templates der Root-Page eingefügt werden:

PAGE_TARGET =
content.pageFrameObj =
styles.content {
	links {
		extTarget =
		target =
	}
	loginform.target =
	mailform.target =
	searchresult {
		resultTarget =
		target =
	}
}
Dec 14

Seit Internet Explorer 7 (IE 7) wird ClearType (Anti-Aliasing) unter Windows unterstützt, auf anderen Plattformen (z.B. Mac OS X) ist das standardmäßig der Fall. Das hat zur Folge, dass Schriften durch das Anti-Aliasing geglättet dargestellt werden, was besonders auf LCD-Monitoren zu einer besseren Lesbarkeit führt. Bei relativ kleinen Schriften tritt dabei allerdings das Problem im IE 7 auf, dass aufgrund des Anti-Aliasings so gut wie kein Unterschied zwischen normaler und fetter Schrift mehr besteht, wie dies dem folgenden Bild entnommen werden kann:

Anti-Aliasing

Grundsätzlich sollte man nicht in die (bevorzugten) Einstellungen eines Benutzers eingreifen und diesen selbst entscheiden lassen, ob er ClearType verwenden möchte oder nicht. Allerdings gibt es Kunden die die Vorzüge der Benutzer ignorieren, Hauptsache die Seite sieht in allen Browsern möglichst ähnlich aus, auch wenn die Schrift nicht so schön und nicht so gut lesbar dargestellt wird. ClearType kann man unter Windows mit ein paar Zeilen CSS sehr einfach unterbinden:

body {
  background: #fff;
  filter: alpha(opacity=100);
  opacity: 1.0;
}

Als Hintergrund kann selbstverständlich auch ein Bild oder eine andere Farbe gewählt werden.

Zuerst sollte man allerdings den Kunden darauf hinweisen, dass es sich bei ClearType um eine Benutzerpräferenz handelt und diese übergangen werden sollte. Die Einstellung hierfür kann man unter “Extras > Internetoptionen”, Registerkarte “Erweitert” unter der Gruppe “Multimedia” mit dem Punkt “Immer ClearType für HTML verwenden” festlegen (Ein Neustart des Browsers ist erforderlich):

Immer ClearType für HTML verwenden
Oct 21

Flash wird in letzter Zeit wieder populärer, so wird es auf beinahe jeder neugestalteten Startseite von Firmen (z.B. A1 (zeitweise auch ohne Flash), aon, Dell,…) eingesetzt um neueste Produkte zu präsentieren. Der von Flash generierte Code zur Einbindung des Films hat bis jetzt noch nie einem vom W3C verabschiedeten Standard entsprochen, seit der letzten Version von Flash wird zusätzlich auch noch JavaScript zum Einbinden verwendet – der generierte Code sieht dann in etwa wie folgt aus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>flash</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--Im Film verwendete URLs-->
<!--Im Film verwendeter Text-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("Diese Seite erfordert die Datei \"AC_RunActiveContent.js\".");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '676',
			'height', '405',
			'src', 'flash',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'flash',
			'bgcolor', '#ffffff',
			'name', 'flash',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'flash',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="676" height="405" id="flash" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed src="flash.swf" quality="high" bgcolor="#ffffff" width="676" height="405" name="flash" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>
</body>
</html>
Betrachtet man ausschließlich den “noscript”-Teil (der für die Einbindung ausreichend wäre), so findet man bereits hier zwei verschiedene Ansätze der Einbindung vor. Zum einen mittels “classid” über ActiveX, zum anderen mittels “embed”-Tag. Der “embed”-Tag stellt kein valides (X)HTML dar, ActiveX ist reine Windows-Technologie und grenzt somit andere Betriebssysteme (diese greifen auf das nicht valide “embed” zurück) aus.
Mit dem MIME-Type “application/x-shockwave-flash” kann allerdings dem Browser mitgeteilt werden, dass es sich beim vorhandenen “object” um einen Flash-Film handelt. Dieser weiß anhand einer hinterlegten Tabelle, wie er mit diesem Format (z.B. auch mit “text/plain”, “image/jpeg”,…) umzugehen hat. Zufälligerweise Glücklicherweise kann dem “object”-Tag der MIME-Type mitgeteilt werden. Die valide Lösung sieht dann wie folgt aus:
<object width="676" height="405" id="flash" data="flash.swf" type="application/x-shockwave-flash">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
</object>
Aus Gründen der Kompatibilität mit diversen Browsern muss der Dateiname sowohl im “object”-Tag (data) als auch mit einem “param”-Tag (movie) angegeben werden.
Sep 03

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
Aug 24

Im Web findet man sehr oft kleine JavaScript-Snippets die beim Aktivieren eines Textfeldes den Standard-Wert entfernen und bei leerem Feld diesen wieder einfügen. Der Code dazu sieht in etwa wie folgt aus:

<input type="text" name="text" value="Standard"
  onfocus="if (this.value == 'Standard') { this.value = ''; };"
  onblur="if (this.value == '') { this.value = 'Standard'; };" />

Das hat meiner Meinung nach zwei sehr große Nachteile: Zum einen geht der Standard-Wert automatisch verloren und man kann diesen nicht bearbeiten (sollte man diesen brauchen), zum anderen ist es nicht möglich das Feld leer zu lassen, außer der onblur-Event wird nicht eingefügt.

Abhilfe schafft die JavaScript-Funktion select() die den Text des Eingabefeldes markiert – der Code sieht dann in der einfachsten Form wie folgt aus:

<input type="text name="test" value="Standard" 
  onfocus="this.select();" /> 

Möchte man den HTML-Code frei von JavaScript-Funktionen halten, so kann man dies für alle Textfelder sehr einfach, in diesem Fall mit MooTools realisiert, bewerkstelligen:

window.addEvent('domready', function() {
  $$('input[type=text]').addEvents({ 'focus': function() { this.select(); } });
});