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 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: <br />
Iniziamo con il line break (interruzione di riga); cambiamo <br> con <br />.

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

Apri LineBreak.htm.
Edita la riga 17 sostituendo <br> con <br />.
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 "&#151;" in return "&#8212;".
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.
&#8220; (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 <strong>, corsivo e <em>

Con ulteriori modifiche a menus.xml ci si può esercitare in alcune considerazioni semantiche. Le tag <b> e <i> 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 <strong> e <em>.

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

Potrebbero interessarti anche i seguenti articoli

  • Macromedia DreamweaverMacromedia Dreamweaver L'editor Web Macromedia Dreamweaver MX supporta lo standard XHTML (generazione e conversione da HTML) e consente di verificare l'accessibilità dei contenuti generati. […]
  • Accessibilità delle pagine dinamicheAccessibilità delle pagine dinamiche Si parla diffusamente ormai di validazione del codice, di scrittura di codice conforme alle WCAG. Anche nelle rare occasioni in cui si instaura un proficuo scambio di […]
  • DreamWeaver MX e l’accessibilitàDreamWeaver MX e l’accessibilità Caratteristiche di accessibilità aggiuntive di Dreamweaver MX e MX 2004 Traduzione da http://webaim.org/techniques/dreamweaver/ Questa lezione descrive le […]
  • Generare codice XHTML 1.0 Strict in ASP e PythonGenerare codice XHTML 1.0 Strict in ASP e Python Uno dei problemi maggiori che si riscontra in fase di aggiornamento o novazione di siti web esistenti è la conversione dei contenuti attuali. Questa fase è […]
  • Sul tablet non faccio come mi pareSul tablet non faccio come mi pare Font e layout, vecchi problemi risolti che ritornano attuali Chi si occupa da tempo di accessibilità e usabilità ricorderà che una delle considerazioni di base, è […]
Condividi:

Informazioni sull'autore

Roberto Ellero
Roberto Ellero

Web consultant, Videomaker, Web Designer. Expertise in accessibility, Web standards, movies designed for the Web and accessible to deaf and blind people (captioning, interpretation in sign language, audiodescription).
Videomaker, Web Designer. Competenze specialistiche in accessibilità, Web standard, video progettati per il Web accessibili alle persone sorde e non vedenti (contenuti audiovisivi, tecnologie, sottotitolazione, interpretazione in lingua dei segni, audiodescrizione).
email: info@robertoellero.it, mobile: 3480108848, skype: rellero
Ideatore e direttore artistico di www.webmultimediale.org, il portale della Svizzera italiana per l'accessibilità dei video sul Web.
Lavora presso il Centro Regionale di Cultura della Regione del Veneto.

Commenti

Nessun commento

    Rispondi

    Link e informazioni