Sascha Wolter | wolter.biz

Designer-Developer-WorkflowMethoden zur Verbesserung der Zusammenarbeit von Gestaltern und Programmierern am Beispiel von Adobe Flex und Microsoft Silverlight.

WebTech, 18. November 2009

Über mich

Sascha Wolter ist Entwickler und Trainer für Rich Applications mit dem Schwerpunkt Flash/Flex Plattform und Silverlight. Bereits seit 1995 arbeitet er als freiberuflicher Autor, Berater und Software-Architekt. Sascha ist ebenfalls durch zahlreiche internationale Vorträge auf führenden Konferenzen bekannt. Seine Bücher und Artikel rund um Flash, Flex und Silverlight zählen zu den meistgelesenen Publikationen. Als Gründer der führenden deutschsprachigen Adobe User Group flashforum.de mit mehr als 100.000 Mitgliedern engagiert sich Sascha auch für die Belange der Anwender.

Veröffentlichungen Video Training Flash CS3 Video Training Flex 3 Grundlage Video Training Silverlight 2 Video Training ActionScript 3 Workshop

Sascha Wolter | wolter.biz 2

ZWEIEINHALB WELTENDesigner-Developer-Workflow

Sascha Wolter | wolter.biz

Zweieinhalb Welten: Verständnis!

Sascha Wolter | wolter.biz

„My Wife and My Mother-In-Law“ von William Ely Hill, 1915

Zweieinhalb Welten: Verständnis!

Sascha Wolter | wolter.biz

Quelle: http://mr6.cc/?p=2721

Schlechte Kommunikation: Designer-Developer-Workflow

=

Quelle: Microsoft

Zweieinhalb Welten: Rollen und Respekt

Project Manager

AccountManager

Creative Director

Art Director

EngeneeringManager

Software Architekt

PrincipalGraphicDesigner

Interaction Designer

Information Architect

UsabilityEngineer

Media Producer

GraphicDesigner

Content Writer

Content Editor

Marketing Manager

Front End Developer

Interactive Developer

Back End Developer

Sascha Wolter | wolter.bizQuelle: http://www.visitmix.com/labs/descry/awebsitenameddesire/

Zweieinhalb Welten: Kommunikation!

Sascha Wolter | wolter.biz

„Dallenbach Figure“ von Karl Dallenbach, 1952

Flurfunk:Wissen in der Welt!

Zweieinhalb Welten: Kommunikation!

Sascha Wolter | wolter.biz

„Deutsches Bild Puzzel.“, Anonym, 19. Jahrhundert

Zweieinhalb Welten: Coachender Mediator

Sascha Wolter | wolter.bizTerminator's new role: The Mediator (T-800 and Small Soldiers)

Zweieinhalb Welten: Kommunikation!

Sascha Wolter | wolter.biz

• Agile Software-Entwicklung/XP-Programming• Daily Stand-up Meetings und Sprints• Kreative Phasen versus Formale Phasen

Nomenklatur in allen Phase

Sascha Wolter | wolter.biz

Nomenklatur in allen Phase

Bezeichnungen

Bereits frühzeitig festlegen!

In allen Phasen konsistent halten!

Sascha Wolter | wolter.biz

Techniken und Werkzeuge

• Use-Case• Requirements• Wireframe• Komposition• Dope Sheet• Storyboard• Sitemap• Zustandsdiagramm (UML)• Flussdiagramm• Click-Dummy• Mock-up

Sascha Wolter | wolter.biz

Nomenklatur

• Baukasten definieren– Wiederverwendbare Steuerelemente:

http://silverlight.net/samples/sl3/toolkitcontrolsamples/run/– Gleichförmige Entwurfsmuster: http://quince.infragistics.com/

• Stift und Papier und/oderIllustrator und Photoshop (Komposition)

Sascha Wolter | wolter.biz

Prototyping

• Axure RP pro (vom Wireframezum Prototype)

• SketchFlow (Expression Blend)• Hinweise im Design per

Annotations

Sascha Wolter | wolter.biz

WORKFLOWDesigner-Developer-Workflow

Sascha Wolter | wolter.biz

Vermischung von Design und Code

Sascha Wolter | wolter.biz

Vermischung von Code und Design! Warum machen Leute das?

Vermischung von Design und Code

Sascha Wolter | wolter.biz

Trennung von Design und Code

Sascha Wolter | wolter.biz

Curtain Wall (Vorhangfassade)

Trennung von Design und Code: Styling

Sascha Wolter | wolter.biz

Andy Warhol Monroe Style

Trennung von Design und Code: Skinning

Skinning Kenntnis über die Komponente und deren Aufbau ist erforderlich Vorgegebene Elemente können per Skin ausgetauscht werden

Theme Sammlung von Styles und Skins

Sascha Wolter | wolter.biz

Skinning: Tipps

• Scale 9• Flex Component Kit for Flash• Flex Component Templates• Eigene Erweiterung (Flash)

– MXP (Flash Extension)– z. B. JavaScript API– z. B. Komponenten– z. B. Templates

• Degrafa: Declarative Graphics Framework– Für die deklarative Beschreibung

eines Skins!– http://www.degrafa.org/

Sascha Wolter | wolter.biz

Ich frag michwas ich

brauche um es in meineVorlage ….

Trennung von Design und Code: Templating

Ich brauch eineMini-Ansicht, Knopfdruck,

etc..

Ich hab deineMini-Ansicht,

Gedrückt-Zustand, etc..

Zusammen: Silverlight

Sascha Wolter | wolter.biz

XAMLeXtensible Application

Markup Language

.SLNSolution und Projekt

Zusammen: Flex/AIR

Sascha Wolter | wolter.biz

Visual Designer

3) Development

4) Design Optimierungen

Developer

(z. B. Flash Catalyst)Design Produktion

Gemeinsame Sprachen MXML (Magic eXtensible Markup Language) FXG (Flash XML graphics) XFL (XML Flash)

Gemeinsame Projektstrukturen FXP (Flex Builder Projekt)

Zusammen: Enterprise-Umgebung

• Gemeinsame Umgebung– Gemeinsame Sprachen– Gemeinsame Projektstrukturen– Roundtrip

• Tests– Unit-Tests– Designzeitdaten

• Buildprozesse– Nightly Build– Continuous Integration

Sascha Wolter | wolter.biz

Trennung: Mehrsprachigkeit

Mehrsprachigkeit im Design Beachten beim Layout Nutzen zur Konfiguration

Locale Zur Kompilier- und zur Laufzeit Property-Dateien, Resource-File

RessourceBundle in Flex <mx:Label text="@Resource(key='helloWorld', bundle='Application')" />

Ressource-File in Silverlight <Button x:Name="SaveBtn" Content="{Binding Path=saveBtnLabel,

Source={StaticResource Resource}, Mode=OneTime}“ /> Zahlreiche Datentypen möglich

getClassLogo=Embed("logo.png")Sorter=ClassReference("sorters.Urdu")

Sascha Wolter | wolter.biz

PRAXIS ENTWURFSMUSTERDesigner-Developer-Workflow

Sascha Wolter | wolter.biz

Code-Behind

Sascha Wolter | wolter.biz

Design

Code-Behind

Sascha Wolter | wolter.biz

Design-Beschreibung

Code-Behind

Sascha Wolter | wolter.biz

Code

Trennen und Verheiraten

• Entwurfsmuster– Code Behind– Model View Controller– Presentation Model– MVVM– usw.

• Bindungen– oneway, twoway

• Ereignisse– Bubbling– Weiterreichen an das Modell– …oder gleich Methodenaufrufe!

• Behaviors

Sascha Wolter | wolter.biz

View

Model

http://www.martinfowler.com/eaaDev/PresentationModel.html

Presentation Model und MVVM

Sascha Wolter | wolter.biz

Design-Beschreibung

Presentation Model und MVVM

Sascha Wolter | wolter.biz

Code

Presentation Model und MVVM

Sascha Wolter | wolter.biz

Andere Design-Beschreibung für gleichen Code

Mocken und Testen

Sascha Wolter | wolter.biz

Code für den Designer: Eine Schnittstelle reicht.

Mocken und Testen

Sascha Wolter | wolter.biz

Eine Schnittstelle erlaubt, nur so zu tun als ob (engl. to mock)

Mocken und Testen

Sascha Wolter | wolter.biz

Das UI lässt sich nur schwer testen. Leichter geht das beim Modell.

ZUSAMMENFASSUNGFRAGEN UND ANTWORTEN

Designer-Developer-Workflow

Sascha Wolter | wolter.biz

Sascha Wolter | wolter.biz

Danke für Ihre GeduldDesigner-Developer-Workflow

Demnächst in Köln

Sascha Wolter | wolter.biz

ffk10.flashforum.deffk10@flashforum.de

Literatur

Psychology of Everyday Things Don´t Make Me Think Designing Web Usability Designing Interfaces Video Training Flex 3 Grundlage Video Training Silverlight 2

Sascha Wolter | wolter.biz