Am vergangenen Sonntag bin ich auf der A40 von Essen nach Dortmund gefahren und habe dafür einige Stunden gebraucht. An sich ist das nichts Ungewöhnliches. Allerdings war ich dieses Mal nicht mit dem Auto unterwegs, sondern mit dem Fahrrad! Zusammen mit Tausenden anderen Menschen, die auf der A40, der Hauptverkehrsader des Ruhrgebiets, ein riesiges Volksfest veranstaltet haben.

Die Website der Aktion Still-Leben Ruhrschnellweg bringt es auf den Punkt:

Am 18. Juli 2010 feiern Bürger und Besucher der Metropole Ruhr ein einmaliges Fest der Alltagskulturen; und das mitten auf der Hauptverkehrsader der Region, der A40/B1. Für die Kulturhauptstadt Europas RUHR.2010 entsteht auf einer Strecke von fast 60 Kilometern aus 20.000 Tischen eine Begegnungsstätte der Kulturen, Generationen und Nationen – die längste Tafel der Welt.

Von 11 Uhr bis 17 Uhr wird die gesamte Strecke an diesem Tag in beide Richtungen gesperrt und für Besucher freigegeben. In Fahrtrichtung Duisburg wird die längste Tafel der Welt zur Bühne kultureller Vielfalt der Metropole Ruhr. Auf der Fahrbahn von den Ausfahrten Dortmund, Märkische Straße bis Duisburg-Häfen wird der rund 60 Kilometer lange Tisch aufgebaut. Auf der Gegenrichtung von Duisburg nach Dortmund können alle Interessierten die einmalige Chance nutzen, mit allem was Räder, aber keinen Motor hat, die Autobahn zu befahren.

Das Projekt war eine tolle Idee und die Fahrt über die A40, auf der oder neben der ich schon viele Stunden und Tage meines Lebens verbracht habe, ein unvergessliches Erlebnis. Ich habe einige Fotos gemacht und mit meiner Digitalkamera auch kleinere Videos gedreht. Vielleicht können sie einen Eindruck davon vermitteln, was an diesem Sonntag in der »Metropole Ruhr« so losgewesen ist.

Wart ihr am Sonntag ebenfalls auf der A40 unterwegs? Schreibt mir doch in Kommentaren, was ihr so gemacht habt, welche interessanten Menschen ihr getroffen habt und wie es euch gefallen hat! Ich freue mich auch über Links auf eure Berichte und Fotoseiten!

Am 16. März 2010 stellte Microsoft im Rahmen der hauseigenen Entwicklerkonferenz MIX10 in Las Vegas die erste Vorschauversion des Internet Explorers 9 vor – noch handelt es sich um keinen vollwertigen Browser für Endnutzer, sondern eine »Platform Preview« für Entwickler. Die Software sieht vielversprechend aus und nährt die Hoffnung auf einen standardkonforen, schnellen Browser mit umfangreicher HTML5-, CSS3- und SVG-Unterstützung.

Insbesondere bezogen auf CSS3 hat Microsoft gearbeitet. Die IE 9 Platform Preview versteht mit der Eigenschaft border-radius umzugehen und ermöglicht damit auch im Internet Explorer runde Ecken ohne den Einsatz entsprechender Grafiken. Auch implementiert wurde die Unterstützung der Eigenschaft opacity sowie des RGBA-Farbmodells. Aufgeholt haben die IE-Entwickler auch, was die Unterstützung der CSS3-Selektoren angeht. Den CSS3 Selectors Test durchläuft die IE 9 Platform Preview vollständig.

Es ist Microsofts Ziel, einen Browser zu entwickeln, der vollständig kompatibel zu HTML5 ist. Ob der IE 9 dieser Browser sein wird, bleibt abzuwarten. Die aktuelle Platform Preview zeigt erste gute Ansätze und macht den Weg frei für den Einsatz der HTML5-Sektionselemente header, nav, article, section, aside und footer. Das video-Element unterstützt die Platform Preview allerdings noch nicht, ebenso wenig canvas.

Die IE 9 Platform Preview kann SVG-Dokumente anzeigen oder per object-Element in (X)HTML-Dokumente einbetten und versteht darüber hinaus »Inline-SVG«, also den Einsatz von SVG-Elementen direkt innerhalb von HTML oder XHTML. Einige Demos, die auch einen Eindruck von der Darstellungsgeschwindigkeit des kommenden IE 9 geben, stellt Microsoft auf der Test-Drive-Website bereit und darüber hinaus zahlreiche Tests im Internet Explorer Testing Center.

Der vollständige Artikel hat einen Umfang von drei Seiten und erschien im iX Magazin für professionelle Informationstechnik, Ausgabe 05/2010, S. 68–73.

Zum Seitenanfang

Update 13. Mai 2010

Am 5. Mai hat Microsoft die zweite Platform Preview veröffentlicht. In diesem Zusammenhang ist eine aktualisierte Fassung des Artikels auf heise Developer erschienen.

Anders als die erste Preview kann die zweite Vorschauversion mit CSS3 Media Queries umgehen. Hier zieht Microsoft nach und implementiert eine CSS-Funktion, mit dem aktuelle Versionen der Konkurrenten Firefox, Opera, Safari und Chrome seit einziger Zeit umzugehen wissen. Media Queries beschränken die Einbindung von CSS auf Fälle, die sogenannte »Media Features« bestimmen. Es handelt sich um Ausdrücke, die CSS-Eigenschaften ähneln und die Ausgabe eines Stylesheets oder die Anwendung einer Regel davon abhängig machen, ob das Gerät oder der Browser die Einschränkung erfüllt oder nicht.

Vor einiger Zeit habe ich an dieser Stelle bekannt gegeben, dass ich auf der Suche nach Sponsoren und Werbepartnern bin. Passend dazu, aber nicht aufgrund des Beitrags hat sich ein Partner gemeldet, mit dem ich vor einigen Jahren schon einmal zusammengearbeitet habe: YouCard.

Die YouCard Kartensysteme GmbH ist ein Hersteller von Plastikkarten und RFID-Chipkarten und liefert Lösungen zu deren Bedruckung, Personalisierung und Kodierung. Dabei handelt es sich um Produkte, mit denen wir es täglich zu tun haben. Ich habe eine E-Mail rausgekramt, in der mir der Geschäftsführer von YouCard vor einiger Zeit beschrieben hat, wie häufig wir es mit deren Produkten im Alltag zu tun haben. Es ist interessant, sich das mal vor Augen zu führen.

»Morgens machen YouCard-Plastikkarten dir den Weg als Dauerticket frei für Bus und Bahn. Auf der Arbeitsstätte angekommen, dient dir dein RFID-Mitarbeiterausweis zur Zeiterfassung und regelt die Zutrittsberechtigung auf dem Firmengelände. Anstelle von Name und Passwort kommt die Chipkarte mit deinem Passwort zur sicheren Windows-Authentifizierung an deinem PC zum Einsatz. Zur Mittagspause wird dieser multifunktionale Werksausweis auch für den komfortablen, bargeldlosen Zahlungsverkehr genutzt. Nach der Arbeit schnell noch mal in die Innenstadt shoppen und schöne Nachlässe durch Vorlage der Kundenkarte bekommen. Jetzt schnell wieder mit Bus und Karte heim und umziehen. Das RFID-basierte Dauerticket deines Lieblingsclubs wartet schon, um am Abend Einlass in der Arena zum wichtigen Bundesligaspiel zu haben. Auf der Dauerkarte deines Clubs ist natürlich schon das ›cashless payment‹ installiert, damit beim Kauf von Stadionwurst und Cola keine langen Warteschlangen entstehen. Mit YouCard hast du gute Karten!«

Ich unterstütze YouCard in Form kleiner Werbeanzeigen in der Seitenspalte, unter anderem auf der Homepage oder der Startseite meiner Einführung in XHTML, CSS und Webdesign. Ich freue mich über die Zusammenarbeit.

Aufwandsschätzung, Ressourcenplanung und darauf basierende Terminpläne sind bei allen Arten von Projekten essenziell für deren Erfolg. Das gilt für die Organisation von Umzügen oder Geburtstagspartys nicht weniger als für Softwareprojekte oder die Erstellung von Websites. Dieser Artikel stellt zwei einfache Hilfsmittel vor, die Schätzer dabei unterstützen, eine hohe Schätzgüte zu erreichen: das Gesetz der großen Zahlen und die Dreipunktschätzung.

Der Artikel erschien in der PHP User, Ausgabe 5, S. 63–68. Eine gekürzte Fassung des Artikels, die Aufwandsschätzung im Rahmen agiler Projekte außen vor lässt, habe ich bereits im Rahmen des des Webkrauts-Adventskalenders 2009 unter dem Titel Hilfsmittel für Aufwandsschätzungen veröffentlicht.

Ich bin auf der Suche nach Sponsoren und Werbepartnern, die bewusst und langfristig Werbung auf meiner Website machen möchten. Aus diesem Grund kommen Google Ads oder durch Dritte vermittelte Textlinks nicht in Frage.

Ich suche zuverlässige Partner, die an einer langfristigen Zusammenarbeit interessiert sind und Werbebanner auf jendryschik.de schalten möchten. Deren Größe und Position können wir individuell verhandeln, das heißt auf welchen Seiten und an welcher Stelle Sie Werbebanner schalten möchten. Dabei ist es möglich, Banner nur auf bestimmten Seiten oder auf jeder Seite dieser Website zu schalten. Denkbar sind Anzeigen in der Haupt- und Seitenspalte sowie in der Fußzeile.

Marktüblich für Websites mit dem weiter unten genannten Besucheraufkommen (ca. 30.000 Besuche und 100.000 Seitenzugriffe im Monat) sind Preise zwischen 25,00 und 100,00 € pro Monat für kleinere Werbeflächen (etwa 125 × 125 Pixel) oder Banner im Footer. Größere Flächen, etwa im Format 250 × 250 Pixel oder 468 × 60 (Full Banner) sind für Preise zwischen 100,00 und 250,00 € im Monat zu haben, abhängig davon, auf wie vielen Seiten der Banner geschaltet werden soll. Bitte verstehen Sie diese Preisspannen als Verhandlungsbasis.

Mit Ihrer Werbung auf jendryschik.de erreichen Sie Webworker mit verschiedenen Schwerpunkten und andere potenzielle Kunden, die sich für aktuelle Webtechnologien und Social Networks interessieren. Sollten Sie Interesse an einem Werbeplatz auf meiner Website haben, dann nehmen Sie Kontakt zu mir auf.

Zum Seitenanfang

Inhalte und Themen

Diese Website gibt es schon seit 1999. Bereits im Jahre 2000 ging die erste Version der Einführung in XHTML, CSS und Webdesign online. Seitdem ist die Website um die Einführung herum stetig gewachsen. Die Einführung selbst ist seit 2006 als Buch auf dem Markt, seit 2008 in der 2. Auflage (576 Seiten). Die für Anfänger geeignete Dokumentation bietet Grundlagenwissen zum Publizieren im WWW sowie eine an den W3C-Standards und der Trennung von Struktur und Layout orientierte Einführung in XHTML und CSS. Die Online-Version umfasst mehr als 80 Webseiten und ziehen den größten Teil der Besucher auf sich.

Die Einführung in XHTML, CSS und Webdesign wird flankiert durch weitere Publikationen und Vorträge und einem Weblog zu den Themen Webstandards, Webentwicklung, Web 2.0 und Web², Social Networking und Projektmanagement. Die Zielgruppe sind Webworker (das heißt Webentwickler, Webdesigner, Projektmanager, Online-Redakteure, Frontend-Entwickler und Informationsarchitekten; vergleiche Webworker-Umfrage 2008), wobei sich der Schwerpunkt der Website in Zukunft weiter Richtung Projektmanagement verschieben wird.

Zum Seitenanfang

Besucherzahlen und Seitenzugriffe

Diese Website ist jedem Webworker ein Begriff; sie ist gut vernetzt, weist eine hohe Anzahl von Backlinks und eine extrem hohe Sichtbarkeit in den wichtigsten Suchmaschinen auf. Laut Seitwert.de, einem Dienst zur Bewertung deutschsprachiger Webseiten, gehört jendryschik.de zu den 1.000 relevantesten Domains Deutschlands.

Ich nutze den Webanalysedienst Google Analytics seitenübergreifend seit September 2009. Der Dienst liefert seitdem zuverlässig Zahlen über die Besucher und deren Nutzung dieser Website. Demnach weist jendryschik.de konstant um die 30.000 Besuche und an die 100.000 Seitenzugriffe pro Monat auf. Etwa 80 % des Besucheraufkommens zieht die Einführung in XHTML, CSS und Webdesign auf sich.

Zum Seitenanfang

Sonstiges

Sie erhalten eine Rechnung per Post und/oder als PDF per E-Mail, auf der die gesetzliche Umsatzsteuer ausgewiesen ist (19%). Rechnungsbeträge werden im voraus fällig.

Alle Werbebanner werden mit rel="nofollow" gekennzeichnet, damit Suchmaschinen die Verlinkung als bezahlte Werbung erkennen. Andernfalls besteht die Gefahr, dass sowohl meine Website als auch ihre »abgestraft« wird, was Auswirkungen auf die Reputation in Suchmaschinen haben kann.

Möchten Sie auf jendryschik.de werben? Dann kontaktieren Sie mich!

Vor meiner derzeitigen Anstellung bei der itemis AG war ich bei der GETIT GmbH in Dortmund beschäftigt, einem E-Business-Dienstleister und Hersteller des Content-Management-Systems onion.net. Ich habe selbst an der Entwicklung von onion.net mitgewirkt und zahlreiche Projekte mit dem System realisiert.

Als ich das Unternehmen verlassen habe, war onion.net nicht viel mehr als ein internes »Dienstleistungstool«, aber mittlerweile hat es sich zu einem eigenständigen Produkt entwickelt. Vor kurzem hat Bernd Burkert, Produktmanager bei GETIT, einige Screencasts bei YouTube eingestellt, die onion.net und die Arbeit mit diesem System zeigen. Allerdings ist YouTube etwas unübersichtlich und die richtige Reihenfolge der Screencasts nicht so ganz offensichtlich. Ich habe mir daher die Mühe gemacht, das Material ein wenig sortiert und kommentiert.

Zum Seitenanfang

Einführung in die Arbeit mit onion.net

Im diesem dreiteiligen Tutorial zeigt Bernd Burkert in wenigen Schritten den Aufbau einer kleinen Zitatsammlung, gibt einen Einblick, wie erfasste Daten über XSL-Transformationen in HTML »übersetzt« werden und wie die Oberfläche des onion.net-Editors und der Erfassungsmasken individualisiert werden kann.

Folge 1: Zitatsammlung erstellen, Informationsmodell festlegen (Teil 1 und Teil 2)

Die erste Folge des Tutorials zeigt den Aufbau einer Zitatsammlung in einem neu installierten onion.net-System. Zunächst werden in der Schemaverwaltung des onion.net-Editors Objekttypen für Zitate und Zitatsammlungen erstellt. Daraus generiert der onion.net-Editor automatisch die Pflegemasken, über die der Redakteur die Zitate erfasst und über Zitatsammlungen zusammenstellt.

An dieser Stelle ist die Einführung in den Richtext-Editor interessant, die einige Möglichkeiten der Inhaltserfassung zeigt. Mir gefällt übrigens nicht, dass Tabellenkopfzellen fett und kursiv markiert und nicht als th ausgezeichnet werden. Möglich ist dies aber, wie man an der Schaltfläche unten rechts erkennen kann.

Folge 2: Zitatsammlung erstellen, Transformationen entwickeln (Teil 1 und Teil 2)

Die zweite Folge führt in XSL-Transformationen mit onion.net ein und zeigt, wie schnell und unkompliziert Entwickler die erfassten Daten als HTML ausgeben können. Dabei wird eine Transformation immer einem Objekttyp zugeordnet. Sie versteht sich als objektorientierte Methode, die Entwickler wie in der Programmierung üblich durch Ableitungen erweitern und Methodensignaturen parametrisieren können.

Folge 3: Zitatsammlung erstellen, Editor individualisieren (Teil 1 und Teil 2)

Die dritte Folge zeigt, wie Administratoren oder Entwickler die Pflege im onion.net-Editor mit wenigen Handgriffen durch lokalisierte Bezeichner, zusätzliche sortierbare Listenansichten und übersichtliche Icons verbessern können. Dieser Schritt erhöht den Komfort bei der Arbeit mit dem onion.net-Editor für Redakteure enorm. Wie Sie den onion.net-Editor in beliebigen weiteren Sprachen lokalisieren können, sehen Sie im Screencast Lokalisierung der Pflegemasken in weiteren Sprachen.

Ein weiterer Screencast zeigt, wie Sie den Richtext-Editor anpassen können.

Zum Seitenanfang

Screencasts für Informationsarchitekten

Neben dem dreiteiligen Tutorial für Webentwickler stellt Burkert zahlreiche weitere Screencasts zur Verfügung. Darunter sind folgende für Informationsarchitekten interessant, die sich tiefer über die Datenmodellierung mit onion.net informieren möchten.

Objektorientierte Erweiterung der Datentypen

Dieser Screencast zeigt, wie Entwickler die in den ersten drei Folgen aufgebaute Zitatsammlung erweitern können. Ein Objekttyp Filmzitat wird hinzugefügt und die Transformationen sowie der Editor angepasst.

Erweiterung des Datenmodells

In diesem Screencast werden Zitate um ein Element für die Erfassung der Zitatquelle erweitert. Die Aktualisierung der Bestandsdaten lässt sich übrigens automatisieren, sodass es bei einer Menge von einigen Hundert Zitaten nicht unbedingt notwendig ist, alle auszuleihen, zu ändern und wieder zurückzugeben.

Der Screencast Datenkonsistenz zeigt darüber hinaus, dass es nicht möglich ist, Objektdefinitionen so zu verändern, dass Bestandsdaten ungültig werden.

Einschränkung simpler Datentypen

Am Beispiel der Zitatverwaltung zeigt dieser Screencast, wie ein Entwickler simple Datentypen einschränkt. Das ist eher eine kurze Einführung in die Möglichkeiten von XML Schema, aber dennoch oder gerade deswegen interessant zu sehen.

Strukturelle Integrität und Kindschemata

Dieser Screencast räumt alle Zweifel beiseite, falls Ihnen noch nicht klar geworden ist, dass onion.net über die Definition von Kindschemata für Ordnung sorgt und der Informationsarchitekt bestimmen kann, welche Objekte unterhalb welcher Objekte liegen können.

Module erstellen und verteilen

Objekttypen, angelegte Daten, Transformationen und Konfigurationen können in ein Modul zusammengefasst, als ZIP-Archiv exportiert und in ein anderes onion.net-Projekt importiert werden. Der Screencast Zukunftsfähigkeit durch XML zeigt ergänzend, wie das Archiv aufgebaut ist und wie Entwickler über diesen Weg onion.net-Daten in andere Systeme importieren können.

Zum Seitenanfang

Screencasts für Redakteure

Die folgenden Screencasts zeigen, wie einfach sich Inhalte über den onion.net-Editor einstellen und bearbeiten lassen. Das einzige Manko hierbei ist der Editor an sich: Er läuft derzeit nur im Internet Explorer! Dass das ein Unding ist, ist den onion.net-Entwicklern schon seit Jahren bewusst. Leider ist noch keine Alternative in Sicht.

Paralleles Arbeiten in mehreren Fenstern

Die Arbeit mit dem onion.net-Editor ist nicht auf ein Fenster beschränkt. Stattdessen können Redakteure beliebig viele Fenster öffnen, parallel arbeiten und Inhalte von einem Fenster ins andere kopieren und verschieben.

Exklusive Bearbeitungssperren

Wenn ein Redakteur Inhalte im onion.net-Editor bearbeiten möchte, muss er das Objekt ausleihen. Dadurch ist es für die Bearbeitung durch andere Redakteure gesperrt, sodass parallele Änderungen sich nicht gegenseitig stören können und nicht derjenige Redakteur »gewinnt«, der zuletzt speichert.

Referenzielle Integrität

Interessant für Redakteure und Informationsarchitekten: onion.net stellt zu jeder Zeit sicher, dass alle Referenzen innerhalb des Systems konsistent sind. Das bedeutet, dass es keine internen toten Links auf einer mit onion.net erstellten Website geben kann, und darüber hinaus, dass Webentwickler sich darauf verlassen können, dass Objekte, auf die sie sich in ihren Transformationsmethoden beziehen, auch tatsächlich vorhanden sind.

Volltext- und Metadatensuche

onion.net unterstützt Redakteure durch eine leistungsfähige Suche, die sie unter anderem auf Pfade (wo soll gesucht werden), Objekttypen (was soll gesucht werden), Status, Bearbeiter, Ersteller und Zeiträume einschränken können.

Metadaten und Versionierung

Jede Änderung an einem Objekt wird in der Versionshistorie archiviert und kann von dort wieder hergestellt werden. Darüber hinaus werden strukturelle Änderungen protokolliert.

Papierkorb

Der Papierkorb des onion.net-Editors ist ein durchsuchbares Archiv, in dem Löschvorgänge aller Redakteure protokolliert werden. Gelöschte Objekte können wiederhergestellt werden.

Zum Seitenanfang

Weitere Screencasts

Die übrigens Screencasts geben einen Überblick über die Benutzer- und Rechtverwaltung, den Imageserver und die SharePoint-Einbindung, mit der ich allerdings noch nicht gearbeitet habe.

Benutzer- und Rechtverwaltung

Das onion.net-Rechtemanagement ist gruppenbasiert. Der Benutzerverwalter definiert Gruppen, die typische Aufgabenstellungen des Systems widerspiegeln. Die Rechte legt er für die Gruppen fest. Anschließend weißt er Benutzern eine oder mehrere Gruppen zu. Welche Objekte ein Benutzer sehen, anlegen, bearbeiten oder löschen darf, ist abhängig von den Rechten, die er aufgrund seiner Gruppenzugehörigkeit besitzt.

Bilder mit dem onion.net-Imageserver vereinheitlichen

Es ist ein typisches Problem auf den meisten Webseiten, Bildgrößen und -formate konsistent zu halten. onion.net bietet mit dem Imageserver ein optionales Modul, mit dem Entwickler Bilder skalieren, bearbeiten und manipulieren können.

Integration von Microsoft SharePoint: CMS Inhalte in Web Parts anbieten und SharePoint-Inhalte im CMS verwenden

SharePoint ist ein Webportal mit Microsoft Office SharePoint Server als Portal und Windows SharePoint Services als Informationsspeicher bzw. Repository. Diese Screencasts zeigen, wie onion.net-Inhalte für die Nutzung in Microsoft SharePoint als Web Parts bereitgestellt werden und wie Inhalte aus SharePoint mit onion.net verwendet werden können.

Auf der onion.net-Website gibt es übrigens noch weitere Videos, die zum Teil wirklich beeindruckend sind. Das Video zu InSite Editing gehört in diese Kategorie: Es zeigt, wie das Farbschema einer Website aus den Farben des Logos abgeleitet werden kann, und darüber hinaus weitere Funktionen des ImageServers. Das ist sehenswert!

Zum Seitenanfang

Hinweis in eigener Sache

Wenn Sie sich die Screencasts angeschaut haben und onion.net für Ihre eigene Website interessant finden, dann gestatten Sie mir bitte einen Hinweis: Seit einiger Zeit wenden wir bei der itemis AG unsere Vorgehensmodelle auch auf die Entwicklung von webbasierten Portalen an. onion.net kann dabei Teil der Werkzeugkette sein. Oder wir setzen Websites komplett mit onion.net um wie beispielsweise unser eigenes Corporate Portal. Wir bieten Ihnen einen Einsteiger-Workshop für modellbasierte Portale an und geben Ihnen die Möglichkeit, die Vorteile in der Praxis zu testen. Wenn Sie mehr erfahren möchten, dann nehmen Sie Kontakt zu mir auf.

Artikel lesen: Warum jedes Unternehmen seine Online-Reputation stärken sollte

Den Artikel können Sie hier kommentieren.

itemis gibt seinen Mitarbeitern einen Freiraum von einem Tag pro Woche für die persönliche Weiterbildung. Vier Tage für das Tages- und Projektgeschäft, ein Tag zur Fortbildung, daher die Bezeichnung »4+1«. Wie der Einzelne seine »freie« Zeit verbringt, ist jedem selbst überlassen, solange es der persönlichen Fortbildung dient und fachlich angemessen ist. Viele meiner Kollegen arbeiten an Open-Source-Projekten, besuchen Sprachkurse und Trainings, halten Vorträge auf Konferenzen oder schreiben Fachartikel und Bücher. Ich nutze das Modell, um an meinen Publikationen zu arbeiten, nicht zuletzt der Einführung in XHTML, CSS und Webdesign. Ich finde es klasse, dass mein Arbeitgeber mir diese Möglichkeiten bietet!

Die CareerIng, eine Zeitschrift für Studenten, Absolventen und »Young Professionals« der Ingenieurwissenschaften, hat in Ausgabe 2/2009 einen zweiseitigen Artikel über das itemis Arbeitszeitmodell »4+1« herausgebracht, in dem ich auch zu Wort komme. Neben mir erzählen zwei weitere Kollegen, was sie im Rahmen von »4+1« tun. Der Artikel ist online zugänglich und beginnt auf Seite 22.

Heute war ich auf der dmexco in Köln, einer Messe und Konferenz rund um das Thema digitales Marketing. Dort konnte ich viel darüber erfahren, welche Mühe verschiedene Unternehmen unterschiedlicher Größe sich geben, um ihre Kunden bei der Stange und bei Laune zu halten, sie zufrieden zu stellen und langfristig an das Unternehmen zu binden.

Genau die gegenteilige Erfahrung machte ich heute bei der Deutschen Bahn. Jeder einzelne Mitarbeiter, mit dem ich heute zu tun hatte, tat alles, um mich zu frustrieren, zu beleidigen, für dumm zu verkaufen oder hinzuhalten.

Gegen 17:15 Uhr standen mein Kollege und ich am Serviceschalter Köln Messe/Deutz und fragten nach Fahrkarten für die nächste Fahrt zum Dortmunder Hauptbahnhof. Der nächste Zug ging schon um 17:24 Uhr, Regionalexpress 29732, Umsteigen in Wuppertal in den Regionalexpress 10429 nach Dortmund. Die Fahrt kostete 16,00 €. Ich fahre nicht häufig Bahn und wenn, dann lange Strecken, bei denen ich mir den Fahrausweis vor Fahrtantritt ausdrucke und vom Zugbegleiter (hieß das nicht mal »Schaffner«?) entwerten lasse. Unsere Fahrkarten mussten wir vor Fahrtbeginn entwerten; leider funktionierte der Automat an der Rolltreppe zu unserem Gleis nicht (vermutlich aufgrund einer Störung), und da der Regionalexpress bereits einfuhr, beeilten wir uns, um schnell zum Gleis zu kommen und die Bahn noch zu erreichen – zwar ohne entwerteten Fahrausweis, aber in der Überzeugung, das im Regionalexpress nachholen zu können.

Dort dauerte es keine fünf Minuten, bis wir einer Zugbegleiterin von unserem Problem berichten und sie baten, die Fahrausweise für uns zu entwerten. Daraufhin erklärte sie, sie könne das Ticket im Zug nicht entwerten, ganz im Gegenteil, wir seien ohne gültigen Fahrausweis als Schwarzfahrer hinzugestiegen und daher müsse sie den Vorfall und unsere Daten aufnehmen. Dazu mussten wir unsere Fahr- und Personalausweise aushändigen. Nach einigen Minuten erklärte sie, dass unsere Angabe, der Fahrkartenentwerter sei defekt, geprüft werden würde und wir zu einem späteren Zeitpunkt noch einmal die Gelegenheit hätten, dazu Stellung zu beziehen. Darüber hinaus bot sie uns an, einer Fahrpreisnacherhebung direkt bei ihr vor Ort nachzukommen, das heißt, die 16,00 € noch einmal zu bezahlen. Dies wollten wir zunächst nicht, denn schließlich hatten wir den Preis bereits bezahlt, aber die Zugbegleiterin versicherte uns, dass die Sache mit der erneuten Zahlung erledigt sei. Die nicht entwerteten Fahrausweise könnten wir entweder bei anderer Gelegenheit verwenden oder im Servicecenter in Dortmund wieder zurück geben und die 16,00 € zurück erhalten. Also zahlen wir den Betrag und erhielten eine Quittung über eine Fahrpreisnacherhebung von 40,00 €, auf der 16,00 € als Teilzahlung und 24,00 € als noch zu zahlender Betrag ausgewiesen waren, zudem ein Stempel der Zugbegleiterin und die handschriftliche Anmerkung »gültig als SFT« (siehe Abbildung 2). Es seien keine Nachforderungen zu erwarten, keine weitere Stellungnahme, kein Schriftverkehr, keine Prüfung der Angelegenheit oder etwas Ähnliches – in einigen Wochen würden wir dies auch schriftlich per Post erhalten.

Abb. 2: Fahrpreisnacherhebung

Im Reisecenter in Dortmund stellte sich die Sache allerdings ganz anderes dar. Dort wurde ich zunächst falsch verstanden und mein »Schönefahrtticket« beschriftet, gestempelt und entwertet (siehe Abbildung 1). Zu spät hatte ich die Gelegenheit, mein Anliegen erneut zu erklären. Daraufhin wurde mir gesagt, dass es nicht möglich sei, mir die 16,00 EUR zurück zu erstatten und das Ticket wieder zurück zu nehmen, denn dabei handele es sich um einen Kulanzfall(!) und die Reisecentermitarbeiter seien nicht befugt, Kulanzfälle zu behandeln. Auch stimme nicht, was die Zugbegleiterin uns erklärt habe: Sie hätte den Fahrschein einfach in der Bahn entwerten können. Die Fahrpreisnacherhebung sei unnötig gewesen, jetzt allerdings nicht mehr rückgängig zu machen. Die einzige Möglichkeit, das Geld zurück zu erhalten, sei es, sich an den Kundendienst zu wenden, zu erreichen unter 01805 996633. Vor Ort könne man nichts für mich machen.

Zurück zuhause habe ich den Kundendienst angerufen. Dort konnte mir allerdings auch nicht sofort geholfen werden. Ich solle den Sachverhalt schriftlich darlegen und per Post zusammen mit den Originaldokumenten der DB Fernverkehr AG zusenden. Zudem sei es – anders als die Zugbegleiterin uns versichert hatte – sehr unwahrscheinlich, dass die Restforderung der DB Vertrieb GmbH bezüglich der Fahrpreisnacherhebung in Höhe von 24,00 € nichtig wäre. Das Gegenteil sei der Fall, es sei damit zu rechnen, dass sowohl mein Kollege als auch ich die Post, die wir in einigen Tagen oder Wochen erhalten würden, keinesfalls ignorieren sollten. Die offenen Forderungen seien aus Sicht der DB Vertrieb GmbH berechtigt und würden eingetrieben werden. Aber ich könne die Sache ja per Telefonat oder schriftlich klären…

Aus diesem Weblog-Eintrag spricht meine tiefste Verärgerung über diesen Vorfall und das absolute Unverständnis über so gegensätzliche Aussagen bei einem eigentlich recht einfachen Sachverhalt. Den Aufwand und die Verärgerung in den letzten Stunden finde ich beträchtlich. Ich frage mich, wie die Bahn mich so als zufriedenen Kunden gewinnen möchte. Als Schwarzfahrer beschuldigt zu werden finde ich erniedrigend; die Aufforderung, den Fall aus Kulanzgründen beim Kundendienst zu schildern, als unverschämt und anmaßend. Einen Dienstleistungsgedanken habe ich heute keine Sekunde empfunden, weder beim schlecht gelaunten Mitarbeiter in Köln-Deutz oder bei der inkompetenten Zugbegleiterin, noch bei den Servicemitarbeitern in Dortmund oder bei der Hotline. Das einzige, was alle Mitarbeiter der Bahn verband, mit denen ich heute zu tun hatte, war die Einstellung, die sie vermittelten: Egal, was aus Ihrem Anliegen wird, bloß weg von mir oder meinem Schalter und bitte kein Stress für mich.

Ich bezweifle nach diesen Erfahrungen, dass ein Brief und die Zusendung der Originaldokumente ausreicht, um die 16,00 € erstattet zu bekommen. Dennoch möchte ich mein Geld erstattet bekommen! Und ich befürchte, dass ich keine Möglichkeit habe, die Zahlung von weiteren 24,00 € an die DB Vertrieb GmbH, die für die Fahrpreisnacherhebungen zuständig ist, zu vermeiden. Mein Kollege hatte mehr Hoffung als ich und alle Dokumente mittlerweile eingesandt. Ich bin gespannt, was aus der Sache wird und werde gegebenenfalls in den Kommentaren zu diesem Artikel darüber berichten.

Vor genau einem Jahr, am 28. August 2008, erreichte mich eine E-Mail des Komponisten Michael Paulus. Die E-Mail enthielt einen Link zu einer Rezension meiner Einführung in XHTML, CSS und Webdesign. Was Paulus dort schreibt, ist sehr reflektiert und bemerkenswert.

Als ich 2006 mit der Entwicklung meiner Site paulus-sound.com begann, war ich ein Anfänger, der nahezu von keiner Technik des Schreibens von Quellcode eine Ahnung hatte. (…) Nahezu jeder riet mir damals dazu, mich auf Programme wie Dreamweaver oder Frontpage zu verlassen und mich nicht auf das zeitraubende Studieren von Quellcode-Schreiben einzulassen. Ich war jedoch stets davon überzeugt, dass nur eine genaue Kontrolle dessen, was mit den Codes geschieht und wie diese umgesetzt werden, ein tiefes Verständnis der Materie ermöglicht.

Es mag völlig konträr klingen, wenn ich erkläre, dass ich trotzdem all diese Technik von XHTML, CSS, ASP und Datenbanken nur als Mittel zum Zweck des Transportierens wichtiger Inhalte ansehe. Aber das ist kein Widerspruch. Erst das Verstehen einer Materie ermöglicht das sattsam bekannte »Loslassen« derselben. Ähnlich verhält es sich beim Komponieren: Wenn Kompositionstechniken nur mehr Mittel zum Zweck sind, kann sich der kompositorische Gedanke von allen technischen Einschränkungen befreit zum richtigen Zeitpunkt der passenden Kompositionstechnik bedienen.

Die Parallele, die Paulus zwischen dem Entwickeln von Websites und dem Komponieren von Musikstücken zieht, finde ich faszinierend. Komponieren ist eine anspruchsvolle Tätigkeit, die eine fachliche Ausbildung erfordert und umso besser gelingt, je talentierter und fantasievoller der Komponist seiner Arbeit und Kunst nachgehen kann. Ebenso ist Webdesign Kunst und Arbeit zugleich, Programmieren eine anspruchsvolle Tätigkeit, die gelernt werden muss, auch Frontend-Entwicklung ist nicht einfach. So wie jeder, der sich an ein Klavier setzt, von sich behaupten kann, Musik zu komponieren, sobald er drei harmonische Töne hervorgebracht hat, kann sich jeder als Webdesigner begreifen, der mit Homepage-Baukästen und grafischen Editoren Webseiten zusammenklickt. In beiden Fällen entsteht das Werk direkt am werdenden Objekt, doch es bleibt flüchtig, ohne Konzept, die Qualität fraglich.

Nur bei Musikern, die ihr Handwerk und ihre Kunst verstehen, kann »sich der kompositorische Gedanke von allen technischen Einschränkungen befreit zum richtigen Zeitpunkt der passenden Kompositionstechnik bedienen«. Nur Webentwickler, die ihre Werkzeuge, Sprachen und Methoden beherrschen, sind in der Lage, Webseiten zu erzeugen, die den Inhalten, die sie vermitteln sollen, gerecht werden und dabei ansprechend, zugänglich und technisch hochwertig sind.

Ich bin Michael Paulus dankbar dafür, dass er diese Verbindung zwischen Komponieren und Webseiten erstellen erkannt und in Worte gefasst hat.

Klavier zu vier Händen

Es ist mir eine Ehre, dass Michael Paulus mir – wie er schreibt – »als Dank für die große indirekte Hilfe« bei seinen »Websitebemühungen« eine Komposition gewidmet hat: »Zwischentöne Op 26«. Wenn Sie möchten, können Sie sich das Stück anhören. Ich finde es ungewöhnlich und es begeistert mich.

Der Komponist erklärt auf der Seite zum Stück, was das Besondere daran ist:

Diese Komposition für Klavier zu vier Händen ist im Schwierigkeitsgrad als für Menschen unspielbar einzustufen. Sie wurde speziell für Computerflügel geschrieben. Die Entwicklung der zugrundeliegenden Textcodierung erfolgte nach strengen mathematischen Algorithmen. Zu einem atonalen und dennoch harmonischen Fundament tritt eine völlig irregulär scheinende Melodielinie hinzu, welche jedoch einer absoluten mathematischen Logik folgt. Ein perfekt wiedergegebenes Ergebnis bewegt nicht nur intellektuell, sondern auch emotional. Somit wird ein neuerlicher Beweis für Friedrich von Hardenbergs aufgestelltes Postulat erbracht, wonach Musik die höchste Form von Mathematik sei.

Das Stück wurde am 12. Dezember 2008 im Bösendorfer-Saal uraufgeführt und im Rahmen eines Wettbewerbs prämiert.

Maschinen die Bedeutung von Webseiten begreiflich zu machen, ist ein wesentlicher Aspekt des semantischen Webs. Mit dem Resource Description Framework (RDF) hat das Word Wide Web Consortium die Basis für semantische Auszeichnungen geschaffen. Jedoch hat sich RDF als Mittel, das semantische Web zu erschaffen, bislang nicht durchsetzen können. Eine Chance, mehr formale Bedeutung ins Web zu bringen, gibt es für RDFa (RDF – in attributes). Webautoren können mit RDFa semantische Auszeichnungen in »normalen« Webseiten verwenden – vom Datum und Kalenderdaten bis zu den Konventionen von Dublin Core.

Der Artikel erschien im iX Magazin für professionelle Informationstechnik, Ausgabe 09/2009, S. 118–121.

Zum Seitenanfang

Das Manuskript

Addison-Wesley bietet seinen Autoren Formatvorlagen für verschiedenen Programme und Systeme an, mit deren Hilfe sie ihr Buchmanuskript erstellen können. Als ich mit der Arbeit am Manuskript der ersten Auflage begann, hatte ich mich für eine Formatvorlage für Microsoft Word entschieden. Es war relativ einfach, die in der Online-Version bereits fertige Einführung in das Manuskript zu kopieren und dort alle notwendigen Änderungen, Ergänzungen und Formatauszeichnungen vorzunehmen. Die zweite Auflage entstand aus demselben Manuskript. Abbildung 1 zeigt einen Ausschnitt daraus: Kapitel 7.2.2 »Hintergrundfarbe: Die Eigenschaft background-color«.

Abb. 1: Manuskript

Zum Seitenanfang

Erster Schritt: HTML-Export und Tidy

Der erste Schritt vom Manuskript zur Website bestand darin, den Inhalt des Manuskripts als XML- oder HTML-Dokument abzuspeichern, um es weiterverarbeiten zu können. Der XML-Output von Microsoft Word 2003 erschien mir zu kompliziert und das Speichern als »Website« oder »Webseite, gefiltert« stellte mich ebenfalls nicht zufrieden. Erfolgversprechender erschien mir der Weg über OpenOffice.org Writer. Der HTML-Export erzeugte eine HTML-Datei von »nur noch« knapp 37.000 Zeilen Quelltext – immerhin besser als 54.000 Zeilen Word-Output. Anschließend ließ ich Tidy über das Manuskript laufen, um einige Formatierungen zu korrigieren und mir die Gewissheit zu verschaffen, es mit zwar fürchterlich schlechtem, aber immerhin formal gültigem HTML zu tun haben. Listing 1 zeigt das Ergebnis des ersten Schritts.

<h3 class="western">7.2.2Hintergrundfarbe: Die Eigenschaft
background-color</h3>
<p class="western"><span id="Rahmen509" dir="ltr" style="position: absolute; top: 0cm; left: 0.25cm; width: 3.5cm; height: 0.37cm; border: none; padding: 0cm; background: #c0c0c0">
</span></p>
<ol start="178">
  <li>
    <span id="Rahmen509" dir="ltr" style="position: absolute; top: 0cm; left: 0.25cm; width: 3.5cm; height: 0.37cm; border: none; padding: 0cm; background: #c0c0c0">
    </span>
    <p align="center" style="background: #c0c0c0; line-height: 0.53cm; page-break-after: avoid">
    <span id="Rahmen509" dir="ltr" style="position: absolute; top: 0cm; left: 0.25cm; width: 3.5cm; height: 0.37cm; border: none; padding: 0cm; background: #c0c0c0">
    <font color="#FFFFFF"><font face="Arial, sans-serif"><font size="1" style="font-size: 8pt"><b>Icon
    INFO</b></font></font></font></span></p>
  </li>
</ol>Die <font color="#800000"><b>Eigenschaft</b></font>
<font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="de-DE"><b>background-color</b></span></font></font></font>
bestimmt die Hintergrundfarbe eines Elements.
<p style="border-top: none; border-bottom: 1.00pt solid #ff0000; border-left: 1.00pt solid #ff0000; border-right: 1.00pt solid #ff0000; padding-top: 0cm; padding-bottom: 0.04cm; padding-left: 0.14cm; padding-right: 0.14cm">
<br/>
<br/></p>
<table width="494" border="1" bordercolor="#000000" cellpadding="7" cellspacing="0">
  <col width="77"/>
  <col width="387"/>
  <tr valign="top">
    <td width="77">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><b>Werte</b></font></p>
    </td>
    <td width="387">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">&lt;Farbe&gt;</span></font></font></font>, <font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">transparent</span></font></font></font>,
      <font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">inherit</span></font></font></font></font></p>
    </td>
  </tr>
  <tr valign="top">
    <td width="77">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><b>Initialwert</b></font></p>
    </td>
    <td width="387">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">transparent</span></font></font></font></font></p>
    </td>
  </tr>
  <tr valign="top">
    <td width="77">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><b>Vererbung</b></font></p>
    </td>
    <td width="387">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt">nein</font></p>
    </td>
  </tr>
  <tr valign="top">
    <td width="77">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><b>Anwendung</b></font></p>
    </td>
    <td width="387">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt">global</font></p>
    </td>
  </tr>
</table>
<p lang="en-GB" class="western"><br/>
<br/></p>
<p lang="en-GB" class="western">Beispiel:</p>
<p lang="" align="left"><font color="#000080"><font face="Courier New, monospace"><font size="2" style="font-size: 9pt"><span lang="en-GB">p.warnung {</span><span lang="en-GB"><br/>
color: red;<br/></span> <font color="#800000"><b><span lang="en-GB">background-color: white;</span></b></font><span lang="en-GB"><br/>
}</span></font></font></font></p>
<p class="western">Das Schlüsselwort <font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">transparent</span></font></font></font> legt
fest, dass ein Element einen transparenten Hintergrund hat,
darunterliegende Farben und Inhalte somit durchscheinen.</p>
<p class="western">Die Eigenschaften <font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">color</span></font></font></font> und
<font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">background-color</span></font></font></font> sollten Sie immer
zusammen angeben. Angenommen, Sie deklarieren für ein
Element eine Hintergrundfarbe, die in Ton und Helligkeit der
Farbe ähnelt, die ein Besucher Ihrer Seite in seinem Browser
für die Vordergrundfarbe eingestellt hat. Der Nutzer
würde dann nichts mehr lesen können. Achten Sie daher
darauf, dass Vorder- und Hintergrundfarben stets ausreichend
kontrastieren.</p>
<p align="left" style="margin-top: 0.71cm; border-top: 1.00pt solid #008080; border-bottom: none; border-left: 1.00pt solid #008080; border-right: 1.00pt solid #008080; padding-top: 0.11cm; padding-bottom: 0cm; padding-left: 0.14cm; padding-right: 0.14cm; page-break-inside: avoid; page-break-after: avoid">
<font color="#008080"><font face="Arial, sans-serif"><font size="4"><b>Browserunterstützung</b></font></font></font></p>
<p class="western">Die Eigenschaft <font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">background-color</span></font></font></font>
wird von allen modernen Browsern unterstützt mit folgender
Einschränkung:</p>
<table width="321" border="1" bordercolor="#000000" cellpadding="7" cellspacing="0">
  <col width="59"/>
  <col width="232"/>
  <tr valign="top">
    <td width="59">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><b>Browser</b></font></p>
    </td>
    <td width="232">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><b>Anmerkung</b></font></p>
    </td>
  </tr>
  <tr valign="top">
    <td width="59">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt"><font color="#808000"><ie6&gt;
      <ie7&gt;</font> </font></p>
    </td>
    <td width="232">
      <p style="margin-top: 0.11cm"><font size="2" style="font-size: 9pt">IE ignoriert bis Version 7 den Wert
      <font color="#800000"><font face="Courier New, monospace"><font size="2"><span lang="">inherit</span></font></font></font>.</font></p>
    </td>
  </tr>
</table>
<p align="left" style="margin-bottom: 0.71cm; border-top: none; border-bottom: 1.00pt solid #008080; border-left: 1.00pt solid #008080; border-right: 1.00pt solid #008080; padding-top: 0cm; padding-bottom: 0.04cm; padding-left: 0.14cm; padding-right: 0.14cm; font-weight: normal; page-break-inside: avoid; page-break-after: auto">
<br/>
<br/></p>

Zum Seitenanfang

Zweiter Schritt: XSL-Transformationen mit onion.net

Im nächsten Schritt habe ich den Quelltext in onion.net, dem Content-Management-System, auf dem der größte Teil der Website läuft, abgespeichert und XSL-Transformationen geschrieben, die den Tidy-Output in mein Ziel-Markup transformieren. Die Transformationsdatei besteht aus einer ganzen Reihe von Templates, vereinfacht gesagt Regeln, die jeweils auf bestimmte Elementtypen angewendet werden und deren Inhalt untersuchen und in die gewünschte Ausgabe umwandeln. Der Grundgedanke dabei ist, typische Auszeichnungen zu erkennen und in das korrekte Markup zu überführen. Auf Abbildung 1 ist zu sehen, dass Quelltexte blau und in der Schrift »Courier New« darstellt werden. Im Tidy-Output wurde daraus ein p-Element mit verschachtelten font-Elementen.

<p lang="" align="left"><font color="#000080"><font face="Courier New, monospace"><font size="2" style="font-size: 9pt"><span lang="en-GB">p.warnung {</span><span lang="en-GB"><br/>
color: red;<br/></span> <font color="#800000"><b><span lang="en-GB">background-color: white;</span></b></font><span lang="en-GB"><br/>
}</span></font></font></font></p>

Anhand dieser Muster konnte ich bestimmte Auszeichnungselemente erkennen – oder vielmehr erahnen – und deren Inhalt in das gewünschte Ziel-Markup einbetten. Listing 2 zeigt einen Ausschnitt der Transformationsdatei, genauer gesagt das Template, das Elemente vom Typ p behandelt. Listing 3 zeigt das Ergebnis der Transformation, das ziemlich nahe am Endergebnis ist.

<xsl:template match="p" mode="output">
  <xsl:choose>
    <!-- Leere Absätze -->
    <xsl:when test="normalize-space(.) = ''"></xsl:when>
    <!-- Marginalien -->
    <xsl:when test="span/font/@face = 'Times Roman, Times New Roman, serif' and span/font/i and span/font/i/b">
      <h3><xsl:value-of select="normalize-space(.)" /></h3>
      <xsl:value-of select="'&#10;'" />
    </xsl:when>
    <!-- Listings -->
    <xsl:when test="font/@color = '#000080' and font/font/@face = 'Courier New, monospace' and font/font/font/@size = '2' and font/font/font/@style = 'font-size: 9pt'">
      <div class="code brush">
        <pre class="brush:xml;"><xsl:value-of select="." /></pre>
        <div class="caption">TODO</div>
      </div>
    </xsl:when>
    <xsl:otherwise>
      <p><xsl:apply-templates mode="output" /></p>
      <xsl:value-of select="'&#10;'" />
    </xsl:otherwise>
  </xsl:choose>
  <xsl:value-of select="'&#10;'" />
</xsl:template>

<h2 id="">7.2.2Hintergrundfarbe: Die Eigenschaft
background-color</h2>
<ol>
  <li>
    <p><div class="definition"><p>TODO</p></div></p>
</li>
</ol>
Die <dfn>Eigenschaft</dfn><code>background-color</code>
bestimmt die Hintergrundfarbe eines Elements.
<table class="data">
  <tr>
    <td>Werte</td>
    <td>&lt;Farbe&gt;, transparent, inherit</td>
  </tr>
  <tr>
    <td>Initialwert</td>
    <td>transparent</td>
  </tr>
  <tr>
    <td>Vererbung</td>
    <td>nein</td>
  </tr>
  <tr>
    <td>Anwendung</td>
    <td>global</td>
  </tr>
</table>
<p>Beispiel:</p>
<div class="code brush"><pre class="brush:xml;">p.warnung {
color: red;background-color: white;
}</pre><div class="caption">TODO</div></div>
<p>Das Schlüsselwort <code>transparent</code> legt
fest, dass ein Element einen transparenten Hintergrund hat,
darunterliegende Farben und Inhalte somit durchscheinen.</p>
<p>Die Eigenschaften <code>color</code> und
<code>background-color</code> sollten Sie immer
zusammen angeben. Angenommen, Sie deklarieren für ein
Element eine Hintergrundfarbe, die in Ton und Helligkeit der
Farbe ähnelt, die ein Besucher Ihrer Seite in seinem Browser
für die Vordergrundfarbe eingestellt hat. Der Nutzer
würde dann nichts mehr lesen können. Achten Sie daher
darauf, dass Vorder- und Hintergrundfarben stets ausreichend
kontrastieren.</p>
<p>Browserunterstützung</p>
<p>Die Eigenschaft <code>background-color</code>
wird von allen modernen Browsern unterstützt mit folgender
Einschränkung:</p>
<table id="tab" class="data">
  <tr>
    <td>Browser</td>
    <td>Anmerkung</td>
  </tr>
  <tr>
    <td><ie6&gt; <ie7&gt;</td>
    <td>IE ignoriert bis Version 7 den Wert inherit.</td>
  </tr>
</table>

Zum Seitenanfang

Schritt 4: Manuelle Korrekturen

Im letzten Schritt folgte nun die Arbeit, die mich am meisten Zeit gekostet hat: die letzten Korrekturen und Ergänzungen. Ich musste IDs und Klassen hinzufügen, redundante Elemente entfernen, Auszeichnungen hinzufügen, die bei den Transformationen (oder schon beim Abspeichern des Manuskripts als HTML) verloren gegangen sind, einige Formatierungen korrigieren, Elemente hinzufügen, Links und Abbildungen einbauen. Einiges davon ging per Suchen-und-Ersetzen, das meiste jedoch nicht. Listing 4 zeigt das Ergebnis dieser Handarbeit.

<h2 id="background-color">Hintergrundfarbe: Die Eigenschaft background-color</h2>
<p class="definition">Die <dfn>Eigenschaft <code>background-color</code></dfn> bestimmt die Hintergrundfarbe eines Elements.</p>
<table class="data">
  <tr>
    <th>Werte</th>
    <td><a href="http://jendryschik.de/wsdev/einfuehrung/eigenschaften/#farbe">&lt;Farbe&gt;</a>, <code>transparent</code>, <a href="http://jendryschik.de/wsdev/einfuehrung/eigenschaften/#inherit">inherit</a></td>
  </tr>
  <tr>
    <th>Initialwert</th>
    <td><code>transparent</code></td>
  </tr>
  <tr>
    <th>Vererbung</th>
    <td>nein</td>
  </tr>
  <tr>
    <th>Anwendung</th>
    <td>global</td>
  </tr>
</table>
<p>Beispiel:</p>
<div class="code brush">
  <pre class="brush:css;">p.warnung {
  color: red;
  background-color: white;
}</pre>
</div>
<p>Das Schlüsselwort <code>transparent</code> legt fest, dass ein Element einen transparenten Hintergrund hat, darunterliegende Farben und Inhalte somit durchscheinen.</p><p>Die Eigenschaften <code>color</code> und <code>background-color</code> sollten Sie immer zusammen angeben. Angenommen, Sie deklarieren für ein Element eine Hintergrundfarbe, die in Ton und Helligkeit der Farbe ähnelt, die ein Besucher Ihrer Seite in seinem Browser für die Vordergrundfarbe eingestellt hat. Der Nutzer würde dann nichts mehr lesen können. Achten Sie daher darauf, dass Vorder- und Hintergrundfarben stets ausreichend kontrastieren.</p>
<div class="browser">
  <h3>Browserunterstützung</h3>
  <p>Die Eigenschaft <code>background-color</code> wird von allen modernen Browsern unterstützt mit folgender Einschränkung:</p>
  <dl class="browser">
    <dt class="ie7">Internet Explorer 6 und 7</dt>
    <dd>IE ignoriert bis Version 7 den Wert <code>inherit</code>.</dd>
  </dl>
</div>
<p class="top"><a href="#top">Zum Seitenanfang</a></p>

Ich bin mir ziemlich sicher, dass der Weg, den ich eingeschlagen habe, um mein Buch online zu bringen, nicht der beste gewesen ist – dafür dauerten die manuellen Korrekturen im letzten Schritt einfach zu lange. Hätte ich den Aufwand richtig eingeschätzt, dann hätte ich vielleicht einen anderen Weg gewählt. Aber welchen? Wer von Ihnen hatte schon die Aufgabe, aus einem aufwändig formatierten Word-Dokument semantische hochwertiges HTML zu erzeugen und wie haben Sie die Aufgabe gelöst?

• Das Kapitel »Textauszeichnung: Die erste Komponente des Webs« enthält einen neuen Abschnitt über Dokumenttyp-Definitionen (DTD). DTDs spielen heute keine große Rolle mehr, aber zu wissen, wie sie aufgebaut sind und funktionieren, erhöht das Verständnis für Auszeichnungssprachen.
• Im Kapitel »Die Sprachen des World Wide Webs« gebe ich einen Ausblick auf XHTML 2.0 und (X)HTML 5. Dieser Abschnitt gehört vermutlich zu den ersten, die ich überarbeiten werde.
• Jens Grochtdreis schreibt über den Sinn und die Realität von Webstandards. Der Abschnitt funktioniert auch ganz für sich, außerhalb des Kontexts der Einführung. Ich würde mich freuen, wenn viele von Ihnen diesen Text lesen und verlinken würden. Ich denke, jeder Webautor sollte ihn kennen und verinnerlicht haben.
• Das Kapitel Typografie war vorher ein eigenständiger Artikel und ist nun Teil des Buches. Gute und vor allem korrekte Typografie sieht nicht nur schön aus, sondern ist auch wichtig für die Verständlichkeit eines Textes. Es ist die Aufgabe jedes Webautors, Inhalte korrekt auszuzeichnen, und das betrifft nicht nur die Markup-, sondern auch die Zeichenebene.
• Es sind einige Browsererweiterungen hinzu gekommen. Das ist auch eines der Kapitel, die ich früher überarbeiten werde als andere.
• Um Anfängern Hilfestellungen an die Hand zu geben, wie sie XHTML-Dokumente und CSS-Stylesheets lesbar und sinnvoll strukturieren, habe ich Abschnitte über XHTML-Formatierungskonventionen und CSS-Coderichtlinien hinzugefügt.
• Das Kapitel »Browserkompatibilität« habe ich stark überarbeitet. Der Internet Explorer 5 spielt keine Rolle mehr, dafür der Internet Explorer 8. Um hasLayout, das proprietäre Konzept, das im Internet Explorer bis Version 7 bestimmt, wie Elemente ihren Inhalt darstellen, bin ich nicht mehr herum gekommen. In einem eigenen Abschnitt stelle ich das Konzept vor in der Hoffnung, es in einer dritten Auflage gegebenenfalls nicht mehr erwähnen zu müssen.
• In der ersten Auflage des Buches gab es ein durchgängiges Beispiel, die Kochbar, die am Ende jedes Kapitels das Erlernte anhand eines konkreten Projekts vertiefte, der Website eines kleinen Restaurants mit Biergarten. Dieses Konzept funktionierte in den XHTML-Kapiteln gut, in den CSS-Kapiteln jedoch überhaupt nicht, da die Reihenfolge der Vorgehensweise nach Eigenschaften der Realität nicht entsprach. Kein Webautor legt zunächst die Farben der gesamten Website fest, anschließend die Schriften, dann die Abstände, Positionierung und so weiter. Statt dessen definieren die meisten Autoren zunächst gewisse Rahmenbedingungen, gestalten das Gesamtkonzept der Website und arbeiten sich anschließend von Seitenelement zu Seitenelement von oben nach unten und links nach rechts durch. Das neue Kapitel Die Kochbar schildert die Vorgehensweise bei der Erstellung einer statischen Website nun aus der Sicht eines echten Projekts – von der Konzeption über das Markup der Startseite und deren Styling bis hin zur Auszeichnung und Gestaltung der einzelnen Unterseiten. Der Lerneffekt dieser praxisorientierten Vorgehensweise ist deutlich höher.
• Zu guter Letzt: Viele der im Buch verstreuten Links stehen nun gesammelt im Literaturverzeichnis. Ich werde in Zukunft eine kommentierte Fassung des derzeit noch an eine Linkwüste erinnernden Verzeichnisses anbieten. Es wird damit eine nützliche Zusammenstellung wichtiger Ressourcen darstellen, die jeder Webautor kennen sollte.

Derzeit ist noch keine dritte Auflage geplant. Dennoch werde ich die Online-Einführung weiter auf dem aktuellen Stand halten und vielleicht noch weiter ausbauen. Ich schreibe derzeit an einem Artikel, in dem ich beschreibe, wie ich aus dem Buchmanuskript die Online-Version erstellt habe. Auch wenn es vielleicht einfachere Wege gäbe, noch einmal möchte ich das nicht machen. Statt dessen soll es anders herum laufen: Wenn es in zwei, drei Jahren eine dritte Auflage geben wird, dann werde ich das Manuskript aus dem Online-Tutorial heraus generieren und nicht umgekehrt.

Ich wünsche viel Spaß beim Lesen meiner Einführung in (X)HTML, CSS und Webdesign. Und auch wenn Sie lieber online lesen: Kaufen Sie das Buch! Es steckt sehr viel Arbeit in diesem Werk. Der Kauf des Buches lohnt sich.

Verbunden mit der Aktualisierung der Einführung ist ein Relaunch der gesamten Website. Dazu in einigen Tagen mehr, wenn ich mit den letzten Arbeiten und Tests fertig bin.

Vor einigen Monaten habe ich einen Ausblick auf die zweite Auflage gegeben und aufgezählt, was ich mir alles vorgenommen hatte. Schauen wir doch mal, was daraus geworden ist:

• Das Buch wird deutlich dicker als die erste Auflage. Wie dick genau, kann ich noch nicht sagen.
• Es wird kein Datenträger beiliegen. Nicht jede Software, die frei erhältlich ist (Browser, Browsererweiterungen, Editoren, Freeware), darf man frei im kommerziellen Rahmen verwenden. Stattdessen hätte ich jedes Mal prüfen müssen, wie die rechtlichen Rahmenbedingungen genau aussehen. Letztendlich hätte ich persönlich für alle Rechtsverletzungen gerade gestanden. Darauf hatte ich keine Lust, und somit hätte sich der Inhalt der CD oder DVD nur auf Listings, die Kochbar-Beispiele und die Abbildungen in Farbe beschränkt; also insgesamt nicht mehr als 60 MB an Daten, die ich im heutigen DSL-Zeitalter besser zum Download anbieten kann. Und seien wir ehrlich: Schenken Sie Buch-CDs wirklich Beachtung?
• Insgesamt enthält das Buch rund 170 Abbildungen.
• Das neue, achte Kapitel »Kochbar« bildet den krönenden Abschluss des Buches. Das Kapitel ist ein echtes Highlight geworden, und ich bin schon sehr auf Ihre Reaktionen gespannt. Auf mehr als 100 Seiten baue ich mit Ihnen zusammen Schritt für Schritt die Website eines kleinen Restaurants auf. Am Umfang der Übung hat sich im Vergleich zur ersten Auflage nichts geändert, aber die Erläuterungen sind wesentlich ausführlicher. Zudem ist das Screendesign neu: Manuela Hoffmann hat ein neues, frisches und luftiges Screendesign entworfen, dessen Umsetzung den Lesern hoffentlich viel Spaß bereiten wird.
• Mit Jens Grochdreis habe ich einen weiteren »Gastautoren« gewinnen können. Er führt kurz in Webstandards ein und erklärt deren Bedeutung.
• An vielen Stellen habe ich kleinere Erweiterungen vorgenommen. Die zweite Auflage enthält einen Abschnitt über Typografie, Erläuterungen von Fehlermeldungen des W3C-Validators, einen Abschnitt über das hasLayout-Konzept des Internet Explorers, Informationen zu CSSDOC und vieles mehr. Zu jeder CSS-Eigenschaft gibt es nun eine Tabelle mit Informationen zu den erlaubten Werten, dem Initialwert sowie Vererbung und Anwendung der Eigenschaft.
• Die erste Auflage ist mittlerweile zwei Jahre alt, daher habe ich für die zweite Auflage zahlreiche Aktualisierungen vorgenommen, vor allem im Browserkapitel und bei den Kompatibilitätstabellen.
• Einiges von dem, was ich angekündigt habe, hat nicht den Weg ins Buch gefunden. Ich gehe ebenso wenig auf Mikroformate ein wie auf Print-Stylesheets. Auch CSS-Layouts sind kein Bestandteil des Buches, jedenfalls nicht mehr, als in der ersten Auflage (aber dafür gibt es auch Dirk Jesses CSS-Layouts). Das sind Dinge, die womöglich in einer dritten Auflage ihren Platz finden werden – mal sehen.

Das Buch erscheint voraussichtlich am 15. Dezember 2008. Es wird – wie die erste Auflage – 39,95 EUR kosten. Allerdings können Sie es auf dieser Website vergünstigt vorbestellen. Dazu in Kürze mehr.

Zusammen mit Nicolai Schwarz, Redaktionsmitglied bei den Webkrauts, organisiere ich den ersten Webmontag Dortmund. Er wird stattfinden am 03. November 2008 ab 19:00 Uhr im Schulungsraum der itemis AG an der B1, Westfalendamm 251, 44141 Dortmund (Google Maps aufrufen). Der Schulungsraum ist übrigens ein echtes Erlebnis: Teil eines alten Herrenhauses, holzvertäfelt, Stuck an den Decken – edel.

Eingeladen sind alle, die sich als Internet- oder Kommunikationsfachleute professionell oder aus Interesse oder Neugierde mit dem Web beschäftigen. Maximal 10-minütige Präsentationen sind möglich; ein Beamer ist vorhanden. Ziel ist die gemeinsame Weiterbildung und das Kennenlernen untereinander, sowohl für neue Kundenbeziehungen als auch für die Jobsuche.

Neben Kurzvorträgen von Nicolai und mir zu den Themen Texte und Mikroformate stehen schon zwei weitere Kurzvorträge fest: Katrin Scheib, Chefin vom Dienst bei DerWesten, wird beschreiben, warum DerWesten twittert; Arne Schulenberg wird etwas zur Produktion des Online-Foto-Comics Union der Helden erzählen. Beides Kurzvorträge, auf die ich mich schon sehr freue.

Alle Informationen zum Webmontag Dortmund finden Sie im Wiki, wo Sie sich auch für den Webmontag anmelden können. Wenn Sie mit dem Begriff »Webmontag« nichts anfangen können, dann werfen Sie bitte einen Blick auf die Seite Über Web Montag.

Seit einigen Tagen ist nun BUTABU am Start, Sylvias »Buchtagebuch«, in dem sie aufschreibt, welches Buch sie gerade liest, warum sie es liest und wie es ihr gefällt. Die Einträge sind kurz und dabei locker und persönlich geschrieben. Ich bin sehr gespannt, wie sich das Blog entwickelt, und wünsche Sylvia, dass es wächst und gedeiht und sie viele Leser findet (im doppelten Sinne).

Schauen Sie doch mal vorbei! Und anders als auf meiner Site können Sie bei Sylvia kommentieren, ohne sich anmelden zu müssen.

In folgender Liste führe ich (unsortiert und unvollständig) auf, was sich in der zweiten Auflage im Vergleich zur ersten Auflage ändern wird.

• Das Buch wird an Umfang zunehmen und etwa 80 bis 100 Seiten dicker werden.
• Dem Buch wird eine CD oder DVD beiliegen, die alle Listings und Beispiele sowie Browser, Werkzeuge und Erweiterungen enthält, die im Buch vorkommen (und rechtlich unbedenklich vervielfältigt und dem Buch beigelegt werden dürfen).
• Es wird viel mehr Abbildungen geben. Meine erste Schätzung hat ergeben, dass etwa 100(!) zusätzliche Abbildungen erstellen möchte und viele der alten Abbildungen aktualisieren muss. Das wird eine ganze Menge Arbeit.
• Ein durchgehendes Beispiel ist zwar ein gute Idee, allerdings funktioniert die Schritt-für-Schritt-Anleitung der Kochbar nicht, zumindest nicht im CSS-Teil. Die im Buch dargestellte Vorgehensweise ist zu weit von der tatsächlichen Methodik eines erfahrenen Webentwicklers entfernt. Ich werde das Kochbar-Beispiel komplett umarbeiten und vor allem stärker zusammenziehen. Ich bin mir noch nicht sicher, ob es zwei Teile geben wird (einen Markup-Teil und einen Styling-Teil) oder ob ich das Beispiel komplett im Rahmen eines eigenen Kapitels darstelle. Das Beispiel erhält einen stärkeren Projektcharakter und somit einen größeren Praxisbezug. Die Kochbar erhält ein Facelifting. Ich habe das Beispiel mittlerweile mehrfach für Schulungen verwendet und kann es einfach nicht mehr sehen.
• Die Tatsache, dass die Kochbar aus den einzelnen Abschnitten herausgezogen wird, führt dazu, dass ich mir zahlreiche neue Beispiele einfallen lassen muss.
• Ich werde einen neuen Abschnitt über Webstandards schreiben, der erklärt, was Webstandards sind und warum sie wichtig sind.
• Den Abschnitt über Browser sowie sämtliche Kompatibilitätstabellen werde ich auf den aktuellen Stand bringen. Der Internet Explorer 5 fliegt komplett raus, da der Browser auf keinem Betriebssystem mehr eine Rolle spielt. IE 6 hingegen bleibt noch drin, der IE 8 kommt neu hinzu. Alle Aussagen im Buch, die die Browserkompatibilität betreffen, das heißt Fehler, ungewöhnliches Verhalten oder Bugs ansprechen, werde ich überprüfen und gegebenenfalls auf den neusten Stand bringen.
• Den Abschnitt über Validatoren werde ich durch ein paar Praxisbeispiele erweitern, typische Fehlermeldungen zeigen und erklären, was sie bedeuten und wie Webautoren die Fehler beheben.
• Es gibt mittlerweile zahlreiche neue, sinnvolle Browsererweiterungen, alle voran Firebug. Den Abschnitt werde ich stark überarbeiten, ein paar mehr Beispiele bringen und zeigen, wie Webautoren mit den Browsererweiterungen umgehen.
• Vielleicht schreibe ich einen eigenen Abschnitt über Mikroformate, mal sehen. Ich glaube, am Ende des XHTML-Teils könnte das ganz gut passen.
• Ich werde CSSDOC vorstellen und im Rahmen aller CSS-Listings konsequent verwenden.
• Im gesamten Buch erwähne ich nicht ein Mal das hasLayout-Konzept des Internet Explorers. Auch wenn hasLayout mit Einführung des IE 8 bald der Vergangenheit angehören wird, ist das Konzept derzeit leider noch sehr gegenwärtig. Ich werde das Versäumnis nachholen und auf diesem Weg erklären, warum der IE sich häufig merkwürdig verhält und wie Webautoren dies umgehen können.
• In diesem Zusammenhang werde ich den Abschnitt über CSS-Filter komplett überarbeiten. Bisher habe ich vermieden, auf Conditional Comments einzugehen, weil ich sie überflüssig finde, werde sie in der zweiten Auflage jedoch kurz erwähnen. Die ganzen Filter für den IE 5 fliegen raus, dafür werde ich über den IE-Tellerrand hinaus blicken und auch auf andere Browser eingehen.
• Ich werde zeigen, wie Webautoren ein Print-Stylesheet erstellen, und vielleicht auch ein Muster-Stylesheet vorstellen und mitliefern.
• Die Darstellung der CSS-Eigenschaften und deren möglicher Werte gefällt mir überhaupt nicht mehr. Ich finde sie auseinandergezogen und unübersichtlich. In der zweiten Auflage werde ich jede Eigenschaft zunächst mittels einer Tabelle vorstellen. Die wird die im Folgenden erläuterten Werte aufführen, den Initialwert, ob Vererbung möglich ist oder nicht und auf welche Elementtypen diese Eigenschaft angewendet werden kann. Dadurch werden die wichtigsten Informationen auf einen Blick sichtbar sein, was den Referenzcharakter des Buches erhöhen wird.
• Ich werde Beispiele für CSS-Layouts bringen und etwas mehr auf YAML eingehen. Derzeit werden meine Leser zu sehr allein gelassen, wenn es darum geht, im Anschluss an die Lektüre des Buches mit der Umsetzung eines konkreten Designs anzufangen. Ein paar Grundlagen zur Erstellung mehrspaltiger Designs werde ich meinen Lesern mitgeben.
• Ich habe mir schon seit einiger Zeit vorgenommen, mein Glossar zu modernisieren. Ich werde es um viele Begriffe erweitern, die im Web 2.0 eine Rolle spielen.

Sie sehen, ich habe mir einiges vorgenommen, damit die zweite Auflage des Buches ebenso erfolgreich wird wie die erste. Falls Sie Anmerkungen zu den Änderungen haben oder die Liste ergänzen möchte, dann freue ich mich auf Ihren Kommentar.

»GoodGaze sagt voraus, worauf Menschen bei Ihren Websites achten werden. Vom ersten Entwurf an. Von jedem Computer. In wenigen Sekunden.«

Derzeit läuft GoodGaze in einer geschlossenen Betaphase, an der nur derjenige als Tester teilnehmen darf, der dafür 150,00 EUR berappt –an anderer Stelle wurde dieses merkwürdige Gebahren bereits an den Pranger gestellt. Wer, wie ich, eine freundliche E-Mail an service@goodgaze.de schreibt und um die Prüfung einer oder mehrerer Websites bitte, der bekommt zumindest einen kleinen Einblick gratis.

Abb. 1: Aufmerksamkeitskarte

Abb. 2: Wahrnehmungskarte

Abbildung 1 zeigt die generierte Aufmerksamkeitskarte, auf der zu erkennen ist, welche Bereiche der Seite am aufmersamkeitsstärksten (rot gefärbt) bzw. -schwächsten (blau gefärbt) sind. Auf Abbildung 2 sehen Sie die Wahrnehmungskarte, die visualisiert, welche Bereiche ein Nutzer innerhalb der ersten Sekunde wahrnimmt; je dunkler der Bereich, desto wahrscheinlicher, dass Nutzer die dort befindlichen Inhalte übersehen.

Ich muss gestehen, dass die Grafiken beeindruckend aussehen. Aber ich frage mal in die Runde: Überraschen die Ergebnisse irgend jemanden? Ich habe das Gefühl, genau das zu sehen, was ich erwartet habe (was natürlich für das Analysewerkzeug sprechen könnte).

Die aufälligsten Elemente meiner Startseite sind die Illustration des Teasers auf meine Einführung sowie der rote Bereich rechts in der Seitenleiste, in dem üblicherweise die Zusammenfassungen stehen. Auch Icons fallen GoodGaze sehr »ins Auge«, vielleicht etwas mehr, als ich es erwartet hätte. Überschriften gehen ein wenig unter, aber um dies zu beurteilen, müsste man sich weitere Ergebnisse anschauen, auch von Unterseiten. Neben Weißräumen (leeren Flächen) fallen Fließtexte am wenigsten ins Auge. Nun, wir wissen ja alle, dass im Web niemand wirklich etwas ließt.

Ich habe ebenfalls nach einer Analyse meiner Mikroformate-Website gebeten, aber noch keine Antwort erhalten. Vielleicht gibt es ja pro Person nur einen Test gratis?

In diesem Zusammenhang möchte ich übrigens auf den kostenlosen Service Feng-GUI aufmerksam machen, der Ergebnisse eines Eye-Tracking-Tests simuliert. Die Ergebnisse kommen mir weder besser, noch schlechter vor als die von GoodGaze, wenngleich ich sagen muss, dass die Grafiken, die GoodGaze produziert, besser aussehen.

Von Dortmund aus ist es nicht weit zum Wissenschaftspark Gelsenkirchen, in dessen reizvollen Räumlichkeiten die Tagung stattfand. Etwa gegen 9:00 Uhr stand ich an der Anmeldung, um 11:00 Uhr sollte mein Workshop stattfinden, und die Zeit dazwischen verging wie im Flug.

Dem lockeren und lustigen ersten Webkrauts-Klassentreffen des Tages (unter anderem mit Jens Grochtdreis, Nicolai Schwarz, Stefan Nitzsche, Maxx Hilberer, Tomas Caspers, Gerrit van Aaken, Stefan Walter … wer noch?) folgte die steife und trockene Präsentation der Ergebnisse der Studie »Barrierefreiheit im Web 2.0«. Diese gehört zu den schlechtesten Präsentationen, die ich jemals gesehen habe. Sie war

• monoton und langweilig vorgelesen,
• wurde illustriert durch zum Teil überladene Präsentationsfolien, auf denen der Platz für die Video-Einblendung der Simultanübersetzung in Gebärdensprache nicht freigehalten wurde, sodass diese Teile des Textes und der Diagramme verdeckten, und
• präsentierte leider auch verhältnismäßig unspannende Ergebnisse. Eine der Kernaussagen: Im Vergleich zur Gesamtbevölkerung nutzen Menschen mit Behinderungen das Internet überdurchschnittlich häufig, was daran liegt, dass darüber Nachteile durch die Behinderung kompensiert werden können.

Dann ging es bereits in meinen Workshop: Der Beitrag der Nutzer zur Barrierefreiheit – Wer macht kollaborative Webseiten barrierefrei?.

Abb. 1: Nicole Weißkopf, Maria Krüger und Elke Wetzig (Foto von Christian Schmitz)

Ich neige nicht zu Nervosität, aber etwas unruhig wurde ich schon bei dem Gedanken, jetzt in eine Diskussion zu gehen, deren Verlauf – anders als zum Beispiel bei einer Präsentation, nach der man sich einfach verziehen kann und die im Allgemeinen nicht live in alle Welt übertragen wird – interaktiv und nicht unbedingt vorhersehbar ist. Für die Moderatorin Elke Wetzig und die beiden anderen Experten, Nicole Weißkopf vom deafhood-Blog bei CHIP und Maria Krüger, Vertreterin des BIENE-Projekts in Wikipedia, sind derartige Veranstaltungen auch nicht unbedingt Routine. Dies war wahrscheinlich der Grund dafür, weshalb am Podium so viel Harmonie und Einigkeit herrschte. Oder vielleicht waren wir einfach inhaltlich zu sehr derselben Meinung. Im TV werden Diskussionsrunden häufig mit Absicht heterogen zusammengestellt, sodass die Teilnehmer nach einiger Zeit anfangen, sich zu zerfleischen. Ein wenig mehr Biss hätte dem Workshop sicher auch gut getan. Die Diskussion belebt haben die zahlreichen Wortmeldungen, vor allem von Ansgar Hein, einer Autorität in Sachen Barrierefreiheit, und Christian Heilmann, Best Practice Evangelist bei Yahoo, Universalgenie und Charismatiker.

Ich möchte folgende Ergebnisse des Workshops festhalten:

• Barrierefreiheit muss als Qualitätsmerkmal gelten.
• Barrierefreiheit muss Spaß machen, »sexy sein«, nur dann ist Barrierefreiheit auch attraktiv.
• Barrierefreiheit ist zwar das Ziel, der Weg dort hin muss jedoch pragmatisch und in kleinen Schritten erfolgen. Beispiel: Leichte Sprache wird sich auf Websites wohl eher nicht durchsetzen, aber von vereinfachter Sprache (kürzere Sätze, weniger Fremd- und Fachwörter, aktive Formulierungen, …) profitieren alle Nutzer.
• Barrierefreiheit kann es nur dann geben, wenn Webentwickler, Autoren und Redakteure mit Behinderten zusammenarbeiten und umgekehrt. Niemand schafft absichtlich Barrieren. Häufig ist es die Unwissenheit der beteiligten Personen, die zu Barrieren führt. Behinderte sollten es folglich melden (können), wenn sie auf Probleme stoßen.

Robert Lender hat den Workshop in einem Blog-Eintrag inhaltlich zusammengefasst. Auch Elke hat den Workshop aus ihrer Sicht beschrieben: Wer macht kollaborative Mitmach-Websites barrierefrei?

Abb. 2: Kamerateams, Simultanübersetzer und zahlreiche Assistenten prägten das Bild der Tagung. (Foto von Tomas Caspers)

Nach dem köstlichen Mittagessen (überhaupt war die Verpflegung an diesem Tag exzellent) ging es in den zweiten Workshop: Zukunft des Barrierefreien Internets – Was erwarten und erwartet Nutzer mit Behinderung im Web?. Ich persönlich fand die Diskussionen uninteressant und den Moderator erstaunlich inkompetent, vor allem fachlich, aber er hat die Diskussion auch nicht gut geleitet. Dennoch hat sich der Besuch des Workshops gelohnt: Christian Heilmann war einer der Experten und hat die Diskussion fachlich bereichert und sorgte auch mit der einen oder anderen lockeren Bemerkung für Heiterkeit im Saal. Ich saß mit Jens Grochtdreis und Eric Eggert im Publikum und habe mich gut unterhalten und ausnahmsweise mal schlank gefühlt.

Anschließend folgte der Startschuss zum Biene-Wettbewerb 2008. Im letzten Jahr wurde die Vergabe der Biene ausgesetzt, um Studie durchzuführen, deren bereits erwähnte Ergebnisse in den Anforderungskatalog der aktuellen Wettbewerbs eingeflossen sind. Die Präsentation war ebenfalls schlecht und zog sich angesichts der zurückliegenden Workshops und der Aussicht auf das abschließende Pils sehr zäh dahin, allerdings hat er mich sehr motiviert, an dem Wettbewerb teilzunehmen. Teilnahmeschluss ist der 15. Juli 2008, und vielleicht schaffe ich es ja, den Relaunch der itemis AG bis dahin fertigzustellen.

Den Abschluss des Tages bildeten sehr nette Gesprächsrunden, dann ging es nach Hause. Den Rest können Sie bei Twitter nachlesen.

Hier finden Sie weitere Berichte verlinkt. Darüber hinaus gibt es bei Flickr zahlreiche Fotos unter dem Stichwort efatagung.

Unter dem Titel Konzepte und Zukunfts­bilder für ein Barriere­freies Internet kommen am 6. Mai 2008 rund 300 Experten und Ent­scheider aus Behörden, Unter­nehmen, Politik, Wissen­schaft und Medien in Gelsen­kirchen zusammen, um über aktuelle und zukünftige Ent­wicklungen im und durch das Web zu diskutieren. Nach einer Präsentation der Ergebnisse der ersten Studie zur Nutzung des Web 2.0 durch Menschen mit Behinderungen, an der mehr als 600 Nutzer teilgenommen haben, folgt das Tagungsprogramm mit insgesamt 16 zweistündigen Workshops, unterteilt in die Kategorien Gesellschaft, Wirtschaft, Technik und Design. Jeder Workshop wird moderiert und von drei Experten begleitet, die zu Beginn des Workshops jeweils drei Thesen vorstellen, die die Basis sein können für die anschließende Diskussion. Beteiligen können sich nicht nur Anwesende, sondern alle interessierten Personen per Chat oder E-Mail; alle Workshops werden live ins Internet übertragen.

Ich habe mich davon überzeugen lassen, einer dieser Experten zu sein. Aufs Auge gedrückt bekommen habe ich Workshop 5 um 11.00 Uhr: Der Beitrag der Nutzer zur Barrierefreiheit – Wer macht kollaborative Webseiten barrierefrei?

Das Thema erfordert von mir einige Vorbereitung, da ich mit der Erstellung von kollaborativen Websites wenig Erfahrung habe, dennoch freue mich mich schon auf die Diskussion, zu der ich vielleicht etwas beitragen, bei der ich aber sicher eine ganze Menge lernen kann. Falls Sie das Thema interessiert, dann diskutieren Sie doch mit! Leider nehmen die Veranstalter keine Anmeldungen mehr entgegen. Sollten Sie sich bereits angemeldet haben, dann würde ich mich freuen, Sie im Workshop zu sehen, ansonsten nehmen Sie einfach per Internet an der Diskussion teil, wenn Sie möchten.

Seit einigen Tagen sind für mich neue Zeiten angebrochen: Nach mehr als zwei tollen Jahren bei der GETIT GmbH, zunächst als Webentwickler, später als Projektleiter und Leiter des Onion-Teams, wechsle ich zur itemis AG!

Die itemis AG und GETIT spielen in einer ähnlichen Liga, aber es handelt sich eigentlich um vollkommen andere Sportarten. Mein neuer Arbeitgeber beschreibt sich auf seiner Startseite derzeit noch wie folgt:

Die itemis AG entwickelt leistungsfähige Softwarelösungen und berät in allen Fragen der Informationstechnologie. Die Schwerpunkte liegen im Bereich der modellgetriebenen Entwicklung (MDSD) sowie in der Bereitstellung von Werkzeugen für die Implementierung von Embedded Systems.

Wer mich kennt und meine Website hin und wieder mal besucht, wird vermutlich ebenso wenig wie ich verstehen, wovon in diesem Abschnitt die Rede ist. Software-Entwicklung sowie Planung, Realisierung und Einführung von Business-Lösungen auf einem derart hohen Niveau, wie es meine neuen Kollegen leisten, werde ich niemals beherrschen. Gott sei Dank muss ich das auch nicht. Statt dessen darf ich mich glücklich schätzen, bei der itemis AG einen neuen Geschäftsbereich leiten zu dürfen: Webentwicklung.

Zu meinen ersten Aufgaben wird es gehören, die »Internet-Sphäre« der itemis AG, zu der auch die Websites openArchitectureWare und YAKINDU sowie ein Weblog gehören, auf Vordermann zu bringen. Mittelfristig werde ich um mich herum ein Team aufbauen, das fähig ist, Web-Projekte auch für unsere Kunden zu realisieren.

Ich freue mich auf die neuen, erweiterten Aufgabenfelder und werde hier oder an anderer Stelle hin und wieder mal berichten, wie sich mein neuer Bereich so entwickelt.

Am vergangenen Wochenende fand das BarCampRuhr im Unperfekthaus in Essen statt – ein für diesen Zweck perfekter Veranstaltungsort. Leider lief die Veranstaltung mehr oder weniger an mir vorbei. Ich konnte weder an der WarmUp-Party am Freitag, noch am BarCamp am Samstag teilnehmen. Viele Gelegenheiten, andere Webworker kennenzulernen oder bestehende Kontakte zu vertiefen, blieben da leider nicht. Dabei sein konnte ich nur am Sonntag, und auch an diesem Tag musste ich überraschend bereits nach 16:00 Uhr aufbrechen. Zumindest mit den Webkrauts Ansgar Hein und Stefan Nitzsche konnte ich einige Worte wechseln. Nicolai Schwarz, mit dem ich ursprünglich zusammen zum Barcamp fahren wollte, habe ich nur kurz bei seiner Session gesehen – schade. Ich hoffe, es ergibt sich in Zukunft mal wieder die Gelegenheit, sich etwas besser kennen zu lernen.

Falls Sie wie ich mal zu einem BarCamp fahren, aber keine Session halten möchten: Vergessen Sie’s! Sie werden feststellen, dass Sie die ganze Zeit über das Gefühl haben, irgendwie nicht richtig dazu zu gehören. Niemand erwartet eine umfangreiche Präsentation oder tagelange Vorbereitung auf den einen großen Moment, an dem alles perfekt sein muss. Nein, ganz im Gegenteil, ein BarCamp lebt von seiner Spontaneität und der Bereitschaft seiner Teilnehmer, lebhaft über alles zu diskutieren, was im weitesten Sinne mit dem Web zu tun hat.

• Sie haben eine Idee zu einer Online-Community zu irgendeinem Thema? Stellen Sie sie vor!
• Sie haben ein Werkzeug entwickelt, von dem Sie glauben, dass es der Gemeinschaft weiterhilft? Zeigen Sie es!
• Sie haben sich in ein bestimmtes Thema hineingearbeitet, das auch für andere interessant sein könnte? Lassen Sie alle an Ihrem Wissen teilhaben!
• Sie möchten einfach mit Gleichgesinnten über ein Thema diskutieren, das Ihnen am Herzen liegt? Laden Sie einfach zu einem offenen Gespräch ein! Es werden sich Interessierte finden.

Ich konnte am Sonntag die Sessions von den bereits erwähnten Webkrauts Ansgar Hein, Nicolai Schwarz und Stefan Nitzsche besuchen.

Ansgar stellte Dirk Jesses CSS-Framework YAML zunächst in der Theorie und anschließend im Kontext eigener Projekte vor. Ansgar ist Geschäftsführer der Agentur anatom5, Experte für barrierefreies Webdesign und darüber hinaus ein ungemein sympathischer Zeitgenosse. Ansgar hielt seine Session zusammen mit Stefan Nitzsche, und während er vor allem die positiven Seiten des Frameworks in den Vordergrund stellte (»guter Cop«), beschrieb Stefan eher dessen Schwächen (»böser Cop«). Die Session war durchaus unterhaltsam; ich habe zwar nichts Neues über YAML gelernt, dafür aber einiges darüber, was Ansgar den ganzen Tag so treibt und wie man Navigationsmenüs barrierefrei aufbauen sollte. (Ansgar, hast du mal irgendwo etwas darüber geschrieben?) Es hat mich überrascht, wie viele Webworker YAML offenbar noch nicht kennen, und wie lebhaft die durch Ansgar und Stefan überzeugend dargestellten Positionen anschließend diskutiert wurden.

Nachmittags war Nicolai mit seiner Session »Der erste Satz« an der Reihe. Nicolai gehört die Agentur textformer Mediendesign. Er kümmert sich am liebsten um das komplette Corporate Design einer kleinen Firma oder eines Vereins und freut sich, wenn er seine journalistische Erfahrung mit einbringen kann. Um diese ging es auch in seiner Session, in der er mit uns zusammen die erste Worte und Sätze von Websites analysierte. Nach einem kurzen theoretischen Einstieg folgten zahlreiche kurzweilige Beispiele. Nicolai analysiert Texte treffend und präzise. Leider ging es in der Session um Corporate Websites, daher wollte ich ihn nicht damit langweilen, meine Homepage zu analysieren. Vermutlich würde er sagen, dass der Begrüßungstext schlecht platziert ist und nicht ausreichend klar macht, worum es hier eigentlich geht.

Die letzte Session, die ich besucht habe, hielt Stefan Nitzsche zum Unterschied zwischen XHTML 2 und (X)HTML 5. Die Session war besser als vieles, was ich in der Vergangenheit gesehen habe, fiel aber im Vergleich zu den beiden vorigen deutlich ab. Das mag daran liegen, dass Stefan sich nicht oder kaum vorbereiten konnte und lediglich Jens Meierts Übersetzung (X)HTML 5 und XHTML 2 im Vergleich vorgetragen hat; er hat die Seite aufgerufen und ist mit uns die Beispiele von oben nach unten durchgegangen. Dabei bin ich mir nicht sicher, ob Stefan Jens überhaupt vorgestellt hat. Ich finde, er hat es sich etwas zu leicht gemacht.

Mein Resümee: Ich werde gewiss wieder an einem BarCamp teilnehmen, dann aber jede Party mitmachen und – vor allem – mindestens eine Session halten.

Auf der Website des BarCampRuhr finden Sie übrigens Links zu zahlreichen weiteren Berichten. Darüber hinaus gibt es viele Fotos auf Flickr.