AJAX per un’interfaccia intelligente

Humanized Reader, paginazione e scrolling infinito.

Tra le varie tecnologie che contraddistinguono il web 2.0, AJAX sicuramente ha un ruolo importantissimo. Usato su molti siti ed applicazioni internet, questo linguaggio si è messo in evidenza per la possibilità di caricare contenuti all’interno di una pagina senza uscire dalla stessa. Se volete approfondire, vi rimando a wikipedia.

Perchè parlo di questa tecnologia? Perchè l’azienda americana Humanized ha realizzato un lettore di feed molto interessante proprio con AJAX: l’Humanized Reader.

La novità si può notare facilmente scorrendo alla fine della pagina e guardando cosa succede: vengono caricati nuovi articoli in coda, in modo da non interrompere l’utente e fargli continuare la lettura.

Appena visto questo esperimento, mi è venuto qualche dubbio sullo strumento: è comodo, ma non consente di avere dei feed organizzati in categorie, e mostra tutti gli articoli in sequenza. Avrei qualche problema a seguire i miei 47 feed con un lettore del genere!

L’idea però non è da sottovalutare se applicata in altri ambiti, ed ecco che Google l’ha colta al volo nel suo strumento sperimentale SearchMash. Si parla di motori di ricerca, il vero ambito dove una soluzione simile può fare la differenza in termini di usabilità. Provate a fare una ricerca ed osservate i risultati: cliccando su “more web pages” ecco lo stesso script all’opera!

Questo è un chiaro esempio di come si dovrebbe utilizzare AJAX, ricordando che è sì comodo, ma abusarne può portare numerosi svantaggi: prima di tutto l’impossibilità di tornare indietro con il tasto “back” del browser!

ThickBox 2.0: addio Lightbox?

Mentre molti si stanno ancora godendo le meritate vacanze in questo Agosto 2006, una novità è arrivata in rete: ThickBox versione 2.0!

Per chi non conoscesse ThickBox, o il più famoso Lightbox, rimando ad un post di Aprile 2006 dove avevo descritto i due javascript commentando pregi e difetti. Riassumendo, sono due soluzioni eleganti per mostrare in particolare foto ed immagini senza l’uso di pop-up.

Le novità di ThickBox 2.0 sono considerevoli, ed il peso resta ancora una volta inferiore agli script basati sulle librerie prototype (come appunto Lightbox): solo 27kb se si utilizzano file compressi.

Si possono finalmente vedere immagini anche in gallerie, contenuti inline o all’interno di iframes, il tutto con il massimo rispetto per gli standard dell’accessibilità. Vedere le demo sul sito ufficiale di ThickBox per credere! Trovate allo stesso indirizzo tutte le informazioni necessarie per installare lo script e farlo funzionare.
Adesso vorrei conoscere un valido motivo per continuare ad utilizzare Lightbox…

Preview dei commenti in tempo reale

Ho installato e testato un plugin per WordPress molto interessante: Live Comment Preview. Consente di visualizzare l’anteprima del commento non appena si inizia a scrivere del testo nel campo apposito, tramite un semplice javascript. Potete già adesso testarne il funzionamento su questo sito.

Il lato più interessante di questo plugin è la sua semplicità di installazione: pur avendo un tema completamente personalizzato con me ha funzionato subito, semplicemente attivandolo.

Solamente se volete fare delle modifiche al codice, come ho fatto io, dovrete mettere mano al file php, ma non è per niente complicato. Trovate infatti una stringa con tanto di commenti condizionali che vi consentirà di correggere il codice come preferite.

Segnalo anche un altro plugin appena installato: Google Sitemap Generator, il cui nome spiega già tutto. Automatizza il processo di creazione della sitemap del sito, aggiornandola ad ogni cambiamento e segnalandola a Google.

Entrambi questi plugin sono stati aggiunti nella pagina delle utility, in modo da essere sempre facilmente reperibili.

Lightbox vs. Thickbox

Da diversi mesi ormai è stato realizzato uno script che permette di realizzare gallerie di immagini in maniera semplice e molto accattivante: Lightbox.

Questo script permette di mostrare la versione ingrandita di un’immagine cliccando sull’anteprima, ma senza aprire fastidiose ed assolutamente inaccessibili finestre pop-up. Visto che è molto più semplice mostrare un esempio piuttosto che descrivere il funzionamento del javascript, visitando la pagina di Lightbox JS potete farvi un’idea chiara. Trovate anche le indicazioni su come integrare il tutto nelle vostre pagine.
Il lato positivo di questo script è che resta pienamente accessibile anche con javascript disattivato, infatti cliccando sull’immagine, il link per vedere l’ingrandimento continuerà a funzionare. La versione ingrandita sarà visualizzata nella stessa finestra del browser.

Da qualche tempo è stata rilasciata anche la versione 2.0 di Lightbox, che è leggermente più accattivante e con qualche funzione in più rispetto alla precedente, ma che non mi trova assolutamente d’accordo sulla sua efficienza: il peso di tutto lo script è vicino ai 100kb! Se pensate che la prima versione pesa un quinto di questa, vi potete rendere conto di come sia conveniente tenersi alla larga dall’upgrade.

E’ pratica diffusa fare attenzione al peso degli elementi nelle pagine per snellire i caricamenti e permettere una navigazione più veloce, dal mio punto di vista è impensabile introdurre uno script che richiede così tanta banda.

Ma negli ultimi giorni un altro fattore intacca la fama di Lightbox, ed è una variante che farà molto parlare di sè: Thickbox.

E’ uno script del tutto simile all’originale, con lo stesso intento, ma fa della versatilità il suo punto di forza. Infatti può essere usato sì per realizzare gallerie di immagini e mostrare versioni ingrandite di piccoli thumbnails, ma Thickbox può anche servire per far aprire veri e propri box di testo all’interno della pagina in cui ci si trova, contenenti codice html, senza usare pop-up e rimanendo pienamente accessibili.

Provare per credere, nella pagina in cui ci viene presentato lo script in tutte le sue varianti ci sono diversi esempi che meritano di essere visti. Notevole l’idea di utilizzare Thickbox per i form di login o registrazione. Se poi si aggiunge che il peso dello script è intorno ai 20kb i vantaggi sono evidenti.

Ho intenzione di fare diverse prove e magari integrare qualcosa del genere in questo sito, fatemi sapere cosa ne pensate e se avete sperimentato gli script, ogni contributo è il benvenuto.

Aggiornamento del 22 Maggio 2006: è stata rilasciata una nuova versione di Thickbox, che supporta ancora più tipologie di file, inoltre nel caso di immagini troppo grandi queste si ridimensionano da sole, ed ora il box non è più posizionato tramite la proprietà fixed quindi si sposta scorrendo la pagina. Da scaricare!

Come è stato realizzato questo sito?

La risposta alla domanda del titolo potrebbe essere veloce, di due-tre frasi, breve ed indolore.
Ma visto che mi piacciono le cose complicate, mi sembra giusto mettere da parte le risposte banali e descrivere nei dettagli come ho creato questo sito.

1. Il pannello di controllo

E’ sul pannello di controllo che ho concentrato le mie attenzioni fin dai primi momenti. Volevo integrare alcune funzioni nel sito senza che restassero sempre in vista, e volevo farlo utilizzando qualche script interessante.

Quando ho sperimentato moo.fx, ho capito subito che faceva per me.

Continua a leggere Come è stato realizzato questo sito? »