Mondi su mondi, sistemi di sistemi.

Layout fluidi: vantaggi, rischi e rimedi

Thursday, November 5th, 2009

Questo articolo su Smashing Magazine fa il punto sui lay­out fluidi e sugli accorgimenti aggiuntivi per evitare sorprese.

In due parole…

Ho letto per la prima di questo approccio su A List Apart. In sostanza, a partire dalla constatazione che i valori in em sono una misura relativa, espressa come target/context, pos­siamo estendere questo approccio per i lay­out, esprimendo le dimensioni delle sezioni in termini di rapporti.

In altre parole, al posto di specificare che un div dev’essere grande 700px, pos­siamo dire che sarà pari, ad es., al 70,85% della sezione che lo contiene, che è pari a 988px.

Inconvenienti e rimedi

I vantaggi pos­sono essere considerevoli, soprattutto in considerazione del fatto che le dimensioni dei monitor tendono a diversificarsi. D’altra parte ci pos­sono essere problemi, come ad es. il trattamento di elementi come le immagini o gli arrotondamenti. I vari rimedi sono elencati su Smashing Magazine, con alcune chicche come Masonry, che sistema i problemi con gli elementi flottati; Smart Columns, che riarrangia il contenuto in base alle dimensioni della finestra; e l’aggancio delle dimensioni del testo sempre in base alle dimensioni della finestra.

GUI: un esempio con l’autocomplete di YUI">Test della GUI: un esempio con l’autocomplete di YUI

Wednesday, July 29th, 2009

Qual è il problema?

Una delle cose abbastanza incasinate da testare sono gli elementi dell’elementi AJAX, come l’AutoComplete. Non sono mai riuscito a testare l’evento che corrisponde direttamente allo use case, ovvero, l’utente seleziona un’elemento della lista e nel campo associato viene inserito un valore, perlomeno con YUI. Ho provato anche con Selenium ma senza successo. Forse impegnandosi di più si potrebbe ottenere qualcosa di meglio ma, visti i risultati (vedi discus­sione in fondo), non so se sia necessario.

Riduciamo i danni

In mancanza dell’ideale pos­siamo comunque ridurre di molto la porzione di codice non testata. In primo luogo pos­siamo testare in modo estensivo la data source associata all’AutoComplete. In secondo luogo pos­siamo usare i custom events per isolare e testare il codice che si occupa delle conseguenze della selezione.

Lo scenario da testare

Facciamo un esempio clas­sico: un AutoComplete che, alla selezione del nome del cliente, imposta anche il valore della primary key di quel record in un campo nascosto.

Usiamo i custom events

Se non tenes­simo conto delle esigenze dei test, la soluzione sarebbe semplice:

clienteAC.itemSelectEvent.subscribe(
    function(sType, args) {
        clienteAC.getInputEl().value = args[2].nome;
        document.form-cliente.id_cliente.value = args[2].id;
    }
);

Invece, con gli eventi custom pos­siamo scrivere questo:

clienteAC.itemSelectEvent.subscribe(
    function(sType, args) {
        customItemSelectEvent.fire({
            selectedItem: args[2]
        });
    }
);

Ovvero, alla selezione dell’utente, lanciamo un evento che contiene la selezione stessa.

Dall’altra parte, il listener raccoglie l’evento, esegue le operazioni neces­sarie e al termine lancia un secondo evento, comunicando la fine dell’operazione:

// aggiorniamo il campo associato all’auto complete
clienteAC.getInputEl().value = args[2].nome;
// impostamo il valore della primary key
document.form-cliente.id_cliente.value = args[2].id;
// “avvisiamo” che abbiamo finito
customLoadCompleteEvent.fire("Finished");

Testiamo!

Questo secondo evento è essenziale per i test, infatti, a questo punto pos­siamo semplicemente inviare un customItemSelectEvent e aspettare l’altro evento in risposta:

//…
name: "Test auto complete cliente",
testSelectEvent: function() {
    var resume = function (ev, type) {
        this.resume(function() {
            customLoadComplete.unsubscribe(resume);
            YAHOO.util.Assert.areEqual(
                 "Mario Rossi",
                 document.form-cliente.nome.value,
                 "Il nome del cliente dovrebbe essere 'Mario Rossi'"
             );
        });
    };
    customLoadComplete.subscribe(resume, this, true);
    customItemSelect.fire({
        selectedItem:{
            id: 1,
	    nome: "Mario Rossi"
	}
    });
    this.wait();
},

Un bilancio

Un dubbio legittimo che può venire è se valga la pena di complicare così il codice solo per poterlo testare. È un dubbio che ho spesso!

In generale, l’effetto delle modifiche in funzione della “testabilità” è positivo. L’importante è non spingersi al punto di creare metodi o variabili che vengono usate solo nei test: a mio parere è un errore.

In questo caso credo che il codice risultante sia più pulito e meglio separato. Adesso pos­siamo sfruttare l’evento finale customLoadComplete in coda alla selezione dell’utente per aggiornare altri elementi della pagina, senza che ci sia una dipendenza diretta con l’AutoComplete.

All’inizio accennavo al fatto che, nonostante tutto, sia forse pos­sibile testare direttamente l’AutoComplete. Tuttavia ho l’impressione che avrei ottenuto una qualità inferiore, con più rigidità. A questo punto lo prenderei in considerazione solo come test complementare, utile ma non indispensabile.

AJAX">Tecniche, plugin e trucchi per AJAX

Monday, March 16th, 2009

Smashing Magazine, come sempre abbondante, segnala un lungo elenco di tecniche AJAX.

Segnalo quelli che mi sono piaciuti di più:

Faccio notare che buona parte delle tecniche segnalate pos­sono essere rifatte piuttosto facilmente anche con YUI.

Costruttori in JavaScript

Sunday, February 24th, 2008

Forse c’è ancora qualcuno JavaScript un linguaggio giocattolo, al confronto di quelli più seri come Java, C# e compagnia bella; perlomeno, è quello che pensavo io, ma mi sono dovuto ricredere.

In ogni caso, lasciando perdere le noiosis­sime diatribe sul linguaggio migliore dell’universo è certo che, per uno come che ha programmato in Java per un bel po’, alcune caratteristiche di JavaScript sembrano piuttosto bizzarre.

Prediamo ad esempio i costruttori: anch se la sintassi è molto familiare, il loro comportamento e le loro caratteristiche sono completamente diverse da quelle che ci si aspetterebbe usando come modello un linguaggio come Java.

Dato che non voglio spacciarmi per un guru di JavaScript, lascio a questo articolo il compito di illuminarvi sulla questione dei costruttori in JavaScript.

Qual’è stata la vostra esperienza con JavaScript? Come ci siete arrivati?

Semplificare i form con i widgets

Sunday, February 24th, 2008

In questo articolo viene pre­sentato un sistema per semplificare, o forse sarebbe meglio dire compattare, un form complesso.

L’idea di fondo è quella di ridurre le diverse sezioni del form in widget espandibili e contraibili a piacere per ridurre al minimo lo spazio occupato.

A mio parere si sorvola troppo sui difetti di una soluzione del genere che sono due: le opzioni disponibili non sono tutte immediatamente visibili e il numero di click neces­sari per selezionare un’opzione. So benis­simo che è proprio lo scopo dell’articolo quello di mostrare un modo per ridurre l’affollamento dello schermo ma non dobbiamo dimenticare che ogni soluzione ha i suoi pro e contro.

Nel complesso rimane comunque un approccio piuttosto efficace, calcolando il fatto che le etichette rias­suntive pre­sentate quando l’elemento è contratto pos­sono fornire informazioni sulla selezione attiva in quel momento.

Che ne pensate? Avete usato soluzioni del genere? In particolare per applicazioni web che pre­vedono inserimenti dati massicci?

XSS su una banca italiana">Attacco XSS su una banca italiana

Wednesday, January 9th, 2008

Spesso mi cullo nell’illusione che, essendo l’Italia relativamente attardata nelle nuove tecnologie, i problemi di sicurezza siano un problema poco diffuso; e forse la cosa è vera in termini statistici. Ma questo articolo su Netcraft ci ricorda che non è assolutemente così.

Si tratta di un attacco di “Cross–site scripting” che inietta un form per dirottar i dati inseriti su un server a Taiwan, per poi ridirezionare l’utente sul sito corretto.

Da leggere con attenzione.

YUI 2.4">YUI 2.4

Thursday, December 6th, 2007

Yahoo! ha rilasciato YUI 2.4, in cui la novità più interes­sante è l’implementazione dei selector CSS 3 via JavaScript.

Prima o poi rifarò questo sito usando quello librerie… Nel frattempo credo che proverò ad usare il rich text editor in un nuovo progetto che (spero) partirà il pros­simo anno. Sono curioso…

PNG trasparenti con IE6: un’alternativa a “filter”">PNG trasparenti con IE6: un’alternativa a “filter”

Saturday, December 1st, 2007

Questo articolo su 24 ways descrive una soluzione che mitiga questi problemi, tramite uno script chiamata SuperSleight.
Per quanto sia tentato di rubricare il supporto a IE6 come superato, visto il rilascio di IE7 da un anno, la verità è che non è ancora arrivato il momento. Di conseguenza articoli come quello che vado a segnalarvi hanno ancora un loro perché.

Tradizionalmente, per poter usare PNG trasparenti con IE6, si faceva ricorso alla proprietà filter che, inutile dirlo, era proprietaria di Microsoft. Inoltre questa soluzione ha diversi difetti:

  • le immagini in background non pos­sono essere posizionate o ripetute;
  • problemi con i link e con i form che si trovano sopra l’immagine;
  • l’implementazione è comunque laboriosa.

Le novità di WebKit 3

Friday, November 16th, 2007

Post rias­suntivo sulle nuove features nel WebKit.

La prima mi lascia perplesso: “Enhanced Rich Text Editing”. Sì, è vero, adesso posso usare l’editor di WordPress in modo più umano, il “piccolo” problema è che i para­grafi vengono mangiati ad ogni submit. Non molto utile…

Per il resto direi che ci siamo: pre­stazioni aumentate, supporto per SVG, XPath, CSS3 e i tool di sviluppo

Safari: supporto per i database sul client

Thursday, November 1st, 2007

Il team dietro il WebKit continua a sfornare migliorie su migliorie.

Adesso è il turno dei dati: le specifiche per l’HTML 5 pre­vedono la pos­sibilità di utilizzare database SQL direttamente dal client, rendendo pos­sibili cose come questa, riportata nel post:


var database = openDatabase("Database Name", "Database Version");

database.executeSql("SELECT * FROM test", function(result1) {
   // do something with the results
   database.executeSql("DROP TABLE test", function(result2) {
     // do some more stuff
     alert("My second database query finished executing!");
   });
});

« Voci Precedenti