{"id":8767,"date":"2011-06-27T10:50:54","date_gmt":"2011-06-27T08:50:54","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=8767"},"modified":"2023-02-27T14:48:57","modified_gmt":"2023-02-27T14:48:57","slug":"dalla-proposta-grafica-al-css-come-affrontare-il-layout","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-come-affrontare-il-layout\/","title":{"rendered":"Dalla proposta grafica al CSS – Come affrontare il layout"},"content":{"rendered":"

\"\"Ritorniamo a parlare di conversione di una proposta grafica<\/a> in una pagina HTML + CSS funzionale. Di tempo ne \u00e8 passato, in questo anno tanti strumenti sono cambiati e sono emersi diversi modi di affrontare il flusso di lavoro per ottenere risultati differenti<\/a>. 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.<\/p>\n

Nelle precedenti puntate abbiamo definito parte degli strumenti a nostra disposizione per lavorare con Photoshop<\/a>, come organizzare l’esportazione dei file, come determinare la prima struttura dall’HTML<\/a> (su questo sarebbe oppurtuno ritornare visti gli attuali sviluppi di html5), come “tradurre” gli stili di Photoshop<\/a> in uno strumento flessibile come i CSS, nella fattispecie l’ultima specifica CSS3.<\/p>\n

Ora, al di l\u00e0 del dimensionamento di testi, colori, valutazione dei margini (abbiamo gi\u00e0 visto come misurare velocemente su photoshop e riportare le misure nella pagina), export delle immagini, dobbiamo posizionare tutti gli elementi HTML <\/strong>creati in modo da ricreare la struttura <\/strong>delineata dal grafico, ovvero dobbiamo definire il layout<\/strong>, la struttura della pagina che stiamo creando.<\/p>\n

Solitmente i layout da definire non sono infiniti<\/strong>. Una buona progettazione porta, a seconda della complessit\u00e0 del sito, ad un numero fisso di layout <\/strong>con alcuni layout derivati. Dall’esperienza che ho avuto, questo primo passaggio \u00e8 quello pi\u00f9 traumatico per chi si appresta ad affrontare per la prima volta il posizionamento tramite CSS<\/a>. Si tratta di capire che strumenti si hanno a disposizione per organizzare diversi blocchi HTML in modo flessibile <\/strong>nella propria pagina.<\/p>\n

POSIZIONAMENTO<\/h2>\n

Sono tante le regole di posizionamento<\/strong> e ne stanno emergendo di molto pi\u00f9 avanzate <\/strong> grazie all’implementazione dei draft CSS3<\/strong> da parte dei produttori. Non entrer\u00f2 nello specifico dell’argomento perch\u00e8 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\u00e0 di organizzazione dei contenuti, in modo che si possa approfondire l’argomento:<\/p>\n