Kostenlose Vorlagen für Expression Web 2 -- Hier herunter laden.

Testen Sie Ihre Webseite in verschiedenen Browsern gleichzeitig! Internet Explorer, Firefox, Chrome, Safari für Mac - Jetzt Super Preview Testen!

Kostenloses Probekapitel des Buches „User-Interface-Design mit Microsoft Expression Blend 2“ von Daniel Greitens - Das deutsche Silverlight- & Expression-Studio-Team-Blog - Site Home - MSDN Blogs

Kostenloses Probekapitel des Buches „User-Interface-Design mit Microsoft Expression Blend 2“ von Daniel Greitens

Kostenloses Probekapitel des Buches „User-Interface-Design mit Microsoft Expression Blend 2“ von Daniel Greitens

  • Comments 1

In Zusammenarbeit mit Microsoft Press können wir Ihnen heute ein kostenloses Probekapitel des Buches „User-Interface-Design mit Microsoft Expression Blend 2“ von Daniel Greitens anbieten. Dieses Buch richtet sich an Programmierer, die sich bei der Erstellung von Software die neuen Visualisierungsmöglichkeiten zunutze machen wollen. Außerdem richtet sich dieses Buch an Designer, die ihre Gestaltungsmöglichkeiten im UI-Bereich einsetzen möchten oder dies bereits tun.

Aus dem Inhalt:

  • Die Philosophie
  • Die neue Technologie: XAML, WPF und Silverlight
  • Grundlagen von Expression Blend
  • Grundlagen des User-Interface-Designs
  • Planung eines User Interface
  • Praxis - Teil 1: Analyse und Planung
  • Praxis - Teil 2: Grundaufbau des User Interface
  • Praxis – Teil 3: Animation, Sound und .NET
  • Praxis – Teil 4: Steuerelementdesign, Abschluss und Evaluierung

Die Begleit-DVD enthält unterstützende Materialien zu den Kapiteln und Testversionen der verwendeten Software. Sie enthält alle im Buch aufgeführten Quelltexte, sodass Sie sie direkt von dort verwenden können und nicht zwangsläufig abtippen müssen.

Die Software auf der DVD :

  • Testversion von Expression Blend 2
  • Testversion von Expression Design 2
  • Die kostenfreien Visual Studio 2008 Express Editions

Weiterhin liegt auf der DVD im Ordner eBook eine PDF-Version des gesamten Buches.

In diesem Kapitel wird zunächst der Begriff „UI-Design“ erklärt, danach werden verschiedene User Interface Konzepte vorgestellt und deren Umsetzung in den verschiedenen Abschnitten des Computerzeitalters. Der Hauptteil des Kapitels Beschäftigt sich mit den Möglichkeiten alter und neuer Workflows zur Erstellung von User Interfaces und geht besonders auf das Zusammenspiel von Expression Design, Expression Blend und Visual Studio ein.

Das komplette Kapitel können Sie hier kostenlos herunter laden:User-Interface-Design mit Microsoft Expression Blend 2

clip_image002

Weitere Informationen zu diesem Buch erhalten Sie bei Microsoft Press.

   

Auszug aus dem Kapitel 1: Die Philosophie

In diesem Kapitel:

  • Was ist UI-Design?
  • Bisherige Designmöglichkeiten
  • Neue Möglichkeiten mit WPF und Silverlight
  • Fazit: Die neue Welt für UI-Design

Neue Möglichkeiten mit WPF und Silverlight

Die Windows Presentation Foundation (WPF) ermöglicht einen medienbruchfreien Arbeitsablauf vom Prototyping bis zur Realisierung. Das neue Dateiformat namens XAML stellt die zentrale Neuerung dar. Es kann nicht nur Design, sondern auch Logik, Interaktion, Animation und sogar 3D abbilden.

clip_image003

Die neuen Funktionen

Das mit WPF eingeführte neue Dateiformat XAML beschreibt in menschlich lesbarer Art eine unglaubliche Fülle an visuellen und interaktiven Elementen. Details zu XAML erfahren Sie in Kapitel 2.

Neben den klassischen Steuerelementen wie dem Button, der Listbox, der Checkbox, stehen auch zahlreiche Layoutpanels-Steuerelemente zur Positionierung von Elementen- zur Verfügung: ein Grid zur Tabellarischen Anordnung, ein StackPanel zur Platzierung von Elementen unter- oder nebeneinander, ein WrapPanel, welches so viele Elemente wie möglich in einer Reihe darstellt und anschließen in der nächsten Zeile fortführt, und und und …

Die Steuerelemente selbst sind vollständig im Design anpassbar. Und das ohne Zeile .NET-Code programmieren zu müssen. Es lassen sich wiederverwendbare Vorlagen für Steuerelemente definieren und diese per Drag&Drop auf andere Elemente anwenden.

„XAML und .Net-Code stellen zwei verschiedene Sichten auf die Visualisierung einer .NET-Anwendung dar. Somit ist mit .NET-Code auch alles abbildbar was auch mit XAML abbildbar ist. Allerdings ist – der ein oder andere mag es anders erwarten – XAML-Code in der Ausführung schneller, da er direkt binär abgelegt wird.“

Jedes Element kann beliebig animiert werden, seine Eigenschaften wie Farbe, Größe, Position usw. können auf einer Zeitachse intuitiv verändert werden. Auch das Auslösen von Animationen kann in WPF Anwendungen ohne Programmierung konfiguriert werden.

3D-Objekte können samt Kamera, Licht und Texturen dargestellt und animiert werden. Für die Erstellung von 3D-Objekten bieten fast alle Hersteller von 3D-Software mittlerweile Plug-Ins an (Expression Blender, Maya etc.), die einen XAML-Export ermöglichen. Speziell für das XAML-3D-Modelling hat die Firma Erain das Tool Zam 3D auf den Markt gebracht.

Trennung von Code und Layout auf technischer Ebene

Das neue Dateiformat XAML beschreibt nur das User Interface einer gesamten Software. Die Logik bleibt nach wie vor Aufgabe von Klassen, die per .NET-Code den weiterführenden Ablauf einer Anwendung steuern, Eingabevalidierung durchführen, Datenbank- und Dateizugriff implementieren.

Im Ansatz ist die Herangehensweise der Trennung von Code und Layout auch in der Vorgängertechnologie von WPF bei Windows Forms-Anwendungen zu beobachten: Ein Window bestand schon dort aus einer Codedatei, welche die Logik beinhaltete, und einer hinterlegten Designdatei, welche die Anweisungen für die Platzierung von Elementen beinhaltete. Diese Datei wurde bei der Platzierung und dem Verschieben von Elementen in der Design-Ansicht von Visual Studio automatisch generiert. Sie war allerdings selbst in .NET geschrieben und das manuelle Bearbeiten wurde nur rudimentär unterstützt.

Noch weiter ging die Trennung von Code und Layout aber schon seit einigen Jahren bei Webanwendungen. Die auf Microsoft-Technologie basierten. Denn dort gab es seit Einführung von ASP.NET im Jahre 2003 eine Page und eine dahinter liegende Code-Behind-Datei mit der programmierten Logik. Diese Trennung von Code und Layout konnte bereits sehr gut im Zusammenspiel von Webdesignern und Programmierern genutzt werden,

Mit WPF und Silverlight kann diese umfassende Trennung von Code und Layout auch bei Client- und Silverlight-Anwendungen eingesetzt werden.

Trennung von Code und Layout auf Designebene

Die Technologie WPF ist bereits seit einiger Zeit verfügbar, seit der Einführung von Windows Vista, um genau zu sein. Richtig interessant werden die neuen Möglichkeiten allerdings erst jetzt durch die Verfügbarkeit von Expression Studio. Denn die Tools dieser SoftwareSuite fokussieren jeden Bereich der User-Interface-Gestaltung und trennen nicht nur Code und Layout, sondern sogar Prototyping, Design und Programmierung.

Diese neue Produktserie von Microsoft besteht aus folgenden Applikationen:

  • Expression Web, ein hoch professioneller HTML-Editor
  • Expression Media, eine Medienverwaltungssoftware
  • Expression Design, ein Designwerkzeug mit diversen Import- und XAML-Exportschnittstellen.
  • Expression Blend, das Zentrale Werkzeug, um WPF-Anwendungen zu designen

„Auf der mitgelieferten DVD finden Sie folgende Programme: eine deutsche 30-Tage-Testversion von Expression Blend 2 im Ordner \Blend_Trial, eine deutsche 30-Tage-Testversion Expression Design 2 sowie alle Visual Studio Express Editions.“

Expression Web und Expression Media haben nur indirekt mit der neuen UI-Technologie zu tun. Im Kontext von WPF und Silverlight sind Expression Design, Expression Blend und Visual Studio die zum Einsatz kommenden Werkzeuge.

Expression Design

Expression Design ist ein Designwerkzeug, das Gestaltungsmöglichkeiten für Raster- und Vektormaterial kombiniert. Im Expression-Workflow ist Expression Design das Prototyping-Werkzeug, also das Tool, mit dem grafische Entwürfe angefertigt werden können, ohne dass es zu den zuvor beschriebenen Medienbrüchen kommt.

„Vektormaterial besteht im Gegensatz zu Rastermaterial aus Angaben, die grafische Elemente mathematisch beschreiben. Eine Vektorlinie besteht beispielsweise aus Angaben zu den Start- und End- Koordinaten, der Linienstärke, der Linienfarbe usw. Vorteil von Vektormaterial sind verlustfreie Skalierung und geringe Dateigrößen.“

Das Funktionsspektrum von Expression Design kommt dem von professionellen Designwerkzeugen sehr nahe: Ebenenanordnung, Maskierungsfunktionen, non-destruktive Effekte in Echtzeit (Live-Effects), sämtliche Mechanismen zur Pfadbearbeitung.

Besonders hervorzuheben sind die vielfältigen Importformate: Expression Design ist sogar in der Lage, Photoshop-Dateien zu interpretieren und sämtliche Ebenen zu übernehmen.

clip_image004

clip_image005

Ein Manko, welches den WPF-Workflow zurzeit noch stört, ist das Fehlen einer Importschnittstelle für XAML. Zwar lässt sich ein Design problemlos in das XAML-Format exportieren, ein Re-Import ist aber nicht möglich.

Umso besser ist allerdings der XAML-Export. Das aus Photoshop und Co. Bekannte „Slicen“, also das Zuschneiden von Material für den Export, geschieht auf Knopfdruck: Expression Design erkennt alle einzelnen Elemente und kann sie auf Wunsch direkt in einzelne Dateien exportieren.

Expression Blend

Expression Blend hieß zur Entwicklungszeit noch interaktive Designer. Und genau das ist Expression Blend auch: ein Werkzeug, um User Interfaces von WPF- und Silverlight-Anwendungen zu gestalten.

Im Gegensatz zu Expression Design arbeitet Expression Blend bereits mit sogenannten Steuerelementen. Die Layoutpanels bringen Funktionalitäten mit, die es ermöglichen, Objekte flexibel zu positionieren. Für die Interaktion mit dem Benutzer stehen eine Fülle an interaktiven Elementen wie Textbox, der Button und die Checkbox zur Verfügung. Hinzu kommen Steuerelemente für die neue Funktionsvielfalt: 3D-Viewports, Mediensteuerelemente zum Abspielen aller gängigen Audio- und Videoformate. Die Bearbeitung dieser komplexen Funktionalitäten ermöglicht Expression Blend intuitiv und visuell.

clip_image006

Expression Blend ist ein visueller Editor, der allerdings im Hintergrund bereits das neue Dateiformat XAML produziert. Aber nicht nur das: Expression Blend arbeitet mit dem gleichen Projektformat wie Visual Studio, der Entwicklungsumgebung von Microsoft, mit welcher „richtige“ Software entwickelt wird. Wenn Sie in Expression Blend ein neues Projekt anlegen, so erstellt Expression Blend sämtliche zu Ausführung einer Software benötigten Dateien, und zwar genau die, die auch Visual Studio beim Erstellen eines neuen Projekts erzeugt.

Da Expression Blend und Visual Studio mit den gleichen Projektdaten arbeiten, kann ein WPF-Projekt also genauso mit Expression Blend wie mit Visual Studio geöffnet und bearbeitet werden. Expression Blend ist dabei für das Oberflächendesign – die Generierung von XAML – zuständig, Visual Studio für die Programmierung des .NET-Codes dahinter.

Somit hat der UI-Designer sein eigenes Werkzeug, um die die Oberfläche zu gestalten. Er muss sich nicht mit dem gesamten Ballast einer Entwicklungsumgebung auseinandersetzen. Auch muss er nicht von einem Grafiker destruktiv exportierte Grafiken übernehmen und diese aufwendig in ein UI-Design umwandeln. Der Programmierer kann in seiner gewohnten Umgebung hinter das Design die Logik implementieren.

„Die Fähigkeit von XAML und Expression Blend, auch mit Animationen und Auslösern umgehen zu können, ermöglicht Ihnen sogar, ohne Programmierung eine vollständige Software zu erstellen, also weitaus mehr also „nur“ ein User Interface zu gestalten. Sie können beispielsweise problemlos eine animierte Diashow auf Basis einer Expression Media-Bilddatenbank erstellen und wenn gewünscht auch noch mit 3D-Effekten versehen. Und zwar ohne eine Zeile .NET-Code schreiben zu müssen. Wie dies praktisch aussehen kann, erfahren Sie in den Kapiteln 6 bis 9, in welchen ein vollständiges interaktives User Interface gestaltet wird, und zwar nahezu ohne .NET-Code. „

Visual Studio

Visual Studio ist kein direkter Bestandteil des Expression Produktreihe. Es ist aber das Werkzeug, mit welchem seit jeher auf Microsoft Technologie basierende Software entwickelt wird. Und dies ist nach wie vor so vorgesehen. Visual Studio ist nun um WPF-Funktionalität aufgerüstet worden: Es kann XAML darstellen und auch visuell bearbeiten, wenn auch erheblich eingeschränkter als Expression Blend.

clip_image007

XAML-Bearbeitungsmöglichkeiten in Expression Blend und Visual Studio

Expression Blend ermöglicht das visuelle Bearbeiten. Pfade können mit der Maus gezogen werden, über Ebenenansichten sortiert werden, alle Eigenschaften in einer Eigenschaftsleiste bearbeitet werden, Animationen über die Timeline-Ansicht konfiguriert werden. Das alles kann Visual Studio nicht.

Sie können natürlich alles, was Sie in Expression Blend mit dessen Hilfe an XAML-Quelltext generieren, auch in Visual Studio programmieren – aber nicht visuell auf der Arbeitsfläche, sondern nur direkt über den Code. Aber genau da kann Visual Studio trumpfen, denn im XAML-Editor verfügt Visual Studio über IntelliSense. Das ist eine Funktion, welche Ihnen alle möglichen Vervollständigungen anzeigt, sobald Sie anfangen einzutippen.

clip_image009

Ein weiterer Vorteil von Visual Studio ist der integrierte Debugger. Ist ein XAML-Quelltext zwar syntaktisch korrekt, aber zur Laufzeit, also bei Ausführung des Programms, kommt es zu einem Fehler, werden Sie von Expression Blend den Standartfehlerdialog mit der undankbaren Meldung „Expression Blend funktioniert nicht mehr“ erhalten. Öffnen Sie das gleiche Projekt mit Visual Studio und Starten es mit F5, dann schreitet der Debugger von Visual Studio ein und wird Ihnen detaillierte Fehlerinformationen liefern.

„Wenn eine Anwendung aus Expression Blend heraus nicht ausführbar ist und Sie keine Fehlermeldung erhalten, sondern die Anwendung einfach abstürzt, öffnen Sie das Projekt mit Visual Studio und starten es aus Visual Studio heraus. Die debugging-Funktionalität von Visual Studio versorgt Sie bei unerwartetem Verhalten der Anwendung mit weiterführenden Informationen. Sie werden in der Praxis diesen Tipp brauchen!“

Der neue Workflow

Auf Basis von XAML und mit Expression Design als Prototyping Werkzeug, Expression Blend als UI-Designer und Visual Studio als Entwicklungsumgebung lässt sich ein völlig neuer, medienbruchfreier Workflow realisieren.

Das Prototyping kann in Expression Design geschehen. Das entstandene Material ist später durch den direkten, non-destruktiven XAML-Export verlustfrei weiterverwertbar. Der Designer kann sich beim Prototyping vollkommen auf die effektive Umsetzung seiner Vorstellungen konzentrieren. In dieser Phase spielt der komplexere Einsatz von Steuerelementen noch keine Rolle.

Die Elemente werden anschließend in das XAML-Format exportiert und in Expression Blend formiert. Layoutpanels sorgen für die gewünschte Positionierung, Steuerelemente und Animationen für das zu erzielende Verhalten.

Parallel bearbeiten die Programmierer das Projekt in ihrer gewohnten Entwicklungsumgebung und vervollständigen das Projekt mit der Programmatischen Logik. Die Designer und Programmierer können nun zusammen und Parallel am Projekt arbeiten.

clip_image011

Der beschriebene „neue Workflow“ stellt nur einen Arbeitsablauf der vielen Möglichkeiten dar. Wie Sie im Detail vorgehen, bleibt Ihnen überlassen. Liegt der Fokus beim Ihrem Projekt auf dem Design, so empfiehlt sich das Prototyping in Expression Design. Liegt der Schwerpunkt eher auf funktionalen Aspekten, so können Sie auch in Erwägung ziehen, das Prototyping direkt in Expression Blend vorzunehmen.

Silverlight & WPF: Online und offline auf gleicher Basis

XAML ist nicht nur für Clientanwendungen einsetzbar, sondern kann auch für Webanwendungen in Form einer Silverlight-Anwendung genutzt werden. Online- und Offline-Anwendungen werden somit auf der gleichen Basis erstellt. Silverlight ist als kleiner Bruder von WPF zu verstehen. Es handelt sich um eine neue Technologie, welche über ein kleines Plug-In eine Anwendung mit den neuen Visualisierungsmöglichkeiten im Browser ausführbar macht. Da dieses schnell zu installierende Plug-In mit 4 MB Dateigröße im Vergleich zu WPF ca. 10 % Volumen hat, ist Silverlight speziell auf den Einsatz im WEB konzipiert. Die Strategie ist, auf einer Codebasis Client- und Webanwendungen implementieren zu können.

Silverlight 2.0 bringt im Vergleich zu Silverlight 1.0 endlich auch eine große Vielfalt an Steuerelementen und Layoutpanels mit. Diese Vielfalt ist allerdings in einigen Elementen größer als von WPF selbst. So gibt es für Silverlight ein DataGrid- und ein Calendar-Control, welche nicht für WPF verfügbar sind.

Dies führt dazu, dass Silverlight aus jetziger Perspektive keine Teilmenge von WPF darstellt, sondern eine andere Menge. Der XAML-Quelltext einer Silverlight-Anwendung ist somit nicht in jedem Fall mit dem einer WPF-Anwendung kompatibel.

Strategisch betrachtet ist jedenfalls der Schritt zu einer Online- und Offline-Anwendung auf gleicher Codebasis nicht mehr weit.

Das komplette Kapitel können Sie hier kostenlos herunter laden:User-Interface-Design mit Microsoft Expression Blend 2

clip_image002[1]

Weitere Informationen zu diesem Buch erhalten Sie bei Microsoft Press.

Leave a Comment
  • Please add 3 and 2 and type the answer here:
  • Post