Tag Archive for 'Cascading Style Sheets'

Framework 960gs – Guida di base.

Publicato in data 04.01.2010 in Cascading Style Sheets and HTML. 1 Comment Tags: , , , , , , , .

Uno strumento che utilizzo molto spesso per lo sviluppo della parte grafica di applicazioni web è 960gs. Oggi vorrei aiutare chi, alle prime armi con lo sviluppo web, vuole cimentarsi nell’utilizzo di strumenti avanzati per lavori di un certo livello (e direi anche qualità!). Premetto che per leggere questa guida è necessario conoscere le basi di HTML e CSS (non è complicato!).

Sommario

Cos’è 960gs.

È un framework CSS (Cascading Style Sheet) per la creazione di layout grafici mescolando opportunamente HTML e CSS, gs è l’acronimo di Grid System, ciò indica molto chiaramente che questo strumento permette la costruzione di pagine HTML utilizzando delle griglie. Voi potreste dire: Ma non si potrebbero usare direttamente delle tabelle HTML? ed io potrei rispondere Sbagliatissimo!. Mai sentito parlare di accessiblità? Di siti conformi allo standard W3C? Nello sviluppo web, queste informazioni dovrebbero essere la bibbia dello sviluppatore! Usare le tabelle è un errore che il mio professore di elettronica avrebbe segnato con la penna blu, queste vanno usate quando dobbiamo stampare realmente dei dati di tipo tabellare, in altri casi è necessario attenersi allo standard ed utilizzare un layout fluido e leggero. Quindi si potrebbe dire che:

960gs è un framework che si contrappone all’uso sbagliato delle tabelle ed emula queste utilizzando div, con cui è possibile ottenere qualità delle pagine e conformità allo standard.

Cosa occorre per utilizzare il framework?

Per poter utilizzare il framework è necessario avere i file .css di 960gs che puoi scaricare direttamente qui:

Il file contiene una cartella, css ed al suo interno abbiamo:

  • 960.css,960_24_col.css,reset.css,text.css: file contenenti tutti gli elementi css necessari per poter utilizzare il framework, i file sono "compressi", cioè non esistono tabulazioni, spazi o a capo al loro interno (quindi è molto difficile poterli leggere).
  • uncompressed: contiene una versione decompressa di tutti i file del framework (per lo sviluppatore "voglioso di leggere", scherzi a parte sarebbe anche il caso di leggere questi file per comprendere meglio come il framework funziona).

Progettare un layout

La prima operazione è molto semplice e divertente, utilizzare fantasia ed immaginazione per disegnare il layout grafico che si vuole ottenere (una matita ed una penna sarebbero ottimi strumenti per questa operazione!).
Layout demo per 960gs

Configurare una pagina per utilizzare il framework.

Ora è necessario configurare la pagina per poter utilizzare il framework, copiare la cartella estratta dal file precedentemente scaricato (ricordate il pacchetto .zip?) all’interno del progetto web con cui si sta lavorando. Successivamente aprire la pagina web e posizionarsi sul tag <head>:

    
    <link href="css/960.css" rel="stylesheet" type="text/css" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/text.css" rel="stylesheet" type="text/css" />

Ora il framework è pronto per essere utilizzato!

Disegnare il layout nella pagina.

Si passa ora all’utilizzo vero e proprio del framework, attraverso il quale porteremo il nostro schizzo fatto su carta direttamente sulla pagina web utilizzando il framework 960gs. Di seguito il codice da inserire all’interno del tag <body> della pagina, per maggiore chiarezza ho applicato l’id presente nella figura dello schizzo nei contenitori:

<body>
    <div class="container_12">
         <div id="Header" class="grid_12 alpha omega">
         </div>
         <div class="clear"></div>
         <div id="Menu" class="grid_3 alpha">
         </div>
         <div id="Content" class="grid_9 omega">
         </div>
         <div class="clear"></div>
         <div id="Footer" class="grid_12 alpha omega">
         </div>
    </div>
</body>

Di seguito la spiegazione di ogni class utilizzato per costruire il layout:

container_12
specifica il tipo di contenitore da utilizzare, il numero impostato come suffisso indica le colonne che sarà possibile configurare all’interno della griglia, quindi container_12 indica che sto costruendo un layout a 12 colonne, ma è possibile utilizzarne altri quali: container_16, container_24.
grid_?
specifica il numero di colonne che il contenitore simulerà, anche qui il numero impostato come suffisso indica quante colonne occupare, avendo utilizzato nell’esempio un layout a 12 colonne il massimo che potremo impostare come class sarà "grid_12"
alpha
specifica che la grid inserita è la prima della riga corrente(inserire questo tag è importante al fine di poter rispettare i margini del layout 960).
omega
specifica che la grid inserita è l’ultima della riga corrente (anche qui vale la stessa regola di alpha).
clear
ogni qual volta, utilizzando div, completiamo il numero di colonne disponibili per una riga, va inserito un div con class=”clear” per andare alla riga successiva.

Utilizzare 960gs non è per niente difficile, basta conoscere la logica applicata alle classi css per poter capire come disegnare velocemente un layout fluido e di facile gestione. Enjoy!

Creare tabelle con div utilizzando i CSS

Publicato in data 25.11.2009 in Cascading Style Sheets and HTML. 1 Comment Tags: , , , , , .

Proprio oggi cercavo una piccola guida da mostrare ad un mio collega su come creare layout grafici simili a tabelle ma con il solo utilizzo di elementi div. La persona a cui dovevo far leggere qualcosina su questo argomento non se la cava con l’inglese e pur troppo in rete la maggior parte delle informazioni relative a questo argomento sono proprio in questa lingua. Di seguito vorrei spiegare molto semplicemente (spero di farcela) come ottenere un layout di questo tipo. L’esempio che andrò a descrivere permette la creazione di una tabella a 4 colonne.
Prima di tutto dobbiamo progettare una serie di stili css che ci permettano di ottenere graficamente un aspetto tabellare per gli elementi divisori. Salviamo un nuovo foglio di stile con questo codice:

.tabella,
.riga,
.colonna { margin: 0; padding: 0; border: 0}
.tabella { display: table; width: 100%}
.riga { clear: both; display: block;
          display: table-row; width: 100%}
.colonna { float: left; width: 25%; display: table-cell}

Penso sia ovvio presuppore che per poter capire bene cosa sia scritto in queste poche righe è necessario avere una conoscenza di base relativa ai CSS (Cascading Style Sheets). Per poter ottenere un effetto tabella ho semplicemente costruito degli stili in cui ho fatto particolare attenzione all’impostazione della proprieta display. Questa, oltre agli attributi che generalmente siamo abituati ad utilizzare ne contiene anche altri molto particolari:

  • table: permette di visualizzare un elemento come un contenitore di tipo tabella.
  • table-row: permette di visualizzare un elemento
    come un contenitore di tipo riga (quindi, per logica, và inserito all’interno di un controllo che emuli una tabella)
  • table-cell: permette di visualizzare un elemento come contenitore di tipo cella (quindi, per logica anche qui, và inserito all’interno di un controllo che emuli una riga)

Vorrei ricordare che sono presenti anche altri attributi, ma ho pensato di elencare quelli più interessanti e che servono per raggiungere l’obiettivo preposto. Ora non ci rimane altro che richiamare il foglio css che abbiamo progettato all’interno della nostra pagina e qui disegnare una tabella a 4 colonne utilizzando semplicemente div, di seguito l’esempio in base al css:





Colonna 1


Colonna 2


Colonna 3


Colonna 4

Visualizzando un anteprima sul browser noterete come siano state create perfettamente 4 colonne con larghezza uguale (espressa in percentuale in base alla risoluzione dello schermo). Questo esempio vuole essere un piccolo aiuto perchè i layout realizzabili con questa tecnica sono infiniti! Pensiamo allo sviluppo di pagine che prevedono la compilazione di un numero elevato di campi, la scelta nel 99,9% dei casi ricade sempre sull’utilizzo delle tabelle, il chè ovviamente non è una buona idea se lo standard a cui vogliamo attenerci e W3C! Progettare un layout a div in questo modo rappresenta un’ottima soluzione, ma esistono anche altre strade in cui è richiesto un pò di studio inizialmente, ma successivamente si rivelano una comodità immensa!