Dieses Buch erscheint im Verlag »A BOOK APART«, von den Herausgebern des Web-Magazins A LIST APART. Die Bücher, die in diesem Verlag erscheinen, folgen dem Anspruch kurz und bündig über Themen zu schreiben, die für Webdesigner wichtig sind.

Mir hat die Lektüre des Buches sehr gut gefallen. Auf mich wirkt es wie ein Espresso. Es enthält in konzentrierter Form eine Fülle wichtiger Gedanken und Anregungen, die beleben und Lust machen, weiter mit HTML5 zu experimentieren. Auf »CSS3 for Web Designers«, das sich noch in meinem Rucksack befindet, freue ich mich schon sehr.

In Kapitel 4 thematisiert Keith die Möglichkeiten, die HTML5 im Umgang mit Formfeldern bietet. Und auf einen Aspekt davon möchte ich nun gerne kurz eingehen.

Im Umgang mit Formfeldern <input> bringt HTML5 einiges an Neuerungen. Ein Suchfeld, wie hier abgebildet kann mit folgendem Code erzeugt werden:

<p>
<label for="query" >Suche: </label>
<input id="query" name="query" type="search"
placeholder="Suchbegriff ..." >
</p>

Es ist nun möglich Formfelder entsprechend ihrer Funktion anzusprechen. In diesem Fall verwendete ich folgendes: type=”search”. Die Browser verstehen sofort, dass es sich bei dem entsprechenden Feld um ein Suchfeld handelt. Diese Felder werden dann entsprechend der Spezifikationen der Browser dargestellt.

Die zweite Möglichkeit ist das Eingeben eines Platzhaltertextes. Dies wurde hier mittels placeholder=”Suchbegriff …” umgesetzt. Bisher wurde dafür Javascript verwendet. HTML5 löst an einigen Stellen den Einsatz von Plugins ab, und ermöglicht es so Webdesignern, gewünschte Funktionen direkt über das Markup zu realisieren. Bei meinen kurzen Tests eben, stellte sich jedoch heraus, dass es bisher lediglich die Webkit-Browser (Safari und Google Chrome) sind, die die Platzhalter-Spezifikation unterstützen.

Auf dem Weg zu semantisch aufgebauten Webseiten sind die genaueren Bezeichnungen unterschiedlicher Formfelder, und darüber hinaus einzelne Abschnitte einer Webseite, eine wichtige Neuerung. Die Möglichkeiten auf Erweiterungen mittels Javascript und anderer Plugins zu verzichten, und die gewünschten Funktionen direkt über das Markup zu realisieren werden der Kompatibilität und der Schnelligkeit von Webseiten zuträglich sein.

Wieso eigentlich extra gestalten?

Keith wirft im angesprochenen Kapitel die Frage nach der Gestaltung der so erzeugten Formfelder auf. Die Browser, die eine besondere Gestaltung liefern (im Falle des Suchfeldes sind das die Webkit-Browser), bieten momentan noch keine weitere Gestaltungsmöglichkeit. Sie erscheinen also auf die Weise, wie der Browser sie ausgibt. Diese Ausgabe entspricht jedoch der Darstellung eines Suchfeldes im Browser selbst.

Die Frage nach der Gestaltungsmöglichkeit wendet er daraufhin geschickt zur Frage, ob Formfelder überhaupt extra gestaltet werden sollten. Wenn Benutzerfreundlichkeit eng verbunden ist mit Gewohnheit, dann erscheint diese Frage plausibel. Eine Person, die eine Webseite mit einem Safari betrachtet, kennt die Darstellung eines Suchfeldes in ihrem Browser, sie wird dementsprechend das Suchfeld innerhalb der Webseite als solches erkennen.

Keith betrachtet die browserspezifische Darstellung der Formfelder als Herausforderung an die Browserentwickler. Diese werden sich ins Zeug legen, gebräuchliche Formfelder gut gestaltet auszuliefern, so dass ein angenehmes Surferlebnis entsteht, und somit Benutzerinnen und Benutzer gewonnen werden. Ich hoffe, dass die Entwicklung tatsächlich in diese Richtung geht.

Momentan würde mich jedoch interessieren, wie ihr das seht. Was haltet ihr davon bei der Gestaltung von Webseiten auf „vordefinierte Formfelder“ zu setzen?

_

Ein Browser, der die HTML5-Spezifikation der Formfelder nicht auf diese Weise unterstützt, behandelt sie wie normale Texteingabe-Felder. Die Spezifikation kann also verwendet werden, ohne dass Besucherinnen und Besuchern daraus ein Nachteil erwächst, sollte ihr Browser diese Spezifikation nicht unterstützen.

Den heutigen Beginn der Weltstillwoche nehme ich zum Anlass auf ein Projekt hinzuweisen das vor einiger Zeit online ging. Ich hatte die Gelegenheit eine Webseite für Andrea Schwager im Rahmen ihrer Geschäftsausstattung zu realisieren. Frau Schwager ist Kinderkrankenschwester und widmet sich in ihrer freiberuflichen Tätigkeit der Unterstützung von Eltern in der Anfangsphase mit ihren Kindern. Für weitere Informationen zu ihren Angeboten empfehle ich einen Besuch ihrer Seite…

Mehr Infos zu dieser Initiative findest du hier: CSS-Naked-Day 09.

Gestern ging ein Projekt online an dem ich in letzter Zeit gearbeitet habe und da ich hier wieder etwas mehr schreiben möchte, kommt heute ein Eintrag dazu in dem ich auch darauf eingehen möchte wie jede und jeder ganz einfach anhand zweier Zahlenwerte die Größe eines Bildes anpassen kann.

Maren Hessler und Marcus Splitt starten mit shifthappens.de ein Online-Magazin für Veränderung in Organisationen und Gesellschaft. Ich zitiere dazu einfach mal aus dem Beitrag „SHIFTHAPPENS“ von gestern:

Wir sind der Meinung, dass es sich bei der aktuellen Krise nicht um eine Wirtschafts-, sondern um eine Systemkrise handelt. Deswegen wollen wir eine andere Perspektive anbieten und Impulse für zeitgemäßere Organisationsformen geben sowie Menschen zu Wort kommen lassen, die die Chance eines Shifts er- und begriffen haben.

In diesem Sinne empfehle ich dir das Blog. Für Menschen die das Blog weiterempfehlen wollen finden sich dort auf der Mitmachen-Seite ein paar Bildchen die auch Banner genannt werden. Da ich immer wieder mit solchen Bildern zu tun habe und ab und an feststelle, dass das Einbinden eines solchen Bildes in einer Größe die von der angebotenen Größe abweicht als Herausforderung erscheint möchte ich nun dazu ein paar Wort schreiben. Auf Seiten die solche Bilder anbieten findet sich meist ein Code-Schnipsel der in die eigene Seite eingebunden werden kann – es ist also nicht mehr zu tun als diesen Code zu markieren, zu kopieren und an einer geeigneten Stelle auf der eigenen Seite einzufügen, das werde ich nun auch machen…

Das einfügen des Codes führt dazu, dass hier das Bild in der angegebenen Größe angezeigt wird. Die Größe des Bildes wird durch die Angaben width=”200″ und height=”60″ bestimmt. Diese beiden Angaben helfen dem Code-Schnipsel dabei „standardkonform“ zu sein und lassen den Browser von Anfang an wissen wie viel Platz er für das Bild frei halten muss.

Möchte ich das Bild nun etwas kleiner darstellen verändere ich diese beiden Werte. Es empfielt sich Bilder nur kleiner darstellen zu lassen, da es bei Vergrößerungen natürlich zu Unschärfen kommt. Nehmen wir nun also an wir wollen das Bild in eine Seitenleiste einbinden die nur 150px breit ist, muss also der eine Wert width=”150″ heißen, um die Seitenverhältnisse des Bildes korrekt darstellen zu lassen muss sich auch der Wert height=”60″ ändern. Eine einfache Methode diesen Wert zu ermitteln ist es ihn durch 200 zu teilen und mit 150 zu multiplizieren – dabei erhält man den neuen Wert height=”45″. Natürlich kann man das auch mit jedem beliebigen Bildbearbeitungsprogramm erfahren, kleine Rechnung sollen aber auch gut für das eigene Gehirn sein, und das muss man selten extra öffnen.

Bei der Gestaltung von Webseiten spielt die Wahl des Browsers eine enorme Rolle. Nahezu jeder dieser Browser interpretiert das was Netzgestalter geschrieben und zur Interpretation frei gegeben haben anders. Auch wenn man sich für Webstandards einsetzt und sich beim Erstellen der Seiten an dieselben hält, wundert man sich über manches Ergebnis. Es gibt natürlich einige Möglichkeiten die unterschiedlichen Ergebnisse zu umgehen, dennoch wäre eine standardisierte Interpretation der Standards wünschenswert. Vielen Dank an alle, die sich dafür einsetzen.

Bevor ich jedoch ins philosophieren über Webstandards komme, möchte ich über die Browser reden, die ich sehr gerne verwende:

Safari
Der Standardbrowser des Betriebsystems meines Vertrauens ist mein Browser Nummer 1. Er ist eigentlich immer offen wenn mein Rechner in Betrieb ist. Ich bin sehr mit der Darstellung des Browsers zufrieden und schätze seine Integration in mein Betriebssystem.

Kürzlich habe ich in einem Bericht auf Zeit-Online über Browser die Frage gelesen, wozu man den Safari überhaupt braucht. Der Schreiber bezog sich auf die Benutzung des Safaris unter Windows. Als ich so darüber nachdachte, was mir am Safari unter Windows (natürlich nur zu testzwecken) gefällt, ist eindeutig die Darstellung. Als die erste Version für Windows herauskam, war er der einzige Browser der die Webseiten auf ähnlich schöne Weise darstellte, wie ich es von meinem Mac gewohnt war – nichts mit pixeliger Schrift oder Bildern. Heute haben sich da auch andere Browser weiterentwickelt, dennoch würde ich auch unter Windows die Installation des Safaris empfehlen. (Link: Safari)

Firefox
Firefox benutze ich vor allem wegen der Erweiterungen. Ich genieße es sehr, dass es für diesen Browser für alles was ich so im Netz mache eine Erweiterung gibt, die das Arbeiten erleichtert. Ein weiteres dickes Plus von Firefox ist die Unterstützung der Webstandards und der damit einhergehenden Darstellung des Inhaltes. Ich empfehle diesen Browser für alle Betriebssysteme und freue mich gerade an der 3er-Version. (Link: Firefox)

Apropos 3er-Version. Am ersten Abend der Nutzung war ich sehr erschrocken über das neue Aussehen. Dank Ralf G. konnte die schmerzenden Augen schnell Linderung erfahren. Ein schickes Theme von takebacktheweb.org half darüber hinaus zur optischen Integration in Mac OSX.

Neben diesen beiden Browsern verwende ich ab und an noch Flock und Opera, die beide auch besondere Merkmale haben, die sie liebenswert machen, meine Liebe zu den erstgenannten Browsern bisher jedoch nicht zu übersteigen in der Lage waren.

Welche Browser nutzt Du?
Was sind Deine Gründe dafür?