Creazione di prototipi di applicazioni Flex e Adobe AIR

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:

• Articolo di Nick Myers sulla progettazione di prodotti interattivi con Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_it

• Articolo di Dave Cronin sulle tendenze nell’industria sulla creazione di prototipi: http://www.adobe.com/go/learn_fw_prototypingtrends_it

• Articolo di Matt Stow sull’utilizzo di modelli CSS precostituiti in Fireworks: Modelli CSS precostituiti in Fireworks CS4.

• Articolo di Jim Babbage, Esempi di Fireworks CS4: importazione, esportazione, simboli, prototipi e ridimensionamento.

• Video tutorial di Dave Hogue sull’uso di Fireworks per la progettazione dell’interazione e la creazione rapida di prototipi:

  • Uso di Fireworks per la progettazione dell’informazione e dell’interazione: http://www.adobe.com/go/learn_fw_infointeract_it

  • Creazione di prototipi interattivi con Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_it

  • Creazione di prototipi rapidi con Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_it

  • Fireworks nel contesto di un processo di progettazione completo: http://www.adobe.com/go/learn_fw_completedesignpro_it

• Articolo sulla progettazione di un’applicazione per sito web con Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_it

• Articolo di Kumar Vivek sulla progettazione per i dispositivi mobili con Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_it

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:

• Per condividere un prototipo flessibile basato su CSS con i propri clienti o per apportarvi ulteriori modifiche in Adobe Dreamweaver, consultate Esportare un layout CSS.

• Per creare un prototipo più convenzionale basato su tabelle, consultate Esportare HTML di Fireworks.

• Per distribuire una versione PDF per i commenti o la stampa, consultate Esportare file Adobe PDF.

• Per creare un prototipo per applicazioni Flex, consultate Creazione di prototipi per applicazioni Flex. Per creare un’applicazione Adobe AIR, consultate Creare un’applicazione Adobe AIR.

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:

• Esercitazione sull’esportazione di CSS e immagini in Fireworks all’indirizzo http://www.adobe.com/go/learn_fw_exportcssimages_it.

• Esercitazione sulla creazione di progetti Web conformi con gli standard con Fireworks all’indirizzo http://www.adobe.com/go/learn_fw_standardscompliantdesign_it.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Limitazioni nell’esportazione di MXML

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

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

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.

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.

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.

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.

Creare un’applicazione Adobe AIR

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.