Questo tutorial è strettamente legato al precedente aggiornamento di B3 dove avevo inserito un breve tutorial su come costruire delle pagine web con XHTML e CSS. Malgrado l'uso di XHTML sia in rapido incremento ed ancora maggiore stia divenendo l'uso di XML per lo sfruttamento delle pagine web attraverso supporti palmari e telefonici, la stragrande maggioranza dei siti è ancora costruita con il glorioso, vecchio e terminale HTML 4.01.
Per molti webmaster di questi siti è quasi obbligatorio il passaggio a tecnologie più odierne. Ma per tutti questi si prospetta una lunghissima sofferenza che consiste nello scriversi tutto il codice a mano a meno che non intendano spendere dei soldi per l'acquisto di Editor Web che supportino questi linguaggi come DreamWeaver (acquistabile alla 'umana' cifra di circa400 euro;). Tuttavia c'è una scappatoia gratuita a questo problema ed è rappresentata da HTML-Kit di Chami.

Questo applicativo, consigliato dallo stesso Consorzio W3C non è altro che un Editor Web non di tipo visuale, che consente la costruzione ex-novo di pagine web o la loro modifica per gli standard XHTML 1.0 e XML e non solo. HTML-Kit è anche un efficientissimo editor CSS ed un magnifico strumento per la valutazione delle proprie pagine sia in fase di costruzione sia online attraverso il contatto con siti come :
- Web Design Group
- W3C

HTML-Kit non è uno strumento alla portata di chi si avvicina alla costruzione di pagine web per la prima volta. E' infatti un editor complesso e talmente ricco di funzionalità che potrebbe creare qualche sconforto in chi ha già difficoltà con editor WYSIWYG.
Per chi invece è già scafato è uno strumento di autovalutazione indispensabile. Vediamo perciò come e dove scaricarlo e come usarlo proficuamente.
Per ciò che riguarda il Download basta contattare il sito di Chami al seguente indirizzo : http://www.chami.com/html-kit e procedere al downloading che, tutto compreso, ammonta a circa 9 megabyte.
1) Una volta installato e lanciato, compare la seguente schermata :

dove compare anche la finestrella di scelta rapida che guida l'utente alla scelta se voler creare una pagina nuova, se si vuole aprire una pagina già in memoria, se si vuole creare una pagina con template già in memoria, ecc.
Dal momento che stiamo analizzando il percorso per la modifica di pagine preesistenti, 2) sarà necessario cliccare sul radio-button con la dicitura
'Open an existing file...'.
Dopo aver cliccato su 'OK' compare la finestra di scelta come illustrato sotto

E' necessario quindi scegliere la pagina che vogliamo convertire ed il cui codice HTML comparirà nella finestra principale di HTML-Kit.

Quando compare la schermata con il codice della pagina scelta ci troveremo di fronte alla figura sotto riprodotta:

E' evidente lo script della pagina con i diversi colori che indicano i diversi tags della struttura ed è evidente anche la numerazione delle righe nella striscia grigia a lato sinistro del sorgente. Questo rende agevole l'individuazione delle varie righe nelle quali potrebbero essere contenuti degli errori.
3) Per poter applicare la conversione è necessario cliccare sulla freccia a lato dello strumento 'Tidy' e comparirà la finestra di scelta come illustrato sotto:

all'interno della quale dovremo scegliere e cliccare la voce 'Convert to XHTML'.
Fatta questa operazione il programma avvia la conversione che avviene molto rapidamente. Verranno quindi prodotte due finestre all'interno di quella principale, come riprodotto nella figura sotto :

Nella schermata di sinistra troveremo il codice iniziale come illustrato sotto:

Nella schermata di destra vedremo il codice convertito, come illustrato sotto :

Potremo notare come il DOCTYPE sia cambiato in senso XHTML, noteremo anche che il namespace di html sia provvisto dell'opportuno indirizzo web di riferimento (riga 3) e che tutti i tags siano divenuti minuscoli, così come quelli non chiusi siano provvisti dello spazio e della slash di chiusura (righe 9, 10, 14 e 16).

A questo punto la conversione è terminata?
Non ancora.
4) Se nel nostro codice originale ci siamo dimenticati di inserire qualche oggetto necessario per la validazione (come gli attributi alt="", summary="", o quelli di identificazione del tipo come per JavaScript o per gli stili), od abbiamo commesso veri e propri errori di sintassi, HTML-Kit ci segnala quanto mancante o errato e lo fa segnalandolo nello spazio sotto alle due finestre con la label contrassegnata da 'Messages' come illustrato nella figura sotto :

Potrete certo notare che l'ellisse rossa indica l'assenza di errori, ma la presenza di 4 avvertimenti e 4 commenti relativi alla struttura della pagina ed al tipo di errore commesso. Gli errori vengono segnalati con un simbolo particolare come illustrato sotto :

e determinano sempre il fallimento nel conferimento del DOCTYPE opportuno nonchè il fallimento della validazione da parte del W3C.
Gli avvertimenti non comportano affatto il mancato conferimento del DOCTYPE, ma potrebbero comportare il fallimento nella validazione del codice da parte del W3C e sono segnalati con un simbolo particolare come illusrato sotto:

Quindi andremo a rimediare agli errori, se presenti naturalmente

Supponendo di aver dimenticato di inserire il testo alternativo alle immagini.
Quando avremo completato la conversione, tra i vari messaggi ci comparirà la scritta illustrata sotto :

Malgrado l'immagine non sia il massimo della nitidezza, appare scritto '<img> lacks"alt" attribute' che indica che manca il testo alternativo.
5) Per poterlo inserire con semplicità basta evidenziare il messaggio cliccandogli sopra come illustrato sotto :

e nella schermata del codice originale compare la riga corrispondente delimitata da due linee paralelle che la isolano da tutto il resto come illustrato sotto :

Per raggiungere lo spazio giusto nell'ambito della riga isolata, basta scrollare orizzontalmente la finestra fino a raggiungere il segno di chiusura dell'elemento immagine, dove poi andrebbe inserito l'attributo 'alt'. Fissando il puntatore del mouse alla sinistra del segno di chiusura dell'elemento immagine, si deve premere per una volta sola la barra spaziatrice ed automaticamente si apre un menù contestuale come illustrato in figura :

Come enfatizzato dall'ellisse rossa, nel contesto del menù è già evidenziato l'attributo da inserire il quale una volta attivato con un doppio click, andrà ad inserire nella riga di cui sopra, il codice opportuno con il cursore già in posizione come illustrato sotto :

A questo punto basterà inserire il testo desiderato ed il gioco è fatto.
Altri errori più o meno gravi si potranno correggere con le opportune conoscenze del linguaggio HTML o sfruttando le incredibili capacità diHTML-Kit attivabili come illustrato sopra.
Andiamo quindi a salvare la nostra conversione.

Abbiamo quindi corretto gli eventuali errori, ma questa correzione deve essere confermata nel futuro codice XHTML. Quindi rifacciamo i passaggi di conversione (punto 3) e vedremo nella schermata a destra il codice XHTML corretto e nella finestra 'Messaggi' vedremo che non ci sono errori come illustrato sotto :

6) Per salvare il nostro lavoro basta cliccare con il destro sulla finestra del codice convertito e cliccare successivamente sul dischetto come illustrato sotto a sinistra :

oppure, dopo aver fissato il puntatore del mouse nella finestra di output (quella a destra cioè), si clicca sul dischetto collocato sulla barra degli strumenti come illustrato sopra a destra. Comparirà una finestra di dialogo che ci chiederà come salvarlo e si sceglierà se salvarlo con lo stesso nome nella stessa cartella di origine o con un nome diverso e verso cartelle separate.
Quando si chiuderà la pagina convertita, una finestra di dialogo chiederà se vorremo salvare le modifiche apportate al codice originale in HTML puro.

Basterà cliccare 'Yes' ed anche il codice sorgente originale riceverà le correzioni apportate, ma non verrà convertito in XHTML.
Il gioco è fatto!
Ci sono volute troppe parole per illustrare un procedimento che invece richiede una manciata di secondi. Misteri del tutoraggio!!!

Uno sfizio finale è rappresentato dal visionare la pagina convertita nel browser predefinito, per controllare se tutto è a posto. Per farlo è molto semplice.
Si posiziona il cursore del mouse sulla finestra di output (quella di destra) e si clicca con il destro. Sul menù contestuale si clicca sulla voce 'Preview in Default Browser' come evidenziato nella figura sottostante:

Appena cliccato si avvia il browser di default (Opera,speriamo! ) e si potrà controllare la pagina 'dal vivo'.
Abbiamo finito!
Per la verità su HTML-Kit ci sarebbe moltissimo altro da dire, ma ciò richiederebbe decine di pagine e per il momento ci fermiamo qui. Altri sviluppi verranno in futuro, quando tratteremo della costruzione di pagine a partire da questo magnifico strumento.
Ciao Ciao