La maggior parte degli utenti non sopporta che il caricamento di una pagina richieda più di 20-25 secondi, soprattutto oggi che siamo nel bel mezzo della connessioni fatte con telefoni cellulari, e quindi in velocita pari al GPRS/EDGE, UMTS e dell’HSDPA. Infatti, se la vostra pagina viene caricata lentamente il visitatore potrebbe andarsene prima ancora di iniziare a visualizzare i contenuti del sito. È necessario quindi eseguire il collaudo del sito a varie velocità di connessione per verificare che i tempi di caricamento delle pagine non superino i 20 secondi evitando di perdere potenziali visitatori.

Come velocità di connessione base, per effettuare il collaudo delle vostre pagine, si può considerare una connessione EDGE(non citiamo il 28.8 Kbps perche ritenuto superato), tipica degli utenti che utilizzano vecchi cellulari o cmq vecchi modem (il vecchio 56 Kbps). Per poter effettuare un giusto collaudo delle nostre pagine dobbiamo sapere in che modo le pagine vengono inviate all’utente.

La prima volta che si visita un sito, sarà necessario caricare sia il file Html che ogni immagine cui fa riferimento il codice Html. Se successivamente si ritorna a visitare lo stesso sito, il browser preleva e analizza il file Html. Poi il browser controlla se le immagini specificate nel file Html sono già memorizzate nell’area cache del nostro computer ed è proprio questo il momento in cui l’utente ri ritrova faccia a faccia con i tempi di visualizzazione più lunghi.

Quindi pertestare le nostre pagine ci tocca andare a svuotare volta l’area cache del proprio browser. La velocità di visualizzazione delle pagine è maggiormente influenzata dal numero e dalle dimensioni delle immagini contenute nelle pagine web.

Riutilizzare le immagini e la grafica il più possibile all’interno del sito è una delle buone regole del web designer, poichè la maggior parte degli utentinon cambia le impostazioni del browser ed è quindi probabile che le immagini rimarranno nel disco fisso dell’utente per qualche tempo.

Ogni volta che l’utente torna a visitare il nostro sito, verrà utilizzata la copia locale delle immagini, evitando di prelevare nuovamente le immagini dal server web risultando cosi piacevole e veloce la navigazione.

Grazie a questi principi dei CSS potremo creare i nostri layout di pagina staccandoci definitivamente da quelle che sono le limitazioni che una tabella può dare.

Ho intenzione di affrontare la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.

La proprietà position

position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Sintassi:

<selettore> {position: <valore>;}

i valori che questo parametro può assumere sono 4: fixed, absolute, static, relative. Gli unici due al momento supportati dai vari browser sono solo due: absolute e relative. Parlerò, infatti, solo du questi due parametri.

• absolute – L’elemento, o meglio, il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell’elemento. Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
• relative - L’elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

La creazione di un livello tipo potrebbe essere questa:

#immagine{ position:absolute;
           top:50px; left:20px; z-index:1; }

In questo esempio, scopriamo una nuova proprietà: z-index. La proprietà z-index indica al browser la posizione sul piano azimutale, rispetto al resto della pagina. Cosa vuol dire: prendiamo due fogli di carta, su uno gli scriviamo testo, sull’altro immagine. Mettiamoli uno sull’altro: abbiamo definito lo z-index ovvero il “livello” superiore o inferiore dell’immagine rispetto al testo. L’unico valore permesso per questa proprietà è un valore numerico piu alto sarà il valore piu sara in rilievo rispetto al resto della pagina. Se mettiamo un valore negativo per esempio -1 il box contenitore andrà a finie sotto lo sfondo! Difficilmente visibile!

E a proposito di visibilità ci sarebbe anche un’altra proprietà, appunto visibility. Dal nome stesso si capisce a cosa può servire, ovvero a rendere visibile o meno un oggetto( testo, immagini o altro) fino a che non si verifichi una determinata condizione. I valori possibili per quest’ultima proprietà sono due: hidden (nascosto) e visible (visibile).

Ci sono tre tipi di oggetti: blocco, in linea e rimpiazzati. In inglese rispettivamente block level, inline  level e replaced.

Oggetti di tipo blocco (block level)

Questi tipi di oggetto, sono gli elementi della pagina che anche visibilmente hanno le sembianze di un blocco, scatole, una sorta di rettangolo largho quanto il proprio contenitore.  Gli elementi blocco di una pagina web sono i tag <p>,<div>, <h1>, <h2>….<h6>,<blockquote>.

Attenzione: “Questo tipo di oggetti come impostazione predefinita sono seguiti da un a capo”.

Gli oggetti successivi agli elementi blocco andranno irrimediabilemnte sotto l’elemento blocco precendente anche se si tratta di altri elementi blocco. Per stravolgere questo tipo di impostazione esiste l’attributo float, ma ne parleremo in seguito.

Oggetti di tipo in linea (inline level)

Gli oggetti di tipo in linea non formano nuovi blocchi di contenuti, ma sono distribuiti, come suggerisce il nome, in più linee. Sono elementi in linea il testo senza tag, <a>, <span>, <strong>, <em>, <abbr>. Questo tipo di oggetti non viene seguito da un a capo predefinito.

Oggetti rimpiazzati (replaced)

Gli oggetti di questo tipo sono tutti quegli oggetti dei quali il browser(per esempio, Mozilla Firefox) dell’utente conosce a priori le dimensioni dell’oggetto. Un esempio di elemento rimpiazzato è una immagine. Infatti inserendo una immagine non è necessario specificare le dimensioni poiché il browser visualizzerà l’immagine nelle sue dimensioni originali.

Nell’html gli oggetti di questo tipo sono appunto <img>, <input>, <textarea>, <select>.

Nella prossima lezione vedremo come posizionare gli oggetti all’interno di una pagina

Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di descriverne solo le piu diffuse. Sono quelle che definiscono i seguenti aspetti:

• font-family - Il carattere da utilizzare
• font-size – Dimensione del carattere
• font-weight – Spessore o consistenza del carattere
• font-style – Stile del carattere
• line-height – Altezza di riga
• text-decoration – Decorazione del testo Andiamo adesso ad esaminarli uno per uno.

font-family

Questo parametro viene utilizzato per determinare il tipo di font, ovvero il carattere del testo, da utilizzare all’intenro della nostra pagina o di uno specifico tag html.

Vediamo la sintassi:

p {font-family: Arial, Verdana, “Times New Roman”;}

Gli uomini del W3C hanno creato un meccanismo che consente all’autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativ nel caso in cui il primo non ci fosse.

Nel nostro esempio il browser interpreta questa riga di css cosi: utilizza il carattere Arial, se non c’è utilizza Verdana, se non c’è utilizza Times new roman se non c’è utilizza quello predefinito dal browser.

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette. Se usate famiglie strane e poco comuni come fantasy o cursive usate più di una famiglia generica. Questa andrebbe sempre messa alla fine, altrimenti risulta praticamente inutile la definizione di font specifici.

font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le dimensioni.

Sintassi:

selettore { font-size: <valore>; }

I valori delle dimensioni del testo possono essere espressi in vari modi:

• espressi in unità di misura – per esempio 10px, 10pt, 10cm, 10mm, 10pc, 10in;
• percentuale – per esempio 10%;
• espressi in em (em-height) – per esempio 1.2em (decisamente poco utilizzati);

font-weight

Serve a definire la consistenza o “peso” visivo del testo. Sintassi:

selettore {font-weight: <valore>;}

i valori applicabili per questo parametro sono:

• bold – Il classico grassetto ottenibile con <strong></strong> o <b></b> in html ;
• bolder – Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell’elemento;
• lighter – Misura relativa. Il testo sarà più leggero di quello dell’elemento parente;
• normal – E’ l’aspetto normale del font ed equivale al valore 400;
• valori numerici 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);

Vediamo un esempio:

p {font-weight: 900;}

font-style

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

• normal: il testo mantiene il suo aspetto normale
• italic: formatta il testo in corsivo
• oblique: praticamente simile a italic

Vediamo subito sintassi ed esempio:

p {font-style: italic;}

line-height

Grazie a line-height è possibile finalmente usare nelle nostre pagine un sistema di interlinea degno di questo nome. La proprietà, in realtà, serve a definire l’altezza di una riga di testo all’interno di un elemento blocco. Ma l’effetto ottenuto è appunto quello tanto ambito da tutti i web designer: un modo per impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi. Sintassi:

selettore {line-height: <valore>;}

i valori possibili per questo parametro sono diversi, vediamoli un po:

• normal. Il browser separerà le righe con uno spazio ritenuto “ragionevole”. Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2
• valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l’altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
• un valore numerico con unità di misura. L’altezza della riga sarà uguale alla dimensione
  specificata.
• percentuale. L’altezza della riga viene calcolata come una percentuale della dimensione del font.

Personalmente utilizzo solo il valore numerico senza definire in pixel o in cm l’altezza della riga. In queste pagine viene utilizzato 1.600 come valore numerico definito per l’altezza della riga, e secondo me, ma questo è soggettivo, è un giusto equilibrio che permette al visitatore di leggere senza difficoltà le guide, poichè tra un rigo e l’altro non si viene a creare quell’ammasso di grigio che infastidisce gli occhi davanti al monitor.

text-decoration

Questo parametro molto usato con le pseudo classi, che tratteremo piu avanti, per eliminare l’effetto sottolineatura di default dai link. Permette infatti di definire se una determinata porzione di testo debba avere appunto delle decorazioni. Sintassi:

selettore {text-decoration: <valore> o <valori>;}

i valori che definibili in text-decoration sono diversi:

• none - Il testo non avrà alcuna decorazione;
• underline – Il testo sarà sottolineato;
• overline – Il testo avrà una linea superiore;
• line-through – Il testo sarà attraversato da una linea orizzontale al centro;
• blink – testo lampeggiante;

vediamo alcuni esempi di utilizzo.

p {text-decoration: blink;}
 a {text-decoration: none;}

La scelta si restringe comunque a due elementi: il corpo principale della pagina (<BODY>) o le tabelle. Un’altra limitazione riguarda il comportamento delle immagini di sfondo: esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire l’intera area della finestra, del frame o della tabella.

Proprio questo comportamento ha fatto sempre propendere per la scelta di piccole textures in grado di dare la sensazione visiva dell’ uniformità. Grazie ai CSS queste limitazioni vengono spazzate via e le possibilità creative, compatibilità permettendo, sono davvero infinite.

Ecco la lista delle proprietà, applicabili, ed è questa la prima grande innovazione dei CSS, a tutti gli elementi:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento. La proprietà background, invece, è una proprietà a sintassi abbreviata con cui possiamo definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo. La analizeremo alla fine. Prima è necessario chiarire significato e sintassi delle proprietà singole. Ma andiamo ad eseminare i 5 parametri per la gestione dello sfondo:

background-color

Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata. Sintassi:

selettore {background-color: <valore>;}

i valori possono essere due: la parola chiave trasparent o un qualsiasi colore in formato esadecimale (#000000).

Per chi non conoscesse la tabella esadecimale dei colori, guardi la tavolozza presente nella categoria Webdesign nella lezione sui principi di webdesign.

Esempi:

body { 

background-color: white; }
 p { background-color: #FFFFFF; }
 .classe1 { background-color: rgb(0, 0, 0)}

background-image

Definisce l’URL di un’immagine da usare come sfondo di un elemento. Sintassi:

selettore { background-image: url(<valore>); }

i valori possono essere o l’url dell’immagine o la parola chiave none.

body {background-image: url(sfondo.gif); }
 div body {background-image: url(http://www.kabuia.com/images/sfondo.gif); }

Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l’attributo background.

background-repeat

Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l’immagine di sfondo viene ripetuta. Sintassi:

selettore {background-repeat: <valore>;} 

i valori in question possono essere 4:

1. repeat L’immagine viene ripetuta in orizzontale e verticale. E’ il comportamento standard
2. repeat-x L’immagine viene ripetuta solo in orizzontale
3. repeat-y L’immagine viene ripetuta solo in verticale
4. no-repeat L’immagine non viene ripetuta

Esempi:

body { background-image: url(sfondo.gif); background-repeat: repeat; }
 div { background-image:url(sfondo.gif); background-repeat: repeat-x; }

background-attachment

Con questa proprietà si imposta il comportamento dell’immagine di sfondo rispetto all’elemento cui è applicata e all’intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa.

Sintassi:

selettore {background-attachment: <valore>;}

i valori possono essere, appunto due, fixed e scroll.

Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.

Esempi:

body { background-image: url(back_400.gif);
 background-repeat: repeat-x;
 background-attachment: fixed; }

background-position

Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un’immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser.

Sintassi:

selettore {background-position: <valore> o <valori>;}

I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull’asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:

body {
 background-image: url(back_400.gif);
 background-repeat: no-repeat;
 background-position: 50px 50px;
 } 

Significa che l’immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. Potevo usare invece dei pixel altre unità di misura o percentuali. Come al solito, la scelta delle percentuali mi assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso modo potevo utilizzare le parole chiave. Se, ad esempio, uso:

body {
 background-image: url(back_400.gif);
 background-repeat: no-repeat;
 background-position: center center;
 }

Logica vuole, trattandosi di definire le coordinate che si impostino due valori. Definendone uno solo esso sarà usato sia per l’asse orizzontale che per quello verticale.

background

E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.

Sintassi:

selettore {background:
           background-color
           background-image
           background-repeat
           backgroundattachment
           background-position;} 

Gli argomenti non vanno separati da virgole. L’ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza.