Post Singolo : Ho deciso di validare il sito - W3C - Accessibilità - Qualita - Creazione Siti Web

Ho deciso di validare il sito

.. Come dice il titolo , ho deciso di validare il sito ( la Home Page per il momento ) pi? che altro per curiosit? - per vedere quali difficolt? avrei riscontrato . Un solo errore - e non puoi passare i 2 test pi? significativi ( quello del HTML + quello del CSS ). Quando si parla di ottimizzazione dei Siti , occorre sempre differenziare quello che ? necessario ( 'obbligatorio' ) per la validazione e ci? che viene considerato significativo per i S.E., da quello che viene solo consigliato ( l' ideale sarebbe ascoltare comunque le raccomandazioni del w3c ) . .

Segue l' elenco degli errori pi? comuni che di solito si fanno durante la complilazione di un documento HTML ( inizialmente presenti anche nelle mie pagine ) che ho dovuto correggere ; ed erano un centinaio . . Partendo dal Header :

1.) Viene consigliata questa forma del DOCTYPE ( ad esempio per il 4.1 Transitional ): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. Il problema per? ? che scritto cos? ( con l'URI completo ), va in conflitto con le scrollbars colorate ( e forse con alcuni script ) di I.E.. Ora , le scrollbars colorate sono una funzione proprietaria di I.Explorer - ma io le volevo utilizzare lo stesso - e per riattivarle ho dovuto modificare il DOCTYPE in : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Questa sarebbe una forma incompleta del DTD ( probabilmente anche scorretta ), ma scritto in questo modo ? stato accettato dal validatore e - finalmente - senza pi? interferire con le scrollbars . .

2.) Se si desidera creare un Sito 'internazionale' viene consigliato l'uso della codifica UTF-8 , ma UTF-8 pu? generare incompatibilit? con vecchi browser a causa del B.O.M. .. Fino ad ora non sono riuscito a trovare le informazioni sufficientemente chiare sul B.O.M. (Byte-Order Mark). In alternativa a Unicode, si potrebbe usare ISO-8859-1 ( per i contenuti in lingua italiana ). Non ? significativo dove viene creato il Sito, ma in quali Paesi si pensa di avere il maggior numero dei visitatori - per poter determinare quale sar? la lingua di default quindi creare il sito in quella lingua ed inserire le indicazioni giuste sul Charset. Il metaTag del Charset ? importantissimo , senza di esso la Pagina vista in altri Paesi conterr? errori nel Testo , o nel peggiore delle ipotesi non sar? pi? visualizzabile nemmeno la struttura del sito .

3.) Non esiste il famoso: ' <bgSound src="" loop="" balance="" volume=""> ' tra le loro specifiche, per cui va utilizzato ad esempio uno script ( o meglio altre soluzioni come OBJECT ) per avere la musica ( MIDI o mp3 ) nel sottofondo .

4.) Il solito <center>..</center> NON va utilizzato ( al posto di <center> va scritto <div align="center"> meglio se nel CSS ).. viene sconsigliato anche l'uso del tag <u>..</u> e le caratteristiche del testo ( Font ) vanno sempre scritte nel CSS e NON come font face="" , font size="" , font color="#..." . Il valore del colore nel CSS pu? essere ridotto a tre cifre ( #09e al posto di #0099ee ) quando i numeri R.G.B. si ripetono . Per il tag Table e Td: viene sconsigliato bgColor="" , width="" e per il Table: cellSpacing="" , cellPadding="" e border="" - per? tutti questi attributi sconsigliati , il validatore per il momento li accetta normalmente tra <body> e </body> . . Mentre "height=" , il Tag Table non lo prevede per cui non viene accettato .

Le caratteristiche delle tabelle o delle singole celle ? meglio dichiararle al interno del CSS . Il padding va utilizzato in questo caso per il Td ( una cella ) , e non per l' intera tabella ( table ) come nel HTML. Le tabelle servono per inserire i dati ( tipo Excell ) e non per le decorazioni , bordi colorati , per distanziare gli elementi grafici della Pagina ( esiste gi? il 'Border' e 'Position' del Div, P e Span nel CSS ), ma se le tabelle vengono utilizzate per scopi diversi - il validatore non dir? nulla .. In effetti, le tabelle si possono utilizzare benissimo per? ? meglio limitare il loro uso al minimo necessario e descriverle esclusivamente tramite Style Sheet. E' consigliato creare la Pagina pensando come essa si potrebbe vedere con Script e Css disabilitati o su un browser testuale - per poterle dare una Struttura corretta e 'coerente' ( H1 --> H2 --> H3 --> Div, P, Span ecc. ) con Font di dimensioni Relative ( pixel, o meglio: % ) in modo che il Testo pu? essere ridimensionato dall'utente ( visualizza-->carattere-->medio..) a seconda delle necessit? ( usabilit? e accessibilit? ).

5.) Il tag Body non prevede: topMargin="0" , leftMargin="0" e scroll="no" (o "auto") ecc.; i primi due vanno inseriti nello Style Sheet ( nella forma: body {margin-right:0;margin-top:0;margin-left:0;margin-bottom:0} ) , il terzo pu? essere sostituito con uno script particolare che permette il controllo indipendente dello scroll "h" e "v". Per i valori di margin nel CSS va sempre specificato px ( pixel o altro ) -anche se Explorer aggiunge automaticamente il pixel; infatti soltanto lo zero pu? non avere l'unit? di misura dichiarata . Anche text="#..." e bgColor="#..." va inserito nel CSS -ma il validatore li accetta comunque nel tag Body .

6.) Ogni volta quando si ha a che fare con i JavaScript inseriti al interno del HTML , occorre utilizzare il \ ( backSlash ) prima del ' e prima del / . Solo in questo modo la Pagina passer? il Test - mentre per lo Script stesso non c'? alcuna differenza con e senza il backSlash . Questo si applica a tutti i Script ( Men? , Orologio , Effetti Speciali , nuove Funzioni aggiunte ) . .

7.) Viene consigliato l'uso di:  al termine di ogni CSS e Script per evitare che i vecchi browser che non riconoscono CSS e Script possano mostrare il Codice come testo normale . I browser non compatibili semplicemente salteranno questa parte , vedendo solo il segno dell'inizio e del termine dei commenti. Per i Script e CSS va specificato "type": type="text/css" per <style> e type="text/javascript" per <script>.

8.) Non va dimenticato l'ordine esatto con il quale viene scritto un tag dopo l'altro , occorre chiuderli sempre nell' ordine inverso . Ad esempio: <font><b><i> va chiuso: </i></b></font>. Nulla va scritto tra </head> e <body>, non va dimenticato il <html>..</html>; il DTD dev' essere la prima informazione della Pagina HTML . .

9.) La solita forma utilizzata per inserire un OBJECT esterno ( per esempio un filmato Flash ) - sorpresa - non viene riconosciuta come valida a causa della presenza di un particolare 'codebase' e per la presenza di EMBED. Togliendoli entrambi , si riesce a validare la Pagina .. Se avete Macromedia Mx , Flash 8 , Selteco ecc. tutti questi Programmi aggiungeranno ( vi proporranno ) i due elementi 'incriminati'. Esistono molti modi per implementare un Flash nelle Pagine Web, ma sono tutti incompatibili con le specifiche ( essendo non standard o proprietari ) o con Firefox. L'unico modo (tra quelli provati) accettato sia dal validatore sia visibile su Firefox 2.0 + I.E.6 forse sarebbe il seguente :

<object type="application/x-shockwave-flash"

data="FILE.swf" width="..." height="..." align="...">

<param name="movie" value="FILE.swf">

<param name="quality" value="high">

<param name="bgColor" value="#..."> </object>

10.) In alcuni casi , le virgolette nel Codice sono obbligatorie per scrivere i valori degli attributi in altri casi no - ma ? meglio utilizzarle sempre , ? pi? sicuro . Quando al interno di uno Script esistono gi? le virgolette (".."), usare le virgolette di diverso tipo ('..') o viceversa . E' importante che il diverso tipo di virgolette viene usato per funzioni differenti e non mescolarle insieme senza ordine ( altrimenti lo Script non funzioner? - e se per caso funziona , la Pagina certamente non passer? il Test ). Le virgolette sono obbligatorie per i Link ( a href="URI" ).

11.) Il tag Alt ? obbligatorio per le Immagini ( serve per mostrare un testo alternativo all' immagine se per qualche motivo essa non viene visualizzata - o se viene disabilitata dall' utente , oppure se viene utilizzato un browser particolare ) mentre il tag Title non lo ? . Il Title pu? essere utile per mostrare un Tooltip sopra un' immagine gi? correttamente visualizzata .

12.) Se nel HTML esistono identificatori per il tag Div ( <div id=""> ), questi non devono contenere pi? di una parola ( underscore va bene ), e la parola ( l'identificatore unico ) non dovrebbe iniziare con un numero . Nessun altro elemento pu? contenere quel identificatore .

13.) Se nella Pagina si trova un Contatore delle Visite , controllare bene come ? scritto ( guardare il codice che vi hanno dato ) : se contiene "&" nel suo URI, & va necessariamente cambiato in & ( non va bene n? & # 38; n? 26 scritto in hex, n? in altri modi ma solo nella forma & ( ho fatto delle prove ).

14.) Se avete un cursore personalizzato, occorre non lasciare spazi tra "cursor" e ":" nella dichiarazione al interno del CSS , altrimenti potrebbero non funzionare ( non essere 'inizializzati' ). La forma corretta sarebbe: cursor:url("3dgarr.cur"), default; . Viene consigliato di specificare un cursore alternativo nel caso non si trova quello scelto . Anche per il Font va scritto sempre un Font alternativo ( una famiglia generica di Font come ultima scelta ).

15.) Inoltre , mio consiglio per chi vuole inserire nelle proprie Pagine uno di quei Script ( 'non regolari' ) che aprono le finestre popup ( o "_blank" ) di qualunque dimensione - ? di non scrivere <a href="#" ..> ma <a href="#0" ..> , altrimenti ad ogni apertura di una nuova finestra , quella che sta sotto si riposizioner? ( direi inutilmente ) al suo inizio - essendo # l'ancoraggio senza nome , dunque non valido ( anche se lo utilizzano quasi tutti ) . Non solo , ma la forma corretta sarebbe :

(...) function apriFinestraNome(){
window.open("URI", "nomeFinestra", "menubar=no,location=no,resizable=no,scrollbars=no, status=no,width=768,height=500,left=238,top=100");
} (...) <a HREF="URI" onclick="japriFinestraNome();return false">TEXT</a>

cio? URI va ripetuto due volte, poich? quando si scrive <a href="#" javascript="..."> o qualcosa di simile , ci? ? contrario al principio stesso dell' accessibilit? per tutti i browser che hanno javaScript disabilitato o quelli di tipo insolito - essi non vedranno il Link perch? il " href " risulta vuoto . .

16.) Se avete scelto Charset Unicode ( UTF-8 ), ? importante salvare il file di testo ( dal quale poi 'nascer?' il documento HTML ) come codifica UTF-8 - e non come ANSI , altrimenti sar? impossibile validare il documento HTML come UTF-8 . Qui l'esempio di un documento QUASI-UTF che non pu? essere validato . . Detto questo , termino il mini Tutorial per la validazione , forse in futuro aggiunger? altri consigli e raccomandazioni per creare Pagine Web perfette ( :13: ) . Per rendervi conto di quanto I.E. e Firefox sono diversi - guardate come I.E. e Firefox trattano una parola ( un Link ) lunga che va molto oltre il limite della tabella imposto : http://consapevolezza.altervista.org/Test-Val-1.html :24: . Su quella pagina ho inserito appositamente alcuni errori ( ne aggiunger? degli altri ) per vedere il comportamento del Validatore .