Firefox

Seiten-Validierung per Firefox

(msc) Der aus den Quellen von Net­scape auferstandene Firefox-Browser ist aus vielen Gründen populär. Die Väter von Firefox kennen die Wünsche der Surfer an einen Browser offensichtlich gut und haben ein Programm entwickelt, dass schlicht so funktioniert, wie viele das erwarten. Auch die Erweiterbarkeit spricht für Firefox. Via Plug-ins können spezielle Fähigkeiten nachgerüstet werden. Die installierten Erweiterungen werden – ein wesentlicher Unterschied zu Microsofts Browser – in einer Liste aufgeführt und lassen sich auch jederzeit wieder deinstallieren.

Beispielsweise lässt sich eine Funktion fürs Validieren von Webseiten in den Browser einbauen. Checky macht diese Tests im Menü «Extras» verfügbar. Rund vierzig Prüfprogramme stehen bereit: Unter anderem der W3C Mark­up-Check­, der die Wohlgeformtheit des HTML-Codes der geladenen Website unter die Lupe nimmt, zwei Check für die Stylesheets und Module, die die «Accessibility» analysieren und Auskunft darüber geben, wie gut die Seite für behinderte Surfer zugänglich ist. Checky wird über folgende Website installiert:

https://update.mozilla.org/extensions/moreinfo.php?id=165

Firefox

Noch mehr Entwickler-Plug-ins

(msc) Nebst Checky gibt es eine Reihe weiterer Extensions für Firefox. ColorZilla blendet eine Pipette ein, die auf Webseiten Farbwerte aufsaugt und als RGB- oder Hex-Wert anzeigt.

EditCSS ist eine Seitenleiste, die das aktuelle Stylesheet anzeigt und Modifikationen erlaubt. Änderungen an den Styles werden sofort umgesetzt, ein Reload der Seite ist nicht nötig. Es können auch fremde Websites mit anderen Stylesheets angezeigt werden, ohne dass die Seiten erst lokal heruntergeladen werden müssten.

CMS

Content-Management-Systeme evaluieren

(msc) Wer vor der Aufgabe steht, eine dynamische Website aufzubauen und dafür verschiedene Content-Management-Systeme (CMS) evaluiert, sollte unbedingt Opensourcecms.com einen Besuch abstatten. Diese Site erlaubt einen unverbindlichen Blick auf «einige der besten Open-Source-basierten CMS». Ausprobieren lassen sich also CM-Systeme, die auf PHP und MySQL basieren. Die CMS-Installationen finden sich im Menü unter «CMS Portals»; wobei man nebst einem Screenshot, den Kommentaren anderer Benutzer auch den Admin-Login findet, über den man sich anmelden und eigene Beiträge erfassen kann.

Allerdings sollte man beim Testen nicht allzuviel Herzblut ins Texten investieren: Die CMS werden alle zwei Stunden frisch installiert, wobei alle Inhalte verloren gehen – dadurch ist aber gewährleistet, dass man keine «verbastelten» Systeme ausprobiert.

Es gibt eine Möglichkeit, die CMS zu bewerten. Die aktuelle Rangliste steht unter «CMS Ratings» abrufbereit. Beim Verfassen dieses Artikels stand Mambo auf Platz eins. Zu Recht: Mambo bietet eine gefällige Oberfläche, vielfältige Funktionen und eine einleuchtende Bedienung.

www.opensourcecms.com

CSS

Bilder-Preload übers Stylesheet

(msc) Bekanntlich kann man in CSS Elemente über die Eigenschaft «Display» unsichtbar machen: Indem man dieser den Wert «none» zuweist. Dies ermöglicht es, dass beispielsweise beim Drucken einer Seite das (auf Papier logischerweise wenig hilfreiche) Navigationsmenü weggelassen wird. «Display» lässt sich aber auch zum Preload von Bildern einsetzen.

Der Preload von Bildern soll den Seitenaufbau beschleunigen, indem Bilder vorab in den Cache des Browsers geladen werden und bei Bedarf ohne lange Ladezeit zur Verfügung stehen. Der klassische Weg für den Bilder-Preload führt über Javascript. Somit funktioniert diese Methode auch nur auf Browsern, in denen Javascript aktiviert ist. Eine Alternative ist das Vorab-Laden von Bildern via CSS: Sie ist wiederum geeignet für die Verwendung mit neueren Browsern.

Der Trick soweit ist simpel: Im Style­sheet wird eine Regel für unsichtbare Bilder formuliert:

<style type="text/css">
.preload {display:none;}
</style>

Nun bindet man Aufrufe für die vorab zu ladenden Bilder auf der Hauptseite ein. Wichtig: Der Aufruf sollte am Ende der Seite stehen, damit der Preload erst einsetzt, wenn die Seite fast komplett beim Surfer angekommen ist. Und natürlich werden die vorab zu ladenden Bilder jetzt mit der Klasse «preload» ausgestattet:

<img src="RiesenHelgen.jpg" class="preload">

CSS

Geballtes CSS-Wissen

(msc) Die Website Selfhtml.org dürfte jedem ein Begriff sein, der seine Style­sheets von Hand optimiert. Das Online-Nachschlagewerk bietet nicht nur eine Referenz zu Stylesheets und Webdesign-Techniken, sondern auch eine Reihe von Tipps und Tricks. Seit Kurzem ist die Version 8.1 der nützlichen Online-Referenz im Netz. Ein Besuch der Site lohnt sich also unbedingt. (Für die Offline-Verwendung gibt es Selfhtml als rund 8,3 MB grosse ZIP-Datei: Sie ist auch im Publisher-Downloadbereich unter Web zu finden).

http://de.selfhtml.org

CSS

Feststehende Fusszeile ohne Frame

(msc) Frames bieten eine einfache Möglichkeit, in einer Webseite feststehende Inhalte einzublenden. Indem man die Navigation in einen separaten Frame packt, kann man den Surfern jederzeit die wichtigen Rubriken anbieten, die auch beim Herunterscrollen nicht verschwinden.

Allerdings bieten Framesets eine Reihe von Nachteilen, zum Beispiel beim Drucken oder Verlinken, sodass Profis gänzlich auf Frames verzichten. Allerdings wäre es oftmals trotzdem praktisch, feststehende Elemente à la Framesets zu haben.

Mit CSS können Elemente als feststehend definiert werden. Das bedeutet, dass die Elemente nicht mitscrollen, sondern immer an der gleichen Stelle im Fenster zu sehen sind, auch wenn der Surfer in der Seite nach unten oder links wandert. Dazu dient die Eigenschaft «position» mit dem Wert «fixed». Solche feststehenden Elemente können sich wahlweise am linken, rechten, oberen oder unteren Rand des Eltern­elements «andocken»; dazu wird die Startposition entsprechend mit left, right, bottom oder top angegeben.

Auf diese Weise ist es recht einfach, zum Beispiel einen Footer, d.h. eine feststehende Fusszeile in die Seiten einzubauen – und zwar ganz ohne Framesets. Grundsätzlich braucht es dazu eine Klasse für die Fusszeile, sie sich am unteren Rand des Darstellungsbereiches zeigt und 0 Pixel Abstand zu der Fensterkante einnimmt:

#footer {position:fixed; bottom:0px;}

Damit die Fusszeile keinen scrollenden Inhalt verdeckt (was zu abgeschnittenen Buchstaben führen könnte und nicht schön aussieht), wird der restliche Seitenbereich entsprechend unten verkleinert.

#scrolling_content {padding-bottom:3em;}

Frames lassen sich mit CSS elegant umgehen. Allerdings sind, wie häufig bei CSS, auch in diesem Fall Browser-Inkompatibilitäten zu konstatieren. Der Internet Explorer kennt position:fixed nämlich nicht. (Man darf ihn deswegen zu Recht als ignorant verschreien.) Es bleibt die Zuflucht zu CSS-Hacks: Durch speziell angepasste Stylesheets lässt sich auch Microsofts Browser dazu herab, Elemente per CSS feststehend anzuzeigen. Eine ausführliche Anleitung und eine Vorlage mit feststehender Titelzeile, Navigation und Footer gibts auf Selfhtml.org:

http://aktuell.de.selfhtml.org/tippstricks/css/footer