Joomla! Template Tutorial Teil 1 - Vorwort

Geschrieben von Tom   
Dienstag, 22. Juli 2008

Wir haben letztens eine Umfrage gestartet, in welcher die Besucher unserer Seite das Thema des nächsten Tutorials mitbestimmen können. Von 65 abgegeben Stimmen wollen also 37 (53%) ein Tutorial zur Erstellung eines Templates unter J1.5 – das war zu befürchten.

Teil 2 des Joomla! 1.5 Template Tutorials ist fertig!

Bevor ich ein paar Worte zum Templating verliere, möchte ich klarstellen worüber wir reden und einige der Begriffe näher erläutern, welche wir alle nutzen, unter denen jeder jedoch etwas anderes versteht.

Screendesign
Damit meinen wir das Layout in statischem Zustand, meistens also ein Photoshop-, Fireworks- oder Freehand-Entwurf des Webseiten Layouts. Das Screendesign wird also in den meisten Fällen vom Grafiker erstellt und wird dann zum...

Webdesign
Obowhl das Webdesign inzwischen eigene Lehrstühle besitzt, bezeichnen wir damit schlicht den (nicht schlichten) Prozess der Umsetzung des Screendesigns in XHTML, CSS, Javascript und Grafiken. Die Elemente also, aus denen das spätere Template besteht. Eigentlich sollte das Screendesign Bestandteil des Webdesign-Prozesses sein. Mehr dazu warum dies häufig nicht so ist, folgt später.

Template
Als Template wird, und darüber besteht Konsens, das Webdesign bezeichnet, welches für ein bestimmtes CMS, in unserem Fall Joomla, angepasst wurde.

Joomla Templates – eine Kunst für sich

Die Erstellung eines professionellen Joomla Templates ist, unabhängig von der Joomla Version, ein unwahrscheinlich kreativer und interdisziplinärer Prozess. Dies gilt natürlich für jedes professionelle Webdesign. Es gibt wohl kaum einen Arbeitsschritt, bei welchem dermaßen unterschiedliche Talente zur Geltung kommen. Wirklich großartige Webdesigns laden zum Verbleiben ein, wirken unheimlich leicht und hinterlassen beim Besucher ein gutes Gefühl. Sie sind so harmonisch und überzeugend arrangiert, dass der gestalterische Anspruch fast perfekt mit Funktionalität und Benutzerfreundlichkeit harmoniert. Gerade so als hätte jeder von uns darauf kommen können.

Ein guter Webdesigner ist ganz im Gegenteil zur landläufigen Meinung meiner Erfahrung nach, weit seltener zu finden als ein guter Entwickler, und von denen gibt es schon sehr wenige auf dem Markt. Tatsächlich kenne ich persönlich nur zwei Personen, welche ich als gute Webdesigner bezeichnen würde. In der Regel kommt es im täglichen Geschäft darauf an, eine gute Chemie zwischen dem „Gestalter“, also dem Screendesigner und dem „Programmierer“, also dem Webdesigner zu finden. Unternehmen, welche ein einzelnes Webdesign vom Entwurf bis zur Umsetzung von einer Person realisieren lassen, sind sehr selten und machen die besten Templates. Der andere Glücksfall sind Teams, in denen Screendesigner und Webdesigner Hand in Hand arbeiten.

Zum einen ist da der gestalterische Aspekt. Wir wissen alle was passiert, wenn sich ein klassischer Print-Grafiker daran macht ein Screendesign zu erstellen. Es wird in der Regel brutal. Nur wenige Gestalter aus dem Printbereich sind in der Lage die konzeptionellen Unterschiede zwischen einem statischen Printprodukt und einem dynamischen Produkt, wie z. B. einer Webseite, auf ihren Arbeitsprozess zu übertragen. Allerdings haben die, welche das schaffen, das Potential große Webdesigner zu werden.

Ein Printprodukt sieht immer gleich aus, egal wer es in den Händen hält. Ein Webdesign nicht – hier muss also die Regel „form follows function“ gelten. Von Usability und Flexibilität gar nicht zu reden. Dinge mit denen sich Printgestalter selten befassen. Oder haben Sie schon mal ein City-Light im Fluid Layout gesehen?

Anders als Printgestalter, haben heute tätige Webdesigner in der Regel keine tiefgehende gestalterische Ausbildung hinter sich (nein, Medieninformatik zählt nicht). Das kommt schlichtweg daher, dass die Umsetzung eines Designs in ein Template höhere Hürden stellt als das Design selbst.

Anders ausgedrückt:
Ein schlechtes Design bekommt jeder hin, ein schlechtes Template nicht.

Das richtige Werkzeug existiert nicht

Auch wenn es eine Menge Software zum Erstellen von Webseiten gibt, wer professionelle Templates entwickeln will, wird auf sämtliche Tools außer Texteditor und Browser verzichten müssen.
Dies erklärt sich auch ganz pragmatisch: Im Tagesgeschäft dauert das Öffnen einer CSS-Datei samt Editor, die nötigen Anpassungen am CSS und das Speichern etwa 30 Sekunden. So lange braucht z. B. Dreamweaver bis überhaupt eine Datei geöffnet wird. Der ganzen Feature Schnick-Schnack, welcher unerfahrene Webdesigner mit Tagcompletion usw. unterstützt, wird früher oder später überflüssig. Abgesehen davon sind Features wie Code Folding, Syntax highlighting, Autocompletion und FTP- bzw. SSH-Clients inzwischen an Bord eines jeden guten Texteditors, teilweise sogar besser integriert als in Gigabyte großen Suiten verschiedener Software Firmen.

Die Qualität eines Webdesigners lässt sich unter anderem an den Tools beurteilen, welche er nutzt. Sehen wir uns die Tools eines imaginären Webdesigners im Laufe der Jahre an:

# Tools Produkte Motivation
1 Textverarbeitung
(HTML Export)
Word, OpenOffice „Führt ( irgendwie) zu Ergebnissen.“
2 WYSIWYG-Editor Dreamweaver, Imageready , Fusion, Frontpage „Rollover-Navigationen ohne tippen, juhuu!“
3 HTML-Editor Homesite, Aptana, Eclipse „Nie wieder WYSIWYG!“
4 Texteditor und Browser-Plugins Emacs, Ultraedit, Notepad++, TextPad „Mehr Kontrolle und Freiheit geht nicht.“

 

Logisch. Diese Laufbahn wird selten ein einzelner Mensch durchlaufen. Sie stellt jedoch recht gut die Ansätze und vielleicht auch Ansprüche verschiedener Nutzergruppen dar.
Für den simplen Vereinsauftritt mag es die optimale Lösung sein, ein Webpage-Baukasten eines Providers einzusetzen. Für das Layout einer Community Website oder die Template Erstellung benötigt man vollkommene Kontrolle über den entstehenden Code. Die bekommt man jedoch nur, wenn jedes HTML Konstrukt und jeder CSS-Selektor die eigene Template Architektur unterstützt.

Kein professioneller Webdesigner schreibt den gesamten Code von der Picke auf neu. Dinge wie Suckerfish und Sliding Doors Navigationen oder Rounded Corners Konstrukte und ganz besonders Template-Skelette mit verschiedenen Spalten-Layouts werden einfach aus der Schublade gezogen und angepasst. Für diese Anpassung sind Browserplugins wie Firebug unverzichtbar. Wer Firebug noch nicht kennt, sollte dies dringend nachholen.

Der wissbegierige Leser findet das alles möglicherweise interessant, würde jedoch lieber mit dem Termplate-Tutorial beginnen?

Mit dieser kurzen Vorrede möchte ich sagen, dass dem Ruf nach einem Template-Tutorial eigentlich der Wunsch vorausgeht, gutes Webdesign erstellen zu wollen. Auf einem Joomla Template Workshop, den ich vor einer ganzen Weile auf einem JoomlaDay hielt, kam dies klar zum Ausdruck. Solange ich von standard Joomla Template Funktionalitäten sprach, war der Workshop mehr oder weniger interessant. Sobald es aber um die Umsetzung eines Screendesigns in XHTML und CSS ging, stieg die Aufmerksamkeit rapide an.

Tatsächlich lässt sich die Erstellung eines Joomla Templates in ca. 20 Zeilen Text erklären. Ein bisschen jdoc:include hier, ein wenig $this->countModules da, und schon steht das Joomla Template. Natürlich in einer ausgesprochen mageren Form (und ohne Template Overrides), aber es steht.

Die Basis für das Template, nämlich das Screen- und Webdesign, ist ein Handwerk, welches sich nicht in einzelnen Workshops und Tutorials aneignen lässt. Dem konstruktiven Webdesign gehen sehr viele frustrierende Stunden, ja Tage, Wochen und Monate voraus, in denen man sich mit Dingen wie Box-Modell Problematiken oder CSS-Weichen rumschlägt. Und wer von uns ist nicht früher oder später hier gelandet.

Dabei können wir auch heute, trotz Explorer 7, Grid-Systemen oder Template-Frameworks, die Interpretationsphilosophien der verschiedenen Browserhersteller (naja, hauptsächlich eines) nicht ignorieren. Früher oder später holt er uns doch noch ein – der „Guillotine Bug“.

Trotzdem sind heutzutage die Voraussetzungen besser denn je, gutes Webdesign zu erstellen. Schließlich gibt es inzwischen einen „common sence“ darüber, wie eine Webseite interpretiert werden soll. Moderne Browser würden sich ins Abseits stellen, führten sie Glaubenskriege wie seinerzeit Explorer 5 und Netscape 4.75.

Was brauche ich, um gutes Webdesign zu erstellen?

  1. Leidenschaft
  2. Wissen (und zwar aktuelles)
  3. Tutorials, Tutorials, Tutorials
  4. Übung, Übung, Übung
  5. Talent schadet nicht

Bei der Erstellung des Screendesigns sollten Aspekte wie Usability, CD und Flexibilität nie aus den Augen verloren werden. Der Kreativität jedoch sollten man freien Lauf lassen, um dem Kunden ein einzigartiges Produkt liefern zu können.

Stellen Sie sich bei der Erstellung eines Screendesigns nie die Frage:
„Wie setzen wir das um?“

Mit dem Screendesign soll das Joomla 1.5 Template Tutorial auch beginnen. Hierfür soll ein laufendes Kundenprojekt genutzt werden, welches die Erstellung eines anspruchsvollen Joomla 1.5 Templates voraussetzt. Wie es in der Praxis allerdings so ist, gehen manche Projekte nicht so flott vorwärts wie man es gern hätte, und das Template Tutorial lässt nun schon eine Weile auf sich warten. Obwohl das Screendesign bereits durch ist und die Template Erstellung beginnen könnte, müssen wir uns aus organisatorischen Gründen noch etwas gedulden. Somit kann ich das fertige Screendesign erst im nächsten Artikel zum Joomla Templating besprechen. Ich hoffe, es wird nicht lange auf sich warten lassen. Falls doch, schieben wir das Joomla MVC Tutorial dazwischen!

Teil 2 des Joomla! 1.5 Template Tutorials ist fertig!

 

 

feed14 Kommentare
lehaeb
September 13, 2008
Stimmen: +6

Eigentlich hätte ich etwas mehr erwartet, als bloss ein langes Vorwort, das nicht gerade extrem viel aussagt (ausser den hitverdächtig philosophischen Einlassungen). Bitte mehr Praktisches! Zum Beispiel: Welche Dateien sind für ein J-1.5-Template ZWINGEND notwendig? (Habe index.html, index.php, templateDetails.xml, im DIR "css" die template_css.css, im DIR "images" alle notwendigen Bild-Files usw. parat, alles gezippt, beim install sagt der Hund, es fehle eine XML-Setupdatei. Auch alle Workarounds führen zu anderen, genauso wenig aussagekräftigen err-msg. Also, bitte einfach: Was ist das Minimum, dass ein W3C-geprüftes Template in J 1.5.6 auch tatsächlich installiert werden kann?

Warte gespannt auf eine auch für Halb-Laien verständliche Antwort. Dafür mal schon danke!

lehaeb

report abuse
vote down
vote up
Tom
September 13, 2008
Stimmen: +1

Hallo lehaeb,
wie der Name schon sagt, es ist ein Vorwort. Ansonsten ist die Frage was ein Template mindestens benötigt, um installiert werden zu können falsch formuliert. Wenn ich diese Frage ehrlich beantworten müsste, würde ich eine 10 Zeilen XML-Datei schreiben. Das wäre dann schon ein funktionierendes Template.
Bei Ihnen ist offensichtlich ein Fehler, entweder der Archivdatei oder der XML-Struktur vorhanden. Reduzieren Sie das Archiv auf die XML-Datei allein ohne jegliche externe Dateien um den Fehler einzugrenzen.

Das Template Tutorial wird wie beschrieben fortgesetzt, sobald die Zeit da ist. Ansonsten empfehle ich in der Zwischenzeit das beliebte, sehr laienfreundliche und praxisorientierte Mootools Tutorial.

report abuse
vote down
vote up
colombo
Oktober 15, 2008
Stimmen: +2

wahnsinn, bis heute 2341 klicks.

da hab ich eine kleine geschichte:
ein zirkus kommt in ein kleines dorf. bei dem einzug werden, von den artisten, handzettel an die bewohner verteilt. darauf steht geschrieben, dass das publikum sich, für eine von drei aufgelisteten super-attraktionen, entscheiden darf.
1. eine nackte schöne frau reitet auf einen Tiger. (ahhhh)
2. ein mann wird ohne fallschirm in den himmel geschossen. (auwa)
3.der zirkusdirektor steigt gefesselt in ein haifischbecken. (ohhh)
Die mehrheit wählt den part mit dem zirkusdirektor und den haifischen.
TATAAA..., der tag der eröffnung!
der zirkus mit seinen 800 plätzen verkauft, sage und schreibe, 2341 karten und die sitzplätze reichen nicht aus. das publikum sitz und steht, die haifische im becken vor augen, dichtgedrängt und erwartet spannungsvoll die attraktion des abends.
chip-tüten knistern, leere cola-becher rollern zwischen den füssen und schöne frauen bahnen sich einen weg durch das gedränge, um dicke hefte an die zuschauer zu verteilen.
die, die ihr heft schon bekommen haben, blättern interessiert darin und erfahren dabei, wie schwierig und gefährlich diese vorfürung wohl ist und diejenigen, die platz dazu haben, nicken ehrfürchtig ihr haupt.
Um so gespannter, in grosser erwartung, mit weit aufgerissenen augen und aufgestellten ohren, verharrt jeder an seinem platz.
und da..., das licht wird abgedunkelt...! noch passiert nichts, nur ab und an bewegt sich der schwere vorhang und dabei können die aufmerksamen beobachter die nasenspitze des zirkusdirektors erkennen, der den spalt im vorhang nutzt, um erkennen zu können, dass er da wohl nicht drum herum kommt.

in diesem sinne, ein screendesigner :-)

report abuse
vote down
vote up
colombo
Oktober 15, 2008
Stimmen: +0

ooops...., natürlich werden die karten nicht verkauf, jede karte ist ein geschenk.
toll ist, dass es immer leute gibt, die ihre erfahrung und ihr wissen freizügig an andere weitergeben - danke.

don't fool, keep cool

report abuse
vote down
vote up
Tom
Oktober 15, 2008
Stimmen: +0

Hallo Colombo,
super Kommentar, ich mußte kräftig lachen. In der Tat läßt das Tut auf sich warten. Was bin ich froh nicht das schon lange fertige Screendesign veröffentlicht zu haben. Leider hat der Kunde einen Standortwechsel vorgenommen und so haben sich einige Prioritäten verschoben. Ich hoffe das es bald weitergeht. Falls nicht, nehme ich ein anderes Projekt als Basis, was allerdings schade wäre, da das eigentliche Template interessantere Aspekte hat.

Falls Sie gerne Geschichten schreiben empfehle ich unser Sensation Spiel.

report abuse
vote down
vote up
colombo
Oktober 15, 2008
Stimmen: +0

n'abend Tom,
ich möchte das hier nicht ganz zu einem chat-room mutieren lassen, aber eines möchte ich dazu noch sagen; du bist als guter entwickler kein unbekannter und irgendwie steht das "brötchen-verdienen" immer an erster stelle, so wie bei jeden anderen auch.
mit der umfrage wurde der "schlafende hund geweckt" oder, du kannst jetzt auch sagen: "die geister, die ich rief" :-)
im world wide web gibt es zwar schon ein gutes tut, für die erstellung eines templates, aaaber..., von einem "Tom" erwartet man etwas besonderes und das ist ja nicht so einfach.
ach ja..., "gern geschichten schreiben" :-) eher weniger, tendiere mehr zum zeichnen. mir fallen nur so, zu besonderen ereignissen, besondere geschichten ein - aber das "Sensation Spiel" werde ich mir anschauen.

in diesem sinne, ein screendesigner :-)

report abuse
vote down
vote up
Axe
Dezember 10, 2009
Stimmen: +1

Gehts nicht mehr weiter ? sitze echt fest Muss von 0 ANfangen ein Template aufzusetzen screendesign ist fertig alelrdings auch nur das nix gesliced und so weiter ich weis einfach nicht was ich machen soll brüchte wirklich eine Kindergartenmässige schritt für schrittanleitung ^^ falls jemand mir helfen kann: Diese E-Mail Adresse ist gegen Spam Bots geschützt, Sie müssen Javascript aktivieren, damit Sie es sehen können

report abuse
vote down
vote up
Tom
Dezember 16, 2009
Stimmen: +0

Sorry Leute, aber wir arbeiten momentan an so vielen Dingen, dass das Tut hier, jetzt schon seit fast einem Jahr, nicht weiter kommt.
Ich verspreche aber, dass es auf jeden Fall noch wird. Denkt nur dran, dass es ein Joomla Template Tutorial wird, und kein Webdesign Tutorial.

report abuse
vote down
vote up
Tom
Januar 01, 2010
Stimmen: +3

Teil 2 ist da! Siehe oben...

report abuse
vote down
vote up
mat
März 12, 2010
Stimmen: +0

Super Tutorial! Gibt es auch noch einen Teil5?

report abuse
vote down
vote up
Tom
März 16, 2010
Stimmen: +0

@mat Teil 5 ist gerade im Entstehen. Dauert also nicht mehr lange.

report abuse
vote down
vote up
Andreas
November 20, 2010
Stimmen: +0

Wahnsinn, genau so etwas habe ich gesucht.
Super formuliert,
Super erklärt,
Super Tutorial!!!

Bleibt nur noch eins.

Vielen, vielen und nochmal vielen Dank.

report abuse
vote down
vote up
Tom
November 20, 2010
Stimmen: +0

@Andreas
Vielen Dank. Solche Kommentare motivieren das Tutorial zum Abschluss zu bringen.

report abuse
vote down
vote up
anna
April 03, 2011
Stimmen: +1

ch möchte das hier nicht ganz zu einem chat-room mutieren lassen, aber eines möchte ich dazu noch sagen; du bist als guter entwickler moving company kein unbekannter und irgendwie steht das "brötchen-verdienen" immer an erster stelle

report abuse
vote down
vote up

Kommentar schreiben
 
  kleiner | groesser
 

security image
Bitte den folgenden Code eintragen


busy
 

B01 realisiert zeitgenössische Online-Kommunikationsmittel.
Wir sind spezialisiert auf OSCMS und unterstützen unsere Kunden vom Konzept bis zum Launch mit Erfahrung und exklusiven Komponenten zur Umsetzung von Communitys, Shops, Portalen und Webseiten.

B01 Kunden

Unsere Ideen, unsere Produkte, unsere Kunden.

B01 empfiehlt:

ZOO Content Construktion Kit

ZOO CCK

Virtuemart Shopsystem

E-Commerce

Joomla SEO

SEO

Joomla Content Editor

Content Editor

Joomla Social Networking

JomSocial