Websitegestaltung mit Forrest
Einleitung
Apache Forrest
Apache Forrest ist ein Apache-Projekt, das den Entwicklern ermöglichen soll, Dokumentation zu ihren Projekten in einer ansprechenden Form bereitstellen zu können, ohne erheblichen Auswand treiben zu müssen.
Integriert ist eine vollständige Navigation über Tabs (Reiter) und Menüs, die aus einem zentralen XML-File gefüttert werden. XML mit einer DTD, die zunächst die wesentlichen HTML-Tags für ein HTML-Dokument enthält - p, strong, em, img, table, ul, li, ... um nur einige zu nennen.
Doch Forrest endet nicht an dieser Stelle. Es gibt zusätzliche Tags, die die Strukturierung einer Website erleichtern:
- body: section mit title
- Strukturierung einer einzelnen Seite in Abschnitte. Zustätzlich zur Formatierung der Überschrift mit h?-Tags wird auch noch ein Inhaltsverzeichnis unterhalb der Seitenüberschrift generiert. Es wird keine zusätzliche Handarbeit benötigt.
- body: warning, fixme
- Hervorgehobene Textblöcke mit Rahmen entsprechend der Wichtigkeit
- header: authors, version, abstract, ...
- Die Informationen zu einer Seite werden im Header zusammengefasst und können im Dokument selbst wiederverwendet werden.
Dies ist nur einer kurze Zusammenstellung der erweiterten Tags. Es gibt noch einige mehr, die für Softwareprojekte hilfreich sind.
Von der XML zur HTML gibt es zwei verschiedene Wege:
- forrest run: bietet die Möglichkeit, die Dokumente in einem XML-Editor zu ändern und sofort (ohne einen Build-Prozess) im Webbrowser anzuschauen. Dazu wird im Hintergrund ein kleiner Webserver auf der Basis von Jetty gestartet. Die Website kann sofort unter http://localhost:8888/ kontrollert werden.
- forrest erstellt zu den XML-Dokumenten eine vollständig Website mit HTMl-Dokumenten, die auf einen Webserver aufgespielt werden können.
Erweiterungsmöglichkeiten
Wie geht es nun weiter?
Forrest ist momentan in der Version 0.6 verfügbar, 0.7 ist in Arbeit. Man kann nun darauf warten, dass die Entwickler von Forrest weitere nette Ideen haben, mit denen sie die Gestaltung einer Website erleichtern können. Oder man macht sich selbst an die Arbeit...
Das Herz von Forrest basiert auf dem Paar XML/XSLT
- XML: Extensible Markup Language
- XSL: Extensible Stylesheet Language
- XSLT: XSL Transformations
Ein Haufen Abkürzungen mit der Frage, was man damit anfangen soll. Die Basisidee ist, das in XML nur die Daten enthalten sein sollen. Jedes Dokument hat einen Titel, mehrere Abschnitte, diese wieder in Absätze unterteilt. Es gibt Tabellen, Listen, Bilder und noch einiges mehr. Diese Information ist nicht gekoppelt damit, wie diese einzelnen Elemente dargestellt werden.
Moment... waren dafür nicht CSS (Cascading Stylesheets) gedacht? Ja, waren sie, aber sie können nur begrenzt helfen, da sie nur auf den bestehenden Tags der HTML arbeiten. Man kann das Aussehen verändern, aber nicht die Komplexität eines Tags erhöhen.
Ein schönes Beispiel auf dieser Website ist das Tag <photo>. Ein Photo ist ein Bild (HTML: img) mit einer Beschriftung. Das Ganze befindet sich dann in einer HTML-Table mit dem folgenden Aussehen:
<table style="width: 366px;" class="photoleft photo" cellspacing="0" cellpadding="0"> <tr> <td class="photoimg"> <img title="Port Wemyss - Shore Street" alt="Port Wemyss - Shore Street" height="489" width="366" src="bilder/cottage.jpg"> </td> </tr> <tr> <td class="photolabel"> Port Wemyss - Shore Street </td> </tr> </table>
Das selbstgeschriebene Tag sieht folgendermaßen aus:
<photo src="bilder/cottage.jpg" class="photoleft" width="366" height="489" label="Port Wemyss - Shore Street" />
In den Beispielen zeige ich einige Anwendungsbeispiele und auch die Realisierung in Fragmenten. Wenn man sich näher damit beschäftigen möchte, bleibt nichts anderes übrig, als sich Forrest zu besorgen und selbst mit dem Probieren zu beginnen.
Ressourcen
Hier eine Liste hilfreicher Seiten im Internet:
- forrest.apache.org Das Softwarepaket zu Apache Forrest
- www.w3schools.com Einführung in XML, XSL und XSLT.
- www.w3.org Die technischen Spezifikation des W3C (World Wide Web Consortium)
- www.eclipse.org Eclipse ist eine integrierte Entwicklungsumgebung, mit der man gut größere Projekte organisieren kann. Leider ist kein XML-Editor direkt enthalten. Man kann allerdings im Internet mehrere kostenfreie Plugins dazu finden. Ein Beispiel, das ich schon verwendet habe, ist www.xmlbuddy.com
Beispiele
Die folgenden Beispiele sollen einen Einblich geben, was man alles mit dieser Technik erreichen kann. Das reicht von zusätzlichen Tags wie dem oben erwähnten <photo> bis zu automatisch generierten Files, die danach ansprechend dargestellt werden können.
-
Bilder mit Bildunterschriften
Nutzung eines selbstdefinierten Tags zur Erstellung von HTML -
Index für eine Website
Einen Index zu pflegen ist an sich sehr aufwendig. Hier wird gezeigt, wie man die Referenzen eines Index' dort pflegt, wo es am leichtesten fällt - im referenzierten Dokument selbst.
Beispiele auf dieser Website: Schottland Ortsindex und Schottland Themenindex . -
Ich habe noch ein
Beispiel
für eine Steite hinzugefügt, damit man einen
Eindruck gewinnen kann, was beim Schreiber einer
Seite übrig bleibt.
Natürlich gehört dazu der Text, denn ohne Information ist selbst das schönste Layout sinnlos. Aber der Rest der aufwendigen Arbeit wird vom System selbst abgenommen.