The World of Expression:Professionelle Design Tools für .netMichael KösterUser Experience SpecialistMicrosoft Corporation

Agenda

Darf ich vorstellen?Developer <> Designer WorkflowExpression: Professionelle Design Tools für .netDemo: Erstellen einer interaktiven Web-Applikation:1. Visuelles Erscheinungsbild & UI2. Arbeiten mit (Beispiel-)Daten3. Hinzufügen von Audio, Video, Karten, DeepZoom etc.4. Interaktion, Effekte, Finish

Darf ich vorstellen?

Ein BriefingMittwoch, 15:00 Uhr, „The Agency“, Meeting-

Raum

Kunde:„Exotic Vacations“ Reisen

Das Projekt: Für unseren neuen Winter-Katalog

planen wir einen Online-Katalog. Dort

möchten wir unsere neuen Reisen zu

exotischen Zielen vorstellen. Die Site

soll Besucher in eine

Urlaubsstimmung versetzen – sie

sollen zur Buchung inspiriert werden!

Wir haben Videos und Fotos der

Reiseziele – dieses Material soll auf

eindrucksvolle Art und Weise

präsentiert werden. Wir mögen neue

Technologien aber wir wollen so viele

Leute wie möglich erreichen!

Designer <> Developer Workflow

Designer & Entwickler: Sprechen unterschiedliche Sprachen

Designer “designen” Entwickler entwickeln Funktionen

Designer Entwickler

Designer & Entwickler: Sprechen dieselbe Sprache

XAML

eXtensible Application Markup Language

Das komplette User Interface steckt im XAML (Textformat, XML).XAML und Code laufen mit derselben Performance.XAML kann Code enthalten und wird zur Ausführung kompiliert.XAML ist leicht von Tools zu erstellen oder zu konsumieren, es ermöglicht problemlosen Datenaustausch zwischen Applikationen.Expression ist das Toolset von Microsoft zureinfachen Erstellung und Manipulation von XAML.

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New SolidColorBrush(Colors.LightBlue)b1.Width = New Length(100)

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = new Length(100);

<Button Width="100px">OK <Button.Background> LightBlue </Button.Background></Button>

Brainstorming!

Diese Applikation läuft auf Windows & Mac.Silverlight Webapplikation mit OOB Support.Die Bildschirmauflösung ist 1024x768 px.Die Applikation hat 800x600 px.Medientypen & Features:

Text & BilderAudio & VideoAnimationenBitmap EffekteInteraktive KarteDeepZoom

Die Tools

Expression Blend 3(WPF, Silverlight 3)

Visual Studio 2008 Professional

Adobe PhotoshopAdobe Illustrator

Erstellen einer interaktiven Web-Applikation

Demo

Weitere Informationen

Bezugsquellen für Entwicklerprodukte:http://www.microsoft.com/switzerland/msdn/de/howtobuy/source.mspx Informationen zu Expression-Produkten:

http://expression.microsoft.comhttp://www.microsoft.com/expression/

Informationen zu Silverlight:http://www.silverlight.net/getstarted/

Expression & Silverlight Starter-Kits:Introduction to Prototyping with SketchFlow (twelve video series)Creating a Breakout Game in Blend 3 (ten video series)

Herzlichen Dank unseren Sponsoren!Event-Partner:

Medienparter: