Diese Reihe von Blogartikeln besch\u00e4ftigt sich mit der Nutzung von GUI-Entwicklungs-Tools durch Designer und Entwickler, wobei der Fokus insbesondere auf Microsoft Expression Blend und Adobe Flex Builder gelegt wird.<\/p>\n
In diesem ersten Teil werde ich die Kooperation zwischen Designern und Entwicklern w\u00e4hrend der GUI Gestaltung n\u00e4her betrachten und einige Probleme beschreiben, die bei deren Zusammenarbeit auftreten k\u00f6nnen. Vor diesem Hintergrund werde ich erl\u00e4utern, wie GUI Design Tools den gesamten Design- und Entwicklungsprozess verbessern k\u00f6nnen.
\n<\/p>\n
In den folgenden Teilen, werde ich einige technische Aspekte von User Interface Design und Entwicklung n\u00e4her beleuchten. Der zweite Artikel wird sich mit den Unterschieden zwischen vektor- und pixelbasierten User Interfaces besch\u00e4ftigen und das Konzept skalierbarer Bitmap-Grafiken vorstellen. Der dritte und letzte Artikel wird aufzeigen, wie die zwei GUI-Entwicklungs-Tools das Konzept umsetzen und ein Fazit bez\u00fcglich der jeweiligen Vorz\u00fcge und Beschr\u00e4nkungen ziehen. <\/p>\n
Bei Centigrade ist es an der Tagesordnung: Designer und Entwickler arbeiten zusammen, um ein gemeinsames Ziel zu erreichen: \u00e4sthetische und ausgereifte User Interfaces kreieren. Aber nicht alle Projekte involvieren Design und Entwicklung zu gleichen Anteilen: oft w\u00fcnschen Kunden ein neues Erscheinungsbild ihrer Anwendung ohne dass der Source Code ber\u00fchrt werden soll oder sie ziehen es vor, die Programmierung selbst zu \u00fcbernehmen.<\/p>\n
Besonders in letzterem Fall findet die Kommunikation zwischen den Entwicklern des Kunden und den User Interface Designern von Centigrade \u00fcber Firmengrenzen hinweg statt: Centigrade stellt reine grafische \u201eBausteine\u201c (auch als \u201eAssets\u201c bezeichnet) zur Verf\u00fcgung, die durch die Entwickler des Kunden zusammengesetzt werden, um das letztendliche User Interface zu erstellen. Um Unklarheiten zu vermeiden, f\u00fcgen wir eine Art Konstruktionsmanual hinzu, das erkl\u00e4rt, wie diese Assets zusammengef\u00fcgt werden. In der Regel enth\u00e4lt es Informationen \u00fcber Farben, Schriftarten und \u2013gr\u00f6\u00dfen, sowie Abst\u00e4nde und Positionen von Grafikelementen.<\/p>\n
All diese wesentlichen Fakten m\u00fcssen gesammelt und den Entwicklern klar kommuniziert werden. Die Erfahrung zeigt, dass es oft eine m\u00fchsame Arbeit ist, jede einzelne m\u00f6gliche Frage vorherzusehen, die bei der Implementierung eines Designs aufkommen k\u00f6nnte. Diese Arbeit muss trotzdem sehr sorgf\u00e4ltig ausgef\u00fchrt werden, um die Gefahr von konzeptuellen L\u00fccken zu umgehen, welche die Integrit\u00e4t des intendierten Designs gef\u00e4hrden, z.B. wenn wichtige visuelle Details im Dokument nicht korrekt definiert sind.<\/p>\n
Manchmal k\u00f6nnen aber selbst bei einem sorgf\u00e4ltig erstellten Dokument Interpretationsfehler der Entwickler zu falschen Implementierungen f\u00fchren. Besonders f\u00fcr Entwickler, die wenig bis keine Erfahrung mit GUI-Entwicklung haben, k\u00f6nnen das Interpretieren und die korrekte Umsetzung eines Spezifikationsdokumentes ohne zus\u00e4tzliche Unterst\u00fctzung eine gro\u00dfe Herausforderung bedeuten.<\/p>\n
Aber selbst bei erfahrenen Entwicklern, die gute Arbeit bei der Implementierung eines Spezifikationsdokumentes leisten, k\u00f6nnen Schwierigkeiten auftauchen, und zwar wenn verschiedene Entwickler an unterschiedlichen GUI-Elementen arbeiten. Diese Art der Arbeitsverteilung beinhaltet das Risiko, dass unterschiedliche User Interface Komponenten genutzt werden, von denen jede f\u00fcr sich gut gemacht ist, die aber im Gesamtbild nicht zusammenpassen. Um dies zu vermeiden, muss jeder Entwickler exakt dieselbe Herangehensweise in der Umsetzung der Visionen des Designers verfolgen; ansonsten ist das Ergebnis ein inkoh\u00e4rentes GUI.<\/p>\n
Die wichtige Frage ist also folgende: Wie ist es m\u00f6glich, eine fl\u00fcssige und effiziente Staffel\u00fcbergabe vom Designer an den Entwickler zu vollziehen, ohne konzeptuelle L\u00fccken zu hinterlassen bzw. ohne die Gefahr von Fehlinterpretationen?<\/p>\n
Die einfache Antwort ist: Lasst Designer und Entwickler dieselbe (formale) Sprache sprechen. Moderne User Interface Design Tools kombinieren Design- und Entwicklungst\u00e4tigkeiten in einem Hand-in-Hand-Arbeitsablauf, der die Notwendigkeit zur informellen Kommunikation minimiert und der dabei hilft, konzeptuelle L\u00fccken zu reduzieren. Zus\u00e4tzliche Dokumentation dar\u00fcber, wie ein Icon genutzt oder wo ein Panel platziert werden soll wird nicht ben\u00f6tigt, da alle Informationen festgelegt sind, sobald das finale (visuell gestaltete) Interface vom Designer mit einem Design Tool erstellt wurde. Sowohl Microsoft Expression Blend als auch Adobe Flex Builder beschreiben das komplette Layout (z.B. Gr\u00f6\u00dfen, Offsets, Ausrichtungen) sowie den visuellen Stil der GUI-Elemente (z.B. Schriftarten, Farbwerte) \u00fcber XML. Der Designer erstellt entweder grafische Assets f\u00fcr GUI-Elemente mit externen Grafikdesign-Tools und importiert sie in das Projekt, oder er passt bestehende GUI-Elemente an und nutzt diese, um das User Interface zu erstellen \u2013 der entsprechende XML Code wird automatisch generiert. Expression Blend nutzt Microsofts Markup Sprache XAML, um visuelle Einstellungen und die Struktur von GUIs zu beschreiben, Flex Builder nutzt Adobes MXML. Entwickler arbeiten dann am anwendungsspezifischen Code in einer 3GL (third-generation language) und verbinden ihn mit dem rein beschreibenden XML-Code, um Interaktions- und Pr\u00e4sentationslogik zum User Interface hinzuzuf\u00fcgen, beispielsweise indem einem Button, der vorher vom Designer gestaltet wurde, eine Funktionalit\u00e4t zugewiesen wird (z.B. ein Formular abschicken) Auf diese Art ist eine nahtlose Zusammenarbeit m\u00f6glich ohne dass ein Spezifikationsdokument erforderlich w\u00e4re, das alle Eigenschaften und Verhaltensweisen der GUI-Komponenten beschreibt \u2013 die XML-Beschreibung ist<\/em> die Spezifikation. Ein weiter Vorteil, der sich aus dieser Art der Zusammenarbeit ergibt, ist die Tatsache, dass beide Arbeiten \u2013 Entwicklung und Design \u2013 klar abgegrenzt sind, so dass jeder Beteiligte seine jeweiligen Kompetenzen voll aussch\u00f6pfen kann.<\/p>\n Nachdem die Designer-Entwickler-Zusammenarbeit umrissen wurde, lassen Sie uns einen n\u00e4heren Blick auf das technische Umfeld der Tools von Adobe und Microsoft Tools werfen. Die folgende Tabelle liefert einen \u00dcberblick \u00fcber die Technologien, die f\u00fcr Design und Entwicklung von Rich Internet Applications (RIAs) genutzt werden.<\/p>\n Alle auf dieser Website genannten Marken oder eingetragenen Marken sind Eigentum ihrer jeweiligen Inhaber und werden hier lediglich zu beschreibenden Zwecken verwendet.<\/span><\/p>\nTechnische RIA Umgebungen von Adobe und Microsoft auf einen Blick<\/h3>\n
\n\n
\n <\/td>\n Adobe<\/strong><\/span><\/td>\n Microsoft<\/span><\/strong><\/td>\n<\/tr>\n \n Runtime Client<\/span><\/strong><\/td>\n Flash Player<\/td>\n Silverlight<\/td>\n<\/tr>\n \n Core Development
\nFramework <\/strong><\/span><\/td>\nFlex<\/td>\n .NET<\/td>\n<\/tr>\n \n Runtime
\nEnvironment <\/strong><\/span><\/td>\nAIR \u2013 Adobe Integrated Runtime<\/td>\n CLR \u2013 Common Language Runtime<\/td>\n<\/tr>\n \n Declarative Markup
\nLanguage <\/span><\/strong><\/td>\nMXML<\/td>\n XAML<\/td>\n<\/tr>\n \n Graphical Framework <\/strong><\/span><\/td>\n Parts of Flex (graphical API)<\/td>\n WPF<\/td>\n<\/tr>\n \n GUI Design Tool\/
\nIDE <\/strong><\/span><\/td>\nFlex Builder and Flash<\/td>\n Expression Blend<\/td>\n<\/tr>\n \n Graphic Design
\nTools <\/strong><\/span><\/td>\nPhotoshop and Illustrator<\/td>\n Expression Design<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n