imgPreview, Image Preview con jQuery

imgPreview è un plugin per jQuery che permetterà agli utenti di visualizzare una preview delle foto prima di cliccarci sopra, mostrandole in un box stile quello per i tooltip.

Inoltre, il caricamento della foto avviene durante la preview, quindi in caso gli utenti vadano a cliccare effettivamente l’immagine verrà visualizzata molto velocemente.

E’ in grado di trovare automaticamente il link a cui ancorare il box di preview, e inoltre dispone di diverse opzioni personalizzabili, quali definire la distanza dal cursore per cui si attiva il box, la sua dimensione, oppure eventuali funzioni di callback e molto altro.

JSXGraph, e fare i grafici diventerà semplice

JSXGraph è una libreria cross-browser che vi permetterà di creare facilmente grafici interattivi, disegnare funzioni e gestire la visualizzazione grafica di dati in un web browser.

Implementato completamente in JavaScript, utilizza tecnologie di tipo SVG (Scalable Vector Graphics) e VML (Vector Markup Language, utilizzata anche da Google Maps).

E’ possibile creare grafici utilizzando JavaScript, un file o una stringa GEONExT oppure un file Inteorgeo.

Supporta anche funzioni matematiche molto complesse, aiutandovi a rappresentarle in modo semplice.

JSXGraph richiede Prototype JS library per funzionare

Creare interfacce innovative con WireIt

Non so quanti di voi conoscano Yahoo Pipes, in breve si tratta di un sistema di mashup sviluppato da Yahoo in cui gli utenti possono connettere varie fonti dati unendole con una particolarissima interfaccia grafica con dei “tubi”. Un’esperienza utente un po’ difficile da spiegare qui ma decisamente accattivante ed innovativa.

Da oggi tutti possono realizzare interfacce del genere grazie a WireIt, una nuova libreria Javascript che, appoggiandosi alle YUI, consente di creare esperienze utente innovative collegando più elementi grafici fra di loro come potete vedere nell’immagine qua sopra. Muovendo gli oggetti sullo schermo i “tubi” li seguono in tempo reale, ogni relazione può essere facilmente eliminata o dirottata verso un altro elemento. Le possibilità sono veramente infinite e solo a giocare con la demo di WireIt, mi sono venute in mente almeno 2 o 3 nostre applicazioni in cui mi piacerebbe integrarlo.

FireBug 1.3 finalmente !

Dopo un’attesa decisamente lunga, oggi Rob Campbell ha annunciato l’uscita della versione finale di FireBug 1.3, la versione di FireBug che finalmente offre un supporto completo per Firefox 3.

Firebug 1.3 è già disponibile su addons.mozilla.org per cui se già avete questa indispensabile estensione per Firefox l’aggiornamento dovrebbe essere automatico. Molto lavoro è stato fatto per migliorare ancora di più il prodotto, soprattutto nel tab Net che consente di vedere i tempi di caricamento dei singoli elementi della pagina.

Firebug 1.3 non sarà comunque compatibile con l’imminente Firefox 3.1 per il quale dovremo aspettare FireBug 1.4, già disponibile in versione Alpha.

Scrivere plugin per jQuery

Nel corso dell’ultimo anno jQuery ha veramente spiccato il volo, raccogliendo molto supporto anche a livello enterprise e proiettandosi come una delle più affermate ed utilizzate librerie Ajax sul mercato.

Se anche voi siete appassionati di jQuery e lo utilizzate quotidinamente, potreste trovare molto utile un tutorial completo pubblicato in questi giorni da NETTUTS su come sviluppare partendo da 0 un plugin per jQuery.

L’esempio utilizzato è molto semplice: un image loader che al caricamento della pagina effettua il preload di alcune immagini per salvarle in cache e renderne più veloce il caricamento nel resto del sito.
Il tutorial contiene tutto il codice necessario per far funzionare il plugin, si parte dalla struttura iniziale per poi aggiungere gradualmente funzionalità al nostro plugin. Tutto il codice di esempio è disponibile per il download così come una demo funzionante.

Usability Test con UserFly

Per chi si trova a gestire progetti Web importanti uno dei fattori più critici è sempre lo studio del comportamento degli utenti per capire come questi interagiscono con il sito Web e quali sono i margini per migliorare la loro esperienza.

Un nuovo tool rilasciato senza troppo clamore oggi aiuta incredibilmente in questo compito consentendovi letteralmente di registrare le azioni dell’utente nel sito per poi rivederle comodamente nel vostro browser in qualsiasi momento. Basta registrarsi a Userfly e aggiungere al proprio sito un piccolo Javascript che consentirà di registrare i movimenti del mouse dei vostri visitatori. Accedendo al sito potrete poi rivedere tutte le registrazioni e capire esattamente come si comportano i vostri utenti.

Il servizio è interamente realizzato in puro Javascript ed Ajax. Al momento è un po’ spartano ma sicuramente utilizzabile. Credo proprio che nei prossimi giorni lo testerò su alcuni nostri progetti. UserFly non è il primo servizio di questo genere e, solitamente, il grosso problema di questi Tool è la lentezza: quando iniziano ad avere molti utenti iscritti il download del Javascript e la registrazione delle azioni potrebbe non andare a buon fine. Vi consiglio quindi di includere il loro Javascript alla fine della pagina Html se possibile per non rallentare il caricamento del sito.

Comet: meglio il push del poll ?

Purtroppo ultimamente non ho molto tempo per aggiornare, siamo sommersi di lavoro e sto facendo un po’ di consulenze in banca, rassicuratevi comunque, non sono usciti grandissimi prodotti o librerie in questo periodo estivo :)
Voglio invece parlarvi di Comet, un nuovo approccio “alternativo” ad Ajax per aggiornare dinamicamente le pagine web. Come ben sapete Ajax effettua sostanzialmente il così detto polling, ogni tot secondi cioè contatta il server e verifica se ci sono dati da aggiornare. Quest approccio è sicuramente comodo ma ha alcuni svantaggi, primo fra tutti un’alta inefficienza in particolari situazioni e la creazione di molte connessioni sul server: una per ogni richiesta di informazioni.
Ormai diversi mesi fa, Alex Russel di Dojo ha proposto un approccio alternativo chiamato Comet di cui sono disponibili le slide di presentazioni. Comet parte da un presupposto diverso, invece di effettuare il polling apre un’unica connessione col server, la mantiene aperta ed aspetta che sia il server ad effettuare un push di informazioni non appena cen’è bisogno.
Il concetto è molto interessante ed in alcuni ambiti può portare ad un’esperienza utente molto più confortevole rispetto ad Ajax. Se volete vedere qualche bella demo sull’uso di comet vi consiglio di guardare gli esempi di lightstreamer.
Ci stiamo giocando un po’ questi giorni qui in Creative Web ed i risultati sono decisamente incoraggianti, probabilmente inseriremo il supporto di Comet nella prossima release del nostro framework di sviluppo. Purtroppo resta qualche problema di compatibilità cross browser a causa di alcune limitazioni di Explorer. Il problema è comunque risolvibile con vari workaround.

[TAGS]comet, http streaming[/TAGS]

APIlitAx: Google Adwords in Ajax

Vi segnalo APIlitAx, una libreria Ajax rilasciata con licenza BSD per gestire il proprio account Google Adwords direttamente dal proprio sito sfruttando le potenti API messe a disposizione da Google. L’aspetto estetico sembra ancora un po’ primitivo e, a vedere gli screenshot l’interfaccia mi sembra decisamente caotica. Può trattarsi comunque di un ottimo spunto per creare il proprio sistema di gestione campagne CPC.
[tags] google adwords api, ajax showcase[/tags]

MxGraph: Grafici in Javascript

JGraph è una libreria molto nota agli sviluppatori Java per la creazione di grafici e diagrammi di flusso. Dagli stessi sviluppatori nasce ora MxGraph, un’implementazione di JGraph completamente client side, implementata in Javacript, SVG e VML. Sul sito è disponibile una demo, si tratta comunque di una preview release mentre una versione pubblica dovrebbe essere rilasciata nel Q3 2006.
[tags]mxgraph, jgraph, svg[/tags]

Battaglia navale in Ajax

Si chiama SMS, acronimo di Sink My Ship (affonda la mia nave) questa divertente versione del classico battaglia navale completamente realizzata in Ajax. Giocare è facilissimo e non richiede alcuna registrazione al servizio, accedendo al sito si entrerà in una chat molto popolata, da li si potrà sfidare molto facilmente un avversario. Per prima cosa bisogna posizionare le proprie navi, ovviamente col drag & drop. Dopodiché non resta che affrontarsi a colpi di click sul campo di battaglia sperando di affondare tutte le navi nemiche prima che l’avversario affondi le vostre … a me è andata male :)
[tags]ajax game, sinkmyship[/tags]