le associazioni AIP, ADICOM e ALSI di cui parlo nell'articolo - composizione realizzata da Laurea De Masi

L’articolo parla dell’associazionismo cui noi web designer, developer ed informatici, in generale possiamo fare riferimento. Ho cercato di tratteggiare le caratteristiche salienti delle associazioni maggiormente significative in questo campo, senza darne giudizi o consigli personali. A noi sta la scelta di dedicidere se optare oppure no per queste forme di associazionismo, attendo numerosi i vostri commenti!

Segui le istruzioni e ripubblica questo annuncio sul tuo sito o blog, così come lo vedi, completo di immagine e link alle istruzioni per partecipare. Assicurati di  possedere un contatto al quale puoi essere raggiungibile sul tuo blog o sito e attendi la data di scadenza che è prevista per il 31 Ottobre 2008.

A seconda del numero di trackback assegnato, che potrai verificare direttamente sul post  con il regolamento, parteciperai all’estrazione di un libro di webdesign a scelta fra quelli proposti.

Partecipa anche tu!

Si sa, per la programmazione ci sono regole ben precise per la formattazione di una classe o di un modulo, o anche semplicemente di una pagina php, come ad esempio l’identazione, dove posizionare le parentesi grafe, l’uso delle maiuscole per i nomi di classe e metodi…(e questo è senza dubbio riduttivo).

Ma per i fogli di stile, più comunemente detti CSS?
Forse ci sono delle regole non dette, forse queste regole sono seguite da una ristretta cerchia di adepti, ma girovagando un po’ sui codici sorgenti di alcuni siti web, ho sempre notato che molto spesso la formattazione e la struttura di un foglio di stile è più o meno lasciata al caso, o meglio (o peggio), si nota un pattern abbastanza preciso. Sembra infatti che dopo una iniziale strutturazione dei vari selettori, vi sia un vero e proprio append delle classi che servono al momento.
Ciò può essere dettato da ovvie ragioni di tempo, ma a lungo andare produce a mio parere gravissimi effetti collaterali: ci si trova davanti a CSS lunghi centinaia e centinaia di righe, dove selettori ID si intervallano a selettori di classe, definizioni di layout sono sparse qua e là, in mezzo a semplici definizioni stilistiche di una riga (alzi la mano chi non ha mai visto la classe .red { color: #FF0000 } o simili). Senza contare il rischio più grande, ovvero sovrascrivere definizioni con nuovi comportamenti, a rischio di pericolosi cambiamenti dell’impaginazione. E chi poi verrà a doversi scontrare con quanto prodotto con poca attenzione per l’ordine e la pulizia, si troverà a non capire più dove metter mano.

E’ venuto il momento di fare un po’ di ordine: vi propongo 10 consigli, o meglio 10 buone pratiche per stendere un buon foglio di stile.

1. Definite le proprietà a partire dall’alto iniziando con le proprietà del body e poi a scendere
2. Definite per ogni sezione di impaginazione prima gli elementi box (div) e poi i selettori di elementi inline (class), a titolo di esempio in base anche al punto precedente:
   body{ ... }
#wrapper{ ... }
#header{ .. }
#header .image{ ... }
#header ul li { ... }
#content{ ... }
#content ul li{ ... }
#footer{ .. }
#footer .image{ ... }
#footer .link{ ... }

3. Una volta scelto il modo di scrivere selettori con una o più definizioni, mantenetela, non mischiate modi diversi di formattazione come in questo esempio:
   
#header{
width: 960px;
height: 120px;
}
#content{ widht: 65%; float: left; color: #333333; background-color: #FEFEFE; }
#footer
{
clear: left
}

4. Utilizzate per scopi di impaginazione i selettori id e per tutto ciò che verrà utilizzato esclusivamente una volta sola nella pagina
5. Se ci sono troppi div innestati e nel css vi trovate a dover scrivere cose del tipo:
   #div1 #sub_div1 #sub_sub_div1{ ... }
   riflettete: probabilmente c’è una soluzione migliore
6. Definite dei selettori (di classe) utilità da inserire in fondo alla pagina, come ad esempio:
   /* utilities */
.floatleft{ float: left}
.clearleft{ clear: left }
...
7. Definite in una apposita sezione lo stile per i tag di contenuto generici:
   ...
p{
margin: 0;
padding: 0;
font-size: 1.2em;
}
cite{
font-style: italic;
font-size: 0.9em;
}
a: link, a:visited{
color: #3333FF;
background-color: inherit;
text-decoration: underline;
}
a: hover, a: focus, a:active{
color: #3333FF;
background-color: inherit;
text-decoration: underline;
}
...
8. Raggrupate il più possibile caratteristiche comuni per evitare di duplicare codice, utilizzando l’eredità in cascata tra selettori (con parsimonia)
   Ad esempio questo è un esempio di come a mio avviso non vanno fatte le cose:
   
...
#content ul li{
font-family: Verdana, Arial, sans-serif;
line-height: 1.5em;
font-size: 1.1em;
line-height: 1.5em;
margin: 0.5em 0;
list-style-type: square;
}
#content ol li{
font-family: Verdana, Arial, sans-serif;
line-height: 1.5em;
font-size: 1.1em;
line-height: 1.5em;
margin: 0.5em 0;
}
...

   Scriverei piuttosto così:
   
...
#content ul li, #content ol li{
font-family: Verdana, Arial, sans-serif;
line-height: 1.5em;
font-size: 1.1em; line-height: 1.5em;
margin: 0.5em 0;
}
#content ul li{
list-style-type: square;
}
...

9. Utilizzate una riga di commento per separare le varie sezioni di un css, non costano nulla al momento, ma possono tornare davvero molto utili quando dopo diverso tempo bisogna rimetterci mano.
10. Se dovete modificare pesantemente un foglio di stile creato precedentemente da altri, e lo trovate assolutamente complicato, l’ultimo consiglio, ma non per questo meno importante è il solito: “CTRL+A” e “Canc”. Ripartire da capo a volte è la soluzione migliore ;D

Questi sono semplici consigli, che ho imparato a mettere in pratica solo con tanti, ma tanti, fogli di stile sotto mano. Provate e sperimentate: solo sbagliando si impara, e magari la prossima volta mi scrivete voi altre best practice!

Ma perchè CSS3?
Vi sono alcune importanti novità che potrebbero risolvere molte noie intrinseche dei fogli di stile, vedasi compatibilità tra browser, necessità di definire più immagini di sfondo contemporaneamente, ecc… e queste ritengo siano risposte più che esaurienti.

I moduli che saranno oggetto di cambiamento sono principalmente quelli riguardanti:

• gli sfondi, backgrounds
• i bordi, borders
• i colori, colors
• il box-model
• e altri moduli, come il multi-column layout

Vediamo le principali novità di ogni modulo.

Backgrounds
Per quanto riguarda gli sfondi, sarà finalmente possibile utilizzare più immagini di sfondo, indicando per la proprietà background-image gli URI separati da virgola, ad esempio
background-image: url(immagine1.gif), url(immagine2.gif), url(immagine3.gif);

Ovviamente le diverse caratteristiche di ognuna delle immagini sarà definita con la stessa tecnica (separazione tramite virgola), quindi:
background-position: left top, right bottom, 30px 200px;

Dove left top è la posizione di immagine1.gif, e così via.
Stessa cosa per la proprietà background (che è somma delle altre) e la singola background-repeat.
Ulteriori proprietà inserite nei CSS3 sono:
- background-size per definire le dimensioni dell’immagine di sfondo;
- background-origin per calcolare la posizione dell’immagine di sfondo in base a border, padding e content;
- background-clip che determina come si dispone l’immagine di sfondo, se in base a border, al padding o al content

Borders
Le novità sicuramente più stuzzicanti riguardano la proprietà border.
A quanto pare sarà data la possibilità di arrotondare i bordi attraverso le proprietà border-radius. L’arrotondamento coinvelgerà anche lo sfondo del box, anche in assenza di un bordo (border: none).
Sarà inoltre introdotta la possibilità di definire un’immagine da utilizzare per i bordi attraverso la proprietà border-image. L’immagine così potrà quindi essere suddivisa in nove parti:
quattro porzioni per gli angoli, quattro porzioni per i quattro lati (superiore, inferiore, sinistro e destro) e per un eventuale immagine di sfondo.
Tutto ciò semplificherà di molto il lavoro del web designer, che attualmente si deve scontrare o con un layout tabellare o con la gestione di div supplementari, puramente utilizzati per questioni di puro layout, e senza una vera e propria semantica.
Attraverso box-shadow sarà invece possile definire l’ombra di un box, specificando offset orizzontale, verticale e il raggio di sfocatura.
box-shadow: 5px 5px 10px #CCCCCC;
/*la prima lunghezza indica l'offset orizzontale dell'ombra, la seconda l'offset verticale, la terza il raggio della sfumatura, in ultimo il colore dell'ombra*/

Colors
Per quanto riguarda i colori, i Css3 introdurranno gli spazi di colore:

• HLS (Hue, Luminosity, Saturation)
• HLSA, che aggiunge il canale alpha per definire l’opacità del colore

A titolo d’esempio
background-color: hsla(0,100%,50%,0.2) /* indica colore rosso, al 20% di opacità*/

Box-model
Il box-model è sempre stato un problema per voi?
Grazie alla nuova proprietà box-sizing, le cose si semplificheranno, e di molto.
Di default, questa proprietà calcola la grandezza del box, come per i CSS 2.1 aggiungendo a width e height, la dimensione dei bordi, e il padding. Con la seguente dichiarazione però:
box-sizing: border-box

il browser visualizzerà il box con la width e height, specificate, andando a inserire all’interno di queste dimensioni i bordi e i padding!

Uno tra i selettori maggiormenti utili e fondamentali per lo sviluppo di layout complessi è float: a quanto pare i CSS di terzo livello introdurranno nuovi valori possibili per questa proprietà.
I valori top e bottom per i testi scritti in verticale (come ad esempio i testi giapponesi) si comporteranno come left e right. I valori inside e outside corrisponderanno invece a left e right per i media non impaginati (anche lo schermo quindi); per la stampa invece inside equivarrà a left nella pagina destra e a right nella pagina sinistra, mentre outside corrisponderà a right nella pagina destra e a left per quella sinistra.
Infine start per indicare il left/top nei sistemi di scrittura da sinistra a destra oppure il right/bottom per le scritture da destra a sinistra.
Ovviamente tutti questi valori saranno associati direttamente anche alla proprietà clear (proprietà che ristabilisce il flusso normale dei box inseriti). A clear si aggiungerà anche il valore clear-after, che agendo sul bordo inferiore, evitarà di utilizzare particolari accorgimenti per permettere al box contenitore di espandersi in altezza fino a contenere completamente i blocchi flottanti al suo interno.

Multi-columns layout
Al momento si tratta di un modulo a sè stante, e permetterà di definire in quante colonne si dispone il contenuto. Ciò sarà possibile o definendo la larghezza per ogni colonna, o semplicemente definendo il numero di colonne.
Al momento queste proprietà sono supportate da Safari 3 e Mozilla

Sembra che i tempi per l’effettiva applicazione di queste proposte siano ancora lunghi, visto che dal W3C non sono ancora arrivate delle specifiche complete e definitive, e soprattutto, la strada per la compatibilità multi-browser, è ancora tutta in salita.