ASP.NET - Accessibility
Attenzione ai CSS

Chi sviluppa applicazioni web deve prestare particolare attenzione a parecchi fattori che possono influenzare la fruibilità dell'applicazione stessa.

Giustamente si considerano molto l'architettura, le tecnologie da adottare, il meccanismo di persistenza dei dati :-), e molto altro ancora. Tutti aspetti fondamentali.

Nel nostro CMS però abbiamo riscontrato un problema legato ai CSS utilizzando il posizionamento assoluto degli elementi html:
position: absolute.

In sostanza non era possibile navigare (i CSS in questione riguardano un web-control menu, sviluppato da noi) nessuna pagina dell'applicazione, parte pubblica compresa, in quanto ad una risoluzione di 800x600 i link apparivano ma non era possibile cliccarli, perchè il browser interpretava male CSS e html impedendo agli elementi di ricevere correttamente input dal mouse.

Abbiamo risolto modificando parlizalmente la struttura del menu ed eliminato il posizionamento assoluto (assoluto rispetto il contenitore non rispetto al body).

Il mio consiglio quindi è quello di verificare di non avere problemi di questo genere, che possono impedire l'accesso alle funzionalità di un'applicazione anche sviluppata al meglio ma che poi si perde nel classico "bicchier d'acqua" :-D.

Attenzione! :-)

CSS: usare con cautela!!

Matteo Migliore.

L'importanza di sviluppare applicazioni web table-less

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.