Bandiera nera ai CSS-layout

Per l'ennesima volta, all'ennesimo nuovo progetto web ho dedicato tempo invano nel tentativo di impostare un layout tableless "non elementare".

Per "non elementare" intendo che era fluido (come, IMHO, dovrebbero essere tutti i siti web al giorno d'oggi), con le classiche 3 colonne + header e footer ed un po' più complesso dei vari esempi che si trovano sul web, ma niente che non si possa fare in meno di 10 minuti con un layout tabellare (annidato).

Ho letto in più articoli che sarebbe una questione di approccio: io sarei stato traviato dalle tabelle  e per tanto farei più fatica a capire come impostare il layout tramite div.
Beh... non credo sia il mio caso: io le idee su quale debba essere la suddivisione del mio layout ce l'ho ben chiara, le idee su come dovrebbero essere impostabili quei div ce le ho ben chiare, ciò che non ho ben chiaro è cosa ci sia di tanto "pulito" nell'utilizzare una serie di workaround, spesso ingrocchiati mica poco, per ottenere un risultato che nella migliore delle ipotesi è analogo a quello tabellare, considerando anche che, se non erro, i div sono indicati per l'impaginazione dei contenuti (es. un articolo che deve contenere riquadri ed immagini) e non per la definizione del layout grafico della superficie di visualizzazione.

Si perchè, tanto per dirne una al volo, float: right non dovrebbe servire a specificare "posiziona questo div sulla destra in un layout fluido", ma piuttosto "consenti all'eventuale testo di posizionarsi sullo spazio libero a sinistra" (tipico dell'impaginazione)!

Non si possono accostare due div senza utilizzare un posizionamento non statico: ma perchè??? Chi l'ha detto che due div non possono stare sulla stessa linea in modo naturale (come le img per esempio)???

Se si pensa al web "originale", quello di 30-40 lustri informatici fa, questa cosa ha un senso, mentre stride clamorosamente con l'idea di utilizzare i div per impostare un layout.
La butto lì: forse manca un tag che faccia il suo sporco lavoro di container e sia specializzato per questa attività.
Le tabelle tornerebbero a fare le tabelle di dati e i div tornerebbero a fare... i riquadri.

Io sono tutt'altro che un esperto di CSS e quanto scrivo può dare l'impressione di una persona che critica ciò che non riesce a fare, ma non è così, perchè ho dedicato tempo a leggere tutorial, a fare prove (vere, mica i due quadratoni colorati!), a cercare di capire ed in tutto questo tempo non ho MAI trovato risultati un minimo soddisfacenti, per non parlare del fatto che poi ti trovi nella piattaforma del futuro per applicazioni desktop dei nuovi controlli che ti permettono di impostare proprio un layout tabellare! Sarà per agevolare gli "pseudo-traviati" dalle tabelle o perchè un layout tabellare è realmente valido?

L'argomento secondo me scotta sicuramente e sono sicuro (conoscendomi) che bandiera nera o no, continuerà a pascolare nella mia mente.

Magari potrebbe essere un argomento per una sessione ad uno dei prossimi workshop, vedere che anche layout realmente complessi sono ottenibili con div+CSS senza effetti collaterali e con un codice CSS pulito.

Nel frattempo (purtroppo) ho dovuto recuperare i quasi 3 giorni di maldi...test CSS con 10 minuti e tre tabelle.

Print | posted @ mercoledì 18 luglio 2007 9.31

Comments on this entry:

Gravatar # re: Bandiera nera ai CSS-layout
by Luca at 18/07/2007 10.00

Ciao Mario, devo dire che non concordo con quello che dici in quanto i div oltre ad aiutarti nel realizzare un layout tableless ti permettono sopratutto di scrivere codice semantico con tutti i vantaggi che questo porta.
Ti lascio un link dove puoi vedere in azione layout realizzati con css
http://standardsreboot.com/

ciao ciao
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 18/07/2007 10.14

Ciao Luca,
ho dato una rapida occhiata a 6-7 siti tra quelli che hanno passato entrambe le validazioni e neanche uno è a layout fluido (questo tra l'altro la dice lunga sull'attenzione per la fruibilità).

Sai indicarmene uno con layout fluido a tre colonne + header e footer?

Cmq grazie per il tip!
Gravatar # re: Bandiera nera ai CSS-layout
by Gianluca Gravina at 18/07/2007 10.19

Anche io non concordo. Ho avuto (e non poco) da scornarmi con il passaggio da tabelle a div, non è la cosa più semplice del mondo (soprattutto per le varie differenze tra i vari opera, ffox, IE 6 e IE 7) ma ti assicuro che una volta raggiunto il risultato ottenuto non tornerai indietro.

Secondo il mio modestissimo parere le tabelle vanno utilizzato per renderizzare delle tabelle, non dei layout.

Risultato: Pagina più leggera, codice più leggibile e naturalmente più facilmente manutenibile.

GG
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 18/07/2007 10.30

Ciao Gianluca,
come ho scritto nel post, farebbe piacere anche a me veder tornare le tabelle a fare le tabelle, ma son proprio i risultati che... non riesco ad ottenere.

La prima cosa che penso in questi casi è: "Ok, sono io che non son capace di ottenere il risultato che voglio."

Poi però cerco, ricerco, stracerco e alla fin fine una vera alternativa ancora non l'ho trovata!

Lo chiedo anche a te: "Sai indicarmene uno con layout fluido a tre colonne + header e footer?"

Uno te lo saprei indicare io, sembrava funzionare (copia/incolla dall'esempio) ma poi al variare dei contenuti, questi se ne vanno a spasso. :-)

Disponibilissimo a cospargermi di cenere il capo, ma prima devo capire dov'è la via della redenzione.
Gravatar # re: Bandiera nera ai CSS-layout
by Matteo at 18/07/2007 10.50

Sinceramente ho seri dubbi che esista un layout che "non si possa fare" senza tabelle.
Mi associo a chi ha commentato prima di me dicendo che il codice semantico ha un numero infinito di vantaggi! Certo molti li possiamo vedere "lontani" dalla nostra esperienza quotidiana ma altri sono decisamente misurabili, alcuni anche monetizzabili :-)
Ti rimando ad un esempio di qualche anno fa (2004) che è diventato piuttosto famoso: http://www.stopdesign.com/articles/throwing_tables/
In pratica all'epoca un web designer si era divertito a rifare la home page di Microsoft con html semantico.
Ebbene: il peso della pagina si era notevolmente ridotto (del 60% !!!), non necessitava più di versioni differenziate in base al browser, sono stati rimossi oltre 100 elementi "inutili" (tipo spacer con gif)... un bel risultato no?
Spero che i numeri ti possano convincere più della filosofia.

Per esempi concreti di layout con i CSS, qui trovi praticamente tutto quel che può servire: http://blog.html.it/layoutgala/indexIta.html

Aggiungo una riflessione personale: allo stato attuale siamo ancora ben lontani dall'ideale separazione di contenuto e presentazione. IMHO serve "una rivoluzione" drastica non "un'evoluzione" di HTML/XHTML/ecc. (la direzione in cui si sta muovendo il W3C)
L'ideale sarebbe qualcosa tipo XML+XSLT (beh, magari qualcosa di più accessibile ai comuni mortali di XSL!) dove il contenuto è il contenuto e la presentazione è la presentazione, senza dubbi o incroci equivoci (che siano div o tabelle)
RSS docet...
Gravatar # re: Bandiera nera ai CSS-layout
by Marco De Sanctis at 18/07/2007 11.43

Mario, su
www.OSWD.org
oppure
http://standardsreboot.com/sites/judged/
(che ti hanno già indicato) trovi decine di template di esempio.

E cmq
http://blog.html.it/layoutgala/LayoutGala02ita.html

Mi sembra un bel layout liquido a tre colonne con header e footer. O mi sbaglio?
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 18/07/2007 12.39

Ciao, grazie anche a voi due per i links!

Matteo, concordo in pieno sulla tua visione (anche se forse ad oggi seguirei più l'esempio XAML + CodeBehind rispetto a XML + XSLT) ma ciò che mi blocca è sempre l'assenza di uno straccio di risultati (che comunque magari non riesco a raggiungere per mie carenze, come già detto).

L'esempio Gala2 di html.it è proprio quello che citavo prima (se non mi confondo): evviva, felicissimo, provo, inserisco un asp:Repeater piuttosto lunghino nel div del contenuto e... mi ritrovo la parte bassa del Repeater sotto il div degli extra!!! :-(
Gravatar # re: Bandiera nera ai CSS-layout
by Marco De Sanctis at 18/07/2007 14.20

Mi par strano, visto che proprio nell'esempio Gala2 puoi aumentare a piacimento la lunghezza del testo e tutto sembra funzionare senza problemi.
Gravatar # re: Bandiera nera ai CSS-layout
by Matteo at 18/07/2007 14.21

Mario, farei un doppio distinguo sulla separazione dati/presentazione: lato server XAML+Codebehind è una buona soluzione (ma non molto diversa da markup/Codebehind). Poi ogni tecnologia/vendor (Microsoft, Adobe, Sun, PHP, ecc.) si farà i suoi conti su cosa sia meglio adottare.

Quel che mi preme però è avere la stessa separazione anche lato client (indipendentemente dalla piattaforma che ha prodotto quell'output) e per ragioni diverse, come ad esempio:

- post-elaborare/riutilizzare i dati (quello che si fa con SOAP o più semplicemente con gli RSS: basta un file di mapping per trasformare contenuti disomogenei o uno schema per evincerne la struttura)

- scegliere/personalizzare con facilità il layout di visualizzazione (adattandolo al media, alle esigenze dell'utente, ai suoi gusti personali, ecc.)

Forse ho io una visione un po' troppo "service oriented" del web? :-)


Per quanto riguarda lo l'errore che riscontri con Gala2 credo dipenda da quel che hai messo nel repeater...
Gravatar # re: Bandiera nera ai CSS-layout
by Luca at 18/07/2007 14.53

Vedo che molti la pensano come me in fatto di XHTML semantico :-)
Cmq Mario l'esempio che hai su Layout Gala, funziona bene, tra l' altro il javascript che utilizza l'esempio non fa altro che creare lato client contenuto all' interno della sezione principale cosa che te invece fai sul server usando il repeater...
Saluti Luca
Gravatar # re: Bandiera nera ai CSS-layout
by Alessandro Ghizzardi at 18/07/2007 17.53

Umm.. non è che stai usando IE? Io quando facevo le prove ho avuto un sacco di problemi.. su firefox non ci sono footer che se ne vanno a spasso, su IE7 si... :(

Comunque, sono d'accordo sul fatto che allo stato attuale sia un problema, ma non è il problema della tecnologia, è il problema dell'implementazione. Se anche tu come me lavori col web dal 90 (io le prime paginette le facevo che stavo ancora a studiare.. sigh...) ti ricorderai i casini di quando un semplice align=center potesse cambiare le cose tra mosaic e netscape.... e così sarà per i CSS finchè non si decideranno ad implementare correttamente le regole di rendering :(
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 19/07/2007 9.45

Infatti, Marco, non capisco... :-(
Riproverò...

Matteo, concordo con quello che dici e con la differenza che hai evidenziato (non avevo capito bene leggendo il primo commento, sorry!).

Luca, non avevo dubbi sul fatto che molti la pensano come te. Anzi, come ho scritto mi aggregherei più che volentieri... :-)
Che dire, con tanti feedback a favore, mi toccherà riprovarci alla prossima occasione...

Ale, claro che uso IE 7 inizialmente. :-) Poi testo sugli altri browser.
Io ho iniziato più tardi: 94-95

Grazie ancora a tutti per l'attenzione!!
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 19/07/2007 9.49

"Io ho iniziato più tardi: 94-95"
Con le prime paginette web, intendo... Prima la connessione ad internet costava veramente troppo!!!
Comments have been closed on this topic.