Creazione di prototipi di applicazioni Flex e Adobe AIR

Flusso di lavoro per la creazione di prototipi

Utilizzando il pannello Pagine in combinazione con altre potenti funzioni di Fireworks, è possibile creare in modo rapido prototipi software e Web interattivi. Per convertire un prototipo completato in un sito funzionante, è sufficiente esportarlo in Adobe Flash®, Adobe Flex®, Adobe AIR™ o Adobe Dreamweaver®.

Per suggerimenti generali sui flussi di lavoro legati ai prototipi, leggete i seguenti articoli del Developer Center Fireworks:

Per un’esercitazione video sulla creazione di prototipi per interfacce di applicazioni, visitate il sito all’indirizzo www.adobe.com/go/lrvid4034_fw.

Creare le pagine

Nel pannello Pagine, create il numero di pagine o di schermate desiderato per la progettazione iniziale. A mano a mano che si procede con la progettazione, è possibile aggiungere o sottrarre pagine in base alle necessità.

Disporre elementi di progettazione comuni

Nell’area di lavoro, disponete gli elementi di progettazione da condividere tra più pagine, ad esempio barre di navigazione e immagini di sfondo. Per allineare gli elementi, utilizzate le Guide sensibili. Per ottenere la massima flessibilità, strutturate il layout mediante CSS. (Consultare Guide sensibili e Creazione di layout basati su CSS.).

Condividere elementi comuni tra più pagine

Quando si condividono elementi comuni, una singola modifica aggiorna automaticamente tutte le pagine interessate. Utilizzate una pagina master per condividere tutti gli elementi in essa contenuti o condividete i livelli per copiare sottoinsiemi di elementi. Consultate Utilizzare una pagina master e Condividere livelli.

Aggiungere elementi univoci alle singole pagine

Su ciascuna pagina, aggiungete elementi univoci di grafica, navigazione e progettazione. Il pannello Libreria comune offre numerosi pulsanti, caselle di testo e menu a comparsa che ottimizzano il processo di progettazione. I simboli dei componenti contenuti nelle cartelle HTML, Mac, Win, Web e applicazione e Componenti Flex includono proprietà che è possibile personalizzare per singole istanze dei simboli. (Consultate Creare e utilizzare i simboli dei componenti.)

Simulare la navigazione dell’utente mediante collegamenti

Partendo da oggetti Web quali porzioni, punti attivi o pulsanti di navigazione, create collegamenti tra le diverse pagine del prototipo. Consultate Collegamento alle pagine di un documento di Fireworks.

Esportare il prototipo interattivo completato

Fireworks offre diversi formati di output per i prototipi in cui vengono mantenuti i collegamenti ipertestuali per la navigazione delle pagine. Leggete i seguenti articoli:

Creazione di layout basati su CSS

È possibile progettare layout basati su CSS in un file documento Fireworks, quindi convertirli in pagine HTML con regole CSS che replicano i layout. I layout basati su CSS forniscono un approccio basato su standard e un codice supportato da più browser.

Per un’esercitazione video sulla creazione di layout di pagine HTML basati su CSS, visitate il sito all’indirizzo www.adobe.com/go/lrvid4035_fw. Consultare anche le seguenti risorse:

Informazioni sul layout di pagina CSS

Con Fireworks è possibile progettare pagine ed esportare immediatamente il codice CSS e HTML mediante un motore di esportazione che analizza il posizionamento degli oggetti. Inoltre, è possibile impostare l’allineamento della pagina e specificare un’immagine di sfondo ricorrente.

È possibile usare gli elementi HTML disponibili nella cartella HTML, nella Libreria comune. La cartella HTML contiene elementi HTML quali pulsanti, elenchi a discesa e campi di testo. È possibile modificare le proprietà di tali elementi mediante il pannello Proprietà simbolo. Quando si trascina un elemento di progettazione nella pagina, il motore di esportazione inserisce tag <form> durante l’esportazione del layout basato su CSS.

Nel file HTML esportato, il testo su cui è stata inserita una porzione appare sotto forma di immagine. Se si desidera che il testo appaia come testo, usate i componenti HTML contenuti nella Libreria comune. I componenti HTML includono elementi di collegamento e titoli da 1 a 6.

Regole per i layout basati su CSS

Durante la creazione di layout basati su CSS, è opportuno seguire alcune regole per ottenere i risultati desiderati.

Regola 1: usare i rettangoli per esportare il testo e le porzioni per esportare le immagini

Il motore di esportazione esporta il testo inserito nei rettangoli. Dal momento che vengono esportate solo le immagini coperte da porzioni rettangolari, per esportare un’immagine, posizionate sopra di essa delle porzioni. Tali porzioni “informano” il motore di esportazione sul punto in cui si trovano le immagini.

Regola 2: evitare di sovrapporre gli oggetti

Il motore di esportazione tratta testo, immagini e rettangoli come blocchi rettangolari. Esamina le dimensioni e la posizione di tali oggetti per stabilire in quali righe e colonne del layout inserirli. Posizionate gli oggetti con attenzione per evitare che i bordi si sovrappongano.

Regola 3: progettare il layout di righe e colonne

Il motore di esportazione cerca partizioni logiche in cui inserire una linea visiva distinta tra oggetti o gruppi di oggetti. Racchiudete i layout a colonne in un rettangolo per evitare che il motore di esportazione inserisca una riga logica che causa l’interruzione del layout a colonne.

Regola 4: considerare il documento come se avesse due dimensioni

Quando si progetta una pagina, usate i rettangoli per racchiudere gli oggetti da trattare come oggetti secondari del rettangolo. Il motore di esportazione rileva le relazioni principale-secondario. Il motore di esportazione effettua la ricerca di righe e colonne negli elementi secondari, come descritto nella Regola 3.

Oltre alle regole sopra descritte, osservate quanto segue:

  • Il motore di esportazione esporta solo i rettangoli originari. Per esportare gli angoli arrotondati dei rettangoli, posizionate sopra di essi porzioni rettangolari.

  • Per esportare i tratti dei rettangoli, posizionate sopra tali rettangoli delle porzioni rettangolari.

  • Per esportare i simboli, posizionate sopra di essi una porzione rettangolare.

  • Per esportare i filtri applicati al testo o ai rettangoli, posizionate sopra di essi delle porzioni rettangolari.

Esportare un layout CSS

Fireworks consente di esportare i layout creati come file basati su CSS. Tali file possono quindi essere aperti in Dreamweaver e altri editor compatibili con CSS.

  1. Scegliete File > Esporta.

  2. Nel menu a comparsa Esporta, selezionate CSS e immagini.

  3. Fate clic su Opzioni per impostare le proprietà di pagina HTML.

  4. Fate clic su Sfoglia per specificare un’immagine di sfondo e impostarne le opzioni di ripetizione:

    • Selezionate Non ripetere per visualizzare l’immagine una sola volta.

    • Selezionate Ripeti per ripetere (affiancare) l’immagine in orizzontale e in verticale.

    • Selezionate Ripeti-x per affiancare l’immagine in orizzontale.

    • Selezionate Ripeti-y per affiancare l’immagine in verticale.

  5. Selezionate l’allineamento della pagina nel browser (a sinistra, al centro, a destra).

  6. Selezionate lo scorrimento dell’allegato desiderato, fisso o con scorrimento.

  7. Fate clic su OK, quindi su Salva.

Creare un documento demo

È possibile creare una dimostrazione del documento Fireworks su cui si sta lavorando. Il documento demo si apre in un browser e può essere utilizzato per dimostrare le caratteristiche del documento e navigare tra le varie pagine.

  1. Selezionate Comandi > Demo documento corrente.

  2. Selezionate le pagine che interessano e fate clic su Crea demo.

  3. Selezionate la cartella e fate clic su Apri.

Creazione di prototipi per applicazioni Flex

Il processo di creazione di prototipi per Flex è simile al flusso di lavoro usato per la creazione di prototipi per siti Web e interfacce software. Consultate Flusso di lavoro per la creazione di prototipi. In Fireworks, è possibile trascinare componenti Flex nell’area di lavoro, specificarne le proprietà ed esportare l’interfaccia utente risultante in MXML. L’interfaccia può quindi essere rifinita in Flex Builder.

Creare un’interfaccia utente Flex

Nel pannello Pagine, create il numero di schermate di interfaccia desiderato per la progettazione iniziale.

Inserire nel layout i componenti di progettazione Flex

Nell’area di lavoro, inserite i componenti Flex dalla cartella Flex del pannello Libreria comune. Questi simboli di componenti sono progettati appositamente per l’esportazione MXML, per garantire i risultati desiderati. Quando si esporta il documento in formato MXML, ognuno di questi simboli viene convertito nei rispettivi tag MXML. Gli oggetti che non sono riconosciuti come componenti Flex vengono invece esportati come bitmap, collegati al documento MXML mediante il tag <mx:Image>. (Consultate Creare e utilizzare i simboli dei componenti.

Nota:

Quando si modifica in Fireworks un componente di progettazione Flex, è possibile copiare il codice XML modificato nel progetto Flex. In questo modo, l’eventuale replica nel progetto del comportamento del componente modificato risulterà più agevole.

I simboli Cursore, BarraScorrimento, Scheda e DescrizioneComando vengono ignorati durante l’output in formato MXML, poiché tali componenti non possono essere tradotti direttamente da Fireworks a MXML. Ad esempio, il simbolo BarraScorrimento compare automaticamente nelle istanze di contenitori Flex qualora sia possibile scorrerne il contenuto. In Fireworks, tali simboli agiscono solo come indicatori del funzionamento di parti dell’interfaccia utente.

Nota:

anche le porzioni di immagini, i rollover e i punti attivi vengono usati solo per prototipi basati su HTML. Per la creazione di prototipi Flex, evitate quindi di usare questi oggetti Web.

Condividere componenti Flex comuni tra più pagine

Quando si condivide un singolo componente Flex su più pagine, una singola modifica aggiorna automaticamente tutte le pagine (o schermate) interessate. È possibile utilizzare una pagina master per condividere tutti i componenti Flex in essa contenuti; per copiare invece sottoinsiemi di componenti, condividere i livelli. Consultate Utilizzare una pagina master e Condividere livelli.

Specificare le proprietà dei componenti Flex

Nel pannello Proprietà simbolo (Finestra > Proprietà simbolo), specificate le proprietà e gli eventi per ognuno dei componenti Flex inseriti nell’area di lavoro.

Esportare il layout Flex in MXML

Esportate il layout dell’interfaccia utente Flex e aprite in Flex il file MXML risultante. Fireworks esporta il codice MXML necessario mantenendo lo stile e il posizionamento assoluto. Gli sviluppatori Flex possono quindi usare tale interfaccia senza dover creare nuovamente il layout in Flex.

Modificare le proprietà dei componenti Flex

Nel pannello Proprietà simbolo, è possibile modificare le proprietà e gli eventi dei componenti Flex.

  1. Selezionate il componente Flex nell’area di lavoro.

  2. Aprite il pannello Proprietà simbolo (Finestra > Proprietà simbolo).

  3. Nel pannello Proprietà simbolo, impostate le proprietà e gli eventi del componente.

Esportare un documento Fireworks in MXML

Fireworks consente di impostare il layout di applicazioni RIA (Rich Internet Applications) grazie all’esportazione di risorse della libreria comune come componenti conosciuti da utilizzare in Adobe Flex Builder. Fireworks esporta il codice Flex necessario (MXML) mantenendo lo stile e il posizionamento assoluto.

Una volta finalizzato il prototipo di un’applicazione Flex, questo può essere esportato in formato MXML ed elaborato ulteriormente in Flex Builder. Nella vista Progettazione, il prototipo ha lo stesso aspetto della sua controparte Fireworks, a eccezione di componenti quali cursori e barre di scorrimento, che non vengono esportati.

  1. Scegliete File > Esporta.

  2. Nel menu a comparsa Esporta, selezionate MXML e immagini.

  3. Per salvare le immagini in una cartella separata dal codice MXML, selezionate Inserisci immagini nella sottocartella.

  4. Per esportare solo la pagina corrente, selezionate Solo pagina corrente.

  5. Fate clic su Salva per completare l’esportazione.

    Le immagini associate al prototipo vengono esportate nella cartella delle immagini. Con i file delle immagini vengono inoltre create le immagini delle pagine MXML complete. Le pagine MXML non richiedono tali immagini di anteprima ed è quindi possibile rimuoverle.

Creare ed esportare interfacce Flex

In Fireworks è possibile creare le interfacce di componenti Flex, da esportare per la realizzazione di interfacce di applicazioni e siti Web basati su Flex.

Componenti per interfacce Flex

In Fireworks è possibile creare e modificare interfacce per molti diversi componenti Flex basate sui modelli Flex.

  1. Selezionate Comandi > Interfaccia Flex > Nuova interfaccia Flex.

  2. Effettuate una delle seguenti operazioni:

    • Per creare interfacce Flex per tutti i componenti disponibili, selezionate Più componenti.

      Viene creato un singolo documento con tutti i componenti Flex disponibili.

    • Per specificare i componenti per i quali si desidera realizzare un’interfaccia, selezionate Componenti specifici.

      Selezionate solo i componenti con un particolare stile o tutte le istanze di un componente.

  3. Fate clic su OK.

Esportare le interfacce Flex

  1. Selezionate Comandi > Interfaccia Flex > Esporta interfaccia Flex.

  2. Selezionate la cartella in cui esportare il documento Fireworks e fate clic su Apri.

Limitazioni nell’esportazione di MXML

Prima di usare le funzioni di esportazione Flex MXML, è importante conoscerne le possibilità e i limiti:

L’esportazione MXML non crea interfacce dai componenti

L’esportazione in MXML non crea interfacce per i componenti in Flex, anche se sono stati modificati in Fireworks. L’esportazione in MXML genera semplicemente documenti MXML da utilizzare in Flex. Tali documenti possono includere immagini collegate per oggetti Fireworks che non possono essere convertite in tag MXML. Queste immagini vengono aggiunte al documento MXML mediante tag <mx:Image>.

L’esportazione MXML ignora le porzioni

Poiché l’esportazione in MXML genera un documento basato su tag da utilizzare in Flex, le porzioni non vengono considerate nella creazione di immagini o celle di tabelle. Per la creazione di immagini durante l’esportazione MXML, vengono utilizzate le impostazioni di ottimizzazione del documento per determinare il formato dell’immagine e il metodo di compressione.

Le proprietà MXML sono limitate alle proprietà di simboli complessi

Nell’esportazione in MXML, le proprietà di un tag MXML vengono basate sul componente Flex in Fireworks. In Fireworks è disponibile un sottoinsieme di componenti Flex, con un numero di proprietà limitato.

Gli stili vengono incorporati

Le proprietà riconosciute come stili sono separate dai tag MXML creati, ma mantenute all’interno dello stesso documento MXML, in un tag <mx:Style>. Fireworks non è in grado di definire gli stili in un file CSS esterno.

I riquadri (o frame) non sono supportati

Nella creazione di progetti grafici e layout per output MXML, non utilizzate riquadri (o frame). Per ottenere diversi design in un unico documento, utilizzate le pagine.

Creazione di prototipi per applicazioni Adobe AIR

Adobe® AIR™ per Fireworks permette di trasformare un prototipo Fireworks in un’applicazione desktop. Ad esempio, se alcune pagine prototipo interagiscono tra di esse per presentare diversi dati, con Adobe AIR è possibile assemblare questo set di pagine in una piccola applicazione che può essere installata nel computer di un utente. Quando l’utente esegue l’applicazione dal proprio desktop, il prototipo viene caricato e visualizzato in una propria finestra applicazione, indipendente dal browser. Gli utenti possono quindi visualizzare il prototipo a livello locale sul proprio computer senza connessione Internet.

Vedete l’articolo di Ethan Eismann su Adobe AIR e sull’esperienza del marchio alla pagina: http://www.adobe.com/go/learn_fw_airexperiencebrand_it.

Aggiungere eventi del mouse Adobe AIR

È possibile aggiungere agli oggetti del documento eventi del mouse Adobe AIR predefiniti. Fireworks fornisce quattro eventi del mouse predefiniti: chiudere la finestra, trascinare la finestra, ingrandire la finestra e ridurre la finestra.

  1. Selezionate gli oggetti nell’area di lavoro a cui si desidera applicare il comportamento evento del mouse.

  2. Selezionate Comandi > Eventi mouse AIR e scegliete l’evento desiderato.

Visualizzare in anteprima un’applicazione Adobe AIR

È possibile visualizzare in anteprima un’applicazione Adobe AIR senza impostare alcun parametro relativo a tale applicazione.

  1. Selezionate Comandi > Crea pacchetto AIR e fate clic su Anteprima.

Creare un’applicazione Adobe AIR

  1. Selezionate Comandi > Crea pacchetto AIR e impostate le seguenti opzioni:

    Nome applicazione

    Consente di specificare il nome da visualizzare nelle schermate di installazione, al momento dell’installazione dell’applicazione. Per impostazione predefinita, l’estensione specifica il nome del sito Fireworks.

    ID applicazione

    Consente di inserire un ID univoco per l’applicazione. Non utilizzate spazi né caratteri speciali. Utilizzate solo i caratteri 0-9, a-z, A-Z, . (punto), - (trattino). Questa impostazione è obbligatoria.

    Versione

    Consente di specificare il numero di versione dell’applicazione. Questa impostazione è obbligatoria.

    Cartella menu dei programmi

    Consente di specificare una cartella nel menu Start di Windows in cui inserire il collegamento dell’applicazione (non applicabile a Mac OS).

    Descrizione

    Consente di aggiungere una descrizione dell’applicazione, da visualizzare al momento dell’installazione.

    Copyright

    Consente di specificare le informazioni di copyright da visualizzare nella finestra Informazioni su per le applicazioni Adobe AIR installate in Mac OS. Queste informazioni non vengono utilizzate dalle applicazioni installate in Windows.

    Contenuto pacchetto

    Selezionate Documento corrente per selezionare automaticamente la cartella contenente i file.

    Contenuto principale

    Fate clic su Sfoglia per selezionate la pagina che deve comparire come contenuto principale. Se in precedenza è stato selezionato Documento corrente, il contenuto principale viene impostato automaticamente.

    File inclusi

    Consente di specificare quali file o cartelle includere nell’applicazione. È possibile aggiungere file HTML e CSS, file di immagini e file di libreria JavaScript. Fate clic sul pulsante più (+) per aggiungere file e sull’icona della cartella per aggiungere cartelle. Per eliminare un file o una cartella dall’elenco, selezionate il file o la cartella e fate clic sul pulsante meno (-). I file o le cartelle selezionati da includere nel pacchetto Adobe AIR devono essere contenuti nella cartella del contenuto principale.

    Stile del sistema e Trasparente

    Consente di specificare lo stile di finestra da utilizzare quando gli utenti eseguono l’applicazione sul proprio computer. Lo stile del sistema applica i comandi della finestra standard del sistema operativo all’applicazione. Lo stile trasparente elimina lo stile standard del sistema e permette di creare un proprio stile per l’applicazione. Con questa funzione è possibile creare finestre dell’applicazione non rettangolari.

    Larghezza e Altezza

    Consentono di specificare le dimensioni in pixel della finestra dell’applicazione all’apertura.

    Seleziona immagini icone

    Fate clic per selezionate immagini personalizzate per le icone dell’applicazione. Selezionate la cartella per le dimensioni di ciascuna icona e selezionate il file immagine da utilizzare. Per le immagini dell’icona dell’applicazione, è possibile usare solo file PNG.

    Nota:

    le immagini personalizzate selezionate devono risiedere nel sito dell’applicazione e i percorsi devono essere relativi alla cartella principale del sito.

    Firma digitale

    Fate clic su Imposta per firmare l’applicazione con una firma digitale. Questa impostazione è obbligatoria. Per ulteriori informazioni, consultate la sezione successiva.

    Crea pacchetto file

    Consente di specificare la cartella in cui salvare il programma di installazione dell’applicazione (file .air). La posizione predefinita è la posizione principale del sito. Per selezionare un’altra posizione, fate clic sul pulsante Sfoglia. Il nome file predefinito si basa sul nome del sito, con estensione .air. Questa impostazione è obbligatoria.

Firmare un’applicazione Adobe AIR con un certificato digitale

Una firma digitale offre garanzia che il codice dell’applicazione non sia stato alterato né danneggiato da quando è stato creato dall’autore del software. Tutte le applicazioni Adobe AIR richiedono una firma digitale e non possono essere installate se questa manca.

  1. Nella finestra di dialogo Crea pacchetto AIR, fate clic sul pulsante Imposta accanto all’opzione Firma digitale.

  2. Nella finestra di dialogo Firma digitale, eseguite una delle operazioni seguenti:

    • Per firmare un’applicazione con un certificato digitale acquistato, fate clic sul pulsante Sfoglia, selezionate il certificato, immettete la password e fate clic su OK.

    • Per creare un proprio certificato digitale, fate clic sul pulsante Crea e compilate la finestra di dialogo. L’opzione Tipo di chiave del certificato fa riferimento al livello di protezione del certificato: 1024-RSA usa una chiave da 1024 bit (meno sicura), mentre 2048-RSA utilizza una chiave da 2048 bit (più sicura). Al termine, fate clic su Crea. Immettete la password nella finestra di dialogo Firma digitale e fate clic su OK.

      Nota: sul computer deve essere installato Java® Runtime Environment (JRE).

Logo Adobe

Accedi al tuo account