Als Muster dient mir eine Webseite für einen Kunden die ich bislang nur als Grafik vorbereitet habe (Screenshot). Genau so soll die Webseite mit Muse aussehen. Ich versuche keine Fremdprogramme wie Photoshop oder Fireworks einzusetzen, sowie keine Bedienungsanleitungen zu lesen um die Usability besser beurteilen zu können.

Der Start
Es geht etwas unverständlich los. Am Anfang werde ich nach der Breite, der minimalen Höhe, der Anzahl der Spalten und deren Abstände gefragt. Ich vergebe eine Breite von 874 Pixel, zwei Spalten und gebe bei Spaltenbreite die Breite der ersten Spalte, also 296 Pixel an und drücke Return. Zu meiner Überraschung wurde die Seite von Muse in der Mitte in zweimal 296 breite Spalten geteilt. Die gesamtbreite der Seite ist jetzt also die Summe aus 2×296, also 592px und nicht wie im Vorfeld angegeben 874 Pixel. Nach 3 Minuten Sucherei in den Menüs finde unter Seite den Punkt Seiteneigenschaften, lösche die Spalte und gebe wieder meine gewünschte Breite ein. Was das mit den Spalten soll verstehe ich nicht und arbeite eben nicht damit. Jetzt habe ich ein weißes Blatt mit zwei oberen und unteren blauen Linien die ich nicht verstehe.

Elemente aufbauen
Ich befinde mich ind er Entwurfsansicht auf meiner ersten Seite und beginne mit dem Aufbau des Menüs. Hierzu ziehe ich ein horizontales Menü aus der Widgets Bibliothek in meinen Arbeitsbereich. Leider kann ich die Seite nicht mit Hilfslinien ausstatten, weil sich diese nicht wie gewohnt aus den Liniealen rausziehen lassen. Ich gehe wieder auf die Registerkarte Planung und lege rechts neben meiner Seite weitere Seiten an Über uns, Übersicht etc.. wie im Entwurf. Automatisch werden die neuen Seiten von meiner Navigationsleiste übernommen, das ist praktisch.

Ich möchte etwas auf meine Seite Übersicht schreiben und in der Vorschau mir diese Änderung anschauen. Leider schaffe ich es nicht, diese Seite zu beschriften und in der Vorschau wird mir meine Navigation nicht angezeigt.

Ende
Ich breche den Versuch ab weil ich keine Lust mehr habe meine Zeit zu verschwenden. Ich dachte es wäre ganz einach und intuitiv zu bedienen.

Fazit
Das Programm soll es Grafikern ermöglichen, Webseiten ohne Html und Css Kenntnisse selber zu entwerfen. Dann sollte es aber auch intuitiv funktionieren. Ich habe gar nichts kapiert. Bevor ich mich in so ein Programm reinarbeite, lerne ich lieber Contao und Css. Damit bin ich flexibler und kann es auch meinem Kunden zum Bearbeiten geben.

Wer es dennoch genauer wissen möchte, der kann sich hier näher informieren. Es gibt auch einige Videotutorials in englisch. http://www.adobe.com/de/products/muse.html

Es klingt vielversprechend was da heute in meinem Google + Profil gelandet ist. Ab Montag gibts ein Google + Buch zum kostenlosen Download…

Ich bin mal gespannt ob das Buch gute Infos bereithält und so aktuell ist wie es verspricht. Wenn es dann noch einigermassen locker geschrieben übersichtlich bebildert ist bin ich glücklich.

Mit Google + sollte sich jeder Webmaster so langsam beschäftigen. Wer etwas tiefer in der Materie drin ist weiß, dass Google + nicht einfach ein zweites Facebook ist. Das Authortag z.B. finde ich jetzt schön phänomenal und ich bin gespannt wie sich alles weiterentwickeln wird.. wie auch immer, das kostenlose Google + Buch gibt es voraussichtlich ab Montag den 7.Mai 2012 hier zum Download.

Mit anderen Worten, ich möchte eine normale Contao Bildergalerie erstellen, die Thumbnails (Vorschaubildchen) sollen automatisch schwarz / weiss gefärbt werden und beim drüberfahren mit der Maus bunt werden. Beim Klick auf ein Thumbnail sollen sie dann ganz normal groß werden.

Ein Tutorial was dies ermöglicht findet sich im Contao Forum. Der Einbau ist für eingefleischte Webdesigner kein Problem. Natürlich sollte man Grundkenntnisse in Contao besitzen.

https://www.contao-community.de/showthread.php?28466-Bildergallery-in-Schwarz-Wei%DF-mit-Mouseover-Effekt&p=200022#post200022

Schade dass das keine Standardfunktion von Contao ist. Also warum kann man nicht einfach einem Bild in einer Galerie, oder einem einzelnen Bild was in einer Lightbox geöffnet wird, eine weitere Zeile spendieren, welche auch noch mit Html formatierbar ist? .. dennoch gibt es eine etwas umständliche Lösung, aber immerhin..

Wenn man z.B. seine Webdesign Referenzen vorstellen möchte, die Bilder der Webseiten in einer Bildergalerie unterbringen möchte, welche sich auf Klick vergrößern und unten einen Link zur Webseite anzeigen, dann ist das mit etwas umständlicheren Contao Bordmitteln zu meistern.

Die Lösung ist eine meta.txt. Diese Datei muss ins gleiche Verzeichnis wie die Bilder die in der entsprechenden Galerie angezeigt werden. Anhand der Meta.txt kann nicht nur die Reihenfolge der Bilder aus der Gallery festgelegt werden, sondern es gibt noch die Möglichkeit eine weitere Beschreibungszeile, bzw. auch Html unterzubringen.

Vorbereitung im Template / Layout
Wichtig ist, dass man als Lightbox in den Template / Layouteinstellungen unter MooTools- Templates die moo_mediabox wählt. MIt der moo_slimbox funktioniert es nicht (Grafik):

Meta.txt erstellen
Dann erstellt ihr eine meta.txt auf euren Computer. In diese meta.txt könnt ihr dann für jedes Bild der jeweiligen Galerie eine Zeile schreiben. Der erste Eintrag ist auch die Nummer eins in der Galerie im Frontend usw (zum fehlerfreien Bearbeiten bitte unteren Absatz “hochladen und bearbeiten” lesen..

dateiname = titel | Url | Bildunterschrift

datei1.jpg
datei2.jpg = Hier steht eine Testbeschreibung
datei3.jpg = eine weitere Testbeschreibung | www.edv-giessen.de

Ihr könnt auch Html Elemente in die meta.txt einbauen, z.B. einen <a href “#”>zur Webseite</a>

Eine weitere Zeile, bzw. einen Zeilenumbruch erzeugt ihr mit einem :: (doppelten Doppelpunkt)

Wichtig ist noch, dass die meta.txt im gleichen Verzeichnis wie die entsprechende Galerie liegen muss. Zudem dürfen die Bilder im Galerieelement nicht einzeln ausgewählt werden, sondern nur der komplette Ordner (Grafik):

Meta.txt hochladen und bearbeiten
Damit sie fehlerlos bearbeitet werden kann, solltet ihr sie direkt über die Dateiverwaltung bearbeiten. Dazu schiebt ihr sie zuerst per FTP in das Galerieverzeichnis, welchselt im Contao Backend in die Dateiverwaltung, navigiert zum Galerieverzeichnis und klickt bei der meta.txt auf Bearbeiten. Wenn ihr sie hier bearbeitet, kommt es nicht zu falschen Umwandlungen.

So siehts dann aus:

Das wars auch schon. Hier könnt ihr Euch ein Beispiel ansehen (unten bei den Referenzen auf der Startseite) www.webagentur-mittelhessen.de

Weiterführende Links:
http://de.contaowiki.org/Galerie_mit_meta.txt
http://www.tl-usertreffen.weitzeldesign.com/bildergalerien.html

Viel Spass!

Aktuell hatte ich das Problem, dass mir Contao einen linken Bildabstand (padding) gesetzt hat, wo aber laut Firebug nichts definiert war. Ich hatte das Problem schon 3 mal und immer wieder habe ich es vergessen und über eine halbe Stunde rumgesucht.

Lösung:
Dem Bild, also dem .image_container einen margin von 0 zuweisen. Dann sitzt das Bild wieder. Um den Beitrag etwas aufzufüllen: solltet ihr mal auf ein Problem mit einem ca. 5px hohen Rand bei Bildern in Contao stossen, dann gebt dem Bildelement (img) mal per Css “display:block”. Also quasi :img:{display:block;}. Diese beiden “Hacks” sollten alle bestehenden Probleme mit komischen Bildabständen in Contao lösen.

Ein Contao Wiki hat mich dann auf den richtigen Weg gebracht. Es lag an der relativen Positionierung des Body Elements. Das es was mit dem Body, also dem Elternelement zu tun hat, war mir klar. Aber dass es an dem relative lag, welches mir Contao standardmäßig in die Css schreibt, ist mir erst viel später gekommen.

Also Lösung: In der Contao.css die position:relative rausschmeissen und fertig!

Auch wenn Google Analytics jetzt auch live tracken kann, es ist noch im Beta Stadium und es funktioniert bei mir alles andere als zuverlässig. Bis zu einer bestimmten Besucherzahl ist Woopra kostenlos. Soweit ich weiß kostet es dann ab 20000 Euro im Monat Geld. Das Tracking hört in der kostenlosen Variante nach dem Erreichen der kostenlosen Klicks einfach auf und fängt im nächsten Monat wieder an. Meine kostenpflichtigen Accounts habe ich vor kurzem deaktiviert und gegen ein Seo Tool eingetauscht

Ein weiteres geiles Feature von Woopra ist, dass man seine aktuellen Websitebesucher direkt anchatten kann. Im Browser des Besuchers geht dann ein kleines Chatfenster auf und der kann Antworten..

Wie auch immer, Woopra gibt es jetzt endlich für Iphone und iPad. Das ist natürlich sehr geil weil man von unterwegs aus immer mal schnell und recht zuverlässig gucken kann, was auf der Webseite los ist.

Vorweg sei gesagt, er funktioniert nur bei Links, also muss im in die Seite eingebundenen Cufon Script direkt ein Link Tag, also ein a angesrochen werden. Angenommen wir möchten die Navigation mit Cufon Schriften ausstatten und wünschen uns hier einen Hover Effekt.

Der normale Code ist:
Cufon.replace(‘.mod_customnav a’);

Wie oben erwähnt muss direkt ein Link angesprochen werden, also #nav a, sonst funktioniert es nicht. Jetzt wird der Hover Code einfach noch angefügt.

Cufon.replace(‘.mod_customnav a’, {hover: {color: ‘#E12E7F’}});

Probiert es aus, jetzt sollte der Hover Effekt bei Cufon Schriften funktionieren!

Natürlich bin ich nicht freiwillig bei 1und1, sondern die Kundin und die hat, wie es bei diesem unseriösen Scheissladen üblich ist, einen 2 Jahresvertrag. Wie erwartet verweigerte mir der 1und1 Support jegliche Auskunft und verwies mich auf das Forum der “Fremdsoftware”. Also noch kurz gesagt, Finger weg von 1und1!!!

Die Installation klappte nach der Umstellung auf eine aktuelle Php Version und nach dem Einrichten einer Datenbank problemlos. Doch dann versuchte ich die Grundstruktur einzurichten wie ich es schon 100te Male mit Contao gemacht haben. Im Frontend erhielt ich immer wieder den Fehler:Page not found, oder No Pages found. Das Problem war der Startpunkt einer neuen Webseite. Also erstens muss man in der Seitenstruktur den Startpunkt einer neuen Webseite festlegen und zwar macht man das mit der Unterseite. Danach die weiteren Seiten natürlich innerhalb des Startpunktes positionieren.

Soweit so gut. Jetzt hakt man das Sprachenfallback im Startpunkt der neuen Webseite an und jetzt kommt der Knackpunkt: Es darf keine Domain im Startpunkt einer neuen Webseite eingetragen sein. Das war bei mir im Endeffekt der Fehler. Warum weiß ich nicht, aber endlich funktioniert es.

Doch der nächste Fehler ließ nicht lange auf sich warten
Multiple ChoicesThe document name you requested (/index.php) could not be found on this server. However, we found documents with names similar to the one you requested.

Ok, ohne das jetzt groß zu kommentieren, schreibe ich nur die Lösung auf. Dieses Problem taucht bei 1und1 auf, wenn Ihr die .htaccess Datei aktiv habt. Für den ganz normalen Contao Betrieb könnt Ihr die auch einfach auskommentieren, bzw. umbenennen in z.B. ._htaccess oder sowas. Also diese Datei über FTP unbrauchbar machen und dann in den Einstellungen das Häckchen bei Urls umschreiben wieder entfernen (falls gesetzt). Jetzt ist die Url Struktur zwar durch das index.html verunstaltet, aber das ist die gerechte Strafe dafür dass Ihr bei 1und1 seid

Viel Erfolg!

Professionelle WordPress Templates bekommt man nicht geschenkt, man muss dafür meist zwischen 20 und 80 Dollar hinlegen. Doch dieses Angebot hat es in sich! 15 professionelle WordPress Thems für nur 29 Dollar…

Früher habe ich kostenlose WordPress Templates verwendet. Heute mache ich das wenn überhaupt nur noch für Satellitenseiten. Brauche ich ein vernünftiges Template für ein erfolgsversprechendes Projekt, kaufe ich mir eins und muss nicht stundenlang rumsuchen..

Für professionelle Templates gibt es einige gute Seiten, eine der guten ist Mojo-Themes. Genau dieses Portal hat ein kleines Weihnachtsangebot rausgehauen. 15 professionelle WordPress Templates für günstige 29 Dollar. Das sind gerade mal 21 Euro und 60 Cent. Da kann man wirklich nicht mecker. Das Angebot ist natürlich perfekt für Leute die Ihre Kunden mit WordPress Seiten beglücken. Die Templates sind fast alle top. Aber was rede ich, schaut einfach selber. Das Angebot gilt allerdings nur noch ein paar Tage, also haut rein. Die Template-Übersicht findet Ihr hier.