Gian Carlo Mingati. Design and development for interactive media.

In celebration of jQuery’s 4th birthday, the jQuery team announces the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone into this release.

Durante la fase iniziale dello sviluppo di un widget jQuery un bel pò più articolato, mi sono ritrovato al punto in cui offset().left e top, ed il loro utilizzo erano chiari; ho quindi deciso di condividere con voi questi ‘effettini’ trasformandoli in un piccolo plugin con funzionalità di Zoom e Pan (ingrandimento e scroll in base alla X e Y del puntatore del mouse).

Si chiama miniZoomPan e funziona così: si prepara il markup composto da una DIV con un ID e dentro ci si mette un’immagine; la classica immagine in un post, per esempio.

<div id="zoom01">
<img src="leaf_s.jpg" />
</div>


Si instanzia il plugin (scaricabile qui) in questo modo:

$(function() {
$("#zoom01").miniZoomPan({
sW: 200, //small image width and height
sH: 250,
lW: 370, //large image width and height
lH: 462
// other options
/*
frameColor: "#cecece",
frameWidth: 1,
loaderContent: "loading..." // text or image tag eg.: "<img src='spinner.gif' />"
*/
})
});


Fatto. Come potete notare sW e sH sono le dimensioni dell’immagine piccola, mentre lW e lH sono quelle dell’ingrandimento. Obbligatoriamente le vs. immagini dovranno avere la parte finale del nome file modificato ad hoc (mycat_s.jpg per la piccola, mycat_l.jpg per la grande).
A questo punto quando vi posizionate sull’immagine, ne viene caricata una di dimensioni maggiori (grande quanto volete) che scrollerà in base alla posizione del mouse. Un preload customizzabile con testo o con una gif informa l’utente del caricamento in corso.

Qui trovate la pagina d’esempio, dove con un minimo di pazienza potrete recuperare il CSS e lo script che comunque per comodità potete prelevare rispettivamente qui e qui. Si tratta di piccolo plugin senza pretese, che però può servire su un online store per visualizzare al volo l’ingrandimento di una maglietta o di un oggetto senza dover cambiare pagina o usare finestre modali.

miniZoomPan plugin. Enjoy.

Image credits: Alien Blob - J. Bumgardner
In questi giorni ho potuto rimettere le mani su un ‘vecchio’ progetto, dopo che per caso mi sono dovuto cimentare nella realizzazione di qualcosa di simile, che poi mi è servito - con le opportune modifiche - per proseguire nella realizzazione di questo plugin per jQuery: slideViewerPro.

Devo dire che sono soddisfatto del risultato finale visto che tra le richieste di updates per il suo predecessore c’erano la possibilità di far avanzare le slides in modo automatico e di poter avere delle thumbnails da selezionare, in alternativa ai numeri; slideViewerPro ha tutto questo, e altre opzioni. Ho anche scritto un tutorial in inglese grazie al quale - forse - si capisce come costruire uno slider per immagini da mettere nel proprio blog, o da usare come base per uno slideshow di progetti; per questo non riporto porzioni di codice o istruzioni su questo post.
Inoltre è nata una collaborazione a ‘due mani’ di cui però non darò ulteriori dettagli se non che con questo mio ‘asiatico’ collaboratore stiamo lavorando ad un merge tra le due versioni di slideviewer (1.1 e Pro); in pratica alla fine dovremmo arrivare alla realizzazione di una complete-gallery-solution cioè un unico script che con un paio di settings proponga una UI con numeri o thumbnails.

Come da ‘tradizione’ slideViewerPro si lo si può usare in modo molto semplice, a partire da una lista non ordinata di immagini.

Rapidissimi auguri per jQuery, il celeberrimo framework JavaScript ideato e presentato esattamente 3 anni fa al primo BarCampNYC da John Resig. Inoltre esce oggi la tanto attesa versione 1.3; ecco alcune delle BIG features:

• Sizzle: A sizzlin’ hot CSS selector engine.
• Live Events: Event delegation with a jQuery twist.
• jQuery Event Overhaul: Completely rewired to simplify event handling.
• HTML Injection Rewrite: Lightning-fast HTML appending.
• Offset Rewrite: Super-quick position calculation.
• No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

E sempre da oggi, è disponibile un nuovissimo API browser.
Tanti auguri jQuery!

Durante lo scorso anno ho ricevuto decine di mails a proposito di slideViewer, il mio modesto - ma ampiamente apprezzato - engine per image-galleries fatto con jQuery. La maggior parte delle richieste erano: “si può fare in modo che le immagini vadano avanti facendo click sulle immagini stesse?”.
Stamane, dopo 18 mesi (giugno 2007) dalla prima release del plugin, ho voluto vedere quanto ci voleva a fare questa modifica.

// next image via image click 14/01/2009
jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) {
jQuery(this).bind("click", function(){
var ui = jQuery(this).parent().parent().parent().next().find("a");
if(z+1 < pictEls){
ui.eq(z+1).trigger("click");
}
else ui.eq(0).trigger("click");
});
});

All’inizio, come per tutte le cose che hai fatto da molto tempo e di cui non ricordi neanche come ci sei riuscito, ho cominciato a giocherellare coi selettori per trovare l’immagine, associarvi un evento click, ripassare la posizione alla interfaccia coi numeri… poi un lampo: bastava usare .trigger(”click”) per ’simulare’ il click su uno degli elementi della UI. In effetti era già tutto pronto, selezione/deselezione del link interessato, spostamento della UL… l’unica cosa chè ho dovuto fare è verificare se stiamo cliccando sull’ultima immagine della lista per ‘riavvolgere’ tutto alla posizione 0, iniziale.
Sarebbe il caso, se avessi tempo, di calcolare l’offset del mouse rispetto all’immagine. In questo modo se clicco nella metà destra di una foto posso andare alla prossima, viceversa se sono nella metà sinistra, torno indietro. Boh, aspettiamo che me lo chiedano.
slideViewer 1.1

Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).

Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.

Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.

E’ stata lunga ma dopo qualche mese di lavoro (freelance, a partire dalle ore 20 p.m, quindi se fossero continuativi sarebbero una quindicina di giorni) sono felice di postare il link al nuovo sito na3 Studio di Architettura.

Come già accennato in qualche post precedente, per l’interaction design ho utilizzato jQuery; in particolare, per questo progetto ho usato i plugins Cycle, SafeMail, Reflect, e ho scritto neanche duecento righe di codice.
Il sito si presenta estremamente semplice nel design, chiaro, pulito, leggero e snello nel markup, potente e conciso nel codice JS.

Da segnalare la homepage, la pagina studio e la pagina indice dei progetti; quest’ultima in particolare si basa sul menu accordion già visto su questo mio sito, ma in più può far scrollare - con effetto easing - gli elementi figli di una categoria (projects>design), se questi sono più di cinque. Abbiamo realizzato (customizzandolo nello style e in qualche elemento di markup) anche un corporate blog per na3, powered WP 2.5.

Very clean and concise markup, degrades wonderfully. Truly the type of work one would look for and appreciate.
— Kris, from the jQuery discussion group

Il lato backend è stato curato dal mio esimio collega freak Heracleum (di cui non abbiamo una foto), in PHP.
Enjoy the new na3 website!

Let me send out best wishes to all for you and your families in the following year! No matter how good or bad past year was for you, I hope this brand new year will bring you more success and happiness in business and personal life.

A proposito di success e satisfaction voglio annotare in questo breve post di auguri per il nuovo anno, anche un paio di piccole soddisfazioni personali, relative ai miei (unici) due plugin jQuery finora realizzati: liScroll e slideViewer.

Già da tempo avevo visto che sia l’uno, sia l’altro avevano un buon ranking tra i “Most Popular” plugin di jQuery e, poichè nelle pagine-tutorial di questi miei plugins ho installato Google Analytics ho potuto apprezzare il traffico generato da queste pagine (il referral è la pagina plugin di jQuery): picchi di 500 visite al giorno per slideViewer (il mio generatore di image-galleries) e 600 per liScroll (il mio news ticker).

Addirittura c’è chi si è preso la briga di paragonare 5 gallerie fatte con jQuery e di decretare come la migliore proprio slideViewer, o chi la ha inserita tra le “12 better Javascript and Ajax based solutions for gallery needs”; e poi c’è chi ha scritto tutorial del tutorial per il mio news ticker plugin (e da qui il numero di visite) … insomma l’anno è finito bene e comincia bene (ma si dai siamo ottimisti, stò governo cadrà, la monnezza a Napoli brucerà e Carla Bruni si sposerà… e andiamo), ho avuto un buon feedback per queste due semplici idee e penso che il mio impegno non potrà che aumentare su questo fronte infatti sto lavorando alla versione 2.0 di slideViewer, ho pubblicato un brand new “sliding” portfolio … e mi sono comprato un Logo 500DX al posto del pesante Quick EP10.

Happy new Year!

Con estrema lentezza visti i vari impegni - scusa Nicola - sto lavorando ad un progetto freelance; per le tematiche relative all’interaction design ho pensato di usare jQuery mentre il markup è rigorosamente sviluppato in xHTML strict; il tempo non è molto e mi son detto: voglio usare quanti più plugin riesco, voglio vedere quanto è vero stò motto “write less, do more”, e quanto riesco a customizzarli in base alle mie esigenze.

Ma veniamo al perchè di questo post: nel mentre sviluppavo il mio design già pensavo ad un simpatico menu di tipo “a soffietto” o accordion, per dirla in inglese, che suona meglio.
Ed ho deciso di condividere con voi tale idea anticipandovi che comunque ci sono già buoni tutorial e plugin sull’argomento ma nessuno, non capisco perchè, parte da un set di liste non-ordinate annidate.
Questo è il nostro markup: molto semplice. Ricordiamoci di dare un ID alla lista.


<ul id="prjcats">
<li><a href="#">Henseleit Helicopters</a>
<ul>
<li><a href="#">MP V91 XL</a></li>
<li><a href="#">MP XLE</a></li>
</ul>
</li>
<li><a href="#">Mikado Model Helicopters</a>
<ul>
<li><a href="#">V Stabi 3 Axis</a></li>
<li><a href="#">Logo 500DX</a></li>
<li><a href="#">Logo 500 3D</a></li>
</ul>
</li>
<li><a href="#">Thunder Tiger</a>
<ul>
<li><a href="#">A109 Scale Fuselage Kit</a></li>
<!-- eccetera -->
</ul>
</li>
</ul>


Ora passiamo allo script che ce la trasforma in un accordion menu con effetto easing.


<script type="text/javascript">
$(function(){
$("ul#prjcats li ul").hide();
$("ul#prjcats>li>a").click(function() {
$(this).addClass("current");
var $subnav = $(this).next();
if($subnav.is(":visible")) {
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
}
if(!$subnav.is(":visible")) {
$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
}
return false;
});
});
</script>


E questo è il nostro script jQuery. Ricordiamoci di includere il framework stesso e il plugin jquery.easing


<script type="text/javascript" src="http://www.gcmingati.net/wordpress/wp-content/themes/giancarlo-mingati/js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="http://www.gcmingati.net/wordpress/wp-content/themes/giancarlo-mingati/js/jquery.easing.1.2.js"></script>


Ora vediamo nello specifico cosa fà questo script:
Per prima cosa nascondiamo tutte le liste annidate.


$("ul#prjcats li ul").hide();


Al click dei link di primo livello - notare la sintassi “>”


$("ul#prjcats>li>a").click(function()


aggiungiamo una classe .current (il colore rosso di selezione) e assegnamo alla variabile $subnav le liste di secondo livello.
.next() trova il primo elemento “discendente” di A: appunto una lista UL


$(this).addClass("current");
var $subnav = $(this).next();


Qui controlliamo se $subnav è visibile - cioè aperto; se lo è usiamo toggle per switchare tra lo stato di visibile o invisibile. Se é “.is” visibile, chiudi la sub-lista.
Per l’animazione usiamo un tempo “750″- millesimi - ed un metodo easing “easeInOutExpo”. Risaliamo con .prev() ad A e gli togliamo la classe di selezione.
Nota sugli effetti easing: sono 30 e potete giocherellare con i vari metodi di cui trovate un elenco qui. Provate l’effetto che più vi piace. E un’ulteriore nota: gli effetti si fanno apprezzare su liste con molti elementi; se le vostre liste sono corte, evitate effetti di accelerazione/rimbalzo.


if($subnav.is(":visible")) {
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
}


Qui invece controlliamo se $subnav selezionato non è visibile - è chiuso - e se lo è, prima controlliamo se qualcun altro è aperto “"ul#prjcats li ul:visible"” e lo chiudiamo, e poi apriamo il $subnav selezionato.


if(!$subnav.is(":visible")) {
$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
}


Dopo gli if, usiamo “return false;” per evitare che al click dei link di primo livello, che sono vuoti “#”, si verifichi il balzo verso l’alto della pagina.


return false;


Ed ecco fatto, accordion menu con effetto easing.

Stamane sul discussion group di jQuery hanno segnalato questa simpatica (portentosa) web app: Songza - The music search engine and internet jukebox.

Songza’s primary purpose is to illustrate how to provide content using a “humane interface” - the term used to describe interfaces that reflect how people actually use software. Songza presents this concept through its clean, clutter-free design and transparent remote control. New features will be added in time.
— Jef Raskin

L’interfaccia è davvero notevole ed originale, innovativa, usabile e con un solo click si accede ad una decina di funzioni (play, share, rate, add to playlist … ) e tra i vari plugin utilizzati - eh sì plugin, perchè è fatta con jQuery - figura Thickbox dove per mezzo di finestre modali permette di ricavare - per esempio - la stringa per fare l’embed del loro player, qui visualizzato con la stessa tecnica (Thickbox), visto che c’ero.

Funziona in parte per mezzo delle API di YouTube, e sostanzialmente cerca tra i “video” quelli musicali e li riproduce su di un minuscolo flashplayer privato dello stream video, e quindi si sente solo l’audio. Grande idea, ottima interfaccia, stupenda webapp.