La prima novità a farsi notare in questa decima versione di Dreamweaver – una volta dimessa la Schermata di benvenuto , che offre l’accesso rapido alla creazione di nuovi documenti e all’apertura di file recenti, oltre a numerosi link a guide sulle nuove funzioni del programma, in formato testuale e multimediale – è l’interfaccia rinnovata e resa ora omogenea agli altri software della Creative Suite. Non si tratta dunque di un semplice restyling nel look&feel, pur presente, ma di una nuova impostazione funzionale dell’intera area di lavoro. I pannelli possono essere infatti compressi in icone, che rimangono agganciate al bordo dello schermo e che riducono l’occupazione di spazio. Un clic sull’icona fa apparire il pannello corrispondente, un clic al di fuori del quale (o il completamento di un’operazione) lo nasconde di nuovo. I pannelli non devono però rimanere necessariamente impilati e agganciati l’uno all’altro. Basta trascinare l’intestazione al di fuori del set in cui è incluso perché un pannello diventi flottante, con la possibilità di posizionarlo dove si preferisce (in parte come avveniva prima per la compressione ed espansione dei gruppi di pannelli, ma con un nuovo aspetto grafico).
L’organizzazione di pannelli in set rimane completamente personalizzabile (basta trascinare il titolo del pannello o l’icona su un diverso riquadro). In più, l’intera area di lavoro offre ora un livello più sofisticato di personalizzazione. In alto nell’area di lavoro è presente la barra dell’applicazione che, oltre ai pannelli della finestra Inserisci, ospita altri controlli, tra cui un menu che consente di cambiare layout dell’area di lavoro, salvarne di nuovi e richiamarli in qualsiasi momento. All’installazione di Dreamweaver il menu è popolato con una serie di layout predefiniti (ottimizzati ad esempio per l’attività del designer, dello sviluppatore e così via). Una volta personalizzato il proprio layout, è possibile salvarlo per attivarlo successivamente. Della personalizzazione fanno parte caratteristiche come i pannelli aperti e chiusi, compressi ed espansi, la loro posizione e così via. I pannelli possono essere infatti agganciati al bordo sinistro, destro o inferiore dell’area di lavoro. Alcuni pannelli vengono (correttamente) aperti da Dreamweaver di default nella parte inferiore della scrivania: si tratta di quelli che hanno tipicamente uno sviluppo orizzontale, come ad esempio la finestra Proprietà (tradizionalmente in basso, sotto i documenti) o quella con i Rapporti e i Riferimenti.
Nel suo complesso, l’interfaccia “elastica” (come del resto per le altre applicazioni della Creative Suite, ma in Dreamweaver è una novità) tende a sfruttare al massimo l’area dello schermo, anche se rispetto ad esempio a Illustrator, non è possibile abilitare lo sfondo dell’applicativo che nasconde del tutto il desktop del Mac, in una maniera che è tipicamente più comune nelle applicazioni Windows. La fluidità e l’estrema flessibilità dei pannelli degli strumenti rende comunque il lavoro – a nostro parere – notevolmente più comodo, una volta presa dimestichezza con il nuovo stile. Tra l’altro ci sono da sottolineare due ulteriori elementi positivi della nuova interfaccia. Innanzitutto il fatto di avere un look&feel comune alle altre applicazioni della CS4 rende più intuitivo e immediato il passaggio da un programma all’altro della Suite. Inoltre, il team di sviluppo di Dreamweaver ha calato la nuova veste sull’applicazione senza assolutamente stravolgerne i punti di riferimento: molte delle opzioni descritte erano infatti già presenti nelle versioni precedenti e ora sono semplicemente potenziate; inoltre l’aspetto e la filosofia di funzionamento dei singoli pannelli non hanno subito profonde revisioni. In sostanza, il “vecchio” utente di Dreamweaver non si troverà spiazzato e non faticherà a ritrovare le funzioni nei luoghi dove è abituato a cercarle.
Pagine web sotto controllo
All’apertura di un documento HTML si notano altre gradevoli sorprese: piccoli dettagli che faranno però piacere agli utenti di lungo corso, che da tempo li richiedevano. È ora possibile (finalmente!) dividere la vista Codice in due, per lavorare contemporaneamente sui tag di due sezioni diverse del documento, e dividere in due la finestra in verticale, nella vista Codice e Progettazione. In quest’ultimo caso è possibile decidere se avere la vista Progettazione a destra o a sinistra (e in alto o in basso se la finestra è divisa in orizzontale). Le nuove modalità di visualizzazione sono disponibili come voci di menu, anche nella barra dell’applicazione, mentre i tasti di scelta rapida della vista rimangono i tre classici Codice, Dividi e Progettazione. Sarebbe stato forse il caso di associare tasti di scelta rapida anche alle nuove viste, ma ci accontentiamo di questa piccola ma preziosa aggiunta.
Nella barra applicazioni, di fianco al menu delle viste sono presenti altri due menu che offrono un accesso rapido alla gestione delle estensioni e dei siti. A destra del menu di scelta del layout dell’area di lavoro c’è invece un campo di ricerca che punta, in modo forse non del tutto intuitivo, al sito di supporto Adobe, online. Sulla destra, infine, troviamo i pannelli della barra Inserisci.
Pur nella funzionalità, che non neghiamo, della nuova area di lavoro, abbiamo però notato delle incongruenze abbastanza fastidiose nella versione Mac. Innanzitutto molte scorciatoie da tastiera continuano a essere in conflitto con quelle di sistema. Inoltre, ancora non sono possibili alcune operazioni banali, come ad esempio trascinare dei documenti dal Finder in una cartella del sito, nel pannello File di Dreamweaver. Non sono infine mancate, in queste prime esperienze di utilizzo, delle stranezze di comportamento: ad esempio nel tentativo di personalizzare le posizioni della finestra Inserisci e della Barra applicazioni, quest’ultima è sparita e non siamo stati in grado di farla riapparire se non ripristinando il layout di default e riavviando il programma. Problemi di gioventù, evidentemente; si spera in successivi aggiornamenti. Ma riprendiamo con le note positive, che non sono certo esaurite.
Esploratori del codice
Nella finestra del documento, insieme alle consuete barre degli strumenti, appare una nuova barra File correlati che elenca i documenti inclusi nel documento aperto (fogli di stili esterni, librerie JavaScript e così via). In pratica abbiamo sempre sott’occhio tutti i file che, insieme al documento attivo, concorrono al risultato finale nel browser. Con un clic sul nome del file nella barra File correlati, si attiva quel determinato file e lo si può editare in vista codice; con un clic con il tasto destro lo si può aprire in una finestra separata. Come già nella versione precedente, i documenti possono essere aperti come pannelli di un’unica finestra o all’interno di nuove finestre.
Nonostante ciò, identificare l’attributo o la proprietà responsabile di un determinato effetto all’interno della pagina, nei vari livelli di nidificazione di un sito basato sui CSS, può risultare difficoltoso e frustrante. In nostro aiuto abbiamo, già dalle versioni precedenti, il selettore di tag nella barra di stato. L’esplorazione dei tag e delle proprietà CSS può ora andare ancora più a fondo. Nel menu che si apre al clic destro su un tag, c’è infatti una nuova voce Navigazione codice, davvero preziosa. La palette Code navigator presenta una lista dei “pezzi di codice” correlati all’elemento selezionato, con l’indicazione del file dove sono collocati. Ad esempio, selezionando un elemento, abbiamo rapidamente accesso alla lista delle regole CSS che ne definiscono l’aspetto, anche se sparse su vari fogli di stile. Selezionando una delle righe della lista, Dreamweaver ci porta alla regola scelta, per poterla modificare, nel file dove essa è contenuta. Il Code navigator è sempre a portata di… mouse. Per farlo apparire basta infatti fare clic su un elemento, in vista Progettazione, tenendo premuti i tasti Alt e Comando; inoltre, se ci soffermiamo con il cursore di fianco a un elemento per qualche istante, Dreamweaver visualizza l’icona a forma di timone di Navigazione codice, per aprire la palette con un semplice clic.
Sempre in tema CSS, Dreamweaver si è già adeguato da tempo alle best practice dello sviluppo web, fondando sui Cascading Style Sheets il proprio motore di generazione visuale delle pagine. Ora fa un ulteriore passo in quella direzione dividendo la finestra Proprietà in due sezioni distinte: HTML e, appunto, CSS. In questo modo diventa ancora più spontaneo “ragionare” direttamente con la filosofia degli stili CSS, lavorando sull’aspetto estetico della pagina e dei suoi elementi.
Una delle novità più importanti di Dreamweaver CS4 è del tutto nascosta alla vista di noi utilizzatori, se non per i benefici che apporta. La vista Progettazione può infatti cedere il posto a una vera e propria anteprima, visto che in Dreamweaver è stato integrato il motore di rendering HTML e interprete JavaScript WebKit, lo stesso utilizzato da Apple in Safari e da Adobe stessa in AIR. Si tratta quindi di un engine open source diffuso, robusto ed efficiente. Le nuove funzioni Live View e Live Code di Dreamweaver CS4 sono basate su di esso. Facendo clic sul pulsante Vista dal vivo nella barra degli strumenti Documento, si ha quindi un’effettiva anteprima della pagina e del suo funzionamento (script inclusi) nell’ambiente di lavoro. Ciò ovviamente non rende superflua l’anteprima nel browser (sempre disponibile nel solito menu, insieme all’anteprima in Device Central) e gli indispensabili controlli cross-browser, ma può rappresentare un bel risparmio di tempo in molte occasioni. La Vista dal vivo offre diverse opzioni, tra cui la disattivazione di JavaScript o dei plug-in o la possibilità di scegliere l’origine del documento sul server di prova. Ancora più entusiasmante è la funzione Live Code: un clic sul pulsante Codice dal vivo e la vista Codice si aggiornerà in base alle operazioni sulla pagina. Ad esempio, se abbiamo inserito una barra di menu Spry (i menu a tendina realizzati con il framework AJAX di Dreamweaver), attivando il Live Code e passando il mouse sulle voci di menu, vedremo i corrispondenti elementi nel codice attivarsi e disattivarsi, cambiare classe e stato, il tutto in tempo reale! Possiamo addirittura bloccare JavaScript in un qualsiasi punto dell’esecuzione per osservare lo stato del codice in quel particolare momento ed esplorare le proprietà degli elementi della pagina (ma anche in questo caso la scorciatoia da tastiera potrebbe dover essere personalizzata, sul Mac).
Per gli sviluppatori sono presenti altre migliorie meno eclatanti ma comode nel lavoro quotidiano, a partire da un più esteso supporto per JavaScript e Spry nei suggerimenti del codice e la rilevazione degli errori di sintassi in tempo reale. La nuova opzione HTML come origine dati per un dataset Spry sarà invece forse apprezzata dagli sviluppatori meno esperti, ma rischia di ingenerare delle implementazioni quanto meno poco pulite. A proposito di Spry, in Dreamweaver CS4 viene utilizzata la versione 1.6.1. Merita una menzione anche il supporto per il controllo delle versioni con Subversion.
Una famiglia unita
La seconda edizione della suite per il web targata Adobe, dopo l’acquisizione di Macromedia, non poteva che migliorare ulteriormente l’interoperatività con gli altri prodotti della CS4 e con le altre tecnologie della casa. Molto utili in tal senso gli Smart object per l’integrazione con Photoshop, integrazione già presente nella CS3, ma che ora trova una sua completezza in entrambe le direzioni, in maniera simile al Roundtrip con Fireworks. In pratica trascinando su una pagina un file .psd, viene visualizzata come di consueto la schermata di ottimizzazione per salvare una versione per il web dell’immagine e il programma mantiene un “collegamento virtuale” con il file sorgente. Un’apposita icona segnalerà che quell’immagine è collegata a un file sorgente esterno. Una qualsiasi modifica eseguita in Photoshop su quel file, sarà evidenziata in Dreamweaver per segnalare al designer che l’immagine va sincronizzata. Basta a quel punto aggiornare dall’originale, per avere una versione ottimizzata secondo le impostazioni stabilite in precedenza, ma che includa le ultime modifiche effettuate in Photoshop. Oltre che per mantenere sincronizzati gli asset senza dover passare continuamente da un’applicazione all’altra, questa funzione è utile anche per una migliore integrazione nel lavoro in team tra designer e sviluppatori. Inoltre, consente di poter riadattare le dimensioni delle immagini ottimizzate senza perdere in qualità, dato che ogni successiva elaborazione viene comunque eseguita a partire dal file sorgente originale, che si suppone sia conservato in alta risoluzione. Anche in questo caso, come per altre novità di Dreamweaver CS4, non si tratta certo di una rivoluzione, ma di un passo in avanti in una direzione già avviata nella CS3 e comunque di un’apprezzabile miglioria tesa a rendere più efficiente e produttivo il flusso di lavoro. Per quanto riguarda invece la compatibilità con AIR, la piattaforma cross-platform per eseguire le Rich Internet Application sul desktop, è stata resa disponibile anche l’estensione compatibile con Dreamweaver CS4 (ed è ancora disponibile quella per Dreamweaver CS3), da scaricare e installare a parte.
Editing tra le nuvole
Adobe nell’ultimo periodo ha lanciato numerosi servizi online, alcuni dei quali ancora in fase beta, che trasportano sulla Rete (Cloud computing) le tecnologie dell’azienda. Adobe InContext Editing è un mix tra una serie di librerie e di strumenti disponibili in Dreamweaver e un servizio online, che consente di effettuare modifiche alle pagine web direttamente dal browser. Il funzionamento è simile a Contribute, con la definizione in Dreamweaver di aree modificabili, solo che in questo caso non deve essere installata alcuna applicazione sui computer client degli operatori che devono apportare modifiche alle pagine: potranno infatti eseguirle semplicemente con un browser compatibile (su Mac, Safari 3.1 o Firefox 3.x). L’amministratore del sito dovrà però effettuare una serie di operazioni: caricare sul sito le librerie JavaScript per ICE (copiate da Dreamweaver automaticamente nel sito locale, quando si usa una funzione di InContext Editing), registrarsi (o autenticarsi) sul sito Adobe di amministrazione del servizio, registrare il sito su cui si intende attivare il servizio ICE, definire i privilegi per nuovi utenti e inviare i cosiddetti “inviti” a tali utenti. Da quel momento in poi gli utenti per i quali sono stati definiti i privilegi possono modificare le aree editabili delle pagine direttamente nel browser. Un’ottima opportunità per i webmaster che vogliono offrire ai propri clienti (o ai curatori del sito) l’opportunità di aggiornare i contenuti senza farli intervenire nella struttura HTML). In realtà dobbiamo usare ancora il condizionale, perché InContext Editing è per ora disponibile come anteprima esclusivamente per gli utenti degli Stati Uniti. Al momento in cui scriviamo Adobe ancora non ha fornito indicazioni su quando sarà rilasciato in via definitiva, né per quali paesi sarà disponibile. Sul prezzo del servizio ci sono solo delle indicazioni di massima e c’è inoltre da dire che è necessario registrare nel pannello di amministrazione a esso dedicato (sui server Adobe) tutti i parametri di accesso FTP al proprio sito, e ciò potrebbe suscitare più di qualche (fondato) dubbio. Concludiamo con un’annotazione generale per la suite per il web: i requisiti di sistema non sono affatto leggeri e possono mettere a dura prova alcune configurazioni, soprattutto portatili. Rimandiamo al sito al sito per l’elenco completo e dettagliato (oltre che aggiornato) e per altre informazioni al riguardo. Sullo stesso sito sono inoltre disponibili le versioni di prova, anche in italiano, delle applicazioni.
