FMK2016 - Russell Watson - Überleben im Design und Stile Dschungel

7. FileMaker Konferenz | Salzburg | 13.-15. Oktober 2016

www.filemaker-konferenz.com

"Surviving the Themes and Styles Jungle"

Ein Erlebnisbericht von

Russell Watson Günther Business Solutions GmbH

Überleben im Design- und Stil-Dschungel

http://www.filemaker-konferenz.com

https://www.youtube.com/watch?v=QE_jOCqKE3w

Überleben im Design- und Stil-Dschungel | MrWatson-GBS


Russell Watson

mrwatson-gbs

BA HonsMedienwissenschaft

und DeutschSussex University, UK

2

BSc InformatikFreie Universität, Berlin

* The FileMaker Certified Developer logo is a trademark of FileMaker, Inc. in the United States and other countries.

http://www.guenther-bs.de

































































http://www.fmworkmate.com



Was wir heute anschauen

1.Case Study: “Face Lift in Advanter 4.0”

• “Face-Lift” = Design + Stile + neue Layoutobjektmöglichkeiten + Layoutumbau + Prozeßoptimierung

2.Wie man ein Design erfolgreich bauen kann

• bzw. erfolgreich nicht kaputt macht!

3.QS: Wie man Layoutumbau optimieren & kontrollieren kann

4.Blick in die Zukunft & Diskussion

3



Design + Stile = Dschungel ?

GEFÄHRLICH

DUNKEL

ÜBERLEBEN

4



Case Study

5

Face-Lift



Face-lift

6

advanter® 3 advanter® 4 EvolutionFileMaker 13 FileMaker 14

Klassisch Design Eigendesign(s)



Keine kleine Herausforderung!

7

advanter® 3FileMaker 13

Klassisch Design33 Dateien

~120 Funktionsmodule> 1 800 Layouts

> 6 000 Layout Parts157 919 Layout Objekte

unzählige Gruppierte Buttons5 622 Bedingte Formatierungen

382 Layout Trigger1 966 GotoLayout ScriptSteps



Riesenaufwand

9 Monate Entwicklung198 Werktage Entwicklung396 Manntage Entwicklung2.376 Mannstunden Entwicklung

Layout Objekte 157.919 * 10 Klicks = > 1.59 Mio Klicks

8


7. FileMaker Konferenz | Salzburg | 13.-15. Oktober 2016 9

advanter® / FileMaker Timeline



DEMO

10



11



12



13



14



15



16



Enduser ZieleLook: Chic + Modern

UX: einfacher + konform

Performance: Optimiert/Schneller/Netzwerk

entlastet

Ergebnis: Awesome!

17










18



Fragen über Fragen

19

Wie

Stil Pur?Stil + Formatierung

gemischt?

Listenansicht / Maskenansicht /

Druckansicht?

Namenskonventionen?



Entwicklungsziele1.Für Design & Stile:

•Aktualisierbar • Wartbar

• Evolutionäre Entwicklung

2.Für Layoutinhalt:

• Fehlerfrei

• Fehlerfrei

• Fehlerfrei

20



Stand der TechnologieFM Release Layout+DesignFunktionen

FMP11<2012-04

ext.XMLThemeDateien(seitFMP9)KEINEStile

FMP122012-04

NeuesLayoutSurface+CSSDesignauswählen/wechseln-States,gradients+imageslicing

FM132013-12

CustomDesigns+StilePopovers+Sliders+dynam.Reiternamen

shadow,padding

FM142015-05

Top+BottomNavigationButtonBar,ButtonsIconsObjectcomponentstyles

FM152016-05

ConcealededitboxPortalin-lineprogressbar

21



Stil pur oder

mit Formatierung gemischt?

22



80/20 Prinzip (PARETO’S LAW)

23

=> GEMISCHT !!

d.h.80%derLayoutobjektemit20%derStileabdecken



Gemischt: Problem = Format Painter

FM13 überträgt Formatierung…

24

(Wissensstand 2015)

FM14 überträgt Stilname…

…aber Stilname nicht

…aber Stilformatierung auch

Rote Dreieck = LocalCSS :-(

FM15 Rote Dreieck IMMER NOCH :(



Pur: Problem = Zu viele StileEntwicklung

wird

langsam

25



Pur

Vorteile • Es funktioniert!

• Kontrollierbarkeit

26

(95%)

Nachteil

• Viele Stile

• Große Designdatenmenge (beim Starten)



Format Painter…

Beim Speichern des Layouts…

…LocalCSS WEG OPTIMIERT!

FM14: Noch Fehler in Farbe :-(

FM15: Es funktioniert doch*!

27

Wissensstand 2016…

* NACH dem Speichern!



Wie erstellt / aktualisiert man ein Design?

28



SIX-GOLDEN-RULES OF THEME MANAGEMENT

1.DEFINE THEMES AND STYLES IN *ONE FILE* ONLY

2.SYNCHRONIZE THEM TO OTHER FILES ONLY BY IMPORTING AND REPLACING THE

THEME

3.NEVER COPY AND PASTE THEMES

4.NEVER DEFINE THEMES AND STYLES BY HAND ANYWHERE ELSE IN YOUR SOLUTION

5.NEVER RENAME A THEME

6.BEWARE OF THEME AND STYLE IMPOSTORS AT ALL TIMES!

BONUS (UNSPOKEN) RULE: DON’T USE THE FORMAT PAINTER! (KAPUTT)

29

http://www.freewebs.com/russellwatson/apps/blog/show/42387857-the-six-golden-rules-of-theme-management-in-multi-file-solutions



Achtung falsche Identität (“Impostor”)!

30



Designs Kopieren + Einfügen

31

NIEMALS!



Designs Umbenennen

32

NIEMALS!



Stile umbenennen

33

NIEMALS!



Stilnamen eindeutig vergeben!

34

IMMER!



Importieren/Aktualisieren≠

Zusammenfügen

35

MyTheme



Stile in Slave-Datei ändern

36

NIEMALS!



Stile ändern ohne im Design zu speichern

37

NIEMALS!



usw.

38










39



QS - Gedanken• Wie minimiert man Fehler?

• Umsetzung - Fehlerrate

• Testen / Beweis

• "Prove you are right"

• Layout analysieren wie nie zuvor.

• Sonderanalyse für Buttons + ScriptParameter + Buttonoption

• QS-Kontrollen

• Gibt es Fehler im Layout?

• Wurden Buttons / Scriptaufrufe korrekt umgesetzt?

• Haben alle Objekte einen Stil?

• Entspricht das Layout dem Firmen 'Style-Guide'?

40



Riesenaufwand => VIELE Fehler !!!

9 Monate Entwicklung198 Werktage Entwicklung396 Manntage Entwicklung2.376 Mannstunden Entwicklung

Layout Objekte 157.919 * 10 Klicks = > 1.59 Mio Klicks

=> WIE HABEN WIR DIE FEHLERANZAHL MINIMIERT?

1. unzählige Layoutkontrollen und Prüfungen• Cross Check Button Analyse

2. täglich fmWorkMate zur Qualitätssicherung genutzt

41



fmWorkMateLayout Analysis

DEMO

42










43



Nächstes Design - Nächstes “Gotcha”

44

Wie funktioniert Vererbung?

Was passiert, wenn ich die Default

Stil ändere?Welche andere

Stile ändern sich?

“NUR erste Generationen

(d.h. direkt aus Default generierte Stile)”,

oder?

“Nein, ein Stil weisst nicht woher es stammt. Es hängt nur vom

Inhalt ab,oder?



Entwicklungsstand von FMP ClientFM Impostor FormatPainter StilVererbung Infos

≤11

12 12Kaputt!

(nurFormatierung)

13 13Design

+Stil

Kaputt!(Formatierung+nurStilname)

AnzahlLayouts

14 DesignFunktioniert(fast)!(lokaleTextfarbe)

AnzahlLayouts

15 DesignFunktioniertdoch!(LayoutSpeichern)

Kaputt!(wegenCSSBug“…;sansserif)”

AnzahlLayouts

45


7. FileMaker Konferenz | Salzburg | 13.-15. Oktober 2016 46



Danke!

47



Vielen Dank unseren Sponsoren

48

Danke für das Bewerten dieses Vortrages



Discussion

49



Referenzinfos

50



Design links

•FILEMAKER THEMES | DESIGN PALETTE - chiyofm

•Designing Layouts Using Themes & Styles - designingfilemaker.com - 2014-08 fm13

•Parrots Law-or-the-80-20-principle http://www.hackingthematrix.com/paretos-law-or-the-80-20-principle/

51

http://www.chiyofm.com/blog.html#demo-filemaker-themes-design-palette

http://www.designingfilemaker.com/2014/08/08/designing-layouts-using-themes-styles/



FileMaker Issues and Ideas

•STYLE IMPOSTOR - Appearance is reset when theme imported/overwritten (fm13)

•Theme + Style update: Style with same name import bugs (fm???)

•THEME IMPOSTOR: Renaming a theme changes the internalName and is no longer updatable (fm15)

•Format Painter must copy both style name AND extra formatting (fm13)

•Format Painter adds local color format where it is not needed (fm14) - (See Note in Post)

•Format Painter must optimize the LocalCSS immediately Idea (fm15)

•Solution with many styles slows down to the point of unresponsiveness

52

https://community.filemaker.com/message/251570#251570

https://community.filemaker.com/thread/152863




https://community.filemaker.com/ideas/1687




FileMaker Ideas• Improve UX of Layouting with Themes and Styles

•THEME + Style Impostors

•STYLE IMPOSTOR - Appearance is reset when theme imported/overwritten (fm13)

•Theme + Style update: Style with same name import bugs (fm???)

•THEME IMPOSTOR: Renaming a theme changes the internalName and is no longer updatable (fm15)

•Format Painter

• Format Painter must copy both style name AND extra formatting (fm13)

•Format Painter adds local color format where it is not needed (fm14) - (See Note in Post)

• Format Painter must optimize the LocalCSS immediately Idea (fm15)

•Solution with many styles slows down to the point of unresponsiveness

53











Links

www.guenther-bs.dewww.mrwatson.dewww.fmworkmate.com

FileMaker Pro Version Comparison (EN)

The SIX-GOLDEN-RULES OF THEME MANAGEMENT in multi-file solutions (MrW Blog)

54


http://www.mrwatson.de

http://www.fmworkmate.com

http://www.filemaker.com/products/filemaker-pro/version-comparison.html

http://www.mrwatson.de/apps/blog/show/42387857-the-six-golden-rules-of-theme-management-in-multi-file-solutions



Credits

Turing Labyrinth by lylejk http://lylejk.deviantart.com/art/Turing-Labyrinth-194552139

55

http://lylejk.deviantart.com/art/Turing-Labyrinth-194552139



Designs• 6 Designs

• Advanter EL (Hauptlayouts = E, EL, A und L Layouts)

• Advanter Drucklayout Standard (Interne Druck = D Layouts)

• Advanter_iOS (iPad Layouts)

• Advanter Service (PTO Layouts)

• Advanter Servicelayout (Interne Layouts)

• Advanter Druck (kommend - Kundendruck)

56


FileMaker Konferenz 2016 Salzburg

Vielen Dank unseren Sponsoren

Ohne Sponsoring wäre diese Konferenz so nicht möglich!

FMK2016 - Russell Watson - Überleben im Design und Stile Dschungel

Presentations & Public Speaking

Transcript of FMK2016 - Russell Watson - Überleben im Design und Stile Dschungel