Joomla! Template Tutorial Teil 2 - Das Konstrukt |
Geschrieben von Tom | |
Donnerstag, 31. Dezember 2009 | |
Nun ist bereits ein Jahr seit Teil eins des Joomla 1.5 Template Tutorials vergangen und die Fortsetzung ließ auf sich warten. Dank meines süßen, neuen Netbooks bin ich mittlerweile zum Glück in der Lage, auch in Cafés, Parks, Badewannen und langweiligen Meetings Artikel zu schreiben. Teil 3 des Joomla! 1.5 Template Tutorials ist fertig! Wie im Vorwort des Tutorials beschrieben, war der Plan das Screendesign eines laufenden Projekts als Grundlage des Tutorials zu nutzen. Zum Glück hatten wir zwei Entwürfe erstellt, von denen wir hierfür den nicht umgesetzten auswählen. Das passt sehr gut, denn jetzt können wir gemeinsam ein weniger auf den Kunden zugeschnittenes Joomla Template, als vielmehr ein vielseitiges, parametrisierbares und freies Joomla! Template für die ganze Joomla Community daraus basteln. Dabei werden wir viele Aspekte der Template Entwicklung für Joomla 1.5 aufgreifen. Das Screendesign zum Joomla TemplateSchreiten wir also zur Tat. Die Screendesign Variante, welche unser Grafiker angefertigt und welche ich für dieses Tutorial ausgewählt habe, sieht wie folgt aus: Hübsch, nicht war? Es fällt auf, dass einige Bereiche noch nicht völlig fertiggestellt sind, wie z. B. der mittlere "Accordeon" Bereich. Hier sollte ursprünglich ein Joomla! Modul mit einem Accordeon-Effekt erscheinen. Da ich jedoch nicht davon ausgehe, dass viele Menschen so etwas benötigen, werden wir diesen Bereich etwas anpassen und für beliebige Feature-Module, wie z. B. eine Slideshow, ein Content-Scroller oder andere Frontpage Module reservieren. Das ist das Gute bei einem versiertem Screendesigner. Er weiss, dass für ein Webdesign kein komplettes Screendesign nötig ist. Wichtig ist nur, das im Entwurf alle relevanten Funktionseinheiten abgedeckt sind. Anders sieht es natürlich aus, wenn man Kunden Entwürfe präsentiert. Aber das ist eine andere Geschichte...
Ansonsten besteht die Seite aus einem simplen zwei Spalten Layout, bei dem wir es auch belassen wollen. Was wir jedoch umsetzen werden, ist die Möglichkeit, die rechte Spalte nach
links zu verlagern oder auch komplett wegzulassen, wobei der Content Bereich dann über die ganze Breite gehen sollte. Analyse - Vom Screendesign zum Webdesign/TemplateKommen wir nun zu den aus Sicht des Webdesigners interessanten Aspekten des Screendesigns. Vor der Umsetzung wollen wir versuchen, für das Webdesign kritische Elemente des Entwurfs zu erkennen. Sehen Sie sich dafür folgende Grafik und die zugeordneten Punkte an.
Damit haben wir fürs erste die kritischen Stellen dieses Screendesign identifiziert und mögliche Lösungswege beschrieben. Auf dem Weg der Umsetzung werden sicher noch einige Herausforderungen auftauchen und neue nicht bedachte Features für das Template eingebaut werden müssen. Wir wollen es damit zunächst auf sich beruhen lassen. Bevor wir mit der technischen Umsetzung beginnen, möchte ich noch ein paar Worte zu den nötigen Vorkenntnissen sagen. Wie ich im Vorwort erwähnt habe, kann es nicht Ziel dieses Tutorials sein Kenntnisse über Webdesign im Allgemeinen zu vermitteln. Vielmehr geht es darum, vorhandene Kentnisse mit dem hier vermitteltem Wissen über die Erstellung von Joomla! Templates zu erweitern. Grundlegende Kentnisse im Erstellen von Webseiten auf Basis von XHTML/CSS sollten also vorhanden sein. Ebenfalls sollte der Umgang mit der Firefox Erweiterung Firebug gegeben sein. Als Webdesigner kommt man an dieser Erweiterung zur Zeit nicht vorbei und spart bei der Entwicklung wertvolle Zeit. Rudimentäre PHP Kentnisse sind ebenfalls von Vorteil. Das Template SkelettIch gehe davon aus, dass Sie lokal in Ihrer Testumgebung eine frische Joomla! Installation liegen haben. Sie können natürlich auch eine bestehende Joomla! Installation für die Erstellung des Templates heranziehen. Wichtig wäre, dass Sie den Demo-Content, welcher bei der Installation von Joomla! mitgeliefert wird, installiert haben. Dadurch bekommt die Seite gleich etwas Fleisch an die Knochen und Sie sehen, wie sich das Template im Zusammenspiel mit Navigationen, Content und Modulen verhält. Ich entwickle das Template lokal unter der Adresse http://localhost/meineseite/. Um ein neues Template anzulegen, gehen Sie in das Joomla Template Verzeichnis und legen einen neuen Ordner an. Der Name des Ordners entspricht dabei dem Namen des Templates. Wie nennen wir unser Template? Ich habe mich entschieden, es einfach "Flows" zu nennen. http://localhost/meineseite/templates/flows/
In dieses Verzeichnis legen wir erstmal drei Dateien. Erstens eine (fast) leere index.html. Sie können diese einfach aus einem anderen Template Verzeichnis hier rüberkopieren. Diese Datei soll vermeiden, dass bei falsch konfigurierten Servern ein Direktzugriff ins Verzeichnis erfolgen kann.
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<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" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
Sie sehen hier bereits die grundlegenden Elemente, welche bei der Erstellung einer statischen XHTML Seite relevant sind. Wir wählen den DOCTYPE "Transitional" für dieses Template. Ansonsten sehen Sie die umschließenden HTML, HEAD und BODY Tags - im Prinzip nichts neues. Schauen wir uns die Joomla! eigenen Anweisungen an. In der ersten Zeile wird geprüft, ob die Konstante _JEXEC gesetzt ist. Dies ist wichtig, da diese Konstante vom Joomla! Framework gesetzt wird und sicherstellt, dass keine der PHP-Dateien unbefugt direkt aufgerufen wird. Möglichen Angreifern können so potentielle Sicherheitslücken nicht ausnutzen. Wenn Sie also die Datei http://localhost/meineseite/templates/flows/index.php direkt aufrufen, werden sie die Meldung "Restricted access" lesen. Richtig so. Im HTML-Tag werden einige PHP-Variablen verwendet. Das Template, welches wir entwickeln, ist für Joomla! einfach gesagt der Ort, an dem der Content aus allen Bereichen wie Komponenten, Modulen und Plugins zusammenläuft und dargestellt wird. Die index.php ist dabei eine PHP-Datei, welche im Kontext des Joomla-Frameworks verschiedene Informationen abfragen kann (JDocument). Diese können genutzt werden, um das Verhalten des Templates zu beeinflussen. Die Konstante _JEXEC ist ein einfaches Beispiel. Wir können beispielsweise aber auch abfragen, welche Sprache gerade genutzt wird, um entsprechend zu reagieren. Im HTML-Tag greifen wir über das Objekt $this auf solche Variablen zu. Sie können sich einfach mal den Inhalt des Objekt $this per print_r($this); ausgeben lassen. Im HEAD-Tag finden wir die Anweisung <jdoc:include type="head" />. Hier werden alle im Header nötigen CSS-Styles, Javascripte und Meta-Informationen ausgegeben (Rendering). Trotzdem können Sie, wenn nötig weitere eigene Tags in den Header Bereich direkt unter der JDOC Anweisung einfügen. Dies tun wir auch gleich, indem wir die beiden CSS-Dateien system.css und general.css einfügen. Beide befinden sich im standardmäßig vorhandenen System-Template von Joomla! und enthalten einige Styles, welche bei der Darstellung von Fehlern oder Editor-Knöpfen nötig sind. Warum diese nicht gleich in der JDOC Anweisung im Header mitgeladen werden? Nun, weil manche Template-Enwickler entweder gerne darauf verzichten oder auch eigene Styles hierfür definieren. Wir laden die beiden aber nach. Dabei hilft uns die Variable $this->baseurl, welche den Pfad zur aktuellen Joomla! Instanz liefert. Als letztes bleibt noch der BODY-Tag. Dieser ist in unserem Skelett, bis auf die JDOC-Anweisung komplett leer. Die JDOC-Anweisung des Typs "component" lädt den Inhalt der aktuellen Joomla! Komponente und stellt diesen dar. Hier passiert also die eigentliche Ausgabe von Inhalten wie z. B. Artikeln, Bildergalerien, Foren usw. Mehr Informationen zu den JDOC-Anweisungen finden Sie im JDOC-Bereich der Joomla! API Dokumentation.
Wie Sie sehen, fehlen unserem Template noch die unverzichtbaren Modulaufrufe. Diese lassen wir fürs Erste bei Seite und widmen uns der templateDetails.xml Datei. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd"> <install version="1.5" type="template"> <name>Flows</name> <creationDate>1 Dezember 2009</creationDate> <author>B01 - Tom Bohacek</author> <authorEmail> Diese E-Mail Adresse ist gegen Spam Bots geschützt, Sie müssen Javascript aktivieren, damit Sie es sehen können </authorEmail> <authorUrl>http://www.bohacek.de</authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>Flows template</description> <positions> <position>left</position> <position>right</position> <position>footer</position> </positions> <files></files> <params></params> </install> Wie Sie sehen, beinhaltet diese XML-Datei einige Informationen rund um das Template wie dessen Namen, den Autor, das Erstellungsdatum, die Version usw. Diese Informationen werden in der Template-Verwaltung im Backend von Joomla! herangezogen und dargestellt. Viel interessanter sind die Abschnitte Positions, Files und Params in der templateDetails.xml.Die Bereiche Files und Params ignorieren wir fürs erste und kommen auf sie zurück, wenn wir sie benötigen. Im Bereich Positions werden mit einzelnen Position-Tags die Modulpositionen gekennzeichnet, welche in unserem Template zum Einsatz kommen sollen. Wir müssen uns also überlegen, welche Modulpositionen wir benötigen. Schauen wir uns dafür nochmals das Screendesign an: All diese roten Vierecke sind Modulpositionen. Die Namen der Modulpositionen sind traditionell Englisch. Was wir im Entwurf nicht sehen, ist die Modulposition "left", welche zum Einsatz kommt, wenn wir eine Spalte auf der linken Seite haben wollen. Wir fügen also folgende weitere Positionen der templateDetails.xml hinzu: <position>navi</position> <position>header</position> <position>search</position> <position>user1</position> <position>user2</position> Damit ist unser Template Skelett fertig. Wenn Sie die Flows Template Dateien korrekt in das Template Verzeichnis kopiert haben, sollten Sie in der Template-Verwaltung im Backend unser Flows-Template vorfinden. Machen Sie es zum Standard-Template, indem Sie es über den Radio-Button anwählen und oben rechts auf "Standard" klicken. Der gelbe Stern sollte nun auf das Flows-Template gewechselt haben.
Um unser neues Template in Aktion zu sehen, sollten Sie in das Frontend wechseln und
die Seite z. B. so aufrufen: http://localhost/meineseite/
Der aktuelle Stand des Templates: Um Sie nicht völlig desillusioniert dastehen zu lassen, wollen wir in diesem zweiten Teil des Tutorials wenigstens einen winzigen Ansatz unseres Screendesigns umsetzen. Dafür benötigen wir natürlich ein Stylesheet. Legen Sie im Flows Template-Verzeichnes das Verzeichniss "css" an. Darin legen Sie eine leere Datei namens template.css. Diese wird unser Flows-Stylesheet beinhalten. Damit wir sie auch nutzen können, müssen wir sie wie folgt in der index.php einbinden: <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/flows/css/template.css" type="text/css" /> In die Stylesheet Datei legen wir erstmal einige CSS-Reset Styles an, die aus der YUI 2 stammen. Da jeder Browser-Hersteller eine andere Vorstellung davon hat, wie bestimmte HTML-Elemente ausschauen sollen, kümmert sich das von Yahoo entwickelte Reset-CSS darum, gleich zu Begin einen Konsenz zu schaffen. Weiter legen wir in der index.php, also unserem Template, einen DIV-Wrapper um die Komponentenausgabe. Das sieht dann so aus: <div class="wrapper"> <jdoc:include type="component" /> </div> Diesen Wrapper können wir nun im Stylesheet rudimentär stylen, indem wir ihm eine Breite verpassen. Damit wir endlich die Bordüre zu sehen bekommen, legen wir im Template Verzeichniss parallel zum "css"-Verzeichnis ein Bilderverzeichnis namens "images" an. Hier werden alle für das Template nötigen Bilder liegen. Darin platzieren wir eine Kachel unserer Bordüre und definieren dafür einen Style. Dieser hängt fürs Erste am BODY-Tag, was funktioniert, aber in Zukunft etwas abgewandelt wird. Wenn wir schon mal bei schnellen Erfolgserlebnissen sind, wollen wir auch gleich eine Modulposition in unser Template integrieren. Das tun wir, indem wir den BODY wie folgt abändern. <div class="wrapper"> <jdoc:include type="component" /> <hr /> <jdoc:include type="modules" name="right" /> </div> Mit der JDOC-Aweisung des Typs "modules" können wir steuern, welche Module ausgegeben werden sollen. Um die Position anzugeben, nutzen wir das Attribut "name". Im oben genannten Beispiel also die Modulposition "right". Alle Module, welche im Backend dieser Position zugeordnet sind, werden hier ausgegeben. Da wir kein Styling irgendwelcher Art haben, macht es Sinn, pro forma einen horizontalen Teiler zwischen die beiden JDOC-Anweisungen zu platzieren. Diesen erbärmlichen Zustand wollen wir möglichst rasch beheben, indem wir uns überlegen, auf welche Basis wir das Webdesign des Flows Templates stellen. Das grundlegende HTML/CSS Konstrukt
Es ist nur klar, dass unser Template, wie fast jedes andere, zwei oder
drei Spalten besitzen wird. Zeit sich zu überlegen, welches HTML/CSS
Konstrukt wir für die Darstellung der Inhalte heranziehen. Diese
Entscheidung ist die Wichtigste bei der Erstellung eines Webdesigns. Es
gibt nämlich unzählige Methoden ein 2- oder 3-Spalten Layout zu
realisieren.
Das für das Flows-Template angepasste Konstrukt: Ich habe im Template die Modulpositionen navi, header, search und footer eingefügt. Sie können diese mit Modulen belegen, um zu sehen, wie sich das Template verhält. Natürlich ist die Modulausgabe noch nicht gestyled. Damit die Seite etwas mehr Content hat, liegen in der index.php einige Absätze mit Blindtext. Wir können nun schemenhaft das zu Grunde liegende Screendesign erkennen. Auch der Footer läuft bereits über die ganze Breite. Die Breite des Content und der rechten Spalte sind noch im CSS fest angegeben. Da wir diese Werte später über Template-Parameter editierbar machen wollen, wird sich hier sicher noch einiges ändern müssen. Nachdem wir diesen elementaren Schritt innerhalb der Template-Entwicklung gegangen sind, sollten wir zusehen, dass das Template ein wenig mehr nach unserem Screendesign ausschaut. Will heißen, wir wollen einige der grafischen Elemente des Screendesigns integrieren. Dazu zählt erst einmal die "Papierblock"-Optik des Screendesigns. Um diese zu realisieren, benötigen wir...? Richtig! Wrapper-DIVs, welche wir um unser zentrales Content-Div legen (ID "middle"). Diese füllen wir dann per CSS mit entsprechenden grafischen Elementen. Wir erhalten sie, indem wir das Screendesign passend in einzelne Bilder (GIFs oder PNGs) zerschneiden. Dieser Vorgang wird auch Slicing genannt. Die einzelnen Slices werden dann als Hintergrundgrafiken für die neuen Wrapper-DIVs genutzt.
Na, wenn das nicht schon gewaltig nach unserem Screendesign ausschaut!
Wenn Sie das Browserfenster skalieren, werden Sie feststellen, dass die
leichten Schatten des "Papierblocks" die Bordüre überlagern. Das liegt
daran, dass wir diese Slices als transparante PNGs hinterlegt haben.
GIFs eigenen sich hierfür nicht, wie oben beschrieben. Dabei fällt mir
auf, dass ich die Kringel und Farbtupfer vergessen habe. Nächstes Mal!
Obwohl wir noch keinen Browserkompatibilitätstest gemacht haben (sprich
IE Tests) scheint das momentane Konstrukt in verschiedenen Browsern
einigermaßen stabil.
Flows-Template mit grafischen Elementen: Das sollte fürs Erste reichen. Sicher werden motivierte Leser genug damit zu tun haben, das eingesetzte HTML/CSS Konstrukt zu analysieren und womöglich an eigene Bedürfnisse anzupassen. Im nächsten Teil des Tutorials gehen wir in die Vollen und beginnen Template-Parameter, verschiedene Template-Styles, Modul Chrome und flexible Content Breiten einzubauen. Das Styling unseres Templates selbst sollte auch einen ganzen Schritt weiter kommen. Falls Sie Hinweise oder Wünsche für die Entwicklung des Flows-Template haben, nutzen Sie bitte die Kommentarfunktion. Teil 3 des Joomla! 1.5 Template Tutorials ist fertig! Lesezeichen setzen Hits: 87338 Kommentar schreiben
|