L'importanza di sviluppare applicazioni web table-less

Matteo Migliore — Thu, 19 Apr 2007 17:08:00 GMT

Molti di noi trascurano un aspetto fondamentale dello sviluppo di applicazioni web.

Purtroppo, almeno tecnologicamente parlando, le applicazioni web, anche adottando le più recenti tecnologie lato server per l'erogazione dei contenuti sì basano su qualcosa che non si è evoluto: il protocollo HTTP e il linguaggio HTML.

Spesso sì è portati quindi a tralasciare i dettagli, l'output emesso, perchè distratti dalla semplicità e l'astrazione offerte dai controlli ASP.NET.

Visto che è noto che ASP.NET non rispetti molto gli standard web, http://en.wikipedia.org/wiki/Web_standards e http://www.w3.org/TR/xhtml1/, è nato il progetto CSS Control Adapters arrivato ormai alla versione 1.0 che rende i controlli ASP.NET cross-browser e accessibili ad utenti diversamente abili.

Con un po' di sforzi è possibile adattare i controlli alle proprie esigenze e creare un layout comunque d'effetto ma rispettoso degli standard.

Detto questo, ovviamente queste fatiche sarebbero vane se non sì seguisse il principio di un layout table-less anche per le parti del layout non affidate direttamente ai controlli standard.

Ecco un esempio di layout fluido, table-less e cross-browser:

   1:  <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2:  <html xmlns="http://www.w3.org/1999/xhtml">

   3:  <head>

   4:  <title>Layout Table-less</title>

   5:  <style type="text/css">

   6:  body { font-family: Arial; }

   7:  .header { text-align: center; }

   8:  .contents { position: relative; }

   9:  .left {    position: absolute; width: 150px; background-color: #dddddd; left: 0px; top: 0px; }

  10:  .center { margin-left: 150px; margin-right: 150px; padding: 10px; background-color: #aaaaaa; }

  11:  .right { position: absolute; width: 150px; background-color: #dddddd; right: 0px; top: 0px; }

  12:  .footer { text-align: center; }

  13:  </style>

  14:  </head>

  15:  <body>

  16:      <div class="main">

  17:          <div class="header">Header</div>

  18:          <div class="contents">

  19:              <div class="left">Left</div>

  20:              <div class="center">Center</div>

  21:              <div class="right">Right</div>

  22:          </div>

  23:          <div class="footer">Footer</div>

  24:      </div>

  25:  </body>

  26:  </html>

Infine, ma non ultimo, una volta creato un layout table-less potete inserire un link in fondo alla pagina (o dove meglio preferite :-) ) il logo del sito http://w3tableless.com/, come per i validatori di CSS e XHTML, che farà aumentare il numero di visite alle vostre pagine grazie ad uno scambio link automatico creato dal sito stesso per i layout realmente table-less.

Ultima cosa: rendete i link al validatore parametrizzati in base alla pagina, in questo modo http://w3tableless.com/?uri=PAGE_PATH per aumentare il numero di outbound-link, a Google piacciono anche quelli :-).

Se avete domande...

Matteo Migliore.

ASP.NET - SEO

L'importanza di sviluppare applicazioni web table-less