Francesco Mele .com

L'argomento stavolta è un po' atipico.
Con questo post infatti voglio illustrare alcune tecniche utilizzate per il sito di SP Communication, uno studio grafico di Castel San Pietro Terme, in provincia di Bologna.

Iniziamo dalla gestione dello sfondo: ho utilizzato il plugin di jQuery supersized.

function backgroundManager() {
	$.supersized({
		slide_links: false,
		slides:BGS	
	});
}

La variabile BGS altro non è che l'elenco degli sfondi caricati dinamicamente da una cartella sul server attraverso codice php.

I box che trovate a destra nelle sezioni principali Home, Grafica, Pubblicità e Siti web vengono ridimensionati dinamicamente attraverso il seguente codice:

function pageResize() {
	var h = jsbeans.sizeandposition.getPageDimension();

	document.getElementById("content").style.height = (h.h) + "px";
	document.getElementById("content").style.overflowX = "auto";
	document.getElementById("content").style.overflowY = "scroll";
	
	$(".blocks_table td").each(function() {
		$(this).css({width: "33.3%"});
		$(this).css({height: $(this).css("width")});
	});
	
}

Questa funzione viene invocata al document ready e sull'evento resize: $(window).bind("resize", pageResize);
Come potete notare le dimensioni vengono impostate in percentuale; ciononostante non è sufficiente applicare il solo CSS.
Per poter ottenere le dimensioni della pagina ho usato jsbeans.

Il box a sinistra relativo agli ultimi progetti ruota sugli ultimi 3 contenuti inseriti tra Grafica, Publicità e Siti web. Questi vengono caricati dinamicamente da una query con php, ma vengono ruotati tramite una funzione javascript ogni 3 secondi grazie a jsbeans.Repeater:

	REPEATER = new jsbeans.Repeater(rotateLastProjectsBlock, 3);
	REPEATER.start();

Dove rotateLastProjectsBlock è la funzione che gestisce i link e gli eventi del blocco.

Gli altri componenti jsvascript usati sono jsbeans.Navbar con una funzione che gestisce i parametri della request, colorbox per le gallerie fotografiche, inclusione dinamica dei Tweet di Twitter.

Dal punto di vista tecnico ci sono diverse sfide che ho dovuto affrontare per venire incontro alle richieste di SP Communication che dovevano anche tenere nella giusta considerazione l'ottimizzazione per i motori di ricerca (fase ancora in corso), quindi evitando l'abuso di javascript anche quando questa sarebbe stata la soluzione più veloce.

Il risultato mi sembra buono e perfettamente in linea con le esigenze del cliente con reciproca soddisfazione!

buona navigazione