download esempio

Il problema

Quando inseriamo un’immagine (tipicamente la miniatura di un’immagine più grande) in una pagina web spesso riduciamo la dimensione dell’immagine utilizzando le proprietà css width e height

<img src="immagine.jpg" alt="bla bla" style="width:200px; height: 200px;" />

il che porta al resize operato dal browser che, più o meno, è una schifezza.
L’alternativa è produrre la miniatura utilizzando programmi come Photoshop e Gimp, che scalano e ricampionano correttamente l’immagine.
Spesso però non è possibile costruirsi a mano la miniatura. Innanzitutto perchè è una rottura, e quantomeno duplica il numero di immagini da gestire nel nostro markup. Spesso non possiamo nemmeno sapere a priori quali saranno le immagini, ad esempio nella visualizzazione di gallerie fotografiche uppate da altri utenti.

La soluzione

Asp.Net ci viene in aiuto con la tecnica degli HttpHandler generici.
Senza dilungarci troppo nella presentazione degli handler diciamo semplicemente che un handler è una parte di codice che si occupa di intercettare una particolare richiesta inviata al server e di costruire una risposta adatta.
Possiamo quindi immaginare di costruire una classe che implementa l’interafccia IHttpHandler, in grado di processare un’immagine richiesta in base ad alcuni parametri e riversare nello stream di output una versione modificata della stessa immagine (ovviamente senza modificare l’immagine originale).

La richiesta potrebbe includere una semplice scalatura dell’immagine, un ritaglio di una particolare sezione, l’arrotondamento degli angoli, ecc…

Veniamo al codice

La costruzione di un handler prevede 2 passi fondamentali:
- Scrivere la classe
- Aggiungere l’handler all’insieme degli handlers del nostro sito web.

Un primo abbozzo della classe (che chiameremo imghandler) potrebbe essere il seguente:

namespace Recoding.Web
{
	using System;
	using System.Web;
	using System.Drawing;
	using System.Drawing.Imaging;
	using System.Drawing.Drawing2D;

	public class imghandler : IHttpHandler
	{
		public void ProcessRequest(HttpContext context)
		{

		}

		public bool IsReusable { get { return false; } }
	}
}

Il metodo ProcessRequest è il cuore dell’handler e conterrà il comportamento da seguire per soddisfare la richiesta.
I namespace System.Drawing, System.Drawing.Imaging e System.Drawing.Drawing2D costituiscono l’accesso alle librerie GDI+ che saranno indispensabili per la manipolazione dell’immagine (per una panoramica generale leggete quì).

Ora dobbiamo definire l’handler nel web.config del nostro sito web, per fare in modo che le richieste specifiche vengano dirottate a questa classe:

<httpHandlers>
    <remove verb="*" path="*.asmx"/>
    <add verb="*" path="imghandler.ashx" type="Recoding.Web.imghandler"/>
</httpHandlers>

In questo modo ogni richiesta alla risorsa imghandler.ashx passerà per il nostro ProcessRequest, e saremo in grado di manipolarla.

Definizione dei parametri

Come prima cosa dobbiamo definire cosa l’handler è in grado di accettare come richiesta.
Prevediamo quindi un set di costanti e attributi:

...
public class imghandler : IHttpHandler
{
	public static string _PARAM_IMAGEPATH = "imagepath";
	public static string _PARAM_WIDTH = "width";
	public static string _PARAM_HEIGHT = "height";
	public static string _PARAM_CROP = "crop";
	public static string _PARAM_VERTICALALIGN = "valign";
	public static string _PARAM_HORIZONTALALIGN = "halign";
	public static string _PARAM_DEFAULTIMAGEPATH = "defaultimagepath";
	public static string _PARAM_ROUNDED = "rounded";
	public static string _PARAM_RADIUS = "radius";

	public string imagepath { get; set; }
	public string defaultimagepath { get; set; }
	public string physical_imagepath { get; set; }
	private string imgExtension { get; set; }
	public int width { get; set; }
	public int height { get; set; }
	public bool crop { get; set; }
	public string valign { get; set; }
	public string halign { get; set; }
	public bool rounded { get; set; }
	public int radius { get; set; }

	public void ProcessRequest(HttpContext context) { ... }
...

Con questi parametri una possibile richiesta al nostro handler potrebbe essere costruita nella forma:

<img alt="" src="imghandler.ashx?imagepath=immagine1.jpg&width=200&height=200" />

ad indicare che vogliamo ottenere l’immagine1.jpg scalata (o croppata) a 200 pixel per 200.

Ora possiamo procedere alla scrittura del corpo del metodo ProcessRequest, che come prima cosa dovrà ricavare i parametri passati in querystring, dopodichè procederà all’elaborazione vera e propria, che demanderemo ad altri 2 metodi:

public void ProcessRequest(HttpContext context)
{
	string sImg = context.Request.QueryString[_PARAM_IMAGEPATH];
	physical_imagepath = context.Server.MapPath(sImg.StartsWith("~/") ? sImg : "~/" + sImg);

	width = GenericConverter.TryGetValue<int>(context.Request.QueryString[_PARAM_WIDTH], 0);
	height = GenericConverter.TryGetValue<int>(context.Request.QueryString[_PARAM_HEIGHT], 0);
	crop = GenericConverter.TryGetValue<bool>(context.Request.QueryString[_PARAM_CROP], false);
	rounded = GenericConverter.TryGetValue<bool>(context.Request.QueryString[_PARAM_ROUNDED], false);
	radius = GenericConverter.TryGetValue<int>(context.Request.QueryString[_PARAM_RADIUS], 8);

	defaultimagepath = "";
	if (context.Request.QueryString[_PARAM_DEFAULTIMAGEPATH] != null)
		defaultimagepath = context.Request.QueryString[_PARAM_DEFAULTIMAGEPATH].ToString();

	try
	{
		FileInfo fileImage = new FileInfo(physical_imagepath);
		if (!fileImage.Exists)
		{
			sImg = defaultimagepath;
			physical_imagepath = context.Server.MapPath(sImg.StartsWith("~/") ? sImg : "~/" + sImg);
		}
	}
	catch
	{
		sImg = defaultimagepath;
		physical_imagepath = context.Server.MapPath(sImg.StartsWith("~/") ? sImg : "~/" + sImg);
	}

	// Forzo l'estenzione a png nel caso sia richiesta la stondatura dell'immagine
	// ciò mi consente di avere lo sfondo trasparente nei punti non coperti
	imgExtension = rounded ? ".PNG" : Path.GetExtension(sImg);

	ProcessImage(context);
}

Come si può vedere, la prima operazione è costruire il percorso fisico dell’immagine nel server, se l’immagine non viene trovata si utilizzerà un’immagine di default rappresentata dal parametro _PARAM_DEFAULTIMAGEPATH, che potrebbe ad esempio essere il logo del sito.
Al termine della raccolta parametri viene invocato il metodo ProcessImage, che si occuperà dell’effettiva elaborazione.

NOTA: la classe GenericConverter è un helper contenente dei metodi in grado di tentare una conversione di un dato in un certo tipo, se la conversione riesce viene restituito il valore, altrimenti viene restituito un valore di default passato come parametro. Ho sviluppato la classe all’interno del namespace Recoding.Convert, che occorre aggiungere tra gli using della classe. Il codice dell’helper è il seguente, è piuttosto banale e non mi dilungherò in spiegazioni:

namespace Recoding.Convert
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Globalization;

    public class GenericConverter
    {
        public static T TryGetValue<T>(object p, object defaultValue) where T : IConvertible
        {
            return TryGetValue<T>(p, defaultValue, CultureInfo.CurrentCulture);
        }

        public static T TryGetValue<T>(object p, object defaultValue, IFormatProvider fp) where T : IConvertible
        {
            try
            {
                return (T)Convert.ChangeType(p, typeof(T), fp);
            }
            catch
            {
                return (T)defaultValue;
            }
        }
    }
}

ProcessImage

Uno stub iniziale del metodo prevederà la creazione di una Bitmap dal percorso fisico del file richiesto (indicato nell’attributo physical_imagepath) e si dividerà in due tronconi: la scalatura dell’immagine e il suo ritaglio. La strada da intraprendere viene indicata dal valore dell’attributo crop.

...
public void ProcessImage(HttpContext context)
{
	System.Drawing.Image img = System.Drawing.Image.FromFile(physical_imagepath);

	// Bitmap di partenza
	Bitmap original_image = (Bitmap)img;

	// Seleziono il metodo di elaborazione
	if (crop)
	{
		#region -- crop --
                // TODO
		#endregion
	}
	else
	{
		#region -- scalatura --
                // TODO
		#endregion
	}
}
...

Una piccola nota sul processo di crop.
Solitamente il crop porta ad una selezione di un’area all’interno dell’immagine che può anche essere separata da tutti e 4 i bordi.

Immagini gentilmente concesse da Riccardo Vandoni

Il crop che ho deciso di implementare, invece, ridimensiona l’immagine per far si che almeno una coppia di bordi tocchi sempre l’area selezionata.
In sostanza se abbiamo un’immagine di w500 e h200 e decidiamo di visualizzare una miniatura croppata di w100 e h100 l’handler scalerà proporzionalmente l’immagine per ottenere una miniatura alta 100 e larga 250, taglierà fuori i 150 pixel in eccesso, posizionando il viewport orizzontalmente sulla base del parametro halign.

Ho preferito questo approccio perchè l’handler è stato concepito per la visualizzazione di miniature di foto, e non avrebbe senso selezionare un’area all’interno della foto senza eseguire una scalatura, col rischio quindi di inquadrare un’area priva di significato.
Non escludo comunque la possibilità di implementare in futuro l’altra possibilità.

La scalatura

Ora vediamo come scalare l’immagine, la cosa più semplice.
Partiamo dal presupposto che la scalatura può essere effettuata in 2 modi: modificando una delle due dimensioni dell’immagine e ricalcolando la restante, lasciando invariato il rapporto base/altezza, oppure ridefinendo entrambe le dimensioni, e ciò può portare ad uno stretch dell’immagine.

...
#region -- scalatura --

if (width > 0 || height > 0)
{
	//se solo height=0, l'altezza viene ridotta proporzionalmente alla larghezza
	if (height == 0)
		height = Convert.ToInt32(((float)(width) / (float)(original_image.Width)) * original_image.Height);

	//se solo width=0, l'altezza viene ridotta proporzionalmente alla larghezza
	if (width == 0)
		width = Convert.ToInt32(((float)(height) / (float)(original_image.Height)) * original_image.Width);

	//Ora viene creata la thumbnail e salvata in un output di stream
	using (Bitmap oThumb = new Bitmap(original_image, width, height))
	{
		if (rounded)
		{
			TextureBrush texture = new TextureBrush(oThumb);

			Graphics graphic = Graphics.FromImage(oThumb);
			graphic.Clear(Color.Transparent);
			graphic.CompositingQuality = CompositingQuality.HighQuality;
			graphic.SmoothingMode = SmoothingMode.HighQuality;
			graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
			graphic.FillRoundedRectangle(texture, 0, 0, width, height, radius);
			graphic.Save();
		}
		else
		{
			using (Graphics oGraphic = Graphics.FromImage(oThumb))
			{
				oGraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
				oGraphic.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
				oGraphic.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

				Rectangle oRectangle = new Rectangle(0, 0, width, height);

				oGraphic.DrawImage(original_image, oRectangle);
			}
		}

		//salvo in uno stream di output
		StreamOut(oThumb, context);
	}
}
else
{
	// Se width e height sono entrambi uguali a 0, l’immagine viene salvata nello stream cosi com’è
	StreamOut(original_image, context);
}

#endregion
...

Come si può vedere la prima cosa che facciamo è controllare il valore dei due attributi width e height e ricalcolare se necessario l’attributo mancante.
Se nessuno dei due è valorizzato il processo viene bypassato e verrà restituita in output l’immagine originale.
Se sono presenti dei valori l’immagine viene alterata (proporzionalmente o no), viene quindi generato un oggetto Bitmap che rappresenta la nuova miniatura.

Viene fatto un ulteriore controllo: se l’attributo rounded è uguale a true si procede alla costruzione degli angoli stondati.
Per fare ciò mi sono avvalso del fantastico namespace Plasmoid, sviluppato da Arun Reginald, e che trovate pubblicato su CodeProject a questo indirizzo.
Il namespace contiene dei metodi di estenzione del namespace System.Drawing, uno dei quali è appunto FillRoundedRectangle.

Non mi dilungherò sull’utilizzo delle librerie GDI+, una completa documentazione la trovate all’indirizzo indicato precedentemente.

Il crop

Per quel che riguarda il ritaglio dell’immagine le cose si complicano un pò.
Se ad esempio la miniatura che vogliamo generare ha un rapporto base/altezza diverso da quello dell’immagine originale avremo una delle due dimensioni “esuberante” rispetto alla superficie visualizzata, dovremo operare quindi un riallineamento del viewport.
Potremmo ad esempio voler sempre visualizzare la parte centrale, la sinistra, la destra, e così via, escludendo ciò che eccede il nostro nuovo formato.

Per definire questi allineamenti ci avvarremo degli enumeratori VerticalAlign e HorizontalAlign, comuni ai WebControl, i cui valori saranno intercettati dai parametri _PARAM_VERTICALALIGN e _PARAM_HORIZONTALALIGN.

Il codice della nostra sezione crop sarà il seguente:

...
#region -- crop --
// Se una delle due dimensioni è mancante le rendo uguali
if (width == 0 || height == 0) { width = height = Math.Max(width, height); }

using (Bitmap output_image = new Bitmap(width, height))
{
	// Ricavo dalla request gli allineamenti richiesti.
	// Ovviamente ha senso solo per le immagini croppate.
	valign = context.Request.Params[_PARAM_VERTICALALIGN] ?? VerticalAlign.NotSet.ToString();
	halign = context.Request.Params[_PARAM_HORIZONTALALIGN] ?? HorizontalAlign.NotSet.ToString();

	int new_width, new_height;

	// Calcolo il ratio dell'immagine originale e quello dell'immagine di destinazione
	// Mi occorrono per capire in che asse l'immagine originale risulta esuberante rispetto alla nuova proporsione
	float target_ratio = (float)width / (float)height;
	float image_ratio = (float)original_image.Width / (float)original_image.Height;

	if (target_ratio < image_ratio)
	{
		new_height = height;
		new_width = (int)Math.Floor(image_ratio * (float)height);
	}
	else
	{
		new_height = (int)Math.Floor((float)width / image_ratio);
		new_width = width;
	}

	new_width = new_width > width ? new_width : width;
	new_height = new_height > height ? new_height : height;

	#region -- Offset degli assi, assegno i valori di default (NotSet e Middle/Center) --
	int paste_x = (width - new_width) / 2;
	int paste_y = (height - new_height) / 2;

	// Applico gli allineamenti verticali
	switch ((VerticalAlign)Enum.Parse(typeof(VerticalAlign), valign))
	{
		case VerticalAlign.NotSet:
		case VerticalAlign.Middle:
			// bypass
			break;
		case VerticalAlign.Top:
			paste_y = 0;
			break;
		case VerticalAlign.Bottom:
			paste_y = height - new_height;
			break;
	}

	// Applico gli allineamenti orizzontali
	switch ((HorizontalAlign)Enum.Parse(typeof(HorizontalAlign), halign))
	{
		case HorizontalAlign.NotSet:
		case HorizontalAlign.Center:
			// bypass
			break;
		case HorizontalAlign.Left:
			paste_x = 0;
			break;
		case HorizontalAlign.Right:
			paste_x = width - new_width;
			break;
	}
	#endregion

	if (rounded)
	{
		Bitmap thumb = new Bitmap(width, height);

		Graphics gthumb = Graphics.FromImage(thumb);
		gthumb.CompositingQuality = CompositingQuality.HighQuality;
		gthumb.SmoothingMode = SmoothingMode.HighQuality;
		gthumb.InterpolationMode = InterpolationMode.HighQualityBicubic;
		gthumb.DrawImage(original_image, paste_x, paste_y, new_width, new_height);
		gthumb.Save();

		TextureBrush texture = new TextureBrush(thumb);

		Graphics graphic = Graphics.FromImage(output_image);
		graphic.CompositingQuality = CompositingQuality.HighQuality;
		graphic.SmoothingMode = SmoothingMode.HighQuality;
		graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
		graphic.FillRoundedRectangle(texture, 0, 0, width, height, radius);
		graphic.Save();
	}
	else
	{
		Graphics graphic = Graphics.FromImage(output_image);
		graphic.CompositingQuality = CompositingQuality.HighQuality;
		graphic.SmoothingMode = SmoothingMode.HighQuality;
		graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
		graphic.DrawImage(original_image, paste_x, paste_y, new_width, new_height);
		graphic.Save();
	}

	// Stream out dell'immagine
	StreamOut(output_image, context);
}
#endregion
...

StreamOut

Rimane quindi da definire il metodo StreamOut, che si occuperà di restituire al client l’immagine elaborata, concordamente al suo formato:

public void StreamOut(Bitmap bitmap, HttpContext context)
{
	switch (imgExtension.ToUpper())
	{
		case ".JPEG":
		case ".JPG":
			bitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
			break;
		case ".GIF":
			bitmap.Save(context.Response.OutputStream, ImageFormat.Gif);
			break;
		case ".PNG":
			using (MemoryStream stream = new MemoryStream())
			{
				bitmap.Save(stream, ImageFormat.Png);
				stream.WriteTo(context.Response.OutputStream);
			}
			break;
	}
}

Poichè la png richiede uno stream bidirezionale è necessario eseguire il suo rendering in un MemoryStream, che verrà poi riversato nel Response.OutputStream.

A questo punto abbiamo un handler che può intercettare richieste di vario genere.
Se ad esempio volessimo un’immagine ritagliata a 300 pixel per 300, con angoli stondati di 10 pixel di raggio avremmo la richiesta:

<img alt="" src="imghandler.ashx?imagepath=image.jpg&width=300&height=300&crop=true&rounded=True&radius=10" />

Se volessimo ottenere un’immagine scalata all’altezza di 200 pixel e ricalcolata proporzionalmente scriveremo:

<img alt="" src="imghandler.ashx?imagepath=image.jpg&height=200&crop=false&rounded=false" />

Ulteriori esempi sono presenti in un demo funzionante scaricabile quì.
In un futuro articolo illustrerò come incapsulare quest’handler in un custom control, rendendo più semplice ed elegante il suo utilizzo.

plugin page

livedemo

Questo plugin permette di costruire un navigatore in stile photoshop su di una miniatura, caricando in maniera asincrona l’immagine originale in fullsize. E’ ideale per immagini macro, panoramiche, o per mappe statiche.

La versione attuale (0.5) si trova ancora in fase di beta, come al solito ogni segnalazione di errori o suggerimenti d’implementazione è ben accetta.

Come funziona

Molto banalmente, basta inserire la miniatura nel proprio html, settarne uno pseudo attributo fullsize con il percorso dell’immagine originale, ed eseguire il metodo .magnifier() su di essa.
fullsize, non è un attributo html standard, e probabilmente non lo diverrà mai, ma è semanticamente espressivo, e se non facciamo troppa attenzione alla validazione della nostra pagina web, tanto basta.

Per default il plugin aggiunge il contenitore dell’immagine originale direttamente nel parent del contenitore della miniatura, settandone le dimensioni a 4 volte la miniatura stessa.
Ovviamente questo comportamento è configurabile tramite parametri, descritti estensivamente nella pagina ufficiale del plugin.

HTML:

<img src="miniature.jpg" fullsize="fullsize.jpg" alt="navigator" />

JS, parametri di default:

$("img[fullsize]").magnifier();

Posizioniamo invece la miniatura in alto a destra, e modifichiamo il messaggio di attesa:

$("img[fullsize]").magnifier({
    position: "top-right",
    loadingMessage: "Caricamento in corso..."
});

Compatibilità

E’ stato testato correttamente con Firefox 3.0.x, Opera, Safari, Chrome, e IE6/IE7.

plugin page

livedemo

Showcase è un plugin per jQuery che consente di costruire in maniera semplicissima un moderno slideshow per un set di immagini, consentendo un’ampia personalizzazione .

Edit 02/02/2010: versione 2.0! Tutto nuovo, date un’occhiata alla documentazione.
Edit 27/07/2009: rilasciata la versione 1.0, che implementa la creazione asincrona del set di immagini.

La versione attuale (0.5) si trova ancora in fase di beta, ogni segnalazione di errori o suggerimenti d’implementazione è ben accetta.

Come funziona

Edit 27/07/2009: Vedere le note di rilascio della versione 1.0.

Allo stato attuale il plugin richiede la presenza di un div contenente una serie di tag anchor contenenti a loro volta le immagini che si intende visualizzare. L’attributo alt dell’immagine, poi, viene utilizzato per visualizzare una descrizione dell’immagine.

Ipotizzando la presenza di un div con id showCase1, il metodo per attivare lo showcase è molto semplicemente:

$("#showCase1").showcase();

Nel caso si voglia personalizzare l’aspetto dello showcase sono previsti numerosi parametri (per una descrizione completa consultare la pagina ufficiale del plugin).

Se ad esempio volessimo utilizzare un effetto di slide verticale e numerare i pulsanti di navigazione:

$("#showCase1").showcase({
    animation: { type: "vertical-slider" },
    navigator: { showNumber: true }
});

Ancora, vogliamo che i pulsanti di navigazione compaiano nell’altro angolo dell’immagine, e che siano disposti verticalmente:

$("#showCase1").showcase({
    animation: { type: "vertical-slider" },
    navigator: { showNumber: true,
                     position: "top-left",
                     orientation: "vertical" }
});

Visualiziamo la miniatura delle immagini nei pulsanti di navigazione:

$("#showCase1").showcase({
    animation: { type: "vertical-slider" },
    navigator: { showNumber: true,
                     position: "top-left",
                     showMiniature: true,
                     orientation: "vertical",
                     item: { width: "64px", height: "48px" } }
});

Problemi noti

Il plugin si comporta correttamente con Firefox 3.0.x, Opera, Safari e Chrome, ma con IE6/IE7 si verificano (in maniera casuale, a quanto pare) dei problemi nel caricamento delle informazioni di dimesione delle immagini. Una possibile soluzione sarebbe quella di scolpire larghezza/altezza dello showcase in fase d’istanziazione, prevedendo un paio di parametri in più. Ma ciò non mi convince granchè.

Edit 26/05/2009:
Nella versione 0.5 il problema della lettura delle dimensioni dell’immagine sembra definitivamente risolto.

plugin page

livedemo

Si tratta di un plugin dalla dubbia utilità, ma altamente spettacolare, che consente di evidenziare tramite un’animazione uno o più elementi della pagina.

Potrebbe essere impiegato nell’evidenziazione degli elementi di una form validata, o chissà :)

Come funziona:

Il trucco consiste nel costruire dinamicamente un div che inizialmente ha la dimensione di un contenitore (di default il window) e che viene trasformato fino a boxare l’elemento indicato nel selettore; infine viene rimosso dal DOM.

Il metodo viene applicato banalmente:

$("#myDOMElement").seek();

E ci sono diversi aspetti customizzabili, attraverso i seguenti parametri:

• css (object): espone alcune proprietà CSS
  • backgroundColor, borderColor, borderStyle, borderWidth, position, top, bottom, right, left
• startFrom (jQuery object, default $(window)): indica l’elemento dal quale si esegue il morphing del div.
• animation (object): ciò che riguarda la trasformazione.
  • easeFunction (string, default “swing”): il tipo di funzione easing applicata alla trasformazione, per una raccolta fantastica di funzioni fare
    riferimento a http://gsgd.co.uk/sandbox/jquery/easing/
  • speed (int, default 500): il tempo, espresso in millisecondi, di durata della singola animazione.
• multiple (object): Se il selettore di partenza corrisponde a più elementi del DOM entrano in gioco le seguenti proprietà.
  • simultaneous (bool, default true): indica se l’animazione deve scattare simultaneamente per tutti gli elementi.
  • interval (int, default 800): il tempo, espresso in millisecondi, di intervallo tra l’animazione di un elemento e l’altro.

Compatibilità

jQuery.seek è stato testato con successo su IE6, IE7, Firefox 3.0.x, Safari 3&4, Opera 9.x e Google Chrome.

Contest

Il plugin può anche essere affascinante, ma lascia perplessi per quel che riguarda l’effettivo impiego.
Lanciamo quindi un piccolo contest: chi linkerà una pagina in cui si fa un uso creativo e funzionale del plugin vincerà… niente di che: una nota al merito nella pagina dei plugin di jQuery.

Happy seeking.

download plug-in

livedemo

jqPrint è un plug-in per jQuery che consente di stampare una pagina o una porzione di html partendo da un elemento o un selettore jQuery.

Si basa principalmente sul famoso jPrintArea, di cui abbiamo corretto alcune imperfezioni e a cui abbiamo aggiunto alcune comode funzioni.

Come funziona:

Tutto ciò che bisogna fare è selezionare un elemento jQuery o un selettore e invocare il metodo jqprint():

$("div.toPrint").jqprint();
// . . .
$divToPrint.jqprint();

Otterremo la finestra di dialogo del sistema per la stampa.

Di default il plug-in ricerca tra i CSS della pagina i file con l’attributo media='print' e li importa nel documento da stampare, ciò permette di separare nettamente la presentazione per la normale navigazione col browser e per la stampa.

Update 19/06/2009

Attualmente sono previsti i seguenti parametri:

• debug (bool, default false): permette di visualizzare in fondo al body il contenuto dell’iframe utilizzato per la stampa.
• importCSS (bool, default true): indica al plugin se importare il CSS (con media=’print’, se presente) o se eseguire una stampa grezza del documento.
• printContainer (bool, default true): indica al plugin se stampare anche l’html
  dell’elemento usato come selettore, se settato a false può causare dei problemi nell’applicazione delle regole css.
• operaSupport (bool, default true): attiva un support per la stampa in Opera, effettuando la stampa da un tab temporaneo.

Compatibilità

jqPrint è stato testato con successo con Firefox 3.0.x, IE6, IE7, Safari 3&4, Google Chrome e, dalla versione 0.3, anche in Opera.
Attualmente la stampa dei documenti fra i vari browser presenta alcune diversità. E’ anche completamente dipendente dal CSS. Potrebbe essere interessante capire se siano applicabili delle funzioni di normalizzazione del layout… vedremo con le future release.

Per il momento buona stampa!

A detta dei suoi sviluppatori, infatti, ubiquity ha il compito di “connettere il web con il linguaggio” e ciò si traduce nella possibilità di utilizzare un linguaggio naturale per eseguire una serie di azioni sul web.
Immaginiamo ad esempio di visitare una pagina web in cui viene citato il nome di un film, o di un luogo di cui non conosciamo niente. In condizioni normali dovremmo aprire un altro tab del browser, collegarci a google, yahoo, imdb o quant’altro, incollare il testo da ricercare ed effettuare la ricerca. Con ubiquity possiamo selezionare il testo, premere CTRL+spazio (o la combinazione di tasti configurata) e selezionare uno dei comandi suggeriti, che agiranno in questo caso direttamente sulla selezione, consentendoci velocemente di effettuare una traduzione, una ricerca, una conversione di formato ecc…

E’un esempio piuttosto banale, in realtà ubiquity è molto di più, ma questo non vuol essere un articolo introduttivo sull’utilizzo di ubiquity, è una semplice guida su come costruire un comando di ricerca.
Per l’esattezza l’obiettivo è quello di costruire un comando di ricerca, con preview, per l’ottimo sito di q&a stackoverflow.com.

Come prima cosa dobbiamo accedere alla sezione di configurazione di ubiquity, eseguendo il comando help.
Da quì possiamo accedere alla pagina “Command editor”, che ci consentirà di digitare il codice dei nuovi comandi, che diventeranno immediatamente funzionanti:

Ovviamente avremo bisogno di dare uno sguardo alle command APIs e più precisamente alla libreria CmdUtils.
Fortunatamente, come possiamo constatare, esiste un helper per la creazione di un comando di ricerca standard, il metodo makeSearchCommand, una specializzazione del più generico CreateCommand.

Come possiamo vedere makeSearchCommand accetta 3 parametri: name, urle parser.

Banalmente il name sarà ciò che si dovrà digitare per eseguire il comando una volta che questo sia stato completato; possiamo utilizzare “stackoverflow” per esteso, o il più rapido “so”, che non corrisponde a nessun comando di default.
Per capire invece cosa passare ai parametri “name” e “parser” dobbiamo innanzitutto fare un po di reverse engineering su www.stackoverflow.com.

Proviamo come prima cosa ad eseguire una ricerca direttamente dal sito, ricercando i termini “asp.net”. Notiamo subito che il parametro di ricerca viene passato in querystring componendo il seguente url: “http://stackoverflow.com/search?q=asp.net”.

Possiamo quindi immaginare che il template dell’url, in conformità a quanto indicato nelle API, sarà una cosa del tipo: “http://stackoverflow.com/search?q={QUERY}”, dove il placeholder {QUERY} verrà di volta in volta sostituito dal parametro del nostro comando.

Il parametro parser è un po più complesso. E’ costituito da alcune proprietà attraverso cui possiamo indicare, al parser che si occupa della preview del comando, come interpretare il risultato della ricerca. Vediamo in dettaglio quelle che ci interessano:

• container: indica il contenitore che incapsula i singoli risultati
• title: il titolo del risultato
• preview: cosa mostrare come anteprima
• baseurl: nel caso in cui i link ai risultati siano espressi in indirizzi relativi, rappresenta la parte da rimontare a sinistra dell’indirizzo.

Le proprietà container, title e preview verranno utilizzate dal parser come selettori per generare oggetti jQuery. Quello che ci serve di sapere quindi è la struttura della pagina dei risultati di stackoverflow, e per questo ci basta una sbirciatina all’html con firebug:

Ora sappiamo che il selettore per il container sarà “.question-summary“, quello per il title “h3 a” e quello per la preview “.excerpt“.
Dal codice si nota anche che l’href del link del titolo è un indirizzo relativo, avremo quindi bisogno impostare baseurl a “http://stackoverflow.com”.

Abbiamo tutto ciò che ci serve a questo punto per costruire il comando di ricerca, che risulterà vergognosamente semplice:

CmdUtils.makeSearchCommand({
  name: "stackoverflow",
  url: "http://stackoverflow.com/search?q={QUERY}",
  parser: {container: ".question-summary",
           title: "h3 a",
           preview: ".excerpt",
           baseurl: "http://stackoverflow.com" }
});

Nel momento stesso in cui scriviamo il comando nella finestra Command Editor, se è sintatticamente corretto, diventa immediatamente disponibile in ubiquity. Premiamo quindi CTRL+spazio e scriviamo “stackoverflow” seguito dai termini che ci interessa ricercare.
Come previsto l’area di preview si popolerà con i primi 4 risultati disponibili, numerati per uno shortcut. A questo punto premendo invio eseguiremo la ricerca su un altro tab di firefox, mentre premendo CTRL+ALT+[numero] apriremo un tab direttamente al “baseurl+link” del risultato indicato dal numero del preview.

Ovviamente quest’esempio di comando risulta notevolmente semplificato dalla presenza del metodo makeSearchCommand, ma potrebbero presentarsi necessità più complesse di una semplice ricerca, basta dare un’occhiata ai comandi predefiniti per rendersi conto che abbiamo visto appena la punta dell’iceberg nell’analizzare il lato “developer” di questo interessantissimo componente.

Per ora è tutto. Liberi di commentare.

download esempio

Non molto tempo fa mi sono trovato nella situazione di dover gestire il bind di una lista di elementi in maniera “mista”, ossia dovevo effettuare un primo bind lato server sulla base dei record di un database, e consentire poi all’utente finale di modificare lato client tale lista.

Il progetto in questione era in .NET, avrei potuto effettuare il bind lato server con un asp:Repeater o un qualsiasi altro controllo bindabile.
Lato client avrei potuto utilizzare jQuery per gestire l’input dell’utente rigenerando l’html degli elementi aggiunti, con tutte le chiamate ajax del caso per il salvataggio dei dati sul DB.

Il problema più grosso di questo approccio è che il template utilizzato nel controllo .NET (tipicamente l’ItemTemplate del Repeater) non è esportabile lato client, ciò significa che se avessi dovuto modificare la struttura degli elementi della lista l’avrei dovuto fare su entrambi i fronti, client e server, mantenendoli allineati.
Il bind lato client, poi, avrebbe dovuto essere effettuato allo stesso modo del server, quindi al disallineamento del template si sarebbe aggiunto un eventuale disallineamento delle logiche sui dati.

Non so se la soluzione da me trovata è già standardizzata né pretendo che sia la soluzione a tutti i problemi, analizzeremo in seguito i difetti di tale approccio, ma di sicuro ha una sua eleganza e portabilità.

Questa soluzione “cross” si basa fondamentalmente sull’utilizzo di XML per i dati e di fogli XSL per produrre frammenti di HTML partendo da tali dati, più alcuni accorgimenti per rendere il tutto il più automatico possibile.

Lato server
Per il nostro esempio (scaricabile) ci baseremo su una semplice lista anagrafica modellata dalle seguenti classi:

public class Anagrafiche
{
    public List<Persona> Persone { get; set; }
}

public class Persona
{
    public string Nome { get; set; }
    public string Cognome { get; set; }
    public string Comune { get; set; }

    public Persona() { }
}

Avremo quindi la necessità di presentare una lista di persone e di consentire all’utente di aggiungerne altre, evitando fastidiosi postback e l’utilizzo degli altrettanto fastidiosi UpdatePanel :)

La pagina .aspx contiene un controllo

<asp:Xml ID="xmlData" runat="server" />

che consente di renderizzare un documento XML (o un frammento XHTML, nel nostro caso) passatogli, effettuando eventualmente una trasformazione sui dati.
Avremo poi 2 fogli .XSL per effettuare le trasformazioni, che funzioneranno da template. Il primo è il contenitore della lista, persone.xsl:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="persona.xsl" />
	<xsl:template match="/">
		<div class="persone">
			<span class="title">Lista utenti:</span>
			<xsl:apply-templates select="//Persona" />
			<div style="clear:both;"></div>
		</div>
	</xsl:template>
</xsl:stylesheet>

il secondo rappresenta invece l’elemento dell’anagrafica, persona.xsl:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="Persona">
		<div class="persona">
			<span>
				<xsl:value-of select="Nome" />
			</span>
			<xsl:text xml:space="preserve"> </xsl:text>
			<span>
				<xsl:value-of select="Cognome" />
			</span>
			<span id="comune">
				Comune:
				<xsl:value-of select="Comune" />
			</span>
		</div>
	</xsl:template>
</xsl:stylesheet>

Nell’esempio creo la lista delle anagrafiche a mano, ovviamente i dati possono avere qualsiasi provenienza

Anagrafiche anag = new Anagrafiche();

anag.Persone = new List<Persona>();
anag.Persone.Add(new Persona() { Nome = "Mario", Cognome = "Rossi", Comune = "FantasiaPortamiVia" });
anag.Persone.Add(new Persona() { Nome = "Luigi", Cognome = "Verdi", Comune = "ComeSopra" });

Ora dobbiamo ottenere un documento XML dall’oggetto anag, fortunatamente ci viene in aiuto la serializzazione del .NET.
Modifichiamo le classi Anagrafiche e Persona, aggiungendo i seguenti attributi:

using System.Xml;
using System.Xml.Serialization;
...

public class Anagrafiche
{
    [XmlArray("Persone"), XmlArrayItem(typeof(Persona), ElementName = "Persona")]
    public List<Persona> Persone { get; set; }
}

[XmlRoot("Persona")]
public class Persona
{
	...
}

Ciò ci consentirà, tramite un XmlSerializer di ottenere un documento nel formato richiesto dai fogli XSL.

A questo punto possiamo già realizzare il bind lato server:

protected void Bind_Xml(Anagrafiche anag)
{
    // Serializzatore xml, sulla base della classe Anagrafiche
    XmlSerializer ser = new XmlSerializer(typeof(Anagrafiche));
    string sXml = "";

    // Creo un memorystream in cui riversare la stringa dell'xml, occhio allo using
    using (MemoryStream ms = new MemoryStream())
    {
        ser.Serialize(ms, anag);
        ms.Seek(0, SeekOrigin.Begin);

        StreamReader sr = new StreamReader(ms);

        sXml = sr.ReadToEnd();
    }

    if (sXml != "")
    {
        // Creo un XslTransform.
        // La classe è deprecata, in favore di XslCompiledTransform, ma per un piccolo esempio come questo andrà più che bene,
        // sembra anche più semplice da usare.

        XslTransform xsltRiepilogo = new XslTransform();
        xsltRiepilogo.Load(Server.MapPath("~/xslt/persone.xsl"));

        // Assegno il foglio xslt all'asp:Xml
        xmlData.Transform = xsltRiepilogo;

        // Assegno il documento xml al controllo, che in congiunzione con l'xslt produrrà l'html di cui ho bisogno.
        xmlData.DocumentContent = sXml;
        xmlData.DataBind();
    }
}

la parte a mio avviso più interessante è il processo automatico (con l’utilizzo dell’XmlSerializer) attraverso cui otteniamo il documento XML necessario, che per il nostro esempio sarà:

<?xml version="1.0"?>
<Anagrafiche xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <Persone>
    <Persona>
      <Nome>Mario</Nome>
      <Cognome>Rossi</Cognome>
      <Comune>FantasiaPortamiVia</Comune>
    </Persona>
    <Persona>
      <Nome>Luigi</Nome>
      <Cognome>Verdi</Cognome>
      <Comune>ComeSopra</Comune>
    </Persona>
  </Persone>
</Anagrafiche>

Da notare il fatto che il documento ha appunto il formato dichiarato nelle classi da cui deriva [XmlArray("Persone") ...] e [XmlRoot("Persona")] ci hanno consentito di definire i tag di output.
Questo documento sarà quindi assegnato come stringa a sXml, a sua volta assegnato a xmlData.DocumentContent, come documento XML da elaborare.
La riga

xmlData.Transform = xsltRiepilogo;

definisce invece con quale foglio si vogliono processare i dati.
Basta un’infarinatura di XPath e XSLT per capire che l’output sarà un frammento HTML del tipo:

<div class="persone">
    <span class="title">Lista utenti:</span>
    <div class="persona">
        <span>Mario</span>
        <span>Rossi</span>
        <span id="comune"> Comune: FantasiaPortamiVia</span>
    </div>
    <div class="persona">
        <span>Luigi</span>
        <span>Verdi</span>
        <span id="comune"> Comune: ComeSopra</span>
    </div>
    <div style="clear: both;" />
</div>

Et voilà, abbiamo la prima parte dell’opera.

Lato client
Come dicevamo, vogliamo fare in modo che la lista possa crescere in modo asincrono tramite input inserito dall’utente.
Per far ciò utilizzeremo jQuery, più l’ottimo plug-in Transform che trovate a quest’indirizzo http://plugins.jquery.com/project/Transform, e che effettua lato client (e cross-browser, importante) le stesse operazioni della classe .NET XslTransform.

Come prima cosa dobbiamo configurare un web service che possa gestire le chiamate client, con un metodo che accetti in input nome, cognome e comune, e che ci restituisca quantomeno l’XML necessario ad effettuare la trasformazione con jQuery.

Ovviamente potremmo non passare dal server, tutto dipende da cosa nel dettaglio debba fare la nostra applicazione, ma c’è almeno un buon motivo per farlo: potremo utilizzare la serializzazione .NET su un elemento Persona, creato in base all’input dell’utente, ottenendo automaticamente l’XML che ci occorre per essere trasformato, questa volta non da persone.xsl, ma da persona.xsl.
E questo spiega anche perchè abbiamo creato 2 fogli anzichè uno solo…

Nel mio caso, poi, il passaggio per il web service era obbligato dalla necessità di salvare il record nel database.

Quindi, una volta creato il Web Service assicuriamoci che abbia i seguenti using e attributi:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Xml.Serialization;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
using System.IO;

[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class WebService : System.Web.Services.WebService {
	...
}

A questo punto creiamo una classe per le risposte al client:

[DataContract]
public class jsonResult
{
    [DataMember]
    public bool result { get; set; }

    [DataMember]
    public string xmlItem { get; set; }
}

Gli attributi [DataContract] e [DataMember] ci consentiranno di serializzare in json l’oggetto. Comodo no?
Il metodo per l’aggiunta delle persone, che chiameremo inserisci, è il seguente:

[ScriptMethod(UseHttpGet = false)]
[WebMethod(EnableSession = true)]   // Ci serve per poter recuperare la session
public jsonResult inserisci(string nome, string cognome, string comune)
{
    bool bResult = true;
    string xml = "";

    try
    {
        XmlSerializer ser = new XmlSerializer(typeof(Persona));
        Persona nuovaPersona = (new Persona() { Nome = nome, Cognome = cognome, Comune = comune });

        using (MemoryStream ms = new MemoryStream())
        {
            ser.Serialize(ms, nuovaPersona);
            ms.Seek(0, SeekOrigin.Begin);

            StreamReader sr = new StreamReader(ms);

            xml = sr.ReadToEnd();
        }
    }
    catch
    {
        bResult = false;
    }

    jsonResult json = new jsonResult() { result = bResult, xmlItem = xml };

    return json;
}

L’attributo [ScriptMethod(UseHttpGet = false)] ci permette di effettuare la chiamata al metodo in post.

Nell’html abbiamo intanto creato 3 input text con i seguenti id: txtNome, txtCognome e txtComune; più un button btnAggiungi per eseguire l’inserimento.
Il javascript è nell’esempio notevolmente semplificato, manca ogni tipo di validazione e gestione dell’errore, ma rende comunque l’idea:

$(function() {
    $("#btnAggiungi").click( function() {

        var v_nome = $("#txtNome").val();
        var v_cognome = $("#txtCognome").val();
        var v_comune = $("#txtComune").val();

        var jsonData = JSON.stringify({ nome: v_nome,
                                        cognome: v_cognome,
                                        comune: v_comune });

        $.ajax({
            type: "POST",
            url: "WebService.asmx/inserisci",
            data: jsonData,
            contentType: "application/json; charset=utf-8",
            success: function(resp) {
                var serverResp = JSON.parse(resp);
                var json = serverResp.d;

                if (json.result)
                {
                    $.transform({
                        xmlstr: json.xmlItem,
                        xsl: "xslt/persona.xsl",
                        async: false,
                        success: function(html, xsl, xml, obj) {
                            $(html).insertAfter(".persona:last");
                        }
                    });
                }
                else
                {
                    // Gestione dell'errore
                }
            },
            error: function() { /* Gestione dell'errore */ }
        });
    });
});

Come possiamo vedere viene gestito l’evento click di btnAggiungi, dove vengono raccolti i dati inseriti dall’utente, e tramite la libreria JSON2 (http://www.json.org/js.html) viene generata una stringa sulla base dell’oggetto che racchiude i dati da postare al metodo inserisci del Web Sevice (da notare che gli attributi hanno lo stesso nome dei parametri del metodo).

Viene poi effettuata una chiamata ajax al web service, postando l’oggetto jsonData.
La funzione di success riceve, nella variabile resp, il risultato della chiamata, ne effettua una conversione in oggetto json tramite JSON.parse (lato server l’avevamo serializzato) e verifica che json.d.result sia true (non si è verificato un errore lato server).
A questo punto utiliziamo il plug-in Transform per elaborare json.d.xmlItem che come abbiamo visto contiene l’XML della nuova persona, selezionando come foglio persona.xsl.
Nel success di $.transform, infine, effettuiamo l’append dell’html così ottenuto.

E questa è la fine del giro.

Abbiamo effettuato un bind che si potrebbe definire “cross”, svincolandoci dai template del .NET e creando una soluzione altamente portabile, ligia agli standard (XML, XPath e XSLT) e piuttosto flessibile.

Ovviamente ci sono anche i contro.
- Innanzitutto questo esempio funziona bene con controlli html, ma se volessimo utilizzare controlli Asp.Net nel template XSLT le cose si complicherebbero notevolmente.
- Eventuali paginazioni gestite lato server sono inutilizzabili, al crescere degli elementi dal client non ho controllo sul paginatore.
- Infine non ho idea delle prestazioni generali della soluzione. Come ho già detto la classe XslTransform è stata deprecata in favore della XslCompiledTransform, che risulta più veloce, ma non ho fatto dei test per confrontarle con i template di un controllo bindabile…

Diciamo semplicemente che può essere un interessante esperimento.

Qualche commento, suggerimento o errori da segnalare?

download esempio

Tuttavia possono crearsi situazioni in cui la selezione degli elementi risulta più complessa, creando la necessità di sviluppare specifiche funzioni che applichino una certa logica di selezione.

Fortunatamente esiste un semplice metodo per estendere le potenzialità del framework, creando dei selettori custom, personalizzabili, ed integrabili nelle precedenti espressioni di selezione.

Vediamo come.

Iniziamo con la creazione di un plug-in vuoto, in un file che chiameremo moreselectors.jquery.js, la struttura del plug-in sarà più o meno questa:

(function($) {
    // estensione del namespace jQuery
    $.extend(
        // con questo estendiamo il parser dei selettori jQuery...
        $.expr[":"],
        {
            // aggiungendo una nuova regola e relativa funzione
            espressione: function(e) { ... }
        }
    );
})(jQuery);

La funzione associata alla regola funzionerà da predicato, restituendo true o false determinerà l’inclusione o meno nell’array dei risultati dell’elemento corrente. Il parametro e, o element, indica l’elemento DOM in esame e sono possibili altri 2 parametri i che indica l’indice nell’array della selezione e c che rappresenta i componenti del selettore (come vedremo successivamente).
Una volta che si sarà definita l’espressione e si è incluso il plug-in della pagina la sintassi per il suo utilizzo è quella che ben conosciamo:

$("div:espressione")
// es. filtrerà i div che rispettano il predicato della funzione
$("div:not(:espressione)")
// filtra gli elementi div che non rispettano il predicato

Utiliziamo come esempio questo blocco di html:

...
<div>
<div class="divLevel1">
<div class="divLevel2">a</div>
</div>
<div class="divLevel1" style="border:dotted 1px #dedede;">
<div class="divLevel2">b</div>
</div>
<div class="divLevel1">(vuoto)</div>
<div class="divLevel1" style="background-color:Red;">
<div class="divLevel2">d</div>
</div>
</div>
...

e vediamo come può essere l’espressione per la selezione dell’unico div.divLevel1 senza elementi child, selettore che chiameremo per l’appunto “no-child” (virgolette necessarie, in quanto c’è il carattere -):

...
"no-child": function(e) {
                return $(e).find("*").length == 0;
            }
...
... utilizzo
$("div.divLevel1:no-child")

Ora tentiamo di fare qualcosa di più complicato: selezioniamo il div con lo sfondo rosso:

...
red: function(e) {
    var color = $(e).css("background-color").toLowerCase();
    if (color.indexOf("rgb") == -1)
    {
        return color == "#ff0000" || color == "red";
    }
    else
    {
        var rgb = $(e).css("background-color")
                      .replace("rgb(", "").replace(")", "");
        var componenti = rgb.split(", ");
        return (255 === parseInt(componenti[0], 10))
                && (0 === parseInt(componenti[1], 10))
                && (0 === parseInt(componenti[2], 10));
    }
}
...
... utilizzo
$("#div:red")

In questo caso abbiamo dovuto fare una distinzione tra il modo in cui IE e firefox trattano l’informazione sul colore. In firefox la lettura (quantomeno con jQuery) di un color o di un background-color restituisce la rappresentazione rgb del colore stesso, mentre in IE si ottiene o il nome del colore o la sua rappresentazione esadecimale.

Infine vediamo come può essere creato un semplice selettore con parametri.
Come abbiamo detto prima, il parametro c della funzione di espressione contiene i componenti del selettore, ed è in realtà un array restituito dal parser jQuery il cui contenuto, ipotizzando un selettore nella forma :selettore(parametro) è il seguente:
c[0] -> ':selettore(parametro)'
c[1] -> ':'
c[2] -> 'selettore'
c[3] -> 'parametro'

Detto ciò vediamo come può essere un selettore in grado di selezionare gli elementi con un border-style di un certo tipo:

...
hasBorder: function(e, i, c) {
    // con un'espressione regolare controlliamo che il parametro
    // appartenga a un insieme di valori consentiti
    if (/none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/
        .test(c[3]))
    {
        // poi controlliamo che i 4 border-style corrispondano al
        // parametro indicato
        return ((c[3] == $(e).css("border-right-style")) &&
                (c[3] == $(e).css("border-bottom-style")) &&
                (c[3] == $(e).css("border-left-style")) &&
                (c[3] == $(e).css("border-top-style")));
    }
    else
    {
        return false;
    }
}
...
... utilizzo
$(".divLevel1:hasBorder(dotted)")

…e si potrebbe andare avanti per delle ore facendo esempi più o meno inutili.
I selettori così creati ovviamente coesistono con i selettori standard e niente ci vieta di combinarli come ci pare.
Commenti? Suggerimenti?

Spazieremo dalle tecnologie di base (HTML/CSS) al DHTML (Javascript/jQuery) fino al server-side basato su piattaforma Asp.Net (C#).

Proporremo soluzioni presentate principalmente in forma di tutorial e snippet di codice, correlati da esempi e progetti scaricabili.

A presto per aggiornamenti.