Le novità di Dreamweaver MX I

Come si diceva, enormi sono le nuove funzionalità introdotte da questa versione
di Dreamweaver, non basterebbe l'intero corso per illustrale in dettaglio.

E tuttavia mia intenzione passarle in rassegna sinteticamente, mostrando i
cambiamenti più significativi. Ciò servirà ai principianti per fare un ulteriore
passo nella conoscenza di questo programma - prima di addentrarci nel dettaglio
delle principali funzionalità - ma soprattutto potrà essere utile a coloro i
quali, conoscendo già Dreamweaver, potranno subito trarre vantaggio dalle nuove
funzionalità.

Le principali novità di Dreamweaver MX possono essere raggruppate in sei macroaree:

La nuova interfaccia;

L'integrazione di HomeSite al suo interno ed i conseguenti
miglioramenti soprattutto quando si lavora direttamente sul codice;

Le funzionalità per aderire agli standard del
web stabiliti dal W3C (World Wide Web Consortium);

La più stretta integrazione con gli altri software della
Macromedia;

Le tecnologie ed i linguaggi lato server supportati;

I modelli "Quick Start".

La nuova interfaccia

Come già illustrato nel primo capitolo e successivi, l'interfaccia è radicalmente
cambiata, ricordiamo i punti già illustrati in precedenza:

• Interfaccia integrata;
• La possibilità di aprire più documenti e passare dall'uno all'altro selezionando
  il nome del file posto sopra la Barra di Stato;

• La nuova Toolbar Standard;
• Il modo di gestire sganciare e raggruppare i pannelli;
• Il gruppo di pannelli Result;
• Il pannello Sitespring per l'integrazione con questo software
  Macromedia per la gestione della produzione di siti web;
• Il pannello Answers;
• I pannelli Tag Inspector e Snippets
  all'interno del gruppo Code.

L'integrazione di HomeSite

L'integrazione di HomeSite all'interno di Dreamweaver MX ed i miglioramenti
nella gestione del codice non si fermano ai due nuovi pannelli Tag Selector
e Snippets.

Infatti basta andare in Code View e digitare il segno minore
< (di apertura del tag) e apparirà il Code Hints, scorrendo
la barra orizzontate (o digitando l'iniziale del tag) e cliccando due volte
sul tag prescelto o premendo il tasto Invio esso sarà inserito.

Spostandoci di uno spazio verrà visualizzato il gruppo di attributi disponibili,
cliccando sue volte sull'attributo prescelto esso verrà inserito e, ove disponibile,
ci farà visualizzare un elenco di valori da inserire, scelto ed inserito - come
precedentemente - il valore, basterà digitare il segno maggiore > (chiusura
di tag) e Dreamweaver MX inserirà automaticamente il tag di chiusura, ove necessario.

Nell'esempio scelto ho inserito <p align="justify"></p>
come si vede il cursore automaticamente lampeggia tra il tag di apertura e quello
di chiusura, consentendoci, non appena inserito il segno > nel tag di apertura,
di inserire il testo del paragrafo.

Sempre in modalità Code View si può seguire un'altra procedura
per inserire i tag.

Col click destro del mouse si scelga dal menu contestuale
Insert Tag... verrà così visualizzata la finestra di dialogo
Tag Chooser.

Il Tag Chooser è diviso in due parti, sulla sinistra una serie
di cartelle relative ai vari linguaggi per i quali è possibile scegliere il
tag (HTML, CFML, ASP.NET, JSP, Jrun Custom Library, ASP, PHP, WML, Sitespring
Project Site Tags), sulla destra l'elenco generale dei tag relativo al linguaggio
selezionato. Le cartelle a loro volta contengono delle sottodirectory che suddividono
il linguaggio in categorie, selezionando una delle sottodirectory appaiono solo
i tag relativi a quella categoria. Una ulteriore suddivisione consente di scegliere
all'interno della sottodirectory prescelta la sottocategoria General,
Browser-specific, Deprecated o Obsolete
ed i relativi tag. Qualora la lista di tag , tra quelli disponibili sulla destra
della finestra, sia lunga, piuttosto che scorrere la barra verticale, è sufficiente
selezionare uno qualsiasi dei tag e digitare sulla tastiera la lettera iniziale
del tag desiderato, il Tag Chooser si posizionerà sul primo tag che inizia con
quella lettera dell'alfabeto.

Una terza parte, in basso, della finestra di dialogo del Tag Chooser permette
di accedere alla reference del linguaggio. Il tasto sulla sinistra Tag
Info fa apparire la reference sulla parte inferiore della finestra,
il tasto <?> invece apre il pannello Reference.
Si noti come dal menu del pannello Reference è possibile scegliere
la dimensione del testo visualizzato.

Avvertenza: questa è una versione ridotta del pannello laterale Reference che non consente di visualizzare gli attributi relativi ai tag.

Una volta selezionato il tag, cliccando su insert, si apre il Tag Editor
dal quale possiamo scegliere o digitare attributi, valori ed eventi JavaScript
per il tag selezionato ed se il caso, anche il contenuto. In questo esempio
il testo del paragrafo. Si noti come la reference a comparsa, sia disponibile
anche nella parte inferiore anche del Tag Editor.

Inserito - se necessario - l'eventuale attributo il tag comparirà nel codice
della pagina che stiamo realizzando.

Avvertenza: tutte queste e le altre funzionalità, specifiche per il lavoro sul codice, richiedono una particolare attenzione, l'utente deve sapere che cosa sta inserendo e dove inserirlo, altrimenti si può incorrere, in gravi errori. A titolo di esempio si provi ad inserire una immagine mentre il cursore si trova tra la "o" e la "d" del tag body e si visualizzi l'anteprima sul browser.

Si può anche aprire autonomamente il Tag Editor, sempre tramite
il menu contestuale (click destro del mouse), per modificare un tag già inserito
dopo averlo selezionato, sempre in modalità Code View.

Si accennava precedentemente che il pannello Snippets, oltre
a consentire l'inserimento degli oltre 200 snippets già integrati in Dreamweaver
MX, consente di salvare pezzi di codice, che si prevede di utilizzare spesso.

Immaginiamo di volere inserire i meta tag che bloccano
l'uso degli "smart tags" e non fanno visualizzare la fastidiosa "image toolbar"
di Microsoft Internet Explorer.

Dopo aver inserito tali meta, selezioniamo la cartella Meta
nel pannello Snippets e selezioniamo nel codice della pagina
i meta prescelti, dal menu contestuale (tasto destro del mouse) scegliamo Create
new Snippet, verrà così visualizzata la finestra di dialogo Snippet,
con già inseriti i meta, aggiungiamo nei relativi campi un titolo ed una descrizione,
clicchiamo OK e lo snippet comparirà nell'elenco di quelli inseriti nella cartella
meta.

Tutte le volte successive che vorremo inserire i meta "imagetoolbar"
e "MSSmartTagsPreventParsing", sarà sufficiente posizionarci all'interno
del tag head e dalla cartella Meta del pannello Snippets,
con un doppio click, inserire lo snippet da noi creato.

Ho pacchettizzato questi meta come estensione accessibile appunto dal pannello
Snippets cartella Meta.

Avvertenza: per questa estensione è necessario riavviare Dreamweaver.

Scarica l'estensione Meta MS Image & Smart (versione HTML)

Scarica l'estensione Meta MS Image & Smart (versione XHTML)

 

Per la verità gli snippets non sono una novità assoluta per Dreanweaver,
infatti coloro i quali avevano acquistato Snippets
Panel un'estensione commerciale realizzata da Massimo Foti, hanno potuto
godere di questa funzionalità fin da Dreamweaver 4 e Dreamweaver UltraDev
4. Sebbene il pannello Snippets sia ormai integrato in Dreamweaver MX, questa
estensione presenta ancora alcuni vantaggi: compatibilità con gli snippets
di HomeSite, ColdFusion Studio, JRun Studio, import/export integrato e prestazioni
decisamente superiori.

Per l'estensione Snippets panel è stato realizzato Snippets
Exchange un'area dove è possibile loggarsi, scaricare ed installare
snippets pacchettizzati come estensioni per Dreamweaver. Questi snippets - oltre
200 - sono disponibili anche per coloro i quali non abbiano acquistato l'estensione
Snippets panel. E' anche disponibile un Newsgroup
di supporto.

E' possibile anche scaricarne molti in una volta selezionandoli ed andando
nella relativa pagina che ci permetterà di scaricare un file zip contenente
tutti gli snippets da noi selezionati. e successivamente eliminarli dall'area
personale di download dove è situato il nostro file zip.

Tuttavia poiché il formato degli snippets dell'estensione Snippets panel
è analogo a quello degli snippets per HomeSite ColdFusion Studio e JRun
Studio, ma diverso da quello degli snippets per Dreamweaver MX, coloro i quali
hanno installato gli snippets per l'estensione Snippets panel o - in quanto
utilzzatori dei summenzionati software - hanno degli snippets nel formato non
compatibile per Dreamweaver MX, potranno scaricare un'estensione gratuita Snippets
Converter, che importa e converte il formato di questi snippets nel formato
di Dreamweaver MX. Istruzioni sullo Snippets Converter
sono disponibili cliccando il pulsante Help
dell'estensione.

Scaricata, installata e lanciata l'estensione si localizzi le cartelle degli
snippets da convertire - per gli snippets scaricati da Snippets Exchange bisogna
andare nella cartella:
C:/Programmi/Macromedia/Dreamweaver MX/Configuration/Snippets/le varie cartelle
contenenti le categorie di snippets
e cliccare su OK.

Una finestra di dialogo ci avvertirà quanti snippets da convertire sono
stati trovati, cliccando su OK inizierà il processo di conversione. terminata
la conversione un'altra finestra ci darà un rapporto sulla conversione.
Riavviando Dreamweaver gli snippets così convertiti saranno disponibili.

In ogni caso gli utenti di Dreamweaver MX che scaricano gli snippets da Snippets
Exchange non hanno bisogno di convertire questi snippets in formato utilizabile
da Dreamweaver MX, in quanto sono tutti compatibili anche con il pannello Snippets
di Dreamweaver MX

Un'altra nuova funzionalità attivabile dal pannello Tag Inspector
è la possibilità di creare tag personalizzati o aggiungere valori ed attributi
a quelli già esistenti. Tale potenzialità è particolarmente utile in linguaggi
come il CFML. Tuttavia qui rappresenteremo un esempio relativo all'HTML per
dimostrarne il funzionamento.

Immaginiamo di volere aggiungere un target personalizzato al tag <a>.
Dunque una volta inserito il tag lo selezioniamo dal pannello Tag Inspector,
cliccando sul pulsante Tag Library Editor del pannello, si
aprirà la relativa finestra di dialogo con la sottocartella relativa al tag
<a> selezionata, aprendo la sottocartella e selezionando l'attributo target
è possibile aggiungere il nome di un frame, ad esempio, "mainframe" separandolo
con una virgola dal valore precedente. Salvate le modifiche è possibile richiamare
anche il target personalizzato dall'elenco a discesa dei target situato nelle
parte inferiore del pannello Tag Inspector.

Un'altra novità relativa al codice è accessibile dal menù:
Edit: >> Preferences... >>Code coloring
che offre un migliorato supporto alla colorazione del codice, adesso
più semplice da gestire e con opzioni differenziate per i vari linguaggi.

Infine è adesso possibile
File >> Print Code...
oppure dal menù contestuale (click destro del mouse) in modalità
Code View stampare il codice del documento, anche se solo in
bianco e nero.