my black tea!

minimalista a chi?

2011-07-17T15:20:00.007+02:00

Lunedì scorso (11 Luglio 2011) sono stato intervistato da Radio Roma Popolare sull'arte minimale (avevano letto il mio articolo di un anno o due fa sull'arte minimale della Panza Collection che scrissi per Gothic Network), e il link col minimalismo era fornito dall'esibizione a Roma di Yann Tiersen, che generalmente è associato con la musica minimale.

A parte il fatto che era la prima volta che venivo intervistato per radio (e sinceramente mi ha fatto un effetto un po' strano, io ho bisogno di vedere l'interlocutore quando ci parlo, specialmente se non lo conosco! il silenzio abissale che circondava le mie parole non è stato molto rassicurante... ma comunque), non sono riuscito esattamente a indirizzare l'intervista come avrei voluto.

in realtà, visto che mi avevano chiesto un'introduzione storico-concettuale alla minimal art, avrei voluto fare un discorso che partiva, come sempre per me, da Duchamp e John Cage, per passare dal Bauhaus, dagli espressionisti astratti, dal suprematismo di Malevitch, da Frank Stella, per introdurre Steve Reich, Roach, Riley, La Monte Young e finire con i Coil di Queens of the Circulating Library! e poi anche le collaborazioni di Sakamoto con Alva Noto e la musica elettronica della Raster-Norton.

io tendo sempre a far iniziare e finire tutto con Duchamp (e altri dadaisti a seconda delle necessità) perché per me quella è la fine di tutta l'arte in senso stretto: Duchamp ha ucciso l'arte e il gesto artistico, e quindi dopo quel niente (un bel recul neantisant alla Sartre) non c'è rimasto proprio nulla da cercare, da trovare, da sperare, da credere e da fare. e infatti pochissimi l'hanno digerita questa pagina di storia, la maggior parte ha fatto finta di nulla ed è andata avanti comunque, creando poi magari delle gran belle opere; ma è come sapere che la vita non ha scopo (in realtà ce l'ha, eccome se ce l'ha, ma è nascosto bene agli occhi dei più), ti rimane un amaro in bocca che fa letteralmente impressione.

il punto comunque sia è che i readymade di Duchamp sono un esempio di minimalismo totale: minimalismo materiale, visto che l'artista non fa niente di concreto; minimalismo concettuale, visto che tutto si riduce ad un solo gesto simbolico (mettere la propria firma su qualcosa di già fatto); minimalismo filosofico, visto che non c'è nessuna ragione per l'aver fatto quel gesto. difficile andare avanti da lì. poi, che alcuni readymades siano semplicemente geniali, è fuori discussione; anche la poesia insita in loro, che spesso passa inosservata, è di sublime gusto (e penso a Pharmacy, a In advance of a broken arm, alla ruota di bicicletta...).

e poi 4'33'' di John Cage! io già m'immagino questo pianista (David Tudor) che entra sul palco, si siede, e chiude il coperchio della tastiera del pianoforte ("tacet"), e sta fermo. ripetere per tre movimenti. il silenzio... più minimalista di così, come si fa? anche da qui, non si può andare avanti molto; si può soltanto, quindi, tornare indietro: anche Satie, con la musique d'ameublement (anni '20) ha qualcosa in più: il concetto di fruizione, anche se in modo diverso da quello dovuto all'intrattenimento. da lì poi nasce tutta l'ambient music. Cage disse a proposito di 4'33'':

They missed the point. There’s no such thing as silence. What they thought was silence, because they didn’t know how to listen, was full of accidental sounds. You could hear the wind stirring outside during the first movement. During the second, raindrops began pattering the roof, and during the third the people themselves made all kinds of interesting sounds as they talked or walked out.

e quindi, da buon seguace Zen, Cage ci ricorda che il punto sta nell'ascoltarsi, nel concedersi un qualche minuto di presenza a se stessi, prima che la coscienza sia di nuovo inghiottita e fatta a brani dagli uncini della società. questo è ottimo minimalismo: il gesto artistico è ridotto davvero all'osso, ma la portata concettuale è forte e filosoficamente inquadrata.

per quel che riguarda il Bauhaus (ma anche per De Stijl), volevo solo ricordare come si ricercasse la purezza del gesto creativo, in termini di colore (Itten), materiali, geometria; la tendenza a semplificare: "less is more", diceva Mies Van Der Rohe. e così ci mettiamo dentro pure l'architettura e il design industriale. quanti di voi hanno una di quelle sedie Wassily di Marcel Breuer? e quanti sanno che le ha disegnate lui? un solo tubo di alluminio piegato a inscriversi in uno spazio cubico. anche questo è minimalismo top class.

e poi, a parte tutti i docenti del primo Bauhaus, vorrei ricordare il mitico quadrato nero di Malevitch: una specie di monolito alla 2001 odissea nello spazio, un buco nero dove tutto confluisce, concettualmente ed emotivamente. dice Blixa Bargeld, in Sabrina:

(Your color) is as black as Malevitch's square
The cold furnace in which we stare
A high pitch on a future scale
It is a starless winternight's tale

It suits you well

It is that black

mi hanno chiesto se gli smart phone sono minimali: immagino vi sarete fatti un'idea di cosa considero io minimale - di sicuro uno smart phone, che addensa tutte le funzioni sociali di una persona in un unico attrezzo tecnologico, sottoponendoci a tutta una serie di sovraccarichi sensoriali e mentali, non può certo essere considerato un "sottrarre", ma solo un "aggiungere": siamo agli antipodi. poi, che il loro design sia spesso pulito e minimale, è un altro discorso.

dal punto di vista musicale, non ho idea di chi in Italia possa definirsi un minimalista. è un po' che ho perso di vista la scena, e me ne scuso con gli ascoltatori dell'intervista. però nella storia della musica, anche se non c'è niente di nuovo dagli anni '70 (che non ho potuto vivere per ragioni anagrafiche, ma che conosco per passione), bisogna dire che i laptop hanno portato una ventata di possibilità nuove nel reame dell'elettronica, e che siamo lontani anni luce, imbrigliati come siamo nel concetto di musica = canzone = intrattenimento, dall'averle esplorate tutte. il glitch, per quanto generalmente ultra noioso, è qualcosa che può inserirsi nell'ambito del minimalismo, con la sua discendenza dall'industrial e con l'utilizzo di ciò che sarebbe considerato un "errore" come materiale sonoro. e poi tutta la drone music.

un sacco di roba, per parlare di minimalismo, vero?

ecco cosa vi siete persi, ascoltatori di Radio Roma Popolare! però io mi sono divertito lo stesso...

edit: e i nothing di Ray Johnson, dove li mettiamo?!

in the middle of the desert...

2011-07-17T11:47:00.003+02:00

Negli ultimi mesi mi sono dato a Tumblr. è quanto più di microblogging io riesca a fare! e come al solito, essendo pigro e avaro, non rebloggo un granché, e posto quasi esclusivamente roba mia (sono una "fonte"). comunque mi rispecchia abbastanza bene, ed il bello di quel tipo di blogging è che riesce a seguire con discreta facilità lo stream of consciousness della persona, spalmato sui giorni e le settimane. meno parole, più autenticità, forse! speriamo...

l'unico "problema", ma solo per me, è la media dell'età dei fruitori, decisamente bassa, siamo intorno ai 15 anni. detto questo comunque ci sono personaggi di grande talento là dentro...

rappresenta bene la società online del momento, specialmente quella americana, e il quadro della situazione è abbastanza disastroso. il problema è semplice, ciascun adolescente è disgregato in milioni di pezzi, ed è chiuso in se stesso in modo impressionante. tumblr rende semplicissimo il nutrire la propria gola emotiva con il pulsante di reblog, che ti consente di appropriarti di qualcosa che non è tuo, ma che senti ti rappresenti. e quindi, milioni di pagine di post che girano senza una parola, perché non ci sono praticamente i commenti liberi. e siccome il tutto gira principalmente per immagini, anche le affermazioni sono spessissimo sovraimposte su foto: generalmente su un'immagine viene stampata un riga o due di testo con un editor grafico qualsiasi (l'estetica grunge ovviamente domina, è la visione dei derelitti). le affermazioni sono per la maggior parte ciniche osservazioni sulla futilità o la mancanza di significato dell'esistenza. il vuoto che si respira dietro questi blog è a volte terrificante...

è interessante poi vedere come i media siano la realtà. il cinema specialmente, e la musica in secundis, sono il materiale grezzo che forma gli usi e i costumi dell'ultima generazione (i digital natives). mi viene in mente Videodrome (1983!), vediamo se trovo quel dialogo: sì, eccolo qua!

The television screen is the retina of the mind's eye.
Therefore, the television screen is part of the physical structure of the brain.
Therefore, whatever appears on the television screen emerges as raw experience for those who watch it.
Therefore, television is reality, and reality is less than television.

dal punto di vista musicale, le buone notizie sono che, almeno in America, l'indie sta vincendo! questo vuol dire che la circolazione di musica non mainstream sta aumentando, anche se a bene vedere, questo era proprio il minimo che potevamo aspettarci. però vedere post di ragazzetti che citano i Bardo Pond o i Clann Zù non è male, per me... ma questo è materiale per un altro post: "la morte della musica popolare".

in ogni caso, ecco qualche tumblelog che vale la pena guardarsi, di tanto in tanto:

In an instant (wonderful polaroids collection/submission)
Mister Chu (one of a kind)
This isn't happiness (graphic design)
Supersonic Electronic (art)

Android Vignette Lomo stuff...

2011-03-03T09:56:00.000+01:00

In questo periodo sono passato a 3 e mi hanno dato un telefono HTC con il quale ho sostituito il mio vecchissimo Nokia...

Una delle prime cose che ho fatto è acquistare Vignette, un'applicazione per fare foto applicandoci effetti vari di simulazione pellicola, che è veramente efficace!

A parte il controsenso di creare effetti Lomo/lo-fi con un aggeggio così tecnologico, rimane il divertimento di avere sempre con sé la possibilità di fare snapshot di questo tipo...

Ilford

Cross/process

Toy camera B/W

Leaky

Toy camera leaky square crop

Infrared 6x6 full bleed

Toy camera 35mm full bleed

Leaky 35mm full bleed

Leaky 6x6

Auguries of Innocence

2011-02-26T16:08:00.001+01:00

Nuova serie ispirata da uno dei miei preferiti di sempre, William Blake:

Ma ti sai drogare solo di Blake? :D
Alessandra

La serie in realtà è nata per impratichirsi con la nuova Nikon D7000!
Sarà composta da tutte le massime degli Auguries of Innocence, per un totale di 65 immagini.

Nella stampa di prova qua sopra ho dimenticato di fare l'embedding della splendida font gotica di famiglia "textura" che avevo usato per il lettering... sarebbe dovuta essere così:

Drupal 6: blocco con dati del 'nodo collegato'

2011-01-30T22:32:00.003+01:00

In questo periodo sono stato davvero indaffarato per le fasi finali del mio lavoro con il Comune di Monsummano Terme, per il quale ho gestito tutta la migrazione a Drupal come interfaccia gestionale: e non solo, stesso lavoro in contemporanea anche per altri tre comuni della Valdinievole (Larciano, Lamporecchio, Pieve a Nievole), che prima erano gestiti in modo associato, ma adesso avevano la necessità di avere piattaforme gestionali indipendenti.

Dato che il layout esteriore è rimasto inalterato, ho dovuto soddisfare una serie di richieste di presentazione di contenuti che non sarebbe stato possibile gestire con le funzionalità di default di Drupal. Ad esempio, oggi farò vedere com'è semplice andare a pescare del contenuto "secondario" e metterlo su un blocco in una regione qualsiasi della pagina.

Nel sito del Comune, ciascuna pagina informativa è di competenza di un certo Ufficio, che a sua volta è rappresentato da un nodo (di un apposito tipo di contenuto). L'Ufficio di competenza deve essere visualizzato in un apposito box sulla colonna destra, completo di tutte le informazioni di pubblica utilità (link, orari d'apertura, recapiti vari).

L'Ufficio è collegato alla pagina tramite un campo CCK 'nodo collegato' a selezione univoca: una tendina consente di scegliere uno qualsiasi dei nodi del tipo 'Ufficio' precedentemente pubblicati.

Il problema da risolvere è caricare i dati di un nodo che non è quello caricato nella pagina, ma bensì un nodo ad essa collegato; inoltre lavorando in un blocco non abbiamo a disposizione la variabile $node con tutti i dati del nodo della pagina.

Dobbiamo quindi caricare prima il nodo principale, e poi, accedendo al campo 'nodo collegato', caricare il nodo collegato ed estrarre i dati che ci servono. A tal fine usiamo la funzione node_load(), che ha bisogno di un NID per poter funzionare.

Per individuare l'ID del nodo principale, sfruttiamo la funzione arg(), che ritorna una parte del path corrente: ad esempio, in una pagina nodo con un path del tipo www.mysite.com/node/nid arg(0) ritorna "node", arg(1) ritorna "nid", e così via.

Tutto il codice che esamineremo da ora in poi va a finire in un bel blocco nuovo da mettere dovunque più ci piaccia.

<?php 
if ( arg(0) == 'node' && is_numeric(arg(1)) ) {
$node = node_load(arg(1));
$node_collegato= node_load($node->field_ufficiocompetenza[0]["nid"]);
// codice per estrarre i dati d'interesse dal nodo collegato
}
?>

La condizione serve per assicurarsi di avere a che fare con una pagina/nodo (ovviamente funziona anche se il path è sotto forma di alias).
Il primo uso di node_load carica il nodo principale, il secondo accede al campo CCK che riporta il NID del nodo Ufficio collegato.Il resto è facile: basta stampare i dati che ci interessano con il markup necessario a formattare il tutto.Quindi il mio blocco "ufficio di competenza" finito e pronto all'uso è:

<?php 
global $base_path;

if ( arg(0) == 'node' && is_numeric(arg(1)) ) {

$node = node_load(arg(1));
$node_collegato= node_load($node->field_ufficiocompetenza[0]["nid"]);
if($node->field_ufficiocompetenza[0]["nid"]>0) {
 print "<div class=\"itemdx\">";
 print "<h2><a href=\"".$base_path.$node_collegato->path."\" title=\"pagina "".$node_collegato->title.""\">".$node_collegato->title."</a></h2>";
 print "<ul>";
 print "<li><b>Settore: </b>".$node_collegato->field_settore[0]["value"]."</li>";
 print "<li><b>Orario: </b>".$node_collegato->field_apertura[0]["value"]."</li>";
 print "<li><b>Responsabile ufficio: </b>".$node_collegato->field_responsabile[0]["value"]."</li>";
 print "<li><b>Telefono: </b>".$node_collegato->field_telefono[0]["value"]."</li>";
 print "<li><b>Fax: </b>".$node_collegato->field_fax[0]["value"]."</li>";
 print "</ul>";
 print "</div>";
}

}
?>

La condizione della riga 8 serve per assicurarsi che vi sia effettivamente un Ufficio collegato; altrimenti il blocco rimane vuoto.

Con lo stesso metodo poi ci si può sbizzarrire a suddividere i contenuti nelle varie regioni tramite altri blocchi.

Drupal + jQuery: galleria fotografica stile ‘filmstrip’

2010-12-22T17:38:00.007+01:00

Per il sito Voilà le Bijou, che espone le creazioni di bigiotteria di Donella Menichini, ho sviluppato su Drupal 6 un semplice tema espositivo basato sui colori del logo (creato da Mauro Luccarini di Cervelli Riuniti), che focalizza tutta l’attenzione sui bijou.

Avendo deciso con Donella di suddividere i bijou in collezioni (dai nomi che richiamano il mondo dell’opera e del teatro), ho deciso di creare per ciascuna collezione un’apposita pagina con la relativa galleria fotografica, fatta in modo tale da avere esposto un singolo bijou per volta, ma con un colpo d’occhio su tutta la collezione.

In pratica, volevo avere un’immagine grande del bijou selezionato in primo piano, e sotto una filmstrip di thumbnails.

Senza andare a scovare moduli dedicati per gallerie fotografiche, ho creato questa semplice visualizzazione basandomi principalmente su Views e Imagecache.

1. Moduli necessari

Views 2 (per creare le pagine contenenti la galleria)
Views Custom Field (per generare del markup ad hoc)
Imagecache (per creare le immagini da visualizzare)

2. Organizzazione preliminare

Il modo più razionale di organizzare il contenuto in collezioni è sfruttare la Tassonomia, creando un vocabolario “Collezioni” e aggiungendovi tutte le collezioni presenti come termini.

Ciascun nodo rappresenta un bijou, ed appartiene soltanto ad una collezione. Può avere una o più immagini allegate, ma soltanto la prima è necessaria per l’esposizione, ed è quella che prenderemo in considerazione (le altre sono visibili solo sulla pagina dedicata al bijou).

Occorre implementare due preset di Imagecache, uno per le thumbnails, e uno per l’immagine grande.

Il primo preset si chiama collezioni_thumb, e ha un’azione Scale And Crop a 80x80, poiché voglio thumbnails quadrate, create a partire dalla foto del bijou.

Il secondo preset si chiama chiama collezioni_full, e ha un’azione Scale a 400x100%, poiché voglio immagini di larghezza 400px (le foto sono tutte in formato 3:2).

3. Costruire la pagina in Views

Poiché le collezioni sono termini di un vocabolario di tassonomia, la pagina che creerò in Views andrà a costituire la visualizzazione predefinita delle pagine taxonomy/term.

Per costruirla, si può partire dalla vista che viene creata con l’installazione di Views, e che fa uso degli argomenti per poter generalizzare le pagine per ogni termine di tassonomia.

L’Argomento necessario da passare alla vista è l’ID del Termine di tassonomia (TID).

Nelle Impostazioni di pagina quindi, Path deve essere settato a taxonomy/term/% dove il ‘%’ è il segnaposto per il TID che viene passato dall’URL (ciò è indipendente dagli URL creati con Pathauto, e funziona lo stesso).

Impostazioni di base: il titolo della pagina è bene che sia settato a %1, che in questo caso indica il valore del TID (e quindi è il nome del termine, cioè della collezione, nel nostro caso).

Lo Stile riga deve essere Campi, perché abbiamo solo bisogno di alcuni dati da passare a jQuery per creare la galleria e gli effetti, e lo Stile va bene che sia una HTML list (nelle opzioni dello stile, i campi devono essere raggruppati per Taxonomy: Termine, e va bene un elenco non ordinato – questo si può settare solo dopo aver inserito il campo corrispondente, vedi oltre).

Filtri: basta che il nodo sia pubblicato (in questo caso, le collezioni sono appannaggio solo dei bijou, e non c’è pericolo che ci vada a finire una pagina o altri tipi di contenuto – altrimenti sarebbe stato opportuno filtrare per tipo di contenuto).

Criteri di ordinamento: per titolo del nodo (visto che le collezioni hanno bijou numerati progressivamente).

Veniamo quindi ai Campi necessari, uno per uno nel loro ordine:

Taxonomy: Termine. Ci serve solo per poter raggruppare i campi nelle opzioni dello stile. Escluso dalla visualizzazione, perché verrà già visualizzato come campo di raggruppamento.
Contenuto: Foto. Sono le foto piccole di ciascun bijou; deve avere le seguenti proprietà:

Collega questo campo al suo nodo (ci serve perché se jQuery fosse disattivato, l’utente comunque potrebbe navigare alla pagina del bijou)
Raggruppa valori multipli, show 1 value from 0 (poiché deve essere visualizzata solo la prima immagine del nodo)
Etichetta: nessuno
Format: collezioni_thumb image (l’immagine piccola, larghezza 80px, che costituisce la thumbnail su cui cliccare per vedere l’immagine grande)

Contenuto: Foto. Un altro inserimento dello stesso campo di cui sopra, perché abbiamo bisogno di inserire nella vista due volte la stessa immagine: la prima come thumbnail, la seconda (questa) come foto grande. Ecco le proprietà necessarie:

Escludi dalla visualizzazione (perché useremo Customfield e jQuery per visualizzare l’immagine dove, quando e come ci pare!)
Raggruppa valori multipli, show 1 value from 0
Etichetta: nessuno
Format: collezioni_full file path (l’indirizzo dell’immagine grande, larghezza 400px, che useremo come parametro per jQuery)

Nodo: Titolo. Il nome de bijou che ci servirà per un’ulteriore formattazione della galleria. Escluso dalla visualizzazione, per passarlo a jQuery.
Customfield: markup. Di per sé il campo consente di inserire del markup a piacere nella vista. Noi lo usiamo per passare dei dati a jQuery, tramite un tag span creato ad hoc. Questo campo deve essere per forza l’ultimo dell’elenco, per poter avere a disposizione tutti i dati estratti dal database grazie alle query fatte coi campi che lo precedono. Ecco come lo formattiamo:

Rewrite the output of this field. Questa proprietà mette a disposizione i dati dei campi precedenti: inseriamo il titolo del nodo e il path dell’immagine grande in uno span:

Testo: <span class="img-link" title="[title]|[field_bijou_foto_fid_1]"></span>
Li mettiamo nell’attributo title di uno span vuoto in modo che l’apparenza della pagina non cambi, ma siano comunque accessibili da jQuery. Tra i due mettiamo un “|” per separare i campi. Tornerà utile più tardi.

Strettamente parlando, il campo customfield (e quindi il modulo Views Custom Field) non sono necessari, poiché l'opzione "Rewrite the output of this field" è disponibile con ogni campo, e quindi potevamo sfruttare quella dell'ultimo tra i campi precedenti. Però in questo modo l'output è più pulito e si separa contenuto da funzionalità aggiuntiva, consentendo una migliore intelligibilità del tutto. Poi fate voi...

Se andiamo a vedere la pagina creata con questa vista, osserveremo soltanto una lista di thumbnails che inviano al relativo nodo.

4. Creazione della galleria con jQuery

4.1 Markup: analisi

Adesso passiamo al codice HTML/CSS: nella cartella del tema, si clona il file page.tpl.php e lo si rinomina in page-taxonomy-term.tpl.php per poter customizzare il codice delle pagine che utilizzeranno la vista appena creata.

L’architettura della lista di thumbnails creata da Views è una lista non ordinata, di cui ciascun elemento è fatto così (questo è il primo):

<li class="views-row views-row-1 views-row-odd views-row-first">  
 <div class="views-field-field-bijou-foto-fid">
  <div class="field-content"><a href="/articoli/callas-01"><img src="http://voilalebijou.com/sites/default/files/imagecache/collezioni_thumb/foto/callas-01/callas1.jpg" alt="" title="Girocollo Callas 01"  class="imagecache imagecache-collezioni_thumb imagecache-default imagecache-collezioni_thumb_default" width="80" height="80" /></a></div>
 </div>

 <div class="views-field-markup">
  <span class="field-content"><span class="img-link" title="Callas 01|sites/default/files/imagecache/collezioni_full/foto/callas-01/callas1.jpg"></span></span>
 </div>
</li>

Cioè, gli <li> sono tutti di classe .views-row e contengono due campi (<div>):

div.views-field-field-bijou-foto-fid, che ha la thumbnail con il link al nodo
div.views-field-markup, che contiene lo <span> con le informazioni sul titolo del bijou e il path della sua immagine grande, che abbiamo creato prima.

Il markup del customfield ha poco senso, mi rendo conto. Purtroppo di base Views non consente una customizzazione dell’output dei vari campi, il cui contenuto è sempre inserito in uno span.field-content, anche quando questo potrebbe creare problemi di validazione (ad esempio se uno volesse inserirvi uno heading o altri elementi block level…). La soluzione più veloce è usare il modulo Semantic Views, che ci consente di scegliere e customizzare i tag che costituiscono i campi visualizzati. Ma qui non è proprio necessario.

Per avere una film strip orizzontale (e non un elenco-lista verticale) ci serve del CSS per gli <li>, nel template della pagina (page-taxonomy-term.tpl.php):

.views-row{
 display: inline-table;
 width: 100px;
}

La proprietà inline-table ci consente di avere ogni thumbnail accanto all’altra in fila, mentre la larghezza ci dà maggiore spaziatura orizzontale.

4.2 Visualizzazione dell’immagine ingrandita con jQuery
Il piano è questo:

inserire un <div> tra il titolo della pagina <h3> e la lista <ul>, dove visualizzare l’immagine grande con il suo titolo, collegati al bijou rappresentato
caricare subito l’ingrandimento della prima thumbnail
collegare il click su ogni thumbnail con l’aggiornamento dell’immagine, sostituendo quella corrente con quella relativa alla thumbnail cliccata.

Finalmente si passa a jQuery, e si procede in questo modo: prima di tutto si devono salvare i dati che ci servono, che sono:

il link al nodo di destinazione
il path dell’immagine grande da caricare
il titolo del nodo da visualizzare insieme all’immagine grande.

Si parte con il primo elemento della lista, perché vogliamo che il suo ingrandimento sia visualizzato al caricamento della pagina. Basta accedere al suo attributo href:

var item = $('.views-row-first a:first').attr('href');

Gli altri due parametri li avevamo inseriti nel title dello <span> creato con il customfield, ma siccome è una sola stringa con due attributi, prima di poterli utilizzare vanno separati. Ecco come si fa:

var rel = $('.views-row-first').find('.img-link').attr('title');
var split = rel.split("|");
var title = split[0];
var imglink = split[1];

Il metodo Javascript split, data una stringa, restituisce un array con i risultati della suddivisione. Il carattere “|” ci è servito come indicatore del punto di suddivisione.

A questo punto basta inserire il contenitore dove caricare l’immagine, che chiamiamo “zoom”:

$('h3').after('<div id="zoom"><a href="' + item + '"><img class="zoom" src="/' + imglink + '" alt="" /></a><a class="desc" href="' + item + '">' + title + '</a></div>');

Il div#zoom lo formattiamo con questo CSS:

#zoom{
 width: 400px; /* la larghezza esatta dell’immagine grande data da Imagecache */
 height: 270px;
 margin: 5px auto;
 position: relative;
}

Al suo interno abbiamo aggiunto due tag <a>: il primo contiene l’immagine, il secondo (.desc) il suo titolo, che formatteremo con un’etichetta, così:

.desc{
 background: url(<?php print $base_path.$directory; ?>/images/fold.png) top left no-repeat; color: #d00000;
 font: 1em Monika, 'Monika italic', "trebuchet ms", sans-serif;
 text-align: center;
 text-decoration: none;
 position: absolute;
 bottom: 50px; right: -3em;
 padding: 1em;
}

Il php nella proprietà background serve per stampare il percorso fino alla cartella del tema, dove c’è l’immagine di sfondo con la “piega” dell’etichetta.

La font “Monika” è un carattere calligrafico molto in sintonia con l’argomento: “Monika italic” è la font che ho creato con Font Squirrel per importarla con il metodo @font-face, mentre il primo “Monika” è il nome standard della font (così se qualcuno ce l’ha già installata sul proprio computer, utilizziamo quella, che di solito viene renderizzata meglio).

Il posizionamento assoluto è relativamente al contenitore div#zoom, che abbiamo dichiarato appositamente come position: relative.

Adesso la pagina visualizza appena caricata l’ingrandimento della prima thumbnail, con un’etichetta col titolo. Ambedue linkano al nodo visualizzato.

Per estendere la funzione d’ingrandimento anche alle altre thumbnail, basta replicare il codice al click di ogni thumb, con qualche piccola modifica:

$('.views-row a').click(function(){
 var itemlink = $(this).attr('href');
 var rel = $(this).parents('.views-row').find('.img-link').attr('title');
 var split = rel.split("|");
 var imglink = split[1];
 var title = split[0];
 $('.zoom').fadeOut(250);
 $('#zoom').html('<a href="' + itemlink + '"><img class="zoom" src="/' + imglink + '" alt="" /></a><a class="desc" href="' + itemlink + '">' + title + '</a>');
 $('.zoom').hide().fadeIn(500);
 return false;
});

Come transizione tra due fotografie, abbiamo inserito un fade out/fade in (in pratica: si nasconde l’immagine facendola dissolvere nel nulla; mentre è nascosta cambiamo l’immagine visualizzata e poi la facciamo ricomparire bella nuova); per il resto lo script è identico nel suo funzionamento.

Return false; serve per impedire al browser di seguire il link alla pagina del nodo: le thumbnail servono solo per ingrandire l’immagine.

Ora la pagina ha tutto ciò che le serve per il funzionamento di base.

4.3 Effetti per la film strip
Aggiungiamo adesso qualche semplice effetto di hover e selezione per le thumbnail. Ecco cosa implementerò:

Le thumbnail, da un’opacità dell’80%, diventeranno completamente opache al passaggio del mouse
Contemporaneamente, si creerà sfumando un bordo rosso
La thumbnail dell’immagine correntemente visualizzata avrà queste due caratteristiche fisse su di sé.

Innanzitutto, un po’ di CSS per l’aspetto di default delle thumbs:

.views-row a img{
 opacity: .8;
 -moz-opacity: .8;
 filter: alpha(opacity=80);
 padding: 1px;
}
.views-row a{
 outline: none;
}

Qualche dichiarazione cross-browser per l’opacità e un padding per creare il “bordo”, che per far prima sarà solo un cambio di background-color. Ho tolto l’outline dai link delle thumb perché è antiestetico quando un link non fa lasciare la pagina.

Passiamo al comportamento delle thumb quando il puntatore ci passa sopra. Ecco il codice jQuery, basta anteporlo a quello che abbiamo scritto prima per la visualizzazione dell’immagine ingrandita:

$('.views-row a').hover(
 function(){
  $(this).children('img').animate({
   opacity: 1,
   backgroundColor: "#d00000"
  }, 300);
 },
 function(){
  $(this).children('img').animate({
   opacity: .8,
   backgroundColor: "#000"
  }, 300);
 }
);

L’unica cosa da notare qui è che per far funzionare l’animazione del background-color (che grazie al padding di cui sopra ci dà l’illusione di creare un bordo attorno all’immagine) è necessario inserire il plugin jquery.color, ad esempio inserendo nel file .info del tema Drupal la seguente dichiarazione (in questo modo però verrà caricato in ogni pagina – cosa che nel mio progetto è sicuramente desiderabile):

scripts[] = scripts/jquery.color.min.js

(ovviamente dopo aver messo il file dichiarato nella sottocartella indicata della directory del tema, che nel mio caso è “scripts”).

La versione del plugin che ho indicato è ottimale perché funziona anche con Safari (altre non vanno).
Adesso, per cambiare le proprietà della thumbnail relativa all’immagine corrente, creiamo una classe CSS che appiopperemo di volta in volta alla thumb cliccata:

.current img{
 opacity: 1 !important;
 -moz-opacity: 1 !important;
 filter: alpha(opacity=100) !important;
 background-color: #d00000 !important;
}

Le dichiarazioni !important ci servono per passar sopra ai settaggi imposti da altre operazioni dello script jQuery.

Per attaccarla/staccarla dalle thumb man mano che vengono cliccate usiamo i metodi jQuery addClass/removeClass. Per prima cosa si attribuisce alla prima thumbnail, quella dell’immagine che è visualizzata di default:

$('.views-row-first a').addClass('current');
var item = $('.views-row-first a').attr('href');
/* [...] */

e poi nell’evento click di ciascun thumb:

.click(function(){
 $('.views-row').find('.current').removeClass('current');
 $(this).addClass('current');
 var itemlink = $(this).attr('href');
/* [...] */

Con questo abbiamo finito!

5 Script completo
Ecco quindi lo script completo che abbiamo costruito passo passo:

$(document).ready(function(){

$('.views-row-first a').addClass('current');
var item = $('.views-row-first a').attr('href');
var rel = $('.views-row:first').find('.img-link').attr('title');
var split = rel.split("|");
var imglink = split[1];
var title = split[0];
$('h3').after('<div id="zoom"><a href="' + item + '"><img class="zoom" src="/' + imglink + '" alt="" /></a><a class="desc" href="' + item + '">' + title + '</a></div>');

$('.views-row a').hover(
 function(){
  $(this).children('img').animate({
   opacity: 1,
   backgroundColor: "#d00000"
  }, 300);
 },
 function(){
  $(this).children('img').animate({
   opacity: .8,
   backgroundColor: "#000"
  }, 300);
 }
).click(function(){
 $('.views-row').find('.current').removeClass('current');
 $(this).addClass('current');
 var itemlink = $(this).attr('href');
 var rel = $(this).parents('.views-row').find('.img-link').attr('title');
 var split = rel.split("|");
 var imglink = split[1];
 var title = split[0];
 $('.zoom').fadeOut(250);
 $('#zoom').html('<a href="' + itemlink + '"><img class="zoom" src="/' + imglink + '" alt="" /></a><a class="desc" href="' + itemlink + '">' + title + '</a>');
 $('.zoom').hide().fadeIn(500);
 return false;
});

});

Ed ecco anche il CSS:

.views-row{
 display: inline-table;
 width: 100px;
}
.views-row a{
 outline: none;
}
.views-row a img{
 opacity: .8;
 -moz-opacity: .8;
 filter: alpha(opacity=80);
 padding: 1px;
}

#zoom{
 width: 400px;
 height: 270px;
 margin: 5px auto;
 position: relative;
}
.desc{
 background: url(<?php print $base_path.$directory; ?>/images/fold.png) top left no-repeat; color: #d00000;
 font: 1em Monika, 'Monika italic', "trebuchet ms", sans-serif;
 text-align: center;
 text-decoration: none;
 position: absolute;
 bottom: 50px; right: -3em;
 padding: 1em;
}

.current img{
 opacity: 1 !important;
 -moz-opacity: 1 !important;
 filter: alpha(opacity=100) !important;
 background-color: #d00000 !important;
}

beloved snow

2010-12-17T21:09:00.000+01:00

Oggi ho passato il mio non-pomeriggio intrappolato in auto cercando di andare da A a B.

a Holga trip of sorts (II)

2010-10-12T12:25:00.001+02:00

Pistoia Festival 2010

2010-07-26T10:15:00.001+02:00

Collaborando con gli amici Mauro Luccarini e Chiara Belliti di Cervelli Riuniti, abbiamo creato il blog ufficiale del Pistoia Festival 2010, www.pistoiafestival.it.

Su design di Mauro (che ha creato anche il logo del Festival e tutta l'immagine coordinata), io mi sono occupato dello sviluppo web, mettendo su un bel blog Wordpress.

L'idea è quella di avere ogni giorno un post che descriva il programma del giorno stesso, così da fornire una base d'informazioni attendibile e sempre aggiornata. La redazione (formata da Chiara, Alessio Innocenti e Donella Menichini) si occupa anche di creare approfondimenti sui vari personaggi del Festival (come ad esempio su alcuni dei protagonisti del Pistoia Blues) e sono state realizzate varie interviste, sia a personaggi noti che a gente comune.

Io invece, rivesto anche il ruolo di fotografo ufficiale, seguendo eventi e documentando interviste e curiosità. Tutto questo per dare uno spaccato più completo e vivo della manifestazione, che dovrebbe coinvolgere la vita estiva di ogni pistoiese.

Eppoi, vale la pena ricordare che è stato possibile realizzare questo blog soltanto grazie ai nostri sponsor locali, che hanno creduto in un'iniziativa per cui le istituzioni non avevano fondi:

Case study: CSDO.it

2010-06-16T15:11:00.000+02:00

Ieri ho finalmente lanciato la nuova veste grafica e strutturale della homepage del Centro Studi Discipline Orientali di Vinci (FI), una Scuola di arti marziali e discipline taoiste.

L'idea iniziale era quella di mantenere bene o male i colori della versione precedente, perché identificativi della Scuola. In realtà, il testo nero su sfondo arancio dell'originale aveva secondo me dei problemi di leggibilità. La sfida è stata quindi trasformare l'effetto finale del sito mantenendone i parametri generali, e credo proprio di esserci riuscito.

Innanzitutto ho studiato a fondo il tema di colori da utilizzare per tutta la progettazione del sito, sfruttando kuler (una web app della Adobe molto utile per sviluppare degli "accordi cromatici", per dirla con la terminologia di Johannes Itten), dove ho creato un accordo a 5 colori, mantenendo l'arancio originale (solo un po' più brillante).

Ecco i colori scelti:


FF8830	A6B06D	589482	8C2423	C72B10

Osservandoli tutti insieme, si nota come il blu-verde centrale sia il più "profondo" di tutti, seguito dal rosso scuro e dal verde, e infine dall'arancio e dal rosso che sono i più brillanti e che svettano sopra tutti gli altri.

Avendo deciso per un layout a tre colonne, alla luce della considerazione di cui sopra ho deciso di usare l'arancio per lo sfondo della colonna principale, per farla svettare sulle altre, e il rosso scuro per quelle sui lati. Su sfondo arancio ho usato testo nero, sulle colonne laterali testo bianco: questo gioco di contrasti dà la giusta importanza anche alle colonne laterali, che sono ben leggibili ed evidenti, ma lascia la supremazia a quella centrale dov'è il contenuto principale.

Il blu-verde, per sua natura, si presta benissimo come colore di sfondo generico della pagina.

Per i link invece, si può usare i rossi per il testo principale e l'arancio ed il verde per le colonne laterali.

Per aumentare la leggibilità del testo, è stato sufficiente applicare un minimo di buonsenso tipografico: il carattere Times New Roman non è veramente confortevole sul web, e l'ho cambiato con un Georgia, che è una delle typeface più eleganti e versatili per i testi online.

Per le dimensioni, ecco la dichiarazione della proprietà CSS font:

#main{
  font: .875em Georgia, Palatino, serif;
}

Su una grandezza di default di 100% (corrispondente generalmente a 16px), impostare una dimensione pari a 0.875em corrisponde ad avere un carattere su schermo di dimensioni pari a 14px.
Per approfondire, questo vecchio articolo su A List Apart può essere utile.
L'ultimo accorgimento per migliorare radicalmente la leggibilità dei testi del sito (che spesso sono molto nutriti e approfonditi) è stata fondamentale la suddivisione in paragrafi. A mio avviso questo accorgimento è obbligatorio sul web, dove non stiamo pubblicando testi ma bensì ipertesti, e dove il lettore molto difficilmente legge tutta una pagina da cima a fondo (come invece farebbe con un libro da lui acquistato).

Per questo tipo di lettura gli appigli visivi sono fondamentali, e suddividere un testo con delle righe bianche di stacco è molto riposante per l'occhio. Oltre a questo, anche usare il grassetto sui termini e le espressioni più caratteristiche semplifica molto l'orientamento del lettore.

Per le barre laterali invece, ho scelto caratteri senza grazie: nella fattispecie, il Geneva:

#right{
  font: .75em geneva, helvetica, verdana, sans-serif;
}

con una grandezza equivalente di 12px. Il Georgia l'ho tenuto per i titoli e per qualche altro elemento particolare.

Infine, per gli heading principali (h1 e h2) ho utilizzato il Trajan, un carattere stupendo che ho introdotto come standard nei design per il Centro Studi. Disegnato da Carol Twombly per la Adobe nel 1989, esso trae origine dai segni alfabetici della Colonna Traiana a Roma, ed ha un'eleganza ed una chiarezza veramente fuori del comune; è disponibile solo in versione maiuscola (normal e bold) e si presta particolarmente bene per dei titoli che si stagliano in cima alle pagine.

TaoTeChing.it

2010-05-28T10:09:00.004+02:00

Sulla scia del "successo" della versione online delle 101 Storie Zen (vedi post precedente) ho costruito, sotto la guida del Maestro di filosofia taoista Marco Montagnani, una nuova versione italiana del Tao Te Ching.

Stavolta l'intenzione era quella di dare libero accesso ad una risorsa completa ed affidabile sull'opera in questione, per chiunque si interessi di questa splendida Filosofia.

Pertanto abbiamo affiancato ad una traduzione senza diritti d'autore (a cura di Luciano Parinetto, 1995) la versione cinese originale (con testo scritto dall'alto in basso, da destra a sinistra) e anche una traslitterazione Pinyin con originale a fronte.

Tutti questi contributi testuali sono stati controllati e sono pertanto attendibili senza problemi.

Stavolta, visto che ci sono tre versioni per ogni capitolo (italiana, originale e traslitterata) ho implementato un sistema di navigazione da tastiera per rendere più snella la consultazione.

Il lettore ha tutto a disposizione sotto le dita della mano destra: con il tasto 'o' si accede all'originale cinese, con 'i' alla versione italiana, con il 'p' alla traslitterazione pinyin; mentre con 'k' e 'l' si va indietro o avanti nei capitoli, e con 'j' si torna all'indice generale. Io lo trovo molto comodo, poi ciascuno giudicherà per sè.

Ovviamente c'è anche una navigazione più tradizionale con link a scomparsa, ma celata dietro un simbolo, perché la mia intenzione era quella di lasciar respirare il testo il più possibile, lasciarlo brillare della sua forza imperitura che da millenni rimane inalterata.

Questo libro è davvero un capolavoro di concisione, forza e ritmo. Basta dare un'occhiata alla versione traslitterata per rendersi conto delle armonie e dei ritmi su cui il testo si basa, con suoni per noi desueti ma non per questo meno capaci di penetrare in profondità. E quando questi ritmi si spezzano, si aprono sezioni libere di grande forza.

È sempre difficile (quando non impossibile) rendere accessibile lo spirito originale di un'opera allorché viene tradotta in altri idiomi. Quest'operazione è pressoché impossibile per il Tao Te Ching, dato il suo carattere oscuro ed ellittico, ma si spera che questa versione così completa possa comunque trasmettere qualcosa di concreto all'avventuroso lettore.

www.taoteching.it

101 storie zen

2010-03-14T15:25:00.000+01:00

Le "101 storie zen" è sempre stato uno dei miei libri preferiti: la semplicità e la scarna eloquenza di quelle storielle mi hanno sempre colpito, fin dalla prima volta che il libretto capitò tra le mie mani un giorno d'estate di vari anni fa, al ritorno in treno da Firenze.
Da allora è stato compagno di viaggio fedele, sia in senso figurato (perché quelle storielle possono essere lette su tanti livelli diversi) sia letterale, perché credo che sia il libro che più facilmente scivola nella mia tasca da viaggiatore, al momento della partenza.

Più che un libro, è una raccolta di aneddoti a tema Zen (una setta di Buddhismo giapponese, derivante dal Buddhismo Chan cinese) ma che svela molto del modo di pensare orientale di tutti i giorni. Questo perché l'ambiente in cui sono maturate queste storie era intriso di queste filosofie fin nei minimi dettagli della vita quotidiana. È filosofia applicata alla vita quotidiana, come sempre dovrebbe essere per non scadere nello sterile esercizio intellettuale. Lo si vede anche nello humour di certi episodi, o nella paradossalità di certe situazioni o di certe azioni. Di sicuro, è un libro che mi diverte molto.

Insomma, ho una specie di debito di gratitudine verso questo libretto, che adesso ho ripagato facendone una versione web.

Il mini-progetto è nato sviluppando il menu per La Buca (vedi il post precedente) dove avevo inventato, daccordo con Hermann, il fantomatico "piatto Zen": una noce sgusciata al centro di un piattone da pizza, con allegata una storiella delle 101 stampata su un singolo A5, a mo' di biglietto della fortuna cinese. Preparando la stampa di queste storielle mi sono accorto che non ce n'è una versione italiana online (a differenza di quella inglese, www.101zenstories.com) e siccome mi avrebbe fatto particolarmente comodo per questo lavoro, ne ho proprio sentito la mancanza.

Come per tutti i libri, una versione online non potrà mai soppiantare quella cartacea, lo sfogliare le pagine, l'aprire a caso, l'averlo in tasca, tutto spiegazzato, i segni dell'uso, ecc. Però può servire per avvicinarsi a queste scintillanti gemme di saggezza imperitura, che ormai sono patrimonio dell'umanità intera.

Quindi, ecco qua.
www.101storiezen.com

un Menu per La Buca

2010-03-06T13:55:00.003+01:00

Martedì scorso ho portato finalmente il menu finito al buon Hermann del pub La Buca (di Pescia, PT), che abbiamo sviluppato nell'ultimo paio di settimane.

È un menu pieghevole in tre parti, formato A3, plastificato in modo da renderlo immortale anche con i clienti più maneschi.

Il lavoro è venuto proprio bene e mi sono divertito un sacco a farlo, perché ho avuto praticamente carta bianca e ho potuto concentrarmi su un design moderno e vivace, in linea con una clientela giovane e dinamica.

Le foto di cui sopra sono della bozza di stampa... alcuni errori di margine sono stati corretti!

Ho sviluppato il tutto con InDesign, creando le immagini in Photoshop (ed esportandole con la trasparenza). Ecco uno screenshot della finestra di lavoro in InDesign:

Molte delle icone le ho disegnate in Illustrator. I segni a "pennarello" che sembrano fatti a mano libera... sono proprio così, con una tavoletta grafica Wacom. Il ritratto di Hermann è opera mia, con fotografia + tradizionale matita, poi inchiostrato in Illustrator e colorato in Photoshop.

Tutto questo rientra poi in un progetto un po' più ampio che ha coinvolto anche il design di un Blogger per il pub, e precedentemente di un volantino: il tutto nello stesso stile grafico, che contrasta in modo grazioso con l'aspetto tradizionale del pub, ma che si allinea bene con il personaggio che lo gestisce e con buona parte degli avventori.

Amarcord di una serata

2010-02-11T12:38:00.001+01:00

Wordpress + jQuery: Newsletter widget

2009-12-29T15:43:00.011+01:00

Oggi vedremo un modo estremamente semplice di implementare (from scratch) un piccolo widget in un qualsiasi tema Wordpress, che consente agli utenti di iscrivere un indirizzo e-mail ad un servizio di newsletter. Il tutto sarà realizzato con jQuery, e non è altro che un'applicazione semplificata di quello che ho affrontato nel post precedente, sulla validazione di form con jQuery.

Ciò che andremo a creare l'ho sviluppato per la nuova versione dinamica del sito del Metodo Xiu Zhen Dao, che usa appunto Wordpress come CMS: il widget in questione è visibile nella barra laterale destra, in una qualsiasi pagina:

In questo caso, per rendere la vita semplice a noi e agli utenti, c'è un solo campo da riempire con il proprio indirizzo e-mail, e il widget riesce a validare correttamente questo campo, ad esempio controllando che sia presente il simbolo '@' e almeno un punto '.' (tutto questo sarà approfondito sotto):

I punti nodali sono due:

Creare la struttura del form in un widget testuale
Inserire il codice necessario al funzionamento del widget tramite un file esterno, da aggiungere al file header.php.

1. Markup HTML
Si deve innanzitutto creare la struttura HTML del form, e va inserita in un widget nuovo, di tipo testo: si va nel pannello di amministrazione di Wordpress, nella sezione Aspetto → Widget, e si sceglie la tipologia Testo ("Testo o HTML libero"). Ecco qua il mio widget compilato:

Il campo titolo del widget deve essere riempito a parte, mentre nel corpo del testo ho inserito il codice di un form assolutamente di base:

<div id="newsletter_form">
 Iscriviti alla newsletter del Metodo XiuZhenDao
 <form action="" method="post" id="form_news">
  <fieldset>
   <input id="email_news" name="email_news" type="text" value="la tua e-mail" />
   <input id="submit_news" type="submit" value="iscriviti" />
  </fieldset>
 </form>
</div>

Il CSS utilizzato per formattare il form è praticamente trascurabile, perché basta poco oltre a ciò che è già presente nello stile del tema Wordpress, dove generalmente gli input box e i pulsanti sono già stilati. Questo stile può essere inserito nel documento .css principale del tema, o in un qualunque altro foglio di stile incluso nella pagina dove si inserirà il widget.

/* newsletter widget */
#newsletter_form #email_news{
 width: 130px;
}
#newsletter_form #submit_news{
 margin-top: 5px;
 padding: 2px;
 cursor: pointer;
}
#newsletter_form .catched{
 font-style: italic;
}

La classe .catched ci servirà dopo, nel messaggio di successo.

2. validazione jQuery
È tempo di scrivere lo script di validazione: è sostanzialmente identico a quello che ho usato nel post precedente, ma in più stavolta implementeremo una validazione più professionale per il nostro campo e-mail (visto che è l'unico che abbiamo, stavolta!)

Ecco cosa fa lo script: quando l'utente clicca il pulsante "iscriviti" controlla che il campo sia stato riempito correttamente. Se ciò non si verifica, colora di rosso il campo; altrimenti invia un'e-mail all'amministratore con l'indirizzo inserito e visualizza un messaggio di successo.

(function($){
    $(document).ready(function(){
    
    // newsletter widget
 $('#email_news').click(function() {
  $(this).attr('value', '');
 });
 
 $("#submit_news").click(function() {
 
 // stile errore
 var errorclass = {
  'background' : '#ff435b',
  'color' : '#000',
  'borderColor' : '#000'
 }
 
 // analisi del dato inserito
 var email_news = $("input#email_news").val();
 var ln = email_news.length;
 var atpos = email_news.indexOf("@");
 var dotpos = email_news.lastIndexOf(".");
 
 // validazione campo e-mail
 if ((atpos < 1)||((dotpos - atpos) < 2)||(dotpos == ln-1)) {
  $("input#email_news").css(errorclass).focus();
     return false;
 }

 // passaggio dati, invio e-mail e messaggio di successo
 var dataString = 'email_news=' + email_news;  
 //alert (dataString); return false;
 $.ajax({  
  type: "POST",  
  url: "newsletter.php",  
  data: dataString,  
  success: function() {
   $('#newsletter_form').html("
");  
   $('#message_news').html('Grazie! Hai iscritto  alla newsletter
').append('').hide();
   $('#message_news .catched').html(email_news);
   $('#message_news').fadeIn('slow');
  }  
 });  
 return false;   
 
 });
 
});
})(jQuery);

Diamo una scorsa alla prima parte del codice:

La prima istruzione (righe 5-7) serve soltanto per cancellare automaticamente il testo del campo quando l'utente ci clicca sopra per scrivere il suo dato.
La riga 9 intercetta l'evento del click sul pulsante d'invio per dare inizio alle procedure di validazione.
Le righe 12-16 definiscono una classe CSS che serve per modificare l'aspetto del campo input nel caso di errore.

La validazione del campo e-mail controlla che il dato inserito soddisfi le seguenti condizioni:

Non deve essere nullo
Deve contenere almeno un carattere '@' e almeno un punto '.'
Il carattere '@' non deve essere all'inizio del dato inserito
Il punto '.' deve essere ad almeno un carattere di distanza dopo '@' ma non può stare per ultimo.

Per fa questo, prima di tutto si memorizza il dato inserito dall'utente col metodo val(), e poi si esamina:

se ne calcola la lunghezza col metodo length (riga 20)
si individua la posizione del carattere '@' col metodo indexOf() (riga 21)
si individua la posizione dell'ultimo punto '.' inserito col metodo lastIndexOf() (riga 22).

A questo punto, si può effettuare la validazione: le condizioni sono tutte singolarmente sufficienti a rendere errato un indirizzo e-mail, quindi sono collegate tra loro con un OR (||).

Poiché il metodo indexOf() restituisce -1 se il carattere non è presente e 0 se è in prima posizione, con il controllo atpos < 1 si vede subito sia se '@' esiste o se è per primo
Con dotpos - atpos < 2 ci si assicura che '@' e '.' non siano consecutivi, e che l'ultimo '.' sia a destra di '@'
Con l'ultima condizione, dotpos == ln-1, si controlla invece se il punto '.' è in ultima posizione.

Questa validazione è molto simile a quella suggerita da w3schools.com nell'articolo JavaScript Form Validation.

Se la validazione non passa, si colora di rosso il campo applicandogli la classe .errorclass (riga 26).

Tutto quello che viene dopo riguarda il passaggio dei dati ad uno script php per l'invio dell'e-mail, ed è stato affrontato nel dettaglio nel post sulla validazione di form con jQuery.
In sostanza, si usa il metodo $.ajax, che ci consente anche di visualizzare un messaggio di successo, senza dover ricaricare questa o altre pagine.
Degno di nota, questa volta, l'inclusione del dato memorizzato nel messaggio di successo per l'utente, a conferma di quanto da lui inserito: basta inserire uno <span> con una classe per riconoscerlo (nel mio caso .catched) e passargli il valore memorizzato, col metodo html(val) (riga 40).

3. script PHP
L'ultima cosa da vedere è lo script che invia l'e-mail, e questo sì che è davvero minimale! Io l'ho scritto così:

<?php

$body = "indirizzo e-mail iscritto: ".$_POST['email_news'];
$header = "From: ".$_POST['email_news'];
 
mail("indirizzo@email.dominio", "Newsletter widget", $body, $header);
?>

4. file da includere
Ricapitolando, dopo aver inserito il codice HTML nel widget (sopra al punto 1), si deve inserire un file contenente lo script jQuery che abbiamo visto sopra (al punto 2) nel template header.php (e comunque all'interno dello <head> di ogni pagina su cui sarà visualizzato il widget), ad esempio in questo modo:

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

Poi si deve mettere lo script php all'indirizzo specificato nel campo url del metodo $.ajax (forse la cosa più comoda è inserire un url assoluto dopo aver piazzato il file, ad esempio nella directory del tema di Wordpress).

jQuery: custom form validation

2009-12-06T15:40:00.014+01:00

Avrei anche potuto intitolare questo post "principi di form validation", perché quello che vedremo è come sia possibile scriversi un semplice script di validazione form partendo da zero.
È possibile utilizzare il famoso plugin di jQuery chiamato appunto Validation creato da Jörn Zaeferrer, che aggiunge in maniera molto semplice delle funzioni personalizzabili per validare un form.
Noi qui non utilizzeremo questa strada, ma guarderemo da vicino quali sono i problemi e le necessità cui si va incontro se si vuole validare un form con jQuery, e ne ricaveremo la flessibilità che si ottiene da una maggiore comprensione.

Il nostro scopo finale è avere un form che viene validato senza il bisogno di caricare un'altra pagina e che invii un'email formattata arbitrariamente, e che al contempo sia sufficientemente flessibile da supportare delle variazioni alla ricetta generale.

L'esempio viene dal form contatti che ho implementato nella "tirata a lucido" del sito www.bfelettrotecnica.it, e la base da cui partiremo è pari pari quella proposta in questo tutorial di Net Tuts+ (a opera di Eric), e che consiglio di leggere comunque, prima di cominciare.

1. Markup HTML
Come si vede dall'immagine, il form contiene numerosi campi, molti obbligatori (ma non tutti), un select, una textarea e anche due radio per una selezione esclusiva: si consente all'utente di scegliere se rappresenta un privato oppure un'azienda, e di riempire dei campi che variano in base a questa scelta.

Ecco il codice del form:

<div id="contactform">
<form action="#" method="post">
 <fieldset>
  <legend>Richiesta Informazioni</legend>
  <ol>
   <li>
    <input id="privato" type="radio" value="privato" name="tipologia" /> <span class="radioin">Privato</span><br />
    <label for="nome">Nome e cognome <i>*</i></label>
    <input id="nome" name="nome" type="text" class="obb" />
    <label id='nome_err' class='error'>inserisci il tuo nominativo</label>
   </li>

   <li>
    <input id="societa" type="radio" value="azienda" name="tipologia" /> <span class="radioin">Azienda</span><br />
    <label for="azienda">Ragione sociale <i>*</i></label>
    <input id="azienda" name="azienda" type="text" class="obb" />
    <label id='azienda_err' class='error'>inserisci la ragione sociale</label>
    <label for="referente">Referente <i>*</i></label>
    <input id="referente" name="referente" type="text" class="obb" />
    <label id='referente_err' class='error'>inserisci il nominativo di un referente</label>
   </li>
            
   <li style="margin-top: 15px;">
    <label for="indirizzo">Indirizzo <i>*</i></label>
    <input id="indirizzo" name="indirizzo" type="text" class="obb" />
    <label id='indirizzo_err' class='error'>inserisci l'indirizzo dell'attività</label>  
    <label style="width: 75px;" for="cap">CAP <i>*</i></label>
    <input style="width: 50px" id="cap" name="cap" type="text" class="obb" />
    <label id='cap_err' class='error'>inserisci il codice di avviamento postale</label>
   </li>

   <li>
    <label for="citta">Città <i>*</i></label>
    <input id="citta" name="citta" type="text" class="obb" />
    <label id='citta_err' class='error'>inserisci il nome della città</label>  
    <label style="width: 75px;" for="provincia">Provincia <i>*</i></label>
    <input style="width: 50px;" id="provincia" name="provincia" type="text" class="obb" />
    <label id='provincia_err' class='error'>inserisci la sigla della provincia</label>
   </li>
            
   <li>
    <label for="telefono">Telefono</label>
    <input id="telefono" name="telefono" type="text" />
   </li>

   <li>
    <label for="email">e-mail <i>*</i></label>
    <input id="email" name="email" type="text" class="obb" />
    <label id='email_err' class='error'>inserisci il tuo indirizzo e-mail</label>
   </li>

   <li>
    <label for="area">Area d'interesse</label>
    <select id="area" name="area">
     <option value="void"> </option>
     <option value="centraline">Centraline di Controllo</option>
     <option value="plc">Programmazione PLC</option>
     <option value="Automazione">Automazione Industriale</option>
     <option value="Quadri Elettrici">Quadri Elettrici</option>
     <option value="Impianti Elettrici">Impianti Elettrici</option>
    </select>
   </li>

   <li>
    <label for="messaggio">Messaggio: <i>*</i></label>
    <textarea id="messaggio" name="messaggio" rows="5" cols="38" class="obb"></textarea>
    <label id='messaggio_err' class='error'>scrivi la tua richiesta</label>
   </li>
  </ol>
 </fieldset>
 <span id="input"><input id="submit" type="submit" value="Invia Messaggio" /></span>
 <span style="font-style: italic;">I dati personali verranno trattati nel rispetto della normativa sulla privacy.</span>
</form>
</div>

I punti degni di nota sono:

Nella prima riga, action="#", poiché utilizzeremo jQuery per gestire tutta la parte relativa al passaggio dei dati allo script php che invierà l'email finale.
I tag <label> dalla classe error sono dei messaggi di errore che verranno visualizzati qualora il rispettivo campo obbligatorio non sia stato compilato. Essi sono nascosti di default.
I campi obbligatori sono denotati come al solito dall'asterisco (*), inserito in un tag corsivo <i>, e dalla classe obb.
Il tag <div> che racchiude tutto il form si renderà necessario quando visualizzeremo un messaggio di successo per l'utente.

La classe "error" è dedicata ai messaggi d'errore, mentre la classe "errorinput" è per i campi riempiti erroneamente. Serve qualcosa che salti all'occhio, e in questi casi il colore d'elezione è il rosso. Io ho usato qualcosa di questo tipo, passato attraverso il CSS della pagina:

.error{
 color: red;
 font-style: italic;
 float: left;
}
.errorinput{
 border: 1px solid red;
 background: #ffcbcb;
 color: #000;
 margin-bottom: .5em;
}

La proprietà float mi è necessaria nelle righe con due tag input, per non distruggere il layout del form.

2. jQuery: form validation
2.0 validazione di base

La prima cosa da fare è nascondere i messaggi d'errore e prender possesso dell'evento click sul pulsante di invio del form, per poter eseguire le nostre validazioni, invece di inviare subito i dati:

$(document).ready(function(){

$('.error').hide();

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

// qui ci va tutta la validazione che si attiva quando l'utente intende inviare il messaggio

}

});

E fin qui siamo praticamente pari pari il tutorial di Net Tuts+.

La validazione che viene ora, prevede di controllare ciascun campo input, e se esso risulta vuoto, visualizzare il corrispondente messaggio d'errore.
Net Tuts+ ha solo tre campi, e quindi scrive la funzione di validazione tre volte, una per ciascun campo: siccome io ho un sacco di campi, ho velocizzato il tutto con un bel ciclo.

Per prima cosa, si inizializza una variabile, dataString, che andrà a contenere tutti i dati da passare allo script mail php, e sarà nella forma:

dataString = [nome_campo_1=] + [valore_campo_1] + [&nome_campo_2=] + [valore_campo_2] + ... + [&nome_campo_n=] + [valore_campo_n];

Poi, per analizzare ogni elemento <input> iterando, si usa il metodo each(callback): per ogni tag <input> (che non sia il pulsante d'invio o uno dei due radio all'inizio, e che non sia uno dei campi disabilitati, come vedremo al punto 4, sotto) e per la textarea lo script deve salvare due informazioni: il suo valore (col dato inserito dall'utente), che si ottiene con il metodo val(), e il suo ID. Con quest'ultimo andiamo subito a creare l'ID del corrispondente messaggio d'errore, aggiungendo il suffisso "_err".

Ecco lo script per queste prime operazioni:

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

$('.error').hide();

var dataString = "";

$('input[id!=submit][type!=radio], textarea, select').not('input[disabled]').each(function (i){
 var val = $(this).val();
 var id = $(this).attr("id");
 var err = id + "_err";
});

}

Ho inserito l'istruzione che nasconde i messaggi d'errore anche qui per resettare la validazione ogni volta che si preme il pulsante d'invio.

Ora, la validazione in sé: se il campo è vuoto (val == "") e il campo è obbligatorio (cioè detiene la classe obb), è necessario fare due azioni:

Assegnare la classe d'errore "errorinput" (vista prima) al tag <input> per colorarlo di rosso,
Visualizzare il corrispondente messaggio d'errore, tramite l'ID manipolato poc'anzi.

Se la validazione passa, si memorizza il dato inserito dall'utente accodandolo alla variabile dataString.

Inserendo queste operazioni, il ciclo completo diventa come segue:

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

var dataString = "";

$('input[id!=submit][type!=radio], textarea, select').not('input[disabled]').each(function (i){
 var val = $(this).val();
 var id = $(this).attr("id");
 var err = id + "_err";

// notifica dell'errore per i campi obbligatori
 if ((val == "") && ($(this).is('.obb'))) {
  $(this).addClass('errorinput').focus();
  $("label[id=" + err + "]").slideDown();
     return true;
 } else {
  $(this).removeClass('errorinput'); // rimozione cautelare della classe errore

// memorizzazione dato valutato
  if (i==0) {
   dataString = id + '=' + val;
  } else {  
   dataString = dataString + '&' + id + '=' + val;
  }
 }
});

}

});

Note su quanto inserito:

Sono necessarie due dichiarazioni per la variabile dataString, perché alla prima iterazione (i==0) non si deve anteporre il simbolo '&' al nome del dato che si memorizza.
Il messaggio d'errore, nel mio form, è individuale per ciascun campo. Se avessimo usato un unico tipo di messaggio per tutti i campi, il classico "questo campo è obbligatorio" (come fa Net Tuts+), si sarebbe potuto generarlo in questo punto dello script, risparmiando markup nel corpo della pagina.
Inserire un return true in questo punto significa dire al calcolatore di proseguire con le altre iterazioni del ciclo, senza fermarsi qui (cosa che si sarebbe ottenuta dichiarando return false): a livello pratico, questo vuol dire che tutti gli errori verranno visualizzati contemporaneamente (tutti i campi incompleti diventano rossi e si visualizzano i messaggi corrispondenti). Con return false si evidenzia un errore alla volta, come nel caso del tutorial di Net Tuts+.

Quanto visto finora è sufficiente a validare un form con un qualsiasi numero di campi, riuscendo a distinguere tra valori obbligatori o meno.

2.1 Radio buttons

Adesso si deve implementare la funzione dei pulsanti "radio" che consentono di scegliere tra "privato" e "azienda".
Il concetto è che l'uno esclude l'altro, e quindi se si riempie il campo di "privato" non si riempiono quelli di "azienda", e viceversa. Farlo capire al validatore è importante, perché sono tutti campi obbligatori!

In questo caso lo script deve solo ricordare all'utente di effettuare la scelta, la validazione dei campi risultanti è già stata implementata sopra.

Pertanto aggiungiamo un paio di righe all'inizio della funzione:

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

var dataString = "";

if ( (! $('#privato').is(':checked')) && (! $('#societa').is(':checked')) ) {
 $('.radioin').css('color' , 'red').append('&nbsp;&larr;');
 $('ol li:first').after('scegli se rappresenti un privato o un\'azienda');
 $('#radioerror').hide().slideDown('normal');
 return false;
}

//segue ciclo di validazione come visto sopra

Lo script non fa che controllare se nessuno dei radio è cliccato, allorché colora di rosso i titoli (e ci appende pure una freccia per meglio evidenziarli) e visualizza un messaggio.
Il return false fa sì che lo script si interrompa e nessun'altra validazione venga effettuata se l'utente prima non compie la sua scelta: i campi da validare infatti cambiano, come abbiamo detto.

3: Invio email
3.0 Preliminari
La parte di invio dell'email tramite un file php esterno è esattamente uguale a quella esposta nel tutorial di Net Tuts+, che fa utilizzo del metodo $.ajax.

Prima però di passare i dati al php, si deve inserire un'istruzione che blocchi lo script se esistono ancora errori nella compilazione del form:

if ($('.error').is(':visible')) {
 return false;
}

Poi, in fase di sviluppo, è utilissimo il suggerimento di Net Tuts+ di inserire un alert che stampi il contenuto di dataString, per controllare che siano stati memorizzati correttamente tutti i dati necessari:

alert (dataString); return false;

Questa riga verrà ovviamente commentata nella versione finale dello script!

3.1 Posting dei dati con jQuery
Adesso possiamo finalmente vedere come passare i dati all'invio email e visualizzare un messaggio di "successo" per l'utente:

$.ajax({
 type: "POST",  
 url: "email.php",  
 data: dataString,  
 success: function() {
  $('#contact_form').html('
');  
  $('#successo').html('messaggio inoltrato correttamente
')
  .append('sarai contattato appena possibile.
').hide().fadeIn('slow');
 }
});

return false;

L'opzione type corrisponde in questo caso all'attributo method del tag <form>, e viene settata a POST.
L'indirizzo del file php è relativo alla pagina html dove viene eseguito lo script.

L'opzione success ci consente di scrivere una semplice funzione che genera un messaggio di "inoltro corretto", e si fa semplicemente svuotando il <div> che racchiude il form, sostituendo quest'ultimo con un paio di righe: il metodo html(val) sostituisce tutto il contenuto dell'elemento selezionato con dell'HTML specificato. Nel nostro caso ci mettiamo un blocco che riempiamo con il messaggio scelto. L'ID assegnata al blocco ci consente di stilarlo con del CSS.

Il return false che chiude il nostro script di validazione serve per impedire al pulsante submit di eseguire la sua azione: tanto abbiamo già fatto tutto noi!

3.2 Script php
Lo script php è davvero semplice:

<?php

if ($_POST['azienda']) {
 $body = "Tipologia: Azienda\n\nRagione sociale: ".$_POST['azienda']."\nReferente: ".$_POST['referente'];
} else {
 $body = "Tipologia: privato\n\nNominativo: ".$_POST['nome'];
}

$body .= "\n\nIndirizzo: ".$_POST['indirizzo']."\n".$_POST['cap']." ".$_POST['citta']." (".$_POST['provincia'].")\n\nTelefono: ".$_POST['telefono']."\n\nArea d'interesse: ".$_POST['area']."\n\nMessaggio: ".$_POST['messaggio'];

$header = "From: ".$_POST['email'];

mail("indirizzo@email.dominio", "modulo contatti", $body, $header);
?>

La condizione serve soltanto per formattare l'email in modo diverso a seconda che sia stato scelto "privato" oppure "azienda"; poi si aggiungono tutti gli altri campi, che non cambiano.

Quello che è elencato in body va a finire nel corpo dell'email, mentre lo header ci consente di specificare l'indirizzo email dell'utente, che il client email userà ad esempio per "rispondere" al messaggio.

Con la funzione mail si invia l'email all'indirizzo specificato. Il secondo parametro è il subject dell'email, mentre il terzo ed il quarto passano i dati arrangiati prima.

4: Tocchi finali
L'unica cosa indispensabile da fare ancora è disabilitare i campi cui l'utente rinuncia effettuando la scelta tra "privato" e "azienda", perché usiamo questo attributo per escluderli dalla validazione.
E poi, visto che ci siamo, aggiungere qualche funzionalità in più a quei radio buttons non guasta.

Poiché questo deve avvenire prima della validazione, queste istruzioni saranno inserite nello script prima dell'evento click sviluppato nei punti precedenti.

L'evento ideale da intercettare è il cambiamento di stato dei pulsanti, e il metodo change() è proprio quello che fa al caso nostro; vediamo ad esempio cosa succede quando l'utente clicca sul pulsante per scegliere la categoria "privato":

$('#societa').change(function () {
 $('#nome').removeClass('obb').removeClass('errorinput').attr('disabled' , 'disabled');
 $('label[for=nome] i').empty();
 $('label[for=nome]').css('color' , '#999');
 $('#azienda, #referente').addClass('obb').removeAttr("disabled");
 $('label[for=azienda] i, label[for=referente] i').html('*');
 $('label[for=azienda], label[for=referente]').css('color' , '#000'); 
 $('.radioin').css('color' , '#000');
 $('.radioin span').remove();
 $('fieldset li:eq(0) .error, #radioerror').slideUp();
})

Le righe 2, 3 e 4 agiscono sui campi cui si rinuncia: essi diventano facoltativi e disabilitati (non ci si può scrivere); per maggiore chiarezza cancello anche l'asterisco e rendo la scritta più "sbiadita" con del grigio, e tolgo eventuali errori di validazione.
Le righe 4, 5 e 6 ripristinano lo stato obbligatorio dei campi prescelti (che potevano essere diventati facoltativi per un'altra scelta privato/azienda).
Le righe 7, 8 e 9 infine resettano eventuali notifiche di errore da parte della validazione.
In questo modo l'utente può cambiare idea quando vuole, e la validazione si adegua.

La stessa funzione, invertendo i riferimenti, si ricopia per l'altro pulsante, e il gioco è fatto.

Un extra interessante da inserire è la disabilitazione del pulsante d'invio mentre lo script sta processando i dati, così, nel tempo tra la pressione del pulsante e la visualizzazione del messaggio di successo, nessun utente particolarmente impaziente potrà inviare il form più di una volta.
Questo è proprio un voler essere perfezionisti, perché con script del genere il tempo di attesa è praticamente nullo! Confesso che questo me lo ha fatto venire in mente un commento al tutorial di Net Tuts+...

Basta disabilitare il pulsante prima della chiamata di $.ajax():

$('#submit').attr('disabled' , 'disabled');

È bene però riabilitarlo se la pagina viene ricaricata, per consentire all'utente di inviare un nuovo messaggio: questo si fa inserendo l'istruzione come prima cosa nel codice jQuery:

$(document).ready(function(){

$('#submit').removeAttr("disabled");

// e segue tutto il resto...

5: script completo
Ed ecco infine lo script completo, ottenuto mettendo insieme tutti i segmenti esaminati.

$(document).ready(function(){

/* form validation */

$('#submit').removeAttr("disabled");
$('.error').hide();

$('#privato').change(function () {
 $('#azienda, #referente').removeClass('obb').removeClass('errorinput').attr('disabled' , 'disabled');
 $('label[for=azienda] i, label[for=referente] i').empty();
 $('label[for=azienda], label[for=referente]').css('color' , '#999');
 $('#nome').addClass('obb').removeAttr("disabled"); 
 $('label[for=nome] i').html('*');
 $('label[for=nome]').css('color' , '#000');
 $('.radioin').css('color' , '#000');
 $('.radioin span').remove();
 $('fieldset li:eq(1) .error, #radioerror').slideUp();
})
$('#societa').change(function () {
 $('#nome').removeClass('obb').removeClass('errorinput').attr('disabled' , 'disabled');
 $('label[for=nome] i').empty();
 $('label[for=nome]').css('color' , '#999');
 $('#azienda, #referente').addClass('obb').removeAttr("disabled");
 $('label[for=azienda] i, label[for=referente] i').html('*');
 $('label[for=azienda], label[for=referente]').css('color' , '#000'); 
 $('.radioin').css('color' , '#000');
 $('.radioin span').remove();
 $('fieldset li:eq(0) .error, #radioerror').slideUp();
})


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

$('.error').hide();

var dataString = "";

if ( (! $('#privato').is(':checked')) && (! $('#societa').is(':checked')) ) {
 $('.radioin').css('color' , 'red').append('&nbsp;&larr;');
 $('ol li:first').after('scegli se rappresenti un privato o un\'azienda');
 $('#radioerror').hide().slideDown('normal');
 return false;
}

$('input[id!=submit][type!=radio], textarea, select').not('input[disabled]').each(function (i){
 var val = $(this).val();
 var id = $(this).attr("id");
 var err = id + "_err";
 if ((val == "") && ($(this).is('.obb'))) {
  $(this).addClass('errorinput').focus();
  $("label[id=" + err + "]").slideDown();
     return true;
 } else {
  $(this).removeClass('errorinput');
  if (i==0) {
   dataString = id + '=' + val;
  } else {  
   dataString = dataString + '&' + id + '=' + val;
  }
 }
});
if ($('.error').is(':visible')) {
 return false;
}

//alert (dataString); return false;

$('#submit').attr('disabled' , 'disabled');

$.ajax({
 type: "POST",  
 url: "email.php",  
 data: dataString,  
 success: function() {
  $('#contactform').html('
');  
  $('#successo').html('messaggio inoltrato correttamente
')
  .append('una risposta sarà inviata prima possibile.
')
  .append('')
  .hide().fadeIn('slow');
 }
});

return false;

});

  
});

Ultima raccomandazione
Utilizzare esclusivamente l'ultima versione di jQuery, perché ad esempio nella versione 1.3.2 c'è un bug con IE8 (e chi se non lui?) che interpreta alla rovescia il check sulla visibilità degli errori, rendendo lo script inutile.

Ulteriori sviluppi
Per andare avanti da qui, si può passare alla validazione avanzata, ad esempio com'è implementata dal plugin Validation, che distingue campi numerici, email, url, ecc. e avverte l'utente quando i dati inseriti non sono conformi al formato atteso.
Il bello di questo è che avviene mentre l'utente sta digitando, e non c'è bisogno di aspettare la pressione del pulsante d'invio.
Questi sono ulteriori passi avanti nell'ottica del web 2.0, ma una volta inquadrati i concetti di base di cui sopra, non è difficile crearsi un prodotto su misura per le proprie necessità.

Minimal poster design

2009-11-30T23:30:00.008+01:00

Ho cominciato a creare una serie di poster minimali, con l'intenzione di comunicare un solo concetto per volta, spogliandolo di ogni complessità decorativa o tecnica, e di ogni compiacimento estetico superfluo.

I concetti che cerco di esprimere qui sono legati alla filosofia taoista, perché a loro ben si adatta, per la caratteristica "semplicità" quasi austera del ricercato ritorno alla natura primaria, un metodo di comunicazione più che altro non verbale e spoglio di orpelli.
Poi in realtà se andiamo a vedere le opere d'arte figuativa originali della Cina antica, esse sono particolarmente cariche di dettagli minuti e precisissimi, e sono tutt'altro che minimali, in tal senso. Ma la loro essenzialità non è quella che si intende oggi quando parliamo di "design".

La filosofia taoista cui mi ricollego qui è quella che studio seguendo il Metodo XiuZhenDao, per cui mi occupo, tra l'altro, della parte web.

Più o meno negli stessi giorni in cui ho dato inizio a questa serie, ho scoperto powertotheposter.org (dopo aver visto l'interessantissimo documentario The Corporation), e alcuni dei lavori che sono lì hanno alle spalle un concetto di design simile.

Ad esempio, ho riadattato un poster ivi pubblicato per esprimere una delle frasi più famose del Tao Tê Ching:

L'Uno generò il Due,
il Due generò il Tre,
il Tre generò le diecimila creature.
Tao Tê Ching, XLII

Nel mio poster, l'Uno è il foglio bianco, nel quale si divide il due, Yin e Yang, che nella loro relazione determinano il Tre (rappresentata dalla linea ondulata che li separa e li unisce). Le "diecimila creature", cioè le essenze del mondo manifestato, sono le innumerevoli freccie, proiettate in ogni direzione.
Questo si ricollega ai vari miti cosmogonici, come Prajapati che viene fatto a pezzi e lanciato in ogni direzione dello spazio, e in questo caso alla leggenda cinese che vuole che gli uomini siano stati plasmati da una coppia di dei dalle sabbie di diverso colore del Fiume Giallo.

Questo poster è per forza di cose il primo della serie.

Un altro, cerca di esprimere l'equilibrio di un uomo che si sia ricongiunto con l'armonia della natura, e raffigura un personaggio che sta seduto in tranquillità alla sommità di un monte, incurante delle nuvole minacciose al di sopra di lui e dell'oceano al di sotto, che minaccia di inghiottirlo.
A testimonianza del suo equilibrio il fatto che l'uomo si trova nel centro, a metà tra cielo e terra (come vuole la Grande Triade), al suo posto naturale.

Uno dei concetti più importanti del taoismo è quello di "vuoto": uno dei poster cerca di comunicare questo concetto sfruttando la famosa metafora della tazza, che finché è vuota può ricevere il tè. Mi rifaccio qui alla famosissima storia del Maestro zen e dell'uomo di scienza, che, non a caso, è anche la prima delle "101 storie zen":

Nan-in, un maestro giapponese dell'èra Meiji (1868-1912), ricevette la visita di un professore universitario che era andato da lui per interrogarlo sullo Zen.
Nan-in servì il tè. Colmò la tazza del suo ospite, e poi continuò a versare.
Il professore guardò traboccare il tè, poi non riuscì più a contenersi. «È ricolma. Non ce n'entra più!»
«Come questa tazza,» disse Nan-in, «tu sei ricolmo delle tue opinioni e congetture. Come posso spiegarti lo Zen, se prima non vuoti la tua tazza?»
101 Storie Zen, 1, ed. Piccola Biblioteca Adelphi

In questo poster ho ritratto la mia piccola teierina di terracotta (quella che uso per i tè pu-erh pressati). Tutti questi poster, a parte il primo, sono disegnati a mano, poi scannerizzati e quindi ricomposti e "inchiostrati" digitalmente.

Per ricreare l'effetto impreciso dell'inchiostrazione manuale, in Photoshop, ho creato delle selezioni dei contorni dell'area da colorare e poi le ho modificate con il comando "refine edge" (alt+cmd+R) usando i massimi valori di smusso e di espansione del bordo.

La selezione risultante viene traformata in un livello di riempimento a tinta unita, magari in blend mode "moltiplica" per un effetto di sovrapposizione degli strati d'inchiostro con i contorni del disegno.

Post Romantic Empire Final Fest

2009-10-22T00:10:00.001+02:00

Questo weekend, il 17 e il 18 Ottobre, ero a Roma in qualità di inviato speciale di gothicNetwork al Final Fest del Post Romantic Empire: una maratona di 30 ore consecutive di musica, dalle 18 di sabato a notte fonda di domenica, presso l'Init, locale a ridosso di un acquedotto romano e accanto alla ferrovia della stazione Tuscolana. Con tanto di pranzo (o Dead Banquet, come dicevano loro) domenicale a base di leccornie frugali varie e alcuni squisiti pomodorini datterini.

La musica presente spaziava dal cantautoriale al dark contemporaneo, con una massiccia presenza di elettronica sperimentale, e un sentore improvvisativo spontaneo e creativo che fa tanto evento indipendente, slegato dalle logiche monetarie più spinte.

Comunque, presto ci sarà uno speciale di gothicNetwork a proposito del Fest, e tutto sarà più chiaro per tutti.

Nel frattempo volevo condividere una diecina di foto fatte durante l'evento: un gioioso necrologio nero e rosa dall'atmosfera amichevole e rilassata come poche volte mi è capitato di sentire in casi del genere, dove artisti e spettatori erano tutti insieme a godersi la festa.

a Holga trip of sorts (I)

2009-10-09T10:43:00.007+02:00

Asleep, struggling to awake

2009-10-07T10:09:00.023+02:00

analisi di un'improvvisazione quasi ragionata

È successo un fatto strano. Ho pubblicato 4 brani su SoundCloud nei mesi scorsi, giusto per provare il servizio e pubblicare qualcosa che secondo me era ingiustamente stato relegato all'oblio, e uno di questi è stato ascoltato ad oggi più di 500 volte, andando ben oltre ogni mia aspettativa, vista la mancanza di pubblicità di questo materiale.

Ho deciso quindi di analizzare questo pezzo, giusto per mostrare com'è nato. Intanto eccolo:

Asleep, struggling to awake di blacktealover

Questo brano faceva parte di quelli che creai per un progetto collaborativo ormai abbandonato di arte visiva + musica (per altre informazioni vedi il primo post di questo blog).

Il tema del pezzo lo definisce il titolo Asleep, struggling to awake: è il sonno, il torpore che non si riesce a spezzare e che tanta parte occupa delle nostre esistenze. Non mi riferisco soltanto, infatti, al sonno notturno, al riposo più o meno meritato (e spesso abusato) nel proprio letto o sul proprio divano; ma bensì a quella sensazione — a volte subdola, a volte quasi drammatica — di essere addormentati di fronte alla realtà, di vivere il momento presente in modo distante, oltre una coltre di nebbia.

Moltissimi autori e tradizioni parlano di questo stato di mancanza di presenza a sé: Herman Hesse, Gurdjieff, il Buddha, i Vangeli... in ogni epoca vi sono stati uomini che si sono accorti di questo stato e che hanno cercato di superarlo.

Il pezzo non vuole arrivare assolutamente a queste altezze psicologiche, filosofiche e spirituali! È stato creato in un'oretta seguendo un impulso sovra-razionale (come tutte le esperienze creative reali), che solo a posteriori ho potuto ricondurre a queste coordinate concettuali, in base alle sensazioni provate durante la creazione del brano e al suo successivo riascolto.

Il pezzo è davvero semplice: solo due linee di chitarra elettrica, di cui una "di contorno". La prima linea, la più importante, si basa su un semplice giro iniziale a nota singola sulla scala di La- Lidio (quarto grado di Mi-). L'effetto di delay stereofonico è stato aggiunto per conferire il senso di straniamento e alienazione, ed è (più o meno) in tempo con la musica.

Tutta la prima parte del pezzo si basa su una semplice figura ritmica cadenzata, per dar spazio al delay e per coltivare la sensazione di torpore, quasi paralizzante, di muoversi in una nebbia densa. La musica non progredisce, né va verso una qualsiasi risoluzione. Le sequenze degli accordi, molto semplici, sono cicliche e possono essere ripetute indefinitamente.
Questo è l'aspetto della ripetizione banale e noiosa di questa modalità dell'esistenza: tutto si ripete come in un dramma teatrale che ogni volta ricomincia daccapo.
L'unico modo per spezzare questa piatta continuità è una risoluzione che cerchi di romperne la ciclicità — e questo è ciò che avviene al minuto 1:23.

Passando all'accordo di Mi- (dominante di La-) in prima posizione, il tentativo di rompere il muro del sonno è rappresentato da degli accenti, colpi vigorosi e ripetuti sulle corde della chitarra, inflitti con molta forza (un fortissimo, in terminologia classica ...ho letteralmente "picchiato" la chitarra e le corde qui!).

La risoluzione e la disperazione del tentativo si rafforzano grazie al fatto che l'accordo viene cambiato solo dopo due battute, risolvendo in Do maggiore che, avendo soltanto una nota di differenza rispetto al Mi- (il Si che passa a Do salendo di un solo semitono) mi consente di mantenere la stessa intensità espressiva ed estetica ma al contempo di sfruttare il passaggio melodico al VI grado, sempre di grande effetto.

Tutta questa breve sezione dovrebbe essere davvero intensa, e forte da togliere il fiato, perché questi momenti si vivono proprio così.

La cadenza lenta degli accenti sottolinea la difficoltà del tentativo, e la grande fatica che comporta. Gli accordi che seguono infatti, sono sempre forti, ma molto più radi, dovuti alla stanchezza e alla disillusione accumulate.

Questa, alla fine, fa sì che tutto ritorni come prima: il progressivo e malinconico ritorno al tema iniziale che comincia al minuto 2:12 simboleggia proprio questo progressivo riabbandonarsi al sonno.
Quando ci si riaddormenta poi, c'è una breve pausa e subito riprende il tema del "sonno" iniziale, che porta il brano ad una conclusione.

La seconda linea di chitarra è stata improvvisata sulla prima, e consta quasi esclusivamente di una nota di Mi (particolarmente il Mi del XII tasto sulla prima corda) suonata con un tempo di metronomo differente da quello della linea principale. Nella sezione del 2:12 suono le terze degli accordi (la nota che determina la natura "maggiore" o "minore" di un accordo) per poter giocare sull'emotività del maggiore/minore.

Ambedue le linee sono improvvisate e sono state registrate in unico take (mi pare il secondo), con una chitarra elettrica collegata direttamente alla scheda sonora.
Gli effetti sono stati aggiunti postumi: più che altro uno stereo-delay e un po' di riverbero.

Purtroppo, a causa della natura improvvisata e della velocità con cui è stato creato, non ho mai scritto lo spartito di questo piccolo pezzettino.

jQuery: integrazione Fancybox & Tooltip

2009-10-06T11:38:00.011+02:00

Questo post tratta l'integrazione di due ottimi plugin jQuery:

Fancybox – un clone di Lightbox dall'interfaccia più accattivante e con alcune funzioni ben implementate,
Tooltip – un plugin molto versatile per customizzare i tooltip che normalmente si hanno in base all'attributo title dei tag <a>

Questi due plugin si suppongono quindi già installati e configurati.

Lo scopo di questo hack è quello di avere una galleria Fancybox con i titoli delle immagini che possono ospitare link e che mostrano un "tooltip": è quello che ho fatto per la galleria di graphic design su Nâda-Design, in cui alcune immagini hanno un link verso la relativa pagina dell'account deviantArt.
Per far capire all'utente che il link punta verso una pagina deviantART ho inserito un tooltip che mostra il logo della community.

Il fine è quello di poter inserire dell'HTML nel titolo mostrato da Fancybox, e potervi così collegare un link e un tooltip, e nel contempo far anche validare la pagina come XHTML Strict!

1. Inserimento del link nel titolo dell'immagine

Il titolo dell'immagine nella galleria Fancybox è estratto dall'attributo title del link che lancia l'immagine stessa: poiché title supporta come valore una stringa di testo generica, è possibile, in linea di principio, inserirvi dell'HTML (avendo ovviamente cura di sostituire tutti i caratteri speciali con le relative entità), ad esempio:

<a href="#img1.jpg" rel="[fancybox]" title="&lt;a href=&quot;link_esterno&quot; target=&quot;_blank&quot; title=&quot;titolo&quot;&gt;testo_link&lt;/a&gt;&quot;&gt;&lt;img /&gt;</a>

In pratica si è inserito un altro tag <a> completo all'interno dell'attributo title.

Il problema di questo procedimento è che il browser interpreterà comunque l'attributo, e visualizzerà il suo tooltip predefinito con tutti i dati che vi abbiamo inserito... con un effetto particolarmente disdicevole!

Ma poiché questa è una funzione non disattivabile esternamente, non ci rimane altro da fare che abbandonare l'attributo title, e sceglierne un altro: e questa decisione, ovviamente, ci complicherà enormemente la vita...

Non possiamo scegliere l'attributo id, perché supporta solo valori univoci senza caratteri speciali. Scegliamo dunque l'attributo rev: esso, da definizione W3Schools, "specifica la relazione esistente tra il documento linkato e il documento corrente".

Ma le caratteristiche che ce lo fanno scegliere sono essenzialmente due:

Può contenere una stringa di testo,
Non è interpretato da nessuno dei browser principali.

Questo vuol dire che possiamo inserirci tutto quello che vogliamo senza che i browser se ne accorgano, e mantenendo la validazione della pagina.
Comunque anche se il documento valida, non si può certo parlare di contenuto aderente agli standard!

Quindi alla fine un mio tag <a> avrà quest'aspetto:

<a rel="[fancybox]" rev="&lt;a href=&quot;http://blacktealover.deviantart.com/art/Reincarnation-118622078&quot; target=&quot;_blank&quot; title=&quot;.&quot;&gt;reincarnation&lt;/a&gt;" title="reincarnation" href="images/graphics/large/reincarnation.gif"><img src="images/graphics/reincarnation.gif" alt="reincarnation" width="160" height="80"/></a>

Il title del link "aggiuntivo" deve essere non vuoto se vogliamo che il tooltip venga mostrato.

2. Hack di Fancybox
A questo punto si deve andare a modificare il codice di Fancybox per fargli prendere l'attributo rev invece del title come fa normalmente.

Le modifiche sono semplicissime: ci interessa soltanto la sezione di codice dalla linea 60 alla 97 del file jquery.fancybox-1.2.1.js; in particolare andiamo a sostituire la riga 63:

var item = {href: elem.href, title: elem.title};

con il seguente codice:

if ($(elem).attr("rev")){
 var item = {href: elem.href, title: elem.rev};
} else {
 var item = {href: elem.href, title: elem.title};
}

e la linea che originariamente era la 78

item = {href: subGroup[i].href, title: subGroup[i].title};

con questo:

if ($(subGroup[i]).attr("rev")){
 item = {href: subGroup[i].href, title: subGroup[i].rev};
} else {
 item = {href: subGroup[i].href, title: subGroup[i].title};
}

Le due sezioni di codice sono rispettivamente per un'immagine singola e per un gruppo d'immagini.

Ho inserito il check sull'esistenza dell'attributo rev perché così nel caso si decida di non inserire nulla di aggiuntivo nel titolo dell'immagine, Fancybox si comporta come di consueto, andando a pescare il contenuto del title. In questo modo non ci bruciamo la terra dietro le spalle.

Affinché il link funzioni è necessario disabilitare l'opzione hideOnContentClick (che si trova nella lista delle funzioni, in fondo al file dello script) settandola su false.

Adesso, per completare questa prima parte dedicata a Fancybox, basta andare a stilare il nostro link, con del CSS.
Il selettore che ci interessa per andare a colpire il link nel titolo dell'immagine è #fancy_title; ad esempio:

#fancy_title a{
 color: #f9c587;
 text-decoration: none;
}
#fancy_title a:hover{
 color: #fad5a7;
 text-decoration: underline;
}

3. Inserimento del tooltip
Per richiamare un tooltip sul link appena inserito, il modo migliore è usare la funzione di callback di Fancybox.

In fondo al file di Fancybox, jquery.fancybox-1.2.1.js, andiamo ad inserire la funzione che genererà il tooltip, e che chiameremo semplicemente "fancyboxCallback".
Andiamo a dichiararla nell'opzione di callback:

callbackOnShow : tooltipCallback,

e poi, subito sotto, la definiamo:

function tooltipCallback(){
  $('#fancy_title a').tooltip({
   track: true,
   delay: 0,
   fade: 50,
   showURL: false,
   fixPNG: true,
   extraClass: "datip",
   bodyHandler: function() {
    return $("").attr({
     src: "balloon_da.png",
     width: "30",
     height: "33"
    });
   },
   top: -40,
   left: 0
  });
 };

La riga 2 definisce l'elemento su cui creiamo questo tooltip; degli attributi è importante la extraClass, che useremo dopo per assegnare delle proprietà fondamentali, e la funzione passata tramite bodyHandler. È con questo parametro che si può iniettare nel tooltip dell'HTML qualsiasi: in questo caso si riempie il blocco con una immagine.

Nel mio caso, infatti, non voglio che il tooltip visualizzi il testo del title del mio link, ma un'unica immagine (sempre la stessa per questa galleria) che rappresenta il logo di deviantART. Negli attributi che passo al tag <img /> c'è l'immagine precedentemente creata (+ le sue dimensioni).

Per finire, andiamo a sviluppare la classe dedicata, datip: essa si inserisce nel file jquery.tooltip.css e nel mio caso è:

#tooltip.datip{
 background: 0;
 width: 30px; height: 33px;
 padding: 0;
}
#tooltip.datip img{
 position: absolute;
 top: 0; left: 0;
}

La prima parte del codice CSS elimina l'eventuale sfondo presente del tooltip generico della pagina e setta le dimensioni esatte dell'immagine che verrà inserita nel blocco.
La seconda parte riguarda il contenuto del tooltip, che in questo caso è un'immagine, e serve per ottenere un posizionamento perfetto.

È ovvio, data la versatilità di Tooltip e il modo generico in cui abbiamo modificato Fancybox, che in linea di principio è possibile sbizzarrirsi inserendo nel titolo dell'immagine dell'HTML vario e mostrare tooltip con di tutto di più; ad esempio una didascalia estesa con molto testo e/o immagini, o altro.

Come al solito, il limite sono la fantasia e l'estro di ciascuno.

a traveller's guide in seven steps

2009-10-01T15:42:00.010+02:00

¹Aim beyond

Niente è mai troppo distante. Se miri alle stelle forse raggiungi solo un lampione, ma almeno ti stacchi dal suolo. Non ci sono distanze che non meritino d'esser percorse.

²Always flow spontaneously

Come fa l'acqua, segui la via della natura. Non pensare troppo, le occasioni non stanno ad aspettare.

L'acqua non è mai inoperosa, né di giorno né di notte. [...] Se le si oppone una diga, si ferma; se le si apre una chiusa, scorre. Si adatta a qualsiasi recipiente, sia esso rotondo, quadrato, o d'altra forma.
Ko Chang Sheng, commento al cap. VIII del Tao Te Ching

³Follow the signs in the stars

Lascia che il caso ti sorprenda: non forzare il tuo punto di vista, cambia i tuoi piani. Stupisciti senza timore.

⁴Find solace in movement

Fa' che il movimento sia il tuo riposo e il tuo conforto. Giosci del mondo mentre scorre di fronte al tuo volto.

⁵Look for crossroads and singularities

L'inusuale è perenne fonte di delizia per il viaggiatore. Stimola l'imprevisto cercando le circostanze adatte, e rafforza la tua capacità di adattamento.

⁶Wear out your shoes

Non rimanere mai fermo, non smetter mai di vagare. La polvere sulle calzature è la medaglia del girovago.

⁷Never give up

Dietro ogni angolo c'è una delizia sconosciuta. La stanchezza non ci interessa: se non stiamo camminando, stiamo dormendo; in ambedue i casi, che sia sogno o realtà, stiamo viaggiando. O al limite stiamo bevendo una birra.

Queste foto sono tutte state scattate durante un unico viaggio. I concetti che esse accompagnano, invece, si applicano sempre, in ogni momento e in ogni luogo: sono principi che ispirano molte delle mie azioni. Devo per forza tirar fuori la stravecchia metafora dell'esistenza come viaggio? Che noia, sempre a filosofeggiare sulle stesse idee trite e ritrite... questi piccoli suggerimenti vogliono solo essere qualcosa di concreto, che faccia godere al meglio il viaggio in sé, senza perder troppo tempo a pensarci su. Che le occasioni tornano anche, ma dopo un sacco di tempo.

jQuery: sistema di finestre stile windows

2009-08-30T17:21:00.060+02:00

Per l'ultima versione di Nâda-Design, ho voluto mantenere l'impostazione ad una sola pagina, ma stavolta rendendola davvero succinta.
C'è un Ouroboros (che in questo caso, tralasciando parzialmente il suo simbolismo tradizionale, sta a raffigurare la creatività, che sempre rinasce e si rinnova) da cui si originano i tre link principali dedicati alle tre aree creative principali di cui mi occupo, più un link informativo. Stavolta non si divaga!

I link non aprono altre pagine, bensì delle finestre sullo stile di quelle dei sistemi operativi, che si utilizzano per esplorare il contenuto del proprio computer.

Le caratteristiche da riprodurre sul web di tali finestre sono:

Trascinabilità, tramite il classico click+drag del mouse;
Sovrapponibilità, con possibilità di portare "di fronte" una finestra che sta sotto ad un'altra, cliccandola;
Ridimensionabilità, trascinandone uno dei bordi o uno degli angoli.

Per il resto, le finestre sono dei blocchi di contenuto <div> posizionati in modo assoluto, ciascuno col proprio z-index, e inizialmente nascosti (display: none).

Vediamo nel dettaglio il markup XHTML, il CSS e il codice jQuery necessari per realizzare questo progetto.

1. Codice XHTML

Ciascuna finestra avrà una struttura di questo tipo:

<div class="window" id="finestra1">
 <span class="close">X</span>
 <h2>titolo</h2>
 <p>contenuto</p>
</div>

La classe window serve per specificare gli attributi essenziali comuni ad ogni finestra, mentre l'ID univoca per le caratteristiche variabili, come sfondo e posizione iniziale.
Lo span "close" non è altro che il pulsante di chiusura della finestra, che realizzeremo interamente con jQuery.

Per lanciare le finestre abbiamo bisogno di un elenco di link, ad esempio:

<ul>
 <li><a id="a1" class="btn" href="#">finestra1</a></li>
 <li><a id="a2" class="btn" href="#">finestra2</a></li>
 <li><a id="a3" class="btn" href="#">finestra3</a></li>
</ul>

Vediamo adesso quali sono le caratteristiche fondamentali da attribuire ai blocchi finestra tramite CSS.

2. Proprietà CSS

Quello che segue è il CSS che ho utilizzato sul mio sito:

.window{
 z-index: 10;
 position: absolute;
 width: 500px;
 height: 400px;
 padding: 0;
 color: #000;
 opacity: .95;
 filter: alpha(opacity=95);
 border: 3px solid #555;
 -moz-border-radius-topright: 12px;
 -webkit-border-top-right-radius: 12px;
 border-top-right-radius: 12px;
 -moz-border-radius-bottomleft: 12px;
 -webkit-border-bottom-left-radius: 12px;
 border-bottom-left-radius: 12px;
}

Di tutto questo, le uniche proprietà realmente fondamentali sono position: absolute e z-index. Quest'ultima ci risolverà il problema dell'impilazione delle finestre.
È interessante sfruttare delle capacità avanzate come la trasparenza e i bordi stondati, che migliorano molto l'estetica con un minimo sforzo.
La trasparenza è bene sia minima per non confondere i contenuti con lo sfondo. Riguardo ai bordi stondati, ne accenno in quest'altro post.

Ciascuna finestra, poi, avrà delle caratteristiche personali, come la posizione iniziale all'apertura, lo sfondo, le dimensioni, e quant'altro; ad esempio:

#finestra1{
 background: #fff url(images/bg1.gif) bottom right no-repeat;
 width: 400px;
 top: 120px;
 left: 40px;
}

Per avere una disposizione elegante delle finestre l'una rispetto alle altre, ho scalato di 40px per volta la posizione di ciascuna finestra:

#finestra1{
 top: 120px;
 left: 40px;
}
#finestra2{
 top: 80px;
 left: 80px;
}
#finestra3{
 top: 40px;
 left: 120px;
}

Sono andato "verso l'alto" per ridurre rischi di comparsa di scrollbar con dimensioni ridotte della finestra del browser.

Per il pulsante di chiusura delle finestre, ho usato l'immagine di una "X", con questo CSS:

.close{
 cursor: pointer;
 position: absolute;
 top: 3px; right: 3px;
 background: transparent url(images/close.png) center center no-repeat;
 height: 25px; width: 25px;
 display: block;
 text-indent: -999em;
}

I titoli delle finestre sono stati tutti trattati con una tecnica qualsiasi di image replacement per renderli conformi allo stile generale della pagina.

Adesso si deve stendere il codice jQuery per consentire l'azionamento delle finestre, e conferirgli tutte le caratteristiche d'interattività desiderate.

3. Codice jQuery

3.0 Preliminari: nascondere e pulsante chiusura
A monte di tutto, si devono nascondere le finestre:

$('.window').hide();

Poi, diamo funzionalità al pulsante di chiusura:

$('.close').click(
 function(){
  $(this).parent('.window').hide('normal');
 }
);

3.1 Attivazione delle finestre e funzione "on top"
L'idea è questa: cliccando su un link si apre la finestra corrispondente, ma se essa è già visibile, viene chiusa (i link sono degli switch, in sostanza).
Poiché in seguito renderemo le finestre trascinabili, la loro posizione finale potrà essere differente da quella iniziale, ma io voglio che esse si aprano sempre nello stesso punto deciso sopra tramite CSS.
Inoltre, l'ultima finestra attivata deve passare in cima a tutte le altre.

La prima cosa da fare è capire quale finestra vuole attivare l'utente, e salvarne l'ID in una variabile per identificare la finestra "attiva".

/* window popups launch */
$('.btn').click(function(){
 var active = '#finestr' + $(this).attr("id");
});

Ogni volta che si clicca su un link, nella variabile active si va a memorizzare l'ID della finestra corrispondente, con tanto di "#", perché utilizzeremo subito questa variabile a fini di selezione.
Ad esempio, cliccando sul secondo link (ID = a2) avremo: #finestr + a2 = #finestra2.

Adesso, controlliamo se la finestra è già visibile. Se lo è, la nascondiamo, e finiamo lì. Altrimenti ci sono due cose da fare prima di mostrarla:

Resettare la sua posizione a quella iniziale;
Attribuirgli uno z-index maggiore di tutte le altre finestre per farla andare "on top".

Ecco come si fa:

/* window popups launch */
$('.btn').click(function(){
 var active = '#finestr' + $(this).attr("id");

if($(active).is(':visible')){
 $(active).hide('normal');
 } else {
 switch(active){
  case '#finestra1':
  $(active).css({
   'top' : '120px',
   'left' : '40px'
  });
  break;
  
  case '#finestra2':
  $(active).css({
   'top' : '80px',
   'left' : '80px'
  });
  break;
  
  case '#finestra3':
  $(active).css({
   'top' : '40px',
   'left' : '120px'
  });
  break;
 }

 $('.window').not(active).css('z-index', '10');
 $(active).css('z-index', '100').show('normal');
}
});

Il ciclo switch - case serve per assegnare istruzioni diverse a seconda della finestra, ed è qui che avviene il reset alle condizioni iniziali (che possono anche coinvolgere più proprietà oltre alla posizione).

Le ultime due istruzioni servono per mandare in cima la finestra cliccata e visualizzarla.
Si attribuisce lo z-index di default a tutte le finestre che non siano quella cliccata, poi si dà indice massimo a quella attiva e infine la si visualizza.

Per mandare in cima una finestra già visibile che sia sotto ad altre, basta scambiare i valori di z-index tra le finestre alla pressione del pulsante del mouse:

/* on top windows */
$('.window').mousedown(
 function() {
  $(this).css('z-index', '100');
  $('.window').not(this).css('z-index', '10');
 }
);

L'evento è bene che sia mousedown (esatto, senza l'"on"!) perché ci tornerà utile in congiunzione con l'effetto di trascinabilità che implementeremo subito.

3.2 Trascinabilità
Qui siamo fortunati, perché la trascinabilità è un effetto già presente nella libreria jQuery UI: basta aggiungere due file nello <head> della pagina web:

<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/ui.draggable.js" type="text/javascript"></script>

Poi, per rendere le finestre trascinabili, è sufficiente questa dichiarazione:

$('.window').draggable();

3.3 Ridimensionabilità
Io non ho implementato la ridimensionabilità sul mio sito, perché nel mio caso superflua e necessitante un altro approccio di design. Però anche per questa proprietà il passo è breve: basta allegare i file necessari, e dichiarare le finestre "resizable".

I file da aggiungere in questo caso sono:

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script> <!-- già visto sopra -->
<script src="http://jqueryui.com/latest/ui/ui.resizable.js" type="text/javascript"></script>

A questo punto, conviene combinare tre istruzioni in una, e dichiarare subito all'inizio dello script:

$('.window').draggable().resizable().hide();

Adesso si potranno trascinare i bordi delle finestre per ridimensionarle, e comparirà (nell'angolo in basso a destra) una piccola icona il cui trascinamento ridimensionerà la finestra lungo i due assi X e Y contemporaneamente - come una qualsiasi finestra da sistema operativo.

4. Script completo

$(document).ready(function(){

$('.window').draggable().resizable().hide();

/* close button */
$('.close').click(
 function(){
  $(this).parent('.window').hide('normal');
 }
);

/* window popups launch */
$('.btn').click(function(){

 var active = '#finestr' + $(this).attr("id");
 
 if($(active).is(':visible')){
  $(active).hide('normal');
 } else {
  switch(active){
   case '#finestra1':
   $(active).css({
    'top' : '120px',
    'left' : '40px'
   });
   break;
   
   case '#finestra2':
   $(active).css({
    'top' : '80px',
    'left' : '80px'
   });
   break;
   
   case '#finestra3':
   $(active).css({
    'top' : '40px',
    'left' : '120px'
   });
   break;
  }

  $('.window').not(active).css('z-index', '10');
  $(active).css('z-index', '100').show('normal');
 
 }
 
});


/* on top windows */
$('.window').mousedown(
 function() {
  $(this).css('z-index', '100');
  $('.window').not(this).css('z-index', '10');
 } 
);

});

Nota sull'impilabilità
Il semplice metodo proposto per portare "on top" una finestra ha il pregio dell'estrema concisione: due brevissime istruzioni e siamo a posto qualunque sia il numero delle finestre.

Però questa semplicità tralascia un dettaglio: l'ordine delle finestre in secondo piano. Esso infatti non rimane inalterato, ma si ripristina a quello di default a cascata del codice HTML: in sostanza, tra le finestre in secondo piano, l'ultima in ordine di inserimento nel codice della pagina sarà quella che starà sopra a tutte, direttamente sotto a quella "on top".
Ciò accade perché attribuiamo a tutte le finestre in secondo piano lo stesso z-index, a parità del quale vige la regola dell'ordine nel codice.

La soluzione è concettualmente semplice: determinare di volta in volta qual è la finestra con z-index più elevato ed attribuire a quella da mandare "on top" uno z-index maggiorato di una unità, lasciando tutti gli altri inalterati.
Questo però richiede un po' più di scripting, perché si deve iterare tra gli attributi delle finestre ed eseguire le necessarie operazioni.

Magari lo farò nei prossimi giorni...

jQuery + Drupal: search box a scomparsa

2009-08-28T23:35:00.029+02:00

Quello che mi accingo ad esporre è un po' un hack, ma è molto carino e comodo.

Drupal è il mio CMS preferito ad oggi, anche se il rapporto è una specie di amore/odio. Ad esempio, essendo la maschera di ricerca un blocco, di default non se ne può avere più di una istanza per pagina.

Ora, generalmente questo limite non è un grosso problema. Però io per Gothic Network volevo una voce nel menu principale che consentisse di ricercare senza dover accedere ad un'altra pagina, e che non alterasse il layout esistente. Un search box era già presente più in giù nella pagina, scrollando, nella colonna di destra.

Una soluzione potrebbe essere stata utilizzare la funzione module_invoke per inserire "a mano" il blocco del modulo search nella pagina, inserendo un minimo di php nei template.
Vedi ad esempio questo post (oppure questo) per capire come usare questo semplice metodo.

Io ho voluto usare il mio amato jQuery, visto che avevo anche in mente di rendere la maschera "a scomparsa", cioè che comparisse soltanto all'attivazione di un link.

L'idea quindi è questa: avere una voce dei primary links chiamata "ricerca" che funge da interruttore per la comparsa/scomparsa un search box (piuttosto che puntare alla pagina "search").

Affinché quanto esporrò funzioni, è necessario che il blocco "Search" sia stato attivato da qualche parte nella pagina.

Questo script è stato sviluppato su un'installazione di Drupal versione 5.

1. Creazione del link
Aggiungere una voce ai primary links è semplice, si va in admin/build/menu e si sceglie "aggiungi voce": io ho chiamato la mia "ricerca", facendo caso che fosse l'ultima della lista (attribuendogli cioè un "peso" elevato). Importante ricordarsi di specificare come indirizzo di link "search", affinché in caso di non abilitazione del JavaScript, l'utente sia correttamente ridirezionato alla pagina di ricerca avanzata. Questo si chiama "degrading gracefully".

2. Studio del codice HTML
Prima di costruirci il nostro searchbox con jQuery, diamo un'occhiata alla struttura della maschera di ricerca creata dal modulo "Search" di Drupal.

<div class="block block-search" id="block-search-0">
 <h2 class="title">Ricerca</h2>
 <div class="content">
 <form action="/"  accept-charset="UTF-8" method="post" id="search-block-form">
  <div><div class="container-inline">
   <div class="form-item" id="edit-search-block-form-keys-wrapper">
    <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys"  size="15" value="" title="Inserisci i termini da cercare." class="form-text" />
   </div>
   <input type="submit" name="op" id="edit-submit" value="Cerca"  class="form-submit" />
   <input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="ae2b5565789a051ff48bb23e0eac3970"  />
   <input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  />
  </div></div>
 </form>
 </div>
</div>

La maschera di ricerca Drupal è ovviamente un form, con una serie di tag <input> che dovremo riprodurre totalmente e fedelmente nel nostro script, se vogliamo che funzioni. Particolare attenzione deve essere posta al tag form_token (riga 11), che contiene una ID univoca dalla quale dipende il buon funzionamento della ricerca: il dato vincolante è il valore dell'attributo "value".

3. Codice jQuery
Ecco quello che faremo: appenderemo al link creato al punto 1 una nuova maschera di ricerca e la nasconderemo, poi creeremo uno switch che la attivi a piacimento.

3.1 Individuazione del form_token
Prima cosa da fare: ottenere il value del form_token semplicemente andandolo a pescare con il metodo attr(name):

$(document).ready(function(){
/* get form token */
var token = $('#sidebar_right #edit-search-block-form-form-token').attr("value");
});

Questo valore va preso ogni volta che si carica la pagina, e per questo è la prima istruzione che diamo con lo script.

È importante specificare la sezione della pagina che contiene il searchbox originale, e non quello creato da jQuery. Nel mio caso esso si trova nella colonna di destra.

3.2 Creazione del searchbox
Si individua il link "ricerca" (in questo caso l'ultimo della navlist dei primary links) e vi si crea di seguito un elemento <form> dalla ID #jquerysearch, all'interno del quale inseriamo tutti gli elementi input visti sopra:

$(document).ready(function(){
/* build search box */
$("#navlist li:last a").after("<form action='#' method='post' id='jquerysearch'>");
$("#jquerysearch").append("<input type='text' maxlength='128' size='15' name='search_block_form_keys' id='edit-search-block-form-keys' value='' title='Inserisci i termini da cercare.' />")
.append("<input type='submit' name='op' id='edit-submit' value='Cerca' />")
.append("<input type='hidden' name='form_token' id='edit-search-block-form-form-token' value='' />")
.append("<input type='hidden' name='form_id' id='edit-search-block-form' value='search_block_form' />")
.append("<br /><a id='advancedsearch' href='http://www.gothicnetwork.org/search'>ricerca avanzata</a>")
.append("</form>")
.hide();
});

Per prima cosa, tramite il metodo after(content) si crea l'elemento <form> e gli si attribuisce il suo ID: after() crea l'elemento di seguito a quello selezionato, mentre append(content) (che usiamo subito dopo) inserisce l'elemento all'interno di quello selezionato.
In generale quindi, si usa after() per creare il blocco, e append() per riempirlo, con due istruzioni diverse.

Ogni tag viene appeso con una nuova funzione append(), e l'istruzione termina con un hide() per nascondere la maschera appena creata (hide() in jQuery corrisponde ad un display: none; nei CSS), in quanto deve essere attivata soltanto con il click sul link apposito.

Da notare che l'attributo value del form_token (riga 7) è volutamente vuoto, in quanto quel parametro sarà passato in seguito.

Ho inoltre inserito anche un link diretto alla pagina della ricerca avanzata, specificandone l'ID (che useremo tra poco).

Adesso abbiamo un searchbox nascosto, che necessita di un interruttore per comparire.

3.3 Creazione dello switch
Affniché cliccando sul link "ricerca" compaia il nostro searchbox e non si sia indirizzati sulla pagina della ricerca avanzata, usiamo il metodo toggle():

/* search box switch */
$("#navlist li:last a:not('#advancedsearch')").click(function() {
 $("#jquerysearch").toggle('normal');
 $("#jquerysearch #edit-search-block-form-form-token").attr('value' , token);
 return false;
});

Stavolta il selettore not() è fondamentale per esser sicuri di non selezionare anche il link per la ricerca avanzata, creato poco fa.

La riga 4 serve per passare il valore del form_token preso sopra al punto 3.1 al corrispondente elemento del nostro box.

L'istruzione return false; è fondamentale: serve per impedire al browser di caricare la pagina specificata dal tag <a> selezionato — in sostanza, disattiva il link.

Ecco infine lo script completo:

$(document).ready(function(){
/* get form token */
var token = $('#sidebar_right #edit-search-block-form-form-token').attr("value");
/* build search box */
$("#navlist li:last a").after("<form action='#' method='post' id='jquerysearch'>");
$("#jquerysearch").append("<input type='text' maxlength='128' size='15' name='search_block_form_keys' id='edit-search-block-form-keys' value='' title='Inserisci i termini da cercare.' />")
.append("<input type='submit' name='op' id='edit-submit' value='Cerca' />")
.append("<input type='hidden' name='form_token' id='edit-search-block-form-form-token' value='' />")
.append("<input type='hidden' name='form_id' id='edit-search-block-form' value='search_block_form' />")
.append("<br /><a id='advancedsearch' href='http://www.gothicnetwork.org/search'>ricerca avanzata</a>")
.append("</form>")
.hide();
/* search box switch */
$("#navlist li:last a:not('#advancedsearch')").click(function() {
$("#jquerysearch").toggle('normal');
$("#jquerysearch #edit-search-block-form-form-token").attr('value' , token);
return false;
});
});

Adesso è tutto pronto: basta inserire nel page.tpl.php (o chi per lui) un link allo script appena creato, ed il gioco è fatto.
È consigliabile inserire del CSS per stilare il searchbox conformemente alla pagina in cui è inserito: si può inserire direttamente da jQuery, come stile inline dei vari tag. Io ho seguito questa strada.

Il risultato finale lo potete vedere in una qualsiasi delle pagine di Gothic Network.

Caveat: dicevo che questo script è un po' un hack perché andiamo a creare coppie di elementi con lo stesso ID, e questo non sarebbe affatto un comportamento corretto a livello di codice XHTML. Comunque la validazione della pagina passa, perché gli elementi incriminati vengono creati soltanto all'attivazione dello switch, e lo script funziona a dovere.

Appendice

Selezionare una voce menu che non sia l'ultima in lista: usare il metodo [attribute=value] specificando a:href=search.
Documentazione sulla customizzazione dei searchbox in Drupal: http://drupal.org/node/45295
Se non vogliamo essere vincolati ad usare il searchbox qui costruito soltanto come seconda maschera di ricerca, è necessario generare un form_token univoco.
Come si evince dal link proposto al punto precedente, si deve creare un tag <input> di questo tipo:
```
<input type="hidden" name="form_token" id="a-unique-id" value="<?php print drupal_get_token('search_theme_form'); ?>" />
```

CSS + jQuery: checkout progress bar per siti e-commerce

2009-08-12T15:26:00.021+02:00

Ecco un'altra miglioria apportata al negozio I Tesori del Drago durante il revamp: un indicatore che rende subito evidente al cliente a che punto del processo di acquisto si trova.

Si tratta di una progress-bar che fa la sua comparsa nella pagina del carrello, e indica quanti step sono ancora necessari prima di concludere l'acquisto. Su ogni pagina viene evidenziato lo step attuale.
In realtà questa non è solo una miglioria, ma anche e soprattutto una caratteristica richiesta in base alle norme di chiarezza e trasparenza che regolano il commercio elettronico.

Questa progress-bar è realizzata interamente con CSS e un pizzico di jQuery, più quattro icone formato PNG (o anche GIF), una per ogni step.
Si potrebbe usare anche soltanto del CSS, ma voglio utilizzare anche un po' di jQuery per mostrare la potenza dei suoi selettori.

1. Markup HTML
Per prima cosa è necessario creare gli elementi della barra, inserendoli nella pagina con dell'HTML valido e accessibile:

<div id="checkoutbar">
<ol>
<li>Carrello</li>
<li>Inserimento dati</li>
<li>Riepilogo ordine</li>
<li>Ordine completo</li>
</ol>
</div>

Una lista ordinata è l'ideale per una sequenza logica di fasi.

2. Aggiungere CSS q.b.
Adesso serve dello stile per creare quattro blocchi allineati e non delle righe tipiche delle liste, più altro stile di base per rendere la barra più attraente ed in linea col design del sito.

#checkoutbar{
margin: 0 auto;
padding: 0;
height: 50px;
width: 700px;
}
#checkoutbar ol{
list-style-type: none;
margin: 0 auto;
}
#checkoutbar li{
float: left;
font-size: .6em;
margin: 1em;
padding: 1em 2em;
background: #abdbff;
border: 3px solid #abdbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
opacity: .7;
filter: alpha(opacity=70);
}

La proprietà float: left conferita agli elementi-lista fa sì che essi si dispongano l'uno accanto all'altro. La spaziatura si ottiene con margini e padding opportuni.

Da notare i bordi stondati (proprietà border-radius, CSS3) per i browser che li supportano (come Firefox e Safari... niente IE, come al solito!): la prima dichiarazione, quella con -moz è per Firefox, la seconda per Safari.
La terza è la dichiarazione ufficiale come da linee guida CSS3.
Vedi questo articolo per una spiegazione sulla natura di queste dichiarazioni.

Altro attributo interessante è l'opacità, che necessita di due settaggi: il primo (aderente alle linee guida di CSS3) non è valido per il solito IE, che vuole l'attributo filter : alpha.
La trasparenza ci serve per concentrare ancora di più l'attenzione dell'utente sullo step in cui egli si trova, che sarà reso in seguito del tutto opaco (opacity: 1).

3. Stile dello step corrente
A questo punto le scelte sono due, piuttosto equivalenti:

attribuire in ciascuna pagina una classe all'elemento lista attivo, ad esempio con un class="current" e creare uno stile solo su quella classe.
utilizzare i selettori di jQuery e creare uno stile attraverso di essi.

Oggi andiamo per la seconda strada, giusto per vedere un paio di selettori all'opera.

Ecco il codice:

$(document).ready(function(){

$('#checkoutbar li:not(:last)').append(' &gt;&gt;');

$('#checkoutbar li:eq(0)').css({
'opacity' : '1',
'padding-left' : '40px',
'background' : '#0081e4 url(images/checkoutbar1.png) center left no-repeat',
'color' : '#fff',
'border' : '3px double #abdbff'
});

});

La prima istruzione serve per attaccare a tutti i nomi degli step due simboli "maggiore di" (>), a fare le veci di una freccia che indica un percorso. Ho preferito inseririli tramite jQuery perché non hanno alcun significato semantico in senso stretto, ma sono solo un semplice artificio di design, e il markup della nostra lista rimane pulito.
Il selettore not() è un esclusore, cioè un NOT logico, mentre last identifica l'ultimo elemento di una serie, in questo caso la serie dei tag <li>.
In questo modo l'ultimo step, che è la fine del persorso, non ha alcuna freccia associata.

Il resto è lo stile dell'elemento corrente, identificato con il selettore eq(index): esso identifica un elemento di una serie in base al suo indice, che parte da 0. In questo caso, essendo il primo elemento quello corrente, abbiamo .eq(0): questo valore va cambiato su ogni pagina su cui figura la nostra barra.

L'immagine cui si fa riferimento nell'attributo background è un'icona che identifica la fase corrente, anch'essa individuale per ciascuna fase.

jQuery: bollino sconti per siti e-commerce

2009-08-11T23:20:00.046+02:00

In questi giorni ho lavorato sodo alla nuova versione del negozio I Tesori del Drago, che vende principalmente prodotti naturali per la salute ed il benessere, oltre ad altri articoli interessanti.
Questo negozio era stato lanciato a Novembre 2008, e mi ero occupato praticamente di tutto l'aspetto creativo e tecnico. Si è deciso di cambiare l'impostazione grafica da "dark" a "light", e ne ho approfittato per aggiungere alcune migliorie.

Tra le varie cosette carine implementate, oggi voglio parlare del bollino che ho creato per i prodotti in offerta (un bollino che indica lo sconto percentuale applicato sull'articolo), perché rende bene l'idea del potenziale di jQuery anche a livelli di web design quasi puro.

L'idea era quella di avere, nella homepage e nella pagina dedicata all'articolo in offerta, una funzionalità completamente automatica che generasse una grafica mostrante lo sconto percentuale, da abbinare alla foto del prodotto.

Ho usato esclusivamente jQuery per realizzare questa piccola miglioria di design.
In pratica, si calcola lo sconto percentuale tramite i tag che contengono il valore del prezzo di listino e di quello di vendita, e poi si immette quel valore percentuale in un elemento blocco opportunamente stilato con del CSS (anch'esso generato con jQuery). L'unica cosa esterna al file .html di cui si ha bisogno è un PNG24 con il bollino, da usare come sfondo del blocco creato.
La grafica deve essere in formato .png a 24bit perché abbiamo bisogno di una trasparenza perfetta, ovviamente, visto che andremo a sovrapporre il bollino sugli sfondi più svariati.

L'HTML della sezione che ci interessa ha una struttura di questo tipo:

<div class="offerte">
<h1>nome articolo</h1>
<p>descrizione articolo</p>
<img alt="foto articolo" />
<span class="list_price">14.00€</span>
<span class="sell_price">12.60€</span>
</div>

Ecco il codice jQuery per calcolare la percentuale di sconto applicata:

$('.offerte').each(function (i) {
var lp=$(this).children('.list_price').text();
lp=lp.substr(0, lp.length - 1);
var sp=$(this).children('.sell_price').text();
sp=sp.substr(0, sp.length - 1);
var sconto=Math.round((100-((sp/lp)*100)));
});

Il metodo each( callback ) serve per iterare su tutti gli elementi aventi la classe "offerte" presenti nella pagina, in quanto non è detto che lo sconto percentuale applicato sia lo stesso su tutti gli articoli.
Prima di tutto si memorizzano il prezzo vecchio e quello scontato ciascuno in una propria variabile con il metodo text().
Poi con l'espressione che segue si tronca l'ultimo carattere della stringa memorizzata in ciascuna variabile. Questo per eliminare il simbolo finale dell'euro, che ci renderebbe il dato inutilizzabile in operazioni matematiche.
Occhio che il simbolo separatore dei decimali sia un punto (.) e non una virgola (,), perché jQuery nel secondo caso non riconoscerebbe come numeri i valori memorizzati.

Nella variabile sconto si calcola lo sconto percentuale: il metodo round(x) dell'oggetto Math arrotonda il valore dello sconto all'intero più vicino.
Questo è molto utile dal punto di vista grafico, visto che una o più cifre decimali "strizzerebbero" troppo il testo nel nostro bollino.

A questo punto, si costruisce un elemento blocco <div> nel quale immettere come testo il valore della variabile sconto, per poterlo visualizzare formattato a piacere:

$('.offerte').each(function (i) {
var lp=$(this).children('.list_price').text();
lp=lp.substr(0, lp.length - 1);
var sp=$(this).children('.sell_price').text();
sp=sp.substr(0, sp.length - 1);
var sconto=Math.round((100-((sp/lp)*100)));
$(this).append("<div class='bollino'></div>");
$(this).children('.bollino').css(bollino).html(sconto).prepend('-').append('%');
});

In sostanza, si appende un div al blocco "offerte" e gli si attribuisce dello stile precedentemente creato, tramite una variabile (usando css(properties), che vedremo tra poco), gli si inserisce come contenuto HTML la variabile sconto (html(val)) e si guarnisce con i necessari simboli "-" (visto che è uno sconto) e "%", rispettivamente prima e dopo il testo inserito.

Per l'immagine del bollino ho semplicemente usato una delle shapes predefinite di Photoshop:

A questo punto dobbiamo solo creare il CSS necessario a formattare e posizionare il nostro bollino.
Anche in questo caso si usa jQuery, creando una variabile da passare comodamente al proprio blocco col metodo css(properties).

var bollino = {
'background' : 'transparent url(images/bollino.png) top center no-repeat',
'width' : '50px',
'height' : '50px',
'z-index' : '100',
'text-align' : 'center',
'padding-top' : '1em',
'font' : 'italic bold 1em "century gothic", century, sans-serif',
'color' : '#fede60',
'position' : 'absolute',
'top' : '70px',
'left' : '125px'
}

Il position: absolute serve per poter piazzare il bollino parzialmente sovrapposto alla foto del prodotto.
L'unica cosa da notare in questo caso è che per consentire un posizionamento assoluto del bollino all'interno del blocco "offerte", è necessario che quest'ultimo abbia la proprietà CSS position: relative. Se così non fosse, il posizionamento sarà rispetto al primo blocco antenato posizionato relativamente, e quasi sicuramente ciò farà sì che tutti i bollini si sovrappongano.
E questo non è ciò che vogliamo, giusto?

Alla fine, quello che si ottiene sarà qualcosa di questo tipo:

Ecco lo script completo autosufficiente:

$(document).ready(function(){

var bollino = {
'background' : 'transparent url(images/bollino.png) top center no-repeat',
'width' : '50px',
'height' : '50px',
'z-index' : '100',
'text-align' : 'center',
'padding-top' : '1em',
'font' : 'italic bold 1em "century gothic", century, sans-serif',
'color' : '#fede60',
'position' : 'absolute',
'top' : '70px',
'left' : '125px'
}

$('.offerte').each(function (i) {
var lp=$(this).children('.list_price').text();
lp=lp.substr(0, lp.length - 1);
var sp=$(this).children('.sell_price').text();
sp=sp.substr(0, sp.length - 1);
var sconto=Math.round((100-((sp/lp)*100)));
$(this).append("<div class='bollino'></div>");
$(this).children('.bollino').css(bollino).html(sconto).prepend('-').append('%');
});

});

[Aggiunta: sul Problema della Trasparenza in IE6]
La questione è fin troppo vecchia per doverne sempre stare a discutere: IE6 non supporta la trasparenza alpha dei PNG24, e il nostro bollino su tale browser degrada ad un ingombro grafico sgradevole.
Nessuno oggigiorno dovrebbe mai navigare in internet con un simile programma! Ma per coloro che sono obbligati, c'è sempre una qualche scappatoia parziale.

Un metodo è usare lo script PNG Fix di Andreas Eberhard, che fa generalmente un ottimo lavoro nel ripristinare la corretta trasparenza dei PNG della pagina web su cui è invocato.

L'altra soluzione è il vecchio metodo delle immagini GIF di sostituzione a quelle PNG, visto che almeno la trasparenza GIF ad un solo bit è supportata da questo browser.
In questo caso, se usate un bollino "a tinta unita" (solid color) come il mio sopra, conviene creare una GIF a soli due colori: uno per il colore del bollino, l'altro per la trasparenza, e senza alcun dithering. In questo modo, quando il bollino si sovrappone ad altri elementi, i risultati sono decisamente più accettabili.

Una maniera di implementare questo ultimo sistema nel nostro script senza stravolgere alcunché è sfruttare jQuery per riconoscere il modello e la versione del browser che interpreta la pagina web, e agire di conseguenza.

Ad esempio aggiungendo in fondo allo script, semplicemente:

if($.browser.msie && $.browser.version<="6.0"){
$('.bollino').css('background', 'transparent url(images/bollino.gif) top center no-repeat');
}

In realtà l'uso del metodo $.browser.version è deprecata perché l'utilizzo di jQuery concerne più le caratteristiche di un browser, che la sua versione, come si spiega nella pagina della documentazione dedicata al metodo jQuery.support.

first time Holga?

2009-08-04T14:15:00.028+02:00

ecco le prime foto pubblicate tra quelle fatte con l'Holga 120N: sono tutte fatte con pellicola B/N Ilford Delta400 scaduta, trovate su Ebay, e poi scansionate con un Epson V500+Vuescan.

(ho perso una mattinata a capire quali erano i settaggi per me più efficaci per scansionare quei negativi... alla fine ho trovato una mia configurazione partendo da questo thread sul gruppo Fotografia Analogica Italia su Flickr e poi personalizzando un po' e creando dei file .DNG da esportare con Lightroom. tutto questo potrà cambiare nell'immediato futuro comunque...)

prima di tutto è venuta fuori una serie abbastanza eterogenea di tre foto (un fotohaiku):

I dreamt of Duchamp he and I in a meadow blue

whilst our little bodies twisted in carousel swerves

and then the world oh the world all fall down

Get the flash player here: http://www.adobe.com/flashplayer

evocare Duchamp come nume tutelare nella prima Holgafoto pubblica mi pare quantomeno calzante... quel librone è una retrospettiva sulla produzione di Duchamp su un lato e sull'altro una raccolta di effemeridi. la pala che si vede è il famoso readymade che chiamò "in previsione di un braccio rotto" (in advance of a broken arm), e anche questo mi pare molto calzante.

la seconda foto è la giostra in Piazza della Repubblica a Firenze. l'avevo chiamata provvisoriamente "carosello", e questo mi ha fatto venire in mente un verso di Hullo Angel di Death In June, che fa:

Well, Hullo Angel
A Gift and a Smile
Well, Hullo Angel
As We walk a Crooked mile

And a Twisted Man
Leans on twisted sticks
With children's laughter
Hanging from swings

Well, Hullo Angel
And the skipping rope turns
Whilst little bodies twist
In carousel swerves

Well, Hullo Angel
It's the End of The World
Well, Hullo Angel
At the End of your Tether

Well, Hullo Angel
Time for Sleep
Well, Hullo Angel
Time for Prayers

That which is Falling
Should also be Pushed
That which is Crawling
Should also be Crushed!

anche questo mi è sembrato davvero calzante.

l'ultima foto è uno specchio spezzettato, visto lo stesso giorno in una installazione nel cortile di Palazzo Strozzi, ad opera di Yves Netzhammer, chiamata Inventories of abstraction, nel cortile della Strozzina; ci si intravede il Palazzo a pezzi spezzati. il titolo è in pratica la versione anglofona del "girogirotondo".

e sì, questo poi, calzava proprio fino in fondo...
tutto mi torna, perché, per onorare al meglio la qualità surreale e onirica delle immagini che escono fuori da una Holga, non c'è proprio niente di meglio di un fotohaiku che inizia evocando il Dadaismo in qualità di Araldo dell'Anti-arte e termina nientemeno che con la fine del mondo. e nel mezzo ci abbiamo messo anche una bella canzone.
missione compiuta!

e poi altre due, slegate tra di loro:

double voyage

zeitmaschine

la prima è una doppia esposizione in treno. l'idea era quella di fare un'aureola a Silvia, ma poi, grazie all'utilissimo mirino della cara Holga, sono riuscito solo a centrarle gli occhiali; non che l'effetto sia male.
il "doppio viaggio", comunque sia, è sia quello nello spazio, del treno, che quello nella propria mente, che accompagna il primo.
guardi fuori dal finestrino, i paesaggi scorrono come fotogrammi, non si riesce a fissarli che qui il pulsante di pausa non esiste, e intanto un pensiero segue l'altro, si costruiscono castelli in aria sulle colline che si muovono all'orizzonte, il serpente si morde la coda, e ci si perde sia dentro che fuori.

l'ultima foto è una "macchina del tempo", perché pare una foto degli anni '70, e non qualcosa di contemporaneo.
e anche questo fa molto Holga.

poladroid graveyard

2009-08-01T14:05:00.009+02:00

nuovo progettino!
trattasi di una sorta di fotoblog, dedicato esclusivamente a poladroid.
(Poladroid è un software che simula l'utilizzo di una buona vecchia Polaroid, consentendo di tramutare file immagine in pola(d)roid. estremamente divertente e con rilevanti possibilità creative. specialmente ora che le cartucce polaroid sono fuori produzione! ...a meno che non si riesca nell'impossibile)
il potenziale creativo di Poladroid è notevole: ciò è dovuto principalmente alla mancanza di controllo del processo creativo dell'immagine finale, e alla sua parziale casualità.
le alterazioni più importanti dell'immagine originale sono tre:

Taglio quadrato: nonostante sia semplicemente centrato nella foto originale, l'effetto è psicologicamente forte perché assolutamente spietato nell'amputare un'immagine pensata per un rapporto 3:2 o comunque rettangolare.
Variazioni tonali: essendo casuali, la dominante non può essere predetta e (insieme ad eventuali texture) rende ogni poladroid un esemplare unico. L'effetto poi cambia molto al variare della saturazione dell'immagine di partenza.
Frame Polaroid: ovviamente! l'incorniciatura nella famosa carta polaroid aggiunge un'altra grossa componente psicologica, aiutata anche dalla vignettatura.

conscio di tutto questo, mi ritrovo con un sacco di poladroid "scartate" perché incapaci di comunicare la senzazione che ricercavo in quel momento, ma comunque degne di nota di per sé, in quanto poladroid e istantanee senza compromessi di un istante di vita passata.

ed ecco perché "poladroid graveyard", cioè cimitero: un luogo dove far riposare con dignità tutte le poladroid in qualche modo "scartate". in questo senso sarà anche un progetto aperto.

ho anche fatto il logo: disegnato, scannerizzato e poladroid-zato.

stazioni

2009-07-31T10:54:00.019+02:00

martedì 28 luglio ero a Roma per il concerto di Antony, e come al solito ho colto l'occasione per fare qualche foto "di viaggio".

il tema del viaggio mi è sempre stato vicino, in particolare la figura del viaggiatore, come allegoria dello spirito e del suo pellegrinaggio. non parlo qui, com'è ovvio, del numero di kilometri consumati sotto la suola delle scarpe, anche se la polvere sui propri calzari è comunque importante più che consumare il rivestimento dei sedili di un autobus o lo strato superficiale dei suoi pneumatici. i grandi pellegrinaggi sono sempre a piedi: la terra che vibra sotto i colpi dei propri passi deve entrare dalla pianta del piede e risuonare fino alla nuca per giungersi col cielo, altrimenti non c'è comunione col mondo, e tanto vale stare a casa. si può viaggiare anche senza muoversi fisicamente, se è per quello (anzi):

Senza uscir dalla porta,
conosci il mondo,
Senza guardar dalla finestra
scorgi la Via del Cielo
Tao Tê Ching, XLVII

comunque sia! stavolta si parla di stazioni. "stazione" significa fermata, arresto e pertanto è un punto di stasi del viaggio; uno dei pochi punti dove si può cambiare la direzione intrapresa.
a livello sociale fa letteralmente impressione il numero di individui che incrociano le proprie strade in questi luoghi, migliaia di viaggi & storie si accostano ad ogni momento, condividono la propria direzione per un attimo, divergono, si scontrano, si aspettano l'un l'altro e non si riconoscono. vagano senza coscienza del moto intrapreso. l'altro sfuma in una sfocatura indistinta. qui ci si incontra e ci si separa, a volte senza ritorno, o solo per qualche ora. le possibilità sono infinite!

le foto qui sotto sono state fatte alla stazione di Firenze in attesa del cambio per/da Roma.
la pessima qualità è dovuta alla compressione delle immagini in Picasa... quasi quasi le metto su Flickr...

Get the flash player here: http://www.adobe.com/flashplayer

Not fare well,
But fare forward, voyagers.
T.S. Eliot, The Dry Salvages, III

sviluppo bianco&nero, eccomi...

2009-07-30T17:21:00.006+02:00

Qualche giorno fa, con una velocità impressionante, sono arrivati i prodotti per lo sviluppo di pellicole B/N che avevo ordinato a Tuttofoto (ordine aperto il giorno prima alle 1353, pacco arrivato in mattinata del giorno dopo... ottimi prezzi, servizio perfetto, altamente consigliato...):

nel tentativo di rendermi indipendente in tutte le fasi fotografiche, lo sviluppo casalingo è la mia ultima barriera!
non avendo mai seguito corsi in merito, mi sono documentato (come al solito) molto scrupolosamente.
innanzitutto ho frugato nella biblioteca comunale, e ho trovato due libri perfetti per i miei scopi:

Ghedina O. F. - Manuale pratico di camera oscura (ottimo per la capire bene i parametri in gioco e per tutta una serie di consigli molto pratici)

H. J. Walls & G. G. Attridge - Le basi scientifiche della fotografia (per capire i fondamenti chimici di tutto il processo e il perché degli effetti che si ottengono variando i vari parametri)

poi, sulla rete si trova di tutto, come al solito: da video sull'argomento a interi thread su Flickr, a pagine più o meno accurate.

insomma, alla fine, incrociando tutte le nozioni con cui mi sono affaticato il cerebro ancora una volta, è uscita fuori la combinazione che si vede nella foto di cui sopra: bagno di stop e di fissaggio Ilford (dovendo sviluppare principalmente rulli Ilford Delta400), polvere per farsi il bagno di sviluppo equivalente ad un Ilford ID-11 (era in offerta, come rifiutare...), tre bottiglie a soffietto per conservare i bagni preparati, più altra attrezzatura (tank con spirale, anche questa in offerta a Tuttofoto, tre contenitori graduati comprati alla OBI, ecc.)
lo Shiva Nataraja che si vede in foto no - è mio compagno da molto tempo e padrino dell'operazione.

appena avrò tempo mi cimenterò in questa nuova impresa.

in a maze of memories

2009-07-27T11:01:00.002+02:00

In a maze of memories by blacktealover

Ok, si comincia.
...con qualcosa di vecchio!
questa improvvisazione su un tema scritto di chitarra classica (grossomodo i primi 40 secondi) l'ho registrata un anno fa quasi esatto, per un progetto di "collaborazione artistica". l'idea (non mia, per una volta!) era di miscelare musica e arte visiva (scultura, dipinto) realizzando dapprima creazioni indipendenti, per poi passarle all'altro che avrebbe creato un'opera cercando di captare l'espressione dell'altro partecipante.
io influenzo te e tu influenzi me, in una compartecipazione tra due forme molto diverse di espressione, l'una estesa nel tempo (musica) e l'altra nello spazio (arte visiva)...

non si sarebbe mai concretizzato nulla però!

ma poiché questi pezzi non erano poi così male, ho deciso di pubblicarli su SoundCloud - che in pratica è una specie di Flickr per la musica. rende davvero facile condividere con chiunque delle tracce audio; il player qua sopra viene da lì, ed ha anche svariate funzioni carine, come i commenti "a tempo".
l'account base è gratuito, ma un po' limitato... in ogni caso c'è dell'interessante musica elettronica là sopra.