Ritorniamo a parlare di conversione di una proposta grafica in una pagina HTML + CSS funzionale. Di tempo ne è passato, in questo anno tanti strumenti sono cambiati e sono emersi diversi modi di affrontare il flusso di lavoro per ottenere risultati differenti. Sono tuttavia convinto che il metodo di approccio che abbiamo visto nei post precedenti sia ancora un buon inizio per prendere confidenza con gli strumenti.
Nelle precedenti puntate abbiamo definito parte degli strumenti a nostra disposizione per lavorare con Photoshop, come organizzare l’esportazione dei file, come determinare la prima struttura dall’HTML (su questo sarebbe oppurtuno ritornare visti gli attuali sviluppi di html5), come “tradurre” gli stili di Photoshop in uno strumento flessibile come i CSS, nella fattispecie l’ultima specifica CSS3.
Ora, al di là del dimensionamento di testi, colori, valutazione dei margini (abbiamo già visto come misurare velocemente su photoshop e riportare le misure nella pagina), export delle immagini, dobbiamo posizionare tutti gli elementi HTML creati in modo da ricreare la struttura delineata dal grafico, ovvero dobbiamo definire il layout, la struttura della pagina che stiamo creando.
Solitmente i layout da definire non sono infiniti. Una buona progettazione porta, a seconda della complessità del sito, ad un numero fisso di layout con alcuni layout derivati. Dall’esperienza che ho avuto, questo primo passaggio è quello più traumatico per chi si appresta ad affrontare per la prima volta il posizionamento tramite CSS. Si tratta di capire che strumenti si hanno a disposizione per organizzare diversi blocchi HTML in modo flessibile nella propria pagina.
POSIZIONAMENTO
Sono tante le regole di posizionamento e ne stanno emergendo di molto più avanzate grazie all’implementazione dei draft CSS3 da parte dei produttori. Non entrerò nello specifico dell’argomento perchè molto vasto, ma voglio solamente dare qualche spunto e delle parole chiave per coloro che, smarriti di fronte al problema, non sanno da che parte cominciare. A seguire riporto un elenco di alcune risorse che spiegano in modo semplice le possibilità di organizzazione dei contenuti, in modo che si possa approfondire l’argomento:
- un brief sulle possibilità
- le immancabili guide di html.it sui float e sui posizionamenti
- un introduzione sull’argomento float di a list apart
- una serie di layout css preconfezionati per valutare come qualcuno ha già risolto il problema
Infine riporto un articolo su quello che probabilmente sarà il futuro del posizionamento nei moderni browser.
POSIZIONAMENTO TRAMITE FLOAT
Per affrontare il primo problema pratico di fronte alla nostra pagina di esempio, vediamo velocemente come funziona la proprietà float. Questa proprietà è la più ostica da capire e da utilizzare, ma una volta compresa ci accompagnerà nella risoluzione di molti problemi. Essa semplicemente permette di far transitare su uno dei lati dell’oggetto a cui è applicata il contenuto che segue nella pagina HTML.
L’affiancamento può avvenire sia a destra che a sinistra dell’elemento, ma la cosa più importante è che il contenuto che viene spostato (a meno che si tratti di contenuto con applicato una proprietà float a sua volta) si comporta come se lo spostamento che avrebbero dato i suoi margini non fossero stati intaccati dalla presenza del contenuto che determina il float. Un esempio visivo per chiarire, applicato al nostro caso specifico.
Come vediamo il margine si sovrappone all’immagine e non parte dal termine dell’immagine ma da dove si sarebbe spostato se l’immagine non ci fosse stata. In questo caso il vantaggio è chiaro, anche dove l’immagine non occupa più spazio, il testo rimane distanziato ed allineato nella stessa maniera che nella prima parte.
Compreso questo potente meccanismo, la maggior parte delle configurazioni e layout di pagina è resa possibile. Infatti, senza entrare nel dettaglio, con il solo utilizzo di tecniche di questo genere possiamo posizionare tutti gli allineamenti presenti nella pagina.
Potete vedere l’esempio completo, il PSD e provare da soli a creare la struttura della pagina HTML.
Nella prossima puntata, terminata la strutturazione della pagina implementeremo un paio di animazioni CSS per dare un tocco di professionalità senza l’ausilio (o quasi) di Javascript.
