La webapp in beta

Dalla scorsa settimana ad oggi ho imparato molto di programmazione web e gran parte è merito dei vostri preziosi consigli. La scorsa volta vi avevo esternato quelle che erano le due maggiori cause di grane in cui mi ero imbattuto. La prima era la mancanza di debug, la seconda l'estrema variabilità di risultati passando da un browser moderno ad Internet Explorer.

La prima perplessità mi è stata perfettamente risolta grazie all'utilizzo di Firebug, un fantastico add-on di Firefox che non solo ti permette di debuggare gli script della tua web-app, ma puoi facilmente modificare gli stili, verificare gli elementi della pagina e collocare gli spazi. Firebug ovviamente funziona con Firefox, per testare gli altri browser si può pensare di utilizzare Firebug Lite, ma non sono riuscito a sfruttarlo altrettanto bene, oppure si deve ricorrere a strumenti dedicati. Chrome ha uno strumento per gli sviluppatori che è praticamente identico a Firebug, fa esattamente le stesse cose, con una grafica un po' diversa e, a parer mio, un po' meno intuitiva. Internet Explorer 9 è anch'esso dotato di un strumento per sviluppatori, sulla falsa riga degli altri, ma meno performante.

Se possiamo dire risolto il problema del debug, resta assolutamente aperto e irrisolvibile quello della compatibilità tra browser diversi. Ho provato la web app su 3 browser, Firefox e Chrome direttamente mentre scrivevo il codice, e IE9 a bocce ferme con l'unico scopo di farla funzionare. E' incredibile come lo stesso codice che si presenta identico e funziona allo stesso modo su FF e Chrome, con IE9 non appaia nemmeno nel browser elencando una serie di errori che non stanno né in cielo né in terra.

Ad un certo punto, sulla strada verso il manicomio, ho deciso che avrei accettato qualche piccola incompatibilità di Explorer e temo che gli utenti della versione 7 e precedenti non riusciranno a utilizzare la web app. Mi verrebbe voglia di suggerirgli un browser degno di quel nome.

Come fare una web app ben progettata

Certamente non con la strategia "Trial & Error" che al più può funzionare per calcolare l'area del quadrato. Per progettare una web-app come si deve si devono tenere in contro tre colonne: il contenitore HTML, lo stile CSS e il codice. Questi tre elementi fanno ognuno il loro compito separatamente, e il buon programmatore deve essere in grado di non mischiarne i ruoli. Ma la differenza tra un'applicazione ben progettata e una di successo è data dall'interazione tra questi tre elementi che deve essere mantenuta al giusto livello, in modo da trasformare l'applicazione da una semplice pagina web a qualcosa di più vivo e interattivo. Un aspetto fondamentale è l'utilizzo di DOM, che si trova proprio nel baricentro di questo triangolo equilatero e permettendone una fusione dolce e in genere ottimi risultati.

Dicevamo del trial & error che è da evitare, e l'unico modo per farlo è allontanare i polpastrelli dalla tastiera per qualche minuto e tornare a scuola per un po' di studio. Un sito molto ben fatto che vi presenta tutti questi aspetti è w3school - ve lo avevo detto che si doveva tornare a scuola. Contiene tanti tutorial, referenze complete a HTML, CSS, Javascript, DOM (non ben fatto come gli altri) e un ottimo servizio di "Try it", così che al termine della lezione puoi provare direttamente dal browser quello che hai imparato. w3school ti spiega anche alcune delle particolarità dei browser e come evitare problemi con Explorer, ma è una battaglia troppo difficile per essere vinta.

Come è venuta la mia app

Per essere in beta e anche la mia numero 1, direi piuttosto bene. E' persino semplice da inglobare in una pagina web esterna: importare le dipendenze, caricare un foglio di stile dedicato, aggiungere un evento per far partire in automatico l'applicazione e una semplice <div> nella pagina web.

E' tutto quasi pronto per il debutto al grande pubblico, ma se qualcuno di voi volesse avere un'anteprima e si offrisse come beta-tester gratuito, lasci un commento qui sotto e ci accordiamo su come fare.

Mi stavo già quasi dimenticando. Nello sviluppo ho trovato un paio di pecche nel framework utilizzato e ho sottomesso alcuni bachi e richieste di miglioramento. Quella che mi sta più a cuore è questa quindi se mi volete aiutare non dovete fare altro che cliccare sul link e aggiungere una stellina!