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.

Die eigene Webseite - Konzepte der Vergangenheit

Auch wenn man einige Kundenprojekte erstellt und anderen Menschen bei vielen Webseiten geholfen hat: Am schwierigsten ist die Konzeptionierung der eigenen Webseite. Es gibt so viele Ideen, die umgesetzt werden wollen, so viele Layouts, die ausprobiert werden wollen und so viele innovative Technologien, die ihren Weg in das Web finden sollen.

Ich wollte nie eine Webseite erstellen, die sich nur einem Thema widmet, sondern immer möglichst alle Interessengebiete repräsentiert wissen. Da diese sich stark voneinander abheben, stand immer die Idee einer Hauptseite im Raum, von welcher dann auf die einzelnen Themenseiten verwiesen wird. Diese konnten dann ihr eigenes Design finden und schafften einen Rahmen, um die Ideen zu kanalisieren.

Wie an dem blauen Screenshot der Startseite zu erkennen ist, gab es einfach zu viele Ideen mit zu vielen verschiedenen Designs - die Seite wirkt schrecklich überladen und unübersichtlich. Zudem wird der Benutzer mit der blauen Farbe förmlich erschlagen.

Im Bereich "Philosophie" wollte ich Schritt für Schritt philosophische Ideen und Konzepte von der Antike bis zur Moderne aufgreifen und erörtern. Dass ich mir durch die statische HTML-Navigation Möglichkeiten für eine spätere Erweiterung des Themenumfangs verbauen würde, habe ich zu spät bemerkt. Ideen, die nicht ins Schema passten, wurden verworfen oder in Unterseiten "versteckt".

Ähnliche Probleme bildeten sich bei der Gestaltung des Bereichs "Design" ab. Ich wollte mich "trauen", eine Webseite mit weißem Hintergrund zu gestalten, doch durch den Einsatz von zu vielen Stilmitteln im Hauptmenü und einer etwas unvorteilhaften Einteilung kam dieses Projekt schnell zum Erliegen. Einzig eine statisch erschaffene Galerie mit 3D-Bildern wurde tatsächlich umgesetzt.

Nachdem diese "Webseite" einige Jahre unverändert im Web verharrte, entdeckte ich kürzlich für mich das Mittel der Blogs, um Inhalte von einander zu trennen und doch einen gemeinsamen Nenner zu schaffen. Zudem haben Blogs den Vorteil, dass man Artikel über das schreiben kann, was einen derzeit beschäftigt - ohne sich an einer vorher definierten Struktur ausrichten zu müssen.

Aktuell besteht mein Plan in einer Ausweitung der Blogs um die restlichen Themen die mich interessieren - in der Hoffnung, dass Google in seinen Blogs zukünftig etwas mehr Freiheiten bzgl. der Gestaltung zulässt. Ich bin gespannt, wie es weiter geht.

Spätere Webseiten

Nachdem dann einige Jahre ins Land gewandert waren und HTML, JavaScript, CSS und die Methoden der objektorientierten dynamischen Programmierung keine Zauberworte mehr waren, erblickten neue Webseiten das Licht.

Die erste größere Webseite mit serverseitiger Ausführung habe ich im Rahmen meines ersten Praxisprojektes für die Firma Comp4U erstellt. Die Anforderung definierte sich in einer Webseite, deren Inhalte zu jeder Zeit vom Management geändert werden können ohne dass dabei versehentlich das Design zu Schaden kommt. Weiterhin sollte die Startseite gleichzeitig Wiedererkennungspotential besitzen und bei jedem Aufruf neue Inhalte dynamisch generieren. Die Inhaltsseiten sollten sich schnell aufbauen und bzgl. Struktur sowie Position in der Navigationsleiste leicht anpassen lassen.
Die Webseite habe ich als ASP.NET - Webseite mit der Sprache VB.NET im .NET-Framework v2.0 aufgesetzt und komplett so erstellt, dass jedes Element - von den Inhaltsseiten und Newsbereichen über die Bilder in Menüs bis hin zu den Attributen der Nachrichten und Werbeinhalte in dem von mir entwickelten, online zugänglichen Content Management System angepasst werden können.
Eine ziemlich umfassende Arbeit mit vielen Stolpersteinen und den Schwierigkeiten durch den überhaupt ersten Kontakt mit ASP.NET im eigentlichen Sinne - dennoch war es ein fantastisches Projekt. Das Design hat sich etwas geändert, da die Firmenfarben sich geändert haben, aber es schlägt noch das alte Herz in ihr...
http://www.comp4u.de

Ein ebenfalls interessanter Auftrag war das ReDesign einer Webseite für eine Gaststätte. Die vorherige Webseite wurde mit sehr rudimentären Mitteln erstellt und bestandhauptsächlich aus zwei Frames, deren Inhalt den Kontrastfarben grellgrün und hellrot erlegen war.
Da die Farben zum Image des Kunden gehören und ebenfalls auf Visitenkarten gedruckt wurden, musste eine elegante Lösung gefunden werden. Diese bestand in der Kreation von einem freundlichen Gelb, welches sich als Kontur um die roten Schriften legt und somit deutlich augenfreundlicher erscheint. Die Buttons wurden selbst erstellt und nehmen den verspielten Stil des Logos auf. Ein Button stellt sogar das Gesicht des Kochs und Leiters des Restaurants dar.
Als besonderes Feature bietet diese Webseite eine aktive Seite, die der Besitzer des Restaurants (welches übrigens wunderbar leckere und urige Gerichte anbietet) jederzeit mit einem von mir entwickelten Tool ändern kann. So können problemlos Videos von YouTube, ein Spruch des Tages, ein Bild der Woche sowie eine ganze Flash-Galerie angepasst und ausgetauscht werden.
http://schoene-aussicht-stettbach.de

Die ersten Webseiten

Nachdem man sich in zahllosen HTML-Versuchen und den ersten Kämpfen mit CSS einen ersten Erfahrungsschatz angeeignet hat, dauert es meist nicht lange, bis die erste Webseite für jemanden erstellt werden soll. Oft werden dabei Erfahrungen gesammelt, die den wackeren Webmaster glauben lassen, er habe nun zum ersten Mal eine Webseite erstellt, da plötzlich der "Faktor Kunde" eine große Rolle im Entwicklungsprozess spielt.

Die erste Webseite, die eine präsentable Form angenommen hat, wurde für die Malawi-Hilfsorganisation GEAMOC e.V. erstellt. Ziel der Webseite ist die Vorstellung der Tätigkeiten, die Erklärung der Vorzüge einer Mitgliedschaft oder die Verdeutlichung der Freuden einer Patenschaft für ein Waisenkind.
Da abzusehen war, dass die Webseite viele Inhaltsseiten erhalten würde, nachdem das Design erstellt war, habe ich mit Hilfe von Dreamweaver ein Template erstellt. Da für die Webseite weder ein aktiver Server vorhanden war, noch ich damit (damals) etwas hätte anfangen können, hat das mit HTML und CSS erstellte Template bis heute gute Dienste geleistet. Das Design orientiert sich an den lehmigen und staubigen Straßen von Malawi, die das Vorankommen mit Hilfe von herkömmlichen Automobilen nahezu unmöglich machen.
http://www.geamoc.de

Bald darauf folgte eine Webseite für das Floristikgeschäft Blumen Tiele. Ursprünglich war der Webauftritt nur in Form einer etwas größeren Visitenkarte gedacht, doch schon bald erwies sich die Zusammenarbeit als so erfolgreich, dass das gesamte Produktportfolio in die Webseite aufgenommen wurde. Auch hier wurde mit einfachen HTML- und CSS-Gestaltungsmitteln dem Anspruch, eine "frische" Webseite zu erhalten, versucht gerecht zu werden. Ein Löwenanteil der Arbeit bestand in der optischen Aufwertung der vielen Digitalfotos, welche für das Produktportfolio angefertigt worden waren.

http://www.blumentiele.de