Es begann vor ca. 3 Jahren hier in diesem Blog mit Designideen, die ich im Rahmen einer Weihnachtsaktion zum Besten gegeben habe. Dagmar und Michael Lalk, erfahrene Shopbetreiber aus Hamburg, wünschten sich ein moderneres Design und eine verbesserte Technik für ihre Internetshops. Und so kamen wir zusammen. Inzwischen sind wir ein eingespieltes Team bestehend aus den beiden Auftraggebern, Mathias Bank und meiner Wenigkeit. Mathias ist für die reibungslose Funktionalität und Suchmaschinenoptimierung seiner selbst entwickelten Shopsoftware zuständig und ich für das Design wobei wir beide in Sachen CSS-Umsetzung ähnlich stark sind, was in der Zusammenarbeit einfach Spaß macht. Jeder weiß genau von was der andere redet, kann Probleme erkennen, gemeinsam diskutieren wir über Alternativen und lernen ganz nebenbei immer noch etwas dazu.

Das Grundlayout ist bisher bei allen drei shops das gleiche, nur die Farbgebung und die Gestaltung ist immer wieder eine andere. Mit 1a-Diamantscheiben ist nun eine Blau-Variante hinzugekommen, die, wie ich finde, gut zum Inhalt passt.

Shop besuchen : 1a-Diamantscheiben.de

Es ist soweit. Vor ein paar Tagen hatte ich ja schon vom Contao free themes month berichtet. Ausgerufen wurde selbiger weil die neue Version von Contao (fka Typolight) nun auch einen Theme-Manager hat, mit welchem die Styles, Module, Templates, Bilder und Seitenvorlagen eines Designs exportiert und einfach in andere Installationen übertragen werden können. Viele haben genau darauf schon lange gewartet und damit das Austesten auch Spaß macht, aht eigentlich nur noch eines gefehlt: Themes nämlich ;-)

Aus diesem Grund habe auch ich mich entschlossen ein schon länger gehegtes Vorhaben endlich in die Tat umzusetzen und ein erstes, frei verfügbares Theme für Contao zu erstellen. Es basiert auf den Inhalten vom bekannten “Music Academy” Theme, welches ja im Download-Paket von Contao mitgeliefert wird. Jeder, der noch nie mit dem System gearbeitet hat, sollte Music Academy einfach mal installieren. Beim Durchlaufen der Installation ist das ja nur 1 Klick mehr und funktioniert in aller Regel ohne Probleme.

Aber nun zu meinem Theme, das insgesamt einfach gehalten ist damit auch Anfänger damit zurechtkommen. Es gibt jedoch auch eine zweite Version, bei der muss man allerdings ein paar Einstellungen vornehmen – nicht schwierig wie ich finde, aber wer noch nie mit dem System gearbeitet hat, sollte vielleicht erstmal die erste, einfachere Version benutzen.

Lange Rede, kurzer Sinn. Alles weitere erfahrt ihr im Contao Team Blog bzw. auf meiner Hauptseite:

Download: www.jukemedia.de/contao-free-templates.html
Demo:
music academy jukemedia 001
music academy jukemedia 002

Fragen, Anregungen, Huldigungen und Kritik bitte hier in diesem Blog.

Webseiten als Grafik entwerfen und dann zur Umsetzung in eine Webseite weitergeben ist in vielen Fällen suboptimal. Grafikprogramme rendern anders als Browser und bei manchen Dingen ist ein Design schneller mit CSS erstellt, als unter Zuhilfenahme jeder noch so ausgefuchsten Ebenentechnik. Letztere ist notwendig, wenn man Printprodukte erstellt – meiner Ansicht ist das jedoch nur begrnezt sinnvoll für das Layouten einer Webseite. Hier sollte und kann man mit reinem html viel schneller und präziser zu einem Ergebnis kommen.

In der Zusammenarbeit an einem shop, bei dem nur das Layout – unter Beibehaltung des Markups – umgestaltet werden sollte, habe ich mir für die einzelnen Seitenvorlagen exemplarisch das html aus dem Quelltext runtergezogen und lokal installiert. Je nachdem jedoch, wie die Pfade in der prduktiven Webseite gesetzt sind bzw. um es genauer zu sagen: wenn die Pfade relativ zur Domain angelegt sind, kann es jedoch sein, dass man lokal die Pfade zu Bild- und sonstigen Dateien umständlich anpassen muss und beim Zurückspielen auf die produktive Installation ebenfalls. Für Designer und Programmierer eine nicht gerade erbauende weil doppelte Arbeit.

Ganz froh war ich deshalb über den Tipp von Mathias auf dem localhost virtuelle Domains einzurichten. Und da ja Servertechnologie nicht gerade zu meinen Spezialitäten gehört, war ich froh im Netz eine gute Anleitung gefunden zu haben.

Zuerst muss auf dem Rechner (Windows, bei mir: Vista) die hosts Datei gesucht werden.
Sie befindet sich in aller Regel unter folgendem Pfad:
C:\WINDOWS\system32\drivers\etc\hosts

Die Datei öffnen und die virtuelle Domain eintragen. Klingt ganz einfach, kann aber unter Vista Probleme machen, denn es ist eine Systemdatei, die z.B. von meinem TotalCommander, auch mit der Option “Versteckte Dateien” anzeigen nicht sichtbar ist. Aber mit dem Windows-Explorer und unter Aktivierung der entsprechenden Option geht es. Zweites Problem kann sein, dass man die Datei nicht abspeichern kann. Auf meinem System arbeite ich unter Vista aus Sicherheitsgründen nicht als Admin, sondern melde mich selber als Benutzer an und Benutzer dürfen nunmal keine Systemdateien ändern und überschreiben. Also: falls nichts geht, als Admin einloggen und in die hosts Datei einen zusätzlichen Eintrag machen:
127.0.0.1. meine-virtuelle-domain.de www. meine-virtuelle-domain.de

Nun könnte man auf die Idee kommen diese virtuelle Domain exakt so zu benennen wie die real existierende Domain im produktiven Einsatz. Das ist aber nicht ganz so gut, denn dann kann man später die Original-Domain nicht mehr erreichen – besser ist es also den Domainnamen ein wenig abzuändern.

Und weiter.

Im Xampp muss man die Datei httpd-vhosts.conf suchen:
Pfad: xampp\apache\conf\extra\httpd-vhosts.conf

Dort befinden sich eine ganze Reihe von Eintragungen mit einer # davor. Durch die Raute sind diese Eintragungen auskommentiert und damit inaktiv. Um virtuelle Domains überhaupt zu aktivieren, muss die Raute an entspechender Stelle rausgenommen werden bzw. NameVirtuellHost für die lokale IP Adresse aktiviert werden und damit das geschieht, muss da stehen:
NameVirtualHost 127.0.0.1:80

Nu kann man aber nicht einfach seine virtuellen Domains eintragen, denn localhost selber ist nun auch virtuell und kann nicht mehr erreicht werden. Deswegen besteht der nachfolgende Eintrag immer aus mindestens 2 Containern: der erste für localhost und der zweite für die virtuelle Domain, die ich mir einrichten möchte.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<VirtualHost 127.0.0.1>
    ServerName localhost
    AddType text/html .shtml
    AddHandler server-parsed .shtml
    ServerAdmin webmaster@localhost
    DocumentRoot "c:/xampp/htdocs/"
    ScriptAlias /cgi-bin/ "c:/xampp/htdocs/cgi-bin/"
 
    <Directory "c:/xampp/htdocs">
    Options Indexes FollowSymLinks
    Options +Includes
#   Options +
    AllowOverride FileInfo
    AllowOverride None
    Order allow,deny
    Allow from all
    DirectoryIndex index.php index.shtml index.html index.htm
    </Directory>
</VirtualHost>
 
<VirtualHost 127.0.0.1>
    ServerName www.meine-virtuelle-domain.de
    ServerAlias meine-virtuelle-domain.de
    AddType text/html .shtml
    AddHandler server-parsed .shtml
    ServerAdmin webmaster@domain.dd
    DocumentRoot "c:/xampp/htdocs/mein-ordnername"
    ScriptAlias /cgi-bin/ "e:/xampp/htdocs/mein-ordnername/cgi-bin/"
 
    <Directory "e:/xampp/htdocs/mein-ordnername ">
    Options Indexes FollowSymLinks
    Options +Includes
#   Options +
    AllowOverride FileInfo
    AllowOverride None
    Order allow,deny
    Allow from all
    DirectoryIndex index.php index.shtml index.html index.htm
    </Directory>
</VirtualHost>

Done :-).

Pünktlich zum 1. Juli ist die neue Version von Typolight mit 2.9. veröffentlicht worden und dieses Mal, wie angekündigt unter dem neuen Name “CONTAO”. Als Novum dieser Version gibt es nun einen Theme-Manager, mit dem ab jetzt möglich ist die zu einem Design gehörenden Dateien zu exportieren und in andere Installationen auf einfache Weise zu importieren.

In der Vergangenheit wurde hier und da immer wieder bemängelt, dass es für Contao keine oder nur sehr wenig frei verfügbare Templates gäbe. So ganz nachvollziehen konnte ich das zwar nie, denn, es mögen zwar wenige sein, aber dafür haben es z.B. die Templates aus dem inetrobots-shop in sich. Mit dem neuen Theme-Manager werden es jedoch hoffentlich bald mehr Designs werden, die auch die zufriedenstellen, die selber nicht so gerne gestalten.

Und damit das einen guten Anfang nimmt, wurde der Contao Free Themes Month ausgerufen. Den Auftakt machte Fruitmedia, deren theme schon verfügbar ist. Ich werden mich auch daran beteiligen und ein kostenloses Design zur Verfügung stellen, welches in ca. 3-4 Wochen an der Reihe ist.

Und so viel sei jetzt schon verraten: es ist schon fertig und es wird dunkel ;-)

Bei meinen Streifzügen durch das Contao (Typolight) Extension Repository stieß ich auf eine Erweiterung, von der ich bis dato noch gar nicht gehört hatte: Cufón. Die Folge war eine Kettenreaktion, bei der ich mit Erstaunen feststellte, dass im Web bezüglich Schriftgestaltung erfreulicherweise einiges in Bewegung ist.

Alt Bekanntes

Dass man im Web nur eine Handvoll websichere Schriftfamilien benutzen kann, war und ist vielen Gestaltern ein Dorn im Auge. Aus diesem Grund hat es schon vor ein paar Jahren mehr oder weniger umständliche Konstrukte gegeben, mit denen man zumindest für Überschriften Dekorschriftarten verwenden konnte. So sind hier die Imagerepalcement Methoden und sIFR zu nennen, die aber nicht wirklich dazu geeignet wären sie in Fließtexten zu verwenden.

Cufón

Während bei der sIFR Methode die Schrift im Adobe-Flash Format hinterlegt sein muss, geht Cufón einen anderen Weg über Javascript. Ich finde es ganz brauchbar, auch wenn man die mit dieser Technik erzeugten Überschriften nicht in die Zwischenablage der Maus kopieren kann. Cufòn ist sowohl für Wordpress als auch für Contao (Typolight) als Plugin/Erweiterung erhältlich:

Cufon für Wordpress
Cufón für Contao (Typolight)

Cufon funktioniert sehr gut, es bleibt jedoch das rechtliche Problem bei lizensierten Schriftarten. Daher sollte man sich auf lizenzfreie Schriftarten beschränken.

NEU: Google Fonts

Einigermaßen erfreut war ich  über die Meldung, dass Google jetzt Schriftarten anbietet, die sich wirklich einfach und unkompliziert einbinden lassen. GoogleFonts heißt das, die Auswahl ist bescheiden, aber hochwertig.

Google Fonts besuchen
Google Font API

Typekit

Als etwas kompliziertere Variante bietet Google auch den Webfontloader an, mit dem auch eine Anbindung an Typekit möglich ist. Ich habe Typekit bisher in keiner meiner Webseiten eingesetzt, deswegen kann ich nicht viel dazu sagen, außer dass es ein kommerzieller Webfont-Mietservice ist, der rechtssicher und gegen Entgeld eine Fülle von Schriften anbietet, die man sonst nur im Print verwenden könnte.

Mehr Informationen über typekit:
praegnanz.de/weblog/typekit-will-ausgewaehlte-webfonts-cross-browser-faehig-machen
fontblog.de/fontblog-jetzt-360-auf-ff-yoga-web

Webfonts

Ende 2009 titelten viele News-Magazine, dass es ein neues, speziell für das Web konzipierte Schriftformat gibt: WOFF – Web Open Font Format. Es bietet zwei Vorteile:
1. Eine WOFF Schrift liegt in einem komprimierten Format vor. Dadurch wird die Ladezeit bei über @font-face eingebundenen Schriften verkürzt.
2. WOFF Schriften sind für das font-linking zugelassen und kommen dennoch ohne DRM (DigitalRightManagement) aus. Beide Formate können auf dem eigenen Webserver installiert und über CSS3 @font-face vom Browser geladen werden. Der Nachteil: WOFF wird bisher nur vom Firefox 3.6. unterstützt.

Für Nicht-Grafiker ist das mit den Schriftformaten nicht so ganz einfach zu verstehen. Deshalb an dieser Stelle ein paar Links zu lesenswerten Artikeln, die etwas Licht in den Fontformatdschungel bringen:
praegnanz.de/weblog/verwirrende-webfont-situation
praegnanz.de/weblog/eot-und-woff-im-jahre-2010
Woff-Test: fontblog.de/so-kannst-du-den-ersten-woff-font-testen
Webfont Fragen und Antworten: fontblog.de/heute-ist-webfont-tag-fragen-antworten
http://www.webfonts.info/wiki/index.php?title=Main_Page

Mein Fazit

Am sympathischsten sind mir derzeit die von Google zur Verfügung gestellten Schriften. Sollte man da das Gewünschte nicht finden, kann man vielleicht bei dafont nach einer kostenlosen und frei verfügbaren Schrift Ausschau halten, die man dann im Zusammenhang mit Cufón in eine Webseite einbinden kann.

Typekit und die neuen WOFF-Formate setzen auf CSS3 und das font-linking mit @font-face. Sofern demnächst noch mehr Browser als der Firefox das WOFF Format unterstützen, würden beide Möglichkeiten ein ziemliches breites und sehr hochwertiges Spektrum bieten. Im Moment wüsste ich aber nicht was Kunden bereit wären für diese Möglichkeiten zu zahlen.

—
Titelfoto: Jens Hertel – Fotolia.com

Ich muss schon sagen, dass ich ziemlich überrascht war, als ich gestern erfuhr, dass TYPOlight seinen Namen ändern wird bzw. schon geändert hat. Contao heißt es jetzt und wenn nicht jetzt, wann dann? werden sich die Entwickler gedacht haben, denn mit der rasanten Entwicklung und dem Aufstieg dieses Content-Management-Systems wurden die Namenähnlichkeit zu TYPO3 immer mehr zur Belastung.

TYPOlight ist und war auch nie ein kleiner Bruder oder eine Light-Version von TYPO3 und damit, wie man meinen könnte, ein CMS für kleine Ansprüche oder die kleine Feierabend Bastelhomepage. Nach einigen Exkursionen in anderen Systemen bin ich bei TYPOlight-Contao und Wordpress geblieben, weil beide Systeme sowohl für professionelle Webdesigner als auch für Kunden interessant sind. Für den Webdesigner bietet es ein so starkes Leistungspaket, dass damit wirklich effizient und schnell gearbeitet werden kann – jedenfalls sehr viel schneller als ich es aus anderen Systemen kenne. Und für den den Kunden, der ja in der Regel mal mehr und mal weniger internetaffin ist, bleibt das System wegen seiner klaren Struktur im Administrationsbereich und trotz der Fülle an Möglichkeiten in vertretbarem Aufwand begreif- und erlernbar.

Contao – so heißt es in der offiziellen Erklärung, hat tatsächlich eine Bedeutung und ist kein reiner Fantasiename. Das Wort “tạo” kommt aus dem Vietnamesischen und bedeutet “bilden”, “erzeugen”, “gestalten”. Der Ausdruck “con tạo” bedeutet “das Schicksal”, “der Schöpfer”. Das “con” in Contao kann darüber hinaus als Abkürzung für “Content” interpretiert werden, wodurch Contao zum idealen Namen für ein System wird, mit dem Content erzeugt wird.

Interessant zu lesen auch die Interpretation zum “Tao” von Peter Müller .

Ich selber werde sicherlich noch ein paar Tage brauchen um mich an den neuen Namen zu gewöhnen, obwohl: ich merke heute am zweiten Tag, dass die Hürde nicht sehr groß ist. Das Wort ist kurz und gut zu merken und vor allem gut zu tippen.

Also schön: Tschüss TYPOlight und herzlich willkommen Contao.

Der Erstkontakt zur IKS fand im Januar 2010 statt, danach dauerte es noch eine Weile bis der Auftrag Anfang März von Herrn Brehl, Geschäftsführer der IKS Kunststoff- und Stahlverarbeitungs GmbH in Ingelheim erteilt wurde, worüber ich mich sehr gefreut habe.

Herr Brehl war von Anfang an gut sortiert und konnte sehr genau beschreiben was er haben möchte. Auch das Informationskonzept war so gut wie fertig, wenn auch anfangs etwas arg tief verschachtelt.
Webseite IKS auf kunststoffanlagen.de besuchen

Navigationsstruktur

Als nicht unbedingter Freund des Suckerfish-Menüs, wende ich Klappnavigationen nur dann an, wenn es nicht anders geht oder der Kunde drauf besteht. Der Grund ist einfach: als Webseitenautor hat man seine Seitenstruktur im Kopf und als Unternehmer weiß man über seine Produktpalette Bescheid. Besucher jedoch, die eine Webseite zum ersten Mal betreten, wissen das nicht.

Navigationen, die auf- und zuklappen zeigen die Titel der Informationen und die Pfade dorthin immer nur für einen kurzen Augenblick. Ein Besucher müsste sich schon etwas länger auf einer Seite aufhalten um sich merken zu können wo er gerade war und wie er dahin gekommen ist. Abgesehen davon schieben sich herausgefahrene Blöcke meist über den Inhaltsbereich und verdecken die Überschrift . Und da man aus gestalterischen Gründen oft gehalten ist die Linktexte möglichst klein zu halten, braucht man schon eine gute Maus und ein ruhiges Händchen um die Links zu treffen. Insgesamt ergibt sich daraus eine gewisse Unruhe auf der Webseite und das muss in den meisten Fällen gar nicht sein.

Jede Unternehmenswebseite will über das Angebot informieren und eines meiner Grundprinzipien ist es, wenn möglich die Produkt- oder Angebotspalette auf jeder Seite zu wiederholen so dass Besucher, egal von welchem Standort aus, immer Zugriff haben und sich nicht erst einen Merkzettel machen müssen.

Das Design.

Die IKS ist im Kunststoffrohrleitungsbau unterwegs und arbeitet sowohl für namhafte Auftraggeber aus der Industrie als auch im Tiefbau. Es geht hier viel um Flüssigkeiten – sei es Trinkwasser, Abwasser oder gar giftige Stoffe. Sie arbeiten mit fertigen Bauteilen, stellen aber bei besonderen Anforderungen auch Drehteile und Behälter “nach Maß” her.

Das Logo in rot mit dem Schriftzug IKS war schon vorhanden und daraus ergab es sich, dass Rot auch in der Webseite verwendet werden sollte. Nun ist Rot eine lebendige, kraftvolle Farbe, die jedoch auch aggressiv wirken kann , es heißt ja nicht umsinst “ich sehe Rot”. Da es beim Thema der Webseite aber auch viel um Wasser geht, habe ich Blau als zweite und Grau als dritte Farbe hinzu gewählt um einen ehrwürdigen Gegenspieler zum Rot zu haben und auch um der technischen Komponente in der Farbe einen berechtigten Ausdruck zu geben. Als ich die Webseite in einem früheren Stadium jemandem mit der Bitte um eine Meinung zeigte, wurde gesagt: “Das sieht ja aus wie bei einem Klempner.” Ich bin mir bewusst, dass da ein leiser Hauch von Kritik mitschwang – aber in diesem Fall war es eher eine Bestätigung als Anlass zur Sorge, denn was tut ein Klempner? Er schließt Rohre und Rohrleitungen an, nur eben innerhalb eines Gebäudes und in einem kleineren Maßstab als bei der IKS. Also alles in Ordnung.

Typolight Contao

Wie die meisten meiner anderen Webseiten ist auch diese Seite mit Typolight Contao aufgesetzt. Es gibt ein kleines Kontaktformular, welches mit dem Formulargenerator erstellt wurde und ein Downlaodarchiv, welches sicherlich nach und nach mit weiteren pdf-Dokumenten bestückt wird.
Noch nicht veröffentlicht, aber angelegt und vorhanden ist ein Newsarchiv, in welchem sicherlich bald auch Neuigkeiten aus der Branchen und/oder dem Wasserschutz zu lesen sein werden.

Außerdem kann man über die Webseite einen Newsletter abonnieren, indem man sich unter entsprechendem Navigationspunkt anmeldet. Typolight Contao versendet im double-opt-in Verfahren vorschriftsmäßig zunächst einen Bestätigungslink an den zukünftigen Abonnenten. Die E-Mail-Adressen der Interessenten werden automatisch im System unter einem entsprechendem Verteiler gesammelt, aber erst wenn die Bestätigung eingegangen ist, zum Versand frei geschaltet. Innerhab des Modul kann man dann natürlich auch seinen Newsletter schreiben.

Als kleines Highlight gibt es unter der Wegbeschreibung sowohl GoogleMaps als auch den GoogleRoutenplaner, die als bequeme Erweiterung aus dem Extension-Repository hinzuinstalliert werden können. An dieser Stelle möchte ich es nicht versäumen auf die Entwickler dieser Erweiterungen – Christian de La Haye und Christian Barkowsky hinzuweisen.
Auch haben sich in dieser Installation die TYPOlight Contao Insert-Tags als sehr praktisch erwiesen. Auf der Startseite werden die Teasertexte in den blau umrandeten Kästen via Insert-Tags inkludiert. So müssen Texte nur an einer Stelle geändert werden und nicht überall da wo sie erscheinen.
Die Startseite hat gegenüber den anderen Seiten ein anderes Design. Das mal wieder auf dem 960 Pixel Grid basierende Layout habe ich zum Zweck der hervorgehobenen Darstellung der Teasertexte in gleichmäßige Raster teilen können.

Schluss

Inzwischen hat Herr Brehl schon eigene Schritte im Administrationsbereich unternommen und auch schon selbstständig Inhalte an der Webseite bearbeitet und geändert. Ich denke, dass ihm die an sich einfach zu verstehende Software und letztendlich auch die gute Dokumentation keine Schwierigkeiten bereiten werden und er selbstständig mit der Webseite arbeiten kann.

Wer sich bereits mit TYPOlight ein wenig beschäftigt hat weiß, dass das System von Haus aus das Javascript-Framework MooTools einbindet. Im Zusammenspiel mit einigen frei verfügbaren Erweiterungen sind damit Funktionen wie Lightbox oder der im vorherigen Post vorgestellte Content-Slider möglich.

Ich muss jedoch gestehen, dass ich mit MooTools nie so ganz gut befreundet war und mit JQuery immer ein bisschen besser zurechtgekommen bin. Wie mir scheint sind im netz viel mehr nützliche Plugins zu haben, die auf jQuery aufbauen und deren Einbau ist auch besser dokumentiert.

Anyway: Auch wenn jQuery nicht standardmäßig in TYPOlight eingebunden ist (vielleicht kommt das ja noch), es ist kein Problem das händisch nachzuholen wie dieses Beispiel zeigen soll. Anlass war die Frage eines Interessenten ob es denn nicht einen Content-Slider mit Thumbnails geben würde. Also habe ich mich auf die Suche gemacht und bin fündig geworden:

Auf spaceforaname zeigt Jack Anderson die GalleryView von der ich sehr begeistert bin und die ich auf jukemedia.de als Beispiel in TYPOlight integriert habe.

Anwendungsbeispiel auf jukemedia.de besuchen

Und so installiert man GalleryView in TYPOlight

1. Lade das .zip auf deinen Rechner : DOWNLOAD

Es enthält analog der TYPOlight Struktur folgende Ordner und Dateien:

-  plugins
plugins/jquery/jquery.easing.1.3.js
plugins/jquery/jquery.galleryview-1.1.js
plugins/jquery/jquery.timers-1.1.2.js
plugins/jquery/jquery-1.3.2.min.js
plugins/jquery/themes/light/next.png
plugins/jquery/themes/light/pointer.png
plugins/jquery/themes/light/prev.png

-system
system/modules/frontend/templates/fe_page_jquery.tpl

- tl_files
tl_files/css/jquery-galleryView.css
tl_files/jquery/bild-01.jpg bis tl_files/jquery/bild-10.jpg
tl_files/jquery/x-bild-01.jpg bis tl_files/jquery/x-bild-10.jpg

- module.txt
Lade alles mit Ausnahme der module.txt  via FTP in deine Typolight-Installation.

2. Die Datei module.txt öffnen und Inhalt bearbeiten
Es empfiehlt sich die mudule.txt vor dem Einfügen mit einem Texteditor
zu bearbeiten und die Überschriften, Links und (alt-) texte für die Bilder durch
eigene Angaben zu vervollständigen.

3. Inhalt in Ziwschenablage kopieren.
Gehe in das Backend von TYPOlight Contao
=> Module => neues Modul anlegen => Typ: eigener html code
Füge den Inhalt aus der module.txt in das Codefenster ein.

4. Ein neues Seitenlayout anlegen
Seitenleiste links => Seitenlayouts =>
Erstelle ein neues Seitenlayout oder dupliziere ein vorhandenes
Wähle als Seitenvorlage: fe_page_jquery

ACHTUNG: im Downloadpaket ist eine angepasstes Template von fe_page vorhanden.
Mit dem upload der Dateien aus dem .zip liegt dies Datei im richtigen Ordner und ist dann unter “Verwendetes Seitentemplate” als fe_page_jquery auswählbar.
Da sie jedoch anders benannt ist, wird sie bei einem Update von TYPOlight Contao nicht überschrieben.

Wer das vermeiden möchte, kann alternativ auch über => Seitenlayouts => Zusätzliche headTags folgenden Code
in das Seitenlayout für GalleryView eingefügt werden:

<script src="./plugins/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="./plugins/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./plugins/jquery/jquery.galleryview-1.1.js" type="text/javascript"></script>
<script src="./plugins/jquery/jquery.timers-1.1.2.js" type="text/javascript"></script>
<script type="text/javascript"></script>

5. Steylesheet importieren
Weiter geht’s: => Seitenleiste links => Stylesheets => Stylesheet importieren
Importiere aus dem Ordner CSS das stylesheet jquery-galleryView.css
Aktiviere es für die neue Seitenvorlage.

6. Eine neue Seite anlegen
=>Seitenstruktur => neue Seite erstellen
Füge dem Artikel als Inhaltselement das zuvor erzeugte Modul hinzu.

7. Eigene Bilder in die Installation hochladen
Die großen Bilder haben die Abmessungen 800 x 300 Pixel.
Die thumnails sind 100 x 100 Pixel groß.

Bilder hinzufügen oder löschen

Um Slides aus der Show herauszunehmen oder hinzuzufügen muss für jedes Bild
der entsprechende Abschnitte in der module.txt gelöscht hinzugefügt werden

Anpassungen

Die Größe der Präsentation lässt sich in der fe_page_jquery einstellen.

panel_width = Breite der Galerie
panel_height = Höhe der Galerie
frame_width= Breite der thumbnails
frame_height= Höhe der thumbnails

mehr Anpassungen, look : spaceforaname.com/galleryview

Nachdem ich mittlerweile alle Typolight Contao Core-Inhaltselemente / Module durch habe, bin ich derzeit verstärkt auf Entdeckungstour im Typolight Contao Extension Repository unterwegs. Spannende Geschichte, denn seit ich begonnen habe mit dem System zu arbeiten, sind etliche Erweiterungen hinzugekommen und man kommt gar nicht so schnell hinterher wie neue Features hochgeladen werden.

Während noch vor 3-4 Jahren die Verwendung von Javascript auf Webseiten einer Todsünde gleich kam, findet man heute kaum noch Seiten wo nicht das eine oder andere eingesetzt ist, sei es ein hübscher Content-Slider, eine tabbed Navigation oder auch nur eine Lightbox. Möglich gemacht haben das mehrere Javascript-Bibliotheken, von denen hauptsächlich zwei inzwischen sehr populär geworden sind: Mootools und JQuery.

Beide können – mal auf die eine und mal auf die andere Art – mit ähnlichen Anwendungen aufwarten, da ich jedoch mit JQuery immer ein bisschen besser zurechtgekommen bin als mit Mootools, hatte ich bisher damit ein bisschen mehr Erfahrung und auch schon einige Testcases damit gebaut. Es ist nun kein Problem JQuery in Typolight Contao einzubinden, von Haus aus setzt das System jedoch auf Mootools und da inzwischen auch viele Erweiterungen auf Mootools basierend verfügbar sind, habe ich begonnen mit auch mit diesem Javascript-Framework anzufreunden.

Mein liebstes Spielzeug: der Contentslider.

Alle, die Powerpoint lieben, werden auch den Content-Slider lieben, denn letztendlich macht er nichts anderes. Inhalte werden in kleinen Päckchen auf einen “Slide” gelegt und per Klick oder auch automatisch von oben, rechts, links oder auch von unten in ein Fenster “geslidet”. Und das ist noch nicht alles, denn es stehen auch für die “Folienübergänge” Effekte zur Verfügung (Transitions) die man aber tunlichst sparsam einsetzen sollte.

In Typolight Contao steht ein solcher Contentslider im Extension-Repository zur Verfügung.
Erweiterung Contentslider im Erweiterungskatalog besuchen
Mein Dank für dieses schöne Feature geht an:
den Urheber: Stefan Gandlau und den Autor: Stefan Preiss

Interessante Diskussionen im Forum dazu:
http://www.typolight-community.de/showthread.php?849-ContentSlider-Problem
http://www.typolight-community.de/… /work&highlight=contentslider

Anwendungsbeispiel

Screenshot:

» Anwendungsgbeispiel in Aktion auf jukemedia.de ansehen

Einbauhinweise

Unter Seitenleiste links => Erweiterungskatalog in das Extension Repository gehen und die Erweiterung zunächst einmal installieren.
Danach stehen als Inhaltselement eines Artikels zwei neue Typen zur Verfügung:

• Content Slider Begin
• Content Slider End

Dort wo die Slides anfangen sollen, wird zunächst das Inhaltselement “Content Slider Begin” gesetzt. Folgende Einstellungen wurden in dieser Installation verwendet:

Breite: 540
Höhe: 300
Transition: linear
TransitionEase: easeInOut
Übergangsdauer: 1500

Nun die Inhaltselemente wie gewohnt z.B. als Textelement mit Bild anlegen und im Feld für die CSS-Kalsse das Wort “slideElem” einfügen. Jedes Inhaltselement ergibt einen (1) Slide. Zum Abschluss das Inhaltselement “Content Slider End” setzen.

Nun ist wichtig zu wissen, dass man noch ein paar CSS-Anweisungen benötigt, damit das Ganze funktioniert. In meinem Anwendungsbeispiel sieht das z.B. so aus:

#slideWrapper,#innerslideWrapper,#innerSlideWrapper div.slideElem {
width:540px;
height:300px;
}
 
#slideWrapper {overflow:hidden;
background:#f4f4f4 url("dateien/contentslider/bg-contentslider.jpg") left top no-repeat;
}
#slideWrapper h3 {
margin-bottom:20px;
padding-left:65px;
border:none;
}
 
#innerSlideWrapper{
background-color:#f4f4f4;
}
 
#innerSlideWrapper div.slideElem{
float:left;
}
 
#innerSlideWrapper div.slideElem p,#innerSlideWrapper div.slideElem h3,#innerSlideWrapper div.slideElem img{
margin-right:65px;
margin-left:65px;
}
 
#innerSlideWrapper div.slideElem p {
font-size:11px;
line-height:140%;
text-align: justify;
}
 
#innerSlideWrapper div.slideElem img {
margin-right:0;
}
 
#goForward {
position:relative;
margin-top:-250px;
margin-right:7px;
margin-bottom:0;
cursor:pointer;
}
 
#goBack {
margin:-250px 0 0 -2px;
cursor:pointer;}
 
#goBack img,#goForward img {
border:none;
}

Wichtig zu wissen:

Das CSS kann nicht 1:1 übernommen werden, da es sich auf mein Beispiel bezieht. Angegeben werden müssen jedoch Breite und Höhe von
#slideWrapper,
#innerSlideWrapper,
#innerSlideWrapper div.slideElem und die Eigenschaft float:left; für div.slideElem

Die Angaben zur Breite und Höhe von #slideWrapper,#innerslideWrapper,#innerSlideWrapper müssen exakt die gleichen Zahlen sein, wie man sie auch im Inhaltselement Content Slider Begin eingetragen hat.
Nicht vergessen darf auch bei den Inhaltselementen des Artikel bei CSS die Klasse slideElem einzutragen.

Und slideElem muss nach links floaten, sonst funktioniert es beim linearen Weiterschieben nicht.
Wenn man, so wie im Beispiel zu sehen, die Tasten zum Weiterschalten links und rechts anlegen möchte, muss man den Elementen p, img (also alles was im Slide liegt) einen entsprechenden Abstand zuweisen. Alles andere funktioniert nicht, weil der Slide (so kenne ich es jedenfalls von jQuery) in Wirklichkeit dreimal so lang ist wie ein Slide. (Anzahl der Slides x Breite)

Inzwischen habe ich Typolight Contao auf jukemedia einige Zeit im Gebrauch und die Installation hat via Live-update-ID schon ein paar updates hinter sich. Beim Versionssprung auf 2.8. hat sich jedoch einiges getan und nachdem ich gestern auf 2.8.3. upgedatet hatte, wollte es zunächst mit dem Content-Slider im IE7 und IE8 nicht funktionieren.

Der Grund: ich habe auf jukemedia für die fe_page ein angepasstes Template verwendet und wie man wissen sollte: individuell angelegte Templates werden bei einem upddate nicht überschrieben. Da jedoch gerade in Bezug auf die mootools mit dem update neue Dateien installiert wurden, griff meine Version immer noch auf die alten Dateien zu – die Verlinkung im head war ja unverändert. Und in den alten mootools Dateien war noch ein Bug. Durch das händische Austauschen des headers und damit der richtigen Verknüpfung zu den neueren mootools Dateien, konnte der Fehler jedoch schnell behoben werden.

Neben den zahlreichen Features im Core von Typolight Contao gibt es auch noch das Extension-Repository, eine Sammlung von noch mehr nützlichen Erweiterungen, die von einem ganzen Batallion von fleißigen Typolight Contao-Verwendern zur Verfügung gestellt wurden. Eine der herausragendsten und mächtigsten Erweiterungen ist das EFG-Modul, welches dankenswerterweise von Thomas Kuhn (tom) entwickelt und zur Verwendung frei gegeben wurde.

Thomas Weitzel ist Inhaber des Designbüros weitzeldesign in Stuttgart, Typolight Contao-Partner von Anfang an und seit März 2010 unterstützt Thomas die Weiterentwicklung von Typolight Contao auch als offizielles Team-Mitglied. Er setzt EFG in nahezu allen Kundeninstallationen ein und sagt, dass es für ihn zum Standard gehört, da er mindestens immer die individuelle Bestätigungsnachricht für Formularbenutzer damit einrichtet. Wer sich über die Möglichkeiten der EFG-Erweiterung schlau machen möchte, kann seine Webseite besuchen, auf der er als Nachlese zu den Workshops bei den Usertreffen nachvollziebare Inhalte zusammen- und zur Verfügung gestellt hat.

Anlass meines heutigen postings ist eine Aufgabe in eigener Sache. Zwar gibt es gewiss einige nette Tools, mit denen man sich eine Kundenkartei anlegen kann, aber weil es auch eine gute Übung ist die EFG-Erweiterung besser kennenzulernen und der eigenen, fortschreitenden Vergesslichkeit und dem Messiezustand auf meinem lokalen Webserver entgegenzuwirken, habe ich mir auch auf localhost Typolight Contao installiert und halte es für die Ewigkeit fest, was ich mit dem EFG gemacht habe.

Schritt 1 – Erweiterung abholen und installieren

Typolight Contao ist installiert und die EFG Erweiterung aus dem Extension-Repository auch.
Nach der Installation des EFG sieht man erstmal gar nichts, also nicht wundern und suchen.

Schritt 2 – Formular erstellen

Als nächstes braucht man erstmal ein Formular, welches mit dem Formulargenerator angelegt wird.
Admin => Linke Spalte => Formulargenerator => Neues Formuar => Namen eintragen, nichts weiter machen, abspeichern und fertig.

Ist es ein Form, welches im Zusammenhang mit dem EFG genutzt werden soll, gebe ich als erstes Formular-Element ein hidden-field ein. Damit ist das Formular eindeutig identifizier- und unterscheidbar, falls noch andere Formulare verwendet werden. Dieses hidden-Field werden wir später noch brauchen.

Dann wie gewohnt das Formular mit Textfeldern für Name, Vorname, Adresse, Telefon und was man nicht alles an Daten von seinen Kunden braucht, nach und nach unterrühren hinzufügen.

Im Backend von Typolight Contao ist immer noch keine Änderung aufgrund der neu installierten EFG-Erweiterung zu sehen – aber: don’t panic, es kommt gleich.

Schritt 3 – Formulareinstellungen ändern

Jetzt gehen wir nochmal zurück zu den Grundeinstellungen des Formulars. Egal ob Artikel, Newsbeiträge oder eben ein Formular: die Grundeinstellungen zu einem Element befinden sich immer oben in dem grau hinterlegten Kasten. Dort auf das Bearbeitungssymbol “Bleistift” klicken und …

… per Ckeckbox die Option “Daten im Modul “Formular-Daten speichern” aktivieren.

Schritt 4 – Formular testen

Nun sollte man ersteinmal das Formular testen. Dazu ein neues Modul vom Typ Formular erstellen.

Anschließend das Form in einen Artikel einbinden und die Seite mit dem fertigen Formular ansurfen.
Alles angekommen? Formular sichtbar?
Dann los und mal ein paar Testdaten einfügen, absenden, fertig.

Schritt 5 – Daten eingeben

Wenn man jetzt zum Backend zurückkehrt, sieht man in der Spalte links, dass sich etwas geändert hat und ein neuer Menüpunkt verfügbar ist.
Feedback wird immer automatisch angelegt und darunter folgen dann die Formulare, die ihre Daten via EFG in der Datenbank speichern. Im Falle meines Kundenkartei-Formulars wird das entsprechende Formular genannt.
Wenn man es anklickt, gelangt man zu einer Übersicht aller Daten, die über dieses Formular aufgenommen und abgespeichert wurde.

Wenn alles richtig gemacht wurde, sollte man an dieser Stelle die Eintragungen aus dem Testlauf sehen. Über den Menüpunkt “Neuer Eintrag” kann man nun auch im Backend die Adressdaten von weiteren Kunden aufnehmen.

Schritt 6 – Daten auflisten

Jetzt kommen wir zum Herzstück – dem Listenmodul. Über Seitenleiste links => Module => Neues Modul erstellen ein Modul vom Typ “Auflistung Formulardaten” erstellen.
Bezüglich der Einstellungsmöglichkeiten gibt nachfolgendes Schaubild einige Hinweise:

Das Modul muss nun nur noch in einen Artiekl eingebunden werden und schon hat man z.B. eine Kundenkartei bzw. man muss natrülich für jeden Kunden ein eigenes Modul erstellen, wenn man die eingangs erwähnte Bedingung einfügt. Die Ausgabe muss man sich nur noch im Quelltext anschauen und kann dann das Markup via CSS anfassen und formatieren.

Dieser Artikel beeinhaltet sicherlich nur einen kleinen Ausschnitt dessen, was man mit der EFG-Erweiterung alles machen kann. Möglichrweise gibt es auch andere Wege zum gleichen Ziel – mit der zeit werde ich gewiss noch mehr Einsatzmöglichkeiten durcharbeiten.