FMK 2013, Tipps und Tricks FM Go, Robert Kaiser

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

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

FileMaker Go, Tipps & Tricks für die Gestaltung aus der Praxis

Ein Vortrag von Robert Kaiser

FileMaker Konferenz2010

http://www.karo.at

http://www.karo.at

http://www.filemaker-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

http://www.karo.at

http://www.karo.at

http://www.karo.at

http://www.karo.at



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

• FileMaker Go, warum ist das so?• Hilfsprogramme und Apps• Tipps für das Interface

Agenda

http://www.karo.at

http://www.karo.at



Logos und Grafiken für hochauflösende und

normale Displays optimieren

http://www.karo.at

http://www.karo.at



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

http://www.karo.at

http://www.karo.at



Grundsätzlich gilt für alle FileMaker Objekte

Schriften, Linien, Rechtecke etc. sind Vektorelemente und werden für die aktuelle Auflösung gerendert.

Sie werden aber nur scharf dargestellt, wenn alle Werte ganzzahlige Punktwerte sind:

• bei Objektpositionen• bei Objekthöhe, Objektbreite• bei Bereichhöhe, LayoutrandNicht 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/Grafik) 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 Grafiken größer im Vergleich zu anderen Formaten



JPEG, Bildformat für Fotos

Optimierung für FileMaker:• Die Auflö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 Grafiken mit Linien und Flächen optimal• Das PNG-Format unterstützt Alpha-Kanal (Transparenz)



PNG, Bildformat für Grafiken

Optimierung für FileMaker:• Auflö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) beachtenBeispiel: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 hochauflösenden Display werden beim Rendern jeweils vier Pixel (2x2) zu einem darzustellenden Pixel zusammengefasst.Befindet 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 Grafik ok?Antwort:Nein, die Kanten sind auf ungerade Pixelpositionen positioniert.




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




Ist diese Grafik ok?Antwort:Ja, die Kanten und derSlice-Rahmen befinden sich auf geraden Pixelpositionen.



Kontrollmöglichkeit

Kontrollmöglichkeit bei der Erstellung• je nach verwendeten Grafikprogramm 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 Vektorgrafiken 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 Auflösung gerendert.*) Gesamtkontext beachten, Anzahl der Objekte, Verläufe



Werkzeuge für Bildbearbeitung

Programme für die Erstellung von Pixelgrafiken:• Adobe Photoshop‣ Raster verwenden (Rasterlinie alle 2 Pixel)‣ Neue Ansicht mit 50% zur Kontrolle einblenden‣ Speichern als PNG-24 mit Transparenz

• Adobe Fireworks• Acorn• PixelmatorProgramme zur Optimierung von PNG Bilder:• Image Alpha



Werkzeuge für Bildbearbeitung

Programme für die Erstellung von Vektorgrafik:• Sketch‣ Ideal für Icon-Erstellung‣ Exportfunktion mit 2@-Option‣ Pixelvorschau

• Adobe Illustrator



FileMaker Go, warum ist das so?

http://www.karo.at

http://www.karo.at



Eine persönliche Liste an Dingen, die ...

FileMaker Go, warum ist das so?



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 Scroll-Funktion 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 verwendenHole( 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 verwendenHinweis: 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 übertragenIn der Praxis:• Die Stärke von iPads ist die Mobilität; iTunes ist stationärVariante 2: Senden von Datenbanken per E-MailIn 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




Variante 3: Cloud-Services (z.B. Dropbox)In der Praxis:• Ist die lokal angezeigte Datei wirklich aktuell?• ist Datei bereits vorhanden, wird Dateiname verändert

(Datei 1, Datei 2, etc.), Dateien können falsch referenziert werdenVariante 4: WebdownloadIn der Praxis ist das die stabilste Variante, allerdings gilt auch hier:• ist Datei bereits vorhanden, wird Dateiname verändert

(Datei 1, Datei 2, etc.), Dateien können falsch referenziert werden




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 öffnenAbhilfe, wenn Start aus dem Home-Screen gewünscht ist: • Webclip/Profil erstellen mittels FileMaker Go App Maker• Webclip erstellen mittels Apple Configurator

•



Hilfsprogramme und Apps

http://www.karo.at

http://www.karo.at



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)



FileMaker Go App Maker

Änderungen in iOS 7:• kein Vollbildmodus mehr bei Webclips• Bug (?) in Safari, der mehrmaliges Öffnen verhindertTipps:• Folgende URL in Webclips verwenden (ist bereits in Version 1.0.4):FMP://%7E/meineDat.fmp12diese verwendet wird:javascript:window.location='FMP://%7E/meineDat.fmp12'

• Wert in Tabelle Files, Feld file_subprofile<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

http://www.karo.at

http://www.karo.at



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 verwendenDateneingabe:• 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 FileMaker-

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

http://www.karo.at

http://www.karo.at



Weiterführende Links

• FileMaker Developer Community:iOS ResourcesFileMaker Go App Maker

• Icon-Sammlungen:iconfinder.comwebalys.comglyphish.comthenounproject.compictos.cc

• iOS-7 Vorlagen:The iOS Design Cheat Sheet 7

http://www.karo.at

http://www.karo.at

https://fmdev.filemaker.com/community/ios

https://fmdev.filemaker.com/community/ios

https://fmdev.filemaker.com/docs/DOC-2654

https://fmdev.filemaker.com/docs/DOC-2654

http://www.iconfinder.com

http://www.iconfinder.com

http://www.webalys.com

http://www.webalys.com

http://www.glyphish.com

http://www.glyphish.com

http://www.thenounproject.com

http://www.thenounproject.com

http://www.pictos.cc

http://www.pictos.cc

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/



FileMaker Konferenz2010

Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages

http://www.karo.at

http://www.karo.at



http://www.monkeybreadsoftware.de/filemaker/



















http://www.gofilemaker.de/



















http://www.myfmbutler.com/



















http://www.karo.at/index.php/fmk2013



















http://www.troi.com/



















http://walkingtoweb.com/



















http://www.ingeno.ch/



















http://camelcase.com/



















http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://medioag.ch/

http://www.tao-solutions.de/



















http://www.filemaker.de



















http://www.guenther-bs.de/



















http://www.herrfriedrich.com/



















http://http.//www.filemaker-magazin.de



















Documents

FMK 2013, Tipps und Tricks FM Go, Robert Kaiser