HTML

Während die Firma Sun in den neunziger Jahren behauptete: „Der Computer ist das Netz“, wollte die Firma Microsoft erst ruhen, wenn auf jedem Schreibtisch ein Computer mit Windows steht. Dieser Teil der Geschichte hat sich erfüllt. Microsoft könnte „ruhen“ und sucht auch tatsächlich aktiv nach neuen Märkten und Produkten.

Der Rechner, um den es Microsoft ging, war immer eine Mixtur aus Datendateien und Binärdateien. Die Dateien mit den binären Inhalten nennt man Programme. Sie wurden von den Kunden gekauft und installiert, um damit die Daten bearbeiten zu können. Microsoft Office erlebte einen Siegeszug durch die meisten Büros dieser Welt.

Der Rechner, um den es der Firma Sun ging, war eher ein Dumb Tube. Ein billiges, dummes Endgerät mit einem Bildschirm, einer Tastatur, einer Maus und einem Zugang ins Internet. Die Programme und die Daten sollten sich nicht auf diesem Rechner befinden, sondern irgendwo im Netz.

Die Philosophie von Microsoft tendierte also mehr in die Richtung meines, die Philosophie von Sun mehr in die Richtung unser.

Die Triebfedern dieser Philosophien waren in beiden Fällen wirtschaftliches Interesse. Microsoft verkaufte in erster Linie im Konsumentenbereich Software für PC, Sun dagegen im Unternehmensumfeld Server-Hardware und die passenden Programme dazu.

Mitte der neunziger Jahre erfolgte die explosionsartige Verbreitung des eigentlich schon in den sechziger Jahren erfundenen Internets unter anderem durch HTML (Hyper Text Markup Language, die Sprache, in der Webseiten geschrieben werden) und die Entwicklung von Webservern und Webclients (Browsern).

Das Internet selbst ist nur ein Satz von Spielregeln, der von verschiedenen Geräten verstanden und so geschickt kombiniert werden kann, dass dieses Netz in kürzester Zeit den gesamten Planeten überzog.

Ohne eine E-Mail-Adresse war der einzelne Mensch nicht erreichbar, und ohne eine Website war eine Firma nicht nur altmodisch, sondern in den Augen vieler Kunden nicht mehr existent. Die ganze Welt drängelte also in kurzer Zeit in dieses Netz, um ein Teil davon zu werden. Filme wie Matrix¹ wurden Kassenschlager, und 1984² von George Orwell wurde erfolgreich verdrängt.

Die, die es gewohnt waren, Programme zu kaufen, kauften HTML-Editoren und erstellten damit Internetseiten. Die anderen schrieben den HTML-Code meist lieber gleich selbst in einem ohnehin vorhandenen Texteditor. Die Webagentur war geboren, bei der man Websites in Auftrag geben konnte.

Beide Gruppen hatten allerdings das Problem, dass HTML-Seiten statisch sind. Um den Inhalt der Seite zu ändern, muss man sie am heimischen PC bearbeiten und danach wieder auf den Server kopieren.

Das war nicht nur unbequem und teuer, damit waren auch Webauftritte wie eBay oder Amazon unmöglich.

Beide Gruppen fanden mehr oder weniger gute Lösungen für das Problem.

In der meines-Fraktion entstanden schnell binäre Programme, mit denen man HTML-Seiten erzeugen konnte und diese dann per automatisiertem Verfahren auf den Server lud. In die Seiten wurden interaktive Elemente wie Besucherzähler u.Ä. eingebaut.

Die unser-Fraktion entdeckte Java Applets und damit die Möglichkeit, ein Programm zu schreiben, das zentral auf einem Server liegt und über einen Browser bedienbar ist. Auf dieser Lösung beruhten ganze Geschäftsideen wie Online-Broking und Flugbuchungskonzepte.

Beide Gruppen versuchten auf verschiedene Arten, ihre Marktanteile auszubauen. Das Ergebnis war ein recht stabiler Markt für beide, in dem »Religionskämpfe« über das richtige Betriebssystem (Windows, Linux, Mac OS X) ständig die Versionsnummern der Programme hochtrieben und sich die Kunden daran gewöhnten, dass das alles nicht so einfach ist.

In solchen Situationen gibt es immer einen dritten Weg. In unserem Fall ist das unter anderem die Entstehung von Open Source-Scriptsprachen wie PHP³. Rasmus Lerdorf hatte das Ziel, seine Homepage mit interaktiven Elementen zu versehen, und heraus kam eine neue Programmiersprache. PHP wurde von Anfang an optimiert auf die perfekte Zusammenarbeit mit der Datenbank MySQL, die ebenfalls unter der GNU/GPL⁴ stand.

Glücklicherweise gab es das Betriebssystem Linux und einen Webserver namens Apache, die die benötigte Infrastruktur auf dem Server boten. Das Anzeigemedium beim Kunden war der Browser, der mit Sicherheit vorhanden war. LAMP (Linux, Apache, MySQL, PHP) wurde bald das Synonym für datenbankgestützte, interaktive Auftritte im Internet.

Wie in einem kreativen Rausch entstanden verschiedenste Systeme, die es ermöglichten, Inhalte nur mithilfe eines Browsers zu organisieren, wie Forenseiten, Communities, Online-Shops, Voting-Seiten und ähnliche Dinge.

Nach den »harten« Sachen wie Linux und Apache entstanden nun die »weichen« Produkte.

Die neunziger Jahre neigten sich dem Ende zu, die Internetaktienblase platzte, und plötzlich kam es darauf an, ganz klassische Geschäftsmodelle mit ganz klassischen Methoden zu etablieren.

Immer wenn es der Wirtschaft nicht gut geht, schaut sie auf die Kosten und überlegt, ob es Möglichkeiten gibt, diese zu senken. Es gab und gibt zahlreiche Möglichkeiten!

Die PHP-Anwendungen, die es damals gab, hatten Verbreitungszahlen, die in die Millionen gingen. Als Beispiele seien hier nur die Projekte phpBB⁵ und phpMyAdmin⁶ genannt. Das eine hat sich zum Quasistandard für Foren-Software entwickelt, das andere als Standard für das Bearbeiten von MySQL-Datenbanken per Webinterface.

Der Quellcode der Sprache PHP selbst und der Quellcode der Anwendungen wurde durch die enorme Zahl von Nutzern und Entwicklern immer schneller immer besser. Je offener ein Projekt gestaltet wurde, desto erfolgreicher wurde es.

Einzelne Gurus konnten Unternehmen in kürzester Zeit immense Kosten sparen.

Statische HTML-Seiten galten als alt, teuer und überholt. Dynamisch musste es sein! In diesem Umfeld bewegen wir uns jetzt seit einem Jahrzehnt. Linux, Apache, MySQL und PHP sind in der Industrie akzeptiert. Die Suche nach professionell verwertbaren PHP-Anwendungen begann.

Bei dieser Suche schaut man auf:

• Eine einfache Installation
• Eine gute Wartbarkeit des Quellcodes
• Die Sicherheit des Quellcodes
• Die Benutzerfreundlichkeit
• Die einfache Erweiterbarkeit
• Die einfache Entwicklung
• Die einfache Einarbeitung für neue Entwickler
• Standardisierte Schnittstellen zu anderen Programmen
• Die Kosten
• Die Unabhängigkeit vom Lieferanten

Der besondere Vorteil von PHP-Anwendungen ist die Unabhängigkeit von Hardware und Betriebssystem. LAMP existiert auch als WAMP für Windows, MAMP für den Apple und auf zahlreichen anderen Plattformen.

Und jetzt kommt endlich Joomla! ins Spiel.

Joomla! – wie kam es dazu?

Die australische Firma Miro⁷ entwickelte im Jahre 2001 ein Content Management System namens Mambo. Sie stellte dieses System als Open Source-Software zur Verfügung, um es auszutesten und für eine weite Verbreitung zu sorgen. Im Jahre 2002 spaltete die Firma ihr Produkt Mambo in eine kommerzielle und eine Open Source-Version. Die kommerzielle Variante nannte man Mambo CMS, die Open Source-Version Mambo Open Source oder kurz MOS. Ende 2004 haben sich alle Beteiligten darauf geeinigt, dass MOS ganz offiziell Mambo genannt werden darf und dass man gemeinsam eine erfolgreiche Zukunft für das sich damals am schnellsten entwickelnde CMS gestaltet.

Die Vorteile der kommerziellen Variante lagen für Firmen in erster Linie in der erhöhten Sicherheit und in der Tatsache, dass sie die Firma Miro als Ansprechpartner hatten, die auch die weitere Entwicklung unterstützen würde.

Die Vorteile der Open Source-Version sind, dass sie »frei« ist und dass eine riesige Gemeinde von Benutzern und Entwicklern für eine zügige Weiterentwicklung sorgt. Außerdem ist es für Unternehmen natürlich möglich, Mambo als Basis zu nehmen und darauf aufbauend eigene Lösungen zu entwickeln.

Im Jahre 2005 gab es auf allen Seiten Überlegungen, eine Stiftung für die Open Source-Variante von Mambo einzurichten, um die Existenz und Weiterentwicklung zu sichern.

Im Herbst 2005 wurde auf der Mambo-Projektseite die Gründung einer Mambo-Foundation als Meldung veröffentlicht. Nach positiven Reaktionen in den ersten Stunden stellte sich heraus, dass die Stiftung von Miro in Australien gegründet und das Entwicklerteam nicht in die Gründungsmodalitäten einbezogen wurde. Daraufhin entbrannten heiße Diskussionen in den Foren der Community, und ein paar Tage lang gab es keine Äußerung vom Entwicklerteam.

Nach kurzer Zeit veröffentlichte das Entwicklerteam eine Stellungnahme unter der URL opensourcematters.org und kündigte an, dass es sich vom neutralen Software Freedom Law Center⁸ beraten lassen und eine Weiterentwicklung von Mambo unter eigener Verantwortung planen würde. Schon damals geisterte die Idee einer verbesserten Mambo- Version mit neuer Quellcode-Basis durch die Foren.

Wie in einer zerrütteten Ehe entwickelte sich schnell ein Rosenkrieg zwischen der von Miro dominierten Mambo-Foundation, der plötzlich das Entwicklungsteam abhanden gekommen war, dem Entwicklungsteam selbst, das natürlich einen neuen Namen für den Fork benötigte, und einer erhitzten internationalen Community von hunderttausenden Benutzern, die sich teilweise mit harten Worten in Blogs, Foren und den jeweiligen Projektseiten beharkten.

Beide Projekte wurden weitergeführt. Der Fork wurde Joomla! genannt.

Das Joomla!-Team legte einen sehr großen Wert auf die Einhaltung von demokratischen Regeln. Das neue Projekt benötigte ein Logo, und so wurde ein Wettbewerb in der „neuen“ Community ausgerufen. Im neuen Forum hatten sich bis dahin in ein paar Tagen 8.000 Benutzer registriert. Die Vorschläge und die Ergebnisse sind natürlich online zu sehen⁹.

Die Mambo-Foundation stellte schnell ein neues Entwicklerteam vor.

Am 17.9.2005 wurde die Version 1.0 von Joomla! veröffentlicht.

Aus der Welt der so genannten Third Party-Entwickler, also Programmiergruppen, die Mambo-Komponenten entwickelten, wechselten die Projekte Simpleboard (heute FireBoard), Docman und viele andere schnell zu Joomla! und haben dadurch das Vertrauen in das neue Projekt bekräftigt. Aus der Vorsilbe „mos“, die in vielen Variablen und Begriffen benutzt wurde, wurde schnell „jos“.

Eine ausführliche Zusammenfassung der Ereignisse in englischer Sprache finden Sie im Internet¹⁰.

Joomla! gehört zwei Jahre nach seiner Gründung zu den populärsten Open Source-Projekten der Welt.

Allerdings sind in diesen zwei Jahren durch die Neuorganisation viel Zeit mit organisatorischen Grabenkriegen und interkulturellen Mißverständnissen vertan worden.

Das Web 2.0 feierte seine Siegeszüge. Von Benutzern erzeugter Inhalt wurde immer wichtiger. Second Life mit seiner virtuellen Umgebung wurde weltweit bekannt. Die Programmiersprache Ruby und insbesondere Ruby on Rails wurden mehr und mehr zur Entwicklung von Webseiten genutzt. Programmierschnittstellen spielten eine immer größere Rolle.

In diesem Bereich sah und sieht Joomla 1.0.x einfach schon ein bischen alt und grau aus. Es ist zwar nicht am Ende seiner Weiterentwicklungsmöglichkeiten, aber die Benutzer schielten manchmal schon ein wenig traurig auf die Fähigkeiten von Systemen wie Plone, Typo3, Drupal und vielen anderen, die nicht das Problem der schieren Größe und der Umorganisation hatten und die neuen Techniken stetig in ihre Projekte aufnahmen.

Seit zwei Jahren wird Joomla! in der Version 1.0.x nicht wirklich weiterentwickelt, sondern es wurden in erster Linie Sicherheitsupdates mit kleineren Code-Änderungen herausgegeben. Zwei Jahre Wartezeit auf eine neue Version sind kein Aushängeschild für das Projekt. Joomla! wurde in dieser Zeit oft totgesagt, belächelt, und in der Fachpresse erschienen teilweise hämische Artikel über das Thema: „Wie ruiniere ich ein tolles Softwareprojekt?“.

Mit der neuen Version Joomla! 1.5 ist dem Projektteam allerdings in sehr guter Wurf gelungen. Nachdem nun wirklich alles in Forum, Mailing Listen, E-Mail und persönlichen Treffen ausdiskutiert wurde, sieht heute die Zukunft von Joomla! besser aus als je zuvor.

Der Umstieg von der Version 1.0.x auf 1.5.x wird auf der einen Seite noch viel Kraft kosten, da durch den geänderten Quellcode keine vollständige Abwärtskompatibilität besteht. Es wird aber auf der anderen Seite Joomla! endgültig in die Liga der Business-tauglichen Content Management Systeme katapultieren. Die Strategie, aus Joomla! einen Baukasten zu erstellen (Joomla! Framework), mit dem Entwickler an den neuen Entwicklungen teilnehmen können, ist geschickt gewählt und wird sich auszahlen.

Endlich ist es auch möglich, verschiedene Authentifizierungsmethoden zu wählen, barrierefreie Websites in unterschiedlichen Sprachen zu erstellen und an der allgegenwärtigen Mashup-Welle¹¹, die jetzt auch deutlich in die Unternehmen schwappt, teilzunehmen. Auch der Weg zur Komponentenentwicklung in einer Umgebung wie Eclipse ist nun möglich.

Bei der vorhandenen Community-, Entwickler- und Installationsdichte wird Joomla! viele Bereiche dieses Marktes einfach abdecken. Viele Hosting-Provider bieten Joomla! heute schon vorinstalliert ihren Kunden an, und die neue Version 1.5 ist zur Version 1.0.x zumindest so kompatibel, dass es keine ernsthaften Probleme bei einem Umstieg von einfachen Websites geben wird.

Jetzt wollen wir ein Template selbst erstellen. Bis zum fertigen Template-Paket gibt es viele Dinge zu beachten. Wir gehen in mehreren Schritten vor.

13.3.1 Konzept

Bevor Sie etwas tun, sollten Sie ein Konzept erstellen. Gerade im Bereich der Template-Erstellung fängt die Arbeit mit einer Skizze oder einer Grafik an. Ob Sie diese Skizze mit einem Bildbearbeitungsprogramm wie dem kommerziellen Adobe Photoshop⁷, dem in Windows enthaltenen Microsoft Paint, dem Open Source-Programm Gimp⁸ oder tatsächlich mit einem Zettel und Buntstiften erstellen, ist Ihre Sache.

Feste Größe oder variabel (fluid) oder beides?

Sie können zwei Arten von Templates erstellen. Templates, die sich in der Struktur der Größe des Browserfensters anpassen, und Templates, die eine feste vorgegebene Größe haben. Ein Beispiel zum flexiblen Layout: Wenn jemand 2.048 Pixel Platz auf seinem Bildschirm hat und das Browserfenster maximiert, so wird Ihre Seite entsprechend auseinandergezogen. Wenn Sie grafische, nicht skalierbare Elemente wie Logos und Schriftzüge in Ihrem Template benutzen, kann das sehr eigenartig aussehen. Sie haben also keine echte Kontrolle über das Aussehen.

Die andere Variante ist, sich für eine bestimmte Auflösung zu entscheiden und alle Elemente auf das Pixel genau im Template zu positionieren. Das hat den Vorteil, dass Ihre Homepage immer so aussieht, wie Sie das wollen. Leider wissen Sie nicht, mit welcher Bildschirmauflösung Ihre Seite betrachtet wird. Auf einem Bildschirm mit der Auflösung von 800 x 600 Pixel ist Ihre Seite bildschirmfüllend. Auf einem großen Bildschirm mit 1400 x 1050 Pixel belegt sie nur etwa ein Viertel der Fläche und sieht etwas verloren aus.

Sie müssen die Vor- und Nachteile abwägen und können sich dann für eine Variante entscheiden, oder aber Sie denken in Richtung Barrierefreiheit (siehe Kapitel 14) und bieten beide Varianten an. Sie kennen bestimmt Websites, auf den denen man die Schriftgröße verändern kann. Neben den Buttons zur Schriftgröße gibt es auch oft einen Button zur Einstellung unterschiedlicher Layouts (Abbildung 13.1).

Abbildung 13.1: Layout Umschaltung

Wenn Sie die feste Größe bevorzugen, sollten Sie eine Größe wählen, die auf den meisten Bildschirmen darstellbar ist, also 800 x 600 Pixel. Da der Browser noch eine Scrollleiste auf der rechten Seite besitzt und das Browserfenster noch eingerahmt ist, ist die Ihnen zur Verfügung stehende Breite sogar noch etwas kleiner, so dass Sie in der Breite maximal 780 Pixel haben sollten.

Struktur

Sie haben es mit strukturierten Daten zu tun und sollten sich zunächst eine allgemeine Aufteilung überlegen. Joomla! benutzt normalerweise eine Struktur wie in Abbildung 13.2.

Abbildung 13.2: Idee einer Struktur

Teil 1

• Bereich 1: Hier steht Ihr Logo oder ein Bild und der Seitenname.
• Bereich 2: Hier befindet sich das Suchfeld.
• Bereich 3: Hier ist der verlinkte Navigationspfad (Breadcrumbs).

Teil 2

• Bereich 4: In der linken Spalte werden die wichtigsten Menüs angezeigt.
• Bereich 5: Hier befindet sich der eigentliche Seiteninhalt.
• Bereich 6: Die rechte Spalte bietet Platz für zusätzliche Menüs.

Teil 3

• Bereich 7: Die Fußzeile

13.3.2 HTML-Umsetzung

Jetzt müssen Sie das Konzept in HTML und CSS umsetzen. Abhängig vom Bildbearbeitungsprogramm, mit dem Sie es erstellt haben, gibt es vielleicht eine Möglichkeit, das Bild automatisch in HTML-Code zu exportieren. Sie können die Umsetzung auch per Hand in einem Texteditor oder in einem HTML-Editor wie Dreamweaver⁹ oder einem der zahlreichen freien HTML-Editoren¹⁰ erstellen.

Der Quellcode der HTML-Umsetzung sieht etwa so aus wie in Listing 13.1. Der Code ist bewusst einfach gehalten und entspricht im Kopfbereich nicht dem XHTML-Standard¹¹. Der Dateiname dieser Layoutdatei muss index.php sein, da sie von Joomla! per PHP auf eingebettete Befehle untersucht wird.

Im Head-Bereich des Codes wird die spätere CSS-Datei des individuellen Templates eingebunden (siehe Listing 13.2). In dieser CSS-Datei befindet sich momentan nur ein Befehl, der die Schriftart bestimmt.

<html>
<head>
  <link 
  href="/joomla150/templates/joomla150buch/css/template.css"   
  rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="Teil1">Kopfbereich/header
   <div id="Bereich1">Bereich1</div>
   <div id="Bereich2">Bereich2</div>
 </div>
 <div id="Teil2">Hauptanzeigebereich/main
   <div id="Bereich3">breadcrumbs</div>
   <div id="Bereich6">rechte Seite</div>
   <div id="Bereich4">linke Seite</div>
   <div id="Bereich5">Inhalt</div>
 </div>
 <div id="Teil3">Fusszeile /footer
   <div id="Bereich7">Bereich7</div>
 </div>
</body>
</html>

Listing 13.1: HTML-Datei /index.php

  body { font-size: 12px;
    font-family: Helvetica,Arial,sans-serif;
    }

  #Teil1 { border: 2px dotted green;
    width: 100%;
    height: 4em;
    }

  #Teil2 { border: 2px dotted yellow;
    float: left;
    width: 100%;
    }

  #Teil3 { border: 2px dotted red;
    float: left;
    width: 100%;
    }

  #Bereich1 { border: 1px dashed silver;
    margin: 0pt 0pt 1.2em;
    width: 18em;
    background-color: rgb(238, 238, 238);
    float: left;
    }

  #Bereich2 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    float: right;
    width: 16em;
    }

  #Bereich3 { border: 1px dashed silver;
    background-color: rgb(238, 238, 238);
    }

  #Bereich4 { border: 1px dashed silver;
    margin: 0pt 0pt 1.2em;
    float: left;
    width: 15em;
    }

  #Bereich5 { border: 1px dashed silver;
    margin: 0pt 12em 1em 16em;
    padding: 0pt 1em;
    }

  #Bereich6 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    float: right;
    width: 12em;
    background-color: rgb(238, 238, 238);
    }

  #Bereich7 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    }

Listing 13.2: CSS-Datei /css/template.css

Dieses erste Template werden Sie komplett per Hand im Joomla!-Verzeichnis erstellen. Wenn das Template fertig ist, können Sie ein gepacktes Installationspaket daraus machen, das dann auch von Dritten (oder Ihnen selbst) per Joomla!-Installer installiert werden kann. Speichern Sie die HTML-Layoutdatei unter dem Namen index.php im ebenfalls neu angelegten Verzeichnis [PfadzuJoomla]/templates/joomla150buch/. Die Datei template.css im Verzeichnis [PfadzuJoomla]/templates/joomla150buch/css/.

Damit ist die Grundstruktur Ihres Templates fertig. Jetzt müssen Sie Joomla! mithilfe einer XML-Datei das Template näher erklären, damit es im Template-Administrationsbereich angezeigt wird.

13.3.3 Verzeichnisstrukturen des Templates

Nun wird es Zeit, uns um gewisse Konventionen zu kümmern. Wie bereits angesprochen, muss das Template in einer besonderen Verzeichnisstruktur abgelegt sein.

[PfadzuJoomla]/templates/[Name des Templates]/
[PfadzuJoomla]/templates/[Name des Templates]/css/
[PfadzuJoomla]/templates/[Name des Templates]/images/

Der Name des Templates sollte keine Umlaute, Leerzeichen und sonstige Sonderzeichen enthalten. Wenn das Template später als Paket installiert wird, erzeugt der Template Installer daraus ein Verzeichnis. Abhängig vom Betriebssystem kann das bei exotischen Zeichenkombinationen zu Problemen führen. Außerdem sollte der Name aussagekräftig sein. Ich habe als Template-Namen joomla150buch genommen.

Im Template-Verzeichnis müssen verschiedene Dateien mit bestimmten Namen vorhanden sein.

Layoutdatei

/templates/joomla150buch/index.php

Das ist die HTML-Layoutdatei, die wir schon erstellt haben. Sie muss die Endung .php haben, da die dynamischen Joomla!-Modulelemente, die wir noch einfügen werden, von PHP interpretiert werden müssen.

Vorschaubild

/templates/joomla150buch/template_thumbnail.png

Diese Datei enthält das Vorschaubild Ihres Templates für die Auswahlvorschau in der Joomla!-Administration unter dem Menü Erweiterungen - Template Manager. Vorschaubilder haben das Format 200 x ca. 150 Pixel. Sie können diese Datei später erzeugen, wenn Sie Ihr Template sehen können.

Metadaten des Templates

/templates/joomla150buch/templateDetails.xml

Diese Datei stellt die Bauanleitung für den Template Installer dar und enthält die Installationen für die Template-Auswahl im Template-Manager. Hier beschreiben Sie, welche Dateien Ihres Templates wohin kopiert werden sollen, wer der Autor ist und weitere Metadaten über das Template. Bei der späteren Installation des Templates über den Joomla!-Installer liest PHP diese Datei aus und kopiert die Dateien an den Platz, der in der XML-Datei angegeben worden ist. Für das Beispiel-Template können Sie die Datei in Listing 13.3 verwenden und mit eigenen Daten versehen. Sie müssen für jede Datei, die Sie im Template benutzen, einen entsprechenden XML-Container mit dem Dateinamen und dem richtigen Pfad füllen.

<files>
  <filename>   
    ... Dateiname einer Datei im TemplateRoot-Verzeichnis eingeben ... 
  </filename>
  <filename>
    ... für jede Datei einen filename-Container 
  </filename>
</files>

Die anderen Container der XML-Datei dienen der Beschreibung des Templates. Hier das komplette funktionsfähige Listing der XML-Datei (Listing 13.3):

<install version="1.5" type="template">
  <name>joomla150buch</name>
  <version>1.0</version>
  <creationDate>11.11.2007</creationDate>
  <author>Hagen   Graf</author>
  <copyright>GNU/GPL</copyright>
  <authorEmail>hagen@cocoate.com</authorEmail>
  <authorUrl>http://www.cocoate.com</authorUrl>
  <version>0.1</version>
  <description>... Beschreibung</description>
  <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>css/template.css</filename>
  </files>
</install>

Listing 13.3: templateDetails.xml

Erstellen Sie die Datei templateDetails.xml ebenfalls im Verzeichnis [PfadzuJoomla]/ templates/joomla150buch/.

CSS-Datei

/templates/joomla150buch/css/template.css

Sie können mehrere CSS-Dateien für Ihr Template benutzen. Die Namensgebung und die Gestaltung der CSS-Datei steht Ihnen frei. Es gibt jedoch Standardbezeichnungen für verschiedene CSS-Elemente. Eine Tabelle dazu finden Sie im Anhang. Für Ihren ersten Versuch benötigen Sie nur eine CSS-Datei.

Grafiken, Bilder

/templates/joomla150buch/images/[beliebige Bilddateien]

In diesem Verzeichnis können Sie beliebige Bilddateien, die Sie in Ihrem Template benötigen, eintragen. Der Installer kopiert die Dateien dann in den images-Ordner.

13.3.4 Erster Probelauf

Wenn Sie alle Strukturen im Unterverzeichnis [PfadzuJoomla]/templates/ nachvollzogen haben (Abbildung 13.3), können Sie bereits Ihr neues Template in der Joomla!-Administration im Menü Erweiterungen - Template sehen und zum Standard erklären (Abbildung 13.4).

Abbildung 13.3: Verzeichnisstruktur und Dateien des joomla150buch-Templates

Abbildung 13.4: Neues Template im Manager

Wenn Sie Ihre Website aufrufen, sehen Sie Ihr neues Template (Abbildung 13.5). Leider werden noch keine Inhalte dargestellt. Da diese Inhalte dynamisch erzeugt werden, müssen Sie sie jetzt Stück für Stück in Ihr neues Template integrieren.

Abbildung 13.5: Aufruf im Browser

13.3.5 Integration der Joomla!-Module

Die Integration der Joomla!-Module erfolgt über in den HTML-Code eingebettete Befehle. Der Namensraum jdoc wird von Joomla! verwendet, um verschiedene Elemente in den Templates einblenden zu können. Wenn Sie im Kopfbereich der Layoutdatei index.php die (hier kursiv hervorgehobene) Zeile

<head>
<jdoc:include type="head" />
</head>

einfügen, erscheint bereits der Titel der Seite und das Newsfeed-Symbol korrekt (Abbildung 13.6).

Abbildung 13.6: Favicon und Seitentitel

Wenn Sie den HTML-Quellcode dieser Seite aufrufen, stellen Sie fest, dass Joomla! die gesamten Metadaten, die Sie in der Administration eingegeben haben, in den HTML-Code geschrieben hat (siehe Listing 13.4). Außerdem werden die RSS-Feeds per Link-Tag eingebunden und in Browsern wie Firefox, die diese Technik unterstützen, als Feed-Symbol angezeigt.

...
<head>
<base href="http://localhost/joomla150/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots"   content="index, follow" />
<meta name="keywords"   content="joomla, joomla!, Joomla, Joomla!, J!" />
<meta name="description" content="Joomla! - dynamische 
    Portal-Engine und Content-   Management-System"   />
<meta name="generator" content="Joomla!
    1.5 - Open Source Content Management" />
<title>Welcome to the Frontpage</title>
<link href="/joomla150/index.php?format=feed&amp;type=rss"
      rel="alternate" type="application/rss+xml"
      title="RSS 2.0" />
<link href="/joomla150/index.php?format=feed&amp;type=atom"
      rel="alternate" type="application/atom+xml"
      title="Atom 1.0" />
<script type="text/javascript"
        src="/joomla150/media/system/js/mootools.js"></script>
<script type="text/javascript"
        src="/joomla150/media/system/js/caption.js"></script>
...

Listing 13.4: Joomla!-Metadaten

Nachdem das so gut funktioniert hat, kommen wir gleich zu den anderen relevanten jdoc-Tags-Einschüben.

Der Befehl

<jdoc:include type="modules" name="top" style="none" />

beispielsweise erwartet als Parameter type den Typ des Einschubs, in unserem Fall modules. Der Parameter name kennzeichnet die Position des Moduls (top, right, left, user1, ...) auf der Website. Diese Position können Sie Ihrem Modul im Modulbereich, erreichbar über das Menü Erweiterungen - Module, zuordnen. Der Parameter style schließlich enthält einen Wert, der die Art des aus dem Modul gelieferten HTML-Codes betrifft. Der Wert none beispielsweise liefert die reine HTML-Ausgabe ohne umgebende <div>-Tags (siehe nachfolgende Tabelle).

Tabelle 13.1:  Modul-Parameter

Eine Beschreibung der jdoc-Einschübe in der Datei index.php sehen Sie in Listing 13.5.

ACHTUNG: Die <jdoc> Befehle müssen in einer Zeile stehen - Keine Zeilenumbrüche!

<html>
<head>
  <jdoc:include   type="head" />
  <link   
    href="/joomla150/templates/joomla150buch/css/template.css"   
    rel="stylesheet" 
    type="text/css"   />
</head>
<body>
  <div id="Teil1">Kopfbereich / header
    <div id="Bereich1">Bereich1 
      <jdoc:include type="modules" name="user3" style="xhtml" />
    </div>
    <div id="Bereich2">Bereich2  
      <jdoc:include type="modules" name="top" style="xhtml"   />
    </div>
  </div>
  <div id="Teil2">Hauptanzeigebereich / main
    <div id="Bereich3">breadcrumbs  
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />     </div>
    <div id="Bereich6">rechte Seite 
      <jdoc:include type="modules" name="right" style="xhtml" />     </div>
    <div id="Bereich4">linke Seite   
      <jdoc:include type="modules" name="left" style="xhtml" />     </div>
    <div id="Bereich5">Inhalt  
      <jdoc:include type="component" style="xhtml"/>     </div>
  </div>
  <div id="Teil3">Fusszeile   /footer 
    <div id="Bereich7">Bereich7
      <jdoc:include type="modules" name="footer" style="xhtml"   />
    </div>
  </div>
</body>
</html>

Listing 13.5: index.php mit jdoc-Einschüben

Wenn Sie die Website mit dem geänderten HTML-Code auf dem lokalen Server aufrufen, sehen Sie bereits die dynamischen Inhalte. Ihr neues Template wurde mit allen Daten gefüllt. Das Ergebnis sieht natürlich optisch noch verbesserungswürdig aus, aber immerhin: Das Prinzip hat jetzt schon mal funktioniert (Abbildung 13.7).

Abbildung 13.7: Template mit dynamischen Daten

Jetzt müssen wir das Template noch in ein Installationspaket packen.

13.3.6 Ein Template-Paket erstellen

Um Ihr Template weitergeben zu können, müssen Sie es in ein Zip-Archiv verpacken. Bevor Sie das tun, erstellen Sie noch ein aktuelles Vorschaubild Ihres Templates (template_thumbnail.png) in der Größe 227 x ca. 162 Pixel. Im Template-Bereich sollte dieses Vorschaubild jetzt beim Überfahren des Namenslinks angezeigt werden (Abbildung 13.8).

Abbildung 13.8: Vorschaubild des joomla150buch-Templates

Packen Sie jetzt alle Template-Dateien von joomla150buch inklusive Ihrer Unterverzeichnisse in ein Zip-Archiv.

Markieren Sie dazu alle Dateien und Ordner im Ordner

[PfadzuJoomla]/templates/joomla150buch/

und packen Sie alles in die Datei joomla150buch.zip.

Sichern Sie den Ordner und die ZIP-Datei.

Deinstallation des Templates

Das von Ihnen erstellte Paket können Sie an andere weitergeben oder selbst installieren. Um die Installation ausprobieren zu können, müssen Sie das eben erstellte Template wieder aus dem Joomla!-System entfernen.

Um es entfernen zu können, müssen Sie zunächst ein anderes Template als Standard festlegen. Klicken Sie in das Menü Erweiterungen - Template, wählen Sie das gewünschte Template aus und klicken Sie auf das Icon Standard.

Jetzt können Sie Ihr Template deinstallieren. Besuchen Sie das Menü Erweiterungen - Installieren/Deinstallieren und klicken Sie dort auf den Reiter Templates. Wählen Sie Ihr gerade erstelltes Template joomla150buch aus und klicken Sie auf das Icon Deinstallieren (Abbildung 13.9).

Abbildung 13.9: Deinstallation des Templates

13.3.7 Installation mit dem Joomla!-Template Installer

Nachdem Sie alle Spuren der Entwicklung beseitigt und ihr Werk gesichert haben, rufen Sie den Menüpunkt Erweiterungen - Installieren/Deinstallieren auf.

Dort können Sie Ihr ZIP-Paket installieren. Wählen Sie die Datei joomla150buch.zip aus und installieren Sie sie durch einen Klick auf den Button Datei hochladen & installieren. Der Installer meldet die erfolgreiche Installation des Templates. In der Erfolgsmeldung wird Ihnen die Beschreibung aus der XML-Datei angezeigt (Abbildung 13.10).

Abbildung 13.10: Installation der Template-Paketdatei

Wenn Sie jetzt in den Template-Bereich wechseln, sollte das joomla150buch-Template installiert und auswählbar sein (Abbildung 13.8).

13.3.8 Welcher Quellcode kommt aus Joomla!?

Nachdem wir nun die härtesten Hürden bei der Template-Erstellung genommen, wollen wir kurz in einen Blick in den HTML-Code werden, den Joomla! zurückliefert.

Joomla! erzeugt natürlich Code, der in die von uns erzeugten Container eingeblendet wird. Dieser Code besteht aus HTML mit eingesprenkelten CSS-Klassen und -IDs. Joomla! enthält unter anderem zwei CSS-Dateien, die bestimmte Klassen und IDs beschreiben und in jedes Template eingebunden werden sollten.

Es handelt sich dabei um die Dateien /templates/system/css/system.css und /templates/ system/css/general.css.

Sie werden in das Template im <head>-Bereich mit den folgenden Befehlen eingebunden:

<link 
  rel="stylesheet" 
  href="<?php echo $this->baseurl ?>/templates/system/css/system.css"
  type="text/css"   />
<link 
  rel="stylesheet" 
  href="<?php echo $this->baseurl ?>/templates/system/css/general.css"
  type="text/css" />

In beiden Dateien finden Sie die Klassen und IDs, die im weiteren Verlauf des Kapitels auftauchen werden.

Die Modulposition links im Detail

Nehmen wir uns die linke Modulleiste mal etwas genauer vor (Abbildung 13.11).

Abbildung 13.11: Template – Module an der Position links

Das ist der HTML-Code in der Layoutdatei index.php:

<div id="Bereich4">linke Seite <jdoc:include type="modules" name="left" style="xhtml" />

Das <div>-Tag für diesen Bereich wird über eine CSS id mit dem Namen Bereich4 formatiert.

Wenn Sie sich mal den ausgelieferten HTML-Code in einem Browser ansehen (Rechtsklick auf die Website, Quellcode anzeigen), sehen Sie natürlich viel mehr Code, der von Joomla! durch den jdocs-Aufruf erzeugt wurde (Listing 13.6).

... weitere HTML Befehle
<div id="Bereich4">linke Seite
  <div class="moduletable_menu">
    <h3>Hauptmenü</h3>
    <ul class="menu">
      <li id="current" class="active item1">
        <a href="http://localhost/joomla150/">Startseite</a>
      </li>
      <li class="item2">
        <a href="/joomla150/joomla-license">Joomla! License</a>
      </li>
    </ul>
  </div>
... weitere HTML Befehle

Listing 13.6: Auszug aus dem ausgelieferten HTML-Quellcode

Auffallend bei diesem Code sind die CSS-Klassen menu, active item1, item2. Im Kapitel 7.2 sind wir auf die zusätzlichen CSS-Suffixe in den Modul-Parametern eingegangen. Hier ist offensichtlich so ein Fall. In einer CSS-Datei des Standard-Templates rhuk_milkyway werden Sie auch sofort fündig¹²:

div.module_menu h3{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #eee;
  margin: -23px -4px 5px -5px;
  padding-left: 10px;
  padding-bottom: 2px;
}
div.module_menu {
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}
div.module_menu div   div div {
  padding: 10px;
  padding-top: 30px;
  padding-bottom: 15px;
  width: auto;
}
div.module_menu div   div div div {
  background: none;
  padding:   0;
}
div.module_menu ul {
  margin: 10px 0;
  padding-left: 20px;
}
div.module_menu ul li a:link, 
div.module_menu ul li a:visited {
  font-weight: bold;
}

Diese CSS-Blöcke sorgen in diesem Fall für die abgerundeten Ecken der Menüs. Es gibt noch weitere Einträge in der CSS-Datei, die die Überschrift dritter Ordnung (<h3></h3>) und eine unsortierte Liste (die Menülinks) für diesen Fall formatieren.

So weit, so gut. Diese Art der Formatierung ist gewollt, und die Ausgabe der benötigten <div>-Tags kann noch über das Attribut style verändert werden. In unserem Beispiel-Template haben wir den Parameter style xhtml benutzt, in diesem Template wird der Parameter style rounded benutzt. Er liefert das entsprechende vierteilige <div>-Tag.

Diese Art der Code-Erzeugung eignet sich sehr gut zum Formatieren per CSS. Wenn Sie etwas weiterlesen im Quellcode, werden Sie jedoch auch wieder über Tabellen stolpern! Die Content Komponente arbeitet noch mit Tabellen! An dieser Stelle beginnt Ihr Problem, wenn Sie den Content (der Inhalt in der Mitte) individuell ohne Tabellen formatieren wollen. Joomla! hat aber auch hier eine Lösung.

Template Overrides (HTML-Ausgabe anpassen, ohne die Core-Dateien zu verändern)

Um das Problem mit der Tabellenausgabe in den Griff zu bekommen, müssten Sie jetzt normalerweise die Joomla!-Core-Dateien ändern. Ihr Content wäre zwar frei von Tabellen, aber beim nächsten Update von Joomla! könnte es sein, dass die Datei wieder überschrieben wird.

Als Lösung für das Problem gibt es seit Joomla! 1.5.0 erstmals die so genannten views. Jede Komponente enthält einen zusätzlichen Ordner view, dort finden Sie viele unterschiedliche Sichten auf die Ausgabe der Logik-Komponente. Bei der Content-Komponente com_content sind das beispielsweise archive, article, category, frontpage und section. Diese fünf Ordner enthalten Dateien, die verschiedene Sichten des Inhalts zur Verfügung stellen. Sie erinnern sich bestimmt an die Tabellen- und die Blogsicht. Jeder dieser fünf Ordner enthält auch einen Ordner tmpl und dieser wiederum verschiedene Dateien, die für die Darstellung zuständig sind (Abbildung 13.12).

kap13_0200_views.bmp
Abbildung 13.12: Verzeichnisstruktur views

Um diesen Weg zu nutzen, benötigen Sie ein zusätzliches Verzeichnis in Ihrem Template-Verzeichnis. Wenn wir bei diesem Beispiel bleiben, muss das Verzeichnis com_content/article heißen, da Sie das Layout der content-Komponente in der Darstellungsform article verändern wollen.

Sie müssen also die Dateien in

[PfadzuJoomla}/components/com_content/view/article/tmpl/*.*

in Ihr neues Template-Verzeichnis kopieren und können sie dann an Ihre Bedürfnisse anpassen.

[PfadzuJoomla}/templates/[ihrTemplate]/html/com_content/article

Sie können diesen Weg gut im Beez-Template nachvollziehen. Hier liegen die oben angesprochenen Dateien in

[PfadzuJoomla}/templates/beez/html/com_content/article

und überschreiben damit die Core-Dateien, ohne sie zu verändern (override).

Joomla! sucht im Template-Verzeichnis zunächst nach diesen Dateien. Sind sie vorhanden, werden sie genutzt. Sind sie nicht vorhanden, werden die Core-Dateien aus den Komponenten genutzt.

Die Abkürzungen HTML¹/XHTML², CSS³ und XML⁴ stehen für Internettechnologien, mit denen Joomla! arbeitet. Diese Technologien werden vom World Wide Web-Konsortium⁵ standardisiert.

13.2.1 HTML/XHTML

Das World Wide Web basiert auf HTML. Bei HTML handelt es sich nicht um eine Programmier-, sondern um eine Textbeschreibungssprache.

Jeder Text besteht aus Strukturen wie beispielsweise Überschriften, Aufzählungen, fett und kursiv gedruckten Bereichen, Tabellen und vielem mehr. HTML arbeitet mit so genannten Tags. Ein Tag hat einen öffnenden und einen schließenden Teil. Eine Überschrift erster Ordnung wird beispielsweise so dargestellt:

<h1>Dies ist eine Überschrift</h1>

Im Browser werden die Tags interpretiert, und entsprechend ihrer Bedeutung wird der Text dargestellt.

HTML ist sehr einfach zu erlernen. Die wohl beste Anleitung gibt es online und downloadbar unter http://de.selfhtml.org/.

HTML selbst wird nicht mehr weiterentwickelt. Der Nachfolger von HTML ist XHTML in der Version 1.0⁶.

13.2.2 CSS

Cascading Stylesheets (CSS) sind eine Ergänzung zu HTML. Auch CSS ist keine Programmiersprache, sondern ein Vokabular zur Definition von Formateigenschaften einzelner HTML-Elemente.

Mithilfe von CSS-Befehlen können Sie beispielsweise bestimmen, dass Überschriften der ersten Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Arial, aber nicht fett erscheinen, und mit einem Abstand von 1,9 Zentimetern zum darauf folgenden Absatz versehen werden.

Angaben dieser Art sind mit reinem HTML nicht möglich und waren bei der Entwicklung von HTML auch nicht nötig. Mit der fortschreitenden Kommerzialisierung des Internets werden weitergehende Formatierungsmöglichkeiten allerdings immer wichtiger.

CSS-Angaben können auf drei Arten in HTML eingebunden werden.

Zentral für eine HTML-Datei

Hier werden die CSS-Befehle innerhalb des Kopfes der HTML-Datei definiert.

<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/* ... Hier werden die CSS-Befehle definiert ... */
-->
</style>
</head>

In einer separaten CSS-Datei

Wenn die CSS-Befehle für mehrere HTML-Dateien gelten sollen, bietet es sich an, die CSS-Befehle in eine extra Datei auszulagern und den Pfad zu dieser Datei im HTML-Kopf anzugeben. Diese Variante wird von Joomla! benutzt.

<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>

Innerhalb eines HTML-Tags

Innerhalb eines HTML-Tags können ebenfalls CSS-Befehle eingebunden werden.

<body>
<h1 style="… CSS-Befehle ...">...</h1>
</body>

Kombinationen

Die drei Möglichkeiten können in einer HTML-Datei problemlos kombiniert werden. Es ist beispielsweise möglich, in einer zentralen Datei definierte CSS-Befehle, die für alle Seiten gelten, im weiteren Quellcode einer HTML-Seite zu überschreiben. Da diese Art der Benutzung jedoch schnell in unübersichtlichen Strukturen endet, sollten Sie lieber die zentrale Datei anpassen.

13.2.3 XML

Die Extended Markup Language ist ein Universum für sich. Sie stellt eine Metasprache dar und ist selbst vom älteren, in den sechziger Jahren entwickelten und erheblich komplexeren SGML (Standard Generalized Markup Language) abgeleitet. XML wird oft für Konfigurationsdateien und als Austauschformat benutzt. Für unsere Zwecke benötigen Sie XML als Beschreibungssprache für die Metadaten des Templates, das Sie erstellen wollen. Diese Metadaten sind in erster Linie für den Template Installer und die Anzeige im Template Manager wichtig.

Prinzipiell bestehen diese Daten wieder aus öffnenden und schließenden Tags, beispielsweise:

<name>Joomla! Buch</name>

Der Unterschied zu HTML liegt darin, dass in XML keine Tags vordefiniert werden. Man ist also völlig frei in der Gestaltung der Strukturen und der Benennung der Tags.

Client-Server-System

Unter einem Client-Server-System versteht man eine Netzwerkstruktur, bei der Dienste von einem zentralen Server angeboten werden, auf die beliebig viele Arbeitsstationen (Clients) zugreifen können. Der Server ist für die Bereitstellung des Dienstes zuständig. Der Client kann mit dem Server kommunzieren und bietet die eigentliche Benutzeroberfläche. Der Client ist ein Internetbrowser. Die Server heißen in unserem Fall Apache und MySQL.

Ablauf eines Zugriffs auf eine Joomla!-Website im Internet

Um eine grobe Vorstellung von den Vorgängen hinter den Kulissen zu bekommen, hier eine vereinfachte Auflistung der Abläufe, um von einem Computer auf eine Joomla!-Website zugreifen zu können:

• Internetverbindung über einen Provider herstellen.

• Die gewünschte Website-Adresse (URL) im Browser aufrufen.

• Der Browser nimmt Kontakt mit dem Webserver auf.

• Der Webserver schickt eine Anfrage an den auf den Server installierten PHP-Sprach-Interpreter. Der ruft die Joomla!-PHP-Dateien auf und interpretiert sie.

• Der PHP-Interpreter fordert die benötigten Daten bei der Datenbank an.

• Der PHP-Interpreter erzeugt je nach Template HTML- oder XHTML-Code und gibt ihn an den Webserver weiter.

• Der Webserver liefert die »Seite« bzw. den generierten Code an den Browser des Clients.

• Der Browser »entdeckt« in der ihm angelieferten Seite Verweise auf CSS- und andere Dateien (Bilder, Flash-Elemente ...) und fordert diese separat beim Webserver an.

• Während des Ladens aller benötigten Ressourcen versucht der Browser, die Seite zu »parsen« und zu »rendern«, also auseinanderzunehmen und möglichst gut darzustellen.

Sie sehen schon an diesen Abläufen, dass die Darstellung einer Joomla!-Website aus vielen Schritten besteht, die teilweise nichts mit Joomla! zu tun haben.

Bisherige Versionen von Joomla! haben den Inhalt standardmäßig in Layouttabellen ausgegeben. Das Neue an Joomla! 1.5 ist das System der so genannten Template-Overwrites.

Mit Joomla! 1.5 sind wir in der Lage, die HTML-Ausgabe in unser Template zu verlagern, so dass die »tabellenbelastete« Standardausgabe nicht mehr zwingend genutzt werden muss. Das bringt die notwendige Flexibilität, die wir zur Gestaltung zugänglicher, standardkonformer Seiten brauchen. Den HTML-Code zu beinflussen ist nicht ganz so einfach, obwohl der Aufbau der Dateien logisch und in sich schlüssig ist. Grundlegende PHP-Kenntnisse reichen jedoch aus, um individuelle Anpassungen vornehmen zu können.

Joomla! benutzt dazu das System der so genannten Template-Overwrites. Findet Joomla! in unserem Template-Verzeichnis einen HTML-Ordner mit entsprechendem Inhalt, greift es darauf zu, ansonsten weicht es auf den Standard-Code aus, der aus Gründen der Abwärtskompatibilität noch mit Tabellen arbeitet. Beez macht Ihnen genau das vor. Siehe Kapitel 13.3.8.

Wenn Sie sich die Struktur von Beez anschauen, fällt auf, dass im Gegensatz zum Standard-Template dieser zusätzliche HTML-Ordner vorhanden ist (Abbildung 14.9).

Abbildung 14.9: Ordnerstruktur

In diesem Ordner befinden sich wiederum alle in Joomla! standardmäßig integrierten Module und Komponenten. Der HTML-Output all dieser Dateien wurde angepasst und überarbeitet. Auf der Grundlage der Trennung von Inhalt und Präsentation habe ich ein Markup entwickelt, dessen formale Struktur der inhaltlichen Struktur weitgehend entspricht und für die meisten Anwendungsfälle ohne Anpassung nutzbar sein dürfte.

Das heißt

• dass alle Elemente eines Dokuments in der richtigen und logischen Reihenfolge im Quelltext angeordnet sind – unabhängig davon, ob sie später auf einem Bildschirm neben- oder untereinander erscheinen;
• dass alle Elemente so ausgezeichnet sind, wie das ihrer Stellung und Bedeutung im Dokument (= Semantik) entspricht: Überschriften als Überschriften, Absätze als Absätze, Zitate als Zitate, Adressen als Adressen, Tabellendaten als Tabellendaten usw. Damit ist es möglich, das Dokument automatisch auf die verschiedenste Weise weiterzuverarbeiten, nicht zuletzt eben auch für eine möglichst komfortable Wiedergabe in einem Screenreader.

Ein Überblick über die sichtbare Überschriftenstruktur von Beez liefert Abbildung 14.10.

Abbildung 14.10: Überschriftenstruktur