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!

Webautoren haben verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken, sowohl bei der Einbindung eines Stylesheets als auch für bestimmte Regeln innerhalb des Stylesheets.

Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.

Webautoren können so beispielsweise auf die Breite des Browserfensters reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht. Oder sie können spezielle Stylesheets für die Darstellung auf dem iPhone oder iPad bereit stellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Das Gute daran ist, dass fast alle aktuellen Browser mit CSS Media Queries umgehen können!

Dieser Vortrag, den ich auf dem WordCamp in Berlin gehalten habe, führt ein in die Funktionsweise von CSS Media Queries und zeigt einige Anwendungsbeispiele.

Berlin ist immer eine Reise wert. Ich verbringe jedes Jahr etwa zwei oder drei Wochenenden in der Hauptstadt, manchmal nur als »Tourist«, meistens aber als Besucher von Kongressen oder Konferenzen – so auch dieses Wochenende, an dem im Berliner Betahaus das dritte WordCamp stattfand.

Das letzte WordCamp, damals noch im Intershop-Tower in Jena, habe ich noch als WordPress-Interessierter besucht, der außer seinem eigene Blog keine weiteren Projekte mit WordPress unterhielt. Dazu war WordPress zu unausgereift. Mittlerweile allerdings ist WordPress verdammt gut geworden! Früher habe ich mich gefragt: Kann ich WordPress in diesem Projekt einsetzen? Heute denke ich mir: Gibt es irgendwas, was dagegen sprechen könnte, WordPress in diesem Projekt einzusetzen? Es ist lange her, dass die Antwort »Ja« lautete. WordPress ist erwachsen geworden, ein ernst zu nehmendes Web-Content-Management-System, für das sich eine immer größer werdende Community engangiert, auch oder gerade in Deutschland. Ein Teil dieser Community hat sich am Samstag getroffen, um zusammen eine Unkonferenz mit dem Schwerpunkt WordPress abzuhalten – das WordCamp. Mittlerweile zum dritten Mal, aber zum ersten Mal in Berlin.

Einige der rund 200 Teilnehmer sind bereits am Freitag angereist und hatten am Abend im Brauhaus Mitte am Alexanderplatz bei deftiger Berliner Küche als Grundlage für das leckere, selbstgebraute Bier die Gelegenheit, sich kennen zu lernen. Dieses vorabendliche Treffen gehört mittlerweile zur Tradition des WordCamps. Für alle anderen begann das WordCamp am Samstag ab 08:30 Uhr – um 10:00 Uhr begannen die ersten Sessions.

Zum Seitenanfang

Sessions

Viele Teilnehmer waren mit den angebotenen Sessions nicht zufrieden und beschwerten sich über die geringe Themenvielfalt, das niedrige Niveau oder schlechte Sessions, nachzulesen bei Twitter (#wcb10) oder in einigen Berichten, unter anderem von Thomas Langel oder Kai Thrun.

Ich halte es bei Konferenzen so, dass ich mich im Vorfeld über die Vortragenden informiere – kompetente Leute halten zumeist auch gute Vorträge. Auf diese Weise kann ich ganz gut einschätzen, welche Sessions sich lohnen könnten und welche nicht. So war das auch beim WordCamp, auf dem – diese Ansicht muss ich leider teilen – die Auswahl an interessanten Sessions leider eher »übersichtlich« war.

Ich habe die folgenden Session besucht.

Performance-Optimierung von (WordPress-)Websites

Vladimir Simovic ist aufgrund seiner Bücher, Fachartikel und vor allem seine Website perun.net einer der bekanntesten deutschen WordPress-Experten. Darüber hinaus ist er ein sehr angenehmer, freundlicher und humorvoller Typ, wovon sich jeder bereits in der letzten Technikwürze-Folge überzeugen konnte.

In seiner Session zeigte Vladimir die häufigsten Performance-Bremsen und einfache, aber wirkungsvolle Strategien, sie zu umgehen. Tatsächlich ist alles, was Vladimir zeigte, einfach umzusetzen: Wahl der richtigen Plugins, Optimierung von Grafiken, Reduzierung von HTTP-Requests, Komprimierung und Caching. Nicht viel Neues, aber gut zusammengefasst und kompetent vorgestellt. Danke, Vlad!

Barrierefreiheit in WordPress optimieren

Die WordPress-Entwickler haben schon immer Wert darauf gelegt, aktuelle Standards zu integrieren, semantische Elemente korrekt zu verwenden und aktuelle Trends aufzugreifen. So geht WordPress mit dem neuen Standardtheme TwentyTen die ersten Schritte in Richtung HTML5 und sorgt mit zaghaftem Einsatz von WAI ARIA für ein wenig mehr Barrierefreiheit.

Sylvia Egger warf einen Blick unter die Haube und demonstrierte die Stärken und Schwächen des neuen Standardthemes in Bezug auf Barrierefreiheit. Fazit: Das Theme ist ähnlich wie seine Vorgänger gut, aber noch weit von barrierefrei entfernt. Als Hauptkritikpunkte hängen geblieben sind bei mir vor allem die mangelnden Kontraste, der kaum erkennbare Tastaturfokus und Skiplinks, die für Tastaturnutzer nicht zugänglich sind. Klasse Session, sehr interessant, sehr dynamisch und lebhaft vorgetragen.

WordPress als CMS – aber richtig? Arbeiten in der Cloud

Frank Bültge und Olaf Schmitz, zwei der Organisatoren des WordCamps, plauderten in dieser Session aus dem Nähkästchen. In der als Workshop konzipierten Session erlaubten sie uns einen Einblick in ihre Arbeit mit WordPress, beantworten Fragen und gaben Tipps. Frank hat wie bereits bei Technikwürze seine Skepsis über den Gebrauch von Plugins dargestellt, die häufig zwar die bequemere, aber ich Bezug auf Performance und Sicherheit schlechtere Lösung sind im Vergleich zu eigenen Lösungen mit WordPress-Bordmitteln. An einigen Stellen konnte er anknüpfen an Vladimirs Session vom Vormittag; Performance ist bei WordPress ein großes Thema. Kompliment an Frank und Olaf – eure Kunden sind bei euch kompetenten und professionellen Leuten hervorragend aufgehoben!

WM-Viertelfinale Deutschland gegen Argentinien

Ein Klassiker des Weltfußballs, das Duell der beiden ehemaligen Weltmeister, Deutschlands junges, begeisterndes Team gegen Maradonas Wundersturm – keine Unkonferenz dieser Welt kann interessanter sein als ein solches WM-Viertelfinale! Aus diesem Grund haben die Organisatoren das WordCamp auch geschickt um das Spiel herum geplant. Die Sessions gingen bis 16:00 Uhr und erst nach dem Spiel ging es weiter mit Workshops. In der Zeit dazwischen: Fußball, Bratwurst und Bier im Innenhof des Betahauses. Aufgrund des begeisternden 4:0 die mit Abstand beste Session aller Zeiten, besser noch als die Chatroulette-Session auf dem BarCampRuhr.

Ich habe zudem selbst eine Session über CSS Media Queries gehalten – natürlich vor dem Spiel.

Zum Seitenanfang

Zu wenig Unkonferenz

Das WordCamp war sehr gut organisiert. Es war genügend, aber nicht zu viel Raum vorhanden, es gab Obst, Gebäck, Kaffee, Wasser und Apfelsaftschorle kostenlos und viele weitere Getränke und Snacks gegen Bezahlung an der Bar. Während des WM-Spiels wurde draußen gegrillt. Auch das WLAN hielt, wenngleich es zwischenzeitlich weniger verfügbare IP-Adressen als onlinefähige Geräte im Haus gab.

Betahaus? Höchstens eine frühe Alpha

Dennoch fand ich das WordCamp nicht so gelungen wie das BarCampRuhr in Essen, das ich vor einiger Zeit besucht und über das ich an dieser Stelle berichtet habe. Allerdings lag das nicht an der Organisation und schon gar nicht an den Leuten, eher an der Location. Das Betahaus ist konzeptionell ähnlich offen, liebenswert chaotisch, locker und rustikal wie das Unperfekthaus, aber nun mal weit weniger perfekt für die Durchführung einer Unkonferenz. Das Betahaus strahlt nicht so viel Charme aus; es ist ziemlich abgewrackt; die Räume, in denen die Sessions stattfanden, waren zum großen Teil leer und ungemütlich; die Wege waren zu weit; die Akkustik in einigen Räumen inakzeptabel schlecht. Hinzu kommt, dass die Temperatur fast unerträglich hoch war, aber nun gut, dafür kann niemand etwas.

Warum nicht zwei Tage?

Ich bin ein Freund von mehrtätigen Konferenzen, und ich habe das Gefühl, dass eine Auslegung auf zwei Tage auch diesem WordCamp aus mehreren Gründen gut getan hätte.

Ich habe die Vorstellungsrunde vermisst, die sonst dafür sorgt, dass man einige bekannte Namen direkt zu Beginn der Unkonferenz Gesichtern zuordnen konnte.

Mir fehlte die Sessionplanung, statt dessen konnten im Vorfeld Sessions auf der WordCamp-Website angemeldet werden, und jeder Teilnehmer konnte sein Interesse an der Session dadurch bekannt geben, dass er der entsprechenden Gruppe beigetreten ist – ein umständliches Verfahren, unzuverlässig und zudem überflüssig, wenn man mehr Zeit zur Verfügung hat.

Die angemeldeten Session wurden bereits im Vorfeld auf einem Sessionplan angeordnet, dessen Verbindlichkeit offenbar überschätzt wurde. Anders kann ich mir die vehemente Kritik daran, dass ich meine Session aufgrund mehrfacher Nachfrage von 10:00 Uhr auf 11:00 Uhr verlegt habe, nicht erklären. Wo bleibt das die Spontaneität, die eine Unkonferenz ausmacht?

Zum Seitenanfang

Alte und neue Bekannte

Das dritte WordCamp hatte einige Schwächen, aber hey, es war eine Unkonferenz mit interessanten Leuten zu einem spannenden Thema! Wer lieber meckern möchte, kann es vielleicht auch einfach so sehen: Ihr habt 10,00 € bezahlt, dafür gab es ein T-Shirt, eine Tragetasche, Möhren, Obst, Gebäck, Brezeln und Eis … und doch sicher das eine oder andere gute Gespräch, diese oder jene gute Session.

Unkonferenzen empfinde ich stets als inspirierend und motivierend, und das war dieses Mal nicht anderes. Das lag daran, dass ein Element einer jeden Konferenz auch beim WordCamp nicht zu kurz kam: das »Networking«. Neben Vladimir habe ich auch Thomas Scholz erstmalig persönlich getroffen, was wirklich bemerkenswert kurios ist, da wir schon vor einigen Jahren zusammen an einem Projekt gearbeitet haben und Thomas einige Texte zu meiner Einführung in XHTML, CSS und Webdesign beigesteuert hat. Gefreut habe ich nicht auch, Jens Grochtdreis und Dirk Jesse mal wieder zu sehen. Das gilt auch für Frank Bültge und Michael Preuß, dessen Session über sein kommerzielles WordPress-Framework »Xtreme One« ich leider verpasst habe. Mit Christoph Bach habe ich das 2:0, 3:0 und 4.0 der deutschen Mannschaft bejubelt.

(Foto von Karsten Kneese)

Ich freue mich, nach längerer Zeit mal wieder einen Gastartikel präsentieren zu dürfen. Christian Arno, Geschäftsführer des Übersetzungsbüros Lingo24, schreibt darüber, was notwendig ist, um eine Website so zu gestalten und zu entwickeln, dass sie auf die Erfordernisse jeder Sprache und Kultur zugeschnitten werden kann und so Ihr Online-Publikum theoretisch auf jeden einzelnen Internetnutzer der Welt ausweitet.

Seine Kernaussagen: Machen Sie sich Gedanken über die Zielgruppe, setzen Sie auf flexibles Design und die richtigen Tools, achten Sie auf eine professionelle Übersetzung und gute SEO-Planung.

Artikel lesen: Tipps zum Anpassen von Websites an Auslandsmärkte

Den Artikel können Sie hier kommentieren.

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.

In der Praxis ist häufig am Arbeitsumfang und Zeitrahmen eines Projekts nicht zu rütteln. Den Entwicklern bleibt daher weniger Zeit, als sie eigentlich benötigen, um alle Aufgaben vollständig und in angemessener Qualität durchzuführen. Darauf reagieren Entwickler, indem sie entweder mehr oder nachlässiger arbeiten – oder beides zugleich. Zunächst verkürzen sie die Kaffeepausen und schränken die Zeit für Mahlzeiten ein, Meetings verschieben sie oder streichen sie zusammen; wenn das nicht ausreicht, machen sie Überstunden; wenn das ebenfalls nicht genügt, dann arbeiten sie vielleicht noch am Wochenende. Aber dadurch lässt sich die Arbeitsleistung nur um 30 bis 40% erhöhen, denn irgendwann sind die Kompensationsmöglichkeiten erschöpft.

Mehrarbeit ist eine Möglichkeit, kurzfristige Termine einzuhalten, etwa die Präsentation in der nächsten Woche, aber keine Lösung langfristiger Probleme. Wochen- oder monatelange Mehrarbeit verschafft nur vordergründig Luft; langfristig führt der Verzicht auf Privatleben und die dauerhafte Überbelastung zu Unzufriedenheit, Erschöpfung und Burnout-Gefühlen, die den kurzfristigen Zeitgewinn langfristig wieder zunichte machen: Die Arbeitsleistung sinkt unterm Strich unter 100%.

Übrigens ist auch der Verzicht auf Qualität eine Sackgasse. Entwickler sind zu vielen Kompromissen bereit, aber wer ständig nach dem Motto »Es ist das gut genug, was Auftraggeber und Anwender gerade eben noch schlucken« arbeiten muss, der wird irgendwann feststellen, dass er seine eigenen Qualitätsansprüche verraten hat. Vor allem für die Leistungsträger ist das häufig Grund, sich nach einem anderen Arbeitgeber umzusehen.

Wenn der Verlauf eines Projekts nicht dessen Planung entspricht, liegt das häufig daran, dass die Realität sich einer genauen Schätzung entzieht. Dieser Artikel zeigt, wie Sie dennoch zu guten Schätzungen gelangen, und betrachtet sowohl klassische Schätzverfahren als auch moderne Verfahren in agilen Projekten.

Artikel lesen: Spiel mit den Wahrscheinlichkeiten – Aufwandschätzung für Entwickler

Den Artikel können Sie hier kommentieren.

Seit 2008 findet jährlich im Unperfekthaus in Essen das BarCampRuhr statt. Über meinen Kurzbesuch vor zwei Jahren habe ich an dieser Stelle berichtet. Dieses Jahr beim BarCampRuhr3 war ich an beiden Tage vor Ort, habe zwar wieder keine Session gehalten, dafür aber eine Menge Spaß gehabt.

Ich war am Samstag pünktlich zur Vorstellungsrunde gegen 10:30 Uhr vor Ort. Jeder der rund 170 Teilnehmer stellte sich vor und konnte sich kurz mit drei Stichwörtern beschreiben. Anschließend begann die Session-Planung. Insgesamt kamen für beide Tage fast 70 Sessions zusammen, verteilt auf 8 Räume mit den schönen Namen Dortmund, Bochum, Duisburg, Mülheim, Oberhausen, Gelsenkirchen, Castrop-Rauxel und Bottrop; jeder Raum unterschiedlich groß mit einem eigenen Charakter und individuell ausgestattet. Eine Übersicht über die Sessions bieten die Timetables (Samstag, Sonntag).

An dieser Stelle kann man nicht oft genug betonen: Das Unperfekthaus ist sehr wohl perfekt, wenn es darum geht, ein BarCamp auszurichten! Die Sessions in Dortmund wurde übrigens live auf zaplive.tv übertragen und sind dort – zumindest im Moment – noch verfügbar.

Zum Seitenanfang

Sessions

An beiden Tagen gab es viele interessante Session, aber – was mich erstaunt hat – kaum eine über Webfrontend-Themen wie jQuery, CSS3 oder CSS-Frameworks, auch Markup spielte meines Wissens nach nur in zwei Vorträgen eine Rolle, nämlich in einer Session zum Thema Barrierefreiheit und einer zum Thema HTML5 und Flash. Der Themenfokus dieses BarCamps lautete »Standortbezogene Dienste«, daher spielten mobile Geräte, Services und Anwendungen sowie deren Erstellung eine große Rolle, aber auch andere Tools und Themen wie Typografie, Content-Management, Datenbanken und Social Media. Diese Vielfalt hat mir gefallen und daher habe ich mir zum Teil gezielt Sessions zu Themen ausgesucht, mit denen ich mich bisher nur wenig beschäftigt habe.

NRW is the new Berlin!

Nadia Zaboura bemühte sich in dieser Session in ihrer Funktion als Referentin des Medienclusters NRW mit uns zusammen, Inspirationen und konkrete Ideen für eine gemeinsame Kampagne für »Medienschaffende, Kreative und Akteure der digitalen Wirtschaft« zu entwickeln. Aufgrund der Kürze der Zeit gelang uns das nur im Ansatz.

Bienen und Barrieren

Ansgar Hein von anatom5, unter anderem Herausgeber des Webstandards-Magazins und mehrfacher BIENE-Gewinner, gab einen Überblick darüber, worauf Webentwickler achten müssen, um eine Website so zu entwerfen und zu erstellen, dass sie ausreichend barrierefrei ist, um Chancen auf eine BIENE zu haben – der wichtigsten Auszeichnung für barrierefreies Webdesign im deutschsprachigen Raum. Interessante Session, sympathisch und kompetent vorgetragen.

Wie misst man eigentlich den Erfolg von Social Media?

Tja, das weiß ich nach dieser Session auch nicht. Markus Kucborski hat Informationen zu seiner Session und die dazu gehörigen Folien auf seiner Website veröffentlicht und versucht sich an einem Fazit. Aus meiner Sicht eine der schwächeren Sessions dieses BarCamps; aufgewärmtes Essen ohne Würze.

Web-Tools im Business-Einsatz

Eine Session von Andreas Pilz rund um Google Apps, Zoho, Dropbox, Prezi und weitere kostenlose oder günstige webbasierte Tools für Freelancer oder kleinere Unternehmen, die IT-Services in die Cloud auslagern wollen. Leider ging die Vielfalt ein wenig unter in Diskussionen über IT-Sicherheit und Datenschutz, die an dieser Stelle fehl am Platz waren bzw. besser in einer separaten Session im Anschluss hätten stattfinden sollen. Andreas hat sich übrigens um die Timetables gekümmert – danke dafür!

Chatroulette – FSK18-Session

Man kann es nicht anderes sagen: Die beste Session von allen! Chatroulette ist die Sau, die aktuell durchs Web getrieben wird, und ist ein paar Sätze wert. Auf der Website werden Besucher zufällig mit anderen fremden Besuchern per Videochat verbunden. Jeder dieser so verbundenen Teilnehmer kann jederzeit den Chat beenden, um sogleich wieder mit dem nächsten zufällig ausgewählten Chatpartner verbunden zu werden. Chatroulette gibt es seit November 2009 und wird mittlerweile von rund einer halben Million Besuchern pro Tag genutzt. Natürlich handelt es sich dabei nicht immer um die digitale Avantgarde, eher im Gegenteil: Die TAZ schreibt:

»Es gibt zehnmal mehr Jungs als Mädchen, und die sind immer mindestens zu zweit. Etwa jeder sechste Zufalls-Partner ist ein Penis, dafür kann etwa ein Viertel aller Leute irgendwas besonderes, ist verkleidet, tanzt oder spielt Flöte.«

Mit diesen Erwartungen sind wir in die Session gegangen, die Kathrin Grannemann (@Katti) organisiert hat, und wurden nicht enttäuscht. Die ersten Chat-Partner waren zwar allesamt doof oder langweilig (und nur ein Penis dabei, was viele enttäuscht hat), aber die Unterhaltung mit dem skurrilen, aber sehr sympathischen und lustigen Colin Vardy aus Labrador City war einfach grandios! Die Mitschnitte (Flickr, YouTube oder der komplette Mitschnitt) geben einen Eindruck der Stimmung im Raum. Wurde bei einer BarCamp-Session jemals so ausgiebig Party gemacht? Mittlerweile hat Colin eine Facebook-Fanpage eingerichtet und genießt seinen neuen Ruhm. Unglaublicher Typ!

Abb. 1 Chat mit Colin Vardy (Foto von SimSullen)

Webstandard-Magazin

Mit Ansgar Hein, Maik Wagner (@fernmuendlich) und Marie Dietz (@zwergschwein) habe ich mich über das Webstandards-Magazin unterhalten und schon einmal einen Blick in die nächste Ausgabe geworfen, die in einigen Tage erscheinen wird. Kaufen!

Präsentieren mit dem iPhone

Eine Session von Kathrin Grannemann und Richard Joos und für mich ein Blick über den Tellerrand. Fazit: Hat man das entsprechende Kabel (ca. 40,00 €), kann man mit dem iPhone Fotos über einen Beamer auf die Leinwand werfen, mehr geht nicht. Es sei denn, man hat das iPhone entsperrt (Jailbreak), was nicht jeder machen sollte, da man damit die Garantie-Bestimmungen von Apple verletzt. Wer es trotzdem macht, kann seinem iPhone unter anderem Multitasking beibringen und Apps installieren, die es ermöglichen, die komplette Anzeige auf den Beamer zu bringen. Sehr interessant!

TYPOlight CMS

Marie Dietz und Jan Theofel gaben einen kurzen Einblick in TYPOlight, einem Content-Management-System, das auf den ersten Blick einen guten Eindruck macht. Ich nehme mir hiermit vor, in nächster Zeit einen genaueren Blick auf und hinter das System zu werfen.

China, Internet und Kultur

Ein Einblick in eine andere Welt von Vivian Pein, die sich seit ihrem zwölften Lebensjahr mit China und der chinesischen Kultur beschäftigt und in Kürze für drei Monate beruflich nach China geht. Zusammenfassung: Chinesische Websites sind bunt, lebendig und alles bewegt sich. Chinesischer Hip-Hop ist anders, aber nicht besser oder schlechter als das, was man hierzulande so hört. Im Umgang miteinander unterscheiden sich Chinesen deutlich von westlich geprägten Kulturen wie der unseren.

Zum Seitenanfang

Fazit

Abb. 2 Gruppenfoto nach der Session-Planung (Foto von Chris Jahn)

Das BarCampRuhr3 war einen Besuch wert, ein Tag war besser als der andere. An dieser Stelle bedanke ich mich bei unserem »Gastgeber« Stefan Evertz für die reibungslose Organisation. Sogar das Essen war klasse! Stefan, ich hoffe, du kannst dich dazu motivieren, auch nächstes Jahr die Organisation eines BarCampRuhr zu schultern.

Neben den genannten Personen hat es mich besonders gefreut, Antonia Ilski (@soophie), Stefan Nitzsche, Mathias Schäfer und Michel Balzer wiederzutreffen bzw. kennen zu lernen. Ich hoffe, wir sehen uns demnächst mal wieder.

Zahlreiche Fotos vom BarCampRuhr3 gibt es natürlich bei Flickr.

Zum Seitenanfang

Nachtrag (26. März 2010)

In seinem Kommentar spannt Stefan uns noch auf die Folter, aber in seinem Blog packt er aus: Es wird ein BarCampRuhr4 geben! Stattfinden wird es vom 26. bis 27. März 2011, wieder im Unperfekthaus. Sehr schön!

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!

Jedes Projekt und jede Kampagne beginnt damit, dass die Beteiligten ein gemeinsames Ziel definieren und Maßnahmen beschließen, um es zu erreichen. Nur wenn den Beteiligten das Ziel klar ist, können sie sich auf genau die Maßnahmen verständigen, die dort hin führen. Erst ein Ziel ermöglicht es zu beurteilen, ob Tätigkeiten wirtschaftlich, effektiv und erfolgreich sind.

Dabei ist es schon seit vielen Jahren im Projektmanagement üblich, Ziele smart zu formulieren. »Smart« ist ein ursprüngliches englisches Akronym (»specific measurable achievable relevant timely«), das sich wie folgt ins Deutsche übersetzen lässt: Ziele sollten spezifisch, messbar, anspruchsvoll (auch: attraktiv), realistisch und terminiert sein. Nur dann sind es smarte Ziele, das heißt relevante, klare und überprüfbare Ziele.

Artikel lesen: Die Bedeutung effektiver und smarter Ziele

Den Artikel können Sie hier kommentieren.

Ihre Seiten (und viele andere derer, die sich mit der »reinen Lehre« befassen), sind so gestaltet, dass man beim Lesen sehr viel scrollen muss und dadurch der Kopfbereich, die Navigation und das ganze schöne Design verschwinden. Dafür gibt es dann die Links »zum Seitenanfang«. Ich persönlich finde das nicht ganz so angenehm. Mir gefallen Seiten, bei denen man möglichst alles auf einen Blick sieht. Ihre Art der Gestaltung scheint mir aber kein Zufall zu sein. Gibt es einen Vorteil, der mir nicht aufgefallen ist?

Das ist eine interessante Frage, denn sie lässt sich auf zwei unterschiedliche Arten interpretieren.

Blättern oder Scrollen?

Wer nicht möchte, dass seine Leser sehr lange Seiten scrollen müssen, der kann den Inhalt auf mehrere Seiten aufteilen und eine Blättern-Navigation einrichten, damit der Leser von einer Seite zur nächsten gelangen kann. Beides hat Vor- und Nachteile, wobei meiner Ansicht nach die Vorteile des Scrollens überwiegen. Dazu gehören die bessere Übersichtlichkeit des Textes, d.h. die Möglichkeiten, ihn zu »scannen« und querzulesen, sowie die Tatsache, dass er sich leichter ausdrucken lässt bzw. keine zusätzliche Druckversion notwendig ist.

Ich halte es also wie Thomas Wirth, der in seinem Artikel Scrollen oder nicht scrollen Pro und Kontra gegenüber stellt und zu dem Fazit gelangt: »Scrollen ist okay, wenn man etwas zu sagen hat.«

Es gibt aber noch folgenden Aspekt zu diskutieren:

Die ganze Seite Scrollen oder nur den Content?

Die CSS-Eigenschaft overflow ermöglicht es, Elemente scrollbar zu machen. Somit könnte der Inhalt auf eine Maximalhöhe begrenzt und Rollbalken angezeigt werden, sobald sie notwendig sind. Der einfache Ausdruck wäre auch hier gegeben, ebenso die Übersichtlichkeit, wenn die Maximalhöhe ausreichend ist. Oftmals ist sie dies jedoch nicht, sodass der Nutzer den Content wie durch ein zu kleines Fenster betrachten muss. Aber selbst, wenn der Screendesigner dies gut gelöst hat, bleibt ein gravierender Nachteil bestehen, denn ich frage mal zurück: Welchen Vorteil hat es denn, wenn alle anderen Elemente weiterhin im Blickfeld bleiben?

Meiner Ansicht nach lenken Designelemente, Navigationen und Marginalien vom eigentlichen Inhalt ab. Wenn der Nutzer den Text angelesen hat und ihn interessant genug findet, um ihn zu Ende oder zumindest weiter lesen zu wollen, dann sind alle anderen Elemente auf der Website in diesem Moment nicht relevant. Das ist übrigens auch der Grund, weshalb Online-Shops wie Amazon alles ausblendet, was den Nutzer vom Kaufvorgang abhalten könnte, sobald er diesen eingeleitet hat und zur Kasse geht.

Ich habe mich daher ganz klar dafür entschieden, Inhalte auf eine lange, scrollbare Seiten zu bringen und nur dann zu unterteilen, wenn es thematisch sinnvoll ist.

Wie sehen Sie das?

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.

Wie bereits in den Jahren 2005, 2006, 2007 und 2008 öffnen die Webkrauts auch in diesem Dezember wieder Tag für Tag ein neues Türchen. In diesem Jahr liegt der Schwerpunkt auf Tipps und Tricks. Jede Menge Webkrauts füllen den Kalender mit Themen über Barrierefreiheit, Print-CSS, Bildbearbeitung oder Projektmanagement. Außerdem stellen die Webkrauts einige kleinere Tools vor.

Ich selbst fülle auch wieder ein Türchen: Hilfsmittel für Aufwandsschätzungen.

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

Den Artikel können Sie hier kommentieren.

Mittlerweile gibt es die W3C-Empfehlung RDFa in XHTML: Syntax and Processing (mit dem Untertitel: A collection of attributes and processing rules for extending XHTML to support RDF) und mit dem neuen Dokumenttyp XHTML+RDFa die Möglichkeit, RDFa formal korrekt zumindest in XHTML-Dokumente einzubetten. Voraussetzung für dessen Einsatz ist die Angabe der entsprechenden Dokumenttyp-Deklaration. Zusätzlich müssen Webautoren dem html-Element das Attribut xmlns="http://www.w3.org/1999/xhtml" und sollten das Attribut version="XHTML+RDFa 1.0" angeben.

Dokumente, die diesen Vorgaben entsprechen, beginnen somit wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
 "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0">

Für HTML-Dokumente gibt es derzeit keinen vergleichbaren Standard, auch nicht für das in Entwicklung befindliche HTML5. Dennoch zieht RDFa im Web seine Kreise mittlerweile auch außerhalb der XML-Welt und sorgt dafür, dass mehr und mehr HTML-Dokumente zwar semantisch reichhaltiger werden, aber nicht mehr veröffentlichten formalen Grammatiken genügen.

Mit HTML+RDFa arbeitet das W3C derzeit an einem neuen Standard, der beschreibt, wie RDFa in HTML eingebettet werden soll. Der erste Arbeitsentwurf ist vom 15. Oktober. Er ist sehr kurz gehalten und definiert Regeln und Richtlinien, um die Empfehlung »RDFa in XHTML« für den Einsatz von RDFa in HTML-Dokumenten anzupassen, sowohl für HTML5 in beiden Serialisierungen (HTML- und XML-Serialisierung) wie auch »herkömmliches« HTML 4.

Der Entwurf beschreibt Mechanismen, wie Webautoren sicherstellen können, dass RDFa in ihren HTML-Dokumenten funktioniert. Allerdings werden HTML4-Dokumente dadurch natürlich nicht automatisch gültig. Die oben angesprochenen XHTML-2.0-Attribute sind in HTML nicht erlaubt, in keiner Version, auch nicht in HTML5. Abschnitt 5 den Entwurfs (Extensions to the HTML5 Syntax) nimmt darauf Bezug und beschreibt Änderungen, die am HTML5-Arbeitsentwurf vorgenommen werden müssen, damit HTML5 RDFa auch formal unterstützt. Dazu gehören die erwähnten Attribute und deren Werte – unter Beachtung von Namensraumdeklarationen und CURIEs. Folgendes Beispiel zeigt, was damit gemeint ist.

<span
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  about="urn:isbn:3-8273-2739-3"
  property="dc:title"
>Einführung in XHTML, CSS und Webdesign</span>

Das span-Element importiert das Dublin-Core-Vokabular mittels @xmlns:dc-Attribut und weist dem URI http://purl.org/dc/elements/1.1/ den Namensraum-Präfix dc zu. @dc:title ist nun die Kurzschreibweise für http://purl.org/dc/elements/1.1/title. Dieses Konzept wird CURIE genannt (Kurzform von Compact URI).

Namensraumdeklarationen sind ein wichtiges Konzept von XML, in HTML jedoch unbekannt. Auch die HTML-Serialisierung von HTML5 kennt Namensraumdeklarationen nur in den sogenannten »foreign elements« aus dem MathML- und SVG-Namensraum, die in HTML5 eingebettet werden können. Damit RDFa in HTML-Dokumente integriert werden kann, muss HTML5 Namensraumdeklarationen auch in der HTML-Serialisierung erlauben. Daher ist es wichtig, dass alle Attribute, die mit xmlns: beginnen, nicht wie gewöhnliche Attribute behandelt werden; derzeit jedoch wirft der W3C-Validator bei der Überprüfung den Beispiels noch Fehler (»Attribute xmlns:dc not allowed here«).

Es ist fraglich, ob die HTML5-Entwickler um Ian Hickson den Wünschen der »HTML+RDFa«-Autoren nachkommen werden, schließlich versuchen Manu Sporny und die RDFa Task Force schon länger, Hickson RDFa schmackhaft zu machen. Dessen Antwort finden wir in Abschnitt 5 des RDFa-Entwurfs: Microdata.

Heute bezweifelt niemand mehr, dass HTML5 die »Lingua Franca« der Zukunft sein wird. Wie genau diese Sprache einmal klingen wird, steht jedoch noch nicht fest. Die Arbeit an HTML5 ist in vollem Gange und fast täglich gibt es neue Anmerkungen und Entwürfe. Vielleicht findet RDFa noch Eingang in HTML5, falls nicht, wird es wohl bald keine Rolle mehr spielen, denn was sollen wir mit einem Standard, den wir nicht einsetzen können?

Jeder kennt heute das Schlagwort »Web 2.0«, das eine veränderte Wahrnehmung und Nutzung des Webs beschreibt. Während das Web früher vornehmlich statisch war, versetzten neue Techniken und größere Internetbandbreiten die Nutzer zunehmend in die Lage, selbst Inhalte zu erstellen und weiterzugeben. Inhalte werden heute nicht mehr nur zentralisiert von wenigen großen Unternehmen und Verlagen erstellt und über das Internet verbreitet, sondern von einer Vielzahl von Nutzern, die sich mit Hilfe von Weblogs, Wikis, Online-Diensten und anderer »Social Software« miteinander vernetzen. Das Web 2.0 ist eine Plattform, wo die Menschen diskutieren und miteinander arbeiten.

Bekannt wurde der Begriff »Web 2.0« durch die »Web-2.0-Konferenz«, die im Oktober 2004 von O’Reilly Media, John Battelle und MediaLive veranstaltet wurde, sowie durch den von Tim O’Reilly im September 2005 veröffentlichten Artikel What is Web 2.0.

Seit 2004 findet jeden Oktober eine Konferenz statt, die mittlerweile »Web 2.0 Summit« heißt. Im Vorfeld der diesjährigen Konferenz schrieben O’Reilly und Battelle ein White Paper, in dem sie den Begriff »Web Squared« (Web²) als neues Schlagwort einführten, das den nächsten Evolutionsschritt des Webs beschreiben soll. Die Autoren schildern darin ihre Vision einer nahen Zukunft, die schon heute begonnen hat, in der nicht nur Menschen über das Internet miteinander in Verbindung stehen, sondern Dinge aller Art. Der Weg führt uns somit vom Web 2.0 zum »Web hoch 2«.

Die Zeit, in der das Web lokal beschränkt war, sind schon lange vorbei. Heute tragen wir das Web mit uns herum; über Smartphones und andere Geräte, die es uns erlauben, überall online zu sein. Die Möglichkeiten dieser Geräte sind verblüffend. O’Reilly und Battelle schreiben:

»Unsere Telefone und Kameras haben sich zu Augen und Ohren von Applikationen entwickelt. Bewegungs- und Ortssensoren teilen mit, wo wir uns befinden, was wir uns ansehen und wie schnell wir uns fortbewegen. Daten werden in Echtzeit gesammelt, dargestellt, ausgewertet und verarbeitet. Es wird ein Vielfaches mehr Daten gesammelt als noch vor fünf Jahren. (…) Alles und jeder in dieser Welt wirft einen ›Informationsschatten‹, eine ›Datenaura‹, die außergewöhnliche Möglichkeiten bietet, wenn sie intelligent eingefangen und verarbeitet wird.«

Das Potenzial, das sich auf diese Weise eröffnet, steigt nicht mehr linear an, sondern exponentiell; daher der Begriff »Web²«.

Ich habe das »Web Squared White Paper« ins Deutsche übersetzt. Nehmen Sie sich die Zeit und lesen Sie den Artikel!

Web Squared: Web 2.0 nach 5 Jahren

Die beiden folgenden Videos geben darüber hinaus einen Einblick ins Web². Das erste ist ein kurzer Film von ExplainingComputers.com und gibt einen groben Überblick, der nur das Wesentliche zusammenfasst.

Das zweite Video ist ein O’Reilly Webcast, in dem Tim O’Reilly und John Battelle über eine Stunde lang ihre Gedanken und Visionen vorstellen.

Ich glaube nicht, dass »Web Squared« als Begriff – gerade im deutschen Sprachraum – einen solchen Siegeszug antreten wird wie »Web 2.0«. Dafür sind die Übersetzungen »Web hoch 2« oder »Web zum Quadrat« zu sperrig und nicht »cool« genug, »Web²« zwar cool, aber schwierig zu schreiben. Das Web 2.0 ist heute in aller Munde, weil es um Menschen geht, um Kommunikation, Zusammenarbeit und – wenn man so will – dem Aufbäumen Davids gegen Goliath. Bei der Idee des Web² hingegen geht es um Massendaten, die von Sensoren in Echtzeit gesammelt und anschließend analysiert werden, um daraus Werte zu schöpfen. Das ist interessant, zukunftsweisend und in Teilen auch visionär, aber eben wenig »charmant«.

Ich freue mich über Kommentare und auf Diskussionen!

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.

Das Buch »Der erfolgreiche Webdesigner« ist keine weitere Einführung in CSS-Techniken; es will nicht zeigen, welches XHTML-Element Sie für welche Zwecke einsetzen sollen; es listet keine PHP-Skripte auf und zeigt auch nicht die Erstellung und Konfiguration von WordPress-Themes oder -Plugins. Nachdem Sie dieses Buch gelesen haben, werden Sie dennoch bessere Webseiten erstellen als vorher, weil sie die Anforderungen besser analysieren und die Arbeit besser organisieren können. Und vielleicht kommen Sie auch an bessere Aufträge, weil Sie lernen, wie Sie sich besser verkaufen und auf sich aufmerksam machen.

Zum Seitenanfang

Aufbau und Inhalt

Mehr als ein Drittel des Buches widmet sich dem Thema Kommunikation: Kommunikation mit dem Kunden und mit Kollegen und Partnern. Es hat mich erstaunt, in einem Webdesign-Buch auf mehr als 200 Seiten zu lesen, wie und auf welchen Ebenen Kommunikation funktioniert, wie wir uns im Kundengespräch verhalten sollten, wie wir eine gute Beziehung zu Kunden und Partnern aufbauen, welche Kundentypen und -gruppen es gibt und wie wir sie am besten beraten. Dieser Teil des Buches ist der beste Beweis dafür, dass der Autor weiß, worüber er schreibt: Der Text ist vorbildlich recherchiert, gut strukturiert und verständlich und humorvoll geschrieben. Es macht Spaß, den Ausführungen des Autors zu folgen.

Die folgenden rund 40 Seiten widmen sich dem Thema Marketing für Webdesigner. Anschließend geht es auf etwa 80 Seiten um Projektplanung und Projektmanagement. Das Kapitel wird aufgelockert durch Beiträge von Gastautoren, die jeweils in ein Content-Management-System einführen. Dieser Teil des Buches ist sein einziger Schwachpunkt: Die Qualität der Autoren ist zu unterschiedlich, der abwechselnde Stil trübt des Lesefluss und lässt einen »zerstückelten« Eindruck zurück.

Teil IV widmet sich den Themen Webstandards, Usability und Accessibility. Wir sind mittlerweile auf Seite 463 angelangt, und erst jetzt wird das Buch technisch, bleibt allerdings aufgrund der konstant hohen Schreibqualität des Autors interessant und gut zu lesen.

Zum Seitenanfang

Fazit

Das Buch ist fachlich in jeder Hinsicht einwandfrei. Es schließt eine Lücke auf dem deutschsprachigen Webdesign-Büchermarkt, der derzeit von CSS-Büchern nur so überschwemmt wird. Auch die Aufmachung, Bindung, Papier- und Druckqualität haben mich zufrieden gestellt.

Ich hatte das Glück, den Autor Nils Pooker vor einigen Monaten auf einer zweitätigen Webkonferenz persönlich zu treffen. Er hat das Zeug zum Stand-up-Comedian, ein rundum humorvoller und angenehmer Typ. Vieles davon ist an seinem Schreibstil wiederzuerkennen. Gerade in der ersten Hälfte musste ich einige Male laut auflachen. Wie gesagt, es macht Spaß, dieses Buch zu lesen. Ich kann es nur weiterempfehlen.

Zum Seitenanfang

Informationen und Bezugsquellen

Der erfolgreiche Webdesigner – Der Praxisleitfaden für Selbstständige

Verlag Galileo Press; 1. Auflage (November 2008)
559 Seiten mit DVD
39,90 Euro – ISBN 978-3836211666

• Buch bei Galileo Press bestellen
• Buch bei Amazon bestellen (Partnerlink)

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.

»Das maskuline Substantiv der Leisten bezeichnet einen aus Holz oder Metall nachgebildeten Fuß für die Schusterarbeit oder aber einen Schuhspanner. Ursprünglich bedeutete der Name des Schuhmachergerätes ›Spur, Fußabdruck‹. Auch das Verb leisten, das im heutigen Sprachgebrauch im Sinne von ›schaffen, können‹ verwendet wird, ist davon abgeleitet, es bedeutet eigentlich ›einer Spur nachgehen, nachspüren‹. Zu dieser Wortgruppe gehört übrigens auch das Wort List, das ›Wissen‹ bedeutete und sich auf die Techniken der Jagdausübung und des Kampfes bezog.«

Sehr interessant, oder? Ich habe mich schon immer gefragt, was ein Schuster mit »schmalen, meistens langen Bauteilen aus Holz, Metall oder Kunststoff« (nach Wikipedia) zu tun haben könnte.

Ältere Ausgaben des Newsletters finden Sie im Archiv. Und hier können Sie den Duden-Newsletter abonnieren.

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.

Über Twitter (vielen Dank an @grafzahl) bin ich auf ein Werkzeug aufmerksam geworden, das uns Webentwicklern das Testen unserer Websites in verschiedenen Versionen des Internet Explorers einfacher machen dürfte. IETester ist ein Browser, der die Rendering- und JavaScript-Engines des Internet Explorers in den Versionen 5.5, 6, 7 und 8 beta 1 in einer Oberfläche zusammenfasst. IETester läuft unter Windows Vista und XP mit installiertem IE 7 oder 8.

Das Werkzeug befindet sich derzeit im Alpha-Stadium (Version 0.2.1), läuft aber bereits einigermaßen stabil, wenngleich – zumindest auf meinem Dell Latitude D830 unter Windows XP – noch sehr träge. Fehler und Probleme, von denen es in diesem Stadium einige geben dürfte, können im Forum gemeldet und diskutiert werden.

Ein Problem, das mir aufgefallen ist, tritt immer dann auf, wenn im IETester eine Instanz des IE 5.5 geöffnet ist. Wird in einem separaten IE 7 (also dem Systembrowser, keine IETester-Instanz) ein Fenster per JavaScript geöffnet, so stürzt der IE 7 sofort komplett ab. Kann dieses Problem jemand nachvollziehen?

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.