Creare siti web è ormai un’attività quasi obbligata per molti graphic designer, poichè perché i clienti hanno sempre di più la necessità di passare dalla carta al web. Di fronte a questo nuovo scenario è perciò importante avere un “armamentario” di strumenti potenti, semplici da usare e soprattutto integrati, che consentano di sviluppare siti web a chiunque. La WebSuite CS3 di Adobe risponde efficacemente a tutte queste necessità, dotando i web designer dei migliori strumenti per lo sviluppo di siti web. Ciò che sorprende quando si inizia ad usare questi software, è il grado di integrazione raggiunto tra i vari applicativi. Il concetto di Roundtrip HTML ideato da Macromedia, per far comunicare software come Dreamweaver e Fireworks, è servito come punto di partenza per realizzare una sofisticata integrazione tra tutti gli applicativi della suite. Grazie a questo è possibile, ad esempio, importare un file di Photoshop CS3 in Dreamweaver CS3, con una semplice operazione di drag&drop, oppure esportare un documento da Indesign CS3 a Dreamweaver CS3, in formato Xhtml, con pochi clic, e molto altro ancora. Vediamo in dettaglio quindi le novità più interessanti.

Dreamweaver CS3

Da sempre considerato il software di riferimento per lo sviluppo siti Internet, Dreamweaver si è arricchito di importanti funzionalità che facilitano enormemente il processo di creazione di un sito. Prima di procedere con la loro descrizione è però bene fare una precisazione. Il processo di integrazione delle tecnologie ex-Macromedia, ha impegnato i team di sviluppo di Adobe per circa un anno, più o meno da poco tempo dopo l’annuncio dell’acquisizione. Questo processo ha comportato un lavoro enorme, poiché i team di sviluppo delle due aziende, un tempo acerrimi concorrenti, hanno iniziato a “parlarsi”, condividendo tutte le informazioni necessarie per la creazione delle nuove versioni dei programmi. Tutto ciò, che non ha eguali nella storia dell’informatica, ha comportato indubbiamente uno stress notevole per le persone coinvolte, e come era prevedibile, sono state definite delle priorità. Tra queste priorità, non è stata inserita la necessità di procedere al restyling delle interfacce di Dreamweaver e Fireworks, che pur targati CS3, rimangono, possiamo dire, identici dal punto di vista dell’interfaccia, alle versioni contenuti nel precedente Studio 8. Il resto degli applicativi, invece, ha subito un restyling notevole, che ora sfrutta l’interfaccia “fluida” di Adobe, con i nuovi pannelli ridimensionabili. Ovviamente, il tempo recuperato dalla non restilizzazione delle interfacce, è stato dedicato interamente all’integrazione delle librerie Adobe, e alla creazione delle nuove funzionalità. Il risultato è davvero avvincente, anche se quando si lanciano Dreamweaver CS3 o Fireworks CS3, a prima vista, sembrano idenditici a prima… però bastano pochi clic per capire che il “motore” è cambiato!

Importazione nativa da Photoshop

Uno dei sogni ricorrenti di molti sviluppatori per il web, era quello di poter importare un file PSD nelle pagine web create con Dreamweaver. Per molto tempo questo è rimasto un sogno… anzi, per molti era proprio un incubo. In effetti, in presenza di un file a livelli di Photoshop, si rendeva necessario eseguire tutta una serie di operazioni prima di poter efficacemente inserire l’immagine su una pagina web. In primo luogo era necessario unire tutti i livelli, poi andavano cancellati eventuali canali Alfa, in seguito si ottimizzavano i colori dell’immagine, e infine la si salvava in formato JPEG oppure GIF. Una volta importata in una pagina di Dreamweaver succedeva che qualunque nuova modifica all’immagine, richiesta dal cliente, andava fatta riaprendo il PSD originale, modificandolo, e ripercorrendo tutta la procedura appena descritta. Ora tutto questo è storia! In Dreamweaver CS3 sono state implementate le potenti librerie di ottimizzazione già presenti in Fireworks, e l’importazione di una immagine PSD è a dir poco imbarazzante per quanto è semplice. Tra l’altro, non è neanche necessario impartire il comando di importazione! È sufficiente lanciare Adobe Bridge, e operare un drag&drop da un applicativo all’altro. Dopo qualche istante, Dreamweaver CS3 mostra una finestra di ottimizzazione delle immagini dove è possibile impostare innumerevoli cose: dal tipo di conversione (JPEG, GIF, PNG), al numero di colori, alla qualità della compressione, ecc.  È persino possibile avere un idea della dimensione finale dell’immagine, espressa in byte, e del tempo medio di caricamente della stessa, in base alla velocità di connessione. Questa operazione sfrutta una funzione che era già presente in Dreamweaver dalle primissime versioni. Al termine, viene generata un’immagine nel formato scelto in fase di ottimizzazione, da poter salvare dentro la cartella Immagini.

Figura 1 – La finestra di ottimizzazione per i file di Photoshop, presa in “prestito” da Fireworks, consente numerose impostazioni.

Roundtrip con Photoshop CS3

Come abbiamo accennato all’inizio, una delle cose che rese famosa l’accoppiata Dreamweaver/Fireworks fu il sistema di Roundtrip HTML. In sintesi, si trattava di una specie di legame che veniva creato tra un file importato in Dreamweaver, ed il suo sorgente PNG in Fireworks. Grazie a questo legame era possibile operare numerose modifiche ad un immagine importata in Dreamweaver, attingendo sempre al file sorgente PNG.  Ovviamente, questa tecnologia è stata estesa ora anche a Photoshop CS3, per cui, è possibile modificare un JPEG o un GIF, inseriti in Dreamweaver CS3, accedendo al file sorgente PSD. È sufficiente fare clic sul pulsante Edit (Modifica), accanto all’icona di Photoshop, presente nella finestra delle Proprietà, e viene riaperto file originale di Photoshop.

Figura 2 – Il pulsante di modifica in Photoshop nella finestra delle proprietà di Dreamweaver, permette di accedere al file PSD sorgente.

Copia e incolla da Photoshop CS3

L’integrazione con Photoshop CS3 non è limitata però alla sola importazione. In effetti possiamo anche eseguire il classico copia/incolla da un applicativo all’altro. Ci sono solo due varianti per questa operazione: la prima volta che si incolla un’immagine da Photoshop CS3 a Dreamweaver CS3, viene presentata la medesima finestra di ottimizzazione di cui abbiamo già parlato. Se invece il copia/incolla viene eseguito dopo aver modificato (tramite il pulsante Edit) un’immagine già importata in precedenza, non viene visualizzata la finestra di ottimizzazione. In questo caso le caratteristiche di ottimizzazione rimangono quelle impostate al momento della prima importazione.

Per iniziare con i CSS

L’uso di CSS e DIV, si sta velocemente affermando presso molti web designer. I siti web con Layout liquidi fioriscono sul web ogni giorno. Le tabelle HTML, usate come strumenti di layout, sono per molti solo un ricordo. Certo, non tutti riescono rapidamente ad abituarsi all’utilizzo dei CSS. Molti designer trovano difficile comprendere come funzionano le regole CSS quando vengono applicate ai DIV, per dar luogo al layout di un sito. È vero anche che il web è ormai costellato di portali che spiegano come usare efficacemente DIV e CSS, ma spesso le informazioni sono abbastanza frammentarie, e studiarle non è poi così semplice. Anche su questo versante Dreamweaver CS3 ha molto da dire: quando si crea una nuova pagina HTML è possibile scegliere un layout preimpostato da modificare, creato interamente con DIV e CSS. Ma la cosa più stupefacente è che dando una sbirciata al codice sorgente, si scoprono una moltitudine di commenti, che spiegano con dovizia di particolari tutte le regole CSS usate per realizzare il layout. In pratica, mentre modifichiamo una pagina appena creata, impariamo al contempo come funzionano le regole CSS.

Figura 3 – Il codice HTML delle Starter pages è ricco di commenti esplicativi.

Controllo crossbrowser

Se da un lato DIV e CSS stanno cambiando il modo in cui i layout dei siti web vengono realizzati, dall’altro sorgono sempre più spesso problemi di visualizzazione su browser diversi. In realtà si tratta di un vecchio problema, che vede i browser interpretare il codice HTML secondo le proprie specifiche. Il risultato è spesso quello che la pagina web, progettata a livello di pixel dal web designer, appare diversa, quando va bene, ma può apparire del tutto smontata quando le cose si mettono male. Cosa dovrebbe fare allora un web designer per risolvere questo problema? Dovrebbe fare una cosa che i ritmi odierni del lavoro rendono impraticabile: controllare un sito web su più piattaforme, con diversi browser, ognuno in diverse versioni. Tutto questo alla ricerca delle più disparate incompatibilità. È una volta trovate? In genere, se non si conosce la soluzione per ogni particolare problema (cosa abbastanza comune), la si cerca nel mare magnum del web, con tutto il tempo che ci vuole. Ecco perché abbiamo detto che è una soluzione impraticabile! Perché nessuno, oggi, ha più il tempo di fare beta-testing sui siti web. In effetti, quello che succede è che, semplicemente, i siti vengono sviluppati e pubblicati, e solo in seguito a varie segnalazioni, corretti. Fortunatamente anche su questo spinoso argomento Dreamweaver CS3 ci da una bella mano! Di qualunque pagina web è possibile eseguire un controllo accurato (Check Page) alla ricerca delle incompatibilità verso i numerosi browser esistenti. Qualunque errore rilevato viene mostrato con dovizia di particolari:

• Punto preciso del codice dove è presente l’errore;
• Spiegazione del tipo di errore e di come si manifesta;
• Browser e versione interessati dall’errore;
• Percentuale di occorrenza;

Figura 4 – La finestra di output degli errori di pagina.

Ma la cosa più utile è senza dubbio la possibilità di conoscere la soluzione per risolvere il problema! Una piccola nota, in fondo alla finestra di output degli errori, reca la scritta: “View solutions”. Ebbene, facendo clic su quella piccola scrittina veniamo trasportati su una sezione particolare del sito Adobe, che esplora tutte le problematiche relative ai CSS. Il suo nome è CSS Advisor, e in realtà più che una sezione è un vero e proprio sito, i cui contenuti nascono dal contributo di centinaia di esperti nel campo del web design. Tornando al problema di cui sopra, una volta fatto clic su View Solutions, andiamo a finire sulla pagina specifica relativa al problema indicato. Qui viene descritto con molta attenzione il motivo per cui quell’errore si manifesta, e su quali browser. Poco sotto, viene indicata la soluzione, che possiamo tranquillamente mettere in campo, una volta tornati in Dreamweaver.

Figura 5 – Spiegazione di un errore con i CSS e presentazione della soluzione.

AJAX alla portata di tutti

Spessissimo, le tecnologie più innovative, sono appannaggio dei soli sviluppatori. Questo accade normalmente perché gli strumenti di sviluppo, nonché i linguaggi stessi, richiedono competenze particolari che non sono diffuse presso tutti gli utenti. Ad esempio, i designer hanno sempre bisogno di qualcuno che si intenda di sviluppo, per poter implementare pagine dinamiche sui siti web che costruiscono. In questo scenario si innesta questa nuova tecnologia, che si sta rapidamente diffondendo in molti siti web: AJAX. L’acronimo spiega già da se abbastanza bene di cosa si tratta: Asynchronous Javascript and XML. In pratica l’innovazione non è nel linguaggio, ma nell’uso, o meglio nella commistione, di Javascript e XML. Per facilitare l’uso di AJAX, una folta comunità di sviluppatori ha creato vari Framework, che implementano funzionalità particolari, attraverso l’uso congiunto di Javascript e XML. Uno di questi è Spry, che è stato adottato da Adobe ed implementato all’interno di Dreamweaver CS3. Vediamo più in dettaglio cosa si può fare.

Collegamento ad una fonte dati XML

Prima di poter procedere con Spry è necessario connettersi (binding) ad una fonte dati XML. Questa operazione è simile a quella che consente di collegare Dreamweaver ad un comune database, e si effettua dal pannello Application. La finestra di collegamento permette di sfogliare il proprio disco rigido alla ricerca del file XML (che solitamente deve risiedere nella stessa cartella del sito). Una volta trovato è necessario dare un nome al Data set e a questo punto possiamo anche avere un anteprima visuale dei campi presenti nel file XML, tramite il comando Get schema. Se si vuole avere anche un’anteprima dei dati è sufficiente selezionare i campi che ci interessano e fare clic sul pulsante Preview.

Figura 6 – La finestra di collegamento ad una fonte dati XML.

Completata questa operazione, siamo già in grado di utilizzare i vari Widget Spry presenti nella barra di inserimento di Dreamweaver CS3. Questi elementi sono davvero comodi e facili da utilizzare: ognuno permette di compiere una operazione specifica, in relazione al file XML che abbiamo collegato. Ad esempio, è possibile usare il widget Spry Accordion, per mostrare uno o più campi all’interno di una pannello diviso in due sezioni espandibili con un clic. Tutti gli elementi sono ovviamente personalizzabili, e nella maggior parte dei casi, si può operare in maniera visuale, dalla finestra delle Proprietà, senza ricorrere al codice. Questa è una manna dal cielo per i designer, che potranno realizzare interessanti effetti dinamici sulle proprie pagine web, senza dover necessariamente conoscere i linguaggi alla base di AJAX. Ovviamente, gli sviluppatori possono operare sul codice, bypassando la finestra delle proprietà!

Figura 7 – Creazione di un elemento Spry Accordion.

Minimo impatto sul codice

Un altro vantaggio di Spry è che l’impatto a livello di codice nelle pagine web è ridotto al minimo. Ciò è possibile grazie al fatto che solamente pochi tag di Spry vengono inseriti nel codice. Questi poi richiamano delle librerie esterne che contengono tutto il codice Javascript/XML per il loro funzionamento. Ovviamente per fare in modo che Spry funzioni, è necessario caricare sul web server anche tutte le librerie Spry generate da Dreamweaver CS3.

Figura 8 – Il codice Spry (in arancione) ha un impatto davvero minimo sulle pagine che lo ospitano.

Integrazione tra Indesign CS3 e Dreamweaver CS3

La versione Premium della WebSuite CS3 contiene anche Indesign CS3. Di primo acchito verrebbe da chiedersi per quale motivo un programma di impaginazione venga incluso nel pacchetto dedicato al web. La risposta è legata fondamentalmente ad una tendenza sempre più estesa, che vede il mondo della grafica stampata orientarsi verso il web. Sempre più spesso in effetti, i contenuti di un impaginato, devono essere riutilizzati sul web. In genere questa operazione si effettua recuperando le immagini originali, usate per la stampa, che vengono poi ottimizzate in un software come Fireworks, prima di essere inserite nella pagine web che dovranno accoglierle. Spesso però, è necessario riutilizzare anche dei testi, con una loro formattazione, per cui chi si occupa della costruzione della pagina web, ha non poche cose da dover fare ogni volta. Per questo motivo, in Indesign CS3, è stata implementata l’esportazione Cross-Media dei contenuti di un impaginato. In pratica, applicando degli stili ad-hoc agli elementi che compongono un determinato progetto grafico, è poi possibile esportare un documento XHTML già formattato, che può essere riaperto in Dreamweaver CS3 per successive modifiche. Questa operazione è molto interessante, poiché non è richiesta nessuna competenza particolare da parte dell’operatore grafico che usa Indesign. È inoltre molto veloce: in pochi passaggi si ottiene un documento XHTML pronto per l’uso.

Figura 9 – La finestra di esportazione XHTML di Indesign CS3.

Fireworks CS3

Per molto tempo, Macromedia Fireworks e Adobe Image Ready sono stati i principali concorrenti tra i software dedicati al ritaglio ed ottimizzazione di immagini per il web. Quando Adobe acquisì Macromedia in molti iniziarono a speculare su quali software avrebbero resistito all’acquisizione e Fireworks veniva ritenuto tra quelli in “forse”. Ma alla fine il glorioso software di Macromedia ha vinto la battaglia ed è stato mantenuto al posto di Image Ready. Cosa ha spinto Adobe in questa scelta? Diciamo che il grado di integrazione che c’è tra Dreamweaver e Fireworks è una solida base su cui contare; integrare Image Ready con Dreamweaver sarebbe stato sicuramente più oneroso, in termini di tempo e denaro. Inoltre Adobe ha puntato molto su Dreamweaver come software professionale per il web design, e probabilmente gli utenti storici del software ex-Macromedia, non avrebbero accettato di buon grado l’eliminazione di Fireworks. La cosa però più importante è che non solo è stato mantenuto ed è compreso nella WebSuite CS3, ma in qualche modo ha anche cambiato il suo modo di essere: da “semplice” programma per lo slicing di immagini per il web, si è trasformato in un importante risorsa per la prototipazione di qualunque layout per il web.

Prototipazione di un sito web

Sebbene il suo compito primario in passato fosse quello di creare immagini ottimizzate per il web e pulsanti con rollover, Fireworks poteva essere usato efficacemente anche per costruire siti funzionanti da mostrare ai clienti, prima che venissero realmente sviluppati. Partendo cioè da un design grafico (fatto in Fireworks, oppure in Freehand) era possibile aggiungere interazione, con link, aree attive e menu a comparsa. Ogni pagina veniva però salvata in un file PNG separato, per cui una tipica struttura di base per un sito era composta da alcuni file: Home.PNG, Mission.PNG, Prodotti.PNG, Contatti.PNG. Da ognuni di questi files (detti anche sorgenti) venivano poi generate le singole pagine HTML, pronte per essere visionate con un browser. Ovviamente, queste erano solo delle anteprime di quello che sarebbero state poi le pagine reali, ricomposte, sviluppate ed ottimizzate in Dreamweaver.
Oggi tutto questo è storia. Grazie alla novità di poter mantenere più pagine all’interno di un singolo documento PNG, sviluppare un prototipo funzionante da mostrare al cliente, è diventata un’operazione molto semplice. L’aggiunta di una nuova etichetta Pages, al pannello che in precedenza conteneva i Livelli, permette di selezionare con un clic la pagina attiva su cui intendiamo lavorare. Nello stesso pannello sono stati tra l’altro integrati anche i Fotogrammi e la Cronologia (che, guardacaso, ora si chiama Storia, come in Adobe Photoshop). In sostanza, non è più necessario tenere più files PNG per ogni pagina, giacchè in un singolo salvataggio vengono conservate tutte le eventuali pagine che sono stare create.

Figura 10 – Il nuovo pannello unificato per la gestione di Pagine, Livelli, Fotogrammi e Storia.

Collegamento dei link più intuitivo

Quando si crea una area attiva sopra un elemento grafico, in genere lo si fa perché questa deve essere collegata ad una URL specifica. Di solito questa coincide con un altro file HTML facente parte del sito, altre volte può trattarsi di un link verso un sito web esterno. In entrambi i casi, normalmente, si trascrive la URL per intero (sia essa un semplice file HTML o un percorso articolato) nella casella Collegamento, presente nel pannello delle proprietà. Quando si struttura un prototipo multipagina, il link tra le varie pagine avviene invece in maniera singolare. Facendo clic sul menu a comparsa in corrispondenza della casella Collegamento, appaiono dei nomi di file, con estensione HTML, che corrispondono alle pagine interne al PNG. Ovviamente questi file non esistono fino al momento dell’esportazione in HTML, ma per comodità ci viene già data una percezione reale del nome del file a cui stiamo collegamendo le aree attive.

Figura 11 – Dettaglio del pannello Proprietà: il collegamento alle varie pagine è molto intuitivo.

Condivisione di elementi su più pagine

Questa nuova funzione ricorda molto il concetto di simbolo e istanza già utilizzato in Flash. La sua comparsa è strettamente legata alla nuova funzione multipagina. In pratica, dovendo strutturare il prototipo di un sito funzionante, sarà quasi certamente necessario identificare un menu di navigazione, da posizionare su una parte specifica del layout, su ogni pagina. Peraltro, il menu potrebbe ospitare dei pulsanti sui quali abbiamo attivato anche effetti di rollover. Il comando Share layer to Pages serve proprio a condividere uno o più elementi su più pagine. In questo modo non è necessario trattare ogni singola pagina come elemento indipendente: è sufficiente creare il menu di navigazione sulla prima pagina per poi condividelo su tutte quelle in cui serve la sua presenza. La cosa davvero interessante (e qui ci ricolleghiamo al concetto di simbolo e istanza di Flash) è che una volta condiviso un qualsiasi elemento, è sufficiente modificare quello originale (quello cioè che si trova sulla prima pagina) per vedere applicate le modifiche, in automatico, a tutte le pagine in cui appare. Le modifiche possono essere di qualunque tipo: applicazione effetti, cambio di colore, dimensione, posizione, rollover, ecc.

Figura 12 – Il nuovo comando Share Layer to Pages, consente di condividere facilmente qualunque elemento da una pagina a tutte le altre.

Migliore integrazione con Photoshop

Anche se già in precedenza Fireworks era in grado di aprire i file di Photoshop, la nuova versione del software riconosce ora in maniera perfetta i files PSD, mantenendo inalterati livelli, gruppi di livello, filtri, metodi di fusione, testi modificabili e qualunque altra particolarità. Questo è un grande vantaggio, soprattutto per chi usa regolarmente Photoshop per la creazione di elementi grafici per il web. In effetti, si può continuare ad usarlo passando poi i files su Fireworks CS3, per implementare le numerose funzioni che consentono di creare prototipi funzionanti. Ovviamente, imparare ad usare solo Fireworks CS3 per gestire interamente le immagini per il web, è di sicuro vantaggio.

Ridimensionamento intelligente dei simboli: 9 slice scaling guides

Fireworks è ormai un software maturo per la creazione di interfacce complesse. Pulsanti, sliders, campi testi, ecc. sono ormai componenti stabili della libreria interna, specialmente per quanto riguarda Flex. Poter disegnare quindi un interfaccia precisa nelle dimensioni, e scalabile, è un requisito fondamentale. La nuova funzione 9 slice scaling guides, attivabile quando si crea un simbolo per la prima volta, va proprio in questa direzione. In questo modo è possibile creare un pulsante che sia scalabile a diverse dimensioni, senza che le sue fattezze vengano rovinate dal resampling dei pixel. È infatti possibile identificare quali parti di un simbolo non dovranno essere ingrandite allorchè viene scalato. Angoli smussati e testi dei pulsanti possono così essere resi indipendenti dalla scalatura, posizionando accuratamente le nuove guide all’interno del simbolo.

Figura 13 – Il nuovo metodo di scalatura dei simboli evita distorsioni degli elementi.

Creazione di una slideshow in Flash o AJAX

Molto spesso, durante lo sviluppo di un sito web, è richiesta del cliente la creazione di una gallery fotografica. Se non si ha il tempo di svilupparla (e capita spesso ormai), in genere la si cerca sul web, già bella e pronta, da personalizzare. In realtà non è una brutta idea, giacchè l’offerta di materiale free è davvero enorme. Spesso però proprio questa enormità di proposte, su numerosi siti, rischia di allontanarci dalla reale esigenza, senza tralasciare il tempo necessario per cercare quella più adatta. In questo scenario, la funzione che permette di creare una slideshow in Fireworks CS3, sa molto di coltellino svizzero. Come dire: Fireworks CS3 non serve per fare gallery animate, se però ne avete bisogno, la funzione c’è! L’interfaccia che viene mostrata dopo aver impartito il comando ricorda molto da vicino un’applicazione creata in Flex, è molto probabilmente lo è! Attraverso sei diverse sezioni è possibile impostare tutte le caratteristiche della slideshow: dal tipo di player, ai testi di accompagnamento, alle transizioni, alla risoluzione delle immagini di output, e molto altro ancora. È interessante la possibilità di usare Flash come player (con 5 diverse varianti di interfaccia/colore), ma anche AJAX, che sfrutta il Framework Spry di Dreamweaver di cui abbiamo già parlato.

Figura 14 – La finestra per la creazione di slideshow in Fireworks CS3.

Integrazione con Flex

Flex è uno strumento eccezionale per la creazione di web applications, meglio note con l’acronimo RIA (Rich Internet Application) coniato da Macromedia. Volendo esemplificare, sfruttando Flash come tecnologia di base, si possono creare sofisticate applicazioni che, in tempo reale, attingono a fonti dati (database, XML, ecc.) e visualizzano i risultati in un interfaccia realizzata in Flash, senza dover ricaricare la pagina web dove risiedono. Flex però non ha degli strumenti di design particolari, per cui, in genere il design vero e proprio delle interfacce viene creato in Flash. La novità è ora che Fireworks CS3 comprende tra le sue librerie di componenti una intera sezione dedicata a Flex, chiamata appunto Flex Components. Da qui è possibile trascinare con  una semplice operazione di drag&drop, pulsanti, checkbox, barre di scorrimento, ecc., direttamente sull’area di lavoro del programma. È quindi possibile progettare e realizzare interfacce di grande impatto, che possono poi essere usate in Flex. Ma come? Qui viene il bello! Se si fa clic sull’ormai onnipresente pulsante di esportazione (nell’angolo in alto a destra del documento attivo), notiamo una nuova categoria (Flex) dal quale è possibile esportare direttamente il codice MXML necessario per Flex! Notiamo tra l’altro che rispetto alla versione 8 di Fireworks, ci sono nuovi applicativi verso cui è possibile esportare: Photoshop, Illustrator, Golive e Frontpage, che si aggiungono a quelli standard già esistenti.

Figura 15 – Il menu di esportazione di Fireworks CS3 si arricchisce di nuovi applicativi.

Flash CS3

Di versione in versione Flash non ha mai tradito le aspettative degli utenti, proponendo sempre nuove funzionalità e caratteristiche di tutti rispetto. Il predecessore della CS3, Flash 8, ha stupito per le innovazioni sul versante della codifica video, e per l’utilizzo dei filtri raster in tempo reale. Flash CS3, da questo punto di vista non si smentisce. In primo luogo, è il primo dei programmi ex-Macromedia ad aver ereditato la nuova interfaccia a pannelli ridimensionabili che contraddistingue la nuova CS3. C’è poi il nuovo linguaggio ActionScript 3.0, che farà la gioia dei molti coder che usano Flash a livello di sviluppo. Ma anche per i designer ci sono interessanti novità. Insomma, sembra che questa versione, cerchi di migliorare Flash rivolgendosi sia per chi usa il software a livello di programmazione, sia per i designer che lo usano in maniera visuale.

Nuova interfaccia in stile CS3

A differenza di quanto successo per le nuove versioni  di Dreamweaver  e Fireworks, Flash CS3 ha potuto usufruire della stessa interfaccia che ormai accomuna la maggior parte dei software targati CS3. Quest’approccio ha degli indubbi vantaggi, se non altro già a livello di coerenza: ora possiamo passare da Photoshop, ad Illustrator, a Indesign a Flash, con un armonia visuale senza eguali; non è più necessario apprendere un interfaccia diversa per diversi applicativi. Diciamo però che in Flash questa novità si sente ancor di più! In effetti, quando si usa il software con tutte i pannelli aperti, lo spazio libero per l’area di lavoro può diventare esiguo. C’è poi da dire che la timeline, onnipresente nelle precedenti versioni di Flash, è diventata sempre meno utile, giacchè sempre più sviluppatori usano l’Actionscript, limitando l’uso dei fotogrammi al minimo. In Flash CS3, tutti i pannelli possono essere messi in docking (letteralmente, accatastati gli uni sugli altri), oltre che essere rimpiccioliti fino al punto che si vede solo una piccola icona. La timeline può quindi, finalmente, essere tolta dalla parte superiore dell’area di lavoro, e semplicemente nascosta a destra, insieme agli altri pannelli, per la gioia dei Flasher Doc!

Figura 16 – La nuova interfaccia di Flash si è allineata a quella dei prodotti CS3. 

Strumento penna derivato da Illustrator

Sebbene alcuni importano in Flash elementi grafici realizzati con altri software, sono molti gli utenti che usano proprio gli strumenti di disegno di Flash per creare gli artwork da animare. E molti di questi hanno da sempre chiesto a gran voce delle migliorie, come ad esempio lo strumento penna. L’acquisizione Adobe-Macromedia ha finora creato molti vantaggi per gli utenti, e in questo caso il vantaggio è davvero importante: lo strumento penna è ora identico a quello di Adobe Illustrator CS3! Ora, tenendo premuto il tasto del mouse sopra l’icona del pennino, siamo in grado di scegliere quattro diverse impostazioni d’uso. Questa novità da un lato fa un bel regalo ai vecchi utenti del programma, dall’altro consente agli utenti di Illustrator di iniziare a muoversi con confidenza anche su Flash.

Figura 17 – Lo strumento Penna è ora uguale per Illustrator CS3 e Flash CS3.

Importazione nativa dei files di Photoshop

Questa funzione è stata a lungo sognata dagli utenti di Flash, ma purtroppo mai realizzata. In effetti, in passato,  importare un file PSD, mantenendone integri tutti i livelli, era un bel lavoro certosino! Ogni livello doveva essere trattato come file indipendente, gestito con un canale Alfa, e importato (o copiato) all’interno di Flash. In questa operazione poi, si perdevano tutte le particolarità del file PSD, come i filtri di livello, i metodi di fusione, il testo modificabile, ecc. Il problema più grosso però non era dato dalla fase di importazione, bensì da quella di modifica. Se il cliente richiedeva una modifica di grafica ad un file, presente nel documento Flash, ma proveniente da Photoshop, bisognava rifare d’accapo tutta la tiritera! Bene, anche questa è storia. Finalmente Flash CS3 è in grado di importare, in maniera nativa, qualunque file di Photoshop. E per poter ottenere una corretta importazione di tutti i livelli c’è una passaggio intermedio dove possiamo decidere come questi debbano essere trattati. Possiamo, ad esempio, decidere di mantenere intatti i livelli che contengono testo modificabile. Allo stesso modo possiamo preservare in formato vettoriale eventuali forme poligonali create in  Photoshop, oppure rasterizzarle. È inoltre possibile selezionare quali livelli vogliamo importare, facendo clic sul piccolo occhio (identico a quello presente in Photoshop) accanto al livello. E si può fare molto altro ancora, prima di dare l’avvio all’importazione. Ciò di cui c’è certezza è che alla fine ci ritroveremo il nostro bel file PSD, perfettamente integro, all’interno di Flash!

Figura 18 – La finestra di importazione PSD permette di scegliere come gestire ogni singolo livello.

Nuovi comandi CopyMotion

In Flash CS3 fanno capolino due nuovi comandi, sotto la voce Timeline, nel menu Edit: si tratta di CopyMotion e Copymotion as Actionscript 3.0, vediamo a cosa servono. Il primo comando (CopyMotion) facilità un operazione altrimenti scomoda da eseguire. Succede spesso che vengano utilizzati i livelli guida per realizzare movimento di oggetti su un tracciato. Questi sono però limitati al documento in cui sono stati creati. Può quindi risultare molto difficoltoso (ma non impossibile) riutilizzare un determinato tipo di movimento su un altro documento Flash, attribuendolo addirittura ad un altro oggetto. CopyMotion fa proprio questo, ma anche di più: è in grado di copiare il movimento di un oggetto, ma anche le caratteristiche dell’oggetto stesso che possono cambiare durante il movimento. Per esemplificare: se animiamo una lattina su un percorso e applichiamo a questa degli effetti di sfocatura, CopyMotion sarà in grado di copiare sia il percorso, sia gli effetti applicati all’oggetto. A questo punto, possiamo creare un nuovo documento, e incollare (Paste Motion) ad un altro oggetto qualunque, gli attributi appena copiati.
CopyMotion as Actionscript 3.0 è invece sostanzialmente diverso, anche se il nome in comune potrebbe far pensare che entrambi i comandi siano simili. Questo nuovo strumento si inserisce in un ambito più ampio che vede da un lato i designer e dall’altro gli sviluppatori. Capita spesso che i designer creino animazioni usando massicciamente trasparenze ed interpolazioni sui fotogrammi. I files SWF generati da questi lavori fanno quasi sempre decadere le performance del Flash Player, giacchè, appunto, le trasparenze e le interpolazioni, sono tra gli elementi che impegnano maggiormente il processore del computer. Dal punto di vista dell’ottimizzazione del lavoro, inoltre, un file di Flash ricco di interpolazioni sui fotogrammi, appare poco “ordinato” e non ben gestibile. Il risultato è che spesso, gli sviluppatori che devono integrare animazioni fatti da designer nei propri progetti in Flash, preferiscono ricrearle in Actionscript, affinchè siano più performanti, più leggere e più ordinate a livello di gestione. CopyMotion as Actionscript 3.0 è la soluzione: questo comando è in grado di generare il codice AS necessario per ricreare un animazione pilotata da un tracciato su un livello guida. Come per il precedente comando descritto, anche questo è in grado di copiare gli attributi dell’oggetto in movimento, ricreando il codice AS che li ha generati. Insomma, come dire: pace fatta tra designer e developer!

Figura 19 – I nuovi comandi per la copia dei movimenti in Flash CS3.

Alcune novità del video

Qualche “ritocco” è stato fatto anche a livello di codifica del video. L’interfaccia di acquisizione è stata riorganizzata per essere più funzionale: ora abbiamo a disposizione cinque diverse etichette che corrispondono alle sezioni principali: Profiles, Video, Audio, Cue Points, Crop and Resize. Queste seguono una certa logica per la quale, normalmente, in qualunque codifica video, si passa dalla prima sezione all’ultima, in sequenza. A livello di codec video non è cambiato nulla, anche perché già con l’On2 VP6 della versione 8 si era compiuto un mezzo miracolo tra qualità, performance e leggerezza del file! Una nuova funzione la troviamo sotto la sezione video: ci permette di deinterlacciare un video in fase di acquisizione. Una novità gradita è invece relativa ai Cue Points: ora è possibile salvarli su un file XML, o meglio ancora, importarli da un file XML esterno.

Figura 20 – La nuova interfaccia di codifica del video è organizzata in sezioni contigue.

Device Central: mobile a gogò!

Uno degli ambiti su cui molte aziende stanno investendo ingenti capitali è il mobile. La frase più ricorrente che si sente a riguardo è qualcosa come “i dispositivi mobili sono la sfida del prossimo futuro”. In effetti, sempre più telefonini hanno la capacità di leggere animazioni generate con Flash. E in effetti, sempre più web agency devono distribuire su mobile i contenuti che già generano per il web. La nuova versione di Device Central (ereditato dall’acquisizione di Macromedia), è diventata una piattaforma di test per mobile di tutto rispetto. In primo luogo l’applicativo è corredato da una lunga lista di profili di telefonini dei più importanti produttori: Nokia, Motorola, Panasonic, Sony-Ericsson, solo per citarne alcuni. I profili sono molto accurati e completi. Per ognuno sono presenti cinque categorie differenti: General, Flash, Bitmap, Video, Web. Ognuna di queste riporta i dati principali del telefonino, come ad esempio: reti supportate, sistema operativo, risoluzione del display, formati video supportati, ecc. Ovviamente della maggior parte dei profili esiste anche un anteprima fotografica del telefonino. Ma cosa si può fare con Device Central? Si può fare molto, ma la cosa fondamentale è che permette di fare il test di applicativi creati per il mobile. Le due principali applicazioni sono legate a Flash e Dreamweaver. Con il primo si possono testare files SWF generati con il linguaggio Flash Lite. Con il secondo si possono testare pagine web generate in HTML per il mobile. Quando si crea un contenuto in Flash usando il lunguaggio Flash Lite, Device Central viene lanciato non appena si effettua un anteprima (Mela+Invio) al posto del normale Flash Player. Nel caso di Dreamweaver, invece, è necessario fare clic sul pulsante di Anteprima, scegliendo la voce Preview in Device Central. Una volta avviato, Device Central, propone l’ultimo profilo che è stato utilizzato; da qui si possono fare molti test. Un primo test di funzionalità consiste nell’utilizzare i tasti di navigazione del telefonino, per navigare attraverso l’applicazione che stiamo sperimentando. In questo modo possiamo verificare problemi di interfaccia e di ergonomia. Un secondo test riguarda le condizioni di luce: è possibile simulare i diversi riflessi che influiscono sul display del telefonino, come le luci d’interno, il cielo nuvoloso, oppure il sole. Un ulteriore test permette di verificare a quale velocità girerà l’animazione, una volta che viene caricata sul telefonino. Questo è in realtà uno dei test più importanti, poiché trasparenze e interpolazioni fatte in Flash hanno un impatto notevole sulle performance del telefonino, oltre che sulla sua memoria. Si può fare molto altro ancora con Device Central; è persino possibile selezionare più dispositivi in contemporanea per fare dei paragoni.

Figura 21 – L’interfaccia di Device Central, consente di effettuare numerosi test di ergonomia, funzionalità e performance.

Contribute CS3

Per chi non lo sapesse, (e in realtà, sono in molti) Contribute è un software progettato per modificare in maniera molto semplice siti web statici. Non ci dilungheremo più di tanto sui vantaggi di Contribute rispetto ad un CMS (vi rimandiamo per questo alla recensione della versione 4, pubblicata su Applicando di Gennaio), bensì sulle funzionalità del programma. Detto questo, c’è da rilevare che l’etichetta CS3, in questo caso non è sinonimo di grandi novità, e c’era da aspettarselo. Contribute è davvero molto elementare; arricchirlo di troppe funzionalità sarebbe controproducente, facendogli perdere quell’appeal che è tipico dei software essenziali, ma che assolvono egregiamente al proprio scopo. In questa versione è stata mantenuta la possibilità di gestire Blog e collegarsi ad un account .Mac, oltre che ai normali siti. I Blog più comuni supportati sono: Blogger, Typepad, Wordpress. È stato migliorato il supporto per i file video (che ora si estende anche ad altri formati, oltre l’FLV). Un’altra novità riguarda la possibilità di inserire un link ad Acrobat Connect (la piattaforma di formazione online di Adobe, precedentemente chiamata Breeze), specificando URL e dati di accesso. In questo modo, possiamo rendere disponibili da un sito, contenuti creati con Acrobat Connect, a chi ha le credenziali per poter accedere. Tra le novità figura anche la possibilità di inserire un campo di ricerca Google: una funzione molto comoda, che crea il codice necessario per il funzionamento, attraverso una proceduta guidata in tre passaggi. Anche in questa versione è stata mantenuta l’integrazione (solo nella versione per Windows) con Microsoft Office, dal quale è possibile creare Post su Blog e pubblicare contenuti in pochi passaggi. Insomma, le migliorie sono molto sottili, ma in ogni caso adeguate al tipo di target a cui ri si rivolge il programma.

Figura 22 – La nuova interfaccia di Contribute CS3.

Note conclusive

Il grado di integrazione che è stato raggiunto tra tutti i software della WebSuite CS3 (ma non solo, si pensi ad Indesign, Photoshop e Dreamweaver) è davvero stupefacente. Ora più che mai il nome Suite è calzante, giacchè tutti gli strumenti, come gli ingranaggi di un orologio Svizzero, funzionano armonicamente durante tutti il flusso progettuale e produttivo di un sito web. E quando (quasi sicuramente dalla prossima versione) anche Dreamweaver e Fireworks potranno utilizzare le nuove interfacce targate CS3, il lavoro sarà davvero completato. Nel frattempo c’è di che divertirsi con questo kit per il web design.