Die folgende Funktion erweitert den klassischen 'cat' Befehl so, dass er sowohl mit lokalen Dateien als auch mit URLs umgehen kann:

Die Funktion prüft mittels eines regulären Ausdrucks, ob das übergebene Argument eine URL ist. Falls ja, wird curl verwendet, um den Inhalt herunterzuladen und anzuzeigen. Bei normalen Dateien wird der Standard-cat-Befehl verwendet.

Beispiele für die Verwendung:

• cat datei.txt -> Zeigt den Inhalt einer lokalen Datei
• cat https://github.com/beispiel -> Zeigt den HTML-Inhalt der Website

Die Funktion könnt ihr einfach in eure ~/.zshrc einfügen und nach dem Neuladen der Shell sofort nutzen.

Ein kleiner, aber feiner Hack, der den Workflow beim Arbeiten mit Dateien und Webinhalten vereinfacht. Das ist Unix-Philosophie at its best: Bestehende Werkzeuge erweitern, ohne ihre ursprüngliche Funktionalität zu beeinträchtigen.

Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.

Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.

Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.

Gestatten, Pseudo-Elemente :before und :after

CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:

a:before {content: "Ich bin ein Link: "}

Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.

Wie entsteht nun der Schatteneffekt?

Wir nutzen den Umstand, dass der so hinzugefügte Text vom Browser als Block-Element behandelt wird, wenn dieser auch auf ein Block-Element angewandt wird. Er verhält sich also genau so, als wenn wir ein neues DIV-Element hinzugefügt hätten.

Wenn wir dieses Element nun noch mit einer Hintergrundfarbe versehen und entsprechend positionieren, können wir so einen passablen Schatteneffekt erzeugen. Wie genau dies aussieht, könnt ihr nun (endlich) hier sehen:

Da habt ihr es. Ist der Schatten nicht schön?

Jetzt werde ich euch noch schnell den dazu notwendigen Code zeigen und schon steht euch nichts mehr im Wege, um solche Schatten selbst in euren Seiten zu verwenden.

Hier das HTML:

Diese Box hat einen schönen Schatten. 
Wenn Ihr mit der Maus darüberfahrt, seht ihr auch, 
dass sich der Schatten der Größe der Box anpasst.

Und hier das entsprechende CSS:

      
#box {
  background-color: green;
  position: relative;
  width: 50%;
  text-align: center;
  margin: 0px auto;
  padding: 10px;
  color: #fff;
  font-family: sans-serif;
  margin-bottom: 20px;
}
#box:hover {
  font-size: 150%;
}
.shadowme:after {
  content: "";
  background-color: lightGrey;
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 100%;
  height: 5px;
}
.shadowme:before {
  content: "";
  background-color: lightGrey;
  position: absolute;
  top: 5px;
  right: -5px;
  width: 5px;
  height: 100%;
}

Ich wünsche Euch viel Spaß damit und bei Fragen oder Hinweisen könnt ihr gerne die Kommentarfunktion verwenden. :)

Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.

Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.

XBT - Der Cross-Browser Tooltip

Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.

Hier könnt ihr den Code sehen:

(function (window, document, undefined) {
    var XBTooltip = function (element, userConf, tooltip) {
        var config = {
            id: userConf.id || undefined,
            className: userConf.className || undefined,
            x: userConf.x || 20,
            y: userConf.y || 20,
            text: userConf.text || undefined
        };

        var over = function (event) {
                tooltip.style.display = "block";
            },
            out = function (event) {
                tooltip.style.display = "none";
            },
            move = function (event) {
                event = event ? event : window.event;
                if (event.pageX == null && event.clientX != null) {
                    var doc = document.documentElement, body = document.body;
                    event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
                    event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
                }
                tooltip.style.top = (event.pageY + config.y) + "px";
                tooltip.style.left = (event.pageX + config.x) + "px";
            }
        if (tooltip === undefined && config.id) {
            tooltip = document.getElementById(config.id);
            if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
        }
        if (tooltip === undefined && config.text) {
            tooltip = document.createElement("div");
            if (config.id) tooltip.id = config.id;
            tooltip.innerHTML = config.text;
        }
        if (config.className) tooltip.className = config.className;
        tooltip = document.body.appendChild(tooltip);
        tooltip.style.position = "absolute";
        element.onmouseover = over;
        element.onmouseout = out;
        element.onmousemove = move;
        over();
    };
    window.XBTooltip = window.XBT = XBTooltip;
})(this, this.document);

Das einzig wirklich benötigte CSS für den Tooltip sieht so aus:

.xbtooltip {
  display: none;
  position: absolute;
  background-color: #fff;
}

Dieser kann aber für jeden einzelnen Tooltip noch einmal separat überschrieben werden. Doch dazu später mehr.

Tooltip Beispiele

Kommen wir also zu ein paar einfachen Beispielen, wie man das XBT Tooltip Script einsetzen kann.

Einfacher Tooltip

Der einfachste mögliche Tooltip benötigt einen Link und ein DIV Element mit dem anzuzeigenden Inhalt für den Tooltip.

<a href="http://webmatze.de" onMouseOver="XBT(this, {id:'tt1'})">Ein normaler Tooltip...</a>
<div id="tt1" className="xbtooltip">...mit bereits vorhandenem Inhalt.</div>

Dem Tooltip Script wird also über eine Konfiguration welche in geschweiften Klammern steht, die id des Elementes übergeben, welches den Inhalt für den Tooltip enthält. Mehr ist hier nicht notwendig.

Das entsprechende CSS dazu kann z.B. so aussehen:

#tt1 {
      background-color: #00FFFF;
      color: green;
      padding: 3px;
      width: 120px;
    }

Und so sieht dann der Link mit dem Tooltip aus:

Ein normaler Tooltip...

Inhalt als Konfiguration übergeben

Wer nicht extra für jeden Tooltip ein extra DIV Element erstellen möchte, kann den gewünschten Inhalt für den Tooltip auch gleich als text übergeben. Das kann dann z.B. so aussehen:

<a href="http://webmatze.de"
   onMouseOver="XBT(this, {text: '...indem man ihn &lt;strong&gt;als Text&lt;/strong&gt; übergibt', className: 'xbtooltip'})">
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
</a>

Als Konfiguration wird also nicht mehr eine id übergeben, sondern ein beliebiger Text, der auch HTML Elemente enthalten kann. Über den Parameter className kann man dem Tooltip dann einen beliebigen Style zuordnen.

Und so sieht das Ganze dann aus:

Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...

Den Abstand des Tooltips anpassen

Wenn man möchte, dass der Tooltip nicht direkt neben dem Mauszeiger, sondern weiter entfernt angezeigt wird, kann man dies über die Konfiguration anpassen. Dazu gibt es die beiden Parameter x und y.

<a href="http://webmatze.de" onmouseover="XBT(this, {id: 'tt4', x: 50, y: 50})">Man kann den Abstand des Tooltips anpassen...</a>
<div id="tt4" class="xbtooltip">
...indem man eine Konfiguration übergibt
</div>

Somit wird der Tooltip nun jeweils 50 Pixel nach rechts und unten verschoben angezeigt.

Man kann den Abstand des Tooltips anpassen...

Funktioniert nicht nur bei Links

Natürlich kann man den Tooltip auch an andere HTML Elemente hängen. Es muss nicht immer ein Link sein.

<div style="position: relative; top: 0px; left: 150px; width: 200px; height: 100px; background-color: #e4e4e4;" 
  onmouseover="XBT(this, {id:'tt2'})">Das
    funktioniert auch mit DIVs statt mit Links...
    <div id="tt2" className="xbtooltip">...soweit der Browser onmouseover auf DIV Elementen unterstützt!</div>
</div>

Dies würde dann so aussehen:

In absolut positionierten Elementen funktioniert es auch

Mit dem alten Tooltip Script gab es immer Probleme mit Tooltips, die sich in anderen absolut prositionierten Elementen befanden. Hier wurden die Tooltips immer an einer falschen Position angezeigt.

Mit dem neuen Script ist dies nun auch kein Problem mehr:

<div style="position: absolute; top: 0px; left: 300px; width: 200px; height: 100px; background-color: #e4e4e4;">
    <a href="http://eventicus.de" onmouseover="XBT(this, {id:'tt3'})">Genauso auch mit Tooltips...</a>
    <div id="tt3" class="xbtooltip">...die sich in absolut positionierten Elementen befinden.</div>
</div>

Und so sieht's dann aus:

Fazit

Ich hoffe ihr könnt mit diesem neuen Script etwas anfangen und wünsche euch viel Spaß damit. Sollten euch doch noch Probleme auffallen, oder sollte es in einem Browser nicht richtig funktionieren, so könnt ihr mir dies wie immer in den Kommentaren mitteilen.

Ich denke auch das neue Script ist immer noch sehr kompakt und einfach zu verwenden. Vielleicht werde ich in Zukunft noch ein paar Funktionen nachrüsten, sofern ihr noch Wünsche habt, die unbedingt enthalten sein sollten.

Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.

Was brauche ich für meine eigene Webseite?

Um zu starten braucht es eigentlich nicht viel. Die wenigen Dinge, die man wirklich benötigt, habe ich hier mal in einer Liste näher beschrieben.

• Etwas Zeit
  Eine gute Homepage lässt sich nicht einfach in wenigen Minuten erstellen, darum sollte man sich auch die entsprechende Zeit nehmen.
• Einen Plan
  Man kann keine eigene Webseite erstellen, ohne vorher zu wissen, welches Ziel man eigentlich mit dieser Seite verfolgen will. Möchte man ein Tagebuch schreiben? Will man Informationen zu einem bestimmten Thema zusammentragen und aufbereiten? Will man sich selbst und die eigenen Projekte vorstellen? Oder möchte man eine Plattform für sich und seine Freunde schaffen? Die Möglichkeiten sind grenzenlos, aber man sollte zumindest grob das Thema der Webseite festlegen.
• Kenntnisse im Umgang mit HTML, CSS und JavaScript
  Man kann keine Homepage erstellen, ohne nicht zumindest die grundlegendsten Bausteine einer Webseite zu kennen. Mit HTML legt man die Struktur und den Inhalt einer Webseite fest. Mit CSS kann man das Aussehen der einzelnen Elemente einer Webseite kontrollieren und mit JavaScript kann man die Funktionalität der eigenen Seite erweitern. Aber erst die Kombination aus allen Zutaten ergibt eine gute Webseite.
• Eine eigene Internetadresse
  Ohne eine eigene Domain kann niemand auf die liebevoll erstellten Inhalte zugreifen. Der Domainname ist die Adresse einer Seite im Internet. Daher sollte man sich einen sprechenden Namen für die eigene Homepage ausdenken. Ob nun www.willies-kochrezepte.de oder www.webmatze.de - solange der Name noch nicht vergeben ist, kann man fast jeden Domainnamen registrieren lassen.
• Webspeicherplatz
  Damit man die erstellen HTML Seiten auch für Jeden zugänglich im Internet ablegen kann, benötigt man etwas Speicherplatz. Diesen Webspeicherplatz oder auch Webspace genannt, wird man sich meistens bei professionellen Webhostern anmieten. Die Kosten dafür sind überwiegend sehr niedrig. Es ist auch möglich, eigene Webserver zu verwenden, doch für eine kleine Homepage reicht meistens weniger aus.

Das waren auch schon die wichtigsten Zutaten für die eigene Homepage. Wie man sehen kann, braucht es nicht wirklich viel, um eine eigenen Webseite zu erstellen. Doch für jemanden, der bisher noch nie eine Homepage erstellt hat, können einige der Punkte trotzdem eine Hürde darstellen.

Schritt für Schritt zur eigenen Webseite

Gerade für diese Anfänger - und dass meine ich nicht abwertend, denn jeder hat einmal an diesem Punkt begonnen - werde ich in den nächsten Tagen und Wochen in verschiedenen Beiträgen auf die einzelnen oben angesprochenen Punkte näher eingehen. Am Ende wird dann jeder eine Schritt für Schritt Anleitung für die erste eigene Homepage zur freien Verfügung haben.

Auf folgende Punkte werde ich dabei detaillierter eingeben:

• Wie man das richtige Thema für die eigene Homepage wählt
• HTML, CSS und JavaScript - Das Grundgerüst einer Webseite beherrschen
• So findet man den passenden Domainnamen für die eigene Webseite
• Wie wähle ich den richtigen Webhoster für meine Homepage aus?
• Wie bekomme ich mehr Besucher für meine eigenen Webseite?

Ich freue mich schon darauf und hoffe, dass der Eine oder Andere von Euch mit Hilfe dieser Anleitungen seine erste eigene Homepage erstellen können wird.

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)

• Start
• Informationen
  • Webseiten erstellen
    • HTML
    • CSS
    • Programmieren
      • JavaScript
      • PHP
      • Java
      • ActionScript
      • Ruby
    • Flash
  • Multimedia
    • Grafiken
    • Videos
• Suchen
  • Google
  • Yahoo
  • MSN
• Über

Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per CSS angepasst werden kann.

Der HTML Code

Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:

	
Start
	
Informationen
		

			
Webseiten erstellen
				

					
HTML
					
CSS
					
Programmieren
						

							
JavaScript
							
PHP
							
Java
							
ActionScript
							
Ruby
						
					
					
Flash
				
			
			
Multimedia
				

					
Grafiken
					
Videos
				
			
		
	
	
Suchen
		

			
Google
			
Yahoo
			
MSN
		
	
	
Über

Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.

Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.

Der CSS Code

Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)

ul.cssmenu {
	position: relative;
	display: block;
	margin: 0px;
	padding: 0px;
}
ul.cssmenu ul {
	position: relative;
	display: none;
}
ul.cssmenu li {
	position: relative;
	display: inline;
	float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
	font-family: arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none;
	text-align: center;
	display: block;
	width: 100px;
	height: 20px;
}
ul.cssmenu li:hover > a {
	background-color: #666666;
	color: #FFFFFF;
	font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
	position: absolute;
	top: 20px;
	left: -40px;
	display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
	top: 0px;
	left: 110px;
}
ul.cssmenu li li a {
	width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
	color: #000000;
	background-color: #e4e4e4;
}
ul.cssmenu ul a {
	background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
	background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
	background-color: #b4b4b4;
}

/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
	_text-indent: 10px;
}
ul.cssmenu ul {
	_display: inline;
	_margin-left: 0px;
	_text-indent: 20px;
}
ul.cssmenu ul ul {
	_text-indent: 30px;
}
ul.cssmenu ul ul ul {
	_text-indent: 40px;
}
ul.cssmenu li {
	_float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
	_text-align: left;
	_width: 150px;
}
ul.cssmenu a:hover {
	_font-weight: bold;
	_background-color: #666666;
}

Fazit

Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

Laut HTML 5  können nicht relevante Elemente
 ausgeblendet werden, indem ihnen das Attribut irrelevant
 zugewiesen wird. HTML 5 wird noch
 nicht von allen aktuellen Browsern unterstützt.
 Irrelevante Elemente sind solche, die noch nicht, oder nicht
 mehr relevant sind. Das Attribut sollte auf solche Abschnitte
 angewendet werden, die im aktuellen Kontext nicht relevant
 sind, es aber später durchaus wieder werden können.

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

function hide(elementId) {
	var el = document.getElementById(elementId);
	el.setAttribute('irrelevant',true);
}
function show(elementId) {
	var el = document.getElementById(elementId);
	el.removeAttribute('irrelevant');
}

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

Warum ich solch eine Schwachsinn schreibe? Okay, bevor mir jemand die Tastatur aus der Hand reißt... Was ich mit der Überschrift eigentlich sagen wollte: Firefox unterstützt in der Version 3 nun endlich auch Sollumbrüche in Wörtern. Und zwar solche, bei denen der Trennstrich nur dann angezeigt wird, wenn der Umbruch wirklich benötigt wird. Diese "bedingten Trennstriche", oder im Englischen auch "soft hyphen" genannt, werden durch das Zeilenumbruch-Entity ­ im HTML Text definiert.

Im folgenden Beispiel wird das vielleicht deutlich:

Soll­um­brü­che können in Wörtern eingefügt
 werden, welche ohne bedingte
 Zei­len­um­brü­che nicht richtig umbrechen

Soft Hyphen = ­ = schüchtern

Gut, damit hätten wir das Rätsel auch geklärt. Aber "schüchtern" finde ich in diesem Zusammenhang gar nicht mal so unangebracht. Denn was auf dem ersten Blick vielleicht verlockend erscheint, nämlich den bedingten Trennstrich in jedem Wort eines Textes unterzubringen, ist natürlich auf dem zweiten Blick mehr als bedenklich.

Damit würde man den HTML Code erheblich aufblähen und die Leserlichkeit von Text im HTML deutlich erschweren. Wer solch einen Text später nach bearbeiten muss, wird sicherlich nicht viel Freude an dieser Arbeit haben.

Darum sollte man den bedingten Trennstrich nur "sehr schüchtern" anwenden, also nur an Stellen, bei denen es sonst zu Problemen in der Darstellung kommen könnte. Ich könnte mir z.B. Label Elemente in einem Formular vorstellen, welche nur eine bestimmte Breite haben sollen und wo man damit zu lange Wörter zum Umbruch zwingen kann, ohne dass das Layout des Formulars zerschossen wird. Hier findet Ihr ein Beispiel dafür, wie man ansprechende Formulare erstellt. Das Gleiche könnte auch auf Spaltenüberschriften einer Tabelle zutreffen, welche nur eine bestimmte Breite haben sollen.

Fazit

Ich finde es gut, dass Firefox 3 nun auch bedingte Trennstriche unterstützt, zumal der IE dies schon seit einigen Jahren kann. Weise und sparsam angewendet, können sie sicherlich sehr hilfreich sein. Doch im Netzt gibt es auch Bedenken darüber, was die Verwendung von bedingten Trennstrichen angeht. Was haltet Ihr davon?

Gerade weil Formulare solch ein wichtiger Bestandteil einer Seite sind, sollte man auch beim Design eines Formulars an den Anwender denken. Klar strukturierte Formulare mit sinnvollen Bezeichnungen und Beschreibungen der einzelnen Felder helfen dem Nutzer dabei, die benötigten Daten schnell eingeben zu können. Aber auch beim HTML Code der Formulare sollte man sich an allgemein gültige Regeln halten, damit diese z.B. auch von behinderten Anwendern leicht ausgefüllt werden können.

Formulare richtig aufbauen

Um ein Formular erstellen zu können, sollte man sich zuerst alle benötigten Daten notieren und sich überlegen, wie man diese als Formularfeld darstellen kann. Namen oder Emails wird man am besten als Texteingabefeld darstellen. Für Beschreibungen oder größere Texte eignet sich die Textarea besser. Eine Auswahl, z.B. ob der Nutzer Mann oder Frau ist, lässt sich sowohl durch Radiobuttons und auch als Auswahlliste darstellen. Mit Checkboxen fragt man schließlich Daten ab, die keine Texteingabe erfordern, sondern nur ausgewählt werden müssen.

Alle verschiedenen Felder sollten möglichst durch ein Label gekennzeichnet werden. Wenn notwendig kann man dies noch durch ausführlichere Beschreibungen ergänzen, wenn sich die benötigten Daten nicht durch ein oder zwei Wörter erklären lassen.

Wenn ein Formular aus mehreren, inhaltlich nicht zusammengehörigen Abschnitten besteht, so sollte man diese durch Fieldsets logisch aufteilen und mit Legend genauer beschreiben.

Ein einfaches Beispiel - Das Kontaktformular

Zur besseren Veranschaulichung werde ich ein einfaches Kontaktformular aufbauen. Kontaktformulare kann man auf fast jeder Seite finden und sind ein wichtiges Mittel zur Kommunikation zwischen Seitenbesucher und Seitenbetreiber.

Am Ende soll unser Kontaktformular folgendermaßen aussehen:

Wie man sehen kann, ist das Formular relativ einfach gehalten, sieht aber dennoch ansprechend aus. Erreicht wird dies durch den Einsatz von gut strukturiertem HTML und einfachen CSS Definitionen.

Der HTML Code

Beim Aufbau des Formulars mit HTML habe ich darauf geachtet, dass es in allen Browsern bedienbar bleibt und auch für Behinderte mit Screenreadern keine Probleme macht. Die einzelnen Formularfelder wie einzeilige oder mehrzeilige Textfelder wurden in einer Liste untergebracht und mit <LABEL> Elementen versehen. Bei bestimmten Feldern habe ich zusätzlich noch einen längeren, beschreibenden Text hinzugefügt:

	

		
Ihre Kontaktdaten
 
		

			

				*Name
				
				
Verwenden Sie wenn möglich Vor- und Zuname.
			
			

				*Email
				
				
Bitte stellen Sie sicher, dass diese Email wirklich existiert.
			
			

				*Ihre Nachricht
				
				

			
		
	
	

		
Ich möchte Folgendes gleich kostenlos mitbestellen
		

			

				Frühlingskatalog
				
			
			

				Sommerkatalog
				
			
			

				Herbstkatalog
				
			
			

				Winterkatalog
				
				

			
		
	
	

		
		
	

Die dazugehörigen Style Definitionen

Damit das Formular auch ansprechend aussieht, muss es natürlich über CSS verschönert werden. Im folgenden CSS sind alle notwendigen Angaben, um die einzelnen Formularelemente auszurichten und farblich gestalten zu können.

.wmForm {
	background-color: #ffffff;
	padding: 10px;
}
.wmForm fieldset.wmButtons input.wmButton {
	float: right;
	width: 150px;
	background-color: #E9F7F6;
	border: 1px solid #7BB9B7;
	color: #7BB9B7;
	margin-left: 10px;
}
.wmForm fieldset legend {
	background-color: #ffffff;
	color: #7BB9B7;
	font-weight: bold;
}
.wmForm ul {
	background-color: #E9F7F6;
	border-top: 2px solid #7BB9B7;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.wmForm ul li {
	padding: 10px;
	clear: both;
}
.wmForm ul li label {
	display: inline;
	float: left;
	width: 30%;
}
.wmForm ul li label span {
	float: right;
	color: #7BB9B7;
}
.wmForm ul li input,
.wmForm ul li textarea {
	float: right;
	width: 68%;
	background-color: #F0F0F0;
}
.wmForm ul li input:focus,
.wmForm ul li textarea:focus {
	border: 1px solid #7BB9B7;
	background-color: #FFFFFF;
}
.wmForm ul li input.checkbox,
.wmForm ul li input.radio {
	float: left;
	width: 20px;
	border-width: 0px;
}
.wmForm ul li p.wmHint {
	clear: both;
	margin-left: 30%;
	width: 68%;
	text-align: left;
	font-size: 10px;
	padding: 0px 10px;
}

Diese Angaben können natürlich beliebig erweitert oder verändert werden, um das Aussehen des Formulars den eigenen Vorstellungen anzupassen.

Fazit

Wie man bei diesem Beispiel erkennen kann, müssen Formulare nicht grau und langweilig aussehen. Sie können sehr flexibel an das jeweilige Seitendesign angepasst werden. Der Fantasie sind hier fast keine Grenzen gesetzt, aber man sollte immer darauf achten, dass solch ein Formular leicht bedienbar bleibt. Dies ist vor allem auch dann wichtig, wenn man bedenkt das Formulare auch von Menschen mit Behinderungen ausgefüllt werden können müssen.

Die bekanntesten Meta-Tags

Die bekanntesten Meta-Tags sind hier sicherlich Meta-Description:

<meta name="description" content="Das Meta-Description Tag
enthält eine kurze Beschreibung vom Inhalt einer Webseite." />

und Meta-Keywords:

<meta name="keywords" content="meta-tags,html,suchmaschinen,
optimierung,seo" />

Allerdings ist Meta-Keywords in den Anfangsjahren des Webs massiv missbraucht worden - um bei möglichst vielen Suchanfragen gelistet zu werden, waren viele Webmaster dazu übergegangen, eine riesige Liste an verschiedenen Keywords in dieses Tag einzutragen, auch wenn diese absolut nichts mit dem eigentlichen Inhalt der Seiten zu tun hatten. Daher wird dieses Tag heute von den Suchmaschinen nur noch sehr vorsichtig betrachtet und ausgewertet.

Eine gute Meta Beschreibung ist wichtig

Anders ist dies bei dem Meta-Description Tag. Dieses Tag hat auch heute noch eine sehr große Bedeutung und wird von vielen Suchmaschinen ausgewertet. Je nach Art der Suchanfrage, wird der Inhalt dieses Tags auch gerne mal als Textauszug unter dem Suchergebnis angezeigt.

Der Grund dafür ist, dass die Suchmaschinen den ersten Text, der auf einer HTML Seite gefunden wird, sehr hoch bewerten. Hat man das Meta-Description Tag eingebunden, enthält dieses den ersten Textinhalt, den die Suchmaschine sehen kann. Wird es weggelassen, kann es daher sein, dass statt dessen der Inhalt der Navigation angezeigt wird - wenn diese an erster Stelle in einer Seite steht.

Wie sollte eine gute Beschreibung aussehen?

Wenn man sich mal die Suchergebnisse von Google genauer anschaut, dann kann man erkennen, dass die Textauszüge meistens eine Länge von etwa 160 Zeichen haben - also etwa die Länge einer SMS. Daher sollte man auch möglichst nicht mehr Text in das Meta-Description Tag schreiben, denn je weniger Text in der Beschreibung steht, um so höher wird jedes einzelne dort enthaltene Wort bewertet werden.

Kurz gesagt: die Beschreibung sollte den Inhalt der Seite so genau wie möglich und in kurzer Form wiedergeben.

Google gibt in seiner Webmaster Hilfe dazu sehr gute Hinweise und Tipps.

Ich selbst habe auf webmatze.de leider bisher den Fehler gemacht, auf jeder Seite den gleichen Text in der Meta-Description zu verwenden. Ergebnis ist, dass nun in jedem Suchergebnis, wo webmatze.de auftaucht, der gleiche Textausschnitt angezeigt wird.

Werde mich also hinsetzen und für jeden Blogeintrag eine kurze Beschreibung anfertigen müssen. Und ich möchte gar nicht daran denken, dass es auf webmatze.de bereits über 300 Blogbeiträge gibt...

Doch scheint das hreflang Attribut keinen wirklichen Nutzen zu haben, da es ja in keiner Weise auf der angezeigten HTML Seite dargestellt wird. In den nächsten Abschnitten möchte ich zwei Wege zeigen, wie man das Attribut doch sichtbar machen kann.

Die CSS Methode

Moderne Browser wie Firefox erlauben es per CSS auf Elemente der Seite mit bestimmten Attributen zuzugreifen und diesen dann einen Style zuzuweisen. Dies geschieht, indem man den Attribut Namen in eckigen Klammern hinter den Tag Namen schreibt:

a[hreflang] {
	...Styles...
}

Mit ein paar weiteren 'Tricks' ist es somit möglich den Inhalt von hreflang sichtbar zu machen und z.B. hinter das entsprechende Tag anzufügen:

a[hreflang]::after{
	content:" ["attr(hreflang)"]";
}

Als Ergebnis bekommt man dann einen Link in folgender Form:

Google.com [en]

Der Nachteil dabei ist, wie ich schon erwähnt habe, dass solche CSS Definitionen nur in modernen Browsern funktionieren und somit nicht in älteren Browsern wie dem Internet Explorer!
Darum habe ich eine weitere Möglichkeit der Umsetzung ersonnen...

Die JavaScript Methode

JavaScript unterstützen heute die meisten Browser. Wenn man also sichergehen will, das die Darstellung der Sprache in all diesem Browsern funktioniert, kann man folgendes Script verwenden.

function showHreflang() {
	for (var i = 0; i < document.links.length; i++) {
		var link = document.links.item(i);
		var hreflang = link.getAttribute("hreflang");
		if (hreflang != null & hreflang.length > 0) {
			var langText = document.createTextNode(" [" + hreflang + "]");
			var supNode = document.createElement("b");
			supNode.appendChild(langText);
			link.parentNode.insertBefore(supNode, link.nextSibling);
		}
	}
}

Das Script durchsucht einfach alle Links auf der Seite, schaut nach ob das hreflang Attribut definiert wurde und einen Inhalt besitzt und hängt dann den Inhalt in eckigen Klammern hinter den entsprechenden Link.
Sollte der Benutzer JavaScript in seinem Browser ausgeschaltet haben, schadet es auch nichts, dann wird einfach nichts angezeigt, womit derjenige dann auf jeden Fall leben kann.

Hier das Ergebnis

Ein Link zu einer Seite auf Deutsch Google.de und hier einer zu einer englischen Seite Google.com. Und dann darf natürlich auch ein Link nicht fehlen, der keine hreflang Angabe besitzt webmatze.de!