CSS Tips & Tricks:

Differenza tra id e class
E' possibile assegnare caratteristiche grafiche tramite i CSS sia usando l'id di un elemento che la proprietà class.
Ricordatevi che per assegnare ad un elemento con id dovrete nel CSS indicare le proprietà anteponendo il carattere #nome_stile, mentre per assegnare una proprietà attraverso la classe dovrete anteporre il carattere .nome_stile.
La differenza tra i due ? In genere si usa assegnare uno stile mediante id se è unico e non si ripete, mentre la class quando lo stile va riutilizzato.

L'importanza del posizionamento degli elementi
E' possibile gestire il posizionamento di ogni elemento mediante la proprietà position. Di default ogni elemento ha come valore position: static. Questo significa che l'elemento si posiziona rispetto alla pagina esattamente dove è inserito nel codice.

position: relative
In questo caso è possibile assegnare i valori top, bottom, left, right per posizionare l'elemento relativamente alla posizione corrente.

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

sposterete l'elemento div_1 a 20px dall'alto e a -40px a sinistra rispetto alla posizione corrente.


position: absolute
In questo modo praticamente togliete l'elemento dal documento e lo posizionate esattamente dove indicato rispetto alla finestra del browser.

Il seguente elemento posiziona un elemento nell'angolo in alto a sinistra.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

position: relative + position: absolute
Questa combinazione può essere usata per posizionare esattamente un elemento in una data posizione all'interno di un altro elemento.

#div-1 {
 background: green;
 position:relative;
}
#div-1a {
 background: red;
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

HTML

<div id="div-1">
   <p>lore ipsum</p>
   <div id="div-1a">
     <p>lore ipsum</p>
   </div>
</div>

position: fixed
In questo modo è possibile posizionare un elemento esattamente dove indicato (come absolute) con la differenza che in caso di scroll della pagina l'elemento rimarrà comunque visibile sempre nella posizione indicata

#div-1 {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}

Testare il vostro codice direttamente online
Se volete testare la combinazione di codice HTML e CSS, ma anche javascript compresi vari framework, questo è il link dove poter effettuare le vostre prove.

http://jsfiddle.net/

Su come utilizzarlo ne parleremo approfonditamente nelle prossime lezioni, comunque cominciate a divertirvi.

Ciao

WebDesign Class: dove comincia il design?

Ciao a tutti e bentornato a chi ha potuto godersi un periodo di vacanza.
Riprenderemo da questa settimana le nostre lezioni ed in particolare approfondiremo i CSS cercando di capire meglio quanto uno o più buoni fogli di stile ci possono aiutare a rendere il nostro lavoro più semplice, veloce ed efficace.

Ritengo innanzitutto importante la necessità di dover adottare una metodologia che ci aiuti a sviluppare il design dei siti che andremo a creare. In questo senso ne esistono molte, tra l'altro tutte valide (o almeno quasi), l'importante è che innanzitutto soddisfi le vostre necessità e che sia facilmente implementabile anche su diverse piattaforme.

Nel nostro corso abbiamo adottato 960 grid (http://960.gs), ma potremo analizzarne altre in futuro e verificarne magari le differenze sostanziali, ma ripeto, l'importante è adottare un sistema di lavoro innanzitutto.

Il nostro punto di partenza in questa fase rimane comunque lo sviluppo di siti a dimensione fissa (in larghezza intendo) che soddisfino la compatibilità con quanti più device sul quale verrà visualizzato. Per questo motivo il nostro limite in pixel in larghezza sarà di 1024px che dovendo considerare margini ed eventuali barre di scorrimento verticale per convenzione si parla di 960px come area di visualizzazione. Questo ci garantisce con un certo margine di sicurezza di poter visualizzare il nostro sito su quasi tutti i device o per lo meno sulla maggior parte di essi. Non parliamo in questo caso di smartphone che hanno una risoluzione minore, per i quali affronteremo in futuro le metodologie di "responsive" design.

Da dove partire allora?
Innanzitutto il design di un sito parte dalla creatività. La capacità cioè di mettere insieme elementi grafici e testo disponendo il tutto in un layout che faciliti la navigazione, la lettura e la fruizione dei contenuti.
Questa sicuramente è la fase più delicata e forse anche la più importante. Un buon progetto di webdesign parte proprio da qui cercando di valutare alcuni aspetti:

• la navigazione deve essere quanto più immediata e non deve richiedere all'utente la necessità di dover individuare come accedere ai contenuti: il vostro sito potrà essere bellissimo sotto il punto di vista grafico o dell'appeal ma se l'utente non riesce a interpretare le dinamiche di navigazione entro 5 sec. sarà un utente perso; ricordate che l'utente medio deve essere accompagnato;
• la linearità e la semplicità sono sempre un'arma vincente; un sito troppo ricco di elementi a volte risulta a primo impatto di difficile lettura;
• accompagnate i contenuti con immagini: le immagini e i video facilitano l'interpretazione e la lettura se accompagnati da titoli esplicativi e da testi quanto più sintetici e chiari;
• non siate pedanti: inutile ripetere affermazioni, frasi o anche slogan. Risultereste noiosi.

A parte queste considerazioni elementari cominciate a disegnare il vostro sito su un foglio di carta bianco; sì tornate ad usare carta e penna (matita meglio così potete cancellare). E' ancora il metodo più semplice e veloce per farsi un'idea.
Vi suggerisco di adottare questo piccolo trucco: usate un foglio A4 e disegnatelo sia in verticale che in orizzontale. In orizzontale soprattutto. In questo sensto tracciate due margini a circa 3-4 cm in verticale sia a destra che a sinistra.
Ricordate che i monitor rispecchiano come dimensione un foglio A4 orizzontale (più o meno ma serve per darvi un'idea). Questo metodo può essere utile anche per verificare quali sono gli spazi vuoti che l'utente medio vedrà sul suo monitor.

In questa fase sentitevi liberi, non cercate di limitare la vostra creatività in griglie, colonne o altro. Affrontate gli aspetti tecnici in una seconda fase, trovando magari dei compromessi tra creatività e limitazioni tecniche o concettuali.

Alla prossima !!!