Scrivere Xhtml con Dreamweaver 4

Abbiamo già avuto modo in un precedente intervento di soffermarci sulle qualità dell’Xhtml e di come sia lo standard destinato a sostituire Html.

Alcuni strumenti di sviluppo, come HomeSite 5, già prevedono la possibilità di realizzare codice secondo lo standard Xhtml.

Senza aspettare le prossime versioni, è però possibile già oggi configurare Macromedia Dreamweaver 4 perché produca codice Xhtml.

Ce lo illustra Carrie Bickner, che in un articolo [nuova finestra] pubblicato da A List Apart presenta i passi necessari per questo piccolo “upgrade”. Si tratta di un certo numero di operazioni da compiere con un minimo di attenzione, ma senza troppe difficoltà.

L’articolo contiene anche un link al download di un’estensione per Dreamweaver con la quale è possibile convertire documenti Html in Xhtml.

Vivere con Xhtml

Come abbiamo già detto in un precedente articolo, Xhtml o Html: quale scegliere?, è giunto il momento di fare un salto di qualità e realizzare pagine Xhtml al posto delle normali pagine Html.

Lo sforzo, modesto, verrà ricompensato dalla possibilità di utilizzare il codice anche in periferiche diverse dai browser canonici e di estenderne le funzionalità.

Anche Jeffrey Zeldman, autore e creatore di A List Apart, pensa la stessa cosa. Potete trovare le sue considerazioni nell’interessante articolo Better Living Through Xhtml [nuova finestra].

Leggendolo, si capisce come l’autore abbia speso svariate ore nella conversione e realizzazione di pagine Xhtml, scoprendo anche trucchi e problematiche, tra cui:

  • Html Tidy [nuova finestra] è tra le migliori utility per la conversione da Html a Xhtml, ma va attentamente configurata
  • Il codice e i Css devono essere validati (usando gli strumenti resi disponibili dal W3c, l’HTML Validation Service [nuova finestra] e il CSS Validation Service [nuova finestra]
  • I doctype, le intestazioni delle pagine, possono rappresentare un problema subdolo. Devono essere attentamente verificati
  • Alcuni browser interpretano l’Xhtml e i Css in modi diversi e alterano il risultato della pagina

Xhtml o Html: quale scegliere?

Che siate un designer, un htmlista o un editor vi trovate nella condizione di scegliere tra due standard per scrivere i vostri articoli o creare i vostri template.

Da un lato il “collaudato” Html, che pur con tutti i limiti vi consente di creare pagine più o meno visibili in tutte le piattaforme.

Dall’altro Xhml, uno standard abbastanza recente e che promette di sostituire Html nel prossimo futuro.

Perché usare Xhtml
  • È compatibile con tutti i browser, non solo con i più recenti
  • Comincia ad essere supportato dagli ambienti per la creazione di codice Html (es. Macromedia Homesite 5.0)
  • È lo standard del futuro che sostituirà Html
  • Trova il suo massimo impiego insieme ai CSS (Cascading Style Sheet), standard ormai collaudato
Vantaggi nell’uso di Xhtml
  • Usato insieme ai CSS, separa lo strato di presentazione della pagina dal contenuto, rendendo il codice facilmente manutenibile e i dati riutilizzabili
  • Potreste in futuro essere costretti a convertire il vostro codice Html in Xhtml se usate XML e XSL per pubblicare i vostri articoli
  • È possibile estendere il linguaggio con moduli da usare con particolari dispositivi o, viceversa, limitare il numero di tag da usare (Xhtml Modularization)
Tipi di documento Xhtml

Esistono 3 tipi di documento Xhtml:

  • Strict: la versione con meno libertà. Va usata in combinazione ad un uso avanzato dei CSS, im modo da posizionare gli elementi all’interno della pagina. Per questo è sfronda l’Html degli attributi di posizionamento
  • Transitional: all’oggi il preferibile. Vi consente di trasformare il vostro documento Html in Xhtml con semplici correzioni (tipicamente la chiusura del tag per quei tag che non la prevedono)
  • Frameset: usato nel caso la vostra pagina sia costruita a frame
Come si scrive un documento Xhtml

Per scrivere un documento Xhtml valido è necessario che:

  • Tutti i tag Html siano chiusi
  • I tag siano scritti in minuscolo
  • Sia presente una direttiva in testa al documento che ne indichi il tipo

Convertiamo allora un semplice esempio Html nel corrispettivo Xhtml di tipo Transitional. Si tratta di una pagina contenente un’immagine ed una form:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 
 3 <html>
 4 <head>
 5   <title>Da Html a Xhtml</title>
 6 </head>
 7 
 8 <body>
 9 
10 <img src="logo.gif" width="50" height="50" alt="FucinaWeb.com">
11 
12 <form action="risultato.asp">
13   Nome: <input type="text" name="Nome" checked><br>
14   Cognome: <input type="text" name="Cognome"><br>
15   Sesso:
16   Maschio <input type="radio" name="Sesso" value="M">
17   Femmina <input type="radio" name="Sesso" value="F">
18 </form>
19 
20 </body>
21 </html>

I cambiamenti interessano i seguenti tag:

  • <img> Va terminato, essendo un tag non chiuso. Per farlo, è possibile inserire esplicitamente un tag di chiusura, come </img>.
    Esiste una seconda possibilità, che abbiamo adottato in questo caso: chiudere il tag di apertura completandolo con ” />”. È necessario
    ricordarsi di inserire uno spazio prima della barra “/” per evitare problemi di visualizzazione in browser di vecchia generazione.
  • <br> Vale lo stesso discorso del tag precedente.
  • <input> Vale lo stesso discorso del tag precedente. In più, va notato che ad un attributo deve sempre essere associato un valore. Nel caso di input box di tipo radio è possibile specificare il valore di default con l’attributo checked, senza associare un valore esplicito.
    In Xhtml, ad ogni attributo deve essere associato un valore, in questo caso checked=”checked”

In più, va cambiata la dichiarazione del documento, che diventa quella di un documento Xhtml.

Ecco l’esempio trasformato in Xhtml:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html>
 4 <head>
 5   <title>Da Html a Xhtml</title>
 6 </head>
 7 
 8 <body>
 9 
10 <img src="logo.gif" width="50" height="50" alt="FucinaWeb.com" />
11 
12 <form action="risultato.asp">
13   Nome: <input type="text" name="Nome" /><br />
14   Cognome: <input type="text" name="Cognome" /><br />
15   Sesso:
16   Maschio <input type="radio" name="Sesso" value="M" checked="checked" />
17   Femmina <input type="radio" name="Sesso" value="F" />
18 </form>
19 
20 </body>
21 </html>

Il documento è ora compatibile con lo standard Xhtml.

Conclusione

La conversione di un documento Html in Xhtml (soprattutto di tipo Transitional) è semplice e richiede poche attenzioni e nessuna nuova tecnica da imparare.
Questo, unito ai vantaggi in termini di aderenza agli standard e di separazione tra struttura e contenuto fa si che lo standard Xhtml sia la scelta
ideale per qualsiasi nuovo progetto da portare sul Web.