prima trasformazione

Codice di output dello script originario, come visibile nell’esempio online:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="it">
<HEAD>
<TITLE>bbs</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<p><a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http://www.protty.net/bbs_source.php" class="external">Bobby</a>
| La trasformazione di pagine dinamiche, WA </p>
<p>
<H1>BBS</H1>
<H2>il codice nella versione originaria</H2>
<UL>
<LI>(2003-02-15 16:47:29) <A HREF="bbs_source.php?messageID=2">codice originario</A><BR>
<UL>
</UL>
</UL>
<FORM ACTION="bbs_source.php" METHOD="post">
<INPUT TYPE="hidden" NAME="inputParent" VALUE="0"><INPUT TYPE="hidden" NAME="ACTION" VALUE="POST"><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" WIDTH="400">
<TR><TD WIDTH="100"><B>Oggetto</B></TD><TD WIDTH="300"><INPUT TYPE="text" NAME="inputTitle" SIZE="35" MAXLENGTH"64" VALUE=""></TD></TR>
<TR><TD WIDTH="100"><B>Poster</B></TD><TD WIDTH="300"><INPUT TYPE="text" NAME="inputPoster" SIZE="35" MAXLENGTH"64"></TD></TR>
<TR><TD COLSPAN="2" WIDTH="400"><TEXTAREA NAME="inputBody" COLS="45" ROWS="5"></TEXTAREA></TD></TR>
<TR><TD COLSPAN="2" WIDTH="400"><CENTER><INPUT TYPE="submit" VALUE="Post"></CENTER></TD></TR>
</TABLE>
</FORM>
</p>
<p>&nbsp;</p>
<p>script di Leon Atkinson</p>
</BODY>
</HTML>


I valori delle larghezze sono in pixel. Dobbiamo intervenire nel sorgente per generare in output valori in percentuale.

Ecco le linee da modificare, tratte dal sorgente originario:

function postForm($parentID, $useTitle)
{
printf( "<FORM ACTION="bbs_source.php" METHOD="post">n");
printf( "<INPUT TYPE="hidden" NAME="inputParent" VALUE="$parentID">");
printf( "<INPUT TYPE="hidden" NAME="ACTION" VALUE="POST">");
printf( "<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" WIDTH="400">n");
printf( "<TR><TD WIDTH="100"><B>Oggetto</B></TD>");
printf( "<TD WIDTH="300"><INPUT TYPE="text" NAME="inputTitle" SIZE="35" MAXLENGTH"64" VALUE="$useTitle"></TD></TR>n");
printf( "<TR><TD WIDTH="100"><B>Poster</B></TD>");
printf( "<TD WIDTH="300"><INPUT TYPE="text" NAME="inputPoster" SIZE="35" MAXLENGTH"64"></TD></TR>n");
printf( "<TR><TD COLSPAN="2" WIDTH="400">");
printf( "<TEXTAREA NAME="inputBody" COLS="45" ROWS="5"></TEXTAREA></TD></TR>n");
printf( "<TR><TD COLSPAN="2" WIDTH="400"><CENTER><INPUT TYPE="submit" VALUE="Post"></CENTER></TD></TR>n");
printf( "</TABLE>n");
printf( "</FORM>n");
}


Ecco le stesse linee corrette (tolte le misure di “width”):

function postForm($parentID, $useTitle)
{
printf("<FORM ACTION="bbs.php" METHOD="post">n");
printf("<INPUT TYPE="hidden" NAME="inputParent" VALUE="$parentID">");
printf("<INPUT TYPE="hidden" NAME="ACTION" VALUE="POST">");
printf("<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" >n");
printf("<TR><TD><B>Oggetto</B></TD>");
printf("<TD><INPUT TYPE="text" NAME="inputTitle" SIZE="35" VALUE="$useTitle"></TD></TR>n");
printf("<TR><TD><B>Poster</B></TD>");
printf("<TD><INPUT TYPE="text" NAME="inputPoster" SIZE="35" ></TD></TR>n");
printf("<TR><TD></td>");
printf("<td><TEXTAREA NAME="inputBody" COLS="45" ROWS="5"></TEXTAREA></TD></TR>n");
printf("<TR><TD COLSPAN="2"><CENTER><INPUT TYPE="submit" VALUE="Post"></CENTER></TD></TR>n");
printf("</TABLE>n");
printf("</FORM>n");
}


Proviamo a validare la pagina, otteniamo il seguente risultato:

Priority 2 Accessibility errors found:

  • Explicitly associate form controls and their labels with the LABEL element. (3 instances) >>> seconda trasformazione
    Lines 18, 19, 20

Priority 3 accessibility errors found:

  • Provide a summary for tables. (1 instance) >>> terza trasformazione
    Line 17
  • Include default, place-holding characters in edit boxes and text areas. (3 instances) >>> quarta trasformazione
    Lines 18, 19, 20

Visualizza l’esempio online dopo la prima trasformazione (è disponibile un link a Bobby, cliccalo per verificare l’eliminazione del primo problema ;-).

Il primo problema priorità 2 è stato risolto. Restano 3 errori. >>> continua con la seconda trasformazione

Potrebbero interessarti anche i seguenti articoli

  • quarta trasformazionequarta trasformazione Codice di output dello script trasformazione 3, come visibile nell'esempio online: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 […]
  • terza  trasformazioneterza trasformazione Codice di output dello script trasformazione 2, come visibile nell'esempio online: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 […]
  • seconda trasformazioneseconda trasformazione Codice di output dello script trasformazione 1, come visibile nell'esempio online: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 […]
  • Il codice originario del semplice forumIl codice originario del semplice forum <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"> <HTML […]
  • Il codice come risulta alla fine della trasformazioneIl codice come risulta alla fine della trasformazione <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"> <HTML […]

One thought on “prima trasformazione”

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.