CAPITOLO 4 ANALISI E VALIDAZIONE DEL SITO LENST:

Transcript

1 CAPITOLO 4 ANALISI E VALIDAZIONE DEL SITO LENST: 1 INTRODUZIONE Scopo di questo capitolo sarà l analisi di un sito già esistente e la valutazione della sua effettiva accessibilità in armonia con le normative W3C Il sito in esame è il sito ufficiale del Laboratorio di Elaborazione Numerica dei Segnali e Telematica (LENST) Gli strumenti necessari per effettuarne la validazione sono tutti reperibili in rete ed, in particolare, sul sito del W3C: wwww3corg Accanto al programma ufficiale rilasciato dal W3C, il Validator (che effettua il controllo dei documenti online), si affiancano altri tools di valutazione sviluppati da terzi: citiamo il CSE Validator Pro v503, A-Prompt e il Bobby Sfruttando dei semplici algoritmi, questi programmi effettuano il cosiddetto parsing del codice HTML della pagina prescelta riga per riga il, mettendo in luce eventuali errori, avvertimenti o semplici raccomandazioni disattese Esistono tool, come ad esempio A-Prompt, che addirittura permettono di effettuare una correzione automatica degli errori più gravi Naturalmente conviene sempre verificare di persona le correzioni apportate al codice, piuttosto che demandarle al software che, per quanto flessibile, fa sempre riferimento alle esigenze medie dell utenza Le correzioni più comuni che vengono consigliate da questi strumenti, si possono dividere in due classi: da un lato tutto ciò che rientra nella problematica di visualizzazione del documento, dall altro l osservazione delle regole formali da adottare nella stesura In effetti, dato che la stragrande maggioranza delle pagine è sviluppata utilizzando programmi 142

2 con interfaccia grafica, sarà difficile trovare veri e propri errori di sintassi Tra i problemi più comuni relativi alla prima tipologia di errori rientrano una buona scelta dei colori di sfondo che devono esibire un contrasto ben marcato, l uso di tabelle linearizzate correttamente, la messa al bando di immagini lampeggianti e, non ultimo, l uso di alcune regole ben precise per i caratteri (font standard, alto contrasto per i link visitati e quelli attivi, intestazioni di tipo H* per regolarne la grandezza) 2 ANALISI DETTAGLIATA DEL SITO Iniziamo l analisi del sito a partire, ovviamente, dalla homepage ( Nello specifico, verranno riportati, rispettivamente, il codice HTML del frame superiore, la visualizzazione di tale pagina e come la pagina viene suddivisa in tabelle Iniziamo presentando il codice HTML come mostrato di seguito: <html> <head> <title>lenst - Home Page</title> <meta name="generator" content="microsoft FrontPage 40"> <meta name="progid" content="frontpageeditordocument"> </head> <frameset border=3 frameborder=1 framespacing=0 rows="100,*"> <frame name="intestazione" scrolling="auto" target="principale" src="frame_uphtm"> <frame name="principale" src="homehtm" scrolling="auto" target="_self"> <noframes> <body> <p>la pagina corrente utilizza i frame Questa caratteristica non è supportata dal browser in uso</p> </body> </noframes> </frameset> </html> <!doctype html public "-//w3c//dtd html 40 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="generator" content="mozilla/477 [en] (X11; U; Linux i686) [Netscape]"> 143

3 <title>lenst - Home Page</title> </head> <body text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> <center><table BORDER=3 CELLSPACING=10 CELLPADDING=10 WIDTH="100%" rules="10" > <tr> <td ALIGN=CENTER><a href=" target="_blank"><img SRC="salo100gif", height=102 width=100></a> <p><b><i><font face="arial,helvetica">university of Florence</font></i></b> <p><b><i><font face="arial,helvetica">department of Electronics and Telecommunication</font></i></b></td> <td ALIGN=CENTER><b><i><font size=+3>digital Signal Processing and Telematics Laboratory</font></i></b> <p><b><i><a href=" target="_blank">università degli Studi di Firenze</a></i></b> <br><b><i><a href=" target="_blank">dipartimento di Elettronica e Telecomunicazioni</a></i></b> <hr size="1" width="90%"> <br><font face="arial,helvetica"><b>address:</b> LENST - Dipartimento di Elettronica e Telecomunicazioni </font> <br><font face="arial,helvetica">via di S Marta, 3</font> <br><font face="arial,helvetica">50139 Firenze (Italy)</font> <p><font face="arial,helvetica"><b>phone:</b> </font> <br><font face="arial,helvetica"><b>fax: </b> </font> <p><font face="arial,helvetica"><b>head of Laboratory: </b><i>prof E Del Re</i></font> <br><font face="arial,helvetica"><b> </b> <a href="mailto:delre@lenstdetunifiit">delre@lenstdetunifiit</a></font></td> <td ALIGN=LEFT> <center><img SRC="logojpeg" style="height: 192px; WIDTH: 219px" height=225 width=300></center> <p><i><font face="arial,helvetica"><b>l</b>aboratorio di</font></i> <br><i><font face="arial,helvetica"><b>e</b>laborazione</font></i> <br><i><font face="arial,helvetica"><b>n</b>umerica dei</font></i> <br><i><font face="arial,helvetica"><b>s</b>egnali e</font></i> <br><i><font face="arial,helvetica"><b>t</b>elematica</font></i></td> </tr> </table></center> <center> <h3> <i><font size=+2>the LENST laboratory of the Department of Electronics and Telecommunications (DET) of University of Florence </font></i></h3></center> </body> </html> Si riportano di seguito nelle rispettive figure il layout della homepage evidenziandone anche la struttura tabulare 144

4 Fig 1 Layout del sito Fig 2 Layout del sito con struttura tabulare 145

5 Nel listato precedente si possono evidenziare alcune violazioni delle normative W3C: 1 anzitutto la pagina è realizzata con Front Page, che risulta un editor sconsigliato per realizzare siti accessibili e il layout è creato con tabelle e frame che, al fine dell accessibilità, sono unanimente biasimabili Anche ammettendo di utilizzare le tabelle per determinare il layout di pagina, occorre che siano create in modo che, qualora siano visualizzate da browser testuali o lette da sintetizzatori vocali, non perdano di significato ed, inoltre, devono essere necessariamente commentate usando l attributo summary Per i frame valgono considerazioni analoghe: se proprio non se ne può prescindere occorre, comunque, nominarli e commentarli 2 un difetto notevole è costituito dalla totale assenza del commento delle immagini con l attributo alt, che nel nostro caso, può essere sufficiente a descrivere le piccole immagini contenute in questa pagina; per immagini più complesse si raccomanda l uso dell attributo longdesc che permette l associazione di un file più esplicativo all immagine 3 un'altra mancanza è la segnalazione dei link a pagina nuova, cioè l apertura di una nuova finestra del browser quando si clicca su un link della pagina che stiamo visitando 4 è assente la specificazione della lingua utilizzata nel documento e degli eventuali cambi di lingua, utilizzando l attributo lang nel tag HTML 5 ultima osservazione da fare riguarda lo scarso contrasto cromatico tra lo sfondo e i link visitati e attivi Proseguiamo con l analisi della pagina dedicata ai link ( riportando anche in questo caso il codice HTML, la resa a video e le eventuali mancanze in ambito di accessibilità 146

6 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> <TITLE>Links</TITLE> </HEAD> <BODY text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> <CENTER><B><I><U><FONT SIZE=+3>Related Links</FONT></U></I></B></CENTER> <LI> <FONT SIZE=+2><A HREF=" TARGET=blank >University of Florence</A></FONT></LI> <LI> <FONT SIZE=+2><A HREF=" TARGET=blank>Electronic and Telecommunication Department</A></FONT></LI> <LI> <FONT SIZE=+2><A HREF=" TARGET=blank>CNIT</A></FONT> <FONT SIZE=+0>(Inter-University National Consortium for Telecommunications)</FONT><FONT SIZE=+1></FONT></LI> <LI> <FONT SIZE=+2><A HREF="INeSiS" TARGET=blank >INeSiS Project</A></FONT> (Integrated Network protocols and Signal processing simulator)</li> <LI> <FONT SIZE=+2><A HREF=" TARGET=blank>MIUR</A> </FONT>(Italian Ministry of University and Research)</LI> <LI> <FONT SIZE=+2><A HREF=" TARGET=blank>CINECA </A></FONT><FONT SIZE=+0>(Informations Processing Centre for pubblic and private research activities)</font></li> </UL> </BODY> </HTML> L aspetto grafico di tale pagina è riportato in Fig 3 147

7 Fig3 Layout del sito Essendo la pagina abbastanza semplice, le imprecisioni non sono plateali; infatti quello che manca nel codice è: 1 il tag doctype, la dichiarazione di lingua, la segnalazione dell aperture dei link in una nuova finestra; 2 lo scarso contrasto tra lo sfondo e i colori dei link visitati e attivi Passiamo ora ad esaminare la pagina del personale del laboratorio ( Il codice HTML è riportato di seguito: <!doctype html public "-//w3c//dtd html 40 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="generator" content="mozilla/477 [en] (X11; U; Linux i686) [Netscape]"> <title>lenst - The labbers</title> </head> <body text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> 148

8 <center> <h1> <font face="arial">lenst Research Personnel</font></h1></center> <center><table CELLSPACING=10 > <tr> <td><a href="delre/delrehtml">prof E Del Re</a> (<a href="mailto:delre@lenstdetunifit">delre@lenstdetunifiit</a>), Full Professor</td> <td><a href="~mucchi">ing L Mucchi</a> (<a href="mailto:mucchi@lenstdetunifiit">mucchi@lenstdetunifiit</a>), Research Contract</td> </tr> <tr> <td><a href="fantacci/fantaccihtml">prof R Fantacci</a> (<a href="mailto:fantacci@lenstdetunifiit">fantacci@lenstdetunifiit</a>), Full Professor</td> <td><a href="~vannucci">ing G Vannuccini</a> (<a href="mailto:vannucci@lenstdetunifiit">vannucci@lenstdetunifiit</a>), PhD student</td> </tr> </table></center> </body> </html> Il layout è riportato in Figg 4,5 con evidenziazione della struttura tabulare 149

9 Fig4 Layout del sito Fig5 Layout del sito con struttura tabulare 150

10 Come è di immediata intuizione, anche in questo caso, analogamente al caso della home-page, il layout della pagina è strutturato come una tabella, con i difetti già riscontrati precedentemente Tuttavia è già presente la doctype e inoltre i link si aprono nella finestra corrente Andiamo adesso ad analizzare, come per le pagine precedenti, la pagina relativa alle pubblicazioni ( <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> <TITLE>LENST - Publications</TITLE> </HEAD> <BODY text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> <TABLE> <TR> <TD><IMG alt=book3gif height=39 src ="book3gif" width=67,></td> <TD> <H1> Publications</H1> </TD> </TR> </TABLE> <HR width="100%"> <TABLE WIDTH="100%" > <TR VALIGN=center> <TH><IMG alt=cyancubegif height=14 src ="cyancubegif" width=14,> </TH> <TD ALIGN=left><FONT size=4><a href="#rewdsp">digital Signal Processing (Journals)</A></FONT>: <A href="#rew1998">1998</a>, <A href="#rew1999">1999</a>, <A href="#rew2000">2000</a>, <A href="#rew2001">2001</a> </TD> </TR> <TR VALIGN=top> <TH><IMG alt=cyancubegif height=14 src ="cyancubegif" width=14,> </TH> <TD ALIGN=left><FONT size=4><a href="#condsp">digital Signal Processing </A><A href="#rew">(</a><a href="#condsp">conferences)</a></font> : <A href="#con1998">1998</a>, <A href="#con1999">1999</a>, <A href="#con2000">2000</a>, <A href="#con2001">2001</a></td> </TR> </TABLE> <HR width="100%"> <P><A NAME="rewDSP"></A><B><I><U><FONT SIZE=+2>Digital Signal Processing 151

11 (Journals)</FONT></U></I></B> <BR> <P> <BR><A NAME="rew1998"></A><B><I><FONT SIZE=+1>1998</FONT></I></B> <P>F Argenti, E Del Re, "Design of IIR Eigenfilters in the Frequency Domain," IEEE Transaction on Signal Processing, vol 46, n 6, June 1998, pp <P> <BR> </P> </BODY> </HTML> Nelle Figg6,7 è riportato, rispettivamente, l aspetto grafico della pagine in esame e la struttura tabulare Fig6 Layout del sito 152

12 Fig7 Layout del sito con struttura tabulare Anche in questa pagina si nota: 1 la mancanza della dichiarazione del tipo di documento (tag doctype ); 2 un'altra imprecisione è l assenza dell attributo lang nel tag HTML; 3 i colori dei link e dello sfondo non sono scelti per determinare un sufficiente contrasto; 4 non è presente l attributo summary nel tag table ; 5 si noti poi l uso errato dell attributo alt nel tag img in cui viene scritto il nome del file dell immagine anziché un suo commento; 6 il valore dell attributo align è impostato a center anziché più opportunamente a middle ; 7 i valori degli attributi heigh e width devono essere messi tra virgolette 8 viene usato il tag th per tabulare dei dati, mentre dovrebbe essere usato per le intestazioni della tabella; si dovrà, pertanto, usare più correttamente il tag td specifico per l inserimento di dati 9 è presente il seguente refuso nel codice: <A href="#condsp">digital Signal Processing </A><A href="#rew">(</a><a href="#condsp">conferences)</a>; questo link dovrebbe collegarci al punto della stessa pagina in cui sono 153

13 elencate le conferenze sull argomento Digital Signal Processing; tuttavia è inserito all interno di questo collegamento, in corrispondenza di una parentesi aperta, un link ad una pagina inesistente 10 nella tabella in cui sono organizzate le annate delle pubblicazioni per ciascun argomento sarebbe opportuno inserire delle sigle per rendere più comprensibile il testo che deve costituire il link vero e proprio; ad esempio, il collegamento agli articoli sulle comunicazioni mobili o satellitari scritti nel 1998, anziché essere ancorato dal testo: Mobile and Satellite Comunications (Journals): 1998 dovrebbe èpiù opportunamente essere ancorato dal testo: Mobile and Satellite Comunications (Journals): MSCj-1998 Passiamo ad analizzare la pagina degli argomenti di ricerca ( come sempre segue il codice HTML e la visualizzazione a schermo: <!doctype html public "-//w3c//dtd html 40 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="generator" content="mozilla/477 [en] (X11; U; Linux i686) [Netscape]"> <title>lenst - Research Activities</title> <!OCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN"> </head> <body text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> <center> <h1> <font face="arial">lenst Research Activities</font></h1></center> <h2> Research Areas</h2> <ul> <a href="research/dsphtml">digital Signal Processing</a></li> <a href="research/mobsatelhtml">mobile and Satellite Communications</a> (<a href="umts_slides/umts_slideshtm">umts and 4G Systems</a>)</li> 154

14 <a href="research/telenethtml">telecommunications Network</a></li> <br> </ul> <h2> Funded Research Projects</h2> <ul> <h2> Public</h2> <ul> COST 272</li> Software Radio Modem for Satellite Communications (ASI - CNIT)</li> Multimedia Systems and Applications by Satellite (ASI - CNIT)</li> Next Generation Mobile Systems (PRIN)</li> </ul> </body> </html> Come di consueto, in Fig8 è riportato il layout di tale pagina 155

15 Fig8 Layout del sito In questa pagine abbiamo riscontrato delle imprecisioni relative: 1 alla dichiarazione del doctype a proposito del case-sensitive; 2 alla dichiarazione della lingua con la quale è scritto il documento, cioè il tag lang ; 3 per errore è stato dichiarato due volte il doctype in parti diverse del listato; 4 Infine i tag li e ul sono stati impiegati in modo non corretto Proseguiamo con la pagina legata alla didattica ( teaching) Come al solito, ne riportiamo il codice HTML e la visualizzazione in Fig9 <!doctype html public "-//w3c//dtd html 40 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="generator" content="mozilla/477 [en] (X11; U; Linux i686) [Netscape]"> <title>teaching Activities</title> </head> 156

16 <body text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> <center> <h1> <font face="arial">lenst Teaching Activities</font></h1></center> <h2> Undergraduated Courses</h2> <ul> <a href=" Signal Processing I</a> (Prof Del Re)</li> <h2> Post-Graduate Courses</h2> <ul> </li> </ul> <h2> Master Thesis Topics</h2> <ul> Telecommunication Networks</li> <br> </ul> <h2> On Going PhD Thesis</h2> <ul> </li> </ul> </body> </html> 157

17 Fig9 Layout del sito Su questa pagina è stata rilevata solo la mancanza dell attributo lang, altre alle consuete piccole imprecisioni sull utilizzo dei tag ul e li Concludiamo con l analisi dell ultima pagina, dedicata alla descrizione delle modalità con cui eventualmente mettersi in contatto con il laboratorio ( Di seguito è riportato il codice HTML relativo a questa pagina <!doctype html public "-//w3c//dtd html 40 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="generator" content="mozilla/477 [en] (X11; U; Linux i686) [Netscape]"> <title>contact Us</title> </head> <body text="#ffff00" bgcolor="#000099" link="#ffffff" vlink="#cc33cc" alink="#ff0000"> <center> <h1> <font face="arial">general Information</font></h1></center> 158

18 <center><b>lenst</b> <br><b>dipartimento di Elettronica e Telecomunicazioni</b> <br><b>università degli Studi di Firenze</b> <br><b>via di Santa Marta, 3</b> <br><b>i-50139, Firenze, Italy</b> <br><b>phone: </b> <br><b>fax: </b> <br><b>telex: UNIFING-I</b></center> <h2> How to arrive:</h2> You can arrive to LENST Lab by three different ways: <table> <tr> <td><img SRC="planegif" align=left></td> <td> <h3> By Airplane</h3> Our airport (Vespucci-Peretola) is connected to the major cities of Europe In this case you have two possibilities to reach our Department of Electronics and Telecommunications <ul> If you want to get to the Lab by bus, you can take Airport Shuttle Bus until the railway station square (Piazza Stazione) Then take the bus number 4 on the other side of the railway station It will take about 40 minutes</li> If you want to take a taxi (much faster), I remember you that the address is Via Santa Marta, 3</li> </ul> </td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td><img SRC="cargif" align=left></td> <td> <h3> By Car</h3> You can arrive to Florence by the highway A1 (FIRENZE NORD exit); moreover Florence is connected to the sea (west coast) by highway A11</td> </tr> <tr> <td></td> <td></td> 159

19 </tr> <tr> <td><img SRC="traingif" align=left></td> <td> <h3> By Train</h3> The major railway station in Florence is Santa Maria Novella If you arrive to S M Novella you can take the bus number 4 on the left side of the station or a taxi</td> </tr> </table> </body> </html> Nelle Figg 10,11 abbiamo presentato il layout della pagina evidenziandone anche la struttura tabulare Fig10 Layout del sito 160

20 Fig11 Layout del sito con struttura tabulare In quest ultima pagina abbiamo rilevato l assenza dell attributo summary alla tabella e l attributo alt alle immagini Come negli altri casi non è stata dichiarata la lingua con l apposito tag lang Si osservi in conclusione che in alcuni listati HTML riportati in questo capitolo sono state omesse delle parti perché ritenute ridondanti o di scarsa pertinenza ai fini della comprensione del problema 161