Integrazione con la Creative Suite CS4 e non solo
Dreamweaver CS4 permette di gestire tutte le fasi di realizzazione di siti web statici e dinamici, semplici o molto sofisticati. Un’attività di web design presuppone anche l’assemblaggio di componenti diversi tra loro: testo, immagini, video, audio, animazioni eccetera.
A parte il testo (che può anche essere creato da zero in Dreamweaver o importato dall’esterno, per esempio da Microsoft Word), gli altri componenti vengono normalmente creati con programmi diversi. Per esempio, è possibile che alcune immagini siano state realizzate in Photoshop o Fireworks, che alcuni elementi di design siano stati realizzati in un programma di impaginazione come InDesign, o ancora che altri elementi siano stati creati con Illustrator.
È quindi essenziale che in un programma di web authoring siano disponibili avanzati strumenti di integrazione con altre applicazioni. In questo articolo vedremo quali sono i principali strumenti che Dreamweaver CS4 mette a disposizione per l’interscambio di contenuti con applicazioni esterne e soprattutto le sofisticate funzioni di integrazione con gli altri programmi della Adobe Creative Suite CS4.
Adobe InDesign CS4
Ormai è una necessità di ogni grafico: i contenuti di un progetto cartaceo devono poter essere riutilizzati in un sito web o per un DVD. Questa operazione si effettua normalmente andando ad attingere alle immagini originali (per esempio TIFF e PSD) usate per la stampa, che devono poi essere ottimizzate in Photoshop o Fireworks. Può però capitare che i testi formattati di un impaginato debbano essere inseriti, insieme alle immagini, all’interno di una pagina web.
InDesign, il software professionale di Adobe dedicato all’impaginazione, offre da questo punto di vista una interessante funzione: l’esportazione per Dreamweaver. Questa funzione permette di esportare un insieme di elementi (testi formattati, immagini, elementi vettoriali) in XHTML, creando anche un file CSS per la corretta visualizzazione sul Web. La procedura di esportazione è stata progettata in modo che il lavoro risulti estremamente semplice, per dare a un qualsiasi grafico la possibilità di creare contenuti per il web a partire da un impaginato di InDesign, senza necessariamente avere profonde competenze in materia di linguaggi per la Rete. Ciononostante, per poter usare in maniera efficace la funzione di esportazione, è quantomeno necessario conoscere i rudimenti dei CSS, poiché l’intera procedura, e il risultato visivo del file XHTML prodotto, si basa integralmente su questi.
Per avviare l'esportazione basta andare nel menu File e selezionare l'opzione Esporta per Dreamweaver..., una volta stabilita la posizione in cui salvare il file, apparirà la finestra Opzioni esportazione XHTML nella quale potete regolare le impostazioni Generali, Immagini e Avanzate, visibile in figura 1, dove potete appunto regolare i CSS.
Figura 1: dettaglio della sezione Avanzate nella finestra di esportazione XHTML, dal quale è possibile decidere come gestire i CSS dell’impaginato
Adobe Photoshop CS4
Dreamweaver è perfettamente integrato anche con Photoshop, questo è un vantaggio per quegli utenti che usano spesso quest’ultimo per la creazione di layout.
Rispetto alla precedente versione è stato fatto un utile passo avanti. Quando si importa un file PSD in Dreamweaver (tramite la finestra di ottimizzazione), l’originale e quello ottimizzato vengono sincronizzati tra loro: tale collegamento viene mostrato attraverso una piccola icona in alto a sinistra nell’immagine. Se il PSD originale viene modificato, Dreamweaver informa l’utente colorando di rosso la freccia inferiore dell’icona di sincronizzazione, come si vede in figura 2.
Figura 2: quando il file PSD originale viene modificato, l’icona di sincronizzazione viene colorata di rosso nella freccia inferiore
Adobe Fireworks CS4
L’integrazione tra Dreamweaver e Fireworks è stata da sempre un punto di forza dei due programmi, sin da quando erano ancora sotto il nome di Macromedia. Di seguito, è sintetizzato un esempio concreto di integrazione, che può offrire un’idea sulle notevoli opportunità offerte durante un tipico flusso di lavoro.
Si procede aprendo un’immagine preesistente in Fireworks, o creandola da zero. Questa sarà inserita in una pagina web.
Suggerimento
Quando si opera in Fireworks è preferibile conservare sempre gli originali in formato PNG ed esportare le copie ottimizzate per il Web.
Si salva l’originale in formato PNG in una cartella del sito, chiamata per esempio sorgenti. Si seleziona poi il formato JPEG e si imposta il livello di compressione per l’immagine, dal pannello Ottimizza, e si esporta In Dreamweaver si inserisce il file JPEG appena esportato, tramite il comando Inserisci > Immagine. Si salva la pagina e si esegue un’anteprima nel browser (File > Visualizza anteprima nel browser > browser). Se il lavoro fatto è soddisfacente, tipicamente la pagina potrà poi venir caricata sul Web. Dopo averla pubblicata su Internet ci si potrebbe però accorgere che l’immagine è troppo pesante. Modificarne le impostazioni di compressione è a questo punto molto semplice.
In Dreamweaver è sufficiente riaprire la pagina, selezionare l’immagine e fare clic sul pulsante “FW”, accanto alla dicitura Modifica della finestra Proprietà.
Verrà avviato Fireworks con l’immagine originale: qui non dobbiamo far altro che aumentare il livello di compressione nel pannello Ottimizza, e poi fare clic sul pulsante Completato nella barra del documento che indica Modifica da Dreamweaver.
Il file JPEG verrà nuovamente ottimizzato, riesportato e aggiornato nella pagina di Dreamweaver. A questo punto basterà ricaricare sul server remoto i file modificati.
Attenzione
Talvolta potrebbe capitare che Fireworks chieda se si intende modificare direttamente il file ottimizzato: questo è dovuto al fatto che alcune volte si possono perdere i collegamenti incrociati tra il file ottimizzato e quello sorgente.
Questo tipo di integrazione è valida anche su documenti di Fireworks più sofisticati di una semplice immagine, come i menu a comparsa. Se si inserisce con il comando Inserisci > Oggetti immagine > HTML di Fireworks un menu a comparsa creato in Fireworks, potrà essere modificato successivamente con il pulsante della finestra Proprietà o con il comando Modifica con Fireworks del menu contestuale.
Anche in questo caso, al termine delle modifiche Dreamweaver aggiornerà automaticamente l’oggetto incorporato nella pagina web.
Adobe Flash CS4 Professional
L’integrazione con Flash è molto simile a quella con Fireworks, e altrettanto sofisticata.
Una volta importato un filmato Flash nella pagina web di Dreamweaver, nella finestra Proprietà è possibile scorgere, oltre ai controlli per impostare le caratteristiche del filmato SWF, anche il pulsante Modifica. Sei si fa clic sul pulsante Modifica viene avviato Flash e aperto il file sorgente (.fla) per apportare le modifiche, se disponibile.
Figura 3: se è selezionato il segnaposto di un filmato Flash, la finestra Proprietà mostra le opzioni relative per il file
Nota
In alternativa alla normale anteprima della pagina web, è possibile ottenere una visualizzazione del file swf, facendo clic sul pulsante Riproduci presente nella finestra Proprietà.
Figura 4: un file Flash aperto tramite il pulsante Modifica di Dreamweaver: vengono mostrate le icone dei due programmi e il pulsante Fine, per approvare le modifiche apportate e riesportare il file .swf
Adobe Contribute CS4
Contribute è un programma pensato per rendere semplice la modifica di siti statici da parte di utenti non professionisti. Una volta che il web designer ha preparato il sito in Dreamweaver, Contribute può essere utilizzato dal cliente finale che ha l’esigenza di aggiornare i contenuti del sito ma non possiede le necessarie competenze tecniche per utilizzare Dreamweaver.
Contribute è infatti molto più semplice da usare, la sua filosofia di utilizzo è molto più simile a un word processor che a uno strumento di web design.
Il programma è inoltre dotato di un sofisticato sistema di autenticazione e di validazione dei contenuti, che permette a più utenti autorizzati di intervenire su diverse pagine di un sito. Tra le varie modifiche che è possibile fare è degna di nota la possibilità di inserire file video di Flash (.flv) con una finestra di impostazione simile a quanto avviene già in Dreamweaver. Inoltre si possono fare alcuni interventi sulle immagini. Non è però questa la sede per approfondire le funzioni proprie di Contribute: spiegheremo invece come rendere il sito di Dreamweaver compatibile con questo programma.
Si apre la finestra di definizione del sito che deve essere compatibile con Contribute. Si attiva la scheda Contribute e si fa clic sulla casella di controllo Abilita compatibilità con Contribute.
Dreamweaver deve abilitare le Design Notes e il sistema di deposito/ritiro, per garantire la compatibilità con Contribute: nel caso le Design Notes non fossero già attivate, Dreamweaver avviserà che l’attivazione verrà eseguita in automatico. In questo caso (e se le informazioni di identificazione non sono state ancora specificate), una ulteriore finestra di dialogo chiederà di immettere il nome e l’indirizzo email che identificheranno il deposito/ritiro dei file da quella determinata postazione.
Una volta abilitata la compatibilità con Contribute, altre caselle si aggiungono alla scheda Contribute della finestra di definizione del sito: la cartella principale (dove eventualmente, se è necessario, modificare la URL) e il pulsante Amministra il sito in Contribute, che consente di svolgere l’attività di amministrazione del sito. Per sfruttare e portare a termine queste opzioni è necessario che il computer possa collegarsi al sito remoto e che Contribute sia installato.
 |
|
|
|
|
