Table accordion, un plugin per Bootstrap

La libreria Bootstrap fornisce una solida base per la creazione dell’interfaccia di siti e applicazioni web.
Tra le varie animazioni disponibili si trova l’effetto accordion, cioè l’apertura e chiusura “a fisarmonica” di più box di contenuto variabile.

Ho pensato di utilizzare lo stesso effetto per visualizzare all’interno di una tabella contenuti informativi aggiuntivi collegati ad una singola riga.
Quando si vuole mantentere leggera una tabella mostrando solo poche colonne, ma allo stesso tempo visualizzare a richiesta più informazioni, è possibile utilizzare il plugin che ho creato appositamente per questo scopo, che consente di caricare quando necessario, tramite AJAX, dati aggiuntivi riguardo una riga, passando come parametro un identificativo per consentire al backend di riconoscere il record.

Ho scritto un plugin compatibile con l’ultima versione di Bootstrap (4.x) e jQuery (dalla 1.10.x) e richiede pochissima configurazione.
Dispone anche di una cache per memorizzare temporaneamente i dati ed evitare più chiamate con gli stessi parametri.
Approfondisci

Creare una piantina per la prenotazione di posti con Javascript e SVG

In seguito al mio precedente articolo di qualche tempo fa su come creare una piantina con la libreria Processing.js ho pensato di aggiornarmi sulle nuove tecnologie disponibili.
La mia attenzione è caduta sull’interazione tra Javascript e le immagini SVG.

Lo standard SVG (Scalable Vector Graphics) è una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. Nello specifico si tratta di un linguaggio derivato dall’XML che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

Per la parte Javascript ho scelto la libreria Snap.svg perché è completamente nuova, è stata progettata appositamente per sfruttare le potenzialità dei nuovi browser, inoltre è stata scritta dallo stesso autore della famosa libreria Raphaël.

La caratteristica che rende unica Snap è l’abilità di importare una immagine SVG già esistente, che può essere creata con un software come Illustrator, Inkscape o Sketch e poi animata con Snap. Si possono addirittura caricare via Ajax delle stringhe di SVG e manipolate prima del rendering.
Approfondisci

jQuery plugin: Popup Checkbox List

Vi è mai capitato di avere, all’interno di un form, una lista interminabile di checkbox per la stessa scelta?
Graficamente l’aspetto della pagina ne risente notevolmente e anche l’utente finale può sentirsi scoraggiato dal compilare un modulo apparentemente molto lungo.
Per risolvere questo problema ho creato un plugin per jQuery che rende possibile mostrare in una finestra modale l’elenco di checkbox interessato, in maniera da compattare la lunghezza del form, nel quale vengono mostrare solo le scelte effettuate.
Approfondisci

JQuery Validation per Array di elementi Input

Utilizzo da anni il plugin Validation di JQuery e lo reputo molto funzionale; recentemente mi è capitato di dover validare un array di elementi input e ho scoperto che in questa situazione presenta dei limiti, nel senso che non è in grado di validare tutti gli elementi dell’array, ma solo il primo.
Per questo motivo ho fatto una ricerca in rete ed ho trovato una soluzione (non ufficiale) che risolve il problema senza intaccare il funzionamento generale. Per rendere ancora più semplice l’utilizzo ho scritto una estensione, in maniera da non dover modificare direttamente i file sorgenti del plugin.
I miei test sono stati utilizzando la versione 1.5.2 di jQuery Validation.
Approfondisci

Face detection per tutti i gusti

Come si può intuire dal nome stesso, la Face detection è una tecnologia utilizzata per riconoscere, o meglio, determinare la posizione e dimensione di volti umani all’interno delle immagini digitali.

Questa tecnologia, ormai onnipresente sui principali social network, ha raggiunto la maturità ed è dimostrato dal fatto che sono proliferate implentazioni in tutte le forme e linguaggi di programmazione.

Di seguito, propongo alcuni progetti che hanno attirato la mia attenzione.
Approfondisci

FTP upload e download con progress bar in PHP e JQuery

In questo articolo metto a disposizione una semplice classe in PHP che permette di effettuare upload e download di file verso un server FTP, inoltre è in grado di mostrare lo stato di avanzamento dell’operazione con una progress bar in javascript, ma non solo, perchè stampa anche altre informazioni statistiche come il numero di KB trasferiti e quelli totali, la velocità istantanea e quella media e i secondi totali dell’operazione.
Approfondisci