Semanticstone - tutto il web che conta in pillole!

Dreamweaver CS4 ha fatto il lifting, presentando un interfaccia nuova e più conforme a quella degli altri strumenti della suite CS4 Adobe, e alcune utili novità.
Parliamone brevemente…

• la nuova interfaccia: forse la “novità più appariscente” presenta una disposizione dei pannelli più flessibile e funzionale. Fata per sfruttare al meglio lo spazio e al contempo facilitare le abitudini degli utenti più smaliziati. Benchè l’estetica sia cambiata molto e in meglio le grosse variazioni funzionali sono tre:
  • il tasto di “gestione aree di lavoro” che permette di passare istantaneamente ad una differente disposizione dei pannelli. Oltre alle disposizioni predefinite è possibile sceglierne di customizzate. In questo modo è possibile massimizzare la produttività in base al tipo di attività che si sta svolgendo. Anche nella precedente release era possibile personalizzare le aree di lavoro, ma per farlo era necessario entrare nelle preferenze.
  • la nuova finestra di ispezione proprietà: decisamente un segno di buona volontà da parte di adobe. Ora le proprietà degli elementi html sono distinte. Con il pannello html si effettuano cambiamenti al codice html mentre con il pannello css si creano nuove regole o si modificano le regole già esistenti. Nella precedente versione il pannello era unico e l’effetto di ogni proprietà “non era chiaro”.
  • la live view: questa nuova funzionalità non fa che andare in contro ad un abitudine già instaurata in ogni webdesigner. Ovvero: diffidare della vista progettazione ma testare il layout esclusivamente su browser. In pratica la live view sostituisce il pannello progettazione con un anteprima basata su Webkit, il medesimo motore di rendering di Chrome e Safari. Selezionando parti della pagina di riflesso vengono evidenziate parti del codice. Inoltre il liveview è accompagnato dal live code che permette di vedere il codice generato da javascript e script lato server (in questo caso è necessario configurare un server di prova). Anche in questo caso Adobe ha dato prova lungimiranza considerando quanto sono diffusi strumenti come firebug, webdeveloper ecc.
• Suggerimenti codice potenziati: i suggerimenti codice di Dreamweaver sono sempre stati molto utili. Ora diventano “intelligenti” e rendono disponibili anche la sintassi js e gli oggetti avanzati disponibili nei vari framework. Se ad esempio collegate jQuery alla pagina, oggetti e funzioni del framework divengono disponibili.
• File correlati sempre disponibili: personalmente ho apprezzato molto questa nuova impostazione. In pratica Dreamweaver riporta in un apposita barra tutti i file collegati al documento aperto, in questo modo è possibile avere sempre sottomano tutti i file su cui si sta lavorando (file css, js ecc.).
  
• Navigazione codice: premendo il tasto alt mentre si seleziona un elemento nell’area progettazione apre una finestra che vi indica sinteticamente i selettori css applicati all’elemento. cliccando su uno di questi elementi si aprirà il documento css nel punto che contiene la regola.
• Oggetti avanzati di Photoshop: questa novità è stata molto pubblicizzata; in effetti è piuttosto interessante! In pratica è possibile inserire un immagine in formato PSD in una pagina html. Dreamweaver si occuperà di convertire il documento nel formato grafico desiderato (in pratica è stato integrato il pannello “salva per il web” di Photoshop in Dreaweaver). Inoltre se aggiornate il file psd anche il documento inserito nella pagina web si aggiornerà mantenendo di fatto la sincronizzazione. L’unico limite che ho riscontrato sta nel fatto che se provate ad usare un file psd per definire un immagine di background via css questa sincronizzazione si perde. La seconda novità, che io reputo di gran lunga più utile, è la possibilità di copiare e incollare porzioni di immagine da Photoshop a Dreamweaver. Questo vi permette di montare al volo le porzioni grafiche desiderate in modo molto immediato.