Weblog - Michael Jendryschik » Relaunch

Der Weg vom Manuskript auf die Website

Michael Jendryschik — Sun, 09 Aug 2009 15:46:46 +0000

Etwa ein halbes Jahr lang habe ich dafür gebraucht, die fertige Einführung in XHTML, CSS und Webdesign ins Web zu übertragen. Das liegt daran, dass es mir nicht gelungen ist, den Weg komplett zu automatisieren. Ich konnte mich dem gewünschten Ergebnis in mehreren Schritten annähern, aber um letzte, manuelle Arbeiten kam ich nicht herum – wochenlange Fließbandarbeit mit immer denselben Änderungen, Korrekturen und Auszeichnungen. Wer mir bei Twitter folgt, hat vielleicht mitbekommen, wie ich mich hin und wieder darüber beklagt habe. Als kleine Entschädigung dafür beschreibe ich in diesem Artikel kurz, wie der Weg vom Manuskript auf die Website genau verlief.

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.

7.2.2Hintergrundfarbe: Die Eigenschaft background-color

Icon INFO

Die Eigenschaft background-color bestimmt die Hintergrundfarbe eines Elements.

Werte	<Farbe>, transparent, inherit
Initialwert	transparent
Vererbung	nein
Anwendung	global

Beispiel:

p.warnung {
color: red;
background-color: white;
}

Das Schlüsselwort transparent legt fest, dass ein Element einen transparenten Hintergrund hat, darunterliegende Farben und Inhalte somit durchscheinen.

Die Eigenschaften color und background-color 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.

Browserunterstützung

Die Eigenschaft background-color wird von allen modernen Browsern unterstützt mit folgender Einschränkung:

Browser	Anmerkung
	IE ignoriert bis Version 7 den Wert inherit.

Listing 1: OpenOffice.org Writer: Speichern als HTML-Dokument, Säuberung mit Tidy

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

color: red;
 background-color: white;

}

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.

Listing 2: Ausschnitt aus der Transformationsdatei: Behandlung von Elementen vom Typ p

7.2.2Hintergrundfarbe: Die Eigenschaft background-color

TODO

Die Eigenschaftbackground-color bestimmt die Hintergrundfarbe eines Elements.

Werte	<Farbe>, transparent, inherit
Initialwert	transparent
Vererbung	nein
Anwendung	global

Beispiel:

p.warnung {
color: red;background-color: white;
}

TODO

Das Schlüsselwort transparent legt fest, dass ein Element einen transparenten Hintergrund hat, darunterliegende Farben und Inhalte somit durchscheinen.

Die Eigenschaften color und background-color 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.

Browserunterstützung

Die Eigenschaft background-color wird von allen modernen Browsern unterstützt mit folgender Einschränkung:

Browser	Anmerkung
	IE ignoriert bis Version 7 den Wert inherit.

Listing 3: Ergebnis der XSL-Transformation in onion.net

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.

Hintergrundfarbe: Die Eigenschaft background-color

Die Eigenschaft background-color bestimmt die Hintergrundfarbe eines Elements.

Werte	<Farbe>, `transparent`, inherit
Initialwert	`transparent`
Vererbung	nein
Anwendung	global

Beispiel:

p.warnung {
  color: red;
  background-color: white;
}

Das Schlüsselwort transparent legt fest, dass ein Element einen transparenten Hintergrund hat, darunterliegende Farben und Inhalte somit durchscheinen.

Browserunterstützung

Die Eigenschaft background-color wird von allen modernen Browsern unterstützt mit folgender Einschränkung:

Internet Explorer 6 und 7: IE ignoriert bis Version 7 den Wert inherit.

Zum Seitenanfang

Listing 4: Endergebnis nach manuellen Korrekturen

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?

Neu an der vierten Version der Einführung in XHTML, CSS und Webdesign

Michael Jendryschik — Thu, 06 Aug 2009 19:07:04 +0000

Vor einigen Tagen habe ich die neue Version meiner Einführung in XHTML, CSS und Webdesign online gestellt. Das Tutorial entspricht der zweiten Auflage des gleichnamigen Buches, das im Dezember des vergangenen Jahres im Verlag Addison-Wesley erschienen ist. Auf dem Titel des Buches steht zu lesen: »2. aktualisierte und erweiterte Auflage«. Das ist nicht übertrieben, denn ich habe jeden einzelnen Abschnitt jedes Kapitels überarbeitet und einiges neu geschrieben. Entsprechend neu präsentiert sich auch das Online-Tutorial. Die wichtigsten Änderungen liste ich im Folgenden auf.

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.

Einführung in XHTML, CSS und Webdesign – Version 4.0

Michael Jendryschik — Wed, 29 Jul 2009 20:50:16 +0000

Am 15. Dezember 2008 erschien meine Einführung in XHTML, CSS und Webdesign in der zweiten Auflage. Nach mittlerweile mehr als einem halben Jahr habe ich es nun geschafft, das Online-Tutorial auf den Stand des Buches zu bringen. Damit ist es an der Zeit, die unangenehme Stille, die hier lange Zeit geherrscht hat, zu beenden.

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.

Weiterlesen →