FMK 2013, Tipps und Tricks FM Go, Robert Kaiser

FileMaker Konferenz2010

FileMaker Go, Tipps & Tricks für die
Gestaltung aus der Praxis
Ein Vortrag von Robert Kaiser

Robert Kaiser, www.karo.at
FileMaker Go, Tipps & Tricks für die Gestaltung aus der Praxis

FileMaker Konferenz 2013 Salzburg
www.ﬁlemaker-konferenz.com

Robert Kaiser – karo.at

karo productions
• individuelle Lösungen auf der Basis von FileMaker Pro/Go
• DTP-Workflow-Optimierung und Beratung
• Schulungen (Adobe InDesign, Photoshop, u.a.)
Robert Kaiser
• zertifizierter FileMaker Entwickler
• FBA Mitglied
• Autor für FileMaker Magazin
• Werbegrafiker seit 1993
• FileMaker Entwicklung seit 1996



Agenda
• Logos und Graﬁken für hochauﬂösende
und normale Displays optimieren
• FileMaker Go, warum ist das so?
• Hilfsprogramme und Apps
• Tipps für das Interface



Logos und Grafiken für
hochauflösende und
normale Displays optimieren



Weshalb sollte das beachtet werden?
Die Art, wie Grafiken erstellt werden, beeinflusst das Aussehen in
FileMaker auf folgenden Geräten:
• FileMaker Go (iPad/iPhone mit Retina Display)
• FileMaker Pro (MacBook Pro mit Retina Display)
• FileMaker Pro/Go auf alle anderen Geräten,
sobald hochauflösende Grafiken verwendet werden



Grundsätzlich gilt für alle
FileMaker Objekte
Schriften, Linien, Rechtecke etc. sind Vektorelemente und werden
für die aktuelle Auﬂösung gerendert.
Sie werden aber nur scharf dargestellt, wenn
alle Werte ganzzahlige Punktwerte sind:
• bei Objektpositionen
• bei Objekthöhe, Objektbreite
• bei Bereichhöhe, Layoutrand
Nicht vergessen:
Kontrolle der Werte nach den Werkzeugen
"mittig ausrichten" bzw.
"verteilen von Objekten"



Platzierte Bilder
Nachfolgende Empfehlungen betreffen alle Bilder:
• Bilder, die direkt in ein Layout eingefügt werden
• Bilder in Medienfelder
• Bilder, die über den Inspektor (Darstellung/Graﬁk) als Füllung
eingefügt werden



JPEG, Bildformat für Fotos
Eigenschaften:
• Kompression ist für Fotos optimal
• bei starker Bildkompression werden Artefakte (Blöck und Stufen)
sichtbar
• je schärfer ein Bild sein soll, umso geringer muss Kompression
sein -> Dateigröße wird bei Graﬁken größer im Vergleich zu
anderen Formaten



JPEG, Bildformat für Fotos
Optimierung für FileMaker:
• Die Auﬂösung (Pixelanzahl) sollte mindestens doppelt so hoch sein
wie bei dem Medienfeld/Bild in FileMaker
• Inspektor: Datenformatierung auf
„Bild passend verkleinern“ stellen
• Randeinstellung beachten
• Design (Theme) beachten
• bei großen Bildern oder aus
Performancegründen (z.B. Zugriff
über WAN) Thumbnails berechnen
(doppelte Größe des FileMaker Objektes)



PNG, Bildformat für Grafiken
Eigenschaften:
• Kompression ist für Graﬁken mit Linien und Flächen optimal
• Das PNG-Format unterstützt Alpha-Kanal (Transparenz)



PNG, Bildformat für Grafiken
Optimierung für FileMaker:
• Auﬂösung (Pixelanzahl) muss exakt doppelt so hoch sein
wie das Medienfeld/Bild in FileMaker
• Inspektor: Datenformatierung "auf Bild passend verkleinern“ /
„Proportionen beibehalten" stellen
• Randeinstellung beachten
• Design (Theme) beachten
Beispiel:
Bilddatei mit 120 Pixel x 50 Pixel wird zu:
• 60pt x 25pt FileMaker Objekt mit 0pt Rand oder
• 64pt x 29pt FileMaker Objekt mit 2pt Rand



Was ist sonst noch zu beachten?
Auf einem nicht hochauﬂösenden Display werden beim Rendern
jeweils vier Pixel (2x2) zu einem darzustellenden Pixel
zusammengefasst.
Beﬁndet sich eine scharfe Kante auf einer ungeraden Pixelposition,
so wird daraus eine unscharfe Kante gerendert.
Kontrollmöglichkeit in FileMaker
• Layout auf 200% vergrößern
(bzw. 50% verkleinern beim Entwickeln auf Retina-Displays)



Beispiel 1 zur Illustration
Ist diese Graﬁk ok?
Antwort:
Nein, die Kanten sind auf
ungerade Pixelpositionen
positioniert.



Antwort:
Nein, die Kanten sind zwar
auf geraden Pixelpositionen,
allerdings ist der
Slice-Rahmen nicht
korrekt gesetzt.



Antwort:
Ja, die Kanten und der
Slice-Rahmen beﬁnden
sich auf geraden
Pixelpositionen.



Kontrollmöglichkeit
Kontrollmöglichkeit bei der Erstellung
• je nach verwendeten Graﬁkprogramm eine weiteres Fenster in
einer alternativen Zoomstufe (50%) zur direkten Kontrolle öffnen
• Pixelposition von Kanten überprüfen (nur auf gerade Pixelwerte)
• auch Höhe und Breite des Bildes,
Positionen und Größen von Slices müssen gerade Pixelwerte sein
• mit den richtigen Rastereinstellungen arbeiten



PDF
Eigenschaften:
• einziges Format für FileMaker, dass Vektorgraﬁken enthalten kann
• bietet sich daher für skalierbare Logos an



Verläufe
Verläufe wenn möglich als FileMaker-Verläufe,
nicht als Bitmap anlegen.*)
Diese werden auf die entsprechende Auﬂösung gerendert.
*) Gesamtkontext beachten, Anzahl der Objekte, Verläufe



Werkzeuge für Bildbearbeitung
Programme für die Erstellung von Pixelgraﬁken:
• Adobe Photoshop
‣ Raster verwenden (Rasterlinie alle 2 Pixel)
‣ Neue Ansicht mit 50% zur Kontrolle einblenden
‣ Speichern als PNG-24 mit Transparenz
• Adobe Fireworks
• Acorn
• Pixelmator
Programme zur Optimierung von PNG Bilder:
• Image Alpha



Werkzeuge für Bildbearbeitung
Programme für die Erstellung von Vektorgraﬁk:
• Sketch
‣ Ideal für Icon-Erstellung
‣ Exportfunktion mit 2@-Option
‣ Pixelvorschau
• Adobe Illustrator



FileMaker Go,
warum ist das so?



FileMaker Go,
warum ist das so?
Eine persönliche Liste an Dingen,
die ...



Warum werden Felder
beim Editieren zweizeilig?
Sobald in ein einzeiliges Textfeld geklickt wird, wird eine
zusätzliche Zeile dargestellt. Dieses Verhalten entspricht nicht den
Erfahrungen mit anderen Apps.
Abhilfe:
• Feld mit vertikalen Rollbalken formatieren
• Linien auf „Ohne“ stellen



Tabulatorfolge
und Einblendmenüs
Nach der Auswahl von Einträgen im Einblendmenüs, springt der
Cursor in das nächste Eingabefeld. Das Verhalten ist anders als unter
FileMaker Pro.
Abhilfe, wenn dieser Effekt nicht gewünscht ist:
• Alle Tabulatorfolgen löschen



Rollbalken. Doppelt hält besser?
Beim Scrollen in einem Portal bringt zusätzlich den nativen Rollbalken
von iOS zum Vorschein. Der FileMaker-Pro-Rollbalken lässt sich
leider mit Bordmittel nicht deaktivieren, ohne dass die ScrollFunktion erhalten bleibt.
Abhilfe:
• Variante A: Das Portal so vergrößeren, sodass der Scrollbalken
außerhalb des rechten Layoutrandes ist
• Variante B: Einfach mit FileMaker-Objekten überdecken



Portale mit Rollbalken
sind immer top!
Sobald die Option „Rollbalken“ bei den Portalen gewählt ist, und das
Portal einmal sichtbar geworden ist, ist es nicht mehr möglich die
Inhalte durch Überlagerung zu verbergen, bzw. das Scrollen zu
unterbinden.
Abhilfe:
• das Portal so platzieren, dass es nicht überdeckt wird
(siehe Beispiel Rotation)



Webviewer ist immer top!
Ein Webviewer kann unter iOS nicht transparent sein und überdeckt –
anders als unter FileMaker Pro – alle Objekte.
Abhilfe:
• keine Webviewer als „Hilfsmittel“ verwenden (z.B. um Commit zu
unterbinden oder Objekte unter Buttons zu schützen)
• Als Alternative eignen sich auch Buttons:
‣ Zustand gedrückt beachten
‣ Option „Über Taste zu Hand-Cursor wechseln“ ausschalten
(für FileMaker Pro)
‣ Voraussetzung: Portal darunter darf nicht die Option
„Vertikaler Rollbalken“ verwenden



Wer nicht exportieren darf,
darf auch nichts ansehen!
Wem per Berechtigungs-Einstellung das „Exportieren“ nicht erlaubt
wird, darf auch keine
• Medieninhalte in Medienfelder anzeigen.
Abhilfe, wenn dieser Effekt nicht gewünscht ist:
• das Exportieren in den Berechtigungen erlauben und
per „Angepasste Menüs“ verhindern



Datei löschen per Scriptschritt –
wie jetzt?
Scriptschritt unter FileMaker Pro:
• Exportiere alle Feldwerte [„$dateiPfad“]
(ohne Angabe des Zielfeldes)
Scriptschritt unter FileMaker Go:
• Datensätze exportieren [Ohne Dialogfeld; „$dateiPfad“]
(ohne Angabe der Exportfolge)
Abhilfe:
• Plattform abfragen und richtigen Befehl verwenden
Hole( Systemplattform ) = 3 //=iOS



E-Mail senden mit Anhang –
funktioniert immer, oder?
Gelegentlich kommt es vor, dass FileMaker Go keine Anhänge mehr
an eine neue E-Mail übergibt (bei Option „Über E-Mail-Client
senden“).
Abhilfe:
• Alle Datenbanken schliessen, FileMaker Go beenden, wenn das
auch nicht hilft, Gerät neu starten.
• E-Mail Option über SMTP-Server senden verwenden
Hinweis: Eine Formatierung in der E-Mail-Signatur (iOS-Einstellung)
kann bei einigen Mail-Providern/Clients die Darstellung eines
Anhangs verhindern.



Datenbank verteilen ohne
FileMaker-Server –
ganz einfach, oder?
Variante 1: Daten über iTunes übertragen
In der Praxis:
• Die Stärke von iPads ist die Mobilität; iTunes ist stationär
Variante 2: Senden von Datenbanken per E-Mail
In der Praxis:
• Datei darf nicht zu groß sein
• funktioniert nicht immer
• ist Datei bereits vorhanden, wird Dateiname verändert
(Datei 1, Datei 2, etc.), Dateien können falsch referenziert werden



ganz einfach, oder?
Variante 3: Cloud-Services (z.B. Dropbox)
In der Praxis:
• Ist die lokal angezeigte Datei wirklich aktuell?
Variante 4: Webdownload
In der Praxis ist das die stabilste Variante, allerdings gilt auch hier:



ganz einfach, oder?
Empfohlene Variante:
• Per E-Mail einen Download-Link versenden oder bereitstellen
• Mit diesem Link wird nur eine „Installations“-Datenbank zum
Downloaden von neuen Datenbanken oder Updates verwenden
• Dieser Installer hat folgende Aufgaben:
‣ Schließen aller noch geöffneten Datenbanken
‣ Download der eigentlichen Datenbank-Datei(en)
per Scriptschritt Aus URL einfügen
‣ Löschen der alten Datenbank-Datei(en)
‣ Installieren (exportieren) der neuen Datenbank-Datei(en)
Siehe Vortrag auf FMK2012 von Patrick Risch: Auto-Update Lösung für FileMaker ohne Plugins



Der Dateibrowser –
Bildschirm reinigen hier nicht ratsam!
Unter FileMaker Go ist es besonders leicht, eine Datenbankdatei zu
löschen. Es wäre sehr wünschenswert, dies per Kennwort oder einer
Einstellung unterbinden zu können.
Auf der anderen Seite gibt es keine Funktion, um mehrere Dateien
(z.B. wie in der App Mail oder Nachrichten) zum Löschen
auszuwählen.
Abhilfe:
• Endanwender schulen
• aussagekräftige Datenbanknamen verwenden
• Backup, Spiegelung oder Transfer von Offline-Daten
regelmäßig zu einem Server



Wie öffne ich eine „Business-App“
Der Vorgang ist uns bekannt. Zum Beispiel:
• FileMaker Go starten
• [Falls eine Datenbank geöffnet ist, zum Dateibrowser wechseln]
• Datenbank suchen
• Datenbank öffnen
Abhilfe, wenn Start aus dem Home-Screen gewünscht ist:
• Webclip/Proﬁl erstellen mittels FileMaker Go App Maker
• Webclip erstellen mittels Apple Conﬁgurator
•



Hilfsprogramme und Apps



FileMaker Go App Maker
FileMaker Go App Maker - iOS Configuration Profile Generator:
• Erzeugt Profildateien (mobilconfig), die Webclips
inkl. Icon enthalten
• Diese Dateien können gespeichert und verteilt werden:
z.B. per E-Mail senden, per Download, per Apple Configurator
• Profile können am Endgerät einfach installiert werden. Auf dem
Home-Screen erscheint ein Webclip mit einer URL die auf eine
Datenbank in FileMaker Go verweist (lokal oder gehostet)



Änderungen in iOS 7:
• kein Vollbildmodus mehr bei Webclips
• Bug (?) in Safari, der mehrmaliges Öffnen verhindert
Tipps:
• Folgende URL in Webclips verwenden (ist bereits in Version 1.0.4):
FMP://%7E/meineDat.fmp12
diese verwendet wird:
javascript:window.location='FMP://%7E/meineDat.fmp12'
• Wert in Tabelle Files, Feld ﬁle_subproﬁle
<key>IsRemovable</key> auf FALSE setzen



Apple Configurator
Apple Configurator:
• Betreuung von iOS-Geräten möglich, inkl.
‣ Konfiguration von Einstellungen
‣ Installieren von Apps
(FileMaker Go lässt sich damit installieren)
‣ Installation von eigenen Profilen, inkl. Webclips
‣ Benutzung einschränken
(z.B. ausschliessliche Benutzung einer App zulassen)
Vorsicht:
Experimente an Testgeräte durchführen und
regelmäßige Backups machen!



Tipps für
die Benutzeroberfläche



Grundsätzliches
Die Bedienung unter FileMaker Go verlangt andere Konzepte als auf
einem Desktop. Daher ist es empfehlenswert immer extra Layouts für
iOS-Geräte anzufertigen.
Empfehlungen (abhängig vom iOS-Gerät/Anwendungszweck):
• Größere Schriften verwenden
(Apple iPhone Human Interface Guidelines: 17px bis 22px)
• Buttongröße beachten (40pt x 40pt)
• Portalhöhe und Listen (32pt bis 42pt )
• TESTEN:
‣ Schriften, Abstände, Absatzeigenschaften
‣ Farben
‣ Rendering (Webviewer, Portale, PDFs)


Bedienung
Navigation und Buttons:
• Navigation und Buttons sollten möglichst selbsterklärend sein
• Scripts und Menübefehle sind schwerer zugänglich
z.B. Einblendmenüs für Befehl verwenden
Dateneingabe:
• Wo auf eingeblendete Tastatur verzichtet werden kann,
Registersteuerelemente verwenden (z.B. Codeeingabe,
Zahleneingabe, etc. siehe Beispiel)
• Markierungsfelder und Optionsfelder durch Buttons ersetzen



Mitteilungen
Einschränkungen bei den Mitteilungen an den Benutzer:
• Es gibt keine QuickInfos
• iOS-Dialoge können für Einsatzzweck zu klein sein
• Fenster als modale Dialoge:
‣ „Dialogfenster“ nicht wirklich sichtbar
‣ schlechte Performance durch Layoutwechsel
Besser:
• Bedingte Formatierung verwenden
• Registersteuerelemente verwenden



Performance
Tipps für bessere Performance in bezug auf Gestaltungselemente
unter FileMaker Go:
• Startup: zu Layout mit Tabelle ohne Felder wechseln, dieses Layout
auch in den Dateioptionen einstellen
• Bilder optimieren (eventuell Thumbnails berechnen)
• Schatten und Transparenzen nur reduziert einsetzen
(Box-Shadow wird nicht ohne Grund auf iOS nicht angezeigt)
• Verläufe reduziert einsetzen (wenn notwendig, dann FileMakerVerläufe verwenden, keine Bitmaps, Objektanzahl beachten)
• Fensterwechsel (auch Hilfsfenster) vermeiden
• CSS Aufbau beim Rendering beachten...



Performance
• CSS Aufbau beim Rendering beachten...
‣ Objektanzahl reduzieren (neue Gruppe erzeugt neues Objekt)
‣ Wenn möglich native FileMaker-Objekte verwenden
‣ Einfaches Design verwenden
‣ Keine Objekte von anderem Design kopieren
‣ Kopiere Objektstil möglichst nur bei gleichen Objekttypen
‣ Buttons als Buttons anlegen (ursprüngliche Funktion verwenden)
‣ Platzhalter verwenden (Felder nur, wo Daten eingegeb. werden)
‣ Registersteuerelemente sind komplexe Objekte
‣ Felder mit eingebetteten Bilder vermeiden
‣ Portal rendert schneller als Liste



Weiterführende Links
• FileMaker Developer Community:
iOS Resources
• Icon-Sammlungen:
iconﬁnder.com
webalys.com
glyphish.com
thenounproject.com
pictos.cc
• iOS-7 Vorlagen:
The iOS Design Cheat Sheet 7



FileMaker Konferenz2010

Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages


FMK 2013, Tipps und Tricks FM Go, Robert Kaiser

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von Verein FM Konferenz

FMK 2013, Tipps und Tricks FM Go, Robert Kaiser