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.
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«.
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=""><Farbe></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>
<ie7></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>
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="' '" />
</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="' '" />
</xsl:otherwise>
</xsl:choose>
<xsl:value-of select="' '" />
</xsl:template>
p<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><Farbe>, 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> <ie7></td>
<td>IE ignoriert bis Version 7 den Wert inherit.</td>
</tr>
</table>
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"><Farbe></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?
Hallo Michael,
also erst mal noch einen Glückwunsch zur Version 4. Ist wirklich toll geworden, inhaltlich wie optisch!
Ich arbeite gerade daran, "Little Boxes Teil 1" online zu stellen, habe als Basis auch eine Word-Vorlage von Pearson, mich aber für einen ganz anderen Weg entschieden, nicht zuletzt weil ich die automatischen Konvertierungen von Writer und Word auch nicht akzeptabel fand und ich von XSLT & Co. nicht wirklich was verstehe. Für ein funktionierendes "single input - multiple output" brauchen wir wahrscheinlich einen anderen Ausgangspunkt als eine Word-Vorlage. ;-)
Mein Weg ist manuell, technisch ziemlich simpel aber es funktioniert:
1. Site erstellen (mit TYPOlight und YAML)
2. Inhalte aus der PDF-Fahne ins CMS kopieren (manuell).
Auch das ist viel Arbeit, aber die manuelle Korrektur des Quelltextes nehme ich direkt beim Einfügen des Inhalts in das CMS vor. TYPOlight teilt den Inhalt einer Seite in "content elements" genannte "Scheibchen" ein (Überschriften, Fließtext, ToDo-Kästchen, TIPP-Kästen, Tabellenetc.), denen ich bei Bedarf zur Gestaltung Klassen zuweisen kann. Das erleichtert die Sache erheblich.
Du bringst »Little Boxes« online? Klasse! Ich hoffe, du wirst die Leser, die bei dir einsteigen, zu mir weiter reichen, wenn sie mit deinem Buch durch sind. ;-)
Der komplett manuelle Weg ist auch eine Möglichkeit. onion.net bietet mir ebenfalls an, Inhalte über Masken einzugeben, die ich (über XML Schema) sogar selbst definieren kann. Ich habe auch überlegt, ob ich so vorgehen will, aber ehrlich gesagt konnte und kann ich es mir nicht vorstellen, über 500 Seiten Buchinhalt über Kopieren-und-Einfügen in Masken zu übertragen.
> Du bringst »Little Boxes« online?
Yep. Den ersten Teil, also den CSS-Grundlagenkurs. Ich lese ab und an in CSS-Foren mit und würde oft als Antwort am liebsten einen Verweis zu einem bestimmten Abschnitt aus dem Buch schreiben. Und das geht online entschieden besser ;-)
> Ich hoffe, du wirst die Leser, die bei dir einsteigen, zu mir weiter reichen
Worauf du dich verlassen kannst. Wie sagt Chubby Checker: "Let's link again, like we did last summer …"
> ehrlich gesagt konnte und kann ich es mir nicht vorstellen,
> über 500 Seiten Buchinhalt über Kopieren-und-Einfügen
> in Masken zu übertragen.
Ich auch nicht, deshalb bin ich gleich damit angefangen, bevor ich es mir anders überlege. Reine Fleißarbeit, und ich hab ja auch "nur" 381 Seiten ;-)
Hallo Michael, als Besitzer der Erstauflage des Buches, das mir von Beginn an wirklich wertvolle Dienste geleistet hat, ist diese Form der Bereitstellung natürlich ein Traum. Unfassbar das Du dir diese Arbeit gemacht hast. Meinerseits gibt es zumindest einen Beitrag im Blog um ein wenig zur Bekanntheit beizutragen …
Klasse Arbeit, herzlichen Dank und Dir viel Erfolg …
Markus
@Markus Vielen Dank! :-)
Unter welchem URL finde ich denn deinen Blogbeitrag zum Buch bzw. dem Online-Tutorial?
folgt auf meiner Seite unter web-funk.de sobald ich mal 20min. Zeit finde ;-) kannst Dich aber darauf verlassen, Deine Arbeit hier ist es auf jeden Fall wert …
Pingback: Einführung in XHTML, CSS und Webdesign mit Michael Jendryschik Aktionsraum Internet
Hallo,
wollte nur mal vielen Dank dafür sagen, dass du das Buch online zur Verfügung stellst, obwohl dies ja, wie man lesen kann, mit nicht unerheblicher zusätzlicher Arbeit verbunden ist. Ich habe mir erlaubt, auf meiner kleinen Webseite einen Link anzubringen.
Ich hoffe, du findest viel Zuspruch für das Angebot und manche Nachahmer. Einer arbeitet ja schon dran, wie man lesen kann.
:-)