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

Überleben im Design- und Stil-Dschungel | MrWatson-GBS
Russell Watson
mrwatson-gbs
BA Hons
Medienwissenschaft
und Deutsch
Sussex University, UK
2
BSc Informatik
Freie Universität, Berlin
* The FileMaker Certiﬁed Developer logo is a trademark of FileMaker, Inc. in the United States and other countries.

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 Evolution
FileMaker 13 FileMaker 14
Klassisch Design Eigendesign(s)

Keine kleine Herausforderung!
7
advanter® 3
FileMaker 13
Klassisch Design
33 Dateien
~120 Funktionsmodule
> 1 800 Layouts
> 6 000 Layout Parts
157 919 Layout Objekte
unzählige Gruppierte Buttons
5 622 Bedingte Formatierungen
382 Layout Trigger
1 966 GotoLayout ScriptSteps

Riesenaufwand
9 Monate Entwicklung
198 Werktage Entwicklung
396 Manntage Entwicklung
2.376 Mannstunden Entwicklung
Layout Objekte 157.919 * 10 Klicks = > 1.59 Mio Klicks
8

advanter® / FileMaker Timeline

DEMO
10

11

12

13

14

15

16

Enduser Ziele
Look: 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?

Entwicklungsziele
1.Für Design & Stile:
•Aktualisierbar
• Wartbar
• Evolutionäre Entwicklung
2.Für Layoutinhalt:
• Fehlerfrei
• Fehlerfrei
• Fehlerfrei
20

Stand der Technologie
FM Release Layout + Design Funktionen
FMP 11
< 2012-04
ext. XML Theme Dateien (seit FMP 9)
KEINE Stile
FMP 12
2012-04
Neues Layout Surface + CSS
Design auswählen/wechseln -
States, gradients + image slicing
FM 13
2013-12
Custom Designs + Stile
Popovers + Sliders + dynam. Reiternamen
shadow, padding
FM14
2015-05
Top+Bottom Navigation
Button Bar, Buttons Icons
Object component styles
FM 15
2016-05
Concealed edit box
Portal in-line progress bar
21

Stil pur

oder

mit Formatierung gemischt?
22

80/20 Prinzip (PARETO’S LAW)
23
=> GEMISCHT !!
d.h.
80% der Layoutobjekte mit
20% der Stile abdecken

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

wird

l

a

n

g

s

a

m
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

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 Entwicklung
198 Werktage Entwicklung
396 Manntage Entwicklung
2.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

fmWorkMate

Layout 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 Client
FM Impostor Format Painter Stil Vererbung Infos
≤11
12 12
Kaputt!
(nur Formatierung)
13 13
Design
+
Stil
Kaputt!
(Formatierung +
nur Stilname)
Anzahl
Layouts
14 Design
Funktioniert (fast)!
(lokale Textfarbe)
Anzahl
Layouts
15 Design
Funktioniert doch!
(Layout Speichern)
Kaputt!
(wegen CSS Bug
“…;sansserif)”
Anzahl
Layouts
45

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

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

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

www.mrwatson.de

www.fmworkmate.com

FileMaker Pro Version Comparison (EN)

The SIX-GOLDEN-RULES OF THEME MANAGEMENT in multi-ﬁle solutions (MrW Blog)
54

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie FMK2016 - Russell Watson - Überleben im Design und Stile Dschungel

Ähnlich wie FMK2016 - Russell Watson - Überleben im Design und Stile Dschungel (20)

Mehr von Verein FM Konferenz

Mehr von Verein FM Konferenz (20)

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