Auf den Domainnamen kam ich, weil ich die lockere Art der Holländer bewunderte, die sich »Happy Clog« nannten, und dadurch mit einem Stereotyp spielten. Die »Webkrauts« spielten mit dem Spitznamen »Krauts«, den wir Deutsche nach dem Zweiten Weltkrieg von den Alliierten verpasst bekamen.

Am 19. August 2005 erschien unter der neuen Domain »webkrauts.de« der erste Blogeintrag. Es war eine schnelle Fortführung des Eintrages auf meinem Blog. Das Datum ist seltsamerweise in WordPress komplett falsch hinterlegt, wie man an den Kommentaren schön erkennen kann.

Am 20. August 2005 meldete ich dann mit dem Beitrag »Die Webkrauts kommen!« Vollzug. Innerhalb von drei Tagen hatten sich etwa 60 Webkrauts zusammengefunden, die in den ersten Wochen fleißig diskutierten und planten.

Im Laufe der Jahre haben wir unser Wirken immer weiter ausbauen können. Alljährlich steht unser Adventskalender an. Darin haben wir am Anfang versucht, die Grundlagen moderner Webentwicklung knapp und verständlich zu erklären. Zum Glück blieb es nicht bei den Basics. Im Gedächtnis bleibt mir auch unser großer Bundesligatest, in dem wir 2007 die Webseiten aller Erst- und Zweitligaclubs unter die Lupe nahmen. Das Endergebnis war verheerend.

Neben den Artikeln im Blog wirken Webkrauts auch über viele Bücher und Vorträge. Einige dieser Engagements wären ohne die geballte Außenwirkung der Gruppe vielleicht nicht möglich geworden.

Wir haben noch viel vor. Auf die nächsten fünf Jahre!

Der Galileo-Verlag ist so freundlich, uns fünf Exemplare zur Verfügung zu stellen. Die Autorendichte von Webkrauts ist bei Galileo sehr hoch. Deshalb freuen wir uns sehr, fünf Bücher verlosen zu können. Die Teilnahme ist einfach: Nenne in einem Kommentar einen Deiner Meinung nach empfehlenswerten Artikel aus dem fünfjährigen Schaffen der Webkrauts – in Form eines Links auf den betreffenden Artikel auf webkrauts.de! Es können auch mehrere Artikel genannt werden.

Wir schließen die Teilnahme am Montag, 23. August um Mitternacht. Aus den teilnehmenden Kommentaren wählen wir dann per Zufallsgenerator fünf Gewinner aus. Achtet bitte darauf, eine korrekte E-Mail-Adresse bei Eurem Kommentar anzugeben. Sonst können wir Euch nicht wegen der Versand-Adresse kontaktieren und müssen einen neuen Gewinner ziehen.

Und um welche Bücher dreht es sich? Die fünf Gewinner dürfen sich aus folgenden im Galileo-Verlag erschienenen Büchern eines aussuchen:

1. Modernes Webdesign
2. Der erfolgreiche Webdesigner
3. Professionelles Webdesign mit (X)HTML und CSS
4. CSS-Layouts
5. Mobiles Webdesign
6. Fortgeschrittene CSS-Techniken
7. CSS-Praxis
8. Websites erstellen mit Contao (erscheint in Kürze)

Der Rechtsweg ist ausgeschlossen. Mitglieder der Webkrauts können leider kein Buch gewinnen.

Durch die Wordpress-eigene Spamabwehr kann es vorkommen, dass einzelne Kommentare erst freigegeben werden müssen, vor allem, wenn sie viele Links enthalten. Ich bitte dafür um Verständnis. Ich drücke Euch die Daumen und bin gespannt auf die Kommentare.

UPDATE
Gewonnen haben die Kommentare 9, 25, 29, 31 und 60. Die Bücher sind unterwegs. Herzlichen Glückwunsch euch Fünfen.

Dreamweaver ist ein mächtiges Werkzeug. Es wartet von Hause aus schon mit vielen Funktionen und Shortkeys auf. Trotzdem kommt irgendwann die Situation, in welcher der Entwickler einen Shortkey und eine bestimmte Automatisierung vermisst. Die begrenzte Funktionalität der Snippets kann da nicht immer weiterhelfen. Um meinen Workflow zu optimieren und nervige Tipperei zu vermeiden möchte ich meine eigene Funktion schreiben und diese auf ein Tastaturkürzel legen.
Hier kommt die API ins Spiel. Über sie bin ich in der Lage, das Programm zu reorganisieren, meinen Bedürfnissen anzupassen und um fehlenden Funktionen zu erweitern oder bestehende umzuschreiben.

Die Vorbereitung

Um zu starten brauchen wir natürlich in erster Linie den Adobe Dreamweaver (zum Probieren reicht auch erstmal eine Dreamweaver CS5-Testversion). Befehle in Dreamweaver bestehen aus zwei Komponenten – einer HTML- und einer JavaScript-Datei – und sie werden über einen XML-Baum in die Benutzeroberfläche eingebunden. Grundkenntnisse in den drei Bereichen erleichtern den Einstieg erheblich.

Desweiteren muss nach der Installation der »Dreamweaver«-Ordner mit den Unterordnern »Configuration« und weiter »Menus« auf der Festplatte ausfindig gemacht werden. Dieser befindet sich nicht im Installationsordner, sondern in den Benutzer- bzw. User-Ordnern (bei Vista z. B. C:\Users\"Name"\AppData\Roaming\Macromedia\Dreamweaver\Configuration\Menus).

Um Problemen vorzubeugen, sollte vorher eine Kopie der aktuellen Datei menus.xml angelegt werden.

Ladet nun die vorbereitete zip-Datei (52 KB) herunter und kopiert den Inhalt in den Menus-Ordner. Die neuen Befehle werden nach dem nächsten Start von Dreamweaver angezeigt und sind aktiv.
Um die folgenden Erläuterungen besser nachvollziehen zu können, sollten alle Dateien des entpackten ZIPs mit Dreamweaver geöffnet werden.

Ärmel hochkrempeln und los geht's!

Dem aufmerksamen Beobachter fällt natürlich sofort der neue Menüpunkt in der horizontalen Menüleiste auf. Beim anklicken von »Webkrauts« öffnet sich ein Dropdown mit »ListAll«, »BreakAll« und »AllToNav« und den zugewiesenen Shortkey. Wenn wir jetzt mehrere Zeilen Text markieren und zum Beispiel Strg+Alt+D drücken oder den entsprechenden Menüpunkt auswählen, werden automatisch die Zeilenumbrüche erkannt und in Listenpunkte umgewandelt. Das Gleiche gilt für die Funktionen »BreakAll« (erzeugt einen br am Zeilenende) und »AllToNav«, welche die Listenfunktion »ListAll« erweitert und einen Anchor-Tag ergänzt, um die Basis für eine Navigation zu erstellen.

Diese vorgefertigten Befehle dienen natürlich nur als Beispiele für den Einstieg. Ich denke, je nach Ausprägung der JavaScript-Kenntnisse lässt sich da allerhand anstellen und es sind nicht nur HTML-Tags möglich.

So werden die Befehle angewendet – Screencast

Dreamweaver liest den Code im Bearbeitungsfenster genau wie den Quellcode einer Internetseite. Dadurch wird die direkte Manipulation durch JavaScript erst möglich. Bevor die Befehle also greifen können, muss Dreamweaver das DOM vollständig erfasst haben. Sollte mal keine Reaktion auf die Befehle erfolgen, hilft deshalb ein Klick auf den Button »Aktualisieren«. Das gilt allgemein für die Anwendung von Funktionen in Dreamweaver.

Der neue Befehl

Befehle in Dreamweaver bestehen immer aus zwei Komponenten: einer HTML- und einer JavaScript-Datei. Die HTML-Datei ist lediglich dafür zuständig, die Javascript-Datei zu laden, einzubetten und die entsprechende Funktion im Body-Tag durch »onLoad« auszuführen. Wichtig ist es, daran zu denken, die Bezeichnungen der Datei und der Funktion hier anzupassen.

Der HTML-Code am Beispiel der ListAll()-Funktion sieht (etwas gekürzt) so aus:

<head>
<title>Listen erstellen </title>
<script language="JavaScript" src="ListAll.js">
Menu_HC_AddLineBreaks = dreamweaver.latin1ToNative("Listen erstellen <br>");
</script>
</head>
<body onload="ListAll()">
</body>
</html>

Die JavaScript-Datei dagegen enthält die Programmierung für den Befehl. Hier bekommen wir es mit allerhand Dreamweaver-spezifischen Funktionen zu tun. Die Funktion »canAcceptCommand()« testet zum Beispiel, ob das Menüelement abgeblendet werden soll (Rückgabe: false) oder aktiv geschaltet wird. Außerdem wird hier noch festgestellt, auf welchem Teil innerhalb von Dreamweaver der Eingabefokus liegt (»dw.getFocus()«) und die Selektion aus dem DOM ausgelesen (»dw.getDocumentDOM()«).
Diese komplette erste Funktion ist ein Standard und muss für unsere Zwecke nicht modifiziert werden. Wer will, kann sich im API-Referenzhandbuch unter der »Hilfe« damit näher befassen.
Den Kern bildet die jeweils zweite Funktion »ListAll()«, »BreakAll()« bzw. »AllToNav()« und hier können wir uns austoben. Jeder, der Grundkenntnisse in JavaScript besitzt, kann leicht nachvollziehen was hier passiert. Kurz beschrieben am Beispiel der Funktion »ListAll()«:

1. Zuerst wird die Selektion im DOM aufgerufen.
2. Es werden die Zeilenumbrüche durch </li>\n\t<li> ersetzt. Bei \n und \t handelt es sich um Regular Expressions für einen Zeilenumbruch und einen Tab.
3. Am Ende der Liste wird </li>\n</ul> eingefügt.
4. Am Anfang der Liste wird <ul>\n\t<li> eingefügt.

Für eine bessere Übersicht habe ich die wichtigsten Zeilen nochmal in der Datei kommentiert. Ein Blick auf den Quellcode der jeweiligen Datei verdeutlicht, wie sie modifiziert wird. Wer will, kann hier auch seine eigene Funktion einmal ausprobieren. Man kann nicht viel kaputt machen.

Der neue Menüpunkt

Die dritte und letzte Datei im Bunde ist eine .xml-Datei (menus.xml). Sie hat mit dem Befehl selbst nichts zu tun, denn hier werden alle Menüs und ihre Inhalte samt Shortkeys festgelegt und beim Start von Dreamweaver initiiert. Über diese Datei lässt sich die gesamte Menüstruktur und ihre Funktionen sowie deren Tastaturkürzel reorganisieren. Der Aufbau des XML-Baums ist leicht nachzuvollziehen.
Ganz am Ende der Datei habe ich unsere zusätzlichen Menüpunkte eingefügt. Ein neuer Hauptmenüpunkt wird in unserem Beispiel mit <menu id="Webkraut_Edit" name="Webkrauts"> erstellt und alle Unterpunkte mit <menuitem id="WK_Edit_ListAll" name="ListAll" key="Cmd+Alt+L" file="Menus/ListAll.htm" arguments="'ListAll'" /> aufgelistet. Dabei gilt: »key« bezeichnet den Shortkey, »file« den Pfad und Dateinamen der HTML-Datei und »name« den Menüeintrag. Der Pfad kann beliebig angegeben werden. Ab einer gewissen Anzahl von eigenen Funktionen sollte man über eine eigene Ordnerstruktur nachdenken. Will man ein eigenes Tastaturkürzel anlegen, sollte man mit der Suchfunktion vorher prüfen, ob es wirklich noch nicht anderweitig genutzt wird.

Der neue Menüpunkt und seine Funktionen und überhaupt alle Änderungen werden immer erst nach dem nächsten Start von Dreamweaver initiiert.

Lust bekommen?

Ich hoffe ich konnte mit diesem Artikel einen schnellen Einstieg in ein komplexes Themengebiet schaffen, dessen Vertiefung durchaus lohnenswert ist. Die Idee, sich mit der API von Dreamweaver zu befassen und das Programm ein wenig anzupassen, entstand mit der Version 8. Die neuen Funktionen habe ich einfach in Version CS3 migriert. Bleibt abzuwarten welche Möglichkeiten sich mit Version CS5 ergeben werden.

Die Dateien als .zip-Archiv zum downloaden

Webkrauts_Menue.zip (52 KB)

Weiterführende Links

Accessing Dreamweaver's JavaScript API
Dreamweaver erweitern

Extending Dreamweaver CS4

Zum Autor

Henry Zeitler ist gelernter Mediengestalter und arbeitet als Webproducer in Düsseldorf. Barrierefreiheit, Semantik und Codeoptimierung haben sich zu seiner Leidenschaft entwickelt, die über das berufliche Engagement hinaus geht. In seinem privaten Blog Freizeitler.de veröffentlicht er Experimente und Erkenntnisse.

Was macht die Seite so besonders? Es ist sicher nicht das Design, das bereits seit Jahren ein Update vertragen kann. Es sind keine Web 2.0-Elemente, keine schicken Formulare, kein besonders cleverer Code. Nein, es ist schlicht der Inhalt.

»Ain’t It Cool News« ist eine der bekannteren, amerikanischen Webseiten und liefert Nachrichten und Gerüchte rund um Kino- und TV. Dazu kommen die Unterabteilungen für DVDs, Comics, Animes – alles nach meinem Geschmack.

Nun gibt es mehrere Kino-Seiten, die ich mir Tag für Tag durchlesen könnte. Bei »Ain’t It Cool« gefällt mir außerdem die Art der Kritiken. Manch andere Webseiten sind bei kritischen Passagen oft zu vorsichtig. Bei »Ain’t It Cool« werden Filme auch schon mal genüsslich in der Luft zerrissen. Sprachlich sind die Texte immer gut zu lesen.
Im Moment nehmen etwa mehrere Kritiker »The Last Airbender« auseinander. The Enemy schreibt: »Unfortunately, The Last Airbender is a cinematic date rape. And boy do I feel violated.« Über den Teaser-Trailer zu »The Social Network« schrieb Quint »Here’s an early contender for Best Trailer of the Year. I’m not kidding, I’m so in love with this trailer I want to marry it.« So etwas will ich lesen. Locker geschrieben, mit Herz bei der Sache.

Kunden sehen mich oft genug fragend an, wenn ich ihnen erkläre, dass es in erster Linie auf die Inhalte ankommt, und das Design zweitrangig ist. Aber Nutzer kommen eben nicht wegen eines schicken Designs immer wieder, sondern wegen der nützlichen, witzigen, informativen, kurz: stimmigen Inhalte.

Und die machen »Ain’t It Cool News« zu meiner Sonnenseite.

Zum Autor

Nicolai Schwarz arbeitet unter dem Namen textformer mediendesign als selbstständiger Designer und Webentwickler in Dortmund. Gelegentlich schreibt er darüber, zum Beispiel für das Webstandards-Magazin, t3n, PHP User oder eben auf webkrauts.de

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Die ZEIT vor dem Relaunch…

…und nach dem Relaunch

Insgesamt erscheint mir DIE ZEIT lesefreundlicher. Viele andere Informationsangeboten überschütten uns mit Werbeflächen und kleinformatigen Informationsschnipseln. Die Designer der ZEIT sind einen anderen Weg gegangen. Auch hier werden wir mit vielen Informationsangeboten auf der Startseite konfrontiert, sie fallen aber nicht negativ und verdichtet auf. Einzig die hin und wieder eingeblendeten großen Werbeflächen unter dem Header der Startseite stören beim Lesegenuss.

Zusatzinfos bei den Artikeln

Es sind aber auch Details, die bei der Informationsaufnahme helfen. Neben jedem Artikel sind in einem Kasten die Anzahl der Seiten verzeichnet, auf die ein Artikel verteilt wurde. Der Leser kann sich jeden Artikel auch auf einer Seite anzeigen lassen. Zusätzlich kann er sich ein schön gestaltetes PDF herunterladen. Das PDF kann er archivieren oder ausdrucken und stromlos im Zug oder Bus lesen. Bei diesen Details haben die Designer und Entwickler an den Nutzer gedacht. Um den geht es eigentlich immer. Leider vergessen das sehr viele Profis.

Zum Autor

Jens Grochtdreis ist freier Webentwickler und Berater. Er liebt leidenschaftlich das Medium Internet. Jens gründete die Webkrauts, um für ein besseres Medium zu streiten. Wenn er nicht gerade bloggt, twittert, surft oder codet, dann entspannt er sich bei Comics, Krimis, hört Blues oder kocht.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Wer folgt wem?

Die Aussagen »content is king« und »form follows function« werden gern als Argumente und Prämissen bei der Konzeption von Webseiten verwendet. Die Online-Versionen klassicher Tageszeitungen zeigen, dass diese Regeln gut funktionieren, auch wenn es berechtigte Diskussionen über die Grenzen und Probleme solcher Prämissen gibt.

Betrachten wir jedoch Webseiten mit den Schwerpunkten Design, Kunst oder visuelle Kommunikation, scheinen diese Grundsätze von einigen Webdesignern bewusst oder unbewusst unterwandert zu werden. Dieses Verhalten ist allzu verständlich: zu groß ist für uns doch die Versuchung, den bunten Bildern noch einen üppigen, coolen oder zumindest gestalterisch anspruchsvollen Rahmen mit auf dem Weg zum Endnutzer zu geben. Am Ende stellt sich aber oft die Frage, ob dann tatsächlich noch der Inhalt die erste Geige spielt, oder ob nicht eher die Präsentation den Ton angibt. Dass es anders und trotzdem anspruchsvoll geht, zeigt die Webseite jeriko.de.

Inhalte vs. Design

Jeriko ist das private Photographie- und Designweblog von Christoph Boecken. Einfach, klar und benutzerfreundlich präsentieren sich nicht nur Informationsarchitektur und Seitenelemente. Die Farbgebung und das Layout der Seite sind minimalistisch umgesetzt und fokussieren die Aufmerksamkeit des Nutzers auf die rein visuellen Inhalte. Nichts auf der Seite lenkt von den gezeigten Bildern ab. Das zweispaltige Layout kommt mit schlichter Typo, Schwarz, Weiß, wenigen Grautönen und einem gezielt eingesetzten Rot als Akzentfarbe aus. Langweilig oder benutzerunfreundlich wird sie dadurch nicht, im Gegenteil: Berauben wir die Webseite durch Abschalten der Bilder und Grafiken ihrer Inhalte, macht sich erst deren Relevanz für die Gesamtwahrnehmung und das Design bemerkbar:

jeriko.de mit Grafiken

jeriko.de ohne Grafiken

Wer hätte den Mut, so ein kastenartiges Grundlayout als Zielvorgabe der Gestaltung einer Webseite zum Thema Design und Fotografie zu wählen? Über Geschmack lässt sich aber eben nicht immer streiten, es ist der Kontext, der darüber entscheidet, ob die Präsentation von Inhalten gelingt oder nicht. Für mich ist die Jeriko-Webseite gerade auf Grund ihrer Klarheit ein Paradebeispiel, dass anspruchsvolles Webdesign ohne coole Hintergrundgrafiken, CSS-Effekte und gewagte Farbkombinationen perfekt funktionieren kann. Diese Reduzierung auf die Inhalte macht die Seite für mich nicht nur zu einem regelmäßigen Anlaufpunkt zum Thema Fotografie, Design und Inspiration – sie ist auch an trüben Tagen meine entspannende und anregende Sonnenseite.

Zum Autor

Nils Pooker arbeitete selbstständig im Kunstbereich und ist seit 2001 freier Webdesigner. Als Fachbuchautor hält er Vorträge und schreibt regelmäßig über Kommunikation, Wahrnehmung, Webstandards und Webdesign.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Die Brigitte App ist eine angepasste Version der schon vorhandenen Seite mobil.brigitte.de. Neben einer übersichtlichen Auflistung aller Themenbereiche gibt es noch die Menüpunkte »Fotos«, »Videos«, »Mode« und wie es sich für eine anständige Internetseite gehört: »Startseite«.

Mich haben vor allem die klare Gestaltung und die ansprechende Aufbereitung überzeugt. Ganz dem CI entsprechend dominieren die Farben Rot, Schwarz und Weiß. Die Schrift ist gut lesbar und auch längere Artikel sind so aufbereitet, dass sie auf dem kleinen Display gut strukturiert erscheinen. Ob Quiz, Fotos, Videos, Tipps oder Interviews – die Brigitte App bietet alles in gut proportionierten Häppchen.

Zwei andere kostenlose Zeitschriften-Apps, die ich getestet habe, sind ähnlich überzeugend. Stern punktet mit einer ebenfalls ansprechenden Aufbereitung und der Rubrik »Wissenstests«. Während Focus mit der Rubrik »Rechner« eindeutig einen Mehrwert darstellt. Beiden fehlt allerdings die obligatorische »Startseite« und auch sonst wäre weniger aus meiner Sicht mehr gewesen.

Sollten jetzt alle Zeitschriften eine mobile Version und am besten noch eine iPhone-App haben?
Ein klares Jein! So wie die Brigitte-App für mich zu einem Zeitschriften-Ersatz geworden ist und mir die Wartezeit beim Arzt verkürzt, mich während einer Bahnfahrt erheitert oder mir die Suche nach dem neuen Sommerkleid erleichtert, so lese ich meine »Psychologie heute« nach wie vor analog.

Typisch Frau? Mag sein. Ich nutze die App nur, um eine kurze Pause zu füllen oder mich schnell über etwas zu informieren. Kurzweil steht bei mir im Vordergrund. Will ich mich ernsthaft mit etwas beschäftigen, lese ich den Artikel entweder am Bildschirm oder auf dem Papier.

Zur Autorin

Stefanie Rückert konzipiert und gestaltet Praxisauftritte für Ärzte und Zahnärzte. Dabei legt sie großen Wert auf Usability und die Einhaltung von Webstandards.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Cobus Besters Blog ist anders. Die Seite kommt mit wenig grafischen Elementen aus und ist eher spartanisch gehalten. Was das Blog zu etwas Besonderem macht, ist der Scrolleffekt in den Sprechblasen links und rechts. Man blickt wie durch eine Lochmaske auf die dahinterliegende Ebene und, passend zu Position und Inhalt, werden dort grafische Symbole angezeigt.
Durch den gezielten und reduzierten Einsatz von jQuery kommt die Animation gut zur Geltung, und es wirkt nicht überladen oder deplatziert.

Wollen wir nun herausfinden, wie der Webdesigner aus Südafrika diesen Effekt erstellt hat, wird es uns denkbar leicht gemacht. Auf der Seite »About« erlaubt er einen kurzen Blick hinter die Kulissen. Hier wird auf die entsprechenden Code-Schnipsel und Referenz-Seiten verlinkt, und wir erfahren, dass auch er das Rad nicht neu erfinden musste.
Eine gute Idee ist oftmals schwerer zu finden als die passende Technik.

Zum Autor

Henry Zeitler ist gelernter Mediengestalter und arbeitet seit 2006 als Webproducer in Düsseldorf. Codeoptimierung, Semantik und Zugänglichkeit haben sich zu seiner Leidenschaft entwickelt, die über das berufliche Engagement hinaus geht. Unter www.freizeitler.de veröffentlicht er Experimente und Erkenntnisse.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Das es auch anders geht, zeigt z.B. Soundcloud. In deren »Signup« werden die benötigten Informationen schon während der Eingabe validiert und im Fehlerfall eine nicht zu übersehende optische Benachrichtigung nebst hilfreichen Hinweisen zur Lösung des diagnostizierten Problems ausgegeben. Und der fehlerhaft ausfüllende Besucher kann das Formular gar nicht absenden, ohne diese Fehler zu korrigieren. Damit werden etwaige Datenverluste oder doppelte Anmeldeversuche erst gar nicht riskiert.

Wie macht der Entwickler das? Natürlich mit JavaScript. JS zur Formularvalidierung gab es schon in den 90er Jahren, das konnte sich seinerzeit aber nicht durchsetzen. Heutzutage kann der Webworker zu vorhandenen und erprobten Lösungen wie das Validation-Plugin von jQuery greifen und sich das Rumärgern mit Kompatibilitätsproblemen ersparen.

Ein Nachteil für die Web-Anwendungsentwicklung soll nicht verschwiegen werden: Es ist unschön, einen Teil der Formularverarbeitung in seiner Server-Skriptsprache und einen anderen Teil in JavaScript zu entwickeln, denn natürlich muss die übliche serverseitige Validierung, nicht zuletzt für Browser ohne JavaScript, trotzdem erfolgen. Hier gilt es, auf den Fortschritt zu hoffen, der uns in unseren Lieblings-Webanwendungs-Frameworks Methoden liefert, welche die gewünschten Funktionalität beschreiben und dann automatisch an die richtigen Stellen in Front- und Backend packen.

Aber auch heute kann und soll ein Seitenbetreiber sich die Mühe machen, die Formularhölle für den Benutzer zu entschärfen und bereits im Client Daten zu validieren. POST-GET-Request-Ketten zur Formular-Validierung, am besten noch mit »Wollen Sie das Formular wirklich noch einmal absenden?«-Warnungen sind in einer Webanwendung sowas von 1995…

Zum Autor

Ralf Graf verdient seit 14 Jahren seine Brötchen mit dem Web. Er lebt und arbeitet in Karlsruhe als freier Webentwickler. Weil er zu faul zum Frickeln ist, setzt er auf Webstandards und Ruby On Rails.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.