Wer surft so spät durch Nacht und Netz,
es ist ein Webkraut, von Deadlines gehetzt.
Er hält die Maus in feuchten Händen,
zu wenig Zeit – wie soll das enden?

Webkraut, was birgst Du so bang Dein Gesicht?
Siehst Kunde, Du die Fehler nicht?
Invalider Code bereitet mir Qual…
Ach Webkraut, das ist mir doch egal!

Du armer Tropf, komm hör schon auf,
die Seite ist auch so gekauft,
Manch bunte Bildchen zeigt sie elegant,
und die Startseite hat ein schönes Gewand!

Oh Himmel hilf, hörest Du nicht,
was der Kunde mir da leise verspricht?
Sei ruhig, bleib' ruhig, sei kein Idiot,
wer braucht denn schon validen Code!

Willst feiner Webkraut Du online jetzt gehen?
Mag meine Besucher nicht warten sehen.
Denn die surfen sowieso mit dem IE,
da wäre der Code auch jetzt schon ok!

Mein Kunde, mein Kunde, das geht so nicht,
schau: Der W3C Validator zerbricht!
Mein Webkraut, mein Webkraut, ein paar Fehler nur,
dafür macht die Seite doch eine gute Figur.

Vergiss die Fehler, mich reizt nur die Gestalt,
und bist Du nicht willig, so brauch ich Gewalt!
Die Feinpolitur hat dir nichts genutzt,
Die Rechnung hab ich Dir gestutzt!

Dem Webkraut grauset's, er fürchtet die Pleite,
und lädt sie hoch, die unfertige Seite,
erreicht die Deadline mit Müh und Not,
den Kunden freut's – der Validator ist tot!

Zum Autor

Andreas Demmer ist Teamleiter der Online-Unit einer Werbeagentur. Er ist Linux-Evangelist, PHP- und Webstandards-Enthusiast und hat bereits zahlreiche Artikel in Fachmagazinen rund um das Thema Software-Entwicklung verfasst, u.a. im PHP Magazin. Seine Liebe zu den Webstandards spiegelt sich in seinen Moralpredigten über standardkonforme Websites mit unaufdringlichem Javascript wieder.

Bildtransparenzen bieten im Webdesign viele Einsatzmöglichkeiten. Monochrome PNG-Deko-Bilder "verschmelzen" beispielsweise über definierter background-color optisch mit den Hintergrundfarben von Webseiten: Ideal für verschiedene Website-Templates und in der Konzeptionierungsphase.
Wird dem Bild ein Link zugewiesen, ergeben sich interessante Hover-Effekte. Hier ein grundsätzliches Beispiel mit einer PNG-Datei und Änderung der Hintergrundfarbe.

Leider ist die Datenmenge bei PNG mit Alphakanal größer als bei JPEG- oder GIF-Bildern. Weder der IE5, noch der IE6 konnten PNG-24-Alphakanäle anzeigen, mittlerweile gibt es aber geeignete Javascript-Lösungen. Auch die dunklen PNG-Farben lassen sich vermeiden.

Ein Weihnachtsmotiv: Vorbereitung in Photoshop

Bild 1 zeigt die Vorlage für die spätere PNG-Datei (Bild 2). Zunächst wählen wir gezielt die gewünschten Bildbereiche aus. Eine bequeme Auswahlmöglichkeit mit Transparenzen bekommt man unter "Auswahl – Farbbereich auswählen…". Mit der Pipette klickt man auf den dunkelsten Bereich und definiert die Toleranz mit "200".

Mit "Befehlstaste-C" und anschließendem "Befehlstaste-V" erhalten wir ein neue Ebene mit dunklen Farbbereichen. Wir wählen zusätzlich eine helle Flächen aus, verkleinern die Toleranz auf "80" und generieren eine neue Ebene mit hellen Farbbereichen.

Zuletzt folgt die Lichthöhe, mit einem Auswahlrechteck eingegrenzt und einer Toleranz von "200". Die Ebenen auf transparentem Hintergrund werden nun über "Für Web speichern…" als einzelne PNG-24-Datei (Transparenz) im Web-Ordner abgelegt.

Transparenzeffekte mit CSS

Effekte werden per CSS als MouseOver-Aktion mit der Pseudoklasse :hover definiert. Dass und wie man in der Praxis solche Effekte auch für Tastaturbenutzer mittels :focus und :active zugänglich macht, zeigt der Beitrag von Tomas Caspers.

Beispiele

Drei Beispiele für Transparenzeffekte findet Ihr in unserem Testcase. Dort liegen auch die verwendeten Bilddateien zum Download bereit.

Transparenzeffekt: background-color

Beispiel 1 zeigt den Effekt über eine Änderung der Hintergrundfarbe beim Hovern. Die halbtransparenten roten Bereiche der Christbaumkugel erscheinen vor dem gelben Hintergrund orangefarben.

Transparenzeffekt: background-image

Beispiel 2 verwendet ein Hintergrundbild in der gleichen Größe wie die PNG-Datei. Per background-position: 0 -200px; zunächst versteckt, erscheint das Hintergrundbild beim Hovern mit background-position: 0 0; hinter der PNG-Datei. Der unruhige, türkisfarbene "Fleck" wirkt durch die PNG-Transparenz hindurch.

Transparenzeffekt: background-position und background-repeat

In Beispiel 3 wird der obere Teil der Hintergrundgrafik (background-repeat: repeat-x) versteckt und erst beim Hovern mit background-position: 0 -120px; am unteren Bildende gezeigt. Zusätzlich wurde dem PNG eine Klasse mit 2-Pixel-Rand zugewiesen, der in modernen Browsern beim Hovern eine andere border-color zeigt.

Zum Autor

Nils Pooker war im Kunstbereich tätig und arbeitet als selbständiger Webdesigner in Preetz (Schleswig-Holstein). Außerhalb des Webdesigns beschäftigt er sich mit Theorien zu Wahrnehmung und Kommunikation.

Sicher, Sprache lebt, Sprache entwickelt sich. Im Laufe der Jahrhunderte gehen einige Worte zum Beispiel schlichtweg unter; wer weiß etwa, dass das Wort »Poetenkasten« den Hinterteil des Kopfes meinte oder »doppelherzig« durch das einfachere »falsch« verdrängt wurde. Auf der anderen Seiten entstehen ständig neue Worte, sei es nun »googeln« oder »sitt«.

Vielleicht gilt die begrenzte Lebenszeit von Worten auch für Satzzeichen. Vielleicht sterben auch Satzzeichen irgendwann aus? Punkt, Komma und Gedankenstrich sind aktuell nicht gefährdet, aber ich nehme immer weniger Doppelpunkte und vor allem Semikolons – zu neudeutsch: Strichpunkt – wahr. Dabei finde ich es immer schade, sich in seinen Möglichkeiten zu beschränken. Unterbewusst benutzt ein Mensch ohnehin schon ziemlich wenig Worte, warum sollte ich mich auch bewusst um einige Satzzeichen bringen?

Möglicherweise leiden beide Satzzeichen nur unter allzu vorsichtigen Schreibern? Nach dem Motto: Lieber Punkt oder Komma benutzen, bevor man sich mit Semikolon oder Doppelpunkt auf unsicheres Terrain begibt. Dabei sind die offiziellen Regeln, die der Duden hergibt, nicht so kompliziert wie einige Kommaregeln.

Der Doppelpunkt

Laut Duden steht der Doppelpunkt vor:

• angekündigten wörtlich wiedergegebenen Äußerungen, Gedanken oder Texten;
• angekündigten Aufzählungen, Angaben, Erläuterungen, Titel usw.;
• Sätzen, die das Gesagte zusammenfassen oder eine Schlussfolgerung daraus ziehen.

Der Doppelpunkt ist noch einfach zu handhaben. Vor wörtlicher Rede setzt ihn noch ziemlich jeder. Vor Angaben und Aufzählungen sehe ich ihn immer seltener. In der Aufzählung oben habe ich ihn auch nur gesetzt, weil es möglich ist, nicht weil ich musste. Vor Schlussfolgerungen ist er jedoch so gut wie nie zu sehen.

Das Semikolon

Das Semikolon kann – ebenso im Duden nachzulesen – zwischen gleichrangigen Sätzen oder Wortgruppen stehen, wo der Punkt zu stark, das Komma zu schwach trennen würde. Es kann auch verwendet werden, um zusammengehörige Gruppen in Aufzählungen zu markieren.

Das Semikolon ist recht frei einzusetzen; wer kommt schon auf die Idee, groß zu diskutieren, ob zwei Sätze eher durch Komma, Semikolon oder Punkt getrennt werden müssen? Der Autor wird schon wissen, wie stark oder schwach er zwei Wortgruppen trennen will.

Wider das Vergessen

Und selbst, wenn man ein Satzzeichen falsch genutzt wird. Was soll’s? Immer noch besser, als ganz darauf zu verzichten, meine ich.

Für alle, die sich ab und zu einen Text aus den Ärmeln schütteln müssen oder sich in ihrem eigenen kleinen Blog austoben, mag sich der Newsletter des Duden lohnen. Dort steht dann ab und zu auch was über Doppelpunkte oder Semikolons.

Zum Autor:

Nicolai Schwarz arbeitet als selbstständiger Allrounder in Dortmund. Dort bastelt er hauptsächlich an Logos, Webseiten und Flash-Spielen für kleine Unternehmen. Dank journalistischer Erfahrungen textet er auch ab und zu, sei es für sein launiges Blog oder für Kunden. Er wartet gespannt auf den Tag, an dem es die Worte »irgentwie« und »ebend« in den Duden schaffen.

Ein Wireframe ist eine schematische Darstellung einer Webseite. Der Wireframe (dt.: „Gittermodell“) dient zur Veranschaulichung und Planung von Elementen, die auf einer Webseite vorhanden sein sollen. Es werden die grundlegenden Elemente einer Seite dargestellt, dies hat mit dem Design der Webseite zunächst einmal nichts zu tun. Folgende Abbildung zeigt wie ein Wireframe aussehen kann:

Das ist ein Wireframe, der die Position der Grundelemente der Webseite anzeigt. Ist man mit der Platzierung und der Größe der einzelnen Bereiche zufrieden, dann kann man im nächsten Schritt den Wireframe schrittweise verfeinern und Stück für Stück alle benötigten Elemente platzieren. Durch die verschiedenen Graustufen der einzelnen Bereiche können Elemente hervorgehoben werden und die gewünschte Wahrnehmungsreihenfolge auch schon im Wireframing manipuliert werden.

Vorteile von Wireframes

Zeitersparnis

Die Entwicklung eines Wireframes benötigt nur den Bruchteil der Zeit im Vergleich zu einem traditionellem Layout/Design. Man kann mehr Schritte order Layoutszenarien durchplanen in der gleichen Zeit. Es können auch mehr Layoutvorschläge ausprobiert werden.

Die Umsetzung eines fertigen Wireframes zu einem Layout benötigt viel weniger Zeit, da die Positionierung, Größe und Form vieler Elemente schon bestimmt wurde. Auch hier wird die Effektivität erhöht und die Falschplanung vermindert.

Bessere Kommunikation mit dem Kunden

Durch die kurzen Entwicklungszyklen kann der Kunde mehr in die Entwicklung eingebunden werden und fühlt ist daher auch stärker mit dem Projekt verbunden. Es kann schneller und einfacher auf die Bedürfnisse oder Wünsche des Kunden reagiert werden. Zeitraubende Fehlentwicklungen können so reduziert werden.

Auch direkt in Meetings mit den Projektbeteiligten und Kunden können so schnell Veränderungen vorgenommen werden.

Fehlplanungen

Da man sich jede Entwicklungsstufe vom Kunden absegnen lassen kann wird die Gefahr einer Entwicklung in eine falsche Richtung reduziert. Ist eine Entwicklungstufe des Wireframes abgenommen, kann mit einer detailierten Version begonnen werden.

Behauptet der Kunden das Layout nicht so beauftragt zu haben, kann er auf abgenommene Stufen der Wireframe Entwicklung verwiesen werden.

Nachteile von Wireframes

Wenn man sich nur auf Wireframes verlässt, kann man schnell wieder in ein reines „Kästchen-denken“ zurückfallen, weil man ja meist mit rechteckigen Formen arbeitet. Abhilfe könnte hier das Vorskizzieren von Erstentwürfen vor dem eigentlichen Einsatz von Wireframes helfen.

Auch kann der Kunde sich verzetteln und so die Entwicklung künstlich aufhalten. Dieses Argument wird aber dadurch entkräftet, da dies auch bei klassichen Design-Layouts passieren kann (deren Entwicklung meist ungleich länger dauert).

Fazit

Ich verstehe gar nicht wie wir ohne Wireframing auskommen konnte. Bei vielen Projekten wurde die Qualität der Website deutlich gesteigert, wenn wir Wireframing benutzt haben. Bei einem Projekt, wo keine Zeit für Wireframes verwendet werden konnte, hatten wir im Nachhinein mit erheblichem Mehraufwand zu kämpfen. Zuviel Zeit ging mit unzähligen Designprototypen verloren, weil uns die Wireframes fehlten.

Zum Autor

René Grassegger arbeitet seit 2000 als Webdesigner. Zur Zeit plant, designt und erstellt er Typo3 gestützte Webseiten für Unternehmen. Sein Credo ist: Webdesign aus Leidenschaft!

Bei der Einbindung von Flash gibt es ein paar Feinheiten und Stolpersteine, über die man Bescheid wissen sollte. Der normale, traditionelle Weg der Flasheinbindung ist eine Kombination der Elemente OBJECT, EMBED und PARAM. Der IE benötigt im OBJECT-Element Attribute, die eine Interpretation durch Mozilla unmöglich machen. Deshalb nutzt Mozilla das Element EMBED, das nicht Teil der W3C-Standards ist

Ansätze zur Einbindung via Javascript

Die normale Flasheinbindung ist also in der Gesamtschau invalide. Zudem benötigen wir auf alle Fälle ein Javascript, um das EOLAS-Problem im IE zu umgehen. Es handelt sich hierbei um ein Patent, das Microsofts Flasheinbindung als ActiveX-Objekt betrifft. Ohne den Javascript-Trick muss man erst ein Flashelement durch einen Klick "aktivieren" und kann erst dann einem darin enthaltenen Link folgen. Da man also auf Javascipt bei einem Großteil der Betrachter angewiesen ist lag es nahe, auch die Einbettung via Javascript vorzunehmen. Es gibt hierfür ein paar Ansätze, die alle dem Paradigma des "unobtrusive Javascript" folgen. Die bekanntesten Ansätze sind SWFObject und UFO – für jQuery gibt es ein Plugin.

Die kompakte Alternative: FlashReplace

Robert Nyman hat mit FlashReplace einen sehr kompakten Ansatz als Alternative veröffentlicht. Das Skript hat 2 KB und ist sehr einfach zu nutzen.

Man erstellt erst den alternativen Inhalt – meist ein Ersatzbild, seltener einen Ersatztext – für den Fall, daß kein Flash-Plugin oder eine alte Version installiert ist. Danach wird dieser alternative Inhalt via DOMScripting ersetzt. Dafür muss man FlashReplace entweder innerhalb einer window.load-Lösung aufrufen oder aber das Javascript nach dem alternativen Inhalt einbinden.

Der Aufruf kann folgendermaßen aussehen:

<p id="ersetzmich"><img src="keinflash.gif" alt="" /></p>
<script type="text/javascript">
    FlashReplace.replace("ersetzmich", "flashtest_v5.swf",
                                 "flash-id1", 100, 100, 5);
</script>

Im Funktionsaufruf wird zuerst die ID des zu ersetzenden Containers angegeben. Es muss sich hierbei tatsächlich um eine ID handeln, es kann keine Klasse sein. Es folgen Adresse und Name des Flashfiles und die ID, die der später entstehende Flash-Container haben soll. Danach werden Breite und Höhe sowie die Flash-Version angegeben. Ein Verzicht auf die Versionsangabe aktiviert die Default-Einstellung: Version 7.
Sollten dem Flashfilm ein paar Parameter mitgegeben werden müssen, beispiesweise mode="transparent" oder eine Variable, dann fügt man diese optionalem Parameter in geschweiften Klammern nach der Versionsangabe ein.

FlashReplace.replace("ersetzmich2", "flashtest_v5.swf",
"flash-id2", 100, 100, 5, {wmode: "opaque"});

Der Teufel kann bei der Anwendung eines solchen Skriptes allerdings im Detail stecken. Man muss darauf achten, daß beim Aufruf des Javascriptes das DOM schon geladen ist. Deshalb sollte man den Aufruf am besten wie oben gezeigt nach dem zu ersetzenden Container platzieren. Möchte man das Skript hingegen auslagern oder im Head platzieren, so sollte eine der zahlreichen window.onload-Lösungen genutzt werden.

Update aus aktuellem Anlass: Microsoft hat sich mit dem Patentinhaber geeinigt und angeündigt, daß der IE demnächst keine Aktivierung von Flashinhalten mehr benötigen wird. Das wird allerdings voraussichtlich erst ab April 2008 eintreten. Es steht zu vermuten, daß auch nur der IE7 und folgende Versionen betroffen sein werden.

Zum Autor

Jens Grochtdreis arbeitet als "Senior Frontend Developer" bei netz98 in Mainz. Neben seinem Weblog betreut er auch die CSS-FAQ und setzt sich mit den Webkrauts für moderne, standardkonforme Webseiten ein.

Beim Thema Kostenersparnis durch Webstandards wird von Standardistas meistens das Argument des schlanken Quellcodes vorgebracht, der zu geringeren Provider- und Traffic-Kosten führt. Das trifft zwar für umfangreiche und stark frequentierte Sites zu, das Argument greift dennoch zu kurz. Die tatsächliche Kostenersparnis macht sich vielmehr durch den erheblich reduzierten Abeitsaufwand bemerkbar, unabhängig vom Umfang einer Webseite.

Eine mit Frames, Tabellenlayouts und Font-Tags verseuchte Webseite erscheint kostentechnisch nur im Moment der Online-Stellung ohne erkennbare Nachteile. In allen Projektphasen davor und in den Änderungsphasen danach verursacht eine semantisch strukturierte, nach geltenden Webstandards erstellte Webseite weniger Aufwand und Kosten.

Auch im Webdesign gilt: Zeit ist Geld. Es ist die Summe gesparter Minuten, Stunden und Tage, die sich nicht nur während des Projekt-Workflows positiv auf die Kosten auswirkt. Die gesamte Lebensdauer einer Website ist ständigen Designveränderungen, Erweiterungen und Anpassungen unterworfen.

Freiheit, Kontrolle, Transparenz

Das wichtigste Kostenargument für semantischen Webseiten ist die strikte Trennung der Präsentation von den eigentlichen Inhalten der (X)HTML-Seiten. Diese Trennung bringt dem Webdesigner drei wichtige Vorteile:

1. Freiheit zur Gestaltung von Inhalt und Form
2. Kontrolle über den gesamten Workflow
3. Transparenz des Quellcodes

Vorteile in der Planungsphase

Der Webdesigner hat die Freiheit, zuerst die (X)HTML-Seiten nach den Anforderungen der Inhalte zu codieren, er kann sogar sämtliche Einzelseiten fertig stellen, ohne sich Gedanken über die Präsentation zu machen. CSS-Layouts ermöglichen sogar die Planung eines Projektes auf der Grundlage eines fertigen Designs.

Vorteile in der Konzeptionierungs- und Umsetzungsphase

Nur selten wird ein Website-Projekt vom Kunden von der Planung bis zur Umsetzung durchgewunken. Ergänzung von Elementen oder die Modifizierung einiger Attribute in der CSS-Datei sind oft in Minuten erledigt.
HTML-Prototyping und/oder CSS-Frameworks ermöglichen einen ökonomischen Workflow, selbst wenn der Kunde kurz vor dem Launch gestaltungsspezifische Änderungswünsche formuliert. Der Webdesigner verliert weder kostbare Zeit, noch die Kontrolle über das Projekt.

Vorteile in der Website-Pflege

Unschlagbar sind Webstandards in der Praxis von Aktualisierungen und Relaunches. Nicht alles kann schnell und problemlos geändert oder ergänzt werden, der Webdesigner kann sich aber auf die Inhalte konzentrieren. Die Transparenz des Quellcodes garantiert auch bei seltenen Aktualisierungen ein schnelles Einarbeiten in den Aufbau der Webseite.

Die korrekte Einhaltung der Webstandards ermöglicht mit überschaubarem Aufwand sogar die seitenübergreifende Ergänzung von IDs und Klassen, selbst ein komplettes Layout auf der Basis von float-Umgebungen lässt sich über die CSS-Datei verändern. Die Modifizierung des Designs ohne Änderung der Inhalte lässt sich sogar in wenigen Tagen realisieren. Zeit- und kostensparende Vorteile, die nicht einmal bei einem rudimentären Tabellenlayout vorhanden sind.

Zum Autor

Nils Pooker war im Kunstbereich tätig und arbeitet als selbständiger Webdesigner in Preetz (Schleswig-Holstein). Außerhalb des Webdesigns beschäftigt er sich mit Theorien zu Wahrnehmung und Kommunikation.

Spam nervt und es ist schwer, wirksame Maßnahmen gegen ihn zu ergreifen. Oft entstehen durch solche Maßnahmen neue Barrieren, wie beim Einsatz von Captchas. Doch man kann auch Techniken zur Erhöhung der Barrierefreiheit einsetzen, um Spammern das Geschäft schwerer zu machen. Die Lösung lautet: Man biete ein unnötiges Eingabefeld zum Ausfüllen an.

Bei der Bekämpfung von Spam denken viele Betreiber einer Webseite leider an Captchas. Doch dieser Weg ist ein trügerischer. Captchas nerven, werden immer unleserlicher, sind nicht barrierefrei zugänglich und außerdem von den Computern schon besser erfassbar als von Menschen.

Der hier skizzierte Lösungsansatz wird mittlerweile schon von einigen Betreibern von Webseiten seit Monaten erfolgreich eingesetzt und ist eine Kombination aus Techniken zur Erhöhung der Barrierefreiheit mit der Idee eines Honeypot.

Unnötiges Eingabefeld hinzufügen

Als ersten Schritt fügt man ein "unnötiges Eingabefeld" ein und beschriftet es:

<span class="invisible">
<label for="honig">Bitte in dieses Feld nichts eintragen, sonst wird der Forumseintrag nicht gespeichert:</label>
<input id="honig" type="text" name="honig"/>
</span>


Eingabefeld per CSS "verstecken"

Mit der selben Technik, mit der man Sprungmarken für Screenreader nutzbar macht und für sehende Benutzer optisch versteckt, zeichnet man nun in der CSS-Datei das Eingabefeld aus.

.invisible { position:absolute; left:-1000px; top:-1000px; width:1px; height: 1px; overflow:hidden; display:inline;}

Eingabe überprüfen

Bei der anschließenden Überprüfung der Formulardaten durch eine Skriptsprache (z.B. PHP), muss nur überprüft werden ob das Feld "honig" leer ist. Falls es leer ist akzeptiert man die Eingabe, anderenfalls verwirft man sie.

Bisher erfolgreich

Auch wenn im Kampf gegen Spammer nie klar ist, wie lange eine Abwehrtechnik effizient funktioniert. Bei dieser Technik wird eine Schwäche von Spammern ausgenutzt: Sie wollen alles ausfüllen. Denn Spammer arbeiten mit automatisierten Programmen, die jedes Eingabefeld ausfüllen, das ihnen in die Quere kommt. Ein solches Programm würde das Formularfeld ausfüllen, ein Sehender würde das Feld nicht sehen. Ein Screenreader hingegen würde eine Warnung vorlesen, das folgende Feld nicht auszufüllen.

Zum Autor

Martin Ladstätter ist leidenschaftlicher Redakteur bei BIZEPS-INFO im Behindertenberatungszentrum in Wien, beschäftigt sich seit vielen Jahren mit dem Thema barrierefreies Internet und ist daher auch in der österreichischen Plattform "accessible media – Zugang für alle" tätig.

Heutzutage verwenden wir JavaScript ziemlich anders als früher. Mit dem Aufkommen von Ajax und dem Hype um Web-Applikationen und Social Networks werden unsere JavaScripte immer größer und komplizierter. Da ist es nicht leicht, den Überblick zu behalten. Das wird vor allem problematisch wenn man die Applikation in einem einzigen, großen JavaScript erstellt. Persönlich bin ich sehr dafür, Applikationen in kleine, logische Bausteine aufzuteilen und diese dann mit der richtigen Logik bei Bedarf zusammenzusetzen. Das erlaubt das parallele Arbeiten mehrerer Entwickler am gleichen Projekt und führt ausserdem zu kleineren Applikationen, da Module per Bedarf nachgeladen werden. Hier erkläre ich die ersten Schritte, wie man eine solche Applikation erstellen kann.

Am Anfang steht das Hauptobjekt

Am allerwichtigsten ist es, den JavaScript Code durch „Namespacing“ vor dem Überschreiben durch andere Skripte zu bewahren. Das geht am einfachsten indem man den gesammten Code in einem globalen Objekt speichert, zum Beispiel meineTolleApplikation:

var meineTolleApplikation = {};

Alle Komponenten der Applikation werden Attribute dieses Objektes und man kann auch gleich von Anfang an testen ob DOM Scripting unterstützt wird oder Sprachdateien laden und so weiter.

Die Definition der Komponenten

Der nächste Schritt ist dem Hauptobjekt ein Komponentenobjekt hinzuzufügen. Darin definiert man die einzelnen Komponenten mit Namen, URL und einem Boolean der angibt ob die Komponente geladen ist oder nicht.

var meineTolleApplikation = {
    komponenten :{
        formular:{
            url:'formular.js',
            geladen:false
        },
        navigation:{
            url:'navigation.js',
            geladen:false
        },
        attachment:{
            url:'attachment.js',
            geladen:false
        },
        lightbox:{
            url:'lightbox.js',
            geladen:false
        }
    }
};

Technisch gesehen kann man das "geladen" Attribut auch weglassen, aber so ist es sauberer. Als nächsten Schritt ist es sinnvoll eine neueKomponente Methode anzufügen, die es erlaubt, dynamisch Komponenten zur Applikation hinzuzufügen. Das wird am einfachsten dadurch erreicht, indem man neue SCRIPT Elemente dem Dokumentenkopf hinzufügt.

var meineTolleApplikation = {
    komponenten :{
        formular:{
            url:'formular.js',
            geladen:false
        },
        navigation:{
            url:'navigation.js',
            geladen:false
        },
        attachment:{
            url:'galerie.js',
            geladen:false
        },
        lightbox:{
            url:'lightbox.js',
            geladen:false
        }
    },
    neueKomponente:function(komponente){
        var c = this.komponenten[komponente];
        if(c && c.geladen === false){
            var s = document.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('src',c.url);
            document.getElementsByTagName('head')[0].appendChild(s);
        }
    }
};

Dadurch kann man neue Komponenten der Applikation hinzufügen wenn diese noch nicht geladen sind:

if(!meineTolleApplikation.komponenten.galerie.geladen){
    meineTolleApplikation.neueKomponente('galerie');
};

Sind die Komponenten wirklich geladen?

Das ist allerdings nicht wirklich sicher, da wir nicht wissen ob die Skripte wirklich geladen wurden. Um das einwandfrei sicherzustellen ist das einfachste, jeder Komponente eine Zeile hinzuzufügen, die dem Hauptobjekt meldet, das sie geladen ist:

var meineTolleApplikation = {
    komponenten :{
        formular:{
            url:'formular.js',
            geladen:false
        },
        navigation:{
            url:'navigation.js',
            geladen:false
        },
        galerie:{
            url:'galerie.js',
            geladen:false
        },
        lightbox:{
            url:'lightbox.js',
            geladen:false
        }
    },
    neueKomponente:function(komponente){
        var c = this.komponenten[komponente];
        if(c && c.geladen === false){
            var s = document.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('src',c.url);
            document.getElementsByTagName('head')[0].appendChild(s);
        }
    },
    komponenteVerfuegbar:function(komponente){
        this.komponenten[komponente].geladen = true;
    }
}

Zum Beispiel sollte das galerie.js Skript sich als letzte Zeile beim Hauptobjekt anmelden:

meineTolleApplikation.galerie = function(){
    // [... other code ...]
}();

meineTolleApplikation.komponenteVerfuegbar('galerie');

Und wie teilen wir es den Anwendern mit das eine Komponente vorhanden ist?

Der letze Schritt ist eigentlich nur eine nette Maßnahme gegenüber den Entwicklern der Applikation. Wir fügen den Aufruf einer "lauscher" Methode hinzu, die den Namen einer jeden Komponente erhält, die geladen wurde:

var meineTolleApplikation = {
    komponenten :{
        formular:{
            url:'formular.js',
            geladen:false
        },
        navigation:{
            url:'navigation.js',
            geladen:false
        },
        galerie:{
            url:'galerie.js',
            geladen:false
        },
        lightbox:{
            url:'lightbox.js',
            geladen:false
        }
    },
    neueKomponente:function(komponente){
        var c = this.komponenten[komponente];
        if(c && c.geladen === false){
            var s = document.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('src',c.url);
            document.getElementsByTagName('head')[0].appendChild(s);
        }
    },
    komponenteVerfuegbar:function(komponente){
        this.komponenten[komponente].geladen = true;
        if(this.lauscher){
            this.lauscher(komponente);
        };
    }
};

Das erlaubt es Entwicklern die lauscher Methode zu schreiben, die darauf wartet das Komponenten geladen werden und dann auf diese reagiert:

meineTolleApplikation.lauscher = function(komponente){
    if(komponente === 'galerie'){
       zeigegalerie();
    }
};

Eigene Komponenten hinzufügen

Da das Hauptobjekt veränderbar ist können Entwickler das komponenten Objekt mit eigenen Komponenten erweitern und innerhalb einer lauscher Funktion andere abhängige Komponenten nachladen. Sagen wir zum Beispiel wir haben eine neuekomponente mit Daten und Beschreibungen in eigenen Dateien:

meineTolleApplikation.lauscher = function(komponente){
    if(komponente === 'neuekomponente'){
        meineTolleApplikation.neueKomponente('beschreibungen');
    };
    if(komponente === 'beschreibungen'){
        meineTolleApplikation.neueKomponente('daten');
    };
    if(komponente === 'daten'){
        meineTolleApplikation.neuekomponente.init();
    };
};
meineTolleApplikation.komponenten.neuekomponente = {
    url:'neue.js',
    geladen:false
};
meineTolleApplikation.komponenten.beschreibungen = {
    url:'beschreibungen.js',
    geladen:false
};
meineTolleApplikation.komponenten.daten = {
    url:'daten.js',
    geladen:false
};
meineTolleApplikation.neueKomponente('neuekomponente');

Wenn man seine Applikation auf diese Art und Weise plant hat man totale Kontrolle über den Status der einzelnen Komponenten und kann sogar CSS bei Bedarf nachladen.

Woher kommt diese Idee?

Falls Sie diese Idee mögen und sich fragen ob das auch schon mal in einer echten Applikation angewandt wurde möchte ich auf die Yahoo! User Interface Library weisen, im Speziellen die YAHOO_config Option und das globale YAHOO.js Objekt.

Anmerkung der Redaktion

Dieser Artikel ist die deutsche Übersetzung von Christians Beitrag für die Seite 24ways. Dieser Adventskalender bietet noch viele weitere interessante Beiträge, alle in englischer Sprache.

Zum Autor:

Christian Heilmann lebt seit 1999 im Ausland (USA, England, Indien) und arbeitet derzeit als lei(d|t)ender Entwickler bei Yahoo! in London, England. In seiner Freizeit bloggt er bei wait-till-i.com und schreibt Bücher für Apress und Friends Of Ed.

Die Suchmaschine Google ist im (Arbeits-)Leben der meisten Internetnutzer allgegenwärtig. Nicht jedem ist aber bekannt, dass die angebotenen Funktionen weit über das hinausgehen, was man im Normalfall nutzt. Manche der zusätzlichen Funktionen entdeckt man durch Zufall, andere blieben einem vermutlich für immer verborgen, könnte man sich nicht bei Google selbst (oder in diesem Artikel) darüber informieren.

Intelligente Treffer

Google liefert auf Suchanfragen mittlerweile weit mehr als nur die URLs von Internetseiten, die die gesuchten Begriffe enthalten. Die eingegebenen Suchbegriffe werden analysiert und Google bietet dem Nutzer je nach Zusammenhang oberhalb oder anstelle der Trefferliste noch Ergebnisse und/oder Deeplinks auf verschiedene populäre Seiten an. So liefert die Eingabe von Hamburg München z. B. den Link auf die Fahrplanauskunft der Bahn, natürlich genau mit dieser Verbindung.

Den Taschenrechner mal wieder unter dem Stapel der noch zu lesenden Zeitschriften vergraben? Kein Problem: 6*10 ins Suchfeld eingeben und schon ist die durchschnittliche Wochenarbeitszeit des modernen Freiberuflers berechnet. Die Aufgaben dürfen auch noch weitaus komplexer sein.

Die Umrechnung von Einheiten ist ebenso möglich; 22 inch in cm gibt die Bildschirmdiagonale des Arbeitsplatzrechners aus. Wichtig: Die Einheiten sind derzeit noch auf englisch einzugeben.

In gleicher Weise funktioniert auch das Konvertieren von Währungen. Leider wird nicht angegeben, wie aktuell der Kurs ist, aber um schnell zu erfahren, wieviel der iPod Nano in den USA kostet, reicht die Eingabe von 79 USD in EUR völlig aus.

Fakten und Definitionen

Ziemlich neu ist die Ausgabe von Fakten. Fläche von Deutschland oder Einwohner von Österreich liefert Daten aus gut strukturierten Seiten, wie z. B. der Wikipedia.

Oft aus den gleichen Quellen stammen die Definitionen, zu denen Google verweist. Auch hier das Beispiel: definiere CSS führt zum Wikipedia-Eintrag für Cascading Style Sheets, define:CSS liefert gleich eine ganze Liste von Definitionen zum Begriff.

Einschränken der Ergebnisse

Den meisten schon länger bekannt sind die Möglichkeiten, die Suchergebnisse durch Schlüsselwörter einzugrenzen. site:webkrauts.de vor oder nach der Eingabe schränkt die Treffer auf die Website der Webkrauts ein. filetype:pdf zeigt nur in PDFs gefundene Treffer. link:webkrauts.de zeigt Treffer, die auf die Webkrauts verlinken und inurl:2007 liefert nur Seiten, deren URL diese Jahreszahl enthält. Die Schlüsselbegriffe lassen sich auch kombinieren. Durch ein vorangestelltes Minus (eigentlich ein Viertelgeviertstrich) werden diese Schlüsselwörter negiert.

Beschreibungen zu den hier vorgestellten und einigen weiteren Funktionen sind unter der wenig überraschenden Überschrift Google-Funktionen zu finden.

Zum Autor

Stefan David wohnt im beschaulichen Bad Laer in der Nähe von Osnabrück und arbeitet beim Medienversandhändler jpc, wo er sich um Online-Marketing und Affiliate-Management kümmert. Nebenbei baut er für einen kleinen Kundenkreis Websites und schreibt viel zu selten in seinem eigenen Weblog und im Weblog von jpc.

Für transparente Grafiken im Netz kommen zwei Formate in Frage: gif und png. Beide bieten Vor- und Nachteile, die wir an einem einfachen Beispiel erläutern. Angenommen wir haben folgende Webseite (Abb 1).

Für einen besonderen Hinweis, etwa »Frohe Weihnachten«, wollen wir einen Button über die bestehende Seite legen (Abb 2).

Der Code

Wer es sich einfach machen will, kann den Button komplett in das Bild mit den Schneemännern einbauen und jenes Bild austauschen. In unserem Fall soll der Button absichtlich über dem Bild und dem Hintergrundmuster liegen.
Im HTML-File kann man dazu ganz am Ende etwa folgenden Code einfügen:
<div id="button"></div>

Dieses div wird per CSS positioniert:

div#button {
position: absolute;
top: 5px;
left: 50%;
margin: 0 0 0 -334px;
width: 121px;
height: 121px;
background: transparent url(pfad/button.gif) 0 0 no-repeat;
}

Der Button als gif

Aus Photoshop oder Illustrator lässt sich der Button als transparentes gif exportieren. Die Transparenz in einem gif ist allerdings beschränkt: Ein Pixel ist entweder transparent oder hat eine Farbe. In unserem Fall besitzt der Button am Rande mehrere Pixel, die eigentlich in die Farbe des Hintergrundes übergehen müssten (Abb 3). Beim gif lässt sich zwar eine Hintergrundfarbe angeben, in den die Randpixel übergehen sollen, aber es ist eben nur eine Hintergrundfarbe. Wählt man beispielsweise weiß als Hintergrundfarbe (Abb 4), verliert die Grafik ihren leichten Schatten und einige Pixel am Rand gehen ins Weiß über, sind aber nicht transparent . Bei mehreren Farben im Hintergrund sieht man ein krisseligen Rand (Abb 5).

Der Button als png

Für das png gibt es zwei Möglichkeiten beim Speichern: png-8 oder png-24. Das png-8 Format liefert – was die Transparenzen angeht – das gleiche Ergebnis wie ein gif. Das png-24 hingegen bietet eine sogenannte Alpha-Transparenz an. Damit ist es möglich, die Punkte am Rand mit einer echten Transparenz zu versehen. Die Original-Übergänge zum Hintergrund (Abb. 3) werden in diesem png beibehalten (Abb 6).

Damit ist das png-24 das ideale Format für unseren Button. Wir können die Hintergrundgrafiken austauschen, Farben auf der Website ändern oder den Button schnell mal ein paar Pixel verschieben – ohne unschönen Rand oder den Button neu anlegen zu müssen.

Der Haken

Leider zeigen ältere Internet Explorer alpha-transparente pngs nicht korrekt an. Hier gibt es zwei Möglichkeiten. Zum einen gibt es eine JavaScript-Lösung, die auch in den Internet Explorern 5.5 und 6 transparente pngs ermöglicht. Zum anderen bietet Fireworks einen interessanten Ansatz, der semi-transparente Farben in einem png-8 erlaubt.

Zum Autor:

Nicolai Schwarz arbeitet als selbstständiger Mediendesigner in Dortmund. Dabei gestaltet er am liebsten Corporate Designs, Webseiten oder Flash-Spiele für kleine Unternehmen. Ab und zu kümmert er sich um sein Blog.