{"id":3138,"date":"2014-01-23T13:14:26","date_gmt":"2014-01-23T11:14:26","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3138"},"modified":"2018-02-17T16:40:48","modified_gmt":"2018-02-17T14:40:48","slug":"contao-fuer-webdesigner-das-neue-buch-zu-contao-von-thomas-weitzel","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2014\/01\/contao-fuer-webdesigner-das-neue-buch-zu-contao-von-thomas-weitzel\/","title":{"rendered":"Contao f\u00fcr Webdesigner – Das neue Buch zu Contao von Thomas Weitzel"},"content":{"rendered":"

Auf meiner Facebook Seite jukemedia<\/a> berichte ich seit einigen Tagen \u00fcber das neue Buch „Contao f\u00fcr Webdesigner“ von Thomas Weitzel<\/a>. Ich selber bin derzeit dabei das Buch Kapitel f\u00fcr Kapitel durchzulesen und meinen Senf dazu abzugeben.<\/p>\n

Und weil es so sch\u00f6n ist und ja auch nicht jeder auf Faceook einen Account hat, hier die Ergebnisse meiner bisherigen Lesereise in das Contao-Land:<\/strong><\/p>\n

<\/h3>\n

<\/h3>\n

Kapitel 1 – Zum Begriff opensource<\/h3>\n

Ich finde es gut, dass Thomas – gerade auch im Hinblick auf die aktuellen Diskussionen – einmal darlegt, was opensource \u00fcberhaupt hei\u00dft. Das Wort ist in aller Munde und wird zuweilen recht inflation\u00e4r gebrauch und doch stelle ich immer wieder fest, dass es in den meisten aller F\u00e4lle mit „kostenlos“ gleich gesetzt wird.<\/p>\n

Umsonst ist aber nur der Tod, so sagt man und so legt Thomas sehr sch\u00f6n dar, dass jede Entwicklung Zeit und damit auch immer Geld kostet.<\/p>\n

TANSTAAFL zitiert er: „There ain’t no such thing as free lunch“. Jeder, der beginnt mit einem frei verf\u00fcgbaren CMS zu arbeiten, sollte die ersten Seiten des Buches nicht \u00fcberschlagen und sich bewusst machen, was openspurce letztendlich auch f\u00fcr die Arbeit in Kundenprojekten bedeutet.<\/p>\n

Kapitel 2 – Briefing und Projektplanung<\/h3>\n

Kapitel 2 befasst sich auf 20 Seiten eingehend mit der Projektplanung. Nicht einfach anfangen ist oft der Anfang vom Ende, denn ohne eine vern\u00fcnftige Projektplanung kann ein Webdesign-Projekt schnell zu einem Desaster werden.<\/p>\n

Daher ist dieses Kapitel besonders f\u00fcr Webdesigner geeignet, die sich mit eigenen Kunden selbstst\u00e4ndig machen m\u00f6chten.<\/p>\n

Es geht relativ harmlos mit Tipps zum Briefing und der Projektplanung los. Dabei erfahrt ihr, auf welche Punkte man zum Zeitpunkt der Vorgespr\u00e4che besonders achten sollte. Durch die Abhandlung wird deutlich, dass die Weichen f\u00fcr das Gelingen eines Projektes schon im Vorfeld gestellt werden m\u00fcssen.<\/p>\n

Sind die Rahmenbedingungen klar, kann man sich in einem zweiten Schritt von der Skizze \u00fcber Moodboards, Wireframes bishin zu konkreten Toolempfehlungen wie z.B. Styletyles dem Prototyp einer Webseite widmen und grunds\u00e4tzliche Dinge f\u00fcr die Informationsarchitektur und deren Visualisierung kl\u00e4ren.<\/p>\n

In Kapitel 2.3.5. wird – f\u00fcr Leute mit Vorkenntnissen – dar\u00fcber hinaus auch die M\u00f6glichkeit des Rapid-Prototyping mit einem Framework wie Foundation und Bootstrap angesprochen.
\nProjekte m\u00fcssen verwaltet werden. Im Buch enthalten sind auch Tipps zu empfehlenswerten Projektverwaltungstools wie z.B. Mite, Active Collab oder Trello.
\nIn Kapitel 2.4. wird’s Contao. Mit Hinweisen wie Funktionen im CMS hinsichtlich Entwicklung, Updates, Fehlerbehebung und Dokumentation genutzt werden k\u00f6nnen, wird das Kapitel 2 abgerundet.<\/p>\n

Fazit Kapitel 2<\/h4>\n

Auch wenn Webdesign heute sehr viel h\u00f6here Anspr\u00fcche erf\u00fcllen muss als das noch vor einigen Jahren der Fall war, es ist immer noch ein interessantes Berufsfeld f\u00fcr Quereinsteiger aus vielen Richtungen. Besonders Menschen mit Vorerfahrungen im gestalterischen Bereich f\u00fchlen sich vom Thema Design magisch angezogen und durch Leidenschaft befl\u00fcgelt die relativ steile Lernkurve zu meistern.<\/p>\n

Gestalterisches H\u00e4ndchen und ein technisches Grundverst\u00e4ndnis 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\u00e4ndiges Projekt wagen, dieses Kapitel empfehlen.<\/p>\n

Kapitel 3 – Projektkalkulation<\/h3>\n

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.<\/p>\n

Um so wichtiger ist es aus Fehlern zu lernen und vor Beginn eines Projekts eine Kostensch\u00e4tzung zu erstellen. Der ausf\u00fchrlich kommentierte Fragenkatalog in Kapitel3 des Buches bietet besonders Einsteigern eine wertvolle Hilfe und weist auch auf m\u00f6gliche Fallstricke hin wie z.B. dass man allzu detailliert ermitteltete Leistungsverzeichnisse vor Auftragsvergabe tunlichst nicht aus der Hand geben sollte.<\/p>\n

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.<\/p>\n

Kapitel 4 und 5<\/h3>\n

Kapitel 4 behandelt mit der \u00dcberschrift „Der Contao Kosmos“ alle wichtigen Anlaufstellen im Netz, die es f\u00fcr Contao gibt. Designer und Entwickler, die schon mit Contao gearbeitet haben, werden die \u00fcblichen Verd\u00e4chtigen 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 \u00fcber seinen Feedreader bequem dar\u00fcber informieren lassen, was sich bzgl. Contao im Netz tut.<\/p>\n

Das Buch von Thomas ist nicht nur ein Buch \u00fcber Contao, sondern legt den Schwerpunkt auf Webdesigner, die mit Contao Webseiten erstellen m\u00f6chten. Und so gibt es in diesem Buch nicht nur Tipps zum Thema Contao, sondern auch den Blick \u00fcber den Tellerrand. In Kapitel5 wird, von der Webdesveloper-Toolbar \u00fcber die Verwendung von Firebug bishin zu empfehlenswerten Testtools f\u00fcr responsive Webseiten, das ganze Handwerkszeug aufgelistet, welches Praxis-Webdesigner bei ihrer t\u00e4glichen Arbeit brauchen und verwenden.<\/p>\n

Kapitel 6 – Contao Erweiterungen<\/h3>\n

Kapitel 6 nimmt stolze 70 Seiten im Buch ein und beschreibt 13 Erweiterungen, die jeder Webdesigner kennen sollte. Zu finden sind nat\u00fcrlich die gro\u00dfen 3: Avisota, Isotope und Metamodels.
\nDar\u00fcber hinaus erkl\u00e4rt 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.<\/p>\n

Contao bietet aber nicht nur sinnvolle Erweiterungen f\u00fcr das Frontend sondern auch solche, die Ver\u00e4nderungen 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.<\/p>\n

Weil die Namen der Erweiterungen teilweise recht kryptisch anmuten an dieser Stelle eine Kurzinfo:<\/p>\n

Avisota<\/strong>
\nist eine Erweiterung um mit Contao Newsletter komfortabel und ohne html-Kenntnisse erstellen zu k\u00f6nnen. Es ist eines der gro\u00dfen Projekte, deren Weiterentwicklung durch Fundraising unterst\u00fctzt wird. Derzeit sind noch nicht alle Features realisiert, aber man darf sich in der finalen Version auf eine wirklich breite Funktionsvielfalt freuen.<\/p>\n

Metamodels<\/strong>
\nist der Nachfolger vom Contao-Catalog, eine, in meinen Augen, unverzichtbare Erweiterung, die das kundenspezifische Sammeln und Ausgeben von Daten erm\u00f6glicht.<\/p>\n

Isotope<\/strong>
\nist eine, in Contao integrierte e-Commerce-L\u00f6sung, 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\u00fcr shops eine respektable Feature-List aufweisen kann.<\/p>\n

Slider<\/strong>
\n– 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.<\/p>\n

dk_mmenu<\/strong>
\ngeh\u00f6rt 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 \u00fcber die Webseiteninhalte und schiebt die ganze Seite nach unten oder zur Seite weg, wenn der Link zum Anzeigen des Naviagtionsmen\u00fcs bet\u00e4tigt wird. dk-mmenu ist in anderen Anwendungen auch als Sliding Canvas Menu bekannt.<\/p>\n

Mit responsive Images<\/strong>
\nkann man Bilder, in Abh\u00e4ngigkeit von der Bildschirmgr\u00f6\u00dfe, an den Browser schicken. Das ist im Hinblick auf die Ladezeit einer Webseite kein Feature, was man, im Hinblick auf das Ranking, ignorieren sollte.<\/p>\n

Die Erweiterung Spaltenset<\/strong>
\ngibt es schon lange und eben so lange liebe ich diese Erweiterung, kann man mit ihr doch recht einfach die Inhalte in Spalten aufteilen.<\/p>\n

Auch Tabcontrol<\/strong>
\nist eine Erweiterung, die man, besonders in Webseiten mit viel Inhalt, h\u00e4ufig braucht. Tabcontrol erstellt innerhalb einer Spalte Registertasten. Dadurch k\u00f6nnen Inhalte am gleichen Platz bleiben. Statt nach unten zu scrollen, klickt der User die Reiter an undgelangt so zu den gew\u00fcnschten Informationen.<\/p>\n

Die EFG Erweiterung <\/strong>
\nErweiterter Formular Generator – ist bei vielen beliebt. EFG erm\u00f6glich das Sammeln und Ausgeben von Daten aus einem Formular.<\/p>\n

Und wer h\u00e4ufig mit Contao arbeitet, dem seien an dieser Stelle auch ein Blick auf die Erweiterungen easy_themes, TinyMCE-Customizer und der Sticky-Backend-Footer<\/strong> mit Theme Tab empfohlen. Alles drei Erweiterungen, mit denen die Arbeit mit Contao im Backend schneller und komfortabler wird.<\/p>\n

Mit Easythemes<\/strong>
\nkann man die Links zu den Themes in der Backend-Seitenleiste anordnen, was einen schnelleren Zugriff auf z.B. CSS-Dateien erlaubt.<\/p>\n

\u00c4hnliches gilt auch f\u00fcr den Sticky-Backend-Footer mit Theme Tab<\/strong>, mit welcher die Buttons f\u00fcr Speichern, Speichern + Schlie\u00dfen und Speichern + Neu in den unteren Bildschirmrrand, so dass man st\u00e4ndigen Zugriff darauf hat und nicht immer ganz nach unten scrollen muss.<\/p>\n

Theme Tab<\/strong>
\nerm\u00f6glicht das schnelle Umschalten zwischen Stylesheets, Modulen und Layout indem diese drei Links auf Tabs gelegt werden.<\/p>\n

Die Erweiterung TinyMCE-Customizer<\/strong>
\nerm\u00f6glicht, wie der Name schon vermuten l\u00e4sst, die Konfiguration des TinyMCE Texteditor \u00fcber ein Formular. Das geht wesentlich schneller und einfacher, als mit der Anpassung der entsprechenden Dateien.<\/p>\n

Fazit:<\/h4>\n

Schon anhand dieser Kurzfassung k\u00f6nnen Sie sehen, dass die Vorstellung der Erweiterungen ein umfangreiches Thema ist. Zwar sind die Erl\u00e4uterungen 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\u00fchrlich, erkl\u00e4rt. F\u00fcr meine Begriffe \u00fcberaus ausreichend um als Webdesigner die Erweiterung zu verstehen<\/p>\n

Kapitel 7 – Contao Kochbuch<\/h3>\n

7.1. – indivduelle Scrollbalken mit jQuery<\/h4>\n

Manchmal kommt es vor, dass Design Priorit\u00e4t hat und ein Layout eben f\u00fcr alle Inhalte an einer bestimmten L\u00e4nge enden soll.\u00a0 Zwar bin ich absolut kein Freund von Texten, die Splaten mit fixen H\u00f6hen „eingesperrt“ werden, aber wenn es dann schon nicht zu vermeiden ist, sollen die Scrollbalen wenigsten sch\u00f6ner aussehen. So oder so \u00e4hnlich wird sich auch Thomas Weitzel das gedacht haben und beschreibt in Kapitel 7.1.,\u00a0 wie man mit ein paar Handgriffen und der Verwendung der Javascript Bibliothek\u00a0 jQuery, sch\u00f6nere Scrollbalken bekommt.<\/p>\n

7.2. – Iconfonts<\/h4>\n

Mit der rasanten Zunahme der Nutzung\u00a0 des Internets mit\u00a0 mobilen Endger\u00e4ten musste f\u00fcr\u00a0 das Problem, dass die Grafiken auf hochaufl\u00f6senden Bildschirmen nur noch sehr unscharf dargestellt wurden, eine L\u00f6sung gefunden werden. Und diese L\u00f6sung hei\u00dft: „Iconfonts“, denn diese Schriften sind wie Webfonts vektorbasiert und damit stufenlos und ohne Qualit\u00e4tsverluste 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\u00e4che zaubern kann. Und wem bis dato das Thema Iconfonts noch suspekt war, der wird nach der Lekt\u00fcre des Buches wissen, wie es geht, denn die einzelnen Schritte sind gut dokumentiert und alle erforderlichen Codes kommentiert.<\/p>\n

7.3. – Anpassung des Nachrichtentemplates<\/h4>\n

Die Uhrzeit und das Datum individuell einstellen – man mag es kaum glauben, aber auch das ist 2014 immer noch ein Thema, denn in sch\u00f6ner Regelm\u00e4\u00dfigkeit tauchen die Fragen hierzu auch im Forum immer wieder auf.\u00a0 Vermutlich hat sich Thomas Weitzel gedacht, dass es Zeit ist, hier mal etwas aufzur\u00e4umen und ein\u00a0 f\u00fcr allemal Klarheit zu schaffen. Mit genau dokumentierten\u00a0 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. \u00dcber die Anpassungen im Code hinaus kann der geneigte Leser auch von beipielhaft aufgef\u00fchrten CSS-Defintionen profitieren.<\/p>\n

7.4. – Syndication<\/h4>\n

Die Verbreitung von Webinhalten auf Socialmedia-Plattformen wie Twitter, Google+ und Facebook geh\u00f6rt heute nicht nur zum guten Ton, sondern ist auch vielfach notwendig\u00a0 um PR- und Marketing Strategien zu entwickeln und zu verbreiten. Und um genau diese zu unterst\u00fctzen, bietet Contao die frei w\u00e4hlbaren Optionen zu Twitter, Google+ und Facebook an. Werden die Kontrollk\u00e4stchen im Backend aktiviert, erfolgt die Ausgabe einer kleinen Socialmedia-Navigation mit Icons\u00a0 am Anfang eines Artikels. Und genau da, liegt dann auch h\u00e4ufig das Problem, denn vielfach ge\u00fcnscht 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 \u00c4nderungen im Artiekl-Template erreichen.<\/p>\n

In Kapitel 7.5.<\/h4>\n

geht Thomas Weitzel dann noch einen Schritt weiter und erkl\u00e4rt mit gro\u00dfer Genauigkeit, wie man nun die ganze Syndication-Navigation aufh\u00fcbschen und mit Iconfonts darstellen kann.<\/p>\n

7.6. – Akkordion<\/h4>\n

Im vorletzten Abschnitt des Kapitel7 geht es um das standardm\u00e4\u00dfig als Inhaltselement verf\u00fcgbare Akkordeon-Element, welches sich nicht nur gro\u00dfer Beliebtheit erfreut, sondern dar\u00fcber hinaus auch ungemein praktisch ist, kann man damit doch Platz sparen und f\u00fcr \u00dcbersichtlichkeit sorgen.\u00a0 Weil aber sch\u00f6n sein im Webdesign immer nur die halbe Miete ist, geht es im Buch beim Thema Akkordion\u00a0 um die Verbesserung der Bedien- und Nutzbarkeit durch Einf\u00fcgen von Elementen, die die Funktion beim \u00d6ffnen und Schlie\u00dfen eines Akkordion-Elementes visualisieren. Auch hier liefert der Autor praktische CSS-Gestaltungsvorlagen, die, bei entsprechender Anwendung, den Hobby-Webdesigner vom Profi unterscheiden.<\/p>\n

7.7. – Inserttags und Mehrsprachigkeit<\/h4>\n

Als letztes Thema wird in Kapitel 7 das Thema Mehrsprachigkeit und die Verwendung von Inserttags angerissen. Im Zuge der Globalisierung wird es f\u00fcr 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\u00e4ndlich ist, dass es auf knapp 2 Seiten nicht umfassend behandelt werden kann. Vielmehr geht es hier aber darum zu zeigen, f\u00fcr was man das oft vergessene Inserttag {{iflng::*}} („if Language“)im Rahmen eines mehrsprachigen Wbseitenausbaus\u00a0 verwenden kann, erspart es einem doch viel Arbeit\u00a0 und Nerven.<\/p>\n

FAZIT<\/h4>\n

Kapitel 7 beinhaltet ein bunten Mix an Themen, die sowohl Grundlagen als auch fortgeschrittenere Techniken\u00a0 behandeln. Alle verbindet, dass sie von jedem Webdesigner oder von solchen, die es werden wollen, beherrscht werden sollten um zukunftsf\u00e4hige, moderne Webseiten erstellen zu k\u00f6nnen. 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 \u00fcber ein gewisses Ma\u00df an Grunderfahrungen verf\u00fcgen, werden mit den Inhalten, auch als Quereinsteiger in Contao, gutzurechtkommen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Auf meiner Facebook Seite jukemedia berichte ich seit einigen Tagen \u00fcber das neue Buch „Contao f\u00fcr Webdesigner“ von Thomas Weitzel. Ich selber bin derzeit dabei das Buch Kapitel f\u00fcr Kapitel durchzulesen und meinen Senf dazu abzugeben.
\nUnd weil es so sch\u00f6n ist und ja auch nicht jeder auf Faceook einen Account hat, hier die Ergebnisse meiner … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[93,459,460],"yst_prominent_words":[794,795,796,797,798,799,800,801,802,731,803,788,804,789,805,790,806,791,792,793],"class_list":["post-3138","post","type-post","status-publish","format-standard","hentry","category-webdesign","category-contao","tag-contao","tag-buch","tag-buchbesprechung"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3138"}],"version-history":[{"count":2,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3138\/revisions"}],"predecessor-version":[{"id":4400,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3138\/revisions\/4400"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3138"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}