Migliori metodologie operative per progettare soluzioni aziendali personalizzate per iPad e iPhone Una Guida operativa di FileMaker Sommario A chi può essere utile questa guida? ...................................................................................3 Cosa si imparerà ..................................................................................................................3 Passo 1 – Pianificare la soluzione ........................................................................................4 Schema decisionale per la soluzione .......................................................................5 Passo 2 – Progettare la soluzione ........................................................................................7 Passo 3 – Sviluppare la soluzione ........................................................................................8 Impostazione iniziale ..........................................................................................................10 Definire i bordi della soluzione FileMaker ..........................................................................12 Sagome della schermata ...................................................................................................12 Griglie 14 Righelli 14 Guide ............................................................................................................................14 Guide dinamiche ................................................................................................................15 Creare il formato ................................................................................................................15 1. Aggiungere una barra degli strumenti in stile iOS ...........................................15 a. Ridimensionare la sezione Intestazione ..........................................................16 b. Aggiungere un titolo alla barra degli strumenti ...............................................16 c. Aggiungere un pulsante alla barra degli strumenti ..........................................17 2. Aggiungere un elenco degli articoli da riordinare o disponibili in magazzino .18 3. Aggiungere i pulsanti per modificare gli articoli visualizzati nel portale ..........25 4. Aggiungere un pulsante che consenta di accedere ai dettagli degli articoli ...26 5. Aggiungere il valore totale dell’inventario .......................................................27 6. Aggiungere un grafico che mostri la quantità di articoli per ogni categoria ...27 7. Aggiungere una mappa della posizione corrente dell’utente ........................................29 8. Il formato finale ..............................................................................................................31 9. Cosa fare con lo spazio che rimane? ............................................................................31 10. Accesso automatico al nuovo formato ...........................................................32 Revisione finale della soluzione .........................................................................................32 Testare e distribuire la soluzione ........................................................................................32 APPENDICE – Acquisire familiarità con gli strumenti di progettazione di FileMaker .........33 Temi ............................................................................................................................33 Elaborazione del testo ........................................................................................................34 Riempimenti: sfondi con colore a tinta unita, gradienti e immagini ...................................34 Linee dei bordi e formattazione degli angoli ......................................................................36 Stati degli oggetti ...............................................................................................................38 Icone ed elementi grafici ....................................................................................................39 Accessibilità .......................................................................................................................40 Risorse ............................................................................................................................41 Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 2 Guida operativa di FileMaker Migliori metodologie operative per utilizzare la tecnologia iOS nello sviluppo di soluzioni personalizzate con FileMaker Pro Questa guida riporta le migliori metodologie operative per progettare soluzioni aziendali personalizzate per iOS. Queste soluzioni sono create utilizzando la piattaforma FileMaker, dove forma e funzionalità si uniscono per aiutare lo sviluppatore a creare soluzioni di grande utilità, in grado di conquistare i futuri utenti. La piattaforma FileMaker è costituita da FileMaker Pro per creare le soluzioni FileMaker, dal client gratuito FileMaker Go per eseguirle sui dispositivi iOS e, infine, da FileMaker Server per distribuirle e condividere le informazioni con molti utenti. A chi può essere utile questa guida? Questa guida è stata pensata per due tipi di creatori di soluzioni: 1. Coloro che non hanno esperienze precedenti con FileMaker che utilizzeranno FileMaker Pro e FileMaker Go per la prima volta per creare soluzioni aziendali personalizzate. 2. Utenti di FileMaker Pro esistenti che hanno già una versione desktop della soluzione di database progettata e sono pronti a creare versioni eseguibili su iPad e iPhone. Cosa si imparerà Si imparerà come pianificare, progettare e sviluppare soluzioni aziendali iOS personalizzate che non solo aiutino gli utenti ad eseguire le proprie attività, ma siano anche piacevoli da utilizzare. • Passo 1 – Pianificare la soluzione – Capire chi sono gli utenti, quali attività devono eseguire, dove e su quali dispositivi utilizzeranno la soluzione sono aspetti fondamentali per poter fornire loro un prodotto dalle caratteristiche e dalle funzionalità di cui hanno bisogno. • Passo 2 – Progettare la soluzione – Selezionare con cura gli elementi da visualizzare sullo schermo più piccolo e presentarli in modo ottimale per sveltire il flusso di lavoro è il passo successivo nella creazione di un'esperienza davvero gradevole per l'utente. • Passo 3 - Sviluppare la soluzione – In questa sezione vengono fornite istruzioni dettagliate sullo sviluppo che spiegano come coniugare forma e funzionalità per far sì che gli utenti continuino ad utilizzare la soluzione giorno dopo giorno. Se questo ha suscitato il vostro interesse, allora incominciamo! Risorse e aiuto Questa guida è un punto di partenza per lo sviluppatore e/o il proprio team. Oltre a questa guida, nell'ambito del programma FileMaker TechNet sono disponibili numerosissime risorse, ulteriori metodologie operative, trucchi e accorgimenti e tecniche. È possibile entrare in contatto con altre persone attraverso i forum degli sviluppatori o vedere video per esplorare e scoprire ulteriori capacità avanzate della piattaforma FileMaker. Inoltre, se non si ha ancora familiarità con gli strumenti e le opzioni di progettazione di FileMaker, si può fare riferimento all'Appendice di questa guida per esercitazioni di base sugli strumenti e sulle opzioni principali. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 3 Passo 1 – Pianificare la soluzione Capire a quale pubblico è rivolta in modo da fornire le caratteristiche e le funzionalità giuste Dedicare il tempo necessario a capire con anticipo a quale pubblico sarà rivolta e le relative esigenze è la prima cosa da fare per progettare una soluzione veramente utile e utilizzabile, apprezzata dagli utenti. Porre a se stessi e al proprio team le seguenti domande per pianificare le caratteristiche e le funzionalità della soluzione: • CHI – Chi la utilizzerà? o Identificare i gruppi, i team, le qualifiche e/o i nomi delle persone che utilizzeranno la soluzione. • CHE COSA – Quali sono gli obiettivi principali? o Quali sono le attività principali che la soluzione dovrebbe aiutare gli utenti ad eseguire? ! All'interno della propria organizzazione i diversi team e gruppi possono avere esigenze diverse per quanto riguarda la soluzione; è quindi bene elencare le attività più importanti per ciascun gruppo. o Quali attività gli utenti dovranno eseguire rapidamente? o Vi sono attività che devono essere eseguite in un ordine specifico? • DOVE – Dove verrà utilizzata la soluzione? o Sarà utilizzata, ad esempio, in ufficio, sul campo, in pieno giorno, di notte, in auto, vicino all'acqua, ecc.? o Quale posizione assumeranno gli utenti durante l'uso? Staranno in piedi o seduti? Utilizzeranno una o due mani? In che misura gli utenti riusciranno ad essere precisi durante l'uso? Conoscere questi aspetti può essere utile a definire il contrasto, le zone da toccare e molto altro. • QUALI – Quali dispositivi verranno utilizzati per quali attività? o A quali attività deve essere assegnata una priorità per l'accesso dall'iPhone piuttosto che dall'iPad? o Quale orientamento verrà utilizzato di più? Orizzontale, verticale o entrambi? o Quali gesti e quali funzioni di dettatura vocale e di acquisizione di immagini verranno utilizzate sull'iPhone piuttosto che sull'iPad? • QUANDO – Quando deve essere distribuita la soluzione? o Questo sarà un utile supporto per iniziare a creare una soluzione "dell'ordine di qualche bite" da cui partire. o Lo sviluppo della soluzione può essere un processo iterativo che consentirà di distribuire agli utenti una nuova versione della soluzione mano a mano che verrà migliorata e perfezionata. Se questo si addice al proprio progetto, stabilire come e quando effettuare gli aggiornamenti con il minimo disturbo per gli utenti. • ALTRE APPLICAZIONI – Quali altre applicazioni complementari utilizzeranno o amano utilizzare gli utenti? Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 4 o o Quali applicazioni verranno utilizzate oltre alla soluzione che si sta creando? Quali applicazioni amano utilizzare i propri utenti? Tutto questo sarà fonte di ulteriore ispirazione per creare applicazioni di cui gli utenti siano entusiasti. Schema decisionale per la soluzione Dopo aver risposto alle domande di cui sopra, è possibile ricavare decisioni utili per definire la propria soluzione. Inserendole in un semplice schema è possibile farsi un'idea d'insieme della definizione e delle decisioni relative alla propria soluzione. Di seguito si riporta l'esempio di una soluzione sullo stato dell'inventario destinata ai dirigenti: Chi Che cosa Dove Quali attività sull'iPhone Quali attività sull'iPad Quando distribuirla • • • • Info Decisione Alti dirigenti Deve essere semplice Numero di articoli Articoli da riordinare Valore dell'inventario Unità disponibili Aggiungere un formato con informazioni riassuntive In ufficio Utilizzare un trigger di script SuAperturaPrimaFinestra per determinare il sistema operativo e andare al formato appropriato quando un utente apre il file Tema tenue Spostamenti da una stanza all'altra Breve panoramica dello stato dell'inventario Mettere in evidenza le informazioni più importanti Dashboard dei dati principali con possibilità di eseguire un'analisi più approfondita 10 giorni Creare un formato adatto all'iPad con navigazione facile da utilizzare Ottimizzare le funzionalità Nello script di accesso inserire istruzioni per comunicare all'utente la disponibilità di una nuova versione Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 5 Altre applicazioni utilizzate Calendario Mappe Creare un'esperienza utente simile, in modo da non disorientare l'utente nel passaggio da un'applicazione all'altra Seguire le convenzioni iOS per assicurare un'esperienza utente coerente Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 6 Passo 2 – Progettare la soluzione Consentire agli utenti di svolgere le proprie attività in modo piacevole Progettare soluzioni mobili non significa solo creare una versione più piccola della versione desktop corrispondente che si adatti all'iPhone o all'iPad. Le dimensioni dello schermo sono importanti, ma sono gli elementi visualizzati su quel piccolo schermo e il modo in cui vengono presentati a determinare il successo di una soluzione… o a far sì che venga scartata. L'esperienza utente deve essere semplice su qualsiasi dispositivo. Di seguito alcune linee guida da seguire quando si progetta una soluzione per iOS: • Creare formati per ciascun tipo di dispositivo – Creare formati distinti per ogni dispositivo assicura che la propria soluzione sia ottimizzata per ciascuno di essi. Nella maggior parte dei casi, non si dovrebbe utilizzare lo stesso formato per l'iPhone e l'iPad, o per il desktop e l'iPad. • Uso principale – L'uso principale di ogni formato dovrebbe essere immediatamente evidente per l'utente. Inserire un paio di attività veloci sul formato iniziale e assicurarsi che le attività eseguite con frequenza siano immediatamente accessibili. • Semplicità – Piuttosto che creare un unico formato complesso, creare più formati semplici e dall'aspetto pulito con una navigazione intuitiva e permettere agli utenti di navigare secondo necessità. • Touch – I pulsanti devono essere grandi almeno 44 pt x 44 pt per poter essere toccati facilmente con un dito. • Raggruppamento – Quando su un modulo vengono visualizzati dati raggruppati, accertarsi di allineare i campi correlati e utilizzare un raggio di 10 pt per gli angoli dei campi più esterni. • Ridurre al minimo la digitazione – Su un'interfaccia touch, la digitazione non è sempre il metodo di immissione ottimale. Quando possibile, valutare alternative come i valori dei campi a inserimento automatico, le liste valori, i selettori della data o addirittura la funzione di dettatura anziché visualizzare la tastiera. Utilizzare valori dei campi predefiniti intelligenti, le liste valori, i selettori della data e addirittura la funzione di dettatura per sfruttare le capacità uniche dei dispositivi iOS. • Colore – L'interfaccia utente della soluzione non deve compromettere una chiara visualizzazione dei dati. Scegliere un colore di base e un colore complementare e partire da questa palette. Evitare di usare molti colori e riservare la scelta di tonalità molto sature agli elementi che meritano più attenzione, come dati critici o errori. Un buon modo per iniziare è partire da uno dei temi integrati in FileMaker, che utilizzano palette di colori studiate per accordarsi bene tra loro. • Gradienti – I gradienti possono essere utilizzati per dare dimensione ai formati. I gradienti sono ideali per dare risalto agli elementi interattivi di un formato, come le barre degli strumenti o i pulsanti, o per creare un'atmosfera quando applicati allo sfondo come gradiente radiale ampio. Evitare di utilizzare i gradienti su elementi meno importanti o posti dietro ad altri elementi. • Più finestre – Evitare di aprire più finestre nella soluzione. Piuttosto, permettere all'utente di accedere facilmente a un formato all'interno della stessa finestra per portare a termine l'attività desiderata. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 7 Leggere le Human Interface Guidelines (Linee guida per interfacce umane) di Apple Le iOS Human Interface Guidelines (Linee guida per interfacce umane per iOS) descrivono principi utili a progettare un'interfaccia utente e a garantire un'esperienza utente eccezionali per la propria soluzione iOS. Vi si può trovare ispirazione e aiuto per rendere la propria soluzione uno strumento potente e attraente per gli utenti. Queste linee guida sono disponibili sul sito Apple (dove?). Passo 3 – Sviluppare la soluzione In questa sezione vengono fornite istruzioni dettagliate su come utilizzare FileMaker Pro per sviluppare l'interfaccia utente di una soluzione FileMaker ben progettata. Si imparerà come coniugare forma e funzionalità per far sì che gli utenti continuino ad utilizzare la soluzione giorno dopo giorno. L'obiettivo è creare un formato ottimizzato per iPad con un'interfaccia simile a un dashboard (riportato nelle figure 1 e 2 con orientamento verticale ed orizzontale) che metta in evidenza le informazioni riassuntive importanti, consentendo al contempo di visualizzare più informazioni con facilità. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 8 Figura 1: Formato di tipo dashboard con orientamento verticale Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 9 Figura 2: Formato di tipo dashboard con orientamento orizzontale Le istruzioni di seguito utilizzano la soluzione pronta per l'uso FileMaker "Voci di inventario". Si tratta di una delle numerose soluzioni pronte per l'uso integrate in FileMaker Pro. In alternativa, è possibile creare il formato in un file personale, supponendo di avere già definito tabelle, campi e relazioni e di essere pronti a creare l'interfaccia utente della soluzione. In questo caso, saltare il passo 1 e iniziare dal passo 2. Impostazione iniziale 1) Creare la soluzione pronta per l'uso Voci di inventario a. In FileMaker Pro o FileMaker Pro Advanced, selezionare File > Nuovo da soluzione pronta per l'uso.... b. Selezionare il modello Voci di inventario. c. Selezionare la posizione in cui salvare la soluzione pronta per l'uso e fare clic su Salva. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 10 Figura 3: La finestra di dialogo di selezione della soluzione pronta per l'uso 2) Creare una nuova tabella e un nuovo formato per il dashboard a. Aprire la finestra Gestisci database utilizzando i tasti di scelta rapida Cmd+Maiusc+D o Ctrl+Maiusc+D oppure selezionare File > Gestisci > Database…. b. Creare una nuova tabella Dashboard. c. Fare clic su OK per chiudere la finestra di dialogo Gestisci database. d. Fare clic sul pulsante "Modifica il formato" nella barra degli strumenti. e. Fare clic sul pulsante "Nuovo formato/resoconto" nella barra degli strumenti. f. Selezionare "Dashboard" dall'elenco a discesa "Mostra i record di:". g. Assegnare il nome "Dashboard inventario iPad" al formato. h. Selezionare "Modulo standard" come tipo di formato. Figura 4: La prima schermata della finestra di dialogo Nuovo formato/resoconto i. Fare clic su Avanti. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 11 j. Fare clic su Avanti senza specificare i campi. k. Selezionare Aspetto Fiume come tema l. Fare clic su Fine Figura 5: La schermata di selezione del tema del formato nella finestra di dialogo Nuovo formato/resoconto A questo punto il formato da utilizzare per il dashboard per iPad è stato creato. Definire i bordi della soluzione FileMaker Per bordi si intendono la larghezza e l'altezza del formato sulla schermata. Se la soluzione sarà utilizzata su più dispositivi, occorre definire i bordi di ogni dispositivo su formati distinti per ciascuno di essi. Orientamento del dispositivo e ridimensionamento automatico Le soluzioni devono funzionare bene sia con orientamento verticale che orizzontale e le funzionalità principali devono essere disponibili in entrambi gli orientamenti. Ad esempio, gli elementi visibili in corrispondenza del margine destro di un formato con orientamento orizzontale non devono scomparire o essere tagliati quando lo schermo viene ruotato in verticale. Un modo per mantenere l'attenzione sulle funzionalità principali è il ridimensionamento automatico, che consente di ridimensionare e far scorrere gli oggetti nella posizione più appropriata a seconda dell'orientamento. Se necessario, mano a mano che si aggiungeranno elementi al formato in questa sezione, verrà applicato il ridimensionamento automatico. Sagome della schermata Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 12 Le sagome della schermata di FileMaker Pro facilitano la definizione dei bordi della soluzione. Ogni sagoma rappresenta l'area effettivamente disponibile per il formato, corrispondente alla schermata del dispositivo meno lo spazio utilizzato per gli elementi delle applicazioni iOS e Go come le barre degli strumenti. È possibile attivare qualsiasi combinazione di sagome, nonché personalizzare una sagoma. Per questo esercizio, si utilizzeranno sia la sagoma iPad (verticale) che la sagoma iPad (orizzontale) per visualizzare lo spazio disponibile in entrambi gli orientamenti. • Per impostare i bordi del formato utilizzando una sagoma della schermata: a. Selezionare Visualizza > Modo Formato scheda. b. Fare clic sulla freccia delle sagome della schermata nella barra degli strumenti. c. Selezionare iPad: 768 x 929 (verticale) dall'elenco a discesa per visualizzare la sagoma desiderata. d. Fare nuovamente clic sull'elenco a discesa delle sagome della schermata e selezionare iPad: 1024 x 673 (orizzontale). Figura 6: L'elenco a discesa delle sagome della schermata Quindi, sempre nel modo Formato scheda, ridimensionare la sezione Corpo in modo che la parte inferiore del Piè di pagina sia a 717 pt, appena sotto il bordo inferiore della sagoma della schermata iPad (orizzontale) (poiché uno script disattiva le barre degli strumenti quando si apre il file, il formato può essere 44 pt più lungo della sagoma). [Se l'unità di misura corrente nella scheda Posizione è "cm" o "in", modificarla in "pt" (punti) facendo clic su una qualsiasi etichetta dell'unità di misura finché non viene visualizzato "pt"]. È possibile ridimensionare la sezione Corpo facendo clic sulla relativa etichetta e modificando il valore Altezza nella scheda Posizione della finestra Impostazioni in 641 pt o facendo clic e trascinando la linea tra le sezioni Corpo e Piè di pagina. Utilizzare la finestra Impostazioni per modificare l'altezza (e poi la larghezza) è il metodo più preciso per definire le dimensioni degli oggetti e delle sezioni del formato. Quindi, modificare la larghezza del formato in modo che sia perfettamente allineato al margine destro della sagoma della schermata iPad (verticale), senza selezionare nulla e modificando il valore della larghezza nella scheda Posizione della finestra Impostazioni in 768 pt, oppure facendo clic sul margine destro del formato e trascinandolo. È importante che i margini del formato siano perfettamente allineati con le sagome della schermata (o all'interno dell'area della schermata disponibile con le barre degli strumenti Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 13 disattivate). Se non sono allineati correttamente, gli utenti potrebbero sperimentare casi di scorrimento indesiderato e il formato potrebbe non ridimensionarsi correttamente quando si ruota il dispositivo. Figura 7: Margine destro del formato allineato al margine destro della sagoma della schermata iPad: 768 x 929 (verticale) Griglie L'uso di una griglia assicura che ogni cosa sia ben organizzata e disposta in modo ottimale sulla schermata dei dispositivi più piccoli. La griglia visualizza una serie di linee orizzontali e verticali intersecanti non stampabili che si possono utilizzare per creare, ridimensionare, posizionare e allineare gli oggetti. Per visualizzare la griglia, selezionare Visualizza > Griglia > Mostra griglia. Quando si deve decidere come allineare e posizionare gli oggetti sul formato, utilizzare la griglia sottostante per definirne il posizionamento. Il formato può essere configurato in modo che gli oggetti siano "allineati" alle linee della griglia. Quando si sposta o si ridimensiona un oggetto, questo viene allineato alla griglia secondaria più vicina. Quando si aggiungono nuovi oggetti, questi vengono allineati alla griglia principale più vicina. Per attivare o disattivare l'effetto di "allineamento alla griglia", selezionare Visualizza > Griglia > Allinea alla griglia . La distanza tra le linee della griglia può essere anche modificata inserendo i valori desiderati in Spaziatura griglia principale e Incrementi griglia secondaria nell'area Griglia della scheda Posizione della finestra Impostazioni. Un utile "trucco del mestiere" consiste nell'impostare per Spaziatura griglia principale la dimensione del dispositivo (in questo caso 768 pt) e per Incrementi griglia secondaria un divisore pari, come 32 pt o 64 pt. È possibile creare rapidamente formati a 2, 3 e 4 colonne allineando gli oggetti alle linee della griglia orizzontalmente e verticalmente, come descritto nel paragrafo Guide di seguito. Righelli I righelli orizzontale e verticale visualizzano linee di riferimento per tenere traccia della posizione del puntatore mentre lo si sposta sul formato. Quando si sposta un oggetto come un campo o un pulsante, i righelli visualizzano anche l'area dell'oggetto, utile per rendersi conto dello spazio che un oggetto occupa. Per visualizzare i righelli, selezionare Visualizza > Righelli. Guide Dopo aver adattato la spaziatura della griglia al formato, posizionare le guide sul formato per indicare colonne e righe e attivare la condivisione delle guide in modo da poter utilizzare le stesse guide su altri formati. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 14 Per aggiungere guide al formato, fare clic sul righello a sinistra o in cima al formato e trascinarle nella posizione desiderata. Per regolare la posizione delle guide, fare clic su una delle guide esistenti e trascinarla. La posizione verrà mostrata sul rispettivo righello e nella scheda Posizione della finestra Impostazioni. Le guide possono essere condivise con tutti i formati, consentendo di posizionare gli elementi su più formati con la stessa disposizione. Le guide possono anche essere bloccate o rimosse. Fare clic con il tasto destro del mouse o fare clic tenendo premuto il tasto Ctrl su una guida per visualizzare il menu di scelta rapida con le opzioni che consentono di condividere la guida, bloccarla o rimuoverla. È anche possibile attivare l'opzione Allinea alle guide. Poiché le opzioni Allinea alla griglia e Allinea alle guide eseguono funzioni simili, è bene tenere conto di quanto segue: • • • Selezionare l'opzione Allinea alle guide o Allinea alla griglia, ma non entrambe, poiché può essere difficile distinguere se gli elementi sono allineati a una guida o alla griglia. Utilizzare la griglia per impostare le guide, quindi disattivarla e utilizzare esclusivamente l'opzione Allinea alle guide durante la creazione del formato. Utilizzare le guide per indicare le posizioni condivise in più formati, quindi utilizzare esclusivamente l'opzione Allinea alla griglia durante la creazione del formato. Guide dinamiche Le guide dinamiche sono linee "a comparsa" che vengono visualizzate quando un oggetto che si sta spostando, disegnando o ridimensionando corrisponde alla spaziatura, all'allineamento o alle dimensioni di altri oggetti del formato. Sono utili per riuscire a collocare e ridimensionare gli oggetti in modo che si armonizzino con gli altri elementi del formato. Per visualizzare o nascondere le guide dinamiche, selezionare Visualizza > Guide dinamiche. Per vedere le guide dinamiche in funzione, attivarle, inserire più di un campo o più di un oggetto sul formato e trascinare uno degli oggetti attorno ad un altro. Quando l'oggetto trascinato si allinea ad un altro oggetto, le guide dinamiche vengono visualizzate per indicare l'allineamento. Quindi ridimensionare un oggetto trascinando una cornice di selezione. Le guide dinamiche vengono visualizzate quando la dimensione dell'oggetto corrisponde a quella di un altro oggetto o quando uno dei margini si allinea a un altro oggetto. Creare il formato Questa sezione descrive i passi necessari per creare un dashboard per l'iPad. Come già detto riguardo all'orientamento, è essenziale applicare il ridimensionamento automatico ad ogni elemento affinché il formato funzioni come gli utenti si aspettano, sia con orientamento verticale che orizzontale. Le istruzioni per l'applicazione del ridimensionamento automatico sono fornite in questa guida. 1. Aggiungere una barra degli strumenti in stile iOS Di solito in iOS la barra degli strumenti si estende in orizzontale nella parte superiore della soluzione. Due esempi sono le applicazioni Mail o Calendario sull'iPad. Per aggiungere alla soluzione una barra degli strumenti in stile iOS, modificare la sezione Intestazione inserita automaticamente con la creazione del nuovo formato. Questa sezione descrive come modificare la sezione Intestazione in modo da conformarla all'interfaccia grafica di una barra degli strumenti standard comunemente presente sull'iPad. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 15 Finestre Impostazioni Aprendo più finestre Impostazioni in modo Formato scheda, lavorare su un formato diventa più facile. Ad esempio, è possibile visualizzare la scheda Dati di una finestra Impostazioni e la scheda Aspetto di un'altra finestra Impostazioni, per avere accesso alle opzioni di entrambe le schede. Per aprire la prima finestra Impostazioni utilizzare i tasti di scelta rapida Cmd+I o Ctrl+I o selezionare Visualizza > Impostazioni. Per aprire altre finestre Impostazioni, selezionare Visualizza > Nuove Impostazioni. Inoltre, è possibile lavorare con una sola finestra Impostazioni e utilizzare i tasti di scelta rapida (Cmd+1, Cmd+2 o Cmd+3 su Mac o Ctrl+1, Ctrl+2 o Ctrl+3 in Windows) per accedere ad ognuna delle schede quando necessario, oppure aprire più finestre Impostazioni e utilizzare gli stessi tasti di scelta rapida per passare dall'una all'altra. a. Ridimensionare la sezione Intestazione Esistono due modi per ridimensionare la sezione Intestazione: ! È possibile fare clic e trascinare il margine inferiore della sezione Intestazione e, guardando l'altezza nell'area Dimensione della scheda Posizione di una finestra Impostazioni, modificare la dimensione in 44 punti. ! In alternativa è possibile fare clic sull'etichetta della sezione Intestazione sul lato sinistro del formato e modificare l'altezza nell'area Dimensione della scheda Posizione di una finestra Impostazioni. ! b. Aggiungere un titolo alla barra degli strumenti Esistono due modi per aggiungere un titolo alla barra degli strumenti: ! Selezionare lo strumento Testo nella barra degli strumenti, fare clic nella sezione Intestazione e iniziare a scrivere. È anche possibile selezionare lo strumento Testo, trascinare un rettangolo nella sezione Intestazione e iniziare a scrivere. Se il testo è più lungo del rettangolo, verrà mandato a capo su una o più righe per rientrare nella larghezza. ! Oppure, con lo strumento Selezione selezionato, basta fare clic nella sezione Intestazione e iniziare a scrivere. Occorre tenere presente che se si scrive in un'altra sezione, ad esempio nel Corpo, la formattazione predefinita per il testo sarà diversa da quella del testo inserito nella sezione Intestazione. Questa "consapevolezza" del punto in cui si sta scrivendo è una funzione dei temi di FileMaker. Indipendentemente dal metodo scelto, centrare il testo sia all'interno della casella di testo che sul formato: 1. Fare clic fuori dalla casella di testo (o premere il tasto Invio sulla tastiera) per tornare allo strumento Selezione. Quindi si hanno più possibilità: ! Utilizzare i tasti di scelta rapida Cmd+\ o Ctrl+\. ! Selezionare Formattazione > Allinea testo > Centro. ! Fare clic sul pulsante di allineamento al centro nella barra di formattazione. 2. Trascinare il titolo al centro del formato, sempre all'interno della sezione Intestazione. È possibile calcolare la posizione sottraendo la larghezza del titolo dalla larghezza del formato, dividendo per due e posizionando il margine sinistro del titolo in corrispondenza del valore ottenuto. In alternativa allineare il titolo con un oggetto, come una linea o un rettangolo, per cui sia stata impostata la stessa larghezza del formato e che sia posizionato in corrispondenza del margine sinistro del formato. Per centrare il Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 16 titolo con l'oggetto, trascinare il titolo finché non viene visualizzata una guida dinamica per indicare che il centro del titolo è allineato al centro dell'oggetto, oppure selezionare sia l'oggetto che il titolo e fare clic sul pulsante Allinea sui centri verticali nella scheda Posizione della finestra Impostazioni. Se si trascina il titolo per allinearlo all'oggetto e sul formato sono presenti altri oggetti, è possibile che le guide dinamiche vengano visualizzate anche mentre si trascina il titolo. Assicurarsi di allineare il titolo al centro dell'oggetto, piuttosto che ad altri oggetti. c. Aggiungere un pulsante alla barra degli strumenti La maggior parte delle applicazioni iOS ha pochi pulsanti nella barra degli strumenti, ad esempio un pulsante per aggiungere un nuovo record e un pulsante per passare a un'area diversa o a una visualizzazione più ampia. Per questo dashboard, aggiungere un pulsante per l'invio dell'elenco delle voci di inventario via e-mail. È possibile copiare il pulsante con questo script sul formato Inventario esistente della soluzione pronta per l'uso Voci di inventario (nel gruppo dei formati Scrivania) o eseguire questi passi sul proprio formato: 1. Utilizzando lo strumento Pulsante nella barra degli strumenti, disegnare un pulsante nell'angolo in alto a destra della sezione Intestazione. 2. Impostare il pulsante in modo che esegua lo script Invia inventario via E-mail e selezionare Esci nell'elenco a discesa "Script corrente:". Fare clic su OK per chiudere la finestra di dialogo Impostazione pulsanti. 3. Digitare "Invia inventario via E-mail" come nome del pulsante. 4. Ridurre la dimensione del font a 14 pt e ridimensionare e posizionare il pulsante in modo che stia nella sezione Intestazione e sia allineato alle guide o agli oggetti appropriati sul formato. 5. Per adattare il pulsante allo stile della barra degli strumenti, cambiare il gradiente di riempimento del pulsante, la linea e il colore del testo: a) Selezionare il pulsante e, nella scheda Aspetto della finestra Impostazioni (sezione Grafico, Riempimento), selezionare il cursore del gradiente a sinistra ed eseguire il campionamento o impostarlo sul colore della parte superiore della sezione Intestazione. (Per eseguire il campionamento del colore, fare clic all'interno del cursore del gradiente e selezionare lo strumento di campionamento dalla palette dei colori – lo strumento di campionamento ha l'aspetto di una lente di ingrandimento. Quindi, spostarsi con il mouse su un'area e notare che l'area viene ingrandita all'interno dello strumento di campionamento. Quando si trova il colore che si desidera utilizzare, fare clic su di esso. Il colore selezionato viene così impostato nell'area in cui si sta lavorando, in questo caso uno dei cursori del gradiente). b) Selezionare il cursore del gradiente a destra ed eseguire il campionamento o impostarlo sul colore della parte inferiore della sezione Intestazione. c) Modificare il colore della linea nel colore della parte inferiore della sezione Intestazione. d) Modificare il colore del font in quello di riempimento della sezione Corpo in modo che sia visibile sui nuovi colori del pulsante. A questo punto, la sezione Intestazione sarà simile per aspetto e funzionalità a una comune barra degli strumenti iOS. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 17 Figura 8: La sezione Intestazione con un titolo e un pulsante 2. Aggiungere un elenco degli articoli da riordinare o disponibili in magazzino Per essere utile ed efficace, il dashboard deve contenere informazioni che mostrino immediatamente agli utenti ciò che devono sapere e strumenti che li aiutino ad eseguire le proprie attività in modo semplice e rapido. Nel caso di questo dashboard, è utile visualizzare un elenco degli articoli da riordinare o disponibili in magazzino, e un grafico che fornisca una panoramica dell'inventario. Creare la tabella e le relazioni Per visualizzare un elenco degli articoli da riordinare o disponibili in magazzino, si dovrà innanzitutto aggiungere un campo alla tabella Dashboard e una relazione alla tabella Inventario: 1. Aprire la finestra Gestisci database utilizzando i tasti di scelta rapida Cmd+Maiusc+D o Ctrl+Maiusc+D oppure selezionare File > Gestisci > Database…. 2. Nella scheda Campi, creare un campo Testo con memorizzazione globale nella tabella Dashboard chiamato "DisponibilitàDashboard". 3. Nella scheda Relazioni, creare una relazione tra la ricorrenza di tabella Inventario e la nuova ricorrenza di tabella Dashboard: a) Fare clic e trascinare una linea da DisponibilitàDashboard nella ricorrenza di tabella Dashboard a Disponibilità nella ricorrenza di tabella Inventario (è possibile si debba scorrere verso il basso l'elenco dei campi nella ricorrenza di tabella Inventario per visualizzare Disponibilità). b) Oppure selezionare lo strumento Crea relazione in basso a sinistra nella finestra Gestisci database, selezionare le ricorrenze di tabella in ogni colonna e selezionare il campo Disponibilità nella colonna Inventario e DisponibilitàDashboard nella colonna Dashboard. 4. Modificare la relazione in un prodotto cartesiano, selezionando il simbolo "x" al fondo dell'elenco a discesa tra le colonne delle tabelle. (Se la relazione è stata creata con il metodo descritto al punto 4a di cui sopra, fare doppio clic sulla linea della relazione per visualizzare la finestra di dialogo Modifica relazione, quindi selezionare "x" come operatore cartesiano). Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 18 Figura 9: Selezione di un prodotto cartesiano 5. Fare clic su OK per chiudere la finestra di dialogo Gestisci database. Figura 10: Ricorrenze di tabella con relazioni nel grafico delle relazioni Creare il portale A questo punto, aggiungere un portale basato sulla nuova relazione: 1. Nel modo Formato scheda, aggiungere le guide (se non è già stato fatto) e posizionarle a 15 pt, 500 pt, 515 pt e 751 pt. In questo modo il formato risulterà efficacemente suddiviso in 2/3 e 1/3, con un bordo di 15 pt a sinistra e a destra e uno spazio di 15 pt tra le "colonne". Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 19 2. Selezionare lo strumento Portale nella barra degli strumenti e trascinarlo in modo da creare un portale sul formato. 3. Quando viene visualizzata la finestra di dialogo di impostazione del portale, selezionare Inventario dall'elenco a discesa "Mostra i record correlati di:". Figura 11: Aggiunta di un portale al formato 4. Selezionare la casella "Mostra la barra di scorrimento verticale". 5. Fare clic sul pulsante "Specifica" accanto a "Filtra record portale". 6. Inserire il seguente calcolo nell'area Specifica il calcolo: Dashboard::DisponibilitàDashboard = Inventario::Disponibilità (In un momento successivo del processo si aggiungeranno dei pulsanti per impostare il valore di Dashboard::DisponibilitàDashboard). Figura 12: Specifica del calcolo di filtraggio Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 20 7. Fare clic su OK. 8. In Numero di righe, inserire 7 e fare clic su OK. Figura 13: La finestra di dialogo Impostazione portale 9. Nella finestra di dialogo "Aggiungi campi al portale", spostare i seguenti campi nella colonna "Campi inclusi": • Immagine | Contenitore • Articolo • Unità disponibili • Costo unitario Figura 14: Selezione dei campi per il portale 10. Fare clic su OK Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 21 Ridimensionare il portale Ora il nuovo portale è presente sul formato e con ogni probabilità dovrà essere allineato e ridimensionato. Innanzitutto, tenendo sotto controllo la scheda Posizione della finestra Impostazioni come riferimento, spostare il portale a 144 pt dal bordo superiore del formato e a 15 pt dal bordo sinistro, allineato alla guida sinistra. Oppure, anziché trascinare il portale, è possibile modificare semplicemente i valori Superiore e Sinistra nella finestra Impostazioni. A questo punto, ridimensionare il portale in modo da allineare il margine destro alla guida a 500 pt (impostando una larghezza del portale di 485 pt) e da portare il margine inferiore a 686 pt (impostando un'altezza del portale di 542 pt). Anche in questo caso è possibile inserire i valori nella scheda Posizione della finestra Impostazioni o fare clic e trascinare i quadratini sul portale per ridimensionarlo. Se le opzioni Allinea alle guide o Allinea alla griglia sono selezionate, può essere difficile ridimensionare il portale in modo che rispetti dimensioni precise, trascinando i quadratini; modificare i valori nella finestra Impostazioni è il metodo più preciso. Figura 15: Valori di Posizione e Dimensione per il portale nella finestra Impostazioni Ridimensionare i campi Ridimensionare il campo Immagine | Contenitore con una larghezza di 70 pt per un'altezza di 70 pt, quindi ridimensionare gli altri campi in modo che siano posizionati comodamente nel portale. (Per Articolo è possibile impostare un'altezza di 70 pt se si prevede che i valori all'interno di questo campo possano richiedere più spazio). Inoltre, selezionare tutti i campi e rimuovere riempimento e linee (selezionare Nessuno dall'elenco a discesa Riempimento nella scheda Aspetto della finestra Impostazioni, quindi selezionare Nessuno dall'elenco a discesa Linea o fare clic sulla casella "Tutti i bordi" sotto l'elenco a discesa Linea). Il risultato deve essere uguale a quello riportato nella figura 16: Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 22 Figura 16: Attributi Riempimento e Linea del campo impostati su Nessuno nella finestra Impostazioni Ridimensionamento automatico del portale Affinché il portale e i suoi contenuti si allarghino correttamente quando si ruota il dispositivo, è necessario configurare il ridimensionamento automatico in modo adeguato. A questo scopo selezionare il portale (solo il portale e non i campi) e attivare tutte le icone del lucchetto nell'area Autodimensionamento della scheda Posizione della finestra Impostazioni (le icone attivate hanno l'aspetto di un lucchetto, mentre quelle disattivate sono grigie con una casella bianca). Figura 17: Impostazioni Posizione e Autodimensionamento per il portale nella finestra Impostazioni A questo punto il portale si allarga o restringe in base alla rotazione del dispositivo. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 23 Ridimensionamento automatico dei campi Il ridimensionamento automatico dei campi all'interno del portale dovrebbe essere leggermente diverso: per il campo Immagine | Contenitore si devono ancorare la parte superiore e il margine sinistro, mentre per il campo Articolo si devono ancorare la parte superiore e i margini sinistro e destro e per il campo Unità e Costo unitario si devono ancorare la parte superiore e il margine destro. Quando il portale si allarga, Immagine | Contenitore manterrà la propria posizione, mentre Articolo si allargherà e Unità e Costo unitario si sposteranno a destra per consentire l'allargamento di Articolo. Per tutti i campi del portale, deselezionare le caselle Modo Usa e Modo Trova relative ad Inserimento campo (nella scheda Dati della finestra Impostazioni). Disattivando l'inserimento nei campi, gli utenti non potranno accedere ai campi o modificarne i valori quando toccano una riga. Aggiungere una linea al portale Ora si aggiungerà una linea divisoria tra una riga e l'altra, per conferire al formato un aspetto ancora più simile a un'interfaccia iOS. Selezionare lo strumento Linea dalla barra degli strumenti e disegnare una linea sul fondo dei campi nella prima riga del portale. Tenendo premuto il tasto Maiusc mentre si trascina il mouse, la linea viene mantenuta in orizzontale. (Tenendo premuto il tasto Maiusc mentre si disegna una linea in verticale, la linea viene mantenuta in verticale). Spostare e ridimensionare la linea in base alle proprie esigenze all'interno e attraverso la riga del portale, ma non nella barra di scorrimento del portale. Utilizzare le opzioni di ridimensionamento automatico nella scheda Posizione della finestra Impostazioni per ancorare la parte superiore, il margine sinistro e il margine destro della linea. In questo modo la linea si allungherà con il portale quando verrà cambiato l'orientamento. Aggiungere i titoli al portale Quindi aggiungere i titoli al portale. Fare doppio clic sullo strumento Testo nella barra degli strumenti (facendo doppio clic l'uso dello strumento viene bloccato per un tempo indeterminato) e fare clic sul campo Immagine | Contenitore. Digitare "Immagine". Fare clic su ognuno degli altri campi e digitare un titolo appropriato. Dopo aver inserito l'ultimo titolo, fare clic sullo strumento Selezione nella barra degli strumenti per disattivare lo strumento Testo (o premere due volte Invio – non Ritorno – sulla tastiera). Trascinare ogni titolo nel punto definitivo utilizzando le guide dinamiche per allinearlo con gli altri titoli e con i campi appropriati, quindi posizionare ogni titolo a 120 pt dal bordo superiore. Poiché con questo tema ogni campo ha 5 pt di spaziatura interna su ciascun lato, è bene tenerne conto quando si allineano i titoli. Per i titoli è possibile impostare un font della dimensione massima di 16 pt per risparmiare spazio. Per selezionare tutti i titoli, trascinare il puntatore su di essi (tenere presente che se si tocca qualunque altro elemento, anch'esso verrà incluso nella selezione). Modificare la dimensione del font selezionando una dimensione personalizzata dalla barra di formattazione o da Formattazione > Dimensione. (Molte dimensioni dei font possono essere impostate anche utilizzando i tasti di scelta rapida Cmd+Shift+< o Ctrl+Shift+< per ridurre la dimensione o Cmd+Shift+> o Ctrl+Shift+> per aumentarla). Per conferire ai titoli e al portale un aspetto che ne sottolinei l'appartenenza allo stesso oggetto, selezionare lo strumento Rettangolo angoli arrotondati dalla barra degli strumenti e disegnare una casella intorno ai titoli. Ridimensionare la casella in modo che abbia la stessa larghezza del portale e impostarne l'altezza su 34 pt. Posizionarla a 112 pt dal bordo superiore e allinearla al bordo sinistro al portale, tra le guide. Portare la casella in secondo piano, dietro i titoli. Successivamente, copiare lo stile del portale facendo clic sul pulsante "Copia lo stile dell'oggetto" nella sezione Stile della scheda Aspetto e applicarlo alla casella selezionandola e Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 24 facendo clic sul pulsante "Incolla uno stile". Applicando un colore di riempimento alla casella, i titoli risalteranno di più; provare un colore basato sul colore della sezione Corpo, con una saturazione leggermente inferiore e una luminosità leggermente superiore. Infine, disattivare gli angoli in basso a sinistra e a destra della casella utilizzando le impostazioni del raggio dell'angolo nella scheda Aspetto della finestra Impostazioni, quindi selezionare il portale e disattivarne gli angoli in alto a sinistra e a destra. Angoli In queste istruzioni si accetta il valore predefinito 5 per gli angoli. Provare ad impostare valori maggiori o minori sul proprio formato per vedere con quali valori si ottiene l'aspetto migliore, in particolare con i gruppi di campi. Ad esempio, valori maggiori possono funzionare meglio sull'iPad piuttosto che sull'iPhone. Allineare i titoli e i campi Per rendere l'aspetto del portale ancora più attraente, allineare i campi Unità e Costo unitario e i titoli al bordo destro e allineare fisicamente ogni titolo al margine destro del rispettivo campo meno 5 pt (la spaziatura interna ai campi prevista da questo tema). A questo punto, il formato dovrebbe apparire come nella figura 18: Figura 18: Campi e titoli allineati tra loro Dati! Per visualizzare i dati nel portale, aggiungere dei record alla tabella Inventario utilizzando il formato Dettagli prodotto nel gruppo dei formati Scrivania. Assicurarsi di inserire la categoria, l'articolo e il prezzo unitario. Inoltre, aggiungere un'immagine ad ogni record. Sulla maggior parte ma non su tutti i record, fare clic su Aggiungi transazione per aggiungere almeno una voce con la data, il numero di lotto, la descrizione e le unità in ingresso e/o in uscita. In questo modo per alcuni record verrà visualizzato lo stato "In magazzino" e per altri "Riordine richiesto" (questo viene calcolato nel campo Disponibilità in base ai campi Unità disponibili e Punto di riordino). Una volta creati i record dell'inventario, tornare a Dashboard inventario iPad per proseguire con la creazione del formato. 3. Aggiungere i pulsanti per modificare gli articoli visualizzati nel portale Poiché il portale ha un filtro basato sul valore del campo DisponibilitàDashboard, agli utenti deve essere consentito di impostare il valore su "Riordine richiesto" o "In magazzino", i due valori presenti nel campo Disponibilità della tabella Inventario. Per facilitare gli utenti, creare due pulsanti sopra il portale. Il primo pulsante deve eseguire l'istruzione Imposta campo per impostare DisponibilitàDashboard su "Riordine richiesto" e deve essere chiamato "Riordine richiesto". Analogamente, il secondo pulsante deve eseguire l'istruzione Imposta campo per impostare DisponibilitàDashboard su "In magazzino" e deve essere chiamato "In magazzino". Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 25 Per fare in modo che i pulsanti si armonizzino con il resto del progetto, impostare per ognuno di essi una larghezza pari all'esatta metà di quella del portale (in questo caso, ogni pulsante deve essere largo 242,5 pt). Allineare il primo pulsante alla guida sinistra a 15 pt e allineare il margine destro del secondo pulsante alla guida a 500 pt, quindi allineare entrambi i pulsanti alla stessa altezza sul formato, a 59 pt dal bordo superiore. In questo modo i pulsanti verranno collocati nello spazio sopra il portale e saranno allineati l'uno accanto all'altro, senza spazi fra di loro. Ridimensionare l'altezza dei pulsanti a 38 pt. Successivamente, utilizzando le impostazioni del raggio dell'angolo nella scheda Aspetto della finestra Impostazioni, deselezionare gli angoli in alto a destra e in basso a destra del primo pulsante (quello a sinistra). Quindi, selezionare solo il secondo pulsante e deselezionare gli angoli in alto a sinistra e in basso a sinistra. Infine, impostare il ridimensionamento automatico di entrambi i pulsanti in modo che sia ancorata solo la parte superiore. In questo modo, cambiando l'orientamento, i pulsanti saranno liberi di spostarsi a sinistra e a destra, centrati sopra il portale. Per un tocco di stile in più, impostare la Formattazione condizionale per ogni pulsante se il campo DisponibilitàDashboard contiene il valore impostato dal pulsante. Poiché il testo sarà visualizzato in basso sul pulsante, se con la formattazione condizionale viene messo in grassetto, optare per cambiare il colore del testo, i bordi o il riempimento dello sfondo. Impostare DisponibilitàDashboard all'apertura del file Se si desidera che gli utenti visualizzino gli articoli impostati su Riordine richiesto o In magazzino appena accedono al dashboard, aggiungere un'istruzione allo script eseguito SuAperturaPrimaFinestra per impostare il campo DisponibilitàDashboard sul valore appropriato. 4. Aggiungere un pulsante che consenta di accedere ai dettagli degli articoli Per facilitare l'accesso da parte degli utenti ai dettagli dei singoli articoli presenti nel portale, aggiungere un pulsante che consenta di accedere al record correlato: 1. Selezionare lo strumento Pulsante dalla barra degli strumenti e disegnare un pulsante sopra la prima riga del portale (in questa fase non occorre prestare attenzione alle dimensioni). 2. Nella finestra di dialogo Impostazione pulsanti, selezionare Vai al record correlato. 3. Fare clic su Specifica e selezionare Inventario dall'elenco a discesa "Ricava i record correlati da:". 4. Dall'elenco a discesa "Mostra record usando il formato:" selezionare Formato, quindi selezionare Dettagli prodotto | iPad dalla finestra di dialogo Specifica formato. 5. Fare clic su OK per chiudere la finestra di dialogo Specifica formato. 6. Selezionare la casella accanto a "Mostra soloi record correlati". 7. Fare clic su OK per chiudere la finestra di dialogo Opzioni "Vai al record correlato". 8. Fare clic su OK per chiudere la finestra di dialogo Impostazione pulsanti. 9. Fare clic fuori dal pulsante per salvarlo senza aggiungere alcun titolo. A questo punto, è possibile che il pulsante copra la maggior parte dei campi. Pertanto, andrà spostato dietro i campi e poi formattato in modo da non distogliere l'attenzione dal resto del formato. Per spostare il pulsante dietro i campi, prima di tutto modificarne le dimensioni in modo che riempia il portale, coprendo completamente i campi, ma senza sovrapporsi alla barra di scorrimento. Quindi selezionare Organizza > Porta in secondo piano. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 26 Per fare in modo che il pulsante si fonda con lo sfondo, rimuovere il riempimento, le linee e i raggi dell'angolo del pulsante utilizzando la scheda Aspetto della finestra Impostazioni. Inoltre, ancorare la parte superiore, il margine sinistro e il margine destro del pulsante in modo che scorra e si allarghi con il portale quando si cambia orientamento. Tenere presente che, avendo deselezionato l'inserimento nei campi nei modi Usa e Trova per i campi del portale, gli utenti non saranno in grado di accedere ai campi toccando una riga, attivando invece sempre il pulsante. Inoltre, poiché al pulsante viene applicato automaticamente uno stato premuto, il pulsante ora verrà visualizzato nell'intera riga del portale dietro i campi quando un utente tocca la riga (e quindi il pulsante). È necessario aggiungere un pulsante al formato Dettagli prodotto | iPad per tornare al formato Dashboard. Per essere certi che gli utenti visualizzino i dati più aggiornati attraverso il dashboard, creare un nuovo script "Aggiorna" con un'unica istruzione: Aggiorna finestra [Elimina i risultati dalla cache]. Nel formato Dashboard inventario iPad, attivare i trigger di script SuCaricamentoRecord e SuEntrataFormato per eseguire lo script Aggiorna. L'azione Aggiorna finestra influisce sul visualizzatore Web aggiunto al passo 7 (di seguito). Vedere tale sezione per maggiori dettagli. 5. Aggiungere il valore totale dell'inventario Per mostrare agli utenti il valore totale dell'inventario, creare un campo Calcolo nella tabella Dashboard con il calcolo: Somma(Inventario::Valore magazzino) Aggiungere il nuovo campo al formato a destra del portale, con il titolo "Valore totale dell'inventario". Nella scheda Dati della finestra Impostazioni, nella sezione Formattazione dati, impostare il formato del campo su Valuta e applicare le opzioni desiderate (ad esempio, un numero fisso di 2 decimali con separatore delle migliaia attivato). Ridimensionare il campo in modo che sia posizionato tra le guide che costituiscono la "colonna" destra sul formato, con il margine sinistro a 515 pt e il margine destro a 752 pt (per una larghezza del campo pari a 237 pt). Allineare il bordo superiore del campo al portale a 144 pt, quindi allineare il titolo ai titoli sopra il portale. Successivamente, formattare il campo e il titolo in modo che siano allineati al centro, allinearli al centro uno rispetto all'altro e ancorare solo la parte superiore e il margine destro. In questo modo il titolo e il campo verranno mantenuti a destra del portale quando verrà cambiato l'orientamento. Infine, deselezionare le opzioni per permettere l'inserimento nel campo nei modi Usa e Trova, nella scheda Dati della finestra Impostazioni. Affinché l'aspetto del titolo e del campo corrisponda a quello del portale, duplicare la casella dietro i titoli del portale e ridimensionarla in modo che corrisponda alla larghezza del campo Valore totale. Allineare la casella tra le guide, centrata con il testo e il campo, con il bordo superiore nella stessa posizione della casella originale (122 pt). Portare la casella in secondo piano in modo che si trovi dietro il titolo, quindi ancorare la parte superiore e il margine destro. 6. Aggiungere un grafico che mostri la quantità di articoli per ogni categoria Un'istantanea dell'inventario aiuterà gli utenti a comprendere l'immagine più ampia del sistema. Questo grafico si baserà su un nuovo campo Riassunto in Inventario, configurato per eseguire il totale del campo Unità disponibili. Creare il campo in Inventario prima di aggiungere il grafico al formato (il nome del campo è sUnitàDisponibili nell'elenco di seguito). Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 27 Per aggiungere il grafico, nel modo Formato scheda, selezionare lo strumento Grafico dalla barra degli strumenti e trascinare un rettangolo a destra del portale. Nella finestra di dialogo Impostazione grafico, formattare l'area Grafico come segue: • • • • • • • Titolo del grafico: "Quantità per categoria" Tipo di grafico: Barre Titolo dell'asse delle X: "Quantità" Dati dell'asse delle X, specificare il RicavaRiassunto(Inventario::sUnitàDisponibili; Inventario::Categoria) Titolo dell'asse delle Y: "Categoria" Dati dell'asse delle Y, specificare il nome del campo: Inventario::Categoria Mostra coordinate su grafico calcolo: Passare all'area Stili e modificare le Dimensioni relative del testo, al fondo, in -1. Passare all'area Origine dati e selezionare quanto segue: • Dati del grafico: Record correlati • Tabella correlata: Inventario • Impostare il Criterio di ordinamento dei record correlati su Categoria • Visualizzazione del grafico quando è ordinato: Gruppi di record riassunti Figura 19: Le tre sezioni della finestra di dialogo Impostazione grafico Fare clic su Esci per chiudere la finestra di dialogo Impostazione grafico. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 28 A questo punto, ridimensionare il grafico in modo che sia posizionato nella seconda "colonna" creata dalle guide sul formato, con il margine sinistro allineato alla guida a 515 pt e il margine destro allineato a 752 pt. L'altezza richiesta dipende in parte dal numero delle categorie assegnate agli articoli dell'inventario e in parte dalla quantità di spazio disponibile. Per il momento, assegnare al grafico un'altezza di 229 pt. Allineare il margine superiore a 192 pt (questo crea uno spazio di 15 pt tra il bordo inferiore del campo del totale dell'inventario e il bordo superiore del grafico, riflettendo lo spazio tra i pulsanti e la casella del titolo sopra il portale). 7. Aggiungere una mappa della posizione corrente dell'utente Per fornire ancora più informazioni all'utente, e per trarre vantaggio della funzione Localizzazione in FileMaker Go, aggiungere un visualizzatore Web che localizzi la posizione corrente dell'utente su una mappa. Per aggiungere un visualizzatore Web, selezionare lo strumento Visualizzatore Web dalla barra degli strumenti e disegnare un rettangolo verso il fondo della seconda "colonna". Nella finestra di dialogo "Impostazione visualizzatore Web", nell'area Indirizzo Web, specificare il calcolo: Dichiara(p = Get(PiattaformaSistema); If(p = 3; "https://maps.google.com/maps?q=" & ParoleaSinistra(CercaeSost(Localizzazione(10; 5); " "; "");2); "data:text/html, <body>Si sta utilizzando un " & If(p > 0; "Mac"; "computer Windows") & "... Aprire il file su un dispositivo iOS per visualizzare una mappa della posizione. </body>" ) ) Il calcolo restituisce su iOS l'URL di una mappa di Google, comprese la latitudine e la longitudine del dispositivo con una precisione di 10 metri. Tenere presente che le funzioni Localizzazione e ValoriLocalizzazione non restituiscono un risultato in FileMaker Pro su computer desktop o portatile; il resto del calcolo visualizza un messaggio invece di richiamare un URL che non verrà calcolato correttamente. Fare clic su OK per chiudere la finestra di dialogo "Impostazione visualizzatore Web" e ridimensionare il visualizzatore Web con una larghezza uguale a quella del grafico (237 pt) e un'altezza di 217 pt; quindi allineare il margine sinistro a 515 pt e il bordo superiore a 468 pt. Ancorare la parte superiore e il margine destro del visualizzatore Web in modo che rimanga attaccato al margine destro, insieme al grafico, quando viene cambiato l'orientamento. Affinché l'aspetto del portale corrisponda a quello del campo Valore totale, duplicare il titolo e la casella sopra il campo Valore totale e posizionarli a 436 pt dal bordo superiore (raggrupparli insieme per visualizzare il valore del bordo superiore, quindi separarli per continuare a lavorare). Anche in questo caso lo spazio tra il grafico e la casella del titolo della mappa è di 15 pt, riflettendo gli altri spazi orizzontali e verticali. Cambiare il titolo in "Posizione". È una mappa, e gli utenti vorranno farvi clic sopra e allargarla. La mappa di Google comprende pulsanti per gestire la mappa; sarebbe quindi controproducente aggiungere un pulsante direttamente alla mappa. Trasformare invece la casella del titolo sopra la mappa in un pulsante facendovi clic sopra con il tasto destro del mouse e selezionando Impostazione pulsanti…. Impostare il pulsante in modo che esegua l'istruzione di script Apri URL, senza finestra di dialogo, specificando l'URL: Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 29 Dichiara( L = ParoleaSinistra(CercaeSost(Localizzazione(10; 5); " "; "");2); If(Get(VersioneSistema) ≥ 6; "maps://?ll="; "https://maps.google.com/maps?q=") & L ) Questo calcolo parte dalla funzione Dichiara per dichiarare la variabile "L" (per localizzazione) con il risultato della funzione Localizzazione. Successivamente, verifica la versione del sistema per collegarsi a Apple Maps su iOS 6 o versione successiva o a Google Maps sulle versioni iOS precedenti alla 6. Per eseguire lo zoom della mappa visualizzata a un livello diverso rispetto a quello predefinito (pari a 15 sia su Apple Maps che su Google Maps), aggiungere alla fine dell'URL: & "&z=19" //per aumentare lo zoom (maggiore è il numero, maggiore è il livello di zoom) – oppure – & "&z=10" //per diminuire lo zoom Per far capire agli utenti che possono toccare la barra del titolo per visualizzare una mappa più grande, aggiungere un rettangolo largo 30 pt e alto 30 pt e posizionarlo a 438 pt dal bordo superiore e a 720 pt dal bordo sinistro, in modo che si trovi 2 pt all'interno dei margini superiore e destro della casella del titolo. Applicare un'immagine di riempimento al rettangolo nella sezione Grafico della scheda Aspetto della finestra Impostazioni e selezionare l'immagine di una mappa (le immagini delle mappe sono disponibili online, se non se ne ha una a portata di mano, oppure è possibile scattare un'immagine di una parte di una mappa della posizione dell'azienda). Selezionare Adatta per riempire dall'elenco a discesa sotto l'anteprima dell'immagine. Ancorare la parte superiore e il margine destro del rettangolo in modo che si sposti con la casella del titolo. Sebbene il pulsante possa essere collegato al rettangolo, le dimensioni sono inferiori ai 44 pt x 44 pt dei pulsanti che è possibile toccare. L'immagine della mappa invita gli utenti a toccarla; collegando il pulsante alla barra del titolo, lo script verrebbe attivato anche toccando indirettamente l'immagine. Un'ultima annotazione sulle prestazioni: poiché il visualizzatore Web sta utilizzando un URL calcolato che comprende la funzione Localizzazione, si aggiorna con qualsiasi evento (quando si accede al formato o lo si aggiorna, quando si cambia l'orientamento del dispositivo iOS, quando gli utenti ritornano alla soluzione, quando si aggiorna manualmente la schermata, ecc.). Se si desidera non eseguire tutte le volte l'aggiornamento, utilizzare uno script per impostare il visualizzatore Web su un URL con la posizione attuale quando si deve aggiornare la mappa. Questo può essere aggiunto allo script Aggiorna richiamato dai trigger di script del formato, o a uno script collegato a un pulsante che gli utenti toccano per aggiornare la mappa, o a uno script programmato con un'istruzione di script SuTimer. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 30 8. Il formato finale Il formato finale deve essere simile a quello riportato nella figura 20: Figura 20: Il formato finale 9. Cosa fare con lo spazio che rimane? Ricordarsi che gli elementi su questo formato sono impostati in modo da allargarsi e scorrere in base all'orientamento. Con orientamento verticale, vi è ancora spazio sotto il visualizzatore Web per visualizzare un altro piccolo elemento. Si potrebbe aggiungere: • • • • Un grafico che mostri l'attività delle vendite (basato sul campo Transazioni magazzino::Unità in uscita) nell'ora, giorno o settimana precedenti, ecc. Un portale alla tabella Transazioni magazzino per visualizzare gli ultimi record aggiunti. Un visualizzatore Web che mostri il grafico dei prezzi di magazzino per l'azienda dell'utente. Un pannello struttura a schede con schede per note sui clienti, appuntamenti e un elenco di cose da fare (che richiederebbe la creazione di tabelle e altri schemi). Se si desidera inserire un elemento in questo spazio, ridimensionarlo in modo che non sia più largo del visualizzatore Web e del titolo e più alto dello spazio tra i bordi inferiori delle sagome della schermata iPad (orizzontale) e iPad (verticale). Di fatto, dovrebbe essere di 30 pt inferiore rispetto allo spazio disponibile, lasciando uno spazio di 15 pt sopra e sotto. Ancorare la parte inferiore e il margine destro dell'elemento e posizionarlo dietro il visualizzatore Web e il titolo, in modo che sia completamente nascosto, allineando il bordo inferiore dell'elemento al bordo inferiore del visualizzatore Web. Con orientamento verticale dell'iPad, l'elemento scorrerà verso Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 31 il basso e verrà visualizzato sotto la mappa. Con orientamento orizzontale, rimarrà nascosto dietro la mappa. 10. Accesso automatico al nuovo formato Nella soluzione pronta per l'uso Voci di inventario, il file è configurato per eseguire uno script "Trigger | Apri finestra iniziale" quando un utente apre il file. Lo script contiene una verifica della piattaforma e accede a un determinato formato. Ora che è stato creato un dashboard per gli utenti dell'iPad, modificare lo script cambiando la prima istruzione Vai al formato, dopo If [ContaRicorrenze ( Get (VersioneApplicazione ) ; "iPad" )] per passare al nuovo formato. Inoltre, come suggerito in precedenza, aggiungere un'istruzione per impostare il campo Dashboard::DisponibilitàDashboard su "Riordine richiesto" o "In magazzino", a seconda di quali prodotti si desidera che gli utenti visualizzino quando accedono per la prima volta al formato Dashboard inventario iPad. Se si sta utilizzando un altro file, assicurarsi di utilizzare un trigger di script SuAperturaPrimaFinestra, in File > Opzioni file… > Trigger di script, e impostarlo in modo che esegua uno script che verifichi la piattaforma, acceda al formato appropriato e imposti il campo. Revisione finale della soluzione Una volta terminata la progettazione della propria soluzione, considerare la possibilità di lavorare con un professionista nel campo della progettazione per una revisione finale, ponendosi le seguenti domande: • • • • Il progetto è equilibrato? o Un lato della pagina è più ricco di contenuto o più scuro rispetto all'altro? E la parte superiore e inferiore? Cambia da formato a formato? Se sì, aiuta la comprensione della pagina da parte dell'utente o lo distrae? o Si è ridotto il numero di colori solo a quelli che supportano le proprie informazioni e/o il proprio marchio? o Si è fatto un uso moderato di caselle e linee? Ve ne sono alcune che possono essere sostituite con semplici spazi? Si ha una gerarchia visiva chiara? o Socchiudere gli occhi. Dove si posa per primo lo sguardo? Quali elementi saltano all'occhio nella pagina? Si tratta degli elementi più importanti per le principali attività che l'utente sta eseguendo? o L'occhio segue un percorso chiaro attraverso la pagina? Questo corrisponde al flusso di attività dell'utente? La navigazione è coerente e facile da capire? o Si sono utilizzati elementi simili allo stesso modo all'interno e tra i formati? o Le icone e gli elementi dell'interfaccia utente derivano da altri software utilizzati dagli utenti? Le icone e il linguaggio nell'interfaccia utente sono chiari, coerenti e privi di errori di grammatica? Testare e distribuire la soluzione Il momento di testare la soluzione è anche il momento in cui pensare a come verrà distribuita. Verrà ospitata su FileMaker Server e gli utenti vi accederanno da remoto? È una soluzione standalone da trasferire sul dispositivo di ciascun utente? Se sì, in che modo gli utenti otterranno una copia? Attraverso un link in una pagina Web, in una e-mail, da un server? Per informazioni sulla distribuzione, vedere la Guida di spiegazione FileMaker – Distribuzione semplificata su iOS disponibile sul sito TechNet di FileMaker. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 32 APPENDICE – Acquisire familiarità con gli strumenti di progettazione di FileMaker Se non si ha ancora familiarità con FileMaker Pro, è importante comprendere i principi di base sull'uso degli strumenti e delle opzioni di progettazione disponibili in FileMaker. Di seguito sono riportati gli strumenti e le opzioni di progettazione disponibili in FileMaker Pro 12; per ciascuno di essi è riportata anche una dimostrazione di esempio utilizzando la soluzione pronta per l'uso FileMaker "Gestione dei contenuti": o Temi o Elaborazione del testo o Riempimenti: sfondi con colore a tinta unita, gradienti e immagini o Linee dei bordi e formattazione degli angoli o Stati degli oggetti o Icone ed elementi grafici o Opzioni di accessibilità Temi FileMaker Pro 12 offre numerosi temi progettati in modo specifico per iPhone e iPad. Sono chiamati temi "Aspetto" e comprendono sfondi coordinati, bordi, font, ombreggiature, e molto altro ancora. Scopriamo come temi diversi possano influenzare l'interfaccia grafica di una soluzione: 1. Avviare FileMaker Pro 12. 2. Selezionare File > Nuovo da soluzione pronta per l'uso… 3. Selezionare Gestione dei contenuti. 4. Selezionare Visualizza > Modo Formato scheda. 5. Selezionare Formati > Cambia tema… 6. Selezionare diversi temi dall'elenco Temi del formato per visualizzare un'anteprima di ogni tema. 7. Selezionare uno qualsiasi dei temi contenenti la parola "Aspetto" per visualizzare i temi progettati in modo specifico per iPhone e iPad. Prendere nota di quelli che piacciono di più per applicarli quando si crea la propria soluzione al passo 4. Figura 21: Il tema Onice è quello predefinito della soluzione pronta per l'uso Gestione dei contenuti. Figura 22: Selezionando Aspetto Grigio freddo viene applicato un tema progettato in modo specifico per iPhone e iPad. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 33 Elaborazione del testo È possibile scegliere tra numerose opzioni relative a font, dimensioni, stile, allineamento, orientamento e colore del testo nella soluzione. Per provare diverse opzioni di elaborazione del testo: 1. Selezionare Visualizza > Modo Formato scheda. 2. Selezionare Visualizza > Vai a formato > iPad > Dettagli contenuto | iPad. 3. Fare clic sull'elemento di testo <<Titolo>> per selezionarlo. 4. Selezionare Formattazione > Carattere, quindi selezionare il font desiderato. In genere le soluzioni pronte per l'uso FileMaker utilizzano Helvetica Neue, un font ben visualizzabile su iPad e iPhone. Di seguito è riportato un breve elenco di font che è possibile utilizzare sui dispositivi: • Helvetica Neue • Verdana • Gils Sans • Times New Roman • Georgia • Courier New 5. Selezionare Formattazione > Dimensione, Stile, Allinea testo, Interlinea, Orientamento e Colore testo per visualizzare tutti i diversi attributi di testo che è possibile utilizzare. Figura 23: Modifica della dimensione del testo Riempimenti: sfondi con colore a tinta unita, gradienti e immagini I riempimenti possono essere sfondi con colore a tinta unita, gradienti e immagini e possono essere applicati a testo, pulsanti, campi, oggetti e molto altro ancora. Per provare i diversi riempimenti, seguire le istruzioni di seguito: 1. Fare clic sull'elemento di testo <<Titolo>> per selezionarlo. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 34 2. Se la finestra Impostazioni non è già visualizzata sulla schermata, selezionare Visualizza > Impostazioni (o utilizzare i tasti di scelta rapida Cmd+I o Ctrl+I). 3. Fare clic sulla scheda Aspetto. 4. Fare clic sull'elenco a discesa Riempimento nella sezione Grafico della finestra Impostazioni. Figura 24: Aggiunta di un colore di riempimento 5. Selezionare Colore a tinta unita per cambiare lo sfondo in un colore a tinta unita. Fare clic sulla casella di selezione del colore sotto per scegliere il colore desiderato. 6. Selezionare Gradiente per visualizzarne l'effetto, quindi spostare i cursori e sfruttare le altre opzioni per modificare l'aspetto del gradiente. Per un esempio, guardare i pulsanti e le sezioni Intestazione nei temi Onice e Grigio freddo creati per ottenere effetti diversi. Utilizzare un contrasto maggiore tra i cursori sulla barra del gradiente per dare maggiore profondità a barre degli strumenti e pulsanti; tuttavia, per gli sfondi sullo stesso oggetto del formato, utilizzare un contrasto minimo tra i cursori di un gradiente lineare, o un gradiente radiale con una distanza elevata tra il cursore iniziale e quello finale. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 35 Linee dei bordi e formattazione degli angoli È possibile applicare colori, spessori e motivi diversi alle linee dei bordi che circondano testo, pulsanti, campi, oggetti e molto altro ancora. È inoltre possibile modificare il raggio degli angoli dei campi. Per modificare le linee dei bordi e la formattazione degli angoli, seguire le istruzioni di seguito: 1. Fare clic sul campo Tipo per selezionarlo. 2. Aprire la finestra Impostazioni, se non è già visualizzata sulla schermata 3. Fare clic sulla scheda Aspetto. 4. Fare clic sull'elenco a discesa Linea nella sezione Grafico della finestra Impostazioni. Figura 25: Modifica dei bordi 5. Selezionare Nessuno, Continua, Tratteggiato e Punteggiato per visualizzare i diversi effetti. 6. Modificare le dimensioni dei punti della linea per renderla più spessa o più sottile. 7. Fare clic sulla casella di selezione del colore per scegliere il colore delle linee dei bordi. 8. Fare clic sulla serie di icone appena sotto per vedere in che modo le linee dei bordi possono circondare completamente il campo o essere visualizzate solo sul bordo sinistro, superiore, destro o inferiore. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 36 9. Per cambiare il raggio dell'angolo, modificare il valore nel campo Raggio dell'angolo da 5 a 20 per vedere in che modo un valore più alto arrotonda gli angoli. Selezionare valori diversi per visualizzare i diversi effetti. Figura 26: Modifica degli angoli Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 37 Stati degli oggetti Per fornire agli utenti un feedback visivo sulle azioni eseguite nel modo Usa, gli oggetti possono essere formattati per visualizzare diversi attributi. Ad esempio, è possibile formattare un pulsante in modo che visualizzi un colore di riempimento diverso (e altre opzioni di formattazione, come un bordo diverso) quando viene premuto da un utente. Per impostare lo stato di un oggetto: 1. Fare clic sul testo Elenco contenuti nell'angolo in alto a sinistra del formato. 2. Aprire la finestra Impostazioni, se non è già visualizzata sulla schermata. 3. Fare clic sulla scheda Aspetto. 4. Fare clic su Stato normale e selezionare Passaggio del mouse. 5. Selezionare un Riempimento con Colore a tinta unita, quindi scegliere il colore desiderato. In alternativa, è possibile cambiare la luminosità del colore del 25%, o aumentare lo spessore dei bordi di 1 o 2 punti e impostare un colore più luminoso. Figura 27: Modifica dello stato di un oggetto Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 38 Figura 28: Il pulsante al passaggio del mouse In questo modo il testo "Elenco contenuti" cambia colore quando un utente vi passa sopra con il mouse nel modo Usa. 6. Scegliere tutte le diverse opzioni dall'elenco a discesa e provare a configurare opzioni di formattazione differenti per ciascuna di esse: a. Stato normale: l'oggetto è disponibile per l'utente, ma non è attualmente selezionato. b. Attivo: l'oggetto è stato attivato. c. Passaggio del mouse: l'utente posiziona il puntatore sopra l'oggetto (solo Mac e Windows, non iOS) d. Premuto: si è fatto clic o si è toccato un oggetto, senza rilasciarlo. Icone ed elementi grafici Le icone permettono di risparmiare spazio e possono essere utilizzate con lingue diverse. Una ricerca delle immagini su Internet mostra numerosi esempi di icone che rappresentano un'azione particolare. Oltre alle icone, il logo di una scuola o di un'azienda aumenta il livello di personalizzazione della soluzione e la contraddistingue per gli utenti. Detto questo, utilizzare ovunque è possibile icone e immagini compatibili con le aspettative sul dispositivo in cui la soluzione verrà principalmente utilizzata. Devono supportare le attività, semplificandone la realizzazione, e non devono mai distogliere o allontanarsi dallo scopo della soluzione. Inoltre, tenere presente che alcuni simboli di uso comune possono essere interpretati in modo errato in alcuni contesti. Per evitarlo, testare le icone con un pubblico diverso. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 39 In genere le icone per iOS hanno una sorgente luminosa direttamente sopra il centro. Ad esempio, di seguito sono riportate le icone di FileMaker Go per iPad e iPhone e l'icona dell'applicazione Meteo di iOS: Figura 29: Icone iOS con l'effetto di una sorgente luminosa in alto Se si creano icone ed elementi grafici personalizzati, applicarvi gli effetti per imitare la sorgente luminosa dall'alto. Con un display Retina, tutti gli elementi grafici e le immagini devono avere una risoluzione sufficientemente alta per non risultare sfocati. Tuttavia, tenere presente che maggiore è l'immagine, maggiore è il tempo richiesto per caricarla. In genere, utilizzare immagini con risoluzione a 144 DPI. Posizionare le icone in una posizione simile in tutti i formati; gli utenti si aspettano che gli elementi e gli oggetti azione vengano visualizzati in posizioni relativamente simili quando passano da un formato a un altro. Anche se due formati hanno scopi e contengono dati completamente diversi, la posizione simile dei pulsanti di navigazione, delle icone, ecc. aiuta l'utente a comprendere ciò che sta visualizzando e a utilizzare in modo efficace la soluzione. Esaminare diverse soluzioni pronte per l'uso FileMaker per esempi sul posizionamento delle icone, sulla formattazione e sul ridimensionamento specifico per ciascun dispositivo. Inoltre, Apple offre linee guida sulla creazione di immagini e icone personalizzate nella propria iOS Developer Library. Accessibilità Per la maggior parte degli utenti, bloccare il livello di zoom su 100%, poiché ogni elemento è stato ridimensionato per funzionare correttamente sul dispositivo. Gli utenti con problemi di vista possono essere autorizzati a lavorare con la soluzione a un livello più alto di zoom; sarà quindi necessario consentire lo zoom per questi utenti. Per impostare il livello di zoom e bloccarlo o sbloccarlo, utilizzare l'istruzione di script Imposta livello di zoom e le relative opzioni. Può essere utile inserire una tabella di utenti nel sistema e segnare se per ciascuno di essi è consentito lo zoom. Non appena un utente esegue l'accesso, uno script deve confrontare il nome account con i nomi memorizzati nella tabella di utenti, quindi impostare il livello di zoom e le opzioni in base alla configurazione memorizzata per l'utente. In alternativa, il primo formato che tutti gli utenti visualizzano una volta eseguito l'accesso può contenere un pulsante che gli utenti possono selezionare se preferiscono lavorare con lo zoom. Naturalmente il pulsante deve essere formattato in modo da poter essere utile per gli utenti con problemi di vista. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 40 Risorse Letture consigliate che hanno contribuito alla stesura del presente documento: • • iOS Human Interface Guidelines (Linee guida per interfacce umane per iOS) Mobile First di Luke Wroblewski Altre Guide operative di FileMaker che trattano diversi argomenti, tra cui la distribuzione delle soluzioni, la sicurezza nei gruppi di lavoro e la sincronizzazione, sono disponibili per il download su http://www.filemaker.com/it/technet/ Vi sono inoltre alcuni argomenti della Guida di FileMaker Pro in grado di aiutare l'utente a eseguire le operazioni di seguito con gli oggetti del formato: • • • • • • • • • • • • • • • Selezionare gli oggetti Utilizzare la finestra Impostazioni per formattare gli oggetti Copiare, duplicare ed eliminare gli oggetti Copiare gli attributi degli stili tra gli oggetti o le sezioni del formato Spostare gli oggetti in un formato Ridimensionare e cambiare la forma degli oggetti Impostare le opzioni di ridimensionamento automatico per gli oggetti del formato Impostare il riempimento, lo stile delle linee e i bordi sugli oggetti Definire lo stato di visualizzazione per un oggetto Riempire un oggetto o una sezione del formato con un gradiente Riempire un oggetto o una sezione del formato con un'immagine Formattare le immagini in un formato Proteggere gli oggetti dalle modifiche Assegnare nomi agli oggetti Definire la formattazione condizionale per gli oggetti del formato Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 41 © 2012 FileMaker, Inc. Tutti i diritti riservati. FileMaker è un marchio di FileMaker, Inc., registrato negli Stati Uniti e in altri Paesi. Il logo della cartella è un marchio di FileMaker, Inc. Tutti gli altri marchi sono di proprietà dei rispettivi proprietari. Le specifiche e la disponibilità dei prodotti sono soggette a modifiche senza preavviso. IL PRESENTE DOCUMENTO VIENE FORNITO NELLO STATO IN CUI SI TROVA, SENZA ALCUNA GARANZIA. FILEMAKER, INC., NON RICONOSCE ALCUNA GARANZIA, ESPRESSA O IMPLICITA, COMPRESE LE GARANZIE DI COMMERCIABILITÀ E IDONEITÀ PER UNO SCOPO SPECIFICO E LE GARANZIE DI NON VIOLAZIONE. IN NESSUN CASO FILEMAKER, INC., O I SUOI FORNITORI POTRANNO ESSERE RITENUTI RESPONSABILI DI QUALSIASI DANNO, COMPRESI DANNI DIRETTI, INDIRETTI, INCIDENTALI, CONSEGUENTI, PER PERDITA DI GUADAGNO, PUNITIVI O SPECIALI, ANCHE SE FILEMAKER, INC., O I SUOI FORNITORI SONO STATI AVVISATI DELLA POSSIBILITÀ DI TALI DANNI. IN ALCUNI STATI NON È CONSENTITA L'ESCLUSIONE O LA LIMITAZIONE DELLA RESPONSABILITÀ. FILEMAKER HA IL DIRITTO DI APPORTARE MODIFICHE AL PRESENTE DOCUMENTO, IN QUALSIASI MOMENTO E SENZA ALCUN PREAVVISO. IL PRESENTE DOCUMENTO POTREBBE NON ESSERE AGGIORNATO. FILEMAKER NON È TENUTO AD AGGIORNARE LE INFORMAZIONI IN ESSO CONTENUTE. Guida operativa di FileMaker – Progettare soluzioni aziendali personalizzate per iPad e iPhone 42
© Copyright 2024