Validazione del codice, accessibilità e test cross-browser
Design
Ogni pagina web degna di questo nome è stata progettata e disegnata con attenzione maniacale. L'organizzazione dei contenuti, l'impatto estetico, la semplicità d'uso sono tutte caratteristiche in cui c'è anche lo zampino dell'artista. Spesso però, specie con l'avvento di nuove tecnologie ed interfacce, questo fondamentale professionista veste anche i panni del tecnico che realizza la pagina HTML + CSS, quindi il template. Stiamo parlando del Web Designer, a lui spettano quindi tutti i controlli legati al codice lato client, alla compatibilità sui vari sistemi e più in generale alla corretta fruizione delle pagine statiche.
Standard
Si fa un gran parlare di standard e validazione, ma ad oggi la stragrande maggioranza delle pagine presenti sul web non rispettano le specifiche imposte dal W3C. È bene invece controllare ogni singola pagina con il validatore per correggere eventuali errori e warning, con particolare attenzione al codice generato dagli editor visuali presenti nel CMS. Il controllo può velocemente essere esteso anche al codice presente nei fogli di stile.
Un'altra verifica meno tecnica, ma altrettanto importante, riguarda il correttovalore semantico attribuito al markup. Bisogna infatti essere certi di utilizzare i tag per lo scopo per cui sono stati pensati, realizzando di conseguenza un codice accessibile.
A tal proposito, prima della pubblicazione, è buona norma verificare illivello di accessibilità delle pagine, nel tentativo di rispettare almeno i requisiti tecnici necessari affinché le pagine possano essere correttamente fruite anche da chi utilizza tecnologie assistive per la navigazione. Nel caso in cui il committente rientri nelle categorie previste dalla normativa o abbia fatto richiesta esplicita è indispensabile verificare anche i criteri soggettivi secondo la famosa legge Stanca.
Charset
Per ogni pagina che compone il sito è anche importante verificare lacorretta visualizzazione del testo, ponendo maggiore attenzione ai caratteri speciali come le lettere accentate. Questo controllo assume una certa importanza nel caso in cui al cliente venga data la possibilità di mettere mano ai contenuti attraverso un pannello di controllo. In generale l'errata rappresentazione dei caratteri sulla pagina dipende dalla sbagliata o mancante associazione del charset di riferimento e delle entities.
Una verifica simile va completata per tutte le notifiche che il sito invia automaticamente tramite mail, ma anche per i dati che vengono inoltrati dai form e registrati sul DataBase.
Verifiche cross-browser
Inutile dirlo, la presenza di frasi come "Sito ottimizzato per Internet Explorer" denota una scarsa professionalità da parte dei tecnici che hanno realizzato le pagine e una limitata conoscenza del mezzo da parte del committente. Escludere una parte dei navigatori, fosse anche solo l'1%, per banali problemi tecnici equivale sostanzialmente a perdere clienti, specie in un mercato composto da una moltitudine di dispositivi e piattaforme che ogni giorno acquisiscono sempre maggiore audience a discapito del "più diffuso".
Ecco dunque il motivo per il quale è indispensabile verificare lacompatibilità delle pagine su tutti i browser: Internet Explorer (6, purtroppo alcune grosse intranet lo usano ancora, 7 e 8), Firefox, Opera, Chrome, Safari ed eventualmente anche su mobile. Tale verifica contempla sia l'aspetto esteriore della pagine che le interazioni lato client e lato server.
Punti da controllare
Ecco i punti da verificare tramite la checklist sugli aspetti visti in questa lezione:
OK | KO | ND | |
Standard | |||
Tutte le pagine sono composte da codice X/HTML valido | |||
Tutti i fogli di stile sono composti da codice CSS valido | |||
Al markup è stato dato il corretto valore semantico | |||
Verificato il livello di accessibilità previsto secondo i requisiti tecnici | |||
Verificato il livello di accessibilità previsto secondo i criteri soggettivi | |||
Charset | |||
I caratteri speciali vengono correttamente visualizzati sulle pagine del sito | |||
I caratteri speciali vengono correttamente visualizzati nelle mail automatiche | |||
I caratteri speciali inviati dai form vengono correttamente salvati nel DataBase | |||
Verifiche cross-browser | |||
Verificato il sito con Explorer (6, 7, 8) | |||
Verificato il sito con Firefox | |||
Verificato il sito con Opera | |||
Verificato il sito con Chrome | |||
Verificato il sito con Safari | |||
Verificate tutte le interazioni lato server e lato client sui vari browser |
Resa sui sistemi operativi e ottimizzazione
Verifiche cross-platform
Per le stesse motivazioni viste nella lezione precedente è bene verificare il corretto funzionamento delle pagine incrociando, dove possibile, i browser con i più diffusisistemi operativi come Windows, Linux e OSX.
Allo stesso tempo si potrà controllare il font predefinito o meglio ancora l'utilizzo esclusivo di safe font ed in parallelo la resa cromatica e l'utilizzo dei safe color. Rimanendo poi in ambito dicompatibilità visiva legata alla piattaforma è bene controllare eventuali trasparenze sulle immagini PNG come anche la presenza del codice embed per le animazioni Flash.
Altri controlli necessari a garantire un'esperienza utente positiva e svincolata dalla piattaforma riguardano le personalizzazioni che l'utente può aver apportato al suo sistema. Occorre dunque verificare il sito utilizzando leprincipali risoluzioni video e modificando la dimensione predefinita del carattere sul browser. Per completezza è possibile verificare la reazione delle pagine all'inserimento di testi molto corti/lunghi nelle zone modificabili dal cliente e di conseguenza il comportamento della versione stampabile delle pagine.
Ottimizzazione
Un buon design non può prescindere da una corretta ottimizzazione della pagina, pertanto è bene verificare il peso e la compressione di tutte le immagini, dei filmati Flash e degli elementi multimediali.
È anche possibile verificare l'assenza di piccoli sprechi dovuti al rimaneggiamento ed all'evoluzione del codice nel tempo come ad esempio: l'utilizzo effettivo di tutte le regole presenti nei fogli di stile, l'adeguato sfruttamento della caratteristica di cascata al fine di evitare codice ridondante, l'utilizzo dei percorsi relativi, l'assenza di inutili spazi e tabulatori nel codice HTML/CSS/JavaScript, l'eliminazione dei commenti e così via.
Infine, in relazione alla familiarità, è bene verificare il link alla home page sul logo e la presenza di una favicon personalizzata.
Plug-in
Si usa dire "il mondo è bello perché è vario", ma la battuta non strappa che un sorriso di rassegnazione da parte di chi realizza pagine web. :-) La moltitudine di configurazioni è infatti uno degli annosi problemi che da sempre complicano la vita dei tecnici della rete e per questo occorre fare in modo che tutto funzioni egregiamente anche in casi particolari.
È bene navigare ogni zona del sito disattivando JavaScript e verificando il comportamento delle pagine e delle eventuali interazioni, in particolare la presenza di controlli simili lato server. Allo stesso modo occorre provare ogni pagina disattivando il plug-in Flash e verificando la presenza di contenuti alternativi che permettano la regolare navigazione, oltre al semplice invito al download o all'aggiornamento del software. Infine, come per Flash, occorre effettuare un test sulle pagine che prevedono l'uso di altri plug-in, disattivandoli secondo le necessità del test.
OK | KO | ND | |
Verifiche cross-platform | |||
Verificato il sito su Windows, Linux e OSX (incrociando i browser) | |||
Verificato il sito utilizzando le principali risoluzioni | |||
Verificato il sito con testi molto corti/lunghi nelle zone modificabili | |||
Verificato il sito con caratteri più grandi e più piccoli | |||
Verificata la versione stampabile delle pagine | |||
Verificato l’uso di safe font | |||
Verificato l’uso di safe color | |||
Verificato l’uso di PNG trasparenti sui vari sistemi | |||
Verificato il codice embed per Flash (es. doppio clic) | |||
Ottimizzazione | |||
Verificato il peso e la compressione delle immagini | |||
Verificato il peso e la compressione dei filmati Flash | |||
Verificato l’uso dei percorsi relativi nei fogli di stile | |||
Verificato l’uso della caratteristica di cascata nei fogli di stile | |||
Le pagine non contengono spazi, tabulatori o caratteri inutili | |||
Le pagine non contengono codice X/HTML commentato | |||
Verificata la presenza della favicon | |||
Verificato il link alla home page sul logo | |||
Plug-in | |||
Verificata ogni pagina disattivando JavaScript | |||
Verificata ogni pagina disattivando Flash | |||
Verificata la presenza di strutture alternative a Flash, quando mancante | |||
Verificata la presenza dell’invito al download di Flash, quando mancante | |||
Verificata ogni pagina disattivando plug-in utilizzati |
0 commenti:
Posta un commento