Auf meiner Facebook Seite jukemedia berichte ich seit einigen Tagen über das neue Buch „Contao für Webdesigner“ von Thomas Weitzel. Ich selber bin derzeit dabei das Buch Kapitel für Kapitel durchzulesen und meinen Senf dazu abzugeben.

Und weil es so schön ist und ja auch nicht jeder auf Faceook einen Account hat, hier die Ergebnisse meiner bisherigen Lesereise in das Contao-Land:

Kapitel 1 – Zum Begriff opensource

Ich finde es gut, dass Thomas – gerade auch im Hinblick auf die aktuellen Diskussionen – einmal darlegt, was opensource überhaupt heißt. Das Wort ist in aller Munde und wird zuweilen recht inflationär gebrauch und doch stelle ich immer wieder fest, dass es in den meisten aller Fälle mit „kostenlos“ gleich gesetzt wird.

Umsonst ist aber nur der Tod, so sagt man und so legt Thomas sehr schön dar, dass jede Entwicklung Zeit und damit auch immer Geld kostet.

TANSTAAFL zitiert er: „There ain’t no such thing as free lunch“. Jeder, der beginnt mit einem frei verfügbaren CMS zu arbeiten, sollte die ersten Seiten des Buches nicht überschlagen und sich bewusst machen, was openspurce letztendlich auch für die Arbeit in Kundenprojekten bedeutet.

Kapitel 2 – Briefing und Projektplanung

Kapitel 2 befasst sich auf 20 Seiten eingehend mit der Projektplanung. Nicht einfach anfangen ist oft der Anfang vom Ende, denn ohne eine vernünftige Projektplanung kann ein Webdesign-Projekt schnell zu einem Desaster werden.

Daher ist dieses Kapitel besonders für Webdesigner geeignet, die sich mit eigenen Kunden selbstständig machen möchten.

Es geht relativ harmlos mit Tipps zum Briefing und der Projektplanung los. Dabei erfahrt ihr, auf welche Punkte man zum Zeitpunkt der Vorgespräche besonders achten sollte. Durch die Abhandlung wird deutlich, dass die Weichen für das Gelingen eines Projektes schon im Vorfeld gestellt werden müssen.

Sind die Rahmenbedingungen klar, kann man sich in einem zweiten Schritt von der Skizze über Moodboards, Wireframes bishin zu konkreten Toolempfehlungen wie z.B. Styletyles dem Prototyp einer Webseite widmen und grundsätzliche Dinge für die Informationsarchitektur und deren Visualisierung klären.

In Kapitel 2.3.5. wird – für Leute mit Vorkenntnissen – darüber hinaus auch die Möglichkeit des Rapid-Prototyping mit einem Framework wie Foundation und Bootstrap angesprochen.
Projekte müssen verwaltet werden. Im Buch enthalten sind auch Tipps zu empfehlenswerten Projektverwaltungstools wie z.B. Mite, Active Collab oder Trello.
In Kapitel 2.4. wird’s Contao. Mit Hinweisen wie Funktionen im CMS hinsichtlich Entwicklung, Updates, Fehlerbehebung und Dokumentation genutzt werden können, wird das Kapitel 2 abgerundet.

Fazit Kapitel 2

Auch wenn Webdesign heute sehr viel höhere Ansprüche erfüllen muss als das noch vor einigen Jahren der Fall war, es ist immer noch ein interessantes Berufsfeld für Quereinsteiger aus vielen Richtungen. Besonders Menschen mit Vorerfahrungen im gestalterischen Bereich fühlen sich vom Thema Design magisch angezogen und durch Leidenschaft beflügelt die relativ steile Lernkurve zu meistern.

Gestalterisches Händchen und ein technisches Grundverständnis sind jedoch nicht alles. Projektplanung und Projektleitung sind bei der Arbeit mit Kunden ebenso wichtig. Deshalb kann ich allen, die sich an ein erstes selbstständiges Projekt wagen, dieses Kapitel empfehlen.

Kapitel 3 – Projektkalkulation

Verkalkuliert und auf unbezahlten Stunden sitzengeblieben? Ganz ehrlich – meine Kristallkugel versagt auch manchmal, denn alles kann man nicht kalkulieren und vorhersehen. Und so passiert es auch mir hin und wieder, dass das Budget nicht ausgereicht hat.

Um so wichtiger ist es aus Fehlern zu lernen und vor Beginn eines Projekts eine Kostenschätzung zu erstellen. Der ausführlich kommentierte Fragenkatalog in Kapitel3 des Buches bietet besonders Einsteigern eine wertvolle Hilfe und weist auch auf mögliche Fallstricke hin wie z.B. dass man allzu detailliert ermitteltete Leistungsverzeichnisse vor Auftragsvergabe tunlichst nicht aus der Hand geben sollte.

Interessant sind auch die Links zu 3 verwendbaren Online-Tools, mit denen man die Kosten ermitteln und zur Koordinatenbestimmung z.B. mit eigenen Berechnungen vergleichen kann.

Kapitel 4 und 5

Kapitel 4 behandelt mit der Überschrift „Der Contao Kosmos“ alle wichtigen Anlaufstellen im Netz, die es für Contao gibt. Designer und Entwickler, die schon mit Contao gearbeitet haben, werden die üblichen Verdächtigen kennen, einen Hinweis, den ich bisher nur vom Vorbeifliegen kannte, habe selbst ich dann dennoch gefunden: Google Alerts. Supersache. Kann man sich einen Feed generieren und sich über seinen Feedreader bequem darüber informieren lassen, was sich bzgl. Contao im Netz tut.

Das Buch von Thomas ist nicht nur ein Buch über Contao, sondern legt den Schwerpunkt auf Webdesigner, die mit Contao Webseiten erstellen möchten. Und so gibt es in diesem Buch nicht nur Tipps zum Thema Contao, sondern auch den Blick über den Tellerrand. In Kapitel5 wird, von der Webdesveloper-Toolbar über die Verwendung von Firebug bishin zu empfehlenswerten Testtools für responsive Webseiten, das ganze Handwerkszeug aufgelistet, welches Praxis-Webdesigner bei ihrer täglichen Arbeit brauchen und verwenden.

Kapitel 6 – Contao Erweiterungen

Kapitel 6 nimmt stolze 70 Seiten im Buch ein und beschreibt 13 Erweiterungen, die jeder Webdesigner kennen sollte. Zu finden sind natürlich die großen 3: Avisota, Isotope und Metamodels.
Darüber hinaus erklärt Thomas die Erweiterungen EFG, dk_menu, dk_masonry, dk_caroufredsel, responsive images, Spaltenset und TabControl als Anwendungen, die in modernen Webseiten gerne und oft zum Einsatz kommen.

Contao bietet aber nicht nur sinnvolle Erweiterungen für das Frontend sondern auch solche, die Veränderungen im Backend bewirken und den Workflow des Designers erleichtern. Hier sind insbesonders easy_themes, TinyMCE-Customizer und der Sticky-Backend-Footer mit Theme Tab zu nennen.

Weil die Namen der Erweiterungen teilweise recht kryptisch anmuten an dieser Stelle eine Kurzinfo:

Avisota
ist eine Erweiterung um mit Contao Newsletter komfortabel und ohne html-Kenntnisse erstellen zu können. Es ist eines der großen Projekte, deren Weiterentwicklung durch Fundraising unterstützt wird. Derzeit sind noch nicht alle Features realisiert, aber man darf sich in der finalen Version auf eine wirklich breite Funktionsvielfalt freuen.

Metamodels
ist der Nachfolger vom Contao-Catalog, eine, in meinen Augen, unverzichtbare Erweiterung, die das kundenspezifische Sammeln und Ausgeben von Daten ermöglicht.

Isotope
ist eine, in Contao integrierte e-Commerce-Lösung, die die vorhandenen Bedienkonzepte des Content-Management-Systems nutzt und sich nahtlos in die Seitenstruktur integriert. Isotope hat klein angefangen, sich aber inzwischen zu einer Erweiterung gemausert, die für shops eine respektable Feature-List aufweisen kann.

Slider
– mit Bildern oder mit Texten oder mit beidem, von oben nach unten, von rechts nach links oder alles umegkehrt. DK_Caroufredsel ist ein Slider, der alles kann.

dk_mmenu
gehört mit responsive images und der Erweiterung Spaltenset zu den Erweiterungen, die mit dem Aufkommen responsiver Webseiten wichtig geworden sind. dk_mmenu legt, wenn die Bildschirmbreite zu schmal wird, die Hauptnavigation neben oder über die Webseiteninhalte und schiebt die ganze Seite nach unten oder zur Seite weg, wenn der Link zum Anzeigen des Naviagtionsmenüs betätigt wird. dk-mmenu ist in anderen Anwendungen auch als Sliding Canvas Menu bekannt.

Mit responsive Images
kann man Bilder, in Abhängigkeit von der Bildschirmgröße, an den Browser schicken. Das ist im Hinblick auf die Ladezeit einer Webseite kein Feature, was man, im Hinblick auf das Ranking, ignorieren sollte.

Die Erweiterung Spaltenset
gibt es schon lange und eben so lange liebe ich diese Erweiterung, kann man mit ihr doch recht einfach die Inhalte in Spalten aufteilen.

Auch Tabcontrol
ist eine Erweiterung, die man, besonders in Webseiten mit viel Inhalt, häufig braucht. Tabcontrol erstellt innerhalb einer Spalte Registertasten. Dadurch können Inhalte am gleichen Platz bleiben. Statt nach unten zu scrollen, klickt der User die Reiter an undgelangt so zu den gewünschten Informationen.

Die EFG Erweiterung
Erweiterter Formular Generator – ist bei vielen beliebt. EFG ermöglich das Sammeln und Ausgeben von Daten aus einem Formular.

Und wer häufig mit Contao arbeitet, dem seien an dieser Stelle auch ein Blick auf die Erweiterungen easy_themes, TinyMCE-Customizer und der Sticky-Backend-Footer mit Theme Tab empfohlen. Alles drei Erweiterungen, mit denen die Arbeit mit Contao im Backend schneller und komfortabler wird.

Mit Easythemes
kann man die Links zu den Themes in der Backend-Seitenleiste anordnen, was einen schnelleren Zugriff auf z.B. CSS-Dateien erlaubt.

Ähnliches gilt auch für den Sticky-Backend-Footer mit Theme Tab, mit welcher die Buttons für Speichern, Speichern + Schließen und Speichern + Neu in den unteren Bildschirmrrand, so dass man ständigen Zugriff darauf hat und nicht immer ganz nach unten scrollen muss.

Theme Tab
ermöglicht das schnelle Umschalten zwischen Stylesheets, Modulen und Layout indem diese drei Links auf Tabs gelegt werden.

Die Erweiterung TinyMCE-Customizer
ermöglicht, wie der Name schon vermuten lässt, die Konfiguration des TinyMCE Texteditor über ein Formular. Das geht wesentlich schneller und einfacher, als mit der Anpassung der entsprechenden Dateien.

Fazit:

Schon anhand dieser Kurzfassung können Sie sehen, dass die Vorstellung der Erweiterungen ein umfangreiches Thema ist. Zwar sind die Erläuterungen im Buch keine detaillierte Bedienungsanleitungen, aber manche Kapitel kommen schon fast dorthin. Mit vielen, anschaulichen Screenshots wird die Funktionsweise, mal mehr und mal weniger ausführlich, erklärt. Für meine Begriffe überaus ausreichend um als Webdesigner die Erweiterung zu verstehen

Kapitel 7 – Contao Kochbuch

7.1. – indivduelle Scrollbalken mit jQuery

Manchmal kommt es vor, dass Design Priorität hat und ein Layout eben für alle Inhalte an einer bestimmten Länge enden soll. Zwar bin ich absolut kein Freund von Texten, die Splaten mit fixen Höhen „eingesperrt“ werden, aber wenn es dann schon nicht zu vermeiden ist, sollen die Scrollbalen wenigsten schöner aussehen. So oder so ähnlich wird sich auch Thomas Weitzel das gedacht haben und beschreibt in Kapitel 7.1., wie man mit ein paar Handgriffen und der Verwendung der Javascript Bibliothek jQuery, schönere Scrollbalken bekommt.

7.2. – Iconfonts

Mit der rasanten Zunahme der Nutzung des Internets mit mobilen Endgeräten musste für das Problem, dass die Grafiken auf hochauflösenden Bildschirmen nur noch sehr unscharf dargestellt wurden, eine Lösung gefunden werden. Und diese Lösung heißt: „Iconfonts“, denn diese Schriften sind wie Webfonts vektorbasiert und damit stufenlos und ohne Qualitätsverluste skalierbar. Das Buch beschreibt, wie man Iconfonts in Contao einbindet und wie man sie, sowohl als generelle Zuweisung via CSS als auch im TinyMCE Texteditor auf die Webseitenoberfläche zaubern kann. Und wem bis dato das Thema Iconfonts noch suspekt war, der wird nach der Lektüre des Buches wissen, wie es geht, denn die einzelnen Schritte sind gut dokumentiert und alle erforderlichen Codes kommentiert.

7.3. – Anpassung des Nachrichtentemplates

Die Uhrzeit und das Datum individuell einstellen – man mag es kaum glauben, aber auch das ist 2014 immer noch ein Thema, denn in schöner Regelmäßigkeit tauchen die Fragen hierzu auch im Forum immer wieder auf. Vermutlich hat sich Thomas Weitzel gedacht, dass es Zeit ist, hier mal etwas aufzuräumen und ein für allemal Klarheit zu schaffen. Mit genau dokumentierten Codes wird gezeigt, wie man z.B. das Standard-Nachrichtentemplate dazu bringt die Datumsangabe ohne die Uhrzeit auszugeben oder, wie man den Nachrichtentitel und das Datum in einer Zeile oder wie man Tag und Monat als Kalenderblatt, darstellt. Über die Anpassungen im Code hinaus kann der geneigte Leser auch von beipielhaft aufgeführten CSS-Defintionen profitieren.

7.4. – Syndication

Die Verbreitung von Webinhalten auf Socialmedia-Plattformen wie Twitter, Google+ und Facebook gehört heute nicht nur zum guten Ton, sondern ist auch vielfach notwendig um PR- und Marketing Strategien zu entwickeln und zu verbreiten. Und um genau diese zu unterstützen, bietet Contao die frei wählbaren Optionen zu Twitter, Google+ und Facebook an. Werden die Kontrollkästchen im Backend aktiviert, erfolgt die Ausgabe einer kleinen Socialmedia-Navigation mit Icons am Anfang eines Artikels. Und genau da, liegt dann auch häufig das Problem, denn vielfach geünscht wird die Ausgabe der Links am Ende des Artikels. Und weil Contao ja wunderbar flexibel ist, kann man das – gewusst wie – auch durch ein paar Umstellungen und Änderungen im Artiekl-Template erreichen.

In Kapitel 7.5.

geht Thomas Weitzel dann noch einen Schritt weiter und erklärt mit großer Genauigkeit, wie man nun die ganze Syndication-Navigation aufhübschen und mit Iconfonts darstellen kann.

7.6. – Akkordion

Im vorletzten Abschnitt des Kapitel7 geht es um das standardmäßig als Inhaltselement verfügbare Akkordeon-Element, welches sich nicht nur großer Beliebtheit erfreut, sondern darüber hinaus auch ungemein praktisch ist, kann man damit doch Platz sparen und für Übersichtlichkeit sorgen. Weil aber schön sein im Webdesign immer nur die halbe Miete ist, geht es im Buch beim Thema Akkordion um die Verbesserung der Bedien- und Nutzbarkeit durch Einfügen von Elementen, die die Funktion beim Öffnen und Schließen eines Akkordion-Elementes visualisieren. Auch hier liefert der Autor praktische CSS-Gestaltungsvorlagen, die, bei entsprechender Anwendung, den Hobby-Webdesigner vom Profi unterscheiden.

7.7. – Inserttags und Mehrsprachigkeit

Als letztes Thema wird in Kapitel 7 das Thema Mehrsprachigkeit und die Verwendung von Inserttags angerissen. Im Zuge der Globalisierung wird es für viele Webseitenbetreiber immer wichtiger die Inhalte Ihrer Webseite auch in anderen Sprachen anzubieten. Das Thema Mehrsprachigkeit in Contao ist ebenso wichtig wie komplex, weshalb es durchaus verständlich ist, dass es auf knapp 2 Seiten nicht umfassend behandelt werden kann. Vielmehr geht es hier aber darum zu zeigen, für was man das oft vergessene Inserttag {{iflng::*}} („if Language“)im Rahmen eines mehrsprachigen Wbseitenausbaus verwenden kann, erspart es einem doch viel Arbeit und Nerven.

FAZIT

Kapitel 7 beinhaltet ein bunten Mix an Themen, die sowohl Grundlagen als auch fortgeschrittenere Techniken behandeln. Alle verbindet, dass sie von jedem Webdesigner oder von solchen, die es werden wollen, beherrscht werden sollten um zukunftsfähige, moderne Webseiten erstellen zu können. Die Beschreibungen, die der Autor liefert sind umfassend und immer mit Praxisbeispielen belegt. Webdesigner, die zuvor schon mit anderen Systemen als Contao oder mit Marke Eigenbau Webseiten erstellt haben und somit über ein gewisses Maß an Grunderfahrungen verfügen, werden mit den Inhalten, auch als Quereinsteiger in Contao, gutzurechtkommen.