In questo articolo vediamo come ottenere rotazioni compatibili con la maggior parte dei browser, su questa pagina è presente una demo della soluzione proposta.

Rotazione con CSS3

Grazie alla proprietà transform che si occupa delle trasformazioni bidimensionali è possibile definire rotazioni customizzate per i vari elementi della pagina.

transform: rotate(7.5deg)

La sintassi è molto semplice:

proprietà: funzione(valore)

come eneunciato nelle specifiche di trasformazione bisimensionale dei CSS3 presenti sul sito del W3C.

Ampliare il supporto ai vari browser

Per ampliare il supporto di questa proprietà è possibile utilizzare la stessa sintassi ma dedicata ai singoli browser/motori di rendering.

transform: rotate(7.5deg);
/*generica*/
-webkit-transform: rotate(7.5deg);
/* CHROME/SAFARI*/
-moz-transform: rotate(7.5deg);
/* FIREFOX/MOZILLA */
-o-transform: rotate(7.5deg);
/* OPERA */
-ms-transform: rotate(7.5deg);
/* IE 9 */

Ampliare il supporto a Internet Explorer precendenti al 9

Come notiamo manca un supporto per Internet Explorer precedenti alla versione 9, per colmare questa lacuna è possibile utilizzare due filter predisposti da Microsoft a questo scopo: Basic Image e Matrix.

Basic Image

Con il filter Basic Image è possibile definire 3 tipi di rotazione per un elemento: 90°,180° e 270° settando la proprietà rotation rispettivamente a 1, 2 o 3.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';/*ie8*/
/* nessuna rotazione*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';/*ie8*/
/* rotazione di 90°*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';/*ie8*/
/* rotazione di 180°*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';/*ie8*/
/* rotazione di 270°*/

Matrix

Il limite della poprietà Basic Image è rappresentato dal fatto di offrire solo 3 tipi di rotazione e nessun tipo di rotazione custom. Per ottenere un maggiore controllo è allora possibile utilizzare il filter Matrix, che si occupa della trasformazione bidimensionale di un elemento (come la proprietà transform dei css3).

filter: progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104,
       M12=-0.13052619222005157,
       M21=0.13052619222005157,
       M22=0.9914448613738104, sizingMethod='auto expand');
       zoom: 1;   /* IE 5.5-7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104,
       M12=-0.13052619222005157,
       M21=0.13052619222005157,
       M22=0.9914448613738104, sizingMethod='auto expand');
       zoom: 1'; /* IE8 */
       /*rotazione di 7.5 gradi*/

Il filter Matrix si occupa di ridefinire l’elemento in base ai 4 angoli dell’elemento, per calcolare questi 4 punti è necessaria un po’ di matematica per disporre correttamente le coordinate, nello specifico i 4 valori inseriti (m11,m12,m21,m22) saranno uguali alle seguenti formule.

m11 = cos((gradi)*3,14159265*2/360)
m12 = -sen((gradi)*3,14159265*2/360)
m21 = sen((gradi)*3,14159265*2/360)
m22 = cos((gradi)*3,14159265*2/360)

La proprietà sizingMethod definisce invece se l’elemento contenitore dovrà adattarsi o meno all’immagine generata grazie al valore “auto expand”.

Su questa pagina è possibile vedere una demo della soluzione proposta.

La definizione di sfumature attraverso i css  offre una valida alternativa all’utilizzo di immagini, riducendo così tempi di caricamento. Nonostante questa tecnica non sia totalmente crossbrowser ricopre i browser maggiormente utilizzati in un numero considerevole di versioni portando così un ampio numero di utenti a risparmiare tempo e banda ad ogni richiesta per le pagine web.

La creazione di sfumature attraverso i css è un tipo di immagine generata, non una proprietà. Questo significa che possono essere utilizzate all’interno di altre proprietà come avviene per rgb() o rgba().

Nei CSS3 esistono due metodi per la definizione di sfumature, in particolare uno per le sfumature lineari (linear-gradient) e uno per le sfumature radiali (radial-gradient). Da questi sono ricavati i rispettivi per firefox, google chrome e safari con uguali sintassi ma differente premessa.

Qui un esempio delle soluzioni proposte, di seguito la spiegazione nel dettaglio.

Sfumature lineari

La sintassi della sfumatura lineare richiede un minimo di tre parametri:

• posizione iniziale (valore numerico, percentuale o gradi)
• colore iniziale (colore in valore esadecimale, rgb o rgba)
• colore finale (colore in valore esadecimale, rgb o rgba)

-webkit-linear-gradient(top, #ccc, #000);
-moz-linear-gradient(top, #ccc, #000);
linear-gradient(top, #ccc, #000);

E’ possibile aggiungere più colori ad una singola sfumatura definendo la porzione occupata dal colore attraverso un valore in percentuale tra 0% e 100%. Per i colori per cui non viene specificata una percentuale la larghezza della sfumatura viene definita in automatico.

-webkit-linear-gradient(top, #ccc 20%, #000);
 -moz-linear-gradient(top, #ccc 20%, #000);
 linear-gradient(top, #ccc 20%, #000);

E’ inoltre possibile definire sfumature con più colori aggiungendoli nell’ordine desiderato

-webkit-linear-gradient(top, #ccc 20%, #000, #c00);
 -moz-linear-gradient(top, #ccc 20%, #000, #c00);
 linear-gradient(top, #ccc 20%, #000, #c00);

Ampliare il supporto per google chrome e webkit

Oltre alla definizione di sfumature con i CSS3 è possibile utilizzare webkit-gradient per ampliare il supporto a safari 4 e superiori e google chrome inferiori alla 10.

La sintassi della sfumatura lineare per webkit richiede un minimo di cinque parametri:

• tipo di sfumature (linear o radial)
• posizione iniziale (valore numerico, percentuale o gradi)
• posizione finale (valore numerico, percentuale o gradi)
• colore iniziale (colore in valore esadecimale)
• colore finale (colore in valore esadecimale)

-webkit-gradient(linear, left top, right top, from(#ccc), to(#000));

Si sconsiglia di definire i colori in rgb o rgba considerato che la dichiarazione serve per ampliare il supporto su browser meno recenti che potrebbero non supportare i colori in rgb essendo parte dei CSS3.

E’ possibile aggiungere più colori ad una singola sfumatura definendo la porzione occupata dal colore attraverso un valore in percentuale tra 0% e 100%. Per i colori per cui non viene specificata una percentuale la larghezza della sfumatura viene definita in automatico.

-webkit-gradient(linear, left top, right top, from(40%, #ccc), to(#000));

E’ inoltre possibile definire sfumature con più colori aggiungendoli attraverso la dichiarazone color-stop.

-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000),
color-stop(40%, #c00))

Sfumature lineari su Internet explorer

Le soluzioni viste fino ad ora non trovano supporto su Internet Explorer in versioni precedenti alla 9, bisogna quindi ricorrere al gradient filter.

Questo filtro per Internet Explorer permette sfumature lineari verticali ed orizzontali di due colori.

Per questo filtro sono necessari tre parametri:

• gradienttype (definisce una sfumatura verticale (0) o orizzontale (1))
• colore iniziale (in valore esadecimale)
• colore finale (in valore esadecimale)

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,
startColorstr='#cccccc', endColorstr='#000000');

Per ampliare il supporto a più versioni di Internet Explorer occorre ricordare la diversa definizione di filters:

//per ie 5.5 e successivi
filter: progid:DXImageTransform.Microsoft.filtername(sProperties)
//per ie 8
-ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'

In questo modo è possibile creare sfumature con i css compatibili con Firefox 3.6+, Safari 4+, google chrome e internet explorer 7+. Purtroppo opera non offre un supporto per le sfumature da css e ricade nella soluzione di callback con la definizione di un colore o di un’immagine di sfondo.

Sfumature Radiali

E’ inoltre possibile definire sfumature radiali attraverso radial-gradient, le derivate per webkit e mozilla -webkit-radial-gradient e -moz-radial-gradient e la definizione webkit-gradient (con tipologia radial).

Per questa soluzione con i css3 può essere utile inserire un parametro di definizione sulla larghezza delle sfumature che definisce forma ed estensione.

I valori definibili sono:
Circle (per sfumature circolari)
Ellipse (per sfumature ad ellisse)

In aggiunta si possono definire ulteriori parametri per il comportamento della sfumatura:

closest-side (sfumatura al lato più vicino)
farthest-side (sfumatura al lato più distante)
closest-corner (sfumatura all’angolo più vicino)
farthest-corner (sfumatura all’angolo più lontano)

Qui un esempio delle soluzioni descritte.

Per maggiori informazioni sull’utilizzo delle sfumature ecco alcuni link:

sfumature con CSS3 in firefox (https://developer.mozilla.org/en/Using_gradients)
sfumature con CSS3 in webkit (http://www.webkit.org/blog/1424/css3-gradients)
sfumature con webkit-gradient (http://www.webkit.org/blog/175/introducing-css-gradients)
sfumature con filter per internet explorer (http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx)
definizioni della posizione della sfumatura (https://developer.mozilla.org/en/CSS/-moz-radial-gradient#Size_constants)
utilizzo di filters in Internet explorer (http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx)

-webkit-linear-gradient(top, #ccc, #000);
-moz-linear-gradient(top, #ccc, #000);
linear-gradient(top, #ccc, #000);

-webkit-linear-gradient(top, #ccc 20%, #000);
 -moz-linear-gradient(top, #ccc 20%, #000);
 linear-gradient(top, #ccc 20%, #000);

-webkit-linear-gradient(top, #ccc 20%, #000, #c00);
 -moz-linear-gradient(top, #ccc 20%, #000, #c00);
 linear-gradient(top, #ccc 20%, #000, #c00);

-webkit-gradient(linear, left top, right top, from(#ccc), to(#000));

-webkit-gradient(linear, left top, right top, from(40%, #ccc), to(#000));

-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000),
color-stop(40%, #c00))

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,
startColorstr='#cccccc', endColorstr='#000000');

//per ie 5.5 e successivi
filter: progid:DXImageTransform.Microsoft.filtername(sProperties)
//per ie 8
-ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.

Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.

Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.

PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.

Per questa soluzione sono partito dall’esempio fornito da Youtube nella rispettiva documentazione. Lo script proposto carica dal canale desiderato le thumbnails dei video e il rispettivo titolo, caricando inoltre il player che esegue il filmato sul quale viene cliccato.

Nel nostro caso desidero mantenere le thumbnails e i titoli ma preferisco evitare che il player occupi spazio nella pagina, modificherò quindi lo script per permettere l’apertura del video in un div grazie al plugin PrettyPhoto.

Per iniziare creiamo la nostra pagina html, avendo l’accortezza di lasciare un div con id nel quale verranno caricate le thumbnails dei video.

Caricare i dati da Youtube

Ora possiamo iniziare a creare il javascript che richiamerà i dati necessari da Youtube.

Per prima cosa inseriamo un link alle api di youtube, dove specificheremo che cosa selezionare (nel nostra caso andremo a prelevare tutti i video del canale di GoogleDevelopers).

<script type="text/javascript"
src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&callback=getVideos">
</script>

Questo link ci permette di selezionare tutti i feed di un determinato utente (GoogleDevelopers) esenguendo una funzione javascript di callback (getVideos).

Andiamo quindi a definire la nostra funzione nella pagina.

<script type="text/javascript">
function getVideos(data) {

}
</script>

All’interno di questa funzione filtreremo i dati e li utilizzeremo per ottenere l’output desiderato.

Per prima cosa definiamo un array per i dati ottenuti

var feed = data.feed;
var entries = feed.entry || [];

Ora possiamo estrarre i dati utilizzando un ciclo for

for (var i = 0; i < entries.length; i++) {
}

All’interno del quale ricaviamo i dati che ci servono

var entry = entries[i];
var title = entry.title.$t.substr(0, 35);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var videoUrl = entries[i].media$group.media$player[0].url;

Per gestire in maniera corretta l’output salviamo i dati relativi ai feed all’interno delle rispettive vairabili, in seguito raggruppiamo i dati con il codice html necessario all’impaginazione.

html.push('<div class="singleVideo"><a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'">',
'<img src="', thumbnailUrl, '"/>','</a>',
'<a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'"><span>',title,'...</span></a></div>');

Il risultato per ogni output del ciclo nell’html sarà:

<div class="singleVideo">
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<img src="[THUMBNAILVIDEO]"/>
</a>
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<span>[TITOLO VIDEO]...</span></a>
</div>

L’ultima riga stamperà il risultato nell’elemento con l’id specificato

document.getElementById('videoContainer').innerHTML = html.join('');

Aggiungiamo PrettyPhoto

Avendo già inserito gli attributi rel per i link non resta che aggiungere Jquery e il plugin PrettyPhoto nella pagina

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/prettyPhoto.js"></script>

ed inserire le opzioni per il desiderato funzionamento di PrettyPhoto

$(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal',
padding: 40,
opacity: 0.35,
showTitle: true,
allowresize: true,
counter_separator_label: ' di ',
theme: 'light_square',
callback: function(){}
});
});

Il risultato è visibile in questa demo.

Tempo fa avevamo parlato di come realizzare un semplice slideshow con jquery, oggi vediamo come creare in poco tempo uno slideshow completamente customizzabile e compatibile grazie a jquery e jquery cycle.

Cos’è jquery cycle?

Jquery cycle è una libreria per jquery che permette la realizzazione di slideshow con molteplici effetti di transizione garantendo una buona customizzazione a livello funzionale tramite le opzioni messe a disposizione dagli sviluppatori.

Jquery cycle è scaricabile da qui.

Come funziona?

Per iniziare creiamo una pagina html ed inseririamo le immagini della nostra galleria all’interno di un div, al quale daremo delle regole css per dimensioni e stile.

<div id="photos">
<img src="images/sample1.jpg" alt="Questa è la prima foto"/>
<img src="images/sample2.jpg" alt="Questa è la seconda foto"/>
<img src="images/sample3.jpg" alt="Questa è la terza foto"/>
<img src="images/sample1.jpg" alt="Questa è la quarta foto"/>
<img src="images/sample2.jpg" alt="Questa è la quinta foto"/>
<img src="images/sample3.jpg" alt="Questa è la sesta foto"/>
<img src="images/sample1.jpg" alt="Questa è la settima foto"/>
</div>

Fatto questo colleghiamo la nostra pagina html alla libreria di jquery e al plugin di jquery cycle.

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery_cycle.js"></script>

(ovviamente i percorsi andranno definiti in base alla struttura della cartella)

A questo punto inseriamo la funzione cycle che farà funzionare il nostro slideshow

<script type="text/javascript">
$(document).ready(function() {
  $('#photos').cycle({
    fx:'fade',
    speed:  1000,
    timeout: 2000
  });
});
</script>

In questo codice applichiamo la funzione cycle al div #photos definendo un effetto di transizione fade, una velocità di transizione di un secondo (speed: 1000) ed un timeout di due secondi (timeout:2000).

Per vedere la demo clicca qui.

Come aggiungere le thumbnails delle immagini

Per aggiungere le thumbnails delle immagini possiamo utilizzare l’opzione pager per ottenere una paginazione numerica delle immagini e la funzione di callback pagerAnchorBuilder per sostituire i numeri alle rispettive thumbnails.

Creiamo quindi un div #thumbnails dove andremo a collocare le immagini

<div id="thumbnails"><ul></ul></div>

Aggiungiamo quindi l’opzione pager per dichiarare a jquery cycle dove desideriamo collocare le anteprime

$('#photos').cycle({
  fx:     'fade',
  speed:  1000,
  timeout: 2000,
  pager:  '#thumbnails ul',
});

Per alleggerire l’esecuzione di javascript ho preferito aggiungere manualmente i tag <ul></ul> ma è possibile aggiungere questi tag attraverso jquery nel funzione pagerAnchorBuilder che andiamo ad aggiungere.

$('#photos').cycle({
fx:     'fade',
speed:  1000,
timeout: 2000,
pager:  '#thumbnails ul',

pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/></a></li>';
}
});

La funzione pagerAnchorBuilder la normale paginazione di jquery cycle con le immagini contenute nello slide show.

Questo permette di visualizzare l’immagine scelta cliccando sulla thumbnail, viene inoltre messa a disposizione la classe .activeSlide presente sull’immagine attualmente visualizzata.

Questa soluzione molto comoda renderizza però due volte la stessa immagine, appesantendo notevolmente la pagina, in un contesto dinamico sarebbe opportuno gestire le thumbnails lato server per evitare ridimensionamenti da css che non riducono il peso dell’immagine.

Per vedere la demo clicca qui

Aggiungere una navigazione direzionale

Oltre alle thumbnails potrebbe essere utile aggiungere la possibilità all’utente di passare alla foto successiva o di tornare a quella precedente.

Per farè ciò è sufficiente creare due link con id da associare a jquery cycle

<div id="navPhotos">
<a id="prev" href=""><img src="images/button_prev.png" alt="Prev photo"></a>
<a id="next" href=""><img src="images/button_next.png" alt="Next photo"></a>
</div>

e aggiungere le opzioni prev e next al nostro script

[...]
next:   '#next',
prev:   '#prev',
[...]

In questo modo i due link porteranno sempre all’immagine precedente o successiva.

Da notare che entrambi i link sono contenuti nel div #navPhotos a questo viene assegnato un posizionamento assoluto e uno z-index elevato poichè jquery cycle utilizza la proprietà z-index per mostrare le immagini. Diventa dunque indispensabile settare uno z-index che sia sempre superiore al numero di immagini per poszionare i due link sopra lo slideshow.

Per vedere la demo clicca qui

Aggiungere una descrizione alle immagini

Per aggiungere una descrizione alle immagini è possibile sfruttare l’attributo alt del tag <img>.

Con l’aiuto dell opzioni before e after è possibile richiamare delle funzioni prima e dopo il caricamento dell’immagine.

Definiamo quindi una div #description dove andremo ad inserire le descrizioni

<div id="description">
</div>

E aggiungiamo al nostro script le opzioni after e before che richiameranno le funzioni onAfter e onBefore

[...]
before:  onBefore,
after:   onAfter,
[...]

Ora definiamo le funzioni onBefore e onAfter per caricare il testo contenuto nell’attributo alt del tag <img>

function onBefore() {
  $('#description p').fadeOut('1000');
}
function onAfter() {
  $('#description p').fadeIn('1000');
  $('#description').html('<p>' + this.alt + '</p>');
}

Queste due funzioni andranno definite al di fuori della funzione cycle poichè vengono valutate ad ogni caricamento della singola immagine.

Per il div #description è stata creata una regola css simile a #navPhotos in modo che la descrizione sia posta sopra lo slideshow con uno z-index superiore al numero di immagini presenti.

Per vedere una demo clicca qui

In conclusione

Come abbiamo visto jquery cycle mette a disposizione un numero elevato di opzioni per realizzare slideshow, è possibile inoltre aggiungere dei pulsanti per mettere in pausa o far ripartire lo slideshow, caricare contenuto diverso da immagini, settare un tempo di delay per sincronizzare più slideshow e customizzare i numerosi effetti presenti.

Per maggiori informazioni sulle possibilità di customizzazione esiste una sezione demo ed esempi sul sito di jquery cycle sicuramente molto utile.

Inoltre grazie alla gestione dello stile da css e al semplice markup è possibile creare valide alternative senza javascript per migliorarne l’accessibilità rendenfo questa una delle migliori soluzioni per realizzare slideshow in contesti statici e dinamici.

Obbiettivo più complesso è invece realizzare un layout con altezza che si adatti al browser. Questa operazione sicuramente non troppo comune ha il pregio (e soprattutto il difetto) di limitare il contenuto nell’altezza della finestra del browser.

Diventa quindi una scelta poco consigliata per garatire l’accessibilità dei contenuto, tuttavia può tornare utile per specifiche richieste che richiedono di emulare un full screen tipico dei siti in flash.

Per raggiungere in nostro obbiettivo è indispensabile far sì che il div contenitore della pagina mantenga un’altezza pari all’altezza della finestra del browser.

Cosa non fattibile settando semplicemente l’altezza dell’elemento al 100%, ma richiede che l’elemento genitore abbia settata un’altezza e che l’elemento in questione abbia un posizionamento assoluto.

body{
margin:0;
padding:0;
height:100%;
}

#content{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}

Grazie a questi parametri l’elemento si estende su tutta l’altezza della pagina rimanendo fuori dal flusso tradizionale con un posizionamento assoluto. Vedi l’esempio.

Per aggiungere un footer al nostro layout sarà sufficiente ridurre l’altezza dell’elemento precedente di pari valore all’altezza del footer ricordando di settare un posizionamento assoluto con bottom uguale a 0.

#footer{
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

In questo modo il footer rimarrà attaccato al fondo della finestra del browser anche al resize da parte dell’utente. Vedi esempio.

Come ultimo esempio vediamo come rendere centrato e a larghezza fissa il nostro layout.

Iniziamo settando delle larghezze a larghezza fissa mentre per centrare gli elementi non utilizziamo i margini laterali settati su auto bensì la proprietà left:50% in aggiunta ad un margine sinistro negativo pari alla metà della larghezza dell’elemento.

#content{
height:90%;
width:960px;
position:absolute;
top:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

#footer{
height:10%;
width:960px;
position:absolute;
bottom:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

In questo modo otteniamo un layout a larghezza fissa centrato con altezza al 100% e footer adiacente al margine inferiore della finestra del browser. Vedi l’esempio.

Note:

Questa soluzione non è consigliata per siti complessi in quanto il posizionamente assoluto rende maggiormente complessa l’impaginazione dei contenuti e come detto all’inizio mette a repentaglio l’accessibilità dei contenuti a risoluzioni ridotte.

La proprietà overflow:hidden; è stata inserita negli elementi per evitare che al ridimensionamento della finestra del browser l’altezza del contenuto comprometta il layout ma non è indispensabile per rendere l’altezza fluida.

Per far sì che il footer della pagina sia sempre adiacente al margine inferiore della pagina è possibile utilizzare solo il posizionamento assoluto con la proprietà bottom:0; senza ricorrere ad altezze in percentuale.

Le altezze in percentuale come le larghezze vengono renderizzate convertendo la dimensione in percentuale dell’elemento in pixel, può quindi accadere di avere uno spazio bianco tra due elementi (come #content e #footer) dato da un arrotondamento approssimativo, per risolvere questo problema è possibile utilizzare il background del body per non rendere visibile questo spazio. Nell’esempio si è settato volontariamente un sfondo bianco per rendere visibile questa problematica.

Una volta definiti questi aspetti si può partire definendo una griglia per il nostro layout. Questo permettà di mantenere ordine e conformità grafica nelle varie pagine.

Per realizzare una griglia è necessario definire almeno tre dimensioni:

-Larghezza della pagina

-Numero di colonne

-Spaziatura tra i vari elementi

Larghezza della pagina

Per questa dimensione è consigliabile utilizzare una misura uguale o inferiore ai 960px che rappresenta l’area visibile dall’utente ad una risoluzione di 1024x768px con i diversi browser. La misura in realtà è di 968px ma viene arrotondata per comodità. Essendo la risoluzione minima più usata dagli utenti di 1024x768px garantisce un ottima compatibilità con i monitor degli utenti.

Numero di colonne

Il numero di colonne deve essere definito in base alla quantità e alla varietà di contenuti del sito. E’ utile ricordare che un minor numero di colonne lascerà più spazio per immagini e grafiche mentre un numero eccessivo renderà il contenuto difficilmente leggibile. Bisogna sempre valutare a priori quale soluzione sia opportuna per un determinato contesto.

Spaziatura tra gli elementi

In qualunque contesto grafico è utile lasciare un minimo di spazio tra i contenuti per migliorare la leggibilità e soprattutto definire aree differenti con diversi elementi. Facendo attenzione che lo spazio sia proporzionale ai contenuti e non faccia prevalere il “vuoto” che porterebbe solo disturbo e confusione nella pagina. E’ utile ricordare che una volta definita una spaziatura è opportuno mantenerla su tutto il sito per garantire una migliore leggibilità all’utente.

Viste queste premesse ho creato 44 esempi di layout a larghezza fissa da 960px con differente numero di colonne e differenti spaziature. Gli esempi sono visibili su questa pagina.

Per trovare una facile applicazione alle soluzioni più creative ci viene incontro jquery che mette a disposizione numerosi effetti e semplifica notevolemente l’utilizzo di javascript.

Vediamo come realizzare una semplice galleria di immagini in pochi passi.

Per prima cosa creiamo la nostra pagina html ed inseriamo all’interno un div con i relativi contenuti (nel nostro caso le immagini della galleria).

<div id="contenitore">
 <div><img src="images/1.jpg" alt="Immagine 1" /></div>
 <div><img src="images/2.jpg" alt="Immagine 2" /></div>
 <div><img src="images/3.jpg" alt="Immagine 3" /></div>
</div>

Una struttura così semplice ci permetterà in seguito di creare alternative accessibili o per media che non supportano questa soluzione.

Fatto questo partiamo con jquery, come sempre iniziamo definendo la partenza dello script al caricamento della pagina con la funzione ready.

$(document).ready(function(){

});

Come seconda mossa definiamo un evento che porterà l’utente a vedere l’immagine successiva. Nel nostro caso il click sul div (o meglio sulla prima immagine visualizzata).

$(document).ready(function(){
$('div#contenitore div').click(function () {

});
});

Ora possiamo definire il codice che farà scomparire l’immagine attuale e mostrerà l’immagine successiva

$(this).fadeOut(200, function() {$(this).next().fadeIn( 200);});

In questo modo definiamo un fadeOut sul div contenitore dell’immagine su cui abbiamo appena cliccato e definiamo come funzione di callback un fadeIn sull’immagine successiva.

Rimane un unico problema da risolvere, quando si arriva all’ultima immagine questa deve scomparire e far apparire la prima. Per risolvere utilizziamo un semplice if che valuterà se l’elemento cliccato è l’ultimo del div oppure no.

if ($(this).is(":last-child")) {
}else{
}

Per vedere lo script in funzione guarda questo esempio.

In entrambi i casi dovresti pensare al fatto che prima o poi dovrai accertarti di tempi di caricamento, peso delle pagine e numero di elementi presenti.

Per fare questo ti occorrono stime certe da poter confrontare con il tuo target di utenti e valutare le possibili soluzioni.

Una soluzione rapida, precisa e molto dettagliata ce la fornisce webtestpage che mette a disposizione un comodo tool che restituisce dati molto precisi su tempi di caricamento, peso delle pagine e possibili ottimizzazioni.

Il sito offre anche la possibilità di vedere i rapporti di altri siti salvati in precedenza senza dover richiedere nuovamente l’analisi.

Se avete il dubbio che il vostro sito possa essere più veloce e più leggero allora vi conviene spendere qualche minuto su questo comodo servizio gratuito per valutare eventuali interventi in tempi brevi.

Per oggi ti propongo 5 spunti interessanti sui css che penso possano interessarti:

Regole css applicate di default agli elementi delle pagine html

Senza dubbio non è una nuova risorsa ma questa settimana ho scoperto che sono in molti a non leggere i documenti del w3c, nel caso ti sei mai chiesto quali sono le proprietà di default sugli elementi html questo documento riassume per ogni elemento le varie regole che gli sono attribuite di default.

10 proprietà css molto utili ma non supportate da internet explorer

Il titolo dice tutto, nel caso non ti bastasse questo articolo per abbandonare Internet Explorer leggi questo articolo, se invece hai già abbandonato da tempo il browser microsoft ti consiglio questa iniziativa molto simpatica.

Creare thumbnail grazie alla proprrietà clip

Un bel tutorial, che spiega come realizzare semplici thumbnail da immagini più grandi grazie alla proprietà clip dei css, in alternativa ripropongo questo articolo sulla gestione delle thumbnail con i css e questo su come realizzare una thumbnail grazie a canvas.

Esempi di animazione con i css

Alcuni interessanti esempi di animazione creati con solo css, attualmente funzionano solo su Chrome e Safari, vi consiglio quindi di utilizzare uno di questi browser per capire il potenziale ancora inespresso dei css.

Statistiche sul supporto dei selettori css sui vari browser

Un ottimo riassunto di tutti i selettori css e del supporto fornito da ogni browser con rispettivo sistema operativo, un utile memento quando utilizziamo molti css hacks.

Come vedremo in questo tutorial il posizionamento dei vari elementi richiede qualche competenza per non compromette la compatibilità del layout nei vari browser.

La proprietà position

La proprietà position ammette quattro valori: static, relative, absolute e fixed. Esistono grandi differenze tra questi quattro valori che occorre capire per utilizzarli al meglio.

Posizionamento statico

Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all’elemento come top, left, bottom e right. Questo tipo di posizionamento non altera la posizione dell’elemento e viene implicitamente attribuito ad ogni elemento della pagina com’è possibile vedere in questo esempio.

Posizionamento relativo

Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l’elemento ma lo colloca su un livello superiore.

In questo esempio possiamo notare come il posizionamento relativo collochi l’elemento sopra un elemento con posizionamento statico. Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore inferiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) come in questo esempio.

Posizionamento assoluto

Il valore absolute posiziona un elemento in relazione all’elemento html o all’elemento genitore che ha un posizionamento diverso da statico. Bisogna ricordare che a differenza del posizionamento relativo quello assoluto colloca l’elemento al di fuori del tradizionale flusso della pagina influenzando quindi il layout.

In questo esempio vediamo come due elementi con posizionamento assoluto si comportino in maniera diversa a causa del riferimento per la posizione.

Il primo div infatti calcola l’offset partendo dall’elemento genitore (con id relativo) mentre il secondo non avendo un elemento genitore con posizionamento diverso da statico prende come riferimento l’elemento html.

Occorre ricordare che Internet Explorer 6 e versioni precedenti presentano numerosi bug sul posizionamento assoluto. Una buona soluzione per risolvere queste problematiche è quello di settare un’altezza dell’elemento contenitore a 0 solo per Internet Explorer 6 e precedenti.

<!--[if lte IE 6]>
div{height:0;}
<![endif]-->

Posizionamento fisso

Il valore fixed estrae un elemento dal flusso e lo posiziona in base all’offset (specificato con top, left, bottom e right) in relazione all’elemento html.

Il posizionamento fisso può sembrare simile al posizionamento assoluto, ma non rispetta la regola del genitore con posizionamento diverso da statico, infatti utilizza sempre come riferimento l’elemento html, utilizzando il precedente esempio con questo tipo di posizionamento notiamo che i due div si sovrappongo in cima alla pagina.

Un’altra differenza rispetto al posizionamento assoluto è che ignora lo scroll nelle pagine con contenuto più alto dell’area visibile nel browser e mantiene la posizione definita in relazione alla finestra del browser.

In questo esempio vediamo come si comporta un elemento con posizionamento assoluto ed uno con posizionamento fisso in una pagina con molto contenuto.

Occorre inoltre ricordare che il valore fixed per la proprietà position non è supprtato da Internet Explorer 6 e versioni precedenti.