Generare codice XHTML validato con Dreamweaver

Traduzione di un articolo di Carrie Bickner: Modifying Dreamweaver to Produce Valid XHTML A List Apart – 22 March 2002—Issue No. 141 http://www.alistapart.com/stories/dreamweaver/ Macromedia DREAMWEAVER 4 non supporta – nella sua configurazione standard – la generazione di codice XHTML. Grazie alle caratteristiche di flessibilità e l’interazione con la Community degli utenti, Dreamweaver 4 può diventare […]

Traduzione di un articolo di Carrie Bickner: Modifying Dreamweaver to Produce Valid XHTML
A List Apart – 22 March 2002—Issue No. 141 http://www.alistapart.com/stories/dreamweaver/

Macromedia DREAMWEAVER 4 non supporta – nella sua configurazione standard – la generazione di codice XHTML. Grazie alle caratteristiche di flessibilità e l’interazione con la Community degli utenti, Dreamweaver 4 può diventare con facilità e con un minimo dispendio di tempo uno degli strumenti migliori sul mercato per la produzione di documenti codificati in XHTML.

Naturalmente, ricorda di convalidare le pagine. Perché aver trasformato Dreamweaver in uno strumento standards-friendly non significa che le tue pagine saranno sempre conformi agli standard del W3C. [L’utilizzo di editor visuali non consente di generare documenti validati, in particolare la scrittura di codice XHTML e l’uso dei fogli di stile implica il diretto contatto con il sorgente, anche se la modalità wysiwyg consente di risparmiare tempo nelle operazioni di routine. Disporre degli automatismi cui siamo avvezzi anche per lo standard attuale, XHTML, ci consentirà di continuare a servirci in modo efficace di Dreamweaver, assieme a editor di codice come Editplus, Notepad, Textpad, HomeSite, BBEdit, PageSpinner o quant’altri abbiamo la consuetudine di utilizzare per la scrittura e l’ottimizzazione del codice.]

Elementi e attributi con lettere minuscole

Il codice XHTML deve essere scritto in lowercase, settiamo pertanto Dreamweaver per scrivere i markup di conseguenza:

Dalla barra dei menu scegli Edit>Preferences (Modifica>Preferenze).
Nel dialog box “Preferenze”, seleziona “formato codice” alla sinistra del dialog box.
Setta “Maiuscole/minuscole per i tags” e “Maiuscole/minuscole per attributi” in minuscolo.
[La mia versione di DW4 presentava i settaggi corretti di default]

Doctype di default
I documenti XHTML devono iniziare con un namespace e una XHTML Document Type Declaration (con l’inclusione di una URL che punti ad una Document Type Definition online). Il template di default in Dreamweaver 4 è il seguente:

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

La corretta DTD è invece la seguente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Untitled Document</title> </head>

E’ agevole trasformare il template di default includendo questa DTD (o qualsiasi altra):

Individua il documento Default.html:
– Windows: C:ProgramFilesMacromediaDreamweaver4ConfigurationTemplatesDefault.html.
– Macintosh: HardDrive/Dreamweaver4/Configuration/Templates/Default.html.
(Effettua se lo ritieni opportuno un backup del file.)
Apri Default.html e modifica lo head in modo da includere la Document Type Declaration e il namespace riportati qui sopra (o quelli di tua scelta).
Approfitta dell’occasione per editare il <body>, eliminando il body color ed il colore text/link, che saranno opportunamente gestiti dal tuo cascading style sheet.
Potrai inoltre predisporre link a CSS, inserire i meta tag costanti, e dichiarare il tuo character set.
[In questo modo, per ciascun nuovo documento avrai già pronte le impostazioni iniziali ;-]

La chiusura degli elementi “vuoti”

XHTML richiede la chiusura degli elementi vuoti – non closing (“empty”) -, tra i quali come è noto form tags, image tags, horizontal rule tags e break tags. (Per ulteriori informazioni, confronta le XHTML Guidelines nella NYPL Online Style Guide e le W3C’s HTML Compatibility Guidelines for XHTML 1.0.) La chiusura di questi elementi può essere una operazione fastidiosa e richiedere molto tempo, se la transizione al nuovo standard dovrà applicarsi a molti documenti. Dreamweaver, con l’investimento di pochi minuti per piccole modifiche, potrà svolgere automaticamente queste routine, anche per un intero sito [vedi oltre: l’estensione di Jason Dalgarno;-], o per la creazione di nuovi documenti.

Un esempio: 
Iniziamo con il line break (interruzione di riga); cambiamo con .

Individua il file LineBreak.htm in ConfigurationObjectsCharacters.
(Effettua se lo ritieni opportuno un backup del file.)

Apri LineBreak.htm.
Edita la riga 17 sostituendo con .
Salva e chiudi il file.
Apri un nuovo documento con Dreamweaver e inserisci un line break (shortcut: Maiusc+Invio).
Controlla il codice generato per assicurarti del buon esito della modifica.

Chiudere le immagini

Il procedimento per il file Image.js è simile:

Apri il folder ConfigurationObjectsCommon.
Effettua un backup di Image.js.
Apri il file Image.js e modifica la riga 21:
return '<img src="' + newURL + '">';
diventa:
return '<img src="' + newURL + '" />';

Medesima procedura per HR.htm e gli altri file relativi a elementi senza chiusura in queste cartelle:

ConfigurationObjectsCommon
ConfigurationObjectsForms
ConfigurationObjectsHead

Testa il funzionamento delle modifiche effettuate:
Crea un nuovo documento utilizzando tutti questi elementi, effettuando così un testing. Fai un preview della pagina in più browsers su diverse piattaforme, e sottoponi la pagina al validatore del W3C.

Ulteriori cambiamenti

Dreamweaver rende agevole inserire i caratteri speciali come em-dash o le virgolette. Nel menu a discesa Insert (Inserisci) scegli Special Characters (Caratteri speciali), sarà disponibile una lista dei più comuni, pronti per l’inserimento.

Ma due problemi rendono queste opzioni inopportune. Per prima cosa il processo di scegliere em-dash, ad esempio, richiede troppi passaggi. È più facile semplicemente immettere ” — “. In secondo luogo, la sequenza di caratteri che Dreamweaver inserisce non è valida. Se utilizzi questi caratteri così come sono, il documento non supererà l’esame del validatore.

Due veloci fixes risolvono i problemi:
– Edita i Special Character Files come Unicode

Per em-dash [trattino lungo: —]:

Ritorna al folder ConfigurationObjectsCharacters.
Apri emdash.html.
Cambia return "" in return "—".
Salva il documento e testalo.
Continua il processo per gli altri file nell’elenco Characters.
Per modificare il menu a discesa Insert>Special Characters>Other, edita commandsInsertEnt.htm.

Dreamweaver non mostrerà in modalità wysiwyg alcune sequenze di caratteri Unicode.
“ (virgoletta doppia sinistra) sarà visualizzato come un punto. Nel browser naturalmente si avrà la corretta lettura.

– Crea Keyboard Shortcuts:

Ora la scrittura Unicode è corretta, ma rimane ancora laboriosa. E’ possibile creare scorciatoie da tastiera editando il file menus.xml (Configuration>Menus>menus.xml.).
Ad esempio con la sequenza cmd+shft+h si può ottenere un em-dash:

<menuitem name="E_m-Dash" key="cmd+shft+h" file="Em-Dash.htm" enabled="dw.getDocumentDOM() && dw.getDocumentDOM().getParseMode() == 'html'" id="DWMenu_Insert_Characters_EmDash" />

Prima di modificare il file, chiudi Dreamweaver. [Per evitare errori di sistema,] edita menus.xml con un altro editor. Assicurati di non utilizzare una sequenza di comandi già in uso.

Grassetto e , corsivo e 

Con ulteriori modifiche a menus.xml ci si può esercitare in alcune considerazioni semantiche. Le tag e sono standard, ma l’uso di queste formatting tags non è nello spirito di un buon markup. Esse non hanno significato, sono solo formattazione. Se hai cura per la struttura del documento XHTML, dovresti utilizzare le più significative tag e .

Uno dei possibili modi per automatizzare questa sostituzione è la modifica di menus.xml come segue:

<menuitem name="_Bold" file="Menus/MM/Text_Style.htm" arguments="'B'" id="DWContext_Table_Text_Style_B" />

Indicando come argument del menu items _Bold “strong” in luogo di B, e per _Italic l’argument “em”, selezionando lo stile grassetto dal menu Testo o digitando Ctrl+B verranno generate le tag semantiche.

——————————————————————————————————————-

Una utilissima serie di file di configurazione già predisposti

Grazie al lavoro condiviso in rete di Francois Jordaan, modificare i file di configurazione di Dreamweaver per implementare la codifica XHTML richiede davvero pochi minuti.
[Unico file da non sovrascrivere direttamente è Menus.xml. Oltre ad apportare modifiche non sempre gradite ai menu, se si utilizza la versione italiana di Dreamweaver il file variato da Francois Jordaan cambia in inglese tutte le voci dei menu 🙁
Tutti gli altri file possono sostituire gli originari senza alcuna controindicazione :-]

——————————————————————————————————————-

Una estensione di Dreamweaver per la conversione di documenti HTML in XHTML

Se si tratta di convertire documenti già realizzati, un developer – Jason Dalgarno – ha avuto la amabile cortesia di rendere disponibile una estensione di Dreamweaver che consente di convertire in XHTML un documento o un intero sito [file Winzip con l’estensione e 3 file di testo].
Per l’installazione basta lanciare il file xhtml_v1.1.5.mxp, che attiverà automaticamente la gestione estensioni di Dreamweaver.
Con Dreamweaver 3 o precedenti versioni, avrai bisogno di scaricare Macromedia Extension Manager.
Il tool consente di:

Virgolettare gli attributi;
De-minimizzare gli attributi booleani;
Copiare attributi di nome su attributi di identificativo;
Aggiungere l’attributo type to <script>;
Settare un attributo alt vuoto alla tag <img>;
Convertire null links da # a JavaScript;
Riempire le celle vuote di tabella.

E’ richiesta un po’ di pratica per padroneggiare il tool. Per default, l’estensione si attiva ogniqualvolta si salva un documento. Questo può non piacere [nella mia configurazione inoltre causa spesso un errore javascript che costringe a riavviare Dreamweaver]. E’ consigliabile cambiare le preferenze in modo da attivare il tool solo su comando.

——————————————————————————————————————-

L’estensione “Super HTML-XHTML DTD”

Questa estensione permette di cambiare la DTD di una pagina con un singolo comando.

Cerca in Macromedia Dreamweaver Exchange (www.macromedia.com) “Super HTML-XHTML DTD Extension”, nella versione adatta al tuo PC, ed effettua il download (è necessaria la registrazione utente, gratuita).
Apri Dreamweaver.
Dal menu “Commands” (Comandi) seleziona “Manage Extensions” (Gestisci estensioni).
Individua – sfogliando – il file di Super HTML-XHTML DTD Extension che hai scaricato e selezionalo. L’estensione viene installata, e si può attivare dal menu “Commands” (Comandi>Dreamwarrior).
Consente per HTML di inserire la DTD 2.0, 3.2, 4.0 o 4.01 (Transitional, Frameset and Strict),
per XHTML la 1.0 (Transitional, Frameset and Strict) e la 1.1.

——————————————————————————————————————-

Link di riferimento (aprono nuove finestre):

L’articolo nella versione originale
NYPL: Style Guide: XHTML: Authoring Tips
blog of francois XHTML modifications for Dreamweaver

Carrie Bickner, a.k.a. the Rogue Librarian , is web coordinator for The Branch Libraries of The New York Public Library, and co–author of the NYPL Online Style Guide