Joomla 1.5 Template Tutorial
Was ist ein Joomla! Template?
Ein Joomla! Template ist eine Sammlung von Dateien innerhalb des Joomla! CMS, welches die Ausgabe der Inhalte (Content) kontrolliert. Das Joomla! Template ist weder eine Webseite noch übernimmt es das komplette Design einer Webseite. Das Template ist die grundlegende Basis für die Sicht auf Ihre Joomla! Website. Es arbeitet dabei eng mit den Inhalten zusammen, die in der Datenbank gespeichert sind. Ein Beispiel hier:
9.1 Template mit und ohne Inhalte
Bild A zeigt ein Template mit Beispielcontent. Bild B zeigt das Template nach der Installation von Joomla! mit wenig oder keinem Content. Auf eingefügte Inhalte werden die im Template-Stylesheet definierten Stile angewandt. Beispiele hierfür: Das Aussehen von Links, Menüs, Navigation, Textgrößen und Farben, um nur wenige zu nennen.
Ein Template in einem CMS wie Joomla! zu benutzen, hat Vor- und Nachteile:- Inhalte und deren Präsentation sind komplett getrennt, besonders wenn CSS für das Layout benutzt wird (im Gegensatz zum Einsatz von Tabellen in der index.php). Dies ist das Hauptkriterium für eine Seite, die sich nach modernen Webstandards richtet.
- Ein neues Template und damit ein neues Aussehen der Webseite kann sofort integriert werden. Dieses kann sich sowohl auf das Layout, die Positionen der angezeigten Inhalte als auch auf die Farben und Grafiken auswirken.
- Die Verwendung verschiedener Layouts innerhalb einer Webseite ist schwierig zu realisieren.
Obwohl verschiedene Templates einzelnen Seiten zugeordnet werden können, ist diese eingebaute Funktionalität nicht zuverlässig einsetzbar. Viel besser ist es, PHP-Code zu verwenden, um ein Layout zu erzeugen, das abhängig vom veröffentlichten Inhalt die Anzahl der Spalten festlegt.
Localhost Designprozess
Eine Joomla! Webseite ist nicht statisch. Das bedeutet, dass sie dynamisch mit den in der Datenbank gespeicherten Inhalten aufgebaut wird. Die Seite, die man sieht, wurde vorher unter Verwendung verschiedener PHP-Befehle im Template erzeugt. Dies gibt einige Schwierigkeiten in der Entwicklungsphase auf.
Es ist heute üblich, einen "What You See Is What You Get" (WYSIWYG) HTML Editor wie zum Beispiel Dreamweaver einzusetzen. Webdesigner müssen also nicht HTML programmieren. Jedoch ist dies nicht bei der Entwicklung eines Joomla! Templates möglich, weil WYSIWYG Editoren keine dynamische Webseite anzeigen können. Darum müssen die Seiten "von Hand" programmiert werden und die Ausgabe auf einem Webserver angesehen werden. Dieser könnte ein externer Server sein, wenn eine schnelle Internetanbindung zur Verfügung steht. Die meisten Webdesigner nutzen allerdings einen "local Server" auf Ihrem eigenen Rechner. Dies ist eine Software, welche die Seiten auf dem Rechner des Designers aufbaut und anzeigt.
Es gibt keinen idealen Weg eine Webseite zu kreieren, es hängt von den Fähigkeiten des Designers ab. Die mehr grafisch bewanderten werden ein "Bild" einer Seite in einem Grafikprogramm wie Photoshop aufbauen und dies in mehrere Bilder aufteilen (slice and dice). Die mehr technisch orientierten Designer beginnen mit der Programmierung des CSS. Aufgrund der oben beschriebenen Einschränkung, die Änderungen im Code nicht sofort im Editor zu sehen, empfiehlt sich folgendes Vorgehen in der Entwicklung:
- Editieren Sie im HTML Editor, Sichern Sie die Änderungen
- Lassen Sie den 'localhost Server' im Hintergrund laufen, um darin Joomla! zu starten.
- Prüfen Sie die Änderungen in einem Webbrowser
- Gehen Sie wieder zu 1.
Localhost Server Optionen
In Kapitel 2 haben wir die Installation eines lokalen Webservers kennengelernt. Im einzelnen haben wir WAMP5 beschrieben. Um diesem Kapitel weiter folgen zu können, sollten Sie ihn jetzt installieren.
Beispiel: Wenn Ihr Layout installiert ist, rufen Sie die Seite über den Webserver auf und wählen Sie dann Quelltext anzeigen im Browser. Dann kopieren Sie diesen per copy & paste in den Editor. Nun können die Styles im CSS einfach geändert werden, ohne den oben beschriebenen Weg zu gehen.
Für diejenigen, die nicht einen kommerziellen Editor wie Dreamweaver verwenden wollen, gibt es einige kostenlose Alternativen: Nvu ist mit seiner integrierten Codevalidierung eine gute Wahl. Es wird auch eine nützliche Erweiterung für Joomla! angeboten. Nvu ist 100% Open Source, so dass jeder Nvu ohne weitere Kosten incl. dem Quellcode herunterladen kann, falls spezielle Änderungen programmiert werden sollen.
W3C und tabellenfreies Design
Usabilty, Accessibility und Suchmaschinenoptimierung sind Ausdrücke, die benutzt werden, um eine hochwertige Webseite im heutigen World Wide Web zu beschreiben. In der Realität gibt es allerdings eine große Überschneidung in der Definition dieser Begriffe. Der einfachste Weg, diese drei Ziele zu erreichen, ist den Aufbau der Seite an den W3C Web Standards auszurichten.
Zum Beispiel ist eine Seite, die nach X(HTML) strukturiert ist (XHTML definiert das Dokument, nicht dessen Aussehen) mit einem Screenreader für Sehbehinderte einfach zu lesen. Auch ein Suchmaschinenspider wird damit keine Probleme haben. Google ist gewissermaßen blind bei dem Lesen einer Seite.
9.2 Überschneidung von Usability, Accesibility und SEO
Web Standards legen einen gemeinsamen Regelsatz für alle Webbrowser fest, um eine Seite darzustellen. Die Organisation, welche diese Standards festlegt, ist das World Wide Web Consortium (WC3), dessen Direktor Tim Berners-Lee das World Wide Web 1989 begründet hat.
Um Ihnen zu erklären, woher Web Standards kommen, ist ein Blick in die Geschichte hilfreich. Viele Webseiten werden für ältere Browser entwickelt. Warum? Browser haben sich kontinuierlich seit dem Beginn des WWW weiter entwickelt. Neue wurden vorgestellt und ältere verschwanden (erinnern Sie sich an Netscape?).
Die W3C Standards dienen dazu, hoffentlich die Browserhersteller zu drängen, konforme Browser herzustellen, damit die Designer nur noch auf einer gemeinsamen Grundlage entwickeln können.
Ein anderer komplizierender Faktor ist, daß verschiedene Browserhersteller (wie Microsoft) ihre Browser HTML/XHTML ein wenig unterschiedlich interpretieren lassen. Dies hat die Webdesigner dazu geführt, Ihre Seiten so zu entwickeln, daß diese sowohl ältere als auch neue Browser unterstützen. Oft wird also entschieden, daß die Webseite in den sogenannten "legacy" Browsern eine gute Figur machen soll.
Die W3C Standards wurden entwickelt, um Konsistenz sicher zu stellen.
Es ist einfach, Ihren Code bei validator.w3.org überprüfen zu lassen. Stellen Sie sicher, daß Sie den richtigen DOCTYPE verwenden, wenn Sie Ihren Code validieren lassen. Dieser Artikel bei Compass Designs beschreibt einen validen Joomla! DOCTYPE
Fragen Sie fünf Webdesigner, was Web Standards sind, Sie werden fünf Antworten bekommen. Aber die meisten würden zustimmen, daß diese auf folgenden Punkte beruhen:
Semantisch korrekter Code
Wir erwähnten schon; Semantisch bedeutet, daß X(HTML) in der Webseite nur die Inhalte und nicht die Präsentation beschreibt. Dies meint besonders einen strukturierten Aufbau von z.B. h1/h2 Tags und ein alleiniger Einsatz von Tabellen für Tabellendaten und nicht für das Layout der Webseite.
Cascading Style Sheets (CSS)
Nah verbunden mit der Entwicklung semantischen Codes werden Cascading Style Sheets verwendet, um das Aussehen und den Aufbau der Webseite zu kontrollieren. Cascading Style Sheets (CSS) sind ein einfacher Weg, um Stile (Styles) für Webseiten festzulegen (z.B. Fonts, Farben, Abstände) (Quelle: www.w3.org/style/CSS/). CSS existieren parallel zum X(HTML) Code und lassen eine Trennung von Inhalten (semantischen Code) und der Präsentation zu. Das beste Beispiel ist CSS Zen Garden, eine Seite, auf welcher der semantische Code auf eine einzigartige Weise mit unterschiedlichen CSS dargestellt wird. Das Ergebnis ist eine sehr differenzierte Darstellung mit dem jeweils gleichen Content.
Webseiten mit Joomla! zu entwickeln, stellen beachtliche Anforderungen bei der Validierung nach den W3C Standards. In den derzeitigen Joomla!-Versionen (1.0.X) benutzt der Code eine große Anzahl von Tabellen, um die Seite anzuzeigen. Dies bedeutet keine konsequente Verwendung von CSS für die Präsentation, noch generiert dies semantisch richtigen Code.Das Problem verstärkt sich dadurch, daß nur wenige Drittentwickler CSS nutzen, sondern Tabellen.
Jedoch bedeutet tabellenfrei nicht das gleiche wie valide. Es ist sicherlich möglich, eine valide Seite mit Tabellen aufzubauen. Es ist nur um ein einiges schwieriger. Ein guter Forumsthread erklärt dies im Detail: Easy tricks to remove many tables from the standard output of Joomla!
Glücklicherweise hat das Joomla! Core Development Team sich dieses Problems angenommen. In der Version 1.5 ist es für Template Designer möglich, die Ausgabe des Cores zu übersteuern (override), auch view genannt, um die Ausgabe von Tabellen zu entfernen und das Layout individuell zu erstellen.
Trotzdem sollte bei der Entwicklung eines Templates darauf geachtet werden, daß es zugänglich (accessible) ist (zum Beispiel in der Größe veränderbare Fonts), anwendbar (usable) ist (z.B. eine klare Navigation) und optimiert ist für Suchmaschinen (z.B. quelltextgeordnet - source ordered).