webmatze.de

Firefox3 kann jetzt auch schüchtern

Der Internet Explorer konnte ja schon seit Längerem schüchtern, doch nun ist auch der Firefox nachgezogen und kann jetzt ebenfalls schüchtern.

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.

Firefox Homepage Screenshot

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?

Wie man wirklich ansprechende Formulare erstellt

Eines der wichtigsten Elemente in Webseiten sind Formulare. Ohne Formulare wäre es nicht möglich Informationen vom Anwender auf den Server zu übertragen. Es könnten keine Gästebucheinträge gemacht oder Mails über ein Kontaktformular versendet werden.

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.

Formulardesign Screenshot

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. Weiterlesen →

Meta-Description: Wie wichtig ist sie wirklich?

Wer sich mit Suchmaschinenoptimierung (SEO) beschäftigt, der wird auf jeden Fall auch schon mal etwas von Meta-Tags gehört haben. Meta-Tags beschreiben unter anderem den Inhalt einer Webseite genauer. Sie geben vor allem den Suchmaschinen ein paar Hinweise darüber, was in einer bestimmten Seite zu finden ist.

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.

Meta-Description Tag in Suchergebnissen

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...

Die Sprache eines Links kennzeichnen

Ein bislang fast nie benutztes Attribut des <a> Tags ist das Attribut hreflang, welches beschreibt in welcher Sprache die Seite geschrieben ist, zu der ein Link führt. Dieses Attribut darf nur gesetzt werden, wenn auch das href Attribut angegeben wurde.

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...
}

Weiterlesen →

Eigene Fehlerseiten erstellen

Das hat bestimmt schon jeder einmal erlebt. Anstatt der gewünschten Seite wird nur eine einfache Seite angezeigt, auf der 404 Error - Datei nicht gefunden steht! Das kann zum Beispiel sein, wenn die Seite nicht mehr auf dem Server vorhanden ist, oder aber auch, wenn man sich schlicht und einfach verschrieben hat.

Da auf solchen Fehlerseiten oft keine Hinweise für den Besucher vorhanden sind, wie dieser wieder zurück auf die richtigen Seiten kommt, gehen dem Webseitenbetreiber so schnell viele Besucher verloren. Um dies zu verhindern, hat man auf den meisten Servern die Möglichkeit, eigene Fehlerseiten anzulegen.

Wie gehe ich vor?

Ganz einfach! Auf vielen Servern befindet sich eine Datei mit Namen .htaccess! Manchmal kann diese auch nicht sichtbar sein. Entweder läd man sich diese Datei herunter oder legt sich einfach eine neue an. Dies kann man mit einem einfachen Texteditor machen. In diese Datei fügt man nun folgende Zeilen ein:

Weiterlesen →

FireBug 0.4 – Der ultimative Web Debugger

Webseiten von heute bestehen meistens nicht nur aus HTML und CSS, sondern häufig auch viel JavaScript. Es sind häufig gar keine Webseiten mehr, sondern schon richtige Webanwendungen. Und wir alle wissen, dass Anwendungen häufig auch Fehler enthalten können. Auch Webanwendungen sind davon nicht ausgeschlossen.
Bisher war es meistens schwierig solche Fehler im JavaScript Code oder im HTML zu finden. Es fehlen die richtigen Tools, wie man sie z.B. bei der Programmierung mit Java ode C++ gewohnt ist, um diese Fehler aufzuspüren und zu beheben. Da HTML, CSS und JavaScript im Browser ausgeführt und angezeigt werden, braucht man auch Tools, um sie genau da - während sie ausgeführt werden - zu debuggen. Der Browser Firefox bietet hierfür einige gute Tools an. Ein guter Debugger ist z.B. Venkman. Und mit dem DOM Inspector kann man sich bequem den DOM Tree der Seiten anschauen.
Doch in Zeiten von web 2.0 und Ajax braucht man noch bessere und spezialisiertere Tools. Und eins dieser "Übertools" ist FireBug, welches jetzt in der Version 0.4 erschienen ist.

Hier ein kurzer Überblick über die neuenFeatures:

JavaScript Debugger

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.