Il libro “Pro HTML5 and CSS3 Design Patterns” presenta ai lettori, in maniera aggiornata e convincente, le strabilianti capacità dei nuovi standard alla guida del Web. Per farlo, gli autori non si affidano a una semplice trattazione teorica dei vari aspetti, ma prediligono gli esempi pratici e concreti. Le 500 pagine del testo si tramutano così in oltre 350 soluzioni che il programmatore può utilizzare direttamente nel proprio codice, oppure personalizzare opportunamente.

I venti capitoli che compongono il libro separano infatti gli esempi di codice in aree logiche, che permettono l’uso del testo come manuale o come cookbook, da recuperare dalla libreria al momento del bisogno, aprire nella sezione di interesse e utilizzare immediatamente.

Il lettore ideale di questo testo deve conoscere i fondamenti di HTML e CSS, per i quali non sono disponibili grandi approfondimenti (capp. 1-3). La ricchezza di questa lettura risiede tuttavia nel passo successivo, poiché conoscere HTML non vuol dire utilizzarlo al meglio, ed è proprio ciò che questo libro permette di fare, riassumendo e raccogliendo le migliori best practices.

L’universo dei CSS è diviso dagli autori in sei modelli o “box models”: inline, inline-block, block, table, absolute, float. (capp.4-6). Di essi si analizzano nel dettaglio le modalità di posizionamento (capp.7-9) e ridimensionamento (capp.10-14). Si mostrano quindi le dodici tecniche utilizzate dai browser per incolonnare i contenuti in tabelle (capp. 15-16). Si chiarisce nella pratica come sia possibile implementare il cosiddetto fluid layout e come utilizzare al meglio l’innovativo Event Styling JavaScript Framework per l’applicazione dinamica e interattiva di stili CSS per i propri documenti (cap.17). Ogni pattern è presentato in una tabella riassuntiva come un problema da risolvere: quesito, soluzione, codice schematico del pattern, luogo di utilizzo comune, vantaggi, limitazioni, esempi d’uso e categoria.

Il capitolo 1, “Design Pattern: scrivere CSS facilmente!”, è un’introduzione alla struttura del testo. Con queste prime 30 pagine o poco più, gli autori spiegano le ragioni che li hanno condotti all’approccio scelto, e mettono il lettore di fronte ai primi esempi di design pattern, vero cuore pulsante di tutto il manuale. Si parla quindi di fogli di stile, sintassi dei file CSS, delle proprietà CSS più importanti, dell’ordinamento a cascata delle regole CSS, di media query, unità di misura, transizioni e animazioni 2D, concludendo con l’efficace strumento della normalizzazione.

Il capitolo 2, “I Design Pattern HTML”, affronta specularmente il linguaggio HTML, in particolare elaborandone gli elementi direttamente collegati ai CSS. Si studia quindi la struttura di un file HTML, come e perché usare XHTML e DOCTYPE, come scrivere l’header di una pagina, come caricare fogli di stile particolari per gestire i difetti di Internet Explorer. Si passa, quindi, ai singoli tag HTML, dai blocchi strutturali (ol, ul, dl, table, div, article, section, nav) ai blocchi terminali (h1..h6, p, blockquote, dt, address, caption), da quelli multifunzione (div, li, dd, td, th, form, noscript) ai blocchi inline (span, em, strong, a, cite, code, kbd, samp, var, br, bdo, object, img, input, textarea, select, button). La parte conclusiva del capitolo è dedicata a classi, attributo ID e al ruolo degli spazi nel codice HTML.

Il capitolo 3, “Selettori CSS ed ereditarietà”, approfondisce il concetto di selettore in tutte le sue forme, presentando 13 diversi design pattern correlati. Si spiega come selezionare nella pagina elementi per ID, per classe e per tag, in base alla loro posizione e ordine, per specifici attributi. Proseguendo, vengono presentati esempi pratici per selezionare solo il primo carattere o la prima riga di un blocco, per conferire uno stile a un collegamento ipertestuale, per mischiare più regole di stile a un unico elemento tramite le sottoclassi. Infine, viene illustrata l’ereditarietà come sistema per applicare gli stili agli elementi, lavorando sui suoi antenati.

Il capitolo 4, “I box model”, introduce il concetto principale del libro, ossia il meccanismo a scatole su cui si basa CSS. In esso si distinguono quindi i componenti principali: contenitore esterno, margine, bordo, padding, contenitore interno. Dopo aver presentato i tipi diversi di scatole renderizzabili da ogni browser moderno, il capitolo mostra come visualizzarli correttamente sulla pagina e come funzionano esattamente.

Il capitolo 5, “Le estensioni del box model”, amplia quanto detto finora sui modelli a blocchi, mostrando come sia possibile ridimensionarli e adattarli alle dimensioni del contenitore o del contenuto. Poiché ognuno dei modelli si comporta in modo diverso, gli esempi illustrano in ogni caso come agire sulle proprietà height e width.

Il capitolo 6, “Le proprietà del box model”, conclude la trattazione dei modelli a blocchi con esempi reali di come agire sulle loro proprietà secondarie, quali margin, border, padding, background, overflow, visibility, page-break.

Il capitolo 7, “Il posizionamento dei modelli”, sposta l’attenzione dei lettori sulle procedure di impaginazione, elencando ed esaminando sei modelli diversi di posizionamento: positioned (dove si scopre l’uso della proprietà position e i suoi valori static, absolute, fixed, relative), closest positioned ancestor (per rendere un elemento punto di riferimento per i suoi discendenti), stacking context (per controllare la sovrapposizione), atomic (per fissare il contenuto nel contenitore e renderne coerente l’output), float and clear (per rendere un elemento flottante e accostato a un altro, fuori dal normale flusso), relative float (analogo al precedente, ma provvisto di posizionamento).

Il capitolo 8, “Posizionamento: indentazione, offset, allineamento”, prosegue la trattazione del capitolo 7 e affronta le tematiche più avanzate dell’impaginazione. Vengono presentati allo scopo esempi di elementi indentati, varie versioni di offset e di allineamento.

Il capitolo 9, “Posizionamento: tecniche avanzate”, combina quanto imparato nei due capitoli precedenti e conclude l’argomento, grazie a dodici nuovi design pattern: left/right/center/top/bottom/middle aligned, left/right/center/top/bottom/middle offset.

Il capitolo 10, “Applicare gli stili al testo”, inizia la trattazione degli elementi testuali: come utilizzare i font, come eseguire evidenziazioni del testo, come applicare decorazioni e ombre, come utilizzare testo al posto di immagini, come convertire i font in immagini vettoriali (formato VML), come utilizzare l’attributo @font-face per incorporare font nei siti CSS3, come nascondere del testo senza far uso di markup e come renderlo visibile ai soli utenti videolesi.

Il capitolo 11, “I contenuti vuoti”, continua la trattazione del precedente e illustra come aggiungere spaziature orizzontali e verticali attorno agli elementi inline (testo, immagini, oggetti, controlli). Il capitolo contiene dieci pattern differenti, che vanno dalla spaziatura semplice (effettuata usando le proprietà margin, padding, letter-spacing, word-spacing, line-height, text-indent, text-align:justify), alla creazione di un elemento a blocco (proprietà display:block), alla gestione del caporiga (con nowrap), alla conservazione degli spazi tra le parole (white-space:pre), all’identificazione di codice (tramite code), all’enfatizzazione di un paragrafo (tramite padding), al piuttosto inelegante metodo di forzare la spaziatura fra frasi (usado un elemento span vuoto opportunamente configurato), all’inserimento di decorazioni (immagini, bordi, elementi colorati) dentro le frasi, all’interruzione fra una riga e l’altra, all’ormai vetusto Horizontal Rule.

Il capitolo 12, “Allineare il contenuto”, chiude la trattazione degli elementi testuali e si occupa di indentazioni (proprietà text-indent con valori positivi e negativi), allineamenti orizzontali (text-align) e verticali (vertical-align), testo in apice e in pedice (uso combinato di vertical-align e font-size), allineamenti annidati ed esempi più avanzati (per rappresentare funzioni matematiche).

Il capitolo 13, “I blocchi”, si concentra sull’applicazione di stili ai blocchi presenti nella pagina, spiegando per prima cosa quanto essi siano importanti per definire la struttura di un documento, sia a livello strutturale che grafico. Il capitolo tratta esempi pratici per la gestione del tag section, delle liste (ordinate e non), dei bullet, dei blocchi che convivono sulla stessa linea, dei margini verticali, dei blocchi che si innestano in altri (tramite la regola display:run-in), ancora del separatore orizzontale, di come aumentare o ridurre lo spazio fra blocchi, di come estrarli dal normale flusso di layout e porli sulla sinistra o sulla destra della pagina.

Il capitolo 14, “Le immagini”, offre soluzioni concrete nell’inserimento di immagini nelle pagine web, partendo dal tag img e trattando i vari formati supportati dai browser moderni. Gli undici pattern che seguono forniscono un solido aiuto per giocare con le immagini stesse, aggiungendo mappature e collegamenti, gestendo sfumature, trasparenze, sovrapposizioni di testo a immagini e sfondi, usare gli sprite per risparmiare banda, creare ombre su un’immagine senza modificare l’originale, arrotondarne i bordi. Il capitolo si conclude con un esempio comprensivo di tutte le tecniche apprese.

La trattazione delle tabelle inizia nel capitolo 15, che analizza come stilizzare al meglio le rappresentazioni di dati incolonnati. I layout negli esempi riguardano la creazione di header e footer, gruppi di righe e colonne, l’applicazione di regole a specifiche celle, righe o gruppi di righe, la gestione dei bordi (quelli della tabella e quelli delle celle), l’occultamento e la cancellazione di celle, righe e colonne, l’allineamento verticale dei contenuti in una cella, la colorazione alternata delle righe, la costruzione di tabelle adatte agli utenti non vedenti, la trasformazione di ogni elemento HTML in tabella, riga o cella. Il capitolo si conclude con la creazione di tabelle secondo i quattro tipi più volte ribaditi nel libro: shrinkwrapped, sized, stretched e fixed.

Il capitolo 16, “Layout delle colonne nelle tabelle”, conclude il precedente, focalizzando l’attenzione su questo componente essenziale. Le colonne infatti, in mancanza di regole definite, vengono generate dal browser con una larghezza automatica. E’ tuttavia possibile intervenire nell’operazione di visualizzazione, agendo in vari modi sulla proprietà width, anche in relazione alle caratteristiche della tabella genitore. La larghezza può essere quindi fissata, resa proporzionale ad altre colonne, adattata al contenuto, resa uguale a quella di un’altra colonna, sottodimensionata o sovradimensionata a piacere. Molto utile per questo capitolo, la sovrapposizione di un righello (a pixel) nelle figure delle tabelle.

Il capitolo 17, intitolato “Impaginazioni”, si interessa di fluid layout, inteso come modalità di visualizzazione adattativa al dispositivo utilizzato, a livello di font, larghezze e fattori di zoom. Dopo averne descritto i caratteri fondamentali, il capitolo affronta le tecniche avanzate di FL come il metodo Outside-in, le sezioni flottanti, la riga divisoria flottante, gli elementi flottanti contrapposti in un contenitore, l’uso di JavaScript per aggiungere classi CSS agli elementi della pagina, la creazione di sezioni a scomparsa, menù a linguette, menù a cascata, pulsanti, collegamenti, la distribuzione dei contenuti su più colonne.

Il capitolo 18 è interamente rivolto ad esempi pratici per la formattazione dei capolettera. Gli otto pattern proposti hanno lo scopo di generare capolettera allineati, formattare senza markup usando il selettore :first-letter, allineare tutto il testo sul lato del capolettera tramite l’indentazione, abbellire i capolettera con elementi grafici, far scorrere il flusso del paragrafo attorno al capolettera (sia con un capolettera testuale che con un’immagine equivalente).

Nel capitolo 19, “I richiami e le citazioni”, si può studiare l’impaginazione di didascalie entro il flusso testuale del paragrafo (a sinistra, al centro, a destra) e al di fuori di esso (il layout cosiddetto marginale, ossia dove il testo fluisce con un’indentazione stabile rispetto all’elemento in questione). Successivamente si passa alle citazioni, che possono essere sia elementi inline che elementi block, e che di solito vanno rappresentate centrate nella pagina e ben spaziate rispetto al testo che precede e quello che segue.

Il capitolo 20, “Gli allarmi”, distingue fra due tipi di segnalazioni per l’utente: quelle dinamiche, generate a seguito dell’interazione con l’utente, e quelle statiche, costruite con tag HTML perennemente visibili nel documento. Al primo tipo appartengono gli allarmi con codice JavaScript (funzione alert()), gli avvisi con tooltip contestuale e gli elementi pop-up. Al secondo appartengono invece quelli a blocco, quelli inline, quelli con margine, quelli che fanno uso di immagini, quelli costituiti da più formattazioni, ma resi nella stessa linea, quelli flottanti. Per concludere, si trattano anche gli allarmi presenti nella validazione dei form.

Gli autori sono accomunati da una notevole esperienza nelle scienze informatiche. Michael Bowers è programmatore da 22 anni e, oltre a coltivare nel tempo libero con successo la passione della musica, lavora come ingegnere informatico e architetto software. E’ lui l’autore nel 2007 del testo Apress “Pro CSS and HTML Design Patterns”, che diede inizio alla serie.

Dionysios Synodinos è capoprogetto presso C4Media e consulente freelance, specializzato in sicurezza, applicazioni web, servizi e applicazioni mobili; scrive inoltre come editor per la rivista InfoQ.

Victor Summer è ingegnere software per la società LookSmart; condivide con Bowers gli inizi della carriera come autodidatta e oggi spazia dall’amministrazione database al web design.