Per chi come me ha la stessa capacità di disegno di un pterodattilo, creare interfacce è davvero frustrante.
Purtroppo però le interfacce sono la scogliera contro cui gli utenti si vanno a sbattere e se non è efficente, spesso e volentieri vi renderà la vita un vero inferno.
Passo indietro: Leggendo Professional MVC per il paragrafo sulla sicurezza, mi son fatto parecchie risate perchè ad ogni trucco/hack svelato c'era un avvertimento: l'utente è il diavolo.
SE l'utente ha la benchè minima possibilità di fare dei danni, questo li farà. Magari non nei primi giorni (Se siete fortunati) ma presto e SICURAMENTE farà qualcosa di malevolo.
Non importa se l'utente è un malintenzionato che cerca di bucare il vostro blog oppure è un utente che sta diligentemente "pulendo" l'anagrafica dal vostro gestionale: se può fare danni li farà.
Ecco perchè è particolarmente importante curare l'aspetto delle interfacce. Non tanto per quel che concerne i 'fiorellini' ma per quello che concerne la consapevolezza delle proprie azioni.
Prendiamo un esempio tipico: listato dell'anagrafica clienti. Una delle funzionalità principali è quella di ELIMINARE un dato.
Vi ricorda qualcosa questo?:
Ecco dovete immaginare che un utente in realtà vedrà questo:
Vi posso assicurare, per esperienza oramai decennale, questo non si discosta poi molto dalla realtà!
Ok capito il problema?! Bene andiamo avanti.
Questa è la mia soluzione:
Notare che il codice da ricopiare (67) è un numero a random da 0 a 100 che cambia OGNI VOLTA.
Questo rende l'operazione MENO MACCHINOSA e sopratutto richiede che l'utente PRENDA EFFETTIVA COSCIENZA delle proprie azioni.
E' IMPOSSIBILE che l'utente richieda la cancellazione di un utente, inserisca il codice corretto e confermi l'operazione NON sapendo quello che sta facendo.
Il fatto di ricopiare il codice è psicologicamente un pò come firmare la propria azione e questo, nel mondo reale, equivale a prendersi le proprie responsabilità.
Veniamo alla programmazione
Capito il problema e definita una soluzione passiamo alla programmazione.
Abbiamo bisogno di:
- JQuery 1.4.x con Ui ed Effects - che trovate qui
- JQuery UI block - che trovate qui
- un pò di css
- la plugin che gentilmente vi offro ;) - che potete scaricare da qui con l'esempio annesso
Mostriamo subito l'esempio:
Il codice è piuttosto semplice:
$("#DivConfirmDelete").ConfirmOperation({ title: 'Un titolo di esempio customizzabile', OnExit: $.unblockUI, OnConfirmed: function () { tr.remove(); $.unblockUI(); $.ExitConfirmOperation(); } });
Si fa una select su un div che farà da container (in questo caso DivConfirmDelete) e ...si esegue la extension ConfirmOperation.
ConfirmOperation non è altri che una funzione extension per jquery che estende 3 parametri:
- title - per un titolo nel box
- OnExit - se si annulla/esce dalla schermata (qui è un buon posto per richiamare il metodo di uscita di blockUi se lo si usa
- OnConfirmed - nel caso in cui sia stato inserito il codice corretto e premuto ok
Niente di più facile,
Buon divertimento ;)
