Metro-Design mit PhotoShop - Tutorial

Wer heute noch denkt, dass "Metro" ein Untergrundtransportmittel in Paris ist, hat definitiv nicht mitbekommen, dass Windows 8 in den Startlöchern steht und dabei eine brandneue Benutzeroberfläche anbietet. In diesem Artikel werden die Merkmale von Metro beschrieben und in einem PhotoShop-Tutorial die Erstellung des Designs nachvollzogen.

Anders bei "Aero" von Windows 7 wird diesmal nicht bloß ein wenig mit Effekten wie Transparenz und Spiegelung gespielt. Das Ziel des neuen Designs ist ein totalitär veränderte Wahrnehmung der Oberfläche. Da die Anzahl der Tablet-PCs und Geräte mit Touch-Bedienung rapide zunimmt, wurde diese Bedienphilosophie von Anfang an durchweg in der Konzeption berücksichtigt.

Hier ein erster Blick auf die Benutzeroberfläche "Metro" von Microsofts Windows 8:

Die neue Benutzeroberfläche "Metro" von Windows 8 (Beta).

Merkmale von Metro

Bei "Metro" handelt es sich um eine typographisches Design. Die Schriften stehen also im Vordergrund und werden als Ersatz für aufwändige Icons eingesetzt.
Alle Elemente sind kachelartig angeordnet - jede Kachel folgt dabei einem unsichtbaren Raster, damit die Fluchtlinien stimmig sind. Die Icons, wenn überhaupt vorhanden, werden nur noch minimalistisch dargestellt.

Die Sidebar (rechts) bietet Zugriff auf Einstellungen wie Desktophintergrund, Kachelabstand sowie die Auswahl der sichtbaren Widgets und Verknüpfungen. Ich habe die Bedienung an einem Touch-Monitor ausprobiert: Das Verschieben der Kacheln und das Wischen des Schirms (um zu den weiteren, nicht sichtbaren Widgets zu wechseln) funktionieren problemlos. Allerdings wünsche ich mir mehr Einstellungsmöglichkeiten und im Versuch haben die Widgets nur partiell meine getätigten Einstellungen beibehalten.

Die Metro-Oberfläche befindet sich (genau wie Windows 8 selbst) noch in der Entwicklungsphase. Der Fortschritt kann im (wirklich interessant geschriebenen) Blog des Microsoft-Entwicklerteams nachvollzogen werden.

Metro-Design mit PhotoShop erstellen - Kurztutorial

Aus Interesse habe ich das Metro-Design mit PhotoShop nachgebildet und ein wenig interpretiert. Das Ergbnis dieses Tutorials sieht am Ende wie folgt aus:

Ergebnis des PhotoShop-Tutorials "Metro-Design".

Schritt 1: Vorbereitungen - Überschrift und Raster

Ich erstelle ein neues PhotoShop-Dokument mit der gewünschten Größe (z.B. 1024x768) und wähle eine Auflösung von 72 DPI.
Danach suche ich mir eine serifenlose, schlanke Schriftart (Century Gothic) für die Hauptüberschrift aus und platziere sie großzügig skaliert oben links am Bildschirmrand.
Anschließend muss das Raster für die Kacheln erstellt werden. Um die Rastereinheiten erkennen zu können und einen Rahmen zu bilden ich platziere ein sehr großes graues Rechteck auf der Arbeitsfläche. Jetzt wähle ich eine Rechteckform und ziehe diese mit gedrückter Shift-Taste zu einem Quadrat mit einer Seitenlänge von ca. 6cm (1). Jetzt dupliziere ich das Quadrat und färbe die Kopie neu ein (die Kopie muss in der Ebenenansicht über dem Original liegen).

Schritt 0: Erstellen einer Rastereinheit.

Jetzt ändere ich die Breite des Rechtecks so lange, bis das Rechteck das Quadrat genau halbiert (2). Dann überlege ich mir, welchen Kachelabstand ich haben möchte. Bei einem Kachelabstand von 16 Pixeln mache ich das Rechteck weitere 8 Pixel schmaler.
Das so gewonnene Rechteck benenne ich "Rasterelement" und erstelle ein Duplikat davon. Das Duplikat ("Rasterelement Kopie") verschiebe ich so lange seitlich, bis es die andere Hälfte meines Quadrats ausfüllt. Das Quadrat beinhaltet also zwei jeweils auf den Kanten liegende Rechtecke mit einem Spalt dazwischen (3).
Das Quadrat blende ich nun aus (4). Die zwei Rasterelemente dupliziere ich und platziere sie rechts neben dem Original. Dabei halte ich genau denselben Abstand zum linken Paar ein, wie auch der Abstand zwischen den beiden Rasterelementen groß ist. Dieser Abstand muss auch für den vertikalen Abstand eingehalten werden. Durch weiteres Duplizieren erhalte ich so am Ende ein großes Raster wie in der folgenden Abbildung.

Schritt 1: Raster erstellen.

Schritt 2: Die Sidebar

Für die Sidebar wähle ich einen starken Grauton (#595959) als Hintergrundfarbe. Mit perfekten Kreisen forme ich Schaltflächen, auf denen ich einfache Symbole mit niedrigem Detailgrad platziere. An Stelle von Kreisen würden rechteckige Elemente vermutlich besser passen, aber zumindest an dieser Stelle möchte ich mich vom Original abheben.
Ebenso habe ich oben rechts ein Viertel eines Kreises platziert - dies soll die "Schließen"-Schaltfläche werden. Sie ist groß gewählt, da viele (otpische) Touch-Displays Probleme mit der Fingererkennung in den Eckpunkten haben.

Schritt 2: Sidebar ergänzen.

Schritt 3: Die Kacheln

Jetzt wird das Raster mit den Kacheln gefüllt.Ich überlege mir, welche Elemente mein Startbildschirm enthalten soll und wieviel Platz diese jeweils benötigen.
Ich blende das Quadrat aus Schritt 1 wieder ein und dupliziere es. Ich lege die Duplikate passend auf das Raster und färbe jedes Kachelelement einzeln ein. Die Farben wähle ich dunkel genug, damit ich später einen weißen Text darauf platzieren kann.Wie im folgenden Bild zu sehen, kann die Fläche sich beliebig ausbreiten - es muss nur die Rasterung eingehalten werden.

Schritt 3: Kachelung wählen.

Schritt 4: Texte und Symbole

Die Kacheln wirken noch recht leblos. Mit Hilfe von einfachen Symbolen und sehr großen Schriftzügen garniere ich die Schaltflächen.
Bei Metro gibt es vier Arten von Schaltflächen:
a: große Symbole ohne Text
b: mittelgroße Symbole mit wenig Text, der hervorgehoben wird
c: kleine Symbole mit mehr Text
d: großes Bild ohne Symbole oder Text

Die Hervorhebung des Textes (Fall "b") bewirke ich durch das Platzieren eines schmalen schwarzen Rechtecks unter dem Text. Die Deckkraft setze ich auf 55% und die Füllmethode setze ich auf "Ineinanderkopieren".
Die Überschriften müssen zwar derselben serifenlosen Schriftart angehören, können aber verschiedene Schriftgrößen und Zeichenabstände haben. Microsoft spielt bei dem Design absichtlich mit verschiedenen Schriftgrößen pro Widget.

Schritt 4: Texte und Symbole ergänzen.

Schritt 5: Farbverlauf (optional)

Das originale Metro-Design besitzt keine Farbverläufe auf den Buttons. Ich bin jedoch ein Fan von dezenten Farbverläufen und finde diese Variante eine Spur hübscher.
Um den dezenten Farbverlauf zu bewirken, wähle ich eine der Kachelformen aus und öffne über das Kontextmenü das Menü "Fülloptionen...". In den Fülloptionen (= "Ebenenstil") aktiviere ich den Punkt "Verlaufsüberlagerung" und wähle als Füllmethode "Hart mischen" bei einer Deckkraft von 35%. Der Verlauf sollte einen Übergang von weiß zu transparent beinhalten. Ich spiele mit dem Slider "Skalieren", bis der Verlauf meinen Wünschen entspricht und achte darauf, dass der Verlaufswinkel exakt 90° beträgt.

Fülloptionen für den Farbverlauf.

Wenn ich den Dialog schließe, sieht das fertige Ergebnis wie folgt aus:

Schritt 5: Farbverlauf ergänzen (optional).

Produkte im Apple-Style darstellen mit Photoshop

   
Wer einmal einen Blick auf den Apple Store geworfen hat, der stellt fest, dass alle Produkte so aussehen, als ob sie auf einer glatt polierten Glasplatte stehen würden, in der sie sich spiegeln.
In diesem Tutorial wird in sieben einfachen Schritten beschrieben, wie man mit Hilfe von Photoshop diesen Effekt ganz einfach selber hinbekommt.

Schritt 1 – Datei vorbereiten

Wählen Sie ein Motiv, welches frei gestellt ist (sich also auf einem weißen Hintergrund befindet) oder sich einfach frei stellen lässt. Da es bereits eine Vielzahl von solchen Apple-Produktbildern gibt, habe ich mich hier für die Abbildung meines HTC Desires entschieden.
Platzieren Sie es so, dass nach unten hin etwas Platz frei ist.

Schritt 2 – Bild duplizieren

Zunächst muss die Ebene dupliziert werden. Klicken Sie dazu mit der rechten Maustaste auf die Ebene und wählen Sie “Ebene duplizieren”. In dem erscheinenden Dialog vergeben Sie den Namen “Spiegelung”. Schieben Sie die Ebene “Spiegelung” unter die Originalebene. Schieben Sie die Spiegelung möglichst dicht an das Original.
Es macht übrigens nichts, wenn die Spiegelungsebene dabei über die Arbeitsfläche von Photoshop hinaus ragt. Sollten Sie sich grob verschätzt haben und es ist nicht mehr genügend Platz für eine Spiegelung, so können Sie die Arbeitsfläche einfach über “Bild –> Arbeitsfläche…” vergrößern.

Schritt 3 – Bild spiegeln

Noch sieht die Konstellation nicht wie eine Spiegelung aus. Kippen Sie die Spiegelungsebene, indem Sie diese markieren und anschließend auf “Bearbeiten –> Transformieren –> Vertikal spiegeln” klicken. Wenn sich nun das Original verändert haben sollte, so hatten Sie die falsche Ebene markiert.

Schritt 4 – Ebenenmaske hinzu fügen

Die Spiegelung ist noch etwas unschön, da sie am Bildrand abrupt endet. Damit sie in einem weichen Verlauf ausgeblendet wird, benötigen wir zunächst eine Ebenenmaske.
Klicken Sie dazu im Ebenenbrowser zuerst auf die Ebene “Spiegelung” und danach unten auf das Symbol mit dem kleinen Kreis im Rechteck. Als Ergebnis ist im Ebenenbrowser nun in der Ebene “Spiegelung” ein weißes Maskenfeld hinzu gekommen.

Schritt 5 – Transparenzeffekt anwenden

Noch hat sich auf dem Bild nichts verändert. Das liegt daran, dass die Ebenenmaske noch nichts maskiert. Ebenenmasken kann man sich so vorstellen, dass man eine transparente Folie über das eigene Bild legt. Die Bereiche, die weiß sind, werden angezeigt; die schwarzen Bereiche ausgeblendet.
Da wir einen weichen Übergang ins Leere erzeugen wollen, verwenden wir einen Farbverlauf, den wir auf die Ebenenmaske malen.
Klicken Sie dazu im Ebenenbrowser zuerst auf die Ebene “Spiegelung” und dann auf den kleinen weißen Kasten der Ebenenmaske.

Wählen Sie jetzt in der Werkzeugleiste das Verlaufswerkzeug aus. Wenn Sie es nicht sehen können, so hat es sich hinter dem Farbeimer/Füllwerkzeug versteckt. Klicken Sie auf das Icon mit dem horizontalen Verlauf und stellen Sie sicher, dass links ein Verlauf von weiß nach schwarz zu sehen ist.

Jetzt muss der Verlauf noch gezeichnet werden. Ziehen Sie dazu mit der linken Maustaste eine gerade Linie von oben nach unten. Je länger die gezogene Linie ist, um so weicher ist der Verlauf. Um sicher zu stellen, dass der Verlauf wirklich senkrecht verläuft, können Sie beim Ziehen die Shift-Taste gedrückt halten. Wenn es beim ersten Mal nicht klappt, kann man es gleich noch einmal versuchen. Wichtig ist nur, dass oben im Werkzeugmenü der Modus “normal” ausgewählt ist.
Als Ergebnis sollte die Spiegelung sich in ein sanftes Nichts auflösen und der Farbverlauf in der Ebenenmaske sichtbar sein.

Schritt 6 – Unschärfe hinzu fügen

Auch wenn die Spiegelung jetzt schon vorhanden ist, so ist sie noch nicht perfekt. Üblicherweise werden Objekte durch die Brechung des Lichts und weitere physikalische Gegebenheiten (Staub, Kratzer usw.) nicht wirklich perfekt gespiegelt. Dies lässt sich durch ein wenig Weichzeichnen abbilden.
Klicken Sie dazu auf die Ebene “Spiegelung”. Achten Sie darauf, dass wirklich die Ebene und nicht die Ebenenmaske markiert ist. Klicken Sie nun in der Menüleiste auf “Filter –> Weichzeichnungsfilter –> Gaußscher Weichzeichner”.
Legen Sie einen kleinen Wert (etwa. 0,6 Pixel) fest, damit eine minimale Unschärfe entsteht und bestätigen Sie den Dialog.

Schritt 7 – Helligkeit anpassen

Zuletzt kann die Deckkraft der Spiegelung noch etwas reduziert werden, damit die natürliche Diffusion von Oberflächen simuliert wird.
Klicken Sie dazu erneut auf die Ebene “Spiegelung” und schieben Sie die Deckkraft auf ca. 85 Prozent.

Das Bild wird abgeschlossen, indem zum Schluss eine Ebene als Hintergrund hinzu gefügt wird. Achten Sie darauf, dass die Hintergrundebene die unterste im Ebenenbrowser ist.

Frisches Design für grüne IT

"GreenIT" ist neben Cloud Computing die Modeerscheinung schlechthin bei IT-Dienstleistern. Damit die grüne Firmenphilosophie auch als klares Statement den Kunden gezeigt wird, muss auch die Firmenwebseite angepasst werden.
Einige verzieren daher ihre Webseiten mit vereinzelten grünen Blättern oder fügen einen hervor stechenden, grün gefärbten Link zu den umweltfreundlichen Service-Leistungen ein. Andere stellen gleich die ganze Webseite auf den grünen Weg um.

So habe ich auch im Auftrag der Firma Comp4U EDV-Anlagen GmbH in Langen die Firmenwebseite von einem schwarz/weiß/grauen Design auf ein grün/weißes Design umgehoben. Als Orientierung dienten andere professionelle grüne Webseiten wie der Apple-Store http://www.gravis.de und http://www.actebis.com.

Technik

Als CMS kam erneut das sehr leistungsfähige OpenSource-System "Joomla!" zum Einsatz. In Ergänzung mit vielen Erweiterungen für eine verbesserte Menüführung oder SEO-Maßnahmen und dem eingekauften Basisdesign namens JA Kyanite II der Firma JoomlArt wurde so Stück für Stück eine individuelle Webseite geschaffen.
Das Design wurde manuell so angepasst, dass es auf den bekanntesten Browsern stabil läuft. Dazu waren mehrschichtige Eingriffe in verschiedene Style-Vorlagen sowie den PHP-Code notwendig.

Das grüne Design von Comp4U.

Designrichtlinien

Die frühere Webseite bestand aus genau einer großen Navigationsleiste. Um die Seite ansprechender und intuitiv bedienbar zu gestalten, wurden die Menüpunkte sorgfältig aufgesplittet. Auf einer großen Navigationsleiste sind die Dienstleistungen abgebildet, während auf einer kleinere Leiste die peripheren Interessenspunkte dargestellt werden.

Darf es etwas mehr sein?

Ein wichtiger Bestandteil bei Webseiten ist das "bei Laune halten" des Besuchers. Dazu muss dieser zu jeder Zeit wissen, wo er sich gerade befindet, wie er wieder zurück kommt und was ihn noch alles erwartet. Zu diesem Zweck wurden Breadcrumps eingefügt (kleine Links welche die Tiefe der Navigation abbilden) und tagbezogene dynamische Linkvorschläge in die Webseite integriert. Wenn man sich also im Menüpunkt "Speicher" befindet, so erscheinen auch Links zu Backup-Lösungen, Festplatten usw.
Erfahrungsgemäß betrachtet der Großteil der Besucher bloß die Startseite. Umso wichtiger ist es, dass diese einen runden Eindruck macht und den Eindruck vermittelt, dass es sich immer wieder lohnt, vorbei zu schauen. Zu diesem Zweck wurde ein Bereich für firmeninterne News und ein weiterer mit "externen News" (z.B. von heise.de) eingefügt.

Eyecatcher

Da die Startseite oftmals auch einfach nur geöffnet wird, ohne dass eine Recherche im Vordergrund steht (sprich: der Besucher schaut einfach nur auf die Webseite), sollte auch eine Animation integriert werden. Zu diesem Zweck habe ich viele grüne Motive gesammelt und sie mit Slogans versehen, die zum Motto "Green IT" passen. Damit diese animiert werden, griff ich zu dem Flash-Plugin "Monoslideshow". Dieses Tool werde ich in späteren Blogbeiträgen noch einmal vorstellen.

Bildverarbeitung, Wolken und ein Picnik im Grünen

Viele Menschen benutzen Photoshop nur, um einfache Arbeiten, wie bspw. Farbkorrekturen oder kleine Retuschearbeiten an ihren Lieblingsfotos vorzunehmen. Photoshop ist zwar der König unter den Grafikprogrammen, aber es kostet auch königlich viel Geld.
Wer einfach, kostenlos und mit guter Qualität Bildverarbeitung betreiben will, kann auch zu der Online-Lösung "Picnik" greifen. Dabei handelt es sich um eine der ersten Applikationen aus einer Wolke (engl.: cloud), die bequem aus dem Netz heraus gestartet werden kann.

Funktionsweise

Der Start ist einfach. Nach dem Besuch von www.picnik.com erwartet einen ein freundlicher "Upload"-Button - nicht einmal eine Registrierung ist nötig. Kaum wurde das Bild hochgeladen, lädt der umfangreiche Editor zum Ausprobieren der vielen Funktionen ein. Die Funktionen sind nach Anwendungsbereich gruppiert und können alle rückgängig gemacht werden.
So findet man Im Tab "Bearbeiten" die gängigen Methoden wie z.B. Zuschneiden, Vergrößern/Verkleinern, Nachbelichten, usw. Im Tab "Erstellen" kann der Benutzer kreativ werden und eine Palette von Filtern auf das Foto anwenden. Auch kleinere Retuschearbeiten wie Weichzeichnen, Pixelkorrekturen und ähnliches lassen sich auswählen.
Wer es dramatisch mag, kann auch seinem Bild einen Rahmen verpassen oder gar virtuelle Aufkleber anbringen. Zum Schluss bietet der Tab "Speichern" eine Fülle an Optionen. So kann der Benutzer dort das Dateiformat, die Dateigröße sowie den Kompressionsgrad des bearbeiteten Bildes festlegen. Weitere Funktionen wie das Versenden der Kreation via E-Mail dürfen natürlich auch nicht fehlen.

Kritik

Picnik ist eine fantastische Lösung, um Fotos "schnell zu bearbeiten" - bspw. um sie für eBay mit wenig Aufwand aufzuwerten oder in das richtige Format zu bekommen. Es kann jedoch keineswegs Programme wie Photoshop ersetzen, da z.B. kein Ebenenbrowser vorhanden ist und die Kreation vor allem für die häufigsten Bildmanipulationen optimiert wurde. Weiterhin kosten viele Filter Geld (sie sind mit dem Wort "Premium" markiert). Bedenkt man, dass dieser wunderbare Dienst aus der Wolke nun von Google aufgekauft wurde, so mache ich mir ein wenig Sorgen, wie im Laufe der Zeit die hochgeladenen Bilder verwertet werden...
Erwähnenswert ist noch, dass die Webseite am Besten mit dem IE7/IE8 aufgerufen werden sollte, da es bei mir im Firefox (v3.5 unter Windows 7) mehrfach zu Abstürzen kam, wenn man viele Veränderungen vornimmt.

Fazit

Trotz der kleinen Wermutstropfen ist Picnik allemal einen Blick wert. Es ist überraschend, wie performant Bildverarbeitung im Internet sein kann und mit welch einfachen Schritten sich herzeigbare Ergebnisse präsentieren lassen. Weiterhin ist diese Webseite ein Paradebeispiel für gute Usability: Intuitive Bedienung, freundliches Design, variable Controlgröße, Undo-Funktionen, Echtzeitvorschau, Unterstützung für viele Sprachen, uvm.
Wenn das Web sich weiter so entwickelt, freue ich mich auf das "richtige" Web 2.0!

Gesellschaft für Industriemontage in neuem Gewand

Im Auftrag der Firma Comp4U habe ich für GFI - die Gesellschaft für Industriemontage - ein Redesign der Firmenwebseite vorgenommen.
Da sowohl Farbgebung als auch Layout direkt von einem etwas betagtem Printlayout stammten, wurde im Rahmen eines Redesigns komplett neu angefangen. Da es eine Reihe von Symbolen gibt, die bereits auf vielen Visitenkarten und Briefbögen abgebildet sind, mussten diese in die Designüberlegungen mit einbezogen werden.
Insgesamt macht die Webseite einen dezenten und professionellen Eindruck. Übersichtsseiten im Blog-Stil ermöglichen einen schnellen Themenüberblick und verleiten zum Weiterlesen.
Das ehemals sehr dicht gedrängte Print-Layout wurde durch ein lockeres Erscheinungsbild ersetzt. Abgerundet durch neue Features wie ein Kontaktformular, Exportfunktionen und ein professionelles Impressum wird dem Benutzer so eine freundliche und klare Webseite geboten.

Auch hierbei kam Joomla! zum Einsatz, welches mir durch die geschickte Vorformatierung des Templates viel Arbeit abgenommen hat. Mit etwas Nachkorrektur waren auch schnell die unterschiedlichen Interpretationen der Browser (was ist eine Aufzählung, wo wird das Icon platziert, etc.) vereint worden, so dass das Erscheinungsbild mit allen gängigen Browsern ästhetisch und homogen wirkt.
www.gfi-montage.de

Neue Webseite für Fallou Sy - Joomla vs. Wordpress

Mein Freund und Trommellehrer Fallou Sy brauchte eine neue Webseite um sich und seine Projekte zu präsentieren. Ein Bekannter hatte ihm früher eine Webseite zusammengehackt, aber das Vorhaben ist im Sand verlaufen.

Damit überhaupt etwas zu sehen war, hatten wir uns kurzfristig für die Erweiterung seines Wordpress-Accounts entschieden. Immerhin können mit Wordpress nicht nur Blogs sondern auch Webseiten erstellt werden. Leider bringt Wordpress aber auch Negatives mit sich: Nutzt man das kostenlose Portal, um sich einen solchen Blog erstellen zu lassen, so spürt man schnell die Ambitionen des Wordpress-Teams: Geld verdienen.

Wordpress erlaubt es zwar dem Benutzer, eines von fünf Designs auszuwählen - angepasst werden können diese aber nur gegen Geld. Selbst das eigens geschriebene CSS-Template darf nur gegen Geld auf die Webseite angewandt werden.
In den fertigen (fünf) Templates sind die Editierfunktionen auch arg eingeschränkt - so kann beispielsweise nur grob ein eigenes Bild in die Seitennavigation implementiert werden.

Als Ergebnis erhält man eine Webseite mit einem Design, welches mind. 5 Mio. andere Menschen verwenden, einen hakeligen Editor, seltsame Bildverknüpfungen und das Gefühl, für die eigene Leistung auch noch zahlen zu müssen. Es mag sein, dass die installierbare WordPress-Variante mehr kann und eleganter ist - hier stütze ich mich ausschließlich auf das Online-Angebot von www.wordpress.com.

Das konnte kein Dauerzustand bleiben. Über Schlagzeilen in Webzeitschriften bin ich dabei auf Joomla! gestoßen. Joomla! ist ein kostenloses Blogging-System, welches auch als CMS eingesetzt werden kann. Dazu benötigt man nur einen Server, der PHP 4.x/5.x unterstützt und eine MySQL-Datenbank.

Nachdem ich es installiert hatte, war die Einarbeitung eine leichte Sache - man sucht sich eines von ca. 5000 Templates aus, die die Gemeinde bereitwillig kostenlos in ganzen Template-Galerien veröffentlicht, passt dieses optisch nach seinen Wünschen an, integriert die (ebenfalls kostenlosen) Module für etwas mehr Funktionalität und schon ist eine erste individuelle Webseite entstanden.

Ich will gar nicht bestreiten, dass es wichtig ist, CSS und auch etwas PHP zu beherrschen - dennoch habe ich in Joomla! eine wunderbar solide Basis gefunden, um Webseiten zu erstellen.

Im Falle von Fallou Sy ist auf diese Weise eine Webseite entstanden, die ihm persönlich die Wartung seiner Inhalte und News (in Form eines Blogs) ermöglicht, ein Gästebuch enthält und sogar eine dynamische Galerie beinhaltet. Viele weitere Mikrofunktionen runden das Bild einer professionellen Webseite ab.
Das Ergebnis kann man unter www.fallou-sy.de betrachten.

Ich für meinen Teil werde mich noch weiter in Joomla! einarbeiten und bald ein kurzes Tutorial zu Joomla! veröffentlichen. Ebenso folgen bald weitere Webseiten, die ich mit Joomla! bereits umsetze.

Webseiten mit Hilfe von Google-Blogs erstellen

Wie im letzten Post erwähnt, habe ich meine statischen Themenwebseiten in mehreren Blogs realisiert. Der Hauptgrund für dieses Vorhaben bestand für mich hauptsächlich in einer nicht mehr so starren Struktur, so dass es mir mit Hilfe der Blogs möglich ist, Beiträge zu verschiedenen Themen "einfach so" schreiben zu können, ohne mich dabei all zu sehr von einer umgebenden Struktur beinflussen lassen zu müssen.
In diesem Beitrag beschreibe ich, welche Erfahrungen ich mit den Google Blogs als Blogsystem gemacht habe.

Das Layout

Die Einstiegsseite von www.blogger.com zum Erstellen eines neuen Blogs bietet eine überschaubare Anzahl von Templates an, die jeweils in bis zu vier Variationen vorliegen. Einige sehen wirklich gut aus - man darf nur nicht vergessen, dass exakt dieses Layout sich bereits bei ein paar Millionen weiterer Nutzer größerer Beliebtheit erfreut.
Im Reiter "Layout" gibt es den Unterpunkt "Seitenelemente" - dahinter verbirgt sich die Möglichkeit, die Gadgets von Google zu verwalten und somit die Blog-Elemente kreativ anzuordnen. Da Google den Layout-Editor so gestaltet hat, dass er intuitiv bedienbar und idiotensicher ist, gibt es nur beschränkten Handlungsspielraum.

So ist es zwar möglich, mit Hilfe eines Gadgets ein Bild in den Rand des Blogs zu integrieren, allerdings kann dieses Gadget nur einmal im Layout-Manager verwendet werden. Die Gadgets selbst sind ganz ordentlich - Standards wie Tag-Clouds, Blog-Archiv und RSS-Feeds können ebenso verwendet werden, wie weitere Gadgets von Drittanbietern oder HTML-Code der wiederum alle Arten von Gadgets oder Widgets erlaubt.

Farbgebung und Schriftauswahl

Immerhin gibt es die Möglichkeit, im etwas sparsam gestalteten Einstellungsmenü ein paar der Farben und Schriftarten anzupassen. Ein Assistent hilft dabei, harmonierende Farben zu finden und eine Vorschau zeigt, wie das Endprodukt der Schöpfung aussehen wird.

Leider ist die Anpassung der Farbgebung auf die Farben und Schriften beschränkt, die im Template als Variablen vordefiniert worden sind. Möchte man z. B. die Hintergrundfarbe des Headers ändern und ist dieser nicht in den Einstellungen definiert, muss man über "Layout"-"HTML bearbeiten" den HTML-Code des Templates nach dem HEX-Code der Hintergrundfarbe durchforsten. Ist diese dann angepasst, gibt es die nächste böse Überaschung: die schönen runden Ecken bleiben in der der alten Farbe und fallen nun negativ auf. Der Grund ist, dass die Ecken als Bilder fest auf einem Server von Google herum liegen. Abhilfe ist nur möglich, wenn man die Bilder der Ecken herunter lädt, einfärbt und auf seinen eigenen Server hochlädt, damit man anschließend im HTML-Template auf die eigene URL zeigen lassen kann. Dann erst ist der Hintergrund des Headers wirklich geändert worden. Ziemlich viel Aufwand für eine so kleine Sache, finde ich.

Erstellen von Blogs

Doch wie sieht es mit dem Erstellen der Blogs aus? Es gibt unter "Posting"-> "Neuer Post" die Möglichkeit, den Text seiner Wahl in einen WYSIWYG-Editor einzugeben. Der Editor bietet eine Vorschau-Funktion sowie die Möglichkeit, den HTML-Text selber einzugeben.

Dieser Schritt ist auch oft nötig, da selbst so etwas wichtiges wie das Festlegen von Überschriften nicht im Editor vorgesehen ist - man darf aber immerhin zwischen fünf verschiedenen Schriftgrößen wählen. Schade, dass Google sich hier nicht an das Standardverfahren (Überschriften von H1 - H8) hält.
Immerhin bietet der WYSIWYG-Editor ein einfaches Werkzeug an, um Bilder in den Blog einzufügen. Ist das Bild eingefügt, kann man zwischen vier vordefinierten Bildgrößen wählen und bestimmen, ob das Bild linksbündig, rechtsbündig oder zentriert ausgerichtet werden soll. Das klappt ganz gut - allerdings darf man niemals vergessen, dass der Blog später eine ganz andere Breite als das Editorfenster aufweist. So wird das Bild, das eben noch elegant Text um sich hat fließen lassen, schnell zum Platzhirsch und entfremdet den Text.
Auch die Vorschaufunktion hilft da nicht viel weiter, da sie nicht alle Stile des Templates aufnimmt und somit immer eine etwas verzerrte Variante des späteren Erscheinungsbildes darstellt.
Ebenfalls extrem ungünstig ist das in meinen Augen nicht deterministische Verhalten der Bildverlinkung. Bilder werden automatisch mit einem Anker und HREF-Tag umschlossen. Dabei zeigt der Link entweder auf das Bild selbst oder auf eine Möglichkeit, den Blog anzupassen (wenn man sich angemeldet hat). Der Link auf das Bild ist unschön, da das Bild "nackt" im selben Fenster wie der Blog angezeigt wird und es keinen Button gibt, der den Benutzer wieder zurück zum Blog führt. Ein einfaches JAVA-Skript, welches das Bild als Popup oder schwebenden DIV in seiner vollen Pracht anzeigt, wäre nicht so schwer gewesen. Auf diese Weise muss ich nach jedem Blog-Post die Links aus den Bildern entfernen...

Diese Webseite

Im Rahmen dieser Webseite habe ich mir ein Template ausgesucht, die Farben angepasst, die bescheidenen Layoutfunktionen so gut es geht ausgereizt und anschließend eine HTML-Portalseite gestaltet, welche die Blog-Header als Wiedererkennungsmerkmal aufnimmt. Die Hintergrundfarben habe ich absichtlich etwas dezenter gewählt, damit die Farben der Blog-Header besser zur Geltung kommen. Das Design basiert vollständig auf CSS und DIV-Layern.