Feb 02

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.

Dec 29

Ein kleines JavaScript namens Flip stellt einzelne Buchstaben auf den Kopf. So bleiben Wörter bzw. Sätze für den Menschen zwar lesbar, werden aber von einem Computer nicht als das ursprüngliche Wort wahrgenommen. Es handelt sich nicht wirklich um gespiegelte Buchstaben, sondern es werden Satzzeichen gesucht, die dem Eingegebenen (allerdings auf den Kopf gestellt) sehr ähnlich sehen und durch diese ersetzt. Das würde sich z.B. hervorragend für die ?un?d?ä??q-??ds bei Formularen eigenen, oder wenn man beispielsweise Freunden eine Nachricht hinterlassen möchte, die nicht extra in einem geschützten Bereich abgelegt, dennoch bei üblicher Verwendung einer Suchmaschine nicht gefunden werden soll.

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(); } });
});
Aug 08

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.

Jan 29

Auf einigen Seiten werden externe Links anders gekennzeichnet als interne Links. Dies ist für viele Besucher sehr interessant, da somit sehr einfach erkennbar ist, wohin ein Link führt. Oft ist, aus welchen Gründen auch immer, ein Besuch einer externen Seite nicht erwünscht. Weiterlesen »