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
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