Kleines Snippet für Suchfelder

Montag, 29. Oktober 2007

In Suchfeldern findet man oft die Funktion, dass der Value des input-Feldes verschwindet sobald man hineinklickt. Diese Funktionalität ist aus einer Kombination der Attribute onblur und onfocus realisierbar:

<input name="search" value="Suchbegriff" onfocus="javascript:if (this.value == 'Suchbegriff') this.value = '';" onblur="javascript:if (this.value == '') this.value = 'Suchbegriff';" title="Suchbegriff"/>

 

XHTML im Browser überprüfen

Freitag, 12. Oktober 2007

XHTML hat den Vorteil, dass eine mit XHTML erstellte Web-Seite einfach auf ihre Gültigkeit überprüft, validiert, werden kann. Mit einem einfachen XML-Parser wird man zum Beispiel darauf hingewiesen, wenn man vergessen hat ein HTML-Tag zu schließen. XHTML im Browser überprüfen XHTML hat den Vorteil, dass eine mit XHTML erstellte Web-Seite einfach auf ihre Gültigkeit überprüft, validiert, werden kann. Mit einem einfachen XML-Parser wird man zum Beispiel darauf hingewiesen, wenn man vergessen hat ein HTML-Tag zu schließen.

<tr>
<td>asdf</td>
<td>muh<td> <!-- Fehler -->
</tr>

Wie man hier sieht, sind solche Fehler nicht immer leicht zu sehen. Hier könnte ein XML-Parser darauf hinweisen, dass das zweite TD-Tag nicht ordnungsgemäß geschlossen wurde. Wie brigen wir aber unseren Browser dazu, einen XML-Parser zu verwenden und uns unsere Fehler anzuzeigen? Die Lösung des Problems ist es, im HTTP-Header mitzuteilen, um was für ein Dokumenten-Typ es sich bei unserer Web-Seite handelt. Normalerweise ist dieser Dokument-Typ text/html. Für XHTML sollte application/xhtml+xml verwendet werden. Wir bedienen uns dazu PHP.

<?php
$charset = UTF-8;
header( 'Content-Type: application/xhtml+xml; charset=' . $charset );
echo '<?xml version=1.0 encoding=UTF-8?>';
?><!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Dieser Code am Anfang der PHP-Seite sorgt dafür, dass der Browser weis, dass es sich um XHTML handelt. Browser, wie Firefox und Opera, werden uns von nun an anzeigen, wenn unsere HTML-Seite fehlerhaft ist. Wenn einen anderen Zeichensatz als UTF-8 verwendet werden soll, müssen wir die Variable $charset entsprechend anpassen. Meistens verwendet man statt UTF-8 den Zeichensatz ISO-8559-1. Einen Haken hat die Sache allerdings noch. Der Internet-Explorer (zumindest in der Version 6) hat keinen Plan von XHTML. Wenn er den Dokument-Typ application/xhtml+xml sieht, weis er nicht, was er machen soll und bietet die Datei zum Download an, statt sie anzuzeigen. Wir müssen also überprüfen, ob unser Browser weis, was XHTML ist.

<?php
$charset = UTF-8; // Check if browser supports XHTML. IE does not!!!
$does_xhtml = stristr( $_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml' );
if ($does_xhtml) {
header( 'Content-Type: application/xhtml+xml; charset=' . $charset );
} else {
header( 'Content-Type: text/html; charset=' . $charset );
}
echo '<?xml version=1.0 encoding=UTF-8?>';
?><!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Noch ein weiteres Problem taucht mit dem Internet Explorer auf. Wenn er am Anfang des Dokuments <?xml version=1.0 encoding=UTF-8?> findet, verfällt er in den Quirks-Modus. Dieser Modus ist normalerweise dazu gedacht, um Webseiten anzuzeigen, die nicht standard-konform sind. Das Problem dabei ist, dass der Internet Explorer, dann auch sein eigenes Box-Model verwendet. Das bedeutet, dass die Abstände in CSS-Style-Angaben falsch dargestellt werde. Also unser Layout nicht mehr richtig angezeit wird. Um das zu verhindern geben wir die erste Zeile nur aus, wenn wir sicher sind, dass unser Browser XHTML kann. Unsere Seite sieht nun also folgendermaßen aus.

<?php
$charset = UTF-8; // Check if browser supports XHTML. IE does not!!!
$does_xhtml = stristr( $_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml' );
if ($does_xhtml) {
header( 'Content-Type: application/xhtml+xml; charset=' . $charset );
} else {
header( 'Content-Type: text/html; charset=' . $charset );
}
if ($does_xhtml) {
echo '<?xml version=1.0 encoding=UTF-8?>'
}
?><!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
<title>Neue Seite</title>
</head>
<body> Text </body>
</html>

Mit diesem Grundgerüst und eine XHTML-Kompatieblen Browser, wie z.B. Firefox, kriegen wir die meisten Fehler die wir machen, angezeit, was die Qualität unseres HTML-Codes deutlich erhöht. Manche Fehler bleiben aber auch für den XML-Parser unentdeckt.

 

Suchanfragen sind Stromfresser

Mittwoch, 10. Oktober 2007

Eine Suchanfrage bei Google verbraucht soviel Strom wie der Betrieb von einer Glühsparlampe in einer Stunde. Aus diesem Grunde stellt Strato nun alle Server auf billigen Öko-Strom um. Ein wichtiger Faktor ist der weiße Hintergrund, der etwa 74 Watt benötigt. Würde Google den Hintergrund schwarz färben so wäre der Verbrauch mit 59 Watt möglich. Zu diesem Ergebnis kam [url=ecoiron.blogspot.com/]EcoIron-Blogs[/url]. Das Ergebnis der Rechnerei wäre ein Stromersparnis von etwa 3000 Megawatt im Jahr. Was gibts da noch zu sagen...

 

Bilder umsonst

Mittwoch, 10. Oktober 2007

Wer auf seiner Homepage Bilder braucht, aber nicht viel (oder besser noch gar kein) Geld dafür bezahlen will kann sich mal auf [url=www.aboutpixel.de/]www.aboutpixel.de[/url] umsehen. Die AGB's drücken unmissverständlich aus, dass die Bilder sowohl für den kommerziellen als auch nicht kommerziellen Bereich kostenlos sind. Beim durchklicken sind mir eingie gute Bilder aufgefallen. Die Seite scheint sich über den Verkauf von Kunstdrucken zu finanzieren.

 

Kleine Helferlein für die Webentwicklung

Donnerstag, 4. Oktober 2007

Wer Websites erstellt muss Barrierefrei bleiben. Das heißt man muss die erstellt Seite auf Herz und Nieren prüfen. Um diese Testphase zu erleichtern gibt es sehr gute Tools sowohl für den Firefox als auch für den IE. Für den Firefox empfiehlt sich die Web Developer Toolbar, die mit dem w3C Validator verlinkt ist und sehr viele Bedienmöglichkeiten bietet [url=addons.mozilla.org/de/firefox/addon/60] Web Developer[/url] Für den IE gibt es die Web Accessibility Toolbar, die ein ähnliches Spektrum an Funktionalität aufweist [url=www.webforall.info/html/deutsch/aistoolbar.php] Accessibility Toolbar[/url] Desweiteren empfiehlt es sich Multiple IE zu installieren, welches Alle Internetexplorer auf Basis der vorinstallierten dll´s Emuliert. [url=tredosoft.com/Multiple_IE]Multiple IE[/url] [b]UPDATE:[/b] Ich habe jetzt vor kurzem noch ein sehr sehr gutes Tool gefunden. Es ist der Firebug. Ein Plugin für Firefox, dass sehr mächtig ist und ein erfolgreiches Debugging im Firefox ermöglicht. Man findet ihn am besten über die Add-On Funktion im Firefox

 

Lorem Ipsum – Generator und Infos

Dienstag, 2. Oktober 2007

Wer schon immer mal wissen wollte, was wirklich hinter dem Platzhalter Text Lorem Ipsum ... steckt, den wird diese Seite intersessieren... www.loremipsum.deWen es nicht interessiert kann auch einfach den guten Generator auf der Seite benutzen...