ripulire il codice
perché?
Il codice (sorgente) è ciò che, in una pagina web, non si vede. La stessa "apparenza visibile" può provenire da diversi codici-sorgente. Perché allora preoccuparsene? Per vari motivi:
- perché un codice non corretto è in genere un codice ridondante, che appesantisce, talora di molto o di moltissimo, una pagina (quindi ne rende lento il caricamento da parte dei vostri lettori, che giustamente considerano anche questo come un fattore di scadente qualità del vostro sito);
- perché un codice non corretto può creare difficoltà di interpretazione a certi browsers, più fedeli agli standard: il che significa che con un codice non corretto rischiate di tagliarvi via una parte della potenziale utenza;
- perché certe non correttezze del codice, come l'assenza dell'attributo "alt" nel tag <img>, o dell'attributo "summary" nel tag <table> possono impedire a persone in situazione di handicap di accedere alla vostra pagina, ledendo così il valore della eguale dignità di tutti gli esseri umani e della accessibilità: il che non è molto bello e nemmeno giusto;
- ma anche perché utilitaristicamente, voi stessi potreste trovarvi nelle condizioni di dover lavorare sul codice; e lavorare su un codice disordinato e ridondante è decisamente più disperante, che avere a che fare con un codice pulito e ordinato, tale da consentirvi un facile orientamento in ciò che avete scritto.
“Nescire quaedam, magna pars sapientiae”, dice un antico adagio: “una gran parte della sapienza” consiste (non nel sapere certe cose, ma) nel “non sapere certe cose”. Parafrasando tale adagio si potrebbe dire che una gran parte del lavoro (attuale) di un webmaster consiste non nel costruire, ma nel levar via ciò che di inutile e dannoso è stato posto dagli editor visuali (i cosiddetti editor WYSING tuttofare). Si tratta essenzialmente di un'opera di ablatio. Vediamo come.
il codice scorretto di MS Office
Una pagina html scritta da un programma di MS Office (Word, Excel, Access) è decisamente "sporca", nel senso che rigurgita di codice assolutamente sovrabbondante e estraneo agli standard W3C.
Talora le dimensioni del file così ottenuto sono anche dieci volte superiori a quelle che avrebbe il medesimo file (cioè avente il medesimo contenuto visibile a chi visualizza quella pagina), una volta ripulito dal codice scorretto della Microsoft.
Non vi è però solo il codice "sporco" di MS Office: anche vari editor html usando del codice scorretto o ridondante.
il codice scorretto di molti editor html
Occorre in effetti stare attenti a evitare: a) del codice scorretto (quello "deprecated" dal W3C), o b) del codice sovrabbondante, che pur non essendo formalmente scorretto appesantisce inutilmente una pagina HTML.
Vanno ad esempio evitati e sostituiti i seguenti <elementi>
| l'elemento | come sostituirlo | esempio |
|---|---|---|
| <FONT> | usando i fogli di stile | da <font color="red">rosso</font> a <span class="red">rosso</span> [avendo definito, nel foglio di stile, collegato o incluso, la classe ".red{color: red}"] |
| <basefont> | usando i fogli di stile | da <basefont face=arial size=2> a "body{font-family: arial; font-size: 11pt;}" nel foglio di stile collegato o incluso |
| <dir> | <ul> | |
| <CENTER> | usando i fogli di stile | da <center> a <div class="center"> [avendo definito, nel foglio di stile, collegato o incluso, la classe ".center{text-align: center}"] |
| <u> | usando i fogli di stile | da <u>sottolineato</u> a <span class="u">sottolineato</span>[avendo definito, nel foglio di stile, collegato o incluso, la classe ".u {border-bottom: solid 1px black}" (tra l'altro, volendo, la sottolineatura può anche essere discontinua, o colorata o altro ancora)] |
| <applet> |
vanno evitati e sostituiti i seguenti "attributi"
| quale attributo | di quale elemento | come |
|---|---|---|
| "align" | praticamente tutti, eccetto "COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR | usando i fogli di stile |
| "bgcolor", "text", "link", "alink", "vlink" | <BODY>, <TABLE>, <TD>, <TR> | usando i fogli di stile |
| "height", "width" | <TD>,<TR> [mentre possono essere, anzi è bene siano usati dentro l'elemento <img>] | usando l'elemento <colgroup> e <col>, con cui stabiliamo i valori di tutte le celle di una medesima colonna |
| "nowrap" | <TD>, <TH> | usando i fogli di stile |
| "type" | <LI>, <UL>, <OL> | usando i fogli di stile |
vanno aggiunti, ove mancassero i seguenti "attributi" o <elementi>
| da aggiungere | obbligatoriamente | a quale <elemento> | a che cosa serve |
|---|---|---|---|
| "summary" | sì | all'elemento <table> | a chi usa browsers non-visuali, per avere una descrizione "parlata" del contenuto di una tabella |
| <caption> | no | dentro il tag <table> | a descrivere, come didascalia, la tabella |
| "alt" | sì | all'elemento <img> (immagine) | descrive in modo alternativo l'immagine (per i browsers non-visuali e per chi non volesse visualizzare le immagini) |
codice sovrabbondante
E' quello che appesantisce inutilmente, come abbiamo detto.
Ad esempio non ha senso (ma quasi tutti gli editor HTML lo fanno!!!), se ho dieci paragrafi a cui voglio applicare la medesima formattazione, ripetere per dieci volte (e pensate poi se si tratta di 50 o di 100!) gli attributi di stile: è molto meglio che lo dica una volta per tutte, creando una classe di stile, che poi mi limiterà ad applicare.
Facciamo questo esempio:
A) posso ripetere per dieci volte questa formattazione: "<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>", così:
"<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>
<p style="margin-top: 2px; font-family: tahoma; text-align: justify; color: black;">testo del paragrafo</p>"
B) oppure posso definire che <style>.nomeclasse{margin-top: 2px; font-family: tahoma; text-align: justify; color: black;}</style> e applicare a tutti i paragrafi la classe, così:
<p class="nomeclasse">paragrafo</p> (moltiplicatelo 10 volte voi :) )
In questo modo risparmio un bel po' di codice e rendo più facile la correzione di qualche fattore che non andasse bene.
Se poi ho molte pagine a cui voglio applicare la medesima formattazione, è ancora più conveniente: creo un unico foglio foglio di stile che collego a tali molte pagine, e quando vario uno stile, tale variazione si applica a tutte le pagine.
ATTENZIONE! Il problema è che gli editor WYSING non lo fanno: o lo fate voi, o non lo fa nessuno per voi!
come ripulire il codice
Come si fa a spurgare tutta la lordura depositata da Word, Excel, Access? Si può fare in diversi modi:
- operando manualmente, con comandi tipo "sostituisci"; ma è una operazione che può durare molto, e risulta non poco stressante.
- usando del software apposito
-
- a pagamento: come Namo WebEditor, che è in effetti un ottimo spazzino
- gratuito: ossia usando direttamente Tidy o del software che ne fa uso, come PsPad, o HTML Kit, ad esempio, che vi libera dal codice scorretto e pesante esattamente come Namo (ho fatto delle prove e il risultato è sorprendentemente identico)
Ad esempio, nel caso di un file di testo, elimina tutti gli stili abusivamente creati da Microsoft, o nel caso di una tabella elimina oltre agli stili "proprietari" anche attributi di tag ridondanti (per esempio l'attributo "width", ripetuto per ogni cella: usando il tag <col> basta indicarlo una volta per tutte (per tutte le celle della medesima colonna), con notevole risparmio di bytes, controllabilità e pulizia del codice).
Paradossalmente sia Namo sia Tidy (Pspad, HTML Kit o altro) mentre ripuliscono alla perfezione un file creato da MS Office, ossia un file html "sporchissimo", non ripuliscono altrettanto bene un file html "poco sporco" (ma comunque sporco), come quello creato con FrontPage nelle ultime versioni, o con altri editor avanzati, che infischiandosene degli standard, vanno avanti imperterriti a usare codice scorretto.
In particolare non riesce l'eliminazione dell'attributo "width" delle celle di una tabella. E' incredibile, ma tale attributo viene giustamente eliminato e sostituito se a generarlo è stato un programma di MS Office, ma non se è stato FrontPage o altro editor specifico per HTML.
Per eliminare tale errore ("deprecato" dal W3C) non resta che operare manualmente o, per chi ce l'ha, usare lo stesso autore del delitto, FrontPage o quant'altro.
🛒 ricerche / acquisti
cerca libri su Amazon sul tema: e-book e-reader ereader Kindle Kobo computer PC hardware software sistema operativo linux Apple cultura libri on-line ripulire il codice .