Newsgroup: it.lavoro.professioni.webmaster
Titolo: Alcune considerazioni sulle pagine web.

Ciao a tutti,
colgo l'occasione per mettere nero su bianco alcune considerazioni che sto
fatto in merito a quanto si è discusso in questi tempi sui siti tradizionali
(con tabelle) e TABLELESS (senza tabelle).
I vantaggi e svantaggi li conosciamo tutti, chi piu chi meno. Ora se nei
siti tradizionali si unisce la struttura al layout, in quelli TABLELESS si
tende a separare la struttura dal layout, introducendo i fogli di stile
(CSS).
Spesso provando a migrare da una impaginazione tradizionale a una TABLELESS
si riscontrano difficoltà di vario tipo, dovuti essenzialmente a problemi di
non completa compatibilità con i vari browser etc.
Al di la di questo, occorre chiedersi: il passaggio dal "tradizionale" al
"TABLELESS" è diretto? La risposta è negativa. In altre parole manca un
anello che unisce questi due.
Andando per ordine, se abbiamo una pagina web impaginata in modo
tradizionale, ovvero con tabelle etc, e proviamo a esportare tutti gli
attributi dei vari elementi HTML usati nella pagina in un CSS e richiamando
questi come selettori all'interno di tali elementi sostanzialmente separiamo
la struttura dal layout.
Otteniamo quindi un sistema basato su DIVLESS, a questo punto, applicando
alcune semplici regole fra cui:
1) La sostituzione di TABLE e di TD con DIV;
2) La rimozione di <TR> e <TR>
otteniamo una conversione lineare dal sistema DIVLESS al sistema TABLELESS.
Chiaramente ciò sarà possibile soltanto nel caso in cui le tabelle della
pagina non contengano attributi come COLSPAN e ROWSPAN.
In quel caso sarà necessario ristrutturare la tabella in modo diverso
affinchè soddisfi le condizioni di sopra.
Ho avuto modo di osservare:
1) che un sistema basato su TABLELESS riscontra notevoli problemi di
compatibilità con i vari  browser (tali problemi non si riscontrano con un
sistema basato su DIVLESS), uno fra questi è la sovrapposizione dei livelli
in NS7 (riscontrata praticamente in tutti i siti web TABLELESS che ho avuto
modo di provare su NS7). Su IE6 funziona infatti tutto correttamente.
Con un sistema DIVLESS tali problemi non si vengono riscontrati.
2) in un sistema TABLELESS si tende a semplificare  la struttura HTML della
pagina web a discapito del foglio di STILE.
In un sistema DIVLESS invece il foglio di stile resta notevolmente
semplificato (basti confrontare un layout di tre colonne di cui la centrale
liquida e le laterali fisse, applicando i due metodi).
3) Il passaggio da DIVLESS a TABLELESS è diretto e invertibile senza
apportare alcuna modifica al codice HTML (basti vedere le due regole di cui
sopra).
E' sufficiente quindi lavorare in entrambi i casi solamente con il foglio di
stile.
4) I CSS andrebbero ulteriormente potenziati con altre proprietà che
sostituiscano gli attributi delle tabelle, infatti a titolo di esempio,
CELLSPACING e CELLPADDING trovano corrispondenza con MARGIN e PADDING, e
vengono supportati correttamente da NS7 ma vengono ignorati da IE6.
Concludendo, la scelta del metodo TABLELESS o DIVLESS dovrebbe dipendere
essenzialmente dal tipo di uso che si vuole fare in conformità alle
tipologie di dispositivi a cui si applicano.
Per un sito web un approccio DIVLESS è più immediato rispetto a un TABLELESS
e in ogni caso il passaggio da un sistema DIVLESS a TABLELESS è sempre
fattibile e inveribile e personalmente ritengo che un approccio DIVLESS sia
quello che più si avvicina anche ai meno esperti.
Mi farà piacere sentire le vostre opinioni in merito a quanto detto sopra ed
eventualmente discuterle. Personalmente ho già fatto delle verifiche
applicando i due sistemi TABLELESS e DIVLESS su alcuni modelli di layout
standard e come ho detto prima, i DIVLESS sembrano essere "graditi" ai
browser.
Che il passaggio dalla progettazione di pagine tradizionali a quelle
TABLELESS senza passare per la via intermedia DIVLESS abbia provocato
qualche indigestione? :) non solo agli stessi sviluppatori ma anche ai
browser? :)
In attesa ringrazio tutti, e mi scuso per la lunghezza del post.
I. Marcello (Cooper).
-- 
BlueWare Web Agency
   [web] 
http://www.blueware.it
   [icq] 146781935

 browser? :)
No, se i browser avessero supportato da anni la compatibilità con gli
standard, oggi non avremmo neppure parlato di differenze tra tableless
o divless. :)
-- 
Aloha,
Marco Trevisan
------------------------------------------------------------------------
< Bazzmann|Mag > E' nato il design molecolare. | 
http://www.bazzmann.com
< Bazzmann Srl > Design molecolare applicato.  | 
http://www.bazzmann.it


[Cut]
Provo a spiegarmi meglio con un esempio pratico. Prendiamo in considerazione
il layout a 3 colonne con la centrale liquida e le due laterali fisse. In
tableless abbiamo qualcosa del tipo nel css:
div { margin: 3px; }
#tableless_main { position: relative; width:98% }
#tableless_sx { border: 1px solid #000000; position:absolute; top:0px;
left:0px; width:160px; z-index:1;}
#tableless_cx { margin: 0 208px 0 167px; border:1px solid #000000; padding:
0px; clear; z-index:2; }
#tableless_dx { border: 1px solid #000000; position:absolute; top:0;
right:0; width:200px; z-index:3; }
e quindi in html:
<div id="tableless_main">
   <div id="tableless_sx">col sx</div>
   <div id="tableless_cx">col cx</div>
   <div id="tableless_dx">col dx</div>
</div>
mentre in divless, abbiamo qualcosa del tipo nel css:
table { margin: 3px; }
#divless_main { width: 98%; }
#divless_sx { border: 1px solid #000000; width: 160px; }
#divless_cx { border: 1px solid #000000; }
#divless_dx { border: 1px solid #000000; width: 200px; }
e quindi in html:
<table id="divless_main"><tr>
   <td id="divless_sx" nowrap>col sx</td>
   <td id="divless_cx">col cx</td>
   <td id="divless_dx" nowrap>col dx</td></tr>
</table>
Entrambi producono lo stesso risultato, in particolare, se sostituiamo table
e td con div ed eliminiamo <tr> e </tr> passiamo dal divless al tableless.
Per quanto riguarda invece il CSS nella versione tableless si manifesta "piů
complicato e contorto" rispetto alla versione divless.
Se l'obiettivo č semplificare e rendere maggiormente leggibile il codice,
questo obiettivo non deve limitarsi a essere applicato alla struttura html
ma anche al css.
Infine se andiamo a guardare netscape (io uso la 7) se restringiamo la
pagina orizzontalmente, con i divless le tre colonne tendono a sovrapporsi e
in conseguenza di ciň anche il testo. Mentre con i divless ciň non accade.
Se poi vogliamo contare i byte che vengono impiegati sia con l'uno che con
l'altro metodo osserviamo che con i divless si ha un discreto risparmio di
byte.
E' possibile verificare ciň facendo il copia/incolla del codice che segue
(lo riporto per intero):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd
">
<html>
<head>
<title>Test TABLELESS / DIVLESS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 body { margin: 0px;  text-align: center; }
 div { margin: 3px; }
 #tableless_main { position: relative; width:98% }
 #tableless_sx { border: 1px solid #000000; position:absolute; top:0px;
left:0px; width:160px; z-index:1;}
 #tableless_cx { margin: 0 208px 0 167px; border:1px solid #000000; padding:
0px; clear; z-index:2; }
 #tableless_dx { border: 1px solid #000000; position:absolute; top:0;
right:0; width:200px; z-index:3; }
 table { margin: 3px; }
 #divless_main { width: 98%; }
 #divless_sx { border: 1px solid #000000; width: 160px; }
 #divless_cx { border: 1px solid #000000; }
 #divless_dx { border: 1px solid #000000; width: 200px; }
</style>
</head>
<body>
     <div id="tableless_main">
       <div id="tableless_sx">col sx</div>
       <div id="tableless_cx">col cx</div>
       <div id="tableless_dx">col dx</div>
     </div>
     <table id="divless_main"><tr>
       <td id="divless_sx" nowrap>col sx</td>
       <td id="divless_cx">col cx</td>
       <td id="divless_dx" nowrap>col dx</td></tr>
     </table>
</body>
</html>
Rimango del parere che un potenziamento dei CSS in tal senso favorirebbe i
divless sia sul piano tecnico che pratico. Tecnico in quanto il passaggio
dal tradizione/divless č piu immediato rispetto al tradizionale/tableless e
pratico in quanto i browser supportano meglio i table rispetto ai div.
La differenza quindi resterebbe solamente sul tipo di risultato che si vuole
ottenere ovvero se si vuole avere una visualizzazione della pagina al
termine del caricamento di tutti i dati (vedi tabelle) oppure se si vuole
avere un caricamento progressivo di queste (tableless).
Ormai che la banda larga prende piede il fattore tempo diventa
progressivamente meno rilevante rispetto al dial-up (fermo restando che
nonostante tutto ci sono ancora persona (e sono molte, non moltissime) che
usano il dial-up.
Quindi i tableless andrebbero bene per quei dispositivi portatili, dove un
caricamento progressivo della pagina č gradito rispetto a una attesa
maggiore e vederla tutta in una volta, mentre i divless per i motivi di cui
sopra si adatterebbero meglio ai siti internet ordinari.
Fammi sapere :)
Cooper.


avere un caricamento progressivo di queste (tableless).
Non proprio, prendi ad esempio una struttura di una pagina con due
colonne, a sinistra un menu e a destra il contenuto. Ora vuoi
permettere all'utente di visualizzare la pagina con il menu in alto ed
il contenuto in basso se cosi' preferisce.
Da:
m	| con
e	| te
n	| nu
u	| to
A:
menu
---------
contenuto
Con le tabelle hai due css e due html per gestire entrambe le
situazioni. Senza tabelle hai un solo html e due css. Tempo di
sviluppo ridotto. Se poi l'utente usa broswer tipo mozilla gli basta
scegliere da menu lo stile preferito senza che tu debba scrivere
codice per lo swapping degli stili :-)
'bye

 ha scritto nel
messaggio news:jntjc050ci79veg75...@4ax.com...

Quello che dici è vero ma il lavoro richiesto per fare la trasformazione di
cui parli non è eccessivo. Un esempio, il primo caso che suggerivi era una
tabella a due colonne (sx per il menu e dx per il contenuto), ovvero
qualcosa del tipo:
<table width="98%"  border="0" cellspacing="0" cellpadding="0">
  <tr align="center" valign="middle">
    <td width="50%">COLONNA MENU </td>
    <td width="50%">COLONNA CONTENUTO </td>
  </tr>
</table>
da cui esportando gli attributi nel css e richiamandoli con dei selettori,
otteniamo:
<table id="principale">
  <tr>
    <td id="colonna1">COLONNA MENU </td>
    <td id="colonna2"">COLONNA CONTENUTO </td>
  </tr>
</table>
e quindi, sostituendo table e td con div e rimuovendo <tr> e </tr> abbiamo:
<div id="principale">
    <div id="colonna1">COLONNA MENU </div>
    <div id="colonna2"">COLONNA CONTENUTO </div>
</div>
allo stesso modo se abbiamo una tabella formata da 2 righe (e una colonna)
di cui la prima per il menu e la seconda per il contenuto, ovvero:
<table width="98%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle"><div align="center">RIGA MENU
</div></td>
  </tr>
  <tr>
    <td align="center" valign="middle">RIGA CONTENUTO </td>
  </tr>
</table>
procedendo come nel caso precedente, abbiamo:
<table id="principale">
  <tr>
    <td id="riga1">RIGA MENU</td>
  </tr>
  <tr>
    <td id="riga2">RIGA CONTENUTO </td>
  </tr>
</table>
da qui applicando la "regoletta di sopra" abbiamo:
<div id="principale">
    <div id="riga1">RIGA MENU</div>
    <div id="riga2">RIGA CONTENUTO </div>
<div>
osserviamo che rispetto al caso precedente abbiamo solo sostituito colonna1
con riga1 e colonna2 con riga2.
Il css invece risulterà piu semplice usando DIVLESS che TABLELESS :) infatti
sarà solo sufficiente specificare la larghezza della colonne (se si opera
nel primo caso) oppure delle righe (se nel secondo caso) mentre usando
TABLELESS occorre specificare ulteriori proprietà, quali: position, left,
top, z-index etc (che nell'altro caso non sono necessarie).
In ogni caso, tutto dipende dal tipo di uso che bisogna fare e quindi
valutare in quali casi conviene l'uno e in quali casi l'altro.
Quello che più tenevo a puntualizzare comunque non è il vantaggio di DIVLESS
su TABLELESS o viceversa, quanto invece il fatto che il passaggio da una
pagina tradizionale a TABLELESS risulta piu immediato passando a DIVLESS.
In altre parole, se abbiamo un fiume con al centro una "roccia" e ci
troviamo da un lato e vogliamo passare dall'altro lato, possiamo o fare UN
SOLO SALTO DA DUE METRI oppure fare DUE SALTI DA UN METRO.
E' chiaro che per i meno esperti fare due salti da un metro è piu semplice
che farne uno da due metri :)
Non so se rendo l'idea, ma il concetto essenzialmente è quello. Per il resto
al di la del fatto che si vuole una tabella a due righe o due colonne
l'obiettivo di separare il contenuto dalla struttura intriseca della pagina
viene comunque raggiunto.
Ai fini pratici poi come ho detto prima i browser digeriscono meglio i table
che i div, questo probabilmente perchè i table esistono da piu tempo
rispetto ai div :)
Fammi sapere ^_^
Cooper


 o divless. :)
Puo' essere, ma il tutto nasce da un errore a monte, che tra l'altro non
abbiamo fatto noi.
A mio avviso basta abituarsi al paradigma, poi tutto e' in salita.
HAND,
  ngw


Sono pienamente d'accordo. Il fatto è che il concetto di "compatibilità"
IMHO è stato male interpretato da molti (me compreso); per fare un esempio,
in passato mi sono fatto un mazzo così (e credo di non essere stato il solo)
per creare siti che utilizzassero i css ma che fossero allo stesso tempo
visibili in maniera pressochè identica con ogni browser (inclusi NN4 e IE4),
rinunciando tra l'altro a layout ed effetti elaborati. Ho sempre pensato che
l'affermazione di "sito visibile con qualsiasi browser" andasse presa alla
lettera. Oggi ho capito che mi sbagliavo: è sì importante che il contenuto
di un sito (e sottolineo contenuto) sia visibile e navigabile con qualsiasi
browser e qualsiasi versione di browser (incluse quelle molto datate) ma non
è assolutamente necessario che la grafica ed il layout siano visibili con
browser vetusti. Piuttosto che impazzire sui problemi di supporto di
ciascuna regola da parte dei vari browser nelle varie versioni, è
preferibile dare un taglio netto al passato e suddividere i browser in due
grandi famiglie: i browser che supportano appieno i css e quelli che li
supportano parzialmente o non li supportano affatto. Strutturando bene il
contenuto delle pagine, tutti possono comunque ottenere le informazioni che
desiderano e chi proprio non sopporta di vedersi un sito scarno dal punto di
vista grafico, perchè usa Netscape 4.0 o Explorer 4.0, potrà sempre
aggiornarsi il browser.
 
Mao
--------------------------------
Inviato via 
http://arianna.libero.it/usenet/

 del div che e' piuttosto generico.
puoi fare alcuni esempi?
ci sono link che parlano di questo?

 sopra si adatterebbero meglio ai siti internet ordinari.
No, si adattano come soluzione ibrida e temporanea per le esigenze di
cui sopra. Di questo ne sono sempre più convinto. :)


 A mio avviso basta abituarsi al paradigma, poi tutto e' in salita.
In discesa, spero! :D


 aggiornarsi il browser.
Bravo Mao,
hai espresso al meglio come dovrebbe cambiare la cultura di tutti noi,
sia da utenti che da clienti, sia da sviluppatori che da consulenti.
Non dico che non siano ancora presenti dei problemi effettivi (ce ne
sono eccome!), però se partiamo col piede giusto, sono convinto che
il web riesca a maturare in maniera positiva, senza estremismi da una
parte all'altra. :)
