Con l’occasione ringrazio tutte le persone che hanno commentato e che mi hanno espresso i loro pareri positivi sul blog, ed auguro a tutti
Buon Natale e Felice Anno Nuovo!

Per qualche anno ho usato compatte, bridge e affini e mi sembrava il momento di fare il primo passo nel mondo della Fotografia con la F maiuscola.

Dopo mezz’oretta di utilizzo, eccitato come un bambino col giocattolino nuovo, ecco le mie impressioni a caldo, in ordine sparso…

• Ergonomia – tutti i bottoni che servono al posto giusto, è notevole la quantità di impostazioni che si possono raggiungere con un paio di click. Impagabile la rotellina per regolare i parametri di scatto.
• Autofocus – un razzo rispetto alle compatte. Veramente impressionante. La gestione dei punti di messa a fuoco poi è molto cool, con quei led rossi nel mirino…
• Profondità di campo – che bello vedere uno sfondo sfocato, cose che con la compatta ti sogni!
• Sound – il ciak "analogico" dello specchio è coinvolgente, specie nella raffica, ci si sente subito un reporter.
• Rumore di fondo – anche a 1600 ISO è perfettamente accettabile. Finalmente posso far foto in interni senza grossi problemi!
• Stabilizzatore – Sebbene sia l’ottica in kit, funziona! E bene…
• EOS Utility – Il programma che permette di controllare la fotocamera da computer. Incredibile poter mettere a fuoco zoomando al 100% su un monitor 22" in live view!!
• Velocità – Pronta alla foto in un nanosecondo, basta premere per metà il pulsante di scatto. Molto più facile cogliere l’attimo

Oltre a ciò ci sono tanti altri piccoli dettagli. La sensazione generale è comunque di aver fatto un gran balzo in avanti. La bridge che avevo prima, seppur sulla carta piena di caratteristiche avanzate – alcune addirittura superiori, al confronto sembra poco più di un giocattolo.

Come molti di voi sapranno Google mette a disposizione per la maggior parte dei propri prodotti una serie di strumenti per sfruttarne le potenzialità nei nostri progetti.
Google Maps non fa eccezione e ci fornisce tutti gli strumenti (API) per sfruttare le mappe di Google nei nostri siti tramite Javascript.

Una delle funzionalità più utili è quella di poter calcolare il percorso ottimale per raggiungere un determinato luogo, ottenendo tutte le indicazioni sulle svolte e sulle strade da percorrere. Non molti sanno che queste funzionalità sono a disposizione degli sviluppatori per integrarle nei propri progetti, ed è proprio ciò che faremo.

Demo

Ipotizziamo di voler integrare nel nostro sito una comoda sezione “Come raggiungerci”, dove l’utente possa inserire la propria posizione ed ottenere il percorso per raggiungerci.

La nostra pagina quindi sarà composta da un breve form dove l’utente inserirà la posizione, la mappa dove verrà visualizzato il percorso e l’area in cui verranno visualizzate le informazioni:

<form name="findRoute" action="">
	<p>
		<label for="partenza">Da dove parti?</label>
		<input type="text" name="partenza" />
	</p>

	<p>
		<input type="submit" value="Calcola" name="calcola" id="calcola" />
	</p>
</form>

<div id="map"></div>
<div id="route"></div>

Com’è facile intuire la mappà sarà inserita all’interno del div map, mentre le indicazioni all’interno del div route.

Ma veniamo alla parte Javascript. Per prima cosa è necessario procurarsi una API Key dal sito google:

http://code.google.com/intl/it-IT/apis/maps/signup.html

Una volta ottenuta la chiave possiamo includere il javascript di Google Maps:

<script src="http://maps.google.com/maps?file=api&v=2.x&key=CHIAVE" type="text/javascript"></script>

Dove al posto di CHIAVE ci andrà la API Key fornita da Google.

Procediamo ora con lo script vero e proprio. Innanzitutto inizializziamo una serie di variabili vuote che conterranno gli oggetti di Google Maps che istanzieremo:

/* GOOGLE MAPS OBJECTS */
var home;       //Home GLatLng object
var map;        //GMap object
var directions; //Directions object
var marker;     //GMarker object

La prima funzione che andremo ad utilizzare sarà la funzione initialize() che come dice il nome preparerà tutto il necessario per far funzionare la mini-applicazione. Questa funzione dovrà essere richiamata al caricamento della pagina, ad esempio all’interno del tag body:

<body onload="initialize()">

Ma veniamo al codice. Per prima cosa recuperiamo gli elementi html che ci servono tramite il metodo document.getElementById:

//Get html elements needed:
var mapPanel        = document.getElementById('map');
var directionsPanel = document.getElementById('route');
var submitButton    = document.getElementById('calcola');

Subito dopo invece definiamo il nostro punto base, nell’esempio sarà la nostra ipotetica sede:

//Home location:
home = new GLatLng(45.434629,12.337925);

Ora che abbiamo il necessario possiamo già istanziare la mappa che verrà visualizzata di default e mostrerà il punto base:

//Create a map:
map = new GMap2(mapPanel);
map.setCenter(home, 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Per prima cosa viene creato l’oggetto GMap2, cioè la Google Map, e viene associato al div#map (mapPanel). La mappa viene poi centrata in home, al livello di zoom 13 (qui possiamo procedere a tentativi, più piccolo sarà il numero e più superficie terrestre vedremo). Tramite le altre due righe andiamo ad aggiungere i controlli che ci interessano (in questo caso i controlli standard e quelli per il tipo di visualizzazione – satellite, mappa, ibrida).

Ora dobbiamo evidenziare il punto base, e lo faremo aggiungendo un marker:

//Create marker:
marker = new GMarker(home);
map.addOverlay(marker);

Al marker possiamo aggiungere un fumetto descrittivo, contenente ad es. l’indirizzo, che si apre al click:

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<strong>Venezia</strong><br />Piazza San Marco");
});

Il comando addListener serve appunto per associare il click sul marker all’operazione di mostrare un fumetto contenente una stringa html (tramite il comando openInfoWindowHtml).

Come ultimo passaggio preparatorio dobbiamo istanziare l’oggetto GDirections di Google, che ci servirà per calcolare le rotte:

//Create directions module:
directions = new GDirections(map, directionsPanel);

Ora che tutto è pronto dobbiamo preoccuparci di cosa fare quando l’utente premerà sul pulsante “Calcola”:

submitButton.onclick = function() {
    getRoute();
    return false;
}

Definiamo quindi la funzione getRoute():

function getRoute() {
	var userLocation = document.findRoute.partenza.value;
	from = userLocation;
	to  = home;

    directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}

Questa non fa altro che leggere la posizione di partenza dal campo compilato dall’utente e assegnarla alla variabile from e associare il punto base alla variabile to.
La magia avviene infine nell’ultima riga, dove andremo a calcolare la rotta tramite il metodo load del nostro oggetto GDirections.

A questo andremo a passare due parametri: Il primo sarà una stringa contenente le indicazioni nella forma “from:INDIRIZZO_DI_PARTENZA to:INDIRIZZO_DI_ARRIVO” (esattamente a come faremmo nella casella di ricerca in maps.google.it). Il secondo parametro invece è un oggetto che ci permette di specificare varie opzioni, in questo caso la lingua italiana.

Se andiamo a testare il tutto, dovremmo vedere che, una volta scelto un indirizzo di partenza, automaticamente verrà generato un percorso, visualizzato correttamente nella mappa, e generato il percorso passo-passo con tutte le indicazioni. Semplice no?

Demo 1

Ora aggiungiamo qualche funzionalità in più. Per prima cosa vogliamo dare la possibiltà di calcolare anche il percorso di ritorno. Aggiungiamo quindi un checkbox con la dicitura “Calcola percorso di ritorno”:

<h1>Come arrivare</h1>
<form name="findRoute" action="">
	<p>
		<label for="partenza">Da dove parti?</label>
		<input type="text" name="partenza" />
	</p>

	<p>
		<label><input type="checkbox" name="inverti" value="inverti" />Calcola percorso di ritorno</label>
	</p>

	<p>
		<input type="submit" value="Calcola" name="calcola" id="calcola" />
	</p>
</form>

Nel javascript, all’interno di getRoute, andiamo quindi a gestire il caso in cui si voglia invertire la direzione:

function getRoute() {
	var userLocation = document.findRoute.partenza.value;
	var reverse = document.findRoute.inverti.checked;

	if (!reverse) {
		//andata...
		from = userLocation;
		to  = home;
	} else {
		//ritorno...
		from = home;
		to = userLocation;
	}

    directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}

Viene infatti controllato se la checkbox è selezionata oppure no, e in caso positivo vengono invertite le posizioni di partenza e arrivo.

Se visualizziamo l’esempio vediamo quindi che selezionando il checkbox le indicazioni saranno invertite, partendo dal punto base fino alla destinazione inserita dall’utente.

Demo 2

Come ultima personalizzazione andiamo a sostituire l’icona di default con una scelta ad-hoc. Per farlo ci avvaleremo dell’ottimo sito: http://www.powerhut.co.uk/googlemaps/custom_markers.php Il quale ci permette di caricare immagini in gif, jpeg e png per generare il corrispondente marcatore, completo di immagini e javascript.

Nel mio caso il risultato fornito è il seguente:

var myIcon = new GIcon();
myIcon.image = 'markers/image.png';
myIcon.printImage = 'markers/printImage.gif';
myIcon.mozPrintImage = 'markers/mozPrintImage.gif';
myIcon.iconSize = new GSize(65,190);
myIcon.shadow = 'markers/shadow.png';
myIcon.transparent = 'markers/transparent.png';
myIcon.shadowSize = new GSize(160,190);
myIcon.printShadow = 'markers/printShadow.gif';
myIcon.iconAnchor = new GPoint(33,190);
myIcon.infoWindowAnchor = new GPoint(33,0);
myIcon.imageMap = [4...0]; //omesso per questioni di spazio

Per poter utilizzare l’icona dobbiamo modificare leggermente la riga dove viene creato il marker:

//Create marker:
marker = new GMarker(home, {icon:myIcon});

Abbiamo infatti aggiunto l’opzione icon che permette di specificare quale icona utilizzare.

Se visualizzamo quest’ultimo esempio vedremo una simpatica icona al posto del consueto pallino rosso.

Demo 3

La proprietà che andremo ad utilizzare è l’opacità, che è possibile impostare tramite il parametro opacity: 0.5. Il numero, variabile da 0.0 a 1.0, indica il grado di opacità, dove lo zero corrisponde alla trasparenza e l’uno alla piena visibilità. Per impostare quindi uno sfondo semitrasparente è possibile utilizzare questa proprietà associata ad un colore di fondo. Non possiamo tuttavia utilizzarla direttamente nell’elemento che vogliamo rendere semitrasparente, perché l’opacità influisce direttamente anche sul testo, a scapito della leggibilità. Per risolvere il problema sono sufficienti un paio di DIV in più.

Demo

Ipotizziamo di avere un elemento, chiamato "box":

<div id="box">
   Lorem ipsum dolor sit amet consectetuer...
</div>

Per il nostro esempio è necessario aggiungere due div:

<div id="box">
   <div class="box-bg"></div>
   <div class="box-content">
      Lorem ipsum dolor sit amet consectetuer...
   </div>
</div>

Come potete intuire dal nome, il primo servirà da sfondo per il secondo. In questo modo possiamo utilizzare l’opacità solo su quest’ultimo, senza andare ad intaccare il contenuto.

Passiamo al foglio di stile. Come prima cosa, impostiamo un CSS di base:

#box {
   width:600px;
}

.box-bg {
   background:#000;
   opacity:0.5;
}

.box-content {
   padding:10px;
}

Al box assegnamo soltanto ulna larghezza, mentre al box-content assegnamo un padding di 10px. Allo sfondo invece assegnamo un colore (in questo caso nero) e un’opacità al 50% (0.5 su scala da 0 a 1).

Ora però dobbiamo dire allo sfondo di posizionarsi sotto al box-content e di assumere le dimensioni grandi quanto l’intero box. Per farlo ricorriamo ai posizionamenti assoluti e alle dimensioni in percentuale. Ma procediamo con ordine.

Innanzitutto dobbiamo dichiarare position:relative il nostro box, cosicché gli elementi al suo interno si posizionino IN RELAZIONE al div stesso:

#box {
   width:600px;
   position:relative;
}

allo sfondo invece dobbiamo dire di posizionarsi indipendentemente sotto al contenuto, perciò dobbiamo dichiararlo position:absolute, mentre per fare in modo che sia grande quanto il box stesso imposto larghezza e altezza al 100%:

.box-bg {
   background:#000;
   opacity:0.5;
   position:absolute;
   width:100%;
   height:100%;
}

Ora non resta che posizionare anche il contenuto, semplicemente dichiarandolo position:relative. Gli elementi posizionati infatti "vincono" rispetto a quelli non posizionati e di default vengono visualizzati sopra questi ultimi. In questo modo invece il contenuto sarà sopra allo sfondo:

.box-content {
   padding:10px;
   position:relative;
}

Se visualizziamo l’esempio con un browser moderno (ie7, firefox, safari) vediamo l’effetto desiderato (ho inserito uno sfondo per contrasto):

Esempio 1

Naturalmente il problema sorge con IE. Innanzitutto la proprietà opacity viene ignorata, fortunatamente però esiste una proprietà analoga che fa uso del filtro Alpha di Internet Explorer filter:alpha(opacity:50). In questo caso l’opacità viene indicata da 0 a 100.

In secondo luogo in IE6 la proprietà height:100% non viene letta correttamente. Anche in questo caso una feature specifica di IE ci permette di simularne il comportamento. Possiamo infatti utilizzare la funzione expression che permette di eseguire calcoli stile javascript all’interno del css:

height:expression(document.getElementById("box").offsetHeight);

Come si può facilmente intuire questa imposta l’altezza dello sfondo uguale all’altezza esterna (offsetHeight) del box principale ( document.getELementById("box") ).

Il nostro CSS diventa quindi:

#box {
   width:600px;
   position:relative;
}

.box-bg {
   background:#000;
   opacity:0.5;   filter:alpha(opacity=50);
   position:absolute;
   width:100%;
   height:100%;}

.box-content {
   padding:10px;
   position:relative;
}

* html .box-bg {   height:expression(document.getElementById("box").offsetHeight);
}

il prefisso "* html " serve per far sì che quella proprietà venga utilizzata solo da IE 6, in quanto per i browser più recenti non esiste un elemento qualsiasi (*) padre dell’elemento html.

Ora quindi possiamo visionare l’esempio corretto fino a IE 6:

Esempio 2

Come ulteriore esempio ho utilizzato un’immagine al posto del colore, creando quindi un doppio sfondo:

Esempio 3

In quest’ottica infine mostra come Flash possa essere un elemento importante che può contribuire a tutti i livelli di separazione, non solo a quello estetico, mantenendo sempre valido il concetto di progressive enhancement.

Potete seguire il video all’indirizzo:
http://www.viddler.com/explore/carsonified/videos/105/
Mentre le slides sono disponibili qui:
http://www.slideshare.net/danielmall/the-experience-layerfowd-nyc-08-presentation

Grazie a jQuery e la sua estensione jQuery UI è possibile realizzare il medesimo effetto in maniera semplice. In particolare andremo ad utilizzare il plugin "draggable" di jQuery UI.

Demo

L’idea di base è quella di prevedere un DIV contenente l’immagine a bassa risoluzione. Al click su questa immagine, questa viene ingrandita fino alle dimensioni dell’immagine a grande risoluzione e successivamente scambiata con quest’ultima in modo da simulare uno zoom. Tramite la funzionalità "draggable" renderemo trascinabile questa immagine, in modo da poter visualizzare tutte le parti dell’ingrandimento. Il nostro riquadro originale che contiene la foto sarà la "finestra" attraverso cui si vedrà l’immagine ad alta risoluzione sottostante. Sarà inoltre necessario impostare posizionamenti e limiti di trascinamento per garantire che l’immagine non esca dal riquadro.
Ho realizzato una piccola animazione che rappresenta l’idea:

Il riquadro rosso è l’area originale dell’immagine piccola (non rappresentata). L’immagine grande (la foto che vedete nell’animazione) potrà essere trascinata in tutte le direzioni e soltanto la parte all’interno del riquadro rosso sarà visibile, dando l’impressione di un’immagine zoomata su cui effettuiamo il panning. Il riquadro grigio invece rappresenta i limiti entro i quali l’immagine può essere trascinata senza uscire dal riquadro rosso. Vedremo dopo come realizzare tutto ciò.

Ma procediamo con ordine. Per prima cosa realizziamo l’html necessario. Come abbiamo detto realizziamo un DIV contenente l’immagine piccola. Per garantire l’accessibilità anche a chi non ha javascript abilitato, l’inseriamo all’interno di un link che punta all’immagine grande e che ci servirà per identificare il path all’immagine ad alta risoluzione:

<div class="image-zoom">
<a href="img1-big.jpg">
<img src="img1-small.jpg" alt="img1" />
</a>
</div>

Ora che l’html è pronto possiamo procedere con gli opportuni stili css:

.image-zoom { overflow:hidden; width:300px; height:300px; position:relative }
.image-zoom img { position:absolute; }

Come potete vedere ho impostato l’overflow hidden per confinare l’immagine all’interno del riquadro quando viene zoomata (come se fosse una finestra) e le dimensioni coincidenti con la dimensione dell’immagine contenuta. Ho poi aggiunto il posizionamento relative al contenitore e absolute all’immagine, in modo da poterla muovere liberamente nel nostro div.

Ora che abbiamo tutto pronto possiamo procedere all’aggiunta del javascript necessario, il tutto grazie a jQuery e jQuery UI. Andiamo quindi a realizzare la struttura base per realizzare un plugin in jQuery:

(function($){
$.fn.zoom = function(params) {
   var defaults = {
      duration: 200,
      small_width:300,
      small_height:300,
      big_width:1000,
      big_height:1000
   };
   var options = $.extend(defaults, params);
   return this.each(function() {
      //istruzioni del plugin...
   });
}
})(jQuery)

La prima riga e l’ultima riga servono soltanto a garantirci di poter utilizzare la scorciatoia "$" al posto di "jQuery", mentre tramite $.fn.zoom = function(params) { ... } andiamo a realizzare il plugin vero e proprio. La variabile params è l’insieme di opzioni che possiamo impostare all’inizializzazione del plugin, mentre defaults sono i valori di default che il plugin andrà ad utilizzare. Infine uniamo il tutto tramite il metodo $.extend nell’oggetto options, il quale che conterrà i valori di default eventualmente sovrascritti dai parametri passati in params. I parametri di default sono in particolare la durata delle animazioni di zoom-in e zoom-out e le dimensioni dell’immagine a bassa e alta risoluzione (per semplicità ipotizziamo di avere immagini di dimensioni fisse).
Le istruzioni del plugin invece andranno inserite all’interno del ciclo return this.each(function() {...});. Tramite each infatti possiamo inizializzare la funzionalità del plugin a più elementi contemporaneamente.

Il motivo per cui ho deciso di realizzare un plugin anziché semplici istruzioni è che permette di avere un codice riutilizzabile facilmente, permette di scrivere codice molto più ordinato e di estenderne le funzionalità senza dover mettere mano a tutto il flusso di lavoro.

Ma vediamo in dettaglio come sarà strutturato il plugin. In generale prevediamo quattro parti: una prima parte dove andremo a preparare tutte le variabili che ci servono, una seconda parte dove manipolare css e html per preparare le funzionalità del plugin, una terza parte dove andremo a gestire gli eventi dell’utente, richiamando gli opportuni metodi, ed infine un’ultima parte dove andremo ad implementare le varie funzionalità (zoom in, zoom out, drag etc.).

Prima parte

//caching...
var $container = $(this);
var $link = $container.find('a');
var $image = $link.find('img');

//reading some parameters...
var small_path = $image.attr('src');
var big_path   = $link.attr('href');

//status variables...
var dragging = false;
var zoomed   = false;

//calculate correct positioning...
var a_width  = (options.big_width  - options.small_width)  * 2 + options.small_width;
var a_height = (options.big_height - options.small_height) * 2 + options.small_height;

var a_top  = options.big_height - options.small_height;
var a_left = options.big_width  - options.small_width;

La prima sezione serve per fare il "caching" degli elementi utilizzati in modo da semplificarne e velocizzarne l’utilizzo nel resto del plugin. Salviamo poi i path delle immagini a bassa e alta risoluzione che ci serviranno nelle operazioni di zoom-in e zoom-out. Le variabili dragging e zoomed, che impostiamo all’inizio a false, servono per salvare lo stato corrente delle immagini, in particolare se le stiamo trascinando e se sono zoomate o rimpicciolite. Nell’ultima sezione infine calcoliamo i posizionamenti e le larghezze che ci serviranno quando andremo a manipolare il css dell’html.

Seconda parte

$link.css({
    display:'block',
    position:'absolute',
    width: a_width   + 'px',
    height: a_height + 'px',
    top:  '-' + a_top  + 'px',
    left: '-' + a_left + 'px'
});

/* Removing default link behaviour... */
$link.removeAttr('href');

$image.css({
    display:'block',
    position:'absolute',
    width:  options.small_width + 'px',
    height: options.small_height + 'px',
    top: a_top + 'px',
    left: a_left + 'px'
});

Nella seconda parte andiamo a cambiare i css di link e immagine per predisporre la funzionalità di zoom. In particolare il link diventerà il blocco che conterrà lo spostamento dell’immagine grande (il rettangolo grigio nell’animazione). A questo andremo poi a togliere l’attributo href, in modo da eliminare il comportamento standard del link che interferirebbe con il nostro plugin. L’immagine infine viene riposizionata all’interno del tag a in modo da trovarsi in corrispondenza della finestra originale (il rettangolo rosso). Infatti mentre il link è spostato a sinistra e in alto tramite margini negativi, l’immagine viene spostata degli stessi valori (a_top, a_left) ma verso destra e in basso, in modo da trovarsi nel medesimo punto rispetto alla finestra originale. In questo modo avremo già pronti i posizionamenti assoluti per l’animazione.

Terza parte

$image.mouseup(function() {
    if (!dragging) {
        if (zoomed) {
	        zoomOut();
        } else {
    	    zoomIn();
        }
    }
});

L’unico evento che ci interessa gestire è il rilascio del pulsante del mouse. Utilizzando infatti l’evento "mouseup" anziché l’evento "click" possiamo controllare lo stato prima di decidere che operazione compiere. Al rilascio del mouse controllo se sto effettuando il "dragging". Se non sto trascinando, e quindi è un semplice click, effettuo lo zoom-in o lo zoom-out in base allo stato "zoomed", richiamando i due metodi zoomOut() e zoomIn().

Quarta parte

Nella quarta parte andremo ad implementare i metodi zoomOut() e zoomIn() richiamati precedentemente, oltre a quelli che si renderanno necessari successivamente:

function zoomOut() {
    $image.animate({
        width:options.small_width + 'px',
        height:options.small_height + 'px',
        top:  a_top  + 'px',
        left: a_left + 'px'
    }, options.duration, swapWithSmall);
	zoomed = false;
}

function zoomIn() {
    $image.animate({
        width:options.big_width + 'px',
        height:options.big_height + 'px',
        top:  a_top / 2  + 'px',
        left: a_left / 2 + 'px'
    }, options.duration, swapWithBig);
    zoomed = true;
}



Come vedete ogni metodo va ad animare dimensioni e posizionamenti css secondo i valori calcolati nella prima parte. Alla fine dell’animazione vengono richiamati i due metodi per scambiare l’immagine, rispettivamente "swapWithBig" e swapWithSmall":

function swapWithBig() {
	$image.attr('src', big_path);
	$image.draggable({
		containment: 'parent',
		start: handleStartDrag,
		stop: handleStopDrag
	});
}

function swapWithSmall() {
	$image.attr('src', small_path);
	$image.draggable('disable');
}

function handleStartDrag() {
	dragging = true;
}

function handleStopDrag() {
	dragging = false;
}

Questi non fanno altro che cambiare l’attributo src e ad abilitare (nel caso dello zoom-in) o disabilitare (nel caso dello zoom-out) la funzionalità "draggable" di jQuery UI. Come vedete a draggable vengono impostati alcuni parametri:

containment: serve ad impostare i limiti di trascinamento. Nel nostro caso è impostato a parent, e cioè al tag html che contiene l’elemento e quindi il tag a che abbiamo appositamente posizionato e dimensionato proprio per questo scopo.
start: è la funzione che viene eseguita quando inizia il trascinamento. Nel nostro caso è la funzione handleStartDrag che non fa altro che aggiornare la variabile di stato corrispondente (dragging).
stop: è la funzione che viene eseguita alla fine del trascinamento e richiama la funzione handleStopDrag, che aggiorna la variabile dragging.

Il plugin ora è completo, non ci resta che richiamarlo nella nostra pagina tramite la sintassi solita di jQuery:

$(document).ready(function() {
	$('.image-zoom').zoom();
});

Alcuni metodi possono sembrare superflui, ma ho preferito spezzettare il plugin in più funzioni esplicite, ciascuna con funzionalità ben definite, piuttosto che annidare funzioni su funzioni come jQuery a volte induce a fare. Questo semplifica la lettura del codice e soprattutto le successive manipolazioni e revisioni.

Ecco il codice completo del plugin, mentre qui potete vederlo in azione:

(function($) {
$.fn.zoom = function(params) {
	/*
	Zoom jQuery Plugin
	Copyright: (C) 3009 - Francesco Paggin
	Parameters:
		(int) duration: the duration of the zooming animaton
		(int) small_width, small_height: the dimensions of the small thumbnails
		(int) big_width, big_height: the dimensions of the zoomed images
	*/
	var defaults = {
		duration: 200,
		small_width:300,
		small_height:300,
		big_width:1000,
		big_height:1000
	};
	var options = $.extend(defaults, params);

	return this.each(function() {
		//caching...
		var $container = $(this);
		var $link = $container.find('a');
		var $image = $link.find('img');

		//reading some parameters...
		var small_path = $image.attr('src');
		var big_path   = $link.attr('href');

		//status variables...
		var dragging = false;
		var zoomed   = false;

		//calculate correct positioning...
		var a_width  = (options.big_width  - options.small_width)  * 2 + options.small_width;
		var a_height = (options.big_height - options.small_height) * 2 + options.small_height;

		var a_top  = options.big_height - options.small_height;
		var a_left = options.big_width  - options.small_width;

		/*
			INITIALIZATION...
		*/
		$link.css({
			display:'block',
			position:'absolute',
			width: a_width   + 'px',
			height: a_height + 'px',
			top:  '-' + a_top  + 'px',
			left: '-' + a_left + 'px'
		});

		/* Removing default link behaviour... */
		$link.removeAttr('href');

		$image.css({
			display:'block',
			position:'absolute',
			width:  options.small_width + 'px',
			height: options.small_height + 'px',
			top: a_top + 'px',
			left: a_left + 'px'
		});

		/*
			HANDLE EVENTS...
		*/
		$image.mouseup(function() {
			if (!dragging) {
				if (zoomed) {
					zoomOut();
				} else {
					zoomIn();
				}
			}
		});

		/*
			METHODS...
		*/
		function zoomOut() {
			$image.animate({
				width:options.small_width + 'px',
				height:options.small_height + 'px',
				top:  a_top  + 'px',
				left: a_left + 'px'
			}, options.duration, swapWithSmall);
			zoomed = false;
		}

		function zoomIn() {
			$image.animate({
				width:options.big_width + 'px',
				height:options.big_height + 'px',
				top:  a_top / 2  + 'px',
				left: a_left / 2 + 'px'
			}, options.duration, swapWithBig);
			zoomed = true;
		}

		function swapWithBig() {
			$image.attr('src', big_path);
			$image.draggable({
				containment: 'parent',
				start: handleStartDrag,
				stop: handleStopDrag
			});
		}

		function swapWithSmall() {
			$image.attr('src', small_path);
			$image.draggable('disable');
		}

		function handleStartDrag() {
			dragging = true;
		}

		function handleStopDrag() {
			dragging = false;
		}
	});
}
})(jQuery)

Esiste comunque la possibilità di abilitare le trasparenze PNG anche per Internet Explorer 6 e precedenti attraverso vari plugin basati su javascript. In certe occasioni però l’effetto potrebbe servirci per solo un’immagine ed andare ad aggiungere javascript per così poco può essere superfluo.

In realtà tramite CSS e commenti condizionali possiamo intervenire utilizzando le stesse tecniche utilizzate dagli script javascript disponibili. E’ infatti possibile utilizzare i filtri inclusi in IE, in particolare "AlphaImageLoader", per ottenere il medesimo effetto.

Ma ipotizziamo di voler utilizzare uno sfondo semitrasparente per l’header di un sito. Il codice CSS normale, che farà uso del PNG, sarà una cosa del tipo:

<style type="text/css">
#header {
   width:600px;
   height:100px;
   background:url(header.png);
}
</style>

Se andiamo a verificare con Internet Explorer 6 vedremmo però, al posto della trasparenza del PNG, uno sgradevole color grigio. La prima cosa da fare quindi è introdurre un commento condizionale per poter intervenire solo per i browser precedenti a IE7:

<!--[if lte IE 6]>
<style type="text/css">
   /* qui ci va l'hack */
</style>
<![endif]-->

All’interno andiamo quindi a modificare lo sfondo dell’header, rimuovendo l’immagine:

<!--[if lte IE 6]>
<style type="text/css">
#header {
   background:none;
}
</style>
<![endif]-->

Ora possiamo utilizzare il filtro di IE per reintrodurre l’immagine:

<!--[if lte IE 6]>
<style type="text/css">
#header {
   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'header.png',  sizingMethod = 'scale');
}
</style>
<![endif]-->

Come potete vedere passiamo al filtro due parametri: il primo è il sorgente dell’immagine, il secondo è il "sizingMethod", e cioè come l’immagine viene applicata all’elemento. Con l’impostazione "scale" l’immagine viene stirata fino a raggiungere le dimensioni dell’elemento a cui è applicata, mentre con "Crop" viene tagliata se supera le dimensioni dell’elemento.

Rispetto alla gestione normale degli sfondi non abbiamo possibilità di gestire né il posizionamento dello sfondo (background-position) né la sua ripetizione in verticale o orizzontale (background-repeat). Non è quindi possibile avere comportamenti particolarmente avanzati, tuttavia l’effetto è più che sufficiente per tecniche di image-replacement o per sfondi di elementi dalle dimensioni ben precise.

Come ultima cosa è però necessario ripristinare la corretta funzionalità dei link perché applicando i filtri Internet Explorer va a porre l’immagine PNG sopra agli elementi interattivi del sito, inibendo quindi la possibilità di clickare. Per sistemare il tutto però è sufficiente aggiungere la proprietà "position:relative" per portare il link sopra lo sfondo e quindi per renderlo nuovamente clickabile. Per farlo modifichiamo il CSS come segue:

<!--[if lte IE 6]>
<style type="text/css">
#header {
   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'header.png',  sizingMethod = 'scale');
}

#header a {
   position:relative;
}
</style>
<![endif]-->

Come vedete l’effetto è semplice da ottenere anche senza l’ausilio di apposite librerie e nel caso di una o due immagini può essere più comodo gestirle manualmente, risparmiando un po’ di bytes e di pesantezza di caricamento.

CodeIgniter infatti, tramite la classe Routing, si occupa di leggere l’URL digitato e indirizzare all’apposito controller il metodo da eseguire. Ad esempio, digitando l’indirizzo http://www.dominio.com/index.php/nome_controller/nome_metodo/ CodeIgniter andrà a richiamare il controller nome_controller ed eseguirà il metodo nome_metodo. Se invece viene omesso nome_metodo verrà richiamato il metodo di default chiamato index.

Dal punto di vista del codice, un controller non è altro che una classe PHP che eredita dalla classe nativa Controller. Pertanto la sintassi base sarà:

class Mia_classe extends Controller {
    function Mia_classe() { //questo è il costruttore
        parent::Controller(); //richiamo il costruttore della classe “Controller”
    }

    function index() {
        //funzione richiamata di default
    }

    function mia_funzione() {
        //metodo personalizzato
    }
}

i controller vanno di norma salvati nella cartella /system/application/controllers, mentre il nome del file dovrà coincidere col nome della classe, quindi nell’esempio precedente questo dovrà chiamarsi mia_classe.php – Notare l’eliminazione delle maiuscole richiesta dal framework.

Tornando alla nostra applicazione, dato che abbiamo tre entità in gioco avremo bisogno di tre file separati. Ciò non è la regola, in quanto i controller vanno intesi più che altro come azioni da compiere. Nel nostro caso però, dato che andremo ad operare ogni volta su un elemento preciso in maniera abbastanza indipendente, ho preferito separarli in tre controller distinti anziché uno unico.

Partiamo dal controller delle tipologie (che sarà analogo a quello degli stati).

Prendendo come spunto il modello qui sopra, il nostro controller per gli stati sarà del tipo:

class Statuses extends Controller {
    function Statuses() {
        parent::Controller();
        $this->load->model(‘status_model’);
    }

    function index() {
        //funzione richiamata di default
    }
}

Come vedete nel costruttore Statuses() vado a caricare il modello status_model che mi servirà all’interno del controller.

Ora andiamo a popolare il metodo index() che ci servirà per la lista completa degli stati. Per farlo aggiungiamo:

$data[‘statuses’] = $this->status_model->get();
$this->load->view(‘list_statuses’, $data);

La prima riga si occupa di eseguire il metodo get del modello status_model e a salvarne l’output nell’array $data. Nella seconda riga invece andiamo a caricare la vista list_statuses passando i dati da visualizzare. CodeIgniter andrà a cercare la vista list_statuses.php all’interno della cartella /system/application/views. Vedremo in seguito come realizzare la vista, ma per quanto riguarda il Controller abbiamo già ottenuto quello che ci serve.

I prossimi metodi che ci servono sono quelli per interagire col sito. Infatti abbiamo previsto la possibilità di aggiungere, modificare o rimuovere stati direttamente dal sito senza dover accedere al database.

Presupponiamo già di avere un form che invii tramite post i campi necessari (andremo a realizzarlo in una delle viste). Il nostro metodo che chiameremo add() sarà:

function add() {
    if ($this->input->post(‘submit’) {
        //ho fatto il submit...
        $insert[‘name’] = $this->input->post(‘name’);
        $this->status_model->add($insert);
        return $this->index();
    } else {
        //non ho fatto il submit quindi mostro il form...
        $this->load->view(‘add_status’);
    }
}

Innanzitutto vedo se ho già fatto il submit o se invece devo mostrare il form per l’inserimento. Nel primo caso leggo i dati tramite $this->input->post('nome') che è il metodo offerto dalla libreria Input di C.I. per leggere i dati in POST, richiamo il metodo add() del modello per seguire l’inserimento. Una volta concluso mostro la lista degli articoli richiamando il metodo di default $this->index()

La funzione edit() è molto simile, con la differenza che dovendo modificare un preciso stato dovrò specificarlo tramite id. Per farlo basta passare quest’ultimo come parametro al nostro metodo. Nel browser ciò è possibile nella forma: http://www.dominio.com/index.php/mio_controller/metodo/parametro1/parametro2/ etc…

Il metodo diventa quindi:

function edit($id) {
    if ($this->input->post(‘submit’) {
        //ho fatto il submit...
        $insert[‘name’] = $this->input->post(‘name’);
        $this->status_model->edit($insert, $id);
        return $this->index();
    } else {
        //non ho fatto il submit quindi mostro il form...
        $data[‘status’] = $this->status_model->get_single($id);
        $this->load->view(‘add_status’, $data);
    }
}

Come vedete l’unica differenza rispetto all’inserimento sta che nel metodo edit() del modello devo passare anche l’id dell’elemento da modificare. Devo inoltre pre-popolare il form con i valori già esistenti. Posso farlo tramite il metodo get_single($id) del nostro modello, che ci permette di leggere un singolo stato e passarne i dati alla vista.

L’ultimo metodo è quello destinato alla cancellazione di uno stato, ed è molto semplice:

function delete($id) {
    $this->status_model->delete($id);
    return $this->index();
}

Come avrete sicuramente visto non viene effettuato nessun controllo sulla validità dei dati. Questo però sarà facilmente integrabile in un secondo momento tramite ulteriori controlli e la libreria Validation presente in CodeIgniter.

Il controller Types sarà identico a quanto appena visto, con l’unica differenza di nomenclatura tra stati e tipi. Basterà quindi fare copia-incolla dei files e modificare quanto serve.

Anche il controller relativo agli items sarà molto simile, con la differenza che avremo più campi da gestire (non solo il nome) e avremo bisogno di tutti e tre i modelli. Il controller completo è il seguente:

class Items extends Controller {

    function Items() {
        parent::Controller();
        $this->load->model('item_model');
        $this->load->model('type_model');
        $this->load->model('status_model');
    }

    function index() {
        //lista degli elementi nel database
        $data['items'] = $this->item_model->get();
        $this->load->view('list_items', $data);
    }

    function add() {
        if ($this->input->post('submit')) {
            $insert['name']             = $this->input->post('name');
            $insert['code']             = $this->input->post('code');
            $insert['description']      = $this->input->post('description');
            $insert['position']         = $this->input->post('position');
            $insert['type_id']          = $this->input->post('type_id');
            $insert['status_id']        = $this->input->post('status_id');
            $insert['about_the_status'] = $this->input->post('about_the_status');

            $this->item_model->add($insert);
            return $this->index(); //torno all'indice...
        } else {
            $data['types']    = $this->type_model->get();
            $data['statuses'] = $this->status_model->get();
            $this->load->view('add_item', $data);
        }
    }

    function edit($id) {
        if ($this->input->post('submit')) {
            $insert['name']             = $this->input->post('name');
            $insert['code']             = $this->input->post('code');
            $insert['description']      = $this->input->post('description');
            $insert['position']         = $this->input->post('position');
            $insert['type_id']          = $this->input->post('type_id');
            $insert['status_id']        = $this->input->post('status_id');
            $insert['about_the_status'] = $this->input->post('about_the_status');

            $this->item_model->edit($insert, $id);
            return $this->index(); //torno all'indice...
        } else {
            $data['item']     = $this->item_model->get_single($id);
            $data['types']    = $this->type_model->get();
            $data['statuses'] = $this->status_model->get();
            $this->load->view('edit_item', $data);
        }
    }

    function delete($id) {
        $this->item_model->delete($id);
        return $this->index();
    }
}

Anche se più lungo, il concetto è il medesimo dei precedenti. Vorrei soffermarmi semplicemente sulle istruzioni

$data[‘types’] = $this->type_model->get();
$data[‘statuses’] = $this->status_model->get();

presenti sia nel metodo per l’inserimento che per quello per la cancellazione. In pratica andiamo a prepararci in due array l’elenco degli stati e delle tipologie disponibili nel nostro database. Questo ci serve per realizzare delle comode dropdown nei form per i riferimenti esterni. Quando vedremo in dettaglio le viste capiremo meglio come andremo a utilizzarlo.

Nella prossima puntata vedremo in dettaglio le viste, completando il primo step e potendo far funzionare una prima basilare applicazione. In seguito, come già accennato, vedremo come gestire la validazione dei dati.

Puntate precedenti:

1. Introduzione
2. Il database
3. I modelli
4. L’applicazione

Una soluzione valida, compatibile con tutti i moderni browser, è quella di utilizzare la proprietà css min-height per imporre l’altezza minima del contenuto tale da farlo ampliare fino a riempire con il viewport.

Ma procediamo con ordine. Il layout standard potrebbe essere questo:

<body>
    <div id="container">
            <div id="header">
                 Header
            </div>
           <div id="content">
                 Content
            </div>
    </div>
    <div id="footer">
        Footer
    </div>
</body>

Tramite css impostiamo l’altezza minima del container al 100% in modo da farlo occupare tutto lo spazio verticale disponibile. L’altezza viene però calcolata in base a quella degli elementi contenenti il div, quindi dobbiamo impostare al 100% sia il tag body che il tag html:

html, body {
    height:100%;
}

#container {
    min-height:100%;
}

In questo modo però il footer andrà a posizionarsi fuori dall’area visibile (oltre il 100%, per intendersi): occorre quindi recuperare lo spazio necessario. Per farlo utilizziamo un semplice margine negativo pari all’altezza voluta del footer (in pixel o em, come preferite):

html, body {
    height:100%;
}

#container {
    min-height:100%;
    margin-bottom:-100px;
}

Ora però dobbiamo impedire al contenuto di finire sotto al footer che abbiamo portato in primo piano. Aggiungiamo perciò un padding inferiore al content in modo da distanziarlo a sufficienza: è importante quindi che abbia almeno lo stesso valore. Se vogliamo aggiungere un ulteriore spazio basta addizionarlo: (ad es. 110px per un padding inferiore apparente di 10px).

html, body {
    height:100%;
}

#container {
    min-height:100%;
    margin-bottom:-100px;
}

#content {
    padding-bottom:100px;
}

Se provate la pagina con un browser come Firefox o Safari noterete che abbiamo già ottenuto l’effetto desiderato. La proprietà min-height però non è supportata da Internet Explorer 6. Possiamo risolvere facilmente con il noto l’hack che utilizza la proprietà !important. Aggiorniamo quindi il css ed abbiamo finito:

#body {
    height:100%;
}

#container {
    min-height:100%;
    height:auto !important; /*per gli altri browser*/
    height:100%; /*per IE 6*/
    margin-bottom:-100px;
}

#content {
    padding-bottom:100px;
}

Ecco quindi l’esempio finito con poco o molto contenuto. Potete in alternativa scaricare lo zip con i sorgenti.
Ho aggiunto qualche altra istruzione per evidenziare header e footer, ma il css di base è lo stesso.